:root {
  --capture-bg: #000000;
  --capture-text: #f7f7f4;
  --capture-muted: rgba(247, 247, 244, 0.76);
  --capture-green: #2bc36b;
  --capture-red: #ef4457;
  --capture-yellow: #f2c94c;
  --capture-panel: rgba(12, 12, 12, 0.94);
  --capture-pill: rgba(34, 34, 34, 0.92);
  --capture-border: rgba(255, 255, 255, 0.18);
  --capture-font: "SF Pro Display", "Helvetica Neue", "Avenir Next", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #050505;
  color: var(--capture-text);
  font-family: var(--capture-font);
}

button,
input {
  font: inherit;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.capture-shell {
  position: relative;
  width: min(100vw, 430px);
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--capture-bg);
}

.screen {
  position: absolute;
  inset: 0;
}

.screen[hidden],
.stage[hidden],
.capture-error[hidden] {
  display: none;
}

.screen--loading,
.screen--complete {
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(43, 195, 107, 0.16), transparent 24%),
    radial-gradient(circle at bottom, rgba(242, 201, 76, 0.12), transparent 24%),
    linear-gradient(180deg, #030303 0%, #111111 100%);
}

.message-card {
  width: min(100%, 320px);
  padding: 24px 22px;
  border: 1px solid var(--capture-border);
  border-radius: 28px;
  background: rgba(16, 16, 16, 0.92);
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
}

.message-card__eyebrow {
  margin: 0 0 10px;
  color: rgba(247, 247, 244, 0.6);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.message-card__title {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.08;
}

.message-card__body {
  margin: 12px 0 0;
  color: var(--capture-muted);
  line-height: 1.5;
}

.capture-error {
  position: absolute;
  z-index: 30;
  top: max(16px, env(safe-area-inset-top, 0px) + 10px);
  left: 16px;
  right: 16px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(138, 20, 20, 0.92);
  color: #fff3f3;
  line-height: 1.45;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.capture-header {
  position: absolute;
  z-index: 12;
  top: max(24px, env(safe-area-inset-top, 0px) + 14px);
  left: 24px;
  right: 24px;
  text-align: center;
}

.capture-header__title {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 500;
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

.stage-counter--header {
  position: absolute;
  z-index: 12;
  top: max(28px, env(safe-area-inset-top, 0px) + 18px);
  right: 20px;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.screen--capture {
  display: flex;
  flex-direction: column;
  background: #000;
}

.capture-viewport {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #000;
}

.stage {
  position: absolute;
  inset: 0;
}

.reference-art,
.camera-stage,
.preview-stage {
  position: absolute;
  inset: 0;
}

.reference-art {
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 255, 255, 0.18), transparent 18%),
    linear-gradient(180deg, #918d85 0%, #7c786f 100%);
}

.reference-art[data-asset-mode="image"] {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: cover;
}

.reference-art[data-asset-mode="image"] .reference-art__texture,
.reference-art[data-asset-mode="image"] .reference-art__hand,
.reference-art[data-asset-mode="image"] .reference-art__device,
.reference-art[data-asset-mode="image"] .reference-art__focus {
  display: none;
}

.reference-art__texture {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.08), transparent 18%),
    radial-gradient(circle at 74% 70%, rgba(0, 0, 0, 0.08), transparent 20%),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.028) 0 4px,
      rgba(0, 0, 0, 0.028) 4px 8px
    );
  opacity: 0.86;
}

.reference-art__hand {
  position: absolute;
  left: 16%;
  right: 8%;
  bottom: 14%;
  height: 54%;
  background:
    radial-gradient(circle at 44% 70%, rgba(252, 217, 203, 0.98) 0 26%, transparent 28%),
    radial-gradient(circle at 30% 32%, rgba(250, 210, 193, 0.96) 0 9%, transparent 10%),
    radial-gradient(circle at 42% 20%, rgba(250, 210, 193, 0.96) 0 10%, transparent 11%),
    radial-gradient(circle at 56% 16%, rgba(250, 210, 193, 0.96) 0 10%, transparent 11%),
    radial-gradient(circle at 70% 20%, rgba(250, 210, 193, 0.96) 0 9%, transparent 10%),
    linear-gradient(180deg, rgba(252, 215, 199, 0.98), rgba(237, 183, 165, 0.98));
  border-radius: 36% 36% 42% 42% / 30% 30% 48% 48%;
  filter: saturate(0.92);
  transform: rotate(4deg);
  opacity: 0.95;
}

.reference-art__device {
  position: absolute;
  left: 17%;
  bottom: 33%;
  width: 63%;
  aspect-ratio: 9.4 / 18.8;
  border-radius: 38px;
  background: linear-gradient(180deg, rgba(218, 223, 233, 0.96), rgba(177, 184, 198, 0.96));
  border: 4px solid var(--capture-green);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.45),
    0 16px 36px rgba(0, 0, 0, 0.22);
  transform: rotate(-24deg);
}

.reference-art[data-capture-target="back"] .reference-art__device::before,
.reference-art[data-capture-target="front"] .reference-art__device::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 26%;
  height: 15%;
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 30%, rgba(10, 10, 10, 0.9) 0 20%, rgba(80, 80, 80, 0.3) 22% 32%, transparent 34%),
    radial-gradient(circle at 72% 38%, rgba(10, 10, 10, 0.9) 0 18%, rgba(80, 80, 80, 0.3) 20% 30%, transparent 32%),
    radial-gradient(circle at 36% 74%, rgba(10, 10, 10, 0.9) 0 19%, rgba(80, 80, 80, 0.3) 21% 31%, transparent 33%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(20, 20, 20, 0.12));
}

.reference-art__focus {
  position: absolute;
  right: 20%;
  bottom: 25%;
  width: 54px;
  height: 54px;
  border: 3px solid var(--capture-yellow);
  border-radius: 50%;
}

.reference-art__focus::before,
.reference-art__focus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--capture-yellow);
  transform: translate(-50%, -50%);
}

.reference-art__focus::before {
  width: 2px;
  height: 72px;
}

.reference-art__focus::after {
  width: 72px;
  height: 2px;
}

.reference-art[data-capture-target="left-edge"] .reference-art__device,
.reference-art[data-capture-target="right-edge"] .reference-art__device {
  left: 42%;
  bottom: 24%;
  width: 14%;
  aspect-ratio: 1 / 5.7;
  border-radius: 22px;
  transform: rotate(-6deg);
}

.reference-art[data-capture-target="top-edge"] .reference-art__device,
.reference-art[data-capture-target="bottom-edge"] .reference-art__device {
  left: 8%;
  bottom: 34%;
  width: 84%;
  aspect-ratio: 8.8 / 1;
  border-radius: 22px;
  transform: rotate(-8deg);
}

.reference-art[data-capture-target="top-edge"] .reference-art__focus,
.reference-art[data-capture-target="bottom-edge"] .reference-art__focus {
  right: 50%;
  bottom: 28%;
  transform: translateX(50%);
}

.reference-art[data-capture-target="top-edge"] .reference-art__focus {
  display: none;
}

.reference-art--thumb {
  position: absolute;
  top: 86px;
  left: 14px;
  width: 84px;
  height: 84px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
  z-index: 10;
}

.reference-art--thumb .reference-art__hand {
  left: 6%;
  right: -12%;
  bottom: 8%;
  height: 72%;
}

.reference-art--thumb .reference-art__device {
  left: 18%;
  bottom: 30%;
  width: 56%;
  border-width: 3px;
  border-radius: 16px;
}

.reference-art--thumb .reference-art__focus {
  right: 14%;
  bottom: 16%;
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.reference-art--thumb .reference-art__focus::before {
  height: 28px;
}

.reference-art--thumb .reference-art__focus::after {
  width: 28px;
}

.camera-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.camera-stage__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  background: #000;
}

.capture-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 8;
  overflow: hidden;
}

.capture-overlay[data-asset-mode="image"] {
  background-position: left top;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.capture-overlay[data-asset-mode="image"] .camera-stage__frame {
  display: none;
}

.capture-overlay[data-asset-mode="empty"] .camera-stage__frame {
  display: none;
}

.camera-stage__frame {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 33%;
  height: 28%;
  border: 4px solid var(--capture-red);
  border-radius: 38px;
  transform: rotate(-24deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.capture-overlay[data-capture-target="left-edge"] .camera-stage__frame,
.capture-overlay[data-capture-target="right-edge"] .camera-stage__frame {
  left: 42%;
  right: 42%;
  top: 28%;
  height: 36%;
  border-radius: 22px;
  transform: rotate(-7deg);
}

.capture-overlay[data-capture-target="top-edge"] .camera-stage__frame,
.capture-overlay[data-capture-target="bottom-edge"] .camera-stage__frame {
  left: 9%;
  right: 9%;
  top: 43%;
  height: 7%;
  border-radius: 20px;
  transform: rotate(-8deg);
}

.preview-stage {
  background: #111;
}

.preview-stage__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  background: #0f0f0f;
}

.reference-art--preview-thumb {
  top: 86px;
  left: 14px;
}

.reference-actions,
.preview-actions,
.capture-controls {
  display: none;
  width: 100%;
}

.screen--capture[data-stage="reference"] .reference-actions {
  display: grid;
}

.screen--capture[data-stage="camera"] .capture-controls {
  display: flex;
}

.screen--capture[data-stage="preview"] .preview-actions {
  display: grid;
}

.reference-actions {
  gap: 18px;
}

.reference-swipe {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--capture-text);
  backdrop-filter: blur(10px);
}

.reference-swipe__thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.9);
}

.reference-swipe__label {
  flex: 1;
  text-align: left;
  font-weight: 600;
}

.reference-swipe__arrow {
  font-size: 1.2rem;
  line-height: 1;
}

.reference-actions__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.reference-progress {
  flex: 1;
}

.reference-progress__track {
  overflow: hidden;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.reference-progress__bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--capture-green) 0%, #85eb6d 100%);
  transition: width 80ms linear;
}

.reference-progress__text {
  margin: 8px 0 0;
  color: var(--capture-muted);
  font-size: 0.9rem;
}

.preview-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}

.preview-button {
  min-height: 42px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  font-weight: 700;
}

.preview-button--ghost {
  justify-self: start;
}

.stage-counter {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.38);
}

.capture-bottom {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 24px);
  background: #000;
  min-height: 0;
}

.capture-controls {
  justify-content: center;
  align-items: center;
}

.capture-control {
  appearance: none;
  border: none;
  background: none;
}

.capture-control:disabled {
  opacity: 0.35;
}

.capture-control--shutter {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.12) inset;
}

@media (min-width: 520px) {
  body {
    padding: 22px 0;
  }

  .capture-shell {
    min-height: calc(100dvh - 44px);
    border-radius: 36px;
    box-shadow: 0 36px 96px rgba(0, 0, 0, 0.42);
  }
}