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

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

src/app/blindbox/[code]/page.tsx

@@ -307,7 +307,7 @@ export default function BlindboxRoomPage() {
           <ArrowLeft size={16} className="text-muted" />
         </button>
         <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>
           <p className="text-[10px] text-dim">房间 {room.code}</p>
         </div>
 
@@ -354,7 +354,7 @@ export default function BlindboxRoomPage() {
               <div className="flex-1" />
               <button
                 onClick={handleCopyCode}
-                className="flex h-8 items-center gap-1 rounded-lg bg-elevated px-3 text-xs font-medium text-gray-300 ring-1 ring-border transition-colors active:bg-subtle"
+                className="flex h-8 items-center gap-1 rounded-lg bg-elevated px-3 text-xs font-medium text-secondary ring-1 ring-border transition-colors active:bg-subtle"
               >
                 <Copy size={12} /> 复制
               </button>
@@ -377,7 +377,7 @@ export default function BlindboxRoomPage() {
           animate={{ opacity: 1, y: 0 }}
         >
           <Package size={40} className="text-purple-400/50" strokeWidth={1.5} />
-          <p className="text-sm text-gray-400">你还不是这个房间的成员</p>
+          <p className="text-sm text-tertiary">你还不是这个房间的成员</p>
           <button
             onClick={handleJoinRoom}
             disabled={joiningRoom}
@@ -605,7 +605,7 @@ export default function BlindboxRoomPage() {
                   >
                     <span className="mt-0.5 text-sm">🏆</span>
                     <div className="min-w-0 flex-1">
-                      <p className="text-sm font-medium text-gray-300">
+                      <p className="text-sm font-medium text-secondary">
                         {item.content}
                       </p>
                       <div className="mt-1 flex items-center gap-2 text-[10px] text-dim">
@@ -689,7 +689,7 @@ export default function BlindboxRoomPage() {
       <AnimatePresence>
         {toast && (
           <motion.div
-            className="fixed bottom-8 left-1/2 -translate-x-1/2 rounded-full bg-surface px-4 py-2 text-xs font-semibold text-gray-300 shadow-xl ring-1 ring-border"
+            className="fixed bottom-8 left-1/2 -translate-x-1/2 rounded-full bg-surface px-4 py-2 text-xs font-semibold text-secondary shadow-xl ring-1 ring-border"
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: 20 }}