/* 导航栏右侧按钮样式 */
.navbar-nav-buttons {
    order: 2; /* 确保在导航切换按钮之前显示 */
}

.navbar-refresh-btn {
    transition: all 0.3s ease;
    border-radius: 6px;
    font-weight: 500;
}

.navbar-refresh-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

.navbar-refresh-btn:active {
    transform: translateY(0);
}

/* 导航栏响应式调整 */
@media (max-width: 991px) {
    .navbar-nav-buttons {
        order: 1;
    }
    
    /* 隐藏移动端的三条杠导航按钮 */
    .navbar-toggler {
        display: none !important;
    }
    
    /* 隐藏空的导航折叠容器 */
    .navbar-collapse {
        display: none !important;
    }
}

@media (max-width: 768px) {
    /* 导航栏按钮组在移动端的布局优化 */
    .navbar-nav-buttons {
        flex: 1;
        justify-content: flex-end;
        gap: 8px;
    }
    
    .navbar-refresh-btn {
        padding: 8px 12px;
        font-size: 0.9rem;
        min-width: 45px; /* 设置最小宽度确保图标显示完整 */
    }
    
    .refresh-btn-text {
        display: none; /* 移动端隐藏文字，只显示图标 */
    }
    
    #toggle-device-mode {
        padding: 8px 12px;
        font-size: 0.9rem;
        min-width: 45px;
    }
    
    #device-mode-text {
        display: none; /* 移动端隐藏设备切换按钮文字 */
    }
}

@media (max-width: 576px) {
    .navbar-refresh-btn {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
    
    #toggle-device-mode {
        padding: 6px 10px;
        font-size: 0.9rem;
    }
}

/* 倒计时样式 */
.countdown-wrapper {
    background: #3e4a59;
    background: linear-gradient(135deg, #3e4a59, #505c6a);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 0.5s ease;
    border-radius: 8px;
    max-width: 350px;
    margin: 0 auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.countdown-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
    opacity: 0.6;
    z-index: 0;
}

.countdown-container {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.countdown-container.justify-content-center {
    justify-content: center;
}

/* 更新成功动画 */
.countdown-container.updated {
    animation: countdown-updated 1s ease;
}

@keyframes countdown-updated {
    0% { background-color: rgba(255, 255, 255, 0.3); }
    50% { background-color: rgba(255, 255, 255, 0.5); }
    100% { background-color: transparent; }
}

.countdown-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    margin-right: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, background-color 0.3s ease;
}

/* 图标抖动动画 */
.countdown-icon.shaking {
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) infinite;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    background-color: rgba(255, 255, 255, 0.4);
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.countdown-icon i {
    font-size: 1.4rem;
}

.countdown-content {
    display: flex;
    flex-direction: column;
}

.countdown-label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.countdown {
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.05em;
}

/* 数字变化的高亮效果 */
.countdown-status.number-change {
    animation: number-highlight 0.3s ease;
}

@keyframes number-highlight {
    0% { transform: scale(1.1); color: rgba(255, 255, 255, 1); }
    100% { transform: scale(1); }
}

.countdown.expiring {
    color: #ffeb3b !important;
    animation: countdown-pulse 1s infinite;
}

@keyframes countdown-pulse {
    0% { opacity: 1; text-shadow: 0 0 8px rgba(255, 235, 59, 0.6); }
    50% { opacity: 0.7; text-shadow: 0 0 15px rgba(255, 235, 59, 0.8); }
    100% { opacity: 1; text-shadow: 0 0 8px rgba(255, 235, 59, 0.6); }
}

/* 响应式调整 */
@media (max-width: 576px) {
    .countdown-wrapper {
        max-width: 280px;
    }
    
    .countdown-container {
        padding: 10px 15px;
    }
    
    .countdown-icon {
        width: 36px;
        height: 36px;
        margin-right: 10px;
    }
    
    .countdown-icon i {
        font-size: 1.2rem;
    }
    
    .countdown-label {
        font-size: 0.85rem;
    }
    
    .countdown {
        font-size: 1.4rem;
    }
}

/* 内容容器样式 */
.content-containers {
    width: 100%;
    position: relative;
}

.content-containers > div {
    width: 100%;
}

#missing-query-container .card {
    margin-bottom: 0;
}

.countdown {
    font-size: 1.3rem;
    font-weight: 700;
    min-width: 100px;
    text-align: center;
}

.countdown.expiring {
    color: #dc3545 !important;
    animation: countdown-pulse 1s infinite;
}

@keyframes countdown-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* 按钮样式 */
#refresh-btn {
    border-color: rgba(255,255,255,0.5);
}

#refresh-btn:hover {
    background-color: rgba(255,255,255,0.2);
}

#stats-refresh-btn {
    border-color: rgba(255,255,255,0.5);
}

#stats-refresh-btn:hover {
    background-color: rgba(255,255,255,0.2);
}

/* 旋转动画 */
.spin {
    display: inline-block;
    animation: spinning 1s infinite linear;
}

@keyframes spinning {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-outline-light.active {
    background-color: rgba(255,255,255,0.3);
    border-color: #fff;
}

/* 咪牌按钮样式 */
#peek-btn {
    border-color: rgba(255,255,255,0.5);
    transition: all 0.3s ease;
    font-weight: 500;
}

#peek-btn:hover {
    background-color: rgba(255,255,255,0.2);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

#peek-btn[data-status="on"] {
    background: linear-gradient(135deg, #28a745, #20c997);
    border-color: #28a745;
    color: white;
}

#peek-btn[data-status="on"] i {
    color: #ffd700;
}

/* 咪牌模式透明遮罩样式 - 碎玻璃效果 */
.peek-glass-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(240, 248, 255, 0.95), 
        rgba(230, 240, 250, 0.90),
        rgba(245, 250, 255, 0.95),
        rgba(235, 245, 255, 0.92)
    );
    backdrop-filter: blur(12px) saturate(200%) brightness(1.1);
    -webkit-backdrop-filter: blur(12px) saturate(200%) brightness(1.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 不透明基础遮挡层 */
.peek-glass-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* 主要遮挡层 - 确保不透光 */
        linear-gradient(135deg, 
            rgba(248, 252, 255, 0.85) 0%,
            rgba(240, 248, 255, 0.90) 25%,
            rgba(245, 250, 255, 0.88) 50%,
            rgba(250, 252, 255, 0.92) 75%,
            rgba(248, 252, 255, 0.85) 100%
        ),
        /* 碎玻璃纹理效果 */
        radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4) 2px, transparent 2px),
        radial-gradient(circle at 60% 70%, rgba(255, 255, 255, 0.3) 1px, transparent 1px),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.35) 1.5px, transparent 1.5px),
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.25) 2.5px, transparent 2.5px),
        /* 折射光线效果 */
        linear-gradient(45deg, 
            transparent 30%, 
            rgba(255, 255, 255, 0.15) 40%, 
            rgba(255, 255, 255, 0.25) 50%, 
            rgba(255, 255, 255, 0.15) 60%, 
            transparent 70%
        );
    background-size: 100% 100%, 40px 40px, 60px 60px, 80px 80px, 50px 50px, 100% 100%;
    background-position: 0 0, 0 0, 20px 20px, 40px 40px, 10px 30px, 0 0;
    border-radius: 8px;
}

/* 光影折射效果 */
.peek-glass-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(250, 252, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.3) 40%,
        rgba(248, 250, 255, 0.1) 60%,
        rgba(255, 255, 255, 0.35) 80%,
        rgba(250, 252, 255, 0.15) 100%
    );
    border-radius: 8px;
}

/* 激活状态 */
.peek-glass-overlay.active {
    opacity: 1;
    transform: scale(1);
}

/* 容器相对定位 */
.peek-mode-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* 现代化浮动粒子效果 */
.peek-glass-overlay .floating-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 8px;
}

.peek-glass-overlay .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
    border-radius: 50%;
    animation: floatParticle 6s infinite ease-in-out;
    opacity: 0;
}

.peek-glass-overlay .particle:nth-child(1) {
    top: 15%; left: 20%;
    animation-delay: 0s;
}
.peek-glass-overlay .particle:nth-child(2) {
    top: 60%; left: 70%;
    animation-delay: 1.5s;
}
.peek-glass-overlay .particle:nth-child(3) {
    top: 30%; left: 80%;
    animation-delay: 3s;
}
.peek-glass-overlay .particle:nth-child(4) {
    top: 80%; left: 25%;
    animation-delay: 4.5s;
}

@keyframes floatParticle {
    0%, 100% { 
        opacity: 0; 
        transform: translateY(0px) scale(0.8); 
    }
    50% { 
        opacity: 0.8; 
        transform: translateY(-15px) scale(1.2); 
    }
}

/* 边缘光晕效果 */
.peek-glass-overlay .edge-glow {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        rgba(64, 224, 255, 0.3),
        rgba(255, 64, 224, 0.3),
        rgba(64, 255, 128, 0.3),
        rgba(255, 255, 64, 0.3)
    );
    border-radius: 10px;
    filter: blur(3px);
    z-index: -1;
    animation: rotateGlow 8s linear infinite;
    opacity: 0.4;
}

@keyframes rotateGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 咪牌提示文字 */
.peek-notice {
    position: absolute;
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #dc3545;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(220, 53, 69, 0.3);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    text-align: center;
    line-height: 1.3;
    background: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 6px;
    border: 1px solid rgba(220, 53, 69, 0.2);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.peek-notice.show {
    opacity: 1;
}

.peek-notice .peek-icon {
    display: block;
    font-size: 1.8rem;
    margin-bottom: 0.3rem;
    color: #dc3545;
    animation: pulseIcon 2s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(220, 53, 69, 0.3));
}

@keyframes pulseIcon {
    0%, 100% { 
        transform: scale(1); 
        opacity: 0.8; 
    }
    50% { 
        transform: scale(1.1); 
        opacity: 1; 
    }
}

/* 响应式优化 */
@media (max-width: 768px) {
    .peek-glass-overlay {
        background: linear-gradient(135deg, 
            rgba(245, 250, 255, 0.96), 
            rgba(240, 248, 255, 0.94),
            rgba(248, 252, 255, 0.97),
            rgba(242, 248, 255, 0.95)
        );
        border-radius: 6px;
        backdrop-filter: blur(10px) saturate(180%) brightness(1.05);
        -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.05);
    }
    
    .peek-glass-overlay::before {
        background: 
            /* 移动端加强遮挡层 */
            linear-gradient(135deg, 
                rgba(250, 252, 255, 0.90) 0%,
                rgba(245, 250, 255, 0.92) 25%,
                rgba(248, 252, 255, 0.94) 50%,
                rgba(252, 254, 255, 0.96) 75%,
                rgba(250, 252, 255, 0.90) 100%
            ),
            /* 简化的碎玻璃纹理 */
            radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.3) 1.5px, transparent 1.5px),
            radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.25) 1px, transparent 1px),
            /* 简化的折射效果 */
            linear-gradient(45deg, 
                transparent 40%, 
                rgba(255, 255, 255, 0.2) 50%, 
                transparent 60%
            );
        background-size: 100% 100%, 30px 30px, 50px 50px, 100% 100%;
        background-position: 0 0, 0 0, 15px 15px, 0 0;
    }
    
    .peek-notice {
        font-size: 0.9rem;
        top: 10px;
        padding: 6px 12px;
    }
    
    .peek-notice .peek-icon {
        font-size: 1.4rem;
        margin-bottom: 0.2rem;
    }
    
    .peek-glass-overlay .particle {
        width: 2px;
        height: 2px;
    }
}

/* 刮刮乐效果样式 */
.lottery-scratch-container {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    z-index: 5; /* 提高层级，确保覆盖其他元素 */
    justify-content: center; /* 水平居中内容 */
    align-items: center; /* 垂直居中内容 */
    flex-shrink: 0 !important; /* 防止flex容器压缩元素 */
    box-sizing: border-box !important; /* 确保边框和内边距不影响尺寸计算 */
}

.lottery-scratch-canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    cursor: pointer;
    border-radius: inherit; /* 继承目标元素的圆角 */
    touch-action: none; /* 防止触摸设备上的滚动干扰 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 添加轻微阴影增强立体感 */
    pointer-events: auto; /* 确保可以响应交互 */
}

/* 移动端中的刮奖涂层样式优化 */
body.mobile-mode .lottery-scratch-canvas {
    border-radius: inherit;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    /* 移动端不使用缩放，保持原始尺寸 */
}

/* 针对不同类型号码的刮奖容器样式 */
.lottery-number-container, .lottery-sum-container, .lottery-result-item-container {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box !important; /* 确保边框不影响内容尺寸 */
    flex-shrink: 0 !important; /* 防止flex容器压缩元素 */
    transition: none !important; /* 禁用过渡效果，保持尺寸稳定 */
}

/* 和值特殊处理 */
.lottery-sum-container {
    border-radius: 8px; /* 与和值元素保持一致 */
}

.lottery-sum-container .lottery-scratch-canvas {
    border-radius: 8px;
}

/* 保持原有元素的样式 */
.lottery-scratch-container .lottery-number,
.lottery-scratch-container .lottery-sum,
.lottery-scratch-container .lottery-result-item {
    position: relative;
    margin: 0 !important;
    z-index: 1;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center;
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: none !important; /* 禁用过渡效果，保持尺寸稳定 */
}

/* 大小单双结果的刮刮乐容器 */
.lottery-result-item-container {
    border-radius: 50%; /* 圆形容器 */
}

/* 移动端下结果容器的圆角处理 */
body.mobile-mode .lottery-result-item-container .lottery-scratch-canvas {
    border-radius: 50% !important;
}

/* 设置指针样式，提示用户可以刮 */
.scratch-cursor {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8" fill="rgba(255,255,255,0.5)"/></svg>') 8 8, auto !important;
}

/* 防止咪牌状态下的内容闪现 */
.peek-mode-updating {
    visibility: hidden !important;
    transition: none !important;
}

.peek-mode-ready {
    visibility: visible !important;
    transition: none !important;
}

/* 新的开奖信息样式 */
.lottery-info {
    display: flex;
    justify-content: center;
    padding: 15px 0;
}

.lottery-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
}

.lottery-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 提供更好的移动触摸滚动体验 */
}

.lottery-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 2.2rem;
    font-weight: bold;
    margin: 0 2px;
}

.lottery-operator {
    font-size: 2rem;
    margin: 0 8px;
    color: #6c757d;
}

.lottery-sum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: #fd7e14;
    color: white;
    border-radius: 8px;
    margin: 0 15px 0 8px;
    font-size: 2.2rem;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

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

.lottery-result-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.4rem;
    font-weight: bold;
}

.lottery-result-item.big {
    background-color: rgba(220, 53, 69, 0.1);
}

.lottery-result-item.small {
    background-color: rgba(13, 110, 253, 0.1);
}

.lottery-result-item.odd {
    background-color: rgba(13, 110, 253, 0.1);
}

.lottery-result-item.even {
    background-color: rgba(220, 53, 69, 0.1);
}

/* 响应式调整 */
@media (max-width: 576px) {
    .lottery-number {
        width: 40px;
        height: 40px;
        font-size: 1.6rem;
    }
    
    .lottery-sum {
        width: 48px;
        height: 48px;
        font-size: 1.6rem;
        padding: 5px;
    }
    
    .lottery-operator {
        font-size: 1.3rem;
        margin: 0 2px;
    }
    
    .lottery-result-item {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
    
    .lottery-sum {
        margin-right: 10px;
    }
    
    .combination, .combination span {
        font-size: 14px;
    }
}

/* 统一字体样式 */
.combination {
    font-weight: bold;
    font-size: 16px;
    display: inline-block;
    line-height: 1;
}

.combination span {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}

/* 形态样式 */
.pattern-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    min-width: 60px;
    font-size: 14px;
    color: white;
}

.pattern-badge.对子, .pattern-badge.pair {
    background-color: #ff9800; /* 橙色 */
}

.pattern-badge.顺子, .pattern-badge.straight {
    background-color: #4caf50; /* 绿色 */
}

.pattern-badge.豹子, .pattern-badge.leopard {
    background-color: #9c27b0; /* 紫色 */
}

.pattern-badge.杂六, .pattern-badge.mixed {
    background-color: #607d8b; /* 蓝灰色 */
}

/* 大小单双颜色 */
.big {
    color: #dc3545 !important;
}

.small {
    color: #0d6efd !important;
}

.odd {
    color: #0d6efd !important;
}

.even {
    color: #dc3545 !important;
}

/* 紫色文本 */
.text-purple {
    color: #9c27b0 !important;
}

/* 紫色背景 - 添加用于豹子显示 */
.bg-purple {
    background-color: #9c27b0 !important;
}

/* 走势分析表格样式 */
#trend-analysis-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* 为iOS设备提供更好的滚动体验 */
    margin-bottom: 15px;
    width: 100%;
    position: relative; /* 为移动端滚动提示添加相对定位 */
    scrollbar-width: thin; /* 使用窄滚动条 */
    /* 重要：确保内容可滚动，值列固定在左侧 */
    padding-left: 1px; /* 添加一点内边距以避免边缘显示问题 */
}

#trend-analysis-table {
    border-collapse: collapse;
    width: 100%;
    min-width: 800px; /* 设置足够的宽度以显示所有列 */
    table-layout: fixed; /* 固定表格布局，提高渲染性能 */
}

#trend-analysis-table th, 
#trend-analysis-table td {
    text-align: center;
    padding: 6px 3px; /* 调整内边距 */
    min-width: 30px; /* 调整最小宽度 */
    border: 1px solid #dee2e6;
    font-size: 14px;
    overflow: hidden; /* 防止内容溢出 */
    white-space: nowrap; /* 防止内容换行 */
    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
}

#trend-analysis-table th {
    background-color: #f8f9fa;
    font-weight: bold;
    vertical-align: middle;
}

/* 开奖期号列样式 */
#trend-analysis-table th:first-child,
#trend-analysis-table td:first-child {
    width: 12%; /* 从15%减小到12% */
    background-color: #f8f9fa;
    font-weight: bold;
}

/* 值列样式 */
#trend-analysis-table th:nth-child(2),
#trend-analysis-table td:nth-child(2) {
    width: 8%; /* 百分比宽度 */
}

/* 大小单双列样式 */
#trend-analysis-table th:nth-child(3),
#trend-analysis-table th:nth-child(4),
#trend-analysis-table th:nth-child(5),
#trend-analysis-table th:nth-child(6),
#trend-analysis-table td:nth-child(3),
#trend-analysis-table td:nth-child(4),
#trend-analysis-table td:nth-child(5),
#trend-analysis-table td:nth-child(6) {
    width: 6%; /* 百分比宽度 */
}

/* 间隔行样式 */
.interval-row {
    background-color: #f8f9fa !important;
    font-weight: bold;
    border-bottom: 2px solid #dee2e6;
}

/* 将未开间隔行中的所有字体颜色统一改为黑色 */
.interval-row span {
    color: #000 !important;
    font-weight: bold !important;
}

/* 间隔数字颜色 - 这些选择器仍然保留，但会被上面的规则覆盖 */
.big-interval, .big-odd-interval, .big-even-interval, .big-edge-interval {
    color: #dc3545;
}

.small-interval, .small-odd-interval, .small-even-interval, .small-edge-interval {
    color: #0d6efd;
}

.odd-interval, .small-odd-interval, .big-odd-interval {
    color: #0d6efd;
}

.even-interval, .small-even-interval, .big-even-interval {
    color: #dc3545;
}

.middle-interval {
    color: #000; /* 从黄色改为黑色 */
    font-weight: bold;
    text-shadow: none; /* 移除文字阴影 */
}

/* 为走势分析表格的所有数据单元格添加加粗样式 */
#trend-analysis-table td {
    font-weight: bold;
}

/* 移动端样式优化 */
@media (max-width: 768px) {
    #trend-analysis-table {
        min-width: 800px; /* 保持足够的宽度以显示所有列 */
        font-size: 11px;
    }
    
    #trend-analysis-table th, 
    #trend-analysis-table td {
        padding: 4px 1px;
        min-width: 35px;
        font-size: 11px;
        white-space: nowrap;
    }
    
    /* 开奖期号列样式 - 不使用sticky定位，让它可以被滚动 */
    #trend-analysis-table th:first-child,
    #trend-analysis-table td:first-child {
        width: 14%; /* 适当的期号列宽度 */
        min-width: 60px;
        background-color: rgba(248, 249, 250, 0.95);
        position: relative; /* 使用相对定位而不是sticky */
        z-index: 1;
    }
    
    /* 值列样式 - 固定在左侧，完全独立于期号列 */
    #trend-analysis-table th:nth-child(2),
    #trend-analysis-table td:nth-child(2) {
        width: 8%; /* 值列宽度 */
        min-width: 35px;
        background-color: #e6f0ff; /* 使用不透明的浅蓝色背景 */
        position: sticky;
        left: 0; /* 固定在左侧边缘 */
        z-index: 5; /* 高z-index确保在最上层 */
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        border-right: 2px solid #0d6efd; /* 更明显的蓝色边框 */
        font-weight: bold;
    }
    
    /* 大小单双列优化 */
    #trend-analysis-table th:nth-child(3),
    #trend-analysis-table th:nth-child(4),
    #trend-analysis-table th:nth-child(5),
    #trend-analysis-table th:nth-child(6),
    #trend-analysis-table td:nth-child(3),
    #trend-analysis-table td:nth-child(4),
    #trend-analysis-table td:nth-child(5),
    #trend-analysis-table td:nth-child(6) {
        width: 5%; /* 调整大小单双列宽度 */
        min-width: 35px;
    }
    
    /* 组合类型列优化 */
    #trend-analysis-table th:nth-child(7),
    #trend-analysis-table th:nth-child(8),
    #trend-analysis-table th:nth-child(9),
    #trend-analysis-table th:nth-child(10),
    #trend-analysis-table th:nth-child(11),
    #trend-analysis-table th:nth-child(12),
    #trend-analysis-table th:nth-child(13),
    #trend-analysis-table td:nth-child(7),
    #trend-analysis-table td:nth-child(8),
    #trend-analysis-table td:nth-child(9),
    #trend-analysis-table td:nth-child(10),
    #trend-analysis-table td:nth-child(11),
    #trend-analysis-table td:nth-child(12),
    #trend-analysis-table td:nth-child(13) {
        width: 7%; /* 调整组合类型列宽度 */
        min-width: 40px;
    }
    
    /* 表头粘性定位，滚动时保持可见 */
    #trend-analysis-table thead tr th {
        position: sticky;
        top: 0;
        background-color: #f8f9fa;
        z-index: 1;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* 表头粘性定位处理 */
    #trend-analysis-table thead tr th {
        position: sticky;
        top: 0;
        z-index: 2; /* 基础层级为2 */
    }
    
    /* 期号和表头交叉处的特殊处理 */
    #trend-analysis-table th:first-child {
        position: relative; /* 使用相对定位 */
        z-index: 2; /* 基础层级 */
    }
    
    /* 值列和表头交叉处的特殊处理 */
    #trend-analysis-table th:nth-child(2) {
        z-index: 6; /* 确保值列的表头在最上层 */
        background-color: #e6f0ff; /* 与值列单元格保持一致 - 不透明背景 */
        border-right: 2px solid #0d6efd;
    }
    
    /* 未开间隔行 - 期号单元格不固定 */
    #trend-analysis-table .interval-row td:first-child {
        position: relative; /* 相对定位 */
        z-index: 1;
        background-color: rgba(248, 249, 250, 0.95);
    }
    
    /* 为间隔行的倒计时单元格添加固定定位 */
    #trend-analysis-table .interval-row td:nth-child(2) {
        position: sticky;
        left: 0; /* 固定在最左侧 */
        z-index: 5; /* 保持高z-index */
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
        background-color: #e6f0ff; /* 使用不透明的背景色 */
        font-weight: bold;
        border-right: 2px solid #0d6efd;
    }
}

/* 更小屏幕的优化 */
@media (max-width: 480px) {
    #trend-analysis-table {
        min-width: 800px; /* 保持全部列显示 */
    }
    
    #trend-analysis-table th, 
    #trend-analysis-table td {
        padding: 3px 0px;
        min-width: 30px;
        font-size: 10px;
    }
    
    #trend-analysis-table th:first-child,
    #trend-analysis-table td:first-child {
        min-width: 50px; /* 更小的期号列宽度 */
    }
    
    #trend-analysis-table th:nth-child(2),
    #trend-analysis-table td:nth-child(2) {
        min-width: 30px; /* 确保值列有足够的宽度 */
        font-weight: bold;
    }
    
    /* 移动端横向滚动指示器样式调整 */
    body.mobile-mode #trend-analysis-container::after {
        content: '👉 向右滑动';
        padding: 3px 6px;
        font-size: 0.65rem;
        left: 35px; /* 放在值列右边 */
    }
    
    /* 增加值列在小屏幕上的视觉效果 */
    #trend-analysis-table th:nth-child(2),
    #trend-analysis-table td:nth-child(2),
    #trend-analysis-table .interval-row td:nth-child(2) {
        background-color: #e6f0ff; /* 统一不透明浅蓝色背景 */
        border-right: 2px solid #0d6efd; /* 强调边框 */
        box-shadow: 2px 0 8px rgba(0,0,0,0.2);
    }
}

/* 超小屏幕的进一步优化 */
@media (max-width: 320px) {
    #trend-analysis-table th:first-child,
    #trend-analysis-table td:first-child {
        min-width: 45px; /* 极小屏幕上进一步减小期号列宽度 */
        font-size: 9px;
    }
    
    #trend-analysis-table th:nth-child(2),
    #trend-analysis-table td:nth-child(2) {
        min-width: 25px; /* 极小屏幕上减小值列宽度 */
        font-size: 10px; /* 略微提高字体大小，优化值列显示 */
        font-weight: 700; /* 加粗字体提高可读性 */
    }
    
    /* 调整滚动提示位置 */
    body.mobile-mode #trend-analysis-container::after {
        font-size: 0.6rem;
        left: 28px;
        padding: 2px 4px;
    }
    
    /* 增强值列在超小屏幕上的视觉表现 */
    #trend-analysis-table th:nth-child(2),
    #trend-analysis-table td:nth-child(2),
    #trend-analysis-table .interval-row td:nth-child(2) {
        background-color: #d9e9ff; /* 稍微深一点的不透明蓝色背景 */
        box-shadow: 2px 0 6px rgba(0,0,0,0.25); /* 增强阴影效果 */
        border-right: 2px solid #0d6efd;
    }
}

/* 数据行样式 - 注释掉固定背景色，以便与Bootstrap的table-striped样式兼容 */
/*
#trend-analysis-table .data-row:nth-child(odd) {
    background-color: rgba(0,0,0,0.02);
}

#trend-analysis-table .data-row:nth-child(even) {
    background-color: rgba(0,0,0,0.05);
}
*/

/* 位置类型颜色 */
.position-small {
    color: #2196f3 !important;
    font-weight: bold;
}

.position-middle {
    color: #000 !important; /* 从黄色改为黑色 */
    font-weight: bold;
    text-shadow: none; /* 移除文字阴影 */
}

.position-big {
    color: #f44336 !important;
    font-weight: bold;
}

/* 最新开奖行样式 */
.latest-result-row {
    background-color: rgba(255, 243, 205, 0.5) !important;
    font-weight: bold !important;
    border: 2px solid #ffc107 !important;
}

/* 倒计时单元格样式 */
.countdown-cell {
    background-color: #e6f0ff; /* 与值列使用相同的不透明背景色 */
    font-weight: bold;
}

/* 遗漏查询样式 */
#missing-query-container table {
    margin-bottom: 0;
    table-layout: fixed; /* 固定表格布局，确保各列宽度一致 */
}

#missing-query-container .table-responsive-sm {
    margin-bottom: 1.5rem;
    border-radius: 0.25rem;
    overflow: hidden;
}

/* 对齐遗漏未开期数的样式 */
#missing-query-container td {
    vertical-align: middle;
}

#missing-query-container td span.bg-light {
    min-width: 50px;
    text-align: center;
    display: inline-block;
}

#missing-query-container td span.text-danger {
    min-width: 40px;
    text-align: center;
    display: inline-block;
}

/* 遗漏数据区域相对定位，用于加载蒙层 */
#missing-data {
    position: relative;
}

/* 加载蒙层动画 */
@keyframes rotating {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#missing-data-overlay .bi-arrow-repeat {
    animation: rotating 1.5s linear infinite;
}

#missing-query-container th {
    background-color: #f0f8ff;  /* 淡蓝色背景 */
    font-weight: bold;
    font-size: 14px;
}

/* 遗漏类型标签样式 */
#missing-query-container .bg-light {
    background-color: #f8f9fa;
    border: 1px solid rgba(0,0,0,0.05);
    padding: 0.25rem 0.5rem;
    display: inline-block;
    min-width: 40px;
}

/* 增大字体 */
.fs-6 {
    font-size: 1.2rem !important;
}

/* 遗漏期数样式 */
#missing-query-container .text-danger {
    font-weight: bold !important;
    font-size: 1.15rem;
}

/* 移动端适配 */
@media (max-width: 576px) {
    #missing-query-container th {
        font-size: 12px;
        padding: 0.5rem 0.25rem;
    }
    
    #missing-query-container td {
        font-size: 12px;
        padding: 0.5rem 0.25rem;
    }
    
    #missing-query-container .bg-light {
        min-width: 30px;
        padding: 0.15rem 0.25rem;
    }
}

/* 更小屏幕的优化 */
@media (max-width: 400px) {
    #missing-query-container th,
    #missing-query-container td {
        font-size: 11px;
        padding: 0.4rem 0.2rem;
    }
}

/* 已开统计样式 */
#stats-query-container {
    margin-bottom: 1rem;
}

.stats-container {
    width: 100%;
}

.stats-header {
    border-radius: 0.25rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.stats-section {
    margin-bottom: 1rem;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    border-radius: 0.6rem !important;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0,0,0,0.05) !important;
}

.stats-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

.stats-title {
    color: #495057;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    padding-left: 0.75rem;
    border-left: 4px solid #0d6efd;
    font-weight: 600;
}

.stats-section .badge {
    min-width: 45px;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.3rem;
}

.stats-section .row {
    margin-bottom: 0.5rem;
}

.stats-section .col-6 {
    padding: 0.5rem;
    transition: all 0.3s ease;
}

.stats-section .col-6:hover {
    background-color: rgba(13, 110, 253, 0.05);
    border-radius: 0.3rem;
    cursor: default;
}

/* 统计类型样式 */
.stats-section .badge.bg-info {
    background-color: #17a2b8 !important;
}

/* 骨架屏加载效果 */
.skeleton-container {
    width: 100%;
}

.skeleton-header {
    height: 60px;
    background-color: #f1f3f9;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

.skeleton-section {
    height: 130px;
    background-color: #f1f3f9;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

.skeleton-title {
    height: 24px;
    width: 40%;
    background-color: #e1e5ef;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
}

.skeleton-item {
    height: 16px;
    width: 100%;
    background-color: #e1e5ef;
    margin-bottom: 0.75rem;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
}

.skeleton-badge {
    height: 24px;
    width: 50px;
    background-color: #e1e5ef;
    display: inline-block;
    border-radius: 0.25rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.skeleton-text {
    height: 16px;
    width: calc(100% - 60px);
    background-color: #e1e5ef;
    display: inline-block;
    border-radius: 0.25rem;
    vertical-align: middle;
}

/* 骨架屏动画效果 */
.skeleton-pulse {
    position: relative;
    overflow: hidden;
}

.skeleton-pulse::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    animation: pulse 1.5s infinite;
}

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

/* 数据刷新蒙层 */
.stats-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stats-loading-overlay.visible {
    opacity: 1;
}

.stats-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(13, 110, 253, 0.3);
    border-radius: 50%;
    border-top-color: #0d6efd;
    animation: spinner 1s linear infinite;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

/* 数据项淡入效果 */
.stats-fade-in {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.stats-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 移动端适配 */
@media (max-width: 576px) {
    .stats-section .badge {
        min-width: 40px;
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
    }
    
    .stats-title {
        font-size: 1rem;
    }
    
    .stats-section {
        padding: 0.75rem !important;
    }
}

/* 更小屏幕优化 */
@media (max-width: 400px) {
    .stats-section .col-6 {
        font-size: 0.8rem;
    }
    
    .stats-section .badge {
        min-width: 36px;
        font-size: 0.7rem;
        padding: 0.2rem 0.3rem;
    }
}

/* 新增最新开奖左右结构布局 */
.lottery-flex-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* PC端显示为左右结构，移动端为上下结构 */
@media (min-width: 768px) {
    .lottery-flex-container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    
    .lottery-countdown-container {
        flex: 0 0 35%;
        max-width: 35%;
        margin-right: 30px;
    }
    
    .lottery-result-container {
        flex: 0 0 60%;
        max-width: 60%;
    }
}

/* 移动端按钮优化 - 最新开奖区域的按钮布局 */
@media (max-width: 767px) {
    /* 最新开奖标题和按钮在移动端保持同一行 */
    .card-header .d-flex.justify-content-between {
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px;
        flex-wrap: nowrap;
    }
    
    /* 标题部分适当缩小 */
    .card-header h5 {
        font-size: 1rem !important;
        margin-bottom: 0;
        flex-shrink: 1;
        min-width: 0;
    }
    
    /* 期号部分在小屏幕隐藏以节省空间 */
    .lottery-title-qihao {
        display: none;
    }
    
    /* 按钮组紧凑显示 */
    .card-header .d-flex.justify-content-between > div:last-child {
        display: flex;
        gap: 4px;
        flex-shrink: 0;
    }
    
    /* 移动端按钮样式优化 - 两个按钮在同一行紧凑显示 */
    .header-main-btn {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
        border-radius: 4px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        flex-shrink: 0;
        min-width: 70px; /* 设置最小宽度保证按钮可点击 */
    }
    
    /* 按钮内图标和文字的间距优化 */
    .header-main-btn i {
        margin-right: 4px;
        font-size: 0.9rem;
    }
    
    /* 按钮内徽章样式优化 */
    .header-main-btn .badge {
        margin-left: 2px;
        font-size: 0.65rem;
        padding: 1px 4px;
    }
    

    
    .lottery-countdown-container {
        margin-bottom: 20px;
        width: 100%;
    }
    
    .lottery-result-container {
        width: 100%;
    }
    
    .freq-number-item,
    .combo-item {
        min-width: auto;
        padding: 6px 10px;
    }
    
    .freq-number {
        font-size: 1rem;
    }
    
    .combo-name {
        font-size: 1rem;
    }
    
    .combo-count {
        font-size: 0.9rem;
    }
    
    .freq-number-item:hover,
    .combo-item:hover {
        transform: none;
        box-shadow: none;
    }
    
    .number-grid {
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 6px;
    }
    
    .number-button {
        height: 40px;
        font-size: 0.9rem;
    }
    
    .analysis-summary-item .value {
        font-size: 1.1rem;
    }
    
    /* 分析概要部分的优化 */
    .analysis-summary-item {
        margin-bottom: 5px;
        padding: 8px 5px;
        border-radius: 5px;
        background-color: rgba(13, 110, 253, 0.05);
        transition: all 0.3s ease;
    }
    
    .analysis-summary-item:hover {
        background-color: rgba(13, 110, 253, 0.1);
        transform: translateY(-1px);
    }
    
    .analysis-summary-item label {
        font-size: 0.85rem;
        margin-bottom: 3px;
    }
    
    .analysis-summary-item .value {
        font-size: 1.15rem;
    }
    
    /* 统计期数输入区域优化 */
    .input-group-sm>.form-control {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        height: calc(1.5em + 0.5rem + 2px);
    }
    
    /* 分析号码标题样式 */
    .number-selection-container h6 {
        color: #495057;
        font-weight: 600;
        margin-bottom: 10px;
        padding-left: 5px;
        border-left: 3px solid #0d6efd;
    }
    
    /* 频率项目优化 */
    .freq-number-container {
        gap: 6px;
    }
    
    /* 减小号码分析模块之间的间距 */
    #analysis-container .mb-4 {
        margin-bottom: 0.8rem !important;
    }
    
    /* 减少号码选择区域的下边距 */
    .number-selection-container.mb-4 {
        margin-bottom: 0.8rem !important;
    }
    
    /* 减少分析概要与号码分析区域之间的距离 */
    .analysis-summary.mb-4 {
        margin-bottom: 0.8rem !important;
    }
    
    /* 减少卡片内部的内边距，使内容更紧凑 */
    #analysis-container .card-body {
        padding: 0.75rem;
    }
    
    /* 减少卡片头部的内边距 */
    #analysis-container .card-header {
        padding: 0.6rem 0.75rem;
    }
    
    /* 调整号码按钮的间距和大小 */
    .number-grid {
        gap: 5px;
        margin-top: 6px;
    }
    
    /* 使卡片更加紧凑，减少页面滚动 */
    #analysis-container .card {
        margin-bottom: 10px;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }
    
    /* 调整分析概要项的样式 */
    .analysis-summary .row.justify-content-center .analysis-summary-item {
        padding: 10px 8px;
        border-radius: 6px;
    }
    
    /* 更改卡片样式，使其更美观 */
    #analysis-container .card-header.bg-primary {
        background-color: #0d6efd !important;
        background-image: linear-gradient(to right, #0d6efd, #3486fd);
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
    }
    
    /* 频率号码容器适配 */
    .number-grid-layout {
        gap: 6px;
    }
    
    /* 频率号码项样式调整 */
    .number-grid-item {
        padding: 6px 3px;
    }
    
    /* 减少号码后的文本与数字的间距 */
    .number-count, .combo-count {
        margin-top: 1px;
    }
    
    /* 减少卡片之间的上下边距 */
    #analysis-container .row .col-md-6 {
        margin-bottom: 10px;
    }
}

@media (max-width: 576px) {
    .number-grid {
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 5px;
    }
    
    .number-button {
        height: 35px;
        font-size: 0.8rem;
    }
}

/* PC端宽屏时倒计时不需要限制最大宽度 */
@media (min-width: 768px) {
    .countdown-wrapper {
        max-width: 100%;
        margin: 0;
    }
}

/* 新的开奖信息样式增强 */
@media (min-width: 768px) {
    .lottery-result-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .lottery-info {
        padding: 0;
        width: 100%;
    }
    
    /* 增强PC端的号码显示效果 */
    .lottery-number {
        width: 60px;
        height: 60px;
        font-size: 2.2rem;
    }
    
    .lottery-sum {
        width: 68px;
        height: 68px;
        font-size: 2.2rem;
        padding: 10px;
    }
    
    .lottery-operator {
        font-size: 1.8rem;
    }
    
    .lottery-result-item {
        width: 52px;
        height: 52px;
        font-size: 1.6rem;
    }
}

/* 倒计时样式微调 */
@media (min-width: 768px) {
    .countdown {
        font-size: 1.8rem;
    }
    
    .countdown-label {
        font-size: 1.1rem;
    }
    
    .countdown-icon {
        width: 48px;
        height: 48px;
    }
    
    .countdown-icon i {
        font-size: 1.6rem;
    }
}

/* 日期选择容器样式 */
.date-select-container {
    width: 160px;
    position: relative;
}

.date-select-container input[type="text"] {
    cursor: pointer;
    padding-right: 30px;
    font-size: 0.95rem;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.date-select-container .bi-calendar-date {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.date-select-container input[type="date"] {
    cursor: pointer;
    z-index: 2;
}

/* 添加鼠标悬停样式 */
.date-select-container:hover input[type="text"] {
    border-color: #ffffff;
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* 自定义总期数徽章样式 */
.stats-header .badge {
    font-weight: 600;
    font-size: 0.95rem;
    min-width: 35px;
    text-align: center;
}

.stats-header {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stats-count-section {
    font-size: 0.95rem;
}

/* 通用号码网格布局 - 每行5个元素 */
.number-grid-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* 当网格中只有一个元素时的样式 */
.number-grid-layout.single-item {
    justify-content: center;
}

/* 当网格中只有2-3个元素时的样式 */
.number-grid-layout.few-items {
    justify-content: space-around;
}

/* 占位元素样式 */
.number-grid-item.placeholder {
    background-color: transparent;
    border: none;
    box-shadow: none;
    pointer-events: none;
}

.number-grid-layout::after {
    content: "";
    flex: 0 1 18%;
    /* 确保每行能整齐排列5个，添加空元素占位 */
}

/* 统一号码项目样式 */
.number-grid-item {
    flex: 0 1 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 8px 4px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
    text-align: center;
}

.number-grid-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

.number-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: #495057;
    margin-bottom: 4px;
}

.number-count {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 600;
    background-color: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 12px;
}

/* 原有频率号码容器修改为使用新的布局 */
.freq-number-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* 频率号码项仍然保留原有class，但样式与统一样式一致 */
.freq-number-item {
    flex: 0 1 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 8px 4px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
    text-align: center;
}

.freq-number {
    font-weight: 700;
    font-size: 1.1rem;
    color: #495057;
    margin-bottom: 4px;
}

.freq-count {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 600;
    background-color: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 12px;
}

/* 组合容器也使用与上述相同的布局方式 */
.combo-grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
}

/* 修改组合项使用与号码项统一的样式 */
.combo-item {
    flex: 0 1 18%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    border-radius: 4px;
    padding: 8px 4px;
    border: 1px solid #dee2e6;
    transition: all 0.2s ease;
    text-align: center;
}

/* 移动端适配 */
@media (max-width: 767px) {
    .number-grid-layout,
    .freq-number-container,
    .combo-grid-container {
        gap: 8px;
    }
    
    .number-grid-layout.single-item {
        justify-content: center;
    }
    
    .number-grid-layout.few-items {
        justify-content: space-around;
    }
    
    .number-grid-item,
    .freq-number-item,
    .combo-item {
        padding: 6px 2px;
    }
    
    .number-value,
    .freq-number,
    .combo-name {
        font-size: 0.95rem;
        margin-bottom: 2px;
    }
    
    .number-count,
    .freq-count,
    .combo-count {
        font-size: 0.85rem;
        padding: 2px 4px;
    }
    
    .number-grid-item:hover,
    .freq-number-item:hover,
    .combo-item:hover {
        transform: none;
        box-shadow: none;
    }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
    .number-grid-layout,
    .freq-number-container,
    .combo-grid-container {
        gap: 5px;
    }
    
    .number-grid-layout.single-item {
        justify-content: center;
    }
    
    .number-grid-layout.few-items {
        justify-content: space-around;
    }
    
    .number-grid-item,
    .freq-number-item,
    .combo-item {
        flex: 0 1 18%;
        padding: 5px 2px;
    }
    
    .number-value,
    .freq-number,
    .combo-name {
        font-size: 0.9rem;
    }
    
    .number-count,
    .freq-count,
    .combo-count {
        font-size: 0.8rem;
        padding: 1px 3px;
    }
}

/* 更小屏幕的适配 */
@media (max-width: 380px) {
    .number-grid-layout,
    .freq-number-container,
    .combo-grid-container {
        gap: 3px;
    }
    
    .number-grid-layout.single-item {
        justify-content: center;
    }
    
    .number-grid-layout.few-items {
        justify-content: space-around;
    }
    
    .number-grid-item,
    .freq-number-item,
    .combo-item {
        padding: 4px 1px;
    }
    
    .number-value,
    .freq-number,
    .combo-name {
        font-size: 0.85rem;
        margin-bottom: 2px;
    }
    
    .number-count,
    .freq-count,
    .combo-count {
        font-size: 0.75rem;
        padding: 1px 3px;
    }
}

/* 极小屏幕的适配 */
@media (max-width: 320px) {
    .number-value,
    .freq-number,
    .combo-name {
        font-size: 0.8rem;
    }
    
    .number-count,
    .freq-count,
    .combo-count {
        font-size: 0.7rem;
        padding: 1px 2px;
    }
}

/* 分析概要卡片样式优化 */
.analysis-summary .card {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.analysis-summary .card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 更新时间显示优化 */
#analysis-update-time {
    color: #6c757d;
    font-weight: 500;
}

/* 号码按钮选中样式增强 */
.number-button.selected {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.4);
    transform: translateY(-1px);
}

.number-button.selected:hover {
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

/* 前后号码卡片样式 */
#analysis-result .card-header {
    border-bottom: none;
    padding-bottom: 0.5rem;
}

#analysis-result .card-body {
    padding-top: 0.75rem;
}

/* 移动端分析按钮样式优化 */
#analysis-refresh-btn {
    border-color: rgba(255,255,255,0.5);
    font-weight: 600;
    padding: 4px 12px;
    transition: all 0.3s ease;
}

#analysis-refresh-btn:hover {
    background-color: rgba(255,255,255,0.3);
    transform: translateY(-1px);
}

#analysis-refresh-btn:active {
    transform: translateY(1px);
}

/* 移动端分析界面优化 */
@media (max-width: 767px) {
    /* 分析概要部分的优化 */
    .analysis-summary-item {
        margin-bottom: 5px;
        padding: 8px 5px;
        border-radius: 5px;
        background-color: rgba(13, 110, 253, 0.05);
        transition: all 0.3s ease;
    }
    
    .analysis-summary-item:hover {
        background-color: rgba(13, 110, 253, 0.1);
        transform: translateY(-1px);
    }
    
    .analysis-summary-item label {
        font-size: 0.85rem;
        margin-bottom: 3px;
    }
    
    .analysis-summary-item .value {
        font-size: 1.15rem;
    }
    
    /* 统计期数输入区域优化 */
    .input-group-sm>.form-control {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        height: calc(1.5em + 0.5rem + 2px);
    }
    
    /* 分析号码标题样式 */
    .number-selection-container h6 {
        color: #495057;
        font-weight: 600;
        margin-bottom: 10px;
        padding-left: 5px;
        border-left: 3px solid #0d6efd;
    }
    
    /* 频率项目优化 */
    .freq-number-container {
        gap: 6px;
    }
}

@media (max-width: 380px) {
    #missing-query-container th,
    #missing-query-container td {
        font-size: 11px;
        padding: 0.4rem 0.2rem;
    }
}

/* 号码分析区样式 */
.number-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 8px;
    margin-top: 10px;
}

.number-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    transition: all 0.2s ease;
}

.number-button:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
}

.number-button.selected {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

.analysis-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.analysis-summary-item label {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 5px;
    font-weight: 500;
}

.analysis-summary-item .value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #0d6efd;
}

/* 组合项悬停效果 */
.combo-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
}

/* 组合样式 */
.combo-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
}

.combo-count {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 600;
    background-color: rgba(0,0,0,0.05);
    padding: 2px 6px;
    border-radius: 12px;
}

/* 组合颜色样式 */
.combo-name.big.odd {
    color: #0d6efd; /* 大单蓝色 */
}

.combo-name.big.even {
    color: #dc3545; /* 大双红色 */
}

.combo-name.small.odd {
    color: #0d6efd; /* 小单蓝色 */
}

.combo-name.small.even {
    color: #dc3545; /* 小双红色 */
}

@media (max-width: 767px) {
    .number-grid {
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(4, auto);
        gap: 6px;
    }
    
    .number-button {
        height: 40px;
        font-size: 0.9rem;
    }
}

@media (max-width: 380px) {
    .number-grid {
        grid-template-columns: repeat(7, 1fr);
        gap: 4px;
    }
    
    .number-button {
        height: 32px;
        font-size: 0.75rem;
    }
}

/* 分析概要项优化 - 只有两项时的样式 */
.analysis-summary .row.justify-content-center .analysis-summary-item {
    padding: 15px 10px;
    border-radius: 8px;
    background-color: rgba(13, 110, 253, 0.08);
    transition: all 0.3s ease;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.analysis-summary .row.justify-content-center .analysis-summary-item:hover {
    background-color: rgba(13, 110, 253, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.analysis-summary .row.justify-content-center .analysis-summary-item label {
    font-size: 1rem;
    color: #495057;
    font-weight: 600;
    margin-bottom: 8px;
}

.analysis-summary .row.justify-content-center .analysis-summary-item .value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0d6efd;
}

/* 移动端优化 */
@media (max-width: 767px) {
    .analysis-summary .row.justify-content-center .analysis-summary-item {
        padding: 12px 8px;
    }
    
    .analysis-summary .row.justify-content-center .analysis-summary-item label {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }
    
    .analysis-summary .row.justify-content-center .analysis-summary-item .value {
        font-size: 1.25rem;
    }
}

/* 特小屏幕的额外优化 */
@media (max-width: 380px) {
    /* 进一步减小内边距 */
    #analysis-container .card-body {
        padding: 0.6rem;
    }
    
    /* 更小的号码网格间距 */
    .number-grid {
        gap: 4px;
    }
    
    /* 小一些的号码按钮尺寸 */
    .number-button {
        height: 34px;
        font-size: 0.8rem;
    }
    
    /* 分析标题更小的字体 */
    #analysis-container .card-header h5 {
        font-size: 1rem;
    }
    
    /* 优化统计期数选择器 */
    #analysis-container .input-group-sm > .form-control {
        font-size: 0.8rem;
        height: calc(1.5em + 0.5rem + 2px);
        padding: 0.2rem 0.4rem;
    }
    
    #analysis-container .input-group-sm > .input-group-text {
        font-size: 0.8rem;
        padding: 0.2rem 0.4rem;
    }
    
    #analysis-refresh-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
    }
    
    /* 使卡片标题更加紧凑 */
    #analysis-container .card-header h6 {
        font-size: 0.9rem;
    }
}

/* 美化号码选择区域 */
.number-selection-container {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 1.2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.05);
}

.number-selection-container h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 3px solid #0d6efd;
}

.number-button {
    transition: all 0.15s ease-in-out;
}

.number-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.number-button.selected {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
    box-shadow: 0 2px 5px rgba(13, 110, 253, 0.3);
    font-weight: 700;
}

.number-button.selected:hover {
    background-color: #0b5ed7;
}

/* 移动端优化 */
@media (max-width: 767px) {
    .number-selection-container {
        padding: 10px;
        border-radius: 8px;
    }
    
    .number-selection-container h6 {
        font-size: 0.95rem;
        margin-bottom: 8px;
    }
}

/* 美化分析结果区域卡片 */
#analysis-result .card {
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
}

#analysis-result .card:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

#analysis-result .card-header {
    border-bottom: none;
    padding: 0.8rem 1rem;
    background-image: linear-gradient(to right, #0d6efd, #3486fd);
}

#analysis-result .card-header h6 {
    font-weight: 600;
    letter-spacing: 0.02em;
}

#analysis-result .card-body {
    padding: 0.9rem;
}

/* 美化频率号码项 */
.number-grid-item {
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.08);
}

.number-grid-item:hover {
    border-color: #0d6efd;
    background-color: #f0f7ff;
}

.number-value {
    font-weight: 700;
    color: #0d6efd;
}

.number-count {
    font-weight: 600;
    background-color: rgba(13, 110, 253, 0.08);
}

/* 移动端优化频率号码显示 */
@media (max-width: 767px) {
    .number-grid-layout {
        gap: 7px;
    }
    
    .number-grid-item {
        box-shadow: none;
        padding: 6px 2px;
    }
    
    .number-value {
        font-size: 0.95rem;
        margin-bottom: 3px;
    }
    
    .number-count {
        font-size: 0.8rem;
        padding: 1px 4px;
    }
    
    #analysis-result .card {
        margin-bottom: 12px;
    }
    
    #analysis-result .card-header {
        padding: 0.6rem 0.8rem;
    }
    
    #analysis-result .card-body {
        padding: 0.7rem;
    }
}

/* 美化加载状态 */
#analysis-loading {
    padding: 25px !important;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-weight: 500;
    font-size: 1rem;
    margin-top: 10px;
}

#analysis-loading i {
    margin-right: 10px;
    font-size: 1.2rem;
    animation: analysis-loading-spin 1.2s linear infinite;
    color: #0d6efd;
}

@keyframes analysis-loading-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 移动端加载状态优化 */
@media (max-width: 767px) {
    #analysis-loading {
        padding: 18px !important;
        font-size: 0.9rem;
        margin-top: 8px;
    }
    
    #analysis-loading i {
        font-size: 1.1rem;
        margin-right: 8px;
    }
}

/* 修复一些可能的冲突 */
@media (max-width: 767px) {
    .analysis-summary .row.justify-content-center .analysis-summary-item {
        padding: 10px 8px !important;
    }
    
    #analysis-container .input-group-sm > .form-control {
        font-size: 0.85rem;
    }
    
    #analysis-container .card {
        border-radius: 8px !important;
    }
}

/* 移动端最新开奖号码放大样式 */
@media (max-width: 767px) {
    /* 移动端最新开奖信息号码放大 */
    body.mobile-mode #latest-lottery-info .lottery-number {
        width: 50px;
        height: 50px;
        font-size: 2.5rem;
        font-weight: 700;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-sum {
        width: 60px;
        height: 60px;
        font-size: 2.3rem;
        font-weight: 700;
        box-shadow: 0 2px 5px rgba(0,0,0,0.15);
        padding: 8px;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-operator {
        font-size: 2.2rem;
        margin: 0 5px;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-result-item {
        width: 45px;
        height: 45px;
        font-size: 1.5rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
}

/* 更小屏幕移动设备适配 */
@media (max-width: 380px) {
    body.mobile-mode #latest-lottery-info .lottery-number {
        width: 42px;
        height: 42px;
        font-size: 2.0rem;
        margin: 0 2px;
        flex-shrink: 0 !important;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-sum {
        width: 50px;
        height: 50px;
        font-size: 2.0rem;
        padding: 6px;
        margin: 0 2px;
        flex-shrink: 0 !important;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-operator {
        font-size: 1.7rem;
        margin: 0 3px;
        flex-shrink: 0 !important;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-numbers {
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 8px 5px;
        display: flex !important;
        align-items: center !important;
    }
}

/* 超小屏幕移动设备适配 */
@media (max-width: 320px) {
    body.mobile-mode #latest-lottery-info .lottery-number {
        width: 38px;
        height: 38px;
        font-size: 1.8rem;
        margin: 1px;
        flex-shrink: 0 !important;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-sum {
        width: 44px;
        height: 44px;
        font-size: 1.7rem;
        margin: 1px;
        padding: 5px;
        flex-shrink: 0 !important;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-operator {
        font-size: 1.5rem;
        margin: 0 1px;
        flex-shrink: 0 !important;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-result-item {
        width: 38px;
        height: 38px;
        font-size: 1.2rem;
        flex-shrink: 0 !important;
    }
    
    body.mobile-mode #latest-lottery-info .lottery-numbers {
        padding: 5px 3px;
        flex-wrap: nowrap;
        overflow-x: auto;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* 统一字体样式 */