/* =========================================================================
   RESPONSIVE LAYOUT — Universal device alignment
   Every element respects the available width. No horizontal overflow.
   Touch targets ≥ 44px. Safe-area insets honoured on notched devices.
   ========================================================================= */

/* 0. Foundation ---------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* Prevent any grid child from stretching its track beyond the viewport. */
#loginScreen .lp-shell, #loginScreen .lp-main > *,
#loginScreen .lp-feature-layout > *, #loginScreen .lp-feature-panel > *,
#mainContent, .q-stem-text, .cbt-main-area, .opt-content,
.plan-form-grid > *, .plan-stats-bar > *,
.bank-palette-wrap, .bank-nav-footer,
.question-card, .explanation, .quant3-toolbar,
.lesson-header, .lesson-header h2,
.home-card, .home-section-badge,
.review-container, .review-card,
.modal-dialog-box { min-width: 0; }

/* Prevent long unbroken Arabic / math text from overflowing. */
.q-stem-text, .cbt-q-stem, .math-center-box,
.explanation, .opt-content, .question-card p,
.review-stem, .review-explanation-box,
.bank-palette-title, .bank-palette-summary,
.home-card h3, .home-card p, .lesson-title-text,
.lp-lead, #lpTutorSpeech, .chat-bubble { overflow-wrap: break-word; word-break: break-word; }

#loginScreen h1 { max-width: 100%; }
#loginScreen h1 em { white-space: normal; }
#loginScreen .lp-login-card { min-width: 0; }
.chat-input-row input, .seek-row input[type=range] { min-width: 0; }
.chat-messages { min-height: 0; }

/* 1. App chrome — header, progress bar, sidebar use measured heights ---- */
#progressBarWrap { top: var(--app-header-height, 60px); }
#sidebar {
  top: var(--app-navigation-height, 120px);
  height: calc(100vh - var(--app-navigation-height, 120px));
  height: calc(100dvh - var(--app-navigation-height, 120px));
  max-width: calc(100% - 28px);
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior: contain;
  visibility: hidden;
}
#sidebar.open { visibility: visible; }
#mainContent { scroll-margin-top: calc(var(--app-navigation-height, 120px) + 16px); }
#loginCard, #lpFeatures { scroll-margin-top: 20px; }

/* Desktop base character positioning: head is never cut off */
#loginScreen .lp-tutor-scene .lp-character {
  position: relative;
  align-self: center;
  width: min(100%, 280px);
  height: auto;
  max-height: calc(100% - 150px);
  aspect-ratio: 1 / 1;
  overflow: visible;
  flex-shrink: 1;
  margin: 16px auto 8px;
  background: none;
  border: none;
  padding: 0;
}
#loginScreen .lp-tutor-scene .lp-portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  transform: none !important;
  pointer-events: none;
}

/* Images, SVGs and videos must never exceed their container. */
img, svg, video, canvas { max-width: 100%; height: auto; }
.q-stem-diagram svg, .q-stem-diagram img { max-width: 100%; height: auto; max-height: 160px; object-fit: contain; }

/* =========================================================================
   2. TABLET LANDSCAPE & PORTRAIT (≤ 1100px)
   ========================================================================= */
@media screen and (max-width: 1100px) {
  #loginScreen #lpTutorStudio,
  #loginScreen #lpTutorStudio:has(.lp-chat-history[open]) {
    grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0;
  }
  #loginScreen .lp-tutor-scene {
    height: 280px;
    padding: 18px 16px;
    overflow: hidden;
    position: relative;
    border-radius: 24px 24px 0 0;
    display: block;
  }
  #loginScreen .lp-tutor-scene .lp-character {
    position: absolute;
    right: 12px;
    bottom: 0;
    height: calc(100% - 24px);
    max-height: calc(100% - 24px);
    width: auto;
    max-width: 50%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    margin: 0;
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
  }
  #loginScreen .lp-tutor-scene .lp-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    transform: none !important;
  }
  #loginScreen .lp-tutor-scene .lp-scene-heading {
    position: absolute;
    top: 24px;
    left: 16px;
    right: auto;
    width: 44%;
    max-width: 44%;
    font-size: 14.5px;
    font-weight: 700;
    gap: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
  }
  #loginScreen .lp-tutor-scene .lp-tutor-presence {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 16px;
    right: auto;
    width: 44%;
    max-width: 44%;
    margin: 0;
    padding: 8px 12px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 3;
  }
  #loginScreen #lpTutorSpeech { font-size: 15px; line-height: 1.5; margin: 0; }
  #loginScreen .lp-tutor-scene .lp-chat-link {
    position: absolute;
    bottom: 22px;
    left: 16px;
    right: auto;
    width: 44%;
    max-width: 44%;
    min-height: 44px;
    margin: 0;
    padding: 6px 10px;
    font-size: 16px;
    font-weight: 700;
    white-space: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    z-index: 3;
  }
  #loginScreen #platformAiModal,
  #loginScreen #platformAiModal:has(.lp-chat-history[open]) {
    height: auto; max-height: none; min-width: 0;
    border-right: 0; border-top: 1px solid var(--border);
    border-radius: 0 0 24px 24px;
  }
  #loginScreen #platformAiModal .chat-header { border-radius: 0; }
  #loginScreen .lp-reply-cloud {
    flex: none; min-height: 175px; margin: 14px; padding: 16px;
    border-radius: 12px 28px 28px 28px;
  }
  #loginScreen .lp-reply-cloud::after {
    right: 44px; top: -12px; transform: rotate(-45deg);
  }
  #loginScreen .lp-cloud-scroll { flex: none; max-height: 300px; overflow-y: auto; }
  #loginScreen #lpCloudText { font-size: 20px; line-height: 1.9; }
  #loginScreen #platformAiModal .chat-input-row { border-radius: 0 0 24px 24px; }

  /* App shell — slightly narrower main padding */
  main { padding-inline: 16px; }
}

/* =========================================================================
   3. TABLET PORTRAIT / SMALL LAPTOP (≤ 768px)
   ========================================================================= */
@media screen and (max-width: 768px) {
  /* ---- Login / landing ---- */
  #loginScreen {
    padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px))
      env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
  }
  #loginScreen .lp-main { grid-template-columns: minmax(0, 1fr); padding: 28px 0 36px; gap: 24px; }
  #loginScreen h1 { width: auto; font-size: clamp(32px, 8.6vw, 44px); line-height: 1.55; margin: 14px 0; }
  #loginScreen .lp-lead { font-size: 18px; line-height: 1.9; max-width: none; }
  #loginScreen .lp-eyebrow { max-width: 100%; font-size: 14px; padding: 5px 10px; }
  #loginScreen .lp-nav { padding: 14px 0; gap: 12px; }
  #loginScreen .lp-nav-login { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; }
  #loginScreen .brand-logo-container { margin: 0; }
  #loginScreen .brand-logo-badge { width: 72px; height: 72px; border-radius: 20px; }
  #loginScreen .brand-logo-plus { top: 9px; left: 10px; }
  #loginScreen .lp-hero-actions { flex-wrap: wrap; gap: 10px 18px; margin: 20px 0 24px; }
  #loginScreen .lp-hero-actions > * { min-height: 48px; }
  #loginScreen .lp-login-card { width: 100%; max-width: 560px; margin-inline: auto; padding: 22px 18px; }
  #loginScreen .lp-feature-layout { grid-template-columns: minmax(0, 1fr); }
  #loginScreen .lp-feature-panel { grid-template-columns: minmax(0, 1fr); }
  #loginScreen .lp-feature-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #loginScreen .lp-feature-tabs button { min-width: 0; align-items: flex-start; }
  #loginScreen .lp-feature-tabs button > span { min-width: 0; }
  #loginScreen .lp-feature-tabs small { line-height: 1.7; }
  #loginScreen .lp-seo-pillars-grid, #loginScreen .lp-seo-reviews-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  }
  #loginScreen .lp-footer { gap: 12px; flex-wrap: wrap; }
  #loginScreen #platformAiModal .chat-header { padding: 14px; flex-wrap: wrap; gap: 6px; }
  #loginScreen #platformAiModal .chat-header h3 { font-size: 20px; }
  #loginScreen #platformAiModal .lp-tutor-prompts button { min-height: 48px; padding: 8px; }
  #loginScreen .lp-chat-history summary { min-height: 44px; }
  #loginScreen #platformAiModal .chat-input-row { padding: 10px; gap: 6px; }
  #loginScreen #platformInput { padding-inline: 8px; }
  #loginScreen #lpMicBtn, #loginScreen #platformSendBtn { min-height: 48px; }
  #loginScreen #lpMicBtn { min-width: 44px; }
  #loginScreen .lp-faq-heading { flex-wrap: wrap; }

  /* ---- App shell ---- */
  #appShell > header { padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; gap: 8px; }
  #appShell > header .left { width: 100%; min-width: 0; gap: 8px; }
  #appShell > header h2 { flex: 1; min-width: 0; font-size: 16px; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; }
  #appShell .header-actions { width: 100%; gap: 6px; }
  #appShell .header-actions button { flex: 1 1 auto; white-space: normal; font-size: 14px; padding: 7px 10px; }
  #hamburgerBtn, #homeNavBtn, .header-actions button { min-height: 44px; }
  #hamburgerBtn { width: 44px; flex: none; }
  #homeNavBtn { padding-inline: 10px; flex: none; }
  #progressBarWrap { padding: 8px 12px; }
  #mainContent { padding: 20px 14px calc(32px + env(safe-area-inset-bottom, 0px)); }

  /* ---- Grids ---- */
  .home-grid, .home-grid-foundation { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 12px; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lesson-card { min-width: 0; padding: 14px 9px; }
  .home-card { padding: 22px 16px; }
  .home-section-badge { padding-inline: 16px; text-align: center; }
  .lesson-header { flex-wrap: wrap; gap: 10px; }
  .lesson-header h2 { font-size: 19px; max-width: 100%; }

  /* ---- Question cards ---- */
  .question-card { padding: 16px; }
  .q-stem-row, .q-stem-text, .cbt-q-stem { min-width: 0; overflow-wrap: break-word; }
  .q-stem-diagram { min-width: 0; }
  .q-stem-text, .cbt-q-stem, .math-center-box { max-width: 100%; overflow-x: auto; }
  .options-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .option-btn, .cbt-opt-card, .review-opt { min-width: 0; overflow-wrap: anywhere; }
  .option-btn { min-height: 48px; }
  .question-header { gap: 8px; }
  .question-header-actions { gap: 8px; }
  .ai-tutor-icon-btn { font-size: 12px; padding: 5px 10px; }

  /* ---- Video controls ---- */
  .controls { padding: 12px 10px; }
  .seek-row { gap: 6px; }
  .buttons-row { gap: 8px; flex-wrap: wrap; }
  .buttons-row button, .video-part-btn, .back-link, .reset-questions-btn { min-height: 44px; }
  .buttons-row button { padding-inline: 10px; }
  .video-parts-bar { gap: 6px; padding: 8px 10px; }
  .video-part-btn { padding: 6px 10px; font-size: 12px; }

  /* ---- Bank question palette & nav ---- */
  .bank-palette-wrap { padding: 12px; }
  .bank-palette-header, .bank-nav-footer { gap: 10px; flex-wrap: wrap; }
  .bank-palette-title { font-size: 13px; }
  .bank-nav-btn { min-height: 44px; padding: 8px 14px; font-size: 13px; }
  .bank-pal-btn { min-width: 44px; height: 44px; font-size: 12px; }
  .bank-nav-footer { padding: 12px; }
  .bank-nav-status { font-size: 13px; }

  /* ---- CBT simulator ---- */
  .cbt-header { flex-wrap: wrap; gap: 10px; padding: 14px; }
  .cbt-header-candidate { flex: 1 1 100%; }
  .cbt-main-area { padding: 18px 14px; }
  .cbt-opt-card { padding: 12px; gap: 10px; }
  .cbt-footer { flex-wrap: wrap; gap: 12px; }
  .cbt-footer-nav { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .cbt-footer-nav > button { flex: 1; }
  .cbt-btn { min-height: 44px; padding: 10px 14px; }
  .cbt-palette { padding: 14px; }
  .cbt-palette-grid { grid-template-columns: repeat(auto-fit, minmax(42px, 1fr)); gap: 7px; }
  .cbt-pal-btn { height: 44px; }

  /* ---- Modals ---- */
  .app-modal { padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); }
  .modal-dialog-box { padding: 24px 18px; max-height: 90vh; max-height: 90dvh; overscroll-behavior: contain; }
  .modal-close-btn, .close-chat-btn { min-width: 44px; min-height: 44px; }
  .modal-close-btn { top: 5px; left: 5px; }
  #aiChatModal { height: 88vh; height: 88dvh; max-height: 100%; }
  #chatContextBanner { gap: 8px; flex-wrap: wrap; }
  .toggle-q-btn { min-height: 40px; }
  .chat-input-row input { width: 0; flex: 1; }
  .chat-input-row button { min-height: 44px; }

  /* ---- Study plan ---- */
  .plan-box, .plan-calendar-card, .plan-todo-notepad { padding: 18px 12px; }
  .plan-form-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .plan-select, .plan-date-input { min-width: 0; min-height: 48px; }
  .plan-estimate-card { padding: 16px 12px; }
  .plan-estimate-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .plan-estimate-stat { padding: 12px 8px; }
  .plan-stat-card { min-width: 0; padding: 14px 12px; }
  .plan-cal-month-title-wrap { min-width: 0; flex-basis: 100%; order: -1; }
  .plan-cal-grid, .plan-cal-weekdays { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
  .plan-cal-cell { min-width: 0; min-height: 74px; padding: 4px 2px; }
  .plan-cell-top { flex-wrap: wrap; gap: 0; }
  .plan-cell-today-pill { padding: 0 3px; font-size: 9px; }
  .plan-cell-badge { max-width: 100%; font-size: 10px; padding: 2px; }
  .plan-cal-weekday-name { font-size: 10px; padding: 6px 0; }
  .plan-chip-btn, .plan-nav-pill, .plan-cal-nav-btn, .plan-day-toggle { min-height: 44px; }
  .plan-modal-actions-footer { flex-wrap: wrap; }
  .plan-todo-title { min-width: 0; font-size: 16px; }

  /* ---- Review page ---- */
  .review-container { padding: 0; }
  .review-card { padding: 16px; }
  .review-header { flex-wrap: wrap; gap: 10px; }
  .review-opts-grid { grid-template-columns: minmax(0, 1fr); }
  .review-ai-btn { min-height: 44px; font-size: 13px; }

  /* ---- Toasts ---- */
  #toast { max-width: calc(100% - 24px); width: max-content; white-space: normal; text-align: center; }

  /* ---- Subscription & instruction modals ---- */
  .quant3-toolbar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
  .quant3-toolbar label { justify-content: space-between; }
  .quant3-hint { font-size: 12px; }
}

/* =========================================================================
   4. PHONE PORTRAIT (≤ 480px)
   ========================================================================= */
@media screen and (max-width: 480px) {
  #loginScreen { padding-inline: max(12px, env(safe-area-inset-left, 0px)); }
  #loginScreen h1 { font-size: clamp(28px, 9vw, 38px); }
  #loginScreen .lp-lead { font-size: 16px; }
  #loginScreen .lp-login-card { padding-inline: 14px; }
  #loginScreen .lp-hero-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  #loginScreen .lp-hero-actions .lp-text-link { justify-content: center; }

  /* Login tutor scene: preserve breathing room above character head */
  #loginScreen .lp-tutor-scene {
    height: 260px;
    padding: 14px 12px;
    border-radius: 20px 20px 0 0;
  }
  #loginScreen .lp-tutor-scene .lp-character {
    position: absolute;
    right: 8px;
    bottom: 0;
    height: calc(100% - 22px);
    max-height: calc(100% - 22px);
    width: auto;
    max-width: 50%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    margin: 0;
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
  }
  #loginScreen .lp-tutor-scene .lp-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    transform: none !important;
  }
  #loginScreen .lp-tutor-scene .lp-scene-heading {
    position: absolute;
    top: 20px;
    left: 12px;
    right: auto;
    width: 46%;
    max-width: 46%;
    font-size: 13.5px;
    gap: 6px;
    z-index: 3;
  }
  #loginScreen .lp-tutor-scene .lp-tutor-presence {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 12px;
    right: auto;
    width: 46%;
    max-width: 46%;
    margin: 0;
    padding: 6px 8px;
    min-height: 42px;
    z-index: 3;
  }
  #loginScreen #lpTutorSpeech { font-size: 14px; }
  #loginScreen .lp-tutor-scene .lp-chat-link {
    position: absolute;
    bottom: 18px;
    left: 12px;
    right: auto;
    width: 46%;
    max-width: 46%;
    margin: 0;
    font-size: 15px;
    min-height: 42px;
    z-index: 3;
  }

  /* App shell */
  #mainContent { padding: 16px 10px calc(28px + env(safe-area-inset-bottom, 0px)); }
  .lesson-header h2 { font-size: 17px; }

  /* Cards shrink to single column */
  .home-grid, .home-grid-foundation { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .lesson-card { padding: 10px 8px; min-height: 110px; font-size: 13px; }
  .lesson-card .num { font-size: 18px; }
  .lesson-card .lesson-title-text { font-size: 12px; }
  .home-card { padding: 18px 14px; }
  .home-card h3 { font-size: 15px; }

  /* Question cards */
  .question-card { padding: 14px 12px; border-radius: 10px; }
  .question-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .question-header-right { width: 100%; }
  .question-header-actions { width: 100%; justify-content: space-between; }
  .ai-tutor-icon-btn { width: 100%; justify-content: center; font-size: 13px; padding: 8px 12px; min-height: 44px; }
  .badge { font-size: 11px; padding: 3px 8px; }
  .question-num { font-size: 12px; }
  .options-grid { gap: 8px; }
  .option-btn { padding: 10px 12px; font-size: 14px; }
  .explanation { padding: 14px; font-size: 13.5px; }

  /* Bank palette */
  .bank-palette-grid { max-height: 150px; gap: 5px; }
  .bank-pal-btn { min-width: 40px; height: 40px; font-size: 11px; border-radius: 6px; }
  .bank-nav-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .bank-nav-btn { width: 100%; justify-content: center; }
  .bank-nav-status { text-align: center; }

  /* Video */
  .video-parts-bar { gap: 4px; padding: 6px 8px; }
  .video-part-btn { padding: 5px 8px; font-size: 11px; }
  .buttons-row button { font-size: 12px; }
  .controls { padding: 10px 8px; }
  .seek-row input[type=range] { height: 22px; }

  /* AI Chat modal fills full width on small phones */
  #aiChatModal, #platformAiModal {
    width: 100%; left: 0; bottom: 0;
    border-radius: 16px 16px 0 0;
  }
  .chat-header h3 { font-size: 14px; }
  .chat-bubble { font-size: 14px; padding: 10px 12px; }

  /* Study plan */
  .plan-cal-cell { min-height: 60px; padding: 3px 1px; }
  .plan-cell-num { font-size: 11px; }
  .plan-cell-badge { font-size: 9px; }
  .plan-estimate-stats { grid-template-columns: minmax(0, 1fr); }

  /* Review */
  .review-ai-btn { width: 100%; justify-content: center; }
  .review-explanation-box { font-size: 13px; padding: 12px; }

  /* Quant toolbar */
  .quant3-toolbar select { width: 100%; }
  .reset-questions-btn { width: 100%; justify-content: center; }

  /* Subscription plans grid */
  .plans-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cbt-score-box { padding: 24px 16px; margin: 20px auto; width: 100%; }

  /* SVG and math overflow */
  .math-center-box { padding: 8px; font-size: 14px; }
  .q-stem-diagram { max-width: 100%; padding: 8px; }
}

/* =========================================================================
   5. VERY SMALL PHONE (≤ 360px) — e.g. iPhone SE, Galaxy A series
   ========================================================================= */
@media screen and (max-width: 360px) {
  #loginScreen { padding-inline: 10px; }
  #loginScreen .lp-login-card { padding-inline: 12px; }
  #loginScreen h1 { font-size: clamp(26px, 9vw, 34px); }
  #loginScreen .lp-hero-actions .lp-text-link { font-size: 14px; }
  #loginScreen .lp-tutor-scene { height: 240px; padding: 12px 8px; }
  #loginScreen .lp-tutor-scene .lp-character {
    position: absolute;
    right: 4px;
    bottom: 0;
    height: calc(100% - 20px);
    max-height: calc(100% - 20px);
    width: auto;
    max-width: 48%;
    aspect-ratio: 1 / 1;
    overflow: visible;
    margin: 0;
    z-index: 2;
    background: none;
    border: none;
    padding: 0;
  }
  #loginScreen .lp-tutor-scene .lp-portrait {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    transform: none !important;
  }
  #loginScreen .lp-tutor-scene .lp-scene-heading { left: 8px; top: 16px; width: 48%; max-width: 48%; font-size: 12.5px; }
  #loginScreen .lp-tutor-scene .lp-tutor-presence { left: 8px; width: 48%; max-width: 48%; padding: 5px 6px; min-height: 38px; }
  #loginScreen #lpTutorSpeech { font-size: 13px; }
  #loginScreen .lp-tutor-scene .lp-chat-link { left: 8px; bottom: 14px; width: 48%; max-width: 48%; min-height: 38px; font-size: 14px; }
  #loginScreen #lpCloudText { font-size: 19px; }
  #loginScreen .lp-feature-tabs strong { font-size: 14px; }
  #loginScreen .lp-feature-tabs small { font-size: 12px; }
  #loginScreen .lp-feature-display { padding: 14px; }
  #loginScreen .plans-head { gap: 8px; flex-wrap: wrap; }
  #loginScreen .plan-card h4, #loginScreen .plan-card .plan-duration, #loginScreen .plan-buy-btn { font-size: 13px; }

  /* App shell */
  #mainContent { padding: 14px 8px calc(24px + env(safe-area-inset-bottom, 0px)); }
  #appShell > header h2 { font-size: 14px; }
  .lesson-header h2 { font-size: 16px; }
  .lesson-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .lesson-card { padding: 8px 6px; min-height: 100px; }
  .lesson-card .lesson-title-text { font-size: 11px; -webkit-line-clamp: 3; }
  .question-card { padding: 12px 10px; }
  .bank-palette-wrap { padding: 10px; }
  .bank-pal-btn { min-width: 36px; height: 36px; font-size: 10px; }
  .plans-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 85px), 1fr)); gap: 5px; }
  .cbt-score-box { padding: 20px 12px; margin: 16px auto; }
  .modal-dialog-box { padding: 20px 14px; }
}

/* =========================================================================
   6. TABLET / iPad LANDSCAPE SPECIFIC (768px–1024px)
   ========================================================================= */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  main { max-width: 900px; padding-inline: 20px; }
  .home-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .lesson-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bank-nav-footer { justify-content: center; }
}

/* =========================================================================
   7. LARGE DESKTOP (≥ 1400px)
   ========================================================================= */
@media screen and (min-width: 1400px) {
  main { max-width: 1100px; }
  .home-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
  .lesson-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* =========================================================================
   8. LANDSCAPE PHONE — prevent video from eating all vertical space
   ========================================================================= */
@media screen and (max-height: 480px) and (orientation: landscape) {
  #mainContent { padding-top: 10px; padding-bottom: 10px; }
  .player-wrap { max-height: 70vh; }
  .controls { padding: 6px 10px; }
  .buttons-row { gap: 4px; }
  .question-card { padding: 12px; }
  #aiChatModal, #platformAiModal { height: 95vh; height: 95dvh; }
}

/* =========================================================================
   9. DARK-MODE SVG INVERSION (already dark-bg) — safety for inline diagrams
   ========================================================================= */
.q-stem-diagram svg { color: var(--text); fill: currentColor; }

/* =========================================================================
   10. ACCESSIBILITY — prefers-reduced-motion, high contrast
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media (prefers-contrast: more) {
  :root { --border: #555; }
  .question-card, .home-card, .lesson-card, .bank-palette-wrap { border-width: 2px; }
  .option-btn { border-width: 2px; }
}