@media (max-width: 1160px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3, .command-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .inventory-layout, .machine-page-header, .charge-layout, .login-wrap { grid-template-columns: 1fr; }
  .detail-card { position: static; }
}

@media (max-width: 780px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; padding: 16px; }
  .nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .main { padding: 16px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .grid-4, .grid-3, .grid-2, .command-grid, .external-grid { grid-template-columns: 1fr; }
  .filter-row { grid-template-columns: 1fr; }
  .spring-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .login-hero { min-height: auto; padding: 22px; }
  .login-form { padding: 22px; }
}