.once-dl-open{overflow:hidden!important}
.once-dl-overlay{
  position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(17,27,43,.48);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.once-dl-overlay.is-open{display:flex;animation:onceDlFadeIn .22s ease both}
.once-dl-modal{
  position:relative;width:min(100%,430px);padding:30px 24px 24px;border:1px solid rgba(255,255,255,.78);
  border-radius:20px;background:#fff;box-shadow:0 26px 70px rgba(20,39,72,.28);overflow:hidden;
  animation:onceDlModalIn .3s cubic-bezier(.2,.8,.2,1) both
}
.once-dl-close{
  position:absolute;right:13px;top:13px;width:34px;height:34px;border:0;border-radius:10px;
  display:grid;place-items:center;color:#75849b;background:#f1f5fa;cursor:pointer;transition:.2s
}
.once-dl-close:hover{color:#26354e;background:#e7eef7}
.once-dl-close svg{width:17px;height:17px}
.once-dl-stage{display:none;text-align:center}
.once-dl-stage.is-active{display:block;animation:onceDlStageIn .3s ease both}
.once-dl-title{margin:0 0 9px;color:#182337;font-size:22px;line-height:1.35;font-weight:800}
.once-dl-desc{margin:0;color:#718097;font-size:14px;line-height:1.7}
.once-dl-ring{
  width:88px;height:88px;margin:8px auto 23px;border:6px solid #e8eef7;border-top-color:#2878ff;
  border-radius:50%;animation:onceDlSpin .86s linear infinite
}
.once-dl-warn{
  width:64px;height:64px;margin:4px auto 19px;border-radius:18px;display:grid;place-items:center;
  color:#d68b0b;background:#fff6df;font-size:29px;font-weight:900
}
.once-dl-slider{
  position:relative;height:60px;margin-top:25px;border:1px solid #d8e4f3;border-radius:16px;
  background:#f3f7fd;overflow:hidden;touch-action:none;user-select:none
}
.once-dl-slider-fill{
  position:absolute;inset:0 auto 0 0;width:60px;border-radius:15px;
  background:linear-gradient(90deg,rgba(40,120,255,.15),rgba(40,120,255,.27));transition:width .14s linear
}
.once-dl-slider-text{
  position:absolute;inset:0 68px;display:flex;align-items:center;justify-content:center;
  color:#77869c;font-size:13px;font-weight:700;white-space:nowrap;pointer-events:none;transition:opacity .2s
}
.once-dl-slider-thumb{
  position:absolute;left:4px;top:4px;width:50px;height:50px;border:0;border-radius:14px;cursor:grab;
  display:grid;place-items:center;color:#fff;background:#2878ff;box-shadow:0 9px 22px rgba(40,120,255,.3);
  touch-action:none;transition:transform .16s ease,background .2s ease
}
.once-dl-slider-thumb:active,.once-dl-slider-thumb.is-dragging{cursor:grabbing;transform:scale(1.03)}
.once-dl-slider-thumb svg{width:22px;height:22px}
.once-dl-slider.is-done .once-dl-slider-fill{width:100%!important;background:#e7f8f0}
.once-dl-slider.is-done .once-dl-slider-thumb{background:#16a36a}
.once-dl-slider.is-done .once-dl-slider-text{opacity:0}
.once-dl-count{
  --once-dl-progress:0;width:116px;height:116px;margin:4px auto 22px;border-radius:50%;
  display:grid;place-items:center;position:relative;
  background:conic-gradient(#2878ff calc(var(--once-dl-progress)*1%),#e8eef7 0)
}
.once-dl-count::before{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.once-dl-count span{position:relative;z-index:1;color:#182337;font-size:36px;font-weight:900;font-variant-numeric:tabular-nums}
.once-dl-count.is-waiting{animation:onceDlPulse 1.1s ease-in-out infinite}
.once-dl-error{
  margin-top:17px;padding:11px 13px;border-radius:11px;color:#d94b60;background:#fff0f2;
  font-size:13px;line-height:1.6
}
.once-dl-success-icon{
  width:64px;height:64px;margin:4px auto 19px;border-radius:18px;display:grid;place-items:center;
  color:#118657;background:#e7f8f0;font-size:30px;font-weight:900
}
.once-dl-open-btn{
  display:flex;align-items:center;justify-content:center;width:100%;height:50px;margin-top:20px;
  border-radius:13px;color:#fff!important;background:#2878ff;font-size:15px;font-weight:800;
  text-decoration:none!important;box-shadow:0 10px 24px rgba(40,120,255,.22);transition:.2s
}
.once-dl-open-btn:hover{filter:brightness(.96);transform:translateY(-1px)}
.once-dl-retry{
  width:100%;height:49px;margin-top:17px;border:0;border-radius:13px;color:#fff;background:#2878ff;
  font-weight:800;cursor:pointer;transition:.2s
}
.once-dl-retry:hover{filter:brightness(.96);transform:translateY(-1px)}
.once-dl-note{margin-top:15px;color:#95a1b3;font-size:12px;line-height:1.55;text-align:center}
.once-dl-modal.is-success{animation:onceDlSuccess .35s ease both}
@keyframes onceDlFadeIn{from{opacity:0}to{opacity:1}}
@keyframes onceDlModalIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes onceDlStageIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes onceDlSpin{to{transform:rotate(360deg)}}
@keyframes onceDlPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes onceDlSuccess{50%{box-shadow:0 26px 70px rgba(22,163,106,.3)}to{opacity:.15;transform:scale(.97)}}
@media (max-width:560px){
  .once-dl-overlay{padding:12px}
  .once-dl-modal{padding:28px 18px 21px;border-radius:18px}
  .once-dl-title{font-size:20px}
  .once-dl-slider-text{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .once-dl-overlay *,.once-dl-overlay *::before,.once-dl-overlay *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important
  }
}