/* MHQ MLBB Lab v12 — mobile app-style navigation + filter rails */
@media(max-width:820px){
  /* App-like mobile menu: compact 4x2 icon grid. */
  .mlbb-data-site .mlab-mobile-menu{
    padding:9px!important;
    max-height:min(64dvh,460px)!important;
    background:#081522!important;
    border-color:#31506b!important;
    border-radius:12px!important;
    box-shadow:0 18px 42px rgba(0,0,0,.7)!important;
  }
  .mlbb-data-site .mlab-mobile-menu-heading{
    min-height:auto!important;
    margin:0 3px 8px!important;
    padding:2px 2px 5px!important;
    font-size:.45rem!important;
    letter-spacing:.13em!important;
    color:#6f93ad!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:6px!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a{
    position:relative!important;
    min-width:0!important;
    min-height:70px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:8px 4px!important;
    border:1px solid #1e3850!important;
    border-radius:9px!important;
    background:#0b1926!important;
    color:#8da4b9!important;
    text-align:center!important;
    overflow:hidden!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a:after{
    content:""!important;
    position:absolute!important;
    left:7px!important;
    right:7px!important;
    bottom:0!important;
    height:3px!important;
    border-radius:3px 3px 0 0!important;
    background:transparent!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a svg{
    width:21px!important;
    height:21px!important;
    color:#64b7df!important;
    flex:0 0 auto!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a span{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    font-size:.52rem!important;
    line-height:1.08!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    color:inherit!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a b{display:none!important}
  .mlbb-data-site .mlab-mobile-menu nav a[aria-current=page]{
    border-color:#4b9bc5!important;
    background:#10293b!important;
    color:#e9f9ff!important;
    box-shadow:inset 0 0 0 1px rgba(89,210,255,.06)!important;
  }
  .mlbb-data-site .mlab-mobile-menu nav a[aria-current=page] svg{color:#79ddff!important}
  .mlbb-data-site .mlab-mobile-menu nav a[aria-current=page]:after{background:#ffd34d!important}
  .mlbb-data-site .mlab-mobile-exits{
    gap:6px!important;
    margin-top:7px!important;
    padding-top:7px!important;
  }
  .mlbb-data-site .mlab-mobile-exits a{
    min-height:34px!important;
    border-radius:8px!important;
    background:#0d1b2a!important;
    font-size:.56rem!important;
  }

  /* Lane/role workbench — large swipeable control cards. */
  .mlbb-data-site .mlbb-filter-surface{
    margin:14px 0 12px!important;
    border:1px solid #29425b!important;
    border-radius:14px!important;
    background:linear-gradient(180deg,#0a1420,#08111b)!important;
    overflow:hidden!important;
  }
  .mlbb-data-site .mlbb-filter-row{
    display:block!important;
    padding:14px 0 11px!important;
  }
  .mlbb-data-site .mlbb-filter-row+.mlbb-filter-row{border-top:1px solid #1b2d40!important}
  .mlbb-data-site .mlbb-filter-row-label{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
    padding:0 14px 10px!important;
  }
  .mlbb-data-site .mlbb-filter-row-label strong{
    color:#e2ecf5!important;
    font-size:.63rem!important;
    letter-spacing:.13em!important;
  }
  .mlbb-data-site .mlbb-filter-row-label span{
    color:#637a90!important;
    font-size:.55rem!important;
  }
  .mlbb-data-site .mlbb-visual-filter{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 14px 4px!important;
    scroll-padding-inline:14px!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .mlbb-data-site .mlbb-visual-filter::-webkit-scrollbar{display:none!important}
  .mlbb-data-site .mlbb-visual-choice{
    position:relative!important;
    flex:0 0 112px!important;
    width:112px!important;
    min-width:112px!important;
    height:76px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:7px!important;
    padding:8px!important;
    border:1px solid #1d344a!important;
    border-radius:10px!important;
    background:#0d1a29!important;
    color:#718aa3!important;
    scroll-snap-align:start!important;
    box-shadow:none!important;
  }
  .mlbb-data-site .mlbb-visual-choice:after{
    content:""!important;
    position:absolute!important;
    left:7px!important;
    right:7px!important;
    bottom:0!important;
    height:3px!important;
    border-radius:3px 3px 0 0!important;
    background:transparent!important;
  }
  .mlbb-data-site .mlbb-visual-choice-icon{
    width:26px!important;
    height:26px!important;
    display:grid!important;
    place-items:center!important;
  }
  .mlbb-data-site .mlbb-visual-choice-icon svg{width:24px!important;height:24px!important}
  .mlbb-data-site .mlbb-visual-choice span:last-child{
    font-size:.62rem!important;
    line-height:1!important;
    font-weight:800!important;
  }
  .mlbb-data-site .mlbb-visual-choice.is-active{
    border-color:#4c9fc8!important;
    background:linear-gradient(180deg,#123249,#0f2536)!important;
    color:#87e1ff!important;
    box-shadow:inset 0 0 0 1px rgba(95,215,255,.08)!important;
  }
  .mlbb-data-site .mlbb-visual-choice.is-active:after{background:#ffd34d!important}

  /* Macro lane switcher — Arcade-style sticky swipe rail. */
  .mlbb-data-site .macro-tabs-wrap{
    position:sticky!important;
    top:74px!important;
    z-index:60!important;
    border-top:1px solid #1a2c3e!important;
    border-bottom:1px solid #294158!important;
    background:#070f18!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    box-shadow:0 10px 24px rgba(0,0,0,.28)!important;
  }
  .mlbb-data-site .macro-tabs-wrap .mlbb-wrap{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
  }
  .mlbb-data-site .macro-tabs{
    display:flex!important;
    gap:7px!important;
    width:100%!important;
    padding:9px 12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scroll-padding-inline:12px!important;
    scroll-snap-type:x mandatory!important;
    overscroll-behavior-inline:contain!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .mlbb-data-site .macro-tabs::-webkit-scrollbar{display:none!important}
  .mlbb-data-site .macro-tabs button{
    position:relative!important;
    flex:0 0 118px!important;
    width:118px!important;
    height:66px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    padding:7px!important;
    border:1px solid #1d354a!important;
    border-radius:9px!important;
    background:#0b1825!important;
    color:#7289a0!important;
    scroll-snap-align:center!important;
    font-size:.58rem!important;
    line-height:1!important;
  }
  .mlbb-data-site .macro-tabs button:after{
    content:""!important;
    position:absolute!important;
    left:7px!important;
    right:7px!important;
    bottom:0!important;
    height:3px!important;
    border-radius:3px 3px 0 0!important;
    background:transparent!important;
  }
  .mlbb-data-site .macro-tabs button svg{width:23px!important;height:23px!important}
  .mlbb-data-site .macro-tabs button span{font-weight:800!important;white-space:nowrap!important}
  .mlbb-data-site .macro-tabs button.is-active{
    border-color:#4a9dc5!important;
    background:linear-gradient(180deg,#123047,#0d2435)!important;
    color:#8ce4ff!important;
    box-shadow:inset 0 0 0 1px rgba(84,210,255,.06)!important;
  }
  .mlbb-data-site .macro-tabs button.is-active:after{background:#ffd34d!important}
  .mlbb-data-site .macro-lane-badge{display:none!important}
  .mlbb-data-site .macro-content{padding-top:18px!important}
}

@media(max-width:390px){
  .mlbb-data-site .mlab-mobile-menu nav{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
  .mlbb-data-site .mlab-mobile-menu nav a{min-height:66px!important;padding:7px 3px!important}
  .mlbb-data-site .mlab-mobile-menu nav a span{font-size:.48rem!important}
  .mlbb-data-site .mlbb-visual-choice{flex-basis:104px!important;width:104px!important;min-width:104px!important;height:72px!important}
  .mlbb-data-site .macro-tabs button{flex-basis:110px!important;width:110px!important;height:62px!important}
}