@media (max-width: 850px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .sidebar { overflow: hidden; }
  .brand { flex: 0 0 auto; }
  .sidebar nav { min-width: 0; overflow-x: auto; }
  .sidebar nav button { flex: 0 0 auto; }
  main { width: 100%; min-width: 0; }
  main header { gap: 12px; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel, .table-wrap { min-width: 0; width: 100%; max-width: 100%; }
}

@media (max-width: 480px) {
  main header { align-items: flex-start; }
  .state { flex: 0 0 auto; }
  .metrics { grid-template-columns: 1fr; }
}