/* ============================================================
   RESPONSIVE  —  loaded last so it can override base.
   Breakpoints: 1024 (tablet), 720 (small tablet), 520 (phone).
   ============================================================ */

/* Tablet — collapse quiz sidebar + content sidebar */
@media (max-width:1024px){
  .ql{grid-template-columns:1fr;max-width:680px}
  .ql > div:last-child{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;align-items:start}
  .scd{margin-bottom:0}
  .pgrid{grid-template-columns:repeat(2,1fr)}
}

/* Content / library: turn the fixed left sidebar into a scrollable top strip */
@media (max-width:900px){
  .cl{grid-template-columns:1fr}
  .csd{position:static;height:auto;max-height:230px;border-right:none;border-bottom:1px solid var(--br)}
  .cbdy{padding:22px 20px 80px}
  .cnv{padding:13px 20px}
  .lb-crumb{padding:13px 20px 11px}
}

/* Small tablet */
@media (max-width:720px){
  .nav{padding:0 16px;height:54px}
  .logo{font-size:18px}
  .pc{padding:20px 16px 36px}
  .hero h1{font-size:30px}
  .mhdr{flex-direction:column}
  .oprg{width:100%;min-width:0}
  .ql > div:last-child{grid-template-columns:1fr}
  .rst{grid-template-columns:repeat(2,1fr)}
  .cst{flex-wrap:wrap;gap:8px;justify-content:center}
  .csp{flex:0 0 auto;min-width:64px}
  .car{display:none}
}

/* Phone */
@media (max-width:520px){
  body{font-size:14px}
  .nav-r .badge{display:none}
  .pgrid{grid-template-columns:1fr}
  .amg{grid-template-columns:1fr}
  .qgr{grid-template-columns:repeat(6,1fr)}
  .qcd{padding:16px}
  .qtt{font-size:16px}
  .rst{grid-template-columns:1fr 1fr}
  .ract,.qnv{flex-direction:column;align-items:stretch;gap:8px}
  .qnv .btn{justify-content:center}
  .cp{right:12px;left:12px;width:auto;bottom:78px}
  .fab{bottom:16px;right:16px}
  .hero h1{font-size:26px}
  .fsc h2{font-size:24px}
  .toast{left:12px;right:12px;top:62px}
}