.consult-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.consult-step-pill {
  border: 1px solid #d7dde5;
  background: #f8fafc;
  color: #334155;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
}

.consult-step-pill.is-active {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

.consult-panel {
  display: none;
}

.consult-panel.is-active {
  display: block;
}

.consult-camera {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #0f172a;
  aspect-ratio: 3 / 4;
  max-height: 480px;
}

.consult-camera video,
.consult-camera .consult-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.consult-mask-overlay {
  position: absolute;
  inset: 8% 12%;
  width: auto;
  height: auto;
  color: rgba(255, 255, 255, 0.85);
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.45));
}

.consult-review-image {
  min-height: 180px;
  object-fit: cover;
  background: #f1f5f9;
}

html.dark-mode .consult-step-pill,
html[data-theme="dark"] .consult-step-pill,
html[data-ab-theme="dark"] .consult-step-pill {
  border-color: rgba(203, 213, 225, 0.45);
  background: rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
}

html.dark-mode .consult-step-pill.is-active,
html[data-theme="dark"] .consult-step-pill.is-active,
html[data-ab-theme="dark"] .consult-step-pill.is-active {
  background: #0f766e;
  border-color: #0f766e;
  color: #fff;
}

html.dark-mode .consult-review-image,
html[data-theme="dark"] .consult-review-image,
html[data-ab-theme="dark"] .consult-review-image {
  background: #111827;
  border-color: rgba(255, 255, 255, 0.12) !important;
}