/* InkMotion Studio Layout v2 — UI-only improvements for nine video makers.
   Desktop: controls / monitor / controls. Tablet/mobile: monitor -> compact tabbed controls.
   CSS does not alter any canvas, renderers, export functions, or stored user settings. */
:root{--im-ui-violet:#7455d9;--im-ui-border:#e3e6f2}
/* Wider editor only. Keep page-wide navigation and content unchanged. */
@media(min-width:1161px){
  body[data-im-page="cinematic-title-maker"] .editor-wrapper,
  body[data-im-page="infinite-zoom"] .imz-editor-section,
  body[data-im-page="photo-beat-sync"] .imb-editor,
  body[data-im-page="animated-quote-maker"] .iq-editor,
  body[data-im-page="photo-mosaic-reveal"] .pm-editor,
  body[data-im-page="word-morph-animator"] .st-editor,
  body[data-im-page="before-after-reveal"] .st-editor,
  body[data-im-page="text-match-cut"] .shell:has(> .studio){width:min(1490px,calc(100% - 38px));max-width:none}

  /* Same responsive 3-zone structure for all section-based studios. */
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work){
    display:grid!important;
    grid-template-columns:minmax(210px,.86fr) minmax(320px,1.48fr) minmax(210px,.86fr)!important;
    grid-template-rows:repeat(6,max-content)!important;
    column-gap:12px!important;row-gap:12px!important;align-items:start!important;
  }
  /* Contains independent cards: grid children are distributed into left and right columns. */
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.controls,.imz-controls,.imb-controls,.iq-controls,.pm-controls,.st-side){display:contents!important}
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.controls,.imz-controls,.imb-controls,.iq-controls,.pm-controls,.st-side) > :is(.control-card,.imz-panel,.imb-panel,.iq-panel,.pm-panel,.st-panel){
    min-width:0!important;height:auto!important;margin:0!important;grid-column:1;align-self:start;
  }
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.controls,.imz-controls,.imb-controls,.iq-controls,.pm-controls,.st-side) > :is(.control-card,.imz-panel,.imb-panel,.iq-panel,.pm-panel,.st-panel):nth-of-type(2){grid-column:1;grid-row:2}
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.controls,.imz-controls,.imb-controls,.iq-controls,.pm-controls,.st-side) > :is(.control-card,.imz-panel,.imb-panel,.iq-panel,.pm-panel,.st-panel):nth-of-type(3){grid-column:3;grid-row:1}
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.controls,.imz-controls,.imb-controls,.iq-controls,.pm-controls,.st-side) > :is(.control-card,.imz-panel,.imb-panel,.iq-panel,.pm-panel,.st-panel):nth-of-type(4){grid-column:3;grid-row:2}
  /* Three-panel editors: one left card and two on the right. */
  :is(.imz-workspace,.st-work) > :is(.imz-controls,.st-side) > :is(.imz-panel,.st-panel):nth-of-type(2){grid-column:3;grid-row:1}
  :is(.imz-workspace,.st-work) > :is(.imz-controls,.st-side) > :is(.imz-panel,.st-panel):nth-of-type(3){grid-column:3;grid-row:2}
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.preview-area,.imz-monitor,.imb-main,.iq-preview-col,.pm-preview-col,.st-preview-wrap){
    grid-column:2!important;grid-row:1/span 6!important;position:relative!important;
    top:auto!important;align-self:start!important;min-width:0!important;
    max-height:none!important;overflow:visible!important;height:auto!important;
    padding:8px!important;
  }
  :is(.imz-monitor-well,.imb-preview-stage,.iq-stage,.pm-preview-stage,.st-stage,.screen-well){min-height:260px!important;padding:12px 8px!important}
  :is(.imz-screen,.imb-screen,.iq-canvas-frame,.pm-canvas-frame,.st-frame,.canvas-frame){max-height:min(56dvh,590px)!important}
  /* Text Match Cut's editable fields are independent columns. */
  body[data-im-page="text-match-cut"] .studio{display:grid!important;grid-template-columns:minmax(210px,.86fr) minmax(320px,1.48fr) minmax(210px,.86fr)!important;gap:12px!important;align-items:start}
  body[data-im-page="text-match-cut"] .studio > .controls{display:contents!important}
  body[data-im-page="text-match-cut"] .studio > .controls > :is(.field,.panel-top,.tip){
    grid-column:1;min-width:0;border:1px solid #e1e5ef;border-radius:13px;padding:13px!important;
    margin:0!important;background:#fff;
  }
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(2){grid-row:1}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(3){grid-row:2}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(4){grid-row:3}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(5){grid-row:4}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(6){grid-row:5}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(7){grid-row:6}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(8){grid-column:3;grid-row:1}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(9){grid-column:3;grid-row:2}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(10){grid-column:3;grid-row:3}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(11){grid-column:3;grid-row:4}
  body[data-im-page="text-match-cut"] .studio > .controls > :nth-child(12){grid-column:3;grid-row:5}
  body[data-im-page="text-match-cut"] .studio > .preview-panel{grid-column:2!important;grid-row:1/span 12!important;position:relative!important;top:auto!important;max-height:none!important;overflow:visible!important;padding:11px!important}
  body[data-im-page="text-match-cut"] .preview-stage{height:auto!important;min-height:260px;max-height:55dvh}
  body[data-im-page="text-match-cut"] .preview-stage > *{max-height:53dvh}
}

/* V3: there is exactly one vertical scroller: the webpage itself. */
html{overflow-y:auto;overflow-x:hidden}
body{overflow-x:clip}
body[data-im-page="story-video-creator"] .app{min-height:0!important;height:auto!important;grid-template-rows:auto!important;align-items:start!important}
body[data-im-page="story-video-creator"] :is(.editor-panel,.settings-panel){overflow:visible!important;max-height:none!important;height:auto!important;min-height:0!important;align-self:start!important}
body[data-im-page="story-video-creator"] .stage-shell{overflow:visible!important;max-height:none!important;height:auto!important;align-self:start!important}
/* The root preview containers must expand naturally, never trap scroll. */
body[data-im-page] :is(.preview-area,.imz-monitor,.imb-main,.iq-preview-col,.pm-preview-col,.st-preview-wrap,.preview-panel,.editor-panel,.settings-panel){overflow:visible!important;max-height:none!important;height:auto!important;overscroll-behavior:auto!important;scrollbar-width:auto!important}
/* Long photo and thumbnail lists also flow on the page instead of trapping touch/wheel. */
body[data-im-page] :is(.imz-photo-list,.imb-photo-list,.pm-tile-list){overflow:visible!important;max-height:none!important;height:auto!important}
/* Desktop card flow uses the two sides, while center stays in natural document flow. */
@media(min-width:1161px){
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work){align-content:start!important;min-height:0!important;overflow:visible!important}
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.preview-area,.imz-monitor,.imb-main,.iq-preview-col,.pm-preview-col,.st-preview-wrap){position:relative!important;top:auto!important;overflow:visible!important;max-height:none!important}
  body[data-im-page="text-match-cut"] .studio > .preview-panel{position:relative!important;top:auto!important;overflow:visible!important;max-height:none!important}
  body[data-im-page="story-video-creator"] .app{grid-template-columns:minmax(250px,356px) minmax(0,1fr) minmax(230px,310px)!important}
}
/* Tablet / phones: preview appears first; all settings remain visible, no hidden tabs or nested scroll. */
@media(max-width:1160px){
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work){display:flex!important;flex-direction:column!important;gap:0!important;overflow:visible!important}
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.controls,.imz-controls,.imb-controls,.iq-controls,.pm-controls,.st-side){display:contents!important}
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.preview-area,.imz-monitor,.imb-main,.iq-preview-col,.pm-preview-col,.st-preview-wrap){order:-2!important;width:100%!important;position:relative!important;max-height:none!important;overflow:visible!important;min-width:0}
  :is(.workspace,.imz-workspace,.imb-workspace,.iq-workspace,.pm-workspace,.st-work) > :is(.controls,.imz-controls,.imb-controls,.iq-controls,.pm-controls,.st-side) > :is(.control-card,.imz-panel,.imb-panel,.iq-panel,.pm-panel,.st-panel){order:1!important;width:100%!important;max-height:none!important;height:auto!important;overflow:visible!important;align-self:stretch!important;margin:7px 0!important}
  body[data-im-page="text-match-cut"] .studio{display:flex!important;flex-direction:column!important;gap:10px!important}
  body[data-im-page="text-match-cut"] .studio > .controls{display:contents!important}
  body[data-im-page="text-match-cut"] .studio > .preview-panel{order:-2!important;width:100%!important;position:relative!important;max-height:none!important;overflow:visible!important}
  body[data-im-page="text-match-cut"] .studio > .controls > *{order:1;min-width:0}
  body[data-im-page="story-video-creator"] .app{display:flex!important;flex-direction:column!important}
  body[data-im-page="story-video-creator"] .stage-shell{order:1!important;min-height:0!important}
  body[data-im-page="story-video-creator"] .editor-panel{order:2!important;width:100%;padding:16px!important}
  body[data-im-page="story-video-creator"] .settings-panel{order:3!important;width:100%;padding:16px!important;display:block!important}
  body[data-im-page="story-video-creator"] .editor-panel .section{margin-bottom:18px!important}
}
@media(max-width:700px){
  /* These bounds only size the media; they do not create scrollers. */
  :is(.imz-screen,.imb-screen,.iq-canvas-frame,.pm-canvas-frame,.st-frame,.canvas-frame){max-height:43dvh!important;max-width:100%!important}
  :is(.imz-monitor-well,.imb-preview-stage,.iq-stage,.pm-preview-stage,.st-stage,.screen-well){min-height:0!important;max-height:none!important;padding:8px!important;overflow:visible!important}
  body[data-im-page="text-match-cut"] .preview-stage{height:clamp(250px,50dvh,440px)!important;max-height:none!important;min-height:250px!important}
  body[data-im-page="story-video-creator"] .stage-shell{padding:10px 10px 15px!important}
  body[data-im-page="story-video-creator"] .stage-center{min-height:0!important}
  body[data-im-page="story-video-creator"] .video-canvas{max-height:50dvh!important}
}
/* Match Cut: an entirely light editor, not dark cards inside a light page. */
body[data-im-page="text-match-cut"]{color-scheme:light!important;--bg:#f8f9ff!important;--panel:#fff!important;--line:#dfe4f0!important;--text:#28314d!important;--muted:#73809a!important;--accent:#7254d6!important;--light:#715bcb!important;color:#27314d!important;background:#f8f9ff!important}
body[data-im-page="text-match-cut"] :is(.studio,.studio>.controls,.studio>.preview-panel,.studio>.controls>.field,.studio>.controls>.panel-top,.studio>.controls>.tip){background:#fff!important;border-color:#e0e4f0!important;color:#293451!important;box-shadow:0 6px 22px #2f3c7210!important}
body[data-im-page="text-match-cut"] .studio>.controls>.tip{background:#f4f0ff!important;border-color:#e0d9fc!important;color:#685b96!important}
body[data-im-page="text-match-cut"] .studio :is(h2,h3,label,strong,.field small,.overline,.label-hint,.optional,.value,.range-ends,.video-stats,.clock,.clock b,.tip strong,.format-label){color:#293451!important}
body[data-im-page="text-match-cut"] .studio :is(.overline,.value,.format-label,.label-hint){color:#7753c8!important}
body[data-im-page="text-match-cut"] .studio>.controls>.field :is(input:not([type=range]):not([type=checkbox]):not([type=color]):not([type=file]),select,textarea){background:#f8f9fe!important;color:#222d49!important;border:1px solid #dce2ee!important}
body[data-im-page="text-match-cut"] .studio .style-tile{background:#fafbff!important;border-color:#dce2f1!important;color:#404964!important}
body[data-im-page="text-match-cut"] .studio .style-tile.selected{background:#efebff!important;border-color:#a28ce9!important;color:#5845b5!important}
body[data-im-page="text-match-cut"] .studio :is(.segments button,.upload-btn,.transport-btn,.snapshot-btn,.reset-btn,.shuffle-btn){background:#f4f2ff!important;border-color:#dad5f0!important;color:#5144a4!important}
body[data-im-page="text-match-cut"] .studio .segments button.active{background:#e9e4ff!important;border-color:#927be0!important;color:#563fba!important}
body[data-im-page="text-match-cut"] .studio .preview-stage{background:radial-gradient(ellipse at 50% 50%,#e5e6f3,#f4f6fe)!important;border-color:#dfe3ee!important}
body[data-im-page="text-match-cut"] .studio :is(.export-area,.switches){background:#f8f9ff!important;border-color:#e2e7f0!important;color:#293451!important}
body[data-im-page="text-match-cut"] .studio :is(.export-head select,.play-main){background:#eeeaff!important;color:#5945ad!important;border-color:#d8d1f6!important}
body[data-im-page="text-match-cut"] .studio .export-btn{background:#7456db!important;color:#fff!important;border:0!important}
body[data-im-page="text-match-cut"] .studio .export-btn span{color:#fff!important}
body[data-im-page="text-match-cut"] .studio :is(.export-head p,.export-note,.upload-row>span,.field small,.switch-row small){color:#75809b!important}
body[data-im-page="text-match-cut"] .studio .tip{font-size:11px!important}
body[data-im-page="text-match-cut"] .guide{background:#fff!important;color:#2c3552!important}
body[data-im-page="text-match-cut"] .guide :is(h2,h3,.step h3,.faq summary){color:#283451!important}
body[data-im-page="text-match-cut"] .guide :is(p,li,.faq details p){color:#67738d!important}
body[data-im-page="text-match-cut"] .guide :is(.step,.faq details){background:#f9faff!important;border-color:#e3e7f1!important}
body[data-im-page="text-match-cut"] .studio .value{background:#eeeaff!important;color:#624cb9!important;border:1px solid #ddd5f7!important}
body[data-im-page="text-match-cut"] .studio :is(.field input[type=range],.scrubber){background:#e5e1f4!important;accent-color:#765bd9!important}
body[data-im-page="text-match-cut"] .studio .field input[type=range]::-webkit-slider-thumb{border-color:#fff!important;background:#7860da!important}