/* ═══════════════════════════════════════════════════════════════════
算力货盘 · 全站规范层（site.css） v=20261014a
───────────────────────────────────────────────────────────────────
⚠⚠ 本文件必须是每个页面的**最后一个** 。
原因：下面的「别名映射」和页面 CSS 里原有的 :root 定义同优先级，
CSS 自定义属性是后加载者赢。site.css 不在最后 → 别名被静默覆盖，
你以为统一了其实没生效，而且没有任何报错。
改完任何页面务必核对 5 个 HTML 的 link 顺序。
结构：
① 规范 token（--s-*）—— 唯一事实源，新增样式只许用这些
② 别名映射 —— 把三套历史变量（feed / market / main）重定向到 ①，
这样页面里几百处 var(--blue) / var(--mk-blue) / var(--brand)
一行都不用改，行为自动统一
③ z-index 刻度 —— 全站唯一，新增层必须在此登记
④ 隔离层 —— 中和 main.css 裸元素规则对引用页的污染（不改 main.css 本身）
═══════════════════════════════════════════════════════════════════ */
/* ── ① 规范 token ───────────────────────────────────────────────── */
:root{
/* 底色层次：纯白底 → 卡片用细线区分（2026-10-17 Sera：白底黑白 + 编辑部气质） */
--s-bg:#FFFFFF;
--s-card:#FFFFFF;
--s-sunken:#F7F8FA;
--s-ink:#101418;
--s-ink-2:#475467;
--s-ink-3:#667085;
--s-line:#E4E7EC;
--s-line-2:#D0D5DD;
--s-blue:#0052FF;
--s-blue-soft:#EEF4FF;
--s-green:#067647; /* 跌绿 / 成功（功能色，非品牌色） */
--s-green-soft:#EAF9F0;
--s-amber:var(--s-ink-2); /* 暖色过渡期 → 中性灰，引用清零后删 */
--s-amber-soft:var(--s-sunken);
--s-red:#D92D20; /* 涨红 / 错误 */
--s-red-soft:#FDECEC;
--s-orange:var(--s-blue); /* 需求类型业务色 → 品牌蓝，不再漏橙 */
/* 圆角：面板 8 / 控件 6 / 标签 4（编辑部更克制，禁用 14px） */
--s-r-panel:8px;
--s-r-ctl:6px;
--s-r-chip:4px;
/* 排版（编辑部：字重收敛，不再堆 700/800） */
--s-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
--s-fs-page:clamp(28px,3vw,40px);
--s-fs-section:clamp(20px,2vw,26px);
--s-fs-card:17px;
--s-fw-title:600;
--s-lh-title:1.25;
--s-track-title:-.01em;
--s-blue-hover:#0047DB;
--s-shadow-card:none;
--s-shadow-hover:0 8px 24px rgba(16,24,40,.08);
/* 动效（克制：只动 transform/opacity，缓动统一） */
--s-ease-out:cubic-bezier(.2,.8,.2,1);
--s-dur-fast:180ms;
--s-dur-enter:320ms;
/* 间距只用 4 的倍数 */
--s-gap-1:4px; --s-gap-2:8px; --s-gap-3:12px; --s-gap-4:16px;
--s-gap-5:24px; --s-gap-6:32px;
--s-pad:16px;
--s-container:1160px;
--s-hd-h:56px;
}
/* ── ② 别名映射：三套历史变量 → 规范 token ──────────────────────── */
:root{
/* feed.css 那套（首页） */
--bg:var(--s-bg); --card:var(--s-card); --sunken:var(--s-sunken);
--ink:var(--s-ink); --ink2:var(--s-ink-2); --ink3:var(--s-ink-3);
--line:var(--s-line); --line2:var(--s-line-2);
--blue:var(--s-blue); --blueSoft:var(--s-blue-soft);
--green:var(--s-green); --greenSoft:var(--s-green-soft);
--amber:var(--s-amber); --amberSoft:var(--s-amber-soft);
--red:var(--s-red); --redSoft:var(--s-red-soft);
--r:var(--s-r-panel); --pad:var(--s-pad); --maxw:var(--s-container);
/* market.css 那套（rental / market / publish） */
--mk-bg:var(--s-card); --mk-bg-soft:var(--s-bg); --mk-bg-sunken:var(--s-sunken);
--mk-ink:var(--s-ink); --mk-ink-2:var(--s-ink-2); --mk-ink-3:var(--s-ink-3);
--mk-line:var(--s-line);
--mk-blue:var(--s-blue); --mk-supply:var(--s-blue);
--mk-demand:var(--s-orange); --mk-verified:var(--s-green);
/* main.css 那套（supply 也在引） */
--brand:var(--s-blue); --bg-soft:var(--s-bg);
--text:var(--s-ink); --text2:var(--s-ink-2); --text3:var(--s-ink-3);
--radius:var(--s-r-panel);
}
/* ── ③ z-index 刻度（全站唯一，新增层先来这儿登记） ───────────────
* 5 sticky 表格列 / 区块内 sticky
* 50 移动端「分类 / 筛选」下拉面板（含遮罩）—— 必须在页头之下、tab 之上
* 60 页头 .hd
* 70 移动端底部 tab / 悬浮「问 Sera」
* 800 全屏水印（盖住一切内容，但不挡交互）
* 900 弹层 / modal / 抽屉 —— **必须 >800，否则被水印压字**
* 1000 toast / 全局提示
*/
/* ── ④ 隔离层 ────────────────────────────────────────────────────
* main.css 是早期落地页样式表，里面有裸元素规则：
* header{position:fixed;z-index:100;padding:14px 24px 0;pointer-events:none}
* section{padding:112px 0}
* a{color:var(--brand)}
* body{background:#FBFCFD}
* supply.html 引了它 → 全被污染。
* 这里显式中和，**不动 main.css**（classic/demo 等老页面还依赖它）。 */
/* 页面级底色统一：main.css 的 body{background:#FBFCFD} 与全站 #F7F8FA 不一致 */
body{background:var(--s-bg)}
/* main.css 的 section{padding:112px 0} 会在业务页里凭空撑出上下 112px。
* ⚠ 2026-10-14：这条曾经写成 `body.page-supply section{padding:0}`（无 :not），
* 结果把 sup-card / sup-hero / mk-card / sub 这些「带 class 的组件 section」
* 的内边距也一起清了（0-1-1 > 0-1-0），五个页面的卡片文字全部贴边框。
* 现在只清「无 class 的布局 section」（#supListView / #supDetailView 这类），
* 组件一律豁免。新组件 section 只要带 class 就自动安全。 */
body.page-supply section:not([class]),
body.page-rental section:not([class]),
body.page-market section:not([class]),
body.page-publish section:not([class]),
body.page-feed section:not([class]){padding:0}
/* main.css 的裸 header 规则：用类选择器盖掉（.hd 优先级高于 header） */
body.page-supply header,
body.page-rental header,
body.page-market header,
body.page-publish header,
body.page-feed header{
position:sticky;top:0;margin:0;padding:0;pointer-events:auto;box-sizing:border-box;
/* ⚠ z-index 必须写在这里（0-1-2），否则页面 CSS 里 `.xxx header{z-index:1}`
* 这类 0-1-1 的规则会压过 `.hd`(0-1-0)，页头被内容盖住。
* 2026-10-14 实际踩到过：supply.css 的 `.sup-body header{z-index:1}`。 */
z-index:60;
}
/* 算力货盘 · 全站共用：水印 + 顶栏 + 页脚 + 悬浮问 Sera
* ─────────────────────────────────────────────────────────────
* 版本：v=20261013a
* 引入本文件的页面：index / supply / rental / publish / market
*/
/* ── 1. 全屏水印 ──────────────────────────────────────────────
* 这是「追责威慑」不是「防盗」。F12 删节点即可除，别向 Sera 承诺防盗。
* 绝不禁用右键 / 禁选择 / 禁拖拽 —— 挡不住 F12 和截图，只伤正常买家。
* pointer-events:none 保证不挡点击；aria-hidden 保证读屏软件忽略。
* z-index 压在内容之上、低于弹窗(1200)与悬浮按钮(900)。
* 深色背景下不用纯黑字：fill 取中性灰 #7E8794，深浅底都可见。 */
.site-wm {
position: fixed;
inset: 0;
z-index: 800;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
opacity: .075;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='190' viewBox='0 0 300 190'%3E%3Ctext x='150' y='99' font-family='PingFang SC%2CHelvetica%2CArial%2Csans-serif' font-size='13' font-weight='600' fill='%237E8794' text-anchor='middle' letter-spacing='1.5' transform='rotate%28-24 150 95%29'%3E%E7%AE%97%E5%8A%9B%E8%B4%A7%E7%9B%98 %C2%B7 Serayue77%3C/text%3E%3C/svg%3E");
background-repeat: repeat;
}
/* 弹窗 / 抽屉 / toast 必须高于水印 */
.van-dialog, .van-popup, .toast, .modal, [role="dialog"] { z-index: 1200 !important; }
@media (max-width: 768px) {
/* 小屏图块放大间距、字号调小，避免糊成一片 */
.site-wm {
opacity: .06;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='230' viewBox='0 0 240 230'%3E%3Ctext x='120' y='118' font-family='PingFang SC%2CHelvetica%2CArial%2Csans-serif' font-size='11' font-weight='600' fill='%237E8794' text-anchor='middle' letter-spacing='1.5' transform='rotate%28-24 120 115%29'%3E%E7%AE%97%E5%8A%9B%E8%B4%A7%E7%9B%98 %C2%B7 Serayue77%3C/text%3E%3C/svg%3E");
}
}
/* 打印件带得走水印才有意义（浏览器默认不打印背景图，这里显式打开） */
@media print {
.site-wm {
opacity: .38;
print-color-adjust: exact;
-webkit-print-color-adjust: exact;
}
}
/* 尊重「减少动效」偏好：水印本身无动画，但显式声明一次 */
@media (prefers-reduced-motion: reduce) {
.site-wm { animation: none !important; }
}
/* ── 2. 顶栏（站名 + 搜索） ──────────────────────────────────── */
.hd {
position: sticky; top: 0; z-index: 60;
background: rgba(255,255,255,.93);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line, #E4E8EE);
}
[data-theme="dark"] .hd, html.dark .hd { background: rgba(13,16,21,.92); }
.hd-in { max-width: 1240px; margin: 0 auto; padding: 10px 22px; display: flex; align-items: center; gap: 14px; }
.hd-logo { display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: inherit; flex: none; }
.hd-logo b { font-size: 17px; font-weight: 800; letter-spacing: .01em; }
.hd-logo span { font-size: 11.5px; color: var(--sub, #8A93A2); white-space: nowrap; }
.hd-search { flex: 1; max-width: 520px; position: relative; }
.hd-search input {
width: 100%; box-sizing: border-box; padding: 8px 12px 8px 32px;
border: 1px solid var(--line, #E4E8EE); border-radius: 9px;
background: var(--sunken, #F0F2F5); color: inherit; font-size: 13px;
font-family: inherit; outline: none;
}
.hd-search input:focus { border-color: var(--accent, #2F6BFF); background: var(--card, #fff); }
.hd-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); opacity: .45; pointer-events: none; }
.hd-nav { display: flex; gap: 4px; flex: none; }
.hd-nav a {
font-size: 12.5px; color: var(--ink2, #4A5260); text-decoration: none;
padding: 6px 10px; border-radius: 7px; white-space: nowrap;
}
.hd-nav a:hover { background: var(--sunken, #F0F2F5); color: var(--ink, #14171C); }
.hd-nav a.on { color: var(--accent, #2F6BFF); font-weight: 600; }
.hd-cta {
font-size: 12.5px; font-weight: 600; color: #fff; background: var(--accent, #2F6BFF);
border: 0; border-radius: 8px; padding: 7px 12px; cursor: pointer;
text-decoration: none; white-space: nowrap; font-family: inherit;
}
@media (max-width: 860px) {
.hd-logo span { display: none; }
.hd-nav a:not(.keep) { display: none; }
}
/* ── 3. 悬浮「问 Sera」按钮 ─────────────────────────────────────
* 居间宝这里是个 AI 助手气泡。我方不抄 AI：货源只能 Sera 发，
* 站内 AI 会诱导访客以为能自助发布。做成留资按钮，成本低收益实。 */
.fab {
position: fixed; right: 18px; bottom: 20px; z-index: 900;
display: flex; align-items: center; gap: 8px;
background: var(--card, #fff); border: 1px solid var(--line, #E4E8EE);
border-radius: 999px; padding: 9px 15px 9px 11px; cursor: pointer;
box-shadow: 0 6px 22px rgba(20,23,28,.13);
font-size: 13px; font-weight: 600; color: var(--ink, #14171C); font-family: inherit;
}
.fab:hover { border-color: var(--accent, #2F6BFF); color: var(--accent, #2F6BFF); }
.fab .dot {
width: 22px; height: 22px; border-radius: 50%; flex: none;
background: var(--accent, #2F6BFF); color: #fff;
display: grid; place-items: center; font-size: 11px; font-weight: 800;
}
.fab .copy {
font-size: 11px; font-weight: 500; color: var(--sub, #8A93A2);
border-left: 1px solid var(--line, #E4E8EE); padding-left: 8px; margin-left: 2px;
}
.fab .copy.ok { color: var(--ok, #2E9E6B); }
@media (max-width: 640px) { .fab .txt { display: none; } .fab { padding: 9px; } }
/* ── 4. 页脚 ─────────────────────────────────────────────────── */
.ft {
max-width: 1240px; margin: 0 auto; padding: 22px; border-top: 1px solid var(--line, #E4E8EE);
display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline;
font-size: 11.5px; color: var(--sub, #8A93A2);
}
.ft b { color: var(--ink2, #4A5260); font-weight: 600; }
.ft a { color: var(--accent, #2F6BFF); text-decoration: none; }
/* 移动端底部有 tabbar（feed.css 里 .tabbar 固定 56px 高）→ FAB 抬到它上面 */
@media (max-width:960px){
.fab{ bottom:76px; right:14px; }
}
/* ── 5. 租赁需求表单（/rental） ────────────────────────────────
* 2026-10-13 加。两路外部评审一致：租赁先做需求侧，不做撮合成交。 */
.dm-form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.dm-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dm-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.dm-f--wide{grid-column:1/-1}
.dm-k{font-size:12px;color:var(--ink2,#4A5260);font-weight:600}
.dm-k b{color:var(--red,#E5484D);font-weight:700}
.dm-i{
font:inherit;font-size:13px;color:inherit;background:var(--sunken,#F2F4F7);
border:1px solid var(--line,#E5E7EB);border-radius:9px;padding:9px 11px;outline:none;
width:100%;min-width:0;
}
.dm-i:focus{border-color:var(--blue,#0052FF);background:var(--card,#fff)}
.dm-hint{font-size:11px;color:var(--ink3,#8A93A6);line-height:1.6}
.dm-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px}
.dm-chip{
font:inherit;font-size:12px;color:var(--ink2,#4A5260);background:var(--card,#fff);
border:1px solid var(--line,#E5E7EB);border-radius:20px;padding:3px 11px;cursor:pointer;
}
.dm-chip:hover{border-color:var(--blue,#0052FF);color:var(--blue,#0052FF)}
.dm-chip.on{background:var(--blue,#0052FF);border-color:var(--blue,#0052FF);color:#fff;font-weight:600}
.dm-budget{display:grid;grid-template-columns:1.1fr .9fr 1fr;gap:10px}
.dm-act{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.dm-legal{font-size:11px;color:var(--ink3,#8A93A6);line-height:1.6;max-width:640px}
.dm-legal b{color:var(--ink2,#4A5260)}
.dm-msg{font-size:12.5px;line-height:1.7;padding:11px 13px;border-radius:9px;margin-top:4px}
.dm-msg.is-ok{background:#EAF9F0;color:#12683F;border:1px solid #B7E4CB}
.dm-msg.is-err{background:#FDECEC;color:#A32B2B;border:1px solid #F3C3C3}
html.dark .dm-msg.is-ok,[data-theme="dark"] .dm-msg.is-ok{background:#12261B;color:#7FD2A3;border-color:#1F4A34}
html.dark .dm-msg.is-err,[data-theme="dark"] .dm-msg.is-err{background:#2C1616;color:#EE9090;border-color:#4A2222}
@media (max-width:760px){
.dm-row{grid-template-columns:1fr 1fr}
.dm-budget{grid-template-columns:1fr 1fr}
.dm-f--wide{grid-column:1/-1}
}
/* ── 6. 租赁口径说明 ───────────────────────────────────────── */
.mk-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.mk-rule{background:var(--sunken,#F2F4F7);border-radius:10px;padding:13px 15px}
.mk-rule b{display:block;font-size:12.5px;margin-bottom:5px}
/* text-wrap:pretty 避免中文句末标点被挤成孤字一行 */
.mk-rule p{margin:0;font-size:12px;line-height:1.7;color:var(--ink2,#4A5260);text-wrap:pretty}
@media (max-width:900px){ .mk-rules{grid-template-columns:1fr} }
/* ═══════════════════════════════════════════════════════════════════
统一页头 .hd —— 五个页面共用同一份标记与样式 v=20261014a
───────────────────────────────────────────────────────────────────
2026-10-13 改：原来有 3 套页头实现（.hd / .mk-top / .sup-top），
高度、品牌字号、链接间距、CTA 圆角各不相同 → 页面之间跳转会「跳一下」。
现在统一成一份，各页差异只用修饰类表达。
母版（改页头先改这里，再同步 5 个 HTML）：
─────────────────────────────────────────────────────────────────
─────────────────────────────────────────────────────────────────
导航顺序五页一致；当前页用 class="on"。
CTA 固定为「微信 Serayue77」—— 全站唯一联系方式，统一成转化动作。 */
.hd{ position:sticky; top:0; z-index:60; margin:0; padding:0; pointer-events:auto;
background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
border-bottom:1px solid var(--s-line); box-sizing:border-box; }
.hd-in{ max-width:var(--s-container); margin:0 auto; padding:0 24px;
min-height:var(--s-hd-h); display:flex; align-items:center; gap:20px; }
.hd-logo{ display:flex; align-items:baseline; gap:7px; text-decoration:none;
color:var(--s-ink); flex:none; }
.hd-logo b{ font-size:15px; font-weight:700; letter-spacing:.01em; }
.hd-logo span{ font-size:12px; color:var(--s-ink-3); white-space:nowrap; }
.hd-nav{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.hd-nav a{ font-size:13px; color:var(--s-ink-2); text-decoration:none; white-space:nowrap;
padding:4px 0; border-bottom:2px solid transparent; }
.hd-nav a:hover{ color:var(--s-ink); }
.hd-nav a.on{ color:var(--s-blue); font-weight:600; border-bottom-color:var(--s-blue); }
.hd-cta{ flex:none; display:inline-flex; align-items:center; justify-content:center;
min-height:32px; padding:0 14px; border:0; border-radius:var(--s-r-ctl);
background:var(--s-blue); color:#fff; font-size:13px; font-weight:600;
font-family:inherit; text-decoration:none; cursor:pointer; white-space:nowrap; }
.hd-cta:hover{ filter:brightness(1.08); }
/* 容器：全站统一 1160px + 24px 侧留白 */
.s-container{ width:100%; max-width:var(--s-container); margin:0 auto; padding:0 24px; box-sizing:border-box; }
@media (max-width:900px){
.hd{ --s-hd-h:52px; }
.hd-in{ padding:0 16px; gap:12px; }
.hd-logo span{ display:none; }
.hd-nav{ gap:0; margin-left:auto; }
.hd-nav a{ padding:4px 8px; }
/* 移动端只留当前页 + 看货，其余进底部 tab */
.hd-nav a{ display:none; }
.hd-nav a.on{ display:inline-block; }
.s-container{ padding:0 16px; }
}
@media (max-width:420px){
.hd-cta{ padding:0 10px; font-size:12px; }
}
/* ═══════════════════════════════════════════════════════════════════
订阅条 + 首次访问弹层 【母版：五页同一份】
───────────────────────────────────────────────────────────────────
目标（Sera 2026-10-15）：「新货源、价格变动」必须**一眼可见** ——
第一次进站的人不用滚动、不用去找，就能看到并点订阅。
⚠ 订阅条**必须写在 HTML 里，不能用 JS 注入**。
注入的话，下方内容会先按「没有条子」的高度渲染一次，再整体下移（CLS）。
site.js 里的水印层可以注入，是因为它 position:fixed 不占布局；这条不行。
改这块 → 同步 5 个 HTML 里的标记 → bump 引用 site.css 的 ?v=。
⚠ 弹层相反，用 JS 注入（fixed，不占布局，也不该出现在无 JS 的首屏里）。
z-index：弹层走刻度里的 1200（弹层），不新增层。
═══════════════════════════════════════════════════════════════════ */
.subbar{ background:var(--s-blue-soft); border-bottom:1px solid var(--s-line); }
.subbar-in{ display:flex; align-items:center; gap:14px; min-height:50px; padding-top:7px; padding-bottom:7px; }
.subbar-tx{ font-size:13px; color:var(--s-ink-2); line-height:1.4; }
.subbar-tx b{ color:var(--s-ink); font-weight:600; }
.subbar-f{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.subbar-f input{ width:212px; height:34px; padding:0 12px; box-sizing:border-box;
border:1px solid var(--s-line-2); border-radius:var(--s-r-ctl); background:var(--s-card);
color:var(--s-ink); font-size:13px; font-family:inherit; }
.subbar-f input::placeholder{ color:var(--s-ink-3); }
.subbar-f input:focus{ outline:2px solid var(--s-blue); outline-offset:-1px; border-color:var(--s-blue); }
.subbar-f button{ flex:none; height:34px; padding:0 18px; border:0; border-radius:var(--s-r-ctl);
background:var(--s-blue); color:#fff; font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; }
.subbar-f button:hover{ filter:brightness(1.08); }
.subbar-f button[disabled]{ opacity:.6; cursor:default; }
.subbar-msg{ font-size:12.5px; color:var(--s-ink-3); margin-left:auto; }
.subbar-msg.is-ok{ color:var(--s-green); font-weight:600; margin-left:0; }
.subbar-msg.is-err{ color:var(--s-red); font-weight:600; }
/* 已订阅：把表单收起来，换成一句确认，别再占地方 */
.subbar.is-done .subbar-f{ display:none; }
.subbar.is-done .subbar-tx{ display:none; }
/* 首次访问弹层 */
.subpop{ position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
padding:20px; background:rgba(20,24,31,.42); }
.subpop[hidden]{ display:none; }
.subpop-card{ width:100%; max-width:400px; box-sizing:border-box; background:var(--s-card);
border-radius:var(--s-r-panel); padding:24px; box-shadow:0 12px 40px rgba(20,24,31,.18); }
.subpop-t{ font-size:16px; font-weight:700; margin:0 0 8px; color:var(--s-ink); }
.subpop-s{ font-size:13px; line-height:1.65; color:var(--s-ink-2); margin:0 0 18px; }
.subpop-f{ display:flex; gap:8px; }
.subpop-f input{ flex:1; min-width:0; height:38px; padding:0 12px; box-sizing:border-box;
border:1px solid var(--s-line-2); border-radius:var(--s-r-ctl); background:var(--s-card);
color:var(--s-ink); font-size:14px; font-family:inherit; }
.subpop-f input:focus{ outline:2px solid var(--s-blue); outline-offset:-1px; border-color:var(--s-blue); }
.subpop-f button{ flex:none; height:38px; padding:0 20px; border:0; border-radius:var(--s-r-ctl);
background:var(--s-blue); color:#fff; font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; }
.subpop-f button[disabled]{ opacity:.6; cursor:default; }
.subpop-msg{ font-size:12.5px; color:var(--s-ink-3); margin:10px 0 0; min-height:17px; }
.subpop-msg.is-ok{ color:var(--s-green); font-weight:600; }
.subpop-msg.is-err{ color:var(--s-red); font-weight:600; }
.subpop-no{ display:block; width:100%; margin-top:12px; padding:0; border:0; background:none;
color:var(--s-ink-3); font-size:12.5px; font-family:inherit; cursor:pointer; text-align:center; }
.subpop-no:hover{ color:var(--s-ink-2); }
@media (max-width:900px){
.subbar-in{ flex-wrap:wrap; gap:8px; min-height:0; padding-top:10px; padding-bottom:10px; }
.subbar-tx{ flex:1 1 100%; font-size:12.5px; }
.subbar-f{ flex:1 1 100%; margin-left:0; }
.subbar-f input{ flex:1; width:auto; min-width:0; height:38px; }
.subbar-f button{ height:38px; }
.subbar-msg{ flex:1 1 100%; margin-left:0; }
}
/* ═══════════════════════════════════════════════════════════════════
横幅收起 + 订阅成功动效 【2026-10-15 Sera 口径】
───────────────────────────────────────────────────────────────────
① 横幅约 2 分钟后自动收起（subscribe.js 的 BANNER_MS）。
为什么是「收起」不是「永久隐藏」：已订阅的人不需要天天看见这条，
但刚订阅那一下要给他一个确认 —— 所以留 2 分钟看完再走。
② 成功动效 = 恭喜 + 打勾 + 撒花。
⚠ **不做卡片翻转** —— 2026-09 做过翻卡版，Sera 否了。别再捡回来。
③ 打勾是 SVG 描边（stroke-dashoffset），撒花是 14 个纯 CSS 粒子。
零依赖、零图片（全站无图是硬规矩，别引 gif/lottie）。
═══════════════════════════════════════════════════════════════════ */
.subbar.is-gone{ display:none; }
.shp-done{ position:fixed; inset:0; z-index:1300; display:flex; align-items:center;
justify-content:center; padding:20px; background:rgba(20,24,31,.40); }
.shp-done[hidden]{ display:none; }
.shp-done-card{ position:relative; width:100%; max-width:340px; box-sizing:border-box;
background:var(--s-card); border-radius:var(--s-r-panel); padding:30px 26px 26px;
text-align:center; box-shadow:0 16px 48px rgba(20,24,31,.22);
opacity:0; transform:scale(.94); cursor:pointer; }
.shp-done.is-on .shp-done-card{ animation:sdPop .34s cubic-bezier(.2,.9,.3,1.18) forwards; }
@keyframes sdPop{ to{ opacity:1; transform:scale(1); } }
.shp-tick{ display:block; width:58px; height:58px; margin:0 auto 14px; }
.tk-c{ fill:none; stroke:var(--s-green); stroke-width:3;
stroke-dasharray:145; stroke-dashoffset:145; }
.tk-p{ fill:none; stroke:var(--s-green); stroke-width:3.6; stroke-linecap:round;
stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; }
.shp-done.is-on .tk-c{ animation:tkC .44s ease forwards; }
.shp-done.is-on .tk-p{ animation:tkP .34s .32s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes tkC{ to{ stroke-dashoffset:0; } }
@keyframes tkP{ to{ stroke-dashoffset:0; } }
.shp-done-t{ margin:0 0 6px; font-size:17px; font-weight:700; color:var(--s-ink);
letter-spacing:.4px; }
.shp-done-s{ margin:0; font-size:13px; line-height:1.6; color:var(--s-ink-2); }
.shp-done-s b{ color:var(--s-ink); font-weight:600; word-break:break-all; }
/* 撒花：14 个粒子从打勾中心向两侧散开落下 */
.shp-done-cf{ position:absolute; left:50%; top:44px; width:0; height:0; pointer-events:none; }
.cf{ position:absolute; left:0; top:0; display:block; opacity:0; border-radius:2px; }
.shp-done.is-on .cf{ animation:cfFly .95s var(--d) cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes cfFly{
0% { opacity:0; transform:translate(-50%,-50%) rotate(0deg) scale(.6); }
18% { opacity:1; }
100% { opacity:0; transform:translate(calc(-50% + var(--x)), 92px) rotate(var(--r)) scale(1); }
}
/* 关动效的人不该被晃：直接给最终态，不给动画 */
@media (prefers-reduced-motion:reduce){
.shp-done-card{ opacity:1; transform:none; animation:none; }
.tk-c,.tk-p{ stroke-dashoffset:0; }
.shp-done.is-on .tk-c,.shp-done.is-on .tk-p{ animation:none; }
.cf{ display:none; }
}
/* ── 静态货源快照卡片（SEO 可见正文）────────────────────────
* 由 tools/build-seo-static.js 生成，写在 HTML 的 SEO 标记之间。
* 作用：不执行 JS 的爬虫也能读到型号 / 数量 / 交付地 / 参考报价。
* JS 成功后会整体替换这一块，所以样式要贴近动态卡片，避免接管前后跳动。
* 字段缺失一律显示「待更新」，不补造。 */
.seo-card{
border:1px solid var(--s-line);border-radius:var(--s-r-panel);
background:var(--s-bg);padding:16px 18px;margin:0 0 12px;
}
.seo-card h3{
font-size:17px;font-weight:600;letter-spacing:-.01em;
line-height:1.4;color:var(--s-ink);margin:0 0 10px;
}
.seo-card dl{
display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
margin:0;font-size:13px;line-height:1.5;
}
.seo-card dt{color:var(--s-ink-3)}
.seo-card dd{margin:0;color:var(--s-ink)}