/* ===================== Адаптивность под телефоны и разные экраны =====================
   Подключается на всех страницах после собственного <style> страницы.
   Базовая защитная сетка правил — подстраховка там, где у конкретной страницы
   не хватает собственных media-запросов. */

@media (max-width: 900px) {
  .main-container { padding: 24px 16px 60px !important; }
}

@media (max-width: 640px) {
  .nav-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    border-radius: 28px !important;
    padding: 14px 16px !important;
  }
  .nav-links {
    justify-content: center !important;
    gap: 8px !important;
  }
  .nav-btn { font-size: 13px !important; padding: 9px 14px !important; }
  .logo-area { justify-content: center !important; }

  .hero, .lesson-card, .task-card, .variant-header, .stats-bar,
  .bank-card, .tutor-card, .cta-bottom, .feature-card {
    padding: 20px 16px !important;
    border-radius: 28px !important;
  }
  .hero-text h1, .lesson-title { font-size: 26px !important; }
  .features-title { font-size: 26px !important; }

  .modal-container, .pay-modal-box, .modal-box {
    max-width: 100% !important;
    border-radius: 24px !important;
  }
  .modal-header, .modal-body { padding: 18px 18px !important; }

  .btn-lg, .btn-submit-exam { width: 100%; }
  .hero-buttons { flex-direction: column !important; }
  .hero-buttons .btn-lg { width: 100%; }

  .grid-features { grid-template-columns: 1fr !important; }
  .special-blocks { flex-direction: column !important; }

  table { display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 420px) {
  .price-chip { font-size: 14px !important; }
  .xp-badge { font-size: 13px !important; padding: 7px 14px !important; }
}