ui: 全站统一暗色主题设计系统

- globals.css 定义语义化 token (background/surface/elevated/border/muted/dim/accent)
- 所有页面和组件迁移至暗色 token，移除硬编码 bg-white/text-zinc-*/bg-gray-*
- RestaurantCard 和 MatchResult 适配暗色卡片风格
- 按钮颜色分层：系统CTA(accent)/模式强调(橙/紫)/危险(rose)/次级(surface)
- 修复 room 页深色文字在深背景不可见的可访问性问题

src/app/globals.css

@@ -1,13 +1,27 @@
 @import "tailwindcss";
 
 :root {
-  --background: #f8f9fa;
-  --foreground: #171717;
+  --background: #030712;
+  --foreground: #f3f4f6;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+
+  --color-surface: #111827;
+  --color-elevated: #1f2937;
+  --color-inset: #0a0f1a;
+
+  --color-border: #1f2937;
+  --color-subtle: #374151;
+
+  --color-muted: #6b7280;
+  --color-dim: #4b5563;
+
+  --color-accent: #10b981;
+  --color-accent-hover: #059669;
+
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
@@ -39,3 +53,8 @@ body {
   from { opacity: 1; }
   to { opacity: 0; }
 }
+
+@keyframes shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}

src/app/invite/[id]/page.tsx

@@ -62,7 +62,7 @@ export default function InvitePage() {
   if (status === "loading") {
     return (
       <div className="flex min-h-dvh flex-col items-center justify-center bg-background">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
       </div>
     );
   }
@@ -70,16 +70,16 @@ export default function InvitePage() {
   if (status === "not_found") {
     return (
       <div className="flex min-h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
-        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-zinc-100">
-          <Utensils size={28} className="text-zinc-400" />
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-surface ring-1 ring-border">
+          <Utensils size={28} className="text-muted" />
         </div>
-        <h1 className="text-xl font-bold text-zinc-900">房间不存在</h1>
-        <p className="text-center text-sm text-zinc-500">
+        <h1 className="text-xl font-bold text-white">房间不存在</h1>
+        <p className="text-center text-sm text-muted">
           这个房间已过期或不存在，请让朋友重新分享链接
         </p>
         <button
           onClick={() => router.push("/")}
-          className="mt-2 rounded-xl bg-emerald-500 px-6 py-2.5 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600"
+          className="mt-2 rounded-xl bg-accent px-6 py-2.5 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
         >
           自己创建房间
         </button>
@@ -88,44 +88,44 @@ export default function InvitePage() {
   }
 
   return (
-    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12">
+    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6 py-12 overflow-y-auto scrollbar-none">
       <motion.div
         className="flex flex-col items-center"
         initial={{ y: -20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5 }}
       >
-        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-emerald-500 shadow-lg shadow-emerald-200">
+        <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-accent shadow-lg shadow-accent/20">
           {scene === "drink" ? <Coffee size={28} className="text-white" /> : <Utensils size={28} className="text-white" />}
         </div>
 
-        <h1 className="mt-5 text-3xl font-black tracking-tight text-zinc-900">
+        <h1 className="mt-5 text-3xl font-black tracking-tight text-white">
           NoWhatever
         </h1>
-        <p className="mt-0.5 text-sm font-medium tracking-widest text-zinc-400">
+        <p className="mt-0.5 text-sm font-medium tracking-widest text-muted">
           别说随便
         </p>
       </motion.div>
 
       <motion.div
-        className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl border border-emerald-100 bg-emerald-50/50 px-6 py-5"
+        className="mt-8 flex w-full max-w-xs flex-col items-center gap-2 rounded-2xl bg-surface px-6 py-5 ring-1 ring-accent/30"
         initial={{ y: 10, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ duration: 0.5, delay: 0.1 }}
       >
-        <p className="text-center text-lg font-bold text-zinc-800">
+        <p className="text-center text-lg font-bold text-white">
           {sceneConfig.inviteText}
         </p>
-        <div className="flex items-center gap-2 text-sm text-zinc-500">
-          <span className="rounded-full bg-white px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-emerald-600 shadow-sm">
+        <div className="flex items-center gap-2 text-sm text-muted">
+          <span className="rounded-full bg-elevated px-2.5 py-0.5 font-mono text-base font-bold tracking-widest text-accent ring-1 ring-border">
             {roomId}
           </span>
         </div>
         {userCount > 0 && (
-          <div className="flex items-center gap-1 text-xs text-zinc-400">
+          <div className="flex items-center gap-1 text-xs text-muted">
             <Users size={13} />
             <span>
-              已有 <span className="font-semibold text-emerald-500">{userCount}</span> 人在房间
+              已有 <span className="font-semibold text-accent">{userCount}</span> 人在房间
             </span>
           </div>
         )}
@@ -138,35 +138,35 @@ export default function InvitePage() {
         transition={{ duration: 0.5, delay: 0.2 }}
       >
         <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-emerald-50">
-            <Users size={18} className="text-emerald-500" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/15">
+            <Users size={18} className="text-accent" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">加入房间</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+          <span className="text-xs font-semibold text-gray-300">加入房间</span>
+          <span className="text-[10px] leading-tight text-muted text-center">
             和朋友一起
           </span>
         </div>
 
-        <ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
+        <ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />
 
         <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-50">
-            <Heart size={18} className="text-amber-500" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/15">
+            <Heart size={18} className="text-amber-400" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">各自滑卡</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+          <span className="text-xs font-semibold text-gray-300">各自滑卡</span>
+          <span className="text-[10px] leading-tight text-muted text-center">
             右滑喜欢的店
           </span>
         </div>
 
-        <ChevronRight size={14} className="mt-3 shrink-0 text-zinc-300" />
+        <ChevronRight size={14} className="mt-3 shrink-0 text-subtle" />
 
         <div className="flex flex-col items-center gap-1.5 w-20">
-          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-50">
-            <Sparkles size={18} className="text-rose-500" />
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-rose-500/15">
+            <Sparkles size={18} className="text-rose-400" />
           </div>
-          <span className="text-xs font-semibold text-zinc-700">匹配结果</span>
-          <span className="text-[10px] leading-tight text-zinc-400 text-center">
+          <span className="text-xs font-semibold text-gray-300">匹配结果</span>
+          <span className="text-[10px] leading-tight text-muted text-center">
             滑中同一家就去
           </span>
         </div>
@@ -181,7 +181,7 @@ export default function InvitePage() {
         <button
           onClick={handleJoin}
           disabled={joining}
-          className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-emerald-500 text-sm font-bold text-white shadow-md shadow-emerald-200 transition-colors hover:bg-emerald-600 disabled:opacity-50"
+          className="flex h-12 w-full items-center justify-center gap-2 rounded-xl bg-accent text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
         >
           {joining ? (
             <>

src/app/profile/page.tsx

@@ -26,7 +26,6 @@ import type { UserProfile, UserPreferences, DecisionRecord, FavoriteRecord, Rest
 
 function firstImage(r: Restaurant): string {
   if (r.images?.length > 0) return r.images[0];
-  // backward compat: old DB records may have `image` instead of `images`
   const legacy = (r as unknown as Record<string, unknown>).image;
   return typeof legacy === "string" ? legacy : "";
 }
@@ -253,7 +252,7 @@ export default function ProfilePage() {
   if (loading) {
     return (
       <div className="flex min-h-dvh items-center justify-center bg-background">
-        <Loader2 size={24} className="animate-spin text-zinc-400" />
+        <Loader2 size={24} className="animate-spin text-muted" />
       </div>
     );
   }
@@ -266,21 +265,21 @@ export default function ProfilePage() {
       : `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(r.name)}`;
 
   return (
-    <div className="min-h-dvh bg-background pb-16">
+    <div className="min-h-dvh bg-background pb-16 overflow-y-auto scrollbar-none">
       <nav className="sticky top-0 z-10 flex h-14 items-center gap-3 bg-background/80 px-4 backdrop-blur-sm">
         <button
           onClick={() => router.push("/")}
-          className="flex h-8 w-8 items-center justify-center rounded-full text-zinc-500 transition-colors active:bg-zinc-100"
+          className="flex h-8 w-8 items-center justify-center rounded-full text-muted transition-colors active:bg-elevated"
         >
           <ArrowLeft size={20} />
         </button>
-        <h1 className="text-base font-bold text-zinc-900">个人中心</h1>
+        <h1 className="text-base font-bold text-white">个人中心</h1>
       </nav>
 
       <div className="mx-auto max-w-sm px-5">
         {/* Profile card */}
         <motion.div
-          className="rounded-2xl bg-white p-4 shadow-sm"
+          className="rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
         >
@@ -290,7 +289,7 @@ export default function ProfilePage() {
               className={`relative flex h-14 w-14 items-center justify-center rounded-2xl text-2xl transition-transform active:scale-95 ${getAvatarBg(profile.avatar)}`}
             >
               {profile.avatar}
-              <span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-white text-zinc-400 shadow-sm">
+              <span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-surface text-muted shadow-sm ring-1 ring-border">
                 <Edit3 size={10} />
               </span>
             </button>
@@ -306,34 +305,34 @@ export default function ProfilePage() {
                     }}
                     maxLength={16}
                     autoFocus
-                    className="h-8 flex-1 rounded-lg border border-zinc-200 px-2 text-sm text-zinc-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                    className="h-8 flex-1 rounded-lg border-none bg-elevated px-2 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
                   />
                   <button
                     onClick={handleSaveUsername}
                     disabled={usernameSaving}
-                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500 text-white disabled:opacity-50"
+                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-accent text-white disabled:opacity-50"
                   >
                     {usernameSaving ? <Loader2 size={14} className="animate-spin" /> : <Check size={14} />}
                   </button>
                   <button
                     onClick={() => { setEditingUsername(false); setUsernameMsg(""); }}
-                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-100 text-zinc-500"
+                    className="flex h-8 w-8 items-center justify-center rounded-lg bg-elevated text-muted"
                   >
                     <X size={14} />
                   </button>
                 </div>
               ) : (
                 <div className="flex items-center gap-2">
-                  <h2 className="text-lg font-bold text-zinc-900">{profile.username}</h2>
+                  <h2 className="text-lg font-bold text-white">{profile.username}</h2>
                   <button
                     onClick={() => { setEditingUsername(true); setNewUsername(profile.username); }}
-                    className="text-zinc-400 transition-colors active:text-zinc-600"
+                    className="text-muted transition-colors active:text-gray-300"
                   >
                     <Edit3 size={13} />
                   </button>
                 </div>
               )}
-              {usernameMsg && <p className="mt-1 text-xs text-rose-500">{usernameMsg}</p>}
+              {usernameMsg && <p className="mt-1 text-xs text-rose-400">{usernameMsg}</p>}
             </div>
           </div>
 
@@ -354,8 +353,8 @@ export default function ProfilePage() {
                       onClick={() => handleSaveAvatar(a.emoji)}
                       className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
                         profile.avatar === a.emoji
-                          ? `${a.bg} scale-110 ring-2 ring-emerald-400 ring-offset-1`
-                          : "bg-zinc-50 hover:bg-zinc-100"
+                          ? `${a.bg} scale-110 ring-2 ring-accent ring-offset-1 ring-offset-surface`
+                          : "bg-elevated hover:bg-subtle"
                       }`}
                     >
                       {a.emoji}
@@ -369,7 +368,7 @@ export default function ProfilePage() {
 
         {/* Change password */}
         <motion.div
-          className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
+          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.05 }}
@@ -378,8 +377,8 @@ export default function ProfilePage() {
             onClick={() => { setEditingPassword(!editingPassword); setPasswordMsg(""); }}
             className="flex w-full items-center gap-2"
           >
-            <Lock size={15} className="text-zinc-400" />
-            <h3 className="text-sm font-semibold text-zinc-700">修改密码</h3>
+            <Lock size={15} className="text-muted" />
+            <h3 className="text-sm font-semibold text-gray-300">修改密码</h3>
           </button>
 
           <AnimatePresence>
@@ -393,46 +392,46 @@ export default function ProfilePage() {
               >
                 <div className="mt-3 flex flex-col gap-3">
                   <div>
-                    <p className="text-xs text-zinc-400">当前密码</p>
+                    <p className="text-xs text-muted">当前密码</p>
                     <div className="relative mt-1">
                       <input
                         type={showPassword ? "text" : "password"}
                         value={currentPassword}
                         onChange={(e) => { setCurrentPassword(e.target.value); setPasswordMsg(""); }}
-                        className="h-9 w-full rounded-lg border border-zinc-200 px-3 pr-9 text-sm text-zinc-800 outline-none focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                        className="h-9 w-full rounded-lg border-none bg-elevated px-3 pr-9 text-sm text-white outline-none ring-1 ring-border focus:ring-2 focus:ring-accent/50"
                       />
                       <button
                         type="button"
                         onClick={() => setShowPassword(!showPassword)}
-                        className="absolute right-2.5 top-1/2 -translate-y-1/2 text-zinc-400"
+                        className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted"
                       >
                         {showPassword ? <EyeOff size={14} /> : <Eye size={14} />}
                       </button>
                     </div>
                   </div>
                   <div>
-                    <p className="text-xs text-zinc-400">新密码</p>
+                    <p className="text-xs text-muted">新密码</p>
                     <input
                       type={showPassword ? "text" : "password"}
                       value={newPassword}
                       onChange={(e) => { setNewPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="至少 6 个字符"
-                      className="mt-1 h-9 w-full rounded-lg border border-zinc-200 px-3 text-sm text-zinc-800 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                     />
                   </div>
                   <div>
-                    <p className="text-xs text-zinc-400">确认新密码</p>
+                    <p className="text-xs text-muted">确认新密码</p>
                     <input
                       type={showPassword ? "text" : "password"}
                       value={confirmPassword}
                       onChange={(e) => { setConfirmPassword(e.target.value); setPasswordMsg(""); }}
                       placeholder="再次输入新密码"
-                      className="mt-1 h-9 w-full rounded-lg border border-zinc-200 px-3 text-sm text-zinc-800 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                      className="mt-1 h-9 w-full rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                     />
                   </div>
 
                   {passwordMsg && (
-                    <p className={`text-xs ${passwordMsg.includes("错误") || passwordMsg.includes("失败") || passwordMsg.includes("不一致") || passwordMsg.includes("至少") ? "text-rose-500" : "text-emerald-500"}`}>
+                    <p className={`text-xs ${passwordMsg.includes("错误") || passwordMsg.includes("失败") || passwordMsg.includes("不一致") || passwordMsg.includes("至少") ? "text-rose-400" : "text-accent"}`}>
                       {passwordMsg}
                     </p>
                   )}
@@ -440,7 +439,7 @@ export default function ProfilePage() {
                   <button
                     onClick={handleSavePassword}
                     disabled={passwordSaving}
-                    className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-emerald-500 text-xs font-semibold text-white transition-colors hover:bg-emerald-600 disabled:opacity-50"
+                    className="flex h-9 items-center justify-center gap-1.5 rounded-lg bg-accent text-xs font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
                   >
                     {passwordSaving ? <Loader2 size={14} className="animate-spin" /> : "保存新密码"}
                   </button>
@@ -452,15 +451,15 @@ export default function ProfilePage() {
 
         {/* Email binding */}
         <motion.div
-          className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
+          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.1 }}
         >
           <div className="flex items-center gap-2">
-            <Mail size={15} className="text-zinc-400" />
-            <h3 className="text-sm font-semibold text-zinc-700">绑定邮箱</h3>
-            <span className="text-[10px] text-zinc-400">（可选）</span>
+            <Mail size={15} className="text-muted" />
+            <h3 className="text-sm font-semibold text-gray-300">绑定邮箱</h3>
+            <span className="text-[10px] text-dim">（可选）</span>
           </div>
           <div className="mt-3 flex gap-2">
             <input
@@ -471,18 +470,18 @@ export default function ProfilePage() {
                 setEmail(e.target.value);
                 setEmailMsg("");
               }}
-              className="h-9 flex-1 rounded-lg border border-zinc-200 bg-white px-3 text-sm text-zinc-700 outline-none placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+              className="h-9 flex-1 rounded-lg border-none bg-elevated px-3 text-sm text-white outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 focus:ring-accent/50"
             />
             <button
               onClick={handleSaveEmail}
               disabled={emailSaving}
-              className="flex h-9 items-center gap-1 rounded-lg bg-emerald-500 px-3 text-xs font-semibold text-white transition-colors hover:bg-emerald-600 disabled:opacity-50"
+              className="flex h-9 items-center gap-1 rounded-lg bg-accent px-3 text-xs font-semibold text-white transition-colors hover:bg-accent-hover disabled:opacity-50"
             >
               {emailSaving ? <Loader2 size={13} className="animate-spin" /> : "保存"}
             </button>
           </div>
           {emailMsg && (
-            <p className={`mt-2 text-xs ${emailMsg.includes("失败") || emailMsg.includes("不正确") ? "text-rose-500" : "text-emerald-500"}`}>
+            <p className={`mt-2 text-xs ${emailMsg.includes("失败") || emailMsg.includes("不正确") ? "text-rose-400" : "text-accent"}`}>
               {emailMsg}
             </p>
           )}
@@ -490,7 +489,7 @@ export default function ProfilePage() {
 
         {/* Decision History */}
         <motion.div
-          className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
+          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.15 }}
@@ -500,15 +499,15 @@ export default function ProfilePage() {
             className="flex w-full items-center justify-between"
           >
             <div className="flex items-center gap-2">
-              <Clock size={15} className="text-zinc-400" />
-              <h3 className="text-sm font-semibold text-zinc-700">
+              <Clock size={15} className="text-muted" />
+              <h3 className="text-sm font-semibold text-gray-300">
                 决策记录 {history.length > 0 && `(${history.length})`}
               </h3>
             </div>
             <motion.span
               animate={{ rotate: showHistory ? 180 : 0 }}
               transition={{ duration: 0.2 }}
-              className="text-zinc-400"
+              className="text-muted"
             >
               <ChevronDown size={16} />
             </motion.span>
@@ -525,10 +524,10 @@ export default function ProfilePage() {
               >
                 {historyLoading ? (
                   <div className="flex justify-center py-6">
-                    <Loader2 size={18} className="animate-spin text-zinc-300" />
+                    <Loader2 size={18} className="animate-spin text-muted" />
                   </div>
                 ) : history.length === 0 ? (
-                  <p className="py-6 text-center text-xs text-zinc-400">
+                  <p className="py-6 text-center text-xs text-muted">
                     还没有决策记录
                   </p>
                 ) : (
@@ -539,7 +538,7 @@ export default function ProfilePage() {
                         href={amapNavUrl(d.restaurantData)}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="flex gap-3 rounded-xl bg-zinc-50 p-2.5 transition-colors active:bg-zinc-100"
+                        className="flex gap-3 rounded-xl bg-elevated p-2.5 transition-colors active:bg-subtle"
                       >
                         {firstImage(d.restaurantData) && (
                           <img
@@ -550,8 +549,8 @@ export default function ProfilePage() {
                           />
                         )}
                         <div className="flex min-w-0 flex-1 flex-col justify-center">
-                          <p className="truncate text-sm font-semibold text-zinc-800">{d.restaurantName}</p>
-                          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400">
+                          <p className="truncate text-sm font-semibold text-white">{d.restaurantName}</p>
+                          <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                             <span>{d.matchType === "unanimous" ? "全员一致" : "最佳匹配"}</span>
                             <span>{d.participants} 人参与</span>
                             <span>{new Date(d.createdAt).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })}</span>
@@ -568,7 +567,7 @@ export default function ProfilePage() {
 
         {/* Favorites */}
         <motion.div
-          className="mt-4 rounded-2xl bg-white p-4 shadow-sm"
+          className="mt-4 rounded-2xl bg-surface p-4 ring-1 ring-border"
           initial={{ y: 10, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.2 }}
@@ -578,15 +577,15 @@ export default function ProfilePage() {
             className="flex w-full items-center justify-between"
           >
             <div className="flex items-center gap-2">
-              <Star size={15} className="text-zinc-400" />
-              <h3 className="text-sm font-semibold text-zinc-700">
+              <Star size={15} className="text-muted" />
+              <h3 className="text-sm font-semibold text-gray-300">
                 收藏餐厅 {favorites.length > 0 && `(${favorites.length})`}
               </h3>
             </div>
             <motion.span
               animate={{ rotate: showFavorites ? 180 : 0 }}
               transition={{ duration: 0.2 }}
-              className="text-zinc-400"
+              className="text-muted"
             >
               <ChevronDown size={16} />
             </motion.span>
@@ -603,10 +602,10 @@ export default function ProfilePage() {
               >
                 {favLoading ? (
                   <div className="flex justify-center py-6">
-                    <Loader2 size={18} className="animate-spin text-zinc-300" />
+                    <Loader2 size={18} className="animate-spin text-muted" />
                   </div>
                 ) : favorites.length === 0 ? (
-                  <p className="py-6 text-center text-xs text-zinc-400">
+                  <p className="py-6 text-center text-xs text-muted">
                     还没有收藏的餐厅
                   </p>
                 ) : (
@@ -616,7 +615,7 @@ export default function ProfilePage() {
                       return (
                         <div
                           key={f.id}
-                          className="flex gap-3 rounded-xl bg-zinc-50 p-2.5"
+                          className="flex gap-3 rounded-xl bg-elevated p-2.5"
                         >
                           {firstImage(r) && (
                             <img
@@ -627,8 +626,8 @@ export default function ProfilePage() {
                             />
                           )}
                           <div className="flex min-w-0 flex-1 flex-col justify-center">
-                            <p className="truncate text-sm font-semibold text-zinc-800">{r.name}</p>
-                            <div className="mt-0.5 flex items-center gap-2 text-[11px] text-zinc-400">
+                            <p className="truncate text-sm font-semibold text-white">{r.name}</p>
+                            <div className="mt-0.5 flex items-center gap-2 text-[11px] text-muted">
                               <span className="flex items-center gap-0.5">
                                 <Star size={10} className="fill-amber-400 text-amber-400" />
                                 {r.rating}
@@ -644,7 +643,7 @@ export default function ProfilePage() {
                           </div>
                           <button
                             onClick={() => handleRemoveFavorite(f.id)}
-                            className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-zinc-400 transition-colors active:bg-zinc-200 active:text-rose-500"
+                            className="flex h-8 w-8 shrink-0 items-center justify-center self-center rounded-full text-muted transition-colors active:bg-subtle active:text-rose-400"
                           >
                             <Trash2 size={14} />
                           </button>
@@ -667,7 +666,7 @@ export default function ProfilePage() {
         >
           <button
             onClick={handleLogout}
-            className="flex items-center gap-1.5 text-xs font-medium text-zinc-400 transition-colors hover:text-rose-500"
+            className="flex items-center gap-1.5 text-xs font-medium text-muted transition-colors hover:text-rose-400"
           >
             <LogOut size={13} />
             退出登录
@@ -678,7 +677,7 @@ export default function ProfilePage() {
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-zinc-900 px-4 py-2.5 text-xs font-medium text-white shadow-lg"
+            className="fixed left-1/2 top-10 z-60 -translate-x-1/2 rounded-xl bg-elevated px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-subtle"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}

src/app/room/[id]/page.tsx

@@ -93,11 +93,11 @@ export default function RoomPage() {
     return (
       <div className="flex h-dvh flex-col items-center justify-center gap-4 bg-background px-6">
         <p className="text-4xl">🍜</p>
-        <p className="text-base font-semibold text-zinc-700">房间不存在或已过期</p>
-        <p className="text-sm text-zinc-400">房间号可能有误，或房间已超过 24 小时</p>
+        <p className="text-base font-semibold text-gray-300">房间不存在或已过期</p>
+        <p className="text-sm text-muted">房间号可能有误，或房间已超过 24 小时</p>
         <button
           onClick={() => router.push("/")}
-          className="mt-2 h-10 rounded-xl bg-emerald-500 px-6 text-sm font-bold text-white shadow-sm transition-colors hover:bg-emerald-600"
+          className="mt-2 h-10 rounded-xl bg-accent px-6 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
         >
           返回首页
         </button>
@@ -113,8 +113,8 @@ export default function RoomPage() {
   if (!ready) {
     return (
       <div className="flex h-dvh flex-col items-center justify-center gap-3 bg-background">
-        <div className="h-6 w-6 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
-        <p className="text-sm text-zinc-400">正在加载数据...</p>
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-subtle border-t-accent" />
+        <p className="text-sm text-muted">正在加载数据...</p>
       </div>
     );
   }