/* ================= 全局变量 & 赛博深空玻璃拟态主题 ================= */
        :root {
            --app-bg: #0f1016; 
            --panel-bg: rgba(26, 27, 38, 0.4); 
            --border-light: rgba(255, 255, 255, 0.08); 
            --text-main: #e0e2eb; 
            --text-sub: #8a92a5; 
            --accent-color: #3b82f6; 
            --neon-blue: #00f0ff;
            --neon-purple: #b026ff;
            --ming-bg: rgba(59, 130, 246, 0.1);
            --daxian-color: #10b981; 
            --liunian-color: #3b82f6; 
            --shadow-subtle: 0 4px 24px rgba(0, 0, 0, 0.3);
            --shadow-float: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.05);
            --glow-blue: 0 0 20px rgba(0, 240, 255, 0.3);
            --glass-blur: blur(24px);
        }

        /* ========== 主题方案 2 (明亮白) ========== */
        [data-theme="light"] {
            --app-bg: #f4f5f7; 
            --panel-bg: rgba(255, 255, 255, 0.8); 
            --border-light: rgba(0, 0, 0, 0.1); 
            --text-main: #1e293b; 
            --text-sub: #64748b; 
            --accent-color: #2563eb; 
            --neon-blue: #0284c7; 
            --neon-purple: #9333ea;
            --shadow-float: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        /* ========== 主题方案 3 (科技蓝) ========== */
        [data-theme="blue"] {
            --app-bg: #030b17; 
            --panel-bg: rgba(6, 20, 45, 0.7); 
            --border-light: rgba(0, 240, 255, 0.2); 
            --text-main: #e2f1ff; 
            --text-sub: #7ba2d5; 
            --accent-color: #0ea5e9; 
            --neon-blue: #00ffff; 
            --neon-purple: #8b5cf6;
            --shadow-float: 0 10px 40px rgba(0, 50, 100, 0.5);
        }

        /* ========== 主题切换按钮样式 ========== */
        .theme-switcher { display: flex; gap: 8px; margin-left: 15px; padding-left: 15px; border-left: 1px solid var(--border-light); }
        .theme-btn { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; border: 2px solid transparent; box-shadow: inset 0 2px 4px rgba(0,0,0,0.5); }
        .theme-btn:hover { transform: scale(1.15); }
        .theme-btn.active { border-color: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); }
        .btn-dark { background: #0f1016; border: 1px solid rgba(255,255,255,0.2); }
        .btn-light { background: #f4f5f7; border: 1px solid rgba(0,0,0,0.2); }
        .btn-blue { background: #030b17; border: 1px solid rgba(0,240,255,0.4); }

        body {
            margin: 0; padding: 0; 
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
            background-color: var(--app-bg); color: var(--text-main);
            height: 100vh; box-sizing: border-box; overflow: hidden;
            user-select: none;
            transition: background-color 0.4s ease, color 0.4s ease;
        }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

        /* ================= 单页面架构 (SPA) 视图层切换 ================= */
        .view-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; transition: opacity 0.5s ease; opacity: 0; pointer-events: none; z-index: 0; }
        .view-container.active { opacity: 1; pointer-events: auto; z-index: 20; }
        
        .app-view, .community-view, .admin-view { display: flex; gap: 20px; padding: 20px; box-sizing: border-box; background-image: radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.15) 0%, transparent 40%), radial-gradient(circle at 80% 80%, rgba(176, 38, 255, 0.1) 0%, transparent 40%), linear-gradient(135deg, var(--app-bg) 0%, rgba(0,0,0,0.8) 100%); }
        .about-view { display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }

        /* ================= 主页专属样式 ================= */
        .home-view.inactive { opacity: 0; pointer-events: none; z-index: 0; }
        
        .home-nav { 
            position: fixed; 
            top: 0; left: 0; width: 100%; padding: 25px 50px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; z-index: 100; 
            background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); backdrop-filter: blur(10px); 
        }
        .home-logo { font-size: 24px; font-weight: 900; letter-spacing: 2px; display: flex; align-items: center; gap: 10px; color: #fff; cursor: pointer; transition: all 0.3s;}
        .home-logo:hover { transform: scale(1.05); text-shadow: 0 0 15px var(--neon-blue); }
        .home-logo .dynamic-svg-container { width: 32px; height: 32px; filter: drop-shadow(0 0 8px rgba(255, 140, 0, 0.4));}
        
        .home-links { display: flex; gap: 30px; align-items: center; }
        .home-link { color: var(--text-main); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s; position: relative; padding: 8px 16px; border-radius: 20px;}
        .home-link:hover { color: #fff; text-shadow: 0 0 10px rgba(255,255,255,0.5); background: rgba(255,255,255,0.05);}
        .home-link.primary { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); color: #fff;}
        .home-link.primary:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(255,255,255,0.2); border-color: #fff;}

        .home-view { display: flex; flex-direction: column; opacity: 1; pointer-events: auto; z-index: 20; background: transparent; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }

        .home-hero { min-height: 100vh; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 10; position: relative; padding-bottom: 50px; }

        .scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: rgba(255,255,255,0.5); font-size: 12px; letter-spacing: 2px; animation: bounce 2s infinite; pointer-events: none; }
        .scroll-indicator svg { width: 24px; height: 24px; stroke: rgba(255,255,255,0.5); }
        @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); } 40% { transform: translate(-50%, -10px); } 60% { transform: translate(-50%, -5px); } }

        .home-features-section { min-height: 100vh; padding: 120px 50px 80px 50px; background: linear-gradient(to bottom, transparent 0%, rgba(5,5,10,0.9) 20%, rgba(5,5,10,1) 100%); display: flex; flex-direction: column; align-items: center; position: relative; z-index: 10; }
        .feature-title { font-size: 36px; font-weight: 900; color: #fff; margin-bottom: 60px; letter-spacing: 4px; text-shadow: 0 0 20px rgba(0, 240, 255, 0.4); display: flex; align-items: center; gap: 15px;}
        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1200px; width: 100%; }
        .feature-card { background: rgba(20, 22, 30, 0.6); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 24px; padding: 40px 30px; transition: all 0.4s ease; box-shadow: 0 20px 40px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.05); }
        .feature-card:hover { transform: translateY(-10px); border-color: var(--neon-blue); box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 30px rgba(0, 240, 255, 0.2); background: rgba(30, 35, 50, 0.8); }
        .feature-icon { width: 60px; height: 60px; border-radius: 16px; background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3); display: flex; justify-content: center; align-items: center; margin-bottom: 25px; color: var(--neon-blue); box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.2);}
        .feature-card h3 { color: #fff; font-size: 22px; margin: 0 0 15px 0; letter-spacing: 1px; }
        .feature-card p { color: var(--text-sub); font-size: 15px; line-height: 1.8; margin: 0; }
        
        .footer-zone { margin-top: 100px; padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.05); width: 100%; max-width: 1200px; text-align: center; color: rgba(255,255,255,0.3); font-size: 13px; letter-spacing: 1px;}
        
        .sun-bg-container { position: absolute; top: 0; left: 0; width: 100vw; min-height: 100vh; height: 200vh; overflow: hidden; z-index: -1; background-color: #000; }
        .sun-bg-container::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/vision/2000x1664.png'); background-size: 100vw auto; background-position: top center; background-repeat: no-repeat; }

        .hero-en { font-size: 24px; font-weight: 700; letter-spacing: 6px; color: rgba(255,255,255,0.7); margin-bottom: 15px; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,0.8);}
        .hero-zh { font-size: 52px; font-weight: 900; letter-spacing: 8px; color: #fff; text-shadow: 0 5px 30px rgba(0,0,0,0.9), 0 0 20px rgba(255,255,255,0.3); margin-bottom: 50px;}
        
        .home-chat-box { width: 100%; max-width: 680px; position: relative; background: rgba(10, 12, 20, 0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; padding: 15px; box-shadow: 0 30px 60px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.1); transition: all 0.3s ease;}
        .home-chat-box:focus-within { background: rgba(10, 12, 20, 0.7); border-color: rgba(255,255,255,0.3); box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 30px rgba(255,255,255,0.1); transform: translateY(-3px);}
        .home-chat-box textarea { width: 100%; background: transparent; border: none; color: #fff; font-size: 18px; resize: none; outline: none; height: 80px; font-family: inherit; line-height: 1.5; padding: 10px; box-sizing: border-box; overflow-y: auto;}
        .home-chat-box textarea::placeholder { color: rgba(255,255,255,0.4); }
        .home-launch-btn { position: absolute; right: 15px; bottom: 15px; display: flex; align-items: center; gap: 8px; background: #fff; color: #000; font-weight: bold; font-size: 15px; padding: 10px 24px; border-radius: 16px; border: none; cursor: pointer; transition: all 0.3s; box-shadow: 0 5px 15px rgba(255,255,255,0.2);}
        .home-launch-btn:hover { background: #e0e2eb; transform: scale(1.05); box-shadow: 0 8px 25px rgba(255,255,255,0.4);}
        .home-launch-btn svg { width: 18px; height: 18px; }

        /* ================= 关于我们 视图 ================= */
        .cyber-bg { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: linear-gradient(to bottom, #050510 0%, #160a2c 50%, #001233 100%); z-index: -3; }
        .cyber-sun { position: absolute; bottom: 35vh; left: 50%; transform: translateX(-50%); width: 350px; height: 350px; border-radius: 50%; background: linear-gradient(to bottom, #ff0055, #ffdd00); box-shadow: 0 0 100px rgba(255,0,85,0.8), 0 0 200px rgba(255,221,0,0.4); z-index: -2; opacity: 0.8; }
        .cyber-city { position: absolute; bottom: 30vh; left: 0; width: 100%; height: 25vh; background-image: linear-gradient(to top, #050510 0%, transparent 20%), repeating-linear-gradient(90deg, #0a0a1a 0%, #0a0a1a 6%, transparent 6%, transparent 12%), repeating-linear-gradient(90deg, transparent 0%, transparent 2%, #111122 2%, #111122 10%, transparent 10%, transparent 18%); background-position: bottom; background-size: 100% 100%; z-index: -1; filter: drop-shadow(0 -5px 15px rgba(176,38,255,0.4)); }
        .cyber-grid { position: absolute; bottom: 0; left: 0; width: 100%; height: 30vh; background-image: linear-gradient(rgba(0, 240, 255, 0.4) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 240, 255, 0.4) 2px, transparent 2px); background-size: 60px 60px; transform: perspective(600px) rotateX(75deg); transform-origin: top; background-position: top center; z-index: 0; box-shadow: inset 0 20px 50px #001233; }
        
        .about-back-nav { position: fixed; top: 30px; left: 40px; z-index: 50; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: bold; cursor: pointer; padding: 10px 20px; background: rgba(0,0,0,0.5); border: 1px solid rgba(0,240,255,0.3); border-radius: 20px; backdrop-filter: blur(10px); transition: all 0.3s; }
        .about-back-nav:hover { background: rgba(0,240,255,0.2); box-shadow: 0 0 15px rgba(0,240,255,0.4); }
        .about-content-wrapper { position: relative; z-index: 10; padding: 100px 40px 60px 40px; display: flex; flex-direction: column; align-items: center; min-height: 100vh; box-sizing: border-box;}
        
        .about-text-box { max-width: 1000px; background: rgba(10,12,20,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(176, 38, 255, 0.3); border-radius: 24px; padding: 50px 60px; box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 30px rgba(176, 38, 255, 0.15); color: #fff; }
        .about-title { font-size: 32px; font-weight: 900; margin-bottom: 30px; color: #fff; letter-spacing: 4px; text-shadow: 0 0 15px rgba(176, 38, 255, 0.8); display: flex; align-items: center; gap: 15px;}
        .about-main-text { font-size: 18px; line-height: 2; color: #e0e2eb; letter-spacing: 1px; text-align: justify; text-shadow: 0 0 5px rgba(255,255,255,0.2); margin-bottom: 50px;}
        .about-main-text b { color: var(--neon-blue); font-weight: 800; text-shadow: 0 0 10px rgba(0,240,255,0.5);}
        .about-main-text b.purple { color: var(--neon-purple); text-shadow: 0 0 10px rgba(176, 38, 255, 0.5);}
        .about-main-text b.green { color: var(--daxian-color); text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);}

        .phase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
        .phase-card { background: rgba(0,0,0,0.5); border: 1px solid rgba(0, 240, 255, 0.2); border-radius: 16px; padding: 30px 24px; transition: all 0.3s; position: relative; overflow: hidden;}
        .phase-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--neon-blue); box-shadow: 0 0 10px var(--neon-blue); opacity: 0; transition: all 0.3s;}
        .phase-card:hover { transform: translateY(-5px); border-color: var(--neon-blue); box-shadow: 0 10px 30px rgba(0,240,255,0.2); background: rgba(0,240,255,0.05);}
        .phase-card:hover::before { opacity: 1; }
        .phase-step { font-size: 12px; font-weight: bold; color: var(--neon-blue); margin-bottom: 10px; letter-spacing: 2px;}
        .phase-title { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 15px;}
        .phase-desc { font-size: 14px; line-height: 1.8; color: var(--text-sub); text-align: justify;}

        /* ================= 共用顶部标题栏 ================= */
        .global-header { position: absolute; top: 0; left: 0; width: 100%; height: 60px; display: flex; align-items: center; padding: 0 30px; box-sizing: border-box; background: var(--panel-bg); backdrop-filter: var(--glass-blur); border-bottom: 1px solid var(--border-light); z-index: 100; transition: 0.4s;}
        .logo-zone { font-size: 18px; font-weight: bold; color: var(--text-main); letter-spacing: 1px; display: flex; align-items: center; gap: 8px;}
        
        .module-switcher { display: flex; background: rgba(0,0,0,0.3); border-radius: 20px; padding: 4px; margin-left: 30px; border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);}
        .module-tab { padding: 6px 16px; font-size: 13px; font-weight: bold; color: var(--text-sub); border-radius: 16px; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 6px;}
        .module-tab.active { background: rgba(255,255,255,0.1); color: var(--neon-blue); box-shadow: 0 2px 10px rgba(0,0,0,0.2); text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);}

        .back-home-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: bold; color: var(--text-main); padding: 6px 16px; background: rgba(255,255,255,0.05); border-radius: 20px; border: 1px solid var(--border-light); cursor: pointer; transition: all 0.2s; backdrop-filter: blur(10px); }
        .back-home-btn:hover { background: rgba(0, 240, 255, 0.1); border-color: rgba(0, 240, 255, 0.3); color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); }

        /* ================= ⚠️ 终极修复：用户身份 UI 系统 ================= */
        .user-auth-zone { position: relative; display: flex; align-items: center; z-index: 1000; }
        .login-trigger-btn { background: transparent !important; color: var(--neon-blue) !important; font-weight: bold !important; padding: 6px 18px !important; border-radius: 20px !important; transition: all 0.3s !important; border: 1px solid var(--neon-blue) !important; cursor: pointer; }
        .login-trigger-btn:hover { background: rgba(0, 240, 255, 0.1) !important; box-shadow: var(--glow-blue); }
        
        .user-profile-btn { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: bold; color: var(--text-main); padding: 6px 16px; background: rgba(255,255,255,0.05); border-radius: 20px; border: 1px solid var(--border-light); cursor: pointer; transition: background 0.2s, border-color 0.2s; backdrop-filter: blur(10px); }
        .user-profile-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
        .user-avatar-circle { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-blue) 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; box-shadow: 0 0 10px rgba(176, 38, 255, 0.4);}
        
        .user-preview-card { position: absolute; top: 100%; right: 0; margin-top: 15px; width: 260px; background: rgba(20, 22, 30, 0.95); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-radius: 24px; border: 1px solid rgba(255,255,255,0.15); box-shadow: 0 20px 50px rgba(0,0,0,0.8); padding: 24px; color: #fff; z-index: 9999; display: none; flex-direction: column; gap: 18px; animation: cardSlidePop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards; }
        .user-preview-card::before { content: ""; position: absolute; top: -20px; left: 0; width: 100%; height: 20px; background: transparent; }
        .user-auth-zone:hover .user-preview-card { display: flex; }
        @keyframes cardSlidePop { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
        
        .preview-header { display: flex; align-items: center; gap: 12px; }
        .preview-header b { font-size: 18px; letter-spacing: 1px;}
        .membership-tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.1); color: var(--text-main); font-weight: bold; border: 1px solid rgba(255,255,255,0.1);}
        .senior-tag { background: linear-gradient(135deg, rgba(255,215,0,0.2), transparent); color: #FFD700; border-color: rgba(255,215,0,0.3);}
        .preview-data { display: flex; gap: 20px; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); padding: 12px 0; }
        .data-item { flex: 1; text-align: center; display: flex; flex-direction: column;}
        .data-item i { color: var(--text-sub); font-style: normal; font-size: 11px; margin-bottom: 4px; }
        .data-item span { font-size: 18px; font-weight: bold; font-family: -apple-system;}
        .balance-num { color: var(--neon-blue); text-shadow: 0 0 8px rgba(0, 240, 255, 0.3);}
        .preview-actions { display: flex; gap: 10px;}
        .action-link { flex: 1; text-align: center; padding: 10px 0; font-size: 13px; font-weight: 600; color: var(--text-main); border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.2s;}
        .action-link.primary { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.5); color: #fff;}
        .action-link.admin-btn { background: rgba(255, 215, 0, 0.2); border-color: rgba(255, 215, 0, 0.5); color: #FFD700; }
        .action-link:hover { transform: scale(1.03); background: rgba(255,255,255,0.1);}
        .preview-footer { font-size: 12px; color: var(--text-sub); text-align: center; cursor: pointer; transition: color 0.2s;}
        .preview-footer:hover { color: #ef4444;}

        /* ================= ⚠️ 新增：Admin 视图样式 ================= */
        .admin-view { flex-direction: column; overflow-y: hidden; padding: 0; padding-top: 60px; }
        .admin-layout { display: flex; height: 100%; width: 100%; }
        .admin-sidebar { width: 240px; border-right: 1px solid var(--border-light); background: rgba(0,0,0,0.3); display: flex; flex-direction: column; padding: 20px 0; }
        .admin-menu-item { padding: 16px 30px; font-size: 14px; font-weight: bold; color: var(--text-sub); cursor: pointer; transition: 0.3s; border-left: 4px solid transparent; display: flex; align-items: center; gap: 12px;}
        .admin-menu-item:hover { background: rgba(255,255,255,0.05); color: #fff; }
        .admin-menu-item.active { background: rgba(255, 215, 0, 0.1); color: #FFD700; border-left-color: #FFD700; }
        .admin-main { flex: 1; padding: 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 30px; }
        
        .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .stat-card { background: var(--panel-bg); border: 1px solid var(--border-light); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-float); position: relative; overflow: hidden; backdrop-filter: blur(10px);}
        .stat-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background: var(--neon-blue); }
        .stat-card:nth-child(2)::before { background: var(--neon-purple); }
        .stat-card:nth-child(3)::before { background: var(--daxian-color); }
        .stat-card:nth-child(4)::before { background: #FFD700; }
        .stat-title { color: var(--text-sub); font-size: 13px; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px;}
        .stat-value { color: #fff; font-size: 36px; font-weight: 900; letter-spacing: 1px; text-shadow: 0 0 10px rgba(255,255,255,0.2);}
        
        .admin-table-container { background: var(--panel-bg); border: 1px solid var(--border-light); border-radius: 20px; box-shadow: var(--shadow-float); overflow: hidden; backdrop-filter: blur(10px);}
        .admin-table-header { padding: 20px 24px; border-bottom: 1px solid var(--border-light); font-size: 16px; font-weight: bold; color: #fff; display: flex; justify-content: space-between; align-items: center;}
        .admin-table { width: 100%; border-collapse: collapse; }
        .admin-table th, .admin-table td { padding: 16px 24px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.05); }
        .admin-table th { background: rgba(0,0,0,0.2); color: var(--text-sub); font-size: 13px; font-weight: 600; }
        .admin-table td { color: #e0e2eb; font-size: 14px; }
        .admin-table tr:hover td { background: rgba(255,255,255,0.03); }
        .status-badge { padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: bold; }
        .status-ok { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
        .status-warn { background: rgba(255, 149, 0, 0.15); color: #FF9500; border: 1px solid rgba(255, 149, 0, 0.3); }

        /* ================= App 视图模块 ================= */
        .app-content-wrapper { display: flex; gap: 20px; width: 100%; height: calc(100% - 60px); margin-top: 60px; overflow-y: auto; overflow-x: hidden; }

        .left-panel { flex: 6; display: flex; flex-direction: column; background: var(--panel-bg); backdrop-filter: var(--glass-blur); border-radius: 32px; border: 1px solid var(--border-light); box-shadow: var(--shadow-float); overflow: hidden; position: relative; transition: 0.4s;}
        .left-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 32px; box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); pointer-events: none; z-index: 50;}

        .input-bar { padding: 16px; display: flex; gap: 8px; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-light); background: rgba(0, 0, 0, 0.1); z-index: 10; position: relative; }
        .input-bar input, .input-bar select { padding: 8px 12px; border: 1px solid var(--border-light); border-radius: 12px; font-size: 13px; background: var(--panel-bg); color: var(--text-main); outline: none; transition: all 0.2s; text-align: center; backdrop-filter: blur(5px); }
        .input-bar input:focus, .input-bar select:focus { border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 240, 255, 0.2); }
        .input-bar span { font-size: 13px; font-weight: 600; color: var(--text-sub); margin-right: 4px;}
        .input-bar button { padding: 8px 20px; background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); color: var(--text-main); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; font-size: 13px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin-left: 5px; backdrop-filter: blur(10px); }
        .input-bar button:hover { background: rgba(255,255,255,0.15); border-color: var(--neon-blue); box-shadow: var(--glow-blue); transform: translateY(-1px); }

        .db-toggle-btn { background: rgba(0, 240, 255, 0.1) !important; color: var(--neon-blue) !important; border-color: rgba(0, 240, 255, 0.3) !important; margin-left: 0 !important; margin-right: 15px !important;}
        .db-panel { position: absolute; top: 70px; left: 16px; width: 380px; height: calc(100% - 90px); background: rgba(20, 22, 30, 0.95); backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; z-index: 100; display: none; flex-direction: column; box-shadow: 0 20px 50px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.05); overflow: hidden; animation: slideDown 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-15px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
        .db-header { padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; gap: 14px; background: rgba(0,0,0,0.2);}
        .db-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
        .db-tab { padding: 6px 14px; font-size: 13px; font-weight: bold; border-radius: 14px; background: rgba(255,255,255,0.05); color: var(--text-sub); cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: all 0.2s;}
        .db-tab:hover { background: rgba(255,255,255,0.1); color: #fff;}
        .db-tab.active { background: rgba(0, 240, 255, 0.15); color: var(--neon-blue); border-color: rgba(0, 240, 255, 0.4); box-shadow: inset 0 0 10px rgba(0,240,255,0.1);}
        .db-list { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
        .db-item { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s; position: relative; box-shadow: inset 0 2px 5px rgba(0,0,0,0.2); z-index: 1;}
        .db-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3);}
        .db-item.active-menu-parent { z-index: 100 !important; } 

        .db-item-info { flex: 1; overflow: hidden; }
        .db-item-name { font-size: 16px; font-weight: 900; color: var(--text-main); margin-bottom: 6px; display: flex; align-items: center; gap: 8px;}
        .db-item-tag { font-size: 11px; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.1); color: #ddd; font-weight: bold; border: 1px solid rgba(255,255,255,0.05);}
        .db-item-date { font-size: 12px; color: var(--text-sub); }
        
        .db-item-actions-trigger { padding: 8px; color: var(--text-sub); cursor: pointer; border-radius: 50%; transition: all 0.2s; display: flex; align-items: center; justify-content: center;}
        .db-item-actions-trigger:hover { background: rgba(255,255,255,0.1); color: #fff;}
        .db-actions-menu { position: absolute; right: 45px; top: 15px; background: rgba(20, 22, 30, 0.98); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 6px; display: none; flex-direction: column; gap: 4px; box-shadow: 0 15px 30px rgba(0,0,0,0.8); z-index: 10;}
        .db-action-btn { padding: 10px 14px; font-size: 13px; font-weight: bold; color: var(--text-main); text-align: left; background: transparent; border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s; white-space: nowrap;}
        .db-action-btn:hover { background: rgba(0, 240, 255, 0.15); color: var(--neon-blue); }
        .db-action-btn.danger:hover { background: rgba(255, 69, 58, 0.15); color: #ff453a; }

        .workspace { flex: 1; display: flex; flex-direction: row; overflow: hidden; }
        .timeline-sidebar { width: 110px; border-right: 1px solid var(--border-light); display: flex; flex-direction: column; background: rgba(0,0,0,0.1); }
        .timeline-section { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        #liunian-section { border-top: 1px solid var(--border-light); }
        .timeline-header { padding: 12px 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--text-sub); background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--border-light); z-index: 2; }
        .timeline-content { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
        .ctrl-cell { padding: 14px 6px; text-align: center; border-bottom: 1px solid var(--border-light); cursor: pointer; transition: all 0.2s ease; color: var(--text-sub);}
        .ctrl-cell:hover { background: rgba(255,255,255,0.05); color: var(--text-main);}
        .ctrl-cell.active-dx { background: rgba(16, 185, 129, 0.15); color: var(--text-main); border-bottom-color: var(--daxian-color); box-shadow: inset 4px 0 0 var(--daxian-color);}
        .ctrl-cell.active-ln { background: rgba(59, 130, 246, 0.15); color: var(--text-main); border-bottom-color: var(--liunian-color); box-shadow: inset 4px 0 0 var(--liunian-color);}
        .ctrl-main { font-weight: 600; font-size: 15px; }
        .ctrl-sub { font-size: 11px; opacity: 0.7; margin-top: 4px;}

        .chart-container { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: auto; }
        .main-wrapper { position: relative; width: 100%; max-width: 750px; margin: 0 auto; }
        .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 190px); background-color: transparent; gap: 1px; border: 1px solid var(--border-light); border-radius: 24px; overflow: hidden; position: relative; z-index: 1; box-shadow: var(--shadow-float); background-image: linear-gradient(var(--border-light) 1px, transparent 1px), linear-gradient(90deg, var(--border-light) 1px, transparent 1px); }
        #guide-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }
        
        .palace-cell { background: rgba(20, 22, 30, 0.4); padding: 8px; display: flex; flex-direction: column; position: relative; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); overflow: hidden; font-family: "KaiTi", "楷体", serif; border-radius: 4px;}
        .palace-cell[data-dz="巳"] { border-top-left-radius: 24px; } .palace-cell[data-dz="申"] { border-top-right-radius: 24px; } .palace-cell[data-dz="寅"] { border-bottom-left-radius: 24px; } .palace-cell[data-dz="亥"] { border-bottom-right-radius: 24px; }
        .palace-cell:hover { background-color: rgba(255,255,255,0.05); transform: scale(0.98); box-shadow: inset 0 0 20px rgba(255,255,255,0.02);}
        .ming-gong { background-color: rgba(59, 130, 246, 0.08); }
        .palace-cell.preview-active { background-color: rgba(255, 149, 0, 0.1); z-index: 7; box-shadow: inset 0 0 0 2px #FF9500, inset 0 0 30px rgba(255, 149, 0, 0.1); }
        .palace-cell.preview-sanfang { background-color: rgba(255, 149, 0, 0.03); }
        .palace-cell.daxian-active { box-shadow: inset 0 0 0 2px var(--daxian-color); z-index: 6; background-color: rgba(16, 185, 129, 0.05);}
        .palace-cell.liunian-active { box-shadow: inset 0 0 0 2px var(--liunian-color); z-index: 6; background-color: rgba(59, 130, 246, 0.05);}

        .stars-container { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: calc(3px * var(--scale-factor, 1)); width: 100%; z-index: 2;}
        .star-col { display: flex; flex-direction: column; align-items: center; width: calc(28px * var(--scale-factor, 1)); color: var(--text-main); transition: all 0.3s ease; }
        .star-name { font-size: calc(16px * var(--scale-factor, 1)); font-weight: bold; writing-mode: vertical-rl; text-orientation: upright; letter-spacing: calc(-2px * var(--scale-factor, 1)); padding: calc(6px * var(--scale-factor, 1)) calc(4px * var(--scale-factor, 1)); border-radius: 8px; transition: all 0.3s ease; text-shadow: 0 0 5px rgba(255,255,255,0.2); background: rgba(255,255,255,0.03); border: 1px solid var(--border-light); }
        .brightness { font-size: calc(10px * var(--scale-factor, 1)); margin-top: 2px; color: var(--text-sub); }
        
        .mutagen-box { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; align-items: center; width: 100%; }
        .mutagen, .mutagen-daxian, .mutagen-liunian { font-size: calc(12px * var(--scale-factor, 1)); padding: calc(2px * var(--scale-factor, 1)) 0; width: calc(20px * var(--scale-factor, 1)); text-align: center; border-radius: 4px; font-family: -apple-system; font-weight: 600; color: #fff;}
        .static-mutagen { background-color: rgba(239, 68, 68, 0.8); border: 1px solid #ef4444; box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);} 
        .mutagen-daxian { background-color: rgba(16, 185, 129, 0.8); border: 1px solid #10b981; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);}
        .mutagen-liunian { background-color: rgba(59, 130, 246, 0.8); border: 1px solid #3b82f6; animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);}

        .star-col.preview-lu .star-name { background-color: rgba(16, 185, 129, 0.2) !important; border-color: #10b981 !important; color: #10b981 !important; transform: scale(1.1); box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); text-shadow: 0 0 5px rgba(16, 185, 129, 0.8);}
        .star-col.preview-quan .star-name { background-color: rgba(175, 82, 222, 0.2) !important; border-color: #AF52DE !important; color: #AF52DE !important; transform: scale(1.1); box-shadow: 0 0 15px rgba(175, 82, 222, 0.4); text-shadow: 0 0 5px rgba(175, 82, 222, 0.8);}
        .star-col.preview-ke .star-name { background-color: rgba(59, 130, 246, 0.2) !important; border-color: #3b82f6 !important; color: #3b82f6 !important; transform: scale(1.1); box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); text-shadow: 0 0 5px rgba(59, 130, 246, 0.8);}
        .star-col.preview-ji .star-name { background-color: rgba(239, 68, 68, 0.2) !important; border-color: #ef4444 !important; color: #ef4444 !important; transform: scale(1.1); box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); text-shadow: 0 0 5px rgba(239, 68, 68, 0.8);}
        @keyframes popIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

        .top-shensha { font-size: 11px; color: var(--text-sub); height: 14px; overflow: hidden; white-space: nowrap; margin-top: 4px; margin-bottom: 2px; font-family: -apple-system; opacity: 0.6; z-index: 2;}
        .body-marker { position: absolute; right: 0px; top: 8px; background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.5); color: #ef4444; font-size: 10px; padding: 6px 3px; border-radius: 4px 0 0 4px; writing-mode: vertical-rl; font-family: -apple-system; font-weight: bold; z-index: 5; box-shadow: inset 0 0 5px rgba(239, 68, 68, 0.3);}
        .palace-name { position: absolute; bottom: 6px; left: 8px; color: rgba(255,255,255,0.12); font-weight: 900; font-size: 28px; letter-spacing: 2px; pointer-events: none; z-index: 1; line-height: 1; margin: 0;}
        .dynamic-label-container { position: absolute; bottom: 38px; left: 8px; display: flex; flex-direction: column; gap: 4px; pointer-events: none; z-index: 15; align-items: flex-start; }
        .label-daxian { color: #fff; font-size: 12px; font-weight: bold; background: rgba(16, 185, 129, 0.7); border: 1px solid rgba(16, 185, 129, 0.9); border-radius: 4px; padding: 2px 6px; animation: popIn 0.3s ease; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.3);}
        .label-liunian { color: #fff; font-size: 12px; font-weight: bold; background: rgba(59, 130, 246, 0.7); border: 1px solid rgba(59, 130, 246, 0.9); border-radius: 4px; padding: 2px 6px; animation: popIn 0.3s ease; backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.3);}
        .bottom-right-group { position: absolute; bottom: 8px; right: 8px; display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 10; }
        .changsheng-marker { font-size: 11px; color: rgba(255,255,255,0.5); writing-mode: vertical-rl; text-orientation: upright; font-family: -apple-system; margin-bottom: 3px;}
        .gan-zhi { color: rgba(255,255,255,0.7); font-weight: bold; font-size: 15px; writing-mode: vertical-rl; text-orientation: upright; line-height: 1;}
        .center-info { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 60%; text-align: center; pointer-events: none; z-index: 5; }
        .limit-row { font-size: 10px; color: var(--text-sub); line-height: 1.4; font-family: -apple-system; white-space: nowrap; transform: scale(0.9); }
        .daxian-range { font-size: 16px; font-weight: bold; color: rgba(255,255,255,0.9); margin-top: 2px; font-family: -apple-system;}

        /* 中宫 3D 内容 */
        .center-zone { grid-column: 2 / 4; grid-row: 2 / 4; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px; font-family: -apple-system; position: relative;}
        .center-content { text-align: center; width: 100%; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; flex-direction: column; align-items: center;}
        .space-3d-container { width: 200px; height: 200px; position: relative; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, rgba(15, 16, 26, 0.8) 0%, rgba(5, 5, 10, 0.9) 100%); border-radius: 50%; box-shadow: inset 0 0 40px rgba(0,0,0,0.8), 0 0 30px rgba(0, 240, 255, 0.1); margin-bottom: 20px; overflow: hidden; border: 1px solid rgba(0, 240, 255, 0.2); backdrop-filter: blur(10px); }
        .solar-system-stage { width: 100%; height: 100%; position: relative; }
        .sun { position: absolute; top: 50%; left: 50%; width: 32px; height: 32px; margin-top: -16px; margin-left: -16px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0%, #ffeb3b 40%, #f57c00 100%); box-shadow: 0 0 20px #ffeb3b, 0 0 40px rgba(245, 124, 0, 0.6); z-index: 10; }
        .orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; }
        .planet { position: absolute; top: 0; left: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
        .orbit-mercury { width: 48px; height: 48px; margin-top: -24px; margin-left: -24px; z-index: 9; } .planet-mercury { width: 4px; height: 4px; background: #a8a8b0; box-shadow: 0 0 6px #a8a8b0; }
        .orbit-venus { width: 68px; height: 68px; margin-top: -34px; margin-left: -34px; z-index: 8; } .planet-venus { width: 6px; height: 6px; background: #ffe066; box-shadow: 0 0 8px #ffe066; }
        .orbit-earth { width: 92px; height: 92px; margin-top: -46px; margin-left: -46px; z-index: 7; } .planet-earth { width: 8px; height: 8px; background: var(--neon-blue); box-shadow: 0 0 12px var(--neon-blue); radial-gradient(circle at 30% 30%, #fff, var(--neon-blue)); }
        .orbit-mars { width: 116px; height: 116px; margin-top: -58px; margin-left: -58px; z-index: 6; } .planet-mars { width: 5px; height: 5px; background: #ff5252; box-shadow: 0 0 8px #ff5252; }
        .orbit-jupiter { width: 152px; height: 152px; margin-top: -76px; margin-left: -76px; z-index: 5; } .planet-jupiter { width: 14px; height: 14px; background: #e6b88a; box-shadow: 0 0 12px #e6b88a; background: repeating-linear-gradient(#e6b88a, #cc9966 2px, #e6b88a 4px); }
        .orbit-saturn { width: 188px; height: 188px; margin-top: -94px; margin-left: -94px; z-index: 4; } .planet-saturn { width: 11px; height: 11px; background: #f0e68c; box-shadow: 0 0 10px #f0e68c; position: relative; } .saturn-ring { position: absolute; top: 50%; left: 50%; width: 24px; height: 8px; margin-top: -4px; margin-left: -12px; border-radius: 50%; border: 2px solid rgba(240, 230, 140, 0.6); box-sizing: border-box; background: rgba(240, 230, 140, 0.1); }
        .info-grid { display: flex; gap: 16px; font-size: 12px; color: var(--text-sub); text-align: center; flex-wrap: wrap; justify-content: center; background: rgba(0,0,0,0.3); padding: 12px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(5px);}
        .info-grid div { display: flex; flex-direction: column; align-items: center; } .info-grid b { color: rgba(255,255,255,0.5); font-weight: 500; margin-bottom: 4px; font-size: 11px;} .info-grid span { color: var(--text-main); font-weight: 600; font-size: 13px;}
        
        #analyze-action-zone { position: absolute; bottom: 20px; width: 85%; opacity: 0; transform: translateY(20px); pointer-events: none; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
        #analyze-action-zone button { width: 100%; padding: 14px; background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(176, 38, 255, 0.2)); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 20px; font-size: 15px; font-weight: bold; cursor: pointer; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; backdrop-filter: blur(10px); }
        #analyze-action-zone button:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(0, 240, 255, 0.3), inset 0 0 20px rgba(255,255,255,0.1); border-color: var(--neon-blue); color: var(--neon-blue); }

        /* ================= 聊天面板 ================= */
        .right-panel { flex: 4; display: flex; flex-direction: column; position: relative; background: var(--panel-bg); backdrop-filter: var(--glass-blur); border-radius: 32px; border: 1px solid var(--border-light); box-shadow: var(--shadow-float); overflow: hidden; transition: 0.4s;}
        .right-panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 32px; box-shadow: inset 0 1px 1px rgba(255,255,255,0.1); pointer-events: none; z-index: 50;}
        .chat-header { padding: 18px 20px; background: rgba(0,0,0,0.2); border-bottom: 1px solid var(--border-light); text-align: center; font-size: 16px; font-weight: bold; color: var(--text-main); z-index: 10; display: flex; align-items: center; justify-content: center; gap: 10px; letter-spacing: 1px;}
        
        .chat-box { flex: 1; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 20px; scroll-behavior: smooth; position: relative;}
        .msg-wrapper { display: flex; gap: 12px; align-items: flex-end; width: 100%; animation: messagePop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
        .msg-wrapper.user { justify-content: flex-end; } .msg-wrapper.ai { align-items: flex-start; }
        
        .apollo-avatar { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.5); position: relative; transition: all 0.3s ease; }
        .apollo-avatar.generating { box-shadow: 0 0 20px rgba(255, 140, 0, 0.6); border-color: #FF8C00; }
        
        .msg { max-width: 82%; padding: 14px 18px; border-radius: 20px; line-height: 1.6; font-size: 14px; word-wrap: break-word; box-shadow: 0 4px 15px rgba(0,0,0,0.2); backdrop-filter: blur(5px);}
        .msg.user { background: linear-gradient(135deg, #3b82f6, #b026ff); color: #FFF; border-bottom-right-radius: 6px; border: 1px solid rgba(255,255,255,0.1);}
        .msg.ai { background: rgba(255,255,255,0.05); color: var(--text-main); border-top-left-radius: 6px; border: 1px solid var(--border-light); box-shadow: inset 0 0 10px rgba(255,255,255,0.02);}
        
        .chat-input-wrapper { background: rgba(0,0,0,0.1); border-top: 1px solid var(--border-light); padding-bottom: 20px; position: relative; z-index: 10; backdrop-filter: blur(10px);}
        .chat-input-area { padding: 20px; padding-bottom: 12px; display: flex; gap: 12px; align-items: flex-end; position: relative; }
        .chat-input-area textarea { flex: 1; padding: 14px 20px; border: 1px solid var(--border-light); border-radius: 24px; outline: none; font-size: 14px; background: var(--panel-bg); color: var(--text-main); transition: all 0.3s; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); resize: none; font-family: inherit; line-height: 1.5; height: 48px; overflow-y: auto; box-sizing: border-box;}
        .chat-input-area textarea:focus { border-color: var(--neon-blue); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 0 15px rgba(0, 240, 255, 0.2); }
        .chat-input-area textarea::placeholder { color: var(--text-sub); line-height: 20px; }
        .chat-input-area button { padding: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--panel-bg); color: var(--neon-blue); border: 1px solid var(--border-light); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; flex-shrink: 0; backdrop-filter: blur(5px);}
        .chat-input-area button:hover { transform: scale(1.05); border-color: var(--neon-blue); box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);}
        .chat-input-area button svg { width: 20px; height: 20px; fill: currentColor; margin-left: -2px;} 
        .disclaimer-text { text-align: center; font-size: 11px; color: var(--text-sub); letter-spacing: 0.5px; }
        .stop-btn { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); background: rgba(20, 22, 30, 0.8); color: #fff; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); padding: 8px 20px; border-radius: 24px; font-size: 13px; font-weight: bold; cursor: pointer; display: none; z-index: 100; box-shadow: 0 10px 30px rgba(0,0,0,0.8); transition: all 0.2s; align-items: center; gap: 8px; }

        .bci-container { display: none; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; color: var(--text-main); animation: fadeIn 0.3s ease;}
        .radar-scan { width: 150px; height: 150px; border-radius: 50%; border: 2px solid rgba(0, 240, 255, 0.3); position: relative; margin-bottom: 20px; box-shadow: 0 0 30px rgba(0, 240, 255, 0.1), inset 0 0 20px rgba(0, 240, 255, 0.1);}
        .radar-scan::before { content: ""; position: absolute; top: 50%; left: 50%; width: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--neon-blue)); transform-origin: 0 50%; animation: radarSpin 2s linear infinite; box-shadow: 0 0 10px var(--neon-blue);}
        @keyframes radarSpin { 100% { transform: rotate(360deg); } }

        /* ================= 社区模块专属样式 ================= */
        .comm-sidebar { flex: 2; display: flex; flex-direction: column; background: var(--panel-bg); backdrop-filter: var(--glass-blur); border-radius: 32px; border: 1px solid var(--border-light); box-shadow: var(--shadow-float); overflow: hidden; position: relative;}
        .comm-main { flex: 8; display: flex; flex-direction: column; background: var(--panel-bg); backdrop-filter: var(--glass-blur); border-radius: 32px; border: 1px solid var(--border-light); box-shadow: var(--shadow-float); overflow-y: auto; overflow-x: hidden; position: relative;}
        
        .comm-nav-item { padding: 20px 24px; font-size: 16px; font-weight: bold; color: var(--text-sub); cursor: pointer; display: flex; align-items: center; gap: 12px; transition: all 0.3s; border-left: 4px solid transparent;}
        .comm-nav-item:hover { background: rgba(255,255,255,0.05); color: var(--text-main); }
        .comm-nav-item.active { background: rgba(0, 240, 255, 0.1); color: var(--neon-blue); border-left-color: var(--neon-blue); box-shadow: inset 0 0 20px rgba(0,240,255,0.05);}
        .comm-nav-item svg { width: 20px; height: 20px; }

        .comm-profile-card { margin: 20px; padding: 20px; background: rgba(0,0,0,0.3); border-radius: 20px; border: 1px solid rgba(255,255,255,0.05); text-align: center;}
        .comm-profile-card .avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: white; font-weight: bold; box-shadow: 0 0 15px rgba(0,240,255,0.3);}
        .comm-profile-card .name { font-size: 18px; font-weight: bold; color: #fff; margin-bottom: 5px;}
        .comm-profile-card .chart-status { font-size: 12px; color: var(--daxian-color); background: rgba(16,185,129,0.1); padding: 4px 10px; border-radius: 12px; display: inline-block; border: 1px solid rgba(16,185,129,0.3);}
        .comm-profile-card .chart-missing { color: #ff5252; background: rgba(255,82,82,0.1); border-color: rgba(255,82,82,0.3);}
        .comm-profile-card button { margin-top: 15px; width: 100%; padding: 10px; background: rgba(255,255,255,0.1); color: #fff; border: 1px solid rgba(255,255,255,0.2); border-radius: 12px; cursor: pointer; transition: 0.3s;}
        .comm-profile-card button:hover { background: rgba(255,255,255,0.2); border-color: #fff;}

        .square-header { padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-light); background: rgba(0,0,0,0.2);}
        .square-header h2 { margin: 0; font-size: 20px; color: #fff; }
        .btn-post { padding: 8px 20px; background: var(--neon-blue); color: #000; font-weight: bold; border-radius: 20px; border: none; cursor: pointer; box-shadow: 0 0 10px rgba(0,240,255,0.4); transition: 0.3s;}
        .btn-post:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,240,255,0.6);}
        .post-feed { 
            flex: 1; 
            overflow-y: auto; /* 允许垂直滚动 */
            overflow-x: hidden; 
            padding: 20px 30px; 
            display: flex; 
            flex-direction: column; 
            gap: 20px;
        }
        .post-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; padding: 20px; transition: 0.3s;}
        .post-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2);}
        .post-author { display: flex; align-items: center; gap: 10px; margin-bottom: 15px;}
        .post-author .mini-avatar { width: 36px; height: 36px; border-radius: 50%; background: #444; display: flex; align-items: center; justify-content: center; font-weight: bold;}
        .post-author .info { display: flex; flex-direction: column;}
        .post-author .info .name { font-weight: bold; color: var(--text-main); font-size: 14px;}
        .post-author .info .time { font-size: 12px; color: var(--text-sub);}
        .post-content { color: #e0e2eb; line-height: 1.6; font-size: 15px; margin-bottom: 15px;}
        .post-tags { display: flex; gap: 8px; margin-bottom: 15px;}
        .post-tag { font-size: 12px; padding: 4px 10px; background: rgba(0,240,255,0.1); color: var(--neon-blue); border-radius: 12px; border: 1px solid rgba(0,240,255,0.2);}
        .post-actions { display: flex; gap: 20px; border-top: 1px solid var(--border-light); padding-top: 15px; color: var(--text-sub); font-size: 13px;}
        .post-action { display: flex; align-items: center; gap: 6px; cursor: pointer; transition: 0.2s;}
        .post-action:hover { color: var(--neon-blue); }

        .match-container { display: flex; flex-direction: column; height: 100%; padding: 30px;}
        .match-radar-zone { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative;}
        .match-btn-group { display: flex; gap: 20px; margin-bottom: 40px; z-index: 10;}
        .m-btn { padding: 15px 30px; border-radius: 24px; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.4); color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; transition: 0.3s; display: flex; flex-direction: column; align-items: center; gap: 8px; backdrop-filter: blur(10px);}
        .m-btn:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px);}
        .m-btn.active.love { border-color: #ff2a5f; background: rgba(255,42,95,0.15); box-shadow: 0 0 20px rgba(255,42,95,0.3);}
        .m-btn.active.friend { border-color: var(--neon-blue); background: rgba(0,240,255,0.15); box-shadow: 0 0 20px rgba(0,240,255,0.3);}
        .m-btn.active.work { border-color: #FFD700; background: rgba(255,215,0,0.15); box-shadow: 0 0 20px rgba(255,215,0,0.3);}
        .m-btn span { font-size: 12px; font-weight: normal; opacity: 0.7;}
        
        .radar-animation { width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); position: relative; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 50px rgba(0,0,0,0.8);}
        .radar-animation::before, .radar-animation::after { content:''; position: absolute; border-radius: 50%; border: 1px solid rgba(0,240,255,0.2); width: 100%; height: 100%; animation: ripple 3s infinite linear;}
        .radar-animation::after { animation-delay: 1.5s; width: 60%; height: 60%;}
        @keyframes ripple { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
        .radar-core { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); box-shadow: 0 0 30px var(--neon-blue); display: flex; align-items: center; justify-content: center; z-index: 5;}
        
        .match-result-card { display: none; position: absolute; width: 320px; background: rgba(20,22,30,0.95); border: 1px solid rgba(255,255,255,0.15); border-radius: 24px; padding: 30px; box-shadow: 0 20px 50px rgba(0,0,0,0.8); z-index: 20; flex-direction: column; align-items: center; animation: modalSlideUp 0.5s ease;}
        .match-score { font-size: 48px; font-weight: 900; color: var(--neon-blue); text-shadow: 0 0 20px rgba(0,240,255,0.5); margin-bottom: 10px;}
        .match-desc { font-size: 14px; color: #fff; text-align: center; line-height: 1.6; margin-bottom: 25px;}
        .match-action { width: 100%; padding: 12px; background: var(--neon-blue); color: #000; border: none; border-radius: 12px; font-weight: bold; cursor: pointer; box-shadow: 0 0 15px rgba(0,240,255,0.4);}

        .locked-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10,12,20,0.85); backdrop-filter: blur(10px); z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
        .locked-overlay h2 { color: #fff; margin-bottom: 15px;}
        .locked-overlay p { color: var(--text-sub); max-width: 400px; line-height: 1.6; margin-bottom: 30px;}
        .locked-overlay button { padding: 12px 30px; background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); border: none; color: #fff; font-weight: bold; border-radius: 20px; cursor: pointer;}

        /* ================= 模态弹窗系统 ================= */
        .auth-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 1000; display: none; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; }
        .auth-modal { background: linear-gradient(145deg, rgba(20, 22, 30, 0.9), rgba(10, 10, 15, 0.95)); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 32px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(255,255,255,0.05); width: 380px; padding: 40px; color: #fff; position: relative; transform: scale(0.95); animation: scaleUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
        .auth-modal.wide-modal { width: 500px; }
        .auth-close { position: absolute; top: 20px; right: 26px; font-size: 28px; color: rgba(255,255,255,0.3); cursor: pointer; transition: color 0.2s; font-weight: 300;}
        .auth-close:hover { color: #fff; }
        .auth-header-logo { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 22px; font-weight: bold; margin-bottom: 30px; color: #fff; letter-spacing: 2px; }
        
        .auth-tabs { display: flex; gap: 8px; margin-bottom: 28px; background: rgba(0,0,0,0.4); padding: 6px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);}
        .auth-tab { flex: 1; text-align: center; padding: 12px 0; border-radius: 12px; font-size: 14px; cursor: pointer; color: rgba(255,255,255,0.4); transition: all 0.3s; font-weight: 600; }
        .auth-tab.active { background: rgba(255,255,255,0.1); color: var(--neon-blue); box-shadow: 0 4px 15px rgba(0,0,0,0.3); text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);}
        .auth-input { width: 100%; box-sizing: border-box; padding: 16px 20px; margin-bottom: 18px; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; color: #fff; font-size: 15px; outline: none; transition: all 0.3s; box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);}
        .auth-input:focus { border-color: rgba(0, 240, 255, 0.5); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5), 0 0 15px rgba(0, 240, 255, 0.2); background: rgba(0,0,0,0.5); }
        .auth-submit-btn { width: 100%; padding: 16px; border: 1px solid rgba(255,255,255,0.2); border-radius: 16px; background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(176, 38, 255, 0.2)); color: white; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; margin-top: 10px; letter-spacing: 2px; backdrop-filter: blur(5px);}
        .auth-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 240, 255, 0.3), inset 0 0 10px rgba(255,255,255,0.1); border-color: var(--neon-blue); text-shadow: 0 0 5px #fff;}
        .auth-error { color: #ff5252; font-size: 13px; text-align: center; margin-bottom: 12px; min-height: 18px; text-shadow: 0 0 5px rgba(255, 82, 82, 0.5);}

        /* ================= 算力充值面板 ================= */
        .header-recharge-btn { margin-left: 15px; background: rgba(255, 215, 0, 0.1); color: #FFD700; border: 1px solid rgba(255, 215, 0, 0.3); padding: 6px 14px; border-radius: 12px; font-size: 12px; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all 0.3s; backdrop-filter: blur(5px);}
        .header-recharge-btn:hover { background: rgba(255, 215, 0, 0.2); border-color: #FFD700; transform: scale(1.02); box-shadow: 0 0 15px rgba(255, 215, 0, 0.3); }
        .recharge-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.7); backdrop-filter: blur(15px); z-index: 2000; display: none; align-items: center; justify-content: center; }
        .recharge-modal { background: linear-gradient(145deg, rgba(20, 22, 30, 0.95), rgba(10, 10, 15, 0.98)); border: 1px solid rgba(255,255,255,0.1); border-radius: 32px; width: 900px; padding: 45px; color: #fff; position: relative; animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 30px 80px rgba(0,0,0,0.8);}
        @keyframes modalSlideUp { from { opacity:0; transform:translateY(40px) scale(0.98); } to { opacity:1; transform:translateY(0) scale(1); } }
        .recharge-close { position: absolute; top: 25px; right: 30px; cursor: pointer; font-size: 28px; color: rgba(255,255,255,0.3); transition: color 0.2s;}
        .recharge-close:hover { color: #fff; }
        .recharge-header { text-align: center; margin-bottom: 35px; }
        .recharge-header h2 { font-size: 30px; margin: 0 0 12px 0; letter-spacing: 1px; text-shadow: 0 0 20px rgba(255,255,255,0.2);}
        .plans-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
        .plan-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 24px; padding: 24px 20px; display: flex; flex-direction: column; transition: all 0.3s; position: relative; overflow: hidden; backdrop-filter: blur(10px);}
        .plan-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(0, 240, 255, 0.5); transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 20px rgba(0, 240, 255, 0.1); }
        .plan-card.popular { border: 1.5px solid rgba(255, 215, 0, 0.5); background: linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, rgba(255,255,255,0.02) 100%); }
        .plan-card.popular:hover { border-color: #FFD700; box-shadow: 0 15px 30px rgba(0,0,0,0.5), 0 0 20px rgba(255, 215, 0, 0.2); }
        .plan-badge { position: absolute; top: 12px; right: -25px; background: linear-gradient(90deg, #FFD700, #FFA500); color: #000; font-size: 11px; font-weight: bold; padding: 4px 30px; transform: rotate(45deg); box-shadow: 0 2px 10px rgba(255,215,0,0.4);}
        .plan-name { font-size: 18px; font-weight: bold; margin-bottom: 12px; color: var(--text-main);}
        .plan-price { font-size: 26px; font-weight: 800; color: var(--neon-blue); margin-bottom: 16px; text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);}
        .popular .plan-price { color: #FFD700; text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);}
        .plan-price span { font-size: 14px; font-weight: normal; color: var(--text-sub); }
        .plan-features { flex: 1; font-size: 12px; color: rgba(255,255,255,0.6); line-height: 2; list-style: none; padding: 0; margin-bottom: 24px; }
        .plan-features li::before { content: "✦ "; color: var(--neon-blue); font-size: 10px;}
        .popular .plan-features li::before { color: #FFD700; }
        .plan-model { font-size: 11px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); padding: 6px 8px; border-radius: 8px; margin-bottom: 12px; text-align: center; color: var(--text-sub);}
        .buy-btn { width: 100%; padding: 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); font-weight: bold; cursor: pointer; transition: all 0.3s; background: rgba(255,255,255,0.05); color: #fff; letter-spacing: 1px;}
        .plan-card:hover .buy-btn { background: rgba(0, 240, 255, 0.15); border-color: rgba(0, 240, 255, 0.5); color: var(--neon-blue); box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.2); }
        .popular .buy-btn { background: rgba(255, 215, 0, 0.15); border-color: rgba(255, 215, 0, 0.5); color: #FFD700; }
        .popular:hover .buy-btn { background: rgba(255, 215, 0, 0.25); box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3); }

/* ================= ⚠️ 亮色主题 (Light Theme) 终极修复补丁 ================= */
        /* 强制覆盖全系统中硬编码的浅色/白色，使其完美适配明亮/科技蓝主题 */
        
        /* 1. 排盘与星盘区域 */
        .db-header div, 
        .chart-container h2, 
        .chart-container p,
        .bci-container h2 { color: var(--text-main) !important; text-shadow: none !important; }
        .bci-container p, .bci-container span { color: var(--text-sub) !important; }
        
        [data-theme="light"] .palace-name { color: rgba(0, 0, 0, 0.05) !important; }
        [data-theme="light"] .bottom-right-group .gan-zhi,
        [data-theme="light"] .bottom-right-group .changsheng-marker { color: var(--text-sub) !important; }
        [data-theme="light"] .center-info .daxian-range { color: var(--text-main) !important; }
        
        /* 2. 星际社区模块 */
        .comm-profile-card .name, 
        .square-header h2, 
        .post-content, 
        .match-container h2, 
        .match-result-card h3, 
        .locked-overlay h2 { color: var(--text-main) !important; text-shadow: none !important; }
        .match-desc, 
        .locked-overlay p { color: var(--text-sub) !important; }
        
        .m-btn { background: var(--panel-bg) !important; color: var(--text-main) !important; }
        .m-btn span { color: var(--text-sub) !important; }
        #comm-tab-chat div[style*="color:#fff"] { color: var(--text-main) !important; }
        
        /* 3. 后台管理 (Admin) 模块 */
        .stat-value, 
        .admin-table-header, 
        .admin-table td { color: var(--text-main) !important; text-shadow: none !important; }
        .admin-table th { color: var(--text-sub) !important; background: rgba(0,0,0,0.05) !important; }
        .admin-menu-item:hover { background: var(--border-light) !important; color: var(--text-main) !important; }
        .form-group input, 
        .form-group select { background: var(--app-bg) !important; color: var(--text-main) !important; }
        [data-theme="light"] .logo-zone span[style*="color: #FFD700"] { color: var(--accent-color) !important; }

        /* 4. 悬浮卡片与全局弹窗 (登录/充值/下拉菜单) */
        [data-theme="light"] .user-preview-card,
        [data-theme="light"] .auth-modal,
        [data-theme="light"] .recharge-modal { background: var(--app-bg) !important; border-color: var(--border-light) !important; }
        
        [data-theme="light"] .user-preview-card *,
        [data-theme="light"] .auth-modal *,
        [data-theme="light"] .recharge-modal * { color: var(--text-main); text-shadow: none !important; }
        
        [data-theme="light"] .preview-data .data-item i,
        [data-theme="light"] .preview-footer,
        [data-theme="light"] .plan-features,
        [data-theme="light"] .plan-price span,
        [data-theme="light"] .recharge-header p { color: var(--text-sub) !important; }
        
        [data-theme="light"] .balance-num, 
        [data-theme="light"] .plan-price { color: var(--accent-color) !important; }
        
        [data-theme="light"] .action-link.primary,
        [data-theme="light"] .buy-btn,
        [data-theme="light"] .auth-submit-btn { color: #fff !important; background: var(--accent-color) !important; } 
        
        [data-theme="light"] .auth-input,
        [data-theme="light"] .auth-tabs { background: rgba(0,0,0,0.05) !important; border-color: var(--border-light) !important; }
        
        [data-theme="light"] .plan-card { background: var(--panel-bg) !important; border-color: var(--border-light) !important; }
        [data-theme="light"] .plan-card:hover { background: #fff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }

        /* ================= ⚠️ 首页动态视差背景与演示命盘专属样式 ================= */
        .parallax-group { position: relative; width: 100%; z-index: 1; }
        .sun-bg-sticky { position: sticky; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: -1; background-color: #000; }
        .sun-bg-sticky::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/vision/2000x1664.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
        
        .demo-chart-section { min-height: 100vh; padding: 80px 20px 120px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 10; opacity: 0; transform: translateY(80px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
        .demo-chart-section.visible { opacity: 1; transform: translateY(0); }
        .demo-chart-container { width: 100%; max-width: 800px; transform: scale(0.9); transform-origin: top center; pointer-events: none; filter: drop-shadow(0 20px 50px rgba(0, 240, 255, 0.15));}
        @media (max-width: 768px) { .demo-chart-container { transform: scale(0.5); } }


/* ================= ⚠️ 亮色主题 (Light Theme) 白字修复补丁 ================= */
        .db-header div, .chart-container h2, .chart-container p, .bci-container h2 { color: var(--text-main) !important; text-shadow: none !important; }
        .bci-container p, .bci-container span { color: var(--text-sub) !important; }
        [data-theme="light"] .palace-name { color: rgba(0, 0, 0, 0.05) !important; }
        [data-theme="light"] .bottom-right-group .gan-zhi, [data-theme="light"] .bottom-right-group .changsheng-marker { color: var(--text-sub) !important; }
        [data-theme="light"] .center-info .daxian-range { color: var(--text-main) !important; }
        .comm-profile-card .name, .square-header h2, .post-content, .match-container h2, .match-result-card h3, .locked-overlay h2 { color: var(--text-main) !important; text-shadow: none !important; }
        .match-desc, .locked-overlay p { color: var(--text-sub) !important; }
        .m-btn { background: var(--panel-bg) !important; color: var(--text-main) !important; }
        .m-btn span { color: var(--text-sub) !important; }
        #comm-tab-chat div[style*="color:#fff"] { color: var(--text-main) !important; }
        .stat-value, .admin-table-header, .admin-table td { color: var(--text-main) !important; text-shadow: none !important; }
        .admin-table th { color: var(--text-sub) !important; background: rgba(0,0,0,0.05) !important; }
        .admin-menu-item:hover { background: var(--border-light) !important; color: var(--text-main) !important; }
        .form-group input, .form-group select { background: var(--app-bg) !important; color: var(--text-main) !important; }
        [data-theme="light"] .logo-zone span[style*="color: #FFD700"] { color: var(--accent-color) !important; }
        [data-theme="light"] .user-preview-card, [data-theme="light"] .auth-modal, [data-theme="light"] .recharge-modal { background: var(--app-bg) !important; border-color: var(--border-light) !important; }
        [data-theme="light"] .user-preview-card *, [data-theme="light"] .auth-modal *, [data-theme="light"] .recharge-modal * { color: var(--text-main); text-shadow: none !important; }
        [data-theme="light"] .preview-data .data-item i, [data-theme="light"] .preview-footer, [data-theme="light"] .plan-features, [data-theme="light"] .plan-price span, [data-theme="light"] .recharge-header p { color: var(--text-sub) !important; }
        [data-theme="light"] .balance-num, [data-theme="light"] .plan-price { color: var(--accent-color) !important; }
        [data-theme="light"] .action-link.primary, [data-theme="light"] .buy-btn, [data-theme="light"] .auth-submit-btn { color: #fff !important; background: var(--accent-color) !important; } 
        [data-theme="light"] .auth-input, [data-theme="light"] .auth-tabs { background: rgba(0,0,0,0.05) !important; border-color: var(--border-light) !important; }
        [data-theme="light"] .plan-card { background: var(--panel-bg) !important; border-color: var(--border-light) !important; }
        [data-theme="light"] .plan-card:hover { background: #fff !important; box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important; }
        /* 强制主页免疫亮色主题 */
       /* 强制主页免疫亮色主题 */
        .home-view { background-color: #0f1016 !important; --text-main: #e0e2eb !important; --text-sub: #8a92a5 !important; --panel-bg: rgba(26, 27, 38, 0.4) !important; color: #e0e2eb !important; }        .home-view .feature-card h3, .home-view .feature-title, .home-view .hero-zh { color: #fff !important; }
        .home-view .palace-name { color: rgba(255,255,255,0.12) !important; }
        .home-view .bottom-right-group .gan-zhi { color: rgba(255,255,255,0.7) !important; }
        .home-view .bottom-right-group .changsheng-marker { color: rgba(255,255,255,0.5) !important; }
        .home-view .center-info .daxian-range { color: rgba(255,255,255,0.9) !important; }
        .home-view .star-name { color: #e0e2eb !important; text-shadow: 0 0 5px rgba(255,255,255,0.2) !important; }
/* ================= ⚠️ 新增：Ra 星际社区 Bento 阵列展示区 ================= */
        .comm-showcase-section { min-height: 100vh; padding: 100px 50px; max-width: 1200px; margin: 0 auto; opacity: 0; transform: translateY(80px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); position: relative; z-index: 10; display: flex; flex-direction: column; justify-content: center; }
        .comm-showcase-section.visible { opacity: 1; transform: translateY(0); }
        
        .comm-showcase-header { text-align: center; margin-bottom: 50px; }
        .comm-showcase-title { font-size: 42px; font-weight: 900; color: #fff; letter-spacing: 4px; text-shadow: 0 0 20px rgba(0, 240, 255, 0.3); margin-bottom: 15px; display: flex; align-items: center; justify-content: center; gap: 15px;}
        .comm-showcase-desc { color: var(--text-sub); font-size: 16px; letter-spacing: 1px; }

        /* Bento 核心网格系统：3列 x 2行 的完美矩形 */
        .bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 24px; width: 100%; }
        
        /* 基础卡片样式 */
        .bento-card { background: rgba(20, 22, 30, 0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 32px; padding: 35px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: all 0.4s ease; box-shadow: 0 15px 35px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.05); }
        .bento-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.2); box-shadow: 0 25px 50px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.1); background: rgba(30, 35, 50, 0.8); }
        
        /* 特定卡片跨度（实现大小不一但拼合完美的秘诀） */
        .bento-card.span-2-col { grid-column: span 2; }
        .bento-card.span-2-row { grid-row: span 2; }

        /* 卡片内部元素 */
        .bento-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(0, 240, 255, 0.1); display: flex; align-items: center; justify-content: center; color: var(--neon-blue); margin-bottom: 20px; box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.15); border: 1px solid rgba(0, 240, 255, 0.2);}
        .bento-card h3 { margin: 0 0 12px 0; color: #fff; font-size: 22px; letter-spacing: 1px; z-index: 2; }
        .bento-card p { margin: 0; color: var(--text-sub); font-size: 14px; line-height: 1.8; z-index: 2; }
        
        /* 匹配卡片专属高光背景 */
        .bento-match-bg { position: absolute; right: -20px; bottom: -40px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(176,38,255,0.15) 0%, transparent 70%); border-radius: 50%; pointer-events: none; }
        
        @media (max-width: 992px) {
            .bento-grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
            .bento-card.span-2-col, .bento-card.span-2-row { grid-column: span 1; grid-row: span 1; min-height: 200px; }
        }
/* ================= ⚠️ 新增：Ra AI 智能解盘展示区 ================= */
        .ai-showcase-section { min-height: 100vh; padding: 100px 50px; display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin: 0 auto; opacity: 0; transform: translateY(100px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); position: relative; z-index: 10; }
        .ai-showcase-section.visible { opacity: 1; transform: translateY(0); }

        /* 左侧：文案与发光按钮 */
        .ai-text-content { flex: 1; max-width: 1000px; padding-right: 50px; }
        .ai-title { font-size: 64px; font-weight: 900; letter-spacing: 4px; color: #fff; margin-bottom: 20px; display: flex; align-items: center; gap: 15px; }
        .ai-desc { font-size: 16px; line-height: 2; color: var(--text-sub); margin-bottom: 50px; text-align: justify; }
        .ai-desc b { color: var(--text-main); }
        .ai-explore-btn { padding: 14px 36px; font-size: 16px; font-weight: bold; color: #fff; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 30px; backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); cursor: pointer; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1); letter-spacing: 2px;}
        .ai-explore-btn:hover { background: rgba(0, 240, 255, 0.15); border-color: var(--neon-blue); color: var(--neon-blue); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 255, 0.5), inset 0 0 15px rgba(0, 240, 255, 0.3); transform: translateY(-5px) scale(1.05); }

        /* 右侧：3D 悬浮堆叠卡片区 */
        .ai-cards-container { flex: 1.5; margin-left: 180px; position: relative; height: 600px; perspective: 1200px; display: flex; align-items: center; justify-content: center; } 
        .ai-card { position: absolute; background: rgba(20, 22, 30, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 24px; box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.05); transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; gap: 15px; color: #fff; cursor: default; }
        .ai-card-header { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 15px; font-weight: bold; font-size: 16px; }
        .ai-card-header svg { color: var(--neon-blue); }
        .ai-card-body { font-size: 14px; color: var(--text-sub); line-height: 1.8; }
        .ai-card-body b { color: var(--text-main); }
        .ai-card-highlight { background: rgba(0, 240, 255, 0.1); border-left: 3px solid var(--neon-blue); padding: 10px 15px; border-radius: 4px; color: var(--neon-blue); font-size: 13px; margin-top: 10px; }

        /* 3D 纵深坐标定位 */
        .ai-card-1 { width: 380px; transform: rotateY(-15deg) rotateX(5deg) translateZ(-100px) translateX(80px) translateY(-80px); z-index: 1; opacity: 0.6; filter: blur(2px); }
        .ai-card-2 { width: 420px; transform: rotateY(-5deg) rotateX(2deg) translateZ(0px) translateX(-60px) translateY(20px); z-index: 2; opacity: 0.85; border-color: rgba(0, 240, 255, 0.3); }
        .ai-card-3 { width: 400px; transform: rotateY(10deg) rotateX(-5deg) translateZ(100px) translateX(60px) translateY(120px); z-index: 3; opacity: 1; border-color: rgba(176, 38, 255, 0.4); box-shadow: 0 40px 80px rgba(0,0,0,0.9), 0 0 40px rgba(176, 38, 255, 0.2); }

        /* 悬停互动，拨开卡片堆叠 */
        .ai-cards-container:hover .ai-card-1 { transform: rotateY(-10deg) rotateX(5deg) translateZ(-50px) translateX(60px) translateY(-90px); opacity: 0.9; filter: blur(0); }
        .ai-cards-container:hover .ai-card-2 { transform: rotateY(0deg) rotateX(0deg) translateZ(50px) translateX(-80px) translateY(10px); opacity: 1; box-shadow: 0 30px 60px rgba(0,240,255,0.1);}
        .ai-cards-container:hover .ai-card-3 { transform: rotateY(15deg) rotateX(-5deg) translateZ(150px) translateX(80px) translateY(110px); }

        /* 手机端自适应堆叠 */
        @media (max-width: 992px) {
            .ai-showcase-section { flex-direction: column; text-align: center; padding: 50px 20px; }
            .ai-text-content { padding-right: 0; display: flex; flex-direction: column; align-items: center; margin-bottom: 50px;}
            .ai-title { justify-content: center; font-size: 48px; }
            .ai-cards-container { transform: scale(0.65); margin-top: -80px; height: 500px;}
        }

        /* ================= ⚠️ 首页动态视差背景与演示命盘专属样式 ================= */
        .parallax-group { position: relative; width: 100%; z-index: 1; }
        .sun-bg-sticky { position: sticky; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; z-index: -1; background-color: #000; }
        .sun-bg-sticky::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('/vision/2000x1664.png'); background-size: cover; background-position: center; background-repeat: no-repeat; }
        .demo-chart-section { min-height: 100vh; padding: 80px 20px 120px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 10; opacity: 0; transform: translateY(80px); transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
        .demo-chart-section.visible { opacity: 1; transform: translateY(0); }
        .demo-chart-container { width: 100%; max-width: 800px; transform: scale(0.9); transform-origin: top center; pointer-events: none; filter: drop-shadow(0 20px 50px rgba(0, 240, 255, 0.15));}
        @keyframes pulseText { 0%, 100% { opacity: 1; text-shadow: 0 0 15px var(--neon-blue); } 50% { opacity: 0.4; text-shadow: none; } }

/* ⚠️ 演示命盘下方的磨砂玻璃引导按钮 */
        .demo-action-btn {
            margin-top: 0px;
            padding: 16px 40px;
            font-size: 18px;
            font-weight: 900;
            color: #fff;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
            z-index: 20;
            letter-spacing: 2px;
        }
        /* 鼠标悬停时的全息发光特效 */
        .demo-action-btn:hover {
            background: rgba(0, 240, 255, 0.15);
            border-color: var(--neon-blue);
            color: var(--neon-blue);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 240, 255, 0.5), inset 0 0 15px rgba(0, 240, 255, 0.3);
            transform: translateY(-5px) scale(1.05);
        }

        /* 演示命盘的高级磨砂玻璃质感 */
        #demo-chart-container .grid-container { background-color: rgba(10, 12, 20, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 240, 255, 0.15); }
        #demo-chart-container .palace-cell { background: rgba(30, 34, 45, 0.7) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.05); }
        #demo-chart-container .ming-gong { background: rgba(59, 130, 246, 0.3) !important; }
        #demo-chart-container .space-3d-container { background: radial-gradient(circle at center, rgba(15, 16, 26, 0.95) 0%, rgba(5, 5, 10, 1) 100%) !important; }