.container {
  background: var(--color-bg-secondary, #242424);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-lg, 0.5rem);
  overflow: hidden;
}

.stepIndicator {
  display: flex;
  border-bottom: 1px solid var(--color-border, #333);
  background: rgba(0, 0, 0, 0.2);
}

.step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--spacing-md, 1rem);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
  position: relative;
}

.step::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background var(--transition-fast, 150ms);
}

.step:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.02);
}

.step:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.step.active::after {
  background: var(--color-primary, #76b900);
}

.step.completed::after {
  background: var(--color-success, #22c55e);
}

.stepNumber {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-border, #333);
  color: var(--color-text-secondary, #999);
  font-weight: 600;
  font-size: var(--text-sm, 0.875rem);
  margin-bottom: var(--spacing-xs, 0.25rem);
  transition: all var(--transition-fast, 150ms);
}

.step.active .stepNumber {
  background: var(--color-primary, #76b900);
  color: white;
}

.step.completed .stepNumber {
  background: var(--color-success, #22c55e);
  color: white;
}

.stepLabel {
  font-size: var(--text-xs, 0.75rem);
  color: var(--color-text-secondary, #999);
}

.step.active .stepLabel {
  color: var(--color-text, #e8e8e8);
}

.content {
  padding: var(--spacing-lg, 1.5rem);
}

.stepContent h3 {
  margin: 0 0 var(--spacing-xs, 0.25rem);
  font-size: var(--text-xl, 1.25rem);
}

.stepDescription {
  margin: 0 0 var(--spacing-lg, 1.5rem);
  color: var(--color-text-secondary, #999);
}

.formGroup {
  margin-bottom: var(--spacing-md, 1rem);
}

.formGroup label {
  display: block;
  margin-bottom: var(--spacing-xs, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  color: var(--color-text-secondary, #999);
}

.formRow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md, 1rem);
}

.input,
.textarea {
  width: 100%;
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  background: var(--color-bg, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-md, 0.375rem);
  color: var(--color-text, #e8e8e8);
  font-size: var(--text-base, 1rem);
  transition: border-color var(--transition-fast, 150ms);
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-primary, #76b900);
}

.textarea {
  resize: vertical;
  min-height: 80px;
}

.levelSelector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-sm, 0.5rem);
  margin-bottom: var(--spacing-xs, 0.25rem);
}

.levelButton {
  padding: var(--spacing-md, 1rem);
  background: var(--color-bg, #1a1a1a);
  border: 2px solid var(--color-border, #333);
  border-radius: var(--radius-md, 0.375rem);
  color: var(--color-text, #e8e8e8);
  font-size: var(--text-base, 1rem);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
  text-align: center;
}

.levelButton:hover {
  border-color: var(--level-color);
  background: color-mix(in srgb, var(--level-color) 5%, var(--color-bg, #1a1a1a));
}

.levelButtonActive {
  border-color: var(--level-color);
  background: color-mix(in srgb, var(--level-color) 15%, var(--color-bg, #1a1a1a));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--level-color) 20%, transparent);
}

.levelButtonLabel {
  display: block;
}

.dimensionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-md, 1rem);
}

.dimensionCard {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-md, 1rem);
  background: var(--color-bg, #1a1a1a);
  border: 2px solid var(--color-border, #333);
  border-radius: var(--radius-md, 0.375rem);
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast, 150ms);
}

.dimensionCard:hover {
  border-color: var(--dim-color);
}

.dimensionCard.selected {
  border-color: var(--dim-color);
  background: color-mix(in srgb, var(--dim-color) 10%, var(--color-bg, #1a1a1a));
}

.dimensionHeader {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm, 0.5rem);
  margin-bottom: var(--spacing-xs, 0.25rem);
}

.dimensionIndicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.dimensionLabel {
  font-weight: 500;
}

.dimensionDescription {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #999);
}

.loading {
  padding: var(--spacing-lg, 1.5rem);
  text-align: center;
  color: var(--color-text-secondary, #999);
}

.datasetGroups {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 1.5rem);
}

.datasetGroup h4 {
  margin: 0 0 var(--spacing-sm, 0.5rem);
  font-size: var(--text-base, 1rem);
}

.datasetList {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
}

.noDatasets {
  color: var(--color-text-secondary, #999);
  font-size: var(--text-sm, 0.875rem);
  font-style: italic;
}

.datasetItem {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-sm, 0.5rem);
  background: var(--color-bg, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
  transition: border-color var(--transition-fast, 150ms);
}

.datasetItem:hover {
  border-color: var(--color-primary, #76b900);
}

.datasetItem input[type='checkbox'] {
  margin-top: 2px;
}

.datasetInfo {
  display: flex;
  flex-direction: column;
}

.datasetName {
  font-weight: 500;
}

.datasetDesc {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #999);
}

.reviewSection {
  margin-bottom: var(--spacing-lg, 1.5rem);
  padding: var(--spacing-md, 1rem);
  background: var(--color-bg, #1a1a1a);
  border: 1px solid var(--color-border, #333);
  border-radius: var(--radius-md, 0.375rem);
}

.reviewSection h4 {
  margin: 0 0 var(--spacing-sm, 0.5rem);
  font-size: var(--text-base, 1rem);
  color: var(--color-text-secondary, #999);
}

.reviewList {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-xs, 0.25rem) var(--spacing-md, 1rem);
}

.reviewList dt {
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-secondary, #999);
}

.reviewList dd {
  margin: 0;
  font-weight: 500;
}

.dimensionTags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 0.25rem);
}

.dimensionTag {
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
}

.footer {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
  border-top: 1px solid var(--color-border, #333);
  background: rgba(0, 0, 0, 0.2);
}

.navButtons {
  display: flex;
  gap: var(--spacing-sm, 0.5rem);
}

.cancelButton,
.prevButton,
.nextButton,
.submitButton {
  padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
  border-radius: var(--radius-md, 0.375rem);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast, 150ms);
}

.cancelButton {
  background: transparent;
  border: 1px solid var(--color-border, #333);
  color: var(--color-text-secondary, #999);
}

.cancelButton:hover:not(:disabled) {
  border-color: var(--color-danger, #ef4444);
  color: var(--color-danger, #ef4444);
}

.prevButton {
  background: transparent;
  border: 1px solid var(--color-border, #333);
  color: var(--color-text, #e8e8e8);
}

.prevButton:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
}

.nextButton,
.submitButton {
  background: var(--color-primary, #76b900);
  border: none;
  color: white;
}

.nextButton:hover:not(:disabled),
.submitButton:hover:not(:disabled) {
  background: var(--color-primary-dark, #5a8f00);
}

.cancelButton:disabled,
.prevButton:disabled,
.nextButton:disabled,
.submitButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
