/* 导航栏右侧按钮样式 */
.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-numbers-container {
    border-radius: 8px;
}

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

/* 和值特殊处理 */
.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,
.lottery-scratch-container > .lottery-numbers,
.lottery-scratch-container > .lottery-row {
    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: #1565c0;
    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: 12px;
    padding-left: 12px;
    border-left: 1px solid #e5e7eb;
}

.lottery-result-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 1.8rem;
    font-weight: bold;
    color: white;
}

.lottery-result-item.big {
    background-color: #e53935 !important;
    color: white !important;
}

.lottery-result-item.small {
    background-color: #1e88e5 !important;
    color: white !important;
}

.lottery-result-item.odd {
    background-color: #1e88e5 !important;
    color: white !important;
}

.lottery-result-item.even {
    background-color: #e53935 !important;
    color: white !important;
}

/* 响应式调整 */
@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 {
        min-width: 40px;
        width: 40px;
        height: 40px;
        padding: 0 8px;
        font-size: 1.5rem;
    }

    .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: stretch;
        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: inline;
    }

    /* 按钮组紧凑显示 */
    .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: 63px;
        height: 63px;
        font-size: 2.5rem;
    }

    .lottery-sum {
        width: 63px;
        height: 63px;
        font-size: 2.5rem;
        padding: 0;
    }

    .lottery-operator {
        font-size: 2.1rem;
    }

    .lottery-result-item {
        width: 63px;
        height: 63px;
        font-size: 2.5rem;
    }
}

/* 倒计时样式微调 */
@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: 50px;
        height: 50px;
        font-size: 2rem;
        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.6rem;
        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;
    }
}

/* 统一字体样式 */
/* ============================================================
   最新开奖卡片 + 倒计时：改成跟 dd28 一样的简洁风格
   （放在文件最后，靠书写顺序覆盖掉前面那些旧的深色/圆形样式）
   ============================================================ */

.card.lottery-card-flat {
    border: 1px solid rgba(21, 101, 192, 0.25);
    border-radius: 12px;
    box-shadow: none;
    background: #fff;
}

.card-header.lottery-card-header-flat {
    background: transparent;
    color: #1f2937;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 12px 16px;
}

.card-header.lottery-card-header-flat .lottery-title-main {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

.card-header.lottery-card-header-flat .lottery-title-qihao {
    font-size: 0.85rem;
    color: #6b7280;
    margin-left: 6px;
}

.card-header.lottery-card-header-flat .header-main-btn {
    border-color: rgba(21, 101, 192, 0.4);
    color: #1565c0;
}

/* 倒计时盒子 */
.countdown-wrapper {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid rgba(21, 101, 192, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    max-width: none !important;
    width: 100%;
    height: 100%;
    padding: 14px 16px !important;
    box-sizing: border-box;
}

.countdown-wrapper::before {
    display: none !important;
}

.countdown-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.countdown-label {
    color: #6b7280 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center;
    gap: 5px;
    margin-bottom: 0 !important;
}

.countdown-label i {
    color: #1565c0;
    font-size: 0.95rem;
}

.countdown-qihao {
    font-size: 0.8rem;
    color: #9ca3af;
    white-space: nowrap;
}

.countdown-container {
    padding: 4px 0 !important;
    display: block !important;
}

.countdown-content {
    display: block !important;
    width: 100%;
}

.countdown {
    color: #1f2937 !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    letter-spacing: 0.02em !important;
    text-align: center;
    min-width: 0 !important;
}

.countdown-unit {
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0.55;
    margin: 0 2px;
}

.countdown.expiring {
    color: #dc3545 !important;
    text-shadow: none !important;
}

.countdown-sub-row {
    margin-top: 6px;
    text-align: center;
    font-size: 0.75rem;
    color: #9ca3af;
}

@media (max-width: 576px) {
    .countdown-wrapper {
        max-width: none !important;
        padding: 10px 12px !important;
    }

    .countdown {
        font-size: 1.7rem !important;
    }

    .countdown-label {
        font-size: 0.78rem !important;
    }

    .countdown-qihao {
        font-size: 0.7rem;
    }
}

/* 倒计时下方：约3.5分钟一期 / 开奖时间，以及进度条（跟 dd28 一致） */
.countdown-sub-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    text-align: left;
    font-size: 0.7rem;
    color: #9ca3af;
}

.countdown-progress {
    margin-top: 8px;
    height: 8px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.countdown-progress-bar {
    height: 100%;
    width: 0%;
    background: #1565c0;
    border-radius: 999px;
    transition: width 0.3s ease;
}

.countdown.expiring ~ .countdown-progress .countdown-progress-bar,
#countdown.expiring + .countdown-sub-row + .countdown-progress .countdown-progress-bar {
    background: #dc3545;
}

/* 标题区：改成"第XXXX期 日期时间"，不再显示"最新开奖"字样（跟 dd28 一致） */
.lottery-title-date {
    margin-left: 6px;
    font-size: 0.8rem;
    color: #9ca3af;
    font-weight: 400;
}

.lottery-title-qihao {
    font-size: 1rem;
    font-weight: 600;
    color: #1f2937;
}

/* 每个数字自己带一个浅灰底的圆角方块（跟 dd28 一致），不再是裸文字 */
.lottery-number {
    background: #f3f4f6 !important;
    border-radius: 8px;
}

body.mobile-mode #latest-lottery-info .lottery-number {
    background: #f3f4f6 !important;
    border-radius: 8px;
}

/* 咪牌按钮：改成跟 dd28 一样的小号灰色描边胶囊，不再是实心色徽章 */
.header-main-btn {
    border-radius: 999px !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #6b7280 !important;
    background: transparent !important;
    font-size: 0.75rem !important;
    padding: 4px 12px !important;
}

.header-main-btn:hover {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #374151 !important;
}

.header-main-btn .badge {
    background: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
    padding: 0 !important;
    margin-left: 4px !important;
    font-weight: 400 !important;
}

/* 整行（数字+大小单双）合并刮层容器 */
.lottery-row-container {
    border-radius: 8px;
}

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

.lottery-row {
    border-radius: 8px;
    /* 不设gap：.lottery-result自己已经有margin-left+padding-left+border-left
       做分隔线了，这里再加gap会跟那份间距叠加，导致整行比容器还宽，
       手机上最左边的数字和最右边的徽章会被裁掉。 */
}

/* 开奖结果：现在是独立的一个卡片，标题栏在卡片自己里面 */
.lottery-result-card {
    height: 100% !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
}

.lottery-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    gap: 8px;
    flex-wrap: wrap;
}

.lottery-result-card .lottery-info {
    padding: 14px 16px;
    flex: 1;
    display: flex;
    align-items: center;
}

.lottery-countdown-container {
    display: flex;
}

.lottery-countdown-container .countdown-wrapper {
    width: 100%;
}

/* 外层 col-md-12 单独用、没有配套的 .row，会带一份多余的左右内边距，
   导致跟上面导航栏对不齐——这里去掉，让两边贴齐上面的内容宽度。
   col-md-12还带了Bootstrap的float:left（本来是配合.row用的栅格），
   现在这个框挪到了算法按钮网格前面，浮动会让后面紧跟着的
   ul.nav-primary挤到右边、宽度变0，按钮全挤成一条竖着的窄条。
   这里去掉float，让它变成正常的块级元素。 */
.col-md-12:has(> .lottery-flex-container) {
    padding-left: 0 !important;
    padding-right: 0 !important;
    float: none !important;
    width: auto !important;
}

/* 倒计时/开奖结果两个框：按比例平分整行宽度，贴着两端对齐，
   中间不留死空隙，右边也不会被裁切（覆盖前面几处旧的 35%/60% 固定宽度）。 */
@media (min-width: 768px) {
    .lottery-flex-container {
        justify-content: flex-start !important;
        gap: 8px;
    }

    .lottery-countdown-container {
        flex: 0.85 1 0 !important;
        max-width: none !important;
        width: auto !important;
        margin-right: 0 !important;
    }

    .lottery-result-container {
        flex: 1.15 1 0 !important;
        max-width: none !important;
        width: auto !important;
    }
}

/* 两个框（倒计时、开奖结果）圆角改成跟上面"算法"按钮一样的圆角大小 */
.countdown-wrapper,
.card.lottery-card-flat {
    border-radius: 8px !important;
}

/* 组合/杀组/算法1-8/预测走势图切换条这类按钮格子，用的是"胶囊导航"
   样式（只有整个列表第一个、最后一个格子带圆角，中间全是直角），
   看起来每个格子圆角都不一样。统一改成每个格子4个角都是圆角，
   跟倒计时/开奖结果框一样的圆角大小(8px)。 */
.nav.nav-primary > li > a {
    border-radius: 8px !important;
}

/* 倒计时、开奖结果这两个框之前各自带自己的圆角+边框+阴影，中间还有
   8px的flex gap，所以总是看起来像断开的两个盒子。这里改成外层
   .lottery-flex-container 当一个整体的卡片（自己带圆角/边框/阴影），
   两个内层各自的圆角/边框/阴影都去掉，只留中间一条竖线分隔，
   看起来就是一个整体的框。 */
.lottery-flex-container {
    gap: 0 !important;
    border: 1.5px solid rgba(21, 101, 192, 0.45) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(21, 101, 192, 0.12) !important;
    overflow: hidden !important;
    background: #fff !important;
    margin-bottom: 16px !important;
}

.countdown-wrapper,
.card.lottery-card-flat {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 不要中间的竖线分隔，也不要"设置/咪牌"那一行下面的横线，
   两个框合并后这两条线看起来很多余。 */
.lottery-countdown-container {
    border-right: none !important;
}

.lottery-result-header {
    border-bottom: none !important;
}

/* 桌面端宽屏下，整块内容区（导航按钮/倒计时开奖框/表格）挤在中间
   一个800px的窄条里显得太小。这里用zoom整体放大，比单独改字号
   简单可靠——所有文字、按钮、间距、点击区域都是等比例一起变大的，
   不会出现"字变大了但按钮框没跟着变大"的错位。手机端(<992px)不受影响。 */
@media (min-width: 992px) {
    .list.center-block {
        max-width: 900px !important;
        zoom: 1.3;
    }
}

/* 倒计时卡片里几处标签字太小，标记的地方统一改大加粗：
   "下一期倒计时"、"正在开奖中..."、"第XXXX期"（倒计时旁边和标题栏里的）、
   日期、"约3.5分钟一期"/"开奖 --:--:--"、"设置"/"咪牌 关闭"按钮。 */
.countdown-label {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
}

#countdown-status {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
}

.countdown-qihao {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.lottery-title-qihao {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
}

.lottery-title-date {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.countdown-sub-row {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

.header-main-btn {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.countdown {
    font-size: 2.8rem !important;
}

.countdown-unit {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.header-main-btn .badge {
    font-weight: 700 !important;
}

/* 咪牌开启后，历史表最新一条已开奖记录的"开奖"/"对错"两格用这个条形
   遮罩盖住，"预测"格不遮。 */
.jnd-row-mask {
    display: inline-block;
    width: 100%;
    min-width: 32px;
    height: 1.3em;
    border-radius: 4px;
    background: linear-gradient(to right, rgba(64, 64, 64, .85), rgba(115, 115, 115, .75), rgba(64, 64, 64, .85));
    vertical-align: middle;
}

/* 组合/杀组/算法1-8/预测走势图这些按钮：字体改大加粗，没选中时字是蓝色的
   （原来是默认黑色），选中的那个背景已经是蓝底了，文字保持白色不受影响。 */
.nav.nav-primary > li > a {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #1565c0 !important;
    border-color: #1565c0 !important;
}

.nav.nav-primary > li.active > a {
    color: #fff !important;
}

/* 倒计时数字再加大一档，做成全页最大最粗的字 */
.countdown {
    font-size: 3.6rem !important;
    font-weight: 900 !important;
}

.countdown-unit {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
}

/* ============================================================
   用户要求"一模一样用dd28的源码"：这张倒计时+开奖结果卡片，
   把之前几次"改大加粗"的临时调整，按 dd28 真实源码
   （Countdown.tsx / LotteryCard.tsx / LotteryNumbers.tsx）里
   实际用的字号/字重/颜色/间距覆盖回去。放在文件最后生效。
   ============================================================ */

/* dd28是两个独立的卡片、中间留白间隔，不是合并成一个大框 */
.lottery-flex-container {
    gap: 12px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: transparent !important;
    margin-bottom: 16px !important;
}

.lottery-countdown-container {
    border-right: none !important;
}

.countdown-wrapper,
.card.lottery-card-flat {
    border: 1px solid rgba(21, 101, 192, 0.25) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.lottery-result-header {
    border-bottom: none !important;
}

.countdown-label {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
}

.countdown-label i {
    color: #1565c0 !important;
}

.countdown-qihao {
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
}

#countdown-status,
.countdown {
    font-size: 2.5rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.countdown-unit {
    font-size: 1.1rem !important;
    font-weight: 500 !important;
    opacity: 0.5;
    color: inherit !important;
}

.countdown-sub-row {
    font-size: 0.6875rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
}

.lottery-title-qihao {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.lottery-title-date {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #9ca3af !important;
}

.header-main-btn {
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 400 !important;
    padding: 4px 10px !important;
}

.header-main-btn .badge {
    font-weight: 400 !important;
}

@media (max-width: 576px) {
    #countdown-status,
    .countdown {
        font-size: 1.75rem !important;
    }
}

/* 手机端堆叠时，.lottery-countdown-container 有条老的margin-bottom:20px，
   跟 .lottery-flex-container 新加的 gap:12px 叠在一起变成32px的大空隙，
   这里清零，只用gap控制间距。 */
.lottery-countdown-container {
    margin-bottom: 0 !important;
}

/* 倒计时卡片和开奖结果卡片之间的间距要跟算法按钮格子之间的间距
   （几乎贴在一起，只有圆角带出来的一条细缝）一样，不要留一大块空白 */
.lottery-flex-container {
    gap: 0 !important;
}

/* "正在开奖中..."要用红色。之前加的 #countdown-status{color:#1f2937}
   优先级比老的 .countdown.expiring{color:#dc3545} 更高（ID选择器），
   开奖中的时候反而被盖成灰色了，这里用更高优先级的选择器改回红色。 */
#countdown.expiring #countdown-status {
    color: #dc3545 !important;
}

/* 这几处标签字太小了，加大加粗（布局/颜色不变，只改字号字重） */
.countdown-label {
    font-size: 1rem !important;
    font-weight: 700 !important;
}

.countdown-qihao {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.countdown-sub-row {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

.lottery-title-qihao {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

.lottery-title-date {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
}

.header-main-btn {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    padding: 5px 12px !important;
}

.header-main-btn .badge {
    font-weight: 700 !important;
}

/* 手机端(<768px)数字块/和值块/大小单双徽章也统一改成一样大、并整体
   放大一档（跟桌面端68px那次改法同理），覆盖掉前面几处不统一的
   40/48px手机规则。48px会导致整行比容器还宽、右边被裁掉，
   改成44px，同时把结果分隔那边的多余间距缩小腾出空间，保证不溢出 */
@media (max-width: 767px) {
    .lottery-number,
    .lottery-sum,
    .lottery-result-item,
    body.mobile-mode #latest-lottery-info .lottery-number,
    body.mobile-mode #latest-lottery-info .lottery-sum,
    body.mobile-mode #latest-lottery-info .lottery-result-item {
        width: 44px !important;
        height: 44px !important;
        font-size: 26px !important;
        padding: 0 !important;
    }

    .lottery-result {
        margin-left: 6px !important;
        padding-left: 6px !important;
        gap: 6px !important;
    }

    .lottery-operator {
        margin: 0 1px !important;
    }
}

/* 屏幕更宽的手机（414/428/440px这些机型）卡片本身更宽，前面那档
   留了一截空白没用上，按屏幕宽度分级再放大一点，字号也跟着按比例
   加大（不只是格子变大，数字本身也要更粗更明显），都量过不会溢出 */
@media (min-width: 414px) and (max-width: 767px) {
    .lottery-number,
    .lottery-sum,
    .lottery-result-item,
    body.mobile-mode #latest-lottery-info .lottery-number,
    body.mobile-mode #latest-lottery-info .lottery-sum,
    body.mobile-mode #latest-lottery-info .lottery-result-item {
        width: 48px !important;
        height: 48px !important;
        font-size: 28px !important;
    }
}

@media (min-width: 428px) and (max-width: 767px) {
    .lottery-number,
    .lottery-sum,
    .lottery-result-item,
    body.mobile-mode #latest-lottery-info .lottery-number,
    body.mobile-mode #latest-lottery-info .lottery-sum,
    body.mobile-mode #latest-lottery-info .lottery-result-item {
        width: 51px !important;
        height: 51px !important;
        font-size: 30px !important;
    }
}

@media (min-width: 440px) and (max-width: 767px) {
    .lottery-number,
    .lottery-sum,
    .lottery-result-item,
    body.mobile-mode #latest-lottery-info .lottery-number,
    body.mobile-mode #latest-lottery-info .lottery-sum,
    body.mobile-mode #latest-lottery-info .lottery-result-item {
        width: 52px !important;
        height: 52px !important;
        font-size: 30px !important;
    }
}

/* 继续加大加粗这几处标签 */
.countdown-label {
    font-size: 1.15rem !important;
}

.countdown-qihao {
    font-size: 1.1rem !important;
}

.countdown-sub-row {
    font-size: 1rem !important;
}

.lottery-title-qihao {
    font-size: 1.3rem !important;
}

.lottery-title-date {
    font-size: 1.1rem !important;
}

.header-main-btn {
    font-size: 1.05rem !important;
    padding: 6px 14px !important;
}

/* 走势图页(zs.php)：跟 dd28 的 TextTrendTable.tsx 配色完全一致，
   14个属性列各自固定颜色（不是简单的红/蓝/黑三色分组），类型文字也改成一样的配色 */
/* 这些都要 !important：bootstrap.min.css 自带
   .table-striped>tbody>tr:nth-of-type(odd)>*{color:var(--bs-table-striped-color)}
   这条规则选择器用了伪类，优先级比单个class高，不管样式表加载顺序谁前谁后都会把
   下面这些颜色盖掉——实测隔行文字变黑就是它干的，必须加!important才能压过去 */
.trend-v-red {
    color: #ef4444 !important;
    font-weight: 700;
}

.trend-v-orange {
    color: #f97316 !important;
    font-weight: 700;
}

.trend-v-blue {
    color: #3b82f6 !important;
    font-weight: 700;
}

.trend-v-emerald {
    color: #10b981 !important;
    font-weight: 700;
}

.trend-v-cyan {
    color: #06b6d4 !important;
    font-weight: 700;
}

.trend-v-gray {
    color: #6b7280 !important;
    font-weight: 700;
}

.trend-v-purple {
    color: #a855f7 !important;
    font-weight: 700;
}

.trend-v-green {
    color: #22c55e !important;
    font-weight: 700;
}

/* "未开间隔"那一行单独一套规则：按数值本身上色，不是按列固定颜色——
   刚好命中(0)=蓝，连续未出满5期(>=5)=红，其余不特别标色 */
.trend-miss-hot {
    color: #2563eb !important;
    font-weight: 700;
}

.trend-miss-over {
    color: #ef4444 !important;
    font-weight: 700;
}

.trend-miss-mid {
    color: #6b7280 !important;
    font-weight: 700;
}

.trend-pattern-dui {
    color: #f97316 !important;
    font-weight: 700;
}

.trend-pattern-za {
    color: #16a34a !important;
    font-weight: 700;
}

.trend-pattern-shun {
    color: #f59e0b !important;
    font-weight: 700;
}

.trend-pattern-bao {
    color: #dc2626 !important;
    font-weight: 700;
}

.trend-miss-row th,
.trend-miss-row td {
    background: #f9fafb;
    font-weight: 700;
}

.hist-equation {
    font-family: inherit;
    white-space: nowrap;
}

.hist-eq-op {
    color: #9ca3af;
    margin: 0 1px;
}

.hist-eq-sum {
    font-weight: 700;
    color: #111827;
}

.trend-table th,
.trend-table td {
    text-align: center;
    padding: 6px 4px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.trend-table {
    min-width: 780px;
}

/* 走势图页：文本走势/图形走势 tab，跟 yu28.top 一样的路子图(大小路) */
.trend-view-tabs {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}

.trend-view-tab {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #374151;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

.trend-view-tab.active {
    background: #1565c0;
    border-color: #1565c0;
    color: #fff;
}

.road-panel {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.road-panel-title {
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
    text-align: left;
}

.road-panel-title-gap {
    margin-top: 20px;
}

.road-panel-sub {
    font-size: 0.75rem;
    color: #9ca3af;
    font-weight: 400;
    margin-left: 6px;
}

.road-fixed-grid {
    display: grid;
    gap: 3px;
    min-width: 480px;
}

.road-fixed-cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.road-bead {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}

.road-bead.road-tone-red {
    background: #e53935;
}

.road-bead.road-tone-blue {
    background: #1e88e5;
}

.road-text {
    font-size: 0.85rem;
    font-weight: 700;
}

.road-text.road-tone-red {
    color: #e53935;
}

.road-text.road-tone-blue {
    color: #1e88e5;
}

/* 图形走势：新增的橙/绿两种tone（组合路/龙虎路要用），
   还有次级tab（走势露珠/线型图/条形图、大小路/单双路/组合路/龙虎路）、
   宽气泡(2字的小单/大双等)、和值线型图/条形图 */
.road-bead.road-tone-orange,
.road-text.road-tone-orange {
    background: #f59e0b;
    color: #fff;
}

.road-text.road-tone-orange {
    background: transparent;
    color: #f59e0b;
}

.road-bead.road-tone-green,
.road-text.road-tone-green {
    background: #16a34a;
    color: #fff;
}

.road-text.road-tone-green {
    background: transparent;
    color: #16a34a;
}

.road-bead-wide {
    width: 92%;
    border-radius: 8px;
    font-size: 0.68rem;
}

.trend-view-tabs.road-type-tabs,
.trend-view-tabs.road-style-tabs {
    margin-top: 0;
    margin-bottom: 14px;
}

.trend-view-tab {
    font-size: 0.85rem;
    padding: 6px 10px;
}

/* 和值线型图 */
.sum-chart-svg {
    width: 100%;
    min-width: 560px;
    height: auto;
}

.sum-chart-grid {
    stroke: #e5e7eb;
    stroke-width: 1;
}

.sum-chart-threshold {
    stroke: #93c5fd;
    stroke-width: 1;
    stroke-dasharray: 4 3;
}

.sum-chart-line {
    fill: none;
    stroke: #6b7280;
    stroke-width: 1.5;
}

.sum-chart-pt-blue {
    fill: #1e88e5;
}

.sum-chart-pt-green {
    fill: #16a34a;
}

.sum-chart-label {
    font-size: 11px;
    font-weight: 700;
}

.sum-chart-label-red {
    fill: #e53935;
}

.sum-chart-label-black {
    fill: #111827;
}

.sum-chart-axis {
    font-size: 10px;
    fill: #9ca3af;
}

.sum-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    font-size: 0.8rem;
    color: #374151;
    margin-bottom: 10px;
}

.sum-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sum-chart-legend-red {
    color: #e53935;
}

.sum-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.sum-legend-blue {
    background: #1e88e5;
}

.sum-legend-green {
    background: #16a34a;
}

/* 和值条形图 */
.sum-bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-width: 560px;
    height: 220px;
    padding-top: 20px;
}

.sum-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-width: 28px;
}

.sum-bar-label {
    font-size: 0.7rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.sum-bar-label-red {
    color: #e53935;
}

.sum-bar-label-black {
    color: #111827;
}

.sum-bar-track {
    flex: 1;
    width: 60%;
    display: flex;
    align-items: flex-end;
}

.sum-bar-fill {
    width: 100%;
    border-radius: 4px 4px 0 0;
}

.sum-bar-fill-blue {
    background: #90caf9;
}

.sum-bar-fill-green {
    background: #a5d6a7;
}

.sum-bar-x {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 4px;
}

/* 页面根字号是10px(不是常见的16px)，之前用rem设置这几个标签，
   实际渲染出来比预想的小很多（1.1rem只有11px）。这里改用px直接
   写死，参照pc28.world实际再放大加粗一档。 */
.countdown-qihao {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.countdown-sub-row {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.lottery-title-date {
    font-size: 14px !important;
    font-weight: 700 !important;
}

.lottery-title-qihao {
    font-size: 16px !important;
    font-weight: 700 !important;
}

.header-main-btn {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 6px 14px !important;
}

.countdown-label {
    font-size: 15px !important;
    font-weight: 700 !important;
}

/* 手机端"设置/咪牌"按钮跟期号日期挤在一起放不下，会掉到第二行。
   缩小一点日期字号和按钮，让它们保持在同一行不换行。 */
@media (max-width: 767px) {
    .lottery-result-header {
        flex-wrap: nowrap !important;
    }

    .lottery-title-qihao {
        font-size: 13px !important;
        white-space: nowrap;
    }

    .lottery-title-date {
        font-size: 10px !important;
        white-space: nowrap;
        margin-left: 4px !important;
    }

    .header-main-btn {
        font-size: 14px !important;
        font-weight: 700 !important;
        padding: 5px 9px !important;
    }

    .card-title.mb-0 {
        min-width: 0;
        overflow: hidden;
    }
}

/* 历史表第2列“时间”不展示（列顺序：期号/时间/开奖/预测/对错），只隐藏列，不动 DOM 结构和里面的 #time 倒计时逻辑，JS 照常跑。
   注意排除 .trend-table（走势图页 zs.php）：那张表第2列是“开奖号码”，不是“时间”，不能一起藏。 */
.table-condensed:not(.trend-table) > thead > tr > th:nth-child(2),
.table-condensed:not(.trend-table) > tbody > tr > td:nth-child(2) {
    display: none !important;
}

/* 历史表"预测"和"对错"两列的徽章字体太小(11px)又不粗，改大加粗 */
.table-condensed td .label {
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
}

/* 倒计时卡片整个不要了，开奖结果卡片拉长铺满整行（之前是跟倒计时
   卡片按比例平分宽度的，现在倒计时那半边的DOM都删掉了，这里让
   开奖结果单独占满一整行宽度）。 */
.lottery-result-container {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
}

/* 开奖结果卡片下面、预测/走势图切换条上面，补一个简单的小倒计时文字
   （不要整张卡片，只要"1分18秒"这样一行字），复用倒计时卡片原来
   算好的 _cdM/_cdS 那套逻辑，只是多写一个目标元素。 */
.jnd-mini-countdown {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
    padding: 6px 0 10px;
}

.jnd-mini-countdown .countdown-unit {
    font-size: 0.85rem;
    font-weight: 400;
    color: #6b7280;
}

/* 手机端没有桌面端那个1.3倍zoom，页面根字号又是10px，1.1rem只有11px，
   小倒计时看起来比桌面端小很多。手机端(<992px)单独放大到跟桌面端
   放大后差不多的实际大小。 */
@media (max-width: 991px) {
    .jnd-mini-countdown {
        font-size: 1.6rem;
    }
    .jnd-mini-countdown .countdown-unit {
        font-size: 1.2rem;
    }
}

/* 开奖结果卡片：桌面端外层.lottery-result-container是flex+居中，卡片
   自己只按内容宽度收缩，两边留白，跟下面导航/表格左右对不齐。让卡片
   撑满整行；另外顶部留一点点间隙，不要贴着最上面的顶栏。 */
.lottery-result-container .lottery-result-card {
    width: 100% !important;
    flex: 1 1 100% !important;
}

.lottery-flex-container {
    margin-top: 10px !important;
}

/* 小倒计时：上面加一行"下一期倒计时 第XXXX期"（蓝色时钟图标+灰字），
   倒计时数字加大加粗。手机端也用同一档，不再单独缩小。 */
.jnd-mini-countdown-wrap {
    text-align: center;
    padding: 6px 0 10px;
}

.jnd-mini-countdown-label {
    font-size: 1.3rem;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.6;
}

.jnd-mini-countdown-label i {
    color: #1565c0;
}

.jnd-mini-countdown {
    font-size: 2.6rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
    padding: 0 !important;
    line-height: 1.2;
}

.jnd-mini-countdown .countdown-unit {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #6b7280 !important;
    opacity: 1;
}

@media (max-width: 991px) {
    .jnd-mini-countdown {
        font-size: 2.6rem !important;
    }
    .jnd-mini-countdown .countdown-unit {
        font-size: 1.5rem !important;
    }
}

/* 小倒计时外面加一个框，边框/圆角跟上面的开奖结果卡片一样 */
.jnd-mini-countdown-wrap {
    border: 1px solid rgba(21, 101, 192, 0.25);
    border-radius: 12px;
    background: #fff;
    padding: 10px 0 12px;
    margin: 0 0 12px;
}

/* 小倒计时挪进开奖结果卡片里（标题栏和数字行之间），不再单独一个框，
   去掉外框和外边距，跟着卡片居中。 */
.lottery-result-card .jnd-mini-countdown-wrap {
    border: none;
    border-radius: 0;
    background: transparent;
    margin: 0;
    padding: 0 0 4px;
}

/* 开奖结果卡片标题栏的"第XXXX期"和日期时间加大加粗。
   手机上一行放不下（后面还有设置/咪牌两个按钮），窄屏改成期号在上、
   日期在下两行叠着放，不然按钮会被挤到下一行。 */
.lottery-title-qihao {
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    color: #111827 !important;
}

.lottery-title-date {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
}

@media (max-width: 576px) {
    .lottery-result-header .card-title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .lottery-title-qihao {
        font-size: 1.7rem !important;
    }
    .lottery-title-date {
        font-size: 1.2rem !important;
    }
}

/* 手机端期号和日期上下叠着放时，日期前面那点左边距要去掉，
   不然日期比上面的"第"字往右缩进一点，左边对不齐。 */
@media (max-width: 576px) {
    .lottery-result-header .card-title .lottery-title-date {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}

/* 算法按钮里命中率最高的那个：右上角带一个红色小"荐"字，像平方符号一样
   （只有红字，没有底色/圆圈）。宽度设成0，不占位置，不影响按钮里
   "算法N"的居中和按钮高度、也不会换行。 */
.jnd-rec-badge {
    display: inline-block;
    position: relative;
    top: -0.5em;
    width: 0;
    overflow: visible;
    white-space: nowrap;
    margin: 0 0 0 1px;
    padding: 0;
    background: none;
    border-radius: 0;
    color: #e53935;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: baseline;
}

/* 选中(蓝底)的那个按钮上，红字看不清，加一圈白色描边 */
.nav.nav-primary > li.active .jnd-rec-badge {
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
}

/* 算法按钮里，算法名下面一行显示最近30期胜率 */
.jnd-algo-rate {
    display: block;
    margin-top: 1px;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.3;
    color: #6b7280;
}

.nav.nav-primary > li.active .jnd-algo-rate {
    color: rgba(255, 255, 255, 0.9);
}

/* 胜率文字：黑色加粗（选中的蓝底按钮上也是黑色） */
.jnd-algo-rate,
.nav.nav-primary > li.active .jnd-algo-rate {
    color: #000 !important;
    font-weight: 700 !important;
}

/* "算法N"名字再加粗一档：原来就是700，中文字体没有更粗的字重，
   所以用描边把笔画加粗；胜率行和"荐"字不描边。 */
.nav.nav-primary > li > a:has(.jnd-algo-rate) {
    font-weight: 900 !important;
    -webkit-text-stroke: 0.4px currentColor;
}

.nav.nav-primary > li > a:has(.jnd-algo-rate) .jnd-algo-rate,
.nav.nav-primary > li > a:has(.jnd-algo-rate) .jnd-rec-badge {
    -webkit-text-stroke: 0;
}

/* 胜率文字：红色，不加粗（蓝底的选中按钮上加一圈白色描边，不然红字看不清） */
.jnd-algo-rate,
.nav.nav-primary > li.active .jnd-algo-rate {
    color: #e53935 !important;
    font-weight: 400 !important;
}

.nav.nav-primary > li.active .jnd-algo-rate {
    text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff;
}

/* "算法N"名字不加粗（去掉之前的描边加粗，字重恢复成常规） */
.nav.nav-primary > li > a:has(.jnd-algo-rate) {
    font-weight: 400 !important;
    -webkit-text-stroke: 0 !important;
}

/* "算法N"名字恢复成原来的样子：跟其它按钮一样的常规粗体(700)，不描边。 */
.nav.nav-primary > li > a:has(.jnd-algo-rate) {
    font-weight: 700 !important;
    -webkit-text-stroke: 0 !important;
}

/* 倒计时数字前面加"下一期倒计时"，跟数字同一行居中 */
.jnd-mini-countdown-wrap {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    flex-wrap: nowrap;
}

.jnd-mini-countdown-tip {
    font-size: 1.4rem;
    font-weight: 700;
    color: #374151;
    white-space: nowrap;
}

/* 胜率文字：改回黑色，稍微淡一点（深灰），不加粗；去掉蓝底按钮上的白描边 */
.jnd-algo-rate,
.nav.nav-primary > li.active .jnd-algo-rate {
    color: #3a3a3a !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

/* 胜率文字：纯黑，不加粗 */
.jnd-algo-rate,
.nav.nav-primary > li.active .jnd-algo-rate {
    color: #000 !important;
    font-weight: 400 !important;
    text-shadow: none !important;
}

/* 顶部logo栏下面的广告横幅：跟着容器宽度缩放，不要固定死高度，
   免得手机上被拉伸变形（GIF原图很宽，比例大约1200:180）。 */
.jnd-top-banner {
    /* 挪进了.list.center-block里面，跟倒计时/开奖卡片、按钮格子用同一个
       容器宽度（桌面端会跟着1.3倍zoom一起放大），不用自己再限制宽度了，
       否则会比下面的内容窄，两边多出空隙。 */
    width: 100%;
    margin: 6px 0 10px;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.jnd-top-banner-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ============================================================
   分类按钮(组合/杀组/大小/...)和算法按钮(算法1~N 胜率%)
   从蓝色胶囊样式改成卡片网格样式（参考 dabai28.com 的UI）。
   两组按钮公用同一个 ul.nav.nav-primary 结构，用是否含有
   .jnd-algo-rate 子元素区分"算法按钮组"和"分类按钮组"。
   放在文件最后，靠后面优先级覆盖前面所有旧的蓝色胶囊样式。
   ============================================================ */

ul.nav.nav-primary {
    display: flex !important;
    flex-wrap: wrap !important;
    list-style: none !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
}

ul.nav.nav-primary > li {
    /* 不强制写死宽度——不同导航组的 li 数量不一样（2个一行的
       预测/走势图切换条、4个一行的分类/算法按钮），各自已经在
       HTML 里带了对应的 width:50%/25% 内联样式，这里统一写死
       25% 会把只有2个格子的切换条也挤成25%，右边空出一大截。 */
    box-sizing: border-box !important;
}

ul.nav.nav-primary > li > a {
    display: block !important;
    text-align: center !important;
}

/* 分类按钮：整体一张白底圆角卡片，内部用细线分隔格子，
   不要蓝色边框/蓝底选中。 */
ul.nav.nav-primary:not(:has(.jnd-algo-rate)) {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
}

ul.nav.nav-primary:not(:has(.jnd-algo-rate)) > li {
    border-right: 1px solid #f0f0f0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

ul.nav.nav-primary:not(:has(.jnd-algo-rate)) > li:nth-child(4n),
ul.nav.nav-primary:not(:has(.jnd-algo-rate)) > li:last-child {
    /* :last-child 补一个——像预测/走势图这种只有2个格子的切换条，
       总数不是4的倍数，最后一个格子永远轮不到第4列，光靠
       nth-child(4n)去不掉它右边那条多余的分隔线。 */
    border-right: none !important;
}

ul.nav.nav-primary:not(:has(.jnd-algo-rate)) > li:nth-last-child(-n+4) {
    border-bottom: none !important;
}

ul.nav.nav-primary:not(:has(.jnd-algo-rate)) > li > a {
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #111827 !important;
    font-weight: 700 !important;
    padding: 11px 4px !important;
}

ul.nav.nav-primary:not(:has(.jnd-algo-rate)) > li.active > a {
    /* 切换条/分类选中态：不要粉色底，纯蓝字（算法按钮选中态不受影响，
       那边是单独的 :has(.jnd-algo-rate) 规则）。 */
    background: transparent !important;
    color: #1565c0 !important;
}

/* 算法按钮：卡片的背景/边框/阴影这些视觉效果，改成用一个纯装饰性
   的 ::before 伪元素来画，不参与布局（position:absolute + 负
   z-index，脱离文档流）。li/a 本身精确恢复成跟分类网格一模一样的
   盒模型（宽度25%、零padding零margin），布局层面完全不可能跑偏——
   之前不管用 grid的gap还是margin/padding凑间距，在这个页面
   （zoom:1.3缩放）下都渲染错位、顺序错乱，干脆不让"留间距"这件事
   碰布局，只让它停留在纯视觉层。 */
ul.nav.nav-primary:has(.jnd-algo-rate) {
    display: flex !important;
    flex-wrap: wrap !important;
}

ul.nav.nav-primary:has(.jnd-algo-rate) > li {
    width: 25% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
}

ul.nav.nav-primary:has(.jnd-algo-rate) > li > a {
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #111 !important;
    padding: 13px 7px !important;
    box-sizing: border-box !important;
}

ul.nav.nav-primary:has(.jnd-algo-rate) > li > a::before {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    inset: 3px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
}

ul.nav.nav-primary:has(.jnd-algo-rate) > li.active > a::before {
    background: #fff5f5 !important;
    border-color: #f3b8b8 !important;
}

/* ============================================================
   历史记录表也改成卡片风格（参考截图）：表头浅灰粉底+红字居中，
   数据行去掉 Bootstrap 自带的斑马纹，改成白底+行间细线分隔，
   所有格子居中对齐。
   ============================================================ */

.table-condensed > thead > tr > th {
    background: #f7f3f3 !important;
    color: #e53935 !important;
    text-align: center !important;
    font-weight: 700 !important;
    padding: 10px 4px !important;
    border-bottom: 1px solid #eee !important;
    border-top: none !important;
}

.table-condensed > tbody > tr > td {
    text-align: center !important;
    vertical-align: middle !important;
    padding: 10px 4px !important;
    border-top: none !important;
    border-bottom: 1px solid #f2f2f2 !important;
}

/* 取消 table-striped 自带的斑马纹，跟参考图一样全白底 */
.table-striped.table-condensed > tbody > tr:nth-of-type(odd) > td,
.table-striped.table-condensed > tbody > tr:nth-of-type(even) > td {
    background-color: #fff !important;
}

.table-condensed {
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

/* 预测/对错徽章改成浅色半透明底+同色文字（参考截图的"半透"风格），
   不要原来 Bootstrap 默认的实心红/蓝底+白字。只改历史表里的徽章，
   不动 .label-danger/.label-primary 这两个类在别处的默认样式。 */
.table-condensed td .label.label-danger {
    background: rgba(229, 57, 53, 0.12) !important;
    color: #e53935 !important;
}

.table-condensed td .label.label-primary {
    background: rgba(21, 101, 192, 0.12) !important;
    color: #1565c0 !important;
}

/* 算法按钮里的文字没居中（"算法1"和"胜率83%"贴在卡片左边）——
   显式再钉一遍 text-align，不依赖继承，避免被别的规则影响。
   宽度不在这里写死100%——跟卡片自己的 margin/width:calc(100%-6px)
   冲突，宽度由那条规则统一管。 */
ul.nav.nav-primary:has(.jnd-algo-rate) > li > a {
    text-align: center !important;
}

ul.nav.nav-primary:has(.jnd-algo-rate) > li > a .jnd-algo-rate {
    text-align: center !important;
}



ul.nav.nav-primary:has(.jnd-algo-rate) > li.active > a,
ul.nav.nav-primary:has(.jnd-algo-rate) > li.active > a .jnd-algo-rate {
    color: #000 !important;
}

.table-condensed > thead > tr > th {
    color: #000 !important;
}

/* 走势图历史表翻页（跟 dd28 一样：上一页/下一页箭头 + 当前/总页数 + 跳转） */
.trend-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 0;
    flex-wrap: wrap;
}
.trend-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
}
.trend-page-btn.disabled {
    pointer-events: none;
    opacity: 0.4;
}
.trend-page-info {
    font-size: 14px;
    color: #666;
    min-width: 50px;
    text-align: center;
}
.trend-page-jump {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.trend-page-input {
    width: 56px;
    height: 32px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
}