ui: 滑卡互动增强 — like 徽章动画、分类标签可读性、进度数字区分

- RestaurantCard: like 徽章实时弹跳动画，首次出现滑入效果
- RestaurantCard: 分类标签改为白底黑字，图片上始终清晰
- SwipeDeck: 进度数字加背景色块包裹，与用户名视觉分离

src/components/SwipeDeck.tsx

@@ -34,11 +34,14 @@ function UserProgressBar({
   return (
     <div className="flex items-center gap-x-3">
       <div className="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1">
-        <span className="flex items-center gap-1 text-[11px] tabular-nums text-accent">
+        <span className="flex items-center gap-1.5 text-[11px] text-accent">
           <span className={`inline-flex h-4 w-4 items-center justify-center rounded-full ${myAvatarBg} text-[10px] leading-none`}>
             {myAvatar}
           </span>
-          你 {localIndex}/{total}
+          你
+          <span className="rounded bg-accent/10 px-1 py-px tabular-nums font-medium">
+            {localIndex}/{total}
+          </span>
         </span>
         {others.map(([id, count]) => {
           const finished = count >= total;
@@ -49,13 +52,15 @@ function UserProgressBar({
           return (
             <span
               key={id}
-              className={`flex items-center gap-1 text-[11px] tabular-nums ${finished ? "text-emerald-400" : "text-muted"}`}
+              className={`flex items-center gap-1.5 text-[11px] ${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-12 truncate">{label}</span>}
-              {count}/{total}
+              <span className={`rounded px-1 py-px tabular-nums font-medium ${finished ? "bg-emerald-500/10" : "bg-elevated"}`}>
+                {count}/{total}
+              </span>
               {finished && <Check size={10} className="text-emerald-400" />}
             </span>
           );