/* 多设备层叠预览 — 参考 toolwa.com/responsive */

.device-preview {
  margin-top: 0.5rem;
}

.device-preview .wrapper {
  max-width: var(--preview-width, 1240px);
  margin: 0 auto;
}

.device-preview .display {
  position: relative;
  width: 100%;
  min-height: 660px;
  margin: 0 auto;
  padding: 2.5rem 3rem 3rem 2rem;
  border-radius: 12px;
  transition: background 0.2s;
}

.device-preview .display[data-bg="white"] {
  background: var(--preview-bg-white);
}

.device-preview .display[data-bg="gray"] {
  background: var(--preview-bg-gray);
}

.device-preview .display[data-bg="black"] {
  background: var(--preview-bg-black);
}

.device-preview .device-unit {
  position: absolute;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.14));
}

.device-preview .screen {
  position: relative;
  overflow: hidden;
  background: #fff;
  line-height: 0;
}

.device-preview .screen iframe {
  display: block;
  border: none;
  transform-origin: top left;
  pointer-events: auto;
  touch-action: auto;
}

.device-preview .screen img {
  display: block;
  border: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  transform: none !important;
  pointer-events: none;
}

/* —— 显示器（背景居中） —— */
.device-preview .desktop {
  left: 50%;
  top: 0.75rem;
  transform: translateX(-50%);
  width: 78%;
  max-width: 860px;
  z-index: 1;
}

.device-chrome--desktop .screen {
  aspect-ratio: 16 / 10;
  border: 11px solid #111;
  border-radius: 10px 10px 0 0;
  background: #000;
}

.device-chrome--desktop .stand-neck {
  width: 22%;
  height: 28px;
  margin: 0 auto;
  background: linear-gradient(90deg, #a8adb5, #c8ccd2 40%, #a8adb5);
  border-radius: 0 0 2px 2px;
}

.device-chrome--desktop .stand-base {
  width: 38%;
  height: 10px;
  margin: 0 auto;
  background: linear-gradient(180deg, #b8bcc4, #949aa3);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* —— 笔记本（右下叠放） —— */
.device-preview .laptop {
  right: 1.25rem;
  bottom: 8%;
  width: 50%;
  max-width: 500px;
  z-index: 2;
}

.device-chrome--laptop .screen {
  aspect-ratio: 16 / 10;
  border: 9px solid #2a2a2a;
  border-radius: 10px 10px 0 0;
  background: #000;
  box-shadow: inset 0 0 0 1px #444;
}

.device-chrome--laptop .laptop-base {
  height: 16px;
  margin-top: -1px;
  background: linear-gradient(180deg, #e2e6ec 0%, #b8bec8 55%, #9aa3b0 100%);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
  position: relative;
}

.device-chrome--laptop .laptop-base::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18%;
  height: 3px;
  background: #8b939e;
  border-radius: 2px;
}

/* —— 平板（左侧竖屏） —— */
.device-preview .tablet {
  left: 1.5rem;
  top: 18%;
  width: 22%;
  max-width: 250px;
  z-index: 3;
}

.device-chrome--tablet .screen {
  aspect-ratio: 3 / 4;
  border: 6px solid #111;
  border-radius: 14px;
  background: #000;
}

/* —— 手机（最前景） —— */
.device-preview .mobile {
  left: 14%;
  bottom: 4%;
  width: 13%;
  min-width: 100px;
  max-width: 140px;
  z-index: 4;
}

.device-chrome--mobile .screen {
  aspect-ratio: 9 / 19.5;
  border: 5px solid #111;
  border-radius: 18px;
  background: #000;
}

.device-chrome--mobile .screen::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  height: 3px;
  background: #333;
  border-radius: 2px;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 720px) {
  .device-preview .display {
    min-height: 420px;
    transform: scale(0.92);
    transform-origin: top center;
  }

  .device-preview .desktop {
    width: 92%;
  }

  .device-preview .laptop {
    width: 48%;
    right: 0.75rem;
  }

  .device-preview .tablet {
    width: 28%;
    left: 0;
  }

  .device-preview .mobile {
    width: 18%;
    left: 8%;
  }
}