/* Device dimensions and animations copied from Student Tracker. Native dialog
   keeps keyboard focus inside the preview; its transparent canvas avoids gutters. */
body.has-student-preview { overflow: hidden; }
.app-builder-student-preview-dialog { --red: var(--app-color); position: fixed; z-index: 24000; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: #fff; background: transparent; display: grid; place-items: center; overflow-x: hidden; scrollbar-width: none; }
.app-builder-student-preview-dialog:not([open]) { display: none; }
.app-builder-student-preview-dialog::-webkit-scrollbar { display: none; }
.app-builder-student-preview-dialog::backdrop { background: transparent; }
.app-builder-student-preview-dialog [hidden] { display: none !important; }
.tracker-modal-backdrop { position: fixed; inset: 0; border: 0; background: rgba(10, 12, 16, .62); backdrop-filter: blur(3px); }
.tracker-modal-close { width: 34px; height: 34px; position: absolute; top: 16px; right: 16px; border: 0; border-radius: 9px; display: grid; place-items: center; color: #707782; background: #eff1f3; cursor: pointer; }
.tracker-mobile-preview-modal { padding: 8px 14px; align-items: start; overflow: auto; }
.tracker-mobile-preview-card { --preview-resize-duration: .46s; --preview-resize-easing: cubic-bezier(.22, 1, .36, 1); width: min(520px, 100%); min-width: 0; position: relative; z-index: 1; transition: width var(--preview-resize-duration) var(--preview-resize-easing); }
.tracker-mobile-preview-modal:not([hidden]) .tracker-mobile-preview-card { animation: mobile-preview-in .32s cubic-bezier(.16, 1, .3, 1) both; }
.tracker-mobile-preview-modal:not([hidden]) .tracker-modal-backdrop { animation: mobile-preview-backdrop-in .24s ease-out both; }
.tracker-mobile-preview-modal.is-closing .tracker-mobile-preview-card { animation: mobile-preview-out .2s ease-in both; }
.tracker-mobile-preview-modal.is-closing .tracker-modal-backdrop { animation: mobile-preview-backdrop-out .2s ease-in both; }
@keyframes mobile-preview-in {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes mobile-preview-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(16px) scale(.97); }
}
@keyframes mobile-preview-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobile-preview-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .tracker-mobile-preview-modal:not([hidden]) .tracker-mobile-preview-card,
    .tracker-mobile-preview-modal:not([hidden]) .tracker-modal-backdrop { animation: none; }
}
.tracker-mobile-preview-header { width: min(450px, 100%); height: 26px; margin: 0 auto 4px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #fff; transition: width var(--preview-resize-duration) var(--preview-resize-easing); }
.tracker-mobile-preview-header h2 { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgba(255, 255, 255, .72); font-size: .64rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.tracker-preview-view-toggle { height: 26px; flex: 0 0 auto; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #fff; background: rgba(255, 255, 255, .15); font: inherit; font-size: .64rem; font-weight: 800; cursor: pointer; }
.tracker-preview-view-toggle:hover { background: rgba(255, 255, 255, .25); }
.tracker-preview-view-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tracker-mobile-preview-header .tracker-modal-close { width: 26px; height: 26px; position: static; flex: 0 0 auto; color: #fff; background: rgba(255, 255, 255, .15); }
/* Add 5px to the fitted phone dimensions, keeping its gentle app zoom. */
.tracker-mobile-preview-stage { --phone-scale: 1; --phone-border: 14px; height: calc(min(820px, calc(100dvh - 100px), calc((100vw - 28px) * 82 / 45)) + 5px); position: relative; transition: height var(--preview-resize-duration) var(--preview-resize-easing); }
.egh-preview-iphone { width: calc(min(450px, 100%, calc((100dvh - 100px) * 45 / 82)) + 5px); height: 100%; position: absolute; top: 0; left: 50%; border: calc(var(--phone-border) * var(--phone-scale)) solid #1c1c1c; border-radius: calc(50px * var(--phone-scale)); background: #000; box-shadow: 0 28px 70px rgba(0, 0, 0, .48), inset 0 0 0 2px #333; transform: translateX(-50%); transition: width var(--preview-resize-duration) var(--preview-resize-easing), border-width var(--preview-resize-duration) var(--preview-resize-easing), border-radius var(--preview-resize-duration) var(--preview-resize-easing); }
.egh-preview-iphone iframe { width: 100%; height: 100%; display: block; border: 0; border-radius: 36px; background: #fff; zoom: .9; transition: border-radius var(--preview-resize-duration) var(--preview-resize-easing); }
.egh-preview-iphone-button { width: 5px; position: absolute; display: block; border-radius: 3px 0 0 3px; background: #333; }
.egh-preview-iphone-silent { height: 28px; top: 105px; left: -14px; }
.egh-preview-iphone-volume-up { height: 52px; top: 154px; left: -14px; }
.egh-preview-iphone-volume-down { height: 52px; top: 218px; left: -14px; }
.egh-preview-iphone-power { width: 5px; height: 82px; top: 172px; right: -14px; border-radius: 0 3px 3px 0; }
.tracker-mobile-preview-loading { position: absolute; inset: 0; padding: 28px; border-radius: 35px; display: grid; place-content: center; justify-items: center; gap: 12px; color: #4f5660; background: #fff; text-align: center; font-size: .84rem; font-weight: 800; transition: border-radius var(--preview-resize-duration) var(--preview-resize-easing); }
.tracker-mobile-preview-loading i { color: var(--red); font-size: 1.35rem; }
.tracker-mobile-preview-loading.is-error { color: #8f1b23; background: #fff8f8; }
.tracker-mobile-preview-loading[hidden] { display: none; }

@media (max-width: 500px), (max-height: 900px) {
    .tracker-mobile-preview-stage { --phone-scale: .8; }
}

@media (max-height: 760px) {
    .tracker-mobile-preview-stage { --phone-scale: .66; --phone-border: 10px; }
    .egh-preview-iphone { border-radius: calc(42px * var(--phone-scale)); }
    .egh-preview-iphone iframe, .tracker-mobile-preview-loading { border-radius: 31px; }
}

.tracker-mobile-preview-modal.is-tablet .tracker-mobile-preview-card { width: 100%; }
.tracker-mobile-preview-modal.is-tablet .tracker-mobile-preview-header { width: 100%; }
.tracker-mobile-preview-modal.is-tablet .tracker-mobile-preview-stage { --phone-scale: 1; height: calc(100dvh - 46px); }
.tracker-mobile-preview-modal.is-tablet .egh-preview-iphone { width: 100%; border-radius: 30px; }
.tracker-mobile-preview-modal.is-tablet .egh-preview-iphone iframe { zoom: 1; }
.tracker-mobile-preview-modal.is-tablet .egh-preview-iphone iframe,
.tracker-mobile-preview-modal.is-tablet .tracker-mobile-preview-loading { border-radius: 18px; }
@media (prefers-reduced-motion: reduce) {
    .tracker-mobile-preview-card { --preview-resize-duration: 0s; }
}