/* ============================================================
   移动端响应式适配（手机 / 窄屏）
   —— 只改「呈现」，不动任何核心内容
   加载方式：
     · 落地页/章节页：style.css 顶部 @import 本文件（已链 style.css 的 129 个页面自动生效）
     · 深色科目页(subjects-overview / subject-*)：由 build_site.py 模板直接 <link>
   覆盖顺序：本文件在页面内联 <style> 之后加载，同优先级下以本文件为准
   ============================================================ */

/* ---------- 0. 全局基础：防溢出 / 触控 / 可读性 ---------- */
@media (max-width: 820px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  * { -webkit-tap-highlight-color: transparent; }

  /* 固定宽度的媒体元素不得撑破视口 */
  img, svg, video, canvas { max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }

  /* 表格：允许横向滑动，不撑破页面 */
  .table-wrap, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.data-table { display: table; width: 100%; font-size: 12px; }
}

/* ============================================================
   1. 落地页 / 目录 / 定价 / 登录（style.css 体系）
   ============================================================ */
@media (max-width: 820px) {
  /* 顶栏：允许换行，字号收紧 */
  .nav { padding: 12px 14px; flex-wrap: wrap; gap: 4px 14px; }
  .nav .logo { font-size: 16px; }
  .nav a { margin-left: 0; font-size: 13px; }

  /* Hero */
  .hero { padding: 34px 14px 20px; }
  .hero h1 { font-size: 24px; line-height: 1.4; }
  .hero p { font-size: 15px; line-height: 1.75; }
  .hero p.sub { font-size: 14px; }
  .hero a.cta { min-width: 150px; text-align: center; }

  /* 按钮 / CTA：触控友好 */
  .cta { padding: 12px 24px; font-size: 15px; }
  .cta.ghost { margin-left: 0; margin-top: 10px; }

  /* 容器留白收紧 */
  .landing, .catalog, .loginwrap { padding-left: 14px; padding-right: 14px; }
  .loginwrap { padding-top: 40px; }
  .loginwrap h2 { font-size: 22px; }

  /* 九宫格 → 单列 */
  .features { grid-template-columns: 1fr; gap: 12px; }
  .feature { padding: 16px 18px; }
  .feature h3 { font-size: 16px; }

  /* 套餐三档 → 单列 */
  .tiers { grid-template-columns: 1fr; gap: 14px; }
  .tier { padding: 20px 18px; }
  .tier h3 { font-size: 18px; }
  .tier .price { font-size: 26px; }
  .tier ul { font-size: 13px; line-height: 1.85; }

  /* 章节预览 / 课程地图 */
  .chappreview { padding: 20px 16px; }
  .chappreview h2 { font-size: 19px; }
  .chappreview p { font-size: 14px; }
  .curric { padding: 20px 16px; }
  .curric-intro { font-size: 14px; }
  .domains { grid-template-columns: 1fr; gap: 12px; }
  .domain { padding: 14px 15px; }
  .path { font-size: 13px; padding: 12px 13px; }

  /* 目录页 */
  .cathero { padding: 30px 10px 14px; }
  .cathero h1 { font-size: 24px; }
  .cathero p { font-size: 14px; }
  .secttl { font-size: 17px; margin: 26px 0 12px; }
  .chapgrid { grid-template-columns: 1fr; gap: 12px; }
  .chapcard { padding: 15px 16px; }
  .chapcard h3 { font-size: 15px; }

  /* 科目进度条：两列更紧凑 */
  .subject-roadmap { gap: 10px; }
  .subject-card { min-width: 0; flex: 1 1 40%; padding: 14px 10px; }
  .subject-icon { font-size: 26px; }
  .subject-name { font-size: 14px; }

  .foot { font-size: 12px; margin-top: 28px; }
}

/* ============================================================
   2. v5 章节页（122 页 + app.html）
   桌面结构： .wrap(flex) → .map-area(flex:1) + aside.panel(430px 固定)
   移动端：   上下堆叠 —— 图谱区定高可横滑，详情面板整宽接在下方
   ============================================================ */
@media (max-width: 820px) {
  /* 顶栏 */
  header { padding: 10px 12px !important; gap: 8px; }
  header h1 { font-size: 15px !important; line-height: 1.35; }
  header .tag { font-size: 11px !important; line-height: 1.6; }

  /* 工具条与图例：换行、加大点按区 */
  .bar { gap: 6px; width: 100%; flex-wrap: wrap; }
  .bar button {
    padding: 8px 12px !important;
    font-size: 12px !important;
    min-height: 34px;
    border-radius: 16px;
  }
  .legend { gap: 8px; font-size: 11px !important; }

  /* 双栏 → 单栏纵向 */
  .wrap { flex-direction: column; min-height: 0; }

  /* 图谱区：定高 + 可横滑（保证节点足够大、能点中） */
  .map-area {
    flex: none;
    height: 42vh;
    min-height: 260px;
    padding: 8px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  svg.tree { width: 100%; height: 100%; min-width: 760px; }

  /* 详情面板：取消 430px 定宽，改为整宽接在下方 */
  aside.panel,
  .panel {
    width: 100% !important;
    flex: none !important;
    max-width: 100%;
    border-left: none !important;
    border-top: 1px solid #e2e8f0;
    padding: 16px 14px 30px !important;
    overflow: visible;
  }
  .panel h2 { font-size: 18px !important; }
  .panel .crumb { font-size: 11px; }
  .empty { font-size: 13px; margin-top: 18px; line-height: 1.9; }

  /* 内容块 */
  .sec { margin-bottom: 12px; }
  .vizcard { border-radius: 9px; }
  .vizcard .vt { font-size: 11px; padding: 5px 9px; }
  .vizcard .vcap { font-size: 11px; padding: 6px 9px; }

  /* 静态 / 打印视图 */
  .static { padding: 20px 16px !important; margin: 14px 10px !important; }
  .static h1 { font-size: 20px !important; }
  .static .meta { font-size: 12px; }

  /* 测评弹层：铺满并纵向滚动 */
  #quiz .qtop { padding: 12px 14px; }
  #quiz .qtop b { font-size: 14px; }
  #quiz .qbody { padding: 16px 14px 24px; height: calc(100% - 54px); }
  #quiz .opt { padding: 12px 14px !important; font-size: 14px !important; min-height: 44px; text-align: left; }

  /* 会员锁卡 */
  .lockcard { padding: 15px 16px; font-size: 13px; line-height: 1.75; }
  .lockcard b { font-size: 14px; }
  .lockcard button { width: 100%; padding: 12px 18px; min-height: 44px; font-size: 14px; }
}

/* ============================================================
   3. v4b 旧版交互页（app-english-reading / app-english-write）
   桌面结构： .wrap(flex) → #graphContainer + #rightPanel(380px)
   注意：页内原有 @media(max-width:800px) 含一条失效选择器 `.#rightPanel`，此处纠正
   ============================================================ */
@media (max-width: 820px) {
  header { padding: 10px 12px !important; flex-wrap: wrap; }
  header h1 { font-size: 15px !important; }
  .header-controls { gap: 6px; flex-wrap: wrap; width: 100%; }
  .header-controls .btn { padding: 8px 11px !important; min-height: 34px; font-size: 12px !important; }
  header .authstate { margin-left: auto; }

  .wrap { flex-direction: column; height: auto; overflow: visible; }

  #graphContainer {
    flex: none;
    width: 100%;
    height: 42vh;
    min-height: 260px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  #graphSvg { position: relative; width: 100%; height: 100%; min-width: 760px; }

  #rightPanel {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    border-left: none !important;
    border-top: 1px solid #e2e8f0;
    overflow: visible;
  }
  .panel-header { padding: 13px 14px; }
  .panel-title { font-size: 15px; }
  .panel-body { padding: 14px; }
  .info-value { font-size: 13px; }

  #staticView { padding: 14px; height: auto; }
  .static-tree { padding: 16px 14px; }
  .static-branch h3 { font-size: 14px; }

  /* 测评弹窗 */
  #quiz { padding: 10px; }
  .quiz-box { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 12px; }

  /* 底部固定锁卡：别挡住内容 */
  .lockcard { bottom: 10px !important; max-width: 94% !important; padding: 14px 15px; }
}

/* ============================================================
   4. 深色科目页 subjects-overview / subject-*（不加载 style.css，单独 <link>）
   ============================================================ */
@media (max-width: 820px) {
  .nav { padding: 12px 14px; flex-wrap: wrap; gap: 6px 14px; }
  .nav .logo { font-size: 16px; }
  .nav a { margin-left: 0; font-size: 13px; }

  .hero { padding: 30px 14px 20px; }
  .hero h1 { font-size: 24px !important; line-height: 1.35; }
  .hero p { font-size: 14px; }

  .stats { gap: 16px; flex-wrap: wrap; justify-content: center; }
  .stat .num { font-size: 26px; }
  .stat .label { font-size: 12px; }

  .grid { padding: 12px 14px 40px; grid-template-columns: 1fr; gap: 14px; }
  .scard { padding: 15px; }
  .sname { font-size: 16px; }
  .sdesc { font-size: 12px; min-height: 0; }

  .container { padding: 22px 14px; }
  .grade-title { font-size: 17px; }
  .grade-section { margin-bottom: 32px; }
  .chapter-grid { grid-template-columns: 1fr; gap: 14px; }
  .chapter-card { padding: 16px; }
  .chapter-title { font-size: 15px; }

  /* 收款页：二维码与步骤在手机上单列、可读 */
  .paycodes { flex-direction: column; align-items: center; gap: 16px; }
  .paybox { width: 100%; max-width: 320px; }
  .paybox img { width: 160px; height: 160px; }
  .steps, .contact { padding: 14px 16px; }
  .steps ol { line-height: 1.8; }

  .back-link { font-size: 13px; margin-bottom: 14px; }
  .btn { padding: 10px 16px; font-size: 13px; min-height: 38px; }
}

/* ============================================================
   5. 超小屏（≤400px）进一步收紧
   ============================================================ */
@media (max-width: 400px) {
  .hero h1 { font-size: 21px; }
  .tier .price { font-size: 23px; }
  header h1 { font-size: 14px !important; }
  .bar button { padding: 7px 10px !important; font-size: 11.5px !important; }
  .map-area, #graphContainer { height: 38vh; min-height: 230px; }
  svg.tree, #graphSvg { min-width: 680px; }
  .panel, aside.panel { padding: 14px 12px 26px !important; }
}