/* =========================================================
 * css/responsive.css —— 自适应层（最后加载，覆盖前面的规则）
 * ---------------------------------------------------------
 * 断点策略：
 *   ≥1440  大屏：栅格 3~4 列，内容居中限宽
 *   1080   笔电：栅格降列
 *   900    平板竖屏 / 侧栏转抽屉
 *   760    手机：单列，隐藏次要列
 *   ≤380   小屏手机：压缩间距与字号
 * 关键：所有可能产生横向滚动的元素（KaTeX / SVG / 表格 / grid 子项）
 *       都必须有 min-width:0 + overflow 约束，否则会撑破布局。
 * ========================================================= */

/* ---------- 0. 全局防溢出（根治层） ---------- */
.grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .grid-auto > *,
.def-grid > *, .gd-grid > *, .part-grid > *, .gl-toolbar > * {
  min-width: 0;
}
/* 栅格轨道永不因内容变宽；子项自身可横向滚动，绝不撑破页面 */
.def-grid, .gd-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.def-grid > *, .gd-grid > * { overflow-x: auto; overflow-y: hidden; }
/* 公式/图解容器：宽度锁死在父级内，超长公式内部滚动 */
.formula-box, .fc-formula, .figure-box { width: 100%; max-width: 100%; }
.formula-box, .fc-formula, .gd-box, .figure-box, .ex-box, .trap-box, .mnemonic {
  max-width: 100%;
}
.katex-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
}
.katex-display > .katex { text-align: initial; }
.figure-box svg { max-width: 100%; height: auto; }
.term-card, .sentence-card, .quiz-card, .card { max-width: 100%; }
img, svg, table { max-width: 100%; }
.pinyin, .def-text, .ex-zh, .ex-vi, .term-vi { overflow-wrap: anywhere; }

/* ---------- 1. 大屏 ≥1440：内容限宽，避免行长过长 ---------- */
@media (min-width: 1440px) {
  .page { padding: 26px 34px 60px; }
  .term-body { padding: 0 22px 20px; }
}

/* ---------- 2. ≤1080：笔电 / iPad 横屏 ---------- */
@media (max-width: 1080px) {
  .page { padding: 22px 22px 50px; }
  .hero { padding: 26px 26px; }
  .gl-toolbar .gl-search { min-width: 180px; }
}

/* ---------- 3. ≤900：iPad 竖屏 / 侧栏抽屉 ---------- */
@media (max-width: 900px) {
  .page { padding: 20px 18px 46px; }
  .topbar { padding: 0 14px; }
  .crumb { font-size: 13px; }
  .crumb .sep, .crumb i { display: none; }
  .searchbar { max-width: 180px; }
  .searchbar .kbd-hint { display: none; }
  .page-head h1 { font-size: 22px; }
  /* 词条卡：操作按钮换行铺满 */
  .term-head { flex-wrap: wrap; }
  .term-actions { width: 100%; justify-content: flex-start; }
  .term-actions .btn { flex: 1; justify-content: center; }
  /* 闪卡 */
  .fc-layout { grid-template-columns: 1fr; }
  .fc-stage { max-width: 560px; margin: 0 auto; }
}

/* ---------- 4. ≤760：手机 ---------- */
@media (max-width: 760px) {
  .page { padding: 16px 13px 40px; }
  .hero { padding: 22px 18px; border-radius: var(--r); }
  .hero h1 { font-size: 23px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .topbar { height: 60px; padding: 0 12px; gap: 8px; }
  .searchbar { display: none; }
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn { padding: 6px 10px; font-size: 12px; }

  .card { padding: 16px 15px; }
  .card-title { font-size: 14.5px; }
  .page-head h1 { font-size: 20px; }
  .page-head .sub { font-size: 13px; }
  .filter-bar { gap: 8px; }
  .filter-bar .spacer { display: none; }

  /* 词条卡 */
  .term-card { border-radius: var(--r); }
  .term-head { padding: 16px 15px; }
  .term-body { padding: 0 15px 18px; }
  .term-zh { font-size: 24px; }
  .term-vi { font-size: 15px; }
  .def-grid { grid-template-columns: 1fr; gap: 14px; }
  .term-actions .btn { flex: 1 1 auto; }

  /* 长句拆解 */
  .sentence-card { padding: 16px 15px; }
  .sentence-text { font-size: 19px; line-height: 2.5; }
  .chunk { padding: 5px 9px; }

  /* 闪卡 */
  .fc-zh { font-size: 30px; }
  .fc-vi { font-size: 21px; }
  .fc-controls { flex-wrap: wrap; }
  .fc-controls .btn { flex: 1 1 100%; }

  /* 词汇表：隐藏次要列，只留 发音 / 中文 / 越南语 */
  .gl-table .col-py, .gl-table .c-py,
  .gl-table .col-type, .gl-table .c-type,
  .gl-table .col-lesson, .gl-table .c-lesson { display: none; }
  .gl-table th, .gl-table td { padding: 11px 10px; }
  .gl-row .c-zh { font-size: 15px; }
  .gd-box { padding: 15px 14px 17px; }
  .gl-toolbar { gap: 8px; }
  .gl-select { flex: 1 1 46%; min-width: 0; font-size: 13px; }

  /* 小测 */
  .q-zh { font-size: 17px; }
  .opt { padding: 12px 13px; }
  .quiz-card { padding: 18px 15px; }
}

/* ---------- 5. ≤400：小屏手机（iPhone SE / 320px） ---------- */
@media (max-width: 400px) {
  .page { padding: 14px 10px 36px; }
  .hero h1 { font-size: 20px; }
  .stat-card { padding: 14px; }
  .stat-card .v { font-size: 22px; }
  .part-card { padding: 13px 14px; }
  .lesson-row { padding: 10px 11px; gap: 9px; }
  .lesson-row .no { width: 28px; height: 28px; font-size: 12px; }
  .term-zh { font-size: 21px; }
  .term-actions .btn { font-size: 12px; padding: 6px 9px; }
  .badge { font-size: 11px; padding: 3px 8px; }
  .fc-zh { font-size: 26px; }
  .fc-vi { font-size: 19px; }
  .gl-table th, .gl-table td { padding: 10px 7px; }
  .gl-row .c-zh { font-size: 14px; }
  .gl-row .c-vi { font-size: 13px; }
  .gl-search input { height: 38px; font-size: 13px; padding: 0 36px 0 34px; }
  .gl-select { flex: 1 1 100%; height: 38px; }
  .gl-toolbar .badge { width: 100%; justify-content: center; }
  .page-head h1 { font-size: 18px; }
  .page-head h1 i { font-size: 17px; }
  .tabs .chip { font-size: 12.5px; padding: 6px 11px; }
  .nb-item { padding: 12px 0; }
  .sentence-text { font-size: 17px; line-height: 2.3; }
  /* 词条操作按钮：两列网格，避免挤爆 */
  .term-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .term-actions .btn { min-width: 0; justify-content: center; padding: 6px 8px; }
  .term-actions .btn:last-child { grid-column: span 2; }
  /* 顶栏压缩 */
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar .chip { padding: 4px 7px; font-size: 11px; }
  .theme-sw { width: 52px; }
  .theme-sw i { font-size: 10px; }
  .crumb b { font-size: 12.5px; }
}

/* ---------- 6. 横屏矮屏（手机横放） ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 16px 20px; }
  .hero h1 { font-size: 21px; }
  .fc-face { padding: 16px; }
  .fc-zh { font-size: 24px; }
  .fc-hint { display: none; }
  .sidebar { padding-top: 8px; }
  .side-foot { display: none; }
}

/* ---------- 7. iPad 专属：侧栏常驻但更窄 ---------- */
@media (min-width: 901px) and (max-width: 1080px) {
  :root { --sidebar-w: 236px; }
  .term-body { padding: 0 18px 18px; }
}

/* ---------- 8. 触屏：去掉 hover 位移，增大点按区 ---------- */
@media (hover: none) {
  .stat-card:hover, .part-card:hover, .term-card:hover { transform: none; }
  .speak { width: 34px; height: 34px; }
  .btn-sm { min-height: 34px; }
  .gl-row td { padding: 13px 12px; }
}

/* ---------- 9. 打印（词汇表可打成纸质版） ---------- */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; }
}

/* =========================================================
 * 10. 大屏 / 外接屏 / 带鱼屏 / 4K
 * ---------------------------------------------------------
 * 问题：原设计 .page 固定 1240px 且紧挨侧栏左对齐，
 *       在 2560 上右侧空 1040px、在 4K 上右侧空 2320px，严重失衡。
 * 方案：随屏幕加宽逐步放大内容宽度，并让内容在【侧栏右侧的可视区】居中。
 * ========================================================= */

/* ≥1600：2K / 27吋 */
@media (min-width: 1600px) {
  :root { --sidebar-w: 272px; }
  .page { max-width: 1440px; margin-inline: auto; padding: 30px 38px 72px; }
  .hero { padding: 34px 38px; }
  .hero h1 { font-size: 32px; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .def-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure-box svg { max-width: 520px; }
  .gl-table th, .gl-table td { padding: 13px 15px; }
}

/* ≥2000：带鱼屏 / 大外接屏 */
@media (min-width: 2000px) {
  :root { --sidebar-w: 288px; }
  .page { max-width: 1660px; padding: 34px 44px 80px; }
  .hero h1 { font-size: 34px; }
  .sent-zh { font-size: 20px; }
  .term-zh { font-size: 28px; }
  .figure-box svg { max-width: 580px; }
  .fc-face .fc-zh { font-size: 40px; }
  .fc-stage { max-width: 760px; }
}

/* ≥2600：4K / 超宽 */
@media (min-width: 2600px) {
  :root { --sidebar-w: 300px; }
  .page { max-width: 1900px; padding: 38px 52px 90px; }
  body { font-size: 15.5px; }
  .card { padding: 22px 24px; }
  .hero { padding: 40px 46px; }
  .hero h1 { font-size: 37px; }
  .page-head h1 { font-size: 32px; }
  .figure-box svg { max-width: 640px; }
  /* 4K 上词条卡双列，避免一行拉太长 */
  .gd-box { padding: 22px 24px; }
}

/* ≥3200：真 4K 全屏 / 多屏拼接 */
@media (min-width: 3200px) {
  .page { max-width: 2160px; }
  .fc-layout { grid-template-columns: 1fr 320px; }
}

/* 内容始终在侧栏右侧的可视区域内居中（修复 4K 右侧巨量空白） */
@media (min-width: 1600px) {
  .page { margin-left: auto; margin-right: auto; }
}

/* 触屏 + 大屏（iPad Pro 12.9 横屏） */
@media (min-width: 1024px) and (max-width: 1366px) and (hover: none) {
  .page { padding: 24px 26px 60px; }
  .def-grid { grid-template-columns: 1fr; }
}

/* ---------- 11. 顶栏在窄屏的瘦身（身份按钮 + 语言 + 主题） ---------- */
@media (max-width: 900px) {
  .who-name { max-width: 90px; }
  #langToggle { padding: 0 8px; gap: 4px; }
}
@media (max-width: 760px) {
  .who-name { display: none; }
  .who-btn { padding: 0 7px 0 3px; }
  .who-caret { display: none; }
  .topbar-actions .btn { padding: 6px 9px; }
}
@media (max-width: 560px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar .crumb b { font-size: 12.5px; }
  .who-btn { height: 32px; }
  .who-av { width: 24px; height: 24px; font-size: 11.5px; }
  #langToggle { height: 32px; padding: 0 6px; }
  #langToggle .lt { font-size: 11px; padding: 2px 3px; }
  #langToggle i { font-size: 12px; }
  .visw { height: 32px; padding: 0 7px; font-size: 13px; }
  .theme-sw { width: 52px; height: 30px; padding: 0 6px; }
  .theme-sw .knob { width: 22px; height: 22px; top: 3px; left: 3px; }
  [data-theme="dark"] .theme-sw .knob { transform: translateX(24px); }
  .theme-sw i { font-size: 10px; }
}
@media (max-width: 400px) {
  .visw { display: none; }              /* 极小屏先隐藏越南语开关 */
  .topbar-actions .btn span,
  .topbar-actions .btn .lbl { display: none; }
  .topbar-actions .btn { padding: 6px 8px; }
}

/* 320px：公式容器强制可横向滚动，绝不撑破页面 */
@media (max-width: 400px) {
  /* 极窄屏：所有网格强制单列，且子项必须能收缩（否则宽公式会撑破页面） */
  .grid, .grid-2, .grid-3, .grid-4, .def-grid { grid-template-columns: 1fr !important; }
  .grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > *, .def-grid > * {
    min-width: 0 !important; max-width: 100%;
  }
  .formula-box { padding: 10px 8px; max-width: 100% !important; box-sizing: border-box; }
  .formula-box .katex-display { max-width: 100% !important; }
  /* 兜底：词条正文内任何层级都不允许超出父容器宽度 */
  .term-body, .term-body *, .gd-box, .gd-box * {
    min-width: 0 !important; max-width: 100% !important; box-sizing: border-box;
  }
  .katex-display > .katex { max-width: 100%; }
  .figure-box { padding: 10px 8px; }
  .figure-box svg { max-width: 100%; height: auto; }
  .block-label { font-size: 11.5px; gap: 6px; }
}

/* ≤620：上/下一课按钮竖排；按钮内文字必须能换行，否则会撑破页面 */
@media (max-width: 620px) {
  .lnav-foot { flex-direction: column; align-items: stretch; }
  .lnav-foot .btn {
    max-width: none; width: 100%;
    justify-content: center !important; text-align: center;
    white-space: normal; word-break: break-word; line-height: 1.45;
    height: auto; min-height: 38px; padding: 8px 12px;
  }
  .lnav-foot .btn i { flex: 0 0 auto; }
}

/* ≤430：主题开关再收一点（knob 曾溢出 4px） */
@media (max-width: 430px) {
  .theme-sw { width: 46px !important; height: 27px !important; padding: 0 5px !important; }
  .theme-sw .knob { width: 21px !important; height: 21px !important; top: 2px !important; left: 2px !important; }
  [data-theme="dark"] .theme-sw .knob { transform: translateX(21px) !important; }
  .theme-sw i { font-size: 9px !important; }
}