.mobile-nav{display:none}

@media(max-width:820px){
  :root{--mobile-topbar:58px;--mobile-toolbar:46px;--mobile-nav-height:68px;--mobile-sheet-height:clamp(220px,36svh,320px)}
  html,body{height:100%;overflow:hidden;overscroll-behavior:none}
  body{background:var(--stage)}
  .app-shell{height:100svh;min-height:0;display:grid;grid-template-rows:var(--mobile-topbar) minmax(0,1fr) var(--mobile-nav-height)}
  .topbar{position:relative;z-index:30;top:auto;min-height:var(--mobile-topbar);height:var(--mobile-topbar);gap:8px;padding:8px 10px;border-color:var(--line)}
  .brand{gap:8px}.brand-mark{width:34px;height:34px}.brand-mark img{width:22px}.brand h1{max-width:132px;font-size:15px;white-space:nowrap}.brand p{display:none}
  .top-actions{margin-left:auto;gap:4px}.button{min-height:34px;padding:0 9px}.button span{display:none}.icon-button{width:34px;padding:0}.button i{font-size:18px}
  .workspace{position:relative;min-width:0;min-height:0;display:block;overflow:hidden}
  .editor{position:absolute;inset:0;display:grid;grid-template-rows:var(--mobile-toolbar) minmax(0,1fr);min-height:0;background:var(--stage)}
  .editor-toolbar{position:relative;z-index:2;top:auto;min-height:var(--mobile-toolbar);height:var(--mobile-toolbar);padding:5px 9px}
  .media-meta strong{max-width:44vw;font-size:11px}.media-meta span{display:none}.compact-field{font-size:0}.compact-field select{height:32px;font-size:10px}.tool-button{height:32px}
  .stage-area{position:relative;z-index:1;top:auto;align-self:start;width:100%;height:calc(100% - var(--mobile-sheet-height));min-height:0;padding:8px;overflow:hidden}
  .dropzone{width:min(92%,440px);gap:9px;padding:24px 16px;border-radius:14px}.dropzone strong{font-size:18px}.drop-icon{width:46px;height:46px}.dropzone small{max-width:31ch;line-height:1.4}
  .canvas-shell{width:100%;height:100%;min-width:0;min-height:0;max-width:100%;max-height:100%;display:grid;place-items:center;overflow:hidden;box-shadow:none}
  .canvas-shell[hidden]{display:none}#previewCanvas{min-width:0;min-height:0;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
  .selection-box{display:none}

  .panel--left,.panel-section--layers,.panel-section--controls,.timeline{position:fixed;z-index:24;left:0;right:0;bottom:var(--mobile-nav-height);top:auto;width:100%;height:var(--mobile-sheet-height);max-height:none;margin:0;border:0;border-top:1px solid var(--line);border-radius:18px 18px 0 0;background:var(--panel);box-shadow:0 -12px 32px rgba(20,30,25,.18);overflow:hidden}
  .panel--left::before,.panel-section--layers::before,.panel-section--controls::before,.timeline::before{content:"";position:absolute;z-index:5;top:7px;left:50%;width:38px;height:4px;border-radius:99px;background:var(--line);transform:translateX(-50%)}
  body:not([data-mobile-panel="effects"]) .panel--left,body:not([data-mobile-panel="layers"]) .panel-section--layers,body:not([data-mobile-panel="controls"]) .panel-section--controls,body:not([data-mobile-panel="timeline"]) .timeline{display:none!important}
  .panel--right{display:contents}.panel--left{display:grid;grid-template-rows:auto minmax(0,1fr)}
  .library-head{position:relative;top:auto;padding:18px 10px 6px;border:0}.library-head .section-heading{display:none}.search{height:32px}.category-tabs{grid-template-columns:repeat(4,minmax(68px,1fr));gap:4px;margin-top:5px;overflow-x:auto;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tabs button{min-height:27px}
  .effect-library{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-columns:108px;align-content:start;gap:7px 9px;padding:4px 10px 10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;overscroll-behavior-x:contain}.effect-library::-webkit-scrollbar{height:3px}.effect-library::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .effect-card{width:108px;height:100%;min-width:0;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;gap:3px;border:0;border-radius:9px;padding:0;background:transparent;box-shadow:none;scroll-snap-align:start}.effect-card:hover{box-shadow:none}.effect-card[data-active="true"]{border:0;box-shadow:none}.effect-card canvas{width:108px;height:auto;min-height:0;max-height:none;aspect-ratio:156/92;object-fit:contain;border:2px solid transparent;border-radius:8px;background:var(--graphite)}.effect-card[data-active="true"] canvas{border-color:var(--gold)}.effect-copy{display:block;min-width:0;padding:0 2px}.effect-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:9px;line-height:1.2;white-space:nowrap}.effect-copy small{display:none}
  .panel-section--layers,.panel-section--controls{padding:22px 14px 14px;overflow-y:auto}.panel-section--layers .section-heading{position:sticky;z-index:3;top:-22px;margin:-22px -14px 10px;padding:22px 14px 8px;background:var(--panel)}
  .layer-list{grid-template-columns:repeat(2,minmax(0,1fr))}.layer-row{min-height:52px}.layer-grip{display:none}
  .panel-section--controls{padding-top:20px}.inspector-tabs{top:-20px;margin:-20px -14px 12px;padding:20px 14px 8px}.inspector{padding-bottom:12px}.empty-panel{min-height:88px}
  .timeline{display:grid;grid-template-rows:auto auto minmax(0,1fr);padding-top:14px}.timeline-head{min-height:48px}.timeline-ruler{min-height:22px}.timeline-layers{padding-bottom:12px}
  .privacy-footer{display:none}
  .mobile-nav{position:relative;z-index:31;display:grid;grid-template-columns:repeat(4,1fr);height:var(--mobile-nav-height);padding:5px max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));border-top:1px solid var(--line);background:var(--surface)}
  .mobile-nav button{min-width:0;display:grid;place-items:center;align-content:center;gap:2px;border:0;border-radius:10px;padding:3px;background:transparent;color:var(--fg3);font-size:9px;font-weight:750}.mobile-nav button i{font-size:20px}.mobile-nav button[data-active="true"]{background:var(--graphite);color:var(--gold)}.mobile-nav button:disabled{opacity:.32}
  .notice{right:auto;left:50%;bottom:calc(var(--mobile-nav-height) + var(--mobile-sheet-height) + 8px);width:max-content;max-width:calc(100vw - 32px);text-align:center;transform:translate(-50%,8px)}.notice.is-visible{transform:translate(-50%,0)}
  .modal{max-height:calc(100svh - 24px);overflow:auto}
}

@media(max-width:560px){
  :root{--mobile-sheet-height:clamp(216px,35svh,294px)}
  .topbar{min-height:var(--mobile-topbar);height:var(--mobile-topbar);padding:8px}.brand h1{max-width:116px;font-size:14px}.top-actions{gap:3px}.button{padding:0 8px}
  .editor-toolbar{top:auto}.stage-area{top:auto;height:calc(100% - var(--mobile-sheet-height));min-height:0}.canvas-shell{height:100%}
  .panel-section--layers{top:auto}.effect-library{grid-template-columns:none}.effect-card{grid-template-columns:1fr;grid-template-rows:auto auto}.effect-card canvas{width:108px}
  .timeline{height:var(--mobile-sheet-height)}.timeline-head{grid-template-columns:auto minmax(70px,1fr) auto}.timeline-head .duration-field{grid-column:1/-1;justify-self:end}.field-row--3{grid-template-columns:1fr}
}

@media(max-width:370px),(max-height:690px){
  :root{--mobile-topbar:54px;--mobile-toolbar:42px;--mobile-nav-height:62px;--mobile-sheet-height:234px}
  .brand-mark{width:31px;height:31px}.brand h1{max-width:104px;font-size:13px}.button{min-height:32px;padding:0 7px}.icon-button{width:32px}
  .editor-toolbar{min-height:var(--mobile-toolbar);height:var(--mobile-toolbar)}.panel--left,.panel-section--layers,.panel-section--controls,.timeline{border-radius:14px 14px 0 0}.effect-library{grid-auto-columns:82px}.effect-card,.effect-card canvas{width:82px}
}