/* responsive: small phones, tablets, desktop, dark mode, reduced motion */
@media(max-width:380px){
  .grid{grid-template-columns:1fr 1fr;gap:8px}
  .stat{font-size:.75rem;padding:6px 10px}
  .card{padding:14px;border-radius:14px}
}
@media(min-width:640px){
  .container{padding:0 20px}
  .card{padding:22px}
  .grid{grid-template-columns:repeat(3,1fr)}
  nav.tabsbar{justify-content:center;flex-wrap:wrap;overflow:visible}
  #gl{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  #gl .unit{grid-column:1/-1}
  #gl .lesson{margin:0}
}
@media(min-width:1024px){
  .hero{padding:56px 20px 96px}
  .grid{grid-template-columns:repeat(4,1fr);gap:14px}
  #gl{grid-template-columns:1fr 1fr 1fr}
  .row input{font-size:1.05rem}
  .container{margin-bottom:60px}
}
@media(min-width:1400px){.grid{grid-template-columns:repeat(5,1fr)}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}