/* Tablet */
@media (max-width: 980px) {
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .editor-split { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 720px) {
  :root { --sidebar-w: 0px; }
  .sidebar {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: 260px; z-index: 80;
    transform: translateX(-100%); transition: transform .25s ease; height: auto;
  }
  body.drawer-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  .drawer-mask { position: fixed; inset: var(--topbar-h) 0 0 0; background: rgba(15,23,42,.45); z-index: 70; }
  .main { padding: 16px 14px 50px; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-auto { grid-template-columns: 1fr; }
  .topbar-search { max-width: none; }
  .hero h1 { font-size: 26px; }
  .menu-toggle { display: grid !important; }
  .desktop-only { display: none !important; }
  .modal { max-width: 100%; border-radius: var(--radius) var(--radius) 0 0; align-self: flex-end; }
  .modal-mask { padding: 0; align-items: flex-end; }
}

.menu-toggle { display: none; }
@media (min-width: 721px) { .menu-toggle { display: none; } }