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/Input.tsx

@@ -0,0 +1,31 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+const sizeStyles = {
+  sm: "h-8 rounded-lg px-2",
+  md: "h-9 rounded-lg px-3",
+  lg: "h-10 rounded-xl px-3",
+  xl: "h-11 rounded-xl px-4",
+} as const;
+
+const variantStyles = {
+  default: "bg-elevated text-heading focus:ring-accent/50",
+  purple: "bg-surface text-foreground focus:ring-purple-600",
+} as const;
+
+interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
+  size?: keyof typeof sizeStyles;
+  variant?: keyof typeof variantStyles;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ size = "md", variant = "default", className = "", ...rest }, ref) => (
+    <input
+      ref={ref}
+      className={`w-full border-none text-sm outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 ${sizeStyles[size]} ${variantStyles[variant]} ${className}`}
+      {...rest}
+    />
+  ),
+);
+
+Input.displayName = "Input";
+export default Input;