/* =========================================================
   MDC LIVE PREVIEW V2
   Phase 1 — Invitation Runtime Presentation
   ========================================================= */

:root{
  --preview-bg:#eef0f4;
  --preview-panel:#ffffff;
  --preview-border:#d9dce3;
  --preview-text:#202124;
}

/* ---------------------------------------------------------
   Preview Workspace
   --------------------------------------------------------- */

.preview-wrap{
  flex:1;
  min-width:0;
  padding:24px;
  overflow:auto;
  background:var(--preview-bg);
}

.preview-toolbar{
  width:100%;
  max-width:1440px;
  margin:0 auto 14px;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--preview-border);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.preview-toolbar-left,
.preview-toolbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.preview-toolbar-label{
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#6b7280;
}

.preview-device-button{
  flex:0 0 auto;
  width:auto;
  min-width:72px;
  padding:7px 10px;
  background:#fff;
  color:#444;
  border:1px solid #d6d8de;
  border-radius:7px;
  font-size:11px;
  font-weight:700;
}

.preview-device-button.active{
  background:#4B199E;
  color:#fff;
  border-color:#4B199E;
}

.preview-page-control{
  flex:0 0 auto;
  width:auto;
  min-width:36px;
  padding:7px 10px;
}

.preview-page-indicator{
  min-width:72px;
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:#666;
}

/* ---------------------------------------------------------
   Device Stage
   --------------------------------------------------------- */

.preview-stage{
  width:100%;
  min-height:calc(100vh - 180px);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:18px 0 36px;
}

.device-frame{
  position:relative;
  flex:0 0 auto;
  background:#151515;
  border:1px solid #252525;
  box-shadow:0 24px 70px rgba(0,0,0,.18);
  transition:
    width .25s ease,
    height .25s ease,
    border-radius .25s ease;
}

.device-frame.mobile{
  width:390px;
  min-height:844px;
  border-radius:30px;
  padding:10px;
}

.device-frame.tablet{
  width:min(834px,92vw);
  min-height:1112px;
  border-radius:22px;
  padding:10px;
}

.device-frame.desktop{
  width:min(1440px,96vw);
  min-height:760px;
  border-radius:16px;
  padding:10px;
}

/* ---------------------------------------------------------
   Runtime surface
   --------------------------------------------------------- */

.device-screen{
  width:100%;
  height:100%;
  min-height:100%;
  background:#fff;
  border-radius:inherit;
  overflow:hidden;
  position:relative;
}

.device-frame.mobile .device-screen{
  min-height:824px;
}

.device-frame.tablet .device-screen{
  min-height:1092px;
}

.device-frame.desktop .device-screen{
  min-height:740px;
}

/* Desktop is intentionally modeled as a presentation mode.
   The invitation runtime remains the actual rendered runtime. */

.desktop-presentation{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);
  min-height:740px;
  background:#111;
}

.desktop-fixed-panel{
  position:relative;
  min-height:740px;
  overflow:hidden;
  background:#191919;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.desktop-fixed-panel-inner{
  width:100%;
  max-width:480px;
  text-align:center;
}

.desktop-fixed-panel .desktop-label{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.16em;
  opacity:.55;
  margin-bottom:16px;
}

.desktop-fixed-panel h2{
  margin:0;
  font-size:30px;
  line-height:1.15;
}

.desktop-fixed-panel p{
  margin:14px 0 0;
  line-height:1.7;
  opacity:.72;
}

.desktop-interactive-panel{
  min-width:0;
  background:#fff;
  overflow:hidden;
  display:flex;
  justify-content:center;
}

.desktop-interactive-panel .device-runtime{
  width:100%;
  max-width:600px;
  min-height:740px;
}

/* ---------------------------------------------------------
   Invitation Runtime
   --------------------------------------------------------- */

#invitation.mdc-invitation{
  min-height:100%;
  position:relative;
  overflow:hidden;
  color:var(--mdc-text);
  background:var(--mdc-bg);
  font-family:var(--mdc-body-font,Arial,sans-serif);
  transition:
    background .35s ease,
    color .35s ease;
}

#invitation .mdc-section{
  min-height:680px;
  width:100%;
  padding:72px 48px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  overflow:hidden;
  color:var(--mdc-text);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb,var(--mdc-surface) 72%,transparent),
      color-mix(in srgb,var(--mdc-bg) 92%,transparent)
    );
}

#invitation .mdc-section-inner{
  position:relative;
  z-index:5;
  width:100%;
  max-width:760px;
  text-align:center;
}

#invitation .mdc-section-kicker{
  color:var(--mdc-accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:18px;
}

#invitation .mdc-section-title{
  margin:0;
  color:var(--mdc-text);
  font-family:var(--mdc-heading-font,Georgia,serif);
  font-size:clamp(36px,6vw,64px);
  line-height:1.08;
  letter-spacing:-.02em;
}

#invitation .mdc-section-body{
  max-width:620px;
  margin:28px auto 0;
  color:var(--mdc-muted,var(--mdc-text));
  font-family:var(--mdc-body-font,Arial,sans-serif);
  font-size:15px;
  line-height:1.9;
}

/* ---------------------------------------------------------
   Frame system
   --------------------------------------------------------- */

#invitation .mdc-section::before{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:3;
  inset:28px;
  border:1px solid var(--mdc-border,rgba(0,0,0,.15));
  border-radius:0;
  opacity:.85;
}

#invitation[data-frame="none"] .mdc-section::before{
  display:none;
}

#invitation[data-frame="double-frame"] .mdc-section::before{
  border:2px solid var(--mdc-border);
  box-shadow:
    inset 0 0 0 7px transparent,
    inset 0 0 0 8px var(--mdc-border);
}

#invitation[data-frame="arch-frame"] .mdc-section::before{
  inset:36px 42px;
  border-radius:50% 50% 10px 10px / 24% 24% 10px 10px;
}

#invitation[data-frame="ribbon-frame"] .mdc-section::before{
  inset:34px;
  border-width:1px;
  border-style:dashed;
  border-radius:18px;
}

#invitation[data-frame="laurel-frame"] .mdc-section::before{
  inset:30px;
  border-width:2px;
  border-radius:42%;
}

#invitation[data-frame="classic-flourish"] .mdc-section::before{
  inset:26px;
  border-width:2px;
  border-radius:8px;
}

#invitation[data-frame="art-deco-frame"] .mdc-section::before{
  inset:30px;
  border-width:1px;
  transform:none;
  box-shadow:
    inset 0 0 0 7px transparent,
    inset 0 0 0 8px var(--mdc-border);
}

#invitation[data-frame="geometric-frame"] .mdc-section::before{
  inset:32px;
  border-width:1px;
  transform:none;
  border-radius:4px;
}

#invitation[data-frame="fine-line-frame"] .mdc-section::before{
  inset:34px;
  border-width:1px;
  border-radius:2px;
}

/* ---------------------------------------------------------
   Page ornament runtime
   --------------------------------------------------------- */

.mdc-page-ornament{
  position:absolute;
  z-index:4;
  width:110px;
  height:110px;
  color:var(--mdc-accent);
  opacity:.42;
  pointer-events:none;
}

.mdc-page-ornament.top{
  top:20px;
  left:50%;
  transform:translateX(-50%);
}

.mdc-page-ornament.bottom{
  bottom:20px;
  left:50%;
  transform:translateX(-50%) rotate(180deg);
}

.mdc-page-ornament svg{
  width:100%;
  height:100%;
  display:block;
}

#invitation[data-ornament="none"] .mdc-page-ornament{
  display:none;
}

/* ---------------------------------------------------------
   Card runtime
   --------------------------------------------------------- */

.mdc-card{
  position:relative;
  width:min(100%,560px);
  margin:30px auto 0;
  padding:28px;
  box-sizing:border-box;
  background:var(--mdc-surface);
  color:var(--mdc-text);
  border:1px solid var(--mdc-border);
  overflow:hidden;
}

.mdc-card-square{
  border-radius:0;
}

.mdc-card-rounded{
  border-radius:22px;
}

.mdc-card-arch{
  border-radius:45% 45% 16px 16px / 20% 20% 16px 16px;
}

.mdc-card-oval{
  border-radius:50%;
}

.mdc-card-circle{
  width:320px;
  min-height:320px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mdc-card-portrait{
  aspect-ratio:4/5;
  border-radius:8px;
}

.mdc-card-polaroid{
  padding:12px 12px 34px;
  border-radius:2px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.mdc-card-editorial{
  border:0;
  border-top:1px solid var(--mdc-border);
  border-bottom:1px solid var(--mdc-border);
  border-radius:0;
  background:transparent;
}

.mdc-card-glass{
  background:color-mix(in srgb,var(--mdc-surface) 64%,transparent);
  backdrop-filter:blur(12px);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.mdc-card-luxury{
  border:1px solid var(--mdc-accent);
  border-radius:4px;
  box-shadow:
    0 16px 40px rgba(0,0,0,.12),
    inset 0 0 0 5px color-mix(in srgb,var(--mdc-accent) 8%,transparent);
}

.mdc-card-minimal{
  border:0;
  border-bottom:1px solid var(--mdc-border);
  border-radius:0;
  background:transparent;
  padding-left:0;
  padding-right:0;
}

.mdc-card-ribbon{
  border-radius:14px;
  border-top:5px solid var(--mdc-accent);
}

/* ---------------------------------------------------------
   Feature components
   --------------------------------------------------------- */

.mdc-feature{
  position:relative;
  width:min(100%,560px);
  margin:32px auto 0;
  padding:26px;
  background:color-mix(in srgb,var(--mdc-surface) 84%,transparent);
  border:1px solid var(--mdc-border);
  border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.08);
}

.mdc-feature-placeholder{
  margin:0;
  padding:16px 20px;
  border:1px dashed var(--mdc-accent);
  border-radius:12px;
  color:var(--mdc-accent);
  font-weight:700;
}

.mdc-section-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:180px;
  margin-top:18px;
  padding:11px 20px;
  border:1px solid var(--mdc-accent);
  border-radius:var(--mdc-button-radius,8px);
  color:var(--mdc-button-text,#fff);
  background:var(--mdc-accent);
  text-decoration:none;
  font-family:var(--mdc-body-font,Arial,sans-serif);
  font-size:13px;
  font-weight:700;
}

/* ---------------------------------------------------------
   Event details
   --------------------------------------------------------- */

.mdc-event-details{
  width:min(100%,560px);
  margin:30px auto 0;
  padding:24px;
  display:grid;
  gap:14px;
  background:var(--mdc-surface);
  border:1px solid var(--mdc-border);
  border-radius:var(--mdc-card-radius,18px);
}

.mdc-detail-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  text-align:center;
}

.mdc-detail-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mdc-accent);
}

.mdc-detail-item strong,
.mdc-detail-item span{
  font-family:var(--mdc-body-font,Arial,sans-serif);
  color:var(--mdc-text);
}

/* ---------------------------------------------------------
   Gallery
   --------------------------------------------------------- */

.mdc-gallery{
  width:min(100%,620px);
  margin:30px auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.mdc-gallery-item{
  margin:0;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:var(--mdc-gallery-radius,14px);
  background:var(--mdc-surface);
  border:1px solid var(--mdc-border);
}

.mdc-gallery-item img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.mdc-gallery-empty{
  width:min(100%,560px);
  margin:30px auto 0;
}

/* ---------------------------------------------------------
   Section navigation
   --------------------------------------------------------- */

.mdc-section-navigation{
  margin-top:34px;
  display:flex;
  justify-content:center;
  gap:10px;
}

.mdc-section-nav{
  flex:0 0 auto;
  width:auto;
  min-width:110px;
  padding:10px 16px;
  border:1px solid var(--mdc-accent);
  background:transparent;
  color:var(--mdc-accent);
  border-radius:var(--mdc-button-radius,8px);
  font-family:var(--mdc-body-font,Arial,sans-serif);
  font-size:12px;
}

/* ---------------------------------------------------------
   Wishes
   --------------------------------------------------------- */

.mdc-wishes-list{
  margin-top:18px;
  display:grid;
  gap:10px;
}

.mdc-wish-placeholder{
  padding:14px;
  border-radius:10px;
  background:color-mix(in srgb,var(--mdc-bg) 70%,transparent);
  color:var(--mdc-text);
  font-size:12px;
  line-height:1.6;
}

/* ---------------------------------------------------------
   DNA-driven button variants
   --------------------------------------------------------- */

#invitation[data-button="solid"]{
  --mdc-button-radius:8px;
}

#invitation[data-button="outline"]{
  --mdc-button-radius:8px;
}

#invitation[data-button="pill"]{
  --mdc-button-radius:999px;
}

#invitation[data-button="ghost"]{
  --mdc-button-radius:6px;
}

#invitation[data-button="gold-line"]{
  --mdc-button-radius:2px;
}

#invitation[data-button="glass"]{
  --mdc-button-radius:14px;
}

#invitation[data-button="minimal-text"]{
  --mdc-button-radius:0;
}

#invitation[data-button="ribbon"]{
  --mdc-button-radius:4px;
}

/* ---------------------------------------------------------
   Interaction modes
   --------------------------------------------------------- */

#invitation[data-interaction="scroll"] .mdc-section{
  min-height:100vh;
}

#invitation[data-interaction="tap"] .mdc-section{
  min-height:680px;
}

/* ---------------------------------------------------------
   Motion
   --------------------------------------------------------- */

@keyframes mdcFadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes mdcRise{
  from{
    opacity:0;
    transform:translateY(22px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

.mdc-invitation[data-transition="gentle-fade"] .mdc-section-inner{
  animation:mdcFadeIn .5s ease both;
}

.mdc-invitation[data-transition="soft-rise"] .mdc-section-inner{
  animation:mdcRise .55s ease both;
}

.mdc-invitation[data-transition="slide-up"] .mdc-section-inner{
  animation:mdcRise .4s ease both;
}

.mdc-invitation[data-transition="cinematic-reveal"] .mdc-section-inner{
  animation:mdcFadeIn .7s ease both;
}

/* ---------------------------------------------------------
   Responsive runtime
   --------------------------------------------------------- */

@media(max-width:700px){

  .preview-wrap{
    padding:12px;
  }

  .preview-toolbar{
    padding:8px;
  }

  .preview-stage{
    padding-top:8px;
  }

  .device-frame.mobile{
    width:min(390px,100%);
  }

  #invitation .mdc-section{
    padding:64px 26px;
  }

  #invitation .mdc-section-title{
    font-size:clamp(32px,9vw,52px);
  }

  .mdc-gallery{
    grid-template-columns:1fr 1fr;
  }

}

@media(max-width:520px){

  .preview-toolbar-left,
  .preview-toolbar-right{
    width:100%;
  }

  .preview-device-button{
    flex:1 1 auto;
  }

  .device-frame.mobile{
    width:100%;
    border-radius:18px;
    padding:5px;
  }

  .device-frame.mobile .device-screen{
    min-height:calc(100vh - 130px);
  }

  #invitation .mdc-section{
    min-height:calc(100vh - 130px);
    padding:54px 20px;
  }

  #invitation .mdc-section::before{
    inset:18px;
  }

}

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }

}

/* ========================================================================== */
/* MDC V3 PHASE 1 — LIVE PREVIEW / RUNTIME FOUNDATION                        */
/* ========================================================================== */

/* Builder workspace: desktop-friendly, but resilient down to mobile. */
.preview-wrap{
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.preview-toolbar{
  flex:0 0 auto;
  min-height:52px;
  z-index:20;
}

.preview-stage{
  flex:1 1 auto;
  min-width:0;
  min-height:0;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:20px;
}

.preview-stage[data-fit="true"]{
  overflow:hidden;
}

.preview-stage[data-fit="false"]{
  overflow:auto;
  align-items:flex-start;
  justify-content:center;
}

.device-frame{
  flex:0 0 auto;
  position:relative;
  width:var(--device-width,390px);
  height:var(--device-height,844px);
  max-width:none;
  max-height:none;
  aspect-ratio:var(--device-ratio,2.222222);
  overflow:hidden;
  transform-origin:center center;
  transition:width .18s ease,height .18s ease,box-shadow .18s ease;
}

.device-frame.mobile{
  aspect-ratio:20 / 9;
  border-radius:28px;
}

.device-frame.tablet{
  aspect-ratio:4 / 3;
  border-radius:22px;
}

.device-frame.desktop{
  aspect-ratio:16 / 9;
  border-radius:14px;
}

.device-screen{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  overflow:hidden;
  position:relative;
}

.preview-stage[data-fit="false"] .device-frame{
  margin-bottom:20px;
}

/* Desktop presentation: fixed/static panel + interactive invitation. */
.desktop-presentation{
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(260px,34%) minmax(0,1fr);
  overflow:hidden;
}

.desktop-fixed-panel,
.desktop-interactive-panel{
  min-width:0;
  min-height:0;
  overflow:hidden;
}

.desktop-fixed-panel{
  display:flex;
  align-items:center;
  justify-content:center;
}

.desktop-interactive-panel{
  position:relative;
}

/* Generated invitation runtime: mobile-first. */
.mdc-invitation{
  --mdc-runtime-min-width:0;
  width:100%;
  min-width:0;
  min-height:100%;
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:none;
  background:var(--mdc-bg,#fff);
  color:var(--mdc-text,#222);
}

.mdc-invitation *{
  box-sizing:border-box;
}

.mdc-invitation img,
.mdc-invitation video,
.mdc-invitation iframe{
  max-width:100%;
}

.mdc-section{
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:100svh;
  padding:clamp(24px,6vw,72px) clamp(18px,5vw,64px);
  overflow:hidden;
}

/* Tap runtime: one viewport section at a time. */
#invitation[data-interaction="tap"]{
  overflow:hidden;
  height:100%;
}

#invitation[data-interaction="tap"] .mdc-section{
  height:100%;
  min-height:100%;
  max-height:100%;
  overflow:hidden;
}

/* Scroll runtime: all sections form one continuous story. */
#invitation[data-interaction="scroll"]{
  height:auto;
  min-height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

#invitation[data-interaction="scroll"] .mdc-section{
  min-height:100svh;
  height:auto;
  max-height:none;
  overflow:visible;
}

/* Responsive generated invitation — mobile first. */
@media (max-width:575.98px){
  .mdc-section{
    padding:24px 18px;
  }
  .mdc-card{
    width:100%;
    max-width:100%;
  }
  .mdc-section-title{
    font-size:clamp(28px,8vw,42px);
  }
}

@media (min-width:576px) and (max-width:767.98px){
  .mdc-section{
    padding:32px 24px;
  }
}

@media (min-width:768px) and (max-width:991.98px){
  .mdc-section{
    padding:42px 32px;
  }
}

@media (min-width:992px){
  .mdc-section{
    padding:48px 42px;
  }
}

@media (min-width:1400px){
  .mdc-section{
    padding-left:clamp(48px,5vw,96px);
    padding-right:clamp(48px,5vw,96px);
  }
}

/* Prevent mobile browser viewport quirks from breaking full-screen sections. */
@supports (height:100dvh){
  #invitation[data-interaction="tap"] .mdc-section{
    min-height:100dvh;
    height:100dvh;
  }
  #invitation[data-interaction="scroll"] .mdc-section{
    min-height:100dvh;
  }
}

@media (prefers-reduced-motion:reduce){
  .device-frame{
    transition:none;
  }
}

/* ============================================================
   MDC V3 PHASE 1 - FINAL LIVE PREVIEW PRESENTATION OVERRIDE
   Mobile-first runtime simulation.
   ============================================================ */

.preview-wrap{
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
}

.preview-stage{
  position:relative !important;
  flex:1 1 auto !important;
  min-height:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:16px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.preview-stage[data-fit="false"]{
  overflow:auto !important;
  align-items:flex-start !important;
  justify-content:center !important;
}

.device-frame{
  flex:0 0 auto !important;
  position:relative !important;
  display:block !important;
  box-sizing:border-box !important;
  max-width:none !important;
  min-width:0 !important;
  min-height:0 !important;
  width:var(--device-width, 390px) !important;
  height:var(--device-height, 844px) !important;
  aspect-ratio:var(--device-ratio, 2.2222) !important;
  margin:0 auto !important;
  overflow:hidden !important;
}

.device-screen{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#invitation{
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

/* Device-specific visual identity */
.device-frame[data-device="mobile"]{
  border-radius:28px !important;
}

.device-frame[data-device="tablet"]{
  border-radius:22px !important;
}

.device-frame[data-device="desktop"]{
  border-radius:14px !important;
}

/* Desktop foundation: presentation can expose fixed + interactive areas */
.device-frame[data-device="desktop"] .desktop-presentation{
  display:grid !important;
  grid-template-columns:minmax(180px, 30%) minmax(0, 1fr) !important;
  width:100% !important;
  height:100% !important;
}

/* Prevent old hard-coded minimum heights from defeating Fit */
.device-frame .mdc-section{
  min-height:0 !important;
}

/* Tap runtime: one viewport section */
#invitation[data-interaction="tap"]{
  height:100% !important;
  overflow:hidden !important;
}

#invitation[data-interaction="tap"] .mdc-section{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  overflow:hidden !important;
}

/* Scroll runtime: actual continuous story */
#invitation[data-interaction="scroll"]{
  height:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#invitation[data-interaction="scroll"] .mdc-section{
  min-height:100% !important;
  height:auto !important;
  max-height:none !important;
}

/* Keep toolbar above the preview device */
.preview-toolbar{
  position:relative !important;
  z-index:100 !important;
  flex:0 0 auto !important;
}

/* Mobile-first responsive workspace */
@media (max-width:575.98px){
  .preview-stage{
    padding:8px !important;
  }
}

@media (min-width:576px){
  .preview-stage{
    padding:16px !important;
  }
}

@media (min-width:992px){
  .preview-stage{
    padding:20px !important;
  }
}

/* ============================================================
   MDC V3 PHASE 1 - DEVICE PRESENTATION / RESPONSIVE FOUNDATION
   Logical device sizes + uniform scaling + mobile-first breakpoints
   ============================================================ */

.preview-wrap{
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
  min-height:0 !important;
  height:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

.preview-toolbar{
  flex:0 0 auto !important;
  width:calc(100% - 32px) !important;
  margin:16px !important;
  margin-bottom:8px !important;
  min-height:56px !important;
  box-sizing:border-box !important;
  display:grid !important;
  grid-template-columns:minmax(120px,1fr) auto minmax(250px,1fr) !important;
  align-items:center !important;
  gap:12px !important;
  padding:10px 12px !important;
  position:relative !important;
  z-index:100 !important;
}

.preview-toolbar-left{
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  white-space:nowrap !important;
}

.preview-toolbar-right{
  min-width:0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  gap:8px !important;
}

.preview-device-controls,
.preview-zoom-controls,
.preview-page-control{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  flex-wrap:nowrap !important;
}

.preview-device-button,
.preview-page-control button,
.preview-zoom-controls button{
  height:32px !important;
  min-width:62px !important;
  padding:0 12px !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
}

.preview-page-control button{
  min-width:72px !important;
}

.preview-zoom-controls button{
  min-width:48px !important;
}

.preview-zoom-controls #zoomFitBtn{
  min-width:72px !important;
}

.preview-zoom-controls #zoomLabel{
  min-width:34px !important;
  text-align:center !important;
  font-size:12px !important;
  white-space:nowrap !important;
}

.preview-stage{
  position:relative !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:0 !important;
  width:100% !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:24px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.preview-stage[data-fit="false"]{
  overflow:auto !important;
  align-items:center !important;
  justify-content:center !important;
  padding:40px !important;
}

.device-frame{
  flex:0 0 auto !important;
  position:relative !important;
  display:block !important;
  width:var(--device-logical-width, 400px) !important;
  height:var(--device-logical-height, 900px) !important;
  max-width:none !important;
  max-height:none !important;
  min-width:0 !important;
  min-height:0 !important;
  aspect-ratio:var(--device-ratio, 2.222222) !important;
  box-sizing:border-box !important;
  margin:0 !important;
  background:#080808 !important;
  border:10px solid #050505 !important;
  border-radius:32px !important;
  overflow:hidden !important;
  box-shadow:0 18px 48px rgba(0,0,0,.24), 0 0 0 1px rgba(255,255,255,.12) !important;
  transform-origin:center center !important;
  will-change:transform !important;
}

.device-frame[data-device="tablet"]{
  border-width:12px !important;
  border-radius:28px !important;
}

.device-frame[data-device="desktop"]{
  border-width:12px !important;
  border-radius:18px !important;
}

.device-screen{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  background:#fff !important;
  border-radius:inherit !important;
}

#invitation{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

#invitation[data-interaction="tap"]{
  width:100% !important;
  height:100% !important;
  overflow:hidden !important;
}

#invitation[data-interaction="tap"] .mdc-section{
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  max-height:100% !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

#invitation[data-interaction="scroll"]{
  width:100% !important;
  height:100% !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}

#invitation[data-interaction="scroll"] .mdc-section{
  min-height:100% !important;
  height:auto !important;
  max-height:none !important;
}

.device-frame[data-device="desktop"] .desktop-presentation{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:30% minmax(0,1fr) !important;
}

.device-frame[data-device="desktop"] .desktop-fixed-panel,
.device-frame[data-device="desktop"] .desktop-interactive-panel{
  min-width:0 !important;
  min-height:0 !important;
  overflow:hidden !important;
}

/* Builder is desktop-oriented, but the invitation runtime remains mobile-first. */
@media (max-width:575.98px){
  .preview-toolbar{
    width:calc(100% - 16px) !important;
    margin:8px !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .preview-toolbar-left,
  .preview-toolbar-right,
  .preview-page-control{
    justify-content:center !important;
  }

  .preview-toolbar-right{
    flex-wrap:wrap !important;
  }

  .preview-stage{
    padding:12px !important;
  }
}

@media (min-width:576px) and (max-width:767.98px){
  .preview-toolbar{
    grid-template-columns:1fr auto !important;
  }

  .preview-toolbar-right{
    grid-column:1 / -1 !important;
    justify-content:center !important;
  }
}

@media (min-width:768px) and (max-width:991.98px){
  .preview-toolbar{
    grid-template-columns:minmax(120px,1fr) auto !important;
  }

  .preview-toolbar-right{
    grid-column:1 / -1 !important;
    justify-content:center !important;
  }
}

@media (min-width:992px) and (max-width:1199.98px){
  .preview-toolbar{
    grid-template-columns:minmax(120px,1fr) auto minmax(220px,1fr) !important;
  }
}

@media (min-width:1200px) and (max-width:1399.98px){
  .preview-toolbar{
    grid-template-columns:minmax(150px,1fr) auto minmax(300px,1fr) !important;
  }
}

@media (min-width:1400px){
  .preview-toolbar{
    grid-template-columns:minmax(180px,1fr) auto minmax(360px,1fr) !important;
  }
}

/* =========================================
   MDC DEVICE FRAME - SLIM MODERN
   ========================================= */

#previewDeviceFrame {
  background: #000 !important;
  border: 1px solid #111 !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.10) !important;
  overflow: hidden !important;
}

#previewDeviceFrame.mobile,
#previewDeviceFrame[data-device="mobile"] {
  border: 2px solid #000 !important;
  border-radius: 28px !important;
}

#previewDeviceFrame.tablet,
#previewDeviceFrame[data-device="tablet"] {
  border: 4px solid #000 !important;
  border-radius: 16px !important;
}

#previewDeviceFrame.desktop,
#previewDeviceFrame[data-device="desktop"] {
  border: 3px solid #000 !important;
  border-radius: 10px !important;
}

#previewDeviceFrame .device-screen {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  overflow: hidden;
  background: #fff;
}