feat: show rating, level, next-level stats in profile panel

- Display Rating value with ⚡ icon
- Show current Level with progress
- Show XP needed for next level
- Separated UID/join date below divider

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

frontend/src/app/me/page.tsx

@@ -320,7 +320,7 @@ export default function MePage() {
                 {rank.icon} {rank.label} Rank
               </div>
 
-              <div className="w-full bg-black h-4 border border-white relative mb-1">
+              <div className="w-full bg-black h-4 border border-white relative mb-2">
                 <div
                   className="h-full bg-[color:var(--mc-green)]"
                   style={{ width: `${Math.min(100, (profile.rating % 100))}%` }}
@@ -329,19 +329,45 @@ export default function MePage() {
                   Level {Math.floor(profile.rating / 100)}
                 </span>
               </div>
-              <div className="flex justify-between text-sm items-center">
+
-                <span className="text-zinc-800 flex items-center gap-1">
+              {/* Stats grid */}
-                  <IdCard size={14} className="text-zinc-500" />
+              <div className="w-full grid grid-cols-2 gap-x-3 gap-y-1 text-sm mt-1 mb-2">
-                  UID
+                <div className="flex items-center gap-1 text-zinc-800">
-                </span>
+                  <Zap size={13} className="text-[color:var(--mc-gold)]" />
-                <span className="text-zinc-600 font-mono">{profile.id}</span>
+                  <span>Rating</span>
+                </div>
+                <span className="text-right font-bold text-[color:var(--mc-gold)]">{profile.rating}</span>
+
+                <div className="flex items-center gap-1 text-zinc-800">
+                  <TrendingUp size={13} className="text-[color:var(--mc-green)]" />
+                  <span>{tx("等级", "Level")}</span>
+                </div>
+                <span className="text-right font-bold text-[color:var(--mc-green)]">{Math.floor(profile.rating / 100)}</span>
+
+                <div className="flex items-center gap-1 text-zinc-800">
+                  <span className="text-xs">🎯</span>
+                  <span>{tx("下一等级", "Next Lv")}</span>
+                </div>
+                <span className="text-right text-zinc-600">{100 - (profile.rating % 100)} XP</span>
               </div>
-              <div className="flex justify-between text-sm items-center">
+
-                <span className="text-zinc-800 flex items-center gap-1">
+              <div className="w-full border-t border-zinc-300 my-1"></div>
-                  <Calendar size={14} className="text-zinc-500" />
+
-                  {tx("加入时间", "Joined")}
+              <div className="w-full flex flex-col gap-1 text-sm">
-                </span>
+                <div className="flex justify-between items-center">
-                <span className="text-zinc-600 font-mono">{new Date(profile.created_at * 1000).toLocaleDateString()}</span>
+                  <span className="text-zinc-800 flex items-center gap-1">
+                    <IdCard size={14} className="text-zinc-500" />
+                    UID
+                  </span>
+                  <span className="text-zinc-600 font-mono">{profile.id}</span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span className="text-zinc-800 flex items-center gap-1">
+                    <Calendar size={14} className="text-zinc-500" />
+                    {tx("加入时间", "Joined")}
+                  </span>
+                  <span className="text-zinc-600 font-mono">{new Date(profile.created_at * 1000).toLocaleDateString()}</span>
+                </div>
               </div>
             </div>
           </section>