/* ============================================================
   大数小聚 SEO 站公共样式（风格 E：深色头部 + 浅色正文）
   四个分类页面共用。改动会影响所有页面，改前先看 docs/SEO页面形态方案.md
   ============================================================ */
:root{
  --bg:#f6f7f9; --card:#fff; --ink:#131820; --ink2:#586170; --ink3:#8e97a5;
  --line:#e8eaee; --brand:#0b63e5; --brand-l:#f2f6ff;
  --h1:#0a1628; --h2:#12294a; --h3:#0b1f38;
  --cyan:#4fd1c5; --gold:#f6c445; --gold-d:#e0a615;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.7 -apple-system,"Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}
a{color:var(--brand);text-decoration:none}

/* ---------- 深色头部 ---------- */
.head{background:
   radial-gradient(ellipse 62% 92% at 86% 0%,rgba(79,209,197,.17),transparent 62%),
   radial-gradient(ellipse 52% 82% at 6% 100%,rgba(11,99,229,.32),transparent 62%),
   linear-gradient(155deg,var(--h1),var(--h2) 55%,var(--h3));
  color:#fff;position:relative;overflow:hidden}
.head::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.026) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 72% 78% at 50% 22%,#000,transparent)}
.nav{display:flex;align-items:center;height:60px;gap:14px;position:relative;z-index:2}
.logo{font-weight:700;font-size:16px;letter-spacing:.3px;color:#fff}
.logo span{color:var(--cyan)}
.crumb{margin-left:auto;font-size:12px;color:rgba(255,255,255,.45)}
.crumb i{color:rgba(255,255,255,.85);font-style:normal}
.crumb a{color:rgba(255,255,255,.7)}
.crumb a:hover{color:#fff}
.crumb .sep{margin:0 6px;opacity:.4}
/* 导航里的小程序入口：金绿色调区分于面包屑的普通链接 */
.navmp{display:inline-flex;align-items:center;gap:5px;font-size:12px;
  color:var(--cyan);background:rgba(79,209,197,.12);
  border:1px solid rgba(79,209,197,.3);border-radius:20px;
  padding:4px 11px;margin-left:12px;letter-spacing:.3px;white-space:nowrap}
.navmp:hover{background:rgba(79,209,197,.22);color:#fff}
.hhero{position:relative;z-index:2;padding:12px 0 0}
.badge{display:inline-flex;gap:7px;align-items:center;font-size:11.5px;
  background:rgba(79,209,197,.14);border:1px solid rgba(79,209,197,.32);
  color:var(--cyan);padding:4px 11px;border-radius:20px;margin-bottom:14px;letter-spacing:.4px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 0 0 rgba(79,209,197,.7);animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 8px rgba(79,209,197,0)}100%{box-shadow:0 0 0 0 rgba(79,209,197,0)}}
.head h1{font-size:31px;margin:0 0 10px;letter-spacing:-.7px;line-height:1.3;font-weight:700}
.head h1 em{font-style:normal;color:var(--cyan)}
.head .sub{font-size:14px;color:rgba(255,255,255,.62);max-width:680px;margin:0}
.hstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:28px 0 0;position:relative;z-index:2}
.hs{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:13px;
  padding:17px 18px;backdrop-filter:blur(10px)}
.hs .v{font-size:31px;font-weight:700;letter-spacing:-1.4px;line-height:1.05}
.hs .v u{text-decoration:none;font-size:12px;font-weight:500;
  color:rgba(255,255,255,.55);margin-left:4px;letter-spacing:0}
.hs .k{font-size:11.5px;color:rgba(255,255,255,.48);margin-top:6px;letter-spacing:.3px}
.hs .d{font-size:11px;color:rgba(255,255,255,.4);margin-top:3px}
.hs.hi .v{color:var(--cyan)}
.hs .d .dn{color:#ff8e85} .hs .d .upc{color:#63e2ab}

/* ---------- 正文 ---------- */
.body{background:var(--bg);padding:32px 0 80px}
.card{background:var(--card);border:1px solid var(--line);border-radius:15px;
  box-shadow:0 1px 2px rgba(19,24,32,.04),0 10px 28px -14px rgba(19,24,32,.1)}
h2{font-size:17px;margin:38px 0 5px;letter-spacing:-.2px;display:flex;align-items:baseline;gap:9px}
h2:first-child{margin-top:0}
h2 .s{font-size:12px;font-weight:400;color:var(--ink3)}
h3{font-size:14px;margin:22px 0 8px}
.hint{font-size:12.5px;color:var(--ink3);margin:0 0 14px;line-height:1.65}

/* ---------- 趋势图 + 浮层 ---------- */
.chart{padding:20px 22px 14px;position:relative}
.bars{display:flex;align-items:flex-end;gap:6px;height:158px;position:relative}
.gl{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between}
.gl i{border-top:1px dashed #eef0f3}
.bc{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;
  height:100%;position:relative;z-index:1;cursor:pointer}
.bar{width:100%;background:linear-gradient(180deg,#5b9bff,#0b63e5);border-radius:4px 4px 0 0;
  min-height:3px;transition:.16s;opacity:.85}
.bc:hover .bar{opacity:1;transform:scaleY(1.03)}
.bar.cur{background:linear-gradient(180deg,var(--gold),var(--gold-d));opacity:1;
  box-shadow:0 0 16px rgba(246,196,69,.4)}
.xl{font-size:10px;color:var(--ink3);white-space:nowrap}
.xl.cur{color:#a97f0a;font-weight:700}
.tip{position:absolute;z-index:30;pointer-events:none;opacity:0;transform:translate(-50%,-6px);
  transition:opacity .12s,transform .12s;
  background:rgba(13,20,32,.96);color:#fff;border-radius:9px;padding:10px 13px;
  font-size:12px;line-height:1.55;white-space:nowrap;
  box-shadow:0 8px 26px rgba(10,16,28,.3);border:1px solid rgba(255,255,255,.1);min-width:132px}
.tip.on{opacity:1;transform:translate(-50%,-12px)}
.tip .td{font-size:11.5px;color:var(--cyan);font-weight:600;letter-spacing:.2px;margin-bottom:5px}
.tip .tr{display:flex;justify-content:space-between;gap:16px;color:rgba(255,255,255,.72)}
.tip .tr b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}
.tip::after{content:"";position:absolute;bottom:-5px;left:50%;margin-left:-5px;
  width:10px;height:10px;background:rgba(13,20,32,.96);transform:rotate(45deg);
  border-right:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}

/* ---------- 双榜 ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.pad{padding:16px 18px 10px;display:flex;flex-direction:column}
.phead{font-size:13.5px;font-weight:600;display:flex;align-items:baseline;gap:6px;flex:0 0 auto}
.phead s{text-decoration:none;font-size:11.5px;color:var(--ink3);font-weight:400}
.plist{margin-top:10px;flex:1 1 auto}
.lrow{position:relative;display:grid;grid-template-columns:26px 1fr auto;
  align-items:center;column-gap:11px;height:44px;padding:0 9px 4px;margin-bottom:8px;
  border-radius:7px;cursor:default;transition:background .15s}
.lrow:hover{background:var(--brand-l)}
.lrow .ix{font-size:11px;color:var(--ink3);font-weight:700;text-align:center;
  font-variant-numeric:tabular-nums}
.lrow:nth-child(1) .ix{color:#b8860b}
.lrow:nth-child(2) .ix{color:#7d8794}
.lrow:nth-child(3) .ix{color:#b0774a}
.lrow .nm{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.35}
.lrow .vv{font-size:13px;font-weight:600;color:var(--brand);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lrow .vv small{color:var(--ink3);font-weight:400;font-size:10.5px;margin-left:2px}
.lrow .trk{position:absolute;left:9px;right:9px;bottom:2px;height:2.5px;
  background:#f1f3f6;border-radius:2px;overflow:hidden}
.lrow .trk b{display:block;height:100%;border-radius:2px;
  background:linear-gradient(90deg,#9cc4ff,#0b63e5);transition:width .45s cubic-bezier(.22,1,.36,1)}
.lrow:hover .trk b{background:linear-gradient(90deg,#7fb0ff,#0b63e5)}
.lrow.gold .trk b{background:linear-gradient(90deg,#ffd88a,#f0b429)}

/* ---------- 领域分布 ---------- */
.cats{padding:18px 22px 20px}
.crow{display:grid;grid-template-columns:76px 1fr 78px 84px;align-items:center;
  column-gap:14px;height:38px;padding:0 8px;border-radius:6px;transition:background .15s}
.crow:hover{background:var(--brand-l)}
.crow .cn{font-size:12.5px;color:var(--ink);font-weight:500}
.crow .cbar{height:9px;background:#f1f3f6;border-radius:5px;overflow:hidden}
.crow .cbar b{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,#9cc4ff,#0b63e5)}
.crow:hover .cbar b{background:linear-gradient(90deg,#7fb0ff,#0b63e5)}
.crow .cn2{font-size:12px;color:var(--ink2);text-align:right;font-variant-numeric:tabular-nums}
.crow .ca{font-size:12px;color:var(--ink);text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums}
.crow .ca s{text-decoration:none;font-weight:400;color:var(--ink3);font-size:10.5px;margin-left:1px}
.cats .lg{display:flex;gap:18px;font-size:11.5px;color:var(--ink3);margin-top:10px;padding-left:8px}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink3);
  font-weight:600;padding:14px 20px;border-bottom:1px solid var(--line);background:#fbfcfd}
td{padding:13px 20px;border-bottom:1px solid #f4f5f7;transition:background .13s,box-shadow .13s}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--brand-l)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.amt{font-weight:600}
.mut{color:var(--ink3);font-size:11.5px}
.tag{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:4px;
  background:var(--brand-l);color:var(--brand);margin-left:5px}
.tag.warn{background:#fff4e0;color:#a06b00}

/* ---------- 行级浮层 ---------- */
.rtip{position:fixed;z-index:60;pointer-events:none;opacity:0;
  transition:opacity .1s;
  background:rgba(13,20,32,.96);color:#fff;border-radius:9px;padding:11px 14px;
  font-size:12px;line-height:1.6;max-width:340px;
  box-shadow:0 10px 30px rgba(10,16,28,.32);border:1px solid rgba(255,255,255,.1)}
.rtip.on{opacity:1}
.rtip .rd{font-size:11.5px;color:var(--cyan);font-weight:600;margin-bottom:6px}
.rtip .rl{color:rgba(255,255,255,.62);font-size:11.5px;margin-top:4px}
.rtip .rl b{color:#fff;font-weight:600}
.rtip .rmoney{font-size:15px;font-weight:700;color:var(--gold);margin:5px 0 2px;
  font-variant-numeric:tabular-nums}
.rtip .rrow{display:flex;justify-content:space-between;gap:18px;
  color:rgba(255,255,255,.62);font-size:11.5px;margin-top:3px}
.rtip .rrow b{color:#fff;font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- 口径 ---------- */
.note{background:#fffbee;border:1px solid #f0e0b0;border-radius:13px;padding:18px 22px;
  font-size:12.5px;color:#7a6122;line-height:1.85;margin-top:18px}
.note b{color:#5f4a12}
.note ul{margin:8px 0 0;padding-left:20px} .note li{margin:3px 0}

/* ---------- 小样本提示条（首屏，KPI 下方） ---------- */
/* 小样本页面照常发布，但必须让读者第一眼就知道样本量，不能把 2 条记录当排名看 */
.sn{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px 18px;
  background:rgba(246,196,69,.10);border:1px solid rgba(246,196,69,.30);
  border-radius:12px;font-size:12.5px;line-height:1.75;color:#8a6d1e}
.sn b{color:#6b5310;font-weight:600;white-space:nowrap}

/* ---------- CTA ---------- */
.cta{display:flex;align-items:center;gap:20px;margin-top:34px;padding:26px 30px;border-radius:16px;
  color:#fff;background:linear-gradient(120deg,var(--h2),var(--brand));
  box-shadow:0 12px 32px -14px rgba(11,99,229,.55)}
.cta .t{font-size:17px;font-weight:700;margin-bottom:4px;letter-spacing:-.2px}
.cta .d{font-size:12.5px;color:rgba(255,255,255,.7)}
/* 原先是 <button>（无任何事件，纯装饰），2026-10-23 改为锚点指向首页小程序区块 */
.cta .mpbtn{margin-left:auto;background:#fff;color:var(--brand);border-radius:9px;
  padding:12px 26px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;
  white-space:nowrap;display:flex;align-items:center;gap:8px;text-decoration:none}
.cta .mpbtn:hover{background:#f2f6ff}
.cta .mpbtn svg{flex:0 0 auto}

/* ---------- 首页小程序区块 ---------- */
.mpbox{display:flex;gap:16px;align-items:flex-start;margin-top:26px;
  background:var(--card);border:1px solid var(--line);border-radius:15px;padding:20px 22px;
  box-shadow:0 1px 2px rgba(19,24,32,.04),0 10px 28px -14px rgba(19,24,32,.1)}
.mpbox .mpq{flex:0 0 auto;width:54px;height:54px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-l);color:var(--brand)}
.mpbox .mpt .t{font-size:15px;font-weight:600;margin-bottom:5px}
.mpbox .mpt .d{font-size:12.5px;color:var(--ink2);line-height:1.7}

footer{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--ink3);line-height:2}
footer a{color:var(--ink2)}
.banner{background:#131820;color:#fff;font-size:12px;padding:9px 0}
.banner .wrap{padding:0 24px}

/* ---------- 分页导航（周/月切换） ---------- */
.pager{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-size:12.5px;color:var(--ink2)}
.pager a{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:7px;
  border:1px solid var(--line);background:#fff;color:var(--ink2)}
.pager a:hover{border-color:var(--brand);color:var(--brand)}
.pager .cur{font-weight:600;color:var(--ink)}
.pager .sp{flex:1}

/* ---------- 空态 ---------- */
.empty{background:#fff;border:1px dashed #dfe3e8;border-radius:15px;padding:44px 28px;
  text-align:center;color:var(--ink3);font-size:13.5px;line-height:1.9}

@media(max-width:820px){
  .hstats{grid-template-columns:1fr 1fr} .two{grid-template-columns:1fr}
  .head h1{font-size:22px} .hs .v{font-size:24px} .hide-sm{display:none}
  .cta{flex-direction:column;align-items:flex-start;gap:14px} .cta button{margin-left:0}
  .crow{grid-template-columns:64px 1fr 66px} .crow .ca{display:none}
  .wrap{padding:0 18px} .rtip{max-width:250px}
}