/* C05 standalone draft Preview. */
.creator-preview { max-width: 92rem; }
.preview-shell { min-width: 0; }
.preview-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.preview-toolbar-copy { min-width: 0; }
.preview-toolbar h1 { margin: 0; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.15; }
.preview-status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .65rem; font-size: .875rem; }
.preview-device-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem .85rem; margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); }
.preview-device-bar > span { font-size: .78rem; font-weight: 800; }
.preview-device-selector { display: flex; flex-wrap: wrap; gap: .4rem; }
.preview-device-selector button { min-height: 2.5rem; padding: .55rem .8rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-ink-800); background: var(--color-surface-1); font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer; }
.preview-device-selector button.is-selected, .preview-device-selector button[aria-pressed="true"] { color: var(--color-brand-700); border-color: var(--color-brand-500); background: var(--color-brand-50); }
.preview-device-selector button:focus-visible { outline: 2px solid var(--color-brand-600); outline-offset: 2px; }
#previewLogicalWidth { margin-left: auto; color: var(--color-ink-600); font-size: .78rem; font-weight: 750; }
.preview-stage { min-width: 0; min-height: 24rem; padding: .75rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: #ececf4; }
.preview-frame-space { position: relative; margin: 0 auto; transition: width .18s ease, height .18s ease; }
.preview-frame-shell { position: absolute; top: 0; left: 0; overflow: hidden; transform-origin: top left; border: 1px solid #cfcfdd; border-radius: 1rem; background: #fff; box-shadow: 0 16px 40px rgba(28, 28, 54, .14); }
.preview-frame-bar { display: flex; align-items: center; gap: .38rem; height: 42px; padding: 0 .75rem; border-bottom: 1px solid #e2e2ec; background: #fafafe; }
.preview-frame-bar span { width: .55rem; height: .55rem; border-radius: 50%; background: #c8c8d5; }
.preview-frame-bar strong { margin-left: .35rem; color: #68687b; font-size: .72rem; }
#creatorPreviewFrame { display: block; border: 0; background: #f7f7fb; }
.preview-note { margin: .8rem 0 0; color: var(--color-ink-600); font-size: .78rem; line-height: 1.5; }
@media (max-width: 30rem) {
  .preview-toolbar > .button { width: 100%; }
  .preview-device-bar { align-items: stretch; }
  .preview-device-selector { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-device-selector button { min-width: 0; padding-inline: .4rem; }
  #previewLogicalWidth { margin-left: 0; }
  .preview-stage { padding: .5rem; }
}