.active {
  background: linear-gradient(90deg,rgba(0, 186, 59, 1) 0%, rgba(0, 194, 81, 1) 50%);
  background-size: 200% 200%;
  animation: activeFlow 5s ease-in-out infinite;
}

@keyframes activeFlow {
  0% {
    background-position: 0% 50%;
    filter: saturate(1);
  }
  50% {
    background-position: 100% 50%;
    filter: saturate(1.15);
  }
  100% {
    background-position: 0% 50%;
    filter: saturate(1);
  }
}

.connecting {
  background: linear-gradient(120deg, #ff2d2d, #ff7a00, #ff2d2d);
  background-size: 220% 220%;
  animation: connectingFlow 5s ease-in-out infinite;
}

@keyframes connectingFlow {
  0% {
    background-position: 0% 50%;
    filter: saturate(1);
  }
  50% {
    background-position: 100% 50%;
    filter: saturate(1.15);
  }
  100% {
    background-position: 0% 50%;
    filter: saturate(1);
  }
}
/* ...existing code... */