feat: 全局主题切换（浅色/深色/跟随系统）

- CSS 变量驱动的主题系统，所有颜色响应 data-theme 属性
- 新增语义化色彩 heading/secondary/tertiary，替换硬编码 text-white/text-gray-*
- 右上角三态主题按钮（自动/浅色/深色），全局可用无需登录
- layout.tsx 内联脚本防闪烁
- 修复个人中心页面溢出无法滚动

src/app/blindbox/page.tsx

@@ -140,7 +140,7 @@ export default function BlindboxLobbyPage() {
           <ArrowLeft size={16} className="text-muted" />
         </button>
         <div className="flex-1">
-          <h1 className="text-lg font-black text-white">🎁 周末契约</h1>
+          <h1 className="text-lg font-black text-heading">🎁 周末契约</h1>
           <p className="text-[10px] font-medium tracking-wider text-purple-400/60">
             ADVENTURE ROULETTE
           </p>
@@ -176,10 +176,10 @@ export default function BlindboxLobbyPage() {
               </motion.span>
             </motion.div>
 
-            <h2 className="mt-6 text-xl font-black text-white">
+            <h2 className="mt-6 text-xl font-black text-heading">
               和 TA 一起，拆开周末
             </h2>
-            <p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-gray-400">
+            <p className="mt-2 max-w-72 text-center text-sm leading-relaxed text-tertiary">
               平日蓄水，周末开奖。把所有"想做但一直没做"的事，
               交给命运来决定。
             </p>
@@ -195,7 +195,7 @@ export default function BlindboxLobbyPage() {
                   <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-purple-600/15 text-sm font-black text-purple-400 ring-1 ring-purple-500/20">
                     {s.step}
                   </div>
-                  <p className="text-sm font-medium text-gray-300">{s.text}</p>
+                  <p className="text-sm font-medium text-secondary">{s.text}</p>
                 </div>
               ))}
             </div>
@@ -244,8 +244,8 @@ export default function BlindboxLobbyPage() {
               <Package size={32} className="relative text-purple-400/60" strokeWidth={1.5} />
             </motion.div>
 
-            <h2 className="mt-5 text-lg font-bold text-white">还没有盲盒房间</h2>
-            <p className="mt-1.5 text-sm text-gray-400">
+            <h2 className="mt-5 text-lg font-bold text-heading">还没有盲盒房间</h2>
+            <p className="mt-1.5 text-sm text-tertiary">
               创建第一个房间，邀请 TA 一起玩
             </p>
 
@@ -297,7 +297,7 @@ export default function BlindboxLobbyPage() {
                 <button
                   onClick={handleJoin}
                   disabled={joining || joinCode.trim().length < 6}
-                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                  className="flex h-11 items-center gap-1.5 rounded-xl bg-surface px-4 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
                 >
                   {joining ? <Loader2 size={16} className="animate-spin" /> : <LogIn size={16} />}
                   加入
@@ -365,7 +365,7 @@ export default function BlindboxLobbyPage() {
               <button
                 onClick={handleJoin}
                 disabled={joining || joinCode.trim().length < 6}
-                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-gray-300 ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
+                className="flex h-10 items-center gap-1.5 rounded-xl bg-surface px-4 text-xs font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated disabled:opacity-40"
               >
                 {joining ? <Loader2 size={14} className="animate-spin" /> : <LogIn size={14} />}
                 加入
@@ -401,7 +401,7 @@ export default function BlindboxLobbyPage() {
 
                   {/* Info */}
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-sm font-bold text-white">{room.name}</p>
+                    <p className="truncate text-sm font-bold text-heading">{room.name}</p>
                     <div className="mt-1 flex items-center gap-3 text-[11px] text-muted">
                       <span className="flex items-center gap-1">
                         <Users size={11} />