@media (max-width: 1100px) {
  :root { --sidebar-w: 220px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .reference-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .level-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .app-header { flex-wrap: wrap; }
  .brand { flex: 1; }
  .header-search { order: 3; max-width: none; flex-basis: 100%; }
  .app-body, .app-shell.sidebar-collapsed .app-body { display: block; }
  .sidebar, .app-shell.sidebar-collapsed .sidebar { position: fixed; z-index: 210; top: 0; left: 0; width: min(86vw, 320px); height: 100vh; padding: 1rem; transform: translateX(-105%); box-shadow: var(--shadow-md); }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open + .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 205; border: 0; background: rgba(4, 10, 30, .55); }
  .app-shell.sidebar-collapsed .sidebar .nav-link { justify-content: flex-start; padding: .65rem .8rem; font-size: 1rem; }
  .app-shell.sidebar-collapsed .sidebar .nav-link span:last-child,
  .app-shell.sidebar-collapsed .sidebar-section-title { display: block; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { display: none; }
  .lesson-hero-grid { grid-template-columns: 1fr; }
  .lesson-icon-big { min-height: 150px; font-size: 6rem; }
  .architecture-diagram { grid-template-columns: 1fr 1fr; }
  .reference-complete { grid-template-columns: 1fr; }
  .reference-original { position: static; }
}
@media (max-width: 560px) {
  .brand small { display: none; }
  .brand-mark { width: 42px; height: 42px; }
  .header-actions .hide-mobile { display: none; }
  .grid-4, .reference-grid { grid-template-columns: 1fr; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .progress-item { grid-template-columns: 40px minmax(0, 1fr); }
  .progress-item > :last-child { grid-column: 2; }
  .architecture-diagram { grid-template-columns: 1fr; }
  .level-selector { grid-template-columns: 1fr 1fr; }
  .reference-category-grid { grid-template-columns: 1fr; }
}