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

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

src/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")}

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 ? (
                 <>

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>

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%" }}

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} />
                   发送邀请

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>

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} />
                   结束投票（立即出结果）

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}

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%" }}