.preview-stage{display:flex;flex:0 0 auto;align-self:start;flex-direction:column;align-items:center;justify-content:flex-start;width:fit-content;min-width:0}
.video-frame{width:auto;max-width:100%;height:auto;margin:0 auto;border:0;background:#050608;box-shadow:0 22px 58px #0008}
.editor-header{justify-content:flex-start;padding-bottom:4px;border:0}
.editor-layout{display:flex;align-items:flex-start;justify-content:center;max-width:1400px;margin-top:32px;margin-bottom:12px;gap:24px}
.control-panel{display:flex;flex:0 0 432px;align-self:start;flex-direction:column;width:432px;max-width:432px;min-height:0;background:transparent;border:0}
.control-panel .preset-carousel{display:block;flex:1;min-height:0;padding:0 3px 0 0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3a4351 transparent}
.preset-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));min-width:100%;gap:6px;contain:layout paint}
.preset-card{min-width:0;height:82px;padding:5px;border:1px solid #303744;border-radius:8px;background:#171a22;color:var(--paper);text-align:left;cursor:pointer;contain:layout paint}
.preset-card.active{border-width:2px;border-color:#f5f2eb!important;background:#1e222d;box-shadow:none}
.preset-thumb{position:relative;height:47px;margin-bottom:3px;overflow:hidden;border-radius:6px;background:#0e1015}
.preset-render{display:block;width:100%;height:100%;background:#0e1015}
.preset-carousel{contain:layout paint;isolation:isolate}
.video-frame{transform:translateZ(0)}
.preset-scrollbar{display:none}
@media(min-width:1201px){
  .control-panel{position:relative}
  .control-panel .preset-carousel{padding-right:14px;scrollbar-width:none}
  .control-panel .preset-track{grid-template-columns:repeat(4,100px)}
  .control-panel .preset-carousel::-webkit-scrollbar{display:none}
  .preset-scrollbar:not([hidden]){display:block;position:absolute;top:0;right:1px;bottom:0;width:10px;touch-action:none;user-select:none;border-radius:8px}
  .preset-scrollbar-thumb{position:absolute;top:0;left:2px;width:6px;min-height:28px;background:#3a4351;border-radius:8px}
}
.preset-card b{display:block;overflow:hidden;font-size:.64rem;line-height:1.1;white-space:nowrap;text-overflow:ellipsis}
.preset-card span{display:none}
.landscape-video .preview-stage{align-items:center}

@media(min-width:851px){#editorView .editor-layout{display:flex!important;grid-template-columns:none!important;align-items:flex-start!important;justify-content:center!important;gap:24px!important}#editorView .preview-stage{flex:0 0 auto!important;width:fit-content!important}#editorView .control-panel{flex:0 0 432px!important;width:432px!important;max-width:432px!important;margin:0!important}}
@media(min-width:1201px){#editorView{min-height:100dvh;height:auto;overflow:visible}#editorView .editor-layout{min-height:0;flex:0 0 auto}#editorView .editor-legal{flex:0 0 auto}}

.video-actions{display:flex;justify-content:center;margin-top:16px;gap:14px}
.video-actions button{display:grid;width:48px;height:48px;padding:0;border:1.5px solid #2c3441;border-radius:50%;background:transparent;color:#dde1e8;place-items:center;cursor:pointer}
.video-actions button:disabled{opacity:.45;cursor:default;border-color:#2c3441;color:#dde1e8}
.video-actions button:nth-child(3){border-color:#ff4d32;background:#ff4d32;color:#16100f}
.video-actions button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:850px){
  .editor-view{min-height:100vh;height:auto;padding-top:24px;overflow-x:hidden}
  .editor-layout{display:flex;flex-direction:column;align-items:stretch;width:100%;min-width:0;margin:22px auto 0;gap:18px}
  .preview-stage{width:100%;min-width:0}
  .video-actions{order:1;width:100%;margin:14px 0 0;gap:clamp(7px,3vw,13px)}
  .video-actions button{width:clamp(42px,12vw,46px);height:clamp(42px,12vw,46px)}
  .video-actions button svg{width:21px;height:21px}
  .video-frame{width:min(100%,360px);max-width:100%;margin:0 auto}
  .landscape-video .video-frame{width:min(100%,460px)}
  .control-panel{order:2;flex:0 1 auto;width:100%;min-width:0;max-width:none;height:auto;overflow:visible}
  .control-panel .preset-carousel{display:block;width:100%;min-width:0;max-height:none;padding:2px 1px 10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:auto;touch-action:pan-x pan-y;user-select:none}
  .control-panel .preset-track{display:flex;width:max-content;min-width:100%;gap:10px}
  .control-panel .preset-carousel{cursor:grab}
  .control-panel .preset-carousel.is-dragging{cursor:grabbing;user-select:none}
  .control-panel .preset-carousel::-webkit-scrollbar{display:none}
  .control-panel .preset-card{flex:0 0 118px;width:118px;min-width:118px;height:82px;scroll-snap-align:start;user-select:none;-webkit-user-drag:none}
  .control-panel .preset-thumb{height:47px}
}

@media(min-width:851px) and (max-width:1200px){
  #editorView{padding-inline:clamp(18px,4vw,42px)!important}
  #editorView .editor-layout{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;min-width:0!important;gap:18px!important;margin:26px auto 0!important}
  #editorView .preview-stage{display:flex!important;flex:0 1 auto!important;flex-direction:column!important;align-items:center!important;width:100%!important;min-width:0!important}
  #editorView .video-actions{order:1;margin:16px 0 0!important}
  #editorView .video-frame{max-width:100%!important}
  #editorView .control-panel{flex:0 1 auto!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important}
  #editorView .control-panel .preset-carousel{display:block;width:100%;min-width:0;max-height:none;padding:2px 1px 10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;scroll-behavior:auto;touch-action:pan-x pan-y;user-select:none}
  #editorView .control-panel .preset-track{display:flex;width:max-content;min-width:100%;gap:10px}
  #editorView .control-panel .preset-carousel{cursor:grab}
  #editorView .control-panel .preset-carousel.is-dragging{cursor:grabbing;user-select:none}
  #editorView .control-panel .preset-carousel::-webkit-scrollbar{display:none}
  #editorView .control-panel .preset-card{flex:0 0 132px;width:132px;min-width:132px;height:90px;scroll-snap-align:start;user-select:none;-webkit-user-drag:none}
  #editorView .control-panel .preset-thumb{height:53px}
}

/* A stable small viewport avoids capturing the transient visual viewport during
   pull-to-refresh or browser-bar animation. JS measures the resulting video slot. */
@media(max-width:1200px){
  body.editor-open{overflow:hidden;overscroll-behavior-y:none}
  #editorView{height:100vh;height:100svh;min-height:0;max-height:100vh;max-height:100svh;overflow:hidden;padding: max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important}
  #editorView .editor-header{flex:0 0 auto;padding:0;min-width:0}
  #editorView .editor-layout{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr) auto;flex:1 1 0;min-height:0;width:100%!important;max-width:none;margin:10px 0 0!important;gap:12px!important;align-items:stretch!important}
  #editorView .preview-stage{display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;row-gap:12px;align-items:stretch!important;align-self:stretch;justify-items:center;min-height:0;min-width:0;width:100%!important}
  #editorView .video-frame{align-self:center;justify-self:center;max-width:100%!important;margin:0;box-shadow:none}
  #editorView .video-actions{align-self:end;width:100%;margin:0!important;gap:clamp(8px,3vw,14px)}
  #editorView .video-actions button{width:44px;height:44px;flex:0 0 44px}
  #editorView .control-panel{align-self:stretch;flex:0 0 auto!important;width:100%!important;max-width:none!important;min-height:0;height:auto!important;margin:0!important}
  #editorView .control-panel .preset-carousel{flex:none;width:100%;padding:2px 1px;overflow-x:auto;overflow-y:hidden;touch-action:pan-x pinch-zoom;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #editorView .control-panel .preset-track{display:flex;width:max-content;min-width:100%;gap:10px}
  #editorView .control-panel .preset-card{flex:0 0 118px;width:118px;min-width:118px;height:82px}
  #editorView .control-panel .preset-thumb{height:47px}
  #editorView .editor-legal{flex:0 0 auto;width:100%;margin:8px 0 0;padding:0;gap:16px;font-size:12px;line-height:1.4}
}
@media(max-width:1200px) and (max-height:500px){
  #editorView .editor-header .brand{font-size:1.2rem}
  #editorView .editor-layout{margin-top:6px!important;gap:8px!important}
  #editorView .preview-stage{row-gap:8px}
  #editorView .control-panel .preset-card{height:66px}
  #editorView .control-panel .preset-thumb{height:34px}
  #editorView .editor-legal{margin-top:6px}
}

/* A landscape phone may scroll vertically instead of squeezing a portrait
   film into the small space left by the controls. */
@media(max-width:1200px) and (orientation:landscape) and (max-height:600px){
  body.editor-open{overflow:auto;overscroll-behavior-y:auto}
  #editorView{height:auto;min-height:100dvh;max-height:none;overflow:visible}
  #editorView .editor-layout{flex:none;grid-template-rows:auto auto}
  #editorView .preview-stage{grid-template-rows:auto auto}
}

/* A resized desktop window needs a natural vertical flow, not the compact
   phone layout that reserves a large flexible row above the controls. */
@media(max-width:1200px) and (hover:hover) and (pointer:fine){
  body.editor-open{overflow:auto;overscroll-behavior-y:auto}
  #editorView{height:auto;min-height:100dvh;max-height:none;overflow:visible}
  #editorView .editor-header{margin-top:auto}
  #editorView .editor-layout{flex:none;grid-template-rows:auto auto;align-items:start;margin:14px 0 auto!important}
  #editorView .preview-stage{grid-template-rows:auto auto;row-gap:14px}
  #editorView .video-actions{align-self:start}
  #editorView .editor-legal{margin:0!important}
}