.batch-generation-section {

  margin-top: 28px;

  padding: 20px;

  border: 1px solid #e3e4ec;

  border-radius: 16px;

  background: #fff;

}



.batch-generation-header h2 {

  margin: 0;

}



.batch-generation-header p {

  margin: 5px 0 18px;

  color: #747784;

}



.batch-upload-box {

  padding: 16px;

  border: 1px dashed #cbcce0;

  border-radius: 12px;

  background: #fafafe;

}



#batchImageInput {

  width: 100%;

}



.batch-selected-files {

  display: grid;

  gap: 8px;

  margin-top: 14px;

}



.batch-file-row {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  padding: 9px 11px;

  border: 1px solid #e2e3eb;

  border-radius: 8px;

  background: #fff;

}



.batch-file-row button {

  border: 0;

  background: transparent;

  color: #b42a3c;

  cursor: pointer;

}



.batch-actions {

  display: flex;

  gap: 10px;

  margin-top: 14px;

}



#startBatchGenerationButton {

  padding: 10px 15px;

  border: 0;

  border-radius: 9px;

  background: #6d5dfc;

  color: #fff;

  font-weight: 700;

  cursor: pointer;

}



#cancelBatchButton {

  padding: 10px 15px;

  border: 1px solid #e0a6ad;

  border-radius: 9px;

  background: #fff;

  color: #b42a3c;

  font-weight: 700;

  cursor: pointer;

}



.batch-progress {

  margin-top: 20px;

}



.batch-progress-summary {

  margin-bottom: 12px;

  color: #555866;

  font-weight: 700;

}



.batch-progress-items {

  display: grid;

  gap: 10px;

}



.batch-progress-item {

  display: grid;

  grid-template-columns:

    minmax(0, 1fr)

    auto;

  gap: 6px 12px;

  padding: 12px;

  border: 1px solid #e4e5ed;

  border-radius: 10px;

  background: #fafafe;

}



.batch-progress-item span {

  color: #737684;

  font-size: 12px;

}



.batch-progress-track {

  grid-column: 1 / -1;

  height: 8px;

  overflow: hidden;

  border-radius: 999px;

  background: #e9e9f1;

}



.batch-progress-fill {

  height: 100%;

  border-radius: inherit;

  background: #6d5dfc;

  transition: width .3s ease;

}



.batch-progress-item button {

  justify-self: end;

  padding: 6px 9px;

  border: 1px solid #dddde7;

  border-radius: 7px;

  background: #fff;

  cursor: pointer;

}



.batch-results-grid {

  display: grid;

  grid-template-columns:

    repeat(3, minmax(0, 1fr));

  gap: 12px;

  margin-top: 18px;

}



.batch-result-card {

  display: grid;

  gap: 8px;

  padding: 12px;

  border: 1px solid #e4e5ed;

  border-radius: 10px;

}



.batch-result-card a {

  color: #5848dc;

  font-size: 12px;

  font-weight: 700;

}



.batch-empty {

  padding: 18px;

  color: #7a7d89;

  text-align: center;

}



@media (max-width: 800px) {

  .batch-results-grid {

    grid-template-columns:

      repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 560px) {

  .batch-results-grid {

    grid-template-columns: 1fr;

  }



  .batch-actions {

    flex-direction: column;

  }

}