@media (max-width: 1280px) {
  .level-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .activity-grid, .test-mode-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .campaign-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 1080px) {
  :root { --sidebar-width: 225px; }
  .content-grid { grid-template-columns: minmax(0,1.5fr) minmax(245px,.85fr); gap: 16px; }
  .hero-card { padding: 30px; }
  .hero-art { opacity: .78; transform: scale(.9); transform-origin: right center; }
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-grid { grid-template-columns: 1fr; }
  .quick-card { padding: 10px 12px; }
}
@media (max-width: 820px) {
  :root { --sidebar-width: 252px; }
  .sidebar { z-index: 50; transform: translateX(-105%); transition: transform 220ms ease; box-shadow: 20px 0 50px rgba(0,0,0,.25); }
  body.menu-open .sidebar { transform: translateX(0); }
  .mobile-scrim { position: fixed; z-index: 40; inset: 0; display: block; visibility: hidden; background: rgba(3,8,18,.58); opacity: 0; transition: opacity 220ms ease, visibility 220ms ease; }
  body.menu-open .mobile-scrim { visibility: visible; opacity: 1; }
  .sidebar-close, .menu-toggle { display: grid; }
  .app-main { margin-left: 0; }
  .topbar { padding: 0 20px; }
  .page-content { padding: 28px 20px 24px; }
  .content-grid, .analytics-grid, .settings-layout, .sandbox-layout { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tip-card { grid-column: 1/-1; }
  .level-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .challenge-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .campaign-map-art { opacity: .6; right: -25px; }
  .campaign-feature-copy { max-width: 470px; }
  .settings-aside { display: none; }
}
@media (max-width: 600px) {
  :root { --topbar-height: 64px; }
  .topbar { padding: 0 14px; }
  .topbar-left, .topbar-actions { gap: 9px; }
  .breadcrumb { gap: 6px; font-size: 10px; }
  .topbar-streak { padding: 6px 7px; gap: 4px; }.topbar-streak small { display: none; }
  .profile-chip { padding: 3px; border: 0; }.profile-copy, .chevron { display: none; }
  .page-content { padding: 23px 14px 20px; }
  .welcome-row { align-items: flex-start; flex-direction: column; gap: 15px; }
  .welcome-row h1, .page-heading h1 { font-size: 29px; }
  .page-heading { margin-bottom: 22px; }
  .hero-card { min-height: 290px; padding: 25px 21px; align-items: flex-start; }
  .hero-copy { max-width: 100%; }.hero-copy h2 { font-size: 30px; }.hero-copy p { max-width: 290px; }
  .hero-art { right: -65px; bottom: -65px; top: auto; width: 300px; height: 230px; min-width: 300px; opacity: .48; transform: scale(.75); transform-origin: right bottom; }
  .hero-grid-glow { opacity: .08; }
  .hero-actions { gap: 12px; }.hero-text-link { display: none; }
  .stat-grid { gap: 9px; }.stat-card { padding: 13px; }.stat-value { font-size: 22px; }
  .continue-card { grid-template-columns: 1fr; }.continue-art { min-height: 140px; }.mini-keyboard { transform: scale(.8) rotate(-8deg); }
  .continue-copy { padding: 17px; }
  .side-column { grid-template-columns: 1fr; }.tip-card { grid-column: auto; }
  .quick-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-end; }.section-heading h2 { font-size: 17px; }
  .page-footer { flex-direction: column; gap: 6px; font-size: 9px; }
  .feature-banner, .campaign-feature, .challenge-banner, .test-intro-card, .sandbox-hero { min-height: 255px; padding: 24px 21px; }
  .feature-banner-copy, .campaign-feature-copy, .test-intro-card > div:first-child, .sandbox-copy { max-width: 100%; }
  .feature-banner h2, .campaign-feature h2, .challenge-banner h2, .test-intro-card h2, .sandbox-hero h2 { font-size: 25px; }
  .lesson-illustration, .practice-orbit, .campaign-map-art, .challenge-banner-art, .test-visual, .sandbox-art { opacity: .25; right: -100px; transform: scale(.72); transform-origin: right center; }
  .level-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.level-card-item { padding: 12px; }
  .activity-grid, .test-mode-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.activity-card { align-items: flex-start; flex-direction: column; gap: 8px; }.activity-arrow { display: none; }
  .campaign-grid { grid-template-columns: 1fr; }.campaign-card-art { height: 90px; }
  .challenge-grid { grid-template-columns: 1fr; }
  .sandbox-layout { gap: 10px; }.form-preview-grid { grid-template-columns: 1fr; gap: 11px; }
  .profile-overview { align-items: flex-start; flex-wrap: wrap; }.profile-xp-box { width: 100%; padding: 13px 0 0; border-top: 1px solid var(--border); border-left: 0; }
  .profile-overview-copy { flex-basis: calc(100% - 85px); }.analytics-grid { gap: 10px; }
  .settings-row { align-items: flex-start; flex-direction: column; gap: 9px; }
  .theme-options { align-self: flex-start; }
}
@media (max-width: 380px) {
  .topbar-streak { display: none; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .level-grid, .activity-grid, .test-mode-grid { grid-template-columns: 1fr 1fr; }
  .test-mode-card { padding: 12px; }
}