/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  #sidebar { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 56px; flex-direction: row; border-right: none; border-top: 1px solid var(--border); padding: 0 8px; }
  .logo, #pomoMini, .side-bottom { display: none; }
  .nav-icons { flex-direction: row; justify-content: space-around; width: 100%; }
  .nav-btn .tip { display: none; }
  #main { margin-left: 0; margin-bottom: 56px; padding: 16px; }
  #pomoWidget { bottom: 56px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .modal { max-width: 100%; }
  .nav-btn.active::before { left: 50%; top: auto; bottom: -2px; transform: translateX(-50%); width: 20px; height: 3px; }
}