.dv-shell {
  width: min(100vw, 1440px);
  max-width: none;
  margin-left: calc(50% - min(50vw, 720px));
  margin-right: calc(50% - min(50vw, 720px));
}

.dv-app {
  --dv-card-bg: #ffffff;
  --dv-card-border: rgba(20, 24, 40, 0.14);
  --dv-glow: rgba(127, 159, 140, 0.45);
  --dv-shadow: rgba(20, 24, 40, 0.18);
  --dv-active-card-width: 150px;
  --dv-active-card-height: 212px;
  --dv-active-box-size: 300px;
  --dv-active-widget-height: 760px;
  --dv-active-text-gap: 18px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--dv-accent) 18%, transparent), transparent 32%),
    radial-gradient(circle at bottom right, rgba(180, 144, 104, 0.16), transparent 34%),
    var(--dv-bg);
  color: var(--dv-ink);
  min-height: var(--dv-active-widget-height);
  border-radius: 24px;
  overflow: hidden;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dv-app[data-dv-active-mode="mobile"] {
  min-height: var(--dv-active-widget-height);
}

.dv-preview-shell .dv-app[data-dv-active-mode="mobile"] {
  width: min(100%, 390px);
  margin-inline: auto;
}

.dv-app *,
.dv-app *::before,
.dv-app *::after {
  box-sizing: border-box;
}

.dv-shop-stage {
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 42px);
  min-height: inherit;
}

.dv-stage-header {
  position: relative;
  z-index: 20;
  max-width: 680px;
}

.dv-stage-header h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.dv-stage-header p {
  margin: 0;
  color: var(--dv-muted);
  line-height: 1.5;
}

.dv-money-sum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--dv-accent-strong) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-panel) 86%, transparent);
  color: var(--dv-ink);
  font-size: clamp(13px, 1.7vw, 16px);
  font-weight: 900;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 22px rgba(20, 24, 40, 0.08);
}

.dv-money-sum span {
  color: var(--dv-accent-strong);
  font-variant-numeric: tabular-nums;
}

.dv-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.dv-header-actions .dv-money-sum {
  margin-top: 0;
}

.dv-finish-box-button {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  background: var(--dv-accent-strong);
  color: #fff;
  font-size: clamp(13px, 1.7vw, 16px);
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(20, 24, 40, 0.18);
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}

.dv-finish-box-button:hover,
.dv-finish-box-button:focus-visible {
  transform: translateY(-1px);
  filter: saturate(1.08) brightness(1.03);
  box-shadow: 0 16px 30px rgba(20, 24, 40, 0.22);
}

.dv-finish-box-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--dv-accent-strong) 36%, white);
  outline-offset: 3px;
}

.dv-button-nudge {
  animation: dv-button-nudge 360ms ease;
}

.dv-product-area {
  position: absolute;
  top: var(--dv-product-top, 130px);
  right: clamp(16px, 3vw, 42px);
  bottom: var(--dv-product-bottom, clamp(18px, 3vw, 42px));
  left: clamp(16px, 3vw, 42px);
}

.dv-box-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dv-active-box-size);
  height: var(--dv-active-box-size);
  transform: translate(-50%, -50%);
  z-index: 10;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.dv-app[data-dv-active-mode="mobile"] .dv-box-wrap {
  left: calc(50% + var(--dv-mobile-box-x, 0px));
  top: calc(50% + var(--dv-mobile-box-y, 0px));
}

.dv-box-visual {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 22px 24px rgba(0, 0, 0, 0.18));
}

.dv-box-visual img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dv-box-placeholder {
  width: 100%;
  min-height: 72%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  border: 2px dashed color-mix(in srgb, var(--dv-ink) 45%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--dv-panel) 82%, transparent);
  color: var(--dv-muted);
  font-weight: 900;
  font-size: clamp(18px, 3vw, 30px);
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.dv-deck-layer {
  position: absolute;
  inset: 0;
}

.dv-deck-card {
  position: absolute;
  width: var(--dv-active-card-width);
  height: var(--dv-active-card-height);
  left: calc(50% + var(--dv-x, 0px));
  top: calc(50% + var(--dv-y, 0px));
  transform: translate(-50%, -50%) rotate(var(--dv-rotation, 0deg));
  transform-origin: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  opacity: 0.62;
  filter: grayscale(0.62) saturate(0.48) brightness(0.9);
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
  z-index: 2;
}

.dv-deck-card:hover,
.dv-deck-card.selected {
  opacity: 1;
  filter: grayscale(0) saturate(1) brightness(1);
}

.dv-deck-card:hover {
  transform: translate(-50%, -50%) rotate(var(--dv-rotation, 0deg)) scale(1.06);
  z-index: 30;
}

.dv-stack-preview {
  --preview-radius: clamp(10px, calc(var(--dv-active-card-width) / 14), 18px);
  --stack-offset-x: -4px;
  --stack-offset-y: 5px;
  --stack-rotation: -2deg;
  --layer-scale-step: 0;
  --stack-center-x: 0px;
  --stack-center-y: 0px;
  position: absolute;
  inset: 0;
  transform: translate(calc(var(--stack-center-x) * -1), calc(var(--stack-center-y) * -1)) rotate(var(--stack-rotation));
}

.dv-deck-card::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 0 solid transparent;
  border-radius: calc(var(--preview-radius) + 8px);
  pointer-events: none;
  z-index: 45;
}

.dv-deck-card.selected::after {
  border-width: 3px;
  border-color: rgba(22, 163, 74, 0.95);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.74);
}

.dv-type-single-paper .dv-stack-preview {
  --stack-rotation: 0deg;
}

.dv-type-small-deck .dv-stack-preview {
  --stack-offset-x: 5px;
  --stack-offset-y: 6px;
  --stack-center-x: 5px;
  --stack-center-y: 6px;
  --layer-scale-step: 0;
}

.dv-type-small-deck::after {
  inset: -5px -13px -13px -5px;
}

.dv-type-big-deck .dv-stack-preview {
  --stack-offset-x: 4px;
  --stack-offset-y: 4px;
  --stack-center-x: 10px;
  --stack-center-y: 10px;
  --layer-scale-step: 0.006;
}

.dv-type-big-deck::after {
  inset: -5px -18px -18px -5px;
}

.dv-stack-layer,
.dv-stack-main {
  position: absolute;
  inset: 0;
  border-radius: var(--preview-radius);
  box-sizing: border-box;
}

.dv-stack-layer {
  background: #f4f5f9;
  border: 1px solid rgba(20, 24, 40, 0.12);
  box-shadow: 0 8px 18px rgba(20, 24, 40, 0.07);
  transform-origin: center;
}

.dv-stack-layer-1 {
  z-index: 6;
  transform: translate(var(--stack-offset-x), var(--stack-offset-y)) rotate(0.6deg) scale(calc(1 - var(--layer-scale-step)));
  background: #f5f6fa;
}

.dv-stack-layer-2 {
  z-index: 5;
  transform: translate(calc(var(--stack-offset-x) * 2), calc(var(--stack-offset-y) * 2)) rotate(1.1deg) scale(calc(1 - var(--layer-scale-step) * 2));
  background: #eef0f6;
}

.dv-stack-layer-3 {
  z-index: 4;
  transform: translate(calc(var(--stack-offset-x) * 3), calc(var(--stack-offset-y) * 3)) rotate(1.6deg) scale(calc(1 - var(--layer-scale-step) * 3));
  background: #e7eaf2;
}

.dv-stack-layer-4 {
  z-index: 3;
  transform: translate(calc(var(--stack-offset-x) * 4), calc(var(--stack-offset-y) * 4)) rotate(2.1deg) scale(calc(1 - var(--layer-scale-step) * 4));
  background: #dfe3ed;
}

.dv-stack-layer-5 {
  z-index: 2;
  transform: translate(calc(var(--stack-offset-x) * 5), calc(var(--stack-offset-y) * 5)) rotate(2.6deg) scale(calc(1 - var(--layer-scale-step) * 5));
  background: #d7dce8;
}

.dv-stack-main {
  z-index: 10;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(20, 24, 40, 0.14);
  box-shadow: 0 22px 44px rgba(20, 24, 40, 0.18), 0 5px 12px rgba(20, 24, 40, 0.11);
}


.dv-preview-content {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr clamp(30px, calc(var(--dv-active-card-width) * 0.17), 44px);
  background: #ffffff;
}

.dv-preview-image-area {
  min-height: 0;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(93, 95, 239, 0.12), transparent 45%),
    linear-gradient(315deg, rgba(0, 185, 174, 0.14), transparent 45%),
    #ffffff;
}

.dv-preview-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.dv-placeholder-art {
  width: 100%;
  height: 100%;
  padding: 14%;
  display: grid;
  place-items: center;
}

.dv-placeholder-symbol {
  width: 42%;
  aspect-ratio: 1;
  border-radius: 28%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, #ffffff 0 10%, transparent 11%),
    radial-gradient(circle at 70% 75%, #ffffff 0 8%, transparent 9%),
    linear-gradient(135deg, #5d5fef, #00b9ae);
  color: #ffffff;
  font-size: clamp(16px, calc(var(--dv-active-card-width) / 5), 34px);
  font-weight: 800;
  box-shadow: 0 18px 36px rgba(20, 24, 40, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.dv-description-area {
  padding: 0 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(20, 24, 40, 0.12);
  color: #171923;
  font-size: clamp(9px, calc(var(--dv-active-card-width) / 12), 14px);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.dv-deck-caption {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--dv-active-text-gap));
  width: 120%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.dv-deck-name {
  font-weight: 900;
  font-size: clamp(12px, calc(var(--dv-active-card-width) / 8.8), 18px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--dv-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.dv-deck-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dv-panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--dv-accent-strong) 36%, transparent);
  font-size: clamp(11px, calc(var(--dv-active-card-width) / 10.8), 15px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--dv-accent-strong);
  box-shadow: 0 8px 18px rgba(20, 24, 40, 0.08);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dv-checkmark {
  position: absolute;
  right: -22px;
  top: -18px;
  width: 32px;
  height: 32px;
  display: none;
  place-items: center;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.94);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(41, 35, 27, 0.28);
  z-index: 99;
}

.dv-deck-card.selected .dv-checkmark {
  display: grid;
}

.dv-app.is-finishing .dv-deck-card:not(.dv-animate-to-box) {
  opacity: 0.28;
  filter: grayscale(0.55) saturate(0.6);
}

.dv-deck-card.dv-animate-to-box {
  pointer-events: none;
  animation: dv-card-to-box 760ms cubic-bezier(0.2, 0.8, 0.18, 1) var(--dv-finish-delay, 0ms) forwards;
}

.dv-deck-card.dv-animate-to-box .dv-deck-caption,
.dv-deck-card.dv-animate-to-box .dv-checkmark {
  opacity: 0;
}

@keyframes dv-card-to-box {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    opacity: 1;
  }

  72% {
    transform: translate(calc(-50% + var(--dv-finish-x, 0px)), calc(-50% + var(--dv-finish-y, 0px))) rotate(0deg) scale(0.48);
    opacity: 1;
  }

  100% {
    transform: translate(calc(-50% + var(--dv-finish-x, 0px)), calc(-50% + var(--dv-finish-y, 0px))) rotate(0deg) scale(0.28);
    opacity: 0;
  }
}

@keyframes dv-button-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

.dv-info-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 18px);
  width: min(218px, calc(100vw - 56px));
  transform: translateX(calc(-50% + var(--dv-bubble-shift, 0px))) translateY(8px) rotate(calc(var(--dv-rotation, 0deg) * -1));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--dv-panel) 96%, transparent);
  border: 2px solid var(--dv-ink);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 16px 32px rgba(41, 35, 27, 0.22);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  z-index: 100;
}

.dv-info-bubble::after {
  content: "";
  position: absolute;
  left: clamp(26px, calc(50% - var(--dv-bubble-shift, 0px)), calc(100% - 26px));
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: var(--dv-panel);
  border-right: 2px solid var(--dv-ink);
  border-bottom: 2px solid var(--dv-ink);
  transform: translateX(-50%) rotate(45deg);
}

.dv-deck-card:hover .dv-info-bubble,
.dv-deck-card.is-touch-preview .dv-info-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(calc(-50% + var(--dv-bubble-shift, 0px))) translateY(0) rotate(calc(var(--dv-rotation, 0deg) * -1));
}

.dv-deck-card.dv-bubble-below .dv-info-bubble {
  top: calc(100% + var(--dv-active-text-gap) + 32px);
  bottom: auto;
}

.dv-deck-card.dv-bubble-below .dv-info-bubble::after {
  top: -8px;
  bottom: auto;
  border-right: 0;
  border-bottom: 0;
  border-left: 2px solid var(--dv-ink);
  border-top: 2px solid var(--dv-ink);
}

.dv-info-bubble strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.dv-info-bubble p {
  margin: 0;
  color: var(--dv-muted);
  font-size: 12px;
  line-height: 1.35;
}


.dv-touch-toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.94);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  box-shadow: 0 14px 28px rgba(17, 24, 39, 0.24);
  opacity: 0;
  transform: translate(-50%, 10px);
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 2147483647;
  pointer-events: none;
}

.dv-touch-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.dv-preview-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: stretch;
}

.dv-preview-controls {
  position: relative;
  z-index: 5;
  width: 100%;
  background: #fff;
  border: 1px solid #dcdcde;
  border-radius: 16px;
  padding: 18px;
  color: #111;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.dv-preview-controls h3,
.dv-preview-controls h4,
.dv-preview-controls p,
.dv-preview-controls span,
.dv-preview-controls output,
.dv-preview-controls label {
  color: #111;
}

.dv-preview-head {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.dv-preview-controls h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.2;
}

.dv-preview-controls p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.dv-preview-mode {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dv-preview-mode button {
  border: 1px solid #111;
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  color: #111;
  cursor: pointer;
  font-weight: 800;
}

.dv-preview-mode button.is-active {
  background: #111;
  color: #fff;
}

.dv-preview-group {
  display: none;
}

.dv-preview-group.is-active {
  display: block;
}

.dv-preview-group h4 {
  margin: 0 0 12px;
  font-size: 15px;
}

.dv-preview-control {
  display: grid;
  grid-template-columns: minmax(170px, 250px) minmax(180px, 1fr) 86px;
  gap: 8px 12px;
  align-items: center;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
}

.dv-preview-control input,
.dv-preview-control select {
  width: 100%;
  color: #111;
  background: #fff;
}

.dv-preview-control input[type="range"] {
  width: calc(100% - 18px);
  min-height: 34px;
  margin: 0 9px;
  accent-color: #111;
}

.dv-preview-control input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
}

.dv-preview-control input[type="range"]::-moz-range-track {
  height: 8px;
  border-radius: 999px;
}

.dv-preview-control input[type="range"]::-webkit-slider-thumb {
  margin-top: -5px;
}

.dv-preview-control output {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 980px) {
  .dv-shell {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .dv-product-area {
    right: clamp(22px, 7vw, 42px);
    left: clamp(22px, 7vw, 42px);
    bottom: var(--dv-product-bottom, 24px);
  }
}

@media (max-width: 700px) {
  .dv-preview-head {
    display: grid;
  }

  .dv-preview-control {
    grid-template-columns: 1fr 86px;
  }

  .dv-preview-control span {
    grid-column: 1 / -1;
  }

  .dv-preview-control input,
  .dv-preview-control select {
    grid-column: 1 / 2;
  }

  .dv-preview-control output {
    grid-column: 2 / 3;
  }
}

@media (hover: none), (pointer: coarse) {
  .dv-deck-card:hover .dv-info-bubble {
    opacity: 0;
    visibility: hidden;
    transform: translateX(calc(-50% + var(--dv-bubble-shift, 0px))) translateY(8px) rotate(calc(var(--dv-rotation, 0deg) * -1));
  }

  .dv-deck-card.is-touch-preview .dv-info-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateX(calc(-50% + var(--dv-bubble-shift, 0px))) translateY(0) rotate(calc(var(--dv-rotation, 0deg) * -1));
  }
}

@media (max-width: 640px) {
  .dv-shop-stage {
    padding-inline: clamp(18px, 5vw, 28px);
  }

  .dv-stage-header h2 {
    font-size: 28px;
  }

  .dv-money-sum {
    padding: 8px 12px;
  }

  .dv-header-actions {
    gap: 8px;
  }

  .dv-finish-box-button {
    padding: 10px 14px;
  }

  .dv-checkmark {
    right: -12px;
    top: -12px;
  }
}