/* ============================================================
   手机版（WAP 主题）专用版式。
   只在 templates/mobile/ 的模板里被加载（紧跟在 site.css 之后），
   所以这里可以放心用 mb- 前缀的类名，不必担心影响电脑版。

   设计原则（和电脑版刻意不同的地方）：
     · 单列到底，不做多栏 —— 手机上多栏就是"要么挤、要么横滑"
     · 列表用「整行可点」，行高 ≥ 52px；卡片网格只在真正需要时用
     · 点击目标一律 ≥ 44px（拇指）；正文 16px 起
     · 顶部固定条 + 抽屉菜单，不放大轮播
   颜色与圆角沿用 site.css 的 CSS 变量，两套模板不会各配一套色。
   ============================================================ */

body.mb{background:var(--bg);-webkit-text-size-adjust:100%}
.mb-main{min-height:60vh;padding-bottom:8px}

/* ---------------- 顶栏 ---------------- */
.mb-bar{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.mb-bar.is-stuck{box-shadow:0 6px 20px rgba(13,27,42,.08)}
.mb-bar-in{display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:54px;padding:0 12px 0 14px}
/* 品牌区也是"控件"（点了回首页），点它得点得准 → 给足高度 */
.mb-brand{display:flex;align-items:center;gap:9px;min-width:0;min-height:44px;color:var(--ink)}
.mb-brand:active{opacity:.75}
.mb-logo{width:30px;height:30px;flex:none;border-radius:9px;background:var(--grad);color:#fff;
  display:flex;align-items:center;justify-content:center}
.mb-logo svg{width:17px;height:17px}
.mb-brand b{font-size:16px;font-weight:700;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mb-bar-act{display:flex;align-items:center;gap:2px;flex:none}
.mb-ico{width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  border:0;background:none;color:var(--ink);border-radius:var(--r-xs);cursor:pointer}
.mb-ico svg{width:21px;height:21px}
.mb-ico:active{background:var(--line-2)}

/* ---------------- 抽屉菜单 ---------------- */
.mb-drawer{display:none;position:absolute;left:0;right:0;top:54px;
  background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 18px 40px rgba(13,27,42,.13);
  max-height:calc(100vh - 54px);overflow:auto;-webkit-overflow-scrolling:touch}
.mb-drawer.open{display:block}
.mb-drawer-in{padding:8px 12px 16px}
.mb-dlink{display:flex;align-items:center;min-height:48px;padding:0 12px;
  font-size:15.5px;color:var(--ink-2);border-radius:var(--r-xs)}
.mb-dlink:active{background:var(--bg)}
.mb-dlink.on{color:var(--brand);font-weight:600;background:var(--grad-soft)}
.mb-dlink-alt{color:var(--muted);font-size:14px}
.mb-dsep{height:1px;background:var(--line-2);margin:8px 4px}

/* ---------------- 首页 ---------------- */
.mb-hero{padding:26px 18px 22px;background:linear-gradient(180deg,#f2f8fe,#fff)}
.mb-hero h1{font-size:26px;line-height:1.3;letter-spacing:-.02em;margin:0 0 10px}
.mb-hero p{font-size:14.5px;line-height:1.85;color:var(--muted);margin:0}
.mb-hero-act{display:flex;gap:10px;margin-top:18px}
.mb-hero-act .mb-btn{flex:1}

.mb-btn{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;
  background:var(--grad);color:#fff;border:0;border-radius:var(--r);
  font-size:15px;font-weight:600;box-shadow:var(--sh-brand)}
.mb-btn:active{filter:brightness(.96)}
.mb-btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line);box-shadow:none;font-weight:500}

.mb-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 12px 4px}
.mb-quick a{display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 4px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--ink-2);text-align:center}
.mb-quick a:active{background:var(--bg)}
.mb-q-ico{width:32px;height:32px;border-radius:10px;background:var(--grad-soft);
  display:flex;align-items:center;justify-content:center}
.mb-q-ico svg{width:17px;height:17px;color:var(--brand)}

.mb-sec{margin:18px 12px 0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mb-sec-h{display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 10px;border-bottom:1px solid var(--line-2)}
.mb-sec-h h2{font-size:16px;margin:0;letter-spacing:-.01em}
.mb-more{font-size:13px;color:var(--brand)}
.mb-note{padding:12px 14px;font-size:13.5px;line-height:1.85;color:var(--muted);margin:0}

/* ---------------- 列表：整行可点 ---------------- */
.mb-list{display:block}
.mb-item{display:block;padding:14px;border-bottom:1px solid var(--line-2);color:inherit}
.mb-item:last-child{border-bottom:0}
.mb-item:active{background:var(--bg)}
.mb-item-t{display:block;font-size:15.5px;font-weight:600;line-height:1.55;color:var(--ink)}
.mb-item-d{display:block;font-size:13px;line-height:1.7;color:var(--muted);margin-top:5px}
.mb-item-m{display:block;font-size:12px;color:#9db0c6;margin-top:7px}

/* ---------------- 内页头 ---------------- */
.mb-head{padding:16px 16px 14px;background:#fff;border-bottom:1px solid var(--line)}
.mb-crumb{display:flex;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.mb-crumb a{color:var(--muted)}
.mb-head h1{font-size:22px;line-height:1.35;letter-spacing:-.02em;margin:0 0 8px}
.mb-head p{font-size:13.5px;line-height:1.8;color:var(--muted);margin:0}
.mb-head-article h1{font-size:21px}
.mb-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}

.mb-article{margin:0;border-radius:0;border-left:0;border-right:0;padding:18px 16px 22px}
.mb-article .body{font-size:16px;line-height:1.95}
.mb-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.mb-acts{display:flex;gap:10px;margin-top:18px}
.mb-acts .mb-btn{flex:1}

.mb-pager{padding:16px 12px 24px;text-align:center}
.mb-pager .pager,.mb-pager nav{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mb-pager a{padding:9px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;font-size:14px}

/* ---------------- 页脚 ---------------- */
.mb-foot{margin-top:20px;padding:18px 16px calc(24px + env(safe-area-inset-bottom));
  background:#fff;border-top:1px solid var(--line)}
.mb-foot-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:14px}
.mb-foot-links a{font-size:14px;color:var(--ink-2)}
.mb-switch{display:flex;align-items:center;justify-content:center;gap:9px;min-height:46px;
  border:1px solid var(--line);border-radius:var(--r);font-size:14.5px;color:var(--ink-2);
  margin:4px 0 14px}
.mb-switch svg{width:17px;height:17px;color:var(--muted)}
.mb-switch:active{background:var(--bg)}
.mb-foot-note{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);
  padding-top:12px;border-top:1px solid var(--line-2)}

/* ---------------- 首页共享板块的手机化 ----------------
   这些板块与电脑版是**同一份 HTML**（home_sections.html），
   差别全靠这里把版式改成单列、更紧凑。改文案去改那个片段，别在这里叠字。 */
.mb .section{padding:34px 0}
.mb .section.tight{padding:26px 0}
.mb .sec-head{text-align:left}
.mb .sec-head.center{text-align:center}
.mb .sec-head h2{font-size:22px}
.mb .sec-head p{font-size:13.5px}
.mb .grid.c3{grid-template-columns:minmax(0,1fr);gap:12px}
.mb .feature{padding:15px 16px}
.mb .feature .ic{width:36px;height:36px;margin-bottom:10px}
.mb .feature h3{font-size:15.5px;margin-bottom:6px}
.mb .feature p{font-size:13.5px;line-height:1.8}
/* 六件能力在手机上收成"图标 + 标题"一行行的清单，比六张大卡短得多 */
.mb .persona{padding:16px}
.mb .persona h3{font-size:16px}
.mb .split2{gap:22px}
.mb .split-text h2{font-size:22px}
.mb .split-text p{font-size:14px;line-height:1.85}
.mb .split-text ul li{font-size:13.5px;line-height:1.75}
.mb .code-panel pre{font-size:11.5px;padding:14px}
.mb .steps{grid-template-columns:minmax(0,1fr);gap:12px}
.mb .step{padding:15px 16px}
.mb .step h3{font-size:15.5px}
.mb .step p{font-size:13.5px;line-height:1.8}
/* 能力清单是宽表格：手机上让它自己横滑，别把页面撑破 */
.mb .cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-sm)}
.mb .cmp{min-width:520px;font-size:13px}
.mb .faq-acc details{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px}
.mb .faq-acc summary{padding:15px 16px;font-size:14.5px;line-height:1.6}
.mb .faq-acc .faq-body{padding:0 16px 15px;font-size:13.5px;line-height:1.85}
.mb .entry{padding:14px 0}
.mb .entry h3{flex-basis:100%;order:2;font-size:15.5px;line-height:1.6}
.mb .cta-band{padding:26px 18px;border-radius:var(--r)}
.mb .cta-band h2{font-size:21px}
.mb .cta-band p{font-size:13.5px;line-height:1.85}
.mb .cta-band .btn-row{flex-direction:column}
.mb .cta-band .btn-row .btn{width:100%}

/* ---------------- 会员中心：侧栏改成横向标签条 ----------------
   手机上进会员中心，原先要先把那 520 多像素的侧栏（头像卡 + 6 个入口）滚完
   才轮得到内容 —— 等于每打开一个页面先看半屏导航。
   改成横滑标签条后只占一行，内容直接顶上来。 */
@media(max-width:820px){
  .wrap{padding-top:14px}
  .side{
    display:flex;gap:8px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding:0 0 10px;margin:0 0 14px;border-bottom:1px solid var(--line);
    /* 横向滚动条本身不显示（手机上划一下就出来），但不影响滚动 */
    scrollbar-width:none;
  }
  .side::-webkit-scrollbar{display:none}
  .side .ucard{display:none}   /* 手机上不需要头像卡：页头那栏已经有账号信息了 */
  .side .g{display:none}       /* 分组标题（「我的」）在横滑条里没意义 */
  .side a{
    flex:none;white-space:nowrap;margin:0;min-height:40px;padding:0 15px;
    display:inline-flex;align-items:center;gap:7px;
    border:1px solid var(--line);border-radius:var(--r-full);background:#fff;font-size:14px;
  }
  .side a svg{width:15px;height:15px}
  .side a.on{background:var(--grad-soft);border-color:#cfe4f7;color:var(--brand);font-weight:600}
  /* 侧栏里那个「待审核 / 邮箱未验证」角标跟着文字走，别换行 */
  .side a .n{font-size:11px;padding:1px 7px}
  .main{min-width:0}
}

/* ---------------- 文档站：目录收成**一行横滑** ----------------
   文档有 20 多篇，竖排目录在手机上要 880px 高，等于正文前先滚一屏半导航。
   改成一行的横滑条后只占约 48px。
   ⚠️ `display:contents` 是关键：目录是按分组嵌套的（docs-grp > docs-link），
      不给它去掉盒子，分组会各自成块、横条就散了。 */
@media(max-width:900px){
  /* ⚠️ 真正装链接的是内层的 `nav.docs-nav`（site.css 里给它设的是 display:grid），
     不是 .docs-side-inner —— 上一版把 flex 加在了外层，等于没改到东西，
     目录反而更高（1455px）。改之前先看清 DOM 层级，别按猜的选器写。 */
  .docs-side-inner{display:block;border-bottom:1px solid var(--line);padding:0 0 10px}
  .docs-side-head{margin-bottom:10px}
  .docs-nav{
    display:flex;flex-wrap:nowrap;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px;
  }
  .docs-nav::-webkit-scrollbar{display:none}
  .docs-grp{display:contents}      /* 让分组里的链接直接成为横条的项 */
  .docs-grp-t{display:none}        /* 分组名在横条里会让节奏很碎 */
  .docs-home,.docs-ver{flex:none}
  .docs-link{
    flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;
    border:1px solid var(--line);border-radius:var(--r-full);background:#fff;
    font-size:13.5px;white-space:nowrap;
  }
  .docs-link.on{box-shadow:none;border-color:#cfe4f7}
}

/* ---------------- 复用电脑版组件的手机修正 ----------------
   商店、会员中心、文档、搜索这些页面**继承电脑版模板**，
   它们内部的布局在手机上要能堆叠、表格要能横滑、按钮要够大。 */
@media(max-width:900px){
  .wrap,.container{padding-left:14px;padding-right:14px}
  .wrap{grid-template-columns:minmax(0,1fr)}
  .side{position:static;top:auto}
  .mk-grid,.grid,.news-grid{grid-template-columns:minmax(0,1fr)}
  .grid2,.grid3,.grid.c2{grid-template-columns:minmax(0,1fr)}
  .mk-detail,.mk-head,.mk-body,.mk-side{grid-template-columns:minmax(0,1fr)}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .m-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .member-hero{padding:18px}
  .docs-wrap{grid-template-columns:minmax(0,1fr);padding:18px 14px 50px}
  .docs-side{position:static;max-height:none}
  .page-h{flex-direction:column;align-items:flex-start;gap:12px}
}

/* ---------------- 商店：卡片列表化 + 购买区置顶层 ----------------
   电脑版是四列卡片网格；手机上直接继承会变成"一屏一张卡"，
   滚动极长。这里把信息压紧：图小一点、间距小一点，购买按钮更好按。 */
@media(max-width:900px){
  /* 商品卡：横过来排 —— 左图右字，一屏能看到三四个商品 */
  .mk-card{flex-direction:row;align-items:stretch;min-height:104px}
  .mk-card .mk-shot{width:112px;flex:none;height:auto;min-height:104px}
  .mk-card .mk-type{left:8px;top:8px;font-size:11px;padding:2px 7px}
  .mk-card .mk-body{padding:11px 12px;min-width:0;justify-content:space-between}
  .mk-card-link{font-size:15.5px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 简介在手机上只留一行：两行会把卡片顶到 180px，一屏就少看一个商品 */
  .mk-card .mk-intro{font-size:12.5px;margin-top:4px;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .mk-card .mk-price{font-size:15px}
  .mk-card .mk-foot{padding:9px 12px;font-size:11.5px}
  .mk-card .mk-stats{font-size:11.5px}
  /* 筛选项、标签组：横向可滑，不换行堆成一片 */
  .mk-chips,.mk-tabs{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:4px;flex-wrap:nowrap}
  .mk-chips::-webkit-scrollbar,.mk-tabs::-webkit-scrollbar{display:none}
  .mk-chips-label{flex:none;align-self:center}
  /* 商品详情：主图不占满整屏，购买区更紧凑 */
  .mk-gallery-main{max-height:300px}
  .mk-title{font-size:20px}
  .mk-buy{padding:16px}
  .mk-facts>div{font-size:13.5px;padding:10px 0}
  .mk-acts{flex-direction:column}
  .mk-acts .mk-btn{width:100%}
}

/* 标签类小圆片在手机上给足高度（手指点得到）。
   36px 是量出来的底线：34px 的时候审计会报"点击目标偏小"。 */
.chip,.tag-badge,.mk-chip{min-height:36px;display:inline-flex;align-items:center;
  padding-left:12px;padding-right:12px}

/* ---------------- 筛选条：手机上横向可滑，别堆成一片 ----------------
   多条件筛选在手机上最怕"三行圆片换行成六行"，把结果挤到屏幕外。
   这里每一行都改成横滑，行高保持一行。 */
@media(max-width:820px){
  .ncf{padding:10px 12px;margin-bottom:14px}
  .ncf-row{display:block;padding:8px 0}
  .ncf-k{width:auto;line-height:1.4;margin-bottom:6px;display:block}
  .ncf-chips{
    flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px;
  }
  .ncf-chips::-webkit-scrollbar{display:none}
  .ncf-chip{flex:none;height:36px}
  .nc-count{margin:12px 0 8px}
}

/* ---------------- 评论区（core/CommentView.php） ----------------
   电脑版那份结构原样复用，这里只改**密度**：
   手机屏窄，38px 头像 + 24px 内边距会把正文挤成一条细缝。 */
@media(max-width:820px){
  .cm-wrap{margin-top:22px;padding:16px;border-radius:var(--r-lg)}
  .cm-title{font-size:17px}
  .cm-hint{font-size:12px;min-width:100%}
  .cm-item{gap:10px;padding:14px 0}
  .cm-avatar{width:32px;height:32px;font-size:13.5px}
  .cm-text{font-size:14px;line-height:1.85}
  .cm-replies{padding-left:10px}
  .cm-row{grid-template-columns:minmax(0,1fr)}
  /* 验证码：题目在输入框下方另起一行，否则 6 位数字框只剩一半宽 */
  .cm-cap{grid-template-columns:minmax(0,1fr)}
  .cm-cap-q{justify-self:start;align-self:flex-start}
  /* 回复按钮是**操作按钮**，不能只有文字高度 */
  .cm-reply{min-height:36px;display:inline-flex;align-items:center;padding:0 2px}
  .cm-pg{min-width:38px;min-height:38px;display:inline-flex;align-items:center;justify-content:center}
}
/* 浮层提示往下让开顶栏。
   手机版顶栏 .mb-bar 高 54px 且 sticky，提示必须落在它下面 ——
   贴太近会被顶栏盖住，而且指针事件会被顶栏拦走（关闭按钮点不动）。 */
@media(max-width:820px){
  .nc-toast{top:62px;max-width:calc(100vw - 24px);font-size:13px}
}

/* 表单：手机上输入框一律 16px（iOS 聚焦时不放大页面） */
input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=number],input[type=search],input[type=url],textarea,select{font-size:16px}
.mb .btn{min-height:44px}
/* ⚠️ 必须列上具体容器选择器：`.cm-field input` 是「类+元素」(0,1,1)，
   光写元素选择器压不住它，真机上仍是 14px（iOS 一聚焦就放大整页）。 */
.cm-field input,.cm-field textarea{font-size:16px}