/* 3pika Gallery – stand-alone preview page for editors */
body.tpg-preview-page { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #fff; color: #1d2327; }

/* Inside the iframe: only the gallery */
.tpg-frame-wrap { padding: 24px 16px; }

/* Outer page: bar + device switch + iframe */
html.tpg-preview-outer, body.tpg-preview-outer { height: 100%; }
body.tpg-preview-outer { background: #f3f4f6; display: flex; flex-direction: column; }
.tpg-preview-bar { display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: #0f0f0f; color: #fff; font-size: 13px; flex: none; }
.tpg-preview-bar strong { font-weight: 700; }
.tpg-preview-bar code { background: rgba(255, 255, 255, .12); padding: 4px 9px; border-radius: 999px; font-size: 12px; }
.tpg-preview-bar a { color: #fff; margin-left: auto; text-decoration: none; font-weight: 600; opacity: .8; }
.tpg-preview-bar a:hover { opacity: 1; }
.tpg-preview-devices { display: inline-flex; gap: 4px; margin-left: 8px; background: rgba(255, 255, 255, .08); padding: 3px; border-radius: 999px; }
.tpg-preview-devices button { background: transparent; border: 0; color: rgba(255, 255, 255, .75); border-radius: 999px; padding: 5px 12px; cursor: pointer; font: 600 12px/1 inherit; font-family: inherit; }
.tpg-preview-devices button.is-active { background: #fff; color: #0f0f0f; }
.tpg-preview-stage { flex: 1; display: flex; justify-content: center; align-items: stretch; padding: 22px; min-height: 0; }
.tpg-preview-frame { width: 100%; max-width: 1200px; height: 100%; border: 0; background: #fff; border-radius: 14px; box-shadow: 0 20px 50px -24px rgba(15, 15, 15, .4); transition: max-width .25s; }
.tpg-preview-stage.is-tablet .tpg-preview-frame { max-width: 768px; }
.tpg-preview-stage.is-mobile .tpg-preview-frame { max-width: 390px; }