/* 投注确认弹窗样式 */
.confirm-bet-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirm-bet-modal.show {
    display: flex !important;
}

.confirm-bet-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.confirm-bet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    background: #3066ff;
}

.confirm-bet-title {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
}

.confirm-bet-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.confirm-bet-close:hover {
    opacity: 0.8;
}

.confirm-bet-table-container {
    flex: 1;
    overflow-y: auto;
    max-height: calc(80vh - 140px);
}

.confirm-bet-table {
    width: 100%;
    border-collapse: collapse;
}

.confirm-bet-table thead {
    background: #f5f5f5;
    position: sticky;
    top: 0;
    z-index: 10;
}

.confirm-bet-table th {
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #ddd;
}

.confirm-bet-table td {
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
}

.confirm-bet-table tbody tr:last-child td {
    border-bottom: none;
}

.confirm-bet-table tbody tr:hover {
    background: #f9f9f9;
}

.confirm-bet-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #eee;
    background: #f9f9f9;
}

.confirm-bet-btn {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.confirm-bet-btn.cancel-btn {
    background: #ff4444;
    color: #fff;
}

.confirm-bet-btn.cancel-btn:hover {
    background: #ff3333;
}

.confirm-bet-btn.confirm-btn {
    background: #3066ff;
    color: #fff;
}

.confirm-bet-btn.confirm-btn:hover {
    background: #4d7aff;
}

/* 房间页面样式 */

.rooms-main {
    min-height: calc(100vh - 70px);
    background-color: #f5f5f5;
    padding: 20px 0;
}

.rooms-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 游戏信息栏独立，与导航对齐 */
.game-info-section {
    margin-bottom: 10px;
}

.game-info-bar {
    width: 1080px;
    max-width: 1080px;
    margin: 0 auto;
}

/* 主要内容区域（号码选择和快捷区域） */
.rooms-content {
    display: flex;
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
    align-items: stretch;
}

/* 左侧：号码选择区 */
.rooms-left {
    flex: 0 0 750px;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    min-height: 700px;
    height: 700px;
    position: relative;
    overflow: hidden;
}

/* 游戏内容区域（可滚动） */
.rooms-left > .betting-tabs {
    flex-shrink: 0;
}

.rooms-left > .sub-category-btn {
    flex-shrink: 0; /* 不收缩，只占据内容所需高度 */
    flex-grow: 0.01; /* 不扩展 */
}

.rooms-left > .number-selection-area,
.rooms-left > .zodiac-selection-area,
.rooms-left > .dxds-selection-area,
.rooms-left > .wave-selection-area,
.rooms-left > .racing-kuaijie-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 游戏信息栏 */
.game-info-bar {
    background: #fff;
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: -20px;
}

.game-icon {
    font-size: 24px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    margin-left: 20px;
}

.game-icon-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.game-name-select {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    position: relative;
}

.game-name {
    font-size: 14px;
    font-weight: 600;
    color: #3066ff;
    display: block !important;
}

.dropdown-arrow-small {
    font-size: 12px;
    color: #999;
    transition: transform 0.3s;
}

.game-name-select.active .dropdown-arrow-small {
    transform: rotate(180deg);
}

.game-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 5px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 1000;
    overflow: hidden;
}

.game-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 14px;
    color: #333;
}

.game-dropdown-item:hover {
    background-color: #f5f5f5;
}

.game-dropdown-item.active {
    background-color: #e6f4ff;
    color: #3066ff;
    font-weight: 600;
}

.status-badge {
    background: #52c41a;
    color: #fff;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}

.period-info {
    display: flex;
    flex-direction: column;
    gap: -10px;
    margin-left: -10px; /* 向右移动一点，避免被长游戏名称挤压 */
}

.period-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.countdown-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.countdown-section {
    display: flex;
    align-items: center;
    gap: 20px;
}

.countdown-box {
    display: flex;
    align-items: center;
    gap: 5px;
    align-self: center;
    margin-left: 10px; /* 向右移动一点，避免被长游戏名称挤压 */
}

.countdown-item {
    background: #3066ff;
    color: #fff;
    padding: 1px 3px;
    border-radius: 6px;
    font-size: 20px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    min-width: 35px;
    text-align: center;
}

.countdown-separator {
    color: #333;
    font-size: 20px;
    font-weight: 700;
    padding: 0 3px;
}

.result-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 90px;
}

.result-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.result-actions {
    display: flex;
    gap: 8px;
}

.result-numbers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-left: 70px;
}

/* 六合彩类型（新澳门、三分、香港、老澳门）：7个号码不换行 */
#previousResultNumbers:not([data-lottery]),
#previousResultNumbers[data-lottery=""] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 4px !important; /* 减小间距，确保不换行 */
    white-space: nowrap; /* 防止换行 */
}

#previousResultNumbers:not([data-lottery]) .result-item-wrapper,
#previousResultNumbers[data-lottery=""] .result-item-wrapper {
    flex: 0 0 auto !important; /* 防止收缩 */
    min-width: 0 !important;
    margin: 0 !important;
}

#previousResultNumbers:not([data-lottery]) .result-number-item,
#previousResultNumbers[data-lottery=""] .result-number-item {
    width: 28px !important; /* 稍微减小尺寸 */
    height: 28px !important;
    font-size: 16px !important;
}

#previousResultNumbers:not([data-lottery]) .result-plus-sign,
#previousResultNumbers[data-lottery=""] .result-plus-sign {
    font-size: 16px !important; /* 减小加号字体 */
    margin: 0 2px !important; /* 减小加号间距 */
}

/* 加拿大28运算符样式 */
.jnd28-operator {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 4px;
    line-height: 1;
}

/* 加拿大28大小单双文字样式 */
.jnd28-dxds-text {
    font-size: 18px;
    font-weight: 600;
    color: #ff535d;
    margin-left: 8px;
    line-height: 1;
}

.result-item-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.result-number-item {
    width: 32px;
    height: 32px;
    border-radius: 50%; /* 圆形 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    background: transparent;
}

/* 十二生肖开奖结果：缩小尺寸，单行显示 */
#previousResultNumbers[data-lottery="am12"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow-x: auto;
    margin: 0 !important;
    padding: 0 !important;
}

#previousResultNumbers[data-lottery="am12"] .result-item-wrapper {
    flex: 0 0 auto;
    min-width: 0;
    margin-right: -2px !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

#previousResultNumbers[data-lottery="am12"] .result-item-wrapper:first-child {
    margin-left: 0 !important;
}

#previousResultNumbers[data-lottery="am12"] .result-item-wrapper:last-child {
    margin-right: 0 !important;
}

#previousResultNumbers[data-lottery="am12"] .result-number-item.zodiac {
    width: 24px !important;
    height: 24px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
}

#previousResultNumbers[data-lottery="am12"] .result-zodiac-item {
    font-size: 12px !important;
}

/* 澳门赛车号码保持方形圆角 */
.result-number-item.racing {
    border-radius: 8px !important;
}

.result-number-item.red {
    background: #ff0000 !important;
}

.result-number-item.blue {
    background: #0000ff !important;
}

.result-number-item.green {
    background: #008000 !important;
}

/* 澳门赛车号码颜色（通过JS内联样式设置，这里只保留方形圆角样式） */

/* 澳门赛车快捷投注区域 */
.racing-kuaijie-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    padding-bottom: 100px; /* 避免被betting-controls覆盖 */
    box-sizing: border-box;
}

/* 排名按钮 - 澳门赛车（冠军到第十名） */
.racing-position-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.racing-position-btn {
    padding: 12px 8px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

/* 十二生肖排名按钮（冠军到第十二名）- 使用2x6网格布局 */
#zodiacPositionButtons,
.racing-position-buttons[data-zodiac="true"] {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 !important;
    transform: none !important;
    margin-bottom: 0 !important;
}

#zodiacPositionButtons .racing-position-btn,
.racing-position-buttons[data-zodiac="true"] .racing-position-btn {
    padding: 12px 8px !important;
    background: #f5f5f5 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 500;
    color: #333 !important;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis;
    line-height: 1.2 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

#zodiacPositionButtons .racing-position-btn.active,
.racing-position-buttons[data-zodiac="true"] .racing-position-btn.active {
    background: #3066ff !important;
    border-color: #3066ff !important;
    color: #fff !important;
}

.racing-position-btn:last-child {
    margin-right: 0;
}

.racing-position-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.racing-position-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.racing-position-btn:hover {
    background: #e8e8e8;
    border-color: #d9d9d9;
}

.racing-position-btn.active {
    background: #3066ff;
    border-color: #3066ff;
    color: #fff;
}

/* 大小单双按钮 */
.racing-dxds-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.racing-dxds-btn {
    padding: 12px 8px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.racing-dxds-btn:hover {
    background: #e8e8e8;
    border-color: #d9d9d9;
}

.racing-dxds-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.racing-dxds-btn.active .racing-dxds-name,
.racing-dxds-btn.active .racing-dxds-odds {
    color: #fff;
}

.racing-dxds-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.racing-dxds-odds {
    font-size: 14px;
    color: #666;
}

/* 数字选择网格 */
.racing-number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    flex-shrink: 0;
}

/* 十二生肖数字选择网格 - 2行6列（当存在zodiacPositionButtons时） */
.racing-kuaijie-area:has(#zodiacPositionButtons) .racing-number-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(2, auto) !important;
}

.racing-number-btn {
    padding: 12px 8px;
    border: 1px solid #e8e8e8;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 70px;
}

.racing-number-btn:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.racing-number-btn.active {
    border-color: #3066ff;
    background: #3066ff;
    box-shadow: 0 0 0 3px rgba(48, 102, 255, 0.2);
}

/* 选中时数字框保持原色（通过内联样式设置，不会被覆盖） */

.racing-number-value {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}

.racing-number-odds {
    font-size: 14px;
    color: #666;
}

/* 选中时赔率变白色 */
.racing-number-btn.active .racing-number-odds {
    color: #fff;
}

/* 澳门赛车双面投注区域 */
.racing-shuangmian-area {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.shuangmian-list {
    display: flex;
    flex-direction: column;
    gap: 6px; /* 从12px减小到6px，缩小每个位置之间的间距 */
}

.shuangmian-row {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 5px 0; /* 从10px减小到5px，缩小行内上下间距 */
}

.shuangmian-position-label {
    width: 80px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: #3066ff;
    border-radius: 6px;
    padding: 8px 12px;
    text-align: center;
    flex-shrink: 0;
}

.shuangmian-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    flex: 1;
}

.shuangmian-btn {
    padding: 12px 8px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.shuangmian-btn:hover {
    background: #e8e8e8;
    border-color: #d9d9d9;
}

.shuangmian-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.shuangmian-btn.active .shuangmian-name,
.shuangmian-btn.active .shuangmian-odds {
    color: #fff;
}

.shuangmian-name {
    font-size: 18px;
    font-weight: 600;
    color: #3066ff;
}

.shuangmian-odds {
    font-size: 14px;
    color: #3066ff;
}

/* 车道投注区域 */
.racing-chedao-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 10px 0;
}

.chedao-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chedao-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.chedao-position-label {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #3066ff;
    padding: 6px 16px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    margin-bottom: 5px;
}

.chedao-numbers-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.chedao-number-cell {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    padding: 8px 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 70px;
}

.chedao-number-cell:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(48, 102, 255, 0.2);
}

.chedao-number-cell.selected {
    background: #3066ff;
    border-color: #3066ff;
}

.chedao-number {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.chedao-number-cell.selected .chedao-number {
    background-color: #fff !important;
    color: #3066ff !important;
}

.chedao-odds {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    line-height: 1;
}

.chedao-number-cell.selected .chedao-odds {
    color: #fff;
}

/* 冠亚和值投注区域 */
.racing-guanya-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 10px 0;
}

.guanya-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.guanya-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.guanya-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #3066ff;
    padding: 6px 16px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
}

.guanya-numbers-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.guanya-number-cell {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    padding: 12px 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 70px;
}

.guanya-number-cell:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(48, 102, 255, 0.2);
}

.guanya-number-cell.selected {
    background: #3066ff;
    border-color: #3066ff;
}

.guanya-number {
    font-size: 20px;
    font-weight: 700;
    color: #3066ff;
    line-height: 1;
    margin-bottom: 6px;
}

.guanya-number-cell.selected .guanya-number {
    color: #fff;
}

.guanya-odds {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    line-height: 1;
}

.guanya-number-cell.selected .guanya-odds {
    color: #fff;
}

.guanya-dxds-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.guanya-dxds-cell {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    padding: 12px 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 70px;
}

.guanya-dxds-cell:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(48, 102, 255, 0.2);
}

.guanya-dxds-cell.selected {
    background: #3066ff;
    border-color: #3066ff;
}

.guanya-dxds-name {
    font-size: 18px;
    font-weight: 600;
    color: #3066ff;
    line-height: 1;
    margin-bottom: 6px;
}

.guanya-dxds-cell.selected .guanya-dxds-name {
    color: #fff;
}

.guanya-dxds-odds {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    line-height: 1;
}

.guanya-dxds-cell.selected .guanya-dxds-odds {
    color: #fff;
}

/* 龙虎投注区域 */
.racing-longhu-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 10px 0;
}

.longhu-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.longhu-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}

.longhu-position-label {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: #3066ff;
    padding: 6px 16px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    min-width: 70px;
    text-align: center;
    flex-shrink: 0;
}

.longhu-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    flex: 1;
}

.longhu-option-cell {
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    padding: 12px 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-height: 70px;
}

.longhu-option-cell:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(48, 102, 255, 0.2);
}

.longhu-option-cell.selected {
    background: #3066ff;
    border-color: #3066ff;
}

.longhu-option-name {
    font-size: 20px;
    font-weight: 700;
    color: #3066ff;
    line-height: 1;
    margin-bottom: 6px;
}

.longhu-option-cell.selected .longhu-option-name {
    color: #fff;
}

.longhu-option-odds {
    font-size: 14px;
    color: #3066ff;
    font-weight: 600;
    line-height: 1;
}

.longhu-option-cell.selected .longhu-option-odds {
    color: #fff;
}

.result-zodiac-item {
    font-size: 16px; /* 从14px增加到16px */
    font-weight: 600;
    color: #333;
    text-align: center;
    width: 40px;
    line-height: 1.6; /* 增加行高，防止文字底部被裁切 */
    padding-top: 1px; /* 稍微增加顶部空间 */
}

.result-plus-sign {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    height: 32px;
    width: 16px;
}

.action-buttons-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-left: auto;
}

.action-red-btn {
    padding: 6px 12px;
    background: #ff4d4f;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.action-red-btn:hover {
    background: #ff7875;
}

.action-red-btn:active {
    background: #cf1322;
}

.action-btn {
    padding: 6px 12px;
    border: 1px solid #3066ff;
    background: #3066ff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    color: #fff;
    transition: all 0.3s;
}

.action-btn:hover {
    background: #4d7aff;
    border-color: #4d7aff;
}

/* 投注选项标签 */
.betting-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px; /* 从8px减小到4px，缩小标签间距 */
    background: #fff;
    padding: 6px 15px;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-bottom: -12px;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    padding-left: 20px;
    padding-right: 20px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    overflow: visible;
}

.tab-item {
    padding: 6px 10px; /* 从12px减小到10px，缩小标签内边距 */
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #666;
    transition: all 0.3s;
    white-space: nowrap;
}

.tab-item:hover {
    background: #f0f0f0;
}

.tab-item.active {
    background: #3066ff;
    color: #fff;
}

/* 号码选择网格 */
.number-selection-area {
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 0;
}

.number-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.number-item {
    width: 90px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #d9d9d9;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.number-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.number-item.selected {
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 选中时填充红色背景 */
.number-item.selected.red {
    background-color: #ff535d;
    border-color: #ff535d;
}

/* 选中时填充蓝色背景 */
.number-item.selected.blue {
    background-color: #3066ff;
    border-color: #3066ff;
}

/* 选中时填充绿色背景 */
.number-item.selected.green {
    background-color: #0dce66;
    border-color: #0dce66;
}

/* 选中时文字变白色 */
.number-item.selected .number-value,
.number-item.selected .number-odds {
    color: #fff !important;
}

.number-item.red {
    color: #ff535d;
}

.number-item.red .number-odds {
    color: #ff535d;
}

.number-item.selected.red .number-odds {
    color: #fff !important;
}

.number-item.blue {
    color: #3066ff;
}

.number-item.blue .number-odds {
    color: #3066ff;
}

.number-item.selected.blue .number-odds {
    color: #fff !important;
}

.number-item.green {
    color: #0dce66;
}

.number-item.green .number-odds {
    color: #0dce66;
}

.number-item.selected.green .number-odds {
    color: #fff !important;
}

.number-value {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: -5px;
}

.number-odds {
    font-size: 15px;
    color: #999;
}

/* 子分类按钮 */
.sub-category-btn {
    padding: 5px 0 !important; /* 从10px减小到5px，缩小上下间距 */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px !important; /* 从20px增加到30px，向右移动 */
    padding-right: 20px;
    overflow: visible !important; /* 确保内容不被裁切 */
}

.sub-category-item {
    padding: 6px 16px;
    background: #3066ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    margin-left: 30px; /* 向右移动按钮 */
}

.sub-category-item:hover {
    background: #4d7aff;
}

.sub-category-item.active {
    background: #3066ff;
}

/* 生肖选择区域 */
.zodiac-selection-area {
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 10px 0; /* 从15px减小到10px，减小上下内边距 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    padding-left: 30px; /* 从20px增加到30px，向右移动 */
    padding-right: 20px;
    min-height: 0;
}

.zodiac-selection-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 4px !important; /* 列间距减小到4px */
    row-gap: 4px !important; /* 行间距减小到4px */
}

/* 平特页面：2行6列布局 */
.zodiac-selection-grid[data-layout="pingte"] {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.zodiac-selection-item {
    width: 90px;
    height: 60px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #d9d9d9;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.zodiac-selection-item:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(48, 102, 255, 0.2);
}

.zodiac-selection-item.selected {
    background-color: #3066ff;
    border-color: #3066ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.zodiac-selection-item.selected .zodiac-selection-name,
.zodiac-selection-item.selected .zodiac-selection-odds {
    color: #fff;
}

.zodiac-selection-name {
    font-size: 20px;
    font-weight: 600;
    color: #3066ff;
    margin-bottom: 4px;
}

.zodiac-selection-odds {
    font-size: 16px;
    color: #3066ff;
    margin-top: -10px;
}

/* 大小单双选择区域 */
.dxds-selection-area {
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 0;
}

.dxds-selection-grid {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
}

.dxds-selection-item {
    flex: 1;
    min-width: 120px;
    height: 80px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #d9d9d9;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dxds-selection-item:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(48, 102, 255, 0.2);
}

.dxds-selection-item.selected {
    background-color: #3066ff;
    border-color: #3066ff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dxds-selection-item.selected .dxds-selection-name,
.dxds-selection-item.selected .dxds-selection-odds {
    color: #fff;
}

.dxds-selection-name {
    font-size: 24px;
    font-weight: 600;
    color: #3066ff;
    margin-bottom: 4px;
}

.dxds-selection-odds {
    font-size: 18px;
    color: #3066ff;
    margin-top: -2px;
}

/* 波色选择区域 */
.wave-selection-area {
    background: #fff;
    border-radius: 0 0 8px 8px;
    padding: 15px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: 0;
}

.wave-selection-grid {
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
}

.wave-selection-item {
    flex: 1;
    min-width: 120px;
    height: 80px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #d9d9d9;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.wave-selection-item:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(48, 102, 255, 0.2);
}

.wave-selection-item.selected {
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.wave-selection-item.selected[data-wave="blue"] {
    background-color: #3066ff;
    border-color: #3066ff;
}

.wave-selection-item.selected[data-wave="green"] {
    background-color: #0dce66;
    border-color: #0dce66;
}

.wave-selection-item.selected[data-wave="red"] {
    background-color: #ff535d;
    border-color: #ff535d;
}

.wave-selection-name {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 4px;
}

.wave-selection-odds {
    font-size: 18px;
    margin-top: -2px;
}

/* 波色选项颜色（未选中状态） */
.wave-selection-item[data-wave="blue"] .wave-selection-name,
.wave-selection-item[data-wave="blue"] .wave-selection-odds {
    color: #3066ff;
}

.wave-selection-item[data-wave="green"] .wave-selection-name,
.wave-selection-item[data-wave="green"] .wave-selection-odds {
    color: #0dce66;
}

.wave-selection-item[data-wave="red"] .wave-selection-name,
.wave-selection-item[data-wave="red"] .wave-selection-odds {
    color: #ff535d;
}

/* 选中状态：文字变白色 */
.wave-selection-item.selected .wave-selection-name,
.wave-selection-item.selected .wave-selection-odds {
    color: #fff !important;
}

/* 投注输入控制 */
.betting-controls {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-top: auto;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    justify-content: flex-start;
}

.betting-controls::-webkit-scrollbar {
    height: 4px;
}

.betting-controls::-webkit-scrollbar-track {
    background: transparent;
}

.betting-controls::-webkit-scrollbar-thumb {
    background: #d9d9d9;
    border-radius: 2px;
}

.amount-buttons {
    display: flex;
    gap: 5px;
    margin-bottom: 0;
    flex-shrink: 0;
}

.amount-btn {
    flex: 0 0 auto;
    min-width: 35px;
    padding: 8px 10px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
}

.amount-btn:hover {
    border-color: #3066ff;
    color: #3066ff;
}

.amount-btn.active {
    background: #3066ff;
    color: #fff;
    border-color: #3066ff;
}

.amount-input-group {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    flex-shrink: 0;
}

.input-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 0;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-btn:first-child {
    border-radius: 6px 0 0 6px;
}

.input-btn:last-child {
    border-radius: 0 6px 6px 0;
}

.input-btn:hover {
    border-color: #3066ff;
    color: #3066ff;
}

.amount-input {
    width: 60px;
    height: 32px;
    border: 1px solid #d9d9d9;
    border-left: none;
    border-right: none;
    border-radius: 0;
    padding: 0 8px;
    font-size: 13px;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.amount-input::-webkit-inner-spin-button,
.amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.betting-summary {
    text-align: right;
    margin-bottom: 0;
    font-size: 14px;
    color: #ff4d4f;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: auto;
    margin-right: 4px;
    padding-right: 0;
    order: 0;
}

.betting-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    position: sticky;
    right: 0;
    background: #f9f9f9;
    padding-left: 8px;
    z-index: 10;
    margin-left: 0;
    order: 1;
}

.bet-btn {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bet-btn.primary {
    background: #3066ff;
    color: #fff;
}

.bet-btn.primary:hover {
    background: #4d7aff;
}

.bet-btn.secondary {
    background: #ff4d4f;
    color: #fff;
}

.bet-btn.secondary:hover {
    background: #ff7875;
}

/* 右侧：快捷区域外层大框 */
.rooms-right-wrapper {
    width: 310px;
    flex-shrink: 0;
    display: flex;
    align-items: stretch;
}

/* 右侧：快捷区域 */
.rooms-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    align-self: stretch;
    min-height: 700px;
    height: 700px;
}

.quick-panel-box {
    background: transparent;
    border-radius: 8px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.quick-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.quick-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 400px;
}

.empty-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.empty-text {
    font-size: 14px;
    color: #999;
    text-align: center;
}

.panel-title {
    background: #3066ff;
    color: #fff;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.quick-options {
    padding: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    flex-shrink: 0;
}

.quick-btn {
    padding: 10px 16px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    text-align: center;
    flex: 0 0 auto;
    min-width: 60px;
}

.quick-btn:hover {
    border-color: #3066ff;
    color: #3066ff;
}

.quick-btn.active {
    background: #3066ff;
    color: #fff;
    border-color: #3066ff;
}

.zodiac-options {
    padding: 0 15px 15px 15px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex-shrink: 0;
}

.zodiac-btn {
    padding: 10px 8px;
    border: 1px solid #d9d9d9;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    transition: all 0.3s;
    text-align: center;
    box-sizing: border-box;
}

.zodiac-btn:hover {
    border-color: #3066ff;
    color: #3066ff;
}

.zodiac-btn.active {
    background: #3066ff;
    color: #fff;
    border-color: #3066ff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .rooms-container {
        flex-direction: column;
    }
    
    .rooms-right {
        width: 100%;
    }
    
    .quick-panel-box {
        position: relative;
    }
}

/* 十二生肖区域基础样式 */
.zodiac-shuangmian-area,
.zodiac-chedao-area,
.zodiac-guanya-area,
.zodiac-zhengfu-area,
.zodiac-jiaqin-area,
.zodiac-shengxiao-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px 0;
    padding-bottom: 100px; /* 避免被betting-controls覆盖 */
    box-sizing: border-box;
}

/* 强制隐藏十二生肖区域（当快捷标签页激活时） */
.racing-kuaijie-area[style*="block"] ~ .zodiac-shengxiao-area,
.racing-kuaijie-area[style*="block"] ~ .zodiac-zhengfu-area,
.racing-kuaijie-area[style*="block"] ~ .zodiac-jiaqin-area,
.racing-kuaijie-area[style*="block"] ~ .zodiac-guanya-area,
.racing-kuaijie-area[style*="block"] ~ .zodiac-chedao-area,
.racing-kuaijie-area[style*="block"] ~ .zodiac-shuangmian-area {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    flex: 0 0 0 !important;
}

/* 十二生肖双面、车道、正负、家禽野兽、生肖样式 */
.zodiac-shuangmian-area .shuangmian-row,
.zodiac-shuangmian-area .zodiac-shuangmian-row,
.zodiac-chedao-area .chedao-row,
.zodiac-zhengfu-area .zhengfu-row,
.zodiac-jiaqin-area .jiaqin-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
}

.zodiac-shuangmian-area .shuangmian-position-label,
.zodiac-shuangmian-area .zodiac-shuangmian-position-label,
.zodiac-chedao-area .chedao-position-label,
.zodiac-zhengfu-area .zhengfu-position-label,
.zodiac-jiaqin-area .jiaqin-position-label {
    background: #3066FF;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
}

.zodiac-shuangmian-area .shuangmian-options-grid,
.zodiac-shuangmian-area .zodiac-shuangmian-options-grid,
.zodiac-zhengfu-area .zhengfu-options-grid,
.zodiac-jiaqin-area .jiaqin-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    flex: 1;
    width: 100%;
}

.zodiac-shuangmian-area .shuangmian-btn,
.zodiac-shuangmian-area .zodiac-shuangmian-btn,
.zodiac-zhengfu-area .zhengfu-option-cell,
.zodiac-jiaqin-area .jiaqin-option-cell {
    padding: 15px 10px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.zodiac-shuangmian-area .shuangmian-btn.active,
.zodiac-shuangmian-area .zodiac-shuangmian-btn.active,
.zodiac-zhengfu-area .zhengfu-option-cell.selected,
.zodiac-jiaqin-area .jiaqin-option-cell.selected {
    background: #3066ff;
    border-color: #3066ff;
}

.zodiac-shuangmian-area .shuangmian-name,
.zodiac-shuangmian-area .zodiac-shuangmian-name,
.zodiac-zhengfu-area .zhengfu-option-name,
.zodiac-jiaqin-area .jiaqin-option-name {
    color: #3066FF;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.zodiac-shuangmian-area .shuangmian-odds,
.zodiac-shuangmian-area .zodiac-shuangmian-odds,
.zodiac-zhengfu-area .zhengfu-option-odds,
.zodiac-jiaqin-area .jiaqin-option-odds {
    color: #3066FF;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.zodiac-shuangmian-area .shuangmian-btn.active .shuangmian-name,
.zodiac-shuangmian-area .shuangmian-btn.active .shuangmian-odds,
.zodiac-shuangmian-area .zodiac-shuangmian-btn.active .zodiac-shuangmian-name,
.zodiac-shuangmian-area .zodiac-shuangmian-btn.active .zodiac-shuangmian-odds,
.zodiac-zhengfu-area .zhengfu-option-cell.selected .zhengfu-option-name,
.zodiac-zhengfu-area .zhengfu-option-cell.selected .zhengfu-option-odds,
.zodiac-jiaqin-area .jiaqin-option-cell.selected .jiaqin-option-name,
.zodiac-jiaqin-area .jiaqin-option-cell.selected .jiaqin-option-odds {
    color: #fff;
}

.zodiac-chedao-area .chedao-numbers-grid,
.zodiac-shengxiao-area .shengxiao-numbers-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
}

.zodiac-chedao-area .chedao-number-cell,
.zodiac-shengxiao-area .shengxiao-number-cell {
    padding: 8px 4px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 70px;
}

.zodiac-chedao-area .chedao-number-cell.selected,
.zodiac-shengxiao-area .shengxiao-number-cell.selected {
    background: #3066ff;
    border-color: #3066ff;
}

.zodiac-chedao-area .chedao-number,
.zodiac-shengxiao-area .shengxiao-number {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.zodiac-chedao-area .chedao-odds,
.zodiac-shengxiao-area .shengxiao-odds {
    font-size: 14px;
    color: #666;
    font-weight: 600;
    line-height: 1;
}

.zodiac-chedao-area .chedao-number-cell.selected .chedao-odds,
.zodiac-shengxiao-area .shengxiao-number-cell.selected .shengxiao-odds {
    color: #fff;
}

/* 十二生肖列表容器 */
.zodiac-zhengfu-area .zhengfu-list,
.zodiac-jiaqin-area .jiaqin-list,
.zodiac-shengxiao-area .shengxiao-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-bottom: 20px;
}

.shengxiao-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff;
    border-radius: 8px;
}

.shengxiao-section-title {
    background: #3066FF;
    color: white;
    padding: 6px 15px;
    border-radius: 12px;
    display: inline-block;
    margin-bottom: 15px;
    font-size: 14px;
    font-weight: 500;
}

/* 澳门时时彩快捷投注区域 */
.amss-kuaijie-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0;
    padding-bottom: 100px;
    box-sizing: border-box;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* 球选择按钮 */
.amss-ball-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.amss-ball-tab {
    flex: 1;
    min-width: 0;
    padding: 12px 8px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

.amss-ball-tab:hover {
    background: #e8e8e8;
    border-color: #d9d9d9;
}

.amss-ball-tab.active {
    background: #3066ff;
    border-color: #3066ff;
    color: #fff;
}

/* 大小单双按钮 */
.amss-dxds-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.amss-dxds-btn {
    flex: 1;
    padding: 15px 10px;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.amss-dxds-btn:hover {
    background: #e8e8e8;
    border-color: #d9d9d9;
}

.amss-dxds-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.amss-dxds-btn.active .amss-dxds-name,
.amss-dxds-btn.active .amss-dxds-odds {
    color: #fff;
}

.amss-dxds-name {
    font-size: 20px;
    font-weight: 600;
    color: #3066ff;
    line-height: 1.2;
}

.amss-dxds-odds {
    font-size: 16px;
    font-weight: 500;
    color: #3066ff;
    line-height: 1;
}

.amss-dxds-btn.active .amss-dxds-name,
.amss-dxds-btn.active .amss-dxds-odds {
    color: #fff;
}

/* 数字网格 */
.amss-number-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.amss-number-btn {
    padding: 15px 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.amss-number-btn:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.amss-number-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.amss-number-btn.active .amss-number-value,
.amss-number-btn.active .amss-number-odds {
    color: #fff;
}

.amss-number-value {
    font-size: 24px;
    font-weight: 700;
    color: #3066ff;
    line-height: 1.2;
}

.amss-number-odds {
    font-size: 16px;
    font-weight: 500;
    color: #3066ff;
    line-height: 1;
}

.amss-number-btn.active .amss-number-value,
.amss-number-btn.active .amss-number-odds {
    color: #fff;
}

/* 澳门时时彩双面投注区域 */
.amss-shuangmian-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px 0;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.amss-shuangmian-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.amss-shuangmian-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
}

.amss-shuangmian-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.amss-shuangmian-ball-label {
    background: #7d96d8;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
}

.amss-shuangmian-options-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    width: 100%;
}

.amss-shuangmian-btn {
    padding: 15px 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.amss-shuangmian-btn:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.amss-shuangmian-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.amss-shuangmian-btn.active .amss-shuangmian-name,
.amss-shuangmian-btn.active .amss-shuangmian-odds {
    color: #fff;
}

.amss-shuangmian-name {
    font-size: 20px;
    font-weight: 600;
    color: #3066ff;
    line-height: 1.2;
}

.amss-shuangmian-odds {
    font-size: 16px;
    font-weight: 500;
    color: #3066ff;
    line-height: 1;
}

.amss-shuangmian-btn.active .amss-shuangmian-name,
.amss-shuangmian-btn.active .amss-shuangmian-odds {
    color: #fff;
}

/* 澳门时时彩选号投注区域 */
.amss-xuhao-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px 0;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.amss-xuhao-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.amss-xuhao-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.amss-xuhao-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.amss-xuhao-ball-label {
    background: #7d96d8;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
}

.amss-xuhao-number-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
}

.amss-xuhao-number-btn {
    padding: 15px 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.amss-xuhao-number-btn:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.amss-xuhao-number-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.amss-xuhao-number-btn.active .amss-xuhao-number-value,
.amss-xuhao-number-btn.active .amss-xuhao-number-odds {
    color: #fff;
}

.amss-xuhao-number-value {
    font-size: 24px;
    font-weight: 700;
    color: #3066ff;
    line-height: 1.2;
}

.amss-xuhao-number-odds {
    font-size: 16px;
    font-weight: 500;
    color: #3066ff;
    line-height: 1;
}

.amss-xuhao-number-btn.active .amss-xuhao-number-value,
.amss-xuhao-number-btn.active .amss-xuhao-number-odds {
    color: #fff;
}

/* 澳门时时彩顺子投注区域 */
.amss-shunzi-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px 0;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.amss-shunzi-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.amss-shunzi-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.amss-shunzi-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.amss-shunzi-section-label {
    background: #7d96d8;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
}

.amss-shunzi-options-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    width: 100%;
}

.amss-shunzi-btn {
    padding: 15px 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.amss-shunzi-btn:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.amss-shunzi-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.amss-shunzi-btn.active .amss-shunzi-name,
.amss-shunzi-btn.active .amss-shunzi-odds {
    color: #fff;
}

.amss-shunzi-name {
    font-size: 18px;
    font-weight: 600;
    color: #3066ff;
    line-height: 1.2;
}

.amss-shunzi-odds {
    font-size: 16px;
    font-weight: 500;
    color: #3066ff;
    line-height: 1;
}

.amss-shunzi-btn.active .amss-shunzi-name,
.amss-shunzi-btn.active .amss-shunzi-odds {
    color: #fff;
}

/* 澳门时时彩总和投注区域 */
.amss-zonghe-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px 0;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.amss-zonghe-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.amss-zonghe-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 20px;
}

.amss-zonghe-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.amss-zonghe-section-label {
    background: #7d96d8;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
}

.amss-zonghe-options-grid {
    display: grid;
    gap: 12px;
    width: 100%;
}

/* 龙虎部分：3个选项 */
.amss-zonghe-section:first-child .amss-zonghe-options-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* 总和大小单双部分：4个选项 */
.amss-zonghe-section:last-child .amss-zonghe-options-grid {
    grid-template-columns: repeat(4, 1fr);
}

.amss-zonghe-btn {
    padding: 15px 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.amss-zonghe-btn:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.amss-zonghe-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.amss-zonghe-btn.active .amss-zonghe-name,
.amss-zonghe-btn.active .amss-zonghe-odds {
    color: #fff;
}

.amss-zonghe-name {
    font-size: 18px;
    font-weight: 600;
    color: #3066ff;
    line-height: 1.2;
}

.amss-zonghe-odds {
    font-size: 16px;
    font-weight: 500;
    color: #3066ff;
    line-height: 1;
}

.amss-zonghe-btn.active .amss-zonghe-name,
.amss-zonghe-btn.active .amss-zonghe-odds {
    color: #fff;
}

/* 加拿大28双面投注区域 */
.jnd28-shuangmian-area {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 20px 0;
    padding-bottom: 100px;
    box-sizing: border-box;
}

.jnd28-shuangmian-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.jnd28-shuangmian-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 15px;
}

.jnd28-shuangmian-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.jnd28-shuangmian-section-label {
    background: #7d96d8;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    display: inline-block;
    width: fit-content;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    align-self: flex-start;
}

.jnd28-shuangmian-options-grid {
    display: grid;
    gap: 12px;
    width: 100%;
}

/* 大小单双：4个选项 */
.jnd28-shuangmian-section:first-child .jnd28-shuangmian-options-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* 大小单双组合：4个选项 */
.jnd28-shuangmian-section:nth-child(2) .jnd28-shuangmian-options-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* 顺子：3个选项 */
.jnd28-shuangmian-section:nth-child(3) .jnd28-shuangmian-options-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* 极大极小：2个选项 */
.jnd28-shuangmian-section:last-child .jnd28-shuangmian-options-grid {
    grid-template-columns: repeat(2, 1fr);
}

.jnd28-shuangmian-btn {
    padding: 15px 10px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.jnd28-shuangmian-btn:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.jnd28-shuangmian-btn.active {
    background: #3066ff;
    border-color: #3066ff;
}

.jnd28-shuangmian-btn.active .jnd28-shuangmian-name,
.jnd28-shuangmian-btn.active .jnd28-shuangmian-odds {
    color: #fff;
}

.jnd28-shuangmian-name {
    font-size: 18px;
    font-weight: 600;
    color: #3066ff;
    line-height: 1.2;
}

.jnd28-shuangmian-odds {
    font-size: 16px;
    font-weight: 500;
    color: #3066ff;
    line-height: 1;
}

.jnd28-shuangmian-btn.active .jnd28-shuangmian-name,
.jnd28-shuangmian-btn.active .jnd28-shuangmian-odds {
    color: #fff;
}

/* 加拿大28数字投注区域 */
.jnd28-shuzi-area {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    padding-bottom: 100px;
    box-sizing: border-box;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.jnd28-shuzi-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.jnd28-shuzi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6列 */
    gap: 12px;
}

.jnd28-shuzi-btn {
    padding: 15px 8px;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.jnd28-shuzi-btn:hover {
    border-color: #3066ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.jnd28-shuzi-btn.active {
    background: #e6f0ff; /* 浅蓝色背景 */
    border-color: #3066ff;
}

.jnd28-shuzi-number {
    font-size: 20px;
    font-weight: 700;
    color: #3066ff;
    line-height: 1.2;
}

.jnd28-shuzi-odds {
    font-size: 14px;
    font-weight: 500;
    color: #999;
    line-height: 1;
}

.jnd28-shuzi-btn.active .jnd28-shuzi-number {
    color: #3066ff; /* 选中时数字保持蓝色 */
}

.jnd28-shuzi-btn.active .jnd28-shuzi-odds {
    color: #666; /* 选中时赔率变深灰色 */
}

/* 连码子标签样式 */
.lianma-sub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    padding: 5px 0;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.lianma-sub-tab {
    padding: 6px 16px;
    background: transparent;
    color: #3066ff;
    border: 1px solid #3066ff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.lianma-sub-tab:hover {
    background: rgba(48, 102, 255, 0.1);
}

.lianma-sub-tab.active {
    background: #3066ff;
    color: #fff;
}

/* 自选不中子标签样式 */
.zixuan-sub-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
    padding: 5px 0;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

.zixuan-sub-tab {
    padding: 6px 16px;
    background: transparent;
    color: #3066ff;
    border: 1px solid #3066ff;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.zixuan-sub-tab:hover {
    background: rgba(48, 102, 255, 0.1);
}

.zixuan-sub-tab.active {
    background: #3066ff;
    color: #fff;
}

/* 连码选择区域 */
.lianma-selection-area {
    display: block;
    flex: 1;
    overflow-y: auto;
}

.lianma-number-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 0;
}

.lianma-number-item {
    width: 90px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #d9d9d9;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.lianma-number-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.lianma-number-item.selected {
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 选中时填充红色背景 */
.lianma-number-item.selected.red {
    background-color: #ff535d;
    border-color: #ff535d;
}

/* 选中时填充蓝色背景 */
.lianma-number-item.selected.blue {
    background-color: #3066ff;
    border-color: #3066ff;
}

/* 选中时填充绿色背景 */
.lianma-number-item.selected.green {
    background-color: #0dce66;
    border-color: #0dce66;
}

.lianma-number-item .number-value {
    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;
}

.lianma-number-item.selected .number-value,
.lianma-number-item.selected .number-odds {
    color: #fff !important;
}

.lianma-number-item.red {
    color: #ff535d;
}

.lianma-number-item.red .number-odds {
    color: #ff535d;
}

.lianma-number-item.selected.red .number-odds {
    color: #fff !important;
}

.lianma-number-item.blue {
    color: #3066ff;
}

.lianma-number-item.blue .number-odds {
    color: #3066ff;
}

.lianma-number-item.selected.blue .number-odds {
    color: #fff !important;
}

.lianma-number-item.green {
    color: #0dce66;
}

.lianma-number-item.green .number-odds {
    color: #0dce66;
}

.lianma-number-item.selected.green .number-odds {
    color: #fff !important;
}

.lianma-number-item .number-odds {
    font-size: 15px;
    margin-top: 1px;
    line-height: 1;
}

/* 自选不中选择区域 */
.zixuan-selection-area {
    display: block;
    flex: 1;
    overflow-y: auto;
}

.zixuan-number-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    margin-top: 0;
}

.zixuan-number-item {
    width: 90px;
    height: 48px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #d9d9d9;
    background: #fff;
    position: relative;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.zixuan-number-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.zixuan-number-item.selected {
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 选中时填充红色背景 */
.zixuan-number-item.selected.red {
    background-color: #ff535d;
    border-color: #ff535d;
}

/* 选中时填充蓝色背景 */
.zixuan-number-item.selected.blue {
    background-color: #3066ff;
    border-color: #3066ff;
}

/* 选中时填充绿色背景 */
.zixuan-number-item.selected.green {
    background-color: #0dce66;
    border-color: #0dce66;
}

.zixuan-number-item .number-value {
    font-size: 17px;
    font-weight: bold;
    line-height: 1.2;
}

.zixuan-number-item.selected .number-value,
.zixuan-number-item.selected .number-odds {
    color: #fff !important;
}

.zixuan-number-item.red {
    color: #ff535d;
}

.zixuan-number-item.red .number-odds {
    color: #ff535d;
}

.zixuan-number-item.selected.red .number-odds {
    color: #fff !important;
}

.zixuan-number-item.blue {
    color: #3066ff;
}

.zixuan-number-item.blue .number-odds {
    color: #3066ff;
}

.zixuan-number-item.selected.blue .number-odds {
    color: #fff !important;
}

.zixuan-number-item.green {
    color: #0dce66;
}

.zixuan-number-item.green .number-odds {
    color: #0dce66;
}

.zixuan-number-item.selected.green .number-odds {
    color: #fff !important;
}

.zixuan-number-item .number-odds {
    font-size: 15px;
    margin-top: 1px;
    line-height: 1;
}

/* 玩法说明弹窗样式 */
.rules-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rules-modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.rules-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    background: #f8f9fa;
}

.rules-modal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

.rules-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s;
}

.rules-modal-close:hover {
    color: #333;
}

.rules-modal-body {
    overflow-y: auto;
    padding: 0;
}

.rules-modal-body p {
    margin: 8px 0;
    line-height: 1.6;
    color: #333;
    font-size: 14px;
}

.rules-modal-body a {
    color: #007bff;
    text-decoration: none;
}

.rules-modal-body a:hover {
    text-decoration: underline;
}

/* 视频弹窗样式（方案2：内嵌iframe） */
.video-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    z-index: 10001 !important;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.video-modal[style*="display: flex"] {
    display: flex !important;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
}

.video-modal-content {
    position: relative;
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    height: auto;
    min-height: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    border: 2px solid #ddd;
    z-index: 1;
}

.video-modal-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    background: #fff;
    position: relative;
}

.video-modal-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    text-align: center;
    flex: 1;
}

.video-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.video-modal-close:hover {
    color: #333;
}

.video-modal-body {
    padding: 10px;
    background: #fff;
    flex: 1;
    min-height: 550px;
    height: auto;
    position: relative;
    width: calc(100% - 20px);
    margin: 0 10px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* 十二生肖视频需要更高 */
.video-modal-body[data-lottery="am12"] {
    min-height: 550px;
}

.video-modal-body-inner {
    width: 100%;
    max-width: 100%;
    height: 0;
    padding-bottom: 65.33%; /* 456/698 ≈ 0.6533 (698×456的视频比例 - 澳门赛车) */
    background: #000;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

/* 十二生肖视频容器 - 使用931:608比例 */
.video-modal-body[data-lottery="am12"] .video-modal-body-inner {
    padding-bottom: 65.31%; /* 608/931 ≈ 0.6531 (931×608的视频比例) */
}

.video-modal-body video,
.video-modal-body iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
}

.rules-modal-body strong {
    font-weight: 600;
}

.rules-modal-body em {
    font-style: italic;
}

.rules-modal-body u {
    text-decoration: underline;
}