/* ============================================
   加拿大28 (PC28) - 现代化UI设计系统
   Dark Theme · Glassmorphism · Gold Accents
   dy.xufeng.asia
   ============================================ */

/* ========== 1. 设计系统变量 ========== */
:root {
    /* 主色系 - 深蓝紫渐变 */
    --primary: #0f3460;
    --primary-light: rgba(15, 52, 96, 0.6);
    --primary-dark: #1a1a2e;
    --primary-deeper: #0d1b2a;
    --accent: #16213e;
    --accent-light: rgba(22, 33, 62, 0.7);

    /* 金色点缀 */
    --gold: #ffd700;
    --gold-light: #e4c060;
    --gold-dim: rgba(228, 192, 96, 0.15);
    --gold-glow: rgba(255, 215, 0, 0.3);

    /* 功能色 */
    --blue: #4a9eff;
    --blue-light: rgba(74, 158, 255, 0.15);
    --success: #00d68f;
    --success-light: rgba(0, 214, 143, 0.15);
    --danger: #ff3d71;
    --danger-light: rgba(255, 61, 113, 0.15);
    --purple: #a855f7;
    --purple-light: rgba(168, 85, 247, 0.2);
    --warning: #ffaa00;

    /* 背景系统 */
    --bg: #0d1117;
    --bg-light: #161b22;
    --bg-card: #1c2333;
    --bg-elevated: #21283b;
    --bg-input: #0d1117;

    /* 文字系统 */
    --text: #e6edf3;
    --text-secondary: #8b949e;
    --text-sub: #6e7681;
    --text-light: #8b949e;
    --text-muted: #484f58;

    /* 边框 */
    --border: rgba(255, 255, 255, 0.06);
    --border-light: rgba(255, 255, 255, 0.04);
    --border-dark: rgba(255, 255, 255, 0.1);
    --border-gold: rgba(228, 192, 96, 0.3);

    /* 毛玻璃 */
    --glass-bg: rgba(22, 33, 62, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(20px) saturate(180%);

    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 4px 20px rgba(255, 215, 0, 0.15);
    --shadow-glow: 0 0 20px rgba(74, 158, 255, 0.2);

    /* 圆角 */
    --radius-sm: 0.35rem;
    --radius-md: 0.55rem;
    --radius-lg: 0.8rem;
    --radius-xl: 1.05rem;
    --radius-2xl: 1.35rem;
    --radius-full: 50%;

    /* 间距 */
    --space-xs: 0.18rem;
    --space-sm: 0.35rem;
    --space-md: 0.55rem;
    --space-lg: 0.8rem;
    --space-xl: 1.1rem;
    --space-2xl: 1.6rem;

    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;

    /* 键盘/下注区 */
    --keyboard-bg: #131926;
    --bet-bg: #1a2236;

    /* 过渡 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== 2. CSS Reset ========== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 20px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    max-width: 768px;
    margin: 0 auto;
    overflow-x: hidden;
    font-size: 0.7rem;
    line-height: 1.5;
    -webkit-user-select: none;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--gold-light); text-decoration: none; }
img { max-width: 100%; display: block; }
input, button, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ========== 3. 顶部导航 .mint-header ========== */
.mint-header {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--gold-light) !important;
    font-size: 0.7rem !important;
    height: 2rem !important;
    padding: 0 0.75rem !important;
    line-height: 2rem !important;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    max-width: 768px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--glass-border);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
}

.mint-header::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.mint-header .mint-header-title {
    font-size: 0.8rem !important;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mint-header .mint-button {
    color: var(--blue);
    font-size: 0.65rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.mint-header .mint-button:active {
    background: var(--blue-light);
    transform: scale(0.95);
}

/* ========== 4. 底部TabBar .van-tabbar ========== */
.van-tabbar {
    display: flex;
    height: 2.5rem;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 768px;
    margin: 0 auto;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -1px 20px rgba(0, 0, 0, 0.3);
}

.van-tabbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.van-tabbar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-sub);
    font-size: 0.55rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    padding: 0.15rem 0;
}

.van-tabbar-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 1.5rem;
    height: 2px;
    background: var(--gold);
    border-radius: 0 0 2px 2px;
    transition: transform var(--transition-normal);
    box-shadow: 0 0 8px var(--gold-glow);
}

.van-tabbar-item--active {
    color: var(--gold);
}

.van-tabbar-item--active::after {
    transform: translateX(-50%) scaleX(1);
}

.van-tabbar-item__icon {
    font-size: 1.1rem;
    margin-bottom: 0.1rem;
    transition: transform var(--transition-fast);
}

.van-tabbar-item:active .van-tabbar-item__icon {
    transform: scale(0.85);
}

/* ========== 5. 首页模块 ========== */
.p-home {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    min-height: 100vh;
}

.p-home .banner {
    flex: 0 0 8.75rem;
    position: relative;
    overflow: hidden;
}

.p-home .banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.p-home .banner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: linear-gradient(transparent, var(--bg));
    pointer-events: none;
}

/* 公告区域 */
.p-home .notice {
    margin: var(--space-sm);
    flex: 0 0 4.25rem;
    position: relative;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.notice-bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}

.notice-info {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 0.5rem;
}

.notice-info-left {
    flex: 0 0 4.1rem;
    text-align: center;
}

.notice-info-left strong {
    color: var(--gold);
    font-size: 1.5rem;
    text-shadow: 0 0 10px var(--gold-glow);
    display: block;
}

.notice-info-left p {
    color: var(--text-secondary);
    font-size: 0.45rem;
}

.notice-info-right {
    flex: 3;
    margin: 0 0.5rem;
    overflow: hidden;
}

.notice-info-right h4 {
    color: var(--gold-light);
    font-size: 0.5rem;
    padding-bottom: 0.1rem;
    font-weight: 600;
}

.notice-content {
    height: 1.5rem;
    line-height: 1.5rem;
    overflow: hidden;
}

.notice-content ul {
    white-space: nowrap;
    animation: noticeScroll 20s linear infinite;
}

.notice-content ul li {
    display: inline-block;
    color: var(--text);
    font-size: 0.85rem;
    margin-right: 3rem;
}

@keyframes noticeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* 游戏内容区 */
.g-content {
    flex: 1;
    padding: 0.3rem 2% 0;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-light) 100%);
    padding-bottom: 1rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.g-box .title {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: 0.3rem;
    padding: 0.5rem 0;
    border: 1px solid var(--border);
}

.g-box .title span {
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
    cursor: pointer;
}

.g-box .title span.active {
    color: var(--gold);
    background: var(--gold-dim);
    border-bottom: 2px solid var(--gold);
    padding-bottom: 0.2rem;
}

/* 游戏列表 */
.game-list-item {
    position: relative;
    margin-bottom: 0.3rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.game-list-item:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-md);
}

.game-list-item img {
    display: block;
    width: 100%;
}

.game-list-item .game-name {
    position: absolute;
    left: 50%;
    bottom: 1.15rem;
    transform: translateX(-50%);
    color: var(--gold);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    padding: 0.1rem 0.5rem;
    width: 70%;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
}

/* 球类游戏选择 */
.ball-game {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.ball-game .item {
    flex: 0 0 calc(50% - 0.15rem);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border-radius: var(--radius-lg);
    padding: 0.6rem 0.5rem;
    text-align: center;
    color: var(--gold-light);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.ball-game .item::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--gold-dim) 0%, transparent 70%);
    opacity: 0;
    transition: opacity var(--transition-slow);
}

.ball-game .item:hover::before,
.ball-game .item:active::before {
    opacity: 1;
}

.ball-game .item:hover,
.ball-game .item:active {
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
    border-color: var(--border-gold);
}

.ball-game .item .ball-name {
    font-size: 0.65rem;
    margin-bottom: 0.2rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.ball-game .item img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    margin: 0 auto 0.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1;
}

/* ========== 6. 游戏房间页 ========== */
.room-top {
    position: relative;
    z-index: 3;
    background: var(--bg);
    padding-top: 2rem;
}

.room-top .notice-bar {
    font-size: 0.6rem;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    margin: 5px;
    text-align: center;
    color: var(--text-secondary);
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--border);
}

.room-center {
    flex: 1;
    background: var(--bg);
    padding: 0 0.45rem;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/* 信息栏 */
.rbt-info {
    background: var(--bg-card);
    padding: 0.5rem 0;
    display: flex;
    position: relative;
    border-radius: var(--radius-lg);
    margin-bottom: 0.3rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.rbt-info-item {
    flex: 1;
    color: var(--text);
    text-align: center;
}

.rbt-info-split {
    flex: 0 0 1px;
    background: var(--border);
}

.rbt-info-item .top {
    font-size: 0.55rem;
    margin-bottom: 0.15rem;
    color: var(--text-sub);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rbt-info-item .mid {
    font-size: 0.9rem;
    font-weight: 700;
    font-family: var(--font-mono);
}

.rbt-info-item .mid.countdown {
    color: var(--gold);
    text-shadow: 0 0 8px var(--gold-glow);
    animation: countdownPulse 1s ease-in-out infinite;
}

@keyframes countdownPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* 开奖结果 */
.lottery-result {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 0.6rem;
    margin-bottom: 0.3rem;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.lottery-result .balls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
}

.lottery-result .ball {
    width: 1.9rem;
    height: 1.9rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    position: relative;
    transition: all var(--transition-normal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.lottery-result .ball:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.lottery-result .ball.purple {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
}

.lottery-result .ball.gray {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.4);
}

.lottery-result .ball.green {
    background: linear-gradient(135deg, #00d68f, #00b377);
    box-shadow: 0 2px 8px rgba(0, 214, 143, 0.4);
}

.lottery-result .ball.red {
    background: linear-gradient(135deg, #ff3d71, #db2c65);
    box-shadow: 0 2px 8px rgba(255, 61, 113, 0.4);
}

.lottery-result .ball.black {
    background: linear-gradient(135deg, #374151, #1f2937);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.lottery-result .ball.result {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.05rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 -2px 8px rgba(0, 0, 0, 0.2);
    animation: resultGlow 2s ease-in-out infinite, ballBounce 0.8s ease-out;
    border: 2px solid rgba(255, 255, 255, 0.15);
}

@keyframes resultGlow {
    0%, 100% { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 4px 24px rgba(255, 215, 0, 0.3), 0 0 30px rgba(255, 215, 0, 0.1); }
}

.lottery-result .equals {
    font-size: 0.8rem;
    color: var(--text-sub);
    margin: 0 0.15rem;
    font-weight: 700;
}

.lottery-result .combo {
    text-align: center;
    font-size: 0.65rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* 历史记录 */
.rbt-history {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin-bottom: 0.3rem;
    overflow: hidden;
    border: 1px solid var(--border);
}

.rbt-history .latest {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    font-size: 0.68rem;
    border-bottom: 1px solid var(--border);
    transition: background var(--transition-fast);
}

.rbt-history .latest:hover {
    background: var(--bg-elevated);
}

.rbt-history .latest .period {
    color: var(--blue);
    margin: 0 0.25rem;
    font-family: var(--font-mono);
}

.rbt-history .latest .number {
    width: 1.3rem;
    height: 1.3rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    margin-left: 0.35rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-fast);
}

.rbt-history .latest .number:hover {
    transform: scale(1.1);
}

.history-box {
    background: var(--bg-card);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.history-box.open {
    max-height: 500px;
    overflow: auto;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    font-size: 0.62rem;
    border-bottom: 1px solid var(--border-light);
    transition: all var(--transition-fast);
    border-radius: var(--radius-sm);
    margin: 0.1rem 0;
}

.history-item:hover {
    background: var(--bg-elevated);
    transform: translateX(2px);
}

.history-item .period {
    color: var(--blue);
    width: 4rem;
    font-family: var(--font-mono);
}

.history-item .balls {
    display: flex;
    gap: 0.15rem;
    flex: 1;
}

.history-item .ball {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    transition: transform var(--transition-fast);
}

.history-item .ball:hover {
    transform: scale(1.1);
}

.history-item .combo {
    width: 2rem;
    text-align: center;
    color: var(--text-secondary);
    font-weight: 600;
}

/* 房间底部 */
.room-bottom {
    background: var(--bg-light);
    border-top: 1px solid var(--border);
    padding: 0.35rem 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.room-bottom .input-wrap {
    flex: 1;
    background: var(--bg-input);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    height: 1.8rem;
    display: flex;
    align-items: center;
    padding: 0 0.4rem;
    transition: border-color var(--transition-fast);
}

.room-bottom .input-wrap:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-dim);
}

.room-bottom .input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.65rem;
    background: transparent;
    color: var(--text);
}

.room-bottom .input-wrap input::placeholder {
    color: var(--text-muted);
}

.room-bottom .bet-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--primary-dark);
    border: none;
    border-radius: var(--radius-md);
    padding: 0 1rem;
    height: 1.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-gold);
    letter-spacing: 0.5px;
}

.room-bottom .bet-btn:active {
    transform: scale(0.96);
    box-shadow: 0 2px 12px rgba(255, 215, 0, 0.4);
}

.room-bottom .bet-btn:hover {
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
}

/* 房间下注播报 */
.room-chat-panel {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    margin: 0.35rem 0;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.room-chat-title {
    height: 1.65rem;
    line-height: 1.65rem;
    padding: 0 0.6rem;
    color: var(--gold-light);
    font-size: 0.68rem;
    font-weight: 700;
    border-bottom: 1px solid var(--border-light);
    background: linear-gradient(90deg, var(--bg-elevated), var(--bg-card));
}

.room-chat-messages {
    max-height: 9rem;
    min-height: 5rem;
    overflow-y: auto;
    padding: 0.45rem 0.55rem;
    -webkit-overflow-scrolling: touch;
}

.room-chat-system {
    color: var(--text-sub);
    text-align: center;
    font-size: 0.62rem;
    padding: 1.2rem 0;
}

.room-bet-msg {
    display: flex;
    gap: 0.4rem;
    align-items: flex-start;
    margin-bottom: 0.45rem;
    animation: msgFadeIn 0.25s ease;
}

.room-bet-avatar {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.25rem;
    background: linear-gradient(135deg, var(--blue), #2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(74, 158, 255, 0.22);
}

.room-bet-msg.bot .room-bet-avatar {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--primary-dark);
    box-shadow: var(--shadow-gold);
}

.room-bet-body {
    flex: 1;
    min-width: 0;
}

.room-bet-name {
    font-size: 0.55rem;
    color: var(--text-sub);
    margin-bottom: 0.08rem;
}

.room-bet-content {
    display: inline-block;
    max-width: 100%;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.32rem 0.48rem;
    font-size: 0.7rem;
    line-height: 1.45;
    white-space: pre-line;
    word-break: break-word;
    box-shadow: var(--shadow-sm);
}

.room-bet-msg.bot .room-bet-content {
    color: var(--gold-light);
    border-color: var(--border-gold);
    background: var(--gold-dim);
}

/* ========== 7. 下注键盘 .bet-popup ========== */
.bet-popup {
    width: 100%;
    height: 60%;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 768px;
    margin: 0 auto;
    z-index: 100;
    display: none;
    background: var(--bg-card);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
    border-top: 1px solid var(--border-dark);
    animation: slideUpPanel 0.3s ease;
}

@keyframes slideUpPanel {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.bet-popup.show {
    display: flex;
}

.bet-popup::before {
    content: '';
    position: absolute;
    top: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 0.2rem;
    background: var(--text-muted);
    border-radius: 1rem;
}

.keyboard-nav {
    width: 5rem;
    background-color: var(--keyboard-bg);
    height: 100%;
    overflow-y: auto;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
}

.keyboard-nav li {
    padding: 0.35rem 0;
    height: 2.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    text-align: center;
    line-height: 1.8rem;
    position: relative;
    cursor: pointer;
    list-style: none;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-light);
}

.keyboard-nav li:active {
    background: var(--bg-elevated);
}

.keyboard-nav li.active {
    background-color: var(--bg-card);
    color: var(--gold);
    font-weight: 600;
}

.keyboard-nav li.active:before {
    content: "";
    position: absolute;
    height: 1.8rem;
    width: 0.15rem;
    background: var(--gold);
    left: 0;
    top: 0.35rem;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 6px var(--gold-glow);
}

.keyboard-nav i {
    position: absolute;
    left: 0.25rem;
    top: 50%;
    margin-top: -0.3rem;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--text-muted);
    border-radius: var(--radius-full);
}

.keyboard-nav i.high {
    background: var(--purple) !important;
    box-shadow: 0 0 6px var(--purple-light);
}

.keyboard-bet {
    background-color: var(--bg-card);
    padding: 0 0.6rem;
    height: 100%;
    overflow-y: auto;
    width: calc(100% - 5rem);
    -webkit-overflow-scrolling: touch;
}

.keyboard-bet h4 {
    font-weight: 500;
    text-align: center;
    line-height: 2rem;
    font-size: 0.75rem;
    color: var(--text);
}

.keyboard-bet-content {
    border-top: 1px solid var(--border);
    padding-top: 0.5rem;
}

.keyboard-bet-content dl {
    overflow: hidden;
}

.keyboard-bet-content dl dt {
    width: 100%;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    clear: both;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.3rem;
    color: var(--gold-light);
}

.keyboard-bet-content dl dd {
    width: 50%;
    float: left;
    padding-bottom: 0.5rem;
    text-align: center;
}

.keyboard-bet-content dl dd:nth-child(odd) { padding-right: 0.5rem; }
.keyboard-bet-content dl dd:nth-child(2n) { padding-left: 0.5rem; }
.keyboard-bet-content dl dd.w100 { width: 100%; }
.keyboard-bet-content dl dd.w100:nth-child(odd) { padding-right: 0; }
.keyboard-bet-content dl dd.w100:nth-child(2n) { padding-left: 0; }

.betPlay {
    background-color: var(--bet-bg);
    height: 2.1rem;
    line-height: 2.1rem;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    color: var(--text);
    font-size: 0.72rem;
    position: relative;
    overflow: hidden;
}

.betPlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.betPlay:hover::before {
    opacity: 1;
}

.betPlay:active {
    transform: scale(0.96);
}

.betPlay.pit {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border: 1px solid var(--gold);
    color: var(--primary-dark);
    font-weight: 600;
    box-shadow: var(--shadow-gold);
}

.betPlay.pit::before {
    display: none;
}

.betPlay em {
    font-weight: 600;
    width: 70% !important;
    display: inline-block;
    font-size: 0.7rem;
    font-style: normal;
}

.betPlay span {
    width: 30%;
    display: inline-block;
    font-size: 0.7rem;
    color: var(--gold);
}

.betPlay.pit span {
    color: var(--primary-dark);
}

.oddsExplain {
    line-height: 1.2rem;
    text-align: right;
    padding: 0 0.25rem;
    font-size: 0.6rem;
    color: var(--text-sub);
}

/* ========== 8. 登录/注册页 ========== */
.login_bg {
    width: 100%;
    min-height: 100vh;
    text-align: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.login_bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(74, 158, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 50% 80%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.login_bg .logo {
    margin: 0 auto 2rem;
    font-size: 1.5rem;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    position: relative;
    z-index: 1;
}

.login_bg .form {
    width: 85%;
    max-width: 320px;
    position: relative;
    z-index: 1;
}

.login_bg .form .userName,
.login_bg .form .passWord {
    border: 1px solid var(--border-dark);
    padding: 3.5% 0 4% 3%;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: border-color var(--transition-fast);
}

.login_bg .form .userName:focus-within,
.login_bg .form .passWord:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-dim);
}

.login_bg .form .userName {
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.login_bg .form .passWord {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.login_bg .form .userName input,
.login_bg .form .passWord input {
    width: 68%;
    height: 80%;
    border: none;
    background: transparent;
    font-size: 1em;
    color: var(--text);
    letter-spacing: 1px;
    padding-left: 2px;
    outline: none;
}

.login_bg .form .userName input::placeholder,
.login_bg .form .passWord input::placeholder {
    color: var(--text-muted);
}

.login_bg .form label {
    font-size: 0.85rem;
    color: var(--gold-light);
}

.choose_box {
    height: 4.5em;
    line-height: 4.5em;
    padding: 0 5px;
    position: relative;
    z-index: 1;
}

.choose_box div { float: left; color: var(--text-secondary); }
.choose_box a { float: right; color: var(--gold-light); }

.login_btn {
    width: 100%;
    display: block;
    padding: 3.8% 0;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    border: 0;
    font-size: 1.02em;
    color: var(--primary-dark);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-gold);
    text-align: center;
    cursor: pointer;
    margin-top: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    transition: all var(--transition-normal);
    position: relative;
    z-index: 1;
}

.login_btn:active {
    transform: scale(0.97);
    box-shadow: 0 4px 14px rgba(255, 215, 0, 0.4);
}

.login_btn:hover {
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35);
}

.other_login {
    width: 80%;
    margin-top: 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.other_login span { color: var(--text-secondary); font-size: 0.75rem; }

/* 注册页 */
.reg-form {
    width: 80%;
    max-width: 320px;
    margin: 0 auto;
}

.reg-form .form-group {
    margin-bottom: 0;
}

.reg-form .form-group input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-dark);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.85rem;
    outline: none;
    color: var(--text);
    border-bottom: 0;
    transition: border-color var(--transition-fast);
}

.reg-form .form-group input:focus {
    border-color: var(--gold);
}

.reg-form .form-group input::placeholder {
    color: var(--text-muted);
}

.reg-form .form-group:last-of-type input {
    border-bottom: 1px solid var(--border-dark);
    border-radius: 0 0 0.45em 0.45em;
}

.reg-form .form-group:first-of-type input {
    border-radius: 0.45em 0.45em 0 0;
}

/* ========== 9. 个人中心 ========== */
.profile-page {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
    background: var(--bg);
    min-height: 100vh;
}

.profile-header {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    padding: 1.5rem;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.profile-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.03) 0%, transparent 60%);
    pointer-events: none;
}

.profile-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}

.profile-avatar {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    margin: 0 auto 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--primary-dark);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.35);
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    position: relative;
    z-index: 1;
    transition: transform var(--transition-normal);
}

.profile-avatar:hover {
    transform: scale(1.05);
}

.profile-name {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
    position: relative;
    z-index: 1;
}

.profile-id {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
}

.profile-balance {
    margin-top: 0.8rem;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-lg);
    padding: 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

.profile-balance .label {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.profile-balance .amount {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--gold);
    font-family: var(--font-mono);
    text-shadow: 0 0 10px var(--gold-glow);
}

.cu-list {
    background: var(--bg-card);
    margin-top: 0.3rem;
    border-radius: var(--radius-lg);
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    overflow: hidden;
    border: 1px solid var(--border);
}

.cu-list .cu-item {
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cu-list .cu-item:last-child {
    border-bottom: none;
}

.cu-list .cu-item:active {
    background: var(--bg-elevated);
}

.cu-list .cu-item .item-icon {
    width: 1.5rem;
    font-size: 1rem;
    margin-right: 0.5rem;
    text-align: center;
}

.cu-list .cu-item .item-content {
    flex: 1;
    font-size: 0.75rem;
    color: var(--text);
}

.cu-list .cu-item .item-arrow {
    color: var(--text-muted);
    font-size: 0.6rem;
    transition: transform var(--transition-fast);
}

.cu-list .cu-item:active .item-arrow {
    transform: translateX(2px);
}

/* ========== 10. 充值/提现 ========== */
.finance-page {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
    background: var(--bg);
    min-height: 100vh;
}

.finance-tabs {
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.finance-tab {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-sub);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.finance-tab.active {
    color: var(--gold);
    font-weight: 600;
}

.finance-tab.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 2px;
    background: var(--gold);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 6px var(--gold-glow);
}

/* ========== 11. 记录页 ========== */
.record-page {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
    background: var(--bg);
    min-height: 100vh;
}

.record-tabs {
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
}

.record-tab {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-sub);
    cursor: pointer;
    position: relative;
    transition: color var(--transition-fast);
}

.record-tab.active {
    color: var(--gold);
    font-weight: 600;
}

.record-tab.active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 2px;
    background: var(--gold);
    border-radius: 2px 2px 0 0;
    box-shadow: 0 0 6px var(--gold-glow);
}

.record-list {
    padding: 0.3rem;
}

.record-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 0.6rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--border);
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.record-card:active {
    border-color: var(--border-dark);
    transform: scale(0.985);
    box-shadow: var(--shadow-md);
}

.rc-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}

.rc-game {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text);
}

.rc-time {
    font-size: 0.6rem;
    color: var(--text-sub);
}

.rc-bet {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
    font-size: 0.65rem;
}

.rc-bet .content { color: var(--text-light); }
.rc-bet .amount { color: var(--text-secondary); }

.rc-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.3rem 0;
}

.rc-result .label {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
}

.rc-result .balls {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.rc-result .ball {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
}

.rc-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 0.3rem;
    border-top: 1px solid var(--border);
    font-size: 0.6rem;
}

.rc-footer .after-balance {
    color: var(--gold);
    font-family: var(--font-mono);
}

.rc-footer .settle.win {
    color: var(--success);
    font-weight: 700;
}

.rc-footer .settle.lose {
    color: var(--danger);
    font-weight: 700;
}

.rc-footer .settle.pending {
    color: var(--text-sub);
}

/* ========== 12. 日期筛选 ========== */
.date-pick {
    display: flex;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0 0.5rem;
    overflow-x: auto;
}

.date-pick .item {
    padding: 0.4rem 0.6rem;
    font-size: 0.7rem;
    color: var(--text-sub);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.date-pick .item.is-bold {
    color: var(--gold);
    font-weight: 600;
}

.date-pick .item.is-bold:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1.5rem;
    height: 2px;
    background: var(--gold);
    border-radius: 2px 2px 0 0;
}

/* ========== 13. Toast提示 ========== */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: rgba(28, 35, 51, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    font-size: 0.75rem;
    z-index: 9999;
    display: none;
    max-width: 80%;
    text-align: center;
    border: 1px solid var(--border-dark);
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.2s ease forwards;
}

.toast.show {
    display: block;
}

@keyframes toastIn {
    from {
        transform: translate(-50%, -50%) scale(0.9);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* ========== 14. 遮罩层 ========== */
.v-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 99;
    display: none;
    transition: opacity var(--transition-normal);
}

.v-modal.show {
    display: block;
    opacity: 1;
}

/* ========== 15. 空状态 ========== */
.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-sub);
}

.empty-state .icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-state .text {
    font-size: 0.7rem;
    margin-top: 0.3rem;
}

/* ========== 16. 聊天室 ========== */
.chat-page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 2rem - 2.5rem);
    background: var(--bg);
    padding-top: 2rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.3rem;
    -webkit-overflow-scrolling: touch;
}

.chat-msg {
    display: flex;
    margin-bottom: 0.4rem;
    align-items: flex-start;
    animation: msgFadeIn 0.3s ease;
}

@keyframes msgFadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chat-msg.self {
    flex-direction: row-reverse;
}

.chat-avatar {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(255, 215, 0, 0.2);
}

.chat-msg.self .chat-avatar {
    background: linear-gradient(135deg, var(--blue), #2563eb);
    color: #fff;
    box-shadow: 0 2px 6px rgba(74, 158, 255, 0.2);
}

.chat-bubble {
    max-width: 75%;
    margin: 0 0.35rem;
    padding: 0.4rem 0.55rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    font-size: 0.72rem;
    line-height: 1.5;
    word-break: break-all;
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
}

.chat-bubble:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.chat-msg.self .chat-bubble {
    background: linear-gradient(135deg, rgba(74, 158, 255, 0.15), rgba(74, 158, 255, 0.08));
    border-color: rgba(74, 158, 255, 0.2);
}

.chat-name {
    font-size: 0.55rem;
    color: var(--text-sub);
    margin-bottom: 0.1rem;
}

.chat-msg.self .chat-name {
    text-align: right;
}

.chat-time {
    font-size: 0.5rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0.3rem 0;
}

.chat-system-wrap {
    text-align: center;
    margin: 0.3rem 0;
}

.chat-system {
    display: inline-block;
    font-size: 0.6rem;
    color: var(--text-sub);
    background: var(--bg-elevated);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
}

.chat-input-bar {
    display: flex;
    padding: 0.3rem;
    background: var(--bg-light);
    border-top: 1px solid var(--border);
    gap: 0.3rem;
    align-items: center;
}

.chat-input-bar input {
    flex: 1;
    height: 1.8rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    padding: 0 0.4rem;
    font-size: 0.7rem;
    outline: none;
    background: var(--bg-input);
    color: var(--text);
    transition: border-color var(--transition-fast);
}

.chat-input-bar input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px var(--gold-dim);
}

.chat-input-bar input::placeholder {
    color: var(--text-muted);
}

.chat-input-bar .send-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: var(--primary-dark);
    border: none;
    border-radius: var(--radius-md);
    padding: 0 0.8rem;
    height: 1.9rem;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
}

.chat-input-bar .send-btn:active {
    transform: scale(0.96);
    box-shadow: var(--shadow-gold);
}

.chat-input-bar .send-btn:hover {
    box-shadow: var(--shadow-md);
}

.chat-input-bar .red-btn {
    background: linear-gradient(135deg, var(--danger), #db2c65);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    width: 1.8rem;
    height: 1.8rem;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: 0 2px 8px rgba(255, 61, 113, 0.3);
}

.chat-input-bar .red-btn:active {
    transform: scale(0.9);
}

/* ========== 17. 红包消息 ========== */
.chat-red-packet {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    border-radius: var(--radius-md);
    padding: 0.55rem 0.65rem;
    color: #fff;
    cursor: pointer;
    min-width: 8.5rem;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-normal);
    box-shadow: 0 3px 10px rgba(220, 38, 38, 0.3);
}

.chat-red-packet::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.chat-red-packet:active {
    transform: scale(0.97);
}

.chat-red-packet .rp-greeting {
    font-size: 0.7rem;
    font-weight: 600;
    position: relative;
    z-index: 1;
}

.chat-red-packet .rp-label {
    font-size: 0.55rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.1rem;
    position: relative;
    z-index: 1;
}

.chat-red-packet.grabbed {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

/* 红包弹窗 */
.rp-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
}

.rp-modal.show {
    display: flex;
}

.rp-box {
    background: linear-gradient(180deg, #dc2626 0%, #991b1b 100%);
    border-radius: var(--radius-2xl);
    padding: 1.6rem;
    width: 12.5rem;
    text-align: center;
    color: #fff;
    animation: scaleIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5), 0 0 40px rgba(220, 38, 38, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.rp-box::before {
    content: '';
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.1) 0%, transparent 60%);
    pointer-events: none;
}

@keyframes scaleIn {
    from {
        transform: scale(0.7);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.rp-box .rp-sender {
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
}

.rp-box .rp-greeting {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    position: relative;
}

.rp-box .rp-amount {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    position: relative;
}

.rp-box .rp-amount span {
    font-size: 1rem;
}

.rp-box .rp-status {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.8rem;
    position: relative;
}

.rp-box .rp-grab-btn {
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #991b1b;
    border: none;
    border-radius: 1.5rem;
    padding: 0.4rem 2rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 16px rgba(255, 215, 0, 0.3);
    position: relative;
}

.rp-box .rp-grab-btn:active {
    transform: scale(0.95);
}

.rp-box .rp-close {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
    cursor: pointer;
    margin-top: 0.5rem;
    position: relative;
}

.rp-box .rp-list {
    margin-top: 0.5rem;
    max-height: 8rem;
    overflow-y: auto;
    position: relative;
}

.rp-box .rp-list-item {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.65rem;
}

/* 发红包弹窗 */
.send-rp-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.send-rp-modal.show {
    display: flex;
}

.send-rp-box {
    background: var(--bg-card);
    width: 100%;
    max-width: 520px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.2rem;
    animation: slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.send-rp-box h3 {
    text-align: center;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
    color: var(--danger);
    font-weight: 700;
}

.send-rp-box .form-row {
    margin-bottom: 0.5rem;
}

.send-rp-box .form-row label {
    display: block;
    font-size: 0.65rem;
    color: var(--text-sub);
    margin-bottom: 0.15rem;
}

.send-rp-box .form-row input {
    width: 100%;
    height: 1.8rem;
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-md);
    padding: 0 0.4rem;
    font-size: 0.75rem;
    outline: none;
    background: var(--bg-input);
    color: var(--text);
    transition: border-color var(--transition-fast);
}

.send-rp-box .form-row input:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px var(--danger-light);
}

.send-rp-box .form-row input::placeholder {
    color: var(--text-muted);
}

.send-rp-box .confirm-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--danger), #db2c65);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    margin-top: 0.3rem;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 12px rgba(255, 61, 113, 0.3);
}

.send-rp-box .confirm-btn:active {
    transform: scale(0.97);
    opacity: 0.9;
}

/* ========== 18. 加载动画 ========== */
.mint-spinner-triple-bounce {
    display: inline-block;
}

.mint-spinner-triple-bounce-bounce1,
.mint-spinner-triple-bounce-bounce2,
.mint-spinner-triple-bounce-bounce3 {
    border-radius: var(--radius-full);
    display: inline-block;
    animation: mint-spinner-triple-bounce 1.4s ease-in-out infinite both;
    width: 8px;
    height: 8px;
    background: var(--gold);
    margin: 0 3px;
    box-shadow: 0 0 6px var(--gold-glow);
}

.mint-spinner-triple-bounce-bounce1 { animation-delay: -0.32s; }
.mint-spinner-triple-bounce-bounce2 { animation-delay: -0.16s; }

@keyframes mint-spinner-triple-bounce {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 开奖球旋转动画 */
@keyframes ballSpin {
    0% { transform: rotateY(0deg) scale(1); }
    25% { transform: rotateY(90deg) scale(1.1); }
    50% { transform: rotateY(180deg) scale(1); }
    75% { transform: rotateY(270deg) scale(1.1); }
    100% { transform: rotateY(360deg) scale(1); }
}

@keyframes ballBounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
    60% { transform: translateY(-3px); }
}

.lottery-result .ball.result {
    animation: resultGlow 2s ease-in-out infinite, ballBounce 0.6s ease-out;
}

/* ========== 19. 通用工具类 ========== */
.page {
    display: none;
}

.page.active {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    animation: pageFadeIn 0.3s ease;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.content-pb {
    padding-bottom: 2.5rem;
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--gold); }
.text-blue { color: var(--blue); }
.text-red { color: var(--danger); }
.text-green { color: var(--success); }
.text-grey { color: var(--text-sub); }
.text-gold { color: var(--gold); }
.text-white { color: #fff; }

.fs-24 { font-size: 0.6rem; }
.fs-28 { font-size: 0.7rem; }
.fs-32 { font-size: 0.8rem; }
.fs-36 { font-size: 0.9rem; }
.fs-40 { font-size: 1rem; }

.mt-10 { margin-top: 0.5rem; }
.mb-10 { margin-bottom: 0.5rem; }
.ml-10 { margin-left: 0.5rem; }
.mr-10 { margin-right: 0.5rem; }
.pt-10 { padding-top: 0.5rem; }
.pb-10 { padding-bottom: 0.5rem; }
.px-10 { padding-left: 0.5rem; padding-right: 0.5rem; }

/* Flexbox helpers */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-1 { flex: 1; }

/* ========== 20. 滚动条美化 ========== */
::-webkit-scrollbar {
    width: 3px;
    height: 3px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ========== 21. 响应式适配 ========== */
@media screen and (max-width: 768px) {
    body {
        max-width: 100%;
    }

    .mint-header,
    .van-tabbar,
    .bet-popup {
        max-width: 100%;
    }
}

@media screen and (max-width: 375px) {
    html {
        font-size: 18px;
    }

    .ball-game .item {
        padding: 0.4rem 0.3rem;
    }

    .lottery-result .ball {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.65rem;
    }

    .lottery-result .ball.result {
        width: 2rem;
        height: 2rem;
        font-size: 0.85rem;
    }
}

@media screen and (min-width: 769px) {
    body {
        box-shadow: 0 0 60px rgba(0, 0, 0, 0.5);
    }
}

/* ========== 22. 选中状态和焦点 ========== */
::selection {
    background: var(--gold-dim);
    color: var(--gold);
}

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ========== 23. 打印样式 ========== */
@media print {
    .mint-header,
    .van-tabbar,
    .bet-popup,
    .chat-input-bar {
        display: none !important;
    }
}

/* ========== 24. 减少动画偏好 ========== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== 25. 图片版浅色移动端覆盖 ========== */
:root{--bg:#f3f3f3;--bg-card:#fff;--text:#333;--text-secondary:#8b96a0;--border:#e8e8e8;--gold:#f0a818;--blue:#4aa3f0}
body{background:#f3f3f3!important;color:#333!important;max-width:430px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',Arial,sans-serif}
#main_app{background:#f3f3f3;min-height:100vh}.mint-header{background:#fff!important;color:#222!important;border-bottom:1px solid #eee;height:56px;box-shadow:none}.mint-header-title{font-size:18px;font-weight:500}.mint-header-left,.mint-header-right{color:#9bc6ee!important;background:transparent!important}
.page-container{background:#f3f3f3;padding-bottom:72px}.van-tabbar{height:64px;background:#fff;border-top:1px solid #ddd;box-shadow:none}.van-tabbar-item{color:#666;font-size:13px}.van-tabbar-item__icon{font-size:28px;line-height:30px}.van-tabbar-item.active{color:#e6a21a}
.notice{display:none}.home-banner{height:180px;background:linear-gradient(90deg,#45207b,#15134a);color:#fff;display:flex;align-items:center;padding:0 32px;margin:0 0 8px}.home-banner strong{font-size:38px;display:block;letter-spacing:2px}.home-banner span{display:inline-block;margin-top:12px;background:rgba(255,255,255,.22);padding:6px 18px;border-radius:20px}.hall-notice{background:#fff8e5;color:#d7782a;border-radius:0;margin:0;padding:16px 18px;font-size:17px}.g-content,.p-home{padding:0;background:#f3f3f3}.g-box{background:#fff;margin:0;border-radius:0;box-shadow:none}.g-box .title{display:none}.ball-game{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #eee;border-bottom:1px solid #eee}.ball-game .item{min-height:112px;border-radius:0;border:0;border-right:1px solid #eee;border-bottom:1px solid #eee;box-shadow:none;background:#fff;padding:24px 14px;display:flex;align-items:center;justify-content:center;flex-direction:row;gap:14px}.ball-game .ball-name{font-size:22px;color:#333}.ball-game .item-desc,.ball-game .item-tag,.ball-game .item-players{display:none}.hall-grid{display:grid;grid-template-columns:1fr 1fr;margin:0;background:#fff;border-bottom:1px solid #eee}.hall-grid .quick-item{height:110px;border-right:1px solid #eee;border-bottom:1px solid #eee;border-radius:0;background:#fff;box-shadow:none;font-size:21px;color:#333}.hall-grid .quick-icon{font-size:42px}
#page_game{background:#e9e9e9;min-height:calc(100vh - 64px)}.room-top{display:none}.room-center{padding:0 0 78px;background:#e9e9e9}.rbt-info{height:96px;border-radius:0;background:#57bfd2;color:#263238;margin:0;box-shadow:none}.rbt-info-item .top{font-size:14px;color:#263238}.rbt-info-item .mid{font-size:20px;color:#263238}.lottery-result{margin:0;background:#fff;border-radius:0;border-top:1px solid #d8d8d8;border-bottom:1px solid #d8d8d8;box-shadow:none;padding:14px 8px}.lottery-result .balls{justify-content:center}.ball{width:34px;height:34px;font-size:18px}.ball.purple{background:#7a2ca7}.ball.result{background:#0619ec}.combo{font-size:22px;color:#333}.rbt-history{margin:0;border-radius:0;box-shadow:none}.rbt-history .latest{background:#fff;border-bottom:1px solid #ddd}.notice-bar{background:#9bdce8;color:#fff;font-size:18px;border-radius:8px;margin:8px 8px 0;padding:8px 12px}.room-bottom{height:74px;background:#fff;border-top:1px solid #dcdcdc;padding:10px 12px;gap:10px}.room-bottom .input-wrap input{height:52px;border-radius:8px;background:#fff;border:0;font-size:18px}.bet-btn,.send-btn{background:#4aa3f0!important;border-radius:8px;height:52px;min-width:82px;font-size:18px}.float-actions{position:fixed;right:18px;top:38%;z-index:80;display:flex;flex-direction:column;gap:12px}.float-actions button{width:62px;height:62px;border:0;border-radius:50%;color:#fff;font-size:21px;box-shadow:0 8px 16px rgba(0,0,0,.24)}.fa-yellow{background:#e6c45a}.fa-cyan{background:#3fbde0}.fa-green{background:#4acb36}.fa-purple{background:#8d31b5}.fa-gray{background:#91a1ab}.fa-brown{background:#af7547}.fa-red{background:#df5246}.fa-pink{background:#d441a0}
.profile-page{background:#f5f5f5}.profile-header{height:250px;background:linear-gradient(135deg,#138df0,#12c9d8);border-radius:0;color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.profile-avatar{width:96px;height:96px;border-radius:50%;background:#111;color:#fff;font-size:42px;margin-bottom:20px}.profile-info{margin:0}.profile-name{font-size:24px}.profile-id{font-size:24px;color:rgba(255,255,255,.85);margin-top:24px}.profile-balance{display:none}.cu-list{background:#fff;margin:0;border-radius:0;box-shadow:none}.cu-item{height:66px;border-bottom:1px solid #eee;padding:0 22px}.cu-item .item-icon{font-size:24px;width:34px}.cu-item .item-content{font-size:20px;color:#666}.cu-item .item-arrow{color:#aaa;font-size:28px}.stats-card{display:none}
.finance-tabs{height:56px;background:#fff;margin:0;border-radius:0}.finance-tab{font-size:20px;color:#8db8e8}.finance-tab.active{color:#222;background:#fff;border-bottom:2px solid transparent}.wallet-pay-list{background:#fff;margin:0}.wallet-pay-item{height:78px;display:flex;align-items:center;gap:22px;padding:0 28px;border-bottom:1px solid #eee;font-size:22px;color:#555}.wallet-pay-item.active{background:#fafafa}.pay-logo{width:46px;height:46px;border-radius:8px;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}.pay-logo.alipay{background:#1aa7e8}.pay-logo.wechat{background:#10b33f}.pay-logo.bank{background:#2869b2}.pay-logo.usdt{background:#14a27c;border-radius:50%}.form-card{background:#fff;border-radius:0;box-shadow:none;margin:14px 0;padding:18px}.form-card-title{font-size:20px;color:#555}.form-field input,.form-field select{background:#fff;border:1px solid #eee;color:#333;height:46px}.form-field label{color:#666}
.light-chat-page,.chat-page{background:#f3f3f3;height:calc(100vh - 120px)}.chat-mode-tabs{display:none}.chat-room-tip{display:none}.chat-messages{background:#f3f3f3;padding:18px 14px 90px}.chat-system{background:transparent;color:#7aa7d8;font-size:16px}.chat-msg{gap:12px;margin:14px 0}.chat-avatar{width:48px;height:48px;border-radius:4px;background:#111;color:#fff}.chat-name{color:#f23b30;font-size:18px}.chat-bubble,.chat-red-packet{background:#fff;color:#333;border-radius:4px;padding:12px 16px;font-size:20px;box-shadow:none;max-width:280px}.chat-msg.self{flex-direction:row-reverse}.chat-msg.self .chat-name{text-align:right;color:#888}.chat-input-bar{height:72px;background:#fff;border-top:1px solid #ddd;padding:10px 12px}.chat-input-bar input{height:52px;background:#fff;border:0;border-radius:8px;font-size:18px}.chat-red-packet{background:#f6b23c;color:#fff}.rp-modal .rp-box,.send-rp-box{background:#fff;color:#333}
.mi-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.86);z-index:999;align-items:center;justify-content:center;padding:20px}.mi-modal.show{display:flex}.mi-box{width:100%;max-width:380px;background:#fde8f4;border:6px solid #f2a9df;border-radius:14px;padding:22px 16px 24px;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.35)}.mi-box h3{font-size:24px;color:#e8348d;margin:8px 0 18px}.mi-box h3 span{color:#f33228}.mi-card{height:170px;border:6px solid #e22c93;background:#fff;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:18px;overflow:hidden}.mi-mask{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;color:#777;font-size:22px;pointer-events:none}.mi-scratch{position:absolute;inset:0;z-index:3;width:100%;height:100%;touch-action:none;cursor:crosshair;transition:opacity .18s ease}.mi-balls{display:flex;align-items:center;gap:10px;font-size:24px;position:relative;z-index:1}.mi-info{font-size:24px;color:#e8348d;margin:16px 0}.mi-info span{color:#f33228}.mi-btn{width:100%;height:54px;border:0;border-radius:6px;background:#4aa3f0;color:#fff;font-size:22px;margin-top:14px}.mi-back{background:#df554f}.room-chat-panel{background:#fff;border-radius:0;margin:0;border:0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;box-shadow:none}.room-chat-title{height:42px;line-height:42px;background:#fff;color:#333;font-size:18px;padding:0 14px;border-bottom:1px solid #eee}.room-chat-messages{min-height:220px;max-height:45vh;background:#e9e9e9;padding:14px}.room-chat-system{font-size:16px;color:#8b96a0}.room-bet-avatar{width:48px;height:48px;border-radius:4px;background:#111;color:#fff;font-size:18px}.room-bet-msg.bot .room-bet-avatar{background:#e6c45a;color:#fff}.room-bet-name{font-size:18px;color:#e33}.room-bet-content{background:#fff;color:#333;border:0;border-radius:4px;padding:12px 16px;font-size:20px;line-height:1.45;box-shadow:none}.room-bet-msg.bot .room-bet-content{background:#fff8e5;color:#b37a12;border:0}.chat-bubble a,.chat-bubble{white-space:pre-line}.chat-msg:not(.self) .chat-avatar{background:url('/favicon.ico') center/cover,#ddd}.chat-msg:not(.self) .chat-name{color:#e33}.chat-msg.self .chat-avatar{background:#111}.chat-msg.self .chat-bubble{margin-left:auto}.chat-input-bar .send-btn::before{content:''}
@media screen and (max-width:430px){html{font-size:18px}body{width:100%;min-width:0;overflow-x:hidden}.mint-header{height:52px!important;line-height:52px!important}.mint-header .mint-button{min-width:52px;min-height:44px;font-size:16px}.page-container{padding-bottom:calc(72px + env(safe-area-inset-bottom))}.van-tabbar{height:calc(64px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.home-banner{height:150px;padding:0 22px}.home-banner strong{font-size:32px}.hall-notice{font-size:15px;padding:12px 14px}.ball-game .item,.hall-grid .quick-item{min-height:92px;height:auto}.ball-game .ball-name,.hall-grid .quick-item{font-size:18px}.hall-grid .quick-icon{font-size:34px}.room-center{padding-bottom:calc(92px + env(safe-area-inset-bottom))}    .room-bottom{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:180;max-width:430px;margin:0 auto;height:auto;min-height:74px;padding-bottom:10px}.float-actions{right:10px;top:auto;bottom:calc(166px + env(safe-area-inset-bottom));gap:8px}.float-actions button{width:52px;height:52px;font-size:18px}.bet-popup{height:72%;z-index:220}.keyboard-nav{width:4.2rem}.keyboard-nav li{min-height:46px;height:auto;line-height:1.2;padding:14px 4px}.keyboard-bet{width:calc(100% - 4.2rem);padding:0 8px}.kb-amount-row{display:flex;flex-wrap:wrap;gap:6px}.kb-amount-row input{flex:1 0 100%;height:42px;font-size:16px}.quick-amt{min-height:40px;flex:1}.betPlay{min-height:46px;height:auto;line-height:46px}.record-page,.profile-page{padding-top:52px}.chat-page,.light-chat-page{height:calc(100vh - 116px - env(safe-area-inset-bottom));padding-top:52px}.chat-input-bar{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:90;max-width:430px;margin:0 auto}.chat-messages{padding-bottom:92px}.rp-box,.send-rp-box,.mi-box{max-width:calc(100vw - 32px)}.mi-card{height:150px}.mi-box h3,.mi-info{font-size:20px}.mi-balls{gap:6px;font-size:20px}.mi-btn{height:48px;font-size:18px}.form-card{padding:16px}.form-field input,.form-field select,.btn-block{min-height:44px;font-size:16px}}
.profile-avatar img,.chat-avatar img,.room-bet-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.wallet-balance-card{background:#5dad6e;color:#fff;text-align:center;padding:28px 12px;margin:10px -18px 18px}.wallet-icon{font-size:44px;line-height:1}.wallet-amount{font-size:54px;font-weight:300;margin:16px 0}.wallet-label{font-size:22px;letter-spacing:8px;border-top:1px solid rgba(255,255,255,.25);padding-top:12px}.history-item .formula{flex:1;color:#333;font-family:var(--font-mono);font-size:.68rem}

/* ========== 26. 主题切换与现代浅色 App 风 ========== */
body[data-theme="modern"],body:not([data-theme]){--app-bg:#f6f7fb;--card-bg:#fff;--text-main:#222;--text-sub:#8a94a6;--line:#eef0f4;--brand:#3b82f6;--brand2:#06b6d4;--danger-app:#ef4444;--success-app:#22c55e}
body[data-theme="blue"]{--app-bg:#eef7ff;--card-bg:#fff;--text-main:#16324f;--text-sub:#6b8bad;--line:#dceeff;--brand:#1688ff;--brand2:#55c7ff;--danger-app:#ef4444;--success-app:#16a34a}
body[data-theme="dark"]{--app-bg:#111827;--card-bg:#1f2937;--text-main:#f8fafc;--text-sub:#94a3b8;--line:#334155;--brand:#60a5fa;--brand2:#22d3ee;--danger-app:#fb7185;--success-app:#4ade80}
body[data-theme]{background:var(--app-bg)!important;color:var(--text-main)!important}body[data-theme] #main_app,body[data-theme] .page-container,body[data-theme] .record-page,body[data-theme] .profile-page,body[data-theme] .p-home,body[data-theme] .g-content{background:var(--app-bg)!important;color:var(--text-main)!important}body[data-theme] .mint-header,body[data-theme] .van-tabbar,body[data-theme] .cu-list,body[data-theme] .form-card,body[data-theme] .record-card,body[data-theme] .wallet-pay-list,body[data-theme] .room-chat-panel,body[data-theme] .rbt-history,body[data-theme] .lottery-result{background:var(--card-bg)!important;color:var(--text-main)!important;border-color:var(--line)!important;box-shadow:0 8px 24px rgba(15,23,42,.05)}body[data-theme] .mint-header-title{color:var(--text-main)!important;-webkit-text-fill-color:var(--text-main)!important;background:none!important}body[data-theme] .profile-header{height:auto;min-height:238px;margin:0 12px 12px;border-radius:0 0 24px 24px;background:linear-gradient(135deg,var(--brand),var(--brand2))!important;box-shadow:0 12px 26px rgba(59,130,246,.22)}body[data-theme] .profile-balance{display:block!important;width:calc(100% - 36px);margin-top:14px;padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.28);cursor:pointer}body[data-theme] .profile-balance .amount{font-size:30px;color:#fff;text-shadow:none}body[data-theme] .wallet-entry-tip{font-size:13px;color:rgba(255,255,255,.86);margin-top:4px}body[data-theme] .profile-avatar{background:#fff;color:var(--brand);box-shadow:0 8px 20px rgba(0,0,0,.12);overflow:hidden}body[data-theme] .cu-list{margin:12px;border-radius:18px;overflow:hidden}body[data-theme] .cu-item{height:58px;padding:0 18px;border-color:var(--line)!important}body[data-theme] .cu-item .item-content{font-size:16px;color:var(--text-main)!important}body[data-theme] .cu-item .item-icon{font-size:22px}body[data-theme] .theme-switch-item{gap:12px}body[data-theme] .theme-select{margin-left:auto;border:0;background:var(--app-bg);color:var(--text-main);border-radius:999px;padding:7px 12px;font-size:14px}body[data-theme] .home-banner{margin:12px;border-radius:22px;background:linear-gradient(135deg,var(--brand),var(--brand2))!important;box-shadow:0 12px 24px rgba(59,130,246,.2)}body[data-theme] .hall-notice{margin:0 12px 12px;border-radius:16px;background:#fff7ed;color:#c2410c}body[data-theme="dark"] .hall-notice{background:#292524;color:#fdba74}body[data-theme] .hall-grid{margin:0 12px 12px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}body[data-theme] .hall-grid .quick-item{height:96px;background:var(--card-bg)!important;color:var(--text-main)!important}body[data-theme] .finance-tabs{margin:12px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}body[data-theme] .finance-tab.active{color:var(--brand)!important}body[data-theme] .wallet-pay-list,body[data-theme] .form-card{margin:12px;border-radius:18px;overflow:hidden}body[data-theme] .form-field input,body[data-theme] .form-field select,body[data-theme] .chat-input-bar input,body[data-theme] .room-bottom .input-wrap{background:var(--app-bg)!important;color:var(--text-main)!important;border:1px solid var(--line)!important;border-radius:14px}body[data-theme] .btn-primary,body[data-theme] .bet-btn,body[data-theme] .send-btn{background:linear-gradient(135deg,var(--brand),var(--brand2))!important;color:#fff!important;border-radius:14px;box-shadow:none}body[data-theme] .van-tabbar{border-radius:22px 22px 0 0;box-shadow:0 -8px 26px rgba(15,23,42,.08)}body[data-theme] .van-tabbar-item.active,body[data-theme] .van-tabbar-item--active{color:var(--brand)!important}body[data-theme] .room-center,#page_game{background:var(--app-bg)!important}body[data-theme] .rbt-info{margin:12px;border-radius:20px;background:linear-gradient(135deg,var(--brand2),var(--brand))!important;color:#fff!important}body[data-theme] .rbt-info-item .top,body[data-theme] .rbt-info-item .mid{color:#fff!important}body[data-theme] .lottery-result,body[data-theme] .rbt-history,body[data-theme] .room-chat-panel{margin:12px;border-radius:18px;overflow:hidden}body[data-theme] .room-bottom{border-radius:22px 22px 0 0;background:var(--card-bg)!important;box-shadow:0 -8px 24px rgba(15,23,42,.08)}body[data-theme] .chat-page,body[data-theme] .light-chat-page,body[data-theme] .chat-messages{background:var(--app-bg)!important}body[data-theme] .chat-bubble,body[data-theme] .room-bet-content{background:var(--card-bg)!important;color:var(--text-main)!important;border:1px solid var(--line)!important}body[data-theme="dark"] .chat-bubble,body[data-theme="dark"] .room-bet-content{background:#263244!important}

/* ========== 27. 登录、钱包与交互修复 ========== */
.login_bg{position:fixed;inset:0;z-index:1000;overflow-y:auto;padding:32px 20px;background:linear-gradient(160deg,#eef6ff 0%,#f8fbff 48%,#e8f2ff 100%);color:#1f2937}
.login_bg::before{background:radial-gradient(circle at 20% 15%,rgba(59,130,246,.16),transparent 35%),radial-gradient(circle at 85% 80%,rgba(6,182,212,.14),transparent 38%)}
.login-container{width:100%;max-width:390px;position:relative;z-index:1}
.login-logo{margin-bottom:28px}.logo-icon{width:78px;height:78px;margin:0 auto 14px;border-radius:24px;display:flex;align-items:center;justify-content:center;font-size:38px;background:linear-gradient(135deg,#3b82f6,#06b6d4);box-shadow:0 14px 30px rgba(59,130,246,.25)}
.logo-title{font-size:30px;line-height:1.2;color:#172033}.logo-subtitle{margin-top:7px;font-size:14px;color:#8390a4;letter-spacing:.5px}
.login-form{width:100%!important;max-width:none!important;padding:24px 20px;border:1px solid rgba(255,255,255,.85);border-radius:24px;background:rgba(255,255,255,.84);box-shadow:0 20px 55px rgba(43,78,120,.14);backdrop-filter:blur(18px)}
.form-group{margin-bottom:17px;text-align:left}.form-label{display:block;margin:0 0 7px;font-size:14px!important;font-weight:600;color:#536176!important}
.input-wrapper{height:52px;display:flex;align-items:center;border:1px solid #dfe7f1;border-radius:15px;background:#f8fbff;transition:.2s}.input-wrapper:focus-within{border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.1)}
.input-icon{width:48px;text-align:center;font-size:20px}.input-wrapper input{width:calc(100% - 48px);height:100%;border:0;outline:0;background:transparent;color:#1f2937;font-size:16px;padding-right:14px}.input-wrapper input::placeholder{color:#a4afbf}
.form-options{display:flex;justify-content:space-between;margin:2px 2px 16px}.checkbox-label{display:flex;align-items:center;gap:7px;color:#718096;font-size:14px}.checkbox-label input{width:17px;height:17px;accent-color:#3b82f6}
.login_btn{height:52px;padding:0;margin-top:10px;border-radius:15px;font-size:17px}.login_btn.btn-primary{background:linear-gradient(135deg,#3b82f6,#06b6d4);color:#fff;box-shadow:0 10px 22px rgba(59,130,246,.22)}.login_btn.btn-outline{background:#fff;color:#3b82f6;border:1px solid #cfe0f5;box-shadow:none}.form-footer{margin-top:18px}.form-footer .link{color:#3b82f6;cursor:pointer}
.wallet-page{padding-left:12px;padding-right:12px}.wallet-overview-card{margin:12px 0;background:linear-gradient(135deg,#58ae72,#51bd83);color:#fff;text-align:center;border-radius:4px;padding:28px 18px 24px;box-shadow:0 12px 26px rgba(73,170,108,.2)}.wallet-diamond{font-size:54px;line-height:1}.wallet-main-balance{font-size:54px;font-weight:300;margin:16px 0 8px}.wallet-main-label{font-size:20px;letter-spacing:6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.35)}
.wallet-date-bar,.wallet-record-btn{width:100%;min-height:58px;border:0;border-radius:10px;background:#4b9df0;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;margin:14px 0}.wallet-stats-card{background:#fff;border-radius:14px;padding:18px 12px;margin-bottom:14px;overflow:hidden}.wallet-chart-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 8px;color:#7b8490;font-size:13px}.wallet-chart-legend span{white-space:nowrap}.wallet-chart-legend .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.dot.blue{background:#4285f4}.dot.green{background:#55b96a}.dot.yellow{background:#f4c430}.dot.navy{background:#263272}.dot.purple{background:#7c3aed}.dot.cyan{background:#55c3c2}
.wallet-bars{height:230px;margin-top:18px;padding:0 4px 28px;display:flex;align-items:flex-end;justify-content:space-around;border-bottom:1px solid #e5e7eb;background:repeating-linear-gradient(to top,transparent 0,transparent 44px,#edf0f3 45px)}.bar-item{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}.bar-item em{font-style:normal;color:#7b8490;margin-bottom:6px}.bar-item b{width:46%;min-height:4px}.bar-item span{position:absolute;bottom:-27px;color:#727b88;font-size:12px;white-space:nowrap}
.mi-balls{z-index:1}.mi-scratch{z-index:3}.mi-mask{z-index:4}.mi-card .ball{display:inline-flex;align-items:center;justify-content:center;color:#fff}.mi-card .ball.purple{background:#7a2ca7}.mi-card .ball.result{background:#1839d8}
@media(max-width:430px){.login_bg{justify-content:flex-start;padding-top:max(48px,env(safe-area-inset-top))}.login-container{margin:auto}.wallet-main-balance{font-size:46px}.wallet-date-bar,.wallet-record-btn{font-size:19px}.wallet-chart-legend{font-size:12px}.wallet-bars{height:210px}.bar-item b{width:52%}}

/* ========== 28. 参考图房间布局 ========== */
#page_game{height:100dvh;min-height:100dvh;background:#e9e9e9!important;overflow:hidden;padding:0!important}
#page_game .room-center{height:calc(100dvh - 74px - env(safe-area-inset-bottom));padding:0 0 92px!important;overflow-y:auto;overflow-x:hidden;background:#e9e9e9!important;-webkit-overflow-scrolling:touch}
#page_game .room-summary{height:118px;display:grid;grid-template-columns:1fr 1fr;background:#55b8cf;color:#263238;border-bottom:1px solid #fff}
#page_game .room-user-summary,#page_game .room-period-summary{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 8px}
#page_game .room-user-summary{border-right:1px solid rgba(255,255,255,.8)}
#page_game .room-user-name{font-size:20px;line-height:1.3;margin-bottom:7px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#page_game .room-user-balance{font-size:22px;line-height:1.25}
#page_game .room-period-name{font-size:14px;line-height:1.4;white-space:nowrap}
#page_game .room-countdown{display:inline-flex;margin-top:7px;padding:3px 12px;border-radius:999px;background:#8d9ba6;color:#fff;font-size:20px;font-variant-numeric:tabular-nums;line-height:1.1}
#page_game .lottery-result{height:72px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:9px;margin:0!important;padding:8px 13px!important;border:0!important;border-bottom:1px solid #d6d6d6!important;border-radius:0!important;background:#fff!important;box-shadow:none!important}
#page_game .latest-period{font-size:17px;white-space:nowrap;color:#333}#page_game .latest-period strong{color:#3b82f6;font-weight:500}
#page_game .lottery-result .balls{display:flex;margin:0!important;gap:6px;min-width:0;justify-content:center}
#page_game .lottery-result .ball{width:34px;height:34px;flex:0 0 34px;font-size:17px;border:0;box-shadow:none;animation:none}
#page_game .lottery-result .ball.purple{background:#8326aa!important}#page_game .lottery-result .ball.result{background:#071be9!important}
#page_game .lottery-result .equals{font-size:20px;margin:0;color:#333}
#page_game .lottery-result .combo{font-size:19px;color:#333;white-space:nowrap;margin:0}
#page_game .history-toggle{width:30px;height:42px;border:0;background:transparent;color:#999;font-size:32px;line-height:1;transform:translateY(-4px)}
#page_game .rbt-history{display:block;margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
#page_game .rbt-history .latest{display:none}
#page_game .history-box.open{max-height:260px;border-bottom:1px solid #ddd;overflow-y:auto}
#page_game .history-item{padding:8px 12px;margin:0;border-radius:0;font-size:13px}
#page_game .room-promo{height:46px;margin:8px 5px 0;padding:7px 12px;overflow:hidden;white-space:nowrap;border-radius:9px;background:#9edce7;color:#fff;font-size:20px;line-height:32px}
#page_game .room-chat-panel{margin:0!important;border:0!important;border-radius:0!important;background:#e9e9e9!important;box-shadow:none!important;overflow:visible}
#page_game .room-chat-messages{min-height:calc(100dvh - 318px);max-height:none;padding:18px 78px 28px 10px;background:#e9e9e9!important;overflow:visible}
#page_game .room-bet-msg{gap:10px;margin-bottom:20px;align-items:flex-start}
#page_game .room-bet-avatar{width:46px;height:46px;flex:0 0 46px;border-radius:0;font-size:16px;background:#111;overflow:hidden}
#page_game .room-bet-name{font-size:15px;color:#f0362d;margin-bottom:5px}#page_game .room-bet-name::after{content:'  ';color:#9aa8b2}
#page_game .room-bet-content{position:relative;display:block;width:fit-content;max-width:100%;padding:11px 13px;border:0!important;border-radius:4px!important;background:#fff!important;color:#333!important;font-size:17px;line-height:1.55;box-shadow:none!important;white-space:pre-line}
#page_game .room-bet-content::before{content:'';position:absolute;left:-10px;top:12px;border-width:8px 10px 8px 0;border-style:solid;border-color:transparent #fff transparent transparent}
#page_game .room-chat-system{font-size:15px;padding:28px 0;color:#8b96a0}
#page_game .float-actions{position:fixed;z-index:170;right:max(10px,calc((100vw - 430px)/2 + 10px));top:clamp(285px,38vh,390px);bottom:auto;display:flex;flex-direction:column;gap:10px}
#page_game .float-actions button{width:58px;height:58px;border:0;border-radius:50%;padding:0;color:#fff;font-size:18px;line-height:1;box-shadow:0 8px 14px rgba(0,0,0,.28)}
#page_game .room-bottom{position:fixed;left:50%;right:auto;bottom:0;transform:translateX(-50%);z-index:180;width:min(100%,430px);height:74px;padding:9px 10px calc(9px + env(safe-area-inset-bottom));display:flex;gap:10px;background:#fff!important;border-top:1px solid #d6d6d6;border-radius:0!important;box-shadow:none!important}
#page_game .room-order-btn,#page_game .bet-btn{height:54px;min-width:76px;padding:0 14px;border:0;border-radius:6px;background:#4b9df0!important;color:#fff;font-size:18px}
#page_game .room-bottom .input-wrap{height:54px;flex:1;padding:0 12px;border:0!important;border-radius:6px!important;background:#f7f7f7!important}
#page_game .room-bottom .input-wrap input{width:100%;height:54px;background:transparent!important;color:#333!important;font-size:17px;white-space:nowrap;text-overflow:ellipsis}
#page_game .room-bottom .input-wrap input::placeholder{color:#aaa}
#page_game .sealed-tip{position:fixed;left:50%;bottom:82px;transform:translateX(-50%);z-index:190;width:min(calc(100% - 24px),406px);padding:9px;text-align:center;border-radius:8px;background:rgba(239,68,68,.92);color:#fff}

/* ========== 29. 钱包日期、红包与投注交互修复 ========== */
.wallet-date-control{display:grid;grid-template-columns:52px 1fr 52px;gap:8px;align-items:center;margin:14px 0 0}
.wallet-date-control button,.wallet-date-control input{height:52px;border:0;border-radius:10px;background:#fff;color:#344054;font-size:18px;text-align:center;box-shadow:0 4px 14px rgba(15,23,42,.06)}
.wallet-date-control button{background:#4b9df0;color:#fff;font-size:30px;line-height:1;cursor:pointer}
.wallet-date-control button:active{transform:scale(.96)}
.wallet-date-control input{width:100%;padding:0 10px;-webkit-appearance:none;appearance:none}
.wallet-date-bar{margin-top:8px!important;min-height:44px!important;font-size:16px!important;background:#eef6ff!important;color:#3979bd!important}
.kb-header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border-bottom:1px solid var(--border)}
.kb-close{position:absolute;right:4px;width:38px;height:38px;border:0;background:transparent;color:var(--text-secondary);font-size:22px}
.kb-amount-row{display:flex;gap:6px;padding:10px 0}.kb-amount-row input{min-width:0;flex:1;height:42px;padding:0 10px;border:1px solid #4b5870;background:#202a3d;color:#fff;font-size:16px}.quick-amt{min-width:44px;border:1px solid #4b5870;background:#202a3d;color:#e6edf3;border-radius:4px}
.kb-selected{position:sticky;top:40px;z-index:2;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;background:var(--bg-card);color:var(--text)}.btn-confirm-bet{height:40px;padding:0 16px;border:0;border-radius:6px;background:#4b9df0;color:#fff;font-size:16px}.btn-confirm-bet.loading{opacity:.65}
.light-chat-page{position:relative}.chat-mode-tabs{display:flex;flex:0 0 50px;background:#fff;border-bottom:1px solid #e5e7eb}.chat-mode{flex:1;border:0;background:#fff;color:#7b8490;font-size:17px}.chat-mode.active{color:#e33;border-bottom:2px solid #e33}.chat-room-tip{padding:8px 12px;background:#fff8e5;color:#a66b13;text-align:center;font-size:13px}
.chat-red-packet{min-width:210px;max-width:280px;padding:14px 16px 12px;border-radius:8px;background:linear-gradient(135deg,#ff9f43,#ef7f2d)!important;color:#fff!important;box-shadow:0 5px 14px rgba(239,127,45,.25)}
.chat-red-packet .rp-greeting{font-size:17px}.chat-red-packet .rp-label{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.28);font-size:12px;color:rgba(255,255,255,.86)}
.rp-modal{padding:18px}.rp-modal .rp-box{width:min(330px,calc(100vw - 36px));min-height:430px;padding:46px 24px 24px;border-radius:18px;background:linear-gradient(180deg,#e65345 0%,#cf3028 100%)!important;color:#fff!important;border:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.rp-box .rp-sender{font-size:16px!important;color:rgba(255,255,255,.85)!important}.rp-box .rp-greeting{font-size:22px!important;margin-top:12px!important}.rp-box #rp_content{width:100%;margin-top:26px}.rp-box .rp-grab-btn{width:86px;height:86px;padding:0!important;border-radius:50%!important;background:#f7d486!important;color:#b82b24!important;font-size:34px!important;box-shadow:0 8px 22px rgba(77,0,0,.28)!important}.rp-box .rp-my-amount{font-size:44px;color:#ffe19a}.rp-box .rp-unit{font-size:17px}.rp-box .rp-my-tip{font-size:14px;color:rgba(255,255,255,.8)}.rp-box .rp-close{margin-top:auto!important;font-size:15px!important;color:rgba(255,255,255,.8)!important;padding:12px 24px}
@media(max-width:430px){.wallet-date-control{grid-template-columns:46px 1fr 46px}.wallet-date-control button,.wallet-date-control input{height:48px;font-size:16px}.wallet-date-control button{font-size:27px}.chat-mode-tabs{display:flex}.chat-page,.light-chat-page{height:calc(100vh - 116px - env(safe-area-inset-bottom))}.bet-popup{padding-bottom:env(safe-area-inset-bottom)}}

#page_game~.van-tabbar,#page_game.active~* .van-tabbar{display:none}
body.game-active .mint-header,body.game-active .van-tabbar{display:none!important}
@media(max-width:370px){#page_game .room-summary{height:104px}#page_game .room-user-name{font-size:18px}#page_game .room-user-balance{font-size:19px}#page_game .room-period-name{font-size:12px}#page_game .room-countdown{font-size:18px}#page_game .lottery-result{grid-template-columns:auto 1fr auto;padding:7px 8px!important;gap:5px}#page_game .lottery-result .ball{width:29px;height:29px;flex-basis:29px;font-size:15px}#page_game .lottery-result .equals{font-size:17px}#page_game .combo{font-size:16px!important}#page_game .history-toggle{display:none}#page_game .latest-period{font-size:15px}#page_game .room-promo{font-size:17px}#page_game .float-actions button{width:50px;height:50px;font-size:16px}#page_game .room-chat-messages{padding-right:66px}#page_game .room-order-btn,#page_game .bet-btn{min-width:66px;padding:0 10px;font-size:16px}#page_game .room-bottom .input-wrap input{font-size:15px}}