/* 
  全量色彩更新版 
  主色调：#0a5cda (蓝色)
  标题背景：images/title-bg.jpg
  2026 布局升级版：修复容器溢出、重叠，完美自适应手机高度
*/

/* 🌐 全局初始化 */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    min-height: 100%; 
    font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    font-size: 14px; 
    background: #f5f5f5; 
} 

html { 
    scroll-padding-top: 160px; 
} 

a { 
    text-decoration: none; 
    color: inherit;
} 

.container { 
    width: 100%; 
    max-width: 720px; 
    margin: 0 auto; 
} 

.box { 
    background: #fff; 
} 

.box.ad p { 
    margin: 0; 
    padding: 0; 
} 

.box img { 
    width: 100%; 
    height: auto;
    display: block;
} 

/* 🌈 1. 顶图区域优化 */
.menuicon { 
    background: rgba(10, 92, 218, 0.1); 
    width: 100%; 
    display: block; 
    margin: 0; 
    padding: 0; 
    border-bottom: 1px solid #0a5cda; 
} 

.menuicon img { 
    width: 100%; 
    height: auto; 
    display: block; 
} 

/* 🚩 2. 日期背景优化 */
.riqi { 
    min-height: 28px; 
    line-height: 28px; 
    text-align: center; 
    font-weight: 700; 
    background: #0a5cda; 
    color: #ffffff; 
    border-radius: 5px; 
    margin: 8px 6px; 
    font-size: 11pt; 
} 

/* 🔳 3. 预测按钮区块 (Grid 5等分) */
.predict-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px 5px;
    padding: 12px 6px;
    background-color: #0a5cda;
    width: 100%;
    margin: 10px 0;
}

.predict-btn {
    background: linear-gradient(to bottom, #2b77ee, #0849ae);
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 8px 0;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: block;
    white-space: nowrap;
}

/* 🏃 4. 蚂蚁线动画边框容器 */
.rememberdomain { 
    margin: 10px 5px; 
    display: block; 
    border: .5em solid transparent; 
    background: linear-gradient(#fff, #fff) padding-box, 
                repeating-linear-gradient(-45deg, #0a5cda, #0a5cda 12.5%, transparent 0, transparent 25%, #333 0, #000 37.5%, transparent 0, transparent 50%) 0 / 1.5em 1.5em; 
    animation: ants 12s linear infinite; 
    will-change: background-position;
    box-shadow: 0 0 5px #999; 
    border-radius: 5px; 
} 

@keyframes ants {
    from { background-position: 0 0; }
    to { background-position: 1.5em 1.5em; }
}

.rememberdomain table { 
    width: 100%; 
} 

.rememberdomain td { 
    border: 1px solid #ededed; 
    padding: 6px; 
} 

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

.swiper-nav { 
    text-align: center; 
    color: #fff; 
    font-weight: bold; 
} 

.swiper-nav .swiper-slide { 
    width: 110px !important; 
    padding: 5px 0; 
    color: #303133; 
    font-size: 13px; 
    font-weight: bold; 
    border-radius: 2px; 
    border-right: 1px solid #ededed; 
} 

/* 🔵 导航激活状态 */
.swiper-nav .active-nav { 
    background: #0a5cda; 
    color: #fff; 
} 

/* 📌 大标题栏：使用 images/title-bg.jpg 背景图 */
.tit { 
    font-size: 18px !important; 
    color: #fff !important; 
    line-height: 42px !important; 
    box-shadow: 0 10px 14px -7px rgba(10, 92, 218, 0.4); 
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); 
    background: url('../images/title-bg.jpg') no-repeat center center / 100% 100% !important; 
    font-weight: bold; 
    text-align: center; 
} 

/* 🔍 表格边框控制 */
.border1 td { border: 1px solid rgb(0, 112, 192); padding: 7px 0; } 
.border2 td { border: 1px solid #ddd7d7; padding: 7px 0; } 
.border3 td { border: 1px solid rgb(112, 48, 160); padding: 7px 0; } 
.border4 td { border: 1px solid #0a5cda; padding: 7px 0; } 

.border1 td p, .border2 td p, .border3 td p, .border4 td p { 
    margin: 0; 
} 

.titsle { 
    font-size: 15px; 
    font-weight: bold; 
} 

/* 🔳 5. 底部分页导航栏 */
.tab-nav {
    display: flex;
    width: 100%;
    border-top: 2px solid #109121;
    border-bottom: 1px solid #ddd;
    background: #fff;
    margin: 15px 0;
    padding-bottom: env(safe-area-inset-bottom);
}

.tab-item {
    flex: 1;
    text-align: center;
    padding: 12px 0;
    font-size: 14px;
    font-weight: bold;
    color: #333;
    border-right: 1px solid #eee;
    cursor: pointer;
    position: relative;
}

.tab-item:last-child {
    border-right: none;
}

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

.tab-item.active::before,
.tab-item.active::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #109121;
}

.tab-item.active::before { left: 0; }
.tab-item.active::after { right: 0; }

/* 综合资料网格区块 */
.zhzl { 
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    margin: 10px 0 20px 0; 
} 

.zhzl .item { 
    width: 25%; 
    padding: 2px 3px; 
} 

.zhzl a { 
    line-height: 40px; 
    text-align: center; 
    border: 1px solid #ccc; 
    background: #fff; 
    border-radius: 5px; 
    display: block; 
    color: #333; 
    cursor: pointer; 
    transition: all 0.3s;
} 

.zhzl a:hover {
    border-color: #0a5cda;
    color: #0a5cda;
}

/* 📱 移动端自适应 */
@media screen and (max-width: 710px) { 
    .menuicon { padding: 0; } 
    .swiper-nav .swiper-slide { width: 90px !important; } 
}