@media (max-width: 1180px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-grid {
    grid-template-columns: 1fr;
  }

  .settings-two-col,
  .theme-grid,
  .notification-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pick-card {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

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

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(86vw, var(--sidebar-width));
    transform: translateX(-105%);
    transition: transform 0.2s ease;
  }

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

  .icon-button {
    display: inline-grid;
    place-items: center;
  }

  .content-area,
  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .session-pill {
    max-width: 180px;
  }

  .split-form,
  .prediction-meta-row,
  .stats-grid,
  .notification-layout {
    grid-template-columns: 1fr;
  }

  .notification-preview-panel {
    position: static;
  }

  .notification-result {
    align-items: flex-start;
    flex-direction: column;
  }

  .notification-result dl {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .topbar h1 {
    font-size: 1.25rem;
  }

  .topbar {
    align-items: flex-start;
  }

  .topbar-actions .session-pill {
    display: none;
  }

  .toolbar > *,
  .toolbar input,
  .toolbar select {
    width: 100%;
  }

  .pick-card {
    grid-template-columns: 1fr;
  }

  .settings-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .settings-two-col,
  .theme-grid {
    grid-template-columns: 1fr;
  }

  .form-actions .primary-button,
  .form-actions .secondary-button,
  .form-actions .ghost-button {
    width: 100%;
  }

  .action-row {
    min-width: 220px;
  }

  .compact-actions {
    grid-template-columns: 1fr;
    min-width: 160px;
  }

  .notification-result dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .notification-history-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .notification-history-header button,
  .notification-send-button {
    width: 100%;
  }
}