@media only screen and (max-width: 768px) {
  .main-layout .nav[data-v-4b8392b9] {
    --side-padding: 12px;
    grid-template-columns: 112px minmax(44px, 1fr) max-content !important;
    height: 64px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    column-gap: 8px !important;
  }

  .main-layout .nav[data-v-4b8392b9] > span:first-child,
  .main-layout .nav[data-v-4b8392b9] > span:first-child span,
  .main-layout .nav[data-v-4b8392b9] span.n-text > span[style*="font-size: 25px"] {
    white-space: nowrap !important;
    overflow: visible !important;
    word-break: keep-all !important;
    writing-mode: horizontal-tb !important;
  }

  .main-layout .nav[data-v-4b8392b9] > span:first-child span,
  .main-layout .nav[data-v-4b8392b9] span.n-text > span[style*="font-size: 25px"] {
    font-size: 16px !important;
    line-height: 64px !important;
    margin-left: 0 !important;
  }

  .main-layout .sider[data-v-4b8392b9] {
    top: 64px !important;
    bottom: 0 !important;
    height: auto !important;
    z-index: 999;
  }

  .main-layout .sider[data-v-4b8392b9] .n-layout-sider-scroll-container {
    padding-top: 16px !important;
    box-sizing: border-box;
  }

  .main-layout .content[data-v-4b8392b9] {
    padding: 12px !important;
  }
}

@supports (height: 100dvh) {
  @media only screen and (max-width: 768px) {
    .main-layout .sider[data-v-4b8392b9] {
      height: auto !important;
    }
  }
}