/* style.css */
:root {
    --bg-root: #0b1217; --bg-main: #141f29; --bg-sidebar: #0f1923;
    --bg-card: #1a2733; --bg-input: #0f212e;
    --accent: #00e701; --accent-hover: #2eff2f; --accent-glow: rgba(0, 231, 1, 0.5);
    --danger: #ff4d4d; --text-main: #ffffff; --text-sub: #b1bad3;
    --sidebar-w: 240px; --header-h: 70px; --safe-bottom: env(safe-area-inset-bottom);
    --trans-smooth: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; }
body {
    background-color: var(--bg-root); color: var(--text-main);
    font-family: "Inter", sans-serif; display: flex; min-height: 100vh; overflow-x: hidden;
    background-image: radial-gradient(circle at 50% 0%, #1a2c38 0%, var(--bg-root) 60%);
}
a { text-decoration: none; color: inherit; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-thumb { background: #2f4553; border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }

/* 组件 */
.btn { border: none; cursor: pointer; font-weight: 700; font-size: 14px; border-radius: 8px; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--accent); color: #012001; box-shadow: 0 4px 20px rgba(0, 231, 1, 0.25); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.btn-primary:disabled { background: #2f4553; color: #889eb5; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-secondary { background: #2f4553; color: white; }
.btn-cashout { background: white !important; color: black !important; box-shadow: 0 0 25px rgba(255,255,255,0.4) !important; animation: pulse 1s infinite; }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.02); } 100% { transform: scale(1); } }

.input-group { margin-bottom: 16px; }
.label-row { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--text-sub); font-weight: 600; }
.input-box { background: var(--bg-input); border: 2px solid #2f4553; border-radius: 8px; height: 48px; display: flex; align-items: center; padding: 0 6px; transition: var(--trans-smooth); }
.input-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); }
.input-box input { flex: 1; background: transparent; border: none; color: white; font-weight: 700; font-size: 15px; padding: 0 10px; height: 100%; font-family: monospace; min-width: 0; }
.input-icon { color: var(--text-sub); padding: 0 12px; font-size: 14px; font-weight: 700; pointer-events: none; white-space: nowrap; }
.action-btn { background: #213743; border: none; color: var(--text-sub); padding: 0 12px; height: 32px; font-weight: 700; font-size: 12px; cursor: pointer; border-radius: 6px; transition: 0.2s; flex-shrink: 0; }
.action-btn:hover { background: #324a5a; color: white; }

/* 布局 */
.sidebar { width: var(--sidebar-w); background: var(--bg-sidebar); position: fixed; height: 100vh; z-index: 100; padding: 24px; border-right: 1px solid rgba(255,255,255,0.03); display: flex; flex-direction: column; transition: transform 0.3s ease; }
.logo { font-size: 26px; font-weight: 900; font-style: italic; color: white; margin-bottom: 40px; cursor: pointer; letter-spacing: -1px; flex-shrink: 0; }
.logo span { color: var(--accent); text-shadow: 0 0 15px var(--accent-glow); }
.main-content { margin-left: var(--sidebar-w); flex: 1; padding: 0 40px 40px 40px; max-width: 1600px; margin-right: auto;/* ★★★ 核心修复开始 ★★★ */
    display: flex;
    flex-direction: column;
    
    /* 1. 关键：允许 flex 子元素收缩，防止被表格撑爆 */
    min-width: 0; 
    
    /* 2. 关键：防止整个页面出现横向滚动条，强制让内部元素自己滚 */
    overflow-x: hidden; 
    /* ★★★ 核心修复结束 ★★★ */ transition: margin 0.3s ease; }
.header { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 90; background: rgba(20, 31, 41, 0.85); backdrop-filter: blur(20px); margin: 0 -40px 30px -40px; padding: 0 40px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.wallet-pill { background: #0b141c; border: 1px solid #2f4553; padding: 6px 16px; border-radius: 30px; font-weight: 700; display: flex; align-items: center; gap: 10px; font-size: 15px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); cursor: pointer; }

/* 游戏列表 Hero */
.hero { background: linear-gradient(135deg, #1e3c50 0%, #111923 100%); border-radius: 16px; padding: 50px; margin-bottom: 40px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.05); }
.hero-content h1 { font-size: 36px; margin-bottom: 10px; color: white; letter-spacing: -1px; line-height: 1.2; }
.hero-content p { color: var(--text-sub); margin-bottom: 30px; }
.game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; }
.game-card { background: var(--bg-card); border-radius: 12px; overflow: hidden; position: relative; aspect-ratio: 3/4; cursor: pointer; transition: var(--trans-smooth); border: 1px solid rgba(255,255,255,0.03); }
.game-card:hover { transform: translateY(-8px); border-color: rgba(255,255,255,0.1); box-shadow: 0 15px 30px rgba(0,0,0,0.4); }
.poster-art { width: 100%; height: 100%; position: absolute; transition: 0.5s; }
.game-card:hover .poster-art { transform: scale(1.05); filter: brightness(0.7); }
.card-info { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; background: linear-gradient(to top, rgba(15,33,46,0.95), transparent); z-index: 10; }
.game-name { font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.provider-tag { font-size: 10px; background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 4px; display:inline-block;}



/* 游戏界面通用 */
.game-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; background: var(--bg-card); border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); min-height: 600px; }
.sidebar-ctrl { background: #1a2733; padding: 24px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,0.03); position: relative; z-index: 2; overflow-y: auto; }
.game-stage { background: #0b1217; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; min-height: 400px; }
.switcher { background: #0f1923; padding: 4px; border-radius: 25px; display: flex; margin-bottom: 24px; border: 1px solid #2f4553; }
.switch-btn { flex: 1; background: transparent; color: var(--text-sub); border: none; padding: 8px; border-radius: 20px; font-size: 13px; font-weight: 700; cursor: pointer; }
.switch-btn.active { background: #213743; color: white; box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* 游戏特定 CSS (Crash, Dice, Mines, Blackjack, Roulette) */
#crash-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.crash-hud { position: relative; z-index: 10; text-align: center; pointer-events: none; }
.crash-val { font-size: 80px; font-weight: 900; text-shadow: 0 10px 30px rgba(0,0,0,0.5); font-variant-numeric: tabular-nums; transition: color 0.3s; }
.dice-result-box { font-size: 80px; font-weight: 900; color: white; font-family: monospace; text-align: center; margin-bottom: 30px; transition: color 0.3s; }
.range-track { position: relative; height: 16px; border-radius: 8px; background: #2f4553; margin: 40px 0; width: 100%; }
.range-fill { position: absolute; height: 100%; border-radius: 8px; top: 0; left: 0; transition: background 0.2s; }
.slider-thumb { position: absolute; top: 50%; width: 28px; height: 28px; background: white; border: 3px solid var(--bg-card); border-radius: 6px; transform: translate(-50%, -50%); box-shadow: 0 2px 10px rgba(0,0,0,0.5); pointer-events: none; z-index: 3; }
input[type=range] { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; z-index: 4; touch-action: none; }
.mines-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; width: 400px; max-width: 100%; aspect-ratio: 1; }
.mine-tile { width: 100%; height: 100%; background: #2f4553; border-radius: 8px; cursor: pointer; border-bottom: 4px solid #1a2c38; display: flex; align-items: center; justify-content: center; font-size: 24px; transition: 0.1s; }
.mine-tile.revealed { background: #0f1923; border-bottom: none; transform: translateY(4px); cursor: default; }
.mine-tile.gem { background: #0f1923; box-shadow: inset 0 0 15px var(--accent-glow); border: 1px solid var(--accent); }
.mine-tile.boom { background: #2a0e0e; border: 1px solid var(--danger); box-shadow: inset 0 0 15px var(--danger); }
.limbo-counter { font-size: 80px; font-weight: 900; font-family: monospace; background: linear-gradient(to bottom, #fff, #b1bad3); -webkit-background-clip: text; color: transparent; text-align: center; transition: color 0.3s; }

/* Blackjack Specific */
.bj-table { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; background: radial-gradient(circle at center, #1e4d3b 0%, #0b1217 90%); position: relative; }
.player-area { display: flex; justify-content: center; align-items: flex-end; gap: 20px; width: 100%; }
.bj-hand { display: flex; justify-content: center; align-items: center; gap: -30px; min-height: 140px; min-width: 120px; position: relative; transition: all 0.3s ease; padding: 10px; border-radius: 12px; }
.bj-hand.active { background: rgba(0, 231, 1, 0.05); box-shadow: 0 0 0 2px var(--accent-glow); transform: scale(1.05); z-index: 10; }
.bj-hand.inactive { opacity: 0.5; transform: scale(0.95); filter: grayscale(0.5); }
.bj-score { position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.6); padding: 4px 14px; border-radius: 20px; font-size: 15px; font-weight: 800; border: 1px solid rgba(255,255,255,0.1); white-space: nowrap; z-index: 5; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.bj-label { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; }
.card { width: 88px; height: 124px; background: white; border-radius: 8px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 8px; font-weight: 900; font-family: "Inter", sans-serif; margin-left: -40px; box-shadow: -5px 5px 15px rgba(0,0,0,0.4); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: dealCard 0.5s forwards; }
.card:first-child { margin-left: 0; } 
.card:hover { transform: translateY(-10px) !important; z-index: 10; } 
@keyframes dealCard { from { transform: translateY(-100px) scale(0.5); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.card.red { color: #e74c3c; } .card.black { color: #2c3e50; }
.card-val { font-size: 20px; line-height: 1; }
.card-suit { font-size: 32px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.15; }
.card-suit-sm { font-size: 20px; line-height: 1; transform: rotate(180deg); align-self: flex-end; }
.card.hidden { background: repeating-linear-gradient(45deg, #2c3e50, #2c3e50 10px, #34495e 10px, #34495e 20px); border: 2px solid #ecf0f1; }
.card.hidden * { display: none; }
.bj-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.result-float { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px; font-weight: 900; text-shadow: 0 2px 10px rgba(0,0,0,0.5); animation: floatUp 1s forwards; pointer-events: none; z-index: 20; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; transform: translate(-50%, -40px); } 100% { opacity: 0; transform: translate(-50%, -80px); } }

/* Roulette Specific */
.roulette-container { position: relative; width: 320px; height: 320px; display: flex; justify-content: center; align-items: center; }
#roulette-canvas { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 30px rgba(0,0,0,0.5); border: 8px solid #1a2733; transition: transform 4s cubic-bezier(0.15, 0.85, 0.15, 1.0); }
.roulette-pointer { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid var(--accent); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); z-index: 10; }
.bet-color-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.color-btn { height: 40px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; font-weight: 700; color: white; transition: 0.2s; opacity: 0.6; }
.color-btn:hover { opacity: 1; transform: translateY(-2px); }
.color-btn.active { opacity: 1; border-color: white; box-shadow: 0 0 10px rgba(255,255,255,0.3); transform: scale(1.02); }
.bg-red { background-color: #e74c3c; } .bg-black { background-color: #34495e; } .bg-green { background-color: #27ae60; }
.roulette-result-big { margin-top: 20px; font-size: 48px; font-weight: 900; text-shadow: 0 5px 15px rgba(0,0,0,0.5); display: flex; align-items: center; gap: 10px; }
.result-dot { width: 20px; height: 20px; border-radius: 50%; display: inline-block; }

/* 历史记录 */
.history-section { margin-top: 40px; background: var(--bg-card); border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); overflow: hidden; }
.history-header { padding: 16px 24px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.05); font-weight: 700; color: white; display: flex; align-items: center; gap: 10px; }
.table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.history-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 600px; }
.history-table th, .history-table td { padding: 14px 24px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.02); white-space: nowrap; }
.history-table th { color: var(--text-sub); font-size: 12px; }
.win-text { color: var(--accent); } .loss-text { color: var(--text-sub); }

.mobile-bar { display: none; }

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); width: 0; padding: 0; }
    .main-content { margin-left: 0; padding: 15px 15px 100px 15px; width: 100%; overflow-x: hidden;}
    .header { margin: 0 -15px 20px -15px; padding: 0 20px; height: 60px; }
    .hero { flex-direction: column; padding: 30px 20px; text-align: center; gap: 20px; }
    .hero-content h1 { font-size: 28px; }
    .game-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .game-layout { display: flex; flex-direction: column-reverse; border-radius: 12px; min-height: auto; }
    .sidebar-ctrl { border-right: none; border-top: 1px solid rgba(255,255,255,0.05); padding: 20px; }
    .game-stage { min-height: 380px; padding: 10px; }
    .dice-result-box, .crash-val, .limbo-counter { font-size: 60px; }
    .mines-grid { width: 100%; gap: 6px; } .mine-tile { font-size: 18px; border-bottom-width: 3px; }
    .bj-table { padding: 15px 5px; } .player-area { gap: 5px; } .bj-hand { min-width: 90px; min-height: 100px; padding: 5px; }
    .card { width: 55px; height: 77px; margin-left: -30px; padding: 4px; border-radius: 4px; }
    .card-val { font-size: 14px; } .card-suit { font-size: 18px; } .card-suit-sm { font-size: 14px; } .bj-score { font-size: 12px; padding: 2px 8px; top: -25px; }
    .mobile-bar { display: flex; position: fixed; bottom: 0; left: 0; width: 100%; height: 65px; background: rgba(15, 25, 35, 0.95); backdrop-filter: blur(10px); border-top: 1px solid rgba(255,255,255,0.05); z-index: 999; justify-content: space-around; align-items: center; padding-bottom: var(--safe-bottom); }
    .m-item { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-sub); font-size: 10px; font-weight: 600; transition: 0.2s; }
    .m-item svg { width: 24px; height: 24px; fill: currentColor; } .m-item.active { color: var(--accent); transform: translateY(-2px); }
    .logo:not(.mobile-only) { display: none; }
}

/* ================= 1. 核心变量 (高级暗黑质感) ================= */
        :root {
            --bg-overlay: rgba(0, 0, 0, 0.75); /* 背景遮罩 */
            --bg-modal: #1a2c38;      /* 模态框主体 */
            --bg-dark: #0f212e;       /* 深色背景区域 */
            --bg-hover: #213743;      /* 列表悬停色 */
            
            --text-main: #ffffff;
            --text-sub: #b1b6b6;
            
            --accent: #00e701;        /* Stake 核心绿 */
            --accent-glow: rgba(0, 231, 1, 0.4); /* 绿色辉光 */
            --accent-hover: #00c201;
            
            --border-color: rgba(255, 255, 255, 0.08);
            --shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
        }

        /* ================= 2. 模态框容器动画 ================= */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: var(--bg-overlay); backdrop-filter: blur(8px); /* 磨砂玻璃效果 */
            z-index: 2000; display: none; opacity: 0; 
            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            align-items: center; justify-content: center;
        }
        .modal-overlay.open { display: flex; opacity: 1; }

        .wallet-modal {
            background: var(--bg-modal); width: 100%; max-width: 480px;
            border-radius: 16px; 
            box-shadow: var(--shadow-modal);
            display: flex; flex-direction: column; overflow: hidden;
            transform: scale(0.92) translateY(10px); 
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性弹出动画 */
            border: 1px solid var(--border-color);
        }
        .modal-overlay.open .wallet-modal { transform: scale(1) translateY(0); }

        /* 头部样式 */
        .w-header {
            padding: 20px 24px; background: var(--bg-dark); 
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid var(--border-color);
        }
        .w-title { font-weight: 700; font-size: 18px; color: white; display: flex; align-items: center; gap: 8px; letter-spacing: 0.5px; }
        .w-close { 
            background: rgba(255,255,255,0.05); border: none; color: var(--text-sub); 
            width: 32px; height: 32px; border-radius: 50%; cursor: pointer; 
            display: flex; align-items: center; justify-content: center; font-size: 20px;
            transition: all 0.2s;
        }
        .w-close:hover { background: rgba(255,255,255,0.1); color: white; transform: rotate(90deg); }

        /* Tab 切换 */
        .w-tabs { display: flex; padding: 0 24px; gap: 30px; background: var(--bg-dark); border-bottom: 1px solid var(--border-color); }
        .w-tab { 
            padding: 16px 0; color: var(--text-sub); font-weight: 600; cursor: pointer; 
            border-bottom: 2px solid transparent; font-size: 14px; transition: 0.3s; position: relative;
        }
        .w-tab:hover { color: white; }
        .w-tab.active { color: white; border-bottom-color: var(--accent); }
        .w-tab.active::after { /* 激活时的底部光晕 */
            content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px;
            box-shadow: 0 -2px 10px var(--accent-glow);
        }

        .w-body { padding: 24px; max-height: 70vh; overflow-y: auto; }
        
        /* 滚动条美化 */
        .w-body::-webkit-scrollbar, .cs-dropdown::-webkit-scrollbar { width: 5px; }
        .w-body::-webkit-scrollbar-thumb, .cs-dropdown::-webkit-scrollbar-thumb { background: #2f4553; border-radius: 3px; }

        /* ================= 3. 组件样式 ================= */

        /* 币种选择器 */
        .network-label { font-size: 12px; color: var(--text-sub); margin-bottom: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
        .coin-selector { position: relative; margin-bottom: 24px; user-select: none; }

        .cs-trigger {
            background: var(--bg-dark); border: 1px solid var(--border-color); 
            padding: 14px 16px; border-radius: 10px;
            display: flex; align-items: center; justify-content: space-between; 
            cursor: pointer; transition: all 0.2s ease;
        }
        .cs-trigger:hover { border-color: rgba(255,255,255,0.3); background: #132836; }
        .cs-info { display: flex; align-items: center; gap: 12px; font-weight: 700; color: #fff; font-size: 15px; }
        .coin-icon { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }

        /* 下拉菜单 */
        .cs-dropdown {
            position: absolute; top: 110%; left: 0; width: 100%; background: #1a2c38;
            border: 1px solid var(--border-color); border-radius: 10px; 
            max-height: 280px; overflow-y: auto; z-index: 100; display: none;
            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
            animation: slideDown 0.2s ease forwards;
        }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
        .cs-dropdown.show { display: block; }

        .cs-item {
            padding: 14px 16px; display: flex; align-items: center; gap: 12px;
            cursor: pointer; transition: 0.2s; border-bottom: 1px solid rgba(255,255,255,0.02);
            color: var(--text-sub); font-weight: 600;
        }
        .cs-item:hover { background: var(--bg-hover); color: white; padding-left: 20px; }
        .cs-item.selected { background: rgba(0, 231, 1, 0.08); color: var(--accent); }

        /* 网络 Pills */
        .network-grid { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
        .net-pill {
            background: rgba(255,255,255,0.03); border: 1px solid var(--border-color); 
            padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; 
            cursor: pointer; color: var(--text-sub); transition: all 0.2s;
        }
        .net-pill:hover { border-color: white; color: white; transform: translateY(-1px); }
        .net-pill.active { 
            background: rgba(0, 231, 1, 0.1); color: var(--accent); border-color: var(--accent); 
            box-shadow: 0 0 15px rgba(0, 231, 1, 0.15);
        }

        /* 地址卡片 */
        .address-box { 
            background: var(--bg-dark); padding: 24px; border-radius: 12px; 
            text-align: center; border: 1px solid var(--border-color); 
        }
        .qr-frame { 
            background: white; padding: 10px; border-radius: 12px; width: 150px; height: 150px; 
            margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;
            box-shadow: 0 0 20px rgba(255,255,255,0.1); 
        }
        .qr-frame img { width: 100%; height: 100%; display: block; }

        .addr-input-group { 
            display: flex; background: #15222b; border-radius: 8px; padding: 4px; 
            border: 1px solid var(--border-color); align-items: center;
        }
        .addr-text { 
            flex: 1; background: transparent; border: none; color: var(--text-sub); 
            padding: 10px 12px; font-family: 'Roboto Mono', monospace; font-size: 13px; 
            text-overflow: ellipsis; overflow: hidden;
        }
        .copy-btn { 
            background: #2f4553; border: none; color: white; padding: 8px 16px; 
            border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 12px; 
            transition: 0.2s; margin-left: 5px;
        }
        .copy-btn:hover { background: #3d5a6c; }
        .copy-btn:active { background: var(--accent); color: black; }
        .addr-notice { font-size: 12px; color: var(--text-sub); margin-top: 15px; line-height: 1.4; text-align: left; opacity: 0.8; }
        .addr-notice span { color: var(--accent); font-weight: bold; }

        /* 提现输入框 (关键修改：Flex布局解决Max按钮不显示问题) */
        .w-input-label { 
            font-size: 12px; color: var(--text-sub); margin-bottom: 8px; font-weight: 600; 
            display: flex; justify-content: space-between; align-items: center;
        }
        .w-input-box { 
            background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 10px; 
            display: flex; align-items: center; /* 垂直居中 */
            padding: 0 12px; margin-bottom: 24px; height: 52px;
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative; 
        }
        .w-input-box:focus-within { 
            border-color: var(--accent); 
            box-shadow: 0 0 0 4px rgba(0, 231, 1, 0.1); 
            background: #132836;
        }
        .w-input { 
            flex: 1; /* 自动撑开 */
            background: transparent; border: none; color: white; height: 100%; 
            font-weight: 600; font-size: 15px; font-family: monospace; width: 100%;
        }
        .w-input:focus { outline: none; }
        
        .w-max-btn { 
            font-size: 12px; font-weight: 800; color: var(--accent); 
            background: rgba(0, 231, 1, 0.1); border: none; cursor: pointer; 
            padding: 6px 12px; border-radius: 6px; margin-left: 10px; 
            transition: all 0.2s; white-space: nowrap; 
        }
        .w-max-btn:hover { background: var(--accent); color: #000; box-shadow: 0 0 10px var(--accent-glow); }

        /* 底部汇总 */
        .w-summary { 
            background: rgba(0,0,0,0.2); padding: 16px; border-radius: 8px; margin-bottom: 24px; 
            border: 1px solid rgba(255,255,255,0.02); 
        }
        .w-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; color: var(--text-sub); }
        .w-row:last-child { margin-bottom: 0; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,0.1); }
        .w-val { color: white; font-weight: 600; font-family: monospace; letter-spacing: 0.5px; }

        .w-submit-btn { 
            width: 100%; background: var(--accent); color: #012001; border: none; 
            height: 54px; border-radius: 8px; font-weight: 800; font-size: 16px; cursor: pointer; 
            transition: all 0.2s; box-shadow: 0 4px 20px rgba(0,231,1,0.25); 
        }
        .w-submit-btn:hover { 
            background: var(--accent-hover); transform: translateY(-2px); 
            box-shadow: 0 6px 25px rgba(0,231,1,0.35); 
        }
        .w-submit-btn:active { transform: scale(0.98); }

        /* 视图切换动画 */
        .view-section-wallet { display: none; }
        .view-section-wallet.active { display: block; animation: fadeSlideUp 0.3s ease forwards; }
        @keyframes fadeSlideUp { 
            from { opacity: 0; transform: translateY(10px); } 
            to { opacity: 1; transform: translateY(0); } 
        }

/* ================= 1. 底部导航栏 (悬浮磨砂感) ================= */
:root {
    --nav-height: 68px;
    --nav-bg: rgba(15, 23, 30, 0.85); /* 深蓝半透明 */
    --nav-blur: 20px;
    --nav-border: rgba(255, 255, 255, 0.08);
    --active-color: #fff;
    --inactive-color: #6a7785;
    --accent: #00e701; /* 品牌色 */
}

.mobile-bar-new {
    display: none;
}

@media (max-width: 900px) {
    .mobile-bar { display: none !important; } /* 隐藏旧版 */

    .mobile-bar-new {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--nav-height);
        
        /* 高级磨砂玻璃效果 */
        background: var(--nav-bg);
        backdrop-filter: blur(var(--nav-blur));
        -webkit-backdrop-filter: blur(var(--nav-blur));
        border-top: 1px solid var(--nav-border);
        
        z-index: 999;
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom); /* 适配 iPhone 小黑条 */
        
        /* 柔和的上投影，增加层次感 */
        box-shadow: 0 -10px 40px rgba(0,0,0,0.3);
    }

    .m-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        background: transparent;
        border: none;
        color: var(--inactive-color);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        -webkit-tap-highlight-color: transparent; /* 去除点击高亮 */
    }

    .m-nav-item svg {
        width: 24px;
        height: 24px;
        fill: currentColor;
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动画 */
    }

    /* 激活状态：高亮 + 微上浮 */
    .m-nav-item.active {
        color: var(--active-color);
    }
    .m-nav-item.active svg {
        fill: var(--active-color);
        transform: translateY(-3px); /* 图标微微上浮 */
        filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2)); /* 发光 */
    }

    /* 中间菜单按钮 */
    .m-nav-item.menu-trigger svg {
        width: 26px;
        height: 26px;
    }
    
    /* 点击反馈：按压微缩 */
    .m-nav-item:active {
        transform: scale(0.95);
    }
}

/* ================= 2. 抽屉菜单 (丝滑侧滑 + 物理阻尼) ================= */

/* 遮罩层 */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px); /* 强力背景模糊 */
    -webkit-backdrop-filter: blur(6px);
    z-index: 2000;
    opacity: 0;
    pointer-events: none; /* 默认穿透 */
    transition: opacity 0.4s ease; /* 渐隐渐显 */
}
.drawer-overlay.open {
    opacity: 1;
    pointer-events: all;
}

/* 抽屉主体 */
.mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%; /* 宽度适中 */
    max-width: 320px;
    height: 100%;
    
    /* 使用深色渐变背景，比纯色更有质感 */
    background: linear-gradient(180deg, #131b24 0%, #0e141b 100%);
    
    z-index: 2001;
    transform: translateX(-105%); /* 彻底移出屏幕 */
    
    /* 🍎 核心：iOS 风格物理回弹曲线 */
    transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
    
    display: flex;
    flex-direction: column;
    
    /* 右侧深邃投影，增加悬浮感 */
    box-shadow: 20px 0 60px rgba(0,0,0,0.7);
    border-right: 1px solid rgba(255,255,255,0.05);
}

.drawer-overlay.open .mobile-drawer {
    transform: translateX(0);
}

/* ================= 3. 抽屉内部布局 (呼吸感排版) ================= */

/* 头部 */
.drawer-header {
    padding: 30px 24px 20px; /* 顶部留白更多 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo 美化 */
.drawer-header .logo {
    font-size: 24px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 231, 1, 0.3);
}

/* Tabs 切换条 (胶囊风格) */
.drawer-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    margin: 0 20px 25px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.05);
}

.d-tab {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--inactive-color);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.d-tab.active {
    background: rgba(255, 255, 255, 0.08); /* 微亮背景 */
    color: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 滚动内容区 */
.drawer-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 16px;
    /* 隐藏滚动条 */
    scrollbar-width: none; 
}
.drawer-content::-webkit-scrollbar { display: none; }

/* 标题分隔符 */
.d-section-title {
    font-size: 11px;
    color: #55657e;
    font-weight: 800;
    margin: 25px 12px 10px; /* 拉开间距 */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
}
.d-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.05);
    margin-left: 10px;
}

/* 链接项 */
.d-link {
    display: flex;
    align-items: center;
    gap: 16px; /* 图标和文字间距 */
    padding: 14px 16px;
    color: #b1bad3;
    font-weight: 600;
    font-size: 14px;
    border-radius: 12px; /* 更圆润 */
    transition: all 0.2s ease;
    border: 1px solid transparent; /* 占位防止抖动 */
}

.d-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    opacity: 0.7;
    transition: transform 0.2s;
}

/* 悬停/点击效果 */
.d-link:active {
    background: rgba(255, 255, 255, 0.04);
    color: white;
    transform: scale(0.98); /* 按压微缩 */
}
.d-link:active svg {
    transform: scale(1.1); /* 图标微放大 */
    opacity: 1;
}

/* 底部固定区域 (无痕融合) */
.drawer-footer {
    margin-top: auto;
    padding: 15px 16px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,0.03);
    background: rgba(0,0,0,0.1); /* 稍微深一点 */
}

.drawer-footer .d-link {
    color: #7a8899;
}
/* ================= 桌面端侧边栏内容样式 (Stake Style) ================= */

/* 侧边栏整体布局 */
.sidebar {
    /* 保持原有的定位，增加内部布局 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止双滚动条 */
}

/* 侧边栏滚动区域 */
.sb-scroll-area {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px; /* 给滚动条留点位置 */
}
/* 自定义侧边栏滚动条 */
.sb-scroll-area::-webkit-scrollbar { width: 4px; }
.sb-scroll-area::-webkit-scrollbar-thumb { background: #2f4553; border-radius: 2px; }

/* 侧边栏 Tab 切换 (娱乐场/体育) */
.sb-tabs-wrapper {
    padding: 0 0 20px 0;
    flex-shrink: 0;
}
.sb-tabs {
    display: flex;
    background: #0b141c;
    padding: 4px;
    border-radius: 25px;
    border: 1px solid #2f4553;
}
.sb-tab {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    border-radius: 20px;
    cursor: pointer;
    transition: 0.2s;
}
.sb-tab:hover { color: white; }
.sb-tab.active {
    background: #213743;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 侧边栏分组标题 */
.sb-section-title {
    font-size: 11px;
    color: #55657e;
    font-weight: 800;
    margin: 20px 10px 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 侧边栏链接项 */
.sb-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-sub);
    font-weight: 600;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s;
    margin-bottom: 2px;
    cursor: pointer;
}
.sb-link:hover {
    background: #1a2733;
    color: white;
    padding-left: 16px; /* 悬停时稍微右移一点的动效 */
}
.sb-link.active {
    background: #1a2733;
    color: white;
    border-left: 3px solid var(--accent); /* 选中时左边有个绿条 */
}

/* 图标样式 */
.sb-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    opacity: 0.7;
    transition: 0.2s;
}
.sb-link:hover svg, .sb-link.active svg {
    opacity: 1;
    fill: var(--accent); /* 悬停图标变绿 */
}

/* 侧边栏底部 (客服等) */
.sb-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

/* 体育视图隐藏 */
#sb-view-sports { display: none; }

/* ================= 个人中心 (User Center) ================= */

/* 1. 桌面端 Header 上的用户头像按钮 */


/* 2. 个人中心弹窗内容样式 */
/* 复用 .wallet-modal 的外壳，但在内部使用列表样式 */

.uc-profile-header {
    background: #0f212e;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.uc-avatar {
    width: 50px; height: 50px;
    background: #1a2c38;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-weight: 900; font-size: 20px;
}
.uc-info-row { display: flex; flex-direction: column; }
.uc-username { font-weight: 800; color: white; font-size: 16px; }
.uc-level { font-size: 12px; color: var(--text-sub); background: rgba(255,255,255,0.1); padding: 2px 8px; border-radius: 4px; margin-top: 4px; display: inline-block; width: fit-content; }

.uc-menu-list {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr; /* 手机单列，电脑可以在下面改双列 */
    gap: 5px;
}

.uc-item {
    display: flex; align-items: center; gap: 12px;
    padding: 15px;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-sub);
    font-weight: 600;
    font-size: 14px;
    transition: 0.2s;
}
.uc-item:hover { background: #1a2c38; color: white; }
.uc-item svg { width: 18px; height: 18px; fill: currentColor; }

.uc-logout { color: var(--danger) !important; }
.uc-logout:hover { background: rgba(255, 77, 77, 0.1); }

/* ================= 聊天室完整样式 (气泡分离修复版) ================= */

/* 全局字体优化 */
.chat-window, .chat-input {
    font-family: "Nunito", "Segoe UI Emoji", "PingFang SC", sans-serif;
}

/* 1. 聊天室悬浮入口按钮 */
.chat-toggle-btn {
    position: fixed; 
    bottom: 80px; 
    right: 20px;
    width: 56px; 
    height: 56px;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    border: none; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 8px 20px rgba(0, 114, 255, 0.4);
    cursor: pointer; 
    z-index: 900;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chat-toggle-btn:hover { transform: scale(1.1) rotate(-10deg); }
.chat-toggle-btn svg { fill: white; width: 28px; height: 28px; }
.chat-badge {
    position: absolute; top: 0; right: 0; width: 12px; height: 12px;
    background: #ff4757; border: 2px solid #1a2c38;
    border-radius: 50%;
}

/* 2. 聊天窗口容器 (默认桌面端样式) */
.chat-window {
    position: fixed; 
    bottom: 150px; 
    right: 20px;
    width: 340px; 
    height: 520px;
    background: rgba(21, 32, 43, 0.85); /* 深色半透明 */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    display: flex; 
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    z-index: 9999;
    overflow: hidden;
    opacity: 0; 
    transform: translateY(30px) scale(0.9); 
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chat-window.open { 
    opacity: 1; 
    transform: translateY(0) scale(1); 
    pointer-events: all; 
}

/* ================= 移动端适配 (关键修复部分) ================= */
@media (max-width: 600px) {
    .chat-window {
        /* 抬高底部距离，避开导航栏 */
        bottom: 85px; 
        
        /* 居中悬浮卡片 */
        left: 50%;
        right: auto;
        width: 95%;
        height: 65vh;
        border-radius: 20px;
        
        /* 初始隐藏状态 */
        transform: translateX(-50%) translateY(20px) scale(0.95);
    }

    /* 移动端打开状态 */
    .chat-window.open {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }

    /* 打开时隐藏按钮 */
    .chat-window.open ~ .chat-toggle-btn {
        display: none;
    }
}


/* 3. 聊天头部 */
.chat-header {
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    font-weight: 700; 
    font-size: 16px; 
    color: #fff;
}
.chat-online {
    font-size: 12px; 
    color: #2ecc71; 
    margin-left: 8px;
    background: rgba(46, 204, 113, 0.15); 
    padding: 2px 8px; 
    border-radius: 12px;
}
.chat-close { 
    font-size: 24px; 
    color: rgba(255,255,255,0.5); 
    transition: 0.2s; 
    background: none; 
    border: none; 
}
.chat-close:hover { color: #fff; transform: rotate(90deg); }

/* 4. 消息列表区域 (气泡分离修改部分) */
.chat-messages {
    flex: 1; 
    overflow-y: auto; 
    padding: 20px 15px;
    display: flex; 
    flex-direction: column; 
    gap: 16px;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { 
    background: rgba(255,255,255,0.1); 
    border-radius: 4px; 
}

/* 消息行容器：不再包含背景色，仅作为布局容器 */
.msg-row {
    display: flex;
    flex-direction: column;
    max-width: 92%;
    align-self: flex-start;
    position: relative;
    animation: msgPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* 移除原来的背景和边框 */
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
}

@keyframes msgPopIn {
    from { opacity: 0; transform: scale(0.8) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 这里的 Header 是头像和名字，显示在气泡上方 */
.msg-header { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 6px; /* 与气泡拉开一点距离 */
    padding: 0 4px;     /* 轻微缩进对齐 */
}

/* 头像模拟 */
.msg-header::before {
    content: ''; display: block; width: 24px; height: 24px;
    background: linear-gradient(45deg, #ff9a9e, #fad0c4);
    border-radius: 50%;
}
.msg-row:has(.vip-gold) .msg-header::before { background: linear-gradient(45deg, #f6d365, #fda085); }
.msg-row:has(.vip-diamond) .msg-header::before { background: linear-gradient(45deg, #a18cd1, #fbc2eb); }

.msg-user { 
    color: #a0aec0; 
    font-size: 12px; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
}

/* 这里的 Content 才是真正的气泡 */
.msg-content {
    color: #e2e8f0; 
    font-size: 14px; 
    line-height: 1.5; 
    font-weight: 400;
    
    /* 将原来的背景、边框、阴影移到这里 */
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 10px 14px;
    border-radius: 16px;
    border-bottom-left-radius: 2px; /* 左下角直角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: fit-content; /* 宽度自适应内容 */
}

.vip-badge { 
    font-size: 9px; 
    padding: 2px 6px; 
    border-radius: 99px; 
    letter-spacing: 0.5px; 
}

/* === 自己的消息 (靠右显示) === */
.msg-row.is-me {
    align-self: flex-end;
    align-items: flex-end; /* 让内部元素靠右对齐 */
    /* 移除旧的背景设置 */
    background: none; 
}

/* 自己消息的头部（头像名字） */
.msg-row.is-me .msg-header { 
    flex-direction: row-reverse; 
    margin-right: 4px;
}
.msg-row.is-me .msg-user { 
    text-align: right; 
}

/* 自己消息的气泡 */
/* 自己消息的气泡 */
.msg-row.is-me .msg-content {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4); /* 紫色光晕 */
    
    color: white;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 16px;
}


/* 5. 底部输入框 (包含 iPhone 安全区适配) */
.chat-input-area {
    padding: 15px;
    /* 核心修复：适配 iPhone 小黑条 */
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
    
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex; 
    gap: 10px; 
    align-items: center;
    
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0 0 24px 24px;
}

.chat-input {
    flex: 1; 
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    border-radius: 99px;
    padding: 10px 18px;
    font-size: 14px;
    transition: 0.2s;
}
.chat-input:focus { 
    border-color: #00c6ff; 
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(0, 198, 255, 0.2);
}
.chat-input::placeholder { color: rgba(255,255,255,0.3); }

.chat-send-btn {
    background: transparent; 
    color: #00c6ff; 
    border: none;
    width: 40px; 
    height: 40px; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center;
    cursor: pointer; 
    transition: 0.2s; 
    font-size: 20px;
}
.chat-send-btn:hover { 
    background: rgba(0, 198, 255, 0.1); 
    transform: scale(1.1); 
}

/* ================= 高级登录注册按钮 (High-end Auth Buttons) ================= */

.auth-btn-group {
    display: flex;
    gap: 12px; /* 按钮之间的间距 */
    align-items: center;
}

/* 通用按钮基础 */
.btn-smooth {
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 14px;
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); /* 丝滑的核心：贝塞尔曲线 */
}

/* 1. 登录按钮：磨砂玻璃风格 */
.btn-login-glass {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-sub);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.btn-login-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px); /* 轻微上浮 */
}

/* 2. 注册按钮：霓虹流光风格 */
.btn-register-glow {
    background: var(--accent);
    color: #000;
    box-shadow: 0 4px 15px rgba(0, 231, 1, 0.3); /* 初始光晕 */
}

.btn-register-glow:hover {
    background: #2eff2f;
    transform: translateY(-2px) scale(1.02); /* 上浮并轻微放大 */
    box-shadow: 0 8px 25px rgba(0, 231, 1, 0.6); /* 悬停时光晕增强 */
}

.btn-register-glow:active {
    transform: scale(0.95); /* 点击时回弹效果 */
}

/* 隐藏钱包的辅助类 */
.hidden {
    display: none !important;
}

/* ================= 头部样式重构 (Header Refinement) ================= */

/* 1. 头部容器 */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between; 
    height: 70px;
    padding: 0 20px;
    background: rgba(20, 31, 41, 0.95); /* 深色背景，保证看不见下面的内容 */
    backdrop-filter: blur(10px);        /* 毛玻璃 */
    border-bottom: 1px solid rgba(255,255,255,0.05);
    
    /* ★★★ 修改这里：从 relative 改为 sticky ★★★ */
    /* 这样它会自然地“粘”在顶部，且不会破坏左右宽度布局 */
    position: sticky; 
    top: 0; 
    
    z-index: 100; /* 保证在最上层 */
}

/* 2. 电脑端隐藏手机 Logo (保持不变) */
@media (min-width: 901px) {
    .mobile-only {
        display: none !important;
    }
}

/* 3. 右侧区域容器 (保持不变) */
.header-right-section {
    display: flex;
    align-items: center;
    gap: 15px; 
}
/* 4. 钱包胶囊 (Wallet Pill) - Stake 风格 */
.wallet-pill {
    /* 尺寸与布局 */
    height: 44px; /* 稍微加高一点点，更大气 */
    display: flex;
    align-items: center;
    padding: 4px 6px 4px 16px; /* 左宽右窄，为了放按钮 */
    gap: 12px;
    
    /* 💎 高级材质感：深色毛玻璃 */
    background: rgba(15, 25, 35, 0.7); /* 半透明深蓝黑 */
    backdrop-filter: blur(12px);       /* 背景模糊 */
    -webkit-backdrop-filter: blur(12px);
    
    /* 边框与圆角 */
    border: 1px solid rgba(255, 255, 255, 0.08); /* 极细微的白边 */
    border-radius: 30px; /* 全圆角，更现代 */
    
    /* 阴影与过渡 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* 悬浮感阴影 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 丝滑动画 */
    cursor: pointer;
}

/* 鼠标悬停效果：发光 + 上浮 */
.wallet-pill:hover {
    border-color: rgba(0, 231, 1, 0.4); /* 边框变绿 */
    box-shadow: 0 8px 25px rgba(0, 231, 1, 0.15); /* 绿色氛围光 */
    transform: translateY(-1px);
    background: rgba(20, 35, 45, 0.9);
}

/* 货币符号 ($) */
.wallet-currency {
    color: #00e701; /* 荧光绿 */
    font-weight: 800;
    font-size: 16px;
    text-shadow: 0 0 10px rgba(0, 231, 1, 0.4); /* 符号自带光晕 */
}

/* 余额数字 */
/* 修改余额字体样式 */
#user-balance {
    /* 1. 改回现代无衬线字体 (Inter 是 Stake 用的核心字体) */
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* 2. 加粗，保持视觉分量 */
    font-weight: 700; 
    
    /* 3. 字体大小 */
    font-size: 15px;
    color: #ffffff;
    
    /* 4. 关键设置：开启“等宽数字”模式 */
    /* 这让 '1' 和 '8' 占一样的宽度，数字变化时余额不会忽长忽短地抖动 */
    font-variant-numeric: tabular-nums; 
    font-feature-settings: "tnum";
    
    /* 5. 字间距稍微紧一点点，看起来更精致 */
    letter-spacing: -0.3px; 
}

/* 钱包内部的蓝色按钮 */
.wallet-pill .btn-wallet-action {
    height: 34px;
    padding: 0 16px;
    border-radius: 20px; /* 胶囊里的胶囊 */
    border: none;
    
    /* 渐变蓝背景 */
    background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
    color: white;
    font-weight: 700;
    font-size: 13px;
    
    box-shadow: 0 4px 10px rgba(0, 114, 255, 0.3); /* 蓝色光晕 */
    transition: all 0.2s;
}

.wallet-pill .btn-wallet-action:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 15px rgba(0, 114, 255, 0.5);
}

/* 6. 用户头像/按钮区域 */
.user-btn {
    /* 尺寸 */
    width: 48px;
    height: 48px;
    
    /* 内部布局 */
    display: flex !important; /* 强制显示 */
    align-items: center;
    justify-content: center;
    
    /* 💎 核心升级：双层渐变边框 (模拟金圈/VIP圈) */
    /* 这一行代码实现了：背景是黑的，但边框是渐变的 */
    background: linear-gradient(#1a2c38, #1a2c38) padding-box,
                linear-gradient(135deg, #ffd700, #ffaa00) border-box; /* 金色渐变边框 */
    border: 2px solid transparent; /* 透明边框，透出底下的渐变 */
    border-radius: 50%;
    
    /* 阴影与动画 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动画 */
    position: relative;
    overflow: visible; /* 允许角标超出 */
}

/* 鼠标悬停：旋转放大 */
.user-btn:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3); /* 金色光晕 */
}

/* 头像里的文字/图片样式 */
.user-btn > div {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
    
    /* 如果是文字头像，给个高级渐变底色 */
    background: linear-gradient(180deg, #2f4553 0%, #1a2c38 100%) !important;
    color: #ffd700 !important; /* 金色文字 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* (可选) 在线状态小绿点 */
.user-btn::after {
    content: '';
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #00e701;
    border: 2px solid #141f29; /* 这里的颜色要和网页背景色一致 */
    border-radius: 50%;
    box-shadow: 0 0 5px #00e701;
}


/* ================= 移动端适配优化 (Mobile Fixes) ================= */

@media (max-width: 900px) {
    .header {
        padding: 0 15px; /* 缩小左右边距 */
        height: 60px;    /* 手机端头部稍微变矮 */
        justify-content: space-between; /* 两端对齐 */
    }

    /* Logo 稍微调小 */
    .logo.mobile-only {
        font-size: 20px;
    }

    /* 钱包胶囊缩小适配 */
    .wallet-pill {
        height: 36px;        /* 变矮 */
        padding: 0 3px 0 12px; 
        margin-right: 0 !important; /* 手机端右侧不需要间距 (因为没头像) */
        margin-left: auto;    /* 强制推到最右边 */
    }

    /* 余额文字变小 */
    #user-balance {
        font-size: 13px;
    }

    /* 钱包按钮变小 */
    .wallet-pill .btn-primary {
        height: 30px !important;
        border-radius: 15px;
        padding: 0 12px !important;
        font-size: 12px !important;
    }

    /* 彻底隐藏头像 (因为底部有"我的") */
    

    /* 确保登录/注册按钮容器也对齐 */
    #header-auth-area {
        margin-left: 0 !important;
    }
}

/* 1. 核心需求：手机端彻底隐藏用户圆形头像 */
/* 因为底部已有“我的”菜单，顶部头像多余 */



/* 2. 调整 Header 布局，实现“完美水平对齐” */
.header {
    padding: 0 20px; /* 左右留出舒适间距 */
    height: 60px;    /* 固定高度，保证垂直居中 */
    /* 确保 Logo 在左，按钮在右，中间自动撑开 */
    justify-content: space-between; 
    align-items: center;
}

/* 3. 优化 Logo 位置 */
.logo.mobile-only {
    margin: 0; /* 去掉多余边距 */
    font-size: 22px; /* 调整字体大小，看起来更精致 */
    line-height: 1;  /* 防止行高导致的垂直偏移 */
    transform: translateY(2px); /* 微调：根据字体特性，有时候需要微下移才视觉居中 */
}

/* 4. 优化登录/注册按钮在手机上的显示 */
/* 防止按钮太大挤压布局 */
.auth-btn-group .btn-smooth {
    padding: 6px 16px; /* 减小内边距 */
    font-size: 12px;   /* 字体稍微调小 */
    height: 36px;      /* 固定高度 */
    display: flex;
    align-items: center;
}

/* 减小两个按钮之间的间距 */
.auth-btn-group {
    gap: 8px; 
}

/* 5. 优化钱包显示 (登录后) */
/* 让钱包紧贴右侧，因为头像没了 */
.wallet-pill {
    margin-left: auto !important; /* 强制推到最右边 */
    margin-right: 0;
    height: 36px; /* 与登录按钮高度一致，保持视觉统一 */
    font-size: 13px;
}

/* 6. 确保认证区域紧贴右侧 */
#header-auth-area {
    margin-left: 0 !important;
}

/* ================= 用户头像样式修复 (User Avatar Fix) ================= */

/* 1. 电脑端默认样式 (必须定义尺寸，否则看不见！) */
.user-btn {
    width: 42px;
    height: 42px;
    background: #1a2c38;
    border: 1px solid #2f4553;
    border-radius: 50%;
    display: flex;        /* 电脑端默认显示 */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    margin-left: 10px;
    flex-shrink: 0;
}

.user-btn:hover {
    border-color: white;
    background: #213743;
}

/* 2. 移动端样式覆盖 (只在 900px 以下隐藏) */
@media (max-width: 900px) {
    .user-btn {
        display: none !important; /* 手机端强制隐藏 */
    }
    
    /* 手机端 Header 布局调整 */
    .header {
        justify-content: space-between;
        padding: 0 15px;
    }
    
    /* 手机端认证区域靠右 */
    #header-auth-area {
        margin-left: 0 !important;
    }
}

/* ================= 老虎机横向滚动区 ================= */
.slots-section {
    margin-top: 30px;
    padding: 0 10px; /* 稍微留点边距 */
}

/* 头部标题栏 */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    color: white;
}
.header-left {
    display: flex; align-items: center; gap: 8px;
}
.header-icon {
    width: 20px; height: 20px; fill: var(--text-sub, #b1bad3);
}

/* 左右导航按钮 */
.header-nav { display: flex; gap: 10px; }
.nav-btn {
    width: 36px; height: 36px;
    background: #1a2c38; /* 深色背景 */
    border: 1px solid #2f4553;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.2s;
}
.nav-btn:hover { background: #2f4553; }

/* 滚动容器 */
.slots-scroller {
    display: flex;
    gap: 15px; /* 卡片之间的间距 */
    overflow-x: auto; /* 允许横向滚动 */
    scroll-behavior: smooth; /* 平滑滚动 */
    padding-bottom: 10px; /* 防止阴影被切掉 */
    
    /* 隐藏默认滚动条 (Chrome/Safari) */
    -webkit-overflow-scrolling: touch;
}
.slots-scroller::-webkit-scrollbar { display: none; }

/* 单个游戏卡片 (竖版) */
.slot-card-vertical {
    flex: 0 0 160px; /* 固定宽度，不随窗口压缩 */
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s;
}

/* 移动端稍微变小一点 */
@media (max-width: 600px) {
    .slot-card-vertical { flex: 0 0 130px; }
}

.slot-card-vertical:hover { transform: translateY(-5px); }

/* 海报图片区域 */
.slot-poster {
    width: 100%;
    aspect-ratio: 2 / 3; /* 竖向比例，模仿 Stake */
    background-size: cover;
    background-position: center;
    border-radius: 10px; /* 漂亮的圆角 */
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* 覆盖在图片底部的渐变文字 (防止图片本身没文字) */
.poster-overlay {
    position: absolute; bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    padding: 40px 10px 10px 10px;
    opacity: 0; /* 默认隐藏，鼠标放上去显示，或者你可以改成 1 让它一直显示 */
    transition: 0.3s;
}
.slot-card-vertical:hover .poster-overlay { opacity: 1; }

.card-title { font-weight: 700; font-size: 13px; color: white; line-height: 1.2; }
.card-provider { font-size: 10px; color: #b1bad3; margin-top: 2px; text-transform: uppercase; }

/* 底部在线人数 (Stake 风格) */
.live-stats {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600; color: #b1bad3;
}
.live-dot {
    width: 8px; height: 8px;
    background-color: #00e701; /* Stake 绿 */
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(0, 231, 1, 0.5);
}

/* =============================================
   电脑端位置微调 (Desktop Adjustment)
   ============================================= */
@media (min-width: 901px) {

    /* 1. 针对右侧容器的定位调整 */
    .header-right-section {
        display: flex;
        align-items: center;
        gap: 15px; 

        /* 核心：先把东西推到最右边 */
        margin-left: auto;
        
        /* ★★★ 重点在这里 ★★★ */
        /* 这里设置 50px，意思就是离右边框保持 50px 的距离 */
        /* 如果觉得还是太靠右，把 50 改成 80 或 100 */
        /* 如果觉得太靠左，把 50 改成 20 */
        margin-right: 180px; 
        
        /* 钢铁防挤压锁：防止头像被挤没了 */
        flex-shrink: 0 !important;
        min-width: max-content; /* 确保容器宽度足够容纳内容 */
    }

    /* 2. 再次确保内部元素不许变形 */
    .wallet-pill, 
    .user-btn, 
    #header-auth-area {
        flex-shrink: 0 !important;
        white-space: nowrap; /* 禁止换行 */
    }
    
    /* 3. 强制显示头像 (防止被移动端规则误伤) */
    .user-btn {
        display: flex !important;
    }
}

/* ================= 🚀 轮播图核心样式 (Premium Hero Carousel) ================= */

/* --- 1. 容器 & 基础设定 --- */
.hero-carousel-container {
    position: relative;
    width: 100%;
    /* 🟢 桌面端高度增加，更具大气感 */
    height: 380px; 
    border-radius: 24px; /* 更圆润的圆角 */
    overflow: hidden;
    margin-bottom: 40px;
    /* 高级悬浮阴影：双层阴影打造立体感 */
    box-shadow: 
        0 20px 50px -20px rgba(0,0,0,0.7),
        inset 0 1px 1px rgba(255,255,255,0.1);
    background: #0f1923;
    z-index: 1;
}

/* --- 2. 轨道 (平滑运动) --- */
.hero-track {
    display: flex;
    width: 100%;
    height: 100%;
    /* 贝塞尔曲线优化：前快后慢，更有质感 */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- 3. 幻灯片布局 --- */
.hero-slide {
    min-width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px; /* 增加呼吸感 */
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* === 背景风格升级 (加入噪点/深度) === */
.slide-btc {
    /* 深邃蓝金：加入径向高光 */
    background: 
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.08) 0%, transparent 40%),
        linear-gradient(135deg, #131c29 0%, #05080a 100%);
}
.slide-promo {
    /* 赛博紫光：加入霓虹氛围 */
    background: 
        radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.2) 0%, transparent 45%),
        linear-gradient(135deg, #240a40 0%, #0f0518 100%);
}

/* 噪点纹理 (让纯色背景不单调) */
.hero-slide::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0; opacity: 0.4;
}

/* --- 4. 装饰网格 (更有科技感) --- */
.slide-bg-grid {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: 1;
    mask-image: radial-gradient(circle at 30% 50%, black 20%, transparent 80%);
}

/* --- 5. 左侧文字内容 (排版升级) --- */
.hero-content {
    position: relative; z-index: 10; max-width: 580px;
    display: flex; flex-direction: column; align-items: flex-start;
}
/* 内容入场动画 */
.hero-slide.active .hero-content > * {
    animation: fadeSlideUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    opacity: 0; transform: translateY(20px);
}
.hero-slide.active .hero-content > *:nth-child(1) { animation-delay: 0.1s; } /* Tag */
.hero-slide.active .hero-content > *:nth-child(2) { animation-delay: 0.2s; } /* Title */
.hero-slide.active .hero-content > *:nth-child(3) { animation-delay: 0.3s; } /* Desc */
.hero-slide.active .hero-content > *:nth-child(4) { animation-delay: 0.4s; } /* Button */

@keyframes fadeSlideUp { to { opacity: 1; transform: translateY(0); } }

/* 标签 */
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: 100px; margin-bottom: 20px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffd700; backdrop-filter: blur(4px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
.tag-purple { color: #d8b4fe; border-color: rgba(216, 180, 254, 0.2); }
.pulse-dot { width: 6px; height: 6px; background: currentColor; border-radius: 50%; box-shadow: 0 0 8px currentColor; animation: pulse 2s infinite; }

/* 大标题 */
.slide-btc h1, .slide-promo h1 {
    font-size: 56px; line-height: 1.05; margin-bottom: 20px;
    font-weight: 900; color: white; letter-spacing: -1.5px;
    text-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.text-gradient-gold {
    background: linear-gradient(to right, #ffd700, #ffaa00);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.text-gradient-purple {
    background: linear-gradient(to right, #d8b4fe, #a855f7);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}

/* 描述文字 */
.hero-desc {
    color: #b1bad3; font-size: 16px; line-height: 1.7;
    margin-bottom: 40px; font-weight: 500; max-width: 90%;
}
.hero-desc strong { color: white; font-weight: 600; }

/* 按钮 (流光质感) */
.btn-premium-glow, .btn-purple {
    position: relative; padding: 16px 42px;
    font-weight: 800; font-size: 14px; text-transform: uppercase; letter-spacing: 1px;
    border: none; border-radius: 14px; cursor: pointer; overflow: hidden;
    transition: all 0.3s ease; z-index: 1;
}
.btn-premium-glow {
    background: linear-gradient(45deg, #ffd700, #ffaa00); color: #291f00;
    box-shadow: 0 8px 25px -5px rgba(255, 215, 0, 0.5);
}
.btn-purple {
    background: linear-gradient(45deg, #9333ea, #7c3aed); color: white;
    box-shadow: 0 8px 25px -5px rgba(147, 51, 234, 0.5);
}
.btn-premium-glow:hover, .btn-purple:hover { 
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 35px -5px rgba(255, 215, 0, 0.6);
}
/* 按钮光扫动画 */
.btn-shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg); animation: btnShine 4s infinite; pointer-events: none;
}
@keyframes btnShine { 0%, 20% { left: 150%; } 100% { left: 150%; } }

/* --- 6. 右侧视觉元素 (浮动) --- */
.hero-visual-btc, .hero-visual-gift {
    position: relative; width: 380px; height: 380px;
    display: flex; align-items: center; justify-content: center; z-index: 5;
    /* 3D 悬浮动画 */
    animation: float-visual 6s ease-in-out infinite;
}
@keyframes float-visual { 0%,100% {transform: translateY(0);} 50% {transform: translateY(-15px);} }

.gift-icon { width: 220px; height: 220px; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5)); }
.btc-core { 
    width: 140px; height: 140px; background: linear-gradient(135deg, #f7931a, #d47200);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 5px 15px rgba(255,255,255,0.3), 0 0 60px rgba(247, 147, 26, 0.5);
}
.btc-icon { width: 80px; height: 80px; fill: white; filter: drop-shadow(0 2px 5px rgba(0,0,0,0.2)); }

/* 粒子装饰 */
.gift-particle { position: absolute; font-size: 24px; animation: float-particle 3s infinite; opacity: 0.8; }
.p1 { top: 20%; left: 10%; animation-delay: 0s; }
.p2 { bottom: 30%; right: 10%; animation-delay: 1s; }
.p3 { top: 10%; right: 20%; animation-delay: 2s; }
@keyframes float-particle { 0%,100% {transform:translateY(0) rotate(0deg);} 50% {transform:translateY(-20px) rotate(10deg);} }

/* --- 7. 导航控制 --- */
.hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
    color: white; display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 20; transition: all 0.3s;
    backdrop-filter: blur(5px); opacity: 0; transform: translateY(-50%) scale(0.9);
}
.hero-carousel-container:hover .hero-arrow { opacity: 1; transform: translateY(-50%) scale(1); }
.hero-arrow:hover { background: white; color: black; box-shadow: 0 0 20px rgba(255,255,255,0.4); }
.hero-prev { left: 24px; } .hero-next { right: 24px; }

.hero-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; }
.h-dot { width: 6px; height: 6px; border-radius: 10px; background: rgba(255,255,255,0.2); cursor: pointer; transition: 0.4s; }
.h-dot.active { width: 30px; background: white; box-shadow: 0 0 10px rgba(255,255,255,0.5); }


/* ========================================================== */
/* 📱 移动端终极适配 (Mobile Optimization - The Fix)         */
/* ========================================================== */

@media (max-width: 768px) {
    /* 1. 容器：大幅增加高度，确保能装下所有文字 */
    .hero-carousel-container {
        height: 440px !important; /* 🟢 增高，给文字足够空间 */
        min-height: 440px !important;
        border-radius: 16px !important;
        margin-bottom: 25px !important;
    }
    
    /* 2. 布局：改为“文字在上，图片沉底” */
    .hero-slide {
        padding: 24px !important; /* 内边距 */
        align-items: flex-start !important; /* 内容顶对齐 */
    }

    /* 3. 文字区域：占满宽度，文字调大 */
    .hero-content {
        width: 100% !important;
        max-width: none !important;
        margin-top: 10px !important;
        z-index: 10 !important; /* 确保文字在图片上面 */
    }

    /* 标签 */
    .hero-badge {
        font-size: 11px !important; padding: 4px 10px !important; margin-bottom: 12px !important;
    }

    /* 标题：适度缩小但保持霸气 */
    .slide-btc h1, .slide-promo h1 {
        font-size: 32px !important; /* 足够大 */
        line-height: 1.1 !important;
        margin-bottom: 12px !important;
        max-width: 80%; /* 防止碰到右边的关闭按钮等 */
    }

    /* 🔥 描述文字：核心修复！ */
    .hero-desc {
        font-size: 14px !important; /* 字体变大，易读 */
        line-height: 1.5 !important;
        margin-bottom: 25px !important;
        color: rgba(255,255,255,0.9) !important;
        
        /* 🚫 移除所有截断代码，显示完整文字 */
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
        -webkit-box-orient: unset !important;
        
        /* 增加文字阴影，防止背景干扰 */
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }

    /* 按钮：自适应宽度 */
    .btn-premium-glow, .btn-purple {
        font-size: 12px !important;
        padding: 12px 24px !important;
        width: fit-content !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    }

    /* 4. 图片：移到右下角，半透明装饰化 */
    /* 这样图片既存在，又不会把文字挤没了 */
    .hero-visual-btc, .hero-visual-gift {
        position: absolute !important;
        width: 200px !important;
        height: 200px !important;
        right: -20px !important;
        bottom: -20px !important; /* 沉底 */
        top: auto !important;
       
        opacity: 0.6 !important; /* 半透明，作为背景装饰 */
        pointer-events: none;
        z-index: 1 !important; /* 在文字下面 */
        filter: blur(1px); /* 轻微虚化，突显文字 */
    }
    
    /* 针对 BTC 核心做微调 */
    .btc-core { width: 100px !important; height: 100px !important; }
    .btc-icon { width: 50px !important; height: 50px !important; }
    .gift-icon { width: 140px !important; height: 140px !important; }

    /* 5. 隐藏多余元素，保持干净 */
    .hero-arrow, .gift-particle { display: none !important; }
    
    /* 指示点位置调整 */
    .hero-dots { bottom: 15px !important; }
}

/* ================================================== */
/* 🔓 强制开启手机端动画 (Force Mobile Animations)    */
/* ================================================== */

@media (max-width: 768px) {
    
    /* 1. 让右下角的图片恢复上下悬浮动画 */
    .hero-visual-btc, .hero-visual-gift {
        /* 恢复动画，但幅度改小一点，避免晕 */
        animation: float-visual-mobile 5s ease-in-out infinite !important; 
        transform: translateZ(0); /* 开启硬件加速 */
    }

    /* 2. 恢复粒子特效 (星星、钻石飘动) */
    .gift-particle {
        display: block !important;
        transform: scale(0.6); /* 手机上粒子缩小一点 */
    }
    
    /* 3. 确保文字进场动画生效 */
    .hero-slide.active .hero-content > * {
        animation-play-state: running !important;
    }
}

/* 定义一个手机端专用的轻微浮动动画 (幅度减半) */
@keyframes float-visual-mobile { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-10); } /* 之前是 -15px，手机改小点 */
}

/* ================================================== */
/* 🌟 手机端画质增强补丁 (Mobile Visual Booster)       */
/* ================================================== */

@media (max-width: 768px) {
    
    /* 1. 让右下角的图片 100% 清晰、明亮 */
    .hero-visual-btc, .hero-visual-gift {
        opacity: 1 !important;       /* 🟢 恢复 100% 不透明度 (之前是 0.6) */
        filter: none !important;     /* 🟢 去除模糊滤镜 (之前 blurred) */
        z-index: 0 !important;       /* 放在底层，不遮挡文字 */
        
        /* ✨ 增加高级发光质感，让它看起来像悬浮的 */
        filter: drop-shadow(0 0 30px rgba(147, 51, 234, 0.4)) !important;
        
        /* 稍微调整位置，让它露出更多 */
        width: 180px !important;
        height: 180px !important;
        right: -10px !important;
        bottom: -10px !important;
    }

    /* 2. 针对 BTC 图标单独加个金光 */
    .hero-visual-btc {
        filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.4)) !important;
    }

    /* 3. 稍微加深文字下方的背景阴影，确保图片变亮后文字依然看得清 */
    .hero-slide::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 60%;
        background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
        pointer-events: none;
        z-index: 1; /* 在图片之上，文字之下 */
    }
}

/* ================================================== */
/* 🎁 4. 活动详情弹窗样式 (Promo Modal)              */
/* ================================================== */

.promo-modal-card {
    padding: 0 !important; overflow: hidden;
    border-radius: 24px !important; background: #151a21 !important;
    width: 90% !important; max-width: 600px !important; min-width: 350px !important;
    display: flex; flex-direction: column;
    box-shadow: 0 50px 100px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.1);
}

.promo-header-banner {
    background: linear-gradient(135deg, #6d28d9, #4c1d95);
    padding: 30px 25px; text-align: center; position: relative;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.promo-tag {
    background: rgba(255,255,255,0.2); color: white;
    font-size: 11px; font-weight: 800; padding: 6px 12px;
    border-radius: 20px; display: inline-block; margin-bottom: 15px; letter-spacing: 1px;
}
.promo-header-banner h2 { color: white; font-size: 28px; margin: 0 0 8px 0; font-weight: 900; text-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.promo-header-banner p { color: #e9d5ff; font-size: 14px; margin: 0; font-weight: 500; }

.promo-body {
    padding: 30px 30px !important; max-height: 400px; overflow-y: auto; text-align: left;
}
.promo-body::-webkit-scrollbar { width: 6px; }
.promo-body::-webkit-scrollbar-thumb { background: #2f3b4b; border-radius: 10px; }

.promo-text-block { margin-bottom: 25px; }
.promo-text-block h4 { color: #a78bfa; font-size: 16px; margin-bottom: 8px; font-weight: 700; }
.promo-text-block p { color: #9ca3af; font-size: 14px; line-height: 1.6; margin: 0; }

.promo-footer { padding: 20px 30px 30px; border-top: 1px solid rgba(255,255,255,0.05); background: #0f1419;display: flex;
    justify-content: center; }
.w-close-abs {
    position: absolute; top: 20px; right: 20px;
    background: rgba(0,0,0,0.2); color: rgba(255,255,255,0.6); border: none;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    font-size: 20px; display: flex; align-items: center; justify-content: center; transition: 0.2s;
}
.w-close-abs:hover { background: rgba(255,255,255,0.4); color: white; }

/* 7. 弹窗适配 */
    .promo-modal-card { width: 95% !important; max-height: 85vh; margin: auto; }
    .promo-header-banner h2 { font-size: 22px; }
    .promo-body { padding: 20px 20px !important; max-height: 50vh; }
    .w-close-abs { top: 10px; right: 10px; width: 28px; height: 28px; font-size: 16px; }



/* ================= 真人娱乐“敬请期待”样式 ================= */

/* 1. 黑白滤镜卡片 */
.card-locked {
    filter: grayscale(100%); /* 关键：强制变黑白 */
    opacity: 0.6;            /* 稍微变暗，增加“未激活”的感觉 */
    cursor: default;         /* 鼠标放上去变成默认箭头，不是小手 */
    position: relative;
}

/* 2. 禁止悬停动画 (覆盖原来的 .slot-card-vertical:hover) */
.card-locked:hover {
    transform: none !important; /* 禁止上浮 */
    box-shadow: none !important; /* 禁止发光 */
}

/* 3. 始终显示文字遮罩 (让用户不用鼠标放上去也能看清是什么游戏) */
.card-locked .poster-overlay {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 20%, transparent); /* 加深底部阴影 */
}

/* 4. 添加一个“锁”或者“SOON”的角标 */
.lock-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #b1bad3;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.1);
    font-weight: 700;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =============================================
   🛠 头部彻底固定 (Header Fixed Ultimate)
   ============================================= */

/* 1. 强制固定头部 */
.header {
    /* 核心：固定定位，相对于浏览器窗口 */
    position: fixed !important; 
    top: 0;
    right: 0;
    
    /* 确保层级最高，不被轮播图遮挡 */
    z-index: 1000 !important; 
    
    /* 清除之前为了布局写的 margin，固定定位不需要这些 */
    margin: 0 !important; 
    
    /* 宽度控制：电脑端要避开左侧侧边栏 */
    left: 240px; /* 对应你 CSS 里的 var(--sidebar-w) */
    left: var(--sidebar-w); 
    width: auto; /* 自动填满剩余宽度 */
    
    /* 视觉优化 */
    border-bottom: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); /* 加点阴影更有立体感 */
}

/* 2. 修正内容被遮挡的问题 */
/* 因为头部固定后悬浮了，下面的内容会往上跑，必须给它往下挤一挤 */
.main-content {
    /* 头部高度约70px + 20px间距 = 90px */
    padding-top: 90px !important; 
}

/* 3. 移动端适配 (必加！) */
/* 手机上没有侧边栏，所以头部要占满 100% */
@media (max-width: 900px) {
    .header {
        left: 0 !important;  /* 左边贴边 */
        width: 100% !important; /* 宽度占满 */
    }
    
    /* 手机端头部稍微矮一点(60px)，所以填充少一点 */
    .main-content {
        padding-top: 80px !important;
    }
}

/* 让聊天室的名字/头像看起来可以点击 */
.msg-header {
    cursor: pointer;
    transition: opacity 0.2s;
}
.msg-header:hover {
    opacity: 0.8;
}
.msg-header:hover .msg-user {
    text-decoration: underline;
    color: var(--accent);
}

/* 如果是自己的消息，禁止点击 (不能给自己转账) */
.msg-row.is-me .msg-header {
    cursor: default;
    pointer-events: none;
}

/* ================= 1. 修复转账窗口被遮挡问题 ================= */
.modal-overlay {
    /* 聊天室通常是 9000-9999，我们设个更大的数字，绝对压制它 */
    z-index: 99999 !important; 
}

/* ================= 2. 高级全局通知组件 (Toast) ================= */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px; /* 电脑端靠右显示 */
    z-index: 100000; /* 比模态框还要高，保证最顶层 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none; /* 让点击穿透容器 */
}

/* 手机端通知居中 */
@media (max-width: 600px) {
    #toast-container {
        top: 10px;
        left: 10px;
        right: 10px; /* 撑满宽度 */
        align-items: center;
    }
}

.toast-item {
    min-width: 300px;
    max-width: 90vw;
    background: rgba(26, 44, 56, 0.95); /* 深色半透明背景 */
    backdrop-filter: blur(10px);
    color: white;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    gap: 15px;
    border-left: 4px solid transparent; /* 左侧彩色条 */
    font-weight: 600;
    font-size: 14px;
    opacity: 0;
    transform: translateX(50px);
    animation: toastIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: all;
}

/* 成功样式 (绿色) */
.toast-success {
    border-left-color: #00e701;
    background: linear-gradient(to right, rgba(0, 231, 1, 0.05), rgba(26, 44, 56, 0.95));
}
.toast-success svg { fill: #00e701; }

/* 错误样式 (红色) */
.toast-error {
    border-left-color: #ff4d4d;
    background: linear-gradient(to right, rgba(255, 77, 77, 0.05), rgba(26, 44, 56, 0.95));
}
.toast-error svg { fill: #ff4d4d; }

/* 信息样式 (蓝色) */
.toast-info {
    border-left-color: #00c6ff;
}
.toast-info svg { fill: #00c6ff; }

.toast-icon { width: 20px; height: 20px; flex-shrink: 0; }

/* 消失动画 */
.toast-out {
    animation: toastOut 0.3s forwards;
}

@keyframes toastIn {
    to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateY(-20px) scale(0.9); }
}

/* ================= 高级认证弹窗样式 (修复版) ================= */

.auth-modal-card {
    width: 100%;
    max-width: 420px; 
    overflow: hidden;
}

.auth-body-container {
    position: relative;
    min-height: 320px; 
    transition: height 0.3s ease;
}

/* 1. 视图默认状态：隐藏 */
/* ================= 视图切换核心修复 (Fix Layout) ================= */

/* 1. 默认状态：彻底隐藏，不占位 */
.auth-view {
    display: none !important; /* ★ 关键：必须彻底隐藏，否则会占位 */
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
}

/* 2. 激活状态：显示并执行动画 */
.auth-view.active {
    display: block !important; /* ★ 关键：强制显示 */
    opacity: 1;
    transform: translateX(0);
    animation: fadeInSlide 0.4s forwards;
}

/* 动画定义 */
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 3. 容器高度自适应 */
.auth-body-container {
    position: relative;
    /* 移除 min-height，让内容自动撑开，避免下面留白太多 */
    width: 100%;
}

/* 4. 修正弹窗最大宽度，让它在手机上不要太宽 */
.auth-modal-card {
    width: 95%;
    max-width: 400px;
    margin: auto;
}

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.w-input-group { margin-bottom: 15px; }

/* 双列布局 */
.row-2-col { display: flex; gap: 10px; }
.row-2-col .w-input-group { flex: 1; }

/* 底部切换提示 */
.auth-switch-hint {
    margin-top: 15px; text-align: center; font-size: 13px; color: var(--text-sub);
}
.auth-switch-hint span {
    color: var(--accent); cursor: pointer; font-weight: 700; margin-left: 5px;
}
.auth-switch-hint span:hover { text-decoration: underline; }

/* === 高级自定义复选框样式 === */
.agreement-box {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 20px; font-size: 12px; color: var(--text-sub); line-height: 1.4;
}
.agreement-text a { color: var(--accent); text-decoration: underline; }

.custom-checkbox {
    position: relative; display: inline-block;
    width: 16px; height: 16px; flex-shrink: 0;
    cursor: pointer; top: 1px;
}
.custom-checkbox input { opacity: 0; width: 0; height: 0; }
.checkmark {
    position: absolute; top: 0; left: 0;
    height: 16px; width: 16px;
    background-color: #0f212e;
    border: 1px solid #2f4553; border-radius: 4px; transition: 0.2s;
}
.custom-checkbox:hover .checkmark { border-color: var(--text-sub); }
.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--accent); border-color: var(--accent);
}
/* 勾选符号 */
.checkmark:after {
    content: ""; position: absolute; display: none;
    left: 5px; top: 2px; width: 4px; height: 8px;
    border: solid black; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.custom-checkbox input:checked ~ .checkmark:after { display: block; }

/* ================= 头像上传样式 ================= */
.uc-avatar-container {
    width: 60px;
    height: 60px;
    position: relative;
    border-radius: 50%;
    cursor: pointer;
    background: #1a2c38;
    border: 2px solid var(--accent);
    overflow: hidden; /* 确保图片也是圆的 */
    flex-shrink: 0;
}

/* 默认文字头像 */
#uc-avatar-char {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 900; color: var(--accent);
}

/* 图片头像 */
#uc-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover; /* 保持比例填满圆形 */
    position: absolute; top: 0; left: 0;
}

/* 悬停遮罩层 */
.avatar-overlay {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: 0.2s;
}
.avatar-overlay svg {
    width: 24px; height: 24px; fill: white;
}
.uc-avatar-container:hover .avatar-overlay {
    opacity: 1;
}

/* 聊天室里的头像样式调整 */
.msg-avatar-img {
    width: 24px; height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.2);
}

/* 聊天室头像 (必须加) */
.msg-avatar-img {
    width: 28px; 
    height: 28px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.2);
    vertical-align: middle;
    flex-shrink: 0; /* 防止被挤压 */
    background: #000; /* 图片加载失败时的底色 */
}

/* 消息头部布局 */
.msg-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

/* ================= 7. 聊天室头像终极修复 ================= */

/* 1. 核心修复：隐藏多余的粉色圆圈 (伪元素) */
.msg-header::before {
    display: none !important; /* 彻底关掉它 */
    content: none !important;
}

/* 2. 消息头部布局：默认 (别人发的消息) */
/* 视觉顺序：[头像] [等级] [名字] */
.msg-header {
    display: flex;
    align-items: center;
    gap: 8px; /* 元素间距 */
    margin-bottom: 4px;
    font-size: 13px;
    color: #b1bad3;
}

/* 3. "我"的消息头部：反转排列 */
/* 视觉顺序：[名字] [等级] [头像] */
.msg-row.is-me .msg-header {
    flex-direction: row-reverse; /* 关键：反向排列 */
    justify-content: flex-start;
}

/* 4. 头像样式微调 */
.msg-avatar-img, .msg-avatar-default {
    width: 28px !important; 
    height: 28px !important; 
    border-radius: 50%; 
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0; /* 防止被挤压 */
}

/* 5. 等级符号样式 */
.rank-symbol {
    font-size: 14px;
    line-height: 1;
    cursor: help;
}

/* ================= 聊天室 UI 修复 ================= */

/* 1. 消息头部布局 */
.msg-header {
    display: flex;
    align-items: center;
    gap: 8px; /* 元素之间的间距 */
    margin-bottom: 4px;
    font-size: 13px;
    color: #b1bad3;
}

/* 2. "我"的消息头部：反转排列 */
/* 效果：名字在左，头像在右 */
.msg-row.is-me .msg-header {
    flex-direction: row-reverse; /* 关键：反向排列 */
}

/* 3. 头像图片样式 */
.msg-avatar-img {
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    object-fit: cover;
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 4. 默认文字头像样式 (那个圆圈) */
.msg-avatar-default {
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    font-size: 12px; 
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* 5. 用户名 */
.msg-user {
    font-weight: 600;
    font-size: 12px;
}
/* 别人的名字悬停变色 */
.msg-row:not(.is-me) .msg-header:hover .msg-user {
    color: var(--accent);
    text-decoration: underline;
}

/* 6. 等级符号 */
.rank-symbol {
    font-size: 14px; /* 符号稍微大一点点 */
    filter: drop-shadow(0 0 2px rgba(255, 215, 0, 0.5)); /* 给金牌加点光 */
}

/* 7. 修正消息气泡的圆角 */
/* 让气泡有一个角是指向头像的 */
.msg-row { border-radius: 12px 12px 12px 2px; }
.msg-row.is-me { border-radius: 12px 12px 2px 12px; }


/* ================= 7. 旗舰版历史记录 (Ultimate Premium History) ================= */

/* 1. 外层容器：深邃背景 + 柔和阴影 */
.history-section {
    margin-top: 40px;
    background: #1a2c38; /* 纯净深色底 */
    border-radius: 16px; /* 更大的圆角 */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05); /* 顶部微光边框 */
    overflow: hidden;
    position: relative;
}

/* 2. 头部：极简主义 */
.history-header {
    padding: 20px 24px;
    background: rgba(20, 31, 41, 0.6); /* 半透明深色 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
    text-transform: uppercase;
}
/* 实时信号灯 */
.history-header::after {
    content: 'LIVE';
    font-size: 10px;
    background: rgba(0, 231, 1, 0.15);
    color: #00e701;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 12px;
    font-weight: 900;
    box-shadow: 0 0 10px rgba(0, 231, 1, 0.2);
    animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* 3. 滚动容器：丝滑滚动体验 */
.table-container {
    width: 100%;
    overflow-x: auto;
    /* 隐藏滚动条但保留功能 (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #2f4553 transparent;
}
/* Webkit 滚动条美化 */
.table-container::-webkit-scrollbar { height: 6px; }
.table-container::-webkit-scrollbar-track { background: transparent; }
.table-container::-webkit-scrollbar-thumb { 
    background: #2f4553; 
    border-radius: 10px; 
}
.table-container::-webkit-scrollbar-thumb:hover { background: #557086; }

/* 4. 表格主体 */
.history-table {
    width: 100%;
    min-width: 900px; /* 保证最小宽度，防止挤压 */
    border-collapse: collapse;
    font-family: "Inter", -apple-system, sans-serif;
    table-layout: fixed; /* 锁定列宽 */
}

/* --- 列宽黄金比例调优 --- */
/* 适当收紧数字列，给游戏名和分享留空间 */
.col-game   { width: 220px; } 
.col-player { width: 140px; }
.col-bet    { width: 120px; }
.col-mult   { width: 100px; }
.col-profit { width: 120px; }
.col-share  { width: 160px; padding-right: 24px !important; }

/* --- 表头样式 --- */
.history-table thead th {
    text-align: left;
    color: #889eb5; /* 更高级的灰蓝色 */
    font-size: 11px;
    font-weight: 700;
    background: rgba(26, 44, 56, 0.5);
    padding: 16px 15px; /* 增加高度，更有呼吸感 */
    white-space: nowrap;
}

/* --- 内容样式 --- */
.history-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background 0.2s ease, transform 0.2s ease;
}

/* 悬停效果：整行微亮，轻微上浮 */
.history-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
    z-index: 1;
}

.history-table td {
    padding: 16px 15px; /* 舒适的间距 */
    color: white;
    font-weight: 600;
    font-size: 13px;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 字体与颜色微调 --- */

/* 游戏名 */
.game-icon-wrap {
    display: flex; align-items: center; gap: 10px;
    color: white; font-weight: 700;
}
.game-icon-wrap span {
    position: relative;
    top: 1px; /* 微调文字对齐 */
}

/* 玩家名 */
.col-player span { color: #b1bad3; transition: color 0.2s; }
.col-player span:hover { color: white; }
.col-player span.me { color: white; font-weight: 700; } /* 自己高亮 */

/* 数字列：使用等宽数字字体 */
.col-bet, .col-mult, .col-profit {
    font-family: "JetBrains Mono", "Roboto Mono", monospace;
    font-size: 13px;
    letter-spacing: -0.5px; /* 让数字稍微紧凑一点 */
}
.col-bet { color: #fff; opacity: 0.9; }
.col-mult { color: #b1bad3; }

/* 利润颜色 */
.text-win { 
    color: #00e701; 
    text-shadow: 0 0 15px rgba(0, 231, 1, 0.15); /* 赢钱带微光 */
}
.text-loss { 
    color: #b1bad3; 
    opacity: 0.6; /* 输钱弱化显示 */
}

/* --- 右侧操作区优化 --- */
.action-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    opacity: 0.8; /* 默认稍微暗一点 */
    transition: opacity 0.2s;
}
.history-table tbody tr:hover .action-group {
    opacity: 1; /* 悬停时变亮 */
}

/* 单号胶囊 */
.bet-id-pill {
    background: rgba(15, 33, 46, 0.6);
    border: 1px solid rgba(47, 69, 83, 0.6);
    color: #889eb5;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-family: "JetBrains Mono", monospace;
    cursor: pointer;
    transition: all 0.2s;
}
.bet-id-pill:hover {
    border-color: #b1bad3;
    color: white;
    background: rgba(47, 69, 83, 0.8);
}

/* 分享按钮 */
.icon-btn {
    width: 32px; height: 32px; /* 加大触控区域 */
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #889eb5;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.icon-btn:hover {
    background: rgba(0, 231, 1, 0.1);
    color: #00e701;
    transform: scale(1.1);
}

/* ============================================
   ✨ 旗舰版：统计与 VIP 弹窗样式 (Premium UI)
   ============================================ */

/* --- 1. 弹窗容器与动画 --- */
/* 这是一个覆盖在 wallet-modal 上的增强样式，确保它有毛玻璃效果 */
#custom-modal .wallet-modal {
    background: rgba(21, 37, 50, 0.85) !important; /* 深蓝半透明 */
    backdrop-filter: blur(16px) saturate(180%); /* 毛玻璃模糊 + 饱和度提升 */
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08); /* 极细的高光边框 */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6); /* 深邃的投影 */
    border-radius: 24px; /* 更圆润的角 */
    transform: scale(0.95);
    opacity: 0;
    animation: modal-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; /* 弹性弹出动画 */
}

@keyframes modal-enter {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.stat-modal-content {
    padding: 35px 25px;
}

/* 标题美化 */
.stat-modal-content h3 {
    font-family: "Inter", sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 18px;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}
/* 标题下方的装饰线 */
.stat-modal-content h3::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--accent);
    margin: 8px auto 0;
    border-radius: 2px;
    box-shadow: 0 0 10px var(--accent);
}

/* --- 2. 统计网格 (Statistics Grid) --- */
.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
}

.stat-box {
    background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* 鼠标悬停时的微浮动效果 */
.stat-box:hover {
    transform: translateY(-3px);
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.stat-box.full-width {
    grid-column: span 2;
    background: linear-gradient(90deg, rgba(21, 37, 50, 0.5), rgba(30, 50, 65, 0.5));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-label {
    color: #889eb1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    opacity: 0.8;
}

.stat-val {
    color: white;
    font-weight: 800;
    font-size: 18px;
    font-family: "Inter", monospace; /* 数字专用字体 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* --- 3. VIP 专属样式 (VIP Club) --- */
.vip-progress-container {
    margin: 25px 0;
    padding: 20px;
    background: linear-gradient(180deg, rgba(15, 33, 46, 0.6), rgba(10, 20, 30, 0.8));
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.1); /* 金色微光边框 */
    box-shadow: inset 0 0 20px rgba(0,0,0,0.3);
}

/* 进度条槽 */
.vip-bar-bg {
    width: 100%;
    height: 14px; /* 加厚 */
    background: #0b161f;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 10px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.02);
}

/* 进度条填充 (流光效果) */
.vip-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #cd7f32, #e4b74c, #ffd700, #fff3a0); /* 金属渐变 */
    background-size: 200% 100%;
    border-radius: 10px;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    position: relative;
    animation: shimmer 3s infinite linear; /* 流光动画 */
}

@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* VIP 权益列表 */
.vip-benefits {
    background: rgba(255, 255, 255, 0.02);
    padding: 20px;
    border-radius: 16px;
    margin-top: 20px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.vip-benefits li {
    margin-bottom: 8px;
    list-style: none; /* 去掉默认圆点 */
    color: #b1bad3;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 自定义列表图标 (金色对勾) */
.vip-benefits li::before {
    content: '✓';
    color: #ffd700;
    font-weight: bold;
    background: rgba(255, 215, 0, 0.1);
    width: 18px; height: 18px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
}

/* --- 4. 底部关闭按钮美化 --- */
.w-submit-btn {
    background: var(--accent);
    color: #000;
    font-weight: 800;
    border: none;
    border-radius: 12px;
    padding: 14px;
    width: 100%;
    margin-top: 25px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(0, 231, 1, 0.3);
}

.w-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 231, 1, 0.5);
    background: #00ff01; /* 更亮的绿色 */
}

.w-submit-btn:active {
    transform: scale(0.98);
}
/* ================= ✨ 旗舰版：我的投注 (My Bets) 样式 ================= */

/* 1. 滚动容器：更深邃的背景，自定义滚动条 */
.bets-scroll-container {
    max-height: 450px; /* 稍微增高 */
    overflow-y: auto;
    margin-top: 20px;
    background: linear-gradient(180deg, rgba(15, 33, 46, 0.4), rgba(10, 20, 30, 0.6));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
    /* 隐藏默认滚动条 (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: #2f4553 transparent;
}

/* 自定义滚动条 (Chrome/Safari/Edge) */
.bets-scroll-container::-webkit-scrollbar {
    width: 6px;
}
.bets-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
.bets-scroll-container::-webkit-scrollbar-thumb {
    background-color: #2f4553;
    border-radius: 10px;
}
.bets-scroll-container::-webkit-scrollbar-thumb:hover {
    background-color: #455d6d;
}

/* 2. 表格整体 */
.my-bets-table {
    width: 100%;
    border-collapse: collapse; /* 边框合并 */
    font-size: 13px;
    text-align: left;
}

/* 3. 表头美化：毛玻璃吸顶效果 */
.my-bets-table th {
    position: sticky;
    top: 0;
    background: rgba(26, 44, 56, 0.95); /* 深色半透明 */
    backdrop-filter: blur(8px); /* 毛玻璃 */
    -webkit-backdrop-filter: blur(8px);
    color: #889eb1;
    padding: 15px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap; /* 防止换行 */
}

/* 4. 表格行：交互与间隔 */
.my-bets-table tr {
    transition: background 0.2s ease;
}

/* 鼠标悬停高亮 */
.my-bets-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

/* 单元格样式 */
.my-bets-table td {
    padding: 14px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: #e0e0e0;
    font-family: "Inter", monospace; /* 数字对齐更整齐 */
    font-weight: 600;
}

/* 最后一行去掉底边框 */
.my-bets-table tr:last-child td {
    border-bottom: none;
}

/* 5. 输赢状态优化 (带辉光) */
.profit-win {
    color: #00e701 !important;
    text-shadow: 0 0 10px rgba(0, 231, 1, 0.3); /* 绿色辉光 */
    font-weight: 800 !important;
}

.profit-loss {
    color: #ff4d4d !important;
    font-weight: 700 !important;
    opacity: 0.9;
}

/* 6. 暂无数据提示美化 */
.no-bets-placeholder {
    padding: 60px 20px;
    text-align: center;
    color: #55657e;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
}

/* 可以在 JS 插入 HTML 时给 placeholder 加一个 icon */
.no-bets-placeholder::before {
    content: '🎲';
    display: block;
    font-size: 32px;
    margin-bottom: 10px;
    opacity: 0.5;
    filter: grayscale(1);
}

/* ================= VIP 等级徽章样式优化 ================= */

.uc-level {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.uc-level svg {
    width: 16px;
    height: 16px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* === 各等级专属样式 === */

/* 1. Bronze (青铜) - 稳重 */
.vip-bronze {
    color: #cd7f32;
    border-color: rgba(205, 127, 50, 0.3);
    background: linear-gradient(to right, rgba(205, 127, 50, 0.1), transparent);
}

/* 2. Silver (白银) - 金属光泽 */
.vip-silver {
    color: #e0e0e0;
    border-color: rgba(224, 224, 224, 0.3);
    background: linear-gradient(to right, rgba(224, 224, 224, 0.1), transparent);
    text-shadow: 0 0 10px rgba(224, 224, 224, 0.3);
}

/* 3. Gold (黄金) - 奢华 */
.vip-gold {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.3);
    background: linear-gradient(to right, rgba(255, 215, 0, 0.15), transparent);
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* 4. Platinum (铂金) - 科技感/霓虹 */
.vip-platinum {
    color: #00e7ff;
    border-color: rgba(0, 231, 255, 0.3);
    background: linear-gradient(to right, rgba(0, 231, 255, 0.15), transparent);
    text-shadow: 0 0 12px rgba(0, 231, 255, 0.6);
}

/* 5. Diamond (钻石) - 顶级紫光 */
.vip-diamond {
    color: #b388ff;
    border-color: rgba(179, 136, 255, 0.4);
    background: linear-gradient(to right, rgba(179, 136, 255, 0.2), transparent);
    text-shadow: 0 0 15px rgba(179, 136, 255, 0.8);
}

/* 0. None (无) */
.vip-none {
    color: #55657e;
}

/* === 聊天室 VIP 徽章专用样式 === */
.chat-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 限制 SVG 大小，比个人中心的要小，适配文字行高 */
.chat-rank-badge svg {
    width: 14px;  /* 聊天室里小一点 */
    height: 14px;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); /* 加点阴影更清晰 */
}

/* 复用之前定义的颜色类，但微调一下背景 */
.chat-rank-badge.vip-gold svg { color: #ffd700; }
.chat-rank-badge.vip-platinum svg { color: #00e7ff; }
.chat-rank-badge.vip-diamond svg { color: #b388ff; }
.chat-rank-badge.vip-silver svg { color: #e0e0e0; }
.chat-rank-badge.vip-bronze svg { color: #cd7f32; }


/* ================= ✨ 旗舰版：聊天室注单卡片 ================= */

.bet-share-card {
    width: 240px; /* 稍微加宽，更大气 */
    border-radius: 16px; /* 更圆润的角 */
    padding: 16px;
    cursor: pointer;
    margin-top: 8px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性动画 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border: 1px solid rgba(255, 255, 255, 0.05); /* 默认微弱边框 */
}

/* 悬停效果：上浮 + 阴影加深 */
.bet-share-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

/* === 赢 (Win) 样式：极光绿 === */
.bet-share-card.share-win {
    background: linear-gradient(160deg, rgba(15, 40, 30, 0.95), rgba(10, 25, 20, 0.95));
    border-color: rgba(0, 231, 1, 0.3);
}
/* 赢卡片的装饰光晕 */
.bet-share-card.share-win::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(0, 231, 1, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

/* === 输 (Loss) 样式：深红 === */
.bet-share-card.share-loss {
    background: linear-gradient(160deg, rgba(40, 15, 15, 0.95), rgba(25, 10, 10, 0.95));
    border-color: rgba(255, 77, 77, 0.3);
}

/* --- 卡片内部排版 --- */
.share-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.share-game {
    font-weight: 800; font-size: 13px; color: #fff; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 5px;
}
.share-game::before { content: '🎲'; font-size: 10px; } /* 增加小图标 */

.share-id { font-size: 10px; color: rgba(255,255,255,0.4); font-family: monospace; }

.share-body { display: flex; justify-content: space-between; margin-bottom: 12px; }
.share-row { display: flex; flex-direction: column; gap: 4px; }
.share-row span:first-child { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; font-weight: 700; }

.share-val { font-weight: 800; font-family: "Inter", monospace; font-size: 14px; }
.share-win .share-val { color: #00e701; text-shadow: 0 0 10px rgba(0, 231, 1, 0.4); }
.share-loss .share-val { color: #ff4d4d; }

.share-mult { color: white; font-weight: 700; font-family: monospace; }

/* 查看按钮美化 */
.share-btn { 
    background: rgba(255,255,255,0.08); 
    text-align: center; padding: 8px; 
    border-radius: 8px; font-size: 11px; font-weight: 700; color: white;
    transition: background 0.2s;
}
.bet-share-card:hover .share-btn { background: rgba(255,255,255,0.15); }


/* ================= ✨ 旗舰版：注单详情弹窗 (2.0 丝滑升级版) ================= */

/* 1. 弹窗容器：磨砂黑金质感 */
.bet-modal-simple {
    padding: 0;
    width: 90vw; /* 手机端宽度占比 90% */
    max-width: 380px; /* 限制最大宽度，防止电脑端太宽 */
    background: linear-gradient(160deg, #1e2f3d 0%, #131b24 100%); /* 深邃渐变 */
    border-radius: 24px; /* 更圆润的角 */
    border: 1px solid rgba(255, 255, 255, 0.08); /* 极细的高光边框 */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* 深度投影 */
    overflow: hidden; /* 防止圆角溢出 */
    margin: 0 auto;
}

/* 2. 头部：极简通透 */
.b-simple-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 20px 20px 10px; /* 减少底部 padding */
    background: transparent;
}

.b-game-tag {
    background: rgba(0, 231, 1, 0.15); 
    color: #00ff88;
    padding: 6px 12px; 
    border-radius: 12px;
    font-size: 11px; 
    font-weight: 700;
    letter-spacing: 0.5px;
    border: 1px solid rgba(0, 231, 1, 0.2);
    backdrop-filter: blur(4px);
}

.b-time { 
    font-size: 11px; 
    color: rgba(255,255,255,0.4); 
    font-family: 'Roboto Mono', monospace; 
}

/* 3. 用户信息区：悬浮玻璃卡片 */
.b-user-section {
    display: flex; 
    align-items: center; 
    gap: 12px;
    /* 核心修改：减小外边距，释放手机空间 */
    margin: 15px 12px 20px; 
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 头像：增加光晕 */
.b-avatar, .b-avatar-default { 
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    border: 2px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-size: 16px; /* 文字头像大小 */
    background: #253545;
    color: #fff;
    display: flex; 
    align-items: center; 
    justify-content: center;
    font-weight: 800;
}

.b-user-info { 
    flex: 1; 
    text-align: left; 
    display: flex; 
    flex-direction: column; 
    gap: 3px;
    overflow: hidden; /* 防止名字太长撑破 */
}

.b-username { 
    font-weight: 700; 
    color: #fff; 
    font-size: 14px; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b-uid { 
    font-size: 10px; 
    color: rgba(255,255,255,0.4); 
    font-family: monospace; 
}

/* 胜负徽章：更精致 */
.b-result-badge {
    font-size: 11px; 
    font-weight: 800;
    padding: 4px 10px; 
    border-radius: 8px;
    text-transform: uppercase;
}
.b-result-badge.is-win {
    background: linear-gradient(90deg, rgba(0,231,1,0.2), rgba(0,231,1,0.05));
    color: #00ff88;
    border: 1px solid rgba(0, 231, 1, 0.3);
}
.b-result-badge.is-loss {
    background: rgba(255, 77, 77, 0.1); 
    color: #ff6b6b;
    border: 1px solid rgba(255, 77, 77, 0.2);
}

/* 4. 数据统计网格：紧凑且清晰 */
.b-stats-grid {
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px; /* 减小间距 */
    padding: 0 12px; /* 减小左右内边距，让卡片更宽 */
}

.b-stat-item {
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 10px;
    border-radius: 12px;
    display: flex; 
    flex-direction: column; 
    gap: 4px;
    text-align: center; /* 手机端居中对齐更好看 */
    border: 1px solid rgba(255,255,255,0.02);
}

/* 重点数据（盈利/亏损）占据整行 */
.b-stat-item.full {
    grid-column: span 2;
    background: rgba(255, 255, 255, 0.02);
    padding: 20px 10px;
    margin-bottom: 5px;
    border: 1px solid rgba(255,255,255,0.05);
}

.b-label { 
    font-size: 10px; 
    color: rgba(255,255,255,0.4); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    font-weight: 600;
}

.b-val { 
    font-weight: 700; 
    font-family: "Inter", sans-serif; 
    font-size: 14px; 
    color: #e0e0e0;
}

/* 赢钱的大数字特效 */
.win-text { 
    color: #00ff88 !important; 
    font-size: 28px !important; 
    font-weight: 800;
    text-shadow: 0 0 20px rgba(0, 255, 136, 0.2);
    /* 加入微小的弹出动画 */
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.loss-text { 
    color: #ff4d4d !important; 
    font-size: 24px !important; 
    opacity: 0.9;
}

@keyframes popIn {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* 5. 底部操作区 */
.b-footer {
    margin-top: 20px;
    padding: 0 20px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.b-bet-id {
    font-size: 10px; 
    color: rgba(255,255,255,0.3); 
    cursor: pointer;
    font-family: monospace;
    padding: 6px 12px;
    background: rgba(0,0,0,0.2);
    border-radius: 20px;
    transition: all 0.2s;
}
.b-bet-id:active { 
    background: rgba(255,255,255,0.1); 
    color: #fff; 
}

/* 按钮优化：全宽 */
.w-submit-btn {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    /* 保持你原有的绿色按钮样式，这里只是微调阴影 */
    box-shadow: 0 8px 20px rgba(0, 231, 1, 0.15);
    border: none;
    cursor: pointer;
}


/* ================= 💎 旗舰版：游戏卡片 (Ultra Premium) ================= */

/* 1. 卡片容器 */
.slot-card-premium {
    flex: 0 0 auto;
    width: 165px; /* 稍微加宽一点点，视觉更稳 */
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    /* 苹果风格的丝滑回弹动画 */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
    perspective: 1000px; /* 增加 3D 视深 */
}

/* 悬停：上浮 + 轻微缩放 */
.slot-card-premium:hover {
    transform: translateY(-8px) scale(1.02);
    z-index: 2; /* 悬停时层级提高 */
}

/* 点击时的微缩反馈 */
.slot-card-premium:active {
    transform: translateY(-4px) scale(0.98);
}

/* 2. 海报视觉区域 */
.poster-visual {
    width: 100%;
    aspect-ratio: 3/4; /* 完美海报比例 */
    border-radius: 20px; /* 更圆润 */
    position: relative;
    overflow: hidden;
    
    /* 核心质感来源：内发光边框 + 深邃投影 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
        inset 0 0 0 1px rgba(255, 255, 255, 0.05), /* 内描边 */
        0 10px 20px rgba(0, 0, 0, 0.3); /* 基础投影 */
        
    transition: all 0.4s ease;
}

/* 悬停时：投影加深 + 边框变亮 */
.slot-card-premium:hover .poster-visual {
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.1), /* 内部高光 */
        0 20px 40px rgba(0, 0, 0, 0.5); /* 悬浮投影 */
}

/* 3. 游戏图标 (增加光晕) */
.visual-icon {
    width: 56px;
    height: 56px;
    fill: white;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    
    /* 图标发光 */
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 悬停时：图标弹跳放大 */
.slot-card-premium:hover .visual-icon {
    transform: translate(-50%, -60%) scale(1.2);
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.6));
}

/* 4. 底部文字面板 (磨砂玻璃效果) */
/* 4. 底部文字面板 (无痕渐变版) */
.visual-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px 10px 12px; /* 顶部留多点空间给渐变 */
    
    /* 核心修改：从透明过渡到半透明黑，没有明显的色块 */
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.7) 100%);
    
    /* 去掉边框和毛玻璃，追求极致通透 */
    border-top: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* 让文字稍微上浮一点，避免贴底 */
    transform: translateY(2px);
    transition: transform 0.3s ease, background 0.3s ease;
}

/* 悬停时：渐变稍微加深，保证文字清晰，同时稍微上浮 */
.slot-card-premium:hover .visual-info {
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.85) 100%);
    transform: translateY(0);
}
/* 游戏标题 (调淡：使用 85% 透明度白色，减弱阴影) */
.game-name {
    color: rgba(255, 255, 255, 0.85); /* 不是死白，稍微透一点 */
    font-weight: 700; /* 从 800 改为 700，稍微细一点点 */
    font-size: 14px;
    letter-spacing: 0.5px;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* 阴影也变淡 */
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* 游戏提供商 (调更淡：使用 40% 透明度，更细的字) */
.game-provider {
    color: rgba(255, 255, 255, 0.4); /* 很淡的高级灰白 */
    font-size: 10px;
    font-weight: 500; /* 字体变细 */
    text-transform: uppercase;
    margin-top: 4px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

/* ✨ 增加交互：鼠标悬停卡片时，文字自动变亮变清晰 */
.slot-card-premium:hover .game-name {
    color: #ffffff; /* 悬停变纯白 */
    text-shadow: 0 2px 8px rgba(0,0,0,0.6); /* 阴影加深，增加立体感 */
}

.slot-card-premium:hover .game-provider {
    color: rgba(255, 255, 255, 0.8); /* 悬停变亮 */
}

/* 5. 底部在线人数 (胶囊样式) */
.card-meta-row {
    display: flex;
    justify-content: center; /* 居中显示 */
}

.meta-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #889eb1;
    font-weight: 600;
    
    /* 胶囊背景 */
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s;
}

/* 悬停时胶囊变亮 */
.slot-card-premium:hover .meta-live {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

/* 呼吸灯动画优化 */
.live-pulse {
    width: 6px;
    height: 6px;
    background-color: #00e701;
    border-radius: 50%;
    box-shadow: 0 0 8px #00e701;
    position: relative;
}

/* 增加波纹扩散效果 */
.live-pulse::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: 100%;
    border-radius: 50%;
    background: inherit;
    transform: translate(-50%, -50%);
    animation: ripple-effect 1.5s infinite ease-out;
    opacity: 0.6;
}

@keyframes ripple-effect {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* ================= 🎮 全部游戏大厅弹窗样式 ================= */

/* 1. 弹窗容器 (比普通弹窗更宽) */
.games-lobby-modal {
    width: 90%;
    max-width: 1000px; /* 大屏幕宽一点 */
    height: 85vh; /* 占据屏幕 85% 高度 */
    background: #0f212e;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    flex-direction: column;
    box-shadow: 0 50px 100px -20px rgba(0,0,0,0.8);
    overflow: hidden;
    animation: lobbyPopIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lobbyPopIn {
    from { opacity: 0; transform: scale(0.95) translateY(30px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* 2. 头部 */
.lobby-header {
    padding: 25px 30px;
    background: #1a2c38;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    z-index: 10;
}

.lobby-title {
    font-size: 22px;
    font-weight: 800;
    color: white;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.5px;
}

/* 3. 游戏网格 (Grid Layout) - 核心 */
.lobby-grid-content {
    flex: 1; /* 占满剩余空间 */
    overflow-y: auto; /* 内部滚动 */
    padding: 30px;
    
    display: grid;
    /* 响应式网格：最小宽度 170px，自动填充 */
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 20px;
    
    /* 滚动条样式 */
    scrollbar-width: thin;
    scrollbar-color: #2f4553 transparent;
}

/* 这里的 .slot-card-premium 宽度需要重置为 100% 以适应网格 */
.lobby-grid-content .slot-card-premium {
    width: 100%; /* 填满格子 */
}

/* 滚动条美化 */
.lobby-grid-content::-webkit-scrollbar { width: 8px; }
.lobby-grid-content::-webkit-scrollbar-track { background: transparent; }
.lobby-grid-content::-webkit-scrollbar-thumb { 
    background: #2f4553; 
    border-radius: 10px; 
    border: 3px solid #0f212e; 
}

/* 移动端适配 */
@media (max-width: 600px) {
    .lobby-grid-content {
        grid-template-columns: repeat(2, 1fr); /* 手机强制两列 */
        gap: 15px;
        padding: 15px;
    }
}


/* ================= 语言选择弹窗样式 ================= */

.lang-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lang-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0f212e;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.lang-item:hover {
    background: #152a38;
    transform: translateX(5px); /* 悬停微动 */
}

/* 激活状态 (当前选中的语言) */
.lang-item.active {
    border-color: var(--accent); /* 绿色边框 */
    background: rgba(0, 231, 1, 0.05);
}

.lang-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lang-flag {
    font-size: 20px;
}

.lang-name {
    font-weight: 700;
    color: white;
    font-size: 14px;
}

.lang-check {
    color: var(--accent);
    font-weight: 900;
    opacity: 0; /* 默认隐藏对勾 */
    transform: scale(0.5);
    transition: all 0.2s;
}

/* 选中时显示对勾 */
.lang-item.active .lang-check {
    opacity: 1;
    transform: scale(1);
}

/* ================= ✨ 旗舰版：推广赚钱模态框样式 (移动端适配优化版) ================= */

/* 1. 弹窗容器：磨砂黑金质感 (和注单详情保持一致的风格) */
.bet-modal-simple {
    padding: 0; /* 清空内边距，由子元素控制 */
    width: 90vw;
    max-width: 400px;
    background: linear-gradient(160deg, #1e2f3d 0%, #131b24 100%);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

/* 2. 统计卡片行 (Stats Cards) */
.ref-stats-row { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 12px; /* 手机端减小间距 */
    padding: 20px 20px 15px; /* 顶部留足空间 */
}

.ref-stat-card { 
    background: rgba(255, 255, 255, 0.03);
    padding: 16px 10px; 
    border-radius: 16px; 
    text-align: center; 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.ref-stat-card:active { transform: scale(0.98); }

/* 高亮卡片 (有效人数) */
.ref-stat-card.highlight { 
    background: linear-gradient(135deg, rgba(0, 231, 1, 0.15), rgba(0, 231, 1, 0.02)); 
    border: 1px solid rgba(0, 231, 1, 0.2); 
}

.rs-label { 
    font-size: 10px; 
    color: rgba(255,255,255,0.5); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    margin-bottom: 4px; 
    font-weight: 700;
}

.rs-val { 
    font-size: 20px; 
    font-weight: 800; 
    color: #fff; 
    font-family: "Inter", sans-serif; 
    line-height: 1.2;
}

/* 3. 进度条区域 */
.ref-progress-box { 
    margin: 0 20px 20px; /* 左右留边距 */
    background: rgba(0,0,0,0.2); 
    padding: 15px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.03);
}

.rp-text { 
    display: flex; 
    justify-content: space-between; 
    font-size: 11px; 
    color: #b1bad3; 
    margin-bottom: 8px; 
    font-weight: 700; 
    letter-spacing: 0.5px;
}

.rp-track { 
    height: 8px; 
    background: #0f1923; 
    border-radius: 4px; 
    overflow: hidden; 
}

.rp-fill { 
    height: 100%; 
    background: linear-gradient(90deg, #cd7f32, #ffd700); 
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1); 
}

.rp-hint { 
    font-size: 10px; 
    color: rgba(255,255,255,0.3); 
    margin-top: 6px; 
    text-align: right; 
}

/* 4. 领奖区域 (Claim Area) - 悬浮通透感 */
.ref-claim-area { 
    margin: 0 20px 25px;
    background: linear-gradient(135deg, rgba(30, 45, 55, 0.8), rgba(15, 25, 35, 0.9)); 
    padding: 15px 20px; 
    border-radius: 16px; 
    border: 1px solid rgba(0, 231, 1, 0.15); 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    box-shadow: 0 8px 20px -5px rgba(0,0,0,0.3);
}

.rc-info { 
    display: flex; 
    flex-direction: column; 
    text-align: left; 
    gap: 2px;
}
.rc-info span:first-child { 
    font-size: 10px; 
    color: rgba(255,255,255,0.5); 
    text-transform: uppercase; 
    font-weight: 700;
}
.rc-amount { 
    font-size: 22px; 
    font-weight: 800; 
    color: #00ff88; 
    font-family: "Inter", sans-serif; 
    text-shadow: 0 0 15px rgba(0, 255, 136, 0.2); 
}

/* 按钮优化：更紧凑 */
.claim-btn {
    background: #00ff88; 
    color: #003b00; 
    font-weight: 800;
    font-size: 12px;
    border: none; 
    padding: 10px 18px; 
    border-radius: 10px;
    cursor: pointer; 
    box-shadow: 0 4px 15px rgba(0,255,136,0.25);
    transition: transform 0.2s;
}
.claim-btn:active { transform: scale(0.95); }

.claim-btn.disabled {
    background: rgba(255,255,255,0.05); 
    color: rgba(255,255,255,0.2); 
    box-shadow: none; 
    border: 1px solid rgba(255,255,255,0.05);
}

/* 5. 复制区域 (Copy Box) - 底部固定感 */
.ref-box {
    margin: 0 20px 30px;
    text-align: left;
}

.ref-box .b-label {
    font-size: 10px;
    color: rgba(255,255,255,0.4);
    margin-bottom: 6px;
    margin-left: 4px;
    font-weight: 700;
}

.ref-copy-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0b1219; 
    border: 1px dashed rgba(255, 255, 255, 0.15); 
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ref-copy-row:active {
    background: #0f1923;
    border-color: rgba(0, 255, 136, 0.4);
    transform: scale(0.99);
}

.ref-text {
    font-family: "Inter", monospace;
    font-size: 12px;
    color: #e0e6ed;
    font-weight: 600;
    /* 核心修改：超长自动省略，防止手机端撑破 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 80%;
}

.ref-copy-row svg {
    width: 16px; 
    height: 16px;
    opacity: 0.6;
    color: #fff;
}

/* 6. 修复 Toast 层级 */
#toast-container, .toast-box, .toast-message {
    z-index: 2147483647 !important; 
    position: fixed;
}
/* ================= 全局底部样式 (Footer - 修复版) ================= */
.global-footer {
    background-color: #0b1217; /* 极深色背景 */
    padding: 50px 20px;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: "Inter", sans-serif;
    color: #9aa0a6;
    font-size: 12px;
    line-height: 1.6;
    position: relative;
    z-index: 1; /* 保证不被背景图盖住 */
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

/* 1. 社区图标部分 */
.footer-section-title {
    color: white;
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-socials {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.social-btn {
    width: 44px;
    height: 44px;
    background: #1a242d;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    color: #b1bad3;
    border: 1px solid rgba(255,255,255,0.05);
}

.social-btn:hover {
    background: #2f4553;
    color: white;
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.2);
}

.social-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* 2. 文字说明部分 */
.footer-text {
    margin-bottom: 40px;
    text-align: justify; /* 电脑端保持两端对齐 */
    opacity: 0.8;
}

.footer-link {
    color: #fff;
    text-decoration: none;
    border-bottom: 1px dotted rgba(255,255,255,0.4);
    transition: 0.2s;
}
.footer-link:hover {
    border-bottom-color: #fff;
    opacity: 1;
}

/* 3. 底部版权与图标 */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px;
}

.copyright {
    font-size: 12px;
    color: #55657e;
}

.license-badge {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #d92e2e, #1c6a3a);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}
.license-badge:hover { transform: scale(1.1); }
.license-badge svg { width: 20px; height: 20px; fill: white; }


/* ================= 📱 移动端强制修复 (关键) ================= */
@media (max-width: 768px) {
    .global-footer {
        /* 🔴 1. 增加底部内边距，避开手机底部的导航栏 */
        padding-bottom: 120px !important; 
        text-align: center; /* 强制文字居中 */
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center; /* 🔴 2. 强制所有子元素水平居中 */
    }

    /* 社交图标居中 */
    .footer-socials {
        justify-content: center;
        width: 100%;
    }

    /* 法律文本：手机上左对齐或居中看你喜好，这里设为居中防止参差不齐 */
    .footer-text {
        text-align: center; 
        font-size: 11px;
        padding: 0 10px; /* 两边留点缝隙 */
        line-height: 1.8;
    }

    /* 底部版权区 */
    .footer-bottom {
        flex-direction: column-reverse; /* 图标在上，版权在下 */
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .copyright {
        width: 100%;
        display: block; /* 确保独占一行 */
    }
}


/* ================= 活动页美化 ================= */

/* 流水挑战列表容器 */
.wager-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 单行样式 */
.wager-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 左侧文字 */
.wager-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wager-target { font-size: 12px; color: #b1bad3; }
.wager-reward { font-size: 14px; color: #ffd700; font-weight: 800; }

/* 右侧按钮 */
.wager-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    min-width: 70px;
    transition: all 0.2s;
}

/* 按钮状态：可领取 */
.wager-btn.can-claim {
    background: #00e701;
    color: black;
    box-shadow: 0 0 10px rgba(0, 231, 1, 0.3);
    animation: pulse 2s infinite;
}

/* 按钮状态：未达标 */
.wager-btn.locked {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.2);
    cursor: not-allowed;
}

/* 按钮状态：已领取 */
.wager-btn.claimed {
    background: transparent;
    color: #00e701;
    border: 1px solid #00e701;
    cursor: default;
}

/* 免责声明文字 */
.promo-terms {
    font-size: 10px;
    color: #55657e;
    line-height: 1.5;
    text-align: justify;
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 8px;
}



/* === 豪华充值界面样式 === */
.deposit-header { text-align: center; margin-bottom: 25px; }
.dh-title { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.dh-subtitle { font-size: 13px; color: rgba(255,255,255,0.5); }

/* 豪华输入框 */
.premium-input-group {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}
.premium-input-group:focus-within {
    background: rgba(255, 255, 255, 0.08);
    border-color: #00ff88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.15);
}
.pig-icon { font-size: 24px; color: #00ff88; font-weight: 500; margin-right: 10px; }
.pig-input {
    flex: 1; background: transparent; border: none; color: #fff;
    font-size: 28px; font-weight: 700; padding: 20px 0; outline: none; width: 100%;
}
.pig-currency { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 6px; }

/* 快捷按钮 */
.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 25px; }
.quick-amounts button {
    background: rgba(255, 255, 255, 0.05); border: 1px solid transparent; color: rgba(255, 255, 255, 0.8);
    padding: 10px 0; border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s;
}
.quick-amounts button:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.quick-amounts button:active { background: rgba(0, 255, 136, 0.1); border-color: #00ff88; color: #00ff88; transform: translateY(0); }

/* 信息条 */
.deposit-info-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(0,0,0,0.2); padding: 12px 15px; border-radius: 10px; margin-bottom: 25px;
}
.dib-item { display: flex; flex-direction: column; gap: 2px; }
.dib-label { font-size: 11px; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.dib-value { font-size: 13px; color: #fff; font-weight: 600; }
.dib-line { width: 1px; height: 20px; background: rgba(255,255,255,0.1); }

/* 极光按钮 */
.premium-pay-btn {
    width: 100%; position: relative; background: linear-gradient(135deg, #00ff88 0%, #00cc6a 100%);
    border: none; border-radius: 12px; padding: 16px; cursor: pointer; overflow: hidden;
    transition: transform 0.2s; box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}
.premium-pay-btn:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4); }
.premium-pay-btn:active { transform: scale(0.98); }
.ppb-text { position: relative; z-index: 2; color: #00331a; font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.ppb-shine {
    position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-20deg); animation: shine 3s infinite;
}
@keyframes shine { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
.secure-badge { text-align: center; margin-top: 15px; font-size: 11px; color: #666; display: flex; align-items: center; justify-content: center; gap: 5px; }

/* === 高级警告框样式 (无 BR 版) === */
.warning-box {
    display: flex;
    gap: 16px; /* 图标和文字的间距 */
    background: rgba(255, 69, 58, 0.08); /* 非常高级的低饱和红背景 */
    border: 1px solid rgba(255, 69, 58, 0.2); /* 极细的边框 */
    border-radius: 16px; /* 圆角加大 */
    padding: 16px 20px;
    margin-bottom: 25px;
    align-items: flex-start;
    backdrop-filter: blur(5px); /* 微弱的磨砂感 */
}

/* 图标容器 */
.wb-icon-wrapper {
    flex-shrink: 0;
    color: #ff453a; /* iOS 风格的警告红 */
    background: rgba(255, 69, 58, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 69, 58, 0.15); /* 图标发光 */
}

.wb-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px; /* 标题和正文的间距 */
}

.wb-title {
    color: #ff453a;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.2;
}

/* 文本组容器：控制段落间距 */
.wb-text-group {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 🟢 核心：用这个控制两段文字的距离，代替 <br> */
}

.wb-text-group p {
    margin: 0; /* 清除默认边距 */
    color: rgba(255, 255, 255, 0.75);
    font-size: 12px;
    line-height: 1.5; /* 增加行高，提升阅读舒适度 */
    text-align: left;
}

/* 强调文字样式 */
.wb-text-group b {
    color: #fff;
    font-weight: 700;
    text-decoration-color: rgba(255, 69, 58, 0.5);
    text-decoration-thickness: 2px;
}

/* ================= 📱 移动端防闪烁专用补丁 ================= */

/* 1. 全局去除手机点击时的灰色高亮背景 */
* {
    -webkit-tap-highlight-color: transparent;
}

/* 2. 针对所有遮罩层 (Wallet, User, Drawer) 开启硬件加速 */
.modal-overlay, 
.drawer-overlay,
.mobile-drawer,
.wallet-modal {
    /* 告诉 GPU 提前准备，防止渲染延迟 */
    will-change: transform, opacity;
    /* 防止 3D 变换时的闪烁 (iOS 专属神技) */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* 使用 3D 变换强制开启 GPU 加速 */
    transform: translate3d(0, 0, 0); 
}

/* 3. 优化过渡动画，防止卡顿 */
.modal-overlay, 
.drawer-overlay {
    /* 初始状态必须是透明，防止一闪而过 */
    opacity: 0;
    /* 确保 transition 在默认状态下就存在 */
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), backdrop-filter 0.3s;
}

/* 4. 针对抽屉菜单的特殊处理 */
.mobile-drawer {
    /* 初始位置移出屏幕 */
    transform: translate3d(-100%, 0, 0); 
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 打开状态 */
.drawer-overlay.open .mobile-drawer {
    transform: translate3d(0, 0, 0);
}

/* 5. 解决 iOS 上毛玻璃导致的闪烁 */
/* 如果手机太卡，可以考虑在手机端禁用背景模糊，或者降低模糊度 */
@media (max-width: 768px) {
    .modal-overlay, .drawer-overlay {
        /* 降低模糊度，减轻 GPU 负担 */
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
    
    /* 修复弹窗在手机上可能出现的位置跳动 */
    .wallet-modal {
        /* 确保居中 */
        margin: auto; 
        position: relative;
        /* 修复部分安卓机型打开时高度抖动 */
        max-height: 90vh; 
    }
}