@charset "utf-8";
/* 甄宝园 zby365.com — 移动端模板 m.zby365.com · 设计系统总表 (Mobile)
   与 PC 端共用同一套色彩令牌，仅重排布局。 */

:root{
  --bg:#F5F7FB; --bg2:#EDF1F8; --card:#FFFFFF;
  --line:#E7EAF3; --line2:#F1F3F9;
  --ink:#111629; --ink2:#454C63; --ink3:#7C8399; --ink4:#A9AFC2;
  --b-soft:#2563EB; --b-proj:#7C4DFF; --b-hub:#0C8379; --b-guide:#B45E10;
  --c-pc:#2563EB; --c-tv:#7C3AED; --c-android:#0E855B;
  --c-online:#1C75D5; --c-ai:#8B3FE0; --c-fun:#D13185; --c-office:#0E7CB4;
  --c-dl:#0E827A; --c-movie:#C84D17; --c-sys:#556178; --c-res:#4B3FD6;
  --c-edu:#178648; --c-live:#0A8281; --c-printer:#5A55D8; --c-tvbox:#A86509; --c-other:#5C7A16; --c-tut-tv:#6D28D9; --c-tut-pc:#1D4ED8; --c-tut-mb:#0A6B49; --c-tut-ot:#4A6212;
  --ok:#15803D; --ok-bg:#E9F7EF; --warn:#A86509; --warn-bg:#FDF4E3;
  --danger:#C4302B; --danger-bg:#FDEDEC; --info:#1C75D5; --info-bg:#EAF2FD;
  --r-card:13px; --r-btn:10px;
  --sh:0 1px 2px rgba(17,22,41,.05), 0 6px 16px -10px rgba(17,22,41,.14);
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --tabh:54px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink2);font:15px/1.7 var(--font);
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;border:0;}
ul,ol{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:700;line-height:1.4;}
p{margin:0 0 1em;}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer;}
.pad{padding:0 14px;}
.clamp1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---------- 空状态（栏目内还没有内容时） ---------- */
/* 空状态（栏目内还没有内容时）：8 个列表模板都带上，并给 3 篇全站最新收录当出口。 */
.empty{padding:26px 14px 34px;text-align:center;color:var(--ink4);}
.empty>b{display:block;font-size:15px;color:var(--ink2);margin-bottom:7px;}
.empty>p{font-size:13px;line-height:1.75;margin:0;}
.empty .elist{list-style:none;margin:16px 0 0;padding:0;text-align:left;}
.empty .elist li{display:flex;align-items:baseline;gap:8px;padding:11px 12px;margin-bottom:8px;
  background:var(--card);border:1px solid var(--line);border-radius:11px;}
.empty .elist li:last-child{margin-bottom:0;}
.empty .elist li a{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.empty .elist li em{flex:0 0 auto;font-style:normal;font-size:11.5px;color:var(--ink4);}
.empty .eact{margin-top:16px;}
.empty .eact a{display:block;padding:12px;border-radius:11px;
  background:var(--cc,var(--b-soft));color:#fff;font-size:14px;font-weight:600;}

/* ---------- 顶栏 ---------- */
.mhead{position:sticky;top:0;z-index:30;background:var(--card);
  border-bottom:1px solid var(--line);}
.mhead .in{height:54px;display:flex;align-items:center;gap:12px;padding:0 14px;}
.mhead .menu{width:34px;height:34px;flex:none;display:flex;flex-direction:column;
  justify-content:center;gap:4px;}
.mhead .menu i{height:2px;border-radius:2px;background:var(--ink2);display:block;}
.mhead .menu i:nth-child(2){width:70%;}
/* ⚠️ 首页把 logo 包了一层 <h1 class="lg-h">，而 h1 是 .in 的 flex item、默认 flex:0 1 auto，
   会把里面 .lg 的 flex:1 关掉（flex:1 只对直接父容器生效）→ 首页搜索框整体左偏 27px。
   这里让 h1 自己承担 flex:1。顶栏每页都出现，首页与其它页必须逐像素一致。 */
.mhead h1.lg-h{flex:1;min-width:0;display:flex;align-items:center;}
.mhead .lg{--mkh:30px;display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
.mhead .lg img{height:var(--mkh);width:auto;flex:none;display:block;}
/* 字高与图形标等高（同 PC 算法）。nowrap + 省略号给右侧搜索框让位，344px 以下直接隐藏字标。 */
.mhead .lg b{font-size:calc(var(--mkh) * 1.02);font-weight:700;color:var(--ink);
  line-height:1;letter-spacing:.2px;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}

/* 顶栏常驻搜索框：SDCMS 拿不到 keyword 时吐错误页，裸链接是死的，所以入口必须自带输入框。
   宽度 clamp(104px,42vw,150px) 是为 320~430px 都能用；:focus-within 才高亮。 */
.mhead .msch{flex:none;width:clamp(104px,42vw,150px);height:34px;display:flex;
  align-items:center;border:1.5px solid var(--line);border-radius:9px;
  background:var(--bg);overflow:hidden;transition:.18s;}
.mhead .msch:focus-within{border-color:var(--b-soft);background:#fff;}
.mhead .msch input{flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:13px;padding:0 4px 0 9px;color:var(--ink);
  -webkit-appearance:none;appearance:none;}
.mhead .msch input::placeholder{color:var(--ink4);}
/* Safari 默认给的搜索装饰与清除键会在这么窄的框里挤掉文字，藏掉 */
.mhead .msch input::-webkit-search-decoration,
.mhead .msch input::-webkit-search-cancel-button{-webkit-appearance:none;display:none;}
.mhead .msch button{width:32px;height:100%;flex:none;background:none;color:var(--ink3);
  display:flex;align-items:center;justify-content:center;}
.mhead .msch svg{width:16px;height:16px;display:block;}
/* 全站唯一一条媒体查询：344px 以下顶栏放不下「汉堡 + logo 字标 + 搜索框」，让字标退场，
   留住图形标（品牌底限）与搜索框（功能底限）。360px 是安卓常见最小宽度，故断点定在 344。 */
@media (max-width:344px){.mhead .lg b{display:none;}}

/* 板块横向切换 */
.mboards{position:sticky;top:54px;z-index:29;background:var(--card);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;}
.mboards::-webkit-scrollbar{display:none;}
.mboards .in{display:flex;gap:4px;padding:0 12px;min-width:max-content;}
.mboards a{position:relative;padding:11px 13px 12px;font-size:14px;font-weight:600;
  color:var(--ink3);white-space:nowrap;}
.mboards a.on{color:var(--bc,var(--b-soft));}
.mboards a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:var(--bc,var(--b-soft));}

/* 抽屉菜单（全站栏目）：交互由 public/css/ui.css + ui.js 提供（.ui-offside / .ui-offside-left），
   这里只画内容与配色。这是手机端二级栏目的唯一入口，不能省。
   ⚠️ 面板宽度不在这里定 —— 在 mobile/css/cms.css 第 1 节（连同关闭按钮），
      那里必须比屏幕窄，否则遮罩被盖死、抽屉关不掉。 */
.ui-offside{background:var(--card);box-shadow:0 0 40px rgba(17,22,41,.2);}
.ui-offside .mtitle{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:15px 18px 9px;font-size:11px;letter-spacing:.16em;
  color:var(--ink4);font-weight:600;}
.ui-offside .mtop{display:block;margin:0 12px;padding:11px 14px;border-radius:10px;
  font-size:15px;font-weight:600;color:var(--ink);background:var(--bg2);}
.ui-offside .mtitle2{padding:16px 18px 7px;}
.ui-offside .mtitle2 a{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;
  font-weight:700;color:var(--ink);}
.ui-offside .mtitle2 a::before{content:"";width:3px;height:14px;border-radius:2px;
  background:var(--bc,var(--b-soft));}
.ui-offside .mitems{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 2px;}
.ui-offside .mitems a{display:inline-flex;align-items:center;gap:6px;font-size:13px;
  padding:6px 11px;border-radius:8px;background:var(--line2);color:var(--ink2);}
.ui-offside .mitems a.on{background:var(--cc);color:#fff;}
.ui-offside .mitems a i{width:5px;height:5px;border-radius:2px;background:var(--cc);flex:none;}
.ui-offside .mitems a.on i{background:#fff;}
.ui-offside .mtail{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:14px 18px;
  border-top:1px solid var(--line);}
.ui-offside .mtail a{font-size:12.5px;color:var(--ink3);padding:6px 11px;
  border:1px solid var(--line);border-radius:999px;}

/* 板块速览（替代 Hero）：首屏先给「网站有哪几个板块」，零图片、零大面积色。
   ⚠️ 列轨道必须写 minmax(0,1fr)：1fr = minmax(auto,1fr)，下界取列内 min-content，
      而描述 span 是 nowrap —— 线上描述是完整 cate_desc（40 字），会把文档撑到 847px。 */
.mquick{margin:12px 14px 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.mquick a{position:relative;display:block;padding:11px 13px 11px 16px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);}
.mquick a::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;
  border-radius:0 3px 3px 0;background:var(--bc,var(--b-soft));}
.mquick a b{display:block;font-size:15px;color:var(--ink);line-height:1.35;}
.mquick a span{display:block;font-size:11.5px;color:var(--ink4);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mquick a i{position:absolute;right:11px;top:12px;font-style:normal;font-size:11px;
  font-family:var(--mono);font-weight:700;color:var(--bc,var(--b-soft));}

/* 二级列表页标题条：刻意只做一行 —— 移动端列表页没有栏目头（不放描述、统计、面包屑），
   进来第一眼就是内容。栏目名只留一行，免得从搜索/外链进来的读者不知道自己在哪一栏。 */
.mbar{display:flex;align-items:baseline;gap:9px;margin:13px 14px 0;}
.mbar h1{font-size:19px;}
.mbar .n{font-size:12px;font-family:var(--mono);color:var(--cc);}

/* 栏目分类条（一级页「板块内栏目」＋ 二级页「同级栏目」）：横向滚动已改成换行等宽网格
   （横滑滑不到头，项目推荐 10 项在手机上看不全）。一级页取板块色、二级页取当前栏目识别色，
   .on 实心高亮 —— 与 PC 的 .cbars 同构（PC 每行 5 个，手机 3 个）。
   列数固定 3：390px 下每格约 116px，4 列会被挤成省略号。末行不满时左对齐留白，不做均分拉伸。 */
.mcats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:11px 14px 0;}
.mcats a{font-size:13px;padding:8px 9px;border-radius:999px;background:var(--line2);
  color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-align:center;border:1px solid transparent;}
.mcats a i{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.65;margin-left:4px;}
.mcats a.on{background:var(--cc);border-color:var(--cc);color:#fff;font-weight:600;}
.mcats a.on i{opacity:.85;}

/* 排序条 .msort 已删除：SDCMS 的排序是栏目后台配置项、不是 URL 参数，模板又禁写 $_GET，
   在真站上这两排胶囊永远点不动。站长口径「做不出就取消」，样式与标记两端都不留。 */

/* ---------- 分页 ---------- */
.mpager{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:18px 14px 6px;flex-wrap:wrap;}
.mpager a,.mpager span{min-width:34px;height:34px;padding:0 11px;border-radius:9px;
  background:var(--card);border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;font-size:13px;color:var(--ink2);}
.mpager .on{background:var(--cc);border-color:var(--cc);color:#fff;font-weight:600;}
.mpager em{font-style:normal;font-size:12px;color:var(--ink4);width:100%;text-align:center;
  margin-top:2px;}
/* 线上分页是 {$showpage} 输出的 ul>li>a 结构，不补一层归零，浏览器默认的 list-style
   与 padding-left 会把分页挤歪（PC 的 .pager 有同一段规则，两端同理）。 */
.mpager ul{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;}
.mpager li{display:flex;}
.mpager li>a{min-width:34px;height:34px;padding:0 11px;border-radius:9px;background:var(--card);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:13px;color:var(--ink2);font-family:var(--mono);}
.mpager li.active>a{background:var(--cc);border-color:var(--cc);color:#fff;font-weight:700;}
.mpager li>a:not([href]){color:var(--ink4);background:var(--bg2);border-color:var(--line2);}

/* ---------- 板块块 ---------- */
.msec{margin:18px 0 0;}
.msec-hd{display:flex;align-items:center;justify-content:space-between;padding:0 14px;margin-bottom:11px;}
.msec-hd .l{display:flex;align-items:center;gap:9px;}
.msec-hd .bar{width:4px;height:17px;border-radius:3px;background:var(--cc,var(--b-soft));}
.msec-hd h2{font-size:17px;}
.msec-hd .more{font-size:12.5px;color:var(--ink4);}

.mboard{margin:0 14px 12px;border-radius:14px;overflow:hidden;background:var(--card);
  border:1px solid var(--line);}
.mboard header{padding:13px 15px;background:var(--bc);color:#fff;display:flex;
  align-items:center;justify-content:space-between;gap:12px;position:relative;overflow:hidden;}
.mboard header::after{content:"";position:absolute;right:-26px;top:-36px;width:96px;height:96px;
  border-radius:50%;background:rgba(255,255,255,.13);}
.mboard header .t{position:relative;z-index:2;flex:1;min-width:0;}
.mboard header b{font-size:16px;color:#fff;display:block;}
.mboard header span{font-size:11.5px;opacity:.85;}
/* 板块描述钉死一行：四张板块卡纵向排开，描述长短不一折行会让每张卡高度都不一样。 */
.mboard header .t span{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.mboard header .n{position:relative;z-index:2;font-family:var(--mono);font-size:12px;opacity:.88;}
.mboard .chs{display:flex;flex-wrap:wrap;gap:7px;padding:12px 14px;border-bottom:1px solid var(--line2);}
.mchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 10px;
  border-radius:999px;background:var(--line2);color:var(--ink2);}
.mchip i{width:6px;height:6px;border-radius:2px;background:var(--cc);flex:none;}

/* ---------- 紧凑列表 ---------- */
.mlist{background:var(--card);border-top:1px solid var(--line2);}
.mlist a{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line2);align-items:flex-start;}
.mlist a:last-child{border-bottom:0;}
.mlist .bd{flex:1;min-width:0;}
.mlist .bd b{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.55;}
.mlist .bd p{font-size:12.5px;color:var(--ink4);line-height:1.65;margin:5px 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mlist .bd .mt{display:flex;gap:9px;align-items:center;margin-top:7px;
  font-size:11.5px;color:var(--ink4);flex-wrap:wrap;}
/* 列表缩略图 64 方形置于左侧（手机信息流左图右文的扫读习惯）；图片是辅助识别、不是主视觉。 */
.mlist a .th{order:-1;}
.mlist .th{position:relative;width:64px;height:64px;border-radius:9px;overflow:hidden;flex:none;background:var(--bg2);}
.mlist .th img{width:100%;height:100%;object-fit:cover;}
/* 序号角标：专题列表把「第几篇」叠在封面左上角（独立占一列要花 54px + 11px 间距，
   390 视口下标题会被挤成三行）。左上角由父级 overflow:hidden 的圆角裁出，这里只补右下圆角。 */
.mlist .th i{position:absolute;left:0;top:0;font-style:normal;font-family:var(--mono);
  font-size:10px;font-weight:700;line-height:1;color:#fff;background:rgba(17,20,28,.72);
  padding:3px 6px;border-radius:0 0 8px 0;}
/* 无图列表项：正文占满整行，不再留空图位 */
.mlist a.notx .bd b{font-size:14.5px;}
/* 独立列表（栏目页 / 相关推荐）：卡片外框 + 列表内容 —— 列表式，不是卡片网格 */
.mlist.stand{margin:0 14px;border:1px solid var(--line);border-radius:13px;overflow:hidden;}
.mlist.stand .bd b{font-size:14.5px;}
.mlist .more-bd{display:block;text-align:center;color:var(--ink4);font-size:13px;padding:12px 0;}

/* ---------- 详情页 ---------- */
.mcrumb{display:flex;gap:7px;align-items:center;font-size:12px;color:var(--ink4);
  padding:12px 14px 0;flex-wrap:wrap;}
.mcrumb b{color:var(--ink2);}
.mart{padding:14px;}
.mart h1{font-size:21px;line-height:1.5;margin:10px 0 12px;}
.mart .cat{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  color:#fff;background:var(--cc);padding:4px 11px;border-radius:999px;}
.mart .meta{display:flex;gap:14px;font-size:11.5px;color:var(--ink4);flex-wrap:wrap;}
.mact{margin:14px 0 0;border-radius:12px;padding:14px;background:color-mix(in srgb,var(--cc) 8%,#fff);
  border:1px solid color-mix(in srgb,var(--cc) 20%,#fff);}
.mact .info{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px;}
.mact .info span{font-size:11px;color:var(--ink4);display:block;}
.mact .info b{font-size:13px;color:var(--ink);font-family:var(--mono);}
/* 中文值（专题名 / 栏目名）不套等宽：等宽字体没有中文字形，浏览器会退回系统字体、声明无效。 */
.mact .info b.txt{font-family:var(--font);}

/* 组图（SDCMS 的组图字段）：两列方图，点击进 .ui-lightbox（交互在 ui.js）。
   位置在正文之后 —— 详情页组图基本都是正文配图，压在标题与摘要之间会把真正的第一段顶出屏幕。
   ⚠️ 高度用 padding-top 撑而不是 aspect-ratio：老安卓内核不认后者，图会按原始比例撑高、两列参差。 */
.mpics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 14px 0;}
.mpics a{position:relative;display:block;padding-top:75%;border-radius:10px;overflow:hidden;
  background:var(--bg2);}
.mpics img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;}

/* 下载地址列表（多来源），与 PC 的 .dlbox / .dtbox 成对：
   ① 位置：.mdl / .mdtbox 都在正文之后，文末那份「快捷入口」已整体删掉，全篇只留这一处。
   ② 对比度：1px var(--line) 白边在白底上只有 1.06:1 ＝ 没有边界，改成 1.5px 识别色描边
      + 顶部 3px 实色条 + 块头 10% 底。⚠️ 两端必须一起改，只改一端会出现同一个块两个样子。 */
.mdl{margin:16px 0 0;border:1.5px solid color-mix(in srgb,var(--cc,var(--b-soft)) 34%,#fff);
  border-radius:12px;background:var(--card);overflow:hidden;position:relative;}
.mdl::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--cc,var(--b-soft));}
.mdl-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line2);
  background:color-mix(in srgb,var(--cc,var(--b-soft)) 10%,#fff);font-size:14px;font-weight:700;color:var(--ink);}
.mdl-hd span{font-size:11.5px;color:var(--ink3);font-weight:400;font-family:var(--mono);}
.mdli{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line2);}
.mdli:last-child{border-bottom:0;}
/* --pt = 品牌色块上的文字色（模板 $pandark 给），默认白；10 个浅色品牌改深色，否则白字是糊的。 */
.mdli .ic{flex:none;width:34px;height:34px;border-radius:9px;background:var(--pc);color:var(--pt,#fff);
  font-size:11px;font-weight:700;display:grid;place-items:center;letter-spacing:.3px;}
/* 真图标 —— 与线上 images/pan/*.png 同一套，透明底直接显示 logo */
.mdli .ic.im{background:transparent;}
.mdli .ic.im img{width:100%;height:100%;display:block;object-fit:contain;}
.mdli .tx{flex:1;min-width:0;}
.mdli .tx b{display:block;font-size:14px;font-weight:700;color:var(--ink);}
/* 域名行原来是 --ink4（2.2:1，白底上几乎看不见）—— 它是「这条链接通向哪」的唯一凭据 */
.mdli .tx i{display:block;font-style:normal;font-size:11.5px;color:var(--ink2);font-family:var(--mono);
  margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mdli .pw{flex:none;font-size:11.5px;color:var(--ink2);}
.mdli .pw b{font-family:var(--mono);color:var(--ink);}
/* 提取码 + 「复制」按钮折到第三行：390px 放不下「图标 + 名称/域名 + 提取码 + 复制 + 下载」五个元素。
   ⚠️ .ui-pan-copy / .ui-pan-pwd 是 js/cms.js 的钩子类名 —— 结构可以折行，类名不能改。
   ⚠️ 复制按钮不钉宽度：cms.js 会把文字换成「已复制」，钉死了窄屏下会挤掉名称列。 */
.mdli .tx .pw{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap;}
.mdli .ar{flex:none;font-size:12px;font-weight:700;color:var(--pt,#fff);background:var(--pc);
  border-radius:7px;padding:7px 13px;}
/* 资源直达（项目推荐型详情页）：只有 mygithub + mysiteurl 两个字段，形态是两张官方入口卡，
   同样只出现在正文之后一处。 */
.mdtbox{margin:16px 0 0;border:1.5px solid color-mix(in srgb,var(--cc,var(--b-soft)) 34%,#fff);
  border-radius:12px;background:var(--card);overflow:hidden;position:relative;}
.mdtbox::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--cc,var(--b-soft));}
.mdt-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line2);
  background:color-mix(in srgb,var(--cc,var(--b-soft)) 10%,#fff);font-size:14px;font-weight:700;color:var(--ink);}
.mdt-hd span{font-size:11.5px;color:var(--ink3);font-weight:400;}
/* `.mdt-hd a`（块头的「↑ 回文首」小按钮）2026-10-11 删 —— 文末回文首已无意义。 */
/* 两行各自按 --dt 上色：GitHub 近黑、网站直达取栏目色 —— 原来白底 + 1px 浅灰线，整块糊成一片。 */
.mdtl{display:flex;align-items:center;gap:12px;padding:13px 14px;
  border-bottom:1px solid color-mix(in srgb,var(--dt) 26%,#fff);
  background:color-mix(in srgb,var(--dt) 6%,#fff);text-decoration:none;}
.mdtl:last-child{border-bottom:0;}
.mdtl .di{flex:none;width:40px;height:40px;border-radius:11px;background:var(--dt);color:#fff;
  display:grid;place-items:center;}
.mdtl.gh{--dt:#181717;}
.mdtl.st{--dt:var(--cc);}
.mdtl .di svg{width:20px;height:20px;}
.mdtl .tx{flex:1;min-width:0;}
.mdtl .tx b{display:block;font-size:15px;font-weight:700;color:var(--ink);}
.mdtl .tx i{display:block;font-style:normal;font-size:11.5px;color:var(--ink2);font-family:var(--mono);
  margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* 「→」用 --dt 往 --ink 混 28%，近黑与任意栏目色都 ≥4.5:1 */
.mdtl .ar{flex:none;font-size:13px;font-weight:700;white-space:nowrap;
  color:color-mix(in srgb,var(--dt) 72%,var(--ink));}
.mdt-foot{padding:10px 14px;font-size:11.5px;line-height:1.7;color:var(--ink3);
  border-top:1px solid var(--line2);background:var(--bg2);}
.mdl-foot{padding:10px 14px;font-size:11.5px;line-height:1.7;color:var(--ink3);
  border-top:1px solid var(--line2);background:var(--bg2);}
.mbtn{display:flex;align-items:center;justify-content:center;gap:6px;height:44px;
  border-radius:10px;background:var(--cc);color:#fff;font-size:15px;font-weight:600;}
/* 白底按钮的描边原来也是 1px var(--line)——白底上看不见，按钮像没长边 */
.mbtn.gh{background:#fff;color:var(--cc);
  border:1.5px solid color-mix(in srgb,var(--cc,var(--b-soft)) 34%,#fff);}
.mbtn.sm{height:38px;font-size:13.5px;border-radius:9px;}

.mbody{background:var(--card);border-top:1px solid var(--line2);padding:16px 14px 22px;
  font-size:16px;line-height:1.95;color:#2B3040;}
.mbody p{margin:0 0 1.1em;}
.mbody h2{font-size:18px;margin:1.7em 0 .7em;padding-left:11px;position:relative;}
.mbody h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:4px;
  border-radius:3px;background:var(--cc);}
.mbody h3{font-size:16px;margin:1.5em 0 .6em;}
.mbody img{border-radius:9px;margin:1.2em auto;}
.mbody ul,.mbody ol{padding-left:1.4em;margin:0 0 1.1em;}
.mbody ul{list-style:disc;} .mbody ol{list-style:decimal;}
.mbody li{margin:.4em 0;}
.mbody a{color:var(--cc);}
.mbody blockquote{margin:1.2em 0;padding:12px 14px;background:var(--line2);
  border-left:4px solid var(--cc);border-radius:0 9px 9px 0;font-size:14.5px;}
.mbody code{font-family:var(--mono);font-size:13px;background:#F2F4F9;color:#C4302B;
  padding:2px 5px;border-radius:5px;}
.mbody pre{background:#151A2B;color:#DCE3F5;border-radius:10px;padding:14px;overflow:auto;
  font-family:var(--mono);font-size:13px;line-height:1.7;margin:1.2em 0;}
.mbody pre code{background:none;color:inherit;}
.mbody table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:13.5px;
  display:block;overflow-x:auto;}
.mbody th,.mbody td{border:1px solid var(--line);padding:9px 11px;}

.mnotice{margin:16px 0 0;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.75;}
.mnotice.warn{background:var(--warn-bg);color:#8A5406;}
.mnotice.danger{background:var(--danger-bg);color:#96322E;}
.mnotice.ok{background:var(--ok-bg);color:#11632F;}

.mtags{display:flex;gap:8px;flex-wrap:wrap;padding:16px 14px 0;}
.mtags a{font-size:12px;background:var(--line2);color:var(--ink3);padding:5px 11px;border-radius:999px;}
/* 热门标签（前 12 个按 hits 排），与 PC 的 .cloud a.hot 同套。底色用 color-mix 压低饱和度：
   实心铺 --cc 会在标签云里形成色斑，而标签是跨板块的，用哪个板块色都不对。 */
.mtags a.hot{background:color-mix(in srgb,var(--cc) 12%,#fff);color:var(--cc);font-weight:600;}

/* 友情链接（首页底部）：**不加底色胶囊**（友链可能是一枚 logo 图），靠间距分组。
   与 PC 一样是纯链接：友链是双向义务，样式越普通越好。 */
.mlinks{display:flex;flex-wrap:wrap;align-items:center;gap:10px 15px;padding:2px 14px 0;}
.mlinks a{font-size:12.5px;color:var(--ink3);}
.mlinks a img{height:26px;width:auto;display:block;border-radius:4px;}

/* 底部 TabBar：grid 直接作用于 nav 横向平分（少一层包裹就会退化成纵向堆叠）。
   ⚠️ 列轨道写 minmax(0,1fr)：下界取 min-content，标签长了会把整行撑宽。
   ⚠️ .cols3 是后台关掉留言时的退化形态，不跟着改列数第四格会空着。
   ⚠️ 四格图标是自绘 SVG，不许单独换其中一枚（字符图标跨系统形状不一，✉ 在 iOS 会变 emoji）。 */
.mtab{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.mtab.cols3{grid-template-columns:repeat(3,minmax(0,1fr));}
.mtab .in{display:contents;}   /* 兼容带 .in 包裹的旧写法 */
.mtab a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  height:var(--tabh);font-size:11px;color:var(--ink4);}
.mtab a i{display:flex;font-style:normal;}      /* 图标容器：只负责包住 svg */
.mtab a i svg{display:block;width:22px;height:22px;}
.mtab a.on,.mtab a.on i{color:var(--b-soft);}

/* 页脚：只留版权 + 权益声明（导航职责归底部 TabBar）。
   颜色是量出来定的：正文不能用 --ink3（对 --bg 只有 3.52:1），改用 --ink2（7.94:1）；
   链接用品牌蓝 --b-soft（4.82:1），与全站链接色一致。 */
.mfoot{padding:18px 14px 22px;text-align:center;font-size:11.5px;color:var(--ink4);line-height:1.7;}
.mfoot .cp{margin:0;}
/* 入口组（.lk）：与版权同一行居中，只放「网站地图 / 电脑版」两个 ——
   底部 TabBar 已占「首页 / 分类 / 标签 / 留言」四格，页脚再放就是同一页的重复入口。
   ⚠️ white-space:nowrap 让两个链接**成组换行**（拆成上下两行看着像漏字）。
   ⚠️ 间距只用 margin-left、不加尾部 margin：text-align:center 下尾部 margin 也算进行盒宽度，
      会把视觉中心整体往左顶（PC 端踩过同类坑）。 */
.mfoot .lk{display:inline-block;white-space:nowrap;}
.mfoot .lk a{display:inline-block;margin:0 0 0 16px;}
.mfoot .nt{margin:9px 0 0;padding-top:9px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.75;color:var(--ink2);}
.mfoot .nt a,.mfoot .lk a{color:var(--b-soft);font-weight:600;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--b-soft) 40%,transparent);}

/* 空态 */
.mempty{padding:60px 20px;text-align:center;color:var(--ink4);font-size:13.5px;}

/* 移动端分类页 —— 与 PC 同源，按四类内容各自换字段：
   软件 = 版本/平台/包大小/下载源 ｜ 站点 = 域名/直达/免注册 ｜
   专题 = 篇序/进度/阅读路线 ｜ 教程 = 难度/步数/耗时。
   手机屏窄，全部压成单列，只保留「决定点不点」的那几个字段。 */

/* 板块头（一级页） */
.mbhead{margin:12px 14px 0;border-radius:14px;padding:16px 17px;color:#fff;
  background:var(--bc);position:relative;overflow:hidden;}
.mbhead::after{content:"";position:absolute;right:-34px;top:-46px;width:130px;height:130px;
  border-radius:50%;background:rgba(255,255,255,.13);}
.mbhead>*{position:relative;z-index:2;}
.mbhead .kick{font-size:10.5px;letter-spacing:.16em;opacity:.82;font-weight:600;}
.mbhead h1{font-size:22px;color:#fff;margin:7px 0 8px;}
.mbhead p{font-size:12.8px;line-height:1.75;opacity:.92;margin:0;}
.mbhead .kpi{display:flex;gap:18px;margin-top:14px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.16);flex-wrap:wrap;}
.mbhead .kpi b{display:block;font-family:var(--mono);font-size:16px;color:#fff;}
.mbhead .kpi span{font-size:10.5px;opacity:.8;}

/* 设备卡（软件下载一级）已删除：四个一级页的子栏目导航一律 .mlist.stand，不再有卡片变体。 */

/* 列表里的附加字段（规格标签 / 域名 / 首字母块） */
/* 版本列 .mver 已删除（它是全站最后一个没有封面的文章列表，PC 同位置一直有图）。
   二级页改走 .mlist .th 封面图，版本号并入 .specs。 */
/* 首字母块（.lg）：线上已改用真封面，这里保留 —— ⚠️ 别因为「线上搜不到」就删，
   删了源站 m 端实例页会掉成无色方块。 */
.mlist .lg{flex:none;width:40px;height:40px;border-radius:11px;background:var(--cc);color:#fff;
  display:grid;place-items:center;font-size:16px;font-weight:700;}
.mlist .specs{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px;}
.mlist .specs span{font-size:10.5px;color:var(--ink3);background:var(--line2);
  padding:2px 7px;border-radius:5px;}
.mlist .specs span.src{background:color-mix(in srgb,var(--cc) 12%,#fff);color:var(--cc);font-weight:600;}
/* ⚠️ .src 是规格行里唯一的高亮样式，挂它的那一项就是整行的视觉重心 —— 现在挂的是**分类**
   （软件下载靠行内 style="--cc:var(--c-xxx)" 取「该行所属栏目」的识别色；一级页混排四个栏目时，
   只用页面级 --cc 会让四行的高亮撞成一个颜色）。版本号高亮 span.ver 已删除，别恢复（会争重心）。 */
/* 项目推荐列表行的规格行：域名 + 分类 + 日期 强制同一行（390 视口下 .bd 仅 257px）。
   ⚠️ 只在这一支挂修饰类 .oneline，不要提升成 .specs 的默认行为 —— .specs 是全站共用的，
      其它行的内容更长，全局 nowrap 会直接把它们顶出容器。
   兜底：域名项可伸缩、超长先截断自己；分类与日期 flex:none 永不压缩。 */
.mlist .specs.oneline{flex-wrap:nowrap;gap:5px;}
.mlist .specs.oneline span{font-size:10px;padding:2px 5px;}
.mlist .specs.oneline span.site{flex:0 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);
  color:var(--ink4);letter-spacing:-.2px;}
.mlist .specs.oneline span.src,
.mlist .specs.oneline span:last-child{flex:none;}
.mlist .go{flex:none;align-self:center;font-size:12px;font-weight:600;color:#fff;
  background:var(--cc);border-radius:8px;padding:7px 12px;white-space:nowrap;}
/* 难度徽章 .mlv 已删除：它唯一的用户是实例页那枚「入门 / 进阶」，而**线上做不了** ——
   数据库没有难度字段。教程难度真要上线，得先在后台加一个自定义字段，再加回这两条。 */

/* 已回复 / 待回复徽章（留言页）。命名跟 PC 的 .badge 一致 —— 同一种东西两端名字不同，改配色必漏。 */
.badge{display:inline-block;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:6px;}
.badge.ok{background:var(--ok-bg);color:var(--ok);}
.badge.warn{background:var(--warn-bg);color:var(--warn);}

/* 专题路径卡已删除 —— 与 PC 的 .paths / .pathcard 同步，移动端 13 页已无任何引用。 */

/* 章节目录（专题二级）已删除 —— 与 PC 的 .chapgroup 同步。里面「已读 12%」进度条与
   「已读 / 待读」徽章在实例页是假数据（真站点要登录才谈得上已读，访客看见只会困惑）。
   专题篇目改走 .mlist.stand，序号叠到封面左上角。 */

/* 步骤清单（教程型详情页） */
.msteps{counter-reset:st;margin:16px 0 0;padding:0;list-style:none;}
.msteps li{position:relative;padding:0 0 18px 38px;counter-increment:st;}
.msteps li::before{content:counter(st);position:absolute;left:0;top:0;width:26px;height:26px;
  border-radius:9px;background:var(--cc);color:#fff;font-family:var(--mono);font-size:12px;
  font-weight:700;display:grid;place-items:center;}
.msteps li::after{content:"";position:absolute;left:13px;top:29px;bottom:0;width:1.5px;
  background:var(--line);}
.msteps li:last-child{padding-bottom:0;}
.msteps li:last-child::after{display:none;}
.msteps li b{display:block;font-size:14.5px;color:var(--ink);margin-bottom:5px;}
.msteps li p{font-size:13.5px;color:var(--ink2);line-height:1.85;margin:0;}

/* 留言页（移动端） */
.mform{margin:0 14px;background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:15px 16px;}.mform label{display:block;font-size:12.5px;color:var(--ink3);margin-bottom:7px;}
.mform label i{font-style:normal;color:var(--danger);}
.mform input,.mform textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;margin-bottom:14px;}
.mform textarea{min-height:118px;resize:vertical;line-height:1.78;margin-bottom:0;}
.mform input:focus,.mform textarea:focus{outline:none;border-color:var(--b-soft);background:var(--card);}
.mform .acts{margin-top:14px;}
.mform .mbtn{width:100%;}
/* ⚠️ 提交键是 <input type="submit">（SDCMS 的表单结构不能改），会被上面的 .mform input
   规则一并命中、渲染成输入框的样子。.mbtn 权重 (0,1,0) 压不过 .mform input 的 (0,1,1)，
   所以必须显式还原按钮外观。PC 端同理。 */
.mform input[type="submit"],.mform input[type="button"]{width:100%;height:44px;margin:0;
  background:var(--cc);border:0;border-radius:10px;color:#fff;font-size:15px;font-weight:600;
  -webkit-appearance:none;appearance:none;cursor:pointer;}
/* ⚠️ 下面 .types / .mrules 目前没有任何模板在用，是有意留着的：
   .types 需要一个后台字段来存（SDCMS 留言表没有），没有字段就是纯装饰；
   .mrules 那四条是**站规**，得站长自己定稿。等后台加了字段 / 站长发话，直接补标记即可。 */
/* 留言类型：横向可滑动的选择胶囊（替代 PC 的下拉框） */
.mform .types{display:flex;gap:7px;overflow-x:auto;padding:1px 0 13px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.mform .types::-webkit-scrollbar{display:none;}
.mform .types label{flex:none;margin:0;font-size:12.5px;color:var(--ink3);background:var(--bg);
  border:1px solid var(--line);border-radius:999px;padding:8px 13px;white-space:nowrap;cursor:pointer;}
.mform .types input{position:absolute;opacity:0;width:0;height:0;margin:0;}
.mform .types input:checked+span{color:#fff;}
.mform .types label:has(input:checked){background:var(--b-soft);border-color:var(--b-soft);color:#fff;}
.mform .hint{font-size:11.5px;color:var(--ink4);line-height:1.7;margin:-6px 0 13px;}
/* 验证码一行。图片宽度钉死 104px —— 不钉的话图加载前后会把输入框挤来挤去，光标位置会跳。
   点图换码是框架 ui.js 的行为（按 id="verify_code" 绑定），不是主题的活。 */
.mform .coderow{display:flex;gap:9px;align-items:flex-start;}
.mform .coderow input{margin-bottom:0;}
.mform .coderow img{flex:none;width:104px;height:44px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg);object-fit:cover;cursor:pointer;display:block;}
/* 留言须知：编号 + 一条一句（不用列表样式，避免和 .mlist 的行布局冲突） */
.mrules{margin:0 14px;background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:2px 15px;overflow:hidden;}
.mrules .r{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--line2);}
.mrules .r:last-child{border-bottom:0;}
.mrules .r i{flex:none;font-style:normal;width:21px;height:21px;border-radius:7px;background:var(--bg2);
  color:var(--ink3);font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px;}
.mrules .r b{display:block;font-size:13.5px;color:var(--ink);font-weight:600;}
.mrules .r p{font-size:12px;color:var(--ink4);line-height:1.65;margin:4px 0 0;}

.mtiles{margin:0 14px;background:var(--card);border:1px solid var(--line);border-radius:13px;
  padding:2px 15px;overflow:hidden;}
.mtiles .gitem{display:flex;gap:11px;padding:14px 0;border-bottom:1px solid var(--line2);}
.mtiles .gitem:last-child{border-bottom:0;}
.mtiles .av{flex:none;width:34px;height:34px;border-radius:10px;background:var(--b-soft);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:14px;}
.mtiles .bd{flex:1;min-width:0;}
.mtiles .hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}
.mtiles .hd b{font-size:13.5px;color:var(--ink);}
.mtiles .hd time{font-size:11px;color:var(--ink4);font-family:var(--mono);}
.mtiles .bd p{font-size:13px;color:var(--ink2);line-height:1.8;margin:0;}
.mtiles .re{margin-top:10px;padding:10px 12px;border-radius:9px;background:var(--bg2);
  font-size:12.3px;color:var(--ink3);line-height:1.75;border-left:3px solid var(--b-soft);}
.mtiles .re b{color:var(--ink2);}