.generation-progress {

  width: min(460px, 90%);

  margin: 24px auto;

  padding: 22px;

  border: 1px solid rgba(109, 93, 252, 0.2);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.96);

  box-shadow: 0 14px 40px rgba(23, 24, 33, 0.12);

}



.generation-progress-title {

  margin-bottom: 12px;

  color: #171821;

  font-size: 15px;

  font-weight: 700;

  text-align: center;

}



.generation-progress-track {

  position: relative;

  width: 100%;

  height: 12px;

  overflow: hidden;

  border-radius: 999px;

  background: #ececf4;

}



.generation-progress-fill {

  height: 100%;

  border-radius: inherit;

  background: linear-gradient(

    90deg,

    #6d5dfc,

    #9b8cff

  );

  transition: width 0.35s ease;

}



.generation-progress-value {

  margin-top: 10px;

  color: #626575;

  font-size: 13px;

  font-weight: 700;

  text-align: center;

}




.generation-action-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 12px 0;

}



.generation-action-row button[hidden] {

  display: none;

}




.generation-action-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 12px 0;

}



.generation-action-row button[hidden] {

  display: none;

}




.generation-action-row {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin: 12px 0;

}



.generation-action-row button[hidden] {

  display: none;

}