/* 六合统计：按参考站 49217.com/#/zxcount 线上实测还原
   rem 基准与参考站一致：1rem = clientWidth / 7.5（375 视口下 50px，不封顶）
   顶部导航为 vant 固定 px 尺寸，不随 rem 缩放 */
html{font-size:13.3333vw;-webkit-text-size-adjust:100%}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f3f3f3;color:#333;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
body{font-size:.28rem}
[hidden]{display:none!important}

/* 外壳 = 参考站 .mint-tab-container */
.stats-app{width:100%;min-height:100vh;background:#f3f3f3;padding:.92rem 0 1.2rem}

/* 顶部导航 = 参考站 van-nav-bar */
.stats-head{position:fixed;z-index:20;top:0;left:50%;transform:translateX(-50%);width:100%;height:46px;display:flex;align-items:center;justify-content:center;background:#fff;text-align:center}
.stats-head h1{max-width:60%;margin:0;color:#323233;font-size:0.32rem;font-weight:500}
.stats-head>a{position:absolute;left:16px;top:50%;width:13px;height:13px;margin-top:-9px;border-left:2px solid #333;border-bottom:2px solid #333;transform:rotate(45deg)}
.stats-head label{position:absolute;right:16px;top:0;height:100%;display:flex;align-items:center;font-size:0.28rem;color:#333}
.stats-head .period{width:.8rem;height:.48rem;margin-left:.12rem;padding:0;background:#f6f6f6;border:.02rem solid #bcbcbc;border-radius:.12rem;outline:none;text-align:center;font-size:.28rem;color:#333}

/* 内容区 */
.stats-content{min-height:calc(100vh - 2.12rem)}
.loading{padding:.4rem .28rem;color:#969799;font-size:.28rem}
.title-box .retry{margin-top:.2rem;padding:.16rem .4rem;border:0;border-radius:.08rem;background:#07c160;color:#fff;font-size:.28rem}

/* 统计卡片 = 参考站 .container-wrap / .top-wrap / .bottom-wrap */
.container-wrap{padding:.12rem .24rem;margin-top:.12rem;background:#fff}
.container-wrap.pb2{padding-bottom:1.6rem}
.container-wrap.mt0{margin-top:0}
.container-wrap .top-wrap{border-bottom:.02rem solid #e1e1e1}
.container-wrap .top-wrap:last-of-type{border-bottom:none}
.container-wrap .top-wrap h4{margin:0;padding-top:.18rem;color:#333;font-size:.24rem;font-weight:400;line-height:.34rem}
.container-wrap .top-wrap:first-of-type h4{padding-top:0}
.container-wrap .top-wrap>.color-wrap{display:flex;justify-content:space-between;padding:.26rem 0 .22rem}
.container-wrap .bottom-wrap{display:flex;padding:.1rem 0}
.container-wrap .bottom-wrap>div{flex:1;color:#333;line-height:.42rem}
.container-wrap .bottom-wrap>div:first-of-type{font-size:.24rem}
.container-wrap .bottom-wrap>div:nth-of-type(2){display:flex;justify-content:space-between;font-size:.3rem;font-weight:700}
.container-wrap .bottom-wrap>div:nth-of-type(2)>div{display:inline-block}

/* 号码球：参考站球图（68px 原图按 24px 展示），两种包裹方式 */
.color-wrap>div{width:.48rem;height:.48rem;background:url(/assets/img/lottery/balls/blue.png) no-repeat;background-size:cover;text-align:center;font-size:.24rem;line-height:.52rem;text-indent:-.02rem}
.color-wrap>div.red,.color-wrap>div>span.red{background-image:url(/assets/img/lottery/balls/red.png)}
.color-wrap>div.green,.color-wrap>div>span.green{background-image:url(/assets/img/lottery/balls/green.png)}
.color-wrap.span-wrap>div{width:.48rem;height:.48rem;background:none}
.color-wrap.span-wrap>div>span{display:block;width:.48rem;height:.48rem;background:url(/assets/img/lottery/balls/blue.png) no-repeat;background-size:cover;text-align:center;font-size:.24rem;line-height:.52rem;text-indent:-.02rem}
.color-wrap.span-wrap>div>span.red{background-image:url(/assets/img/lottery/balls/red.png)}
.color-wrap.span-wrap>div>span.green{background-image:url(/assets/img/lottery/balls/green.png)}
.color-wrap:not(.span-wrap)>div.red{background-image:url(/assets/img/lottery/balls/red.png)}
.color-wrap:not(.span-wrap)>div.green{background-image:url(/assets/img/lottery/balls/green.png)}
.red-text .red{color:#f05a5a}
.red-text .green{color:#18cf32}
.red-text .blue{color:#2f85dd}

/* 属性参照 = 参考站 van-tabs + .wrap2-1 / 2 / 3 / 4 */
.vtabs{display:flex;overflow-x:auto;background:#fff;scrollbar-width:none}
.vtabs::-webkit-scrollbar{display:none}
.vtabs>div{flex:0 0 auto;position:relative;height:.88rem;padding:0 .32rem;color:#646566;font-size:.28rem;line-height:.88rem;white-space:nowrap}
.vtabs>div.active{color:#07c160}
.vtabs>div.active::after{content:"";position:absolute;left:50%;bottom:0;width:.6rem;height:.06rem;margin-left:-.3rem;background:#07c160}
.container-wrap.wrap2-2{padding:0 .24rem}
.container-wrap.wrap2-2 .container2-wrap{padding:.24rem 0}
.container-wrap.wrap2-2 .container2-wrap .color-wrap>i{display:inline-block;margin-right:.2rem;color:#333;font-size:.3rem;font-style:normal}
.container-wrap.wrap2-3{padding:0 .24rem}
.container-wrap.wrap2-3 .container2-wrap{position:relative;padding:.24rem 0 .02rem}
.container-wrap.wrap2-3 .container2-wrap>h4{position:absolute;top:.26rem;left:0;width:.52rem;padding:0;font-size:.3rem}
.container-wrap.wrap2-3 .container2-wrap .color-wrap{width:calc(100% - .52rem);margin-left:.52rem}
.container-wrap.wrap2-3 .container2-wrap .color-wrap>div{width:12%}
.container-wrap.wrap2-4{padding:0 .24rem}
.container-wrap.wrap2-4 .container2-wrap{padding:.24rem 0}
.container-wrap.wrap2-4 .container2-wrap .animal>span{margin-right:.08rem;font-size:.3rem;font-weight:700}
.container-wrap.wrap2-4 .container2-wrap .animal>span:first-of-type{margin-right:.52rem}
.container2-wrap{padding-bottom:.12rem;border-bottom:.02rem solid #e1e1e1}
.container2-wrap:last-of-type{border-bottom:none}
.container2-wrap>h4{margin:0;padding:.18rem 0 .26rem;color:#333;font-size:.24rem;font-weight:400;line-height:.34rem}
.container2-wrap:first-of-type>h4{padding-top:0}
.container2-wrap .color-wrap{display:flex;flex-wrap:wrap;align-items:center}
.container2-wrap .color-wrap>div{width:10%;margin-bottom:.22rem;text-align:left}

/* 图表页 = 参考站 .tab-wrap / .title-box / .chart */
.tab-wrap{display:flex;justify-content:space-between;height:1rem;line-height:1rem;background:#fff;color:#333;font-size:.32rem;text-align:center}
.tab-wrap>div{flex:1}
.tab-wrap>div.active{color:#07c160}
.title-box{padding:.18rem .28rem}
.title-box h4{margin:0;color:#07c160;font-size:.32rem;font-weight:400;line-height:.56rem;text-align:center}
.title-box p{margin:0;color:#333;font-size:.28rem;line-height:.4rem}
.piechart .title-box h4{color:#333;text-align:left}
.chart{position:relative;height:4.4rem}
.piechart .chart{height:calc(100vh - 3.12rem)}
.pie-wrap{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center}
.line-chart{display:flex;height:100%;flex-direction:column;justify-content:center;padding:0 .24rem}
.line-chart[data-line-chart]{display:block;width:100%;height:100%;padding:0}
.line-chart svg{width:100%;height:2.9rem;overflow:visible}
.line-chart svg path.grid{fill:none;stroke:#eee;stroke-width:1}
.line-chart svg polyline{fill:none;stroke-width:2}
.chart-numbers{display:flex;justify-content:space-between;padding:0 .1rem;color:#666;font-size:.18rem;overflow:hidden}
.donut{width:4.2rem;height:4.2rem;padding:.72rem;border-radius:50%}
.donut>span{display:flex;width:2.76rem;height:2.76rem;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:#fff}
.donut b{font-size:.5rem;font-weight:500}
.donut small{color:#999;font-size:.24rem}
.chart-legend{display:flex;flex-wrap:wrap;gap:.2rem .32rem;padding:.3rem .32rem 0}
.chart-legend span{font-size:.24rem}
.chart-legend i{display:inline-block;width:.4rem;height:.16rem;margin-right:.08rem;border-radius:.04rem}
.bar-list{padding:.2rem .28rem}
.bar-list>div{display:grid;grid-template-columns:1.2rem 1fr .8rem;align-items:center;gap:.16rem;height:.72rem;font-size:.26rem}
.bar-list b{font-weight:400}
.bar-list em{height:.2rem;background:#eee;border-radius:.1rem;overflow:hidden}
.bar-list em i{display:block;height:100%;border-radius:.1rem}
.bar-list span{text-align:right;color:#777}

/* 表格页 = 参考站 .table-wrap（表头行行高 40px 为固定 px，数据行 .56rem） */
.table-wrap table{width:100%;margin-top:.12rem;border-collapse:collapse;background:#fff;text-align:center}
.table-wrap table th{color:#333;font-size:.24rem;font-weight:400}
.table-wrap table tr{line-height:.56rem}
.table-wrap table tr.head{line-height:40px}
.table-wrap table tr td{border:.02rem solid #e1e1e1}
.table-wrap table tr td.red{color:red}
.table-wrap table tr:nth-of-type(2n){background:#f8f8f8}
.table-wrap table td>div.red{width:.44rem;height:.44rem;margin:0 auto;border-radius:50%;background:red;color:#fff;line-height:.44rem}
.year-picker{position:fixed;z-index:21;top:0;right:0;width:.64rem;height:46px;padding:0 16px 0 0;border:0;background:none}
.year-picker svg{display:block;width:16px;height:16px;margin:15px auto 0}
.year-picker svg path{fill:none;stroke:#07c160;stroke-width:1.4;stroke-linecap:round}

/* 底部标签栏 = 参考站 .mint-tabbar */
.stats-tabbar{position:fixed;z-index:100;bottom:0;left:50%;transform:translateX(-50%);width:100%;display:flex;background-color:#fafafa;background-image:linear-gradient(180deg,#d9d9d9,#d9d9d9 50%,transparent 0);background-size:100% .02rem;background-repeat:no-repeat;background-position:0 0;box-shadow:0 -.02rem .04rem 0 hsla(0,0%,81.6%,.5);text-align:center}
.stats-tabbar button{flex:1;display:block;padding:.14rem 0;border:0;background:transparent;color:#333;font-size:.24rem;line-height:1}
.stats-tabbar button.active{background:#efefef}
.stats-tabbar i{display:block;width:.62rem;height:.62rem;margin:0 auto .1rem;border-radius:50%;background:#07c160;color:#fff;font-size:.3rem;font-style:normal;line-height:.62rem}

/* 弹窗 = 参考站 .confirm / .confirm-lhbody */
.stats-mask{position:fixed;z-index:101;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.3)}
.stats-dialog{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:6.44rem;border-radius:.1rem;background:#fff;text-align:center}
.stats-dialog h3{margin:0;padding-top:.22rem;color:#ec5a5a;font-size:.32rem;font-weight:400;line-height:.44rem}
.stats-dialog p{margin:0;padding:.52rem 0 .66rem;color:#333;font-size:.36rem;line-height:.5rem}
.stats-dialog button{width:100%;height:1rem;border:0;border-top:.02rem solid #979797;border-radius:0 0 .1rem .1rem;background:#fff;color:#07c160;font-size:.32rem;line-height:1}

/* 更多面板 = 参考站 .footer-confirm（高度上限仅在桌面大视口下生效，手机端与参考站一致） */
.more-panel{position:fixed;z-index:102;bottom:1.44rem;left:50%;transform:translateX(-50%);width:calc(100% - .48rem);height:min(7.04rem,calc(100vh - 1.8rem));padding-top:.2rem;border-radius:.08rem;background:#fff}
.more-grid{display:flex;flex-wrap:wrap;align-content:flex-start}
.more-grid a{flex:0 0 25%;max-width:25%;padding:.12rem 0;color:#333;font-size:.24rem;line-height:.34rem;text-align:center;text-decoration:none}
.more-grid img{display:block;width:.68rem;height:.68rem;margin:0 auto .06rem}
.more-arrow{position:absolute;right:.4rem;bottom:-.56rem;width:0;height:0;border:.28rem solid transparent;border-top-color:#fff}

/* 年份选择 = 参考站底部弹出选择器 */
.year-mask{position:fixed;z-index:103;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.4)}
.year-sheet{position:fixed;z-index:104;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-height:60vh;overflow-y:auto;padding-bottom:.2rem;border-radius:.16rem .16rem 0 0;background:#fff;text-align:center}
.year-sheet b{display:block;height:1rem;color:#333;font-size:.32rem;font-weight:400;line-height:1rem}
.year-sheet button{display:block;width:100%;height:1rem;border:0;border-top:.02rem solid #eee;background:#fff;color:#333;font-size:.32rem}
.year-sheet button.active{color:#07c160}

@media(min-width:768px){
  .stats-tabbar{width:480px}
  .more-panel{width:calc(480px - .48rem)}
}