.step-hidden { display: none !important; }

.wizard-step { animation: riseIn 0.28s cubic-bezier(0.22, 0.9, 0.35, 1) both; }

.scan-stage { text-align: center; padding: 18px 10px 10px; }

.scan-orb {
  position: relative;
  width: 86px;
  height: 86px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.scan-orb svg { width: 32px; height: 32px; position: relative; }

.scan-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: sonar 2.4s ease-out infinite;
}

@keyframes sonar {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.7); opacity: 0; }
}

.scan-stage h3 { margin: 0 0 6px; font-size: 17px; }
.scan-stage p { color: var(--text-dim); font-size: 13.5px; margin: 0 auto 20px; max-width: 330px; line-height: 1.5; }

#detect-btn.scanning { pointer-events: none; background: var(--panel-2); border-color: var(--panel-2); color: var(--text); }
#detect-btn.scanning svg { animation: pulse 1.1s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.detect-result { margin-top: 14px; }
.detect-result:empty { display: none; }

.detect-result code, .detected-banner code {
  font-size: 11.5px;
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.detect-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  vertical-align: -5px;
  margin-right: 6px;
  background: #fff;
  border-radius: 4px;
  padding: 1px;
}

.detected-banner {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 11px 14px;
  border-radius: var(--radius-lg);
  font-size: 13.5px;
  margin-bottom: 18px;
  line-height: 1.45;
}

.detected-banner.ok { background: var(--ok-soft); }
.detected-banner.ok > svg, .detected-banner.ok b { color: var(--ok); }
.detected-banner.warn { background: var(--warn-soft); }
.detected-banner.warn > svg, .detected-banner.warn b { color: var(--warn); }
.detected-banner .hint { margin-top: 4px; font-size: 12.5px; color: var(--text-dim); }
.detected-banner .detect-icon { margin: 0; }

.photo-row { display: flex; gap: 12px; align-items: center; }

.photo-preview {
  width: 46px;
  height: 46px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.photo-preview img { width: 100%; height: 100%; object-fit: cover; }