#mtabs{display:none}
@media (max-width:760px){
  html,body{font-size:13px;-webkit-text-size-adjust:100%}
  #app{padding:8px 8px 64px;gap:8px;min-height:100dvh}
  #app > .decks,#app > .mixer,#app > .library,#app > #mixerSlot{display:none}
  body.mt-decks #app > .decks{display:grid}
  body.mt-mixer #app > .mixer{display:block}
  body.mt-lib #app > .library{display:flex}
  #mtabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:38;background:var(--bg2);border-top:1px solid var(--border);padding:6px 8px calc(6px + env(safe-area-inset-bottom));gap:6px}
  #mtabs button{flex:1;background:var(--bg3);color:var(--gray);border:1px solid var(--border);padding:10px 0;font:inherit;font-size:11px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
  #mtabs button.on{background:var(--pink);color:var(--bg);border-color:var(--pink)}
  #mtabs .badge.hidden{display:none}
  #mtabs button .badge{display:inline-block;min-width:16px;padding:0 4px;margin-left:6px;border-radius:8px;background:var(--gold);color:var(--bg);font-size:10px;letter-spacing:0}

  .decks{grid-template-columns:1fr;gap:8px}
  .deck{padding:8px}
  .deck .head{min-height:40px;margin-bottom:6px;gap:8px}
  .deck .cover{width:40px;height:40px}
  .deck .title{font-size:17px}
  .deck .body{grid-template-columns:1fr 44px;gap:6px}
  .main{height:96px}
  .over{height:28px;margin-top:4px}
  .deck .pitch.fader.v{height:110px}
  .deck .side{font-size:9px}
  .bar{gap:6px;margin-top:6px}
  .deck .play{width:44px;height:40px}
  .deck .play svg{width:22px;height:22px}
  .deck .cue,.deck .pad,.deck .loopbtn,.deck .sync,.deck .suggest,.deck .stem,.deck .stemsbtn,.deck .phone{height:36px;min-width:36px;font-size:12px}
  .deck .pads,.deck .loops,.deck .stems{display:flex;gap:4px}
  .bar .lbl,.zoom{display:none}
  .bar .time{min-width:5.5em;font-size:12px}
  .bar .state{display:none}

  .mixer{padding:10px 8px;overflow-x:hidden}
  .mixer .mbody{display:flex;flex-direction:column;gap:14px;align-items:stretch}
  .mixer .mhead,.mfloatbtn,.mgrip{display:none !important}
  .strip,.strip.b{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
  .strip .fxu{width:100%;border:0;padding:0;justify-content:center;flex-direction:row}
  .strip .fxu .fxk{gap:12px}
  .knob{width:44px;height:44px}
  .fader.v{width:44px;height:90px}
  .fader.v .track{left:20px}
  .fader.v .cap{left:6px;width:32px;height:16px;margin-top:-8px}
  .fader.h{width:min(100%,320px);height:44px}
  .fader.h .cap{height:36px;width:16px;margin-left:-8px}
  .fader.h .track{top:20px}
  .meter{height:90px}
  .xf{flex-direction:column;gap:12px;align-items:stretch}
  .xf .xfcol{width:100%;gap:8px}
  .xf .xfcol > div{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
  .recbtn,.outbtn{min-height:34px;padding:6px 10px;font-size:11px}
  .strip.r{border-left:0;padding-left:0}

  .library{padding:8px;min-height:0}
  .library .top{flex-wrap:wrap;gap:6px}
  .library .top .logo{width:100%;justify-content:center;padding:2px 0 4px}
  .library .top input{min-width:0;width:100%;flex:1 1 100%;order:2;padding:10px 12px;font-size:14px}
  .library .top .outbtn{order:3;flex:1;padding:8px 4px;font-size:10px}
  .filters{display:none}
  body.mt-filters .filters{display:flex}
  .filters .views{margin-left:0}
  .filters .range input{width:60px;padding:8px}
  .libbody{flex-direction:column;gap:0}
  .queue{width:100%;border-left:0;padding-left:0;display:none;margin-top:0}
  body.mt-queue .queue{display:flex}
  body.mt-queue .results{display:none}
  .results{margin-top:6px}
  .results th:nth-child(3),.results td:nth-child(3),.results th:nth-child(6),.results td:nth-child(6),.results th:nth-child(8),.results td:nth-child(8),.results th:nth-child(9),.results td:nth-child(9),.results th:nth-child(10),.results td:nth-child(10){display:none}
  .results td{padding:8px 4px}
  .results td.t{max-width:36vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .results img{width:40px;height:40px}
  .results button{padding:8px 10px;font-size:12px;margin-right:2px;min-width:34px}
  .results button.pre,.results button.q{min-width:30px}
  .results a.yt{font-size:16px;padding:0 4px}
  .results tr{cursor:default}
  .crumb{flex-wrap:wrap}
  .library .hint{font-size:0;padding:6px 0 0}
  .library .hint a{font-size:11px}
  .strip.a::before{content:"deck A";}
  .strip.b::before{content:"deck B";}
  .strip.r::before{content:"remote";}
  .strip::before{width:100%;text-align:center;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}

  #djchat,#b2bbox{left:8px !important;right:8px !important;top:auto !important;bottom:60px !important;width:auto !important;max-width:none;height:50vh;max-height:50vh}
  #djchat .grip{display:none}
  .mixer.floating{position:static !important;width:auto !important;height:auto !important}
  #outputs .panel{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  #outputs .phead{padding:10px 12px}
  #newver{left:8px;right:8px;bottom:64px}
  .airmenu{left:auto;right:0}
  #mtools{display:flex;gap:6px;order:4;width:100%}
  #mtools button{flex:1}
}
@media (min-width:761px){#mtools{display:none}}