@media (max-width: 768px) {
  nav, .flex.h-screen > div:first-child,
  [class*="w-[200px]"], [class*="w-[220px]"], [class*="w-[240px]"] {
    width: 56px !important; min-width: 56px !important; max-width: 56px !important;
    overflow: hidden !important; padding: 8px 4px !important;
  }
  nav span, nav p, nav a > span,
  .flex.h-screen > div:first-child span,
  .flex.h-screen > div:first-child p { display: none !important; }
  nav a, nav button { justify-content: center !important; padding: 8px !important; }
  nav svg { margin: 0 auto !important; }
  main, .flex.h-screen > div:last-child { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; }
  .grid-cols-7, [class*="grid-cols-7"] { grid-template-columns: repeat(7, minmax(36px, 1fr)) !important; font-size: 11px !important; gap: 2px !important; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr !important; }
  table { font-size: 12px !important; display: block; overflow-x: auto; }
  td, th { padding: 4px 6px !important; white-space: nowrap; }
  [role="dialog"], [class*="modal"], [class*="Dialog"] { width: 95vw !important; max-width: 95vw !important; max-height: 90vh !important; margin: 5vh auto !important; border-radius: 12px !important; }
  button { min-height: 40px; }
  img[class*="object-cover"] { max-height: 200px !important; }
  header { padding: 8px 12px !important; }
  h1 { font-size: 24px !important; }
  [class*="flex"][class*="gap"] { flex-wrap: wrap !important; }
  canvas { width: 100% !important; }
  [class*="truncate"] { white-space: normal !important; word-break: break-word !important; }
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  nav, .flex.h-screen > div:first-child { width: 180px !important; min-width: 180px !important; }
}