/* ==========================================================================
   RESPONSIVE · 320 / 375 / 480 / 768 / 1024 / 1366 / 1920 / 4K
   ========================================================================== */

/* ---------- ≤1024px : tablet ---------- */
@media (max-width: 1024px){
  .navbar__nav{ display: none; }
  .navbar__icon-btn--mobile{ display: flex; }
  .stat-strip{ grid-template-columns: repeat(2, 1fr); }
  .theory-block{ grid-template-columns: 1fr; }
  .dashboard{ grid-template-columns: repeat(2, 1fr); }
  .help-grid{ grid-template-columns: 1fr; }
  .orbit-map{ min-height: 400px; }
}

/* mobile dropdown nav, shown when toggled */
.navbar__nav--mobile-open{
  display: flex !important; position: absolute; top: calc(var(--navbar-h) + 10px); left: 0; right: 0;
  flex-direction: column; background: var(--panel-solid); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: .6rem; gap: .2rem; box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.navbar__nav--mobile-open .navbar__link{ width: 100%; text-align: left; border-radius: var(--radius-sm); }

/* ---------- ≤768px ---------- */
@media (max-width: 768px){
  :root{ --navbar-h: 64px; }
  .navbar{ top: 8px; padding: 0 10px; }
  .navbar__inner{ padding: .4rem .6rem; border-radius: var(--radius-lg); gap: .5rem; }
  .navbar__title-sub{ display: none; }
  .main{ padding: calc(var(--navbar-h) + 24px) 16px 80px; }
  .hero{ padding: 1.6rem 0 2.5rem; }
  .hero__actions{ flex-direction: column; align-items: stretch; }
  .hero__actions .btn{ justify-content: center; }
  .stat-strip{ grid-template-columns: 1fr 1fr; gap: .7rem; }
  .stat-card{ padding: 1rem .8rem; }
  .stat-card__value{ font-size: 1.6rem; }
  .form-grid{ grid-template-columns: 1fr; }
  .dashboard{ grid-template-columns: 1fr 1fr; }
  .dashboard__grade-value{ font-size: 3.2rem; }
  .offcanvas{ width: 100vw; border-radius: 0; }
  .quiz-hud{ flex-direction: row; }
  .review-item__head{ flex-direction: column; }
  .history-row{ grid-template-columns: 1fr 1fr; row-gap: .5rem; }
  .console-panel{ padding: 1.4rem; }
}

/* ---------- ≤480px ---------- */
@media (max-width: 480px){
  .navbar__title-main{ font-size: .78rem; }
  .navbar__logo{ width: 32px; height: 32px; }
  .hero__title{ font-size: 2.1rem; }
  .stat-strip{ grid-template-columns: 1fr 1fr; }
  .dashboard{ grid-template-columns: 1fr; }
  .dashboard__chart{ flex-direction: column; text-align: center; }
  .tabs__list{ overflow-x: auto; flex-wrap: nowrap; padding-bottom: .6rem; }
  .tabs__tab{ flex-shrink: 0; }
  .option-btn{ font-size: .88rem; padding: .8rem 1rem; }
  .history-row{ grid-template-columns: 1fr; text-align: left; }
}

/* ---------- ≤375px ---------- */
@media (max-width: 375px){
  .hero__eyebrow{ font-size: .68rem; }
  .btn{ font-size: .85rem; padding: .75rem 1.2rem; }
  .console-panel{ padding: 1.1rem; }
}

/* ---------- ≤320px ---------- */
@media (max-width: 320px){
  .navbar__title{ display: none; }
  .stat-strip{ grid-template-columns: 1fr; }
}

/* ---------- ≥1366px : laptop / desktop ---------- */
@media (min-width: 1366px){
  .main{ padding-left: 32px; padding-right: 32px; }
}

/* ---------- ≥1920px : full HD+ ---------- */
@media (min-width: 1920px){
  html{ font-size: 17.5px; }
  .main{ max-width: 1500px; }
}

/* ---------- ≥2560px : 4K ---------- */
@media (min-width: 2560px){
  html{ font-size: 20px; }
  .main{ max-width: 1800px; }
}

/* ---------- short viewports ---------- */
@media (max-height: 560px){
  .loader__orbit{ width: 90px; height: 90px; }
}