@media (max-width: 768px) {
  body { font-size: 14px !important; }
  .topbar { padding: 10px 14px !important; flex-wrap:wrap !important; gap:8px !important; }
  .topbar h1 { font-size: 15px !important; }
  .topbar .nav { flex-wrap:wrap !important; gap:6px !important; }
  .content { padding: 0 10px !important; margin: 12px auto !important; }
  .card { padding: 14px !important; }
  table { display:block !important; overflow-x:auto !important; white-space:nowrap !important; }
  select, input[type="text"], input[type="number"], input[type="email"], input[type="password"] { width:100% !important; font-size:16px !important; }
  .row { flex-direction:column !important; }
  .row > div { min-width:100% !important; }
  .main-layout { flex-direction:column !important; }
  .btn { padding:10px 16px !important; font-size:13px !important; }
}
@media (max-width: 480px) {
  .topbar h1 { font-size: 13px !important; }
  .topbar a { font-size: 11px !important; padding: 4px 8px !important; }
  .card { padding: 12px !important; }
  th, td { padding: 5px 3px !important; font-size: 11px !important; }
  .btn { width:100% !important; }
  h1 { font-size:18px !important; }
  h2 { font-size:16px !important; }
}