refactor: 提取 UserAvatar、Input、Card 三个可复用 UI 组件

- UserAvatar: 统一头像渲染（5 种尺寸），新增 resolveAvatar 工具函数，替换 SwipeDeck 和 RoomManageModal 中的重复逻辑
- Input: 统一表单输入样式（4 种尺寸 + default/purple 变体），替换 AuthModal、ProfilePage、BlindboxPage 共 12 处
- Card: 统一卡片容器样式 + 可选淡入动画和延迟，替换 ProfilePage 中 7 处重复的 motion.div

src/components/UserAvatar.tsx

@@ -0,0 +1,34 @@
+import { resolveAvatar } from "@/lib/avatars";
+
+const sizeStyles = {
+  xs: "h-4 w-4 text-[10px]",
+  sm: "h-5 w-5 text-sm",
+  md: "h-8 w-8 text-base",
+  lg: "h-11 w-11 text-xl",
+  xl: "h-14 w-14 text-2xl",
+} as const;
+
+interface UserAvatarProps {
+  userId: string;
+  profile?: { avatar: string } | null;
+  size?: keyof typeof sizeStyles;
+  bg?: string;
+  className?: string;
+}
+
+export default function UserAvatar({
+  userId,
+  profile,
+  size = "md",
+  bg,
+  className = "",
+}: UserAvatarProps) {
+  const avatar = resolveAvatar(userId, profile);
+  return (
+    <span
+      className={`inline-flex items-center justify-center rounded-full leading-none ${sizeStyles[size]} ${bg ?? avatar.bg} ${className}`}
+    >
+      {avatar.emoji}
+    </span>
+  );
+}