/* ==========================================================================
   Device preview stage: iPhone 16 and iPad (A16) frames.
   The app runs inside an <iframe> at the device's real point size, so the
   responsive layout you see is exactly what that device would render.
   ========================================================================== */

#device-stage {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column;
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,.09) 1px, transparent 0) 0 0 / 22px 22px,
    #e9e9e6;
  opacity: 0; transition: opacity 0.25s;
}
:root[data-theme='dark'] #device-stage {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0) 0 0 / 22px 22px,
    #0d0d0d;
}
#device-stage.open { opacity: 1; }
body.previewing .app { visibility: hidden; }

.ds-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 20px; background: var(--chrome); color: #fff; flex: none; flex-wrap: wrap;
}
.ds-brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-family: var(--font-display); font-size: 15px; }
.ds-logo { width: 28px; color: #fff; }
.ds-bar .seg { background: var(--chrome-2); }
.ds-bar .seg-btn { color: var(--chrome-ink-2); }
.ds-bar .seg-btn:hover { color: #fff; }
.ds-bar .seg-btn.active { background: #fff; color: #0b0b0b; }
.ds-actions { display: flex; align-items: center; gap: 10px; }
.ds-dim { font-family: var(--font-mono); font-size: 12px; color: var(--chrome-ink-2); }
.ds-bar .btn.ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.25); }
.ds-bar .btn.ghost:hover { border-color: #fff; }
.ds-bar .btn.primary { background: var(--accent); color: var(--accent-ink); }

.ds-canvas {
  flex: 1; min-height: 0; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.ds-caption { margin-top: 18px; font-size: 12.5px; color: var(--ink-3); text-align: center; }

/* ---------- Generic device ---------- */
.device {
  position: relative; flex: none;
  transform-origin: top center;
  background: linear-gradient(145deg, #2b2b2d, #0e0e0f 45%, #1d1d1f);
  box-shadow:
    0 0 0 1.5px #3a3a3c inset,
    0 0 0 1px #000,
    0 50px 100px -30px rgba(0,0,0,.55),
    0 30px 60px -30px rgba(0,0,0,.4);
}
.device-screen {
  position: relative; overflow: hidden; background: #000;
  width: var(--sw); height: var(--sh);
}
.device-screen iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.device-btn { position: absolute; background: #1b1b1d; border-radius: 2px; box-shadow: inset 0 0 0 1px #333; }

/* ---------- iPhone 16 (393 × 852 pt) ---------- */
.device-iphone { padding: 13px; border-radius: 68px; }
.device-iphone .device-screen { border-radius: 55px; }
.dynamic-island {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 124px; height: 36px; border-radius: 20px; background: #000; z-index: 5; pointer-events: none;
}
.device-iphone .b1 { left: -3px; top: 150px; width: 4px; height: 32px; }
.device-iphone .b2 { left: -3px; top: 210px; width: 4px; height: 62px; }
.device-iphone .b3 { right: -3px; top: 230px; width: 4px; height: 96px; }

/* ---------- iPad (A16), 11-inch (820 × 1180 pt) ---------- */
.device-ipad { padding: 22px; border-radius: 42px; }
.device-ipad .device-screen { border-radius: 20px; }
.front-cam { position: absolute; top: 9px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #1a1a2a; box-shadow: inset 0 0 0 1.5px #2b2b3b; }
.device-ipad .b1 { top: -3px; right: 70px; width: 56px; height: 4px; }
.device-ipad .b2 { right: -3px; top: 90px; width: 4px; height: 50px; }
.device-ipad .b3 { right: -3px; top: 150px; width: 4px; height: 50px; }
.device-ipad.landscape .front-cam { top: 50%; left: 9px; margin: -3px 0 0; }
.device-ipad.landscape .b1 { top: auto; right: -3px; bottom: 70px; width: 4px; height: 56px; }
.device-ipad.landscape .b2 { right: auto; top: -3px; left: 90px; width: 50px; height: 4px; }
.device-ipad.landscape .b3 { right: auto; top: -3px; left: 150px; width: 50px; height: 4px; }

@media (max-width: 760px) {
  .ds-dim { display: none; }
  .ds-bar { padding: 10px 12px; }
}