/* Movexa — phone layout ("native app" feel).
   Loaded only at <=760px (see the media attribute on its <link>), so the desktop editor is untouched.
   Every selector is prefixed with `html body` so it wins over the desktop rules regardless of load order. */

html body{
  --m-top:env(safe-area-inset-top,0px);--m-bottom:env(safe-area-inset-bottom,0px);
  --m-left:env(safe-area-inset-left,0px);--m-right:env(safe-area-inset-right,0px);
  --m-nav-h:64px;--m-bar:rgba(21,21,19,.94);--m-line:#2a2a26;
  overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;-webkit-text-size-adjust:100%;touch-action:manipulation;
  position:fixed;inset:0;width:100%;
}
html{overflow:hidden;overscroll-behavior:none;height:100%}
html body button,html body label,html body .clip,html body .asset,html body .track-label{-webkit-user-select:none;user-select:none}
html body input,html body select,html body textarea,html body [contenteditable]{-webkit-user-select:text;user-select:text}
/* iOS zooms the page when a field under 16px gets focus */
html body input,html body select,html body textarea{font-size:16px!important}

/* ---------- shell: one screen, no page scroll ---------- */
html body .app-shell{height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  padding:var(--m-top) var(--m-right) 0 var(--m-left)}
html body .workspace{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
html body .editor-column{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;overflow:hidden}

/* ---------- top bar ---------- */
html body .topbar{height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;background:#11110f;border-bottom:1px solid var(--m-line)}
html body .brand{display:none}
html body .project-title{flex:1;min-width:0;display:flex;align-items:center;gap:6px;justify-self:auto}
html body .project-title .icon-button{width:40px;height:40px;border-radius:12px;font-size:18px;flex:none}
html body .project-title>div{min-width:0}
html body .project-name-row{justify-content:flex-start}
html body .project-title strong{max-width:46vw;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
html body #saveStatus,html body .project-title small{font-size:10px;display:block;line-height:1.2;color:#8d8d84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
html body .top-actions{display:flex;align-items:center;gap:6px;flex:none}
html body .top-actions .ghost-button{display:none}
html body .top-actions #undoBtn,html body .top-actions #redoBtn{display:inline-grid!important;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;font-size:19px;line-height:1}
html body .top-actions #undoBtn span,html body .top-actions #redoBtn span{display:none}
html body .export-button{height:40px;padding:0 16px;border-radius:12px;font-size:14px;font-weight:700;white-space:nowrap}

/* ---------- stage: preview fills the space ---------- */
html body .stage-area{flex:none;height:var(--m-stage-h,46dvh);display:flex;flex-direction:column;overflow:hidden}
html body .viewer-section{flex:1;min-height:0;padding:8px 10px 0;display:flex;flex-direction:column;overflow:hidden}
html body .viewer-toolbar{display:none}
html body .preview-wrap{margin:auto;flex:none;border-radius:10px}
html body .preview-player-bottom,html body .preview-badge,html body .canvas-safe{display:none}
html body .preview-play-overlay{width:56px;height:56px}

/* transport: time · prev/play/next · fullscreen */
html body .transport{height:60px;flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 4px}
html body .time-readout{font-size:12px;justify-self:start;white-space:nowrap}
html body .time-readout b{font-size:13px}
html body .transport-buttons{display:flex;align-items:center;gap:6px;justify-self:center}
html body .transport-buttons #jumpBackBtn,html body .transport-buttons #jumpForwardBtn{display:none}
html body .transport-buttons button{width:44px;height:44px;border-radius:50%}
html body .play-button{width:52px!important;height:52px!important}
html body .transport-right{display:flex!important;justify-self:end;gap:0}
html body .transport-right input{display:none}
html body .transport-right #muteBtn{width:44px;height:44px;border-radius:50%}

/* ---------- timeline ---------- */
html body .timeline-section{height:auto;flex:1;min-height:170px;border-top:1px solid var(--m-line);display:flex;flex-direction:column;position:relative}
html body .timeline-toolbar{display:none}
html body .timeline-footer{display:none}
html body .timeline-scroll{flex:1;min-height:0;touch-action:pan-x pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
html body .track-labels{--label-w:52px;width:52px}
html body .track-labels{counter-reset:mtrack}
html body .track-label{counter-increment:mtrack;min-height:56px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
html body .track-label>div strong,html body .track-label>div span{display:none}
html body .track-label>div:before{content:counter(mtrack);font:700 12px/1 inherit;color:#9a9a90}
html body .track-label button{width:34px;height:30px;font-size:13px;padding:0}
html body .timeline-content{min-width:calc(100% - 52px)}
html body .track{min-height:56px}
html body .clip{height:46px;top:5px;border-radius:7px;touch-action:none}
html body .clip.selected{box-shadow:0 0 0 2px var(--acid,#d7ff41),0 3px 10px #0006}
/* big, thumb-sized trim handles */
html body .trim-handle{width:22px;touch-action:none}
html body .trim-handle:after{width:4px;border-radius:3px;left:9px;background:#fffd}
html body .playhead{touch-action:none}
html body .playhead:before{content:"";position:absolute;left:-18px;right:-18px;top:-4px;height:36px}   /* thumb grab zone: the handle at the top only, so tapping a clip beside the playhead still selects it */
html body .automation-point{width:20px;height:20px;margin:-10px 0 0 -10px}

/* ---------- bottom tool bar ---------- */
#mBar{flex:none;position:relative;background:var(--m-bar,#151513);border-top:1px solid #2a2a26;
  padding:4px env(safe-area-inset-right,0px) calc(4px + env(safe-area-inset-bottom,0px)) env(safe-area-inset-left,0px);z-index:5}
#mNav{display:flex;align-items:stretch;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;touch-action:pan-x;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;padding:0 4px}
#mNav::-webkit-scrollbar{display:none}
/* soft fade on the side(s) where more tools are hidden — tells you the bar scrolls */
#mNav.can-right{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
#mNav.can-left{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px);mask-image:linear-gradient(90deg,transparent,#000 30px)}
#mNav.can-left.can-right{-webkit-mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
#mNav button{flex:0 0 calc((100% - 8px) / 5.4);min-width:66px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  border:0;background:none;color:#cfcfc6;font-family:inherit;font-size:11px;font-weight:600;line-height:1.1;letter-spacing:.01em;border-radius:14px;padding:4px 2px 5px;cursor:pointer;touch-action:manipulation;
  transition:color .15s,background-color .15s,transform .12s}
#mNav button svg{width:24px;height:24px;margin:6px 0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
#mNav button span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#mNav button:active{transform:scale(.94);background:#23231f}
#mNav button.m-active{color:var(--acid,#d7ff41)}
#mNav button.m-active:after{content:"";position:absolute}
/* Add: same footprint as the others, with the accent in the icon tile */
#mNav button.m-primary{color:#e9e9e0}
#mNav button.m-primary svg{box-sizing:content-box;width:20px;height:20px;padding:8px;margin:0;border-radius:13px;background:var(--acid,#d7ff41);stroke:#11110f;stroke-width:2.2}
#mNav button.m-danger{color:#ff8f86}
#mNav [data-ctx="sel"]{display:none}
html body.m-has-sel #mNav [data-ctx="sel"]{display:flex}
html body.m-has-sel #mNav [data-ctx="none"]{display:none}
html body.m-has-sel #mNav [data-ctx="always"]{display:flex}
#mNav.m-swap button{animation:m-pop .22s ease-out both}
#mNav.m-swap button:nth-child(2){animation-delay:.025s}#mNav.m-swap button:nth-child(3){animation-delay:.05s}#mNav.m-swap button:nth-child(4){animation-delay:.075s}#mNav.m-swap button:nth-child(5){animation-delay:.1s}
@keyframes m-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#mNav.m-swap button{animation:none}#mNav button{transition:none}}

#mNav button.m-primary svg{margin:-1.5px 0}
#mNav .m-skip{display:none!important}
#mNav button.m-on{color:var(--acid,#d7ff41)}
#mNav button.m-on svg{filter:drop-shadow(0 0 6px rgba(215,255,65,.45))}

/* ---------- bottom sheets ---------- */
html body::after{content:"";position:fixed;inset:0;background:#000a;opacity:0;pointer-events:none;transition:opacity .22s;z-index:90}
html body.m-scrim::after{opacity:1;pointer-events:auto}

/* media library */
html body .media-panel{position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;height:72dvh;transform:translateY(105%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  border:0;border-top:1px solid #3a3a34;border-radius:20px 20px 0 0;box-shadow:0 -20px 60px #000c;z-index:95;padding:14px 14px calc(14px + var(--m-bottom));overflow:hidden}
html body .media-panel.open{transform:none}
html body .media-panel:before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:#4a4a43;margin:0 auto 10px;flex:none}
html body .media-panel .asset-list{overflow:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
html body .asset button,html body .media-tabs button,html body .import-button,html body .clear-library{min-height:40px}
html body .panel-tip{display:none}

/* clip adjustments (volume / fades / timing) */
html body .inspector,html body .inspector.closed{display:none!important}
html body.m-inspector .inspector{display:block!important;position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;max-height:70dvh;overflow:auto;
  border:0;border-top:1px solid #3a3a34;border-radius:20px 20px 0 0;box-shadow:0 -20px 60px #000c;z-index:95;padding:16px 16px calc(18px + var(--m-bottom));animation:m-up .26s cubic-bezier(.2,.8,.2,1)}
html body.m-inspector .inspector:before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:#4a4a43;margin:-6px auto 10px}
html body .inspector .field-row{grid-template-columns:1fr 90px 28px;font-size:13px;margin:10px 0}
html body .inspector .field-row input{width:90px;padding:9px}
html body .inspector-head button,html body .modal-close{width:40px;height:40px;font-size:22px}

/* every dialog becomes a bottom sheet */
html body .modal-backdrop{align-items:end;justify-items:stretch;padding:0;background:#000b;backdrop-filter:none;z-index:100}
html body .export-modal{width:100%;max-width:none;max-height:90dvh;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:20px 20px 0 0;border-width:1px 0 0;
  padding:20px 16px calc(20px + var(--m-bottom));animation:m-up .26s cubic-bezier(.2,.8,.2,1)}
html body .export-modal:before{content:"";display:block;width:40px;height:5px;border-radius:3px;background:#4a4a43;margin:-8px auto 12px}
html body .export-modal h2{font-size:22px}
html body .export-settings{grid-template-columns:1fr}
html body .export-settings label select,html body .export-settings select{min-height:44px}
html body .render-button,html body .export-actions .render-button{min-height:50px;font-size:15px;border-radius:14px}
html body .export-actions{flex-direction:column;align-items:stretch;gap:12px}
html body .export-types{grid-template-columns:1fr}
html body .export-note{font-size:11px}
html body .pro-modal{max-height:90dvh}
html body .pro-tabs{gap:6px;padding-bottom:2px;-webkit-overflow-scrolling:touch}
html body .pro-modal button,html body .pro-tabs button{min-height:40px;font-size:13px;border-radius:10px}
html body .pro-grid,html body .pro-pane[data-pro-pane="clip"] .pro-grid{grid-template-columns:1fr 1fr;gap:10px}
html body .pro-modal label{font-size:12px}
html body .pro-modal select,html body .pro-modal input:not([type=checkbox]):not([type=range]){min-height:42px}
html body .pro-modal textarea{min-height:90px}

/* crop & trim: full screen, like a native editor */
html body #cropModal{align-items:stretch}
html body #cropModal .export-modal{height:100dvh;max-height:none;border-radius:0;border:0;padding:calc(14px + var(--m-top)) 14px calc(16px + var(--m-bottom));display:flex;flex-direction:column;animation:m-up .26s cubic-bezier(.2,.8,.2,1)}
html body #cropModal .export-modal:before{display:none}
html body #cropModal .crop-preview{max-height:36dvh}
html body #cropModal .crop-strip{height:72px;margin:26px 12px 10px}
html body #cropModal .crop-handle{width:28px;margin-left:-14px}
html body #cropModal .fh{width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:7px}
html body #cropModal .crop-tabs button{min-height:44px;flex:1}
html body #cropModal .crop-ratios button{min-height:40px;padding:0 14px}
html body #cropModal .crop-help{font-size:12px}
html body #cropModal .render-button{margin-top:auto}
html body #cropModal .crop-fields{grid-template-columns:1fr 1fr}

@keyframes m-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){html body .export-modal,html body.m-inspector .inspector{animation:none}html body .media-panel{transition:none}}

/* landscape phones: tools move to a rail on the right; preview and timeline share the rest */
html body .mobile-only{display:inline-grid;place-items:center}
@media (orientation:landscape) and (max-height:500px){
  html body .app-shell{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);padding-right:0}
  html body .topbar{grid-column:1/-1;height:44px;padding-left:max(10px,var(--m-left));padding-right:max(10px,var(--m-right))}
  html body .project-title .icon-button,html body .top-actions #undoBtn,html body .top-actions #redoBtn,html body .export-button{height:36px}
  html body .project-title .icon-button,html body .top-actions #undoBtn,html body .top-actions #redoBtn{width:36px}
  html body .workspace{grid-column:1;grid-row:2;padding-left:var(--m-left)}
  html body .stage-area{height:var(--m-stage-h,55%)}
  html body .viewer-section{padding-top:4px}
  html body .transport{height:46px}
  html body .transport-buttons button{width:38px;height:38px}
  html body .play-button{width:40px!important;height:40px!important}
  html body .timeline-section{min-height:120px}
  #mBar{grid-column:2;grid-row:2;width:calc(76px + var(--m-right));padding:4px var(--m-right) 4px 2px;border-top:0;border-left:1px solid #2a2a26;overflow:hidden;display:flex}
  #mNav{flex-direction:column;overflow-x:hidden;overflow-y:auto;touch-action:pan-y;scroll-snap-type:y proximity;width:100%;padding:2px 0}
  #mNav,#mNav.can-left,#mNav.can-right,#mNav.can-left.can-right{-webkit-mask-image:none;mask-image:none}
  #mNav button{flex:0 0 auto;min-width:0;width:100%;height:56px;flex-direction:column;gap:1px;padding:3px 0}
  #mNav button svg{margin:4px 0;width:22px;height:22px}
  #mNav button.m-primary svg{width:18px;height:18px;padding:7px;margin:0}
  html body .media-panel{height:88dvh}
  html body .export-modal{max-height:94dvh}
}

/* toasts sit above the tool bar */
html body .toast{bottom:calc(var(--m-nav-h) + 16px + var(--m-bottom));left:12px;right:12px;max-width:none;transform:none;text-align:center;z-index:120}

/* the whole clip is the tap/drag target; volume points remain draggable, and "add point" lives in the Volume sheet */
html body .automation-lane{pointer-events:none}
html body .automation-point{pointer-events:auto}
html body .automation-section p{display:none}
html body .asset{align-items:center}
html body .asset button{min-width:44px;min-height:44px;font-size:22px;display:grid;place-items:center;padding:0}
html body .asset-info strong{font-size:14px}
html body .timeline-scroll{scrollbar-width:none}
html body .timeline-scroll::-webkit-scrollbar{display:none}
@media (orientation:landscape) and (max-height:500px){html body .toast{bottom:12px;left:16px;right:96px}}

/* ---------- loading screen (phones only; the element is `hidden` on desktop) ---------- */
html body #mSplash,html body #mSplash[hidden]{display:flex!important}
html body #mSplash{position:fixed;inset:0;z-index:300;background:#11110f;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  transition:opacity .28s ease,visibility .28s}
html body #mSplash.m-splash-out{opacity:0;visibility:hidden;pointer-events:none}
#mSplash .m-splash-mark{width:84px;height:84px;border-radius:22px;background:#d7ff41;display:flex;align-items:center;justify-content:center;gap:6px}
#mSplash .m-splash-mark i{display:block;width:6px;border-radius:2px;background:#11110f}
#mSplash .m-splash-mark i:nth-child(1){height:19px}#mSplash .m-splash-mark i:nth-child(2){height:38px}#mSplash .m-splash-mark i:nth-child(3){height:27px}
#mSplash strong{color:#e9e9e0;font:600 24px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:.01em}
#mSplash .m-splash-bar{width:120px;height:3px;border-radius:2px;background:#262622;overflow:hidden;margin-top:6px}
#mSplash .m-splash-bar i{display:block;width:40%;height:100%;border-radius:2px;background:#d7ff41;animation:m-load 1.1s ease-in-out infinite}
@keyframes m-load{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media (prefers-reduced-motion:reduce){#mSplash .m-splash-bar i{animation:none;width:100%;opacity:.5}html body #mSplash{transition:none}}

/* ---------- easier phone UX ---------- */
/* save status wording is misleading on phones: drop it so the project name gets the room */
html body #saveStatus{display:none}
html body .project-title small{display:none}
/* clearer trim handles on the selected clip */
html body .clip.selected .trim-handle{background:rgba(215,255,65,.3)}
/* hide empty extra tracks */
html body .track.m-hide,html body .track-label.m-hide{display:none}

/* empty state */
#mEmpty{display:none}
html body.m-empty #mEmpty{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 24px;text-align:center;background:rgba(14,14,12,.82)}
html body.m-empty #previewPlayOverlay{display:none}
#mEmpty strong{font-size:18px;color:#f3f3ea;font-weight:700}
#mEmpty span{font-size:13px;line-height:1.35;color:#a9a9a0;max-width:240px}
#mEmpty .m-empty-btn{border:0;background:none;padding:0;margin:0 0 6px;cursor:pointer;touch-action:manipulation}
#mEmpty .m-empty-btn svg{box-sizing:content-box;width:26px;height:26px;padding:16px;border-radius:50%;background:var(--acid,#d7ff41);stroke:#11110f;fill:none;stroke-width:2.4;stroke-linecap:round;display:block;box-shadow:0 0 0 8px rgba(215,255,65,.14)}


@media (orientation:landscape) and (max-height:500px){
  html body.m-empty #mEmpty{flex-direction:row;gap:12px;padding:0 14px;text-align:left}
  #mEmpty .m-empty-btn{margin:0;flex:none}
  #mEmpty .m-empty-btn svg{width:18px;height:18px;padding:10px;box-shadow:0 0 0 5px rgba(215,255,65,.14)}
  #mEmpty strong{font-size:15px}
  #mEmpty span{display:none}
}

/* ---------- tool panels (Speed, Filter, Mask, ...) ---------- */
#mPanel{position:fixed;left:0;right:0;bottom:0;z-index:96;background:#151513;border-top:1px solid #3a3a34;border-radius:18px 18px 0 0;box-shadow:0 -14px 40px #000a;
  padding:6px 14px calc(12px + env(safe-area-inset-bottom,0px));max-height:46dvh;display:flex;flex-direction:column;animation:m-up .22s cubic-bezier(.2,.8,.2,1)}
#mPanel header{display:flex;align-items:center;justify-content:space-between;padding:6px 0 10px;flex:none}
#mPanel header strong{font-size:14px;color:#f1f1e8;letter-spacing:.01em}
#mPanel .m-done{width:44px;height:34px;border-radius:12px;border:0;background:var(--acid,#d7ff41);display:grid;place-items:center;cursor:pointer;touch-action:manipulation;padding:0}
#mPanel .m-done svg{width:20px;height:20px;stroke:#11110f;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#mPanel .m-body{overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;-webkit-overflow-scrolling:touch;padding-bottom:4px}
#mPanel .m-body label{display:grid;gap:6px;font-size:12px;color:#b9b9b0;margin:0}
#mPanel .m-body label:has(input[type=range]),#mPanel .m-body label:has(input[type=checkbox]){grid-column:1/-1}
#mPanel .m-body label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px;min-height:40px;font-size:13px;color:#e4e4db}
#mPanel .m-body select{min-height:44px;width:100%}
#mPanel .m-body input[type=range]{width:100%}
#mPanel .m-chips{grid-column:1/-1;display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;touch-action:pan-x}
#mPanel .m-chips::-webkit-scrollbar{display:none}
#mPanel .m-chips button{flex:0 0 62px;display:flex;flex-direction:column;align-items:center;gap:5px;border:0;background:none;color:#cfcfc6;font-family:inherit;font-size:11px;font-weight:600;padding:0;cursor:pointer;touch-action:manipulation}
#mPanel .m-chips i{display:block;width:56px;height:56px;border-radius:12px;background:linear-gradient(135deg,#e9b872,#6aa0c9 55%,#4c4f8a);border:2px solid transparent}
#mPanel .m-chips button.on{color:var(--acid,#d7ff41)}
#mPanel .m-chips button.on i{border-color:var(--acid,#d7ff41)}
#mPanel .m-note{margin:4px 0 0;font-size:11.5px;color:#8d8d84;flex:none}
@media (orientation:landscape) and (max-height:500px){#mPanel{left:auto;right:calc(78px + env(safe-area-inset-right,0px));top:46px;bottom:0;width:min(36vw,300px);max-height:none;border-radius:16px 0 0 0;border-left:1px solid #3a3a34;padding-bottom:10px}}

#mPanel .m-body select{background:#23231f;color:#f1f1e8;border:1px solid #3a3a34;border-radius:12px;padding:0 12px;font:inherit;font-size:14px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,#9a9a90 50%),linear-gradient(135deg,#9a9a90 50%,transparent 50%);background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
#mPanel .m-body input[type=range]{accent-color:var(--acid,#d7ff41);height:30px;margin:0}
#mPanel .m-body input[type=checkbox]{accent-color:var(--acid,#d7ff41);width:22px;height:22px;margin:0}
#mPanel header .m-all{margin:0 10px 0 auto;border:1px solid #3a3a34;background:#23231f;color:#e4e4db;border-radius:12px;padding:0 12px;height:34px;font:600 12px inherit;font-family:inherit;cursor:pointer;touch-action:manipulation}
#mPanel .m-body>button{grid-column:1/-1;min-height:44px;border-radius:12px;border:0;background:var(--acid,#d7ff41);color:#11110f;font-weight:700;font-family:inherit;font-size:14px}
#mPanel .curve-box{grid-column:1/-1;max-width:none}#mPanel .curve-box canvas{max-width:260px;margin-inline:auto}#mPanel .hsl-box{grid-column:1/-1}
#mPanel .curve-tabs button{min-height:38px}
#mPanel .curve-box canvas{max-width:190px!important}
#mPanel .sticker-box,#mPanel #mosaicBox{grid-column:1/-1}#mPanel .st-grid{max-height:150px}
html body.m-drawing #mBar{visibility:hidden}
html body #layerBar{bottom:6px}
/* drawing toolbar sits at the bottom like a tool panel so the whole preview stays free to draw on */
html body #drawBar{position:fixed;top:auto;left:0;right:0;bottom:0;z-index:97;border-radius:18px 18px 0 0;border-width:1px 0 0;padding:10px 14px calc(12px + env(safe-area-inset-bottom,0px));background:#151513}
#mTlAdd{position:absolute;top:44px;width:44px;height:44px;border-radius:12px;border:0;background:var(--acid,#d7ff41);display:grid;place-items:center;z-index:3;padding:0;cursor:pointer;touch-action:manipulation;box-shadow:0 4px 14px #0008}
#mTlAdd svg{width:22px;height:22px;stroke:#11110f;fill:none;stroke-width:2.6;stroke-linecap:round}
html body #exportBtn{min-width:64px}

/* picture thumbnails in clips (thumbs.js): full strength, with the name kept readable */
html body .video-strip.has-thumbs{opacity:1}
html body .video-strip.has-thumbs i{display:none}
html body .clip.video .clip-head,html body .clip.image .clip-head{background:linear-gradient(#000a,transparent);padding-bottom:10px}
html body .ruler-mark{font-size:10px}

/* option chips replacing dropdowns inside tool sheets */
#mPanel .m-body label.m-chiplab{grid-column:1/-1}
#mPanel .m-chips.m-txt{gap:8px;padding:2px 0 4px}
#mPanel .m-chips.m-txt button{flex:0 0 auto;flex-direction:row;min-height:38px;padding:0 14px;border-radius:19px;background:#23231f;border:1px solid #3a3a34;color:#e4e4db;font-size:13px;font-weight:600;white-space:nowrap}
#mPanel .m-chips.m-txt button.on{background:var(--acid,#d7ff41);border-color:var(--acid,#d7ff41);color:#11110f}
#mPanel .m-chips.m-txt.m-wrap{flex-wrap:wrap;overflow-x:hidden;overflow-y:auto;max-height:132px;touch-action:pan-y}
#exportModal .m-chips.m-txt{margin:4px 0 2px;max-height:none;overflow:visible;gap:8px;flex-wrap:wrap;display:flex}
#exportModal .m-chips.m-txt button{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:20px;background:#23231f;border:1px solid #3a3a34;color:#e4e4db;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;touch-action:manipulation}
#exportModal .m-chips.m-txt button:disabled{opacity:.4}
#exportModal .m-chips.m-txt button.on{background:var(--acid,#d7ff41);border-color:var(--acid,#d7ff41);color:#11110f}

/* option grids inside dialogs: one column on a phone so labels aren't cut off */
html body .cx-opts{grid-template-columns:1fr!important}
html body .cx-opts select{text-overflow:ellipsis}

/* number / text fields: dark like everything else (they were showing as bright white boxes) */
#mPanel .m-body input:not([type=range]):not([type=checkbox]):not([type=color]),#drawBar input:not([type=range]):not([type=checkbox]){background:#23231f;color:#f1f1e8;border:1px solid #3a3a34;border-radius:12px;min-height:44px;padding:0 12px;font-family:inherit}
#drawBar input:not([type=range]):not([type=checkbox]){min-height:36px;width:64px}
html body.m-drawing .toast,html body.m-panel .toast{bottom:auto;top:calc(var(--m-top) + 64px)}

/* Text tool: the text box spans the sheet, secondary action is quiet */
#mPanel .m-body label:has(#overlayText){grid-column:1/-1}
#mPanel .m-body label:has(#overlayText) input{min-height:48px;font-size:16px}
#mPanel .m-body>button.m-sec{background:#23231f;color:#e4e4db;border:1px solid #3a3a34;font-weight:600}

#mPanel .m-body.m-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 34px),transparent);mask-image:linear-gradient(#000 calc(100% - 34px),transparent)}
html body .transport-buttons #prevFrameBtn svg,html body .transport-buttons #nextFrameBtn svg{display:block;margin:auto}

/* landscape: while a tool sheet is open, the editor makes room for it instead of sliding underneath */
@media (orientation:landscape) and (max-height:500px){
  html body.m-panel .workspace{margin-right:min(36vw,300px);transition:margin .2s}
  html body.m-panel .toast{left:12px;right:calc(min(36vw,300px) + 96px)}
}

/* the track column and the lanes run all the way down, so there is no dead black area under the last track */
html body .timeline-scroll{align-items:stretch}
html body .track-labels{min-height:100%;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--track-h,66px) - 1px),var(--line-soft,#282824) calc(var(--track-h,66px) - 1px),var(--line-soft,#282824) var(--track-h,66px));background-position:0 28px;background-repeat:repeat-y;background-color:#181816}
html body .timeline-content{min-height:100%}
html body .tracks{min-height:calc(100% - 28px);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--track-h,66px) - 1px),var(--line-soft,#282824) calc(var(--track-h,66px) - 1px),var(--line-soft,#282824) var(--track-h,66px));background-repeat:repeat-y}

/* ---------- touch targets: everything you tap is at least ~40px ---------- */
html body #projectEditBtn{width:36px;height:36px;display:inline-grid;place-items:center}
html body .track-label button{width:44px;height:40px}
html body #stTabs button,html body .st-tabs button{min-height:38px;padding:0 14px}
html body #drawBar .db-colors button{width:32px;height:32px}
html body #drawBar button:not([data-color]){min-height:40px;padding:0 14px}
html body #addPointBtn,html body #moAddBtn,html body #beatCutBtn,html body #beatPrevBtn,html body #beatNextBtn,html body #beatClearBtn,html body #beatBox button{min-height:40px;padding-left:12px;padding-right:12px}
html body .media-tabs button{min-width:48px}
html body .clear-library{min-width:56px}
html body .export-modal button:not(.modal-close):not(.render-button){min-height:40px}
html body .project-card button,html body #projectBackupBtn,html body #projectRestoreBtn{min-height:40px}
html body #projectEditBtn{flex:none;min-width:36px}
html body .track-label button{flex:none;min-width:40px}

/* top bar: give the project name the room that's left (it was cut to "Untitled …" on small phones) */
html body .project-title strong{max-width:calc(100vw - 258px)}
html body .project-title{gap:2px}
@media (max-width:389px){
  html body .topbar{gap:4px;padding:0 8px}
  html body .top-actions{gap:4px}
  html body .top-actions #undoBtn,html body .top-actions #redoBtn{width:36px}
  html body .export-button{padding:0 12px}
  html body .project-title strong{font-size:14px}
}
/* tool-bar labels: the longest ones ("Trim & crop", "Multi split") fit on a 360px phone without ellipsis */
@media (max-width:389px){#mNav button{font-size:10.5px;letter-spacing:0;padding-left:0;padding-right:0}#mNav button span{overflow:visible;text-overflow:clip}}
html body #layerBar button{min-width:40px;height:40px;display:inline-grid;place-items:center}
html body #layerBar button svg{display:block}

/* keyboard open (see __movexaKb in mobile.js): sheets sit on top of the keys */
html body.m-kb #mPanel{bottom:var(--m-kb-b,0)!important;max-height:calc(100dvh - var(--m-kb-b,0px) - 80px)}
html body.m-kb .modal-backdrop{bottom:var(--m-kb-b,0)}
html body.m-kb #mBar{display:none}
/* the sheet's main action ("Add text to video") stays pinned at the bottom while the options scroll */
#mPanel .m-body>button:not(.m-sec){position:sticky;bottom:0;z-index:3;box-shadow:0 -12px 14px 2px #151513}

html body .export-actions{flex-wrap:wrap}html body #cancelExportBtn{height:44px}html body .export-warn{font-size:12px}

html body .export-actions .render-progress{order:-1}html body .render-button.working{opacity:1}