.phase-indicator {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(11, 16, 32, 0.85);
  border: 1px solid #2c3a5e;
  border-radius: 30px;
  padding: 10px 24px;
  display: flex;
  gap: 20px;
  color: #a0aabf;
  font-weight: bold;
  z-index: 10;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
}

.phase-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.4;
  transition: all 0.3s;
}

.phase-step.active {
  opacity: 1;
  color: #fff;
}

.phase-step.done {
  opacity: 0.8;
}

.dot-red {
  color: #ff6b6b;
  text-shadow: 0 0 8px #ff6b6b;
}

.dot-yellow {
  color: #f6c23e;
  text-shadow: 0 0 8px #f6c23e;
}

.dot-green {
  color: #a0ffb9;
  text-shadow: 0 0 8px #a0ffb9;
}

.legend .dot--red {
  background: #ff6b6b;
  box-shadow: 0 0 8px #ff6b6b;
}

.legend .dot--yellow {
  background: #f6c23e;
  box-shadow: 0 0 8px #f6c23e;
}

.legend .dot--green {
  background: #a0ffb9;
  box-shadow: 0 0 8px #a0ffb9;
}