@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 15;
    width: 280px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

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

  .mobile-bar {
    display: flex;
  }

  .grid-4,
  .grid-2,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .page-header,
  .toolbar,
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }
}

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

  .auth-panel {
    padding: 22px;
  }

  .page-header h1,
  .auth-panel h1 {
    font-size: 1.45rem;
  }

  .button,
  .icon-button {
    min-height: 44px;
  }
}