/* ==========================================================================
   张工教育 · 手机版样式（只在 ≤767.98px 生效，电脑版零影响）
   --------------------------------------------------------------------------
   设计依据：拇指热区（主操作放下 1/3）、触控目标 ≥44px、正文 ≥16px（防 iOS
   聚焦缩放）、移动端无 hover、CTA 吸底（转化 +19%）、弹窗改底部抽屉。
   z-index 层级：pd-tabs 60 < header 80 < float-tools 150 < CTA 180
                 < Tabbar 200 < mask 205 < drawer 210 < modal/m-menu 220 < toast 300
   应急关闭：URL 加 ?nomobile=1  或  localStorage.zg_nomobile='1'
   ========================================================================== */

/* 手机断点变量（Tab 栏高度 + 底部安全区）。
   注意：定义在 body 上而不是 html.zg-m —— 万一 JS 没跑起来，
   body 的 padding-bottom 与吸底栏高度依然对得上，不会遮挡内容。 */
@media (max-width: 767.98px) {
  body { --zg-tab: calc(56px + env(safe-area-inset-bottom, 0px)); --zg-cta: 62px; }
}

/* ===================== 全局基础 ===================== */
@media (max-width: 767.98px) {
  html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
  body {
    font-size: 16px;
    line-height: 1.72;
    padding-bottom: var(--zg-tab);
  }
  body.has-cta { padding-bottom: calc(var(--zg-tab) + var(--zg-cta)); }

  .wrap { padding: 0 14px; }
  .sec { padding: 30px 0; }
  .sec-sm { padding: 22px 0; }
  .t-head { margin-bottom: 22px; }
  .t-head h2 { font-size: 22px; line-height: 1.4; }
  .t-head p { font-size: 14px; }
  .eyebrow { font-size: 12.5px; }
  .crumb { font-size: 12.5px; padding: 12px 0; }

  /* 图片一律不溢出，封面固定比例防跳动 */
  img { max-width: 100%; height: auto; }
}

/* ===================== 顶部栏（手机端整体移除） ===================== */
@media (max-width: 767.98px) {
  /* 手机端不再显示顶部导航栏（logo / 菜单 / 登录入口统一由底部 Tab 栏承载） */
  header.site { display: none; }
  .m-menu { display: none; }   /* 顶部「☰ 分类」对应的抽屉菜单随之隐藏 */
  .nav { height: 54px; gap: 10px; padding: 0 14px; }
  .logo .mark { width: 34px; height: 34px; border-radius: 9px; font-size: 16px; }
  .logo .txt b { font-size: 16px; }
  .logo .txt i { display: none; }
  .logo-img { height: 32px; max-width: 140px; }
  .menu { display: none; }                 /* 主导航移到底部 Tab 栏 */
  .search { flex: 1; min-width: 0; width: auto; padding: 5px 12px; }
  .search input { font-size: 16px; }
  .nav-right { gap: 6px; }
  .cart-btn { padding: 6px 8px; font-size: 13px; }
  .menu-toggle { display: flex; min-height: 44px; padding: 0 12px; }
  .m-menu .mh button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .eye { min-width: 44px; min-height: 44px; }
  /* 关闭「×」类按钮：字符本身只有 13px 宽，必须撑到 44px 才好点 */
  .x, button.x { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
}

/* ===================== 底部 Tab 栏 ===================== */
.zg-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; height: 56px; background: #fff;
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -2px 14px rgba(16, 32, 56, .07);
}
.zg-tb {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; color: var(--muted); font-size: 11px; min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.zg-tbi { font-size: 19px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.zg-tbi svg { width: 22px; height: 22px; display: block; }
.zg-tb em { font-style: normal; }
.zg-tb.on { color: var(--accent); font-weight: 700; }
.zg-tb:active { background: rgba(19, 135, 192, .06); }
@media (min-width: 768px) { .zg-tabbar { display: none !important; } }

/* ===================== 吸底 CTA（课程详情 / 下单） ===================== */
.zg-cta {
  position: fixed; left: 0; right: 0; bottom: var(--zg-tab); z-index: 180;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--line); backdrop-filter: blur(8px);
}
.zg-cta-p { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.zg-cta-p b { font-size: 20px; color: var(--accent); font-weight: 800; }
.zg-cta-p i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.zg-cta-b {
  flex: none; min-height: 48px; padding: 0 24px; border-radius: 24px;
  background: var(--accent); color: #fff; font-size: 16px; font-weight: 800;
  box-shadow: 0 6px 16px rgba(244, 82, 13, .26);
}
.zg-cta-b:disabled { opacity: .55; }
@media (min-width: 768px) { .zg-cta { display: none !important; } }

/* ===================== 通用组件：触控目标 / 表单 ===================== */
@media (max-width: 767.98px) {
  /* 按钮统一 ≥44px */
  .btn { min-height: 44px; padding: 11px 18px; font-size: 15px; }
  .btn-sm { min-height: 44px; padding: 10px 16px; font-size: 14.5px; }
  .btn-lg { min-height: 50px; padding: 13px 26px; font-size: 16.5px; }
  .btn-block { width: 100%; }

  /* 筛选 chip / 排序 / 分页 —— 手机上 button 一律 ≥44px（含 FAQ、收藏、领券等） */
  button { min-height: 44px; }
  .logo { min-height: 44px; }
  .chip, .mchip {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: 8px 16px; font-size: 14.5px; flex: none;
  }
  .sort button { min-height: 44px; padding: 8px 16px; font-size: 14.5px; }
  .say-tabs .stab { min-height: 44px; padding: 8px 16px; }
  .pager { gap: 10px; margin-top: 22px; flex-wrap: wrap; }
  .pager button { min-width: 44px; height: 44px; }
  .dash-tab { min-height: 44px; }

  /* 表单：16px 防 iOS 聚焦缩放，44px 高易点 */
  input, select, textarea { font-size: 16px; min-height: 44px; }
  .field label { display: block; font-size: 13px; margin-bottom: 6px; }
  .field input, .field select, .field textarea { width: 100%; height: 48px; padding: 0 12px; }
  .field textarea { height: auto; min-height: 88px; padding: 10px 12px; }
  .form-row { grid-template-columns: 1fr !important; gap: 12px; }
  .form-row.three { grid-template-columns: 1fr !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr !important; }

  /* 表格横向滚动容器（由 mobile.js 包裹生成） */
  .zg-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .zg-scroll-x > table { min-width: 100%; }

  /* 弹窗 → 底部抽屉 Bottom Sheet */
  .modal.x-sheet { align-items: flex-end; padding: 0; }
  .modal.x-sheet .modal-box {
    width: 100%; max-width: 100%; margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: 88dvh; overflow: auto;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    animation: zg-sheet-up .24s ease;
  }
  .modal .modal-head { padding: 14px 16px; }
  .modal-head .x { width: 44px; height: 44px; font-size: 24px; display: flex; align-items: center; justify-content: center; }
  .modal-body { padding: 14px 16px; }
  .modal-md { width: 100%; }
}
@keyframes zg-sheet-up { from { transform: translateY(24px); opacity: .4; } to { transform: none; opacity: 1; } }

/* ===================== 悬浮工具 / 提示条避让 ===================== */
@media (max-width: 767.98px) {
  .float-tools { bottom: calc(var(--zg-tab) + 12px); right: 10px; gap: 9px; z-index: 150; }
  body.has-cta .float-tools { bottom: calc(var(--zg-tab) + var(--zg-cta) + 12px); }
  .ft-btn { width: 50px; height: 50px; border-radius: 14px; }
  .ft-btn .ft-ic { font-size: 21px; display: flex; align-items: center; justify-content: center; }
  .ft-btn .ft-ic svg { width: 21px; height: 21px; display: block; }
  .ft-btn em { font-size: 10px; }
  .ft-btn.x-ftdoc { display: none; }  /* 「关于我们」页脚有入口：少一个悬浮钮少一分遮挡 */
  .toast { top: 12px; font-size: 14px; }
}

/* ===================== 首页 ===================== */
@media (max-width: 767.98px) {
  /* Hero 单列 */
  .hero .wrap { grid-template-columns: 1fr; gap: 20px; padding-top: 26px; padding-bottom: 26px; min-height: 0; }
  #heroTitle { font-size: clamp(23px, 6.6vw, 31px); line-height: 1.35; }
  #heroSub { font-size: 14px; }
  .hero-btns { margin-top: 20px; gap: 10px; }
  .hero-btns .btn { flex: 1 1 auto; min-width: 0; }
  .hero-stats { gap: 18px 22px; margin-top: 22px; }
  .hero-stats div b { font-size: 22px; }
  .hero-card { padding: 18px 16px; }
  .hero-card h3 { font-size: 17px; }
  .qz-row { grid-template-columns: 1fr; gap: 10px; }
  .hero-card select { height: 48px; font-size: 16px; }
  .hero-card .agree { font-size: 12px; }

  /* 快捷分类 3 列 */
  .quick { padding: 18px 0; }
  .quick-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .q-item { padding: 12px 6px; }
  .q-item .ic { width: 38px; height: 38px; font-size: 14px; }
  .q-item b { font-size: 13.5px; }
  .q-item span { font-size: 11.5px; }

  /* 两大层级单列 */
  .tier-grid { grid-template-columns: 1fr; gap: 14px; }
  .tier { padding: 20px 18px; min-height: 0; }
  .tier h3 { font-size: 20px; }
  .tier p { font-size: 13.5px; max-width: 100%; }
  .tier .go { margin-top: 14px; padding: 9px 16px; }

  /* 试听区：播放器在上、列表在下 */
  .tf-main { grid-template-columns: 1fr; gap: 14px; }
  .tf-main > * { min-width: 0; }            /* 不加会被内部横滚内容撑破页面 */
  .tf-filters .f-row { flex-direction: column; gap: 6px; align-items: stretch; }
  .tf-filters .fk { width: auto; padding-top: 0; }
  .tf-filters .fv {
    min-width: 0; overflow-x: auto; flex-wrap: nowrap;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .tf-filters .fv::-webkit-scrollbar { display: none; }
  .tf-filters .fv > * { flex: none; }
  .tf-right { max-height: none; }
  .tf-list { max-height: 380px; overflow-y: auto; }
  .tf-row { min-height: 56px; }

  /* 服务优势 2 列 / 战绩 2 列 / 评价单列 */
  .feat-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .feat { padding: 16px 12px; }
  .feat .ic { width: 42px; height: 42px; }
  .tea-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 26px 0; }
  .stat-row b { font-size: 26px; }
  .say-grid { grid-template-columns: 1fr; max-height: none !important; overflow: visible !important; }
  .say-tabs { gap: 8px; margin: -4px 0 18px; }
  .say-majors { gap: 8px; }

  /* FAQ 单列 + CTA 竖排 */
  .faq-lr { grid-template-columns: 1fr; gap: 12px; }
  .cta-box { padding: 26px 20px; border-radius: 16px; text-align: center; }
  .cta-box h3 { font-size: 21px; }
  .cta-btns { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
  .cta-btns .btn { width: 100%; }

  /* 页脚 */
  .foot-top { grid-template-columns: 1fr 1fr; gap: 22px; padding: 30px 0 22px; }
  .foot-bottom { font-size: 12px; flex-direction: column; gap: 8px; text-align: center; }
}

/* ===================== 课程列表 ===================== */
@media (max-width: 767.98px) {
  .filter-bar { padding: 14px 14px; margin-bottom: 16px; }
  .f-row { flex-direction: column; gap: 6px; align-items: stretch; padding: 10px 0; }
  .f-row .fk { width: auto; padding-top: 0; font-size: 13.5px; }
  .f-row .fv {
    min-width: 0; overflow-x: auto; flex-wrap: nowrap;
    padding-bottom: 2px; scrollbar-width: none;
  }
  .f-row .fv::-webkit-scrollbar { display: none; }
  .f-row .fv .chip { flex: none; }
  .toolbar { gap: 10px; }
  .toolbar .count { font-size: 13.5px; }
  .sort { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .sort::-webkit-scrollbar { display: none; }
  .sort button { flex: none; }
  /* 一行两个：课程 / 书籍 / 电子书。单列卡片过大，一屏看不到几个商品 */
  .courses-grid, .courses-grid.c3 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* 课程卡：手机上不再依赖 hover 出「查看详情」，整卡可点 */
  .cc-cover { aspect-ratio: 1 / 1; }
  .cc-cover .go { display: none; }
  .cc-cover .label b { font-size: 15px; }
  .cc-cover .label i { font-size: 11px; }
  .cc-cover .badge { top: 6px; left: 6px; padding: 2px 6px; font-size: 10.5px; }
  .cc-body { padding: 9px 10px 10px; }
  .cc-body h4 { min-height: 0; font-size: 14.5px; line-height: 1.4; margin-bottom: 5px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .cc-meta { font-size: 11px; gap: 6px; margin-bottom: 6px; }
  /* 书籍卡的描述是整段全文，两列下必须截断，否则卡片高度失控 */
  .cc-tea { font-size: 11.5px; margin-bottom: 8px;
    display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .cc-foot { padding-top: 8px; flex-direction: column; align-items: stretch; gap: 8px; }
  .price { font-size: 17px; }
  /* 先定通用按钮样式，再隐藏次要按钮：两者特异性相同，必须后写者生效 */
  .cc-foot .bk-btns { gap: 6px; }
  .cc-foot .btn, .cc-foot .bk-btns .btn {
    min-height: 40px; display: flex; align-items: center; justify-content: center; }
  .cc-foot .bk-btns .btn { flex: 1; }
  /* 两列下「详情 / 试读」放不下，只留主按钮（点卡片即进详情，详情内有试读） */
  .cc-foot .bk-btns .btn-ghost { display: none; }
  .empty { padding: 46px 16px; }
}

/* ===================== 题库 / 资料库列表（同样一行两个） ===================== */
@media (max-width: 767.98px) {
  .res-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .res-card { padding: 9px 9px 11px; }
  /* 题册封面：正方形，和课程卡一致 */
  .qz-cover { aspect-ratio: 1 / 1; margin: -9px -9px 9px; }
  .qz-cover.no span { font-size: 22px; }
  /* 整卡可点（参考课程卡）：手指按下轻微回弹 */
  #zGrid .res-card { cursor: pointer; }
  #zGrid .res-card:active { transform: scale(.985); }
  .res-card h4 { font-size: 13.5px; }
  .rc-top { font-size: 11px; gap: 6px; flex-wrap: wrap; }
  .rc-desc { font-size: 11.5px; line-height: 1.5; flex: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .rc-meta { font-size: 11px; gap: 4px; flex-wrap: wrap; }
  .qz-progress { margin-top: 8px; }

  /* 刷题底栏：固定悬浮在底部（Tab 栏之上），不随题目滚动移动；左滑进入下一题 */
  body.zg-quiz-do .float-tools { display: none; }
  #qzDo.wrap { padding-bottom: calc(var(--zg-tab) + 76px); }
  .qz-nav {
    position: fixed; left: 0; right: 0; bottom: var(--zg-tab); z-index: 180;
    margin: 0; padding: 8px 10px; background: #fff;
    border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(20,45,80,.10);
    gap: 6px; justify-content: space-between;
  }
  .qz-nav .btn { flex: 1 1 0; min-width: 0; max-width: none; height: 46px;
    padding: 0 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qz-nav .btn:disabled { opacity: .4; }

  /* 刷题顶栏收纳：默认藏进悬浮球，点开为浮动面板（标题/章节/模式/草稿纸/计算器/答题卡） */
  body.zg-quiz-do .qz-topbar { display: none; }
  body.zg-quiz-do.z-fab-open .qz-topbar {
    display: flex; flex-direction: column; align-items: stretch;
    position: fixed; left: 10px; right: 10px; top: auto;
    bottom: calc(var(--zg-tab) + 74px + env(safe-area-inset-bottom, 0px));
    z-index: 196; max-height: 62vh; max-height: 62dvh; overflow: auto;
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(10, 30, 60, .28);
  }
  /* 工具球（文字）与目录球（文字）：右下 / 左下，均贴底栏之上 */
  #zFab, #zTocFab {
    position: fixed; bottom: calc(var(--zg-tab) + 82px + env(safe-area-inset-bottom, 0px));
    min-width: 48px; height: 48px; padding: 0 14px; border-radius: 24px;
    background: var(--brand); color: #fff; z-index: 197;
    display: none; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 800; letter-spacing: 1px;
    box-shadow: 0 6px 18px rgba(10, 30, 60, .32); touch-action: none; -webkit-tap-highlight-color: transparent;
  }
  #zFab { right: 12px; }
  #zTocFab { left: 12px; }
  #zFab.on, #zTocFab.on { background: var(--accent); }
  #zFab svg { width: 24px; height: 24px; pointer-events: none; }

  /* 点击空白收起的遮罩：仅在面板展开时显形（透明） */
  #zShade {
    position: fixed; inset: 0; z-index: 195;
    background: rgba(10, 30, 60, .04); touch-action: none;
  }

  /* 目录：默认隐藏，点目录球后作为左侧浮动面板滑出（与桌面题录同结构） */
  body.zg-quiz-do .qz-toc { display: none; }
  body.zg-quiz-do.z-toc-open .qz-toc {
    display: flex; flex-direction: column;
    position: fixed; left: 10px; top: 64px; bottom: calc(var(--zg-tab) + 74px + env(safe-area-inset-bottom, 0px));
    width: min(86vw, 340px); z-index: 196; overflow: hidden;
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 12px 32px rgba(10, 30, 60, .28); background: #fff;
  }
}

/* ===================== 课程详情 ===================== */
@media (max-width: 767.98px) {
  .pd-top { grid-template-columns: 1fr; gap: 16px; padding: 14px; }
  .pd-main { aspect-ratio: 1 / 1; }
  .pd-main .cap .pm-b { font-size: 24px; }
  .pd-main .cap .pm-s { font-size: 12.5px; }
  .pd-thumbs { overflow-x: auto; gap: 8px; scrollbar-width: none; padding-bottom: 2px; }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  .pd-thumb { flex: none; width: 66px; height: 66px; }
  .pd-pricebox { padding: 12px 14px; }
  .pd-sku .opts { gap: 8px; }
  .pd-sku .opt { min-width: 0; flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .pd-attrs { grid-template-columns: 1fr; }
  .pd-btns { display: none; }              /* 已由吸底 CTA 承担 */
  /* 只保留一层吸顶：标签栏吸顶、header 不吸顶 */
  .pd-tabs { position: sticky; top: 0; z-index: 60; background: #fff; overflow-x: auto; scrollbar-width: none; }
  .pd-tabs::-webkit-scrollbar { display: none; }
  .pd-tabs > * { flex: none; min-height: 44px; }
  .spec-table td { min-width: 0; }
  /* 试听弹窗：左右改上下 */
  .tfm-box { width: 100vw; border-radius: 0; }
  .tfm-main { flex-direction: column; }
  .tfm-right { width: 100%; max-height: none; border-left: none; }
  .tfm-left { width: 100%; }
  .cs-les { min-height: 48px; }
  .cs-play { min-height: 44px; padding: 6px 14px; }
}

/* ===================== 试听页 ===================== */
@media (max-width: 767.98px) {
  .trial-grid { grid-template-columns: 1fr; gap: 14px; }
  .v-thumb { aspect-ratio: 16 / 9; }
  .v-thumb .tri { width: 46px; height: 46px; }
  .v-body h4 { min-height: 0; font-size: 16px; }
  .v-body { padding: 12px 14px 14px; }
  /* 弹窗内播放器：视频在上，片段列表在下 */
  .tfm-box { max-height: 92dvh; }
  .tfm-right { max-height: 40vh; overflow-y: auto; }
}

/* ===================== 下单页 ===================== */
@media (max-width: 767.98px) {
  .order-layout { grid-template-columns: 1fr; gap: 16px; }
  .ord-box { padding: 14px; }
  .field { margin-bottom: 12px; }
  #payBtn { display: none; }               /* 改由吸底 CTA 承担 */
  .pay-opt { min-height: 48px; }
  .sum-row { font-size: 14px; }
}

/* ===================== 个人中心（方案 A：橙条 + 横向 Tab） ===================== */
@media (max-width: 767.98px) {
  .acc-top { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .acc-stats { margin-left: 0; width: 100%; justify-content: space-around; gap: 0; }
  .acc-out { margin-left: 0; align-self: flex-end; }
  .acc-tabs { padding-bottom: 2px; }
  .acc-tabs a { padding: 9px 16px; }
  .cls-body { grid-template-columns: 1fr; gap: 12px; }
  .subj-list { flex-direction: row; overflow-x: auto; gap: 8px; padding-bottom: 4px; scrollbar-width: none; }
  .subj-list::-webkit-scrollbar { display: none; }
  .subj-item { flex: none; min-width: 140px; }
  .subj-item span { margin-left: 8px; }
}

/* ===================== 后台（只适配三块：概览 / 课程订单 / 书籍发货） ===================== */
@media (max-width: 767.98px) {
  .admin { grid-template-columns: 1fr; }        /* 手机上侧栏不再占 216px 列 */
  .admin .side { width: 100%; height: auto; min-height: 0; position: static; border: 0; padding: 0; }
  .admin .side .brand { display: none; }
  .admin #sideNav {
    display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; overflow-x: auto;
    padding: 8px 10px; background: #fff; border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .admin #sideNav::-webkit-scrollbar { display: none; }
  .admin #sideNav > * { flex: none; }
  .admin #sideNav .grp { display: none; }                 /* 分组标题在横排里是噪音 */
  .admin #sideNav a {
    min-height: 44px; display: inline-flex; align-items: center;
    padding: 0 14px; border: 1px solid var(--line); border-radius: 22px; font-size: 14px;
  }
  .admin .main { padding: 12px; }
  /* 指标卡容器把 6 列写死在 inline style 上，只有 !important 能覆盖（本文件第 1 处） */
  .admin .main .grid-stat { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; }
  .admin .stat-c { padding: 14px 12px; }
  .dash-tabs { overflow-x: auto; scrollbar-width: none; }
  .dash-tabs::-webkit-scrollbar { display: none; }
  .dash-tab { min-height: 44px; padding: 8px 16px; }
  /* 订单 / 发货表格：行转卡片（手机上横拖表格根本没法用） */
  .zg-cardlist thead { display: none; }
  .zg-cardlist tr { display: block; border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; padding: 10px 12px; }
  .zg-cardlist td { display: flex; justify-content: space-between; gap: 10px; border: none; padding: 5px 0; font-size: 14px; }
  .zg-cardlist td::before { content: attr(data-l); color: var(--muted); font-size: 13px; flex: none; }
  /* 其余后台页的提示条 */
  .zg-pc-tip {
    display: block; margin: 0 0 12px; padding: 10px 14px; border-radius: 10px;
    background: #FFF6E8; border: 1px solid #F5D9A8; color: #8A5A12; font-size: 13.5px;
  }
}
.zg-pc-tip { display: none; }

/* ===================== 触屏：hover 效果改常显 / 可点 ===================== */
@media (hover: none), (max-width: 767.98px) {
  .course-card:hover, .v-card:hover, .tea:hover, .feat:hover, .tier:hover, .q-item:hover { transform: none; }
  /* 下拉菜单：点一下展开（原 hover 规则保留不动，桌面不受影响） */
  .menu li.open > .drop { display: block; }
}

/* ===================== 小屏（≤400px）再压缩 ===================== */
@media (max-width: 400px) {
  .wrap { padding: 0 12px; }
  .t-head h2 { font-size: 20px; }
  .quick-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-row b { font-size: 23px; }
  .zg-cta-b { padding: 0 18px; font-size: 15px; }
  .zg-cta-p b { font-size: 18px; }
  .hero-btns .btn { font-size: 14.5px; }
}

/* ===================== 后台手机版：聚焦课程订单（侧栏隐藏，订单转卡片） ===================== */
@media (max-width: 767.98px) {
  /* 隐藏整条侧栏：手机只做订单管理，其余功能（班级管理 / 题库 / 视频库 / 设置…）不显示 */
  .admin .side { display: none; }
  .admin .main { padding: 10px; }
  /* 顶部栏在手机上紧凑：标题 + 操作按钮换行排布 */
  .admin .top-bar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; align-items: center; }
  .admin .top-bar h1 { font-size: 17px; }
  .admin .top-bar #saveTip { display: none; }
  .admin .top-bar .acts { gap: 6px; flex-wrap: wrap; margin-left: 0; width: 100%; justify-content: flex-end; }
  .admin .top-bar .acts .btn { padding: 7px 10px; font-size: 13px; }
  .admin .top-bar #liveOnline,
  .admin .top-bar #meTag { display: none; }

  /* 手机订单工具条：搜索框占满一行，状态下拉 + 刷新一行 */
  .ord-mtool { display: flex; gap: 8px; flex-wrap: wrap; }
  .ord-mtool input[type=text] { flex: 1 1 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; font-size: 15px; box-sizing: border-box; }
  .ord-mtool select { flex: 1 1 auto; padding: 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 14px; background: #fff; box-sizing: border-box; min-width: 120px; }
  .ord-mtool .ord-mrefresh { flex: 0 0 auto; white-space: nowrap; background: #ff7a00; color: #fff; border: none; font-weight: 700; }

  /* 订单卡片列表 */
  .ord-mlist { display: flex; flex-direction: column; gap: 10px; }
  .ord-mcard { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 12px 14px; }
  .ord-mhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
  .ord-mno { font-family: monospace; font-size: 13px; color: var(--muted); word-break: break-all; }
  .ord-mrow { display: flex; gap: 10px; padding: 4px 0; font-size: 14px; align-items: baseline; }
  .ord-mk { flex: 0 0 52px; color: var(--muted); font-size: 12.5px; }
  .ord-mv { flex: 1 1 auto; min-width: 0; word-break: break-word; }
  .ord-mamt { font-weight: 700; color: var(--ink); font-size: 15px; }
  .ord-pdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; margin-left: 5px; vertical-align: super; }
  .ord-mnote { margin: 6px 0 4px; padding: 8px 10px; background: #FFF8EC; border: 1px solid #F5E6C4; border-radius: 8px; font-size: 13px; color: #8A5A12; display: flex; gap: 10px; }
  .ord-mnote .ord-mk { flex: 0 0 52px; }
  .ord-macts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
  .ord-macts .btn { flex: 0 0 auto; }
  .ord-mprice { background: #ff7a00; color: #fff; border: none; font-weight: 700; }
  .ord-mrefund-on { color: var(--accent); font-weight: 700; border-color: var(--accent); }

  /* 分页条在手机上居中换行 */
  #oPagerBox { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 12px; font-size: 13px; }
  #oPagerBox > div:last-child { justify-content: center; }

  /* 弹窗在手机上近乎全屏，避免「改价 / 备注 / 退款」表单被挤窄
     （注意：登录/注册等小弹窗 modal-sm 见下方独立规则，居中白底不再全屏拉伸） */
  .modal { padding: 0; align-items: stretch; }
  .modal-box { width: 100% !important; max-width: 100% !important; max-height: 100vh; border-radius: 0; min-height: 100vh; overflow-y: auto; }
  .modal-head { position: sticky; top: 0; background: #fff; z-index: 2; border-bottom: 1px solid var(--line); }
  .modal-body { max-height: none !important; }

  /* 小弹窗（登录 / 注册）手机端：居中显示、白底圆角、限高可滚动，
     不再强制全屏拉伸导致内容下方露出 .modal-box 黑色背景形成大片黑边 */
  .modal:has(.modal-box.modal-sm) { align-items: center; padding: 16px; }
  .modal-box.modal-sm { width: 100% !important; max-width: 440px; min-height: 0; max-height: 90vh; border-radius: 16px; overflow-y: auto; }
  .modal-box.modal-sm .modal-head { position: static; }
  .modal-box.modal-sm .modal-body { max-height: calc(90vh - 58px); overflow-y: auto; }

  /* ---- 手机端移动菜单（汉堡 + 抽屉），聚焦订单管理、其余功能隐藏 ---- */
  #mMenuBtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 20px; line-height: 1; color: var(--ink); }
  .tt-wrap { display: flex; align-items: center; }
  .admin .top-bar h1 { margin: 0; }
  #mMenuMask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 90; display: none; }
  body.nav-open #mMenuMask { display: block; }
  #mMenu { position: fixed; top: 0; left: 0; bottom: 0; width: 82%; max-width: 320px; background: #fff; z-index: 100; transform: translateX(-100%); transition: transform .2s ease; display: flex; flex-direction: column; box-shadow: 2px 0 16px rgba(0,0,0,.18); }
  body.nav-open #mMenu { transform: translateX(0); }
  .m-menu-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--line); }
  .m-menu-head b { font-size: 16px; }
  .m-menu-x { border: none; background: transparent; font-size: 24px; line-height: 1; color: var(--muted); }
  .m-menu-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; -webkit-overflow-scrolling: touch; }
  .m-menu-list a { display: block; padding: 14px 14px; border-radius: 10px; font-size: 15.5px; color: var(--ink); text-decoration: none; }
  .m-menu-list a.on { background: #FFF1E2; color: #ff7a00; font-weight: 700; }
  .m-menu-list a:active { background: #f3f3f3; }
  .m-menu-grp { padding: 13px 14px 5px; font-size: 12px; color: var(--muted); font-weight: 700; letter-spacing: .5px; }
  .m-menu-acts { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
  .btn-block { display: block; width: 100%; text-align: center; box-sizing: border-box; }
}

/* 桌面端隐藏手机移动菜单（汉堡 / 抽屉 / 遮罩），保证桌面侧栏照常、零影响 */
@media (min-width: 768px) {
  #mMenuBtn, #mMenu, #mMenuMask { display: none !important; }
}