/* ROOT SE · compact adaptive mobile drawer · 2026-09-26 */
@media(max-width:899px){
  #drawerLayer{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    padding:0!important;
    overflow:hidden!important;
  }

  #drawerLayer .sideDrawer{
    position:absolute!important;
    top:0!important;
    right:auto!important;
    bottom:0!important;
    left:0!important;
    width:min(90vw,390px)!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding:
      calc(env(safe-area-inset-top,0px) + 8px)
      12px
      max(8px,env(safe-area-inset-bottom,0px))
      max(12px,env(safe-area-inset-left,0px))!important;
    overflow:hidden!important;
    border:0!important;
    border-right:1px solid rgba(166,224,255,.16)!important;
    border-radius:0 22px 22px 0!important;
    background:linear-gradient(180deg,rgba(3,13,19,.92),rgba(2,10,15,.88))!important;
    box-shadow:18px 0 50px rgba(0,0,0,.42)!important;
    -webkit-backdrop-filter:blur(28px) saturate(155%)!important;
    backdrop-filter:blur(28px) saturate(155%)!important;
  }

  #drawerLayer .drawerBrand{
    flex:0 0 auto!important;
    min-height:40px!important;
    margin:0 4px 6px!important;
    padding:2px 4px 6px!important;
    gap:9px!important;
  }
  #drawerLayer .drawerBrand img{
    width:34px!important;
    height:34px!important;
    flex:0 0 34px!important;
    border-radius:10px!important;
  }
  #drawerLayer .drawerBrand span{font-size:13px!important;line-height:1.05!important}
  #drawerLayer .drawerBrand small{margin-top:2px!important;font-size:8px!important;letter-spacing:.18em!important}

  #drawerLayer .drawerHead{
    flex:0 0 auto!important;
    min-height:66px!important;
    margin:0 0 7px!important;
    padding:9px 11px!important;
    gap:10px!important;
    box-sizing:border-box!important;
    border-radius:17px!important;
    background:linear-gradient(145deg,rgba(83,190,235,.10),rgba(44,104,140,.045))!important;
    border:1px solid rgba(130,215,255,.18)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.055)!important;
  }
  #drawerLayer .drawerHead img{
    width:48px!important;
    height:48px!important;
    flex:0 0 48px!important;
    border-radius:50%!important;
  }
  #drawerLayer .drawerIdentity{min-width:0!important}
  #drawerLayer .drawerIdentity b{font-size:17px!important;line-height:1.08!important}
  #drawerLayer .drawerIdentity>span:not(.drawerAdminMark){font-size:11px!important;margin-top:2px!important}
  #drawerLayer .drawerAdminMark{
    display:inline-flex!important;
    width:max-content!important;
    max-width:100%!important;
    margin-top:5px!important;
    padding:3px 8px!important;
    font-size:8px!important;
    line-height:1!important;
    border-radius:7px!important;
  }
  #drawerLayer .drawerAdminMark.hidden{display:none!important}

  #drawerLayer .drawerNav{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:4px!important;
    margin:0!important;
    padding:1px 2px 5px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
  }
  #drawerLayer .drawerNav::-webkit-scrollbar{display:none!important}

  #drawerLayer .drawerNav>button{
    flex:0 0 auto!important;
    width:100%!important;
    min-height:46px!important;
    max-height:none!important;
    margin:0!important;
    padding:8px 10px!important;
    gap:11px!important;
    box-sizing:border-box!important;
    border-radius:14px!important;
    font-size:14px!important;
    line-height:1.15!important;
    background:rgba(255,255,255,.018)!important;
    border:1px solid rgba(255,255,255,.035)!important;
  }
  #drawerLayer .drawerNav>button.on{
    background:linear-gradient(145deg,rgba(93,203,255,.13),rgba(55,123,176,.055))!important;
    border-color:rgba(129,218,255,.22)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  }
  #drawerLayer .drawerNav .drawerIcon{
    width:27px!important;
    height:27px!important;
    flex:0 0 27px!important;
  }
  #drawerLayer .drawerNav .drawerIcon svg,
  #drawerLayer .drawerNav .drawerIcon img{
    width:22px!important;
    height:22px!important;
  }
  #drawerLayer .adminNavLabel,
  #drawerLayer .cifraNavLabel{
    display:flex!important;
    min-width:0!important;
    flex-direction:column!important;
    gap:2px!important;
  }
  #drawerLayer .adminNavLabel strong,
  #drawerLayer .cifraNavLabel strong{font-size:13px!important;line-height:1!important}
  #drawerLayer .adminNavLabel em,
  #drawerLayer .cifraNavLabel em{font-size:8px!important;line-height:1.05!important}
  #drawerLayer .drawerDownloadEntry{
    margin-top:2px!important;
    opacity:.72!important;
  }

  #drawerLayer .drawerFooter{
    flex:0 0 auto!important;
    margin:5px 0 0!important;
    padding:7px 2px 0!important;
    border-top:1px solid rgba(156,220,255,.12)!important;
    background:transparent!important;
  }
  #drawerLayer .drawerFooter>div{
    min-height:34px!important;
    padding:5px 7px!important;
    gap:8px!important;
    box-sizing:border-box!important;
    font-size:11px!important;
  }
  #drawerLayer .drawerFooter>div span{font-size:11px!important}
  #drawerLayer .drawerFooter>div small{font-size:9px!important}
  #drawerLayer .drawerFooter button{
    width:100%!important;
    min-height:40px!important;
    padding:6px 7px!important;
    font-size:12px!important;
    border-radius:12px!important;
  }
}

@media(max-width:899px) and (max-height:720px){
  #drawerLayer .sideDrawer{padding-top:calc(env(safe-area-inset-top,0px) + 5px)!important}
  #drawerLayer .drawerBrand{min-height:34px!important;margin-bottom:3px!important;padding-bottom:3px!important}
  #drawerLayer .drawerBrand img{width:30px!important;height:30px!important;flex-basis:30px!important}
  #drawerLayer .drawerHead{min-height:58px!important;padding:7px 9px!important;margin-bottom:5px!important}
  #drawerLayer .drawerHead img{width:42px!important;height:42px!important;flex-basis:42px!important}
  #drawerLayer .drawerNav{gap:2px!important}
  #drawerLayer .drawerNav>button{min-height:42px!important;padding:6px 9px!important}
  #drawerLayer .drawerFooter{margin-top:3px!important;padding-top:5px!important}
}