/*全局颜色定义 -------*/
:root {
	/*BLUE蓝色*/
 --blue70:#0170CA;
	--blue50:#0A8FEA;
	--blue20:#8BC6F4;
	--blue10:#E2F1FC;
	/*RED红色*/
 --red60:#E62229;
	--red40:#F04545;
	/*Green绿争*/
 --green80:#008000;
	--green60:#2CA31F;
	--yellow1:#FFE8A3;
	--yellow2:#ffefdd;
	--yellow3:#F2D8B1;
	--yellow60:#F9AF06;
	/*GRAY灰色*/
 --gray05:#f5f5f5;
	--gray10:#f0f0f0;
	--gray20:#e5e5e5;
	--gray30:#d1d1d1;
	--gray40:#aaa;
	--gray50:#999;
	--gray60:#666;
	--gray70:#444;
	--gray80:#333;
	--gray90:#111;
	--steelgray1:#475C85;
	--steelgray2:#666971;
	--steelgray3:#999EAC;
	--steelgray4:#A9ABB1;
	--steelgray5:#F6F8FA;
	--white80:rgba(255,255,255,.8);
	--white60:rgba(255,255,255,.6);
	--white40:rgba(255,255,255,.4);
	--black20:rgba(0,0,0,.2);
	--black50:rgba(0,0,0,.5);
	--black:#000;
	--white:#FFF;
	/*白天模式CSS定义 light_theme*/
 /*primary品牌色&BODY*/
 --primary-color:var(--blue70);
	/*品牌色 第一级*/
 --second-color:var(--blue50);
	/*第二级*/
 --body-bg:var(--gray10);
	/*背景色*/
 --bg-color-1:var(--white);
	--bg-color-2:var(--gray10);
	--bg-color-3:var(--gray20);
	--bg-color-4:var(--gray05);
	--bg-hightlight-1:var(--yellow2);
	--bg-hightlight-2:var(--steelgray5);
	--bg-hightlight-3:var(--yellow60);
	--bg-hightlight-4:var(--blue50);
	--bg-hightlight-5:var(--red40);
	--bg-hightlight-6:var(--blue70);
	--bg-hightlight-7:var(--green60);
	--bg-hightlight-8:#fff6f3;
	--bg-hightlight-9:#eaf5ff;
	--bg-hightlight-10:#e4fde9;
	--bg-hightlight-11:#ffeaea;
	--white-bg:var(--white);
	/*文字*/
 --text-color-1:var(--gray80);
	--text-color-2:var(--steelgray2);
	--text-color-3:var(--steelgray3);
	--text-color-4:var(--gray40);
	--text-hightlight-1:var(--blue50);
	--text-hightlight-2:var(--green80);
	--text-hightlight-3:var(--red60);
	--text-hightlight-4:#9A5F4B;
	--text-hightlight-5:var(--yellow60);
	--text-white:var(--white);
	/*边框*/
 --border-1:var(--gray10);
	--border-2:var(--gray30);
	--border-3:var(--gray20);
	--border-hightlight-1:var(--blue20);
	--border-hightlight-2:var(--yellow3);
	--border-hightlight-3:rgba(227,183,181,0.6);
	--border-hightlight-4:rgba(119,190,248,0.4);
	--theme-icon:url(../images/light.svg);
}
/*夜间模式CSS定义 theme_dark*/
.theme--dark {
	--blue70:#003662;
	--red60:#B53535;
	--yellow1:#4D4634;
	--yellow2:#221608;
	--yellow3:#F2D8B1;
	--yellow60:#ab7908;
	--steelgray1:var(--gray50);
	/*primary品牌色&BODY*/
 --primary-color:var(--blue70);
	--second-color:var(--blue50);
	--body-bg:var(--gray90);
	/*dark背景色*/
 --bg-color-1:#191919;
	--bg-color-2:var(--gray80);
	--bg-color-3:var(--gray70);
	--bg-color-4:#282828;
	--bg-hightlight-1:var(--yellow2);
	--bg-hightlight-2:#212325;
	--bg-hightlight-3:var(--yellow60);
	--bg-hightlight-4:var(--blue70);
	--bg-hightlight-5:var(--red60);
	--bg-hightlight-6:var(--blue70);
	--bg-hightlight-7:var(--green80);
	--bg-hightlight-8:#38231A;
	--bg-hightlight-9:#1B2F42;
	--bg-hightlight-10:#1b4228;
	--bg-hightlight-11:#381818;
	--white-bg:var(--gray90);
	--text-color-1:var(--gray20);
	--text-color-2:var(--gray40);
	--text-color-3:var(--gray60);
	--text-color-4:var(--gray40-d);
	--text-hightlight-1:var(--blue50);
	--text-hightlight-2:var(--green80);
	--text-hightlight-3:var(--red60);
	--text-hightlight-4:#BCA78F;
	--text-hightlight-5:var(--yellow60);
	--text-white:var(--white);
	--border-1:#252525;
	--border-2:var(--gray80);
	--border-3:var(--gray60);
	--border-hightlight-1:var(--blue70);
	--border-hightlight-2:var(--yellow1);
	--border-hightlight-3:rgba(81,38,38,0.6);
	--border-hightlight-4:rgba(56,76,97,0.4);
	--theme-icon:url(../images/dark.svg);
}
/*----------------------------------------------------*/

/* 设置全局样式 */
html,body{max-width:650px;margin:0 auto;}
body{background-color:#E7F1FA;/* 基于 #0838a4 的浅变体作为表面颜色 */
 color:#333;font-size:14px;font-family:Arial,sans-serif;margin:0;padding:0;}
.editable-div{background:#FAFAFA;line-height:30px;border-radius:0 0 10px 10px;padding:18px;text-align:justify;font-size: 16px;}
.editable-div>p{margin-bottom:10px;}
p{color:#333333;text-align:left;margin:10px 0 20px 0;}
h1,h2,h3,h4,h5,h6{margin:10px 0;}
ul,ul li{padding:0;margin:0;list-style:none;}
table{background:#ffffff;width:100%;border-radius:4px;margin:20px 0;border-collapse:collapse;}
table tr td{font-size:12px !important;text-align:left;border:1px solid #ddd;padding:8px;}
#app{max-width:520px;margin:0 auto;}
#subSpnLoading{background:#ffffff;text-align:center;padding:20px;border-radius:4px;width:50%;left:50%;top:50%;transform:translateX(-50%);position:absolute;display:flex;gap:20px;flex-direction:column;justify-content:center;}
#subSpnLoading img{width:60px;margin:0 auto;}
.top{background:rgba(255,255,255,0.9);box-shadow:0 0 3px rgba(0,0,0,0.5);width:40px;height:40px;line-height:40px;text-align:center;font-weight:bold;border-radius:50%;position:fixed;right:20px;bottom:80px;display:none;}
.nodata{background:#ffffff;border:solid 1px #f1f1f1;font-size:14px;text-align:center;padding:20px;margin:20px;border-radius:4px;}
.match{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.league{color:#666666;}
.league .leagueName{display:flex;gap:5px;align-items:center;justify-content:center;}
.payed{background:#f1f1f1;color:#333333;line-height:22px;border-radius:4px;padding:3px 5px;display:inline;}


/* bar条 */
.bar{display:flex;align-items:center;width:100%;border-radius:1000px;overflow:hidden;margin:0px;}
.bar.txt{margin:4px 0 0px 0;border-radius: 0;justify-content:space-between;}
.bar.txt .item{flex:1;}
.bar.txt .item.drawBar{text-align:center;}
.bar.txt .item.loseBar,.SBar{text-align:right;}
.bar .item{min-height:10px;font-size:12px;}
.bar i{font-style:normal;padding:0 5px;}
.bar i{background:transparent !important;}
.bar i::before{content:'';width:6px;height:6px;border-radius:50%;margin-right:4px;display:inline-block;}

.bar .red::before{background:#F44336;}
.bar .red{background:#F44336;/* 浅红色背景 */}
.bar .redchar{color:#F44336;/* 红色字 */}

.bar .yellow::before{background:#F2A128;/* 更深的黄色 */}
.bar .yellow{background:#F2A128;/* 浅黄色背景 */}
.bar .yellowchar{color:#F2A128;/* 黄色字 */}

.bar .blue::before{background:#2196F3;/* 使用主色调 */}
.bar .blue{background:#2196F3;/* 基于主色调的浅变体 */}
.bar .bluechar{color:#2196F3;/* 蓝色字 */}

.bar .green::before{background:#2CA31F;/* 使用主色调 */}
.bar .green{background:#2CA31F;/* 基于主色调的浅变体 */}
.bar .greenchar{color:#2CA31F;/* 绿色字 */}


/* 横幅样式 */
.banner{background:#010610 url(./images/banner.jpg) no-repeat center center;color:white;font-size:24px;line-height:200px;text-align:center;background-size:auto 100%;height:170px;}
.banner .description-button{color:#ffffff;font-size:14px;line-height:30px;text-decoration:none;right:10px;top:10px;padding:0 10px;}


/* 菜单样式 */
.date{background:#ffffff;border-top:solid 1px #ebebeb;border-bottom:solid 1px #ebebeb;border-radius:10px 10px 0 0;padding:0;margin:0 6px;list-style-type:none;display:flex;justify-content:center;}
.date li{color:#666666;line-height:40px;flex:1;justify-content:center;display:flex;}
.date li.on{color:#FF6B42;font-size:16px;font-weight:bold;position:relative;}
.menu{background-color:#ffffff;border-radius:12px 12px 0 0;overflow:hidden;margin-top:-8px;}
.menu ul{list-style-type:none;margin:0;padding:0;display:flex;justify-content:center;}
.menu li{flex:1;justify-content:center;display:flex;line-height:46px;}
.menu li a{color:#333;text-decoration:none;transition:color 0.3s ease;display:block;width:100%;text-align:center;cursor:pointer;}
.menu li a:hover{color:var(--gray50);}
.menu li.active a{color:#FF6B42;position:relative;}
.date li.on::after,.menu li.active a::after{border-bottom:solid 4px #FF6B42;content:'';width:30%;position:absolute;bottom:3px;border-radius:1000px;display:block;left:50%;transform:translateX(-50%);}


/* 订阅 */
.subscribeBox{background:#ffffff;margin:6px;overflow:hidden;border:solid 1px #ffcec0;border-radius:10px;box-shadow:0 3px 5px rgba(0,0,0,0.05);}
.subscribeBox h3{margin:0;}
.subscribeBox h3 .red{color:#FF6B42;}
.subscribe{/* background:var(--bg-color-1);*/
background:linear-gradient(90deg,#E6E4FF,#FFDBE6,#FFF6F5,#FFE9E5);color:#333;font-size:12px;padding:10px;border-radius:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;align-content:center;justify-content:space-between;}
.subscribe span{color:#666;display:block;text-align:left;}
.subscribe span i{background:url(../images/subicon.png)no-repeat center;width:26px;height:26px;margin-right:10px;display:inline-block;vertical-align:middle;opacity:0.5;}
.subscribe .subbtn{background:#FF5722;color:#ffffff;width:14%;line-height:28px;font-weight:bold;text-align:center;border-radius:5px;float:right;cursor:pointer;}

/* 文字公告 */
.subscribeBox .notice{padding:8px;}
.subscribeBox .notice img{height:16px;margin:0 4px;vertical-align:0;}
.subscribeBox .msgNotice{width:calc(100% - 30px);height:20px;font-size:12px;text-align:left;vertical-align: -3px;display: inline-block;overflow:hidden;position:relative;}
.subscribeBox .msgNotice .msgtext{width: 100%;position:absolute;}
.subscribeBox .msgNotice .msgtext li a{color:#666;line-height: 20px;width:100%;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.subscribeBox .notice a,.subscribeBox .notice a:visited,.subscribeBox .notice a:hover{ text-decoration: none;}


/* 内容区域样式 */
.content{margin:0px 6px;padding-bottom:30px;}
.content img{max-width:100%;width:auto;height:auto;}
.ruleBox{background:#ffffff;line-height:26px;padding:20px;border-radius:10px;}

/* 比赛项样式 */
.fore{background:#eaf6ff;color:#088bff;line-height:30px;border:1px solid #cce9ff;width:55%;border-radius:20px;margin:0 auto;position:relative;display:flex;gap:10px;justify-content:space-between;align-content:center;}
.fore .helpicon{background:url(/images/help.png) no-repeat center;background-size:20px;border-left:1px solid #cce9ff;width:40px;height:30px;cursor:pointer;}
.fore .bounce span.letter{animation:bounce 0.45s cubic-bezier(0.05,0.5,0.2,1) infinite alternate;transform:translate3d(0,0,0);padding:0;margin:0;border:none;display:inline-block;/* text-shadow:rgb(255 255 255 / 40%) 0 0 0.05em;*/
}
.fore .bounce{display:flex;align-items:center;justify-content:center;padding-left:10px;}
.fore .bounce .ailoadicon{width:20px;margin-right:5px;}
.letter:nth-child(1){animation-delay:0s;}
.letter:nth-child(2){animation-delay:0.0833333333s;}
.letter:nth-child(3){animation-delay:0.1666666667s;}
.letter:nth-child(4){animation-delay:0.25s;}
.letter:nth-child(5){animation-delay:0.3333333333s;}
.letter:nth-child(6){animation-delay:0.4166666667s;}
.letter:nth-child(7){animation-delay:0.5s;}
.letter:nth-child(8){animation-delay:0.6333333333s;}
.letter:nth-child(9){animation-delay:0.7166666667s;}
.letter:nth-child(10){animation-delay:0.8s;}
@keyframes bounce{0%{transform:translate3d(0,0px,0);opacity:1;color:#01dcff;}
100%{transform:translate3d(2px,0px,0);opacity:1;color:#2288FF;}}

.match-item{background:#fff;/* border:1px solid #b8c8ff;*/
padding:20px 20px;margin-bottom:8px;border-radius:10px;display:flex;justify-content:space-around;align-items:center;position:relative;flex-wrap:wrap;}
.history .match-item:first-child{border-radius:0 0 10px 10px;}
.match-item .star-icon{background:url(images/star_off.svg) no-repeat center;background-size:100%;width:16px;height:16px;position:absolute;left:10px;top:10px;cursor:pointer;}
.match-item .star-icon.on{background:url(images/star_on.svg) no-repeat center;background-size:100%;}
.match-item .analysis{/* background:#fee6bb;color:#674b21;*/
color:#666666;font-size:12px;line-height:20px;text-align:center;height:20px;width:30px;position:absolute;right:10px;top:10px;border-radius:5px;cursor:pointer;}
.match-item .footBar .lock{background:#f1f1f1;height:10px;width:100%;border-radius:1000px;margin:15px 0 10px 0;position:relative}
.match-item .footBar .lock .icon{background:#f1f1f1;border:4px solid #ffffff;width:24px;height:24px;position:absolute;left:50%;top:50%;border-radius:1000px;transform:translate(-50%,-50%);margin:0 auto;display:flex;justify-content:center;align-items:center;}
.match-item .footBar .lock .icon img{width:18px;}
.match-item .footBar{flex:0 0 100%;border-top:solid 1px #f1f1f1;margin-top:10px;}
.match-item .footBar h3{color:#666666;font-size:12px;font-weight:normal;display:flex;align-items:center;justify-content:space-between;}
.match-item .footBar .deepseek{background:#E7F1FA;color:#1272CC;font-size:12px;font-weight:normal;line-height:20px;padding:0 6px 0 1px;border-radius:20px;}
.match-item .footBar .deepseek img{height:12px;margin:0 4px;vertical-align:-2px;}
.match-item .footBar .bar{margin-top:5px;}
.match-item .footBar .bar.txt{margin-bottom:5px;}

/* 比赛信息样式 */
.match-info{flex:0 0 35%;text-align:center;font-size:12px;}
.match-info .vs{color:#333333;font-size:20px;font-weight:bold;}
.match-info span{margin:5px 0;/* display:block;*/
}
.team{font-weight:bold;flex:0 0 30%;display:flex;align-items:center;flex-direction:column;}
.team img{background:#e6eeff;width:36px;height:36px;border-radius:4px;margin-bottom:5px;}


/* 免责声明 */
.disclaimer{background:#fff;font-size:12px;text-align:left;line-height:20px;border-radius:10px;margin:8px 0;padding-bottom:12px;}
.disclaimer h3{font-size:16px;font-weight:bold;line-height:22px;padding:10px;margin:0;border-bottom:1px solid #eee;}
.disclaimer p{font-size:14px;padding:10px 0px 0 0px;margin:0 20px;}


/* 支付层样式 */
.payment-layer{background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;opacity:0;z-index:9;visibility:hidden;transition:opacity 0.3s ease,visibility 0.3s ease;}
.payment-layer.show{opacity:1;visibility:visible;}
.payment-layer .detail{background:#ffffff;width:80%;padding:20px;border-radius:8px;display:flex;flex-direction:column;position:relative;}

/* 关闭按钮样式 */
.payment-layer .detail .close-button{color:#666;font-size:24px;background:none;border:none;position:absolute;top:10px;right:10px;cursor:pointer;}
.payment-layer .detail .close-button:hover{color:#333;}

/* 支付选项样式 */
.payment-options{background:white;text-align:left;width:100%;border-radius:5px;margin-bottom:20px;/* padding:20px 0 0 0;*/
 display:flex;flex-direction:column;align-items:center;}

 /* 按钮样式 */
.payment-layer button:last-child{/* background-color:#0838a4;color:white;*/
 width:100%;padding:10px;margin:10px 0;border:none;border-radius:5px;cursor:pointer;transition:background-color 0.3s ease;}

 /* 支付方式按钮样式 */
.payment-options button{background-color:#ffffff;color:#333333;font-size:12px;white-space:nowrap;width:100%;min-height:50px !important;padding:10px;border-radius:5px;cursor:pointer;transition:background-color 0.3s ease;display:block;display:flex;align-items:center;flex-direction:column;justify-content:center;line-height:normal;border:solid 1px #FF5722 !important;box-shadow:0px 0 5px rgba(0,0,0,0.1);}
.payment-options button span{font-size:20px;}
.payment-options button.selected{background-color:#FF5722;color:white;}
.payment-options button:hover{background-color:#FF5722;color:white;}

/* 支付说明样式 */
.payment-description{background-color:white;font-size:14px;text-align:left;width:100%;border-radius:5px;}
.payment-layer button.post{background:#0838a4;color:#ffffff;font-size:20px;line-height:35px;margin-top:20px;}
.result,.result_run{background:url(./images/hiticon-w.svg) no-repeat center;background-size:100%;width:50px;height:50px;border-radius:50%;position:absolute;right:0;bottom:0;z-index:1;opacity:1;}
.result_run{background:url(./images/zoushui-w.svg)no-repeat center;background-size:100%;}

/* 支付弹框 */
.opvip-popu{background:#fff;width:350px;position:fixed;top:0px;right:0px; bottom:0px;left:0px;border-radius:10px 10px 0 0;box-shadow:0 0 15px var(--black20);z-index:100;}
.opvip-popu .title{font-size:16px;font-weight:bold;text-align:center;padding:10px;border-bottom:1px solid #efefef;}
.opvip-popu .closebtn{width:24px;height:24px;position:absolute;top:10px;right:10px;}
.opvip-popu .closebtn::before,.opvip-popu .closebtn::after{content:"";background:#bbb;width:80%;height:1px;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);position:absolute;}
.opvip-popu .closebtn::after{transform:translate(-50%,-50%) rotate(-45deg);}
.opvip-popu .fixedBox{padding:10px 16px;}
.opvip-popu .fixedBox .btn{width:calc(50% - 15px);background:linear-gradient(180deg,#FDEBB3,#FFFCF4);border:1px solid #F7DBA5;border-radius:12px;margin:5px;display:inline-block;cursor:pointer;}
.opvip-popu .fixedBox .DYdate{background:#765E37;color:#FFD77A;font-size:12px;line-height:18px;text-align:center;font-style:normal;width:max-content;padding:0 10px;margin:0 auto;border-radius:0 0 10px 10px;display:block;}
.opvip-popu .fixedBox .DY{color:#765E37;font-size:12px;text-align:center;border-top:1px solid #f4ebce;padding:5px;}
.opvip-popu .fixedBox .price{font-size:20px;font-weight:bold;text-align:center;padding:10px 0;}
.opvip-popu .fixedBox .price .unit{color:#666;font-size:12px;font-weight:normal;vertical-align:2px;}
.opvip-popu .fixedBox .price .del{text-decoration:line-through;}
.agree{color:#666;font-size:12px;text-align:center;margin:0 0 20px 0;}
.agree input{vertical-align:-2px;margin-right:2px;}
.agree a{color:#2885d1;}
.my-coin-yellow{color:#fb8c00;}
.payTipWin{font-size:14px;text-align:left;line-height:25px;padding:10px;}
.payTipWin .pay{font-size:16px;font-weight:bold;padding:6px 10px;margin-bottom:10px;border-radius:5px;}
.payTipWin .pay .QB{background:url(./images/QBpay.png)no-repeat left;color:#fb8c00;font-size:22px;font-weight:bold;padding-left:24px;margin-left:10px;float:right;}
.discount{color:#666;font-size:12px;float:right;}
.discount b{color:#bd6900;padding:0 2px;}
.layui-layer-btn .layui-layer-btn1{background-color:#b2b2b2;color:#fff;border-color:#b2b2b2;border-radius:4px;padding:0 30px;margin:0 auto;margin-left:10px;}



@media (prefers-color-scheme: dark) {
.match-item{background:#141414;}
body{background-color:#05182A; color:#DBDBDB;}
.league{color:#B7B7B7;}
.match-info .vs{color:#B7B7B7;}
.editable-div{background:#1B1B1B;}
p{color:#DBDBDB;}

.disclaimer{background:#141414;}
.disclaimer h3{border-bottom:1px solid #282828;}
.top{background:rgba(0,0,0,0.9);box-shadow:0 0 3px rgba(0,0,0,0.5);}


.match-item .footBar .lock{background:#282828;}
.match-item .footBar .lock .icon{background:#555;border:4px solid #141414;}
.match-item .footBar{border-top:solid 1px #232323;}
.match-item .footBar h3{color:#666666;}
.match-item .footBar .deepseek{background:#041729;color:#1272CC;}

.menu{background-color:#141414;}
.menu li a{color:#B7B7B7;}
.menu li a:hover{color:var(--gray50);}
.menu li.active a{color:#FF6B42;}
.date li.on::after,.menu li.active a::after{border-bottom:solid 4px #FF6B42;}
.ruleBox{background:#141414}

.date{background:#141414;border-top:solid 1px #141414;border-bottom:solid 1px #232323;}
.date li{color:#7A7A7A;}




/* 订阅 */
.subscribeBox{background:#141414;hidden;border:solid 1px #521D0E;}
.subscribe{/* background:var(--bg-color-1);*/
background:linear-gradient(90deg,#1E1C30,#322733,#382C2F,#2F2726);color:#DBDBDB;}
.subscribe span{color:#B7B7B7;}
.subscribe span i{background:url(../images/subicon.png)no-repeat center;}

/* 文字公告 */
.subscribeBox .msgNotice .msgtext li a{color:#666;}












}