/* =====================================================================
   SeraGPU · 信息流版式
   排版层级参考居间宝的清单结构；配色全部沿用 SeraGPU 自己那一套（Sera Blue）
   响应式三档：
     ≥1440px  超宽：卡片 3 列
     ≥1024px  桌面：8 宫格一行 / 卡片 2 列 / 顶部导航 / 隐藏底部 Tab
     768–1023 平板：8 宫格一行 / 卡片 2 列 / 保留底部 Tab
     <768px   手机：4 宫格两行 / 卡片 1 列 / 底部 Tab
   ===================================================================== */
:root{
  /* 配色沿用 market.css 那一套 */
  --bg:#F7F8FA; --card:#FFFFFF; --sunken:#F2F4F7;
  --ink:#14181F; --ink2:#4B5563; --ink3:#8A93A6;
  --line:#E5E7EB; --line2:#D7DBE1;
  --blue:#0052FF; --blueSoft:#EEF4FF;
  --green:#17875C; --greenSoft:#EAF9F0;
  --amber:#B45309; --amberSoft:#FFF6E9;
  --red:#E5484D; --redSoft:#FDECEC;

  --r:12px;
  /* 2026-10-14 统一：全站容器 1160 + 桌面侧留白 24，与 .hd 对齐。
     原来 1440 视口会放宽到 1280 → 内容比页头宽，视觉上错位。 */
  --pad:24px;
  --maxw:var(--s-container);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"system-ui","Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit}

.app{max-width:var(--maxw);margin:0 auto;min-height:100vh;padding-bottom:78px}

/* ---------------- 顶部通告条 ---------------- */
.topbar{display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;
  padding:8px var(--pad);font-size:12px}
.topbar .tb-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar .tb-t b{font-weight:700}
.topbar .tb-a{flex:none;background:var(--blue);color:#fff;border-radius:999px;
  padding:4px 12px;font-size:11.5px;font-weight:700;border:0;cursor:pointer}
.topbar .tb-x{flex:none;opacity:.55;font-size:15px;background:none;border:0;color:#fff;cursor:pointer;padding:0 2px}

/* ---------------- Header ---------------- */
.hd{display:flex;align-items:center;gap:12px;padding:12px var(--pad);background:var(--bg)}
.logo{width:32px;height:32px;flex:none;border-radius:9px;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800}
.brandname{display:none;font-size:15px;font-weight:800;letter-spacing:-.3px;white-space:nowrap}
.search{flex:1;min-width:0;max-width:540px;display:flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;transition:border-color .15s,box-shadow .15s}
.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,82,255,.1)}
.search input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:13px;background:transparent;color:var(--ink)}
.search input::placeholder{color:var(--ink3)}
.hd-nav{display:none;gap:20px;margin-left:auto;font-size:13.5px;font-weight:600}
.hd-nav a{color:var(--ink2);padding:4px 0;border-bottom:2px solid transparent}
.hd-nav a:hover{color:var(--ink)}
.hd-nav a.on{color:var(--blue);border-bottom-color:var(--blue)}
.hd-ico{flex:none;width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:15px}

/* ---------------- 分类九宫格（去浮卡感，编辑部：底部细线分隔） ---------------- */
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 4px;
  background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;
  margin:0 var(--pad) 24px;padding:4px 0 20px}
.cat{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;cursor:pointer;
  background:none;border:0;color:inherit;width:100%}
.cat .ic{width:44px;height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;background:var(--sunken);color:var(--ink2);
  transition:transform .16s var(--s-ease-out),background .16s,color .16s}
.cat:hover .ic{transform:translateY(-1px)}
.cat .lb{font-size:12.5px;color:var(--ink2);white-space:nowrap}
.cat.on .lb{color:var(--blue);font-weight:600}
.cat.on .ic{background:var(--blue);color:#fff}
.cat.k-near .ic{background:var(--sunken);color:var(--ink2)}
.cat.k-futures .ic{background:var(--sunken);color:var(--ink2)}
.cat.k-demand .ic{background:var(--sunken);color:var(--ink2)}
.cat.k-all .ic,.cat.k-supply .ic{background:var(--sunken);color:var(--ink2)}
.cat.k-wx .ic{background:var(--sunken);color:var(--ink2)}

/* ---------------- 今日行情条 ---------------- */
.promo{display:flex;align-items:center;gap:14px;margin:0 var(--pad) 12px;padding:14px 18px;
  border-radius:var(--r);background:var(--blue);color:#fff}
.promo .p-l{flex:1;min-width:0}
.promo .p-t{font-size:15px;font-weight:800}
.promo .p-s{font-size:11.5px;opacity:.9;margin-top:3px}
.promo .p-a{flex:none;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.42);
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;color:#fff;white-space:nowrap}

/* ---------------- 今日参考价横条（2026-10-17 Sera 一手行情） ---------------- */
.refstrip{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 var(--pad) 12px;padding:10px 18px;
  border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.refstrip-k{flex:none;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--blue);
  background:var(--blueSoft);border-radius:5px;padding:3px 8px}
.refstrip-items{flex:1;min-width:0;display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2)}
.refstrip-items .ri{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.refstrip-items .ri b{color:var(--ink);font-variant-numeric:tabular-nums}
.refstrip-items .ri .up{color:var(--s-red);font-weight:800}
.refstrip-items .ri .down{color:var(--s-green);font-weight:800}
.refstrip-items .ri .flat{color:var(--ink3)}
.refstrip-more{flex:none;font-size:12px;color:var(--blue);text-decoration:none;white-space:nowrap}
.refstrip-empty{flex:1;font-size:12.5px;color:var(--ink3)}

/* ---------------- 排序 ---------------- */
.tabsbar{display:flex;align-items:center;gap:18px;padding:0 var(--pad) 10px}
.tabs{display:flex;gap:18px}
.tab{font-size:13.5px;color:var(--ink2);background:none;border:0;padding:4px 0;cursor:pointer;white-space:nowrap}
.tab.on{color:var(--ink);font-weight:800;position:relative}
.tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--blue);border-radius:2px}
.tabsbar .cnt{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap}

/* ---------------- 信息流卡片 ---------------- */
.feed{padding:0 var(--pad);display:grid;grid-template-columns:1fr;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;display:flex;flex-direction:column;
  transition:border-color .18s var(--s-ease-out),box-shadow .18s var(--s-ease-out),transform .18s var(--s-ease-out)}
/* 只可点击卡片做悬停抬升；触屏（无 hover）不触发，避免误触 */
@media(hover:hover) and (pointer:fine){
  a.card:hover{border-color:var(--line-2);box-shadow:var(--s-shadow-hover);transform:translateY(-2px)}
}
.card__title{font-size:17px;font-weight:600;line-height:1.45;color:var(--ink);letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}
.badge{font-size:11px;font-weight:500;line-height:1;padding:3px 7px;border-radius:4px;white-space:nowrap}
.badge.is-goods  {background:var(--blueSoft);color:var(--blue)}
.badge.is-demand {background:var(--sunken);color:var(--ink2)}
.badge.is-rent   {background:var(--blueSoft);color:var(--blue)}
.badge.is-success{background:var(--blueSoft);color:var(--blue)}
.badge.is-reason {background:var(--sunken);color:var(--ink2)}
.badge.is-stale  {background:var(--sunken);color:var(--ink3)}
.badge.is-plain  {background:var(--sunken);color:var(--ink2)}
/* 已无货（2026-10-15 Sera 拍板：不下架、照常展示，但必须一眼看出来 + 沉底） */
.badge.is-out    {background:var(--redSoft,#FDECEC);color:var(--red)}
.card.is-out{background:var(--s-sunken,#F7F8FA)}
.card.is-out .card__title{color:var(--ink2,#4A5260)}

/* ── 卡片入场（第三层动效 · 默认可见，JS 渐进增强）────────────────
 * ⚠ 卡片不能默认 opacity:0 —— JS 出错 / 减少动效 / Observer 不支持时会整页空卡。
 * 所以入场动画靠 JS 在渲染后加 .reveal，进入视口再加 .in，结束移除类。
 * 排序 / 筛选不重复播放（home.js 用 firstPaint 控制）。 */
.card.reveal{opacity:0;transform:translateY(8px);
  transition:opacity .32s var(--s-ease-out),transform .32s var(--s-ease-out)}
.card.reveal.in{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .card.reveal,.card.reveal.in{opacity:1;transform:none;transition:none}
}
.card__meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px;font-size:12.5px;color:var(--ink2)}
.card__attrtags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.attrtag{font-size:11.5px;color:var(--ink2);background:var(--sunken);border-radius:5px;padding:4px 8px}
.card__pricerow{display:flex;align-items:baseline;gap:12px;margin-top:10px}
.card__qty{font-size:12.5px;color:var(--ink2);flex:none}
.card__price{margin-left:auto;font-size:20px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card__price.is-ask{font-size:14px;color:var(--ink3);font-weight:500}
.card__foot{display:flex;gap:12px;align-items:center;margin-top:11px;padding-top:9px;
  border-top:1px solid var(--sunken);font-size:11.5px;color:var(--ink3)}
.card__foot .t{margin-left:auto;white-space:nowrap}

/* ---------------- 骨架屏（首屏不等接口） ---------------- */
.sk-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 18px;display:flex;flex-direction:column;gap:9px}
.sk{background:linear-gradient(90deg,var(--sunken) 25%,var(--card) 37%,var(--sunken) 63%);
  background-size:400% 100%;animation:sk 1.3s ease-in-out infinite;border-radius:5px}
.sk.t{height:15px;width:62%}
.sk.b{height:14px;width:88px;border-radius:5px}
.sk.m{height:12px;width:44%;opacity:.72}
.sk.p{height:20px;width:96px;margin-left:auto}
.sk.f{height:11px;width:36%;opacity:.6}
.sk-row{display:flex;gap:8px;align-items:center}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ---------------- 空态 ---------------- */
.empty{margin:0 var(--pad);background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:40px 24px;text-align:center;color:var(--ink2);font-size:13px;line-height:1.7}
.empty b{color:var(--ink);font-size:14px;display:block;margin-bottom:6px}

/* ---------------- 底部 Tab（手机/平板） ---------------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(5,1fr);padding:6px 0 8px}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10.5px;color:var(--ink3);padding:0}
.tabbar .i{font-size:17px;line-height:1.1}
.tabbar .on{color:var(--blue);font-weight:700}
.tabbar .pub .i{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:1px;
  box-shadow:0 4px 12px rgba(0,82,255,.3)}

/* ---------------- 浮动微信 ---------------- */
.fab{position:fixed;right:16px;bottom:88px;z-index:41;background:var(--blue);color:#fff;
  border-radius:999px;padding:10px 16px;font-size:12.5px;font-weight:700;border:0;cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.16)}
.fab:hover{background:var(--s-blue-hover)}

.toast{position:fixed;left:50%;bottom:100px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;padding:10px 18px;border-radius:8px;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------------- 页脚 ---------------- */
.foot{padding:20px var(--pad) 10px;font-size:11.5px;color:var(--ink3);line-height:1.75}
.foot a{color:var(--ink3);margin-right:14px}
.foot a:hover{color:var(--blue)}

/* ===================== 平板 ≥768 ===================== */
@media (min-width:768px){
  .cats{grid-template-columns:repeat(8,1fr);gap:10px 4px;padding:18px 14px}
  .feed{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo{padding:16px 22px}
  .promo .p-t{font-size:16px}
}

/* ===================== 桌面 ≥1024 ===================== */
@media (min-width:1024px){
  :root{--pad:24px}
  .app{padding-bottom:32px}
  .brandname{display:block}
  .hd-nav{display:flex}
  .hd{padding:14px var(--pad);border-bottom:1px solid var(--line);background:#fff;
      position:sticky;top:0;z-index:30}
  /* 桌面：宫格限宽居中 + 图标放大，否则 8 列铺满 1280px 会显得很空 */
  .cats{margin-bottom:16px;padding:22px 24px;column-gap:0}
  .cat .ic{width:54px;height:54px;font-size:19px}
  .cat .lb{font-size:12.5px}
  .promo{margin-bottom:16px}
  .tabsbar{padding-bottom:14px}
  .card{padding:16px 20px}
  .card__title{font-size:16px}
  .card__price{font-size:20px}
  .tabbar{display:none}          /* 桌面用顶部导航，不挂底部 Tab */
  .fab{bottom:28px;right:28px}
  .toast{bottom:40px}
  .foot{padding-top:28px}
}

/* ===================== 超宽 ≥1440 ===================== */
@media (min-width:1440px){
  .feed{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* 2026-10-14：原来是 1080px 居中对齐，比容器（1160）窄 → 与页头错位。统一成容器宽。 */
  .cats{max-width:var(--maxw);margin-left:auto;margin-right:auto}
  .promo{max-width:var(--maxw);margin-left:auto;margin-right:auto}
}

/* ===================== 手机 <480 ===================== */
@media (max-width:480px){
  :root{--pad:14px}
  .cats{gap:12px 2px;padding:14px 6px}
  .cat .ic{width:40px;height:40px;font-size:15px}
  .card{padding:13px 15px}
  .promo{padding:13px 15px;gap:10px}
  .promo .p-a{padding:5px 11px;font-size:11.5px}
  .card__price{font-size:18px}
}

/* =====================================================================
   2026-10-13 · 货盘版：左侧一级分类 + 快讯条 + 订阅区
   版本 v=20261013a
   设计口径：单列紧凑卡片（B 端要纵向比价，不做双列）；
             分类树 = 买卖类型 → 型号；形态/交付地不混进树，
             避免同一个型号在多个节点重复出现。
   ===================================================================== */

/* ── 主体两栏 ── */
.layout{
  display:grid;grid-template-columns:236px minmax(0,1fr);gap:18px;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  align-items:start;
}
@media(max-width:960px){ .layout{grid-template-columns:1fr} }

/* ── 左侧分类树 ── */
.rail{
  position:sticky;top:64px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 12px 16px;
}
/* ⚠ 手机上 .rail 的 position / display 一律在文件末尾
   「移动端分类 / 筛选条」那块里改（目前是 position:fixed 浮层）。
   这里不要再写 .rail{position:...} —— 同优先级后加载者赢，会互相打架。 */
.rail-h{
  font-size:12px;letter-spacing:.08em;color:var(--ink3);
  padding:0 6px 8px;font-weight:600;text-transform:uppercase;
  border-bottom:1px solid var(--line);margin-bottom:8px;
}
.tree{display:flex;flex-direction:column;gap:1px}
.t-node{border-radius:9px;overflow:hidden}
.t-hd{
  width:100%;display:flex;align-items:center;gap:6px;
  padding:8px 8px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13.5px;color:var(--ink);text-align:left;border-radius:8px;
}
.t-hd:hover{background:var(--sunken)}
a.t-hd{text-decoration:none;color:var(--ink)}
.t-caret{flex:none;width:12px;color:var(--ink3);font-size:10px;transition:transform .16s}
.t-node.is-open .t-caret{transform:rotate(0)}
.t-node:not(.is-open) .t-caret{transform:rotate(-90deg)}
.t-leaf{cursor:default}
.t-name{flex:1;min-width:0;font-weight:600}
.t-l1>.t-hd .t-name{font-weight:600}
.t-cnt{
  flex:none;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums;
  background:var(--sunken);border-radius:20px;padding:1px 7px;
}
.t-hd.on .t-name{color:var(--blue)}
/* 选中态：浅蓝底 + 左缘 2px 蓝条（编辑部「栏目选中」的秩序感） */
.t-hd.on{background:var(--blueSoft);box-shadow:inset 2px 0 0 var(--blue)}
.t-body{display:none;flex-direction:column;gap:1px;padding:2px 0 4px 18px}
.t-node.is-open .t-body{display:flex}

/* 二级型号行 */
.t-sub{
  width:100%;display:flex;align-items:center;gap:7px;
  padding:6px 8px;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13px;color:var(--ink2);text-align:left;border-radius:7px;
}
.t-sub:hover{background:var(--sunken);color:var(--ink)}
.t-sub.on{background:var(--blueSoft);color:var(--blue);font-weight:600;box-shadow:inset 2px 0 0 var(--blue)}
.t-sub .t-dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--line2)}
.t-sub.on .t-dot{background:var(--blue)}
.t-sub .t-n{flex:1;min-width:0}
.t-sub .t-c{flex:none;font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
/* 无货型号：可见但不可点，旁边给「我想要」出口 */
.t-sub.is-off{color:var(--ink3);cursor:default;text-decoration:line-through;text-decoration-color:var(--line2)}
.t-sub.is-off:hover{background:transparent;color:var(--ink3)}
.t-sub.is-off .t-want{
  flex:none;font-size:10.5px;color:var(--blue);text-decoration:none;
  border:1px solid var(--blue);border-radius:20px;padding:0 6px;line-height:16px;
}
.t-sub.is-off .t-want:hover{background:var(--blue);color:#fff}

.rail-note{
  margin-top:14px;padding:12px 6px 0;border-top:1px solid var(--line);
  font-size:11px;line-height:1.6;color:var(--ink3);
}
.rail-note b{color:var(--ink2)}

/* ── 左栏两块：分类 / 筛选 ───────────────────────────────────────
 * 桌面两块常驻。手机上整块 .rail 变成浮层，由 .fbar 的两个按钮分别展开
 * （见下面「移动端分类 / 筛选条」）。DOM 只有一份，不复制。
 * 间距原先用内联 style="margin-top:18px" 写，现在收进来统一管。 */
.rail-sec + .rail-sec{margin-top:18px}
.rail-sec .chips + .rail-h{margin-top:14px}

/* ── 筛选 chips ── */
.chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 2px}
.chip{
  font:inherit;font-size:12px;color:var(--ink2);background:var(--card);
  border:1px solid var(--line);border-radius:20px;padding:4px 10px;cursor:pointer;
}
.chip:hover{border-color:var(--blue);color:var(--blue)}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
/* 组内小标题：散热 / 报价 / 压测…（比 .rail-h 低一级，避免五组全用大标题把左栏顶爆） */
.rail-s{font-size:11.5px;color:var(--ink3);padding:8px 2px 0}
.chips + .rail-s{margin-top:2px}
/* 卡片上的「待确认：…」弱提示：中性灰、不加边框 —— 未知不是负面，也不做成卖点 */
.attrtag.is-weak{color:var(--ink3);background:none;border:1px dashed var(--line)}

/* ── 行情快讯条（替代居间宝的资讯滚动条） ── */
.flash{
  display:flex;align-items:center;gap:9px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 13px;margin-bottom:12px;text-decoration:none;color:inherit;
}
.flash:hover{border-color:var(--blue)}
.flash .f-ic{flex:none;font-size:14px}
.flash .f-tag{
  flex:none;font-size:10.5px;font-weight:700;color:var(--blue);
  background:var(--blueSoft);border-radius:5px;padding:2px 7px;white-space:nowrap;
}
.flash .f-txt{flex:1;min-width:0;font-size:12.5px;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flash .f-go{flex:none;font-size:11.5px;color:var(--ink3);white-space:nowrap}

/* ── 订阅区 ── */
.sub{
  margin-top:16px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:16px 18px;
}
.sub-l{margin-bottom:12px}
.sub-t{font-size:15px;font-weight:800}
.sub-s{font-size:12.5px;color:var(--ink2);margin-top:3px}
.sub-f{display:flex;gap:8px;flex-wrap:wrap}
.sub-i{
  flex:1;min-width:180px;font:inherit;font-size:13px;color:var(--ink);
  background:var(--sunken);border:1px solid var(--line);border-radius:9px;
  padding:9px 12px;outline:none;
}
.sub-i--sm{flex:0 1 210px}
.sub-i:focus{border-color:var(--blue);background:var(--card)}
.sub-b{
  flex:none;font:inherit;font-size:13.5px;font-weight:700;color:#fff;
  background:var(--blue);border:0;border-radius:9px;padding:9px 20px;cursor:pointer;
}
.sub-b:hover{filter:brightness(1.08)}
.sub-b[disabled]{opacity:.6;cursor:default}
.sub-done{margin-top:10px;font-size:12.5px;color:var(--green);font-weight:600}
.sub-err{margin-top:10px;font-size:12.5px;color:var(--red)}
.sub-legal{margin:10px 0 0;font-size:11px;color:var(--ink3);line-height:1.6}

/* ── 空态按钮 ── */
.empty-act{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.btn-p,.btn-s{
  font:inherit;font-size:13px;font-weight:700;border-radius:9px;
  padding:9px 16px;cursor:pointer;text-decoration:none;display:inline-block;
}
.btn-p{background:var(--blue);color:#fff;border:0}
.btn-s{background:var(--card);color:var(--ink2);border:1px solid var(--line2)}
.btn-s:hover{border-color:var(--blue);color:var(--blue)}

/* ═══════════════════════════════════════════════════════════════════
   移动端「分类 / 筛选」条 + 下拉面板      v=20261015-mfilter
   ───────────────────────────────────────────────────────────────────
   2026-10-15 Sera：手机上看不到旁边的分类和筛选按钮。
   根因不是被隐藏，是 .rail 被 order:2 压到信息流**底下**，翻到底才看得见。

   做法：
     ① 一条吸顶的 .fbar 常驻（两个按钮 + 结果数 + 清空）
     ② 点按钮 → 对应的那一块 .rail-sec 变成浮层展开
     ③ 面板必须 position:fixed，不能留在文档流里 —— 否则滚到第 20 条再点
        按钮，面板在屏幕上方展开，看着像「点了没反应」

   高度账（改任一条都要同步另外两条）：
     .fbar 吸在 top:52px（页头 --s-hd-h 在 .hd 作用域内被改成 52px，
     出了 .hd 拿不到，只能写死）→ 本条高 8+32+8+1 = 49px → 面板 top:101px
   z-index 50 已登记进 site.css 的刻度：内容之上、页头(60)与底部 tab(70)之下。
   ═══════════════════════════════════════════════════════════════════ */
.fbar{display:none}
@media(max-width:960px){
  .fbar{
    display:block;position:sticky;top:52px;z-index:5;
    background:rgba(255,255,255,.94);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  /* ⚠ 必须写 .fbar .fbar-in（0-2-0），不能只写 .fbar-in（0-1-0）：
   *   这个元素同时挂着 .s-container，而 site.css 是**后加载**的，
   *   它的 `.s-container{padding:0 16px}` 会把同优先级的 padding-top/bottom
   *   一起盖回 0 —— 实测条子被压成 33px 高，面板和条子之间漏出 16px 缝。
   *   上下留白一丢，「条子高 49 → 面板 top:101」这条高度账就全错。 */
  .fbar .fbar-in{display:flex;align-items:center;gap:8px;padding-top:8px;padding-bottom:8px}

  .fbar-b{
    display:inline-flex;align-items:center;gap:6px;flex:none;
    min-height:32px;padding:0 11px;border-radius:20px;cursor:pointer;
    font:inherit;font-size:13px;font-weight:600;color:var(--ink2);
    background:var(--card);border:1px solid var(--line2);
  }
  .fbar-b svg{flex:none;color:var(--ink3)}
  .fbar-b:hover{border-color:var(--blue);color:var(--blue)}
  .fbar-b:hover svg{color:var(--blue)}
  .fbar-b.on{background:var(--blue);border-color:var(--blue);color:#fff}
  .fbar-b.on svg{color:#fff}
  .fbar-c{flex:none;font-size:9px;color:var(--ink3);margin-left:-2px;transition:transform .16s}
  .fbar-b.on .fbar-c{transform:rotate(180deg);color:#fff}
  /* 这组里有条件在生效 → 点个蓝点。390px 宽写不下「现货 · 深圳 · B300」，
     用点表示「有筛选在生效」，具体条件点开面板就写着。 */
  .fbar-dot{display:none;flex:none;width:6px;height:6px;border-radius:50%;background:var(--blue)}
  .fbar-b.has .fbar-dot{display:block}
  .fbar-b.on .fbar-dot{background:#fff}

  .fbar-n{
    margin-left:auto;flex:none;font-size:12px;color:var(--ink3);
    font-variant-numeric:tabular-nums;
  }
  .fbar-n:empty{display:none}
  .fbar-x{
    flex:none;font:inherit;font-size:12.5px;color:var(--ink2);cursor:pointer;
    background:none;border:0;padding:5px 2px 5px 8px;
  }
  .fbar-x:hover{color:var(--blue)}
  .fbar-x[hidden]{display:none}

  /* ── 下拉面板本体 ── */
  .rail{
    position:fixed;left:0;right:0;top:101px;z-index:50;
    display:none;background:none;border:0;border-radius:0;
    padding:0 16px 16px;
    max-height:calc(100vh - 101px - 56px);overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .rail.is-open{display:block}
  /* 遮罩只在面板打开时出现。点它 → 事件目标是 .rail 自身（伪元素不做事件源），
     JS 据此收起；56px 底部留给 tabbar（tab 的 z-index 70 > 面板 50，照样能点）。 */
  .rail.is-open::before{
    content:'';position:fixed;left:0;right:0;top:101px;bottom:0;
    background:rgba(20,24,31,.28);
  }
  .rail-sec{
    position:relative;max-width:var(--maxw);margin:0 auto;
    display:none;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r);padding:12px 13px 13px;
    box-shadow:0 12px 30px rgba(20,24,31,.16);
  }
  .rail-sec.is-show{display:block}
  .rail-sec + .rail-sec{margin-top:0}
}

/* ── 主列微调 ── */
.main{min-width:0}
.feed{margin-top:0}

/* ── 货盘版：单列卡片 ─────────────────────────────────────────
 * feed.css 原版在 ≥768px 起就把 Feed 排成 2 列、≥1440px 排 3 列。
 * 那是「首页是唯一内容」时代的版式。现在左边多了分类树，主列只有
 * ~700–900px，2 列会让标题折成三行、价格和数量挤在一起。
 * B 端买家是纵向比价的（同一列扫型号→数量→价格），不是扫卡片墙。
 * 所以货盘版一律单列，1440/1024/768 三档全覆盖。 */
@media (min-width:768px){ .layout .feed{grid-template-columns:minmax(0,1fr)} }
@media (min-width:1440px){ .layout .feed{grid-template-columns:minmax(0,1fr)} }
/* 单列时卡片样式与基础 .card 一致（2026-10-17 删除重复覆盖，单一事实源，
 * 避免卡题/价格字号在这里又写一遍导致两处不同步） */

/* ── 页面 H1 ──────────────────────────────────────────────────
 * SEO：每页一个可见 H1（首页原本缺失）。视觉上保持克制，
 * 不放大成大标题，避免破坏编辑部排版与 DATA FIRST 的分寸。 */
.page-h1{
  max-width:var(--maxw);margin:0 auto 14px;padding:0 16px;
  font-size:17px;font-weight:600;letter-spacing:-.01em;
  line-height:1.4;color:var(--s-ink);
}