/* UX V2 animated gradient progress */
.zgv-progress-wrap{ margin:0 0 12px; padding:10px 12px; border-radius:14px; background:rgba(0,0,0,0.03); }
.zgv-progress-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.zgv-progress-title{ font-weight:700; }
.zgv-progress-pct{ font-weight:700; opacity:0.85; }

.zgv-progress-bar{ position:relative; height:10px; border-radius:999px; overflow:hidden; background:rgba(0,0,0,0.12); }
.zgv-progress-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background: linear-gradient(90deg,#4f46e5,#9333ea,#f97316,#22c55e);
  background-size: 300% 100%;
  animation: zgvGradientMove 4s linear infinite;
  transition: width 0.8s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 0 12px rgba(147,51,234,0.35);
}
@keyframes zgvGradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.zgv-progress-bar::after{
  content:'';
  position:absolute;
  top:0; left:-40%;
  width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.55),transparent);
  animation:zgvShimmer 2s infinite;
  pointer-events:none;
}
@keyframes zgvShimmer{
  0% { left:-40%; }
  100% { left:100%; }
}