*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Microsoft Yahei",Arial;
}

body{
background:#f5f7fa;
padding:10px;
}

.navbar-header {
    position: fixed;        /* 固定在顶部 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;

    display: flex;
    align-items: center;
    padding: 10px 15px;

    background: linear-gradient(135deg, #1e6fd9, #2d8cf0, #1e6fd9);
    border-bottom: 1px solid #ffffff26;
    box-shadow: 0 2px 8px #1e6fd94d;
    color: #fff;
    font-size: 16px;
}

.navbar-header img{
    height: 30px;
    margin-right: 8px;
}
#missPanel{
  display:none;
}
/* 主容器 */

.lottery-container{
max-width:900px;
margin:auto;
background:#fff;
border-radius:12px;
padding:15px;
box-shadow:0 2px 8px rgba(0,0,0,.08);
margin-top: 50px;
}

.lottery-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}
#mask_img_bg span{
white-space: nowrap;
}
.lottery-title{
font-size:16px;
font-weight:bold;
}

.header-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:4px 10px;
  font-size:16px;

  background:#6c63ff;
  color:#fff;

  border-radius:16px;

  cursor:pointer;
}

.header-btn:hover{
background:#e6e6e6;
}

/* 咪牌点击效果 */

.header-btn.active{
background:#1677ff;
color:#fff;
}
.main_box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background: rgba(0,0,0,1);

  display: flex;

  align-items: center;
  justify-content: center;

  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.box{
  position: relative;
  width: 90%;
  max-width: 420px;
}

.close-btn{
  position: absolute;
  top: -50px;
  right: 10px;

  width: 34px;
  height: 34px;

  border-radius: 50%;
  background: #dc3545;

  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height: 34px;

  cursor: pointer;
}
/* 主体 */

.lottery-body{
display:flex;
align-items:center;
gap:15px;
flex-wrap:wrap;
}
.countdown-header{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:14px;
color:#555;
margin-bottom:4px;
}

.countdown-icon{
width:20px;
height:20px;
display:flex;
align-items:center;
justify-content:center;
background:#e6f4ff;
color:#1890ff;
border-radius:50%;
font-size:12px;
}

.countdown-box{
display:flex;
align-items:center;
gap:10px;
background:#e8f4ff;
border-radius:8px;
padding:12px 16px;
flex:1;
}


.countdown-icon{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
color:#1890ff;
}
.countdown-info{
display:flex;
flex-direction:column;
}

.countdown-label{
font-size:14px;
color:#666;
}

.countdown-text{
font-size:18px;
font-weight:bold;
color:#333;
}

.countdown-text{
font-size:18px;
font-weight:bold;
}

.tag-group{
display:flex;
gap:20px;
flex:1;
justify-content:center;
}



.tags{
width:44px;
height:44px;
border-radius:50%;
background:#dc3545;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
font-size: 25px;
}
.blue{background: #1677ff;}
.black{background: #333;}
.white{color: #FFF;}
.taglist{
width:34px;
height:24px;
border-radius:4px;
background:#dc3545;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-weight:bold;
}
.glow-red{
    background:#ff2d2d;
    color:#fff;
    box-shadow:
        0 0 5px #ff2d2d,
        0 0 10px #ff2d2d,
        0 0 20px #ff2d2d,
        0 0 40px #ff0000;
    animation: glowPulse 1.5s infinite alternate;
}

@keyframes glowPulse{
    from{
        box-shadow:
        0 0 5px #ff2d2d,
        0 0 10px #ff2d2d,
        0 0 20px #ff2d2d;
    }
    to{
        box-shadow:
        0 0 10px #ff2d2d,
        0 0 20px #ff2d2d,
        0 0 40px #ff0000;
    }
}
.number-group{
display:flex;
align-items:center;
justify-content:center;
gap:13px;
width:100%;
margin-top:10px;
}

.num-item{
width:45px;
height:45px;
line-height:45px;
text-align:center;
background:#f8f9fa;
border:1px solid #eee;
border-radius:8px;
font-weight:bold;
font-size:20px;
}

.sum-item{
width:45px;
height:45px;
line-height:45px;
text-align:center;
background:#1677ff;
color:#fff;
border-radius:8px;
font-weight:bold;
font-size:20px;
}
/* 数据面板 */

.data-panel{
    max-width: 900px;
    margin: auto;
margin-top:10px;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.panel-card{
background:#fff;
border-radius:12px;
padding:14px;
display:flex;
align-items:flex-start;
gap:10px;
}

.panel-icon{
width:28px;
height:28px;
display:flex;
align-items:center;
justify-content:center;
color:currentColor;  /* 继承父颜色 */
}

.panel-icon.purple{color:#7a5cff;}
.panel-icon.red{color:#dc3545;}
.panel-icon.blue{color:#1677ff;}
.panel-icon.orange{color:#fa541c;}

.panel-icon.purple{background:#eee7ff;color:#7a5cff;}
.panel-icon.blue{background:#e6f4ff;color:#1677ff;}
.panel-icon.red{background:#ffeaea;color:#dc3545;}
.panel-icon.orange{background:#fff2e8;color:#fa541c;}

.panel-title{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
color:#666;
margin-bottom:6px;
}
.panel-content{
width:100%;
}

.panel-tag{
display:inline-flex;
align-items:center;
line-height: 26px;
font-size:11px;
padding:2px 6px;
border-radius:5px;
}

.panel-tags{
display:flex;
gap:6px;
width:100%;
height: 43px;
}

.panel-tag{
flex:1;
display:flex;
align-items:center;
justify-content:center;
font-size:11px;
padding:4px 0;
border-radius:6px;
font-size: 14px;
}

.panel-tag.purple{background:#f3e8ff;color:#722ed1;}
.panel-tag.orange{background:#ffe7ba;color:#fa541c;}
.panel-tag.red{background:#ffd6d6;color:#dc3545;}
.panel-tag.green{background:#d9f7be;color:#389e0d;}

.miss-row{
margin-top:4px;
}

.miss{
display:inline-block;
width:30px;
height:22px;
line-height:22px;
text-align:center;
border-radius:4px;
font-size:12px;
margin-right:4px;
}

.miss.red{background:#dc3545;color:#fff;}
.miss.gray{background:#e5e7eb;color:#333;}

.miss-text{
font-size:11px;
color:#888;
margin-top:3px;
}

.miss-row{
display:flex;
gap:10px;
margin-top:6px;
}

.miss-item{
display:flex;
flex-direction:column;
align-items:center;
}

.miss-num{
width:30px;
height:22px;
line-height:22px;
text-align:center;
border-radius:4px;
font-size:12px;
font-weight:bold;
}



.miss-item.red .miss-num{
background:#dc3545;
color:#fff;
}

.miss-item.gray .miss-num{
background:#e5e7eb;
color:#333;
}

.miss-text{
font-size:11px;
color:#888;
margin-top:3px;
}

.miss-box{
display:flex;
gap:6px;
margin-top:4px;
width:100%;
}

.miss-col{
flex:1;
text-align:center;
border:1px solid #e5e7eb;
border-radius:6px;
padding:4px 0;
background:#f9fafb;
}
.miss-col.short {
  padding: 2px 0;       /* 减小内边距 */
  min-height: 36px;     /* 可根据需求微调 */
}
.miss-col.red{
background:#dc3545;
border-color:#dc3545;
}

.miss-col.red .miss-num{
color:#fff;
}

.miss-col.red .miss-text{
color:#fff;
}

.miss-num{
font-size:13px;
font-weight:bold;
margin-bottom:1px;
}

.miss-num.red{
color:#dc3545;
}

.miss-num.gray{
color:#333;
}

.miss-text{
font-size:10px;
color:#888;
line-height:12px;
}

.dragon-num{
font-size:20px;
font-weight:bold;
}

.dragon-text{
font-size:12px;
color:#fa541c;
}

/* 菜单 */

.tab-menu{
    max-width: 900px;
    margin: auto;
margin-top:10px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
background:#ebeff4;
padding:10px;
border-radius:10px;
}



.tab-item{
    display:flex;
    align-items:center;      /* 垂直居中 */
    justify-content:center;  /* 水平居中 */
    gap:6px;                 /* 图标和文字间距 */
    padding:10px;
    background:#ebeff4;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    text-align:center;
    transition:.2s;
}

.tab-item.active{
    background:#f6f9fc;
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.tab-icon{
    display:flex;
    align-items:center;      /* 图标垂直居中 */
    justify-content:center;
    width:20px;
    height:20px;
    color:#1677ff;           /* 可根据模块改色 */
    margin-top: 2px;
}


/* 内容 */

.tab-content{
    max-width: 900px;
    margin: auto;
margin-top:10px;
}

.tab-panel{
display:none;
}

.tab-panel.active{
display:block;
}


/* 表格 */

.lottery-table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:10px;
overflow:hidden;
}

.lottery-table th{
background:#f3f4f6;
padding:10px;
font-size:13px;
}

.lottery-table td{
padding:7px;
text-align:center;
border-bottom:1px solid #eee;
font-size:13px;
}


/* 标签 */

.tag{
min-width:24px;
height:24px;
line-height:24px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:6px;
font-size:12px;
padding:0 4px;
}

.tag.red{background:#dc3545;color:#fff;}
.tag.red2{background:#ff818d;color:#fff;}
.tag.blue{background:#1677ff;color:#fff;}
.tag.orange{background:#ffd591;color:#8c4a00;}
.tag.gray{background:#e5e7eb;}
.tag.purple{background:#d3adf7;color:#531dab;}

/* 表格外层卡片 */

.table-card{
margin-top:10px;
background:#fff;
border-radius:14px;
border:1px solid #e5e7eb;
box-shadow:0 3px 8px rgba(0,0,0,0.05);
overflow:hidden;
}





/* 斑马纹 */

.lottery-table tbody tr:nth-child(even){
background:#fafafa;
}

#cutIssue{
color:#000;
font-weight: bold;
}

#cutCountdown{
color:#000;
font-weight: bold;
}
/* 分页 */

.table-pagination{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
padding:16px 0;
border-top:1px solid #f0f0f0;
background:#fff;
}

.page-number{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
cursor:pointer;
font-size:14px;
color:#555;
}

.page-number:hover{
background:#f3f4f6;
}

.page-number.active{
background:#1890ff;
color:#fff;
box-shadow:0 3px 6px rgba(0,0,0,0.15);
}

.page-btn{
font-size:18px;
color:#999;
cursor:pointer;
padding:0 6px;
}

/* 友情链接 */

.friend-card{
max-width: 900px;
    margin: auto;
margin-top:10px;
background:#fff;
border-radius:14px;
padding:20px;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
border-top:4px solid #ff4d6d;

}


.friend-header{
margin-bottom:15px;
}

.friend-title{
font-size:16px;
font-weight:bold;
margin-bottom:5px;
}

.friend-sub{
font-size:13px;
color:#888;
}


/* 列表 */

.friend-list{

display:grid;
grid-template-columns:1fr 1fr;
gap:12px;

}


/* 单个卡片 */

.friend-item{

display:flex;
align-items:center;
gap:10px;

background:#f6f7f9;
padding:12px;
border-radius:10px;

text-decoration:none;
color:#333;

transition:all .2s;

}

.friend-item:hover{

background:#eceff3;
transform:translateY(-2px);

}


/* logo */

.friend-logo{

width:40px;
height:40px;
border-radius:50%;

}


/* 文字 */

.friend-name{

font-size:14px;
font-weight:600;

}

.friend-desc{

font-size:12px;
color:#777;

}

/*遗漏查询*/


/* 外层大圈 */

.stat-wrapper{
margin-top:10px;
background:#fff;
border-radius:14px;
border:1px solid #e5e7eb;
box-shadow:0 3px 8px rgba(0,0,0,0.05);
overflow:hidden;
}

.stat-open{
color:#10b981;
font-weight:600;
font-size:14px;
}

.stat-prob{
color:#6366f1;
font-size:13px;
}
/* 卡片 */

.stat-card{
background:#fff;
border-radius:12px;
padding:12px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
}


/* 标题 */

.stat-title{
font-size:14px;
font-weight:600;
margin-bottom:10px;
padding-left:8px;
border-left:4px solid #2aa7ff;
}


/* 行 */

.stat-row{
display:grid;
padding:5px 0;
border-bottom:1px solid #eee;
text-align:center;
align-items:center;
min-height:32px;
justify-items:center; /* 关键 */
}



.stat-row:last-child{
border:none;
}


/* 表头 */

.stat-head{
color:#999;
font-size:12px;
}


/* 布局 */

.grid-4{
grid-template-columns:repeat(4,1fr);
}

.grid-6{
grid-template-columns:repeat(6,1fr);
}


/* 数字 */

.stat-num{
color:#1aa7ff;
font-weight:600;
font-size:14px;
line-height:20px;
display:inline-block;
}

.stat-num-red{
color:#ef4444;
}


/* 标签 */

.stat-tag{
display:inline-block;
padding:4px 10px;
border-radius:16px;
color:#fff;
font-size:12px;
line-height:16px;
width: 50px;

}


/* 颜色 */

.tag-blue{background:#3b82f6;}
.tag-red{background:#ef4444;}
.tag-green{background:#10b981;}
.tag-orange{background:#f97316;}
.tag-yellow{background:#f59e0b;}
.tag-purple{background:#8b5cf6;}
.tag-gray{background:#6b7280;}


/* AI面板 */

.ai-panel{
background:#fff;
border-radius:10px;
padding:20px;
box-shadow:0 2px 8px rgba(0,0,0,.05);
}

/* tabs */

.ai-tabs{
display:flex;
gap:10px;
margin-bottom:15px;
}

.ai-tab{
border:0;
background:#e9edf1;
padding:6px 16px;
border-radius:16px;
cursor:pointer;
font-size:14px;
}

.ai-tab.active{
background:#1fa2ff;
color:#fff;
}

/* table */

.ai-table{
width:100%;
border-collapse:collapse;
font-size:14px;
}

.ai-table th{
background:#f3f5f7;
padding:10px;
color:#666;
}

.ai-table td{
padding:12px;
border-bottom:1px solid #eee;
text-align:center;
}

.ai-table tbody tr:hover{
background:#fafafa;
}

/* 标签 */

.ai-tag{
display:inline-block;
padding:3px 10px;
border-radius:12px;
font-size:12px;
background:#1fa2ff;
color:#fff;
}

/* 正确 */

.ai-hit{
color:#16c784 !important;
-webkit-text-fill-color:#16c784 !important;
font-weight:bold;
}

/* 错误 */

.ai-miss{
color:#ff4d4f !important;
-webkit-text-fill-color:#ff4d4f !important;
font-weight:bold;
}

/* 等待 */

.ai-wait{
color:#999;
}

/* 分页 */

.ai-page{
margin-top:20px;
text-align:center;
font-size: 18px;
}

.ai-page span{
display:inline-block;
padding:6px 12px;
border-radius:6px;
margin:0 3px;
cursor:pointer;
font-size: 14px;
color: #555;
}

.ai-page span.active{
background:#1890ff;
color:#fff;
}