body{ font-size:.3rem; text-align:center;  font-family: "SourceHanSansCN","Microsoft Yahei"; color: #fff; }
*{box-sizing:border-box;-moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.info{
	background: url(/Public/special/images/20240506/m/info.png) no-repeat; 
	background-size: 7.08rem 9.92rem;
}
.infos{
	background: url(/Public/web/m/images/cover/20250818/close.png) no-repeat; 
	background-size: 100% 100%;
}
.infob{
	background: url(/Public/web/m/images/cover/20250818/ljdl.png) no-repeat; 
	background-size: 5.61rem 1.26rem;
    color: #dc6a40 !important;
}
.infoc{
	background: url(/Public/web/m/images/cover/20250818/ljdl.png) no-repeat; 
	background-size: 4.61rem 1.16rem;
    color: #dc6a40 !important;
}
.dn{
    display: none;
}
.header .h_down{background:none; margin:0; padding:0; height:auto; text-indent:0;}
.header{ width:10.8rem; height:1.48rem; margin-left:-5.4rem; left:50%; background:none; position:fixed; left:50%;}
.header .h_down:before{ background:none;}
.header h3{font-size:.45rem; color:#fff; margin-left:-.2rem; padding: .24rem 0 .06rem 0;}
.header p{font-size:.52rem; line-height:.4rem; color:#ffe7bb;}
.header a{ width:1.84rem; margin-right:.2rem; margin-top:.34rem;}
.header >div{ padding: 0 .1rem 0 2.12rem;}
.menu-btn{
    margin-top: 0.36rem;
    margin-right: 0.2rem;
}
.logo-ld{
    left: 0.32rem;
}
.logo-ds{
    width: 60%;
    height: 1rem;
    top: 1.8rem;
}
.dhxy-login{
    position: absolute;
    top: 1.8rem;
    right: 0.4rem;
    font-size: 0.35rem;
    padding: 0.1rem 0;
    color: #3a2420;
    font-weight: bold;
    border-bottom: 1px solid #3a2420;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dhxy-login:hover {
    color: #dc6a40;
    border-bottom-color: #dc6a40;
    transform: translateY(-0.05rem);
}

.home{
    position: fixed;
    top: 8rem;
    left: 0rem;
    z-index: 15;
}
.home img{
    width: 1.5rem;
}
.dhxy-login:active {
    transform: translateY(0);
}
#web-main{
	background: url(/Public/web/m/images/cover/20250818/bj_v1.jpg) no-repeat; 
	height: 105.33rem;
    max-width: 1080px;
	background-size:  100% 100%;
}
.appointment-number{
    width: 100%;
    position: absolute;
    top: 17.7rem;
    left: 0;
    /* z-index: 1000; */
    display: flex;
    justify-content: center;
    align-items: center;
}
.appointment-number img{
    width: 70%;
    height: 1rem;
}
.appointment-number-content{
    position: absolute;
    width: 100%;
    font-size: 0.3rem;
}
.number{
    color: #ffdb8f;
}
.appointment-lottery{
    width: 100%;
    position: absolute;
    top: 19rem;
    left: 0;
    /* z-index: 1000; */
}
.appointment-lottery img{
    width: 95%;
}

.detail-btn{
    width: 2.5rem;
    height: 0.8rem;
    position: absolute;
}
#chaxun1{
    top: 4rem;
    left: 0.8rem;
}
#chaxun2{
    top: 4.6rem;
    left: 4.2rem;
}
#chaxun3{
    top: 4rem;
    left: 7.5rem;
}
#chaxun4{
    top: 9.9rem;
    left: 0.8rem;
}
#chaxun5{
    top: 10.5rem;
    left: 4.2rem;
}
#chaxun6{
    top: 9.9rem;
    left: 7.5rem;
}
#chaxun7{
    top: 15.9rem;
    left: 0.8rem;
}
#chaxun8{
    top: 16.5rem;
    left: 4.2rem;
}
#chaxun9{
    top: 15.9rem;
    left: 7.5rem;
}
.z-title img{
    width: 8.29rem;
}
.hot{
    color: #ff5a5a;
}
.box1{
    height: 19.27rem;
}
.logo{
    width: 3.09rem;
    top: 1.8rem;
    left: 50%;
    margin-left: -1.54rem
}
.slogan{
    width: 9.77rem;
    top: 1.49rem;
    left: .49rem;
}
.yuyue-box{
    width: 7.44rem;
    line-height: .72rem;
    height: .73rem;
    font-size: .33rem;
    color: #424643;
    letter-spacing: .04rem;
    left: 50%;
    top: 14.1rem;
    background: url(/Public/special/images/20240506/m/ico5.png) no-repeat; 
	background-size:  100% 100%;
    font-weight: bold;
    font-family: "黑体";
}
.appointment-lottery-content{
    width: 85%;
    position: absolute;
    top: 1.8rem;
    left: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;

}
.appointment-lottery-item{
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 0.1rem;
}
.appointment-lottery-item img{
    width: 100%;       
}
.yuyue-lb{
    width: 9.41rem;
    top: 14.98rem;
    left: 50%;
    margin-left: -4.74rem;
}
.yuyue-progress{

    width: 9.52rem;
    height: 1.1rem;
    left: .49rem;
    top: 15.51rem;
    background: url(/Public/special/images/20240506/m/progress.png) no-repeat; 
	background-size:  100% 100%;
}

.progress{
    border-radius: .06rem;
    margin: 0 0 0 .55rem;
    width: 8.88rem;
    overflow: hidden;
    border: .02rem solid #82b9a8;
    background-color: #f8e6bb;
    height: .11rem;
}
.progress i{
    border-radius: .04rem;
    background-color: #ff5a5a;
}

.yuyue-progress ul{
    height: 1.35rem;
    left: -.02rem;
    top: -.61rem;
}
.yuyue-progress ul li{
    margin-right: 1.5rem;
    width: 1.35rem;
    height: 100%;
    background-position: right bottom !important;
}
.top-but{
   top: 16.91rem;
}
.top-but a{
    width: 4.95rem;
    height: 1.42rem;
}
.top-but a:nth-child(1){
    background-position: 0  -.74rem;
}
.top-but a.active{
    background: url(/Public/special/images/20240506/m/b-gift.png) no-repeat !important; 
    background-position:  0 0 !important; 
    background-size: 100% 100% !important;
}
.top-but a:nth-child(2){
    background-position: 0  -2.18rem;  
}

.box2{
    margin-top: 1.5rem;
    height: 13.89rem;
}
.box1-content{
    width: 2.9rem;

}
.box1-left{
    left: 0.7rem;
    top: 3.5rem;
}
.box1-center{
    top: 6rem;
    left:4.2rem;
}
.box1-right{
    top: 3.5rem;
    right: 0.3rem;
}
.zhe_zhao{
    width: 100%;
    z-index: 1000;
    bottom: 0;
}
.yin_yin{
    width: 100%;
    z-index: 900;
    bottom: 0;
}
.renwu{
    top: -1.3rem;
    width: 4rem;
    left: -1.2rem;
}
.button{
    width: 90%;
    position: absolute;
    bottom: 0.2rem;
    left: 0.2rem;
    z-index: 1000;
}
.left-di .name{
    width: 0.8rem;
    left: -0.5rem;
    top: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left-di .name div{
    width: 0.6rem;
    color: #fff;
    font-size: 0.355rem;
}
.box2 ul{
    margin-top: 1.02rem;
}
.box2 ul li{
    background: url(/Public/special/images/20240506/pc/act1-1.png) no-repeat; 
}
.box2 ul li:nth-child(1),
.box2 ul li:nth-child(2),
.box2 ul li:nth-child(3){
    width: 3.50rem;
    height: 5.14rem;
    background-size:  24.47rem 100%;
    margin: 0 .01rem .35rem;
}
.box2 ul li:nth-child(1){
    background-position: 0 0;
}
.box2 ul li:nth-child(2){
    background-position: -3.5rem 0;
}
.box2 ul li:nth-child(3){
    background-position: -7rem 0;
}
.box2 ul li:nth-child(4),
.box2 ul li:nth-child(5),
.box2 ul li:nth-child(6),
.box2 ul li:nth-child(7){
    width: 4.44rem;
    height: 6.53rem;
    background-size:  31.08rem 100%;
    margin: 0 .3rem .7rem;
}
.box2 ul li:nth-child(4){
    background-position: -13.32rem 0;
}
.box2 ul li:nth-child(5){
    background-position: -17.76rem 0;
}
.box2 ul li:nth-child(6){
    background-position: -22.2rem 0;
}
.box2 ul li:nth-child(7){
    background-position: right 0;
}
.b-baotuan{
    width: 5.24rem;
    height: 1.28rem;
    
    background-position: 0 -4.88rem;
}

.box3{
    margin-top: 0.5rem;
    height: 21.84rem;
}
.seond-box{
    width: 4.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.seond-1{
    top: 2.3rem;
    left:1.2rem
}
.seond-2{
    top: 3.3rem;
    right:0.8rem
}
.seond-3{
    top: 6.6rem;
    left:1.2rem
}
.seond-4{
    top: 7.6rem;
    right:0.8rem
}
.seond-5{
    top: 10.9rem;
    left:1.2rem
}
.seond-6{
    top: 11.8rem;
    right:0.8rem
}
.seond-buntton{
    width: 70%;
    bottom: 0.20rem;
}
.bj-box{
    top: 4.3rem;
    right: .11rem;
}
.bj-box a{
    margin-left: .4rem;
    width: 2.45rem;
    line-height: .64rem;
    font-size: .36rem;
    color: #556b49;
    letter-spacing: .03rem;
    background-position: 0  -6.18rem;
}
.ml10{
    margin-left: .1rem;
}
.login_box{
    right: 0.5rem;
    top: 1.5rem;
    font-size: .36rem;
    color: #3b231e;
    padding: 0.1rem 0;
    border-bottom: 1px solid #3b231e;
}
.lottery-wp{
    width: 10.2rem;
    height: 10.02rem;
    background: url(/Public/special/images/20240506/m/zpbg.png) no-repeat; 
	background-size:  100% 100%;
    left: 50%;
    top: 5.28rem;
}
.lottery-bg{
    width: 8.01rem;
    height: 8.01rem;
    top: .5rem;
    left: 50%;
    margin-left: -4.02rem;
}

.l-r1{
    width: 3.85rem;
    left: -1.54rem;
    bottom: -1.1rem;
}
.l-r2{
    width: 4.21rem;
    right: -2.1rem;
    bottom: -.7rem;
}
.box3 .b-share{
    width: 5.07rem;
    height: 1.24rem;
    left: 50%;
    top: 8.74rem;
    background-position: 0 -3.63rem;
}

.box4{
    height: 25.3rem;
}
.box5{
    height: 20rem;
}
.box6{
    height: 20rem;
}
/* 新增：调整卡片和人物样式 */
.circle-container {
    position: relative;
    width: 100%;
    height: 11rem;
    margin-top: 1.5rem;
    perspective: 20rem;
}
.rotating-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; top: 0;
    transform-style: preserve-3d;
    pointer-events: none;
}
.rotating-circle.back { z-index: 1; }
.center-img { z-index: 2; position: absolute; left: 50%; top: 50%; width: 10rem; transform: translate(-50%, -50%); pointer-events: none;}
.rotating-circle.front { z-index: 3; }
.circle-item {
    position: absolute;
    left: 50%; top: 55%;
    width: 2rem;      /* 缩小宽度 */
    height: 3rem;     /* 缩小高度，保持比例 */
    margin: -1rem 0 0 -0.8rem; /* margin 也要对应调整为 -height/2 和 -width/2 */
    transition: transform 0.4s cubic-bezier(.4,1.6,.6,1), z-index 0.4s;
}
.circle-item img{
    width: 100%;
    height: 100%;
}
  .lottery-btn {
    width: 5rem;
    background: transparent ;
    display: block;
    border: none;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
  }
  .draw-btn {
    display: block;
    color: #a85b1b;
    border: none;
    border-radius: 30px;
    font-size: 1.2em;
    cursor: pointer;
  }
.chibang{
    width: 5.5rem;
    left: 0.2rem;
    top: 3rem;
}
.guangquan{
    width: 9rem;
    left: 0.15rem;
    top: 8rem;
}
.wuqi{
    width: 3rem;
    top: 9rem;
    left: 0.5rem;
}
.shizhuang{
    width: 8rem;
    top: 5.5rem;
    left: 2rem;
    
}
.chongwu{
    width: 6rem;
    top: 13.5rem;
    right: -0.2rem;
}
.name-list{
 width: 0.8rem;
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 right: 0rem;
 top: 0rem;
}
.titles{
    width: 0.6rem;
    font-size: 0.35rem;
    margin-top: -0.2rem;
}
.more-list{
    width: 5rem;
    top: 17rem;
    left: 30%;
}
.ts-swiper{
    width: 10.8rem;
    height:16.4rem;  
    background: url(/Public/special/images/20240506/m/a3bg.png) no-repeat center 1.09rem; 
	background-size:  100% 13.9rem;
    margin-top: .96rem;
}
.tocj{
    width: 2.2rem;
    top: 0.2rem;
    left: 0.2rem;
}
.boxCbs{
    position: fixed;
    z-index: 15;
    top:8rem;
    right: 0rem;
}
.closecj{
    right: -0.02rem;
    top: 0.45rem;
    width: 0.5rem;
}
.ts-swiper .z{
    top: 0;
    width: 4.67rem;
    left: 50%;
    margin-left: -2.33rem;
}
.ts-swiper .z img{
    width: 100%;
}
.ts-swiper .z-min{
    width: 4.22rem;
    margin-left: -2.11rem;
}
.swiper-button-z{
    width: .86rem;
    height: .72rem;
    top: 8.22rem;
}
.ts-swiper .swiper-button-prev{
    left: .2rem;
    background-position: 0 0;
}
.ts-swiper .swiper-button-next{
    right: .2rem;
    background-position: -.88rem 0;
}
.ts-swiper .swiper-slide >img{
    position: absolute;
    left: 50%;
    bottom: 4.09rem;
}
.ts-swiper .swiper-slide .swiper-more{
    width: 2.66rem;
    height: 2.66rem;
    background-position: 0 bottom;
    left: 50%;
    margin-left: -1.33rem;
    bottom: 0;
}

#address_success .pop-title-img{ 
    margin-top: 4rem;
    margin-bottom: 0.5rem;
}

#address_success .pop-title-img img{ 
    width: 9rem;
}
#gift_win .pop-title-img{ 
    margin-top: 4.2rem;
    margin-bottom: 0.2rem;
}
.pop-content{
    font-size: 0.45rem;
    margin-bottom: 0.3rem;
    color: #9d4f3a;
}
#gift_win .pwin_box{ 
    padding-left: .14rem; 
    width: 100%; 
    height: 13rem;
    font-size: .3rem; 
    color: #333333; 
    background:url(/Public/web/m/images/cover/20250818/ztc.png) no-repeat; 
    background-size:  100% 100%; 
    z-index: 1000;
}
#caption_win .pwin_box{ 
    padding-left: .14rem; 
    width: 100%; 
    height: 15rem;
    font-size: .3rem; 
    color: #333333; 
    background:url(/Public/web/m/images/cover/20250818/ztc.png) no-repeat; 
    background-size:  100% 100%; 
    z-index: 1000;
}
#invite_friends_win .pwin_box{ 
    padding-left: .14rem; 
    width: 100%; 
    height: 16rem;
    font-size: .3rem; 
    color: #333333; 
    background:url(/Public/web/m/images/cover/20250818/ztc.png) no-repeat; 
    background-size:  100% 100%; 
    z-index: 1000;
}
#invite_friends_win .pwin_box .pop-xs{
    top: 2.1rem;
}
#invite_friends_win .pop-title{
    margin: 4rem 0 .3rem 0;
}
#bound_win .pop-title{
    margin-top: 3rem;
}
#bound_win .pop-title{
    font-size: 0.55rem;
}
#bound_win .ls-from{
    margin-top: 0;
}
#address_win .pwin_box{ 
    padding-left: .14rem; 
    width: 100%; 
    height: 12rem;
    font-size: .3rem; 
    color: #333333; 
    background:url(/Public/web/m/images/cover/20250818/ztc.png) no-repeat; 
    background-size:  100% 100%; 
    z-index: 1000;
}

#win_list .pwin_box{ 
    padding-left: .34rem; 
    width: 100%; 
    height: 16rem;
    font-size: .3rem; 
    color: #333333; 
    background:url(/Public/web/m/images/cover/20250818/ztc.png) no-repeat; 
    background-size:  100% 100%; 
    z-index: 1000;
}
#win_list .pop-xs{
    top: 2.5rem;
}

.One-collect{
    position: absolute;
    left: 2.5rem;
    bottom: 1rem;
}
#invite_list .pwin_box{ 
    padding-left: .34rem; 
    width: 100%; 
    height: 13rem;
    font-size: .3rem; 
    color: #333333; 
    background:url(/Public/web/m/images/cover/20250818/ztc.png) no-repeat; 
    background-size:  100% 100%; 
    z-index: 1000;
}
#invite_list .pop-xs{
    top: 2rem;
}
#invite_record_win .pwin_box{ 
    padding-left: .34rem; 
    width: 100%; 
    height: 15rem;
    font-size: .3rem; 
    color: #333333; 
    background:url(/Public/web/m/images/cover/20250818/ztc.png) no-repeat; 
    background-size:  100% 100%; 
    z-index: 1000;
}
#invite_record_win .pwin_box .pop-xs{
    top: 2.3rem;
}
#address_win .pwin_box .pop-xs{
    top: 1.5rem;
}
#address_win .pop-title{
    margin-left: 1rem;
    text-align: left;
    margin-top: 3.3rem;
}
#address_win .ls-from {
    /* margin-left: 1rem; */
    margin-top: 0rem;
}
#win_list .pop-title{
    margin: 4rem 0 .3rem 0;
}
.pop_win .pwin_box{ 
    padding-left: .14rem; 
    width: 100%; 
    max-width: 1080px;
    height: 9rem;
    font-size: .3rem; 
    color: #333333; 
    background:url(/Public/web/m/images/cover/20250818/tc.png) no-repeat; 
    background-size:  100% 100%; 
    z-index: 1000;
}
.pop_win .pwin_box .pop-x{ 
    width: .69rem; 
    height: .65rem; 
    
    top: -.65rem; 
    right: 0; 
    background-position: -1.76rem 0 !important;
}
#caption_win .pwin_box .pop-xs{
    top: 2.1rem;
}
.pop_win .pwin_box .pop-xs{ 
    width: 1rem;
    height: 1rem;
    top: 1.1rem;
    right: 0;
}
.pop_win .pop-title{ 
  font-size:.42rem;
  line-height: .84rem;
  font-weight: bold;
    background: linear-gradient(180deg, #e89a4b 0%, #eebc7b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* 兼容性写法 */
    background-clip: text;
    text-fill-color: transparent; 
    height: .84rem;  
    margin: 3rem 0 .3rem 0;
}
.pop_win .pop-title span{
  color: #30996b; 
  letter-spacing: .06rem;
  position: relative;
  font-weight: bold;
}
#bind_win .pop-title{
    font-size: 0.55rem;
}
#bind_win .ls-from{
    margin-top: 0rem !important;
}
.pop-message{
    font-size: 0.45rem;
    color: #c19b84;
    line-height: 0.5rem;
    margin: 0.2rem 0 0.2rem;
}
.pop-message p{
    line-height: 0.6rem;
}
#preview_win ul{ 
	padding-top: .4rem;
    width: 90%;
    margin-left: 0.7rem;
}
#preview_win span{ width: 2rem; }
#preview_win span i{
	width: 1.65rem;
	height: 1.65rem;
	background-position: -6.6rem -1.83rem;
}
#preview_win span p{
	height: 1rem;
	padding-top: .1rem;
	line-height: .4rem;
}
#preview_win img{ 
	padding: 0; 
	width: 90%;
}
.pop_win .pop-title span::after,
.pop_win .pop-title span::before{
  content: "";
  position: absolute;
  background-color: #30996b;
  width: .08rem;
  height: .08rem;
  border-radius: 100%;
  top: 50%;
  margin-top: -.04rem;
}
.pop_win .pop-title span::after{
  left: -.28rem;
}
.pop_win .pop-title span::before{
  right: -.21rem;
}
.z-butc{ width:4.61rem; font-weight: bold; font-size: .48rem; height:1.16rem; line-height: 1.26rem;  color: #ffeec4 !important; display: flex;align-items: center;
        justify-content: center;  }
.z-buts{ width:5.61rem; font-weight: bold; font-size: .48rem; height:1.26rem; line-height: 1.26rem;  color: #ffeec4 !important;   }
.z-but{ width:4.61rem; font-weight: bold; font-size: .48rem; height:1.06rem; line-height: 1.06rem;  color: #ffeec4;   background-position: -2.47rem -6.18rem !important;}
.z-bind-but{background-position: 0 bottom; }
.z-but span{
  line-height: 1.06rem;
  letter-spacing: .05rem;
  background: -webkit-linear-gradient(to bottom, #ffedc3, #fef5e5); 
  background: linear-gradient(to bottom, #ffedc3, #fef5e5);
  -webkit-background-clip: text; 
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.ls-input-title{
    display: flex;
    align-items: center;
    font-size: 0.4rem   ;
    color: #ffae73;
    margin-bottom: 0.2rem;
}
.input-code{
    display: flex;
}
.ls-from{ margin-top: 4rem;  width: 8.5rem;}

.ls-input textarea,.ls-input input,.ls-input select{ 
    background: none; 
    border: none; 
    font-size:.32rem; 
    width: 100%; 
    text-align:left; 
    color:#333;
    font-family: "Microsoft YaHei", sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.ls-input input::placeholder,
.ls-input textarea::placeholder {
    color: #999;
    font-size: .28rem;
}
.pop-contents-message{
    margin-top: 5rem;
    font-size: 0.5rem;
    font-weight: bold;
    color: #b66225;
    text-align: center;
}
.ls-input:focus-within {
    border-color: #ff6b35;
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2);
    transform: translateY(-1px);
}

.ls-input input,.ls-input select,.ls-input input,.ls-input >span{ 
    height:1.1rem; 
    line-height:1.1rem;
}

.ls-input-min{ 
    width:65%;
}

.getCode,.b-pop-min{ 
    width:31%; 
    line-height:1.1rem; 
    color: #fff; 
    text-align:center; 
    border: solid 1px #ff6b35; 
    background:#ff6b35;
    height: 1.1rem;
    margin-left: .2rem; 
    border-radius: .08rem;
    font-size: .28rem;
    font-weight: bold;
    transition: all 0.3s ease;
}

.getCode:hover {
    background: #ff5722;
    border-color: #ff5722;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

/* 添加新的输入组样式 */
.input-group {
    display: flex;
    align-items: center;
    margin-bottom: .52rem;
}

.input-code {
    display: flex;
    align-items: center;
    flex: 1;
}
.address-from .ls-input{
  margin-bottom: 0.23rem;
}
.pop-title-img{
    margin-top: 5rem;
}
.pop-title-img img{
    width: 6rem;
}
.cont-box{ line-height: .6rem; margin-top: 0.7rem; padding: 0 0.3rem; color: #9d4f3a; height: 7.2rem; width: 90%;}
.cont-box p{
    display: flex;
}
.cont-box p img{
    display: flex;
    width: 0.3rem;
    height: 0.3rem;
    margin-right: 0.1rem;
    margin-top: 0.15rem;
}
/* .cont-box img{ padding:15px 0; max-width: 100%;} */
.img-content::-webkit-scrollbar {
    width: 8px;              /* 滚动条宽度 */
    background: transparent;  /* 滚动条轨道背景 */
}
  
.img-content::-webkit-scrollbar-thumb {
    background: #e7c98a;     /* 滚动条颜色（可自定义） */
    border-radius: 6px;      /* 圆角 */
    border: 2px solid #f7ecd2; /* 滚动条与轨道之间的间隙色 */
}
  
.img-content::-webkit-scrollbar-track {
    background: #f7ecd2;     /* 轨道颜色（可自定义） */
    border-radius: 6px;
}
#cont_win .pwin_box{
    height: 13.58rem;
    background:url(/Public/special/images/20240506/m/pbg2.png) no-repeat; 
    background-size:  100% 100%; 
}
#cont_win .cont-box{
    height: 10.5rem;
}


.list-box{text-align: center;}
.list-box .list-box-title{ color: #b54a4a;  }
.list-box li{  line-height: .6rem; padding: .15rem 0; margin-bottom: 2px;  border-bottom: 1px solid #c29179;}
/* .list-box li:nth-child(1){ border-top: 1px solid #d7e9c4; } */
.list-box li a{ line-height: .6rem; padding: 0 .2rem; border-radius: .3rem; color: #fff; background-color: #94d186; }
.list-box li span:nth-child(1){ width: 40%;}
.list-box li span:nth-child(2){ flex: 1;}
.list-box li span:nth-child(3){ width: 24%;}
.list-box .win-list{padding:0 .12rem; width: 8.78rem;  height: 7rem; box-sizing:content-box; overflow: hidden;}
.or-but{margin-top: .2rem;}
.or-but a{ margin: 0 .24rem; text-decoration:underline; color:#f06555; vertical-align:top; }
.notes{ line-height:.5rem; color:#808080;}

.rid_list{ height: 4.3rem; margin:.2rem 0 .3rem; overflow: hidden;}
.rid_list li{ margin: .2rem 0;  line-height: .6rem; height: .6rem; }
.rid_list li label:nth-child(1){ width: 36%;}
.rid_list li label:nth-child(2){ flex: 1; margin-right: .2rem; }
.rid_list li label span{ color: #30996b;}

.rid_list a{ width: 1.5rem; position: relative;  line-height: .6rem; height: .6rem; border-radius: .3rem; color: #ffebb5; background-color: #bf4d34;} 
.rid_list a::after{ content: "切 换"; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.rid_list a.active{ color: #bf4d34; background-color: #fac15a; }
.rid_list a.active::after{ content: "当 前";}

#prize_win .pwin_box{
    font-size: .8rem;
    height: 13.58rem;
    background:url(/Public/web/m/images/cover/20250818/ztc.png) no-repeat; 
    background-size:  100% 100%; 
}
#prize_win .pwin_box .pop-xs{
    top: 2.1rem;
}
#prize_win .pop-title-img{
    margin-top: 4rem;
}
#prize_win .pop-title-img img{
    width: 6rem;
}
.prize_bg{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#prize_win .prize-img{ 
  padding: .7rem 0 .2rem 0;
  height: 5rem;
}
#prize_win .prize-img img{
  height: 100%;
}
#prize_win .prize-name{
  margin-bottom: .5rem;
  font-size: .56rem;
  color: #e15f4e !important;
}

#hb_win .pwin_box{
  background: none;
  width: 10rem;
  height: 16.35rem;
  padding: 0 !important;
  margin: 0 !important;
}
#login_win .ls-from{
    margin-top: 3.5rem;
}
#qcode {
  width: 3.08rem;
  height: 3.08rem;  
  right: .29rem;
  bottom: .3rem;
  overflow: hidden;
}
#invite_code_win .ls-from{
    margin-top: 4.3rem;
}
#hb_win .pwin_box .pop-x{
  top: -46px;
  right: 0;
}
.but-invite-code{
    margin-top: 1rem;
}
.info_v2{
    background:url(/Public/special/images/20240506/m/v2/info.png) no-repeat; 
    background-size: 8rem 7.7rem; 
}
.all-swiper{
    margin-top: -.3rem;
    height: 18.35rem;
    padding-bottom: .25rem;
    width: 100%;
    background:url(/Public/special/images/20240506/m/v2/qbg.png) no-repeat right top; 
    background-size:  100% 18.13rem; 
}
.swiper-button-y{
    width: 1.07rem;
    height: 1.08rem;
    top: 50%;
    margin-top: -.54rem;
}
.all-swiper .swiper-button-prev{
    left: .2rem;
    background-position: right -4.73rem;
    
}
.all-swiper .swiper-button-next{
    right: .2rem;
    background-position: right -3.64rem;
}
.go-yd{
    width: 6.42rem;
    height: 1.74rem;
    background-position: 0 bottom;
    bottom: 0;
    left: 50%;
    margin-left: -3.21rem;
    z-index: 55;
}
.year-container{
    height: 17.3rem;
    background:url(/Public/special/images/20240506/m/v2/nbbg.png) no-repeat; 
    background-size:  100% 16.21rem;
    margin-top: .4rem;
}
.swiper1 .swiper-slide {
    opacity: 0 !important;
    -webkit-transition: all 0.3s ease-in 0;
    transition: all 0.3s ease-in 0s;
}

.swiper1 .swiper-slide.current {
    opacity: 1 !important;
}
.swiper1-sz{
    width: 1.46rem;
    left: 0;
    top: 7.72rem;
    z-index: 2;
}

.swiper1 .slide1 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb1.png) no-repeat; 
}
.swiper1 .slide2 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb2.png) no-repeat; 
    color: #37403a !important;
    line-height: .84rem !important;
}
.swiper1 .slide3 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb3.png) no-repeat; 
    line-height: .8rem !important;
}
.swiper1 .slide4 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb4.png) no-repeat; 
    line-height: .78rem !important;
}
.swiper1 .slide5 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb5.png) no-repeat; 
    line-height: 1rem !important;
}
.swiper1 .slide6 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb6.png) no-repeat; 
    color: #37403a !important;
}
.swiper1 .slide7 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb7.png) no-repeat; 
    line-height: 1rem !important;
}
.swiper1 .slide8 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb8.png) no-repeat; 
    line-height: .64rem !important;
}
.swiper1 .slide9 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb3.png) no-repeat; 
    line-height: 1.1rem !important;
}
.swiper1 .slide10 .text_box{
    background:url(/Public/special/images/20240506/m/v2/nb9.png) no-repeat; 
    line-height: 1.1rem !important;
}
.swiper1 .swiper-slide  .text_box{
    background-size:  100% 100%;
    width: 10.03rem;
    height: 14.54rem;
    float: right;  
    margin-top: 1.01rem;
    padding: 1.25rem .2rem 0 .98rem;
    text-align: left;
    color: #333333;
    font-size: .37rem;
    line-height: .58rem;
}
.swiper1 .swiper-slide .text_box p{
    position: relative;
}
.swiper1 .swiper-slide  .text_box h2{
    font-size: .4rem;
    line-height: .68rem;
    color: #fff;
}
.swiper1 .swiper-slide  .text_box h3{
    font-weight: bold;
    font-size: .35rem;
    margin-top: .5rem;
    position: relative;
}
.swiper1 .slide1 .text_box h3::after,
.swiper1 .slide2 .text_box p::after,
.swiper1 .slide3 .text_box p::after,
.swiper1 .slide4 .text_box p::after,
.swiper1 .slide6 .text_box h3::after,
.swiper1 .slide7 .text_box p::after,
.swiper1 .slide9 .text_box p::after,
.year-forms li::after
{
    position: absolute;
    width: .12rem;
    height: .12rem;
    left: -.24rem;
    top: 50%;
    margin-top: -.06rem;
    content: "";
    border-radius: 50%;
}
.swiper1 .slide1 .text_box h3::after{
    background-color: #6d5530;
}
.swiper1 .slide2 .text_box p::after,
.swiper1 .slide6 .text_box h3::after{
    background-color: #497758; 
}
.swiper1 .slide3 .text_box p::after{
    background-color: #6d5167; 
}
.swiper1 .slide4 .text_box p::after,
.swiper1 .slide7 .text_box p::after{
    background-color: #8b71b6; 
}
.swiper1 .slide3 .text_box p::after{
    background-color: #4a4a4a; 
}

.swiper1 .slide2 .text_box p,
.swiper1 .slide3 .text_box p,
.swiper1 .slide4 .text_box p,
.swiper1 .slide9 .text_box p{
    margin-left: .24rem;
}

.swiper1 .slide4 .text_box h2{
    margin: .1rem 0 .2rem;
}

.swiper1 .slide5 .text_box h2{
    margin: .35rem 0 .3rem;
}
.swiper1 .slide6 .text_box h2{
    margin: 0 0 .2rem;
}
.swiper1 .slide7 .text_box h2{
    margin: .1rem 0 .5rem;
}
.swiper1 .slide8 .text_box h2{
    margin: 0 0 .3rem;
}
.swiper1 .slide9 .text_box h2{
    margin: 0 0 .3rem;
}
.swiper1 .slide10 .text_box h2{
    margin: .35rem 0 .3rem;
}
.slide10 a{
    width: 5.21rem;
    height: 1.27rem;
    top: 13.5rem;
    left: 50%;
    margin-left: -2.2rem;
    background-position: 0 0;
}
.swiper1 .swiper-pagination{
    padding-right: 2.8rem;
    height: .46rem;
    bottom: 0;
    text-align: right;
}
.swiper1 .swiper-pagination span{
    width: .44rem;
    height: .44rem;
    background:url(/Public/special/images/20240506/m/v2/nd2.png) no-repeat; 
    background-size: 100% 100%;
    opacity: 1 !important;
    margin: 0 .16rem !important;
}
.swiper1 .swiper-pagination span.swiper-pagination-bullet-active{
    background:url(/Public/special/images/20240506/m/v2/nd1.png) no-repeat; 
    background-size: 100% 100%;
}
.b-pass{
    width: 1.3rem;
    line-height: .48rem;
    color: #fff;
    font-size: .32rem;
    border-radius: .24rem;
    bottom: 0;
    background-color: #77a078;
    right: 1.3rem;
    z-index: 12;
}

.year-forms{
    margin-top: .79rem;
    height: 14.77rem;
    width: 10.3rem;
    background:url(/Public/special/images/20240506/m/v2/nsbg.png) no-repeat; 
    background-size: 100% 100%; 
}
.year-forms ul{
    width: 9.34rem;
    margin-top: 1.5rem;
}
.year-forms li{
    color: #333333;
    font-size: .36rem;
    float: left;
    margin: .22rem 0;
    line-height: .58rem;
    padding-right: .3rem;
    text-align: left;
    position: relative;

}
.year-forms li::after{
   left: -.3rem;
   margin-top: .22rem;
   top: 0;
   background-color: #333333;
}
.year-forms li:nth-child(odd){
    width: 4.64rem;
} 

.year-forms li:nth-child(even){
    width: 4.7rem;
} 

.year-forms li span,
.swiper1 .text_box p span{
    color: #e0734c;
    font-weight: bold;
}
.b-tag{
    width: 4.24rem;
    height: 1.27rem;
    background-position: 0 -1.29rem;
    left: 50%;
    margin-left: -2rem;
    top: 14rem;
}

.tag_win{
    width: 10.03rem;
    right: 0;
    height: 14.53rem;
    background:url(/Public/special/images/20240506/m/v2/xbg.png) no-repeat; 
    background-size: 100% 100%; 
    top: 1.01rem;
    padding:1.07rem .18rem 0 .88rem;
    text-align: left;
    color: #333333;
}
.tag_win h2{
    line-height: .8rem;
    font-size: .4rem;
    margin-bottom: .26rem;
}
.tag_win ul{
    height: 11rem;
    width: 100%;
    overflow: hidden;
}
.tag_win ul li{
    width: 7.86rem;
    float: left;
    font-size: .37rem;
    line-height: 1.22rem;
    border-radius: .62rem;
    padding-left: 1.18rem;
    border: solid 1px #d3b482;
    margin-bottom: .28rem;
    position: relative;
}
.tag_win ul li.active{
    background-color: #d3b482;
}
.tag_win ul li::after{
    position: absolute;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    border: solid .03rem #caa66c;
    content: "";
    left: .49rem;
    top: 50%;
    margin-top: -.2rem;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
.tag_win ul li.active::after{
    border: solid .03rem #e16945;
}
.tag_win ul li.active::before{
    position: absolute;
    width: .24rem;
    height: .24rem;
    border-radius: 50%;
    background-color: #e16945;
    content: "";
    left: .57rem;
    top: 50%;
    margin-top: -.12rem;
}
.tag_win .btn_confirm{
    position: absolute;
    width: 6rem;
    height: 1.94rem;
    background-position: 0 -2.58rem;
    left: 1.83rem;
    bottom: -1rem;
}
.menu-mask {
    display: none;
    position: fixed;
    z-index: 998;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.01); /* 几乎透明，只用于捕获点击 */
  }
  .side-menu.active + .menu-mask,
  .menu-mask.active {
    display: block;
  }
.menu-btn{
    margin-top: 0.36rem;
    margin-right: 0.2rem;
}
/* 侧边栏菜单 */
.side-menu {
  position: fixed;
  top: 0;
  right: -6rem;
  width: 6rem;
  max-width: 320px;
  height: 11rem;
  background: rgba(120, 40, 20, 0.92); /* 半透明红棕色 */
  color: #fff;
  z-index: 99;
  transition: right 0.3s;
  box-shadow: -2px 0 16px rgba(0,0,0,0.18);
  border-radius: 0 0 16px 16px;
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.side-menu.active {
  right: 0;
}

.side-menu ul {
  width: 90%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #a44b38;
  color: #fff;
  letter-spacing: 2px;
  position: relative;
  /* 确保没有任何过渡效果 */
  transition: none !important;
}

/* 选中项高亮 - 立即切换，无过渡动画 */
.menu-item.active {
  color: #ffd97a !important;
  font-weight: bold !important;
  transition: none !important;
}

.menu-item.active::before,
.menu-item.active::after {
  content: "◆";
  color: #ffd97a;
  font-size: 0.8rem;
  margin: 0 0.2rem;
  vertical-align: middle;
  transition: none !important;
}

/* 鼠标悬停效果 - 立即切换 */
.menu-item:hover {
  color: #ffd97a;
  cursor: pointer;
  transition: none !important;
}

/* 预约抽奖按钮样式 */
.lottery-buttons {
    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    /* z-index: 1001; */
}
button{
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

.lottery-btns {
    width:4.5rem;
    display: flex;
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.lottery-btn:hover {
    transform: scale(1.05);
}

.lottery-btn img {
    width: 4rem;
    height: auto;
}

/* 奖品展示区域 */
.prize-display {
    position: absolute;
    top: 1.5rem;
    left: 49%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.1rem;
    /* z-index: 1001; */
}

.prize-item {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.prize-item.selected {
    border-color: #ff5a5a;
}

.prize-item img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}


@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) rotate(90deg); }
    50% { transform: translate(-50%, -50%) rotate(180deg); }
    75% { transform: translate(-50%, -50%) rotate(270deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 预约成功提示 */
.appointment-success {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 1rem;
    border-radius: 0.5rem;
    z-index: 10000;
    display: none;
}
.invite-friends{
    width: 100%;
    position: absolute;
    top: 25.2rem;
    left: 0;
    display: flex;
    flex-direction: column;
}
.invite-friends img{
    width: 75%;
}
.invite-friends-content{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
    margin-top: 1.5rem;
}
.invite-friends-content img{
    width: 100%;
}
.invite-friends-content-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -0.45rem;
    right:0.5rem;
    z-index: 1000;
}
.invite-friends-content-btn img{
    width: 2.5rem;
}
.invite-friends-number{
    position: absolute;
    top: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.invite-friends-number-img{
    display: flex;
    width: 65% !important;
}
.invite-friends-number-content{
    position: absolute;
    color: #d86f57;
    font-size: 0.35rem;
    letter-spacing: 0.1rem;
    font-weight: bold;
    margin-left: 0.1rem;
}
.invite-friends-number-content span{
    color: #d86f57;
    font-size: 0.456rem;
    font-weight: bold;
}

/* 邀请好友相关样式 */
.invite-friends-title {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.activity-rules-btn {
    position: absolute;
    right: 0.5rem;
    top: 4.2rem;
    cursor: pointer;
}

.activity-rules-btn img {
    width: 2.5rem;
}

/* 好友头像展示区域 */
.friends-avatars {
    position: absolute;
    top: 2.8rem;
    left: 48.5%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    z-index: 10;
    width: 65%;
    max-width: 8rem;
}

.friends-avatar-list {
    display: flex;
    width: 5.5rem;
    gap: 0.2rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    margin-right: 0.2rem;
}

.friends-avatar-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}

.friends-avatar-list .friend-avatar {
    flex-shrink: 0;
}

.friend-avatar {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #ffdb8f;
}

.friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.add-friend-btn {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: #ffab74;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #ffab74;
}

.add-friend-btn img {
    width: 60%;
    height: 60%;
}

/* 邀请操作按钮 */
.invite-actions {
    position: absolute;
    top: 4.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 10;
}

.invite-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.invite-action-btn img {
    width: 3rem;
    height: auto;
}

/* 邀请任务列表 */
.invite-tasks {
    position: absolute;
    top: 7.1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    z-index: 10;
}

.task-item {
    display: flex;
    align-items: center;
    background: url(/Public/web/m/images/cover/20250818/yqbjgg.png) no-repeat center center;
    background-size: 100% 100%;
    border-radius: 0.3rem;
    padding: 0.2rem 0.15rem;
    margin-bottom: 0.2rem;
    backdrop-filter: blur(10px);
}

.task-icon {
    width: 1.1rem;
    height: 1.1rem;
    margin-right: 0.2rem;
    flex-shrink: 0;
}

.task-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.task-content {
    flex: 1;
    margin-right: 0.3rem;
}

.task-title {
    text-align: left;
    font-size: 0.32rem;
    color: #0e0e0e;
    margin-bottom: 0.1rem;
    letter-spacing: 0.01rem;
}
.task-message{
    text-align: left;
    font-size: 0.3rem;
    color: #0e0e0e;
    margin-bottom: 0.1rem;
    letter-spacing: 0.01rem;
}
.task-progress {
    font-size: 0.18rem;
    text-align: left;
    font-size: 0.32rem;
    color: #ec914b;
}

.task-action {
    flex-shrink: 0;
}

.task-btn {
    border: none;
    width: 2rem;
    font-size: 0.2rem;
    padding: 0.15rem 0.3rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.task-btn:hover {
    transform: scale(1.05);
}

.task-btn.completed {
}

/* 邀请记录按钮 */
.invite-record-btn {
    position: absolute;
    top: 6.5rem;
    right: 1rem;
    font-size: 0.3rem;
    color: #d85a59;
    cursor: pointer;
}

.invite-record-btn img {
    width: 2rem;
}

/* 邀请码输入弹窗样式 */
.invite-code-from {
    padding: 0.5rem 0;
}

/* 邀请记录弹窗样式 */
.invite-record-list {
    max-height: 6rem;
    overflow-y: auto;
}

.invite-record-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.invite-record-list li:last-child {
    border-bottom: none;
}

/* 邀请记录详细信息样式 */
.record-info {
    flex: 1;
}

.record-name {
    font-size: 0.28rem;
    color: #fff;
    margin-bottom: 0.1rem;
}

.record-time {
    font-size: 0.22rem;
    color: #999;
}

.record-status {
    font-size: 0.24rem;
    color: #ffdb8f;
    padding: 0.1rem 0.2rem;
    border-radius: 0.1rem;
    background: rgba(255, 219, 143, 0.1);
}

.record-status.completed {
    color: #4ecdc4;
    background: rgba(78, 205, 196, 0.1);
}

/* 邀请好友弹窗样式 */
.invite-share-content {
    padding: 0.5rem;
}

.share-url-section {
    margin-bottom: 0.5rem;
}

.share-url-label {
    font-size: 0.3rem;
    color: #8B4513;
    margin-bottom: 0.2rem;
}

.share-url-input {
    display: flex;
    gap: 0.2rem;
}

.share-url-input input {
    flex: 1;
    padding: 0.2rem;
    border: 1px solid #ccc;
    border-radius: 0.1rem;
    font-size: 0.25rem;
    background: #fff;
    color: #333;
}

.copy-btn {
    background: #ff6b6b;
    color: #8B4513;
    border: none;
    border-radius: 0.1rem;
    padding: 0.2rem 0.4rem;
    font-size: 0.25rem;
    cursor: pointer;
}

.share-qrcode-section {
    /* margin-bottom: 0.5rem; */
}
.share-invite-label{
    font-size: 0.3rem;
    color: #8B4513;
    margin-bottom: 0.2rem;
}
.share-invite-input input {
    flex: 1;
    padding: 0.2rem;
    border: 1px solid #ccc;
    border-radius: 0.1rem;
    font-size: 0.25rem;
    background: #fff;
    color: #333;
}
.share-invite-input{
    display: flex;
    gap: 0.2rem;
}
.share-invite-section{
    margin-bottom: 0.3rem;
}
.share-qrcode-label {
    font-size: 0.3rem;
    color: #8B4513;
    margin-bottom: 0.2rem;
}

.share-qrcode {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.2rem;
    width: 4rem;
    margin: 0 auto;
}

.share-tips {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.2rem;
    padding: 0.3rem;
}

.share-tips p {
    font-size: 0.25rem;
    color: #8B4513;
    margin: 0.1rem 0;
    line-height: 1.4;
}

/* 响应式调整 */
@media (max-width: 768px) {
    
    
    .friend-avatar,
    .add-friend-btn {
        width: 1.2rem;
        height: 1.2rem;
    }
    
    .invite-action-btn img {
        width: 3rem;
    }
    
    .task-item {
        padding: 0.2rem 0.15rem;
    }
    
    .task-title {
        text-align: left;
        font-size: 0.32rem;
        color: #0e0e0e;
    }
    
    .task-progress {
        font-size: 0.18rem;
        text-align: left;
        font-size: 0.32rem;
        color: #ec914b;
    }
    
    .task-btn {
        font-size: 0.18rem;
        padding: 0.1rem 0.2rem;
    }
}

/* 签到功能样式 - 重新设计以匹配设计图 */
.sign-in {
    width: 100%;
    position: absolute;
    top: 51rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.sign-in-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    margin-bottom: 0.5rem;
}
.sign-in-title img{
    width: 100%;
}

.sign-in-content {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sign-in-content img {
    width: 100%;
}

/* 签到日历面板 - 重新设计以匹配设计图 */
.sign-in-calendar-panel {
    position: absolute;
    top: 42.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 89%;
    z-index: 10;
}

/* 日历标题栏 */
.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0.3rem 0 0.3rem;
    border-radius: 0.15rem;
}

.calendar-nav-btn {
    width: 0.8rem;
    height: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.next-month{
    position: absolute;
    right: 0.2rem;
    top: 3.6rem;
    z-index: 10;
}
.prev-month{
    position: absolute;
    left: 0.2rem;
    top: 3.6rem;
    z-index: 10;
}

.calendar-nav-btn:hover {
    transform: scale(1.1);
}

.calendar-nav-btn img {
    width: 100%;
    height: 100%;
}

.calendar-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 0.28rem;
    color: #fff;
    font-weight: bold;
}

.calendar-tip {
    color: #fff;
    font-size: 0.24rem;
    flex: 1;
    text-align: left;
}

.calendar-month {
    color: #ffd700;
    font-size: 0.42rem;
    text-align: right;
}

.calendar-month-img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.calendar-month-img img {
    width: 1.5rem;
    height: auto;
    object-fit: contain;
}

/* 日历网格 - 严格按照设计图7列布局 */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.03rem;
}

.calendar-day {
    width: 100%;
    height: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.42rem;
    color: #929292;
    font-weight: bold;
    border-radius: 0.03rem;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}

.calendar-day .day-number {
    position: relative;
}

.calendar-day .sign-status-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.calendar-day.today.signed .sign-status-img {
    z-index: 3; /* 今天已签到时，图片在最上层 */
    width: 80%; /* 稍微小一点，避免遮挡背景 */
    height: 80%;
}

.calendar-day.other-month {
    color: #c15638;
    background: #f0f0f0;
    cursor: default;
}

.calendar-day.signed {
    background: none; /* 移除背景图片，只使用img标签 */
    color: #929292;
    position: relative;
}

.calendar-day.missed {
    background-color: #d7d7d7 !important;
    color: #929292 !important;
    opacity: 0.6;
}

/* 确保未签到日期不显示签到图标 */
.calendar-day.missed.signed {
    background: #d7d7d7 !important;
    color: #929292 !important;
    opacity: 0.6;
}

/* 确保今天的日期不显示灰色背景 */
.calendar-day.today.missed {
    background: url(/Public/web/m/images/cover/20250818/qdgl.png) no-repeat center center !important;
    background-size: 110% 110% !important;
    color: #929292 !important;
    opacity: 1 !important;
}



.calendar-day.today {
    background: url(/Public/web/m/images/cover/20250818/qdgl.png) no-repeat center center;
    background-size: 110% 110%;
    color: #c15638;
}

.calendar-day.today .sign-status-img {
    display: none; /* 今天不显示签到图片，只显示背景 */
}

.calendar-day.today.signed {
    background: url(/Public/web/m/images/cover/20250818/qdgl.png) no-repeat center center;
    background-size: 110% 110%;
    color: #c15638;
    font-weight: bold;
}

.calendar-day.today.signed .sign-status-img {
    display: block !important; /* 今天已签到时显示签到图片 */
    z-index: 3; /* 确保图片在最上层 */
}

/* 签到按钮 - 调整位置 */
.sign-in-btn-container {
    position: absolute;
    bottom: 0.6rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.zzb-img{
    position: absolute;
    display: flex;
    bottom: -2.5rem;   
    left: 0; 
    z-index: 8;
}
.zzb-img img{
    width: 3.5rem;
}
.sign-in-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}

.sign-in-btn img {
    width: 5.2rem;
    height: auto;
}

.signed-btn {
    cursor: default;
    opacity: 0.8;
}

.signed-btn:hover {
    opacity: 0.8;
}

/* 抽奖功能样式 - 重新设计以匹配设计图 */
.lottery-contents {
    width: 100%;
    position: relative;
    position: absolute;
    top: 65.5rem;
}

.lottery-contents-title {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
    margin: 0 auto 0.5rem;
}

.lottery-contents-title img {
    width: 100%;
}

.lottery-contents-content {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.5rem;
}
.lottery-number{
    top: 0.5rem;
    position: absolute;
    color: #f4e2b0;
    font-size: 0.5rem;
    letter-spacing: 0.03rem;
}
.zx-img{
    position: absolute;
    bottom: -3rem;
    right: 0;
    z-index: 10;
    display: flex;
}
.zx-img img{
    width: 4rem;
}
.lottery-contents-content img {
    width: 100%;
    height: 100%;
}

/* 九宫格宝盒样式 - 优化设计 */
.treasure-box {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 50%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 0.2rem;
    z-index: 10;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 165, 0, 0.05));
    border-radius: 0.15rem;
    padding: 0.15rem;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 0 20px rgba(255, 215, 0, 0.1);
}

.treasure-slot {    
    
    border-radius: 0.08rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.14rem;
    color: #333;
    position: relative;
    flex-direction: column;
    transition: all 0.3s ease;
    
    overflow: hidden;
}

.treasure-slot::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.treasure-slot:hover::before {
    left: 100%;
}



.prize-label {
    position: absolute;
    bottom: 0rem;
    font-size: 0.25rem;
    width: 1.5rem;
    /* 自动换行 */
    word-wrap: break-word;
    word-break: break-all;
    color: #333;
    text-align: center;
    margin-top: 0.03rem;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.treasure-slot:hover .prize-label {
    color: #ff6b35;
    transform: scale(1.05);
}

/* 抽奖按钮 - 调整位置 */
.lottery-contents-content-btn {
    position: absolute;
    bottom: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.lottery-contents-content-btn-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.lottery-contents-content-btn-btn img {
    width: 5.2rem;
    height: auto;
}

/* 角色绑定和抽奖记录 - 调整位置 */
.lottery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;
}

.lottery-bind-link {
    font-size: 0.42rem;
    color: #cd5a40;
    cursor: pointer;
    padding: 0.2rem 0;
    margin-left: 0.4rem;
    border-radius: 0.1rem;
    border-bottom: 1px solid #cd5a40;
}

.lottery-record-btn img{
    width: 2.5rem;
    margin-right: 0.6rem;
}

.lottery-record-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}


@keyframes spin {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(90deg); }
    50% { transform: rotate(180deg); }
    75% { transform: rotate(270deg); }
    100% { transform: rotate(360deg); }
}


@keyframes boxSpin {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.05) rotate(90deg); }
    50% { transform: scale(1.1) rotate(180deg); }
    75% { transform: scale(1.05) rotate(270deg); }
    100% { transform: scale(1) rotate(360deg); }
}


@keyframes buttonSpin {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(5deg); }
    50% { transform: scale(1.05) rotate(0deg); }
    75% { transform: scale(1.1) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* 奖品闪光效果 */
.prize-glow {
    animation: glow 0.5s ease-in-out;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
    50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.8); }
    100% { box-shadow: 0 0 5px rgba(255, 215, 0, 0.3); }
}

.activities-colorful{
    position: absolute;
    top: 83rem;
    left: 0;
    width: 100%;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;
}
.activities-colorful-title{    
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75%;
}
.activities-colorful-title img{
    width: 100%;
}

/* 活动卡片样式 */
.activities-colorful-content {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}

.activity-cards {
    width: 100%;
}

.activity-card {
    display: flex;
    width: 6rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    position: absolute;
}

.activity-card:nth-child(1){
    left: 0;
}

.activity-card:nth-child(2){
    left: 5rem;
    top: 2.5rem;
}

.activity-card:nth-child(3){
    left: 0rem;
    top: 5.8rem;
}

.activity-card:nth-child(4){
    left: 5rem;
    top: 8rem;
}

.activity-card img{
    width: 100%;
}
.activity-card-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 1.5rem;
}


.activity-card:active {
    transform: translateY(-0.1rem) scale(1.02);
}

/* 点击波纹效果 */
.activity-card {
    overflow: hidden;
}

.activity-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s;
}

.activity-card:active::after {
    width: 200%;
    height: 200%;
}

.activity-icon {
    width: 3.5rem;
    height: 3.5rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.activity-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0.2rem 0.4rem rgba(255, 215, 0, 0.3));
    transition: all 0.3s ease;
}

.activity-card:hover .activity-icon img {
    filter: drop-shadow(0 0.3rem 0.6rem rgba(255, 215, 0, 0.6));
    transform: scale(1.1);
}

.activity-title {
    font-size: 0.32rem;
    color: #dd6754;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0.1rem;
}

.activity-subtitle {
    font-size: 0.32rem;
    color: #dd6754;
    text-align: center;
    font-weight: bold;
}

/* 活动卡片动画效果 */
.activity-card {
    animation: fadeInUp 0.6s ease-out;
}

.activity-card:nth-child(1) { animation-delay: 0.1s; }
.activity-card:nth-child(2) { animation-delay: 0.2s; }
.activity-card:nth-child(3) { animation-delay: 0.3s; }
.activity-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 输入组容器 */
.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    width: 100%;
}

/* 标签样式 */
.input-label {
    width: 1.5rem;
    font-size: 0.45rem;
    color: #dc6a40;
    font-weight: bold;
    text-align: left;
    margin-right: 0.3rem;
    flex-shrink: 0;
    line-height: 1.1rem;
}

/* 输入框容器 */
.input-container {
    flex: 1;
    display: flex;
    align-items: center;
}

/* 输入框样式 */
.ls-input {
    border: 1px solid #ffae73;
    background: #fff;
    border-radius: 0.08rem;
    padding: 0 0.3rem;
    overflow: hidden;
    
}

.ls-input:focus-within {
    /* border-color: #ff6b35; */
    /* box-shadow: 0 2px 8px rgba(255, 107, 53, 0.2); */
}

.ls-input input {
    background: none;
    border: none;
    font-size: 0.32rem;
    width: 100%;
    text-align: left;
    color: #333;
    font-family: "Microsoft YaHei", sans-serif;
    outline: none;
    height: 1.1rem;
    line-height: 1.1rem;
}

.ls-input input::placeholder {
    color: #c4bcbc;
    font-weight: bold;
    font-size: 0.35rem;
}

/* 验证码输入框 */
.verification-input {
    flex: 1;
    margin-right: 0.2rem;
}

/* 验证码按钮 */
.getCode {
    width: 2.5rem;
    height: 1.1rem;
    line-height: 1.1rem;
    color: #fff;
    text-align: center;
    border: 1px solid #ffae73;
    background: #ffae73;
    border-radius: 0.08rem;
    font-size: 0.35rem;
    font-weight: bold;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.getCode:hover {
    background: #ffae73;
    border-color: #ffae73;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
}

/* 手机号输入框 */
.phone-input {
    width: 100%;
}


@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    25% { transform: translate(-50%, -50%) rotate(90deg); }
    50% { transform: translate(-50%, -50%) rotate(180deg); }
    75% { transform: translate(-50%, -50%) rotate(270deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}


@keyframes buttonSpin {
    0% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(5deg); }
    50% { transform: scale(1.05) rotate(0deg); }
    75% { transform: scale(1.1) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.pop-neser{
    width: 8.5rem;
    margin-left: 1rem;
    font-size: 0.4rem;
    margin-bottom: 0.5rem;
    color: #f96a65;
}
/* 九宫格槽位高亮动画 - 类似图片中的黄色高亮效果 */
.treasure-slot.active-slot {
    background: url(/Public/web/m/images/cover/20250818/jlgld.png) no-repeat center center;
    background-size: 100% 100%;
    transform: scale(1.2);
    z-index: 10;
    position: relative;
    animation: slotPulse 0.5s ease-in-out;
}

.treasure-slot.active-slot::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    /* background: linear-gradient(45deg, #ffd700, #ffa500, #ffd700); */
    border-radius: 10px;
    z-index: -1;
    animation: borderGlow 0.8s ease-in-out infinite;
}

.treasure-slot.active-slot::after {
    content: '★';
    position: absolute;
    top: -10px;
    right: -10px;
    color: #ffd700;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
    animation: starTwinkle 1s ease-in-out infinite;
}

@keyframes slotPulse {
    0% { 
        transform: scale(1);
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
    }
    50% { 
        transform: scale(1.15);
        box-shadow: 
            0 0 25px rgba(255, 215, 0, 1),
            0 0 50px rgba(255, 215, 0, 0.6);
    }
    100% { 
        transform: scale(1.1);
        box-shadow: 
            0 0 15px rgba(255, 215, 0, 0.8),
            0 0 30px rgba(255, 215, 0, 0.4);
    }
}

@keyframes borderGlow {
    0% { 
        opacity: 0.6;
        transform: scale(1);
    }
    50% { 
        opacity: 1;
        transform: scale(1.02);
    }
    100% { 
        opacity: 0.6;
        transform: scale(1);
    }
}

@keyframes starTwinkle {
    0% { 
        opacity: 0.3;
        transform: scale(0.8) rotate(0deg);
    }
    50% { 
        opacity: 1;
        transform: scale(1.3) rotate(180deg);
    }
    100% { 
        opacity: 0.3;
        transform: scale(0.8) rotate(360deg);
    }
}

/* 奖品闪光效果 */
.prize-glow {
    animation: glow 0.8s ease-in-out;
    box-shadow: 0 0 20px rgba(255, 215, 0, 1);
}

@keyframes glow {
    0% { 
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
        transform: scale(1.1);
    }
    50% { 
        box-shadow: 0 0 30px rgba(255, 215, 0, 1);
        transform: scale(1.2);
    }
    100% { 
        box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
        transform: scale(1.1);
    }
}

/* 抽奖记录表格样式 */
.lottery-record-table {
    margin-top: 0.5rem;
    width: 10rem;
    margin-bottom: 0.5rem;
}

.table-header {
    display: flex;
    background: #ffd8bb;
    height: 1.3rem;
    justify-content: center;
    align-items: center;
    border: 1px solid #e57557;
}

.header-cell {
    flex: 1;
    text-align: center;
    color: #9d4f3a;
    font-size: 0.32rem;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #e57557;
}

.table-header .header-cell:last-child {
    border-right: none;
}

.table-body {
    width: 10.15rem;
    max-height: 6rem;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.9);
}

.lottery-record-list {
    padding: 0;
    list-style: none;
}

.lottery-record-list li {
    display: flex;
    align-items: center;
    border-left: 1px solid #e57557;
    border-right: 1px solid #e57557;
    border-bottom: 1px solid #e57557;
    background: #fff;
    transition: background-color 0.3s ease;
}

.lottery-record-list li:hover {
    background: #f8f9fa;
}

.lottery-record-list li:last-child {
    /* border-bottom: none; */
}

.lottery-record-list .record-cell {
    flex: 1;
    text-align: center;
    font-size: 0.28rem;
    color: #9d4f3a !important;
    word-break: break-word;
    border-right: 1px solid #e57557;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 1.19rem;
}

.lottery-record-list .record-cell:last-child {
    border-right: none;
}

.lottery-record-list .prize-name {
    font-weight: 500;
    color: #2c3e50;
}

.lottery-record-list .record-time {
    color: #7f8c8d;
    font-size: 0.26rem;
}

.lottery-record-list .claim-status {
    display: flex;
    justify-content: center;
    align-items: center;
}

.claim-btn {
    
    padding: 0.15rem 0.4rem;
    border-radius: 0.2rem;
    font-size: 0.24rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    min-width: 1.2rem;
    text-align: center;
}
.claim-btn img{
    width: 1.8rem;
}

.claim-btn.claimed {
    background: #95a5a6;
    color: #fff;
    cursor: default;
}

.claim-btn.claim-now {
    color: #fff;
}

.claim-btn.claim-now:hover {
    background: linear-gradient(135deg, #c0392b, #a93226);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(231, 76, 60, 0.4);
}

.claim-btn.claim-now:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

/* 空状态样式 */
.lottery-record-list .empty-state {
    text-align: center;
    padding: 2rem 0;
    color: #7f8c8d;
    font-size: 0.3rem;
    display: flex;
    justify-content: center;
}

/* 滚动条样式 */
.table-body::-webkit-scrollbar {
    width: 0.2rem;
    color: #30996b;
}

.table-body::-webkit-scrollbar-track {
    background: #f8dc80;
}

.table-body::-webkit-scrollbar-thumb {
    background: #f38262;
    border-radius: 0.1rem;
}

.table-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

.bound-rid-display {
    text-align: center;
    
}

.bound-rid-display span {
    font-size: 0.45rem;
    color: #b66224;
    font-weight: bold;
    letter-spacing: 0.03rem;
}

.appointment-success-content {
    text-align: center;
    padding: 0.5rem 0;
}

.success-message {
    font-size: 0.6rem;
    color: #666;
    margin: 0;
}
#appointment_success_win .pop-title-img{
    margin-top: 4rem;
}
.appointment-success-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.8rem;
    width: 90%;
    margin-left: 5%;
}

/* 已接受邀请弹窗样式 */
#accepted_invite_popup .pwin_box {
    background: linear-gradient(135deg, #fff9e6, #fff5d6);
    border: 2px solid #ffd700;
    border-radius: 0.5rem;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
    position: relative;
    overflow: hidden;
}

#accepted_invite_popup .pwin_box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="waves" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><path d="M0 10 Q5 5 10 10 T20 10" stroke="rgba(255,215,0,0.1)" fill="none" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23waves)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

#accepted_invite_popup .pop-content {
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

#accepted_invite_popup .accepted-text {
    font-size: 0.8rem;
    font-weight: bold;
    color: #8B4513;
    margin: 0;
    line-height: 1.4;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

#accepted_invite_popup .pop-exit {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #666;
    text-decoration: none;
    z-index: 2;
    transition: all 0.3s ease;
}

#accepted_invite_popup .pop-exit:hover {
    background: rgba(255,255,255,1);
    color: #333;
    transform: scale(1.1);
}