.owner-preview-mode{padding-top:76px}
.owner-preview-bar{position:fixed;inset:0 0 auto 0;z-index:2147483000;background:rgba(15,23,42,.96);color:#fff;box-shadow:0 10px 30px rgba(15,23,42,.24);backdrop-filter:blur(14px)}
.owner-preview-bar__content{width:min(1180px,calc(100% - 28px));min-height:76px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0}
.owner-preview-bar__content>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.owner-preview-bar strong{font-size:15px;letter-spacing:.02em}
.owner-preview-bar span{font-size:12px;line-height:1.45;color:#cbd5e1}
.owner-preview-bar a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 15px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:#fff;color:#0f172a;text-decoration:none;font-size:13px;font-weight:800}
.owner-preview-bar a:hover{background:#e2e8f0}
@media(max-width:640px){.owner-preview-mode{padding-top:104px}.owner-preview-bar__content{min-height:104px;align-items:flex-start;padding:12px 0}.owner-preview-bar a{margin-top:4px;padding-inline:12px}.owner-preview-bar span{max-width:245px}}

/* Stage 11CE14N — accurate owner draft device preview shell.
 * The invitation itself runs in a SAMEORIGIN iframe so its existing media
 * queries react to the selected width instead of merely scaling the page. */
.owner-device-preview-shell{--preview-device-width:1280px;margin:0;height:100vh;min-height:100vh;height:100dvh;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#e8edf3;color:#0f172a;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.owner-device-preview-shell *{box-sizing:border-box}
.owner-device-preview-toolbar{position:relative;z-index:20;flex:0 0 auto;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px max(18px,calc((100vw - 1440px)/2));background:#0f172a;color:#fff;box-shadow:0 10px 30px rgba(15,23,42,.18)}
.owner-device-preview-toolbar__copy{display:flex;flex-direction:column;gap:3px;min-width:220px;max-width:560px}
.owner-device-preview-toolbar__copy strong{font-size:15px;letter-spacing:.02em}
.owner-device-preview-toolbar__copy span{font-size:12px;line-height:1.45;color:#cbd5e1}
.owner-device-preview-toolbar__actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.owner-device-preview-switcher{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.07)}
.owner-device-preview-switcher__button{appearance:none;border:0;margin:0;min-height:38px;padding:7px 10px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;background:transparent;color:#cbd5e1;font:inherit;font-size:12px;font-weight:750;cursor:pointer;white-space:nowrap;transition:background .16s ease,color .16s ease,box-shadow .16s ease}
.owner-device-preview-switcher__button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.owner-device-preview-switcher__button:hover{background:rgba(255,255,255,.1);color:#fff}
.owner-device-preview-switcher__button:focus-visible{outline:3px solid rgba(147,197,253,.8);outline-offset:2px}
.owner-device-preview-switcher__button.is-active{background:#fff;color:#0f172a;box-shadow:0 5px 16px rgba(0,0,0,.16)}
.owner-device-preview-size{min-width:72px;display:flex;justify-content:center;color:#cbd5e1;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.owner-device-preview-back{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:#fff;color:#0f172a;text-decoration:none;font-size:13px;font-weight:800;white-space:nowrap}
.owner-device-preview-back:hover{background:#e2e8f0}
.owner-device-preview-back:focus-visible{outline:3px solid rgba(147,197,253,.8);outline-offset:2px}
.owner-device-preview-stage{flex:1 1 auto;min-height:0;overflow:auto;padding:16px;background:radial-gradient(circle at 50% -20%,rgba(255,255,255,.95),rgba(226,232,240,.62) 46%,rgba(203,213,225,.62) 100%)}
.owner-device-preview-stage__inner{width:max(100%,var(--preview-device-width));height:100%;min-height:520px;display:flex;justify-content:center;align-items:stretch;transition:width .2s ease}
.owner-device-preview-viewport{width:var(--preview-device-width);height:100%;min-height:520px;display:grid;grid-template-rows:32px minmax(0,1fr);overflow:hidden;border:1px solid #b9c3d0;border-radius:16px;background:#fff;box-shadow:0 24px 70px rgba(15,23,42,.18);transition:width .2s ease,border-radius .2s ease}
.owner-device-preview-viewport__chrome{height:32px;display:flex;align-items:center;gap:6px;padding:0 10px;background:#f8fafc;border-bottom:1px solid #dbe3ec;color:#64748b}
.owner-device-preview-viewport__chrome>span{width:8px;height:8px;border-radius:50%;background:#cbd5e1}
.owner-device-preview-viewport__chrome em{margin-left:auto;font-style:normal;font-size:10px;font-weight:750;letter-spacing:.02em}
.owner-device-preview-viewport iframe{display:block;width:100%;height:100%;min-height:0;border:0;background:#fff}
.owner-device-preview-shell[data-device="mobile"] .owner-device-preview-viewport{border-radius:22px}
.owner-device-preview-shell[data-device="tablet"] .owner-device-preview-viewport{border-radius:18px}
.owner-preview-embedded-mode{padding-top:0!important}
@media(max-width:980px){.owner-device-preview-toolbar{align-items:flex-start;flex-wrap:wrap;padding:10px 14px}.owner-device-preview-toolbar__copy{max-width:none;flex:1 1 100%}.owner-device-preview-toolbar__actions{width:100%;margin-left:0;justify-content:flex-end}.owner-device-preview-stage{padding:10px}.owner-device-preview-stage__inner,.owner-device-preview-viewport{min-height:420px}}
@media(max-width:640px){.owner-device-preview-toolbar__actions{justify-content:flex-start;overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}.owner-device-preview-switcher{flex:0 0 auto}.owner-device-preview-switcher__button{min-width:42px;padding-inline:9px}.owner-device-preview-switcher__button span{display:none}.owner-device-preview-size{display:none}.owner-device-preview-back{margin-left:auto}.owner-device-preview-stage{padding:8px}.owner-device-preview-stage__inner,.owner-device-preview-viewport{min-height:360px}}
@media(prefers-reduced-motion:reduce){.owner-device-preview-switcher__button,.owner-device-preview-stage__inner,.owner-device-preview-viewport{transition:none}}

/* Stage 11CE14O — bounded Mobile portrait frame + reusable theme preview CTA. */
.owner-device-preview-action-form{margin:0;display:flex;align-items:center;flex:0 0 auto}
.owner-device-preview-apply{border-color:#d7b66b;background:#f4d98b;color:#172033;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.owner-device-preview-apply:hover{background:#ffe9aa}
.owner-device-preview-apply:disabled{cursor:not-allowed;opacity:.48;background:#cbd5e1;color:#475569;border-color:#cbd5e1;box-shadow:none}
.owner-device-preview-secondary{background:transparent;color:#e2e8f0;border-color:rgba(255,255,255,.2)}
.owner-device-preview-secondary:hover{background:rgba(255,255,255,.1);color:#fff}

/* Stage 11CE16C/11CE16D — Mobile remains logical 390x867 / 20:9,
 * while 11CE16D scales the handset to the available host panel. */
.owner-device-preview-shell[data-device="mobile"] .owner-device-preview-stage__inner{
    width:100%;
    height:100%;
    min-height:0;
    align-items:flex-start;
    overflow:hidden;
}
.owner-device-preview-shell[data-device="mobile"] .owner-device-preview-viewport{
    width:390px;
    height:867px;
    min-height:0;
    aspect-ratio:auto;
    align-self:flex-start;
    border-radius:24px;
    transform-origin:top center;
    flex:0 0 auto;
}
.owner-device-preview-shell[data-device="mobile"] .owner-device-preview-viewport iframe{min-height:0}
@media(max-width:640px){
    .owner-device-preview-action-form{margin-left:auto}
    .owner-device-preview-apply{min-height:40px;padding-inline:12px}
    .owner-device-preview-secondary{display:none}
}


/* Stage 11CE14P — real-phone preview host.
 * On a physical narrow viewport the browser itself is already the mobile
 * device, so we do not nest another fixed 390x867 handset inside it.
 * The preview toolbar starts collapsed and the invitation fills the dynamic
 * viewport; desktop/tablet browsers keep the 11CE14O framed simulation. */
.owner-device-preview-toolbar__toggle{display:none;appearance:none;border:0;margin:0;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:44px;padding:8px 11px;border-radius:12px;background:#0f172a;color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 8px 22px rgba(15,23,42,.24)}
.owner-device-preview-toolbar__toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .16s ease}
.owner-device-preview-toolbar__toggle:focus-visible{outline:3px solid rgba(147,197,253,.85);outline-offset:2px}

@media(max-width:640px){
    .owner-device-preview-shell{height:100vh;min-height:100vh;height:100dvh;min-height:100dvh;background:#fff}
    .owner-device-preview-toolbar{position:fixed;inset:8px 8px auto auto;z-index:2147483000;width:auto;min-height:0;padding:0;background:transparent;box-shadow:none;backdrop-filter:none;display:block}
    .owner-device-preview-toolbar__toggle{display:inline-flex;position:relative;z-index:2;margin-left:auto}
    .owner-device-preview-toolbar__copy,.owner-device-preview-toolbar__actions{display:none}

    .owner-device-preview-toolbar.is-expanded{inset:8px 8px auto 8px;width:auto;padding:10px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(15,23,42,.97);box-shadow:0 16px 38px rgba(15,23,42,.28);backdrop-filter:none}
    .owner-device-preview-toolbar.is-expanded .owner-device-preview-toolbar__toggle{display:flex;margin:0 0 8px auto;background:rgba(255,255,255,.1);box-shadow:none}
    .owner-device-preview-toolbar.is-expanded .owner-device-preview-toolbar__toggle svg{transform:rotate(180deg)}
    .owner-device-preview-toolbar.is-expanded .owner-device-preview-toolbar__copy{display:flex;padding-right:2px;margin-bottom:9px;min-width:0;max-width:none}
    .owner-device-preview-toolbar.is-expanded .owner-device-preview-toolbar__actions{display:flex;width:100%;margin:0;justify-content:flex-start;overflow-x:auto;padding:0 0 2px;scrollbar-width:thin}

    .owner-device-preview-stage{height:100%;min-height:0;padding:0;overflow:hidden;background:#fff}
    .owner-device-preview-stage__inner{height:100%;min-height:0}

    /* Real mobile: use the actual phone viewport rather than a nested 9:20 portrait frame. */
    .owner-device-preview-shell[data-device="mobile"] .owner-device-preview-stage__inner{width:100%;height:100%;min-height:0;display:block}
    .owner-device-preview-shell[data-device="mobile"] .owner-device-preview-viewport{width:100%;height:100%;min-height:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;grid-template-rows:minmax(0,1fr)}
    .owner-device-preview-shell[data-device="mobile"] .owner-device-preview-viewport__chrome{display:none}
    .owner-device-preview-shell[data-device="mobile"] .owner-device-preview-viewport iframe{width:100%;height:100%;min-height:0}

    /* Tablet/Desktop remain inspectable from a phone through horizontal stage
       scrolling when explicitly selected, but Mobile is the load default. */
    .owner-device-preview-shell[data-device="tablet"] .owner-device-preview-stage,
    .owner-device-preview-shell[data-device="desktop"] .owner-device-preview-stage{overflow:auto;padding:8px;background:#e8edf3}
    .owner-device-preview-shell[data-device="tablet"] .owner-device-preview-stage__inner,
    .owner-device-preview-shell[data-device="desktop"] .owner-device-preview-stage__inner{height:100%;min-height:360px}
}
@media(prefers-reduced-motion:reduce){.owner-device-preview-toolbar__toggle svg{transition:none}}


/* Stage 11CE16D — desktop/tablet host: Mobile preview fits panel height.
 * Invitation content still scrolls inside the iframe itself. */
@media(min-width:641px){
  .owner-device-preview-shell[data-device="mobile"] .owner-device-preview-stage{overflow:hidden!important;scrollbar-width:none}
  .owner-device-preview-shell[data-device="mobile"] .owner-device-preview-stage::-webkit-scrollbar{display:none}
  .owner-device-preview-shell[data-device="mobile"] .owner-device-preview-stage__inner{width:100%;height:100%;min-height:0;overflow:hidden;justify-content:center;align-items:flex-start}
}