html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; font-family: var(--font); color: var(--ink); background: var(--bg-page); }
.preview-header { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-bottom: 1px solid var(--border); background: var(--bg-surface); font-weight: 600; }
.preview-header-label { margin-left: 14px; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-muted); }
.preview-main { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 20px 24px 14px; }
.preview-heading { text-align: center; }
.preview-heading h1 { margin: 0; font-size: var(--fs-xl); font-weight: 600; }
.preview-heading p { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.preview-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 22px 0; }
.preview-slot { position: relative; }
.preview-device { position: absolute; top: 0; left: 0; box-sizing: content-box; transform-origin: top left; border: 10px solid #303847; border-radius: 18px; overflow: hidden; background: #151e2d; box-shadow: 0 16px 36px rgba(21, 30, 45, .18), 0 0 0 1px rgba(21, 30, 45, .15); }
.is-portrait .preview-device { border-radius: 34px; border-width: 12px; }
.preview-device iframe { display: block; border: 0; }
.preview-dimensions { margin: 0; text-align: center; font-size: var(--fs-sm); color: var(--ink-muted); }
@media (max-width: 520px) {
  .preview-header { padding: 12px 16px; }
  .preview-header-label { margin-left: 8px; font-size: 11px; }
  .preview-main { padding: 16px 12px 12px; }
  .preview-heading h1 { font-size: var(--fs-lg); }
}