body {
  font-family: Arial, sans-serif;
  background: #f5f5f5;
}

.container {
  max-width: 520px;
  margin: 30px auto;
  background: #fff;
  padding: 20px;
}

.intro {
  text-align: center;
  margin-bottom: 25px;
}

label {
  display: block;
  font-size: 13px;
  margin: 12px 0 4px;
}

label.required::after {
  content: " *";
  color: #c00;
}

input, select, textarea, button {
  width: 100%;
  padding: 8px;
  font-size: 14px;
  border: 1px solid #bbb;
}

input.error, select.error, textarea.error {
  border-color: #c00;
}

label.error {
  color: #c00;
}

.step { display: none; }
.step.active { display: block; }

.row {
  display: flex;
  gap: 6px;
}

.row select { flex: 1; }

.options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option {
  border: 1px solid #999;
  padding: 6px 10px;
  cursor: pointer;
}

.option.selected {
  background: #222;
  color: #fff;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}