@media (max-width: 991.98px) {
  body.app-shell {
    display: block;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 300px);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    box-shadow: 12px 0 30px rgba(0, 0, 0, 0.25);
  }

  body.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  .app-main {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
  }

  .command-banner {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .app-content {
    padding: 14px;
  }

  .auth-card {
    padding: 22px 18px 18px;
  }

  .command-title {
    font-size: 1.25rem;
  }

  .stat-value {
    font-size: 1.6rem;
  }

  .sidebar-user-name,
  .sidebar-user-id {
    max-width: 140px;
  }
}

@supports (height: 100dvh) {
  body.app-shell,
  .app-main {
    height: 100dvh;
    max-height: 100dvh;
  }
}