/* =========================================================================
   重做版 —— 数据字段照 skillhub.cn 的真实 API 结构设计
   与上一版的差别（都是照着真实数据改的）：
     1. 加了二级分类（13 一级 + 96 二级，就是它真实的分类表）
     2. 去掉虚构的"热度分"，换成真实计数：downloads / installs / stars / versions
     3. 加双语：summary_zh 为主，summary 可展开；加「有中文」筛选
     4. 加来源角标 source / sourceUrl（它是聚合站，来源透明是底线）
     5. 加版本号 latestVersion.version
     6. 加可信度标识：verified / claimable / requires_api_key
        —— 但"安全报告"我不做假，没有就整块不渲染（它那个是腾讯的资源，你拿不到）
   ========================================================================= */
:root{
  --brand:#10a37f; --brand-dark:#0d8467; --brand-soft:#e8f6f2;
  --ink:#1a1d21; --ink-2:#4a5158; --ink-3:#8b939b; --ink-4:#b3bac1;
  --line:#e6e9ec; --line-2:#f0f2f4;
  --bg:#fff; --bg-2:#fafbfc; --bg-3:#f4f6f8;
  --maxw:1320px;
  --ok:#0b7a5e; --ok-bg:#f0f7f4;
  --warn:#a8641a; --warn-bg:#fdf6ec;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14.5px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.ic{width:15px;height:15px;flex:none;stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.ic-xs{width:11px;height:11px;stroke-width:2.1}
.ic-sm{width:13px;height:13px}
.ic-fill{fill:currentColor;stroke:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
body.noicon .ic{display:none}

/* ---------- 顶栏 ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:16px;height:58px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;white-space:nowrap;color:var(--ink)}
.logo i{width:25px;height:25px;border-radius:7px;background:var(--brand);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
nav.cats{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav.cats::-webkit-scrollbar{display:none}
nav.cats a{padding:6px 10px;border-radius:6px;color:var(--ink-2);font-size:13.5px;white-space:nowrap}
nav.cats a:hover{background:var(--bg-3)}
nav.cats a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.top-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.btn{padding:6px 12px;border-radius:6px;font-size:13.5px;border:1px solid var(--line);background:#fff;transition:.15s;
  white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:#d3d8dd;background:var(--bg-2)}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.p:hover{background:var(--brand-dark)}
.tg{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tg input{width:13px;height:13px;accent-color:var(--brand)}

/* ---------- 顶部搜索 ---------- */
.hero{padding:34px 0 24px;text-align:center;border-bottom:1px solid var(--line-2);background:linear-gradient(180deg,#fff,var(--bg-2))}
.hero h1{font-size:25px;font-weight:700;letter-spacing:-.3px;color:var(--ink)}
.hero .sub{margin-top:8px;font-size:14px;color:var(--ink-3)}
.bigsearch{margin:20px auto 0;max-width:600px;position:relative}
.bigsearch input{width:100%;height:46px;padding:0 90px 0 42px;font-size:15px;border:1px solid var(--line);
  border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04);outline:none;transition:.15s}
.bigsearch input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.bigsearch svg.mag{position:absolute;left:14px;top:15px;color:var(--ink-4)}
.bigsearch .cnt{position:absolute;right:12px;top:14px;font-size:12px;color:var(--ink-4);background:var(--bg-3);padding:3px 8px;border-radius:20px}
.quickchips{margin-top:13px;display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
/* 站点性质说明：字号小一档、颜色更淡，不抢搜索框注意力但必须存在 */
.hero-note{margin:15px auto 0;max-width:660px;font-size:12.5px;line-height:1.7;color:var(--ink-4);
  padding:9px 14px;border-radius:8px;background:rgba(255,255,255,.72);border:1px solid var(--line-2);text-align:left}
.hero-note strong{color:var(--ink-3);font-weight:650}
.hero-note a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.chip{padding:4px 11px;border-radius:20px;font-size:12.5px;color:var(--ink-2);background:#fff;border:1px solid var(--line);transition:.15s}
.chip:hover{border-color:var(--brand);color:var(--brand-dark)}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* ---------- 主体 ---------- */
.main{display:grid;grid-template-columns:212px 1fr;gap:26px;align-items:start;padding:22px 0 56px}

/* 筛选侧栏：一级分类可展开二级 */
#wrap-filters{position:sticky;top:74px;max-height:calc(100vh - 96px);overflow-y:auto;padding-right:4px;font-size:13.5px}
#wrap-filters::-webkit-scrollbar{width:6px}
#wrap-filters::-webkit-scrollbar-thumb{background:#dfe3e7;border-radius:3px}
.fg{margin-bottom:18px}
.fg h4{font-size:11px;font-weight:680;color:var(--ink-4);letter-spacing:.6px;margin-bottom:8px;display:flex;align-items:center}
.fg h4 button{margin-left:auto;font-size:11px;color:var(--brand-dark);letter-spacing:0}
.cat{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:5px;cursor:pointer;
  color:var(--ink-2);transition:.12s;width:100%;text-align:left;font-size:13.5px}
.cat:hover{background:var(--bg-3)}
.cat.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.cat .caret{width:12px;height:12px;flex:none;color:var(--ink-4);transition:.15s}
.cat.open .caret{transform:rotate(90deg)}
.cat .n{margin-left:auto;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.cat.on .n{color:var(--brand-dark)}
.subs{display:none;margin:2px 0 6px 19px;border-left:1px solid var(--line);padding-left:8px}
.subs.open{display:block}
.sub{display:flex;align-items:center;gap:6px;padding:3px 6px;border-radius:5px;width:100%;text-align:left;
  font-size:13px;color:var(--ink-3);transition:.12s}
.sub:hover{background:var(--bg-3);color:var(--ink-2)}
.sub.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.sub .n{margin-left:auto;font-size:11px;color:var(--ink-4);font-variant-numeric:tabular-nums}
/* 复选框型筛选 */
.fo{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:5px;width:100%;text-align:left;
  font-size:13.5px;color:var(--ink-2);transition:.12s}
.fo:hover{background:var(--bg-3)}
.fo.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.fo .bx{width:13px;height:13px;border:1.5px solid #cbd2d9;border-radius:4px;flex:none;display:grid;place-items:center}
.fo.on .bx{background:var(--brand);border-color:var(--brand)}
.fo.on .bx::after{content:"";width:3px;height:6px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg) translate(-1px,-1px)}
.fo .n{margin-left:auto;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.fo.on .n{color:var(--brand-dark)}

/* 工具条 */
.bar{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex-wrap:wrap}
.bar .res{font-size:13px;color:var(--ink-2)}
.bar .res b{color:var(--ink);font-weight:650}
.bar .sp{margin-left:auto}
select.s{padding:6px 10px;border:1px solid var(--line);border-radius:6px;font-size:13px;background:#fff;color:var(--ink-2);outline:none;cursor:pointer}
.viewsw{display:flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.viewsw button{padding:5px 9px;color:var(--ink-3);transition:.12s}
.viewsw button.on{background:var(--brand-soft);color:var(--brand-dark)}
.viewsw button+button{border-left:1px solid var(--line)}

/* 排序口径说明：只在"综合分""近期飙升"两种排序下出现，解释依据是什么。
   借鉴它的做法 —— 它也在综合排序下挂了一句 TRACE 口径说明。 */
.sortnote{font-size:12px;color:var(--ink-3);margin:-4px 0 11px;line-height:1.6}
.sortnote a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}
.sortnote b{color:var(--ink-2);font-weight:600}

/* ---------- 已选条件 ---------- */
.active{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.atag{display:flex;align-items:center;gap:5px;padding:3px 7px 3px 10px;border-radius:20px;
  background:var(--brand-soft);color:var(--brand-dark);font-size:12.5px}
.atag button{opacity:.6;display:grid;place-items:center}
.atag button:hover{opacity:1}

/* ---------- 卡片网格：用 auto-fill 自适应列数 ----------
   不用固定 3 列再靠断点改 —— 列数由容器宽度自动决定，这是最省事也最稳的自适应。
   minmax(300px,1fr)：窄了就少列，宽了就多列，中间不需要任何断点。
   ------------------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px}
.grid.list{grid-template-columns:1fr}
.card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px;
  display:flex;flex-direction:column;gap:9px;transition:.15s;position:relative}
/* 触屏没有 hover，悬停位移会显得"粘住"；只在真正支持 hover 的设备上启用 */
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:#d3d8dd;box-shadow:0 3px 14px rgba(16,24,40,.06);transform:translateY(-2px)}
}
.card-top{display:flex;gap:10px;align-items:flex-start}
.ico{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:15px;letter-spacing:-.5px;overflow:hidden}
.ico img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:14.5px;font-weight:640;line-height:1.35;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ver{font-size:11px;font-weight:500;color:var(--ink-4);font-variant-numeric:tabular-nums}
.ns{font-size:11.5px;color:var(--ink-4);margin-top:2px;font-family:ui-monospace,Menlo,Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 徽标行：认证 / 中文 / 来源 */
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:1px}
.bdg{font-size:10.5px;padding:1.5px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.bdg.ver{background:var(--ok-bg);color:var(--ok)}
.bdg.zh{background:#eef4fd;color:#2f5fa8}
.bdg.src{background:var(--bg-3);color:var(--ink-3)}
.bdg.key{background:var(--warn-bg);color:var(--warn)}
.card .desc{font-size:13px;color:var(--ink-2);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:62px}
.card .desc.empty{color:#c2c8ce;font-style:normal}
/* 底部：真实计数 */
.card .foot{display:flex;align-items:center;gap:12px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--ink-4);margin-top:auto;font-variant-numeric:tabular-nums}
.card .foot .m{display:flex;align-items:center;gap:4px}
.card .foot .cat-l{margin-left:auto;color:var(--ink-3);font-size:11.5px}

/* ---------- TRACE 分（卡片底部追加的一个小指标，不改动 foot 的布局规则） ----------
   字母用品牌色区分于普通灰色指标；数字带单位后缀提示它是分数不是计数。
   hover 展开五维明细：纯 CSS，不需要 JS，也不占布局空间。 */
.tr{margin-left:auto;position:relative;display:flex;align-items:center;gap:3px;
  color:var(--brand-dark);font-weight:600;cursor:help}
.tr .lb{font-size:10px;letter-spacing:.3px;opacity:.85}
.tr .sc{font-variant-numeric:tabular-nums}
/* 卡片底部已经有 cat-l 占了 margin-left:auto，两个都 auto 会平分空隙 —— 
   所以 TRACE 在前、分类在后时，把 auto 让给 TRACE，分类自然跟在右边 */
.card .foot .cat-l{margin-left:0}
.tr+.cat-l::before{content:"·";margin-right:6px;color:var(--ink-4)}
/* 许可徽标：三种状态用三种颜色，一眼能分辨 */
.lic{font-size:10.5px;font-weight:600;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  padding:1.5px 6px;border-radius:4px;white-space:nowrap;cursor:help}
.lic.permissive{background:var(--ok-bg);color:var(--ok);border:1px solid #cfe8e0}
.lic.copyleft{background:#f3f0fb;color:#5b47c4;border:1px solid #e0d9f6}
.lic.unknown{background:var(--warn-bg);color:var(--warn);border:1px solid #f0dfc4}
/* 五维明细：hover / focus 时浮出 */
.tr .detail{
  display:none;position:absolute;right:0;bottom:calc(100% + 8px);z-index:30;
  width:238px;padding:11px 12px;border-radius:9px;background:#fff;
  border:1px solid var(--line);box-shadow:0 6px 24px rgba(16,24,40,.13);
  text-align:left;font-weight:400;color:var(--ink-2);cursor:default
}
.tr:hover .detail,.tr:focus-within .detail{display:block}
.tr .detail h5{font-size:11px;font-weight:680;color:var(--ink);margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between}
.tr .detail h5 em{font-style:normal;font-weight:400;color:var(--ink-4);font-size:10.5px}
.tr .detail .row{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:11.5px}
.tr .detail .row .k{width:14px;flex:none;font-weight:700;color:var(--brand-dark);font-size:11px}
.tr .detail .row .nm{width:52px;flex:none;color:var(--ink-3)}
.tr .detail .row .bar{flex:1;height:4px;border-radius:2px;background:var(--bg-3);overflow:hidden}
.tr .detail .row .bar i{display:block;height:100%;border-radius:2px;background:var(--brand)}
.tr .detail .row .v{width:20px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tr .detail .note{margin-top:8px;padding-top:7px;border-top:1px solid var(--line-2);
  font-size:10.5px;color:var(--ink-4);line-height:1.5}
/* 列表视图 */
.grid.list .card{flex-direction:row;align-items:center;gap:14px;padding:12px 14px}
.grid.list .card .card-top{flex:none;width:290px}
.grid.list .card .desc{-webkit-line-clamp:2;min-height:0;flex:1;margin:0}
.grid.list .card .badges{display:none}
.grid.list .card .foot{border:none;padding:0;flex:none;gap:14px}
.grid.list .card .foot .cat-l{display:none}

/* 分页 */
.pager{display:flex;justify-content:center;align-items:center;gap:5px;margin-top:26px;flex-wrap:wrap}
.pager button{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--line);border-radius:6px;
  background:#fff;font-size:13px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pager button:hover:not(:disabled){border-color:var(--brand);color:var(--brand-dark)}
.pager button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pager button:disabled{opacity:.35;cursor:not-allowed}
.pager .info{font-size:12px;color:var(--ink-4);margin-left:8px}
.empty{padding:60px 20px;text-align:center;color:var(--ink-4)}

/* ---------- 关于本站与版权 ---------- */
.about{border-top:1px solid var(--line);background:var(--bg-2);padding:34px 0 40px}
.about h2{font-size:17px;font-weight:680;color:var(--ink);margin-bottom:18px;letter-spacing:-.2px}
.about-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:18px 26px}
.about-grid h3{font-size:13.5px;font-weight:650;color:var(--ink);margin-bottom:6px;
  display:flex;align-items:center;gap:7px}
.about-grid h3::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--brand);flex:none}
.about-grid p{font-size:13px;line-height:1.7;color:var(--ink-3)}
.about-grid b{color:var(--ink-2);font-weight:600}
.about-grid code{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;background:var(--bg-3);
  border:1px solid var(--line);border-radius:4px;padding:0 4px;color:var(--ink-2)}
.about-grid a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}
.about-grid .lic{margin:0 2px}

footer{border-top:1px solid var(--line);padding:22px 0;font-size:12.5px;color:var(--ink-4)}

/* =========================================================================
   自适应断点
   网格列数已交给 auto-fill，断点只负责三件事：
     1. 宽度上限与留白（大屏别让内容铺太散）
     2. 结构性折叠（侧栏 -> 抽屉；顶栏分类 -> 隐藏）
     3. 触控目标尺寸（手机上必须够大）
   ======================================================================== */

/* 移动端底部导航（只在窄屏出现） */
.mobnav{display:none}
.filterbtn{display:none;align-items:center;gap:6px}
/* 把筛选抽屉的"完成"条，只在抽屉模式显示 */
.aside-foot{display:none}

/* --- 1440px+：内容不再无限变宽，避免一行读不到头 --- */
@media (min-width:1440px){
  :root{--maxw:1400px}          /* 容器封顶，网格自然停在 4 列 */
}

/* --- 1080px 以下：进入"平板/窄桌面" --- */
@media (max-width:1080px){
  .main{gap:20px;grid-template-columns:190px 1fr}
  /* 列表视图改成两段式：信息在上，指标在下 */
  .grid.list .card{flex-direction:column;align-items:stretch}
  .grid.list .card .card-top{width:auto}
  .grid.list .card .desc{-webkit-line-clamp:2}
  .grid.list .card .foot{border-top:1px solid var(--line-2);padding-top:9px}
  .grid.list .card .foot .cat-l{display:inline}
}

/* --- 820px 以下：侧栏收进抽屉（平板竖屏 / 大手机） --- */
@media (max-width:820px){
  .main{grid-template-columns:1fr;gap:0;padding:16px 0 40px}

  /* 侧栏变成整屏抽屉：底部留一条"完成"栏，符合手机上滑面板的习惯 */
  #wrap-filters{display:none;position:static;max-height:none}
  #wrap-filters.open{
    display:flex;flex-direction:column;
    position:fixed;inset:58px 0 0 0;background:#fff;z-index:40;
    padding:14px 18px 0;overflow-y:auto;-webkit-overflow-scrolling:touch
  }
  .aside-foot{
    display:block;position:sticky;bottom:0;margin:14px -18px 0;padding:11px 18px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(6px);
    border-top:1px solid var(--line)
  }
  .aside-foot .btn{width:100%;justify-content:center;height:42px}

  .filterbtn{display:flex !important}
  nav.cats{display:none}
  .tg{display:none}

  .hero{padding:24px 0 18px}
  .hero h1{font-size:20px}
  .hero .sub{font-size:13px}
  .bigsearch{margin-top:15px}
  .bigsearch input{height:44px;font-size:15px;padding-right:74px}

  /* 工具条：手机上把筛选按钮提到最前，排序与视图换行 */
  .bar{gap:8px;margin-bottom:10px}
  .bar .res{order:1;font-size:12.5px;width:100%}
  #filterBtn{order:2}
  select.s{order:3;flex:1;height:38px}
  .viewsw{order:4}
  .viewsw button{padding:10px 12px}      /* 触控放大 */

  /* 触控目标：手机上一律 >= 40px 高 */
  .cat{padding:9px 8px;font-size:14.5px}
  .sub{padding:8px 8px;font-size:14px}
  .fo{padding:9px 8px;font-size:14.5px}
  .cat .n,.sub .n,.fo .n{font-size:12.5px}
  .fg h4{font-size:11.5px;margin-bottom:6px}
}

/* --- 560px 以下：单列 + 底部导航 --- */
@media (max-width:560px){
  .grid{gap:10px}
  .card{padding:13px}
  .card .desc{-webkit-line-clamp:3;min-height:0}
  .mobnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.97);
    backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:45;
    padding:5px 0 3px;padding-bottom:max(3px,env(safe-area-inset-bottom))}   /* iPhone 底部安全区 */
  .mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:10.5px;color:var(--ink-3);padding:7px 0;min-height:46px}       /* 触控 >= 44px */
  .mobnav a.on{color:var(--brand-dark)}
  /* 底部导航已移除：原来给它留的 62px 让位空间，以及抽屉底部避让，都取消
     （抽屉的定位现在由 site.css 末尾那条统一处理） */

  .hero h1{font-size:18.5px}
  .quickchips{gap:6px}
  .chip{padding:7px 12px;font-size:13px} /* 触控放大 */
  .pager button{min-width:40px;height:40px;font-size:14px}
  .pager .info{width:100%;text-align:center;margin:6px 0 0}
  .active{gap:6px}
  .atag{padding:5px 8px 5px 11px;font-size:13px}
  .atag button{width:22px;height:22px}   /* 移除按钮也要点得到 */
  footer{padding-bottom:24px}
}

/* --- 380px 以下：超小屏（老机型 / 分屏） --- */
@media (max-width:380px){
  .wrap{padding:0 12px}
  .logo{font-size:15px}
  .btn{padding:6px 10px;font-size:13px}
  .card .foot{gap:9px;font-size:11px}
  .cat-l{display:none !important}
  .hero h1{font-size:17px}
}

/* --- 横屏矮屏：把竖向留白压掉，别让用户还没看到内容就要滚 --- */
@media (max-height:500px) and (orientation:landscape){
  header.top{position:static}
  .hero{padding:14px 0 12px}
  .hero h1{font-size:17px}
  .hero .sub{display:none}
  #wrap-filters{top:0;max-height:none}
  #wrap-filters.open{inset:0}
  .mobnav{display:none}
  body{padding-bottom:0}
}

/* --- 深色模式：系统偏好 + 手动未选浅色（每条都带 html:not(.theme-light)，
       这样「系统深色但手动选了浅色」时能自动让位；手动选深色见 site.css） --- */
@media (prefers-color-scheme:dark){
  html:not(.theme-light){
    --brand:#2bbd94; --brand-dark:#4fd1ab; --brand-soft:#12332b;
    --ink:#e8eaed; --ink-2:#b4bac1; --ink-3:#8a9199; --ink-4:#6b7278;
    --line:#2b2f34; --line-2:#23272b;
    --bg:#15181b; --bg-2:#1a1e21; --bg-3:#212529;
    --ok:#4fd1ab; --ok-bg:#12332b;
    --warn:#e0a45c; --warn-bg:#33280f;
  }
  html:not(.theme-light) header.top{background:rgba(21,24,27,.94)}
  html:not(.theme-light) .hero{background:linear-gradient(180deg,#15181b,#1a1e21)}
  html:not(.theme-light) .btn:not(.p),html:not(.theme-light) select.s,html:not(.theme-light) .card,
  html:not(.theme-light) .rcard,html:not(.theme-light) .pager button,html:not(.theme-light) .chip,
  html:not(.theme-light) .atag,html:not(.theme-light) .ico{background-color:var(--bg-2)}
  html:not(.theme-light) .bigsearch input{background:var(--bg-2)}
  html:not(.theme-light) .mobnav{background:rgba(21,24,27,.97)}
  html:not(.theme-light) .aside-foot{background:rgba(21,24,27,.97)}
  html:not(.theme-light) .bdg.zh{background:#1b2837;color:#7fb3f0}
  html:not(.theme-light) .bdg.src{background:var(--bg-3)}
}

/* --- 降低动效偏好：关掉位移动画 --- */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}


/* ==== page css ==== */


/* =========================================================================
   首页
   结构是一个"漏斗"：大搜索框（首要动作）-> 飙升/精选（给不想搜的人）-> 分类入口
   -> 最近收录（证明站点是活的）-> 全部技能（兜底）
   卡片样式与列表页完全相同，保证两页视觉是一致的。
   ========================================================================= */
:root{
  --brand:#10a37f; --brand-dark:#0d8467; --brand-soft:#e8f6f2;
  --ink:#1a1d21; --ink-2:#4a5158; --ink-3:#8b939b; --ink-4:#b3bac1;
  --line:#e6e9ec; --line-2:#f0f2f4;
  --bg:#fff; --bg-2:#fafbfc; --bg-3:#f4f6f8;
  --maxw:1320px;
  --ok:#0b7a5e; --ok-bg:#f0f7f4;
  --warn:#a8641a; --warn-bg:#fdf6ec;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14.5px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.ic{width:15px;height:15px;flex:none;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.ic-xs{width:11px;height:11px;stroke-width:2.1}
.ic-sm{width:13px;height:13px}
.ic-lg{width:19px;height:19px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
body.noicon .ic{display:none}

/* ---------- 顶栏（与列表页一致） ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:16px;height:58px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;white-space:nowrap;color:var(--ink)}
.logo i{width:25px;height:25px;border-radius:7px;background:var(--brand);color:#fff;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:800}
nav.cats{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav.cats::-webkit-scrollbar{display:none}
nav.cats a{padding:6px 10px;border-radius:6px;color:var(--ink-2);font-size:13.5px;white-space:nowrap}
nav.cats a:hover{background:var(--bg-3)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:9px}
.btn{padding:6px 12px;border-radius:6px;font-size:13.5px;border:1px solid var(--line);background:#fff;
  transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:#d3d8dd;background:var(--bg-2)}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.p:hover{background:var(--brand-dark)}
.tg{display:flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tg input{width:13px;height:13px;accent-color:var(--brand)}

/* ---------- 首屏：搜索是唯一首要动作 ---------- */
.hero{padding:44px 0 32px;text-align:center;border-bottom:1px solid var(--line-2);
  background:linear-gradient(180deg,#fff,var(--bg-2))}
.hero h1{font-size:29px;font-weight:700;letter-spacing:-.4px;color:var(--ink);line-height:1.35}
.hero .sub{margin-top:10px;font-size:14.5px;color:var(--ink-3)}
.bigsearch{margin:24px auto 0;max-width:620px;position:relative}
.bigsearch input{width:100%;height:50px;padding:0 96px 0 46px;font-size:15.5px;border:1px solid var(--line);
  border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.05);outline:none;transition:.15s}
.bigsearch input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.bigsearch svg.mag{position:absolute;left:15px;top:16px;color:var(--ink-4)}
.bigsearch .go{position:absolute;right:6px;top:6px;height:38px;padding:0 16px;border-radius:8px;
  background:var(--brand);color:#fff;font-size:14px;font-weight:600}
.bigsearch .go:hover{background:var(--brand-dark)}
.quickchips{margin-top:14px;display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.chip{padding:4px 11px;border-radius:20px;font-size:12.5px;color:var(--ink-2);background:#fff;
  border:1px solid var(--line);transition:.15s}
.chip:hover{border-color:var(--brand);color:var(--brand-dark)}
/* 首屏统计：给"这站有货"的信号 */
.heroStats{margin-top:20px;display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
  font-size:13px;color:var(--ink-3)}
.heroStats b{color:var(--ink);font-weight:680;font-variant-numeric:tabular-nums}

/* ---------- 区块 ---------- */
.sec{padding:30px 0}
.sec-h{display:flex;align-items:baseline;gap:11px;margin-bottom:15px;flex-wrap:wrap}
.sec-h h2{font-size:17.5px;font-weight:680;letter-spacing:-.2px;color:var(--ink)}
.sec-h .hint{font-size:13px;color:var(--ink-3)}
.sec-h .more{margin-left:auto;font-size:13.5px;color:var(--brand-dark);display:inline-flex;align-items:center;gap:3px}
.sec-h .more:hover{text-decoration:underline;text-underline-offset:2px}
/* 飙升用个小徽标区分于"精选" */
.tagnew{font-size:11px;font-weight:650;color:#b8531a;background:#fdf1e7;border:1px solid #f6ddc7;
  padding:2px 7px;border-radius:5px}

/* ---------- 卡片（与列表页同一套） ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:13px}
.card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px;
  display:flex;flex-direction:column;gap:9px;transition:.15s;position:relative}
@media (hover:hover) and (pointer:fine){
  .card:hover{border-color:#d3d8dd;box-shadow:0 3px 14px rgba(16,24,40,.06);transform:translateY(-2px)}
}
.card-top{display:flex;gap:10px;align-items:flex-start}
.ico{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;
  color:#fff;font-weight:700;font-size:15px;letter-spacing:-.5px}
.card h3{font-size:14.5px;font-weight:640;line-height:1.35;color:var(--ink);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ver{font-size:11px;font-weight:500;color:var(--ink-4);font-variant-numeric:tabular-nums}
.ns{font-size:11.5px;color:var(--ink-4);margin-top:2px;font-family:ui-monospace,Menlo,Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:1px}
.bdg{font-size:10.5px;padding:1.5px 6px;border-radius:4px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.bdg.ver{background:var(--ok-bg);color:var(--ok)}
.bdg.zh{background:#eef4fd;color:#2f5fa8}
.bdg.src{background:var(--bg-3);color:var(--ink-3)}
.bdg.key{background:var(--warn-bg);color:var(--warn)}
.card .desc{font-size:13px;color:var(--ink-2);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:62px}
.card .desc.empty{color:#c2c8ce}
.card .foot{display:flex;align-items:center;gap:12px;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--ink-4);margin-top:auto;font-variant-numeric:tabular-nums}
.card .foot .m{display:flex;align-items:center;gap:4px}
.tr{margin-left:auto;position:relative;display:flex;align-items:center;gap:3px;
  color:var(--brand-dark);font-weight:600;cursor:help}
.tr .lb{font-size:10px;letter-spacing:.3px;opacity:.85}
.tr .sc{font-variant-numeric:tabular-nums}
.card .foot .cat-l{color:var(--ink-3);font-size:11.5px;margin-left:0}
.tr+.cat-l::before{content:"·";margin-right:6px;color:var(--ink-4)}
/* 卡片右上角的"复制安装指令"：不占卡片布局，靠绝对定位挂在角上 */
.ccopy{
  position:absolute;top:10px;right:10px;width:27px;height:27px;border-radius:7px;
  border:1px solid var(--line);background:rgba(255,255,255,.94);
  display:grid;place-items:center;color:var(--ink-3);opacity:0;transition:.15s;z-index:2
}
.ccopy:hover{color:var(--brand-dark);border-color:var(--brand);background:#fff}
/* 只在能 hover 的设备上做"淡入"，触屏上直接常显，否则手机上根本点不到 */
@media (hover:hover) and (pointer:fine){
  .card:hover .ccopy,.ccopy:focus-visible{opacity:1}
}
@media (hover:none){
  .ccopy{opacity:1;width:30px;height:30px}
}
.ccopy.done{color:var(--ok);border-color:var(--ok);opacity:1}
/* 复制失败/成功的浮层提示 */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);
  background:#1f2429;color:#fff;font-size:13.5px;padding:9px 17px;border-radius:8px;
  box-shadow:0 8px 28px rgba(16,24,40,.22);opacity:0;pointer-events:none;transition:.22s;z-index:100;
  max-width:88vw;text-align:center
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- 分类瓷片 ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:10px}
.tile{padding:14px 15px;border:1px solid var(--line);border-radius:10px;background:#fff;
  transition:.15s;display:flex;flex-direction:column;gap:4px}
@media (hover:hover) and (pointer:fine){ .tile:hover{border-color:var(--brand);transform:translateY(-1px)} }
.tile .ti{color:var(--brand);margin-bottom:5px}
.tile b{font-size:14.5px;font-weight:640;color:var(--ink)}
.tile em{font-style:normal;font-size:12.5px;color:var(--ink-3)}

/* 最近收录：小卡片列表（比大卡更紧凑，强调"新"） */
.recent{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:9px}
.rc{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;background:#fff;transition:.15s}
@media (hover:hover) and (pointer:fine){ .rc:hover{border-color:#d3d8dd} }
.rc .dot{width:28px;height:28px;border-radius:7px;flex:none;display:grid;place-items:center;
  color:#fff;font-size:12.5px;font-weight:700}
.rc .t{min-width:0;flex:1}
.rc .t b{display:block;font-size:13.5px;font-weight:620;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc .t span{font-size:11.5px;color:var(--ink-4)}
.rc .when{font-size:11px;color:var(--ink-4);flex:none;font-variant-numeric:tabular-nums}

footer{border-top:1px solid var(--line);padding:24px 0;font-size:12.5px;color:var(--ink-4);margin-top:20px}

.mobnav{display:none}
@media (max-width:820px){
  nav.cats{display:none}
  .tg{display:none}
  .hero{padding:30px 0 24px}
  .hero h1{font-size:22px}
  .heroStats{gap:16px}
  .sec{padding:24px 0}
}
@media (max-width:560px){
  .hero h1{font-size:19px}
  .hero .sub{font-size:13.5px}
  .bigsearch input{height:46px;font-size:15px;padding-right:84px}
  .bigsearch .go{height:34px;padding:0 12px;font-size:13px;top:6px}
  .chip{padding:7px 12px;font-size:13px}
  .mobnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.97);
    backdrop-filter:blur(8px);border-top:1px solid var(--line);z-index:45;
    padding:5px 0 3px;padding-bottom:max(3px,env(safe-area-inset-bottom))}
  .mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-size:10.5px;color:var(--ink-3);padding:7px 0;min-height:46px}
  .mobnav a.on{color:var(--brand-dark)}
  /* 底部导航已移除，原来给它的 62px 让位空间一并取消 */
}
@media (max-width:380px){ .wrap{padding:0 12px} }
@media (max-height:520px) and (orientation:landscape){
  .hero{padding:18px 0 14px}
  .hero .sub,.heroStats{display:none}
}
/* 深色：系统偏好，且用户没有手动选浅色。
   每条都带 html:not(.theme-light)——否则「系统深色 + 手动选浅色」时这些规则照样生效，
   浅色页面会被染成一半深一半浅。手动选深色由 site.css 的 html.theme-dark 负责，
   两边必须覆盖同一批选择器（.hero 这类写死 #fff 的渐变最容易漏）。 */
@media (prefers-color-scheme:dark){
  html:not(.theme-light){
    --brand:#2bbd94; --brand-dark:#4fd1ab; --brand-soft:#12332b;
    --ink:#e8eaed; --ink-2:#b4bac1; --ink-3:#8a9199; --ink-4:#6b7278;
    --line:#2b2f34; --line-2:#23272b; --bg:#15181b; --bg-2:#1a1e21; --bg-3:#212529;
    --ok:#4fd1ab; --ok-bg:#12332b; --warn:#e0a45c; --warn-bg:#33280f;
  }
  html:not(.theme-light) header.top{background:rgba(21,24,27,.94)}
  html:not(.theme-light) .hero{background:linear-gradient(180deg,#15181b,#1a1e21)}
  html:not(.theme-light) .btn:not(.p),html:not(.theme-light) .card,html:not(.theme-light) .tile,
  html:not(.theme-light) .rc,html:not(.theme-light) .bigsearch input,html:not(.theme-light) .chip,
  html:not(.theme-light) .ccopy{background-color:var(--bg-2)}
  html:not(.theme-light) .ccopy{background:rgba(21,24,27,.94)}
  html:not(.theme-light) .mobnav{background:rgba(21,24,27,.97)}
  html:not(.theme-light) .bdg.zh{background:#1b2837;color:#7fb3f0}
  html:not(.theme-light) .bdg.src{background:var(--bg-3)}
  html:not(.theme-light) .tagnew{background:#33230f;border-color:#4a3418;color:#e0a45c}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important;animation:none !important} }


/* ==== page css ==== */


/* =========================================================================
   详情页（方案 A 的配套页面）
   详情页要解决三件事，排版围绕这三件做：
     1) 快速判断"这是不是我要的"  -> 首屏：名称 + 一句话 + 关键属性 + 主操作
     2) 读完还愿意动手            -> 右侧粘性操作栏（滚到哪都能点）
     3) 别让它成为死胡同          -> 底部相关推荐 + 同分类导航（内链，SEO 命门）

   缺字段的处理原则（和首页一致）：
     没有的字段整块不渲染，绝不留空位、绝不写"未知"
   ========================================================================= */
:root{
  --brand:#10a37f; --brand-dark:#0d8467; --brand-soft:#e8f6f2;
  --ink:#1a1d21; --ink-2:#4a5158; --ink-3:#8b939b; --ink-4:#b3bac1;
  --line:#e6e9ec; --line-2:#f0f2f4;
  --bg:#fff; --bg-2:#fafbfc; --bg-3:#f4f6f8;
  --maxw:1100px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:15px/1.72 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink-2);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.ic{width:16px;height:16px;flex:none;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round;display:block}
.ic-sm{width:14px;height:14px}
.ic-lg{width:19px;height:19px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
body.noicon .ic{display:none}

/* ---------- 顶栏（与列表页一致） ---------- */
header.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:18px;height:58px}
.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:16px;white-space:nowrap;color:var(--ink)}
.logo i{width:25px;height:25px;border-radius:7px;background:var(--brand);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:800}
.topnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{padding:6px 10px;border-radius:6px;color:var(--ink-2);font-size:14px;white-space:nowrap}
.topnav a:hover{background:var(--bg-3)}
.topnav a.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn{padding:7px 13px;border-radius:6px;font-size:14px;border:1px solid var(--line);background:#fff;transition:.15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.btn:hover{border-color:#d3d8dd;background:var(--bg-2)}
.btn.p{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.p:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

/* ---------- 面包屑（SEO + 回退路径） ---------- */
.crumb{border-bottom:1px solid var(--line-2);background:var(--bg-2)}
.crumb ol{display:flex;align-items:center;gap:7px;list-style:none;font-size:13px;color:var(--ink-3);padding:11px 0;flex-wrap:wrap}
.crumb a{color:var(--ink-3)}
.crumb a:hover{color:var(--brand-dark)}
.crumb .sep{color:var(--ink-4)}
.crumb .cur{color:var(--ink-2);font-weight:500}

/* ---------- 首屏：名称 + 关键属性 + 主操作 ---------- */
.hero{padding:28px 0 24px;border-bottom:1px solid var(--line-2)}
.hero-in{display:flex;gap:18px;align-items:flex-start}
.avatar{
  width:60px;height:60px;border-radius:14px;flex:none;display:grid;place-items:center;
  color:#fff;font-size:26px;font-weight:800;letter-spacing:-1px
}
.hero .txt{min-width:0;flex:1}
.hero h1{font-size:25px;font-weight:700;line-height:1.32;letter-spacing:-.3px;color:var(--ink)}
.hero h1 .badge{
  font-size:11.5px;font-weight:600;color:#b8760a;background:#fff5e6;
  border:1px solid #f5e3c8;padding:2px 7px;border-radius:5px;vertical-align:4px;margin-left:9px
}
.hero .lead{margin-top:8px;font-size:15.5px;color:var(--ink-2);max-width:640px}
/* 关键属性行：只有"有值"的才渲染 */
.facts{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--ink-3)}
.facts .f{display:flex;align-items:center;gap:6px}
.facts .f b{color:var(--ink-2);font-weight:600}
.facts .pill{font-size:12.5px;padding:2px 9px;border-radius:5px;background:var(--bg-3);color:var(--ink-2)}
.facts .pill.free{background:#f0f7f4;color:#0b7a5e}
.hero .acts{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}

/* ---------- 两栏：左内容滚动 / 右粘性操作 ---------- */
.detail{display:grid;grid-template-columns:1fr 268px;gap:38px;padding:30px 0 56px;align-items:start}

/* 正文区 */
.content section{margin-bottom:32px;scroll-margin-top:78px}
.content h2{
  font-size:16.5px;font-weight:680;color:var(--ink);letter-spacing:-.1px;
  padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:14px;
  display:flex;align-items:center;gap:8px
}
.content h2 .anchor{margin-left:auto;font-size:12.5px;color:var(--ink-4);font-weight:400}
.content p{margin-bottom:12px;color:var(--ink-2)}
.content ul{margin:0 0 12px 0;padding-left:0;list-style:none}
.content li{position:relative;padding-left:20px;margin-bottom:7px;color:var(--ink-2)}
.content li::before{
  content:"";position:absolute;left:5px;top:11px;width:6px;height:6px;border-radius:2px;background:var(--brand)
}
.content code{
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--bg-3);border:1px solid var(--line);border-radius:4px;padding:1px 5px;color:#9c3d3d
}

/* ---------- TRACE 五维评测（详情页新增区块）----------
   视觉语法沿用页面已有的：细边框、品牌色做强调、条形复用卡片里的进条风格。 */
.trace-total{
  display:flex;gap:22px;align-items:center;border:1px solid var(--line);border-radius:9px;
  padding:15px 18px;margin-bottom:16px;background:var(--bg-2);flex-wrap:wrap
}
.trace-total .big{display:flex;flex-direction:column;align-items:center;flex:none;min-width:76px}
.trace-total .big b{font-size:34px;font-weight:750;line-height:1;color:var(--brand-dark);
  letter-spacing:-1px;font-variant-numeric:tabular-nums}
.trace-total .big span{font-size:11.5px;color:var(--ink-3);margin-top:3px}
.trace-total .bars{flex:1;min-width:240px}
.trace-total .r{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-size:12.5px}
.trace-total .r:last-child{margin-bottom:0}
.trace-total .k{width:14px;flex:none;font-weight:700;color:var(--brand-dark);font-size:12px}
.trace-total .nm{width:64px;flex:none;color:var(--ink-3)}
.trace-total .bar{flex:1;height:5px;border-radius:3px;background:#e9edf0;overflow:hidden}
.trace-total .bar i{display:block;height:100%;border-radius:3px;background:var(--brand)}
.trace-total .v{width:26px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
.dims{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-bottom:14px}
.dim{border:1px solid var(--line);border-radius:8px;padding:12px 13px;background:#fff}
.dim h4{font-size:13px;font-weight:660;color:var(--ink);display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;margin-bottom:2px}
.dim h4 .k{width:17px;height:17px;flex:none;border-radius:4px;background:var(--brand-soft);
  color:var(--brand-dark);display:grid;place-items:center;font-size:11px;font-weight:800}
.dim h4 em{font-style:normal;font-size:12px;font-weight:500;color:var(--ink-3)}
.dim .q{font-size:11.5px;color:var(--brand-dark);margin-bottom:6px}
.dim p{font-size:12.5px;color:var(--ink-3);line-height:1.6;margin:0}
.trace-note{
  border-left:3px solid var(--brand);background:var(--brand-soft);border-radius:0 7px 7px 0;
  padding:11px 14px;font-size:13px;color:var(--ink-2);line-height:1.65
}
.trace-note b{color:var(--ink);font-weight:650}
@media (max-width:640px){
  .trace-total{gap:14px;padding:13px 14px}
  .trace-total .big b{font-size:28px}
  .trace-total .big{min-width:62px}
  .dims{grid-template-columns:1fr}
}

/* ---------- 安装方式（在右侧栏，宽仅 268px）----------
   窄栏的做法和正文不同：
     - 代码块用 pre-wrap 折行，不做横向滚动（窄栏横向滚动很难用）
     - 复制按钮占整行，而不是塞进标题行
     - 字号整体小一档 */
.itabs{display:flex;gap:3px;background:var(--bg-3);padding:3px;border-radius:8px;
  margin-bottom:11px;overflow-x:auto;width:fit-content;max-width:100%}
.itab{padding:6px 14px;border-radius:6px;font-size:13.5px;color:var(--ink-2);
  white-space:nowrap;transition:.15s}
.itab:hover{background:#eceff2}
.itab.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.ipane{display:none}
.ipane.on{display:block}
.icopy{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--brand-dark);
  font-weight:600;padding:2px 8px;border-radius:5px;transition:.15s;white-space:nowrap}
.icopy:hover{background:var(--brand-soft)}
.icopy.done{color:var(--ok);background:var(--ok-bg)}
.ipre{margin:0;padding:11px 12px;font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--ink-2);white-space:pre-wrap;word-break:break-word;
  background:var(--bg-3);border:1px solid var(--line);border-radius:7px}
.inote{font-size:11.5px;color:var(--ink-4);line-height:1.6;margin-top:9px}
.inote b{color:var(--ink-3);font-weight:600}

/* 侧栏安装卡的专属覆盖 */
.installcard{display:flex;flex-direction:column}
.installcard>h3{margin-bottom:10px}
.installcard>.btn.p{width:100%;justify-content:center;height:38px;margin-bottom:12px}
.installcard .itabs{width:100%;margin-bottom:10px}
.installcard .itab{flex:1;text-align:center;padding:5px 8px;font-size:12.5px}
.installcard .ipre{margin-bottom:8px;max-height:158px;overflow-y:auto}
.installcard .icopy{width:100%;justify-content:center;height:33px;border:1px solid var(--line);
  background:#fff;margin-bottom:6px}
.installcard .icopy:hover{border-color:var(--brand);background:var(--brand-soft)}
.installcard .istep{display:block;font-size:11.5px;color:var(--ink-4);margin:10px 0 5px}
.installcard .istep:first-child{margin-top:0}


/* ---------- 来源与版权（导航站的核心区块）----------
   这一块要"看起来就像法律信息"：等宽键名、清晰的层级、不抢眼但不可省。 */
.credbox{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.crow{display:flex;gap:14px;padding:10px 14px;border-bottom:1px solid var(--line-2);
  font-size:13.5px;align-items:baseline}
.crow:last-child{border-bottom:none}
.crow:nth-child(odd){background:var(--bg-2)}
.ck{width:70px;flex:none;color:var(--ink-3);font-size:12.5px}
.cv{color:var(--ink-2);word-break:break-word;min-width:0}
.cv a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}
.cv a:hover{color:var(--brand)}
.cv .ic{display:inline-block;vertical-align:-1px;margin-left:3px}
.cnote{color:var(--ink-4);font-size:12px;margin-left:8px}
.lic{display:inline-block;font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;padding:3px 7px;
  border-radius:5px;background:var(--ok-bg);color:var(--ok);border:1px solid #cfe8e0}
.notice{display:flex;gap:11px;margin-top:13px;padding:13px 15px;border-radius:9px;
  background:var(--warn-bg);border:1px solid #f0dfc4;font-size:13px;line-height:1.7;color:var(--ink-2)}
.notice .ic{color:#b8802c;flex:none;margin-top:2px}
.notice b{color:var(--ink);font-weight:650}
.notice a{color:#8a5a12;text-decoration:underline;text-underline-offset:2px}
/* "本站观点"标记：把我们的判断和原作者的描述明确区分开 */
.tagself{font-size:11px;font-weight:600;color:#3f5eff;background:#f2f4ff;
  border:1px solid #dfe4ff;padding:2px 7px;border-radius:5px;vertical-align:2px}
.oursay{font-size:13px;color:var(--ink-3);margin-bottom:11px;padding-left:11px;
  border-left:2px solid var(--line)}


/* ---------- 右侧粘性栏 ---------- */
.side{position:sticky;top:78px;display:flex;flex-direction:column;gap:14px}
.card{border:1px solid var(--line);border-radius:10px;background:#fff;padding:15px}
.card h3{font-size:13px;font-weight:680;color:var(--ink);margin-bottom:11px;letter-spacing:.2px}
.side .btn{width:100%;justify-content:center}
.kv{font-size:13px;display:flex;flex-direction:column;gap:8px}
.kv .r{display:flex;gap:10px;align-items:baseline}
.kv .k{color:var(--ink-3);flex:none;width:56px}
.kv .v{color:var(--ink-2);word-break:break-word}
.kv .v a{color:var(--brand-dark);word-break:break-all}
/* 侧栏卡片底部的小字说明（用于版权声明等） */
.side-note{font-size:11.5px;color:var(--ink-4);line-height:1.6;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--line-2)}
.side-note a{color:var(--brand-dark);text-decoration:underline;text-underline-offset:2px}
.side-note .lic{margin:0}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags a{font-size:12px;padding:3px 9px;border-radius:5px;background:var(--bg-3);color:var(--ink-2)}
.tags a:hover{background:var(--brand-soft);color:var(--brand-dark)}
/* 页内目录（内容长时有用） */
.toc{font-size:13.5px}
.toc a{display:block;padding:4px 0 4px 10px;border-left:2px solid var(--line-2);color:var(--ink-3)}
.toc a:hover{color:var(--ink);border-left-color:var(--ink-4)}
.toc a.on{color:var(--brand-dark);border-left-color:var(--brand);font-weight:600}

/* ---------- 底部：相关推荐（内链，防死胡同） ---------- */
.related{border-top:1px solid var(--line);background:var(--bg-2);padding:32px 0 44px}
.related h2{font-size:16px;font-weight:680;color:var(--ink);margin-bottom:16px;display:flex;align-items:baseline;gap:10px}
.related h2 span{font-size:13px;font-weight:400;color:var(--ink-3)}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
.rcard{
  border:1px solid var(--line);border-radius:9px;background:#fff;padding:13px 14px;
  display:flex;flex-direction:column;gap:7px;transition:.15s
}
.rcard:hover{border-color:var(--brand);box-shadow:0 3px 12px rgba(16,163,127,.07);transform:translateY(-1px)}
.rcard .top{display:flex;gap:9px;align-items:center}
.rcard .dot{width:28px;height:28px;border-radius:7px;flex:none;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700}
.rcard b{font-size:14px;font-weight:640;color:var(--ink)}
.rcard p{font-size:12.5px;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px}
.rcard .m{font-size:11.5px;color:var(--ink-4);margin-top:auto;display:flex;gap:8px}
/* 上一个/下一个 */
.pn{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.pn a{
  flex:1;min-width:220px;border:1px solid var(--line);border-radius:9px;background:#fff;
  padding:12px 14px;font-size:13.5px;transition:.15s
}
.pn a:hover{border-color:var(--brand)}
.pn .lbl{font-size:11.5px;color:var(--ink-4);display:block;margin-bottom:3px}
.pn .nm{color:var(--ink);font-weight:600}
.pn .nxt{text-align:right}

footer{border-top:1px solid var(--line);padding:22px 0;font-size:12.5px;color:var(--ink-4)}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .detail{grid-template-columns:1fr;gap:24px}
  .side{position:static;order:-1}          /* 手机上操作栏提到正文前面，别让人滚到底才看到 */
  .side .toc{display:none}
  .hero-in{flex-direction:column;gap:12px}
}
@media (max-width:560px){
  .topnav{display:none}
  .hero h1{font-size:21px}
  .facts{gap:12px;font-size:13px}
  .wrap{padding:0 15px}
}


/* ============================================================
   补充样式：交付包原型没有覆盖到的部分（真实多页站点需要）
   设计语言沿用交付包的 CSS 变量，不引入新色值
   ============================================================ */

/* 顶栏导航当前项 */
.topnav a.on { color: var(--brand-dark); font-weight: 600 }
.cats a.on { color: var(--brand-dark); font-weight: 600 }

/* 卡片整体可点击：整张卡是一个链接，但保留内部按钮可点 */
.card > .card-link { position: absolute; inset: 0; z-index: 0 }
.card .card-inner { position: relative; z-index: 1; pointer-events: none }
.card .card-inner a, .card .card-inner button { pointer-events: auto }
a.card, a.rcard, a.tile { display: block; color: inherit }

/* 筛选抽屉（窄屏） */
body.drawer-open { overflow: hidden }
@media (max-width: 1080px) {
  body.drawer-open #wrap-filters {
    display: block; position: fixed; inset: 0 0 0 auto; width: min(88vw, 340px);
    background: var(--bg); z-index: 80; overflow-y: auto; padding: 16px 18px;
    box-shadow: -12px 0 34px rgba(16, 24, 40, .18)
  }
  body.drawer-open .drawer-mask { display: block }
}
.drawer-mask { display: none; position: fixed; inset: 0; background: rgba(16, 24, 40, .42); z-index: 70 }

/* 面包屑 */
.crumb { border-bottom: 1px solid var(--line-2); background: var(--bg-2) }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 11px 0; font-size: 12.5px; color: var(--ink-3); list-style: none; margin: 0 }
.crumb a { color: var(--ink-2) }
.crumb a:hover { color: var(--brand-dark) }
.crumb .cur { color: var(--ink) }

/* 详情页正文的通用排版 */
.content h2 { font-size: 18px; font-weight: 680; margin: 26px 0 12px; display: flex; align-items: center; gap: 8px }
.content h3 { font-size: 15px; font-weight: 660; margin: 18px 0 8px }
.content p { font-size: 14px; color: var(--ink-2); line-height: 1.85; margin: 0 0 12px }
.content ul { margin: 0 0 14px; padding-left: 20px }
.content li { font-size: 14px; color: var(--ink-2); line-height: 1.8 }
.content a.anchor { font-size: 13px; color: var(--ink-4); font-weight: 400 }
.content a.anchor:hover { color: var(--brand-dark) }

/* 许可徽标三色（交付包已定义，这里补齐 hover 提示的可读性） */
.lic { font-size: 11px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--line); white-space: nowrap }
.lic.permissive { color: var(--ok); background: var(--ok-bg); border-color: #cfe8de }
.lic.copyleft { color: var(--warn); background: var(--warn-bg); border-color: #f0dfc4 }
.lic.unknown { color: var(--ink-3); background: var(--bg-3) }

/* 政策说明条 */
.policybar { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: 8px; font-size: 13px; line-height: 1.7; margin: 14px 0 }
.policybar.mirror { background: var(--ok-bg); border: 1px solid #cfe8de; color: var(--ok) }
.policybar.link-only { background: var(--warn-bg); border: 1px solid #f0dfc4; color: var(--warn) }
.policybar.config-only { background: var(--brand-soft); border: 1px solid #cfe8de; color: var(--brand-dark) }
.policybar b { font-weight: 660 }

/* 表单（投稿页） */
.form { max-width: 720px }
.form label { display: block; font-size: 13px; font-weight: 620; color: var(--ink); margin: 16px 0 6px }
.form .hint { font-weight: 400; color: var(--ink-3); font-size: 12.5px }
.form input[type=text], .form input[type=url], .form input[type=email], .form textarea, .form select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px;
  font-size: 13.5px; font-family: inherit; color: var(--ink); background: var(--bg)
}
.form textarea { min-height: 110px; resize: vertical }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 640px) { .form .row { grid-template-columns: 1fr } }
.form .out { margin-top: 16px }

/* 空状态 */
.empty { padding: 60px 20px; text-align: center; color: var(--ink-4) }
.empty a { color: var(--brand-dark) }

/* 收藏按钮激活态 */
.favbtn.on { background: var(--brand); border-color: var(--brand); color: #fff }

/* 目录页：一行式列表视图下让卡片铺满 */
.grid.list { display: grid; grid-template-columns: 1fr; gap: 9px }
.grid.list .card { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px }

/* 页脚 */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 22px 0 30px; font-size: 12.5px; color: var(--ink-3) }
footer a { color: var(--brand-dark) }
footer .fnav { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px }

/* 顶部统计条 */
.heroStats { font-variant-numeric: tabular-nums }

/* 详情页两栏 */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 28px; align-items: start; padding-bottom: 40px }
@media (max-width: 900px) { .detail { grid-template-columns: 1fr } .side { position: static } }
.side { position: sticky; top: 74px }
.side .card { margin-bottom: 12px }
.side h3 { font-size: 13px; font-weight: 680; color: var(--ink); margin-bottom: 10px }
.kv .r { display: flex; gap: 8px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed var(--line-2) }
.kv .r:last-child { border-bottom: 0 }
.kv .k { color: var(--ink-3); flex: none; min-width: 56px }
.kv .v { color: var(--ink-2); word-break: break-word }
.side-note { font-size: 12px; color: var(--ink-3); line-height: 1.7; margin-top: 8px }
.tags { display: flex; flex-wrap: wrap; gap: 6px }
.tags a { font-size: 12px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 20px; color: var(--ink-2) }
.tags a:hover { border-color: var(--brand); color: var(--brand-dark) }
.installcard .istep { display: block; font-size: 11.5px; color: var(--ink-4); margin: 10px 0 5px }
.ipre { background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 7px; padding: 10px 11px; font-size: 12px; line-height: 1.65; color: var(--ink-2); white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto }
.icopy { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--brand-dark); font-weight: 600; padding: 3px 8px; border-radius: 5px }
.icopy:hover { background: var(--brand-soft) }
.icopy.done { color: var(--ok); background: var(--ok-bg) }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-3) }
.iconbtn:hover { border-color: var(--brand); color: var(--brand-dark) }

/* 详情页区块 */
.credbox { border: 1px solid var(--line); border-radius: 9px; overflow: hidden }
.credbox .crow { display: flex; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--line-2); font-size: 13px }
.credbox .crow:last-child { border-bottom: 0 }
.credbox .ck { color: var(--ink-3); flex: none; min-width: 72px }
.credbox .cv { color: var(--ink-2); word-break: break-word }
.credbox .cnote { color: var(--ink-4); font-size: 12px; margin-left: 6px }
.notice { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 13px 14px; margin-top: 13px; font-size: 13px; line-height: 1.75; color: var(--ink-2) }
.trace-total { display: flex; gap: 20px; align-items: center; border: 1px solid var(--line); border-radius: 9px; padding: 15px; margin-bottom: 14px }
.trace-total .big { text-align: center; flex: none }
.trace-total .big b { font-size: 34px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums }
.trace-total .big span { display: block; font-size: 11.5px; color: var(--ink-3) }
.bars { flex: 1 }
.bars .r { display: flex; align-items: center; gap: 9px; font-size: 12px; margin-bottom: 5px }
.bars .k { width: 12px; color: var(--ink-4); font-weight: 700 }
.bars .nm { width: 70px; color: var(--ink-3) }
.bars .bar { flex: 1; height: 6px; background: var(--bg-3); border-radius: 4px; overflow: hidden }
.bars .bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px }
.bars .v { width: 28px; text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums }
.dims { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px }
.dims .dim { border: 1px solid var(--line-2); border-radius: 8px; padding: 12px 13px }
.dims h4 { font-size: 13px; font-weight: 660; margin-bottom: 6px; display: flex; gap: 6px; align-items: baseline }
.dims h4 .k { color: var(--brand-dark); font-weight: 700 }
.dims h4 em { font-style: normal; color: var(--ink-4); font-size: 11.5px }
.dims .q { font-size: 12px; color: var(--ink-3); margin: 0 0 5px }
.dims p { font-size: 12.5px; color: var(--ink-2); line-height: 1.7; margin: 0 }
.trace-note { border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 7px 7px 0; padding: 11px 14px; font-size: 13px; color: var(--ink-2); line-height: 1.65; margin-top: 13px }
.tagself { font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border: 1px solid #f0dfc4; padding: 2px 7px; border-radius: 5px }
.oursay { background: var(--bg-2); border-left: 3px solid var(--line); padding: 10px 13px; border-radius: 0 7px 7px 0; font-size: 13px; color: var(--ink-3) }

/* 相关推荐 */
.related { border-top: 1px solid var(--line-2); background: var(--bg-2); padding: 26px 0 30px }
.related h2 { font-size: 17px; font-weight: 680; margin-bottom: 14px }
.related h2 span { font-size: 13px; color: var(--ink-3); font-weight: 400; margin-left: 8px }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 11px }
.rcard { border: 1px solid var(--line); border-radius: 9px; background: var(--bg); padding: 12px 13px }
.rcard:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(16, 24, 40, .06) }
.rcard .top { display: flex; gap: 8px; align-items: center; margin-bottom: 6px }
.rcard .dot { width: 22px; height: 22px; border-radius: 6px; color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex: none }
.rcard b { font-size: 13.5px }
.rcard p { font-size: 12.5px; color: var(--ink-2); line-height: 1.6; margin: 0 0 7px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.rcard .m { display: flex; gap: 12px; font-size: 11.5px; color: var(--ink-3) }
.pn { display: flex; gap: 12px; margin-top: 16px }
.pn a { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; background: var(--bg) }
.pn a:hover { border-color: var(--brand) }
.pn .lbl { display: block; font-size: 11.5px; color: var(--ink-3); margin-bottom: 3px }
.pn .nm { font-size: 13.5px; color: var(--ink) }
.pn .nxt { text-align: right }

/* 首页瓷片 */
.tile { border: 1px solid var(--line); border-radius: 9px; background: var(--bg); padding: 13px }
.tile:hover { border-color: var(--brand) }
.tile .tn { font-size: 14px; font-weight: 640; margin-bottom: 3px }
.tile .tc { font-size: 12px; color: var(--ink-3) }

/* 首页最近收录 */
.recent a { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--bg); display: block }
.recent a:hover { border-color: var(--brand) }
.recent .rn { font-size: 13.5px; font-weight: 620; margin-bottom: 3px }
.recent .rm { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 10px }

/* 侧栏分类行：交付包只在 JS 里用过 .catrow，样式表里没有，这里补齐 */
.catrow { margin-bottom: 1px }
.cat, .sub { text-decoration: none }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px }

/* 目录页侧栏在宽屏常显 */
.main { display: grid; grid-template-columns: 212px minmax(0, 1fr); gap: 26px; align-items: start }
@media (max-width: 1080px) { .main { grid-template-columns: 1fr } }

/* 工具条 */
.bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap }
.bar .res { font-size: 13.5px; color: var(--ink-2) }
.bar .res b { color: var(--ink) }
.bar .sp { flex: 1 }
.bar select.s { padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--bg); color: var(--ink-2) }
.sortnote { font-size: 12.5px; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 7px; padding: 9px 12px; margin-bottom: 12px; line-height: 1.7 }
.active .af { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); color: var(--ink-2) }
.active .af button { color: var(--ink-4); font-size: 14px; line-height: 1 }
.active .af button:hover { color: #c0392b }
.active .clear { font-size: 12.5px; color: var(--brand-dark); text-decoration: underline; text-underline-offset: 2px }

/* 分页（JS 生成） */
.pager button { min-width: 34px; height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-size: 13px; color: var(--ink-2) }
.pager button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600 }
.pager button:disabled { opacity: .35; cursor: not-allowed }

/* 卡片内的复制按钮（列表页） */
.ccopy { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--brand-dark); border: 1px solid var(--line); border-radius: 6px; padding: 3px 7px; background: var(--bg); flex: none }
.ccopy:hover { border-color: var(--brand); background: var(--brand-soft) }
.ccopy.done { color: var(--ok); border-color: #cfe8de; background: var(--ok-bg) }

/* 分栏小工具 */
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px }
.note-box { background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 9px; padding: 14px 16px; margin: 14px 0; font-size: 13px; color: var(--ink-2); line-height: 1.8 }

/* 本页目录（放在正文最前面） */
.pagetoc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; border: 1px solid var(--line); background: var(--bg-2); border-radius: 9px; padding: 12px 14px; margin: 18px 0 20px }
.pagetoc b { font-size: 12.5px; color: var(--ink-3); font-weight: 620; margin-right: 2px }
.pagetoc a { font-size: 13px; color: var(--ink-2); border-bottom: 1px dashed var(--line) }
.pagetoc a:hover, .pagetoc a.on { color: var(--brand-dark); border-bottom-color: var(--brand) }

/* 主安装指令更醒目 */
.ipre-primary { background: #0f1720; color: #e8eaed; border-color: #0f1720; font-size: 12.5px }
.moreprompt { margin-top: 10px }
.moreprompt summary { cursor: pointer; font-size: 12.5px; color: var(--brand-dark); padding: 4px 0 }
.moreprompt .ipre { margin-top: 8px }

/* ============================================================
   安装卡与详情页视觉打磨（放在最后，优先级最高）
   ============================================================ */

/* 安装卡：自带内边距，标题下加分隔线 */
.installcard { padding: 15px; border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) }
.installcard > h3 { font-size: 14px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-2) }
.installcard > .btn { width: 100%; justify-content: center; height: 38px; margin-bottom: 12px }
.installcard .itabs { margin-bottom: 12px }
.installcard .inote { font-size: 12px; color: var(--ink-3); line-height: 1.7; margin: 8px 0 0 }
.installcard .policybar { margin-bottom: 0 }

/* 代码块组件：标题栏 + 内容 + 复制按钮，替代原来会被覆盖的 .ipre */
.cmdbox { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-top: 12px; background: var(--bg) }
.cmdbox-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 12px; background: var(--bg-3); border-bottom: 1px solid var(--line-2) }
.cmdbox-h > span { font-size: 11.5px; font-weight: 640; color: var(--ink-3); letter-spacing: .3px }
.cmdbox .icopy { width: auto; height: auto; background: transparent; border: 0; padding: 4px 9px; border-radius: 6px; font-size: 12px }
.cmdbox .icopy:hover { background: var(--brand-soft) }
.cmdbox .icopy.done { background: var(--ok-bg); color: var(--ok) }
.cmdbox .btn.p.icopy { background: var(--brand); border: 1px solid var(--brand); color: #fff }
.cmdbox .btn.p.icopy:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff }
.cmdbox .btn.p.icopy.done { background: var(--ok); border-color: var(--ok); color: #fff }
.cmdbox-b { margin: 0; max-height: 190px; overflow: auto; padding: 12px; background: #fff; color: var(--ink-2); font: 12px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word }
.cmdbox-primary { border-color: #bfe3d8 }
.cmdbox-primary .cmdbox-h { background: var(--brand-soft); border-bottom-color: #cfe8de }
.cmdbox-primary .cmdbox-h > span { color: var(--brand-dark) }
.cmdbox-primary .cmdbox-b { background: #fbfffd }
.moreprompt { margin-top: 12px }
.moreprompt summary { cursor: pointer; font-size: 12.5px; color: var(--brand-dark); padding: 4px 0 }

/* 正文区块卡片化 */
.detail { grid-template-columns: minmax(0, 1fr) 288px }
.content > section { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); scroll-margin-top: 76px }
.content h2 { margin: 0 0 14px; padding-left: 11px; border-left: 3px solid var(--brand); font-size: 17px }
.content h2 .anchor { opacity: .3; font-weight: 400 }
.content h2:hover .anchor { opacity: 1 }
.content > section > p:last-child { margin-bottom: 0 }
.srcline { font-size: 12.5px; color: var(--ink-4); border-left: 2px solid var(--line); padding-left: 10px; margin: 4px 0 0 !important }
.srcdetail { margin-top: 10px }
.srcdetail summary { cursor: pointer; color: var(--brand-dark); font-size: 12.5px }
.srcdetail p { margin: 8px 0 0; color: var(--ink-3); font-size: 13px; line-height: 1.8 }

/* 首屏 */
.hero-in { display: flex; gap: 16px; align-items: flex-start }
.avatar { width: 54px; height: 54px; border-radius: 14px; color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 700; flex: none; box-shadow: 0 4px 12px rgba(16, 24, 40, .12) }
.hero h1 { font-size: 26px; letter-spacing: -.3px }
.lead { color: var(--ink-2); font-size: 14px; line-height: 1.85; max-width: 720px }
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px }
.facts .f { font-size: 12.5px; color: var(--ink-3); background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px }
.facts .f b { color: var(--ink); font-weight: 620 }
.facts .pill { font-size: 12.5px; font-weight: 640; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid #cfe8de; border-radius: 20px; padding: 4px 11px }
.acts { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap }

/* 本页目录更醒目 */
.pagetoc { border-left: 3px solid var(--brand); background: linear-gradient(90deg, var(--brand-soft), var(--bg-2) 65%); padding: 12px 14px }
.pagetoc a { border-bottom: 0; padding: 3px 10px; border-radius: 20px; background: rgba(255, 255, 255, .75); border: 1px solid var(--line) }
.pagetoc a:hover, .pagetoc a.on { background: var(--brand); color: #fff; border-color: var(--brand) }

/* 评分卡 */
.trace-total { background: linear-gradient(135deg, var(--brand-soft), var(--bg-2)); border-color: #cfe8de }
.trace-total .big b { font-size: 38px; letter-spacing: -1px }
.bars .bar i { background: linear-gradient(90deg, var(--brand), #4fd1ab) }

/* 侧栏与相关推荐 */
.side .card { border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .03) }
.side h3 { font-size: 12.5px; letter-spacing: .3px; color: var(--ink-3) }
.rgrid .rcard { border-radius: 11px; transition: transform .15s ease, box-shadow .15s ease }
.rgrid .rcard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 24, 40, .08) }
.related h2 { font-size: 16px }

/* ============================================================
   第二轮打磨：修三个真问题 + 去掉所有背景条
   ============================================================ */

/* 1. 列表页的 .hero{text-align:center} 会渗到详情页，导致图标在左、名字被居中
      看起来就是「图标和名字隔太远」。这里把详情页首屏强制左对齐。 */
.hero-in, .hero .txt, .hero .lead, .hero .metaline, .hero .acts { text-align: left }
.hero-in { gap: 12px; align-items: flex-start }
.hero h1 { font-size: 24px; margin: 0 0 4px }

/* 2. hidden 属性被 .card{display:flex} 压掉 —— 这是筛选点了没反应的原因 */
[hidden] { display: none !important }

/* 3. 关键属性行：粗体标签 + 分号分隔，不再用一排小方块 */
.metaline { margin: 12px 0 0; font-size: 13px; line-height: 1.95; color: var(--ink-3); max-width: 820px }
.metaline b { color: var(--ink); font-weight: 660 }

/* 简介排版 */
.hero .lead { margin-top: 8px; font-size: 15px; line-height: 1.95; color: var(--ink-2); max-width: 760px; letter-spacing: .1px }

/* 4. 去掉「背景条」：本页目录、提示块、评估块、首屏说明、评分卡 */
.pagetoc { background: none; border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 0 0 12px; margin: 22px 0 28px; gap: 6px 18px }
.pagetoc b { color: var(--ink-4); font-weight: 600; margin-right: 4px }
.pagetoc a { background: none; border: 0; padding: 2px 0; color: var(--ink-3); font-size: 13px }
.pagetoc a:hover, .pagetoc a.on { color: var(--brand-dark); font-weight: 640; text-decoration: underline; text-underline-offset: 4px }

.content > section { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; box-shadow: none; padding: 26px 0 0; margin: 0 0 32px }
.content > section:first-of-type { border-top: 0; padding-top: 0 }
.content h2 { border-left: 0; padding-left: 0; font-size: 18px; letter-spacing: -.2px; margin-bottom: 12px }
.content p { line-height: 1.9 }
.notice { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 14px 0 0; color: var(--ink-3) }
.trace-note { background: none; border: 0; border-top: 1px solid var(--line-2); border-radius: 0; padding: 14px 0 0; color: var(--ink-3) }
.oursay { background: none; border: 0; padding: 0; color: var(--ink-3) }
.srcline { border-left: 0; padding-left: 0; color: var(--ink-4) }
.hero-note { background: none; border: 0; padding: 0 }
.trace-total { background: none; border: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 18px 0; margin-bottom: 18px }
/* 恢复外框：这块是"来源与版权"的逐条明细（原作者/来源/许可…），
   之前被拉平成无框横条，几条挨在一起看不出是一组。 */
.credbox { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--bg) }
.credbox .crow { border-bottom: 1px solid var(--line-2) }
.credbox .crow:last-child { border-bottom: 0 }

/* 5. 适用的 Agent 表格 */
.agenttable { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 4px }
.agenttable th { text-align: left; font-size: 11.5px; font-weight: 640; color: var(--ink-4); letter-spacing: .4px; padding: 0 12px 8px 0; border-bottom: 1px solid var(--line) }
.agenttable td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line-2); color: var(--ink-2); vertical-align: top }
.agenttable td:first-child { color: var(--ink); font-weight: 640; white-space: nowrap }
.agenttable td:last-child { white-space: nowrap; text-align: right }
.agenttable code { font-size: 12px; color: var(--ink-2); background: none; padding: 0 }
.agenttable a { color: var(--brand-dark) }
@media (max-width: 720px) { .agenttable th:nth-child(3), .agenttable td:nth-child(3) { display: none } }

/* ============================================================
   第三轮：整卡可点 + 小屏顶栏分类
   ============================================================ */

/* 整卡可点：覆盖层在最下，内容层 pointer-events:none，只有 a / button 例外。
   之前漏了覆盖层元素，导致只有标题文字能点。 */
.card > .card-link { position: absolute; inset: 0; z-index: 0; border-radius: inherit }
.card .card-inner { position: relative; z-index: 1; pointer-events: none }
.card .card-inner a, .card .card-inner button { pointer-events: auto }
.card:has(.card-link:hover) { border-color: var(--brand) }
.card .card-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }

/* 小屏顶栏：分类不再被隐藏，改成独占一行的可滑动标签条，右侧渐隐提示还有内容 */
@media (max-width: 1080px) {
  .top-in { flex-wrap: wrap; height: auto; padding: 8px 0 6px; gap: 8px 12px }
  nav.cats {
    display: flex !important;
    order: 3;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent)
  }
  nav.cats a { flex: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: 20px; padding: 5px 12px; font-size: 13px }
  nav.cats a.on { background: var(--brand); border-color: var(--brand); color: #fff }
  .top-right { gap: 7px; margin-left: auto }
  .top-right .btn { padding: 5px 10px; font-size: 12.5px }
  .top-right .tg { display: none }
}
@media (max-width: 560px) {
  /* 手机上把「图标 + 文字」按钮的图标收起来腾宽度。
     但收藏（.iconbtn）、暗色切换（.themebtn）、分类汉堡（.menubtn）本身就是纯图标按钮：
     下面 .iconbtn .tx 已经把文字藏了，这里再把图标藏掉，按钮里就什么都不剩——
     深色下只剩一圈几乎看不见的边框，看着像"按钮消失了"。
     所以这三类必须留图标；「仅文字模式」下收藏改显文字，另两个没有文字可显，仍然留图标。 */
  .top-right .btn:not(.iconbtn):not(.themebtn):not(.menubtn) .ic { display: none }
  body.noicon .top-right .btn .ic { display: none }
  body.noicon .top-right .themebtn .ic { display: inline-block }
}

/* ============================================================
   第四轮：复制按钮 / 目录绿底 / 首屏左对齐
   ============================================================ */

/* 1. 卡片右上角复制按钮：交付包把它定义为 27×27 的绝对定位图标按钮，
      我上一版改成文字胶囊却没重置这些属性，文字被挤在 27px 的框里 —— 恢复为纯图标按钮 */
.ccopy {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; padding: 0; gap: 0;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255, 255, 255, .96); color: var(--ink-3);
  font-size: 0; opacity: 0; transition: .15s; z-index: 3
}
.ccopy .ic { width: 14px; height: 14px }
@media (hover: hover) and (pointer: fine) { .card:hover .ccopy, .ccopy:focus-visible { opacity: 1 } }
@media (hover: none) { .ccopy { opacity: 1 } }
.ccopy:hover { color: var(--brand-dark); border-color: var(--brand); background: #fff }
.ccopy.done { color: var(--ok); border-color: #cfe8de; background: var(--ok-bg); opacity: 1 }

/* 2. 本页目录：连 .on / hover 的绿色底一起去掉，只保留下划线 */
.pagetoc a:hover, .pagetoc a.on {
  background: none; border: 0; border-radius: 0; padding: 2px 0;
  color: var(--brand-dark); font-weight: 640;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px
}

/* 3. 目录页 / 分类页首屏改成左对齐（交付包对 .hero 设了 text-align:center） */
.hero-list { text-align: left }
.hero-list h1, .hero-list .sub, .hero-list .hero-note { text-align: left }
.hero-list .bigsearch { margin-left: 0; margin-right: 0; max-width: 640px }
.hero-list .quickchips { justify-content: flex-start }

/* 4. 页内说明改成一行小字，不再用整块背景 */
.notice-line { font-size: 12.5px; color: var(--ink-4); line-height: 1.8; margin: 12px 0 0 }
.notice-line a { color: var(--brand-dark) }
.content > section > p.notice-line:last-child { margin-bottom: 0 }

/* ============================================================
   第五轮：关键属性改成键值网格（不要再把分号当分隔符）
   ============================================================ */
.metagrid { display: flex; flex-wrap: wrap; gap: 8px 30px; margin: 14px 0 0; padding: 0; max-width: 860px }
.metagrid > div { display: flex; align-items: baseline; gap: 9px; min-width: 0 }
.metagrid dt { font-size: 12px; color: var(--ink-4); letter-spacing: .4px; white-space: nowrap; font-weight: 400 }
.metagrid dd { margin: 0; font-size: 13.5px; color: var(--ink); font-weight: 620; white-space: nowrap }
.metagrid dd a { color: var(--brand-dark) }
@media (max-width: 640px) { .metagrid { gap: 6px 20px } .metagrid dt { font-size: 11.5px } .metagrid dd { font-size: 13px } }

/* 旧的连排样式保留为无害空规则，避免历史引用出错 */
.metaline { display: none }

/* ============================================================
   第六轮：介绍区的功能说明单独成段
   ============================================================ */
.content .leadline { font-size: 15px; color: var(--ink); line-height: 1.95; margin: 0 0 14px }

/* ============================================================
   第七轮：介绍区以忠实译文为主
   ============================================================ */
.srclabel { font-size: 11.5px; color: var(--ink-4); letter-spacing: .6px; margin: 0 0 6px }
.content .leadline { margin-bottom: 10px }
.ourline { font-size: 13px; color: var(--ink-3); line-height: 1.85; margin: 0 0 14px; padding-top: 10px; border-top: 1px solid var(--line-2) }
.ourline b { color: var(--ink-2); font-weight: 620; margin-right: 8px }

/* ============================================================
   第八轮：属性行标签加深、值按语义分色
   ============================================================ */
.metagrid dt { color: var(--ink); font-weight: 560; font-size: 12px; letter-spacing: .3px }
.metagrid dd { font-weight: 640 }
.metagrid .mv-skill { color: #3b6fe0 }
.metagrid .mv-mcp { color: #0e8fa3 }
.metagrid .mv-cat { color: #7a5cd6 }
.metagrid .mv-star { color: #c0820f }
.metagrid .mv-score-hi { color: var(--brand-dark) }
.metagrid .mv-score-mid { color: #c0820f }
.metagrid .mv-score-lo { color: var(--ink-3) }
.metagrid .mv-pol-mirror { color: var(--brand-dark) }
.metagrid .mv-pol-config { color: #0e8fa3 }
.metagrid .mv-pol-link { color: #b5711f }

/* ============================================================
   第九轮：属性行与首页统计加分号，统一视觉
   ============================================================ */
.metagrid .msep { color: var(--ink-4); margin-left: -4px; font-size: 13px }
.metagrid-center { justify-content: center; margin-top: 20px }
.metagrid .mv-total { color: var(--brand-dark) }
@media (max-width: 640px) {
  .metagrid-center { gap: 4px 18px; margin-top: 14px }
  .metagrid-center dd { font-size: 13px }
}

/* ============================================================
   第十轮：首页副标题居中 + 统计条真正居中
   ============================================================ */

/* 修类名冲突：交付包的 .sub 是侧栏二级分类（display:flex / width:100% / text-align:left），
   首页副标题同样用 .sub，于是被带成左对齐。这里用 :not(.hero-list) 只作用于首页横幅，
   不影响目录页、分类页（那两页的副标题要左对齐）。 */
.hero-home .sub {
  display: block; width: auto; text-align: center;
  margin-left: auto; margin-right: auto; max-width: 760px
}
.hero-home h1 { text-align: center }

/* 统计条：.metagrid 有 max-width:860px，只居中盒内内容会整体偏左，必须让盒子本身居中 */
.metagrid-center { justify-content: center; margin-left: auto; margin-right: auto; max-width: 100% }

/* ============================================================
   第十一轮：预设筛选的说明文字 + 链接形态样式
   ============================================================ */
.chiphint { font-size: 12px; color: var(--ink-4); margin: 16px 0 0; letter-spacing: .3px }
.hero-home .chiphint { text-align: center }
.hero-list .chiphint { text-align: left }
.quickchips { margin-top: 8px }
a.chip { display: inline-block; text-decoration: none; cursor: pointer }
a.chip:hover { border-color: var(--brand); color: var(--brand-dark) }

/* ============================================================
   第十二轮：分类栏小屏全部可见 + 手机/平板整体适配
   ============================================================ */

/* 1. 小屏分类栏：不再横向滚动（滚动会「显示不全」），改成自动换行全部露出 */
@media (max-width: 1080px) {
  nav.cats {
    flex-wrap: wrap !important;
    overflow: visible !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    gap: 6px !important
  }
  header.top { position: static }   /* 头部变高后不再吸顶，避免吃掉手机屏幕 */
  .top-in { padding: 10px 0 12px; gap: 8px 10px }
}

/* 2. 手机（<=720px）整体收紧 */
@media (max-width: 720px) {
  .wrap { padding: 0 14px }
  header.top { position: static }
  .logo { font-size: 15px }
  .logo i { width: 22px; height: 22px; font-size: 11px }
  .top-right { gap: 6px }
  .top-right .btn { padding: 5px 9px; font-size: 12px }
  nav.cats a { padding: 4px 10px; font-size: 12.5px }

  .hero { padding: 20px 0 16px }
  .hero h1 { font-size: 20px; line-height: 1.45 }
  .hero .sub { font-size: 13.5px; line-height: 1.7 }
  .hero .lead { font-size: 14px; line-height: 1.85 }
  .bigsearch { margin-top: 14px }
  .bigsearch input { height: 44px; padding: 0 82px 0 40px; font-size: 14px }
  .bigsearch .go { height: 34px; padding: 0 12px; font-size: 13px; top: 5px; right: 5px }
  .bigsearch svg.mag { top: 14px; left: 13px }
  .quickchips { gap: 6px }
  .chip { padding: 6px 11px; font-size: 12.5px }
  .chiphint { margin-top: 13px; font-size: 11.5px }

  .sec { padding: 22px 0 }
  .sec-h h2 { font-size: 16px }
  .sec-h .hint { font-size: 12px }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px }
  .tile { padding: 11px }
  .tile .tn { font-size: 13px }
  .tile .tc { font-size: 11.5px }

  .grid { grid-template-columns: 1fr; gap: 11px }
  .card { padding: 13px }
  .card h3 { font-size: 14px }
  .card .desc { font-size: 12.5px; min-height: 0; -webkit-line-clamp: 2 }
  .rcard { padding: 11px }

  /* 详情页 */
  .hero-in { gap: 10px }
  .avatar { width: 44px; height: 44px; font-size: 18px; border-radius: 12px }
  .metagrid { gap: 6px 16px; margin-top: 12px }
  .metagrid > div { gap: 7px }
  .metagrid dd { white-space: normal }
  .content > section { padding-top: 20px; margin-bottom: 24px }
  .content h2 { font-size: 16.5px }
  .credbox .crow { flex-direction: column; gap: 3px; padding: 9px 0 }
  .credbox .ck { min-width: 0; font-size: 12px }
  .installcard { padding: 13px }
  .cmdbox-b { font-size: 11.5px; max-height: 170px; padding: 10px }
  .pagetoc { margin: 18px 0 22px; gap: 4px 14px }
  .pn { flex-direction: column; gap: 8px }
  .pn a { width: 100% }
  .pn .nxt { text-align: left }
  .related { padding: 20px 0 24px }
  .rgrid { grid-template-columns: 1fr; gap: 9px }

  /* 关于 / 投稿 / 教程 */
  .about-grid, .grid2 { grid-template-columns: 1fr }
  .note-box { padding: 12px 13px; font-size: 12.5px }
  .form .row { grid-template-columns: 1fr }
  footer { padding: 18px 0 24px }
  footer .fnav { gap: 10px 14px; font-size: 12px }
}

/* 3. 更窄的手机 */
@media (max-width: 420px) {
  .hero h1 { font-size: 18.5px }
  .metagrid dt { font-size: 11px }
  .metagrid dd { font-size: 12.5px }
  .top-right .tg { display: none }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) }
}

/* 4. 触屏：保证可点区域够大 */
@media (hover: none) {
  .chip, .btn, .itab, .filter, .pager button, .cat, .sub, .fo { min-height: 38px }
  .ccopy { width: 32px; height: 32px; opacity: 1 }
  .toc a, .pagetoc a { padding: 6px 0 }
}

/* 底部导航已移除（首页/目录/筛选/投稿那条），所以原来给它留的 56px 也不再需要 */

/* ============================================================
   第十三轮：修横向溢出 + 分类栏不再被切
   ============================================================ */

/* 1. 详情页在手机上必须收成单栏。交付包与第四轮各有一条 .detail 规则，
      第四轮那条没有媒体查询且排在后面，把手机的单栏规则盖掉了 —— 导致整页比屏幕宽。 */
@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; gap: 20px; padding-bottom: 24px }
  .side { position: static; order: -1 }
}

/* 2. 顶栏分类：任何宽度都允许换行，并占满剩余空间，不再被切 */
nav.cats {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  overflow: visible;
  row-gap: 4px;
  -webkit-mask-image: none;
  mask-image: none
}

/* 3. 顶栏右侧按钮组允许换行，避免撑破容器 */
.top-right { flex-wrap: wrap; justify-content: flex-end; min-width: 0 }

/* 4. 宽屏隐藏「筛选」（侧栏本来就常显），并把这条从 hover 媒体查询里解放出来 */
@media (min-width: 821px) { .filterbtn { display: none } }

/* 5. 兜底：任何元素都不该把页面撑宽 */
img, svg, table, pre { max-width: 100% }
.metagrid, .credbox, .cmdbox, .installcard { min-width: 0 }

/* ============================================================
   第十四轮：顶栏一行放得下
   ============================================================ */
/* 顶栏图标按钮（收藏）：方一点，省空间 */
header.top .iconbtn { width: 34px; height: 34px; padding: 0; justify-content: center }
header.top .btn.p { padding: 6px 14px }
nav.cats { gap: 1px }
nav.cats a { padding: 6px 9px; font-size: 13px }

/* 页脚里的「仅文字」开关 */
.tg-foot { margin-left: 4px; color: var(--ink-3) }
.tg-foot input { accent-color: var(--brand) }

/* 宽屏下侧栏常显，筛选按钮只在窄屏出现 */
@media (min-width: 821px) { .filterbtn { display: none } }

/* ============================================================
   第十五轮：技能卡片整体做小（桌面一列更窄、高度更矮）
   ============================================================ */
.grid { grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 11px }
.card { padding: 11px; border-radius: 9px; gap: 7px }
.card-top { gap: 8px }
.card-top > div { padding-right: 28px }   /* 给右上角复制按钮让位，标题不会钻到它下面 */
.ico { width: 30px; height: 30px; border-radius: 8px; font-size: 14px }
.card h3 { font-size: 13.5px; gap: 5px }
.ver { font-size: 10.5px }
.card .ns { font-size: 11px; margin-top: 1px }
.badges { gap: 4px }
.bdg { font-size: 10px; padding: 1px 5px; gap: 2px }
.card .desc { font-size: 12px; line-height: 1.55; -webkit-line-clamp: 2; min-height: 0 }
.card .foot { gap: 9px; padding-top: 7px; font-size: 11px }
.card .foot .cat-l { font-size: 10.5px }
.ccopy { width: 26px; height: 26px; top: 8px; right: 8px; border-radius: 7px }
.ccopy .ic { width: 12px; height: 12px }

/* 手机：一列，但更紧凑 */
@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; gap: 9px }
  .card { padding: 10px; gap: 6px }
  .ico { width: 26px; height: 26px; font-size: 13px; border-radius: 7px }
  .card h3 { font-size: 12.5px }
  .card .desc { font-size: 11.5px; -webkit-line-clamp: 2 }
  .card .foot { font-size: 10.5px; gap: 8px; padding-top: 6px }
  .ccopy { width: 28px; height: 28px; top: 7px; right: 7px }
}

/* ============================================================
  第十六轮：标题超长省略（不再换行撑高卡片）
  ============================================================ */
.card h3 { display: flex; align-items: baseline; gap: 5px; min-width: 0; flex-wrap: nowrap }
.card h3 a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.card h3 .ver { flex: none }
.card .ns { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
/* 相关推荐的小卡片同样处理 */
.rcard b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* ============================================================
   第十七轮：仅文字模式要收干净（不能只藏 SVG 留下空框）
   ============================================================ */

/* 默认：文字标签隐藏，这些控件平时是纯图标 */
.ccopy .tx, .iconbtn .tx, .viewsw .tx { display: none }
.viewsw button { display: inline-flex; align-items: center; gap: 4px; justify-content: center }

/* 仅文字模式：字母色块、头像、推荐卡圆点这些「用颜色代替图标」的方块整块收掉 */
body.noicon .ico,
body.noicon .avatar,
body.noicon .rcard .dot,
body.noicon .logo i { display: none }

/* 纯图标按钮改成文字按钮，不留空框 */
body.noicon .ccopy,
body.noicon .iconbtn { width: auto; min-width: 0; padding: 0 9px; gap: 0 }
body.noicon .ccopy .tx,
body.noicon .iconbtn .tx,
body.noicon .viewsw .tx { display: inline }
body.noicon .ccopy { position: absolute; top: 8px; right: 8px; width: auto; height: 26px; padding: 0 8px; margin-left: 0; font-size: 11.5px; color: var(--brand-dark) }

/* 搜索框左边原本是给放大镜留的位移，没图标了要收回去 */
body.noicon .bigsearch input { padding-left: 16px }
body.noicon .bigsearch .mag { display: none }

/* 底部导航只剩文字，去掉图标占位的间隙 */
body.noicon .mobnav a { gap: 0 }
body.noicon .mobnav .ic { display: none }

/* 卡片顶部在没有色块后不需要右侧让位了 */
body.noicon .card-top > div { padding-right: 52px }   /* 给文字版复制按钮让位，标题宽度与普通模式一致 */

/* ============================================================
   第十八轮：收藏页支持移除
   ============================================================ */
.saved-cell { position: relative }
.saved-cell .rcard { display: block; height: 100% }
.saved-x {
  position: absolute; top: 8px; right: 8px;
  font-size: 11px; color: var(--ink-3);
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 8px; cursor: pointer
}
.saved-x:hover { color: #b5711f; border-color: #e2c9a8; background: #fdf6ec }

/* ============================================================
   第十九轮：让深色模式真正生效
   基础样式里 :root 被重复声明多次，最后一个（浅色）排在 dark 块之后，
   把深色变量盖了回去；另外有 19 个组件把 #fff 写死在背景上。
   这里在文件最末重新声明变量，并逐个覆盖写死的浅色。

   第三十一轮修正：这些规则原先只服务「跟随系统」，
   手动切主题走的是 html.theme-dark/light 类，于是手动暗色下 .hero 仍是
   写死的 #fff 渐变（暗色页面顶部一条白），手动浅色在系统深色下又反过来被染深。
   现在每条都加 html:not(.theme-light)：系统深色 + 手动浅色时自动让位；
   手动深色那一侧见文件末尾的 html.theme-dark 块，两边必须覆盖同一批选择器。
   ============================================================ */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) {
    --brand: #2bbd94; --brand-dark: #4fd1ab; --brand-soft: #12332b;
    --ink: #e8eaed; --ink-2: #b4bac1; --ink-3: #8a9199; --ink-4: #6b7278;
    --line: #2b2f34; --line-2: #23272b;
    --bg: #15181b; --bg-2: #1a1e21; --bg-3: #212529;
    --ok: #4fd1ab; --ok-bg: #12332b;
    --warn: #e0a45c; --warn-bg: #33280f;
  }
  html:not(.theme-light) body { background: var(--bg); color: var(--ink-2) }
  html:not(.theme-light) header.top { background: rgba(21, 24, 27, .94) }
  html:not(.theme-light) .mobnav { background: rgba(21, 24, 27, .97) }
  html:not(.theme-light) .btn:not(.p), html:not(.theme-light) .chip, html:not(.theme-light) .bigsearch input,
  html:not(.theme-light) select.s, html:not(.theme-light) .card, html:not(.theme-light) .tile,
  html:not(.theme-light) .rc, html:not(.theme-light) .rcard, html:not(.theme-light) .credbox,
  html:not(.theme-light) .pn a, html:not(.theme-light) .pager button, html:not(.theme-light) #wrap-filters.open,
  html:not(.theme-light) .itab.on, html:not(.theme-light) .dim, html:not(.theme-light) .tr .detail,
  html:not(.theme-light) .installcard, html:not(.theme-light) .cmdbox, html:not(.theme-light) .saved-x {
    background: var(--bg-2);
    border-color: var(--line)
  }
  html:not(.theme-light) .ccopy { background: rgba(21, 24, 27, .94) }
  html:not(.theme-light) .ccopy:hover { background: #232a2f }
  html:not(.theme-light) .installcard .icopy { background: transparent }
  html:not(.theme-light) .hero h1 .badge { background: var(--brand-soft); color: var(--brand-dark) }
  html:not(.theme-light) .cmdbox-b { background: #0f1418; color: #d6e6e0; border-color: #232a2f }
  html:not(.theme-light) .saved-x:hover { background: var(--warn-bg); border-color: var(--warn) }
  html:not(.theme-light) .metagrid .msep { color: var(--ink-4) }
  html:not(.theme-light) .grid .card .desc, html:not(.theme-light) .content { color: var(--ink-2) }
  html:not(.theme-light) input, html:not(.theme-light) textarea, html:not(.theme-light) select {
    background: var(--bg-2); color: var(--ink); border-color: var(--line)
  }
  html:not(.theme-light) .ipre { background: var(--bg-3); color: var(--ink-2) }
  /* .hero 的 #fff 渐变在 home.css/list.css 里，这里补上系统深色一侧 */
  html:not(.theme-light) .hero { background: linear-gradient(180deg, #15181b, #1a1e21) }
  html:not(.theme-light) .aside-foot { background: rgba(21, 24, 27, .97) }
  html:not(.theme-light) .bdg.zh { background: #1b2837; color: #7fb3f0 }
  html:not(.theme-light) .tagnew { background: #33230f; border-color: #4a3418; color: #e0a45c }
}

/* ============================================================
   第二十轮：收藏码工具条
   ============================================================ */
.savedbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 18px }
.savedbar #favCode {
  flex: 1 1 320px; min-width: 0; height: 36px; padding: 0 11px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); color: var(--ink); font-size: 12.5px
}
.savedbar .hint { flex: 1 1 100%; min-width: 0; overflow-wrap: anywhere }
@media (max-width: 720px) { .savedbar .btn { flex: 1 1 auto } .savedbar #favCode { flex: 1 1 100% } }

/* ============================================================
   第二十一轮：键盘焦点可见（可访问性）
   交付包在搜索框和 select 上写了 outline:none，却没给替代的焦点样式，
   结果键盘用户完全看不到焦点在哪。这里统一补回来。
   :focus-visible 只在键盘操作时出现，鼠标点击不会多出边框。
   ============================================================ */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }

/* 这几类控件被显式去掉了 outline，用 !important 保证焦点环一定盖过它 */
a:focus-visible, button:focus-visible, select:focus-visible,
input[type=checkbox]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px
}

/* 文本类控件用边框高亮而不是外框，和搜索框保持一致 */
input[type=text]:focus, input[type=url]:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft)
}
.bigsearch input:focus { outline: none }   /* 它自带整圈光晕，不需要再叠外框 */

/* 深色下焦点环换成亮一点的绿，保证在深底上看得清 */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) :focus-visible { outline-color: #4fd1ab }
  html:not(.theme-light) a:focus-visible, html:not(.theme-light) button:focus-visible,
  html:not(.theme-light) select:focus-visible, html:not(.theme-light) input[type=checkbox]:focus-visible,
  html:not(.theme-light) [tabindex]:focus-visible { outline-color: #4fd1ab !important }
}

/* ============================================================
   第二十二轮：真实指标取代自造评分
   周下载量用砖红（npm 的品牌色系），与 Star 的琥珀、分类的紫区分开
   ============================================================ */
.metagrid .mv-dl { color: #b5412f }
@media (prefers-color-scheme: dark) { html:not(.theme-light) .metagrid .mv-dl { color: #e88f7d } }

/* ============================================================
   第二十三轮：本站自己的统计数据（下载 / 安装清单 / 浏览）
   ============================================================ */
.metagrid .mv-dl { color: #b5412f }        /* 下载：砖红 */
.metagrid .mv-inst { color: #0f766e }      /* 安装清单被取：深青 */
.metagrid .mv-view { color: #6b7278 }      /* 浏览：中性灰，最轻 */
@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .metagrid .mv-dl { color: #e88f7d }
  html:not(.theme-light) .metagrid .mv-inst { color: #5eead4 }
  html:not(.theme-light) .metagrid .mv-view { color: #8a9199 }
}

/* ============================================================
   第二十四轮：来源方数据与本站数据分开放
   ============================================================ */
.credbox .ck-note { display: block; margin-top: 2px; font-size: 11px; color: var(--ink-4) }

/* ============================================================
   第二十五轮：属性行放本站自己的数据（收录时间）
   ============================================================ */
.metagrid .mv-added { color: var(--ink-2) }

/* ============================================================
   第二十六轮：分隔号看得见 + 每个值都有明确颜色
   之前分隔号用的是最浅的灰（--ink-4），13px 下几乎看不见；
   「本站收录」用的是 --ink-2，混在彩色值里像是没上色。
   ============================================================ */
.metagrid .msep { color: var(--ink-3); margin-left: -3px }
.metagrid .mv-added { color: #4a6572 }   /* 本站收录：石板蓝，可见但不抢眼 */
.metagrid .mv-view { color: #566270 }    /* 本站浏览： slate，比原来的灰清楚 */

/* 标签统一纯黑，值统一彩色——这是你要的两段式 */
.metagrid dt { color: #111418; font-weight: 560 }
.metagrid dd { font-weight: 640 }

@media (prefers-color-scheme: dark) {
  .metagrid dt { color: #e8eaed }
  .metagrid .msep { color: #8a9199 }
  .metagrid .mv-added { color: #9fb3c8 }
  .metagrid .mv-view { color: #98a1aa }
}

/* ============================================================
   第二十七轮：改成「标签：值」，去掉分号
   冒号已写进 <dt>，标签与值之间不需要再留大间距；
   项与项之间靠列间距分开。
   ============================================================ */
.metagrid { gap: 8px 36px }
.metagrid > div { gap: 6px }
.metagrid .msep { display: none }   /* 分号不再使用，保留规则避免历史引用报错 */
@media (max-width: 640px) { .metagrid { gap: 6px 22px } }

/* ============================================================
   第二十八轮：标签与值统一字号
   之前标签 12px、值 13.5px，并排看着不齐（实测高度差 2px）。
   现在两者同字号，层级改由字重 + 颜色承担：标签纯黑 560，值彩色 650。
   ============================================================ */
.metagrid dt { font-size: 13px; font-weight: 560; letter-spacing: 0 }
.metagrid dd { font-size: 13px; font-weight: 650 }
.metagrid-center dt, .metagrid-center dd { font-size: 13px }

/* 窄屏同步缩小，但两者仍保持一致 */
@media (max-width: 720px) { .metagrid dt, .metagrid dd { font-size: 12.5px } }
@media (max-width: 640px) { .metagrid dt, .metagrid dd { font-size: 12.5px } }
@media (max-width: 420px) { .metagrid dt, .metagrid dd { font-size: 12px } }

/* ============================================================
   第二十九轮：清理死样式 + 订阅/高亮/主题相关新增
   ============================================================ */

/* 评分与星级移除后不再产出的类：直接置空，避免继续占编译体积与阅读成本 */
.metagrid .mv-star, .metagrid .mv-score-hi, .metagrid .mv-score-mid, .metagrid .mv-score-lo { color: inherit }
.metagrid .msep { display: none }
.trace-total, .trace-total .bars, .tagself { display: none }

/* ===== 搜索结果高亮 ===== */
mark.hl { background: #fff3bf; color: inherit; border-radius: 2px; padding: 0 1px }
@media (prefers-color-scheme: dark) { mark.hl { background: #4a3d12; color: #f0e6c8 } }

/* ===== 主题切换按钮 ===== */
.themebtn { width: 34px; height: 34px; padding: 0; justify-content: center }
header.top .themebtn { display: inline-flex; align-items: center; justify-content: center }

/* ===== 404 的搜索兜底 ===== */
.nf-search { max-width: 460px; margin: 18px auto 0 }
.nf-links { margin-top: 14px; font-size: 13.5px; color: var(--ink-3) }
.nf-links a { margin: 0 7px }

/* ============================================================
   第三十轮：手动主题切换（深/浅），覆盖系统偏好
   ============================================================ */
html.theme-dark { --brand:#2bbd94; --brand-dark:#4fd1ab; --brand-soft:#12332b; --ink:#e8eaed; --ink-2:#b4bac1; --ink-3:#8a9199; --ink-4:#6b7278; --line:#2b2f34; --line-2:#23272b; --bg:#15181b; --bg-2:#1a1e21; --bg-3:#212529; --ok:#4fd1ab; --ok-bg:#12332b; --warn:#e0a45c; --warn-bg:#33280f }
html.theme-dark body { background: var(--bg); color: var(--ink-2) }
html.theme-dark header.top { background: rgba(21,24,27,.94) }
html.theme-dark .mobnav { background: rgba(21,24,27,.97) }
html.theme-dark .btn:not(.p), html.theme-dark .chip, html.theme-dark .bigsearch input, html.theme-dark select.s,
html.theme-dark .card, html.theme-dark .tile, html.theme-dark .rc, html.theme-dark .rcard, html.theme-dark .credbox,
html.theme-dark .pn a, html.theme-dark .pager button, html.theme-dark #wrap-filters.open, html.theme-dark .itab.on,
html.theme-dark .dim, html.theme-dark .tr .detail, html.theme-dark .installcard, html.theme-dark .cmdbox, html.theme-dark .saved-x {
  background: var(--bg-2); border-color: var(--line)
}
html.theme-dark .ccopy { background: rgba(21,24,27,.94) }
html.theme-dark .cmdbox-b { background: #0f1418; color: #d6e6e0; border-color: #232a2f }
html.theme-dark :focus-visible { outline-color: #4fd1ab }
html.theme-dark mark.hl { background: #4a3d12; color: #f0e6c8 }

/* 手动深色必须与「系统深色」覆盖同一批选择器，否则系统是浅色时手动切暗会漏掉这些。
   .hero 这条就是漏了才出现的「暗色页面顶部一条白渐变」。 */
html.theme-dark .hero { background: linear-gradient(180deg, #15181b, #1a1e21) }
html.theme-dark .aside-foot { background: rgba(21,24,27,.97) }
html.theme-dark .bdg.zh { background: #1b2837; color: #7fb3f0 }
html.theme-dark .bdg.src { background: var(--bg-3) }
html.theme-dark .tagnew { background: #33230f; border-color: #4a3418; color: #e0a45c }
html.theme-dark input, html.theme-dark textarea, html.theme-dark select {
  background: var(--bg-2); color: var(--ink); border-color: var(--line)
}
html.theme-dark .ipre { background: var(--bg-3); color: var(--ink-2) }
html.theme-dark .metagrid .mv-dl { color: #e88f7d }
html.theme-dark .metagrid .mv-inst { color: #5eead4 }
html.theme-dark .metagrid .mv-view { color: #8a9199 }

html.theme-light { --brand:#10a37f; --brand-dark:#0d8467; --brand-soft:#e8f6f2; --ink:#1a1d21; --ink-2:#4a5158; --ink-3:#8b939b; --ink-4:#b3bac1; --line:#e6e9ec; --line-2:#f0f2f4; --bg:#fff; --bg-2:#fafbfc; --bg-3:#f4f6f8; --ok:#0b7a5e; --ok-bg:#f0f7f4; --warn:#a8641a; --warn-bg:#fdf6ec }
html.theme-light body { background: var(--bg); color: var(--ink-2) }
html.theme-light header.top { background: rgba(255,255,255,.94) }

/* 打印 */
@media print { .top, .mobnav, .side, .quickchips, footer .fnav { display: none } }

/* ============================================================
   手机端分类：横向胶囊标签 → 汉堡 + 抽屉
   原来 ≤1080px 把 nav.cats 变成一条横向滑动的胶囊标签（还带 !important），
   窄屏上又挤又难滑，而且它把 list.css 里 820px 下的 display:none 也压掉了，
   所以手机上一直显示。这里在 820px 以下彻底隐藏标签条，改用左侧抽屉。
   ============================================================ */
.menubtn { display: none; width: 34px; height: 34px; padding: 0; justify-content: center; flex: none }

@media (max-width: 820px) {
  nav.cats { display: none !important }        /* 必须 !important：上面那条胶囊规则也带 !important */
  /* 汉堡放最右：list.css 里 #filterBtn{order:2} 是 ID 选择器、全局生效，
     会把「筛选」钉在这一组的最后，所以这里给汉堡更高的 order 压过去。 */
  .menubtn { display: inline-flex; align-items: center; justify-content: center; order: 3 }
  /* 收紧间距，给汉堡腾位置，别让顶栏挤成两行 */
  .top-in { gap: 6px 8px }
  .top-right { gap: 6px }

  /* 顶栏吸顶：顶栏已经收成一行（汉堡把那条标签条换掉了），吸顶不再吃屏幕。
     这条必须放在 site.css 末尾——前面的 ≤720 / ≤560 块和 home/list/detail.css
     都把 header.top 改回了 static，靠书写顺序压回来。 */
  header.top {
    position: sticky; top: 0; z-index: 50;
    /* 状态栏/前摄安全区：顶栏吸顶后会贴着屏幕最上沿，刘海或挖孔会压住内容。
       这里把安全区高度做成顶栏自身的内边距——背景照样铺到屏幕边缘，
       内容被推到安全区之下。env() 在没有刘海时是 0，所以兜底 10px 保证有呼吸空间。 */
    padding-top: max(10px, env(safe-area-inset-top))
  }
  /* .top-in 同时带 .wrap，而 ≤720px 的 .wrap{padding:0 14px} 在后面会覆盖掉
     原来给顶栏写的上下内边距——所以这里用 .wrap.top-in 提高特异度写回来。
     横向也带上安全区，横屏时刘海不会压住 logo。 */
  .wrap.top-in {
    padding-top: 0;
    padding-bottom: 8px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right))
  }
  /* 筛选抽屉原来是死值 inset:58px，现在顶栏高度含安全区，改成跟着算 */
  #wrap-filters.open {
    inset: calc(52px + env(safe-area-inset-top)) 0 0 0;
    padding-bottom: env(safe-area-inset-bottom)
  }
}

@media (max-width: 560px) {
  /* 底部导航已经有「投稿」，顶栏这个就撤掉：
     一是避免顶栏换行（汉堡+logo+筛选+收藏+主题刚好一行），
     二是手机横向时底部导航会隐藏，所以只在 560px 以内的竖屏生效。 */
  .top-right .postbtn { display: none }
}

/* 横屏矮屏（高度 ≤500）：屏幕本来就矮，吸顶会吃掉可见内容，保持不吸顶 */
@media (max-height: 500px) and (orientation: landscape) {
  header.top { position: static }
}

/* viewport-fit=cover 之后，横屏时刘海会压住正文：正文容器也带上左右安全区。
   基准值就是 ≤720px 的 14px，所以只在同一档里写，不改变 721px 以上的边距。 */
@media (max-width: 720px) {
  .wrap {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right))
  }
}

.catmenu {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 80;
  width: min(80vw, 320px);
  display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .22s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
  visibility: hidden
}
.catmenu.open { transform: none; visibility: visible }
body.menu-open { overflow: hidden }
body.menu-open .drawer-mask { display: block }
/* 抽屉滑出时遮罩已经在了，但遮罩 z-index 低于抽屉，点空白处仍由遮罩接住关闭 */

.catmenu-h {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  /* 抽屉从屏幕顶端开始，同样要让开状态栏/前摄安全区 */
  padding: max(12px, env(safe-area-inset-top)) 14px 12px; background: var(--bg); border-bottom: 1px solid var(--line)
}
.catmenu-h b { font-size: 15px }
.catmenu-x { width: 32px; height: 32px; padding: 0; justify-content: center; flex: none }

.catmenu-nav { display: flex; flex-direction: column; padding: 8px }
.catmenu-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 12px; border-radius: 8px;
  color: var(--ink-2); font-size: 14px
}
.catmenu-nav a:hover { background: var(--bg-3) }
.catmenu-nav a.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 600 }
.catmenu-nav a .n { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums }

/* 「仅文字模式」会全局隐藏图标，但汉堡/暗色切换没有文字可显示，藏了就是个空盒子。
   选择器要和上面那条隐藏规则同特异度才压得住（都是 0,4,1），靠书写顺序取胜。 */
body.noicon .top-right .menubtn .ic { display: inline-block }

/* ============================================================
   顶栏 logo 换成图片字标（虫库 Skill）
   浅色版与深色版都进 DOM，靠这里切换。深色有两套来源：系统偏好与手动切换，
   而 html.theme-* 与 html:not(.theme-light) 特异度相同，所以主题规则必须
   放在媒体查询之后，靠书写顺序取胜。
   ============================================================ */
.logo .lg { height: 32px; width: auto; display: inline-block }
.logo .lg-d { display: none }
.logo .lg-tx { display: none }

@media (prefers-color-scheme: dark) {
  html:not(.theme-light) .logo .lg-l { display: none }
  html:not(.theme-light) .logo .lg-d { display: inline-block }
}

html.theme-dark .logo .lg-l { display: none }
html.theme-dark .logo .lg-d { display: inline-block }
html.theme-light .logo .lg-l { display: inline-block }
html.theme-light .logo .lg-d { display: none }

/* 仅文字模式：藏图片、显示站名。放在最后，压过上面的主题规则。 */
body.noicon .logo .lg { display: none }
body.noicon .logo .lg-tx { display: inline; font-weight: 700; font-size: 16px; color: var(--ink) }

@media (max-width: 1080px) { .logo .lg { height: 28px } }