From e10e3c823019c40f7273241bf7c44826bc39fc5a Mon Sep 17 00:00:00 2001
From: kurihada <kurihada@qq.com>
Date: Thu, 26 Feb 2026 11:27:18 +0800
Subject: [PATCH] =?UTF-8?q?ui:=20=E5=85=A8=E7=AB=99=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E6=9A=97=E8=89=B2=E4=B8=BB=E9=A2=98=E8=AE=BE=E8=AE=A1=E7=B3=BB?=
 =?UTF-8?q?=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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                  |  23 +++++-
 src/app/invite/[id]/page.tsx         |  62 +++++++--------
 src/app/profile/page.tsx             | 109 +++++++++++++--------------
 src/app/room/[id]/page.tsx           |  10 +--
 src/components/ActionButtons.tsx     |   4 +-
 src/components/AuthModal.tsx         |  40 +++++-----
 src/components/LeaveConfirmModal.tsx |  16 ++--
 src/components/MatchResult.tsx       |  87 +++++++++++----------
 src/components/QrInviteModal.tsx     |  24 +++---
 src/components/RestaurantCard.tsx    |  28 +++----
 src/components/RoomManageModal.tsx   |  38 +++++-----
 src/components/SwipeDeck.tsx         |  32 ++++----
 src/components/TopNav.tsx            |  18 ++---
 13 files changed, 258 insertions(+), 233 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 22f9ba3..0790fe0 100644
--- a/src/app/globals.css
+++ b/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%); }
+}
diff --git a/src/app/invite/[id]/page.tsx b/src/app/invite/[id]/page.tsx
index 84ef7e8..cccc86b 100644
--- a/src/app/invite/[id]/page.tsx
+++ b/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 ? (
             <>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
index dc8a67d..93aefdb 100644
--- a/src/app/profile/page.tsx
+++ b/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%" }}
diff --git a/src/app/room/[id]/page.tsx b/src/app/room/[id]/page.tsx
index 989f1ea..7d027f0 100644
--- a/src/app/room/[id]/page.tsx
+++ b/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>
     );
   }
diff --git a/src/components/ActionButtons.tsx b/src/components/ActionButtons.tsx
index 86f4238..29f600f 100644
--- a/src/components/ActionButtons.tsx
+++ b/src/components/ActionButtons.tsx
@@ -16,7 +16,7 @@ export default function ActionButtons({
   return (
     <div className="relative z-10 flex items-center justify-center gap-6 pb-5 pt-3">
       <motion.button
-        className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-rose-200/50 ring-1 ring-rose-100 disabled:opacity-40"
+        className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-rose-500/10 ring-1 ring-rose-500/20 disabled:opacity-40"
         whileTap={{ scale: 0.85 }}
         whileHover={{ scale: 1.08 }}
         onClick={() => onAction("left")}
@@ -27,7 +27,7 @@ export default function ActionButtons({
       </motion.button>
 
       <motion.button
-        className="flex h-13 w-13 items-center justify-center rounded-full bg-white shadow-lg shadow-emerald-200/50 ring-1 ring-emerald-100 disabled:opacity-40"
+        className="flex h-13 w-13 items-center justify-center rounded-full bg-surface shadow-lg shadow-emerald-500/10 ring-1 ring-emerald-500/20 disabled:opacity-40"
         whileTap={{ scale: 0.85 }}
         whileHover={{ scale: 1.08 }}
         onClick={() => onAction("right")}
diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx
index 1a233ba..3bcaf1b 100644
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -117,7 +117,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
       {open && (
         <motion.div
           ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
+          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -125,36 +125,36 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
           onClick={handleBackdropClick}
         >
           <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-white px-5 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
+            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
             transition={{ type: "spring", damping: 28, stiffness: 350 }}
           >
             <div className="mb-4 flex items-center justify-between">
-              <span className="text-lg font-bold text-zinc-900">欢迎</span>
+              <span className="text-lg font-bold text-white">欢迎</span>
               <button
                 onClick={onClose}
-                className="flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
+                className="flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
               >
                 <X size={16} />
               </button>
             </div>
 
             {/* Tabs */}
-            <div className="flex gap-1 rounded-xl bg-zinc-100 p-1">
+            <div className="flex gap-1 rounded-xl bg-elevated p-1">
               {(["login", "register"] as const).map((t) => (
                 <button
                   key={t}
                   onClick={() => switchTab(t)}
                   className={`relative flex-1 rounded-lg py-2 text-sm font-semibold transition-colors ${
-                    tab === t ? "text-zinc-900" : "text-zinc-400"
+                    tab === t ? "text-white" : "text-muted"
                   }`}
                 >
                   {tab === t && (
                     <motion.div
                       layoutId="auth-tab"
-                      className="absolute inset-0 rounded-lg bg-white shadow-sm"
+                      className="absolute inset-0 rounded-lg bg-subtle shadow-sm"
                       transition={{ type: "spring", stiffness: 400, damping: 30 }}
                     />
                   )}
@@ -167,7 +167,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
 
             {/* Username */}
             <div className="mt-5">
-              <p className="text-xs font-medium text-zinc-500">用户名</p>
+              <p className="text-xs font-medium text-muted">用户名</p>
               <input
                 type="text"
                 value={username}
@@ -177,13 +177,13 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
                 }}
                 placeholder={tab === "register" ? "2-16 个字符" : "请输入用户名"}
                 maxLength={16}
-                className="mt-2 h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
               />
             </div>
 
             {/* Password */}
             <div className="mt-4">
-              <p className="text-xs font-medium text-zinc-500">密码</p>
+              <p className="text-xs font-medium text-muted">密码</p>
               <div className="relative mt-2">
                 <input
                   type={showPassword ? "text" : "password"}
@@ -193,12 +193,12 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
                     setError("");
                   }}
                   placeholder={tab === "register" ? "至少 6 个字符" : "请输入密码"}
-                  className="h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 pr-10 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                  className="h-11 w-full rounded-xl border-none bg-elevated px-4 pr-10 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                 />
                 <button
                   type="button"
                   onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-400 transition-colors active:text-zinc-600"
+                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted transition-colors active:text-gray-300"
                 >
                   {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
                 </button>
@@ -208,7 +208,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
             {/* Confirm password (register only) */}
             {tab === "register" && (
               <div className="mt-4">
-                <p className="text-xs font-medium text-zinc-500">确认密码</p>
+                <p className="text-xs font-medium text-muted">确认密码</p>
                 <input
                   type={showPassword ? "text" : "password"}
                   value={confirmPassword}
@@ -217,7 +217,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
                     setError("");
                   }}
                   placeholder="再次输入密码"
-                  className="mt-2 h-11 w-full rounded-xl border border-zinc-200 bg-white px-4 text-sm text-zinc-800 outline-none transition-colors placeholder:text-zinc-300 focus:border-emerald-400 focus:ring-2 focus:ring-emerald-100"
+                  className="mt-2 h-11 w-full rounded-xl border-none bg-elevated px-4 text-sm text-white outline-none ring-1 ring-border transition-colors placeholder:text-dim focus:ring-2 focus:ring-accent/50"
                 />
               </div>
             )}
@@ -225,9 +225,9 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
             {/* Avatar picker (register only) */}
             {tab === "register" && (
               <div className="mt-4">
-                <p className="text-xs font-medium text-zinc-500">
+                <p className="text-xs font-medium text-muted">
                   选择头像
-                  <span className="ml-1 text-zinc-300">（可选）</span>
+                  <span className="ml-1 text-dim">（可选）</span>
                 </p>
                 <div className="mt-2 grid grid-cols-6 gap-2">
                   {AVATARS.map((a) => (
@@ -236,8 +236,8 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
                       onClick={() => setAvatar(a.emoji)}
                       className={`flex h-11 w-11 items-center justify-center rounded-xl text-xl transition-all ${
                         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}
@@ -249,7 +249,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
 
             {error && (
               <motion.p
-                className="mt-3 text-center text-xs font-medium text-rose-500"
+                className="mt-3 text-center text-xs font-medium text-rose-400"
                 initial={{ opacity: 0, y: -4 }}
                 animate={{ opacity: 1, y: 0 }}
               >
@@ -260,7 +260,7 @@ export default function AuthModal({ open, onClose, onAuth }: AuthModalProps) {
             <button
               onClick={handleSubmit}
               disabled={loading}
-              className="mt-5 flex h-11 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="mt-5 flex h-11 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"
             >
               {loading ? (
                 <>
diff --git a/src/components/LeaveConfirmModal.tsx b/src/components/LeaveConfirmModal.tsx
index aaddda7..3920615 100644
--- a/src/components/LeaveConfirmModal.tsx
+++ b/src/components/LeaveConfirmModal.tsx
@@ -26,7 +26,7 @@ export default function LeaveConfirmModal({
       {open && (
         <motion.div
           ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm"
+          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -34,34 +34,34 @@ export default function LeaveConfirmModal({
           onClick={handleBackdropClick}
         >
           <motion.div
-            className="mx-6 w-full max-w-xs rounded-2xl bg-white px-6 py-6 shadow-2xl"
+            className="mx-6 w-full max-w-xs rounded-2xl bg-surface px-6 py-6 shadow-2xl ring-1 ring-border"
             initial={{ scale: 0.9, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             exit={{ scale: 0.9, opacity: 0 }}
             transition={{ type: "spring", damping: 25, stiffness: 350 }}
           >
             <div className="flex flex-col items-center">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-50">
-                <LogOut size={22} className="text-rose-500" />
+              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-500/15">
+                <LogOut size={22} className="text-rose-400" />
               </div>
 
-              <h2 className="mt-4 text-base font-bold text-zinc-900">
+              <h2 className="mt-4 text-base font-bold text-white">
                 确定要退出房间吗？
               </h2>
-              <p className="mt-1.5 text-center text-xs leading-relaxed text-zinc-400">
+              <p className="mt-1.5 text-center text-xs leading-relaxed text-muted">
                 退出后你的滑卡进度不会丢失，可以用房间号重新加入
               </p>
 
               <div className="mt-5 flex w-full gap-2.5">
                 <button
                   onClick={onCancel}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50"
+                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
                 >
                   继续滑卡
                 </button>
                 <button
                   onClick={onConfirm}
-                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-md shadow-rose-200 transition-colors active:bg-rose-600"
+                  className="flex h-11 flex-1 items-center justify-center rounded-xl bg-rose-500 text-sm font-semibold text-white shadow-lg shadow-rose-500/20 transition-colors active:bg-rose-600"
                 >
                   退出房间
                 </button>
diff --git a/src/components/MatchResult.tsx b/src/components/MatchResult.tsx
index bef706b..deb561d 100644
--- a/src/components/MatchResult.tsx
+++ b/src/components/MatchResult.tsx
@@ -58,7 +58,7 @@ function NoMatchResult({
 
   return (
     <motion.div
-      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-linear-to-b from-zinc-600 to-zinc-800 px-6 py-10"
+      className="fixed inset-0 z-50 flex flex-col items-center justify-center overflow-y-auto bg-background px-6 py-10"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.4 }}
@@ -68,7 +68,7 @@ function NoMatchResult({
         animate={{ scale: 1, rotate: 0 }}
         transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
       >
-        <SearchX size={56} className="text-zinc-400" />
+        <SearchX size={56} className="text-muted" />
       </motion.div>
 
       <motion.h1
@@ -81,7 +81,7 @@ function NoMatchResult({
       </motion.h1>
 
       <motion.p
-        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-zinc-400"
+        className="mt-2 max-w-[16rem] text-center text-sm leading-relaxed text-muted"
         initial={{ y: 20, opacity: 0 }}
         animate={{ y: 0, opacity: 1 }}
         transition={{ delay: 0.45 }}
@@ -98,7 +98,7 @@ function NoMatchResult({
         <motion.button
           onClick={onReset}
           disabled={resetting}
-          className="flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold text-zinc-800 shadow-lg transition-colors hover:bg-zinc-100 disabled:opacity-50"
+          className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover disabled:opacity-50"
           whileTap={{ scale: 0.95 }}
         >
           <RotateCcw size={15} className={resetting ? "animate-spin" : ""} />
@@ -107,7 +107,7 @@ function NoMatchResult({
 
         <motion.button
           onClick={() => router.push("/")}
-          className="flex items-center justify-center gap-2 rounded-full bg-white/15 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/25"
+          className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-muted ring-1 ring-border transition-colors hover:bg-elevated"
           whileTap={{ scale: 0.95 }}
         >
           <Home size={15} />
@@ -132,7 +132,7 @@ function RunnerUpCard({
       href={buildNavUrl(restaurant)}
       target="_blank"
       rel="noopener noreferrer"
-      className="flex gap-3 rounded-xl bg-white/10 p-2.5 backdrop-blur-sm transition-colors hover:bg-white/20"
+      className="flex gap-3 rounded-xl bg-surface/80 p-2.5 ring-1 ring-border/50 backdrop-blur-sm transition-colors hover:bg-elevated/80"
     >
       {restaurant.images?.[0] && (
         <img
@@ -146,7 +146,7 @@ function RunnerUpCard({
         <p className="truncate text-sm font-bold text-white">
           {restaurant.name}
         </p>
-        <div className="mt-1 flex items-center gap-2 text-xs text-white/70">
+        <div className="mt-1 flex items-center gap-2 text-xs text-gray-400">
           <span className="flex items-center gap-0.5">
             <Star size={11} className="fill-yellow-300 text-yellow-300" />
             {restaurant.rating}
@@ -159,7 +159,7 @@ function RunnerUpCard({
             </span>
           )}
         </div>
-        <p className="mt-0.5 text-[11px] font-medium text-amber-200">
+        <p className="mt-0.5 text-[11px] font-medium text-amber-400">
           {likes}/{userCount} 人想去
         </p>
       </div>
@@ -282,25 +282,28 @@ export default function MatchResult({
 
   return (
     <motion.div
-      className={`fixed inset-0 z-50 flex flex-col items-center overflow-y-auto px-6 py-10 ${
-        isUnanimous
-          ? "bg-linear-to-b from-emerald-500 to-teal-600"
-          : "bg-linear-to-b from-amber-500 to-orange-500"
-      }`}
+      className="fixed inset-0 z-50 flex flex-col items-center overflow-y-auto bg-background px-6 py-10"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ duration: 0.4 }}
     >
-      <div className="flex w-full max-w-sm flex-1 flex-col items-center justify-center">
+      {/* Accent glow behind icon */}
+      <div
+        className={`pointer-events-none fixed left-1/2 top-0 h-72 w-72 -translate-x-1/2 -translate-y-1/3 rounded-full blur-3xl ${
+          isUnanimous ? "bg-emerald-500/20" : "bg-amber-500/20"
+        }`}
+      />
+
+      <div className="relative flex w-full max-w-sm flex-1 flex-col items-center justify-center">
         <motion.div
           initial={{ scale: 0, rotate: -20 }}
           animate={{ scale: 1, rotate: 0 }}
           transition={{ type: "spring", stiffness: 200, damping: 12, delay: 0.2 }}
         >
           {isUnanimous ? (
-            <PartyPopper size={56} className="text-yellow-300" />
+            <PartyPopper size={56} className="text-emerald-400" />
           ) : (
-            <Trophy size={56} className="text-yellow-200" />
+            <Trophy size={56} className="text-amber-400" />
           )}
         </motion.div>
 
@@ -314,7 +317,7 @@ export default function MatchResult({
         </motion.h1>
 
         <motion.p
-          className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-100" : "text-amber-100"}`}
+          className={`mt-1 text-sm font-medium ${isUnanimous ? "text-emerald-400" : "text-amber-400"}`}
           initial={{ y: 20, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ delay: 0.45 }}
@@ -326,7 +329,7 @@ export default function MatchResult({
 
         {isUnanimous && (
           <motion.div
-            className="mt-3 flex items-center gap-2 rounded-full bg-white/20 px-4 py-1.5 backdrop-blur-sm"
+            className="mt-3 flex items-center gap-2 rounded-full bg-emerald-500/15 px-4 py-1.5 ring-1 ring-emerald-500/30"
             initial={{ scale: 0, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
             transition={{
@@ -336,16 +339,17 @@ export default function MatchResult({
               delay: 0.55,
             }}
           >
-            <Zap size={14} className="fill-yellow-300 text-yellow-300" />
-            <span className="text-xs font-bold text-white">
+            <Zap size={14} className="fill-emerald-400 text-emerald-400" />
+            <span className="text-xs font-bold text-emerald-300">
               默契度 100% · {userCount} 人全员一致
             </span>
-            <Zap size={14} className="fill-yellow-300 text-yellow-300" />
+            <Zap size={14} className="fill-emerald-400 text-emerald-400" />
           </motion.div>
         )}
 
+        {/* Result card */}
         <motion.div
-          className="mt-6 w-full overflow-hidden rounded-2xl bg-white shadow-2xl"
+          className="mt-6 w-full overflow-hidden rounded-2xl bg-surface shadow-2xl ring-1 ring-border"
           initial={{ y: 60, opacity: 0 }}
           animate={{ y: 0, opacity: 1 }}
           transition={{ type: "spring", stiffness: 180, damping: 18, delay: 0.5 }}
@@ -360,22 +364,22 @@ export default function MatchResult({
           )}
           <div className="p-4">
             <div className="flex items-start justify-between gap-2">
-              <h2 className="text-lg font-bold leading-tight text-zinc-900">
+              <h2 className="text-lg font-bold leading-tight text-white">
                 {restaurant.name}
               </h2>
               {restaurant.category && (
-                <span className="shrink-0 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-semibold text-emerald-600">
+                <span className="shrink-0 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-semibold text-emerald-400">
                   {restaurant.category}
                 </span>
               )}
             </div>
 
-            <div className="mt-2 flex items-center gap-3 text-sm text-zinc-500">
+            <div className="mt-2 flex items-center gap-3 text-sm text-muted">
               <span className="flex items-center gap-1">
                 <Star size={13} className="fill-amber-400 text-amber-400" />
                 {restaurant.rating}
               </span>
-              <span className="font-semibold text-emerald-600">
+              <span className="font-semibold text-emerald-400">
                 {restaurant.price}
               </span>
               {restaurant.distance && (
@@ -387,13 +391,13 @@ export default function MatchResult({
             </div>
 
             {restaurant.address && (
-              <p className="mt-2 text-xs leading-relaxed text-zinc-400">
+              <p className="mt-2 text-xs leading-relaxed text-muted">
                 {restaurant.address}
               </p>
             )}
 
             {restaurant.openTime && (
-              <div className="mt-1.5 flex items-center gap-1 text-xs text-zinc-400">
+              <div className="mt-1.5 flex items-center gap-1 text-xs text-muted">
                 <Clock size={12} />
                 <span>{restaurant.openTime}</span>
               </div>
@@ -407,7 +411,7 @@ export default function MatchResult({
                   .map((t) => (
                     <span
                       key={t}
-                      className="rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
+                      className="rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
                     >
                       {t.trim()}
                     </span>
@@ -417,6 +421,7 @@ export default function MatchResult({
           </div>
         </motion.div>
 
+        {/* Action buttons */}
         <motion.div
           className="mt-5 flex w-full flex-col gap-2.5"
           initial={{ y: 30, opacity: 0 }}
@@ -427,9 +432,7 @@ export default function MatchResult({
             href={buildNavUrl(restaurant)}
             target="_blank"
             rel="noopener noreferrer"
-            className={`flex items-center justify-center gap-2 rounded-full bg-white px-8 py-3 text-sm font-bold shadow-lg transition-colors hover:bg-emerald-50 ${
-              isUnanimous ? "text-emerald-600" : "text-orange-600"
-            }`}
+            className="flex items-center justify-center gap-2 rounded-full bg-accent px-8 py-3 text-sm font-bold text-white shadow-lg shadow-accent/20 transition-colors hover:bg-accent-hover"
             whileTap={{ scale: 0.95 }}
           >
             <Navigation size={16} />
@@ -439,7 +442,7 @@ export default function MatchResult({
           {restaurant.tel && (
             <motion.a
               href={`tel:${restaurant.tel}`}
-              className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
+              className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
               whileTap={{ scale: 0.95 }}
             >
               <Phone size={15} />
@@ -449,7 +452,7 @@ export default function MatchResult({
 
           <motion.button
             onClick={handleShare}
-            className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30"
+            className="flex items-center justify-center gap-2 rounded-full bg-surface px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated"
             whileTap={{ scale: 0.95 }}
           >
             <Share2 size={15} />
@@ -457,6 +460,7 @@ export default function MatchResult({
           </motion.button>
         </motion.div>
 
+        {/* Runner ups */}
         {!isUnanimous && runnerUpRestaurants.length > 0 && (
           <motion.div
             className="mt-5 w-full"
@@ -466,7 +470,7 @@ export default function MatchResult({
           >
             <button
               onClick={() => setShowRunnerUps((v) => !v)}
-              className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-white/80 transition-colors hover:text-white"
+              className="flex w-full items-center justify-center gap-1.5 py-2 text-xs font-semibold text-muted transition-colors hover:text-foreground"
             >
               其他候选（{runnerUpRestaurants.length}）
               <motion.span
@@ -500,6 +504,7 @@ export default function MatchResult({
           </motion.div>
         )}
 
+        {/* Bottom actions */}
         <motion.div
           className="mt-5 flex w-full flex-col items-center gap-2.5"
           initial={{ opacity: 0 }}
@@ -511,7 +516,7 @@ export default function MatchResult({
               <motion.button
                 onClick={() => onNarrow(narrowIds)}
                 disabled={resetting}
-                className="flex w-full items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50"
+                className="flex w-full items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
                 whileTap={{ scale: 0.95 }}
               >
                 <Swords size={15} />
@@ -519,7 +524,9 @@ export default function MatchResult({
               </motion.button>
               <motion.button
                 onClick={() => router.push("/")}
-                className="flex items-center gap-1.5 text-sm font-medium text-amber-200 underline underline-offset-2 hover:text-white"
+                className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
+                  isUnanimous ? "text-emerald-400" : "text-amber-400"
+                }`}
               >
                 <RefreshCw size={13} />
                 换一批店
@@ -530,7 +537,7 @@ export default function MatchResult({
               <motion.button
                 onClick={onReset}
                 disabled={resetting}
-                className="flex items-center justify-center gap-2 rounded-full bg-white/20 px-8 py-3 text-sm font-bold text-white backdrop-blur-sm transition-colors hover:bg-white/30 disabled:opacity-50"
+                className="flex items-center justify-center gap-2 rounded-full bg-elevated px-8 py-3 text-sm font-bold text-gray-300 ring-1 ring-border transition-colors hover:bg-subtle disabled:opacity-50"
                 whileTap={{ scale: 0.95 }}
               >
                 <RotateCcw size={14} className={resetting ? "animate-spin" : ""} />
@@ -539,7 +546,7 @@ export default function MatchResult({
               <motion.button
                 onClick={() => router.push("/")}
                 className={`flex items-center gap-1.5 text-sm font-medium underline underline-offset-2 hover:text-white ${
-                  isUnanimous ? "text-emerald-200" : "text-amber-200"
+                  isUnanimous ? "text-emerald-400" : "text-amber-400"
                 }`}
               >
                 <RefreshCw size={13} />
@@ -553,7 +560,7 @@ export default function MatchResult({
       <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-surface px-4 py-2.5 text-xs font-medium text-white shadow-lg ring-1 ring-border"
             initial={{ opacity: 0, y: -12, x: "-50%" }}
             animate={{ opacity: 1, y: 0, x: "-50%" }}
             exit={{ opacity: 0, y: -12, x: "-50%" }}
diff --git a/src/components/QrInviteModal.tsx b/src/components/QrInviteModal.tsx
index 3e4f4a9..a0bf83d 100644
--- a/src/components/QrInviteModal.tsx
+++ b/src/components/QrInviteModal.tsx
@@ -66,7 +66,7 @@ export default function QrInviteModal({
       {open && (
         <motion.div
           ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
+          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -74,7 +74,7 @@ export default function QrInviteModal({
           onClick={handleBackdropClick}
         >
           <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-white px-6 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
+            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-6 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
@@ -82,33 +82,33 @@ export default function QrInviteModal({
           >
             <button
               onClick={onClose}
-              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
+              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
             >
               <X size={16} />
             </button>
 
             <div className="flex flex-col items-center">
-              <div className="flex items-center gap-2 text-zinc-800">
-                <QrCode size={18} className="text-emerald-500" />
+              <div className="flex items-center gap-2 text-white">
+                <QrCode size={18} className="text-accent" />
                 <h2 className="text-lg font-bold">邀请饭搭子</h2>
               </div>
-              <p className="mt-1 text-xs text-zinc-400">
+              <p className="mt-1 text-xs text-muted">
                 {sceneConfig.qrSubtitle}
               </p>
 
-              <div className="mt-5 rounded-2xl border-2 border-dashed border-emerald-200 bg-emerald-50/30 p-4">
+              <div className="mt-5 rounded-2xl border-2 border-dashed border-subtle bg-elevated/50 p-4">
                 <QRCodeSVG
                   value={inviteUrl}
                   size={180}
                   level="M"
                   bgColor="transparent"
-                  fgColor="#18181b"
+                  fgColor="#e5e7eb"
                 />
               </div>
 
               <div className="mt-4 flex items-center gap-2">
-                <span className="text-xs text-zinc-400">房间号</span>
-                <span className="rounded-full bg-zinc-100 px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-emerald-600">
+                <span className="text-xs text-muted">房间号</span>
+                <span className="rounded-full bg-elevated px-3 py-1 font-mono text-base font-bold tracking-[0.2em] text-accent ring-1 ring-border">
                   {roomId}
                 </span>
               </div>
@@ -116,14 +116,14 @@ export default function QrInviteModal({
               <div className="mt-5 flex w-full gap-2.5">
                 <button
                   onClick={handleCopy}
-                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl border border-zinc-200 bg-white text-sm font-semibold text-zinc-700 transition-colors active:bg-zinc-50"
+                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-elevated text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
                 >
                   <Copy size={15} />
                   复制链接
                 </button>
                 <button
                   onClick={handleShare}
-                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-emerald-500 text-sm font-semibold text-white shadow-md shadow-emerald-200 transition-colors active:bg-emerald-600"
+                  className="flex h-11 flex-1 items-center justify-center gap-1.5 rounded-xl bg-accent text-sm font-semibold text-white shadow-lg shadow-accent/20 transition-colors active:bg-accent-hover"
                 >
                   <Share2 size={15} />
                   发送邀请
diff --git a/src/components/RestaurantCard.tsx b/src/components/RestaurantCard.tsx
index c22cf39..0e54e9b 100644
--- a/src/components/RestaurantCard.tsx
+++ b/src/components/RestaurantCard.tsx
@@ -150,14 +150,14 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
   const dianpingUrl = `https://m.dianping.com/search/keyword/0/0_${encodeURIComponent(restaurant.name)}`;
 
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-white shadow-xl">
-      <div className="relative h-[58%] w-full shrink-0 overflow-hidden bg-zinc-100">
+    <div className="flex h-full w-full flex-col overflow-hidden rounded-2xl bg-surface shadow-xl ring-1 ring-border">
+      <div className="relative h-[58%] w-full shrink-0 overflow-hidden bg-elevated">
         {hasImage && <ImageGallery images={images} name={restaurant.name} />}
         <div className="pointer-events-none absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent" />
 
         <div className="absolute bottom-3 left-4 flex items-center gap-1.5">
           {restaurant.category && (
-            <span className="rounded-full bg-white/90 px-2.5 py-0.5 text-xs font-semibold text-zinc-700 shadow-sm backdrop-blur-sm">
+            <span className="rounded-full bg-elevated/90 px-2.5 py-0.5 text-xs font-semibold text-gray-200 shadow-sm backdrop-blur-sm">
               {restaurant.category}
             </span>
           )}
@@ -172,7 +172,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
 
       <div className="flex flex-1 flex-col justify-center gap-2 px-5 py-3">
         <div className="flex items-start justify-between gap-2">
-          <h2 className="text-lg font-bold leading-tight text-zinc-900">
+          <h2 className="text-lg font-bold leading-tight text-white">
             {restaurant.name}
           </h2>
           <div className="mt-0.5 flex shrink-0 gap-1.5">
@@ -183,8 +183,8 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
                 onTouchStart={stopAll}
                 className={`flex items-center justify-center rounded-full p-1 transition-colors ${
                   favorited
-                    ? "bg-amber-100 text-amber-500"
-                    : "bg-zinc-50 text-zinc-400 active:bg-amber-50 active:text-amber-500"
+                    ? "bg-amber-500/20 text-amber-400"
+                    : "bg-elevated text-muted active:bg-amber-500/15 active:text-amber-400"
                 }`}
               >
                 <Bookmark size={13} className={favorited ? "fill-amber-400" : ""} />
@@ -194,7 +194,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
               onClick={openLink(amapUrl)}
               onPointerDown={stopAll}
               onTouchStart={stopAll}
-              className="flex items-center gap-0.5 rounded-full bg-blue-50 px-2 py-0.5 text-[11px] font-medium text-blue-500 transition-colors active:bg-blue-100"
+              className="flex items-center gap-0.5 rounded-full bg-blue-500/15 px-2 py-0.5 text-[11px] font-medium text-blue-400 transition-colors active:bg-blue-500/25"
             >
               高德
               <ExternalLink size={10} />
@@ -203,7 +203,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
               onClick={openLink(dianpingUrl)}
               onPointerDown={stopAll}
               onTouchStart={stopAll}
-              className="flex items-center gap-0.5 rounded-full bg-orange-50 px-2 py-0.5 text-[11px] font-medium text-orange-500 transition-colors active:bg-orange-100"
+              className="flex items-center gap-0.5 rounded-full bg-orange-500/15 px-2 py-0.5 text-[11px] font-medium text-orange-400 transition-colors active:bg-orange-500/25"
             >
               点评
               <ExternalLink size={10} />
@@ -214,17 +214,17 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
           <div className="flex items-center gap-1">
             <Star size={14} className="fill-amber-400 text-amber-400" />
-            <span className="text-sm font-semibold text-zinc-800">
+            <span className="text-sm font-semibold text-foreground">
               {restaurant.rating}
             </span>
           </div>
 
-          <span className="text-sm font-semibold text-emerald-600">
+          <span className="text-sm font-semibold text-emerald-400">
             {restaurant.price}
           </span>
 
           {restaurant.distance && (
-            <div className="flex items-center gap-1 text-zinc-400">
+            <div className="flex items-center gap-1 text-muted">
               <MapPin size={13} />
               <span className="text-xs">{restaurant.distance}</span>
             </div>
@@ -232,13 +232,13 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
         </div>
 
         {restaurant.address && (
-          <p className="truncate text-xs leading-tight text-zinc-400">
+          <p className="truncate text-xs leading-tight text-muted">
             {restaurant.address}
           </p>
         )}
 
         {restaurant.openTime && (
-          <div className="flex items-center gap-1 text-xs text-zinc-400">
+          <div className="flex items-center gap-1 text-xs text-muted">
             <Clock size={12} />
             <span>{restaurant.openTime}</span>
           </div>
@@ -252,7 +252,7 @@ export default function RestaurantCard({ restaurant, likeCount = 0 }: Restaurant
               .map((t) => (
                 <span
                   key={t}
-                  className="shrink-0 rounded bg-amber-50 px-1.5 py-0.5 text-[10px] font-medium text-amber-700"
+                  className="shrink-0 rounded bg-amber-500/10 px-1.5 py-0.5 text-[10px] font-medium text-amber-400"
                 >
                   {t.trim()}
                 </span>
diff --git a/src/components/RoomManageModal.tsx b/src/components/RoomManageModal.tsx
index 22c6e69..7e3211f 100644
--- a/src/components/RoomManageModal.tsx
+++ b/src/components/RoomManageModal.tsx
@@ -95,7 +95,7 @@ export default function RoomManageModal({
       {open && (
         <motion.div
           ref={backdropRef}
-          className="fixed inset-0 z-50 flex items-end justify-center bg-black/40 backdrop-blur-sm sm:items-center"
+          className="fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-sm sm:items-center"
           initial={{ opacity: 0 }}
           animate={{ opacity: 1 }}
           exit={{ opacity: 0 }}
@@ -103,7 +103,7 @@ export default function RoomManageModal({
           onClick={handleBackdropClick}
         >
           <motion.div
-            className="relative w-full max-w-sm rounded-t-3xl bg-white px-5 pb-8 pt-5 shadow-2xl sm:rounded-3xl sm:pb-6"
+            className="relative w-full max-w-sm rounded-t-3xl bg-surface px-5 pb-8 pt-5 shadow-2xl ring-1 ring-border sm:rounded-3xl sm:pb-6"
             initial={{ y: "100%" }}
             animate={{ y: 0 }}
             exit={{ y: "100%" }}
@@ -111,16 +111,16 @@ export default function RoomManageModal({
           >
             <button
               onClick={onClose}
-              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-zinc-100 text-zinc-400 transition-colors active:bg-zinc-200"
+              className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-elevated text-muted transition-colors active:bg-subtle"
             >
               <X size={16} />
             </button>
 
             <div className="flex items-center gap-2">
-              <Crown size={18} className="text-amber-500" />
-              <h2 className="text-lg font-bold text-zinc-900">房间管理</h2>
+              <Crown size={18} className="text-amber-400" />
+              <h2 className="text-lg font-bold text-white">房间管理</h2>
             </div>
-            <p className="mt-1 text-xs text-zinc-400">
+            <p className="mt-1 text-xs text-muted">
               房间号 {roomId}
             </p>
 
@@ -131,8 +131,8 @@ export default function RoomManageModal({
                 disabled={loading !== null}
                 className={`flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-colors disabled:opacity-50 ${
                   locked
-                    ? "border border-emerald-200 bg-emerald-50 text-emerald-700 active:bg-emerald-100"
-                    : "border border-zinc-200 bg-white text-zinc-700 active:bg-zinc-50"
+                    ? "bg-accent/15 text-accent ring-1 ring-accent/30 active:bg-accent/25"
+                    : "bg-elevated text-gray-300 ring-1 ring-border active:bg-subtle"
                 }`}
               >
                 {loading === "lock" || loading === "unlock" ? (
@@ -148,7 +148,7 @@ export default function RoomManageModal({
 
             {/* User list with kick */}
             <div className="mt-5">
-              <h3 className="text-xs font-semibold text-zinc-500">
+              <h3 className="text-xs font-semibold text-muted">
                 房间成员（{users.length}）
               </h3>
               <div className="mt-2 flex flex-col gap-1.5">
@@ -164,7 +164,7 @@ export default function RoomManageModal({
                   return (
                     <div
                       key={uid}
-                      className="flex items-center gap-2.5 rounded-xl bg-zinc-50 px-3 py-2.5"
+                      className="flex items-center gap-2.5 rounded-xl bg-elevated px-3 py-2.5"
                     >
                       <span
                         className={`inline-flex h-8 w-8 items-center justify-center rounded-full text-base ${bg}`}
@@ -174,17 +174,17 @@ export default function RoomManageModal({
                       <div className="flex min-w-0 flex-1 flex-col">
                         <div className="flex items-center gap-1.5">
                           {isCreator && (
-                            <span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-500">
+                            <span className="flex items-center gap-0.5 text-[10px] font-bold text-amber-400">
                               <Crown size={10} />
                               房主
                             </span>
                           )}
-                          <span className="truncate text-xs font-medium text-zinc-500">
+                          <span className="truncate text-xs font-medium text-gray-400">
                             {displayName}
                           </span>
                         </div>
                         <span
-                          className={`text-[11px] ${finished ? "text-emerald-500" : "text-zinc-400"}`}
+                          className={`text-[11px] ${finished ? "text-accent" : "text-muted"}`}
                         >
                           {swiped}/{totalCards}
                           {finished ? " 已完成" : " 进行中"}
@@ -211,7 +211,7 @@ export default function RoomManageModal({
                               </button>
                               <button
                                 onClick={() => setConfirmKick(null)}
-                                className="rounded-lg bg-zinc-200 px-2.5 py-1 text-[11px] font-semibold text-zinc-600 transition-colors active:bg-zinc-300"
+                                className="rounded-lg bg-subtle px-2.5 py-1 text-[11px] font-semibold text-gray-400 transition-colors active:bg-elevated"
                               >
                                 取消
                               </button>
@@ -219,7 +219,7 @@ export default function RoomManageModal({
                           ) : (
                             <button
                               onClick={() => setConfirmKick(uid)}
-                              className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-zinc-400 transition-colors active:bg-zinc-100 active:text-rose-500"
+                              className="flex items-center gap-0.5 rounded-lg px-2 py-1 text-[11px] font-medium text-muted transition-colors active:bg-subtle active:text-rose-400"
                             >
                               <UserX size={13} />
                               移出
@@ -236,8 +236,8 @@ export default function RoomManageModal({
             {/* End voting */}
             <div className="mt-5">
               {confirmEnd ? (
-                <div className="flex flex-col gap-2 rounded-xl border border-amber-200 bg-amber-50 p-3">
-                  <p className="text-xs font-medium text-amber-800">
+                <div className="flex flex-col gap-2 rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/30">
+                  <p className="text-xs font-medium text-amber-300">
                     确定要结束投票吗？将根据当前已有的投票结果直接结算。
                   </p>
                   <div className="flex gap-2">
@@ -255,7 +255,7 @@ export default function RoomManageModal({
                     </button>
                     <button
                       onClick={() => setConfirmEnd(false)}
-                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-white text-xs font-semibold text-zinc-600 transition-colors active:bg-zinc-50"
+                      className="flex h-9 flex-1 items-center justify-center rounded-lg bg-elevated text-xs font-semibold text-gray-400 transition-colors active:bg-subtle"
                     >
                       再等等
                     </button>
@@ -265,7 +265,7 @@ export default function RoomManageModal({
                 <button
                   onClick={() => setConfirmEnd(true)}
                   disabled={loading !== null}
-                  className="flex h-11 w-full items-center justify-center gap-2 rounded-xl border border-amber-200 bg-amber-50 text-sm font-semibold text-amber-700 transition-colors active:bg-amber-100 disabled:opacity-50"
+                  className="flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-amber-500/10 text-sm font-semibold text-amber-400 ring-1 ring-amber-500/30 transition-colors active:bg-amber-500/20 disabled:opacity-50"
                 >
                   <Flag size={15} />
                   结束投票（立即出结果）
diff --git a/src/components/SwipeDeck.tsx b/src/components/SwipeDeck.tsx
index 5efcb3a..5ba0159 100644
--- a/src/components/SwipeDeck.tsx
+++ b/src/components/SwipeDeck.tsx
@@ -28,11 +28,11 @@ function UserProgressBar({
 
   const myProfile = userProfiles[userId];
   const myAvatar = myProfile?.avatar ?? getAvatar(userId).emoji;
-  const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
+  const myAvatarBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-500/20";
 
   return (
     <div className="mt-1.5 flex flex-wrap items-center gap-x-3 gap-y-1">
-      <span className="flex items-center gap-1 text-[11px] tabular-nums text-emerald-500">
+      <span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
         <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
           {myAvatar}
         </span>
@@ -47,12 +47,12 @@ function UserProgressBar({
         return (
           <span
             key={id}
-            className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-zinc-400"}`}
+            className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-muted"}`}
           >
             <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${bg} text-[10px] leading-none`}>
               {emoji}
             </span>
-            {label && <span className="max-w-[3rem] truncate">{label}</span>}
+            {label && <span className="max-w-12 truncate">{label}</span>}
             {count}/{total}
             {finished && <Check size={10} className="text-emerald-400" />}
           </span>
@@ -84,9 +84,9 @@ function WaitingProgress({
   const myBg = myProfile ? getAvatarBg(myProfile.avatar) : "bg-emerald-100";
 
   return (
-    <div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-zinc-50 px-4 py-3">
+    <div className="flex w-60 flex-col gap-2.5 rounded-2xl bg-surface px-4 py-3 ring-1 ring-border">
       <div className="flex items-center justify-between">
-        <span className="flex items-center gap-1.5 text-xs font-medium text-emerald-600">
+        <span className="flex items-center gap-1.5 text-xs font-medium text-accent">
           <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full ${myBg} text-sm leading-none`}>
             {myEmoji}
           </span>
@@ -105,17 +105,17 @@ function WaitingProgress({
         return (
           <div key={id} className="flex flex-col gap-1">
             <div className="flex items-center justify-between">
-              <span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-emerald-600" : "text-zinc-500"}`}>
-                <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-100" : bg}`}>
+              <span className={`flex items-center gap-1.5 text-xs font-medium ${finished ? "text-accent" : "text-muted"}`}>
+                <span className={`inline-flex h-5 w-5 items-center justify-center rounded-full text-sm leading-none ${finished ? "bg-emerald-500/20" : bg}`}>
                   {emoji}
                 </span>
-                {label && <span className="max-w-[3rem] truncate">{label}</span>}
+                {label && <span className="max-w-12 truncate">{label}</span>}
                 {count}/{total}
               </span>
               {finished && <Check size={14} className="text-emerald-400" />}
             </div>
             {!finished && (
-              <div className="ml-7 h-1 overflow-hidden rounded-full bg-zinc-200">
+              <div className="ml-7 h-1 overflow-hidden rounded-full bg-elevated">
                 <motion.div
                   className="h-full rounded-full bg-amber-400"
                   animate={{ width: `${pct}%` }}
@@ -127,7 +127,7 @@ function WaitingProgress({
         );
       })}
 
-      <p className="text-center text-[10px] text-zinc-400">
+      <p className="text-center text-[10px] text-muted">
         {finishedCount}/{others.length} 人已完成
       </p>
     </div>
@@ -326,7 +326,7 @@ export default function SwipeDeck({
       {!allSwiped && !resolvedMatchId && (
         <div className="mx-auto w-full max-w-sm px-4 pb-1">
           <div className="flex items-center gap-2">
-            <div className="h-1 flex-1 overflow-hidden rounded-full bg-zinc-100">
+            <div className="h-1 flex-1 overflow-hidden rounded-full bg-elevated">
               <motion.div
                 className="h-full rounded-full bg-emerald-400"
                 initial={{ width: 0 }}
@@ -336,13 +336,13 @@ export default function SwipeDeck({
                 transition={{ type: "spring", stiffness: 300, damping: 30 }}
               />
             </div>
-            <span className="shrink-0 text-[11px] tabular-nums text-zinc-400">
+            <span className="shrink-0 text-[11px] tabular-nums text-muted">
               {currentIndex}/{restaurants.length}
             </span>
             <button
               onClick={handleUndo}
               disabled={currentIndex === 0}
-              className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-500 transition-colors active:bg-amber-50 disabled:opacity-0"
+              className="flex shrink-0 items-center gap-0.5 rounded-full px-1.5 py-0.5 text-[11px] font-medium text-amber-400 transition-colors active:bg-amber-500/15 disabled:opacity-0"
             >
               <Undo2 size={12} />
               撤回
@@ -385,8 +385,8 @@ export default function SwipeDeck({
 
           {showWaiting && (
             <div className="flex h-full flex-col items-center justify-center gap-4">
-              <div className="h-5 w-5 animate-spin rounded-full border-2 border-zinc-300 border-t-emerald-500" />
-              <p className="text-sm font-medium text-zinc-500">等待其他人完成选择</p>
+              <div className="h-5 w-5 animate-spin rounded-full border-2 border-subtle border-t-accent" />
+              <p className="text-sm font-medium text-muted">等待其他人完成选择</p>
               <WaitingProgress
                 userId={userId}
                 swipeCounts={swipeCounts}
diff --git a/src/components/TopNav.tsx b/src/components/TopNav.tsx
index 2d5758f..29cd89f 100644
--- a/src/components/TopNav.tsx
+++ b/src/components/TopNav.tsx
@@ -51,7 +51,7 @@ export default function TopNav({
         <div className="flex items-center gap-1.5">
           <button
             onClick={() => setShowQr(true)}
-            className="flex items-center gap-1 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-600 transition-colors active:bg-emerald-100"
+            className="flex items-center gap-1 rounded-full bg-accent/15 px-2.5 py-1 text-xs font-semibold text-accent transition-colors active:bg-accent/25"
           >
             <QrCode size={13} />
             邀请
@@ -59,7 +59,7 @@ export default function TopNav({
           {isCreator && (
             <button
               onClick={() => setShowManage(true)}
-              className="flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-600 transition-colors active:bg-amber-100"
+              className="flex items-center gap-1 rounded-full bg-amber-500/15 px-2.5 py-1 text-xs font-semibold text-amber-400 transition-colors active:bg-amber-500/25"
             >
               <Crown size={13} />
               管理
@@ -67,27 +67,27 @@ export default function TopNav({
           )}
         </div>
 
-        <h1 className="text-center text-base font-bold tracking-tight text-zinc-900">
+        <h1 className="text-center text-base font-bold tracking-tight text-white">
           <span className="block leading-tight">NoWhatever</span>
-          <span className="block text-[10px] font-medium tracking-widest text-zinc-400">
+          <span className="block text-[10px] font-medium tracking-widest text-muted">
             别说随便
           </span>
         </h1>
 
-        <div className="flex items-center justify-end gap-1.5 text-xs text-zinc-500">
+        <div className="flex items-center justify-end gap-1.5 text-xs text-muted">
           {locked && (
             <Lock size={12} className="text-amber-500" />
           )}
-          <span className="rounded-full bg-zinc-100 px-2 py-0.5 font-medium">
+          <span className="rounded-full bg-surface px-2 py-0.5 font-medium text-gray-400">
             {roomId}
           </span>
           <div className="flex items-center gap-0.5">
             <Users size={13} />
-            <span className="font-semibold text-emerald-500">{userCount}</span>
+            <span className="font-semibold text-accent">{userCount}</span>
           </div>
           <button
             onClick={onExit}
-            className="ml-1 flex items-center justify-center rounded-full p-1 text-zinc-400 transition-colors active:bg-zinc-100 active:text-zinc-600"
+            className="ml-1 flex items-center justify-center rounded-full p-1 text-muted transition-colors active:bg-elevated active:text-gray-300"
             aria-label="退出房间"
           >
             <LogOut size={15} />
@@ -98,7 +98,7 @@ export default function TopNav({
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed left-1/2 top-16 z-50 -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-16 z-50 -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%" }}