:root{
  --color-white: #ffffff;
  --color-read: #b22b28;
   /*登陆会员*/    
    --color-text-small-lv0: #9b8585;
    --color-text-normal-lv0: #333333;
    --color-text-large-lv0: #666666;
    --bg-bgcolor-lv0: rgb(197, 19, 29);
    --bg-img-lv0: url("../img/topbg.png");
    /*--bg-img-icon-lv0: url("../img/lv/lv0.png");*/
    --bg-gradient-lv0: linear-gradient(to right, #ffffff, #f8ecec);
    --bg-gradient-icon-lv0: linear-gradient(to right, transparent, #f7c9c9);
    --bg-level-name-lv0:rgba(183, 178, 178, 0.25);
    --progress-fill-color-lv0: linear-gradient(to right, #fe817f, #b32b28);
    --progress-bg-color-lv0: rgb(255, 158, 156);
    --particle-color-lv0: radial-gradient(circle, rgb(255, 200, 200) 0%, rgba(255, 140, 140, 0.7) 30%, transparent 70%);
    --glow-color-lv0: radial-gradient(circle, rgba(80, 4, 4, 0.35) 0%, rgba(80, 3, 3, 0.65) 50%, transparent 75%);
    --sparkle-color-lv0:#ffffff;
  /*普通会员*/    
    --color-text-small-lv1: #b22b28;
    --color-text-normal-lv1: #3f0a09;
    --color-text-large-lv1: #760a08;
    --bg-bgcolor-lv1: rgb(197, 19, 29);
    --bg-img-lv1: url("../img/lv/topbg_lv1.png");
    --bg-img-icon-lv1: url("../img/lv/lv1.png");
    --bg-gradient-lv1: linear-gradient(to right, #fcd8d7, #fc928f);
    --bg-gradient-icon-lv1: linear-gradient(to right, transparent, #f78181);
    --bg-level-name-lv1:rgba(195, 5, 5, 0.25);
    --progress-fill-color-lv1: linear-gradient(to right, #fe817f, #b32b28);
    --progress-bg-color-lv1: rgb(255, 158, 156);
    --particle-color-lv1: radial-gradient(circle, rgb(255, 200, 200) 0%, rgba(255, 140, 140, 0.7) 30%, transparent 70%);
    --glow-color-lv1: radial-gradient(circle, rgba(80, 4, 4, 0.35) 0%, rgba(80, 3, 3, 0.65) 50%, transparent 75%);
    --sparkle-color-lv1:#ffffff;
    /*白银会员*/
    --color-text-small-lv2: #595e80;
    --color-text-normal-lv2: #373d61;
    --color-text-large-lv2: #373d61;
    --bg-bgcolor-lv2: rgb(106, 109, 120);
    --bg-img-lv2: url("../img/lv/topbg_lv2.png");
    --bg-img-icon-lv2: url("../img/lv/lv2.png");
    --bg-gradient-lv2: linear-gradient(to right, #eef0f6, #cacedd);
    --bg-gradient-icon-lv2: linear-gradient(to right, transparent, #e2e9f7);
    --bg-level-name-lv2:rgba(128, 128, 128, 0.25);
    --progress-fill-color-lv2: linear-gradient(to right, #cccade, #6e7b8d);
    --progress-bg-color-lv2: rgb(204, 202, 222);
    --particle-color-lv2: radial-gradient(circle, rgb(224, 242, 252) 0%, rgba(184, 215, 253, 0.7) 30%, transparent 70%);
    --glow-color-lv2: radial-gradient(circle, rgba(34, 47, 74, 0.35) 0%, rgba(30, 46, 77, 0.65) 50%, transparent 75%);
    --sparkle-color-lv2:#ffffff;
    /*黄金会员*/
    --color-text-small-lv3: #e6a058;
    --color-text-normal-lv3: #240a00;
    --color-text-large-lv3: #513b25;
    --bg-bgcolor-lv3: rgb(212, 152, 91);
    --bg-img-lv3: url("../img/lv/topbg_lv3.png");
    --bg-img-icon-lv3: url("../img/lv/lv3.png");
    --bg-gradient-lv3: linear-gradient(to right, #fbf5dd, #f8c9aa);
    --bg-gradient-icon-lv3: linear-gradient(to right, transparent, #f8c287);
    --bg-level-name-lv3:rgba(212, 152, 91, 0.2);
    --progress-fill-color-lv3: linear-gradient(to right, #fcde83, #e09950);
    --progress-bg-color-lv3: rgb(255, 215, 0);
    --particle-color-lv3: radial-gradient(circle, rgb(255, 255, 153) 0%, rgba(255, 255, 102, 0.7) 30%, transparent 70%);
    --glow-color-lv3: radial-gradient(circle, rgba(62, 46, 2, 0.35) 0%, rgba(51, 34, 2, 0.65) 50%, transparent 75%);
    --sparkle-color-lv3:#ffffff;
    /*铂金会员*/
    --color-text-small-lv4: #333399;
    --color-text-normal-lv4: #2d2664;
    --color-text-large-lv4: #333399;
    --bg-bgcolor-lv4: rgb(105, 97, 166);
    --bg-img-lv4: url("../img/lv/topbg_lv4.png");
    --bg-img-icon-lv4: url("../img/lv/lv4.png");
    --bg-gradient-lv4: linear-gradient(to right, #f5f1fe, #d0d2fe);
    --bg-gradient-icon-lv4: linear-gradient(to right, transparent, #8d81e5);
    --bg-level-name-lv4:rgba(116, 107, 185, 0.2);
    --progress-fill-color-lv4: linear-gradient(to right, #c7bbfc, #5d53a5);
    --progress-bg-color-lv4: rgb(221, 208, 254);
    --particle-color-lv4: radial-gradient(circle, rgb(233, 218, 252) 0%, rgba(225, 210, 252, 0.7) 30%, transparent 70%);
    --glow-color-lv4: radial-gradient(circle, rgba(26, 4, 55, 0.35) 0%, rgba(37, 28, 49, 0.65) 50%, transparent 75%);
    --sparkle-color-lv4:#ffffff;
    /*钻石会员*/
    --color-text-small-lv5: #5a3f1e;
    --color-text-normal-lv5: #312210;
    --color-text-large-lv5: #5a3f1e;
    --bg-bgcolor-lv5: rgb(116, 84, 44);
    --bg-img-lv5: url("../img/lv/topbg_lv5.png");
    --bg-img-icon-lv5: url("../img/lv/lv5.png");
    --bg-gradient-lv5: linear-gradient(to right, #fcf6ee, #d5cdc4);
    --bg-gradient-icon-lv5: linear-gradient(to right, transparent, #a2896b);
    --bg-level-name-lv5:rgba(116, 84, 44, 0.2);
    --progress-fill-color-lv5: linear-gradient(to right, #eedbc8, #503c23);
    --progress-bg-color-lv5: rgb(238, 219, 200);
    --particle-color-lv5: radial-gradient(circle, rgb(224, 224, 224) 0%, rgba(192, 192, 192, 0.7) 30%, transparent 70%);
    --glow-color-lv5: radial-gradient(circle, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 50%, transparent 75%);
    --sparkle-color-lv5:#ffffff;
}
/*登陆会员*/
.user_lv0 .level-nr-list{display: none;}
.user_lv0 .user-left-right dd{color: var(--color-read); 
-webkit-text-stroke: 0.06rem var(--color-white);text-stroke: 0.06rem var(--color-white);
  -webkit-text-fill-color: var(--color-read);text-fill-color: var(--color-read);
  paint-order: stroke fill; /* 先画描边，再画填充 */}
.user_lv0 .user-topbg{ background-image: var(--bg-img-lv0);}
.user_lv0 .user-topbg::before{ background-color: var(--bg-bgcolor-lv0);}
.user_lv0 .user-left-right dt a{background: var(--bg-gradient-icon-lv0); color: var(--color-text-normal-lv0);}
.user_lv0 .user-level{background-image: var(--bg-img-icon-lv0);}
.user_lv0 .level-nr{ background: var(--bg-gradient-lv0); position: relative; }
.user_lv0 .level-name{ background-color: var(--bg-level-name-lv0); color: var(--color-text-small-lv0); }
.user_lv0 .level-vip big{ color: var(--color-text-normal-lv0); }
.user_lv0 .level-num{ color: var(--color-text-small-lv0); background: var(--bg-gradient-icon-lv0); }
.user_lv0 .level-jinbi{color: var(--color-text-normal-lv0);}
.user_lv0 .level-tips{color: var(--color-text-large-lv0);}
.user_lv0 .progress-fill{ background: var(--progress-fill-color-lv0); }
.user_lv0 .progress-fill::after{ background: var(--progress-bg-color-lv0);box-shadow: -0.1rem 0rem 0.25rem 0.2rem var(--progress-bg-color-lv0); }
.user_lv0 .badge{background-image: var(--bg-img-icon-lv0);}
.user_lv0 .particle{background: var(--particle-color-lv0);}
.user_lv0 .glow{background: var(--glow-color-lv0);}
.user_lv0 .level-next-icon{background-image: var(--bg-img-icon-lv1);}
.user_lv0 .sparkle{background: var(--sparkle-color-lv0); display: none;}
.user_lv0 .icon-youjiantou{ background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23b22b28' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
}
/*普通会员*/
.user_lv1 .user-left-right dd{color: var(--color-read); 
-webkit-text-stroke: 0.06rem var(--color-white);text-stroke: 0.06rem var(--color-white);
  -webkit-text-fill-color: var(--color-read);text-fill-color: var(--color-read);
  paint-order: stroke fill; /* 先画描边，再画填充 */}
.user_lv1 .user-topbg{ background-image: var(--bg-img-lv1);}
.user_lv1 .user-topbg::before{ background-color: var(--bg-bgcolor-lv1);}
.user_lv1 .user-left-right dt a{background: var(--bg-gradient-icon-lv1); color: var(--color-text-normal-lv1);}
.user_lv1 .user-level{background-image: var(--bg-img-icon-lv1);}
.user_lv1 .level-nr{ background: var(--bg-gradient-lv1); position: relative; }
.user_lv1 .level-name{ background-color: var(--bg-level-name-lv1); color: var(--color-text-small-lv1); }
.user_lv1 .level-vip big{ color: var(--color-text-normal-lv1); }
.user_lv1 .level-num{ color: var(--color-text-small-lv1); background: var(--bg-gradient-icon-lv1); }
.user_lv1 .level-jinbi{color: var(--color-text-normal-lv1);}
.user_lv1 .level-tips{color: var(--color-text-large-lv1);}
.user_lv1 .progress-fill{ background: var(--progress-fill-color-lv1); }
.user_lv1 .progress-fill::after{ background: var(--progress-bg-color-lv1);box-shadow: -0.1rem 0rem 0.25rem 0.2rem var(--progress-bg-color-lv1); }
.user_lv1 .badge{background-image: var(--bg-img-icon-lv1);}
.user_lv1 .particle{background: var(--particle-color-lv1);}
.user_lv1 .glow{background: var(--glow-color-lv1);}
.user_lv1 .level-next-icon{background-image: var(--bg-img-icon-lv2);}
.user_lv1 .sparkle{background: var(--sparkle-color-lv1); display: none;}
.user_lv1 .icon-youjiantou{ background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23b22b28' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
}
/*白银会员*/
.user_lv2 .user-left-right dd{color: var(--color-read); 
-webkit-text-stroke: 0.06rem var(--color-white);text-stroke: 0.06rem var(--color-white);
  -webkit-text-fill-color: var(--color-read);text-fill-color: var(--color-read);
  paint-order: stroke fill; /* 先画描边，再画填充 */}
.user_lv2 .user-topbg{ background-image: var(--bg-img-lv2);}
.user_lv2 .user-topbg::before{ background-color: var(--bg-bgcolor-lv2);}
.user_lv2 .user-left-right dt a{background: var(--bg-gradient-icon-lv2);color:var(--color-text-normal-lv2);}
.user_lv2 .user-level{background-image: var(--bg-img-icon-lv2);}
.user_lv2 .level-nr{ background: var(--bg-gradient-lv2); position: relative; }
.user_lv2 .level-name{ background-color: var(--bg-level-name-lv2); color: var(--color-text-small-lv2); }
.user_lv2 .level-vip big{ color: var(--color-text-normal-lv2); }
.user_lv2 .level-num{ color: var(--color-text-small-lv2); background: var(--bg-gradient-icon-lv2); }
.user_lv2 .level-jinbi{color: var(--color-text-normal-lv2);}
.user_lv2 .level-tips{color: var(--color-text-large-lv2);}
.user_lv2 .progress-fill{ background: var(--progress-fill-color-lv2); }
.user_lv2 .progress-fill::after{ background: var(--progress-bg-color-lv2);box-shadow: -0.1rem 0rem 0.25rem 0.2rem var(--progress-bg-color-lv2); }
.user_lv2 .badge{background-image: var(--bg-img-icon-lv2);}
.user_lv2 .particle{background: var(--particle-color-lv2);}
.user_lv2 .glow{background: var(--glow-color-lv2);}
.user_lv2 .level-next-icon{background-image: var(--bg-img-icon-lv3);}
.user_lv2 .sparkle{background: var(--sparkle-color-lv2);display: none;}
.user_lv2 .icon-youjiantou{ background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%239492aa' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
}
/*黄金会员*/
.user_lv3 .user-left-right dd{color: var(--color-read); 
-webkit-text-stroke: 0.06rem var(--color-white);text-stroke: 0.06rem var(--color-white);
  -webkit-text-fill-color: var(--color-read);text-fill-color: var(--color-read); paint-order: stroke fill; 
}
.user_lv3 .user-topbg{background-image: var(--bg-img-lv3);}
.user_lv3 .user-topbg::before{ background-color: var(--bg-bgcolor-lv3);}
.user_lv3 .user-left-right dt a{background: var(--bg-gradient-icon-lv3); color: var(--color-text-normal-lv3);}
.user_lv3 .user-level{background-image: var(--bg-img-icon-lv3);}
.user_lv3 .level-nr{ background: var(--bg-gradient-lv3); position: relative; }
.user_lv3 .level-name{ background-color: var(--bg-level-name-lv3); color: var(--color-text-small-lv3); }
.user_lv3 .level-vip big{ color: var(--color-text-normal-lv3); }
.user_lv3 .level-num{ color: var(--color-text-small-lv3); background: var(--bg-gradient-icon-lv3); }
.user_lv3 .level-jinbi{color: var(--color-text-normal-lv3);}
.user_lv3 .level-tips{color: var(--color-text-large-lv3);}
.user_lv3 .progress-fill{ background: var(--progress-fill-color-lv3); }
.user_lv3 .progress-fill::after{ background: var(--progress-bg-color-lv3);box-shadow: -0.1rem 0rem 0.25rem 0.2rem var(--progress-bg-color-lv3); }
.user_lv3 .badge{background-image: var(--bg-img-icon-lv3);}
.user_lv3 .particle{background: var(--particle-color-lv3);}
.user_lv3 .glow{background: var(--glow-color-lv3);}
.user_lv3 .level-next-icon{background-image: var(--bg-img-icon-lv4);}
.user_lv3 .sparkle{background: var(--sparkle-color-lv3);display: none;}
.user_lv3 .icon-youjiantou{ background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23e0780a' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
}
/*铂金会员*/
.user_lv4 .user-left-right dd{color: var(--color-read); 
-webkit-text-stroke: 0.06rem var(--color-white);text-stroke: 0.06rem var(--color-white);
  -webkit-text-fill-color: var(--color-read);text-fill-color: var(--color-read); paint-order: stroke fill; 
}
.user_lv4 .user-topbg{ background-image: var(--bg-img-lv4);}
.user_lv4 .user-topbg::before{ background-color: var(--bg-bgcolor-lv4);}
.user_lv4 .user-left-right dt a{background: var(--bg-gradient-icon-lv4); color: var(--color-text-normal-lv4);}
.user_lv4 .user-level{background-image: var(--bg-img-icon-lv4);}
.user_lv4 .level-nr{ background: var(--bg-gradient-lv4); position: relative; }
.user_lv4 .level-name{ background-color: var(--bg-level-name-lv4); color: var(--color-text-small-lv4); }
.user_lv4 .level-vip big{ color: var(--color-text-normal-lv4); }
.user_lv4 .level-num{ color: var(--color-text-small-lv4); background: var(--bg-gradient-icon-lv4); }
.user_lv4 .level-jinbi{color: var(--color-text-normal-lv4);}
.user_lv4 .level-tips{color: var(--color-text-large-lv4);}
.user_lv4 .progress-fill{ background: var(--progress-fill-color-lv4); }
.user_lv4 .progress-fill::after{ background: var(--progress-bg-color-lv4);box-shadow: -0.1rem 0rem 0.25rem 0.2rem var(--progress-bg-color-lv4); }
.user_lv4 .badge{background-image: var(--bg-img-icon-lv4);}
.user_lv4 .particle{background: var(--particle-color-lv4);}
.user_lv4 .glow{background: var(--glow-color-lv4);}
.user_lv4 .level-next-icon{background-image: var(--bg-img-icon-lv5);}
.user_lv4 .sparkle{background: var(--sparkle-color-lv4);display: none;}
.user_lv4 .icon-youjiantou{ background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%232d2664' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
}
/*钻石会员*/
.user_lv5 .user-left-right dd{color: var(--color-read); 
-webkit-text-stroke: 0.06rem var(--color-white);text-stroke: 0.06rem var(--color-white);
  -webkit-text-fill-color: var(--color-read);text-fill-color: var(--color-read); paint-order: stroke fill; 
}
.user_lv5 .user-topbg{ background-image: var(--bg-img-lv5);}
.user_lv5 .user-topbg::before{ background-color: var(--bg-bgcolor-lv5);}
.user_lv5 .user-left-right dt a{background: var(--bg-gradient-icon-lv5); color: var(--color-text-normal-lv5);}
.user_lv5 .user-level{background-image: var(--bg-img-icon-lv5);}
.user_lv5 .level-nr{ background: var(--bg-gradient-lv5); position: relative; }
.user_lv5 .level-name{ background-color: var(--bg-level-name-lv5); color: var(--color-text-small-lv5); }
.user_lv5 .level-vip big{ color: var(--color-text-normal-lv5); }
.user_lv5 .level-num{ color: var(--color-text-small-lv5); background: var(--bg-gradient-icon-lv5); }
.user_lv5 .level-jinbi{color: var(--color-text-normal-lv5);}
.user_lv5 .level-tips{color: var(--color-text-large-lv5);}
.user_lv5 .progress-fill{ background: var(--progress-fill-color-lv5); }
.user_lv5 .progress-fill::after{ background: var(--progress-bg-color-lv5);box-shadow: -0.1rem 0rem 0.25rem 0.2rem var(--progress-bg-color-lv5); }
.user_lv5 .badge{background-image: var(--bg-img-icon-lv5);}
.user_lv5 .particle{background: var(--particle-color-lv5);}
.user_lv5 .glow{background: var(--glow-color-lv5);}
.user_lv5 .level-next-icon{background-image: var(--bg-img-icon-lv5);}
.user_lv5 .sparkle{background: var(--sparkle-color-lv5);}
.user_lv5 .icon-youjiantou{ background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%235a3f1e' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z' clip-rule='evenodd'/></svg>");
}
/*钻石会员 end*/
.user-topbg::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4rem; background-size: 100% auto;background-position: top center; border-radius: 0 0 30% 30%;background-repeat: no-repeat; z-index: -1;}
.user-left-right dt a{ display: inline-flex; padding: 0.05rem 0.12rem; border-radius: 0.5rem; font-size: 0.24rem; font-weight: bold; justify-content: center;
    align-items:center; }
.user-level{ display: inline-block; width: 0.35rem; height: 0.4rem;  background-size: contain; background-repeat: no-repeat; background-position: center; margin-right: 0.1rem;margin-top: -0.05rem; vertical-align: middle;}
.icon-youjiantou{ display: inline-block; width: 0.2rem; height: 0.2rem; 
  /*background-image: url("../img/right.png"); */
  vertical-align: -.125em;
 background-repeat: no-repeat;
  background-size: 100%; background-position: center;
  background-size: contain; background-repeat: no-repeat; background-position: center; margin-left: 0.05rem; vertical-align: middle;}
.level-tilhs{width: 100%; overflow: hidden; position: relative; z-index: 2; border-radius: 0.15rem;}
.level-name{ font-size: 0.26rem; font-weight: bold; padding: 0.1rem 0.15rem; border-radius:0rem 0rem 0.3rem 0rem; display: inline-block; }
.level-nr{width: 92%;    margin: 4% auto;
    padding: 0%;
    border-radius: 0.15rem;
    -webkit-border-radius: 0.15rem;
    -moz-border-radius: 0.15rem;
    box-shadow: 0px 0rem 0.4rem rgba(000, 000, 000, .1);
    -webkit-box-shadow: 0px 0rem 0.4rem rgba(000, 000, 000, .1);
    -moz-box-shadow: 0px 0rem 0.4rem rgba(000, 000, 000, .1);}
.level-vip{padding:0.3rem 0.2rem 0.05rem 0.2rem; display:flex;justify-content: flex-start; align-items: center;}
.level-vip big{ font-size: 0.44rem; font-weight: bold; vertical-align: -0.02rem;}
.level-num{ font-size: 0.24rem; font-weight: bold;border-radius:0rem 0.5rem 0.5rem 0rem;  margin-left: 0.12rem; padding:0.05rem; display: inline-flex; vertical-align: middle;align-items: center; justify-content: center;}
.level-jinbi{  padding: 0.05rem 0.2rem; font-size: 0.24rem;}
.level-jinbi small{ font-size: 0.22rem;}
.level-tips{ font-size: 0.22rem; padding: 0rem 0.25rem 0.2rem 0.25rem; }
.progress {
  width: 100%;
  margin: 0.2rem auto 0.1rem auto;
  height: 0.1rem;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
}
.progress-fill {
  height: 100%;
  border-radius: 0.5rem;
  transition: width 0.3s;
  overflow: hidden;
  position:relative;
}
.progress-fill {
  animation: loadProgress 2s ease forwards; /* forwards保留最终状态 */
  -webkit-animation: loadProgress 2s ease forwards;
  -moz-animation: loadProgress 2s ease forwards;
}

@keyframes loadProgress {
  from { width: 0; }
  to   {  }
}
@-webkit-keyframes loadProgress {
  from { width: 0; }
  to   {  }
}
@-moz-keyframes loadProgress {
  from { width: 0; }
  to   {  }
}



/* 光点：用伪元素实现 */
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 0.2rem;
  height: 90%;
 /* background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );*/
  border-radius: 0rem 50% 50% 0;
  animation: glint 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  -webkit-animation: glint 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    -moz-animation: glint 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes glint {
  0% {
    left: -30px;        /* 从左侧外开始 */
  }
  100% {
    left: 110%;         /* 移动到右侧外 */
  }
}
@-webkit-keyframes glint {
  0% {
    left: -30px;        /* 从左侧外开始 */
  }
  100% {
    left: 110%;         /* 移动到右侧外 */
  }
}
@-moz-keyframes glint {
  0% {
    left: -30px;        /* 从左侧外开始 */
  }
  100% {
    left: 110%;         /* 移动到右侧外 */
  }
}
.level-nr-list{position: absolute; top:-1rem; right: 0.3rem;z-index: 1;}
.level-progress{position:relative; padding:0rem 0.25rem;}
.level-progress-max .level-next-icon{display:none;}
.level-next-icon{position: absolute;right: 0.2rem;width: 0.4rem; height: 0.3rem; background-size: contain; background-repeat: no-repeat; background-position: center; top: -0.15rem;}

/* 主场景 */
        .scene {
            position: relative;
            z-index: 1;
            perspective: 700px;
            perspective-origin: 50% 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* 浮动层 */
        .badge-float {
            position: relative;
            /*animation: floatBadge 3.8s cubic-bezier(0.45, 0, 0.55, 1) 6s infinite;
            -webkit-animation: floatBadge 3.8s cubic-bezier(0.45, 0, 0.55, 1) 6s infinite;
            filter: drop-shadow(0 20px 35px rgba(255, 255, 255, 0.45))
                drop-shadow(0 8px 15px rgba(0, 0, 0, 0.25))
                drop-shadow(0 2px 5px rgba(255, 255, 255, 0.4));
            -webkit-filter: drop-shadow(0 20px 35px rgba(255, 255, 255, 0.45))
                drop-shadow(0 8px 15px rgba(0, 0, 0, 0.25))
                drop-shadow(0 2px 5px rgba(255, 255, 255, 0.4));
            transition: filter 0.3s;
            -moz-transition: filter 0.3s;
            -webkit-transition: filter 0.3s;*/
        }

        @keyframes floatBadge {
            0%,
            100% {
                transform: translateY(0);
                filter: drop-shadow(0 20px 35px rgba(255, 255, 255, 0.45))
                    drop-shadow(0 8px 15px rgba(0, 0, 0, 0.25))
                    drop-shadow(0 2px 5px rgba(255, 255, 255, 0.4));
            }
            35% {
                transform: translateY(-0.4rem);
                filter: drop-shadow(0 32px 50px rgba(255, 255, 255, 0.35))
                    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18))
                    drop-shadow(0 4px 8px rgba(255, 255, 255, 0.3));
            }
            65% {
                transform: translateY(-0.1rem);
                filter: drop-shadow(0 26px 42px rgba(255, 255, 255, 0.4))
                    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22))
                    drop-shadow(0 3px 6px rgba(255, 255, 255, 0.35));
            }
        }
        @-webkit-keyframes floatBadge {
            0%,
            100% {
                transform: translateY(0);
                filter: drop-shadow(0 20px 35px rgba(255, 255, 255, 0.45))
                    drop-shadow(0 8px 15px rgba(0, 0, 0, 0.25))
                    drop-shadow(0 2px 5px rgba(255, 255, 255, 0.4));
            }
            35% {
                transform: translateY(-0.4rem);
                filter: drop-shadow(0 32px 50px rgba(255, 255, 255, 0.35))
                    drop-shadow(0 14px 22px rgba(0, 0, 0, 0.18))
                    drop-shadow(0 4px 8px rgba(255, 255, 255, 0.3));
            }
            65% {
                transform: translateY(-0.1rem);
                filter: drop-shadow(0 26px 42px rgba(255, 255, 255, 0.4))
                    drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22))
                    drop-shadow(0 3px 6px rgba(255, 255, 255, 0.35));
            }
        }

        /* 徽章主体 - 显示和旋转动画 */
        .badge {
            width: 2.5rem;
            height: 2.5rem;
            position: relative;
            /*transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            animation: badgeAppearAndRotate 6s cubic-bezier(0.25, 0.1, 0.25, 1) 1.2s both;
            -webkit-animation: badgeAppearAndRotate 6s cubic-bezier(0.25, 0.1, 0.25, 1) 1.2s both;*/
            cursor: default;
            
            background-position: center;
            background-size: 100% auto;
            background-repeat: no-repeat;
        }

        @keyframes badgeAppearAndRotate {
            /* 阶段1：从小到大、从无到有 */
            0% {
                transform: scale(0) rotateY(0deg);
                opacity: 0;
            }
            8% {
                transform: scale(1.08) rotateY(0deg);
                opacity: 1;
            }
            12% {
                transform: scale(0.94) rotateY(0deg);
                opacity: 1;
            }
            16% {
                transform: scale(1) rotateY(0deg);
                opacity: 1;
            }
            /* 阶段2：360度Y轴旋转一圈 */
            50% {
                transform: scale(1) rotateY(360deg);
                opacity: 1;
            }
            /* 阶段3：静止停留 */
            100% {
                transform: scale(1) rotateY(360deg);
                opacity: 1;
            }
        }
        @-webkit-keyframes badgeAppearAndRotate { 
            /* 阶段1：从小到大、从无到有 */
            0% {
                transform: scale(0) rotateY(0deg);
                opacity: 0;
            }
            8% {
                transform: scale(1.08) rotateY(0deg);
                opacity: 1;
            }
            12% {
                transform: scale(0.94) rotateY(0deg);
                opacity: 1;
            }
            16% {
                transform: scale(1) rotateY(0deg);
                opacity: 1;
            }
            /* 阶段2：360度Y轴旋转一圈 */
            50% {
                transform: scale(1) rotateY(360deg);
                opacity: 1;
            }
            /* 阶段3：静止停留 */
            100% {
                transform: scale(1) rotateY(360deg);
                opacity: 1;
            }
        }


        /* 光线扫过效果 */
        .shine-sweep {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            z-index: 10;
            pointer-events: none;
            overflow: hidden;
            opacity: 0;
            animation: shineSweep 0.7s ease-in-out 3.3s forwards;
            -webkit-animation: shineSweep 0.7s ease-in-out 3.3s forwards;
            -moz-animation: shineSweep 0.7s ease-in-out 3.3s forwards;
        }
        .shine-sweep::before {
            content: '';
            position: absolute;
            top: 5%;
            left: -9%;
            width: 50%;
            height: 115%;
            background: linear-gradient(105deg,
                    transparent 0%,
                    transparent 30%,
                    rgba(255, 255, 255, 0) 45%,
                    rgba(255, 255, 255, 0.45) 50%,
                    rgba(255, 255, 255, 0.1) 55%,
                    transparent 70%,
                    transparent 100%);
            transform: skewX(-15deg);
            -webkit-transform: skewX(-15deg);
            -moz-transform: skewX(-15deg);
        }

        @keyframes shineSweep {
            0% {
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @-webkit-keyframes shineSweep { 
            0% {
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        /* 第二道光线 */
        .shine-sweep2 {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            z-index: 10;
            pointer-events: none;
            overflow: hidden;
            opacity: 0;
            animation: shineSweep2 0.6s ease-in-out 4.5s forwards;
            -webkit-animation: shineSweep2 0.6s ease-in-out 4.5s forwards;
            -moz-animation: shineSweep2 0.6s ease-in-out 4.5s forwards;
        }
        .shine-sweep2::before {
            content: '';
            position: absolute;
            top: 25%;
            right: -5%;
            width: 40%;
            height: 80%;
            background: linear-gradient(285deg,
                    transparent 0%,
                    transparent 30%,
                    rgba(255, 255, 255, 0.12) 45%,
                    rgba(255, 255, 255, 0.35) 50%,
                    rgba(255, 255, 255, 0.12) 55%,
                    transparent 70%,
                    transparent 100%);
            transform: skewX(10deg);
            -webkit-transform: skewX(10deg);
            -moz-transform: skewX(10deg);
        }

        @keyframes shineSweep2 {
            0% {
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        @-webkit-keyframes shineSweep2 { 
            0% {
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        /* 飘浮光点粒子 */
        .particles-layer {
            position: absolute;
            inset: -10px;
            pointer-events: none;
            z-index: 11;
        }
        .particle {
            position: absolute;
            border-radius: 50%;
            animation: particleDrift 5s ease-in-out infinite;
            -webkit-animation: particleDrift 5s ease-in-out infinite;
            -moz-animation: particleDrift 5s ease-in-out infinite;
        }
        .particle:nth-child(1) {
            width: 6px;
            height: 6px;
            top: 8%;
            left: 55%;
            animation-delay: 0s;
            -webkit-animation-delay: 0s;
            animation-duration: 4.5s;
            -webkit-animation-duration: 4.5s;
        }
        .particle:nth-child(2) {
            width: 4px;
            height: 4px;
            top: 15%;
            left: 75%;
            animation-delay: 0.8s;
            -webkit-animation-delay: 0.8s;
            animation-duration: 5.2s;
            -webkit-animation-duration: 5.2s;
        }
        .particle:nth-child(3) {
            width: 5px;
            height: 5px;
            top: 60%;
            left: 82%;
            animation-delay: 1.5s;
            -webkit-animation-delay: 1.5s;
            animation-duration: 4.8s;
            -webkit-animation-duration: 4.8s;
        }
        .particle:nth-child(4) {
            width: 3px;
            height: 3px;
            top: 78%;
            left: 40%;
            animation-delay: 2.2s;
            -webkit-animation-delay: 2.2s;
            animation-duration: 5.5s;
            -webkit-animation-duration: 5.5s;
        }
        .particle:nth-child(5) {
            width: 5px;
            height: 5px;
            top: 72%;
            left: 12%;
            animation-delay: 0.5s;
            -webkit-animation-delay: 0.5s;
            animation-duration: 4.3s;
            -webkit-animation-duration: 4.3s;
        }
        .particle:nth-child(6) {
            width: 4px;
            height: 4px;
            top: 30%;
            left: 8%;
            animation-delay: 1.8s;
            -webkit-animation-delay: 1.8s;
            animation-duration: 5s;
            -webkit-animation-duration: 5s;
        }
        .particle:nth-child(7) {
            width: 6px;
            height: 6px;
            top: 10%;
            left: 28%;
            animation-delay: 2.8s;
            -webkit-animation-delay: 2.8s;
            animation-duration: 4.6s;
            -webkit-animation-duration: 4.6s;
        }
        .particle:nth-child(8) {
            width: 3px;
            height: 3px;
            top: 50%;
            left: 90%;
            animation-delay: 3.2s;
            -webkit-animation-delay: 3.2s;
            animation-duration: 5.3s;
            -webkit-animation-duration: 5.3s;
        }
        .particle:nth-child(9) {
            width: 4px;
            height: 4px;
            top: 85%;
            left: 62%;
            animation-delay: 1.2s;
            -webkit-animation-delay: 1.2s;
            animation-duration: 4.9s;
            -webkit-animation-duration: 4.9s;
        }
        .particle:nth-child(10) {
            width: 5px;
            height: 5px;
            top: 20%;
            left: 92%;
            animation-delay: 2.5s;
            -webkit-animation-delay: 2.5s;
            animation-duration: 5.1s;
            -webkit-animation-duration: 5.1s;
        }
        .particle:nth-child(11) {
            width: 3px;
            height: 3px;
            top: 40%;
            left: 3%;
            animation-delay: 3.8s;
            -webkit-animation-delay: 3.8s;
            animation-duration: 4.4s;
            -webkit-animation-duration: 4.4s;
        }
        .particle:nth-child(12) {
            width: 4px;
            height: 4px;
            top: 55%;
            left: 18%;
            animation-delay: 0.3s;
            -webkit-animation-delay: 0.3s;
            animation-duration: 5.6s;
            -webkit-animation-duration: 5.6s;
        }

        @keyframes particleDrift {
            0%,
            100% {
                transform: translate(0, 0) scale(0.6);
                opacity: 0.3;
            }
            15% {
                transform: translate(8px, -14px) scale(1.3);
                opacity: 1;
            }
            30% {
                transform: translate(-4px, -22px) scale(0.7);
                opacity: 0.5;
            }
            50% {
                transform: translate(-10px, -8px) scale(1.1);
                opacity: 0.9;
            }
            65% {
                transform: translate(6px, 4px) scale(0.5);
                opacity: 0.25;
            }
            80% {
                transform: translate(3px, -18px) scale(1.2);
                opacity: 0.8;
            }
            92% {
                transform: translate(-6px, -5px) scale(0.55);
                opacity: 0.35;
            }
        }
        @-webkit-keyframes particleDrift {
            0%,
            100% {
                -webkit-transform: translate(0, 0) scale(0.6);
                opacity: 0.3;
            }
            15% {
                -webkit-transform: translate(8px, -14px) scale(1.3);
                opacity: 1;
            }
            30% {
                -webkit-transform: translate(-4px, -22px) scale(0.7);
                opacity: 0.5;
            }
            50% {
                -webkit-transform: translate(-10px, -8px) scale(1.1);
                opacity: 0.9;
            }
            65% {
                -webkit-transform: translate(6px, 4px) scale(0.5);
                opacity: 0.25;
            }
            80% {
                -webkit-transform: translate(3px, -18px) scale(1.2);
                opacity: 0.8;
            }
            92% {
                -webkit-transform: translate(-6px, -5px) scale(0.55);
                opacity: 0.35;
            }
        }

     /* 底部辉光 */
    .glow{
        position:absolute;
        width:3.3rem;
        height:0.3rem;
        bottom:0.06rem;
        right:-0.6rem;
        border-radius:50%;
        filter:blur(5px);
        -webkit-filter:blur(5px);
        -moz-filter:blur(5px);
        /*animation: glowPulse 3.8s cubic-bezier(0.45, 0, 0.55, 1) 6s infinite;
        -webkit-animation: glowPulse 3.8s cubic-bezier(0.45, 0, 0.55, 1) 6s infinite;
        transition: filter 0.3s;
        -webkit-transition: filter 0.3s;*/
    }
    /* 呼吸辉光 */
    @keyframes glowPulse{
        0%,
        100%{
            transform:scale(.8);
            opacity:.8;
        }

       35%{
            transform:scale(1.1);
            opacity:1;
        }

        65%{
            transform:scale(.8);
            opacity:.8;
        }
    }
    @-webkit-keyframes glowPulse{
        0%,
        100%{
            -webkit-transform:scale(.8);
            opacity:.8;
        }

       35%{
            -webkit-transform:scale(1.1);
            opacity:1;
        }

        65%{
            -webkit-transform:scale(.8);
            opacity:.8;
        }
    }
  /* 2. 钻石闪烁效果（叠加在钻石位置的高光点） */
        .sparkle {
            position: absolute;
            width: 0.15rem;
            height: 0.15rem;
            border-radius: 50%;
            filter: blur(2px);
            -webkit-filter: blur(2px);
            box-shadow: 0 0 10px 5px rgba(255,255,255,0.7);
            animation: sparkle 2s infinite ease-in-out;
            -webkit-animation: sparkle 2s infinite ease-in-out;
        }

        /* 给不同位置的钻石添加闪烁点 */
        .sparkle-1 { top: 30%; left: 2%; animation-delay: 0s;-webkit-animation-delay: 0s; }
        .sparkle-2 { top: 26%; left: 65%; animation-delay: 0.5s; -webkit-animation-delay: 0.5s; }
        .sparkle-3 { top: 60%; left: 15%; animation-delay: 1s; -webkit-animation-delay: 1s; }
        .sparkle-4 { top: 69%; left: 78%; animation-delay: 1.5s; -webkit-animation-delay: 1.5s; }
        .sparkle-5 { top: 50%; left: 55%; animation-delay: 0.3s; -webkit-animation-delay: 0.3s; }

        @keyframes sparkle {
            0%, 100% {
                opacity: 0;
                transform: scale(0.5);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
        }
        @-webkit-keyframes sparkle {
            0%, 100% {
                opacity: 0;
                -webkit-transform: scale(0.5);
            }
            50% {
                opacity: 1;
                -webkit-transform: scale(1.2);
            }
        }