@media screen and (max-width: 920px) {
  body.mobile-menu-open {
    overflow: hidden;
  }

  .app,
  .mobile-menu-ready.app,
  .mobile-menu-ready {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .app .main,
  .mobile-menu-ready .main {
    min-width: 0;
    width: 100%;
  }

  .app .topbar,
  .mobile-menu-ready .topbar {
    position: sticky;
    top: 0;
    z-index: 700;
  }

  .mobile-menu-ready .topbar .mobile-menu-button {
    border-color: var(--line, #e7e9ef);
    background: #fff;
  }

  .app .sidebar,
  .mobile-menu-ready .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0;
    z-index: 1000;
    width: min(330px, 88vw);
    height: 100dvh !important;
    border-right: 1px solid var(--line, #e7e9ef) !important;
    border-bottom: 0 !important;
    box-shadow: 18px 0 42px rgba(15, 23, 42, .18);
    transform: translateX(-105%);
    transition: transform .22s ease;
    overflow-y: auto;
  }

  body.mobile-menu-open .app .sidebar,
  body.mobile-menu-open .mobile-menu-ready .sidebar {
    transform: translateX(0);
  }

  .app .sidebar .nav,
  .mobile-menu-ready .sidebar .nav {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    background: rgba(15, 23, 42, .42);
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    display: block;
  }
}

@media screen and (min-width: 921px) {
  .mobile-menu-backdrop {
    display: none !important;
  }
}