.wizard-progress-shell {
  gap: var(--space-4);
}

.wizard-screen-compact {
  gap: var(--gap-zone);
}

.wizard-topbar {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: var(--gap-zone);
  padding: var(--pad-hero);
}

.wizard-topbar__identity {
  display: grid;
  gap: var(--space-2);
}

.wizard-topbar__identity h3 {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  line-height: 0.94;
}

.wizard-topbar__progress {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-primary);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.wizard-topbar__status {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.wizard-topbar__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wizard-progress-track {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}

.wizard-progress-track::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: 2px;
  background: rgba(35, 38, 42, 0.12);
  transform: translateY(-50%);
}

.wizard-progress-dot {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  height: 14px;
  border-radius: var(--radius-pill);
  background: rgba(95, 98, 95, 0.18);
  border: 1px solid var(--border-subtle);
}

.wizard-progress-dot.complete {
  background: rgba(79, 138, 93, 0.3);
}

.wizard-progress-dot.active {
  background: rgba(47, 94, 211, 0.22);
  box-shadow: none;
}

.wizard-counter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  min-height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.wizard-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.wizard-overlay-card {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  width: min(360px, calc(100% - 48px));
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(20, 20, 25, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.34);
  pointer-events: auto;
}

.instruction-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
}

.instruction-card {
  gap: var(--space-4);
}

.placement-guide-shell {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.placement-reference {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.placement-reference-icon .node-icon {
  width: 56px;
  height: 56px;
}

.placement-reference-copy {
  display: grid;
  gap: var(--space-2);
}

.placement-reference-copy strong {
  font-size: 1rem;
}

.placement-reference-copy span:last-child {
  font-size: 0.88rem;
}

.placement-schematic {
  min-height: 220px;
  display: grid;
  place-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-primary);
}

.placement-schematic-svg {
  width: min(100%, 260px);
  height: auto;
}

.placement-outline,
.placement-feature,
.placement-baseline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.placement-outline {
  stroke: rgba(34, 31, 26, 0.34);
  stroke-width: 2.5;
}

.placement-feature {
  stroke: rgba(95, 98, 95, 0.35);
  stroke-width: 2;
}

.placement-baseline {
  stroke: rgba(47, 94, 211, 0.2);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

.placement-region {
  fill: rgba(47, 94, 211, 0.08);
  stroke: rgba(47, 94, 211, 0.18);
  stroke-width: 1.5;
}

.placement-target-ring {
  fill: rgba(255, 253, 249, 0.94);
  stroke: rgba(34, 31, 26, 0.62);
  stroke-width: 2.5;
}

.placement-target-dot {
  fill: var(--accent-primary);
  stroke: rgba(255, 253, 249, 0.92);
  stroke-width: 2;
}

.photo-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.photo-guide-card {
  display: grid;
  gap: var(--space-2);
}

.photo-guide-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.photo-guide-frame {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border-radius: 18px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.photo-guide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.96) contrast(1.02);
}

.photo-guide-crop .photo-guide-image-crop {
  position: absolute;
  max-width: none;
}

.photo-guide-region,
.photo-guide-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.photo-guide-region {
  border-radius: 999px;
  border: 1px solid rgba(47, 94, 211, 0.22);
  background: rgba(47, 94, 211, 0.12);
}

.photo-guide-marker {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.96);
  box-shadow: none;
}

.photo-guide-marker::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--accent-primary);
}

.instruction-copy {
  display: grid;
  gap: var(--space-3);
}

.wizard-guide-card {
  overflow: hidden;
}

.wizard-inline-progress {
  position: relative;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid rgba(35, 38, 42, 0.1);
  background: rgba(95, 98, 95, 0.12);
}

.wizard-inline-progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 62%, white 38%), color-mix(in srgb, var(--accent-primary) 82%, black 18%));
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent-primary) 34%, transparent);
  transition: width var(--motion-base) var(--ease-spring-soft);
}

.wizard-inline-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--energy-sweep);
  animation: magnetic-sheen 1200ms var(--ease-entrance);
}

.wizard-guide-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}

.wizard-guide-body {
  overflow: auto;
}

.wizard-guide-frame-compact {
  min-height: 170px;
  max-height: 220px;
}

.wizard-guide-photo-frame {
  min-height: 0;
  max-height: none;
  aspect-ratio: 4 / 5;
  padding: var(--space-2);
  background: #f5f1ea;
}

.wizard-guide-photo-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wizard-guide-panel {
  align-content: start;
}

.wizard-guide-note {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.wizard-guide-copy {
  gap: var(--space-2);
}

.instruction-callout {
  color: var(--text-primary);
}

.wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.zoom-controls {
  width: 100%;
  justify-content: start;
}

@media (max-width: 1180px) {
  .wizard-topbar {
    grid-template-columns: 1fr;
  }
}