.selection-generate:disabled {
  opacity: .68;
}

.selection-live-progress {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(243, 185, 79, .42);
  background: linear-gradient(145deg, rgba(243, 185, 79, .11), rgba(5, 28, 35, .88));
  box-shadow: 0 0 26px rgba(243, 185, 79, .08);
}

.selection-live-progress[hidden] {
  display: none;
}

.selection-live-progress-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.selection-live-progress-head > i {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border: 2px solid rgba(243, 185, 79, .25);
  border-top-color: var(--amber);
  border-radius: 50%;
  animation: selection-spin .8s linear infinite;
}

.selection-live-progress-head p {
  margin: 0;
}

.selection-live-progress-head strong,
.selection-live-progress-head span {
  display: block;
}

.selection-live-progress-head strong {
  color: #ffe2a1;
  font-size: 12px;
}

.selection-live-progress-head span {
  margin-top: 3px;
  color: var(--muted);
  font: 10px var(--font-data);
}

.selection-live-progress ol {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: selection-step;
}

.selection-live-progress li {
  position: relative;
  padding-left: 24px;
  color: var(--dim);
  font-size: 10px;
  line-height: 18px;
  counter-increment: selection-step;
}

.selection-live-progress li::before {
  content: counter(selection-step);
  position: absolute;
  left: 0;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(126, 192, 190, .2);
  border-radius: 50%;
  text-align: center;
  font: 9px/16px var(--font-data);
}

.selection-live-progress[data-stage="ai"] li[data-selection-progress-step="prepare"],
.selection-live-progress[data-stage="scan"] li:not([data-selection-progress-step="scan"]) {
  color: var(--cyan-soft);
}

.selection-live-progress[data-stage="ai"] li[data-selection-progress-step="ai"],
.selection-live-progress[data-stage="scan"] li[data-selection-progress-step="scan"] {
  color: #ffe2a1;
  font-weight: 700;
}

.selection-live-progress small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

@keyframes selection-spin {
  to { transform: rotate(360deg); }
}