/* 地区选择页面样式 - 静态版本 */

/* 顶部导航栏样式 */
.top-header {
    background: #3399FF;
    color: white;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.top-header .container-fluid {
    padding: 0 15px;
}

.top-header .container-fluid:first-of-type {
    height: 60px;
}

.top-header .container-fluid:first-of-type .row {
    height: 100%;
    margin: 0;
}

.top-header .container-fluid:last-of-type {
    background: white;
}

.top-header .container-fluid:last-of-type .row {
    margin-left: -6px;
    margin-right: -6px;
}

.header-logo {
    max-height: 50px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* 导航按钮网格 */
.nav-button-item {
    background: #3399FF;
    height: 32px;
    line-height: 32px;
    color: white;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 3px;
}

.nav-button-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

/* 导航按钮激活状态样式（红色背景，白色文字，白色下划线） */
.nav-button-item.active {
    background: #dc3545 !important;
    color: white !important;
    text-decoration: underline;
    text-decoration-color: white;
    text-underline-offset: 2px;
}

/* 手机端导航按钮优化 - 缩小字体和间距 */
@media (max-width: 576px) {
    .nav-button-item {
        height: 28px;
        line-height: 28px;
        font-size: 11px;
        margin: 2px;
        padding: 0 2px;
    }
}

@media (max-width: 480px) {
    .nav-button-item {
        height: 24px;
        line-height: 24px;
        font-size: 10px;
        margin: 1px;
        padding: 0 1px;
    }
    
    /* 减小行间距 */
    .top-header .container-fluid:last-of-type .row {
        margin-left: -2px;
        margin-right: -2px;
    }
}

/* 顶部横幅样式 */
.banner-section {
    width: 100%;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.banner-image {
    width: 100%;
    height: auto;
    display: block;
    max-height: 200px;
    object-fit: cover;
    object-position: center;
}

/* 全局样式重置 */
* {
    box-sizing: border-box;
}

/* 响应式字体基础设置 */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 移动端字体优化 */
@media screen and (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

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

/* 主容器 */
.region-selector {
    min-height: 100vh;
    padding: 0 0 24px 0;
    background: #ffffff;
}

.container-fluid {
    max-width: 800px;
    margin: 0 auto;
}

/* 标题和开奖号码区域 */
.lottery-section {
    background: #f8f9fa;
    padding: 16px;
    border-radius: 8px;
    margin-top: 16px;
}

/* 标题样式 */
.title-section {
    margin-bottom: 12px;
    padding-bottom: 0;
}

.main-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
    letter-spacing: 0.3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.title-left {
    flex: 1;
    text-align: left;
}

.title-right {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* 响应式设计 - 顶部导航栏 */
@media (max-width: 768px) {
    .header-content {
        padding: 10px 12px;
    }
    
    .header-title {
        font-size: 16px;
    }
    
    .banner-image {
        max-height: 150px;
    }
}

@media (max-width: 480px) {
    .header-content {
        padding: 8px 10px;
    }
    
    .header-title {
        font-size: 15px;
    }
    
    .banner-section {
        margin-bottom: 3px;
    }
    
    .banner-image {
        max-height: 130px;
    }
}

/* 响应式设计 */
@media (max-width: 576px) {
    .region-selector {
        padding: 0 0 20px 0;
    }
    
    .container-fluid {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    
    .main-title {
        font-size: 15px;
    }
    
    .title-right {
        font-size: 13px;
    }
    
    .period-time {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    
    .main-title {
        font-size: 14px;
    }
    
    .title-right {
        font-size: 12px;
    }
    
    .period-time {
        font-size: 12px;
    }
}

/* 开奖号码区域样式 */
.numbers-section {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.numbers-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0 4px 0 0;
}

/* 移除滚动条隐藏样式，因为已设置overflow: visible */

/* 号码球样式 */
.number-ball {
    min-width: 50px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}

/* 号码球数字 */
.ball-number {
    font-size: 20px;
    line-height: 1;
    margin-bottom: 2px;
    color: white;
    font-weight: 700;
}

/* 号码球生肖/五行 */
.ball-label {
    font-size: 9px;
    line-height: 1;
    padding-top: 2px;
    margin-top: 2px;
    width: 75%;
    text-align: center;
    color: white;
    white-space: nowrap;
    border-radius: 0 0 25px 25px;
}

/* 不同颜色的球 */
.number-ball.red {
    background-color: #dc3545;
    color: white;
}

.number-ball.blue {
    background-color: #0d6efd;
    color: white;
}

.number-ball.green {
    background-color: #28a745;
    color: white;
}

/* 加号样式 */
.plus-sign {
    font-size: 24px;
    color: #333;
    font-weight: 600;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 3px;
}

/* 特别号码球（最后一个） */
.special-ball {
    margin-left: 2px;
}

/* 加载文字 */
.loading-text {
    color: #6c757d;
    font-size: 16px;
    text-align: center;
    width: 100%;
    padding: 20px;
}

/* 响应式设计 - 号码球 */
@media (max-width: 576px) {
    .number-ball {
        min-width: 46px;
        width: 46px;
        height: 46px;
    }
    
    .ball-number {
        font-size: 18px;
    }
    
    .ball-label {
        font-size: 9px;
        padding-top: 1px;
    }
    
    .plus-sign {
        font-size: 20px;
        min-width: 16px;
        margin: 0 2px;
    }
    
    .lottery-section {
        padding: 12px;
    }
    
    .numbers-container {
        gap: 3px;
        padding: 8px 2px 4px 0;
    }
}

@media (max-width: 480px) {
    .number-ball {
        min-width: 44px;
        width: 44px;
        height: 44px;
    }
    
    .ball-number {
        font-size: 17px;
    }
    
    .ball-label {
        font-size: 8px;
        padding-top: 1px;
    }
    
    .plus-sign {
        font-size: 18px;
        min-width: 14px;
        margin: 0 1px;
    }
    
    .numbers-container {
        gap: 2px;
        padding: 0 1px 0 0;
    }
    
    .lottery-section {
        padding: 10px;
    }
}

/* 历史开奖区域样式 */
.history-section {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 历史开奖按钮区域 */
.history-button-section {
    background: #f8f9fa;
    padding: 20px 16px;
    text-align: center;
}

/* 历史开奖查看按钮样式 */
.history-view-btn {
    background: linear-gradient(135deg, #ff6b6b, #ff5252);
    border: none;
    color: white;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
    letter-spacing: 0.5px;
    width: 100%;
    max-width: 300px;
}

.history-view-btn:hover {
    background: linear-gradient(135deg, #ff5252, #ff4444);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
}

.history-view-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}

/* 历史开奖内容区域 */
.history-content {
    background: #f8f9fa;
    padding: 16px;
    /* 移除固定高度限制，让内容自适应 */
    /* max-height: 400px; */
    /* overflow-y: auto; */
}

/* 历史开奖项目 */
.history-item {
    background: #ffffff;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.history-item:last-child {
    margin-bottom: 0;
}

/* 历史开奖期数标题 */
.history-period {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.period-number {
    color: #333;
}

.period-time {
    font-size: 12px;
    color: #666;
    font-weight: 500;
}

/* 历史开奖号码容器 */
.history-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 8px 4px 4px 0;
}

/* 移除历史开奖滚动条隐藏样式，因为已设置overflow: visible */

/* 历史开奖号码球（与当前开奖一致） */
.history-ball {
    min-width: 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
    overflow: hidden;
}

/* 历史开奖号码球颜色样式 */
.history-ball.red {
    background-color: #dc3545;
    color: white;
}

.history-ball.blue {
    background-color: #0d6efd;
    color: white;
}

.history-ball.green {
    background-color: #28a745;
    color: white;
}

/* 历史号码球数字 */
.history-ball-number {
    font-size: 18px;
    line-height: 1;
    margin-bottom: 2px;
    color: white;
    font-weight: 700;
}

/* 历史号码球标签 */
.history-ball-label {
    font-size: 8px;
    line-height: 1;
    padding-top: 2px;
    margin-top: 2px;
    width: 75%;
    text-align: center;
    color: white;
    white-space: nowrap;
    border-radius: 0 0 24px 24px;
}

/* 历史开奖加号 */
.history-plus {
    font-size: 20px;
    color: #333;
    font-weight: 600;
    min-width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0 2px;
}

/* 响应式设计 - 历史开奖 */
@media (max-width: 576px) {
    .history-section {
        margin-top: 16px;
    }
    
    .history-button-section {
        padding: 16px 12px;
    }
    
    .history-view-btn {
        padding: 10px 24px;
        font-size: 15px;
        max-width: 100%;
    }
    
    .history-content {
        padding: 12px;
        /* 移除固定高度限制，让内容自适应 */
        /* max-height: 350px; */
    }
    
    .history-item {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .history-ball {
        min-width: 44px;
        width: 44px;
        height: 44px;
    }
    
    .history-ball-number {
        font-size: 16px;
    }
    
    .history-ball-label {
        font-size: 7px;
        padding-top: 1px;
    }
    
    .history-plus {
        font-size: 18px;
        min-width: 14px;
        margin: 0 2px;
    }
    
    .history-numbers {
        gap: 3px;
    }
}

@media (max-width: 480px) {
    .history-button-section {
        padding: 14px 10px;
    }
    
    .history-view-btn {
        padding: 10px 20px;
        font-size: 14px;
    }
    
    .history-content {
        padding: 10px;
        /* 移除固定高度限制，让内容自适应 */
        /* max-height: 300px; */
    }
    
    .history-item {
        padding: 8px;
        margin-bottom: 8px;
    }
    
    .history-ball {
        min-width: 40px;
        width: 40px;
        height: 40px;
    }
    
    .history-ball-number {
        font-size: 14px;
    }
    
    .history-ball-label {
        font-size: 6px;
        padding-top: 1px;
    }
    
    .history-plus {
        font-size: 16px;
        min-width: 12px;
        margin: 0 1px;
    }
    
    .history-numbers {
        gap: 2px;
    }
}

/* 一行倒计时样式 */
.countdown-container-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    color: white;
    margin: 10px 0;
    font-size: 18px;
    font-weight: 600;
    gap: 8px;
    min-height: 50px; /* 与开奖号码区域高度一致 */
}

.countdown-text {
    font-size: 16px;
    font-weight: 500;
}

.countdown-time-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
}

.time-value {
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
}

.time-separator {
    font-size: 18px;
    color: #ffffff;
    font-weight: 600;
    margin: 0 2px;
}

/* 响应式设计 - 倒计时 */
@media (max-width: 576px) {
    /* 一行倒计时响应式 */
    .countdown-container-inline {
        padding: 12px 16px;
        font-size: 16px;
        min-height: 46px;
    }
    
    .countdown-text {
        font-size: 14px;
    }
    
    .time-value {
        font-size: 18px;
    }
    
    .time-separator {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    /* 一行倒计时小屏幕响应式 */
    .countdown-container-inline {
        padding: 10px 12px;
        font-size: 14px;
        min-height: 44px;
        gap: 6px;
    }
    
    .countdown-text {
        font-size: 13px;
    }
    
    .time-value {
        font-size: 16px;
    }
    
    .time-separator {
        font-size: 14px;
    }
}

/* 号码球滚动动画样式 */
.ball-container {
    display: inline-block;
}

/* 滚动状态的号码球 */
.number-ball.rolling {
    animation: rolling-pulse 0.3s ease-in-out infinite alternate;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

/* 停止状态的号码球 */
.number-ball.stopped {
    animation: stop-bounce 0.6s ease-out;
}

/* 高亮闪烁效果 */
.number-ball.highlight {
    animation: highlight-flash 0.5s ease-in-out;
}

/* 滚动脉冲动画 */
@keyframes rolling-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: scale(1.05);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
    }
}

/* 停止弹跳动画 */
@keyframes stop-bounce {
    0% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

/* 高亮闪烁动画 */
@keyframes highlight-flash {
    0%, 100% {
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8), 0 3px 8px rgba(0, 0, 0, 0.2);
        transform: scale(1.08);
    }
}

/* 滚动中的文字样式 */
.number-ball.rolling .ball-number {
    font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.number-ball.rolling .ball-label {
    font-size: 8px;
    opacity: 0.9;
    animation: label-fade 1s ease-in-out infinite alternate;
}

/* 标签淡入淡出动画 */
@keyframes label-fade {
    0% {
        opacity: 0.6;
    }
    100% {
        opacity: 1;
    }
}

/* 响应式动画调整 */
@media (max-width: 576px) {
    .number-ball.rolling {
        animation: rolling-pulse-small 0.3s ease-in-out infinite alternate;
    }
    
    @keyframes rolling-pulse-small {
        0% {
            transform: scale(1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        100% {
            transform: scale(1.03);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }
    }
}

@media (max-width: 480px) {
    .number-ball.rolling {
        animation: rolling-pulse-tiny 0.3s ease-in-out infinite alternate;
    }
    
    @keyframes rolling-pulse-tiny {
        0% {
            transform: scale(1);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
        100% {
            transform: scale(1.02);
            box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4);
        }
    }
    
    .number-ball.rolling .ball-label {
        font-size: 7px;
    }
}

/* 广告图片区域样式 */
.gallery-section {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 广告图片单列垂直布局 */
.gallery-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #ffffff;
}

/* 广告图片项 */
.gallery-item {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8f9fa;
    flex-shrink: 0;
}

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

/* 广告图片 */
.gallery-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.05);
}

/* 图片加载占位符 */
.gallery-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 14px;
}

/* 图片加载失败提示 */
.gallery-error {
    width: 100%;
    height: 100%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

/* 响应式设计 - 广告图片 */
@media (max-width: 576px) {
    .gallery-grid {
        gap: 10px;
        padding: 12px;
    }
    
    .gallery-item {
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        gap: 8px;
        padding: 10px;
    }
}

/* 精选预测列表样式 */
.box.pad {
    background: #3399FF;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    padding: 16px;
}

.link-box {
    color: #333;
    background: #fff;
    padding: 5px;
    box-sizing: border-box;
    line-height: 24px;
    border-bottom: 1px dashed #ccc;
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.link-box:last-child {
    border-bottom: none;
}

.link-box span {
    padding: 2px 5px;
    color: #fff;
    background: #3399FF;
    border-radius: 2px;
    font-size: 12px;
}

.link-box a {
    text-decoration: none;
    font-size: 13px;
}

.link-box a:hover {
    text-decoration: underline;
}

/* 动态期数样式 */
.dynamic-period {
    background: transparent !important;
    color: #000 !important;
}

/* period-number 内的 dynamic-period 保持绿色 */
.period-number .dynamic-period {
    color: inherit !important;
}

/* 响应式设计 - 精选预测列表 */
@media (max-width: 576px) {
    .box.pad {
        padding: 12px;
    }
    
    .link-box {
        padding: 4px;
        line-height: 22px;
        font-size: 12px;
    }
    
    .link-box span {
        padding: 2px 4px;
        font-size: 11px;
    }
    
    .link-box a {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .box.pad {
        padding: 2px;
        margin-top: 3px;
    }
    
    .link-box {
        padding: 3px;
        line-height: 24px;
        font-size: 12px;
    }
    
    .link-box span {
        padding: 2px 4px;
        font-size: 11px;
    }
    
    .link-box a {
        font-size: 12px;
    }
    
    .link-box b {
        font-size: 12px;
    }
}

/* 全局移动端字体优化 - 确保最小可读性 */
@media (max-width: 480px) {
    /* 确保所有文本至少12px，保证可读性 */
    body {
        font-size: 14px;
    }
    
    /* 历史开奖按钮优化 */
    .history-view-btn {
        font-size: 14px;
        padding: 10px 24px;
    }
    
    /* 加载文字优化 */
    .loading-text {
        font-size: 14px;
        padding: 15px;
    }
}

/* 站长担保内幕爆料样式 */
.insider-section {
    background: #ffffff;
    margin: 15px 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.insider-section .container-fluid {
    padding: 16px;
}

.insider-title {
    color: #000000;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 12px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #add8e6;
    text-align: center;
}

.insider-list {
    margin: 0;
    padding: 0;
}

.insider-item {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px dashed #e0e0e0;
    font-size: 15px;
    line-height: 1.6;
}

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

.insider-item .col-12 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.period-number {
    color: green;
    margin-right: 6px;
    flex-shrink: 0;
    font-weight: bold;
}

.item-title {
    color: green;
    margin-right: 4px;
    flex-shrink: 0;
    font-weight: bold;
}

.bracket-content {
    color: #ff0000;
    font-weight: bold;
    flex-shrink: 1;
}

/* 移动端响应式 */
@media (max-width: 576px) {
    .insider-section {
        margin: 12px 2px;
    }
    
    .insider-section .container-fluid {
        padding: 12px;
    }
    
    .insider-title {
        font-size: 15px;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }
    
    .insider-item {
        padding: 8px 0;
        font-size: 14px;
    }
    
    .period-number,
    .item-title,
    .bracket-content {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .insider-section {
        margin: 0px;
    }
    
    .insider-section .container-fluid {
        padding: 10px;
    }
    
    .insider-title {
        font-size: 14px;
        margin-bottom: 8px;
        padding-bottom: 8px;
    }
    
    .insider-item {
        padding: 6px 0;
        font-size: 13px;
    }
    
    .period-number,
    .item-title,
    .bracket-content {
        font-size: 13px;
    }
}

/* 藏寶閣预测表格样式 */
#n12636,
#pred02Container,
#pred03Container,
#pred04Container,
#pred05Container,
#pred06Container {
    margin: 4px 2px;
    background: #ffffff;
    border: 1px solid #3399FF;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#n12636 .list-title,
#pred02Container .list-title,
#pred03Container .list-title,
#pred04Container .list-title,
#pred05Container .list-title,
#pred06Container .list-title {
    text-align: center;
    font-weight: bold;
    font-size: 15px;
}

#n12636 .template_main_content,
#pred02Container .template_main_content,
#pred03Container .template_main_content,
#pred04Container .template_main_content,
#pred05Container .template_main_content,
#pred06Container .template_main_content {
    padding: 2px;
}

#n12636 table,
#n12636 .prediction-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 1px;
    margin: 0 auto 10px;
}

/* pred02Container 中的 table 样式 */
#pred02Container table,
#pred02Container .prediction-table {
    width: 100% !important;
    border-spacing: 1;
    margin: 0 auto 1px;
    border-collapse: separate;
}

/* pred03Container 中的 table 样式 */
#pred03Container table,
#pred03Container .prediction-table {
    width: 100% !important;
    border-spacing: 0;
    margin: 0 auto 1px;
}

#n12636 table:last-child {
    margin-bottom: 0;
}

#n12636 td {
    font-size: 14px;
}

/* 表格行和单元格样式 */
#n12636 .prediction-table-row {
    height: 40px;
}

#n12636 .prediction-table-header-row {
    height: 40px;
}

#n12636 .prediction-table-header-cell {
    background-color: hsl(263deg 100% 4%) !important;
    padding: 2px;
    border-radius: 2px;
    word-break: break-all;
    text-align: center;
    vertical-align: middle;
}

#n12636 .prediction-table-header-text {
    font-size: 15px;
    color: rgb(255, 255, 255);
    font-weight: bold;
}

#n12636 .prediction-table-cell {
    word-break: break-all;
    background-color: hsl(78deg 98% 86%) !important;
    padding: 2px;
    border-radius: 2px;
    text-align: center;
    vertical-align: middle;
}

#n12636 .prediction-period-cell {
    width: 25%;
}

#n12636 .prediction-zodiac-cell {
    width: 50%;
}

#n12636 .prediction-result-cell {
    width: 25%;
}

#n12636 .prediction-period-text {
    color: #008000;
    white-space: normal;
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: bold;
}

#n12636 .prediction-zodiac-text {
    color: rgb(255, 0, 0);
    font-weight: bold;
    text-align: center;
}

#n12636 .prediction-result-text {
    font-size: 24px;
    color: rgb(255, 0, 0);
    font-weight: bold;
}

#n12636 .prediction-result-highlight {
    color: red;
}

/* pred02Container 表格样式 - 浅粉色背景，深绿色文字 */
#pred02Container .prediction-table-cell {
    background-color: hsl(306deg 98% 87%)!important;
    color: #006400 !important; /* 深绿色文字 */
    padding: 2px;
    border-radius: 2px;
    text-align: center;
    vertical-align: middle;
}

#pred02Container .prediction-period-text {
    color: #006400 !important; /* 深绿色 */
    white-space: normal;
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: bold;
}

#pred02Container .prediction-zodiac-text {
    color: #006400 !important; /* 深绿色 */
    font-weight: bold;
    text-align: center;
}

#pred02Container .prediction-result-text {
    color: #006400 !important; /* 深绿色 */
    font-weight: bold;
}

/* 波类型标签样式 */
.wave-label {
    font-weight: bold;
    margin-right: 4px;
    color: #006400 !important; /* 深绿色 */
}

.wave-label.wave-highlight {
    background: #dc3545 !important;
    color: #ffffff !important;
    padding: 2px 6px;
    border-radius: 2px;
}

/* pred03Container 表格样式 */
#pred03Container .prediction-table-cell {
    background-color: #ffffff !important;
    padding: 2px;
    border-radius: 2px;
    text-align: left;
    vertical-align: middle;
    font-weight: bold;
}

#pred03Container .prediction-period-text {
    color: #000000 !important; /* 黑色 */
    white-space: normal;
    text-align: center;
    margin: 0;
    padding: 0;
    font-weight: bold;
}

/* 四頭标签和值 - 红色 */
#pred03Container .tou-label,
#pred03Container .tou-value {
    color: #ff0000 !important; /* 红色 */
}

/* 四行标签和值 - 绿色 */
#pred03Container .xing-label,
#pred03Container .xing-value {
    color: #008000 !important; /* 绿色 */
}

#pred03Container .prediction-result-text {
    color: #000000 !important; /* 默认黑色 */
    font-weight: bold;
}

/* 移动端响应式 - 藏寶閣表格 */
@media (max-width: 576px) {
    #n12636 {
        margin: 4px 2px;
    }
    
    #n12636 .list-title {
        font-size: 15px;
        line-height: 36px;
        height: 36px;
    }
    
    #n12636 .template_main_content {
        padding: 8px;
    }
    
    #n12636 table {
        font-size: 12px;
        border-spacing: 2px;
    }
    
    #n12636 td {
        font-size: 12px;
        padding: 1px !important;
    }
    
    #n12636 .prediction-table-row,
    #n12636 .prediction-table-header-row {
        height: 36px !important;
    }
    
    #n12636 .prediction-table-header-text {
        font-size: 16px !important;
    }
}

@media (max-width: 480px) {
    #n12636 .list-title {
        font-size: 15px;
        line-height: 32px;
        height: 32px;
    }
    
    #n12636 .template_main_content {
        padding: 0px;
    }
    
    #n12636 table {
        font-size: 15px;
        border-spacing: 2px;
    }
    
    #n12636 td {
        font-size: 15px;
        padding: 1px !important;
    }
    
    #n12636 .prediction-table-row,
    #n12636 .prediction-table-header-row {
        height: 32px !important;
    }
    
    #n12636 .prediction-table-header-text {
        font-size: 14px !important;
    }
    
    #n12636 .prediction-result-text {
        font-size: 15px;
    }
}