/* 聚金汇策 · 文章页共用样式（2026-10-31 从 kexue.html 抽出）
首页是营销落地页、结构完全不同，所以不走这套。
本文件被 /kexue（内联）、/ea-anzhuang、/fengxian 共用。 */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* ── 设计变量：与后台管理面板完全一致 ── */
:root{
--bg:#f0f2f5;--bg2:#ffffff;--bg3:#f8f9fa;--bd:#e2e8f0;
/* ★ 2026-10-31：--tx2 由 #64748b 改为 #5e6d82。
原值在页面底色 #f0f2f5 上对比度只有 4.24，达不到 WCAG AA 的 4.5；
新值 4.70（白底 5.27），与首页保持一致 —— 两页来回切不会看出色差。 */
--tx:#1e293b;--tx2:#5e6d82;--tx3:#94a3b8;
--ac:#2563eb;--ac2:#3b82f6;--ac-l:#eff6ff;
--gr:#059669;--gr-l:#ecfdf5;
--rd:#dc2626;--rd-l:#fef2f2;
--yl:#d97706;--yl-l:#fffbeb;
--pu:#7c3aed;--pu-l:#f5f3ff;
--r:14px;--shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
--shadow-lg:0 10px 25px rgba(0,0,0,.08);
--fs:16px;--lh:1.85;
}
body{background:var(--bg);color:var(--tx);font-size:var(--fs);line-height:var(--lh);
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:var(--ac);text-decoration:none}
.wrap{max-width:740px;margin:0 auto;padding:0 24px}
/* ── 导航 ── */
nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--bd);padding-top:env(safe-area-inset-top)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:58px;max-width:1080px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:1px;font-size:17px;color:var(--tx)}
.brand i{width:10px;height:10px;border-radius:3px;display:block;
background:linear-gradient(135deg,var(--yl),#f59e0b);box-shadow:0 2px 6px rgba(217,119,6,.4)}
nav .back{font-size:14px;font-weight:600;color:var(--tx2);border:1px solid var(--bd);
border-radius:9px;padding:8px 12px;background:var(--bg2);transition:all .15s}
nav .back:hover{border-color:var(--ac);color:var(--ac)}
/* ── 文章白底 ── */
main{padding:24px 0 44px}
.sheet{max-width:840px;margin:0 auto;background:var(--bg2);border:1px solid var(--bd);
border-radius:18px;box-shadow:var(--shadow);padding:44px 0}
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:1.5px;
color:var(--ac);background:var(--ac-l);padding:4px 12px;border-radius:20px}
h1{font-size:29px;line-height:1.3;font-weight:800;letter-spacing:-.2px;margin:16px 0 12px}
.meta{color:var(--tx2);font-size:14px;padding-bottom:24px;border-bottom:1px solid var(--bd);line-height:1.75}
/* ── 三句话 ── */
.tldr{background:linear-gradient(180deg,var(--ac-l),#f8fbff);
border:1px solid rgba(37,99,235,.18);border-radius:var(--r);padding:24px;margin:28px 0}
.tldr .t{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--ac);margin-bottom:12px}
.tldr ol{list-style:none;counter-reset:n}
.tldr li{counter-increment:n;position:relative;padding-left:32px;font-size:16px;
color:var(--tx);margin:12px 0;line-height:1.8}
.tldr li:before{content:counter(n);position:absolute;left:0;top:2px;width:21px;height:21px;
border-radius:7px;background:var(--ac);color:#fff;font-size:12px;font-weight:800;
display:flex;align-items:center;justify-content:center}
.tldr li b{color:var(--ac);font-weight:700}
/* ── 目录 ── */
.toc{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);
padding:20px 24px 16px;margin:28px 0}
.toc .t{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--tx2);margin-bottom:12px}
.toc ol{list-style:none;counter-reset:c}
.toc li{counter-increment:c;padding:8px 0;border-top:1px dashed var(--bd);
font-size:15px;display:flex;gap:8px;align-items:baseline;line-height:1.5}
.toc li:first-child{border-top:0}
.toc li:before{content:counter(c) ".";color:var(--ac);font-weight:800;font-size:13px;min-width:18px}
.toc a{color:var(--tx2);font-weight:500}
.toc a:hover{color:var(--ac)}
/* ── 正文 ── */
p{font-size:var(--fs);color:var(--tx);margin:20px 0;line-height:var(--lh)}
p.keep{font-size:calc(var(--fs) + .5px);color:var(--tx)}
.hl{color:var(--text,#1e293b);font-weight:600;
background:linear-gradient(transparent 62%,rgba(217,119,6,.28) 62%)}
h2{font-size:24px;font-weight:800;line-height:1.5;margin:48px 0 4px;
padding-left:16px;border-left:4px solid var(--ac);scroll-margin-top:70px;color:var(--tx)}
h2 .n{display:block;font-size:12px;letter-spacing:1.5px;color:var(--ac);font-weight:700;margin-bottom:4px}
h3{font-size:18px;font-weight:700;margin:32px 0 2px;color:var(--tx);scroll-margin-top:70px}
h4{font-size:16px;font-weight:700;margin:20px 0 2px;color:var(--tx)}
blockquote{margin:24px 0;background:var(--yl-l);border-left:4px solid var(--yl);
border-radius:0 10px 10px 0;padding:16px 20px;color:#7c2d12;
font-size:17px;font-weight:700;line-height:1.8}
/* ── 展开解释 ── */
.explain{background:var(--bg3);border:1px solid var(--bd);border-radius:var(--r);
padding:20px 20px 4px;margin:20px 0}
.explain .who{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--ac);margin-bottom:8px}
.explain p{font-size:16px;color:var(--tx2);margin:12px 0;line-height:1.9}
.explain p b{color:var(--tx);font-weight:700}
/* ── 例子 ── */
.eg{background:var(--gr-l);border:1px solid rgba(5,150,105,.2);
border-radius:var(--r);padding:20px;margin:24px 0}
.eg .who{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--gr);margin-bottom:8px}
.eg p{font-size:16px;margin:8px 0;line-height:1.9;color:#065f46}
.eg p b{color:#064e3b;font-weight:700}
.eg .num{color:var(--gr);font-weight:800}
/* ── 警示 ── */
.warn{background:var(--rd-l);border:1px solid rgba(220,38,38,.2);
border-radius:var(--r);padding:20px;margin:24px 0}
.warn .who{font-size:12px;font-weight:700;letter-spacing:1.5px;color:var(--rd);margin-bottom:8px}
.warn p{font-size:16px;margin:8px 0;line-height:1.9;color:#7f1d1d}
.warn p b{color:var(--rd);font-weight:700}
/* ── 对比表 ── */
.cmp{display:flex;flex-direction:column;gap:8px;margin:24px 0}
.cmp-h{display:grid;grid-template-columns:124px 1fr 1fr;gap:12px;padding:2px 16px;
font-size:12px;font-weight:700;color:var(--tx2);letter-spacing:.5px}
.cmp-row{display:grid;grid-template-columns:124px 1fr 1fr;gap:12px;align-items:center;
padding:16px 16px;border-radius:11px;background:var(--bg2);border:1px solid var(--bd)}
.cmp-k{font-weight:700;font-size:15px;color:var(--tx2)}
.cmp-a,.cmp-b{font-size:15px;line-height:1.6}
.cmp-a{color:var(--tx2)}
.cmp-b{color:var(--ac);font-weight:700}
.cmp-row i{display:none}
/* ── 多空 ── */
.dirs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.dir{border-radius:var(--r);padding:20px;border:1px solid var(--bd)}
.dir .h{font-size:16px;font-weight:800;margin-bottom:8px}
.dir.up{background:var(--gr-l);border-color:rgba(5,150,105,.2)}
.dir.up .h{color:var(--gr)}
.dir.dn{background:var(--ac-l);border-color:rgba(37,99,235,.2)}
.dir.dn .h{color:var(--ac)}
.dir p{font-size:15px;color:var(--tx2);margin:8px 0;line-height:1.75}
/* ── 流程 ── */
.flow{display:flex;flex-direction:column;gap:12px;margin:24px 0;counter-reset:f}
.fi{position:relative;background:var(--bg2);border:1px solid var(--bd);
border-radius:var(--r);padding:20px 20px 20px 56px;counter-increment:f;box-shadow:var(--shadow)}
.fi:before{content:counter(f);position:absolute;left:16px;top:16px;width:28px;height:28px;
border-radius:9px;background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;
font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;
box-shadow:0 3px 8px rgba(37,99,235,.28)}
.fi h4{margin:0 0 4px;font-size:16px;color:var(--tx);font-weight:700}
.fi p{font-size:15px;color:var(--tx2);margin:8px 0;line-height:1.75}
/* ── Q&A ── */
.qa{margin:24px 0}
.qa .q{font-size:16px;font-weight:700;color:var(--tx);margin:20px 0 2px;
display:flex;gap:8px;align-items:baseline;line-height:1.6}
.qa .q:before{content:"Q";flex:0 0 20px;height:20px;border-radius:6px;background:var(--ac-l);
color:var(--ac);font-size:12px;font-weight:800;display:inline-flex;
align-items:center;justify-content:center;position:relative;top:1px}
.qa .a{font-size:15px;color:var(--tx2);margin:8px 0 0 28px;line-height:1.9}
.qa .a b{color:var(--tx);font-weight:700}
/* ── 名词表 ── */
.gloss{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}
.gl{background:var(--bg3);border:1px solid var(--bd);border-radius:12px;padding:16px 16px}
.gl .k{font-size:15px;font-weight:800;color:var(--ac);margin-bottom:4px}
.gl .v{font-size:14px;color:var(--tx2);line-height:1.75}
/* ── 结尾 ── */
.cta{margin:44px 0 0;background:linear-gradient(180deg,var(--ac-l),#f8fbff);
border:1px solid rgba(37,99,235,.18);border-radius:18px;padding:32px 24px;text-align:center}
.cta h3{font-size:20px;font-weight:800;margin:0}
.cta p{font-size:15px;color:var(--tx2);margin:12px 0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 28px;border-radius:11px;font-size:16px;font-weight:700;
background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;
box-shadow:0 4px 14px rgba(37,99,235,.28);transition:all .15s}
.btn:hover{box-shadow:0 8px 22px rgba(37,99,235,.36);transform:translateY(-1px);color:#fff}
.risk{margin:36px 0 0;background:var(--rd-l);border:1px solid rgba(220,38,38,.22);
border-radius:var(--r);padding:20px}
.risk h3{font-size:15px;color:var(--rd);margin-bottom:12px;font-weight:800}
.risk p{font-size:14px;color:#7f1d1d;line-height:1.9;margin:8px 0}
.risk p b{color:var(--rd)}
footer{background:var(--bg2);border-top:1px solid var(--bd);
padding:24px 0 calc(24px + env(safe-area-inset-bottom));color:var(--tx2);font-size:13px}
footer .wrap{max-width:1080px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a:hover{color:var(--ac)}
.visitors{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
max-width:1080px;margin:16px auto 0;padding:16px 24px 0;border-top:1px dashed var(--bd);
font-size:13px;color:var(--tx2)}
.visitors .vdot{width:7px;height:7px;border-radius:50%;background:var(--gr);display:block;
box-shadow:0 0 0 3px rgba(5,150,105,.14);flex:0 0 auto}
.visitors b{color:var(--ac);font-weight:800;font-variant-numeric:tabular-nums}
/* ================= 手机端 ================= */
@media(max-width:680px){
:root{--fs:16.5px;--lh:1.88}
.wrap{padding:0 20px}
main{padding:0 0 32px}
.sheet{border-radius:0;border-left:0;border-right:0;box-shadow:none;padding:24px 0 32px;margin:0}
h1{font-size:24px;line-height:1.4}
h2{font-size:20px;margin:40px 0 4px;padding-left:12px}
h3{font-size:17px;margin:28px 0 2px}
h4{font-size:16px}
.meta{font-size:14px;padding-bottom:20px}
.tldr{padding:20px 16px;margin:20px 0}
.tldr li{font-size:16px;padding-left:32px;margin:12px 0}
.toc{padding:16px 16px 12px;margin:20px 0}
.toc li{font-size:15px;padding:8px 0}
blockquote{font-size:16px;padding:16px 16px}
.explain,.eg,.warn{padding:16px 16px 2px;margin:20px 0}
.explain p,.eg p,.warn p{font-size:15px}
/* 对比表堆叠 */
.cmp-h{display:none}
.cmp{gap:8px}
.cmp-row{grid-template-columns:1fr;gap:8px;padding:12px}
.cmp-row i{display:inline-block;font-style:normal;font-size:12px;font-weight:700;
letter-spacing:.5px;padding:2px 8px;border-radius:6px;margin-right:8px;
background:var(--bg3);color:var(--tx2);border:1px solid var(--bd)}
.cmp-k{font-size:15px;color:var(--tx);border-bottom:1px dashed var(--bd);padding-bottom:8px}
.cmp-a,.cmp-b{font-size:15px}
.dirs{grid-template-columns:1fr}
.gloss{grid-template-columns:1fr}
.fi{padding:16px 16px 16px 52px}
.fi:before{left:14px;top:14px;width:26px;height:26px}
.qa .a{margin-left:0}
.cta{padding:24px 20px}
.btn{width:100%}
.risk{padding:20px 16px}
}
@media(max-width:360px){
:root{--fs:16px}
h1{font-size:22px}
.brand{font-size:16px}
nav .back{font-size:13px;padding:8px 12px;min-height:40px;display:inline-flex;align-items:center}
}
/* ── 手机端触控目标（2026-10-30 实测补充）────────────────────────
同源 iframe 扫 320/360/390/430/768 发现：本页有 11~13 个可点元素
不足 40×40 —— 主要是目录里那排链接只有 22px 高。
原因：.toc li 有 padding，但里面的 是行内元素，只有文字那一条
能点，上下 padding 区域点不到。这里把热区移到 身上。
───────────────────────────────────────────────────────────── */
.toc li{padding:0;align-items:center}
.toc a{flex:1;display:flex;align-items:center;min-height:44px;padding:4px 0}
.brand{padding:8px 0}
nav .back{min-height:40px;display:inline-flex;align-items:center;padding:0 12px}
footer a{display:inline-flex;align-items:center;min-height:40px;padding:0 2px}
footer .wrap{gap:4px 16px}
/* 触屏设备上取消 hover 粘滞 */
@media(hover:none){
.toc a:hover{color:var(--tx2)}
.card:hover{transform:none}
}
/* ── 排版细节（2026-10-30）──────────────────────────────────────
长文最吃这两条：标题尾行孤字、段落尾行孤字。中文尤其明显，
因为一个汉字就是一个音节的视觉重量，剩两三个字特别扎眼。 */
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* 长英文串/URL 不能把正文撑破 */
p, li, td, th { overflow-wrap: break-word; word-break: normal; }
/* 数字等宽，避免数值变动时整段左右抖 */
td, th, .num { font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1; }
/* ── 我们 vs 同行（2026-10-31）─────────────────────────────────
⚠ 只写客户能亲自观察到的产品行为和服务方式，不写任何内部实现细节。
页面源码是公开的，注释同样不许留线索。 */
.vs{display:flex;flex-direction:column;gap:8px;margin:24px 0}
.vs-h{display:grid;grid-template-columns:96px 1fr 1fr;gap:12px;padding:0 16px 4px;
font-size:12px;font-weight:700;letter-spacing:.5px}
.vs-h span:first-child{color:var(--tx2)}
.vs-h span:nth-child(2){color:var(--ac)}
.vs-h span:nth-child(3){color:var(--rd)}
.vs-row{display:grid;grid-template-columns:96px 1fr 1fr;gap:12px;align-items:start;
padding:14px 16px;border-radius:11px;background:var(--bg2);border:1px solid var(--bd)}
.vs-k{font-weight:700;font-size:14px;color:var(--tx);line-height:1.6}
.vs-us,.vs-them{font-size:14px;line-height:1.7;position:relative;padding-left:20px}
.vs-us{color:var(--tx);font-weight:600}
.vs-them{color:var(--tx2)}
.vs-us:before{content:'✓';position:absolute;left:0;top:0;color:var(--gr);font-weight:900}
.vs-them:before{content:'✕';position:absolute;left:0;top:0;color:var(--rd);font-weight:900;opacity:.75}
.vs-us b,.vs-them b{display:none}
.vs-row.hot{background:linear-gradient(90deg,var(--ac-l),var(--bg2));
border-color:rgba(37,99,235,.25)}
.vs-quote{display:flex;flex-direction:column;gap:10px;margin:20px 0 0}
.vs-quote div{background:var(--bg2);border:1px solid var(--bd);border-left:4px solid var(--ac);
border-radius:0 11px 11px 0;padding:14px 18px;font-size:15px;font-weight:700;
line-height:1.7;color:var(--tx)}
.vs-quote div:nth-child(2){border-left-color:var(--yl)}
.vs-quote div:nth-child(3){border-left-color:var(--gr)}
.vs-seal{background:var(--bg3);border:1px dashed var(--bd);border-radius:11px;
padding:16px 20px;font-size:14px;color:var(--tx2);line-height:1.8;margin:20px 0 0}
.vs-seal b{color:var(--tx);display:block;margin-bottom:4px;font-size:15px}
@media(max-width:600px){
.vs-h{display:none}
.vs-row{grid-template-columns:1fr;gap:8px;padding:14px}
.vs-k{font-size:14px;color:var(--tx2);border-bottom:1px dashed var(--bd);padding-bottom:8px}
.vs-us,.vs-them{font-size:15px}
.vs-us b,.vs-them b{display:inline;font-size:12px;font-weight:800;margin-right:6px}
.vs-us b{color:var(--ac)}
.vs-them b{color:var(--rd)}
}
/* ── 两列版对比表（2026-10-31，安装教程页用）─────────────────────
默认 .cmp 是三列（维度 / A / B），安装教程那种「看到什么 → 含义」
只有两列，用 .cmp.two 覆盖。 */
.cmp.two .cmp-h,
.cmp.two .cmp-row { grid-template-columns:150px 1fr; }
@media(max-width:600px){
.cmp.two .cmp-row { grid-template-columns:1fr; }
}