@media(max-width:820px){
  .app:is(
    [data-screen="home"],
    [data-screen="works"],
    [data-screen="assets"],
    [data-screen="exports"],
    [data-screen="exports-trash"],
    [data-screen="settings"]
  ) .side{
    position:fixed;
    z-index:120;
    inset:auto 0 0;
    width:100%;
    height:72px;
    padding:7px 10px;
    border:0;
    border-top:1px solid #d9d9d6;
    background:rgba(255,255,255,.97);
    box-shadow:0 -14px 36px -30px #000;
    backdrop-filter:blur(18px);
  }
  .app:is(
    [data-screen="home"],
    [data-screen="works"],
    [data-screen="assets"],
    [data-screen="exports"],
    [data-screen="exports-trash"],
    [data-screen="settings"]
  ) .side>.brand-wrap,
  .app:is(
    [data-screen="home"],
    [data-screen="works"],
    [data-screen="assets"],
    [data-screen="exports"],
    [data-screen="exports-trash"],
    [data-screen="settings"]
  ) .side>div:last-child{display:none}
  .app:is(
    [data-screen="home"],
    [data-screen="works"],
    [data-screen="assets"],
    [data-screen="exports"],
    [data-screen="exports-trash"],
    [data-screen="settings"]
  ) .nav{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:5px;
    height:100%;
  }
  .app:is(
    [data-screen="home"],
    [data-screen="works"],
    [data-screen="assets"],
    [data-screen="exports"],
    [data-screen="exports-trash"],
    [data-screen="settings"]
  ) .nav-item{
    display:flex;
    min-height:54px;
    padding:5px 4px;
    flex-direction:column;
    justify-content:center;
    gap:3px;
    text-align:center;
    font-size:10px;
  }
  .app:is(
    [data-screen="home"],
    [data-screen="works"],
    [data-screen="assets"],
    [data-screen="exports"],
    [data-screen="exports-trash"],
    [data-screen="settings"]
  ) .nav-item::after{display:none}
  .app:is(
    [data-screen="home"],
    [data-screen="works"],
    [data-screen="assets"],
    [data-screen="exports"],
    [data-screen="exports-trash"],
    [data-screen="settings"]
  ) .nav-item .dot{width:4px;height:4px}
  .app:is(
    [data-screen="home"],
    [data-screen="works"],
    [data-screen="assets"],
    [data-screen="exports"],
    [data-screen="exports-trash"],
    [data-screen="settings"]
  ) .shell>.main{padding-bottom:74px}

  .app[data-screen="home"] .main>div:first-child{padding:22px 20px!important}
  .app[data-screen="home"] .pad,
  .app[data-screen="works"] .pad,
  .app[data-screen="assets"] .main>.pad,
  .app[data-screen="exports"] .main>.pad,
  .app[data-screen="exports-trash"] .main>.pad{
    padding:26px 20px 96px!important;
  }
  .app[data-screen="home"] .search{min-width:0;width:100%}
  .app[data-screen="works"] .works{grid-template-columns:1fr}

  .app[data-screen="settings"] .set-shell{display:block}
  .app[data-screen="settings"] .set-side{
    width:100%;
    padding:10px 14px;
    overflow-x:auto;
    display:flex;
    gap:6px;
    border-right:0;
    border-bottom:1px solid #d9d9d6;
    background:#fff;
  }
  .app[data-screen="settings"] .set-side::before{display:none}
  .app[data-screen="settings"] .set-link{
    width:auto;
    min-height:38px;
    padding:9px 13px;
    white-space:nowrap;
    border-left:0;
    border-bottom:2px solid transparent;
  }
  .app[data-screen="settings"] .set-link.active{
    border-bottom-color:#b34a3c;
    background:#151516;
  }
  .app[data-screen="settings"] .set-main{padding:28px 20px 104px}
  .app[data-screen="settings"] .settings-grid{grid-template-columns:1fr}

  .app:is([data-screen="workbench-script-graph"],[data-screen="workbench-script-materials"],[data-screen="workbench-video"]) .wb-top{
    height:auto;
    min-height:76px;
    padding:12px 16px;
  }
  .app:is([data-screen="workbench-script-graph"],[data-screen="workbench-script-materials"],[data-screen="workbench-video"]) .wb-left{
    width:100%;
    gap:9px;
  }
  .app:is([data-screen="workbench-script-graph"],[data-screen="workbench-script-materials"],[data-screen="workbench-video"]) .wb-tabs{
    order:3;
    width:100%;
    justify-content:center;
  }
  .app:is([data-screen="workbench-script-graph"],[data-screen="workbench-script-materials"],[data-screen="workbench-video"]) .wb-actions{margin-left:auto}
  .app[data-screen="workbench-script"] .wb-top{
    height:auto;
    min-height:76px;
    padding:12px 16px;
  }
  .app[data-screen="workbench-script"] .wb-left{width:100%;gap:9px}
  .app[data-screen="workbench-script"] .wb-tabs{
    order:3;
    width:100%;
    justify-content:center;
  }
  .app[data-screen="workbench-script"] .wb-actions{margin-left:auto}
  .app[data-screen="workbench-script"] .script-workbench{
    display:block;
    overflow:auto;
  }
  .app[data-screen="workbench-script"] .script-workbench>.col-list,
  .app[data-screen="workbench-script"] .script-workbench>.col-tools{
    width:100%;
    min-width:0;
    max-width:none;
    max-height:360px;
    border-left:0;
    border-right:0;
    border-bottom:1px solid #d9d9d6;
  }
  .app[data-screen="workbench-script"] .script-mid{overflow:visible}
  .app[data-screen="workbench-script"] .script-body{
    padding:24px 16px 72px;
    overflow:visible;
  }
  .app:is([data-screen="workbench-script-graph"],[data-screen="workbench-script-materials"]) .subtabs{padding:0 16px}
  .app[data-screen="workbench-script-graph"] .graph-wrap{display:block}
  .app[data-screen="workbench-script-graph"] :is(.legend,.char-detail){
    width:100%;
    max-width:none;
    max-height:none;
    border-left:0;
    border-right:0;
    border-bottom:1px solid #d9d9d6;
  }
  .app[data-screen="workbench-script-graph"] .graph{
    min-height:540px;
    overflow:auto;
  }

  .app[data-screen="workbench-video"] .vg-body{
    display:block;
    overflow:auto;
    padding-bottom:28px;
  }
  .app[data-screen="workbench-video"] :is(.vg-shotlist,.vg-right){
    width:100%;
    max-width:none;
    max-height:none;
    border-left:0;
    border-right:0;
    border-bottom:1px solid #d9d9d6;
  }
  .app[data-screen="workbench-video"] .vg-shotlist{max-height:420px}
  .app[data-screen="workbench-video"] .vg-center{
    padding:22px 16px;
    overflow:visible;
  }
  .app[data-screen="workbench-video"] .vg-cscroll{overflow:visible!important}
  .app[data-screen="workbench-video"] .vg-settings-scroll{overflow:visible}
  .app[data-screen="workbench-video"] .vg-right{max-height:none}

  .app[data-screen="exports-trash"] .trash-row{
    grid-template-columns:22px 82px minmax(0,1fr)!important;
    gap:12px!important;
  }
  .app[data-screen="exports-trash"] .trash-thumb{width:82px!important}
  .app[data-screen="exports-trash"] .trash-actions{
    grid-column:2/-1;
    justify-content:flex-end;
  }

  .app[data-mode="workspace"] .ovl{padding:12px}
  .app[data-mode="workspace"] .lb-card{display:block;max-height:calc(100dvh - 24px);overflow:auto}
  .app[data-mode="workspace"] .lb-img{width:100%;height:min(48vh,500px)}
  .app[data-mode="workspace"] .lb-side{width:100%;border-left:0;border-top:1px solid #d9d9d6}
  #scriptParseOverlay,
  .episode-compare-overlay,
  .asset-history-overlay,
  .source-review-overlay{padding:8px!important}
  #scriptParseOverlay>div,
  .editorial-fullscreen-panel{
    height:100%!important;
    overflow:auto;
  }
  #scriptParseOverlay header,
  .episode-compare-overlay header,
  .source-review-overlay .editorial-fullscreen-panel>div:first-child{
    flex-wrap:wrap;
    height:auto!important;
    min-height:62px;
  }
  #scriptParseOverlay>div>div[style*="grid-template-columns"],
  .episode-compare-overlay .editorial-fullscreen-panel>div[style*="grid-template-columns"],
  .source-review-overlay .editorial-fullscreen-panel>div[style*="grid-template-columns"]{
    display:block!important;
    overflow:visible!important;
  }
  #scriptParseOverlay>div>div[style*="grid-template-columns"]>aside,
  #scriptParseOverlay>div>div[style*="grid-template-columns"]>main,
  .episode-compare-overlay .editorial-fullscreen-panel>div[style*="grid-template-columns"]>section,
  .source-review-overlay .editorial-fullscreen-panel>div[style*="grid-template-columns"]>aside,
  .source-review-overlay .editorial-fullscreen-panel>div[style*="grid-template-columns"]>section{
    min-height:360px;
    border-right:0!important;
    border-bottom:1px solid #d9d9d6;
  }
}
@media(max-width:560px){
  .app[data-screen="settings"] .settings-grid,
  .app[data-screen="settings"] .token-summary{display:block}
  .app[data-screen="settings"] :is(.settings-card,.token-card){margin-bottom:12px}
  .app[data-screen="settings"] .set-row{align-items:flex-start;gap:14px}
  .app[data-screen="settings"] .set-row>:is(input,select){max-width:56%!important}
  .app[data-screen="exports-trash"] .main::before,
  .app[data-screen="settings"] .main::before{display:none}
  .app[data-screen="exports-trash"] .page-head{display:block}
  .app[data-screen="exports-trash"] .page-head>div:last-child{margin-top:16px}
  .app[data-screen="exports-trash"] .trash-batch{flex-wrap:wrap}
}