/* ===== UES Live Progress Bar (next-gen) ===== */
.live-progress-card {
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: 18px;
  padding: 22px 26px;
  margin-bottom: 20px;
  box-shadow: 0 4px 20px -6px rgba(16,24,40,0.08);
  position: relative;
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.live-progress-card.active { box-shadow: 0 12px 36px -12px rgba(124,58,237,0.30); }

.lp-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.lp-left { min-width: 0; flex: 1; }
.lp-phase {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--purple-primary, #7c3aed); margin-bottom: 6px;
  display: flex; align-items: center; gap: 8px;
}
.lp-phase::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim, #94a3b8); flex: none;
}
.live-progress-card.active .lp-phase::before {
  background: #10b981; animation: lp-pulse 1.6s infinite;
}
.lp-title {
  font-size: 16px; font-weight: 700; color: var(--text-darkblack, #0f172a);
  margin: 0 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-url {
  font-size: 11.5px; color: var(--text-dim, #94a3b8); margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-percent-wrap { text-align: right; flex: none; }
.lp-percent {
  font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 800;
  line-height: 1; color: var(--purple-primary, #7c3aed); letter-spacing: -1.5px;
}
.lp-percent span { font-size: 18px; font-weight: 700; margin-left: 1px; }
.lp-status { font-size: 11px; color: var(--text-muted, #64748b); margin-top: 4px; font-weight: 500; }

.lp-track {
  position: relative; height: 14px; border-radius: 99px;
  background: #edeef4; overflow: hidden;
}
.lp-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #a78bfa, #8b5cf6, #7c3aed, #8b5cf6);
  background-size: 200% 100%;
  box-shadow: 0 0 16px rgba(124,58,237,0.55);
  transition: width .6s cubic-bezier(.22,1,.36,1);
  animation: lp-flow 3s linear infinite;
}
.lp-fill::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  transform: translateX(-100%);
  animation: lp-shimmer 1.8s infinite;
}
/* Freeze animations when idle */
.live-progress-card:not(.active) .lp-fill { animation: none; box-shadow: none; }
.live-progress-card:not(.active) .lp-fill::after { animation: none; }

.lp-sub {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 11px; font-size: 12px; color: var(--text-muted, #64748b); font-weight: 500;
}
.lp-sub span:last-child { color: var(--purple-primary, #7c3aed); font-weight: 600; }

@keyframes lp-flow   { from { background-position: 0% 0; } to { background-position: 200% 0; } }
@keyframes lp-shimmer{ 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
@keyframes lp-pulse  { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
