@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr; }
  .col-side { order: -1; }
}

@media (max-width: 860px) {
  .mobile-only { display: inline-flex; }

  .app-shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    height: 100vh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--duration) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }

  .view { padding: 20px 16px; }
  .topbar { padding: 0 16px; }

  .progress-stats { grid-template-columns: repeat(2, 1fr); }

  .topbar-right .btn span { display: none; }
  .topbar-right .btn { padding: 8px 10px; }
}

@media (max-width: 520px) {
  .greeting-title { font-size: 16px; }
  .execution-task { font-size: 22px; }
  .progress-percent { font-size: 22px; }
  .routine-grid { grid-template-columns: 1fr; }
}