#skin-app { max-width: 400px; margin: auto; }
button { padding: 10px 15px; margin: 5px; cursor: pointer; }

.progress {
  height: 6px;
  background: #eee;
  margin-bottom: 15px;
}
#progress-bar {
  height: 6px;
  width: 0;
  background: #28a745;
  transition: width .3s;
}

.animate {
  animation: slideIn .35s ease;
}

.animate.back {
  animation: slideBack .35s ease;
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideBack {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.back-btn {
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

#step-indicator {
  font-size: 13px;
  color: #777;
}
.skin-step {
  max-width: 420px;
  margin: auto;
}

.option-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: .25s ease;
}

.option-card.active,
.option-card:hover {
  border-color: #2ab673;
  background: #f3fff9;
}

.option-card img {
  width: 60px;
}

.checkbox img {
  width: 20px;
  opacity: .3;
}

.option-card.active .checkbox img {
  opacity: 1;
}

.question {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.reason {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}