/* ==========================================================================
   除湿机产业观察 · 站点样式表 v2.0
   设计目标：专业、克制、信息密度高；排行榜需具备正式感与可读性
   ========================================================================== */

:root{
  /* 主色 */
  --navy:#10314f;
  --navy2:#164a72;
  --blue:#185FA5;
  --blue-d:#124b83;
  --blue-bg:#eef4fa;

  /* 文本 */
  --ink:#1a1e23;
  --ink2:#424a53;
  --grey:#6b7480;
  --grey2:#98a0aa;

  /* 面 */
  --bg:#f6f7f9;
  --card:#ffffff;
  --line:#e2e6eb;
  --line2:#eef1f4;

  /* 榜位 */
  --gold:#9a7b16;
  --gold-bg:#fdf6e3;
  --gold-line:#dfc86a;
  --silver:#6f7a85;
  --silver-bg:#f4f6f8;
  --silver-line:#c3ccd4;
  --bronze:#8d6142;
  --bronze-bg:#fbf3ed;
  --bronze-line:#d9b79b;

  /* 语义 */
  --amber:#854F0B; --amber-bg:#FAEEDA;
  --green:#3B6D11; --green-bg:#EAF3DE;
  --red:#A32D2D;   --red-bg:#FCEBEB;

  --radius:10px;
  --radius-s:6px;
  --shadow:0 1px 2px rgba(16,49,79,.05), 0 4px 16px rgba(16,49,79,.05);
  --shadow-h:0 2px 6px rgba(16,49,79,.08), 0 12px 32px rgba(16,49,79,.09);
  --maxw:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15.5px/1.78 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:600;color:var(--ink)}
code{font:13.5px/1.5 "SF Mono",ui-monospace,Menlo,Consolas,monospace;background:var(--blue-bg);color:var(--navy2);padding:1.5px 6px;border-radius:4px}
/* 代码块：内部横向滚动，不撑破页面。
   注意这里是本项目最容易出问题的地方——决策树、对照表、计算公式都以代码块呈现，
   一行最长可达 60 多字。此前 CSS 里完全没有 pre 规则，默认 white-space:pre 会让
   长行把整页撑宽（390px 视口下最多溢出 194px，8 个页面受影响）。
   修法只能是「容器自己滚动」：给 pre 加 overflow-x:auto，而不是让长行换行——
   代码块换行会破坏对齐（决策树的缩进、表格的竖线全都依赖等宽对齐）。 */
pre{margin:16px 0;padding:14px 16px;background:#f6f8fa;border:1px solid var(--line);
  border-radius:var(--radius-s);overflow-x:auto;max-width:100%;
  -webkit-overflow-scrolling:touch;line-height:1.72}
pre>code{display:block;width:max-content;min-width:100%;box-sizing:border-box;
  background:none;padding:0;border-radius:0;font-size:12.8px;line-height:1.72;
  color:var(--navy2);white-space:pre;tab-size:2}
/* 可滚动的代码块给一个提示性细滚动条（移动端不占高度，桌面端可见） */
pre::-webkit-scrollbar{height:7px}
pre::-webkit-scrollbar-thumb{background:#c9d2db;border-radius:4px}
pre::-webkit-scrollbar-thumb:hover{background:#aeb9c4}
pre::-webkit-scrollbar-track{background:transparent}
/* 代码块：内部横向滚动，不撑破页面。
   注意这里是本项目最容易出问题的地方——决策树、对照表、计算公式都以代码块呈现，
   一行最长可达 60 多字。此前 CSS 里完全没有 pre 规则，默认 white-space:pre 会让
   长行把整页撑宽（390px 视口下最多溢出 194px，8 个页面受影响）。
   修法只能是「容器自己滚动」：给 pre 加 overflow-x:auto，而不是让长行换行——
   代码块换行会破坏对齐（决策树的缩进、表格的竖线全都依赖等宽对齐）。 */
pre{margin:16px 0;padding:14px 16px;background:#f6f8fa;border:1px solid var(--line);
  border-radius:var(--radius-s);overflow-x:auto;max-width:100%;
  -webkit-overflow-scrolling:touch;line-height:1.72}
pre>code{display:block;width:max-content;min-width:100%;box-sizing:border-box;
  background:none;padding:0;border-radius:0;font-size:12.8px;line-height:1.72;
  color:var(--navy2);white-space:pre;tab-size:2}
/* 可滚动的代码块给一个提示性细滚动条（移动端不占高度，桌面端可见） */
pre::-webkit-scrollbar{height:7px}
pre::-webkit-scrollbar-thumb{background:#c9d2db;border-radius:4px}
pre::-webkit-scrollbar-thumb:hover{background:#aeb9c4}
pre::-webkit-scrollbar-track{background:transparent}

/* ============================ 页头 ============================ */
.site-head{
  background:linear-gradient(180deg,#10314f 0%,#164a72 100%);
  position:sticky;top:0;z-index:50;
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 2px 12px rgba(16,49,79,.16);
}
.site-head .inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:26px;min-height:62px;flex-wrap:wrap;
}
.logo{display:flex;align-items:baseline;gap:9px;color:#fff;font-size:18.5px;font-weight:600;letter-spacing:.4px;text-decoration:none}
.logo:hover{text-decoration:none}
.logo span{font-size:11px;font-weight:400;letter-spacing:.8px;color:rgba(255,255,255,.5);text-transform:uppercase}
.site-nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;align-items:center}
.site-nav a,.site-nav .soon{
  color:rgba(255,255,255,.84);font-size:14.5px;padding:7px 12px;border-radius:7px;
  transition:background .16s,color .16s;
}
.site-nav a:hover{background:rgba(255,255,255,.11);color:#fff;text-decoration:none}
.site-nav a.on{background:rgba(255,255,255,.15);color:#fff;font-weight:600}
.site-nav .soon{color:rgba(255,255,255,.36);cursor:default;position:relative}
.site-nav .soon::after{content:"待上线";font-size:9.5px;margin-left:5px;padding:1px 4px;border-radius:3px;background:rgba(255,255,255,.1);vertical-align:1px}

/* ============================ 布局 ============================ */
/* 锚点跳转时给 sticky 头部留出空间。
   站点头部是 position:sticky，锚点跳转后标题会正好落在它下面被盖住——
   此前全站没有 scroll-margin 规则，而是靠读者自己再往上滚一下。
   用 scroll-margin-top 而不是 scroll-padding-top，是因为各断点下头部高度不同
   （移动端会换行变成两三行，最高约 190px），逐断点给每个锚点目标设值更可控。 */
/* 头部在各宽度下已统一到 91—99px（导航改单行横滑后不再折行），
   所以锚点留白也不再需要按断点分档——原来移动端留 196px 是按「头部 191px」
   设的，头部压缩后那多出的 100px 只是白占首屏。留 110px 覆盖最高的 99px 并留余量。 */
h1,h2,h3,h4,[id]{scroll-margin-top:110px}

/* 锚点跳转时给 sticky 头部留出空间。
   站点头部是 position:sticky，锚点跳转后标题会正好落在它下面被盖住——
   此前全站没有 scroll-margin 规则，而是靠读者自己再往上滚一下。
   用 scroll-margin-top 而不是 scroll-padding-top，是因为各断点下头部高度不同
   （移动端会换行变成两三行，最高约 190px），逐断点给每个锚点目标设值更可控。 */
/* 头部在各宽度下已统一到 91—99px（导航改单行横滑后不再折行），
   所以锚点留白也不再需要按断点分档——原来移动端留 196px 是按「头部 191px」
   设的，头部压缩后那多出的 100px 只是白占首屏。留 110px 覆盖最高的 99px 并留余量。 */
h1,h2,h3,h4,[id]{scroll-margin-top:110px}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
main{padding:26px 0 60px}
.crumb{font-size:13px;color:var(--grey);margin:0 0 18px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--grey)}
.crumb span{color:var(--grey2)}
.crumb b{color:var(--ink2);font-weight:500}

h1{font-size:30px;line-height:1.34;margin:0 0 14px;font-weight:600;letter-spacing:-.2px;color:var(--navy)}
h2{font-size:21.5px;line-height:1.42;margin:44px 0 14px;padding-bottom:9px;font-weight:600;color:var(--navy);border-bottom:2px solid var(--line);letter-spacing:-.1px}
h3{font-size:17px;margin:30px 0 10px;font-weight:600;color:var(--navy2)}
h4{font-size:15.5px;margin:22px 0 8px;font-weight:600;color:var(--ink)}
h2:first-child,h3:first-child{margin-top:0}
p{margin:0 0 14px}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:5px 0}
li>ul,li>ol{margin:5px 0 0}

.abstract{
  background:linear-gradient(180deg,#fbfcfd,#f6f8fa);
  border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--radius);padding:16px 20px;margin:0 0 22px;
  color:var(--ink2);font-size:15.5px;line-height:1.8;
}

/* ============================ 首页 Hero ============================ */
.hero{
  background:linear-gradient(135deg,#10314f 0%,#164a72 58%,#1c5f8f 100%);
  border-radius:14px;padding:38px 40px 34px;margin:0 0 26px;color:#fff;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.09),transparent 68%);
}
.hero h1{color:#fff;font-size:32px;margin-bottom:12px;position:relative}
.hero .lead{color:rgba(255,255,255,.86);font-size:16px;line-height:1.82;margin:0 0 22px;max-width:760px;position:relative}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative}
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:8px;
  font-size:14.5px;font-weight:500;transition:transform .16s,box-shadow .16s,background .16s;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-p{background:#fff;color:var(--navy);box-shadow:0 3px 14px rgba(0,0,0,.16)}
.btn-p:hover{box-shadow:0 6px 20px rgba(0,0,0,.22)}
.btn-g{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.28)}
.btn-g:hover{background:rgba(255,255,255,.2)}

/* 关键指标条 */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0 0 30px}
.kpi{background:var(--card);padding:16px 18px}
.kpi b{display:block;font-size:23px;font-weight:600;color:var(--navy);letter-spacing:-.4px;font-variant-numeric:tabular-nums;line-height:1.3}
.kpi b small{font-size:13px;font-weight:500;color:var(--grey);margin-left:3px;letter-spacing:0}
.kpi span{display:block;font-size:12.5px;color:var(--grey);margin-top:3px;line-height:1.5}

/* 板块卡片 */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px;margin:22px 0}
.card{
  display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;color:inherit;transition:border-color .16s,box-shadow .16s,transform .16s;
}
a.card:hover{border-color:#c3d4e4;box-shadow:var(--shadow-h);transform:translateY(-2px);text-decoration:none}
.card h3{margin:0 0 7px;font-size:16.5px;color:var(--navy);display:flex;align-items:center;gap:8px}
.card p{margin:0;font-size:14px;color:var(--ink2);line-height:1.72}
.card .meta{margin-top:11px;font-size:12.5px;color:var(--grey);display:flex;gap:10px;flex-wrap:wrap}
.soon-card{cursor:default;opacity:.72;background:#fbfcfd}
.soon-card h3{color:var(--grey)}
.soon-card .meta{color:var(--grey2)}

/* ============================ 排行榜 · 领奖台 ============================ */
.podium{
  display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:14px;align-items:end;margin:8px 0 30px;
}
.pod{
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px 20px 18px;text-align:center;position:relative;overflow:hidden;
  transition:transform .18s,box-shadow .18s;
}
.pod:hover{transform:translateY(-3px);box-shadow:var(--shadow-h)}
.pod .medal{
  width:38px;height:38px;border-radius:50%;margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:700;color:#fff;letter-spacing:-.5px;
}
.pod .rank-no{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;margin-bottom:9px}
.pod .brand{font-size:19px;font-weight:600;color:var(--navy);margin:0 0 3px;letter-spacing:-.1px}
.pod .brand-en{font-size:11.5px;color:var(--grey2);letter-spacing:.7px;text-transform:uppercase;margin-bottom:10px}
.pod .sc{font-size:31px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-1px;line-height:1.1}
.pod .sc em{font-size:12.5px;font-style:normal;color:var(--grey);font-weight:400;margin-left:2px;letter-spacing:0}
.pod .note{margin:10px 0 0;font-size:13px;color:var(--ink2);line-height:1.68;text-align:left}
.pod .entity{font-size:12px;color:var(--grey);margin-top:9px;padding-top:9px;border-top:1px dashed var(--line2);text-align:left}

.pod.p1{border:1.5px solid var(--gold-line);background:linear-gradient(180deg,var(--gold-bg) 0%,#fff 62%);box-shadow:0 2px 10px rgba(154,123,22,.1)}
.pod.p1 .medal{background:linear-gradient(145deg,#c9a227,#9a7b16);box-shadow:0 2px 8px rgba(154,123,22,.34)}
.pod.p1 .rank-no{color:var(--gold)}
.pod.p1 .sc{color:var(--gold)}
.pod.p2{border:1.5px solid var(--silver-line);background:linear-gradient(180deg,var(--silver-bg) 0%,#fff 62%)}
.pod.p2 .medal{background:linear-gradient(145deg,#9aa5b0,#6f7a85)}
.pod.p2 .rank-no{color:var(--silver)}
.pod.p2 .sc{color:var(--silver)}
.pod.p3{border:1.5px solid var(--bronze-line);background:linear-gradient(180deg,var(--bronze-bg) 0%,#fff 62%)}
.pod.p3 .medal{background:linear-gradient(145deg,#b5805c,#8d6142)}
.pod.p3 .rank-no{color:var(--bronze)}
.pod.p3 .sc{color:var(--bronze)}

/* 领奖台视觉高低 */
.podium .pod.p1{padding-bottom:34px}
.podium .pod.p2{padding-bottom:22px}
.podium .pod.p3{padding-bottom:16px}

/* ============================ 排行榜 · 列表 ============================ */
.ranklist{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);margin:16px 0 20px}
.rank-row{
  display:grid;grid-template-columns:64px 1fr 132px;gap:0;align-items:stretch;
  padding:0;border-top:1px solid var(--line2);
}
.rank-row:first-child{border-top:0}
.rank-row:hover{background:#fafbfc}
.rk-no{
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:600;color:var(--grey2);font-variant-numeric:tabular-nums;
  border-right:1px solid var(--line2);letter-spacing:-.5px;
}
.rank-row.top1 .rk-no{background:var(--gold-bg);color:var(--gold);font-size:24px}
.rank-row.top2 .rk-no{background:var(--silver-bg);color:var(--silver);font-size:24px}
.rank-row.top3 .rk-no{background:var(--bronze-bg);color:var(--bronze);font-size:24px}
.rk-body{padding:15px 20px}
.rk-name{font-size:16.5px;font-weight:600;color:var(--navy);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rk-name em{font-size:11.5px;font-style:normal;color:var(--grey2);letter-spacing:.6px;text-transform:uppercase;font-weight:400}
.rk-entity{font-size:12.5px;color:var(--grey);margin-top:3px}
.rk-high{font-size:13.5px;color:var(--ink2);margin-top:5px;line-height:1.66}
.rk-score{padding:15px 20px;text-align:right;border-left:1px solid var(--line2);display:flex;flex-direction:column;justify-content:center;gap:7px}
.rk-score b{font-size:20px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.4px;display:block;line-height:1.2}
.rk-score b em{font-size:11.5px;font-style:normal;color:var(--grey2);font-weight:400;letter-spacing:0}
.bar{height:5px;background:var(--line2);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),#3d86cf);border-radius:3px}
.rank-row.top1 .bar i{background:linear-gradient(90deg,#c9a227,#9a7b16)}
.rank-row.top2 .bar i{background:linear-gradient(90deg,#9aa5b0,#6f7a85)}
.rank-row.top3 .bar i{background:linear-gradient(90deg,#b5805c,#8d6142)}

/* ============================ 品牌大全 ============================ */
.filter-bar{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:0 0 20px;
}
.filter-bar .fl{font-size:13px;color:var(--grey);margin-right:2px}
.chip{
  display:inline-block;padding:5px 13px;border-radius:20px;font-size:13.5px;
  background:var(--bg);border:1px solid var(--line);color:var(--ink2);
}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:500}
.chip-n{font-size:11.5px;color:var(--grey2);margin-left:4px}
.chip.on .chip-n{color:rgba(255,255,255,.6)}

.brand-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:14px;margin:18px 0}
.bcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 19px;transition:border-color .16s,box-shadow .16s,transform .16s;position:relative;
}
.bcard:hover{border-color:#c8d8e7;box-shadow:var(--shadow-h);transform:translateY(-2px)}
.bcard .bh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:4px;padding-right:54px}
.bcard .bh b{font-size:16.5px;font-weight:600;color:var(--navy);letter-spacing:-.1px}
.bcard .bh em{font-size:11.5px;font-style:normal;color:var(--grey2);letter-spacing:.5px;text-transform:uppercase}
.bcard .ent{font-size:12.5px;color:var(--grey);line-height:1.6;min-height:20px}
.bcard .pos{font-size:13.5px;color:var(--ink2);margin-top:8px;line-height:1.68}
.bcard .bf{margin-top:11px;padding-top:10px;border-top:1px solid var(--line2);display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.bcard .rkbadge{
  position:absolute;top:15px;right:16px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px;
  background:var(--blue-bg);color:var(--blue-d);letter-spacing:.3px;
}
.bcard .rkbadge.g{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line)}

/* 类型分组 */
.type-sec{margin:34px 0 0}
.type-sec>h3{font-size:16px;margin:0 0 4px;color:var(--navy);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.type-sec>h3 span{font-size:12.5px;font-weight:400;color:var(--grey)}
.type-sec>p.td{font-size:13.5px;color:var(--grey);margin:0 0 4px}

/* ============================ 表格 ============================ */
.table-scroll{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line2);vertical-align:top}
th{background:#f8fafb;font-weight:600;color:var(--navy);font-size:13.5px;white-space:nowrap;border-bottom:1.5px solid var(--line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#fafbfc}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.c,th.c{text-align:center}
td.s{font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap}

/* ============================ 标签 / 徽章 ============================ */
.tag{
  display:inline-block;background:var(--blue-bg);color:var(--blue-d);
  font-size:12px;padding:2.5px 9px;border-radius:5px;font-weight:500;letter-spacing:.2px;white-space:nowrap;
}
.tag.g{background:var(--green-bg);color:var(--green)}
.tag.a{background:var(--amber-bg);color:var(--amber)}
.tag.r{background:var(--red-bg);color:var(--red)}
.tag.n{background:#f1f3f5;color:var(--grey)}
.tag.gold{background:var(--gold-bg);color:var(--gold);border:1px solid var(--gold-line)}

/* 来源标注 */
.src{font-size:12.5px;color:var(--grey);display:inline-block;margin-top:2px}
.src::before{content:"▸ ";color:var(--grey2)}

/* ============================ 提示框 ============================ */
.box{
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:0 var(--radius) var(--radius) 0;padding:15px 19px;margin:18px 0;
}
.box p:last-child,.box ul:last-child,.box ol:last-child{margin-bottom:0}
.box h4{margin:0 0 8px;font-size:15px;color:var(--navy)}
.box.key{border-left-color:var(--gold);background:linear-gradient(180deg,var(--gold-bg),var(--card) 70%)}
.box.key h4{color:var(--gold)}
.box.warn{border-left-color:var(--red);background:linear-gradient(180deg,var(--red-bg),var(--card) 70%)}
.box.warn h4{color:var(--red)}
.box.ok{border-left-color:var(--green);background:linear-gradient(180deg,var(--green-bg),var(--card) 70%)}
.box.ok h4{color:var(--green)}

/* ============================ FAQ ============================ */
.faq{border-top:1px solid var(--line);margin-top:38px;padding-top:6px}
.faq h2{margin-top:24px;border-bottom:0;padding-bottom:0}
details{border-bottom:1px solid var(--line2);padding:13px 0}
details[open]{padding-bottom:15px}
summary{cursor:pointer;font-weight:600;color:var(--navy2);font-size:15px;list-style:none;display:flex;gap:9px;align-items:flex-start}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋";color:var(--blue);font-weight:600;flex:none;width:14px}
details[open] summary::before{content:"－"}
details p{margin:9px 0 0 23px;color:var(--ink2);font-size:14.5px;line-height:1.76}

/* ============================ 页脚 ============================ */
.site-foot{background:#fff;border-top:1px solid var(--line);margin-top:50px;padding:30px 0 36px}
.site-foot .inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.site-foot .fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;margin-bottom:22px}
.site-foot h5{font-size:13px;color:var(--navy);margin:0 0 9px;font-weight:600;letter-spacing:.3px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:5px 0;font-size:13.5px;color:var(--grey)}
.site-foot a{color:var(--grey)}
.site-foot a:hover{color:var(--blue)}
.site-foot .fm{border-top:1px solid var(--line2);padding-top:16px;font-size:12.5px;color:var(--grey2);line-height:1.8}
.soon-inline{color:var(--grey);border-bottom:1px dashed var(--line);cursor:default}

/* ============================ 辅助 ============================ */
.kv{margin:14px 0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
/* 必须用子选择器：说明文字内可能含 <b>，用后代选择器会导致块级化错乱 */
.kv>span{display:block}
.kv>b{display:block;padding:10px 18px 0;font-size:13px;color:var(--navy);font-weight:600}
.kv>span{display:block;padding:3px 18px 12px;font-size:13.5px;color:var(--ink2);border-bottom:1px solid var(--line2)}
.kv>:last-child{border-bottom:0}
.note{font-size:13px;color:var(--grey);line-height:1.72}
.note-top{margin:-6px 0 16px}
hr{border:0;border-top:1px solid var(--line);margin:28px 0}

/* ============================ 深度报告：章节导航 ============================ */
.chapnav{
  display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;
  margin:40px 0 0;padding-top:24px;border-top:1px solid var(--line);
}
.chapnav a{
  display:flex;flex-direction:column;gap:3px;padding:12px 16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);color:var(--navy);font-size:14px;
  line-height:1.5;transition:border-color .15s,box-shadow .15s;
}
.chapnav a span{font-size:11.5px;color:var(--grey2);letter-spacing:.3px}
.chapnav a:hover{border-color:#c3d4e4;box-shadow:var(--shadow);text-decoration:none}
.chapnav .cn-next{text-align:right;align-items:flex-end}
.chapnav .cn-toc{align-items:center;justify-content:center;font-weight:600;padding:12px 22px;white-space:nowrap;font-size:14px}
.chapnav .is-empty{display:block;border:0;background:none;padding:0}

/* ============================ 深度报告：章节目录列表 ============================ */
.chlist{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:18px 0;
}
.chlist a{
  display:grid;grid-template-columns:46px 1fr auto;gap:14px;align-items:center;
  background:var(--card);padding:12px 18px;color:var(--ink);transition:background .15s;
}
.chlist a:hover{background:#fafbfc;text-decoration:none}
.chlist a b{font-size:13.5px;font-weight:600;color:var(--grey2);font-variant-numeric:tabular-nums}
.chlist a span{font-size:14.5px;color:var(--navy);line-height:1.5}
.chlist a em{font-size:12px;font-style:normal;color:var(--grey2);font-variant-numeric:tabular-nums;white-space:nowrap}
.chlist a:hover span{color:var(--blue)}

/* ============================ 产品参数表 ============================ */
.ptable{font-size:13px}
.ptable th{white-space:nowrap;font-size:12.5px;padding:9px 12px}
.ptable td{padding:9px 12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptable td:last-child{white-space:normal;min-width:190px;font-variant-numeric:normal;line-height:1.6;font-size:12.5px;color:var(--ink2)}
.ptable td:first-child strong{color:var(--navy)}

/* ============================ 产品参数表 ============================ */
.ptable{font-size:13px}
.ptable th{white-space:nowrap;font-size:12.5px;padding:9px 12px}
.ptable td{padding:9px 12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptable td:last-child{white-space:normal;min-width:190px;font-variant-numeric:normal;line-height:1.6;font-size:12.5px;color:var(--ink2)}
.ptable td:first-child strong{color:var(--navy)}

/* ============================ 图表 ============================ */
figure{margin:24px 0;text-align:center}
figure img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
figcaption{font-size:12.5px;color:var(--grey);margin-top:9px;line-height:1.6}

/* ============================ 响应式 ============================ */
@media (max-width:820px){
  .podium{grid-template-columns:1fr;align-items:stretch}
  .podium .pod.p1{padding-bottom:20px}
  .podium .pod.p2,.podium .pod.p3{padding-bottom:18px}
  .rank-row{grid-template-columns:52px 1fr}
  .rk-score{grid-column:1/-1;border-left:0;border-top:1px solid var(--line2);flex-direction:row;align-items:center;justify-content:space-between;padding:10px 20px}
  .rk-score b{display:inline}
  .rk-score .bar{width:120px;flex:none}
  .hero{padding:28px 22px}
  .hero h1{font-size:25px}
  h1{font-size:25px}
  h2{font-size:19.5px}
  .wrap,.site-head .inner,.site-foot .inner{padding-left:16px;padding-right:16px}
  .site-nav{width:100%;margin-left:0;padding-bottom:8px}
  .logo{font-size:16.5px;white-space:nowrap}
  .logo span{display:none}
  .bcard{padding:15px 16px}
  .rk-body{padding:13px 16px}
  .rk-score{padding:10px 16px}
  .pod{padding:17px 17px 16px}
  .pod .sc{font-size:27px}
  .chapnav{grid-template-columns:1fr;gap:9px}
  .chapnav .cn-toc{order:-1}
  .chapnav .cn-next{text-align:left;align-items:flex-start}
  .chlist a{grid-template-columns:34px 1fr;gap:10px}
  .chlist a em{display:none}
}

/* ============================ 产品库 ============================ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:20px 0 8px}
.pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 17px;text-decoration:none;transition:.16s;color:inherit}
.pcard:hover{border-color:var(--navy);box-shadow:0 3px 14px rgba(18,58,94,.1);transform:translateY(-1px)}
.pcard .pch{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.pcard .pch b{font-size:16px;color:var(--navy);font-weight:500}
.pcard .pch em{font-size:11.5px;color:var(--grey);font-style:normal;letter-spacing:.02em}
.pcard .pcb{font-size:12.5px;color:var(--ink2);margin-bottom:10px}
.pcard .pcf{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--grey);padding-top:9px;border-top:1px solid var(--line)}
.pcard .pcf span{white-space:nowrap}

.bk{display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;background:var(--blue-50,#eef4fa);color:var(--navy);white-space:nowrap}

.pvlist{margin:18px 0 8px}
.pvitem{background:#fff;border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:0 10px 10px 0;padding:15px 18px;margin-bottom:12px}
.pvitem h4{margin:0 0 9px;font-size:14.5px;color:var(--navy);font-weight:500}
.pvitem p{margin:0 0 7px;font-size:13px;line-height:1.72;color:var(--ink2)}
.pvitem p:last-child{margin-bottom:0}
.pvitem .src{font-size:11.5px;color:var(--grey)}

@media (max-width:640px){
  .pgrid{grid-template-columns:1fr 1fr;gap:10px}
  .pcard{padding:13px 13px}
  .pcard .pch b{font-size:14.5px}
  .pcard .pcf{flex-direction:column;gap:3px}
}

/* ============================ 产品库 ============================ */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin:20px 0 8px}
.pcard{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 17px;text-decoration:none;transition:.16s;color:inherit}
.pcard:hover{border-color:var(--navy);box-shadow:0 3px 14px rgba(18,58,94,.1);transform:translateY(-1px)}
.pcard .pch{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:9px}
.pcard .pch b{font-size:16px;color:var(--navy);font-weight:500}
.pcard .pch em{font-size:11.5px;color:var(--grey);font-style:normal;letter-spacing:.02em}
.pcard .pcb{font-size:12.5px;color:var(--ink2);margin-bottom:10px}
.pcard .pcf{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--grey);padding-top:9px;border-top:1px solid var(--line)}
.pcard .pcf span{white-space:nowrap}

.bk{display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;background:var(--blue-50,#eef4fa);color:var(--navy);white-space:nowrap}

.pvlist{margin:18px 0 8px}
.pvitem{background:#fff;border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:0 10px 10px 0;padding:15px 18px;margin-bottom:12px}
.pvitem h4{margin:0 0 9px;font-size:14.5px;color:var(--navy);font-weight:500}
.pvitem p{margin:0 0 7px;font-size:13px;line-height:1.72;color:var(--ink2)}
.pvitem p:last-child{margin-bottom:0}
.pvitem .src{font-size:11.5px;color:var(--grey)}

@media (max-width:640px){
  .pgrid{grid-template-columns:1fr 1fr;gap:10px}
  .pcard{padding:13px 13px}
  .pcard .pch b{font-size:14.5px}
  .pcard .pcf{flex-direction:column;gap:3px}
}

/* 机型同级判断 */
.pvitem h4 .bk{margin-left:9px;font-weight:400;vertical-align:1px}
.pvitem .vd{margin:0 0 10px;padding-left:19px}
.pvitem .vd li{font-size:13px;line-height:1.74;color:var(--ink2);margin-bottom:4px}
.pvitem .vd li::marker{color:var(--navy)}

/* 机型同级判断 */
.pvitem h4 .bk{margin-left:9px;font-weight:400;vertical-align:1px}
.pvitem .vd{margin:0 0 10px;padding-left:19px}
.pvitem .vd li{font-size:13px;line-height:1.74;color:var(--ink2);margin-bottom:4px}
.pvitem .vd li::marker{color:var(--navy)}

/* ============================ 问答块 ============================ */
.qa{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px 18px;margin:0 0 16px}
.qa-q{display:flex;gap:11px;align-items:flex-start;margin:0 0 12px;font-size:16.5px;line-height:1.5;color:var(--navy);font-weight:600}
.qa-n{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:23px;padding:0 7px;border-radius:6px;background:var(--navy);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.03em;margin-top:2px}
.qa-a{font-size:14.5px;line-height:1.82;color:var(--ink);margin:0 0 12px;padding:12px 15px;background:#f4f8fc;border-left:3px solid var(--blue);border-radius:0 7px 7px 0}
.qa-b,.qa-e{margin:0 0 9px;font-size:13.4px;line-height:1.78;color:var(--ink2)}
.qa-b:last-child,.qa-e:last-child{margin-bottom:0}
.qa-lb{display:inline-block;font-size:11.5px;color:var(--navy);background:#e9f1f9;border-radius:4px;padding:1px 7px;margin-right:8px;font-weight:600;white-space:nowrap}
.qa-e .qa-lb{background:#f2f0ea;color:#7a6a3f}
.qa-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin:18px 0}
.qa-index a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:inherit;transition:.16s}
.qa-index a:hover{border-color:var(--navy);box-shadow:0 3px 13px rgba(18,58,94,.1)}
.qa-index b{display:block;font-size:14.5px;color:var(--navy);margin-bottom:5px;font-weight:600}
.qa-index span{font-size:12.4px;color:var(--grey);line-height:1.6}
.qa-toc{background:#f8f9fb;border:1px solid var(--line);border-radius:10px;padding:15px 20px;margin:0 0 24px}
.qa-toc ol{margin:0;padding-left:22px;columns:2;column-gap:30px}
.qa-toc li{font-size:13.2px;line-height:1.85;break-inside:avoid}
.qa-toc a{color:var(--ink2);text-decoration:none}
.qa-toc a:hover{color:var(--navy);text-decoration:underline}
.qa-wrap{margin-top:26px}
@media (max-width:640px){
  .qa{padding:16px 15px 14px}
  .qa-q{font-size:15px}
  .qa-a{font-size:13.8px;padding:11px 13px}
  .qa-toc ol{columns:1}
}

/* ============================ 对比分析 ============================ */
.cmp-table{font-size:13px;min-width:660px}
.cmp-table caption{caption-side:top;text-align:left;font-size:12.4px;color:var(--grey);padding:0 0 9px}
.cmp-table th[scope="col"]{text-align:center;vertical-align:bottom;min-width:150px;font-size:13px;line-height:1.5}
.cmp-table th[scope="col"] strong{display:block;font-size:13.6px;color:var(--navy)}
.cmp-table th[scope="col"] em{display:block;font-style:normal;font-size:11.6px;color:var(--grey);font-weight:400;margin-top:2px}
.cmp-table th[scope="row"]{text-align:left;font-weight:500;color:var(--ink2);white-space:nowrap;background:#fafbfc;
  position:sticky;left:0;z-index:1;font-size:12.6px;border-right:1px solid var(--line)}
.cmp-table td{text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.cmp-table td.best{background:#eaf6ee;color:#26603a;font-weight:700}
.cmp-table tbody tr:hover td{background:#f6f9fc}
.cmp-table tbody tr:hover td.best{background:#e2f2e8}
.cmp-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;margin:14px 0 26px}
.cmp-index a{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:inherit;transition:.16s}
.cmp-index a:hover{border-color:var(--navy);box-shadow:0 3px 13px rgba(18,58,94,.1)}
.cmp-index b{display:block;font-size:14.4px;color:var(--navy);margin-bottom:5px;font-weight:600;line-height:1.45}
.cmp-index span{font-size:12.3px;color:var(--grey);line-height:1.6}
.ci-n{display:inline-block;margin-left:9px;font-size:11.6px;font-weight:400;color:var(--grey);background:#eef2f6;border-radius:4px;padding:1px 7px;vertical-align:2px}
.ci-d{margin:-4px 0 12px;font-size:13px;color:var(--grey);line-height:1.7}
.cmp-lb{display:inline-block;font-size:11.4px;color:var(--navy);background:#e9f1f9;border-radius:4px;padding:1px 7px;margin-right:7px;font-weight:600}
.cmp-verdict{background:#f8f9fb;border-left:3px solid var(--navy);border-radius:0 8px 8px 0;padding:14px 18px;margin:0 0 22px}
.cmp-verdict p{margin:0 0 7px;font-size:13.6px;line-height:1.78;color:var(--ink2)}
.cmp-verdict p:last-child{margin-bottom:0}
@media (max-width:640px){
  .cmp-table{font-size:12.2px;min-width:560px}
  .cmp-table th[scope="col"]{min-width:124px;font-size:12.2px}
  .cmp-index{grid-template-columns:1fr}
}

/* ==================== 伊岛租赁服务网络页面 ==================== */
.rt{font-size:13.4px}
.rt th,.rt td{padding:9px 12px;white-space:nowrap}
.rt td.wrap{white-space:normal;min-width:168px}
.rt td.wrap:last-child{min-width:210px;color:var(--ink2)}
.rt tbody tr:hover td{background:#fafbfc}
.lv{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;line-height:1.7;
    background:var(--blue-bg);color:var(--blue);border:1px solid #d8e6f3;white-space:nowrap}
.kpi span{display:block;font-size:12.8px;color:var(--grey);margin-top:4px}
.rt-index a{display:inline-block;margin:0 12px 7px 0;font-size:13.6px}

/* ==================== 在线工具板块 ==================== */
.tpanel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;margin:0 0 20px;box-shadow:var(--shadow)}
.tp-h{font-size:17px;font-weight:600;color:var(--navy);margin:0 0 18px;
  padding:0;border:none;letter-spacing:0}
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px 20px}
.tf{display:flex;flex-direction:column;gap:6px;min-width:0}
.tf-wide{grid-column:1/-1}
.tf>label{font-size:13.6px;font-weight:500;color:var(--ink);display:flex;align-items:baseline;
  gap:6px;flex-wrap:wrap;line-height:1.5}
.tu{font-size:12.4px;color:var(--grey);font-weight:400}
.to{font-size:11.4px;color:var(--amber);background:var(--amber-bg);border-radius:4px;
  padding:1px 6px;font-weight:400}
.th{font-size:12.2px;color:var(--grey);line-height:1.62}
.tf input[type=number],.tf select{width:100%;box-sizing:border-box;padding:9px 11px;
  font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;
  border:1px solid #cfd6dd;border-radius:var(--radius-s);
  transition:border-color .15s,box-shadow .15s;font-variant-numeric:tabular-nums}
.tf input[type=number]:focus,.tf select:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(24,95,165,.12)}
.tf select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7480' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.trange{display:flex;align-items:center;gap:12px}
.trange input[type=range]{flex:1;min-width:0;height:4px;-webkit-appearance:none;appearance:none;
  /* 填充宽度由 --p（0—100）驱动，由 JS 按「(值−min)÷(max−min)」实时写入；
     写死百分比会让蓝条与滑块位置脱节 */
  background:linear-gradient(90deg,
    var(--blue) 0 calc(var(--p,0) * 1%),
    var(--line) calc(var(--p,0) * 1%) 100%);
  border-radius:2px;cursor:pointer}
.trange input[type=range]:focus-visible{outline:none;
  box-shadow:0 0 0 3px rgba(24,95,165,.18);border-radius:2px}
.trange input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;
  border-radius:50%;background:#fff;border:2px solid var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer}
/* Firefox 的轨道单独绘制，置为透明以露出上面的渐变背景 */
.trange input[type=range]::-moz-range-track{background:transparent;height:4px;border-radius:2px}
.trange input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;
  background:#fff;border:2px solid var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:pointer}
.trange output{flex:none;min-width:44px;text-align:right;font-size:14.5px;font-weight:600;
  color:var(--navy);font-variant-numeric:tabular-nums}
.tcb{display:flex;align-items:flex-start;gap:9px;font-size:13.8px;color:var(--ink2);cursor:pointer;line-height:1.6}
.tcb input{margin:2px 0 0;flex:none;width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.tactions{display:flex;gap:11px;flex-wrap:wrap;margin:20px 0 0}
.tbtn{display:inline-flex;align-items:center;gap:7px;padding:10px 24px;border-radius:8px;
  font-size:14.6px;font-weight:500;font-family:inherit;cursor:pointer;border:1px solid transparent;
  transition:background .15s,box-shadow .15s,border-color .15s}
.tbtn-p{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(24,95,165,.24)}
.tbtn-p:hover{background:var(--blue-d);box-shadow:0 4px 14px rgba(24,95,165,.3)}
.tbtn-g{background:#fff;color:var(--ink2);border-color:#cfd6dd}
.tbtn-g:hover{border-color:var(--blue);color:var(--blue)}
.tactions .btn{padding:10px 24px;font-family:inherit;cursor:pointer;border:none;font-size:14.6px}
.tactions .btn-p{background:var(--blue);color:#fff;box-shadow:0 2px 8px rgba(24,95,165,.24)}
.tactions .btn-p:hover{background:var(--blue-d)}
.tactions .btn-g{background:#fff;color:var(--ink2);border:1px solid #cfd6dd}
.tactions .btn-g:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.tfoot{margin:16px 0 0;font-size:12.4px;color:var(--grey);line-height:1.6;margin-bottom:0}
.tout{background:linear-gradient(180deg,#fbfcfd,#f7f9fb)}
.tl-out{min-height:60px}
.tl-out:not(.on) .tl-note{color:var(--grey)}
.tk{margin:0 0 4px}
.tk .kpi b{font-size:21px}
.tk .kpi b small{font-size:12px;font-weight:500;color:var(--grey);margin-left:2px;letter-spacing:0}
.tk .kpi span{display:block;font-size:12.6px;color:var(--grey);margin-top:5px;line-height:1.5}
.tl-verdict{background:#fff;border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:0 var(--radius-s) var(--radius-s) 0;padding:14px 17px;margin:0 0 16px;
  font-size:14.2px;line-height:1.82;color:var(--ink2)}
.tl-verdict b{color:var(--navy)}
.tl-note{margin:16px 0 0;font-size:13.2px;line-height:1.8;color:var(--ink2);
  background:#fff;border:1px solid var(--line2);border-radius:var(--radius-s);padding:12px 15px}
.tl-warn{margin:0;font-size:13.8px;line-height:1.8;color:var(--red);
  background:var(--red-bg);border:1px solid #f3d4d4;border-radius:var(--radius-s);padding:13px 16px}
.tbl{font-size:13.6px}
.tbl th,.tbl td{padding:9px 13px}
.tbl tbody tr:hover td{background:#fafbfc}
.tcards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0 8px}
@media (max-width:760px){.tcards{grid-template-columns:1fr}}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow)}
.tcard h3{margin:0 0 12px;font-size:15.5px;color:var(--navy);padding-bottom:10px;
  border-bottom:1px solid var(--line2)}
.tlist{list-style:none;margin:0;padding:0}
.tlist li{margin:0 0 12px;line-height:1.6}
.tlist li:last-child{margin-bottom:0}
.tlist a{font-size:14.2px;font-weight:500;display:block}
.tlist span{display:block;font-size:12.4px;color:var(--grey);margin-top:3px;line-height:1.6}
.steps{counter-reset:s;list-style:none;padding-left:0;margin:14px 0}
.steps li{counter-increment:s;position:relative;padding-left:36px;margin:0 0 12px;
  font-size:14.4px;line-height:1.85;color:var(--ink2)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:23px;height:23px;
  border-radius:50%;background:var(--blue-bg);color:var(--blue);font-size:12.4px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.steps li b{color:var(--navy)}
.rel{list-style:none;padding-left:0;margin:14px 0}
.rel li{margin:0 0 9px;padding-left:16px;position:relative;font-size:14.2px;line-height:1.7}
.rel li::before{content:"→";position:absolute;left:0;color:var(--blue);font-size:13px}
@media (max-width:600px){
  .tpanel{padding:18px 16px}
  .tgrid{grid-template-columns:1fr}
  .tk .kpi b{font-size:19px}
}

/* 工具长文本输出的「要点清单」 */
.tl-list{margin:18px 0 0;border-top:1px solid var(--line2)}
.tl-i{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line2);align-items:start}
.tl-i:last-child{border-bottom:none}
.tl-k{font-size:13.4px;font-weight:600;color:var(--navy);line-height:1.7}
.tl-v{font-size:13.8px;line-height:1.85;color:var(--ink2);min-width:0}
.tl-v b{color:var(--ink)}
@media (max-width:620px){
  .tl-i{grid-template-columns:1fr;gap:5px}
}

/* ==================== 主导航的二级菜单（鼠标经过展开） ==================== */
.nv{position:relative;display:flex;align-items:center}
/* 悬停缓冲区：补齐一级项与面板之间的空隙，避免鼠标下移时菜单收起 */
.nv::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px}
.nv-t{display:inline-flex;align-items:center;gap:6px}
.nv-c{width:0;height:0;flex:none;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4.5px solid rgba(255,255,255,.72);transition:transform .18s ease}
.nv:hover .nv-c,.nv:focus-within .nv-c{transform:rotate(180deg)}
.nv-p{position:absolute;top:calc(100% + 12px);left:50%;
  transform:translateX(-50%) translateY(-5px);
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 18px 48px rgba(16,49,79,.20),0 2px 8px rgba(16,49,79,.08);
  padding:17px 20px 13px;z-index:60;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .17s ease,transform .17s ease,visibility .17s}
.nv:hover .nv-p,.nv:focus-within .nv-p{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0)}
.nv-grid{display:flex;gap:26px}
.nv-col{display:flex;flex-direction:column;gap:15px;min-width:158px}
.nv-g h6{margin:0 0 5px;font-size:11.8px;font-weight:700;color:var(--navy);
  letter-spacing:.4px;opacity:.72}
.site-nav .nv-p a{display:block;padding:5.5px 9px;margin:0 -9px;border-radius:6px;
  font-size:13.8px;line-height:1.5;color:var(--ink2);white-space:nowrap;background:transparent}
.site-nav .nv-p a:hover{background:var(--blue-bg);color:var(--blue);text-decoration:none}
.site-nav .nv-p .nv-all{display:block;margin:13px -20px 0;padding:11px 20px 4px;
  border-top:1px solid var(--line2);font-size:13.2px;color:var(--blue)}
.site-nav .nv-p .nv-all:hover{background:transparent;color:var(--blue-d);text-decoration:underline}
@media (max-width:900px){
  .nv-p{left:auto;right:0;transform:translateY(-5px)}
  .nv:hover .nv-p,.nv:focus-within .nv-p{transform:translateY(0)}
  .nv-grid{gap:18px}
  .nv-col{min-width:0}
}


/* ==================== 移动端导航：单行横向滚动 ==================== */
/* 390px 下 10 个一级项折成 3 行会让 header 占到首屏的 23%。
   改成单行横滑，所有入口仍可见——对内容站来说「不隐藏任何入口」优先于「菜单更整齐」。 */
/* 断点从 600px 提到 1100px：601—1024px 之间导航会折成两行，头部高达 143—147px
   （几乎占满平板的四分之一屏），而 1024px 以上只需 99px。
   统一成「单行 + 横滑」，各断点的头部高度就一致了（83px），且入口一个不少。 */
@media (max-width:1100px){
  .site-head .inner{gap:10px;min-height:52px;padding-left:14px;padding-right:14px}
  .site-nav{width:100%;margin-left:0;padding:0 0 8px;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;scroll-snap-type:x proximity}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav>a,.site-nav>.soon,.site-nav>.nv{flex:none;scroll-snap-align:start}
  /* 主导航项的点击高度提到 44px：窄屏下导航是横滑的，手指点在 36px 高的目标上
     容易误触相邻项（尤其「产品库」与「在线工具」相邻）。44px 是移动端通行的
     舒适尺寸下限。用 inline-flex 居中，字号与内边距不变，只把可点区域加高。 */
  .site-nav a,.site-nav .soon{font-size:13.4px;padding:6px 11px;white-space:nowrap;
    display:inline-flex;align-items:center;min-height:44px}
  .site-nav .nv-t{padding:6px 11px}
  /* 可横滑时在右缘做渐隐，提示「右边还有内容」。
     这个 class 由 NAV_JS 按实际是否溢出添加——不判断的话，
     在放得下的宽度上会把最后一项也一起淡化，反而像坏掉了。 */
  .site-nav.nav-more{
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .site-nav .nv{align-items:stretch}
  /* 二级面板改 fixed：不随 .nv 的位置跑，彻底避免在窄屏左侧跑出视口。
     top 由内联 JS 按头部实际高度写入（--nv-top），因为各断点下头部高度不同。 */
  .nv-p{position:fixed;left:10px;right:10px;top:var(--nv-top,0px);
    transform:translateY(-6px);max-height:min(72vh,480px);overflow-y:auto;
    padding:16px 18px 12px}
  .nv:hover .nv-p,.nv:focus-within .nv-p{transform:translateY(0)}
  .nv-grid{flex-direction:column;gap:14px}
  .nv-col{min-width:0}
  .site-nav .nv-p a{white-space:normal;padding:7px 9px}
}

/* Esc 关闭后强制收起：写在 hover 规则之后，同优先级下按源码顺序生效 */
.nv.nv-closed .nv-p{opacity:0;visibility:hidden;pointer-events:none}


/* ==================== 可访问性 ==================== */
/* 只给读屏用的文本：表格 caption 等。用 clip 而非 display:none——
   display:none 的内容读屏同样读不到，等于没加。 */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* 跳到正文：默认不可见，键盘聚焦时出现在左上角 */
.skip{position:absolute;left:8px;top:-64px;z-index:200;padding:10px 18px;
  background:#fff;color:var(--navy);border:1px solid var(--line);
  border-radius:0 0 var(--radius-s) var(--radius-s);font-size:14px;font-weight:600;
  box-shadow:0 6px 20px rgba(16,49,79,.2);transition:top .14s ease}
.skip:focus{top:0;text-decoration:none;outline:2px solid var(--blue);outline-offset:1px}


/* ==================== 图表在窄屏的可读性 ==================== */
/* 63 张图表多是 1800—3100 px 宽（savefig.dpi=200），自然显示宽度约 650—1120 CSS px。
   手机容器只有约 360 px，直接把图缩到三成，9.5pt 的坐标标签会缩成 4—5 px、读不出来。
   这里让图表容器横向滚动、图保持在自然宽度（min-width 由构建时按 PNG 尺寸算出并内联），
   读者左右滑动即可看完，字号与桌面端一致。 */
figure.figchart{margin:24px 0}
.figscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  text-align:center;padding-bottom:4px}
.figscroll img{max-width:100%;height:auto}
.figscroll::-webkit-scrollbar{height:8px}
.figscroll::-webkit-scrollbar-thumb{background:#c9d2db;border-radius:4px}
.figscroll::-webkit-scrollbar-track{background:transparent}
@media (max-width:900px){
  /* 只在窄屏提示可滑动：桌面端图表本来就放得下，提示是噪音 */
  figure.figchart::before{content:"图表较宽，可左右滑动查看完整内容";
    display:block;font-size:12.4px;color:var(--grey);text-align:center;margin-bottom:9px}
  figure.figchart figcaption{text-align:left}
}


/* ==================== 表单在移动端的字号 ==================== */
/* iOS Safari 对 font-size < 16px 的输入框会在聚焦时自动放大整个页面，聚焦结束也不缩回，
   是表单页最常见的移动端不适。窄屏下把输入类控件的字号提到 16px 即可避免。 */
@media (max-width:600px){
  input, select, textarea, .tf input[type=number], .tf select{font-size:16px!important}
  /* 顺带把窄屏下的表单间距收紧，减少无谓的滚动（工具页控件较多） */
  .tgrid{gap:14px 16px}
  .tpanel{padding:18px 15px}
}

/* ==================== 产品库的机型筛选表 ==================== */
/* 384 行的长表：行高收紧一档，便于在筛选中浏览；表头在表内吸顶，
   滚动时仍知道每列是什么（表格本身在 .table-scroll 里横向滚动）。 */
#pf-tbl{font-size:13.2px}
#pf-tbl th,#pf-tbl td{padding:7px 11px}
#pf-tbl thead th{position:sticky;top:0;z-index:2;background:#fff;
  box-shadow:inset 0 -1px 0 var(--line)}
#pf-tbl tbody tr:nth-child(even) td{background:#fbfcfd}
#pf-tbl tbody tr:hover td{background:var(--blue-bg)}
/* 搜索框与数值框同款样式（.tf 里原本只覆盖了 number 与 select） */
.tf input[type=search]{width:100%;box-sizing:border-box;padding:9px 11px;
  font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;
  border:1px solid #cfd6dd;border-radius:var(--radius-s);
  transition:border-color .15s,box-shadow .15s}
.tf input[type=search]:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(24,95,165,.12)}
.tf input[type=search]::-webkit-search-cancel-button{cursor:pointer}

/* ==================== 产品库的机型筛选表 ==================== */
/* 384 行的长表：行高收紧一档，便于在筛选中浏览；表头在表内吸顶，
   滚动时仍知道每列是什么（表格本身在 .table-scroll 里横向滚动）。 */
#pf-tbl{font-size:13.2px}
#pf-tbl th,#pf-tbl td{padding:7px 11px}
#pf-tbl thead th{position:sticky;top:0;z-index:2;background:#fff;
  box-shadow:inset 0 -1px 0 var(--line)}
#pf-tbl tbody tr:nth-child(even) td{background:#fbfcfd}
#pf-tbl tbody tr:hover td{background:var(--blue-bg)}
/* 搜索框与数值框同款样式（.tf 里原本只覆盖了 number 与 select） */
.tf input[type=search]{width:100%;box-sizing:border-box;padding:9px 11px;
  font-size:14.5px;font-family:inherit;color:var(--ink);background:#fff;
  border:1px solid #cfd6dd;border-radius:var(--radius-s);
  transition:border-color .15s,box-shadow .15s}
.tf input[type=search]:focus{outline:none;border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(24,95,165,.12)}
.tf input[type=search]::-webkit-search-cancel-button{cursor:pointer}


/* 参数来源里的长网址在 320px 下溢出（Danby 页实测 +18px）。
   来源串是「中文说明 + 英文域名 + 路径」的混合内容，浏览器默认只在空格处断行，
   而域名与路径里没有空格。允许在任意字符处断行即可——这类文本本来就无需保持完整词形。 */
.src,.src-l{overflow-wrap:anywhere;word-break:break-word}
/* 表格与卡片里的长标识符同理（型号、URL、公式） */
td,.tcard,.tl-v{overflow-wrap:anywhere}

/* 指标来源等级标签（审查 5.1 的二维来源管理：来源 × 取得方式） */
.grade{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11.6px;
  line-height:1.75;border:1px solid transparent;cursor:help;white-space:nowrap}
.g-a{background:#e8f4ea;color:#22613a;border-color:#c7e3ce}
.g-b{background:#fdf3e3;color:#8a5a14;border-color:#f0dcb8}
.g-e{background:#f1f3f5;color:#5c6672;border-color:#dde2e7}
.g-none{background:transparent;color:var(--grey)}

/* 指标来源等级标签（审查 5.1 的二维来源管理：来源 × 取得方式） */
.grade{display:inline-block;padding:1px 7px;border-radius:999px;font-size:11.6px;
  line-height:1.75;border:1px solid transparent;cursor:help;white-space:nowrap}
.g-a{background:#e8f4ea;color:#22613a;border-color:#c7e3ce}
.g-b{background:#fdf3e3;color:#8a5a14;border-color:#f0dcb8}
.g-e{background:#f1f3f5;color:#5c6672;border-color:#dde2e7}
.g-none{background:transparent;color:var(--grey)}

/* 「铭牌值」档：来源直接给出、非换算而来（如功率、水箱本身） */
.g-c{background:#eef3fb;color:#2f4a72;border-color:#d5e1f4}

/* ==================== 工具表单：桌面两列 + 单位紧贴 ==================== */
/* 原为 auto-fit/minmax(238px)：1440px 下会排成 4 列，长复选标签与下拉文本错位、
   下拉内容被截断。改为固定两列，控件宽度稳定、标签不易折断。 */
@media (min-width:760px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
}
/* 数值控件 + 单位后缀：单位紧贴输入框右侧，填数时眼睛不用来回找 */
.tin{position:relative;display:flex;align-items:center}
.tin input[type=number]{padding-right:52px}
.tin-u{position:absolute;right:12px;font-size:12.8px;color:var(--grey);
  pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 区间类控件（滑块）也把单位对齐到同一位置 */
.trange output{min-width:56px}

/* ==================== 工具表单：桌面两列 + 单位紧贴 ==================== */
/* 原为 auto-fit/minmax(238px)：1440px 下会排成 4 列，长复选标签与下拉文本错位、
   下拉内容被截断。改为固定两列，控件宽度稳定、标签不易折断。 */
@media (min-width:760px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
}
/* 数值控件 + 单位后缀：单位紧贴输入框右侧，填数时眼睛不用来回找 */
.tin{position:relative;display:flex;align-items:center}
.tin input[type=number]{padding-right:52px}
.tin-u{position:absolute;right:12px;font-size:12.8px;color:var(--grey);
  pointer-events:none;white-space:nowrap;font-variant-numeric:tabular-nums}
/* 区间类控件（滑块）也把单位对齐到同一位置 */
.trange output{min-width:56px}

/* 勾选组：整行占位、组内两列并排（既不错位也不留大片空白） */
/* 组内列数自适应：3 项时排成 3 列（而不是固定 2 列多占一行），
   这样「组整行」与「版面紧凑」可以同时成立。间距与留白都压到最小，
   避免勾选组比它替换掉的半栏布局还高。 */
.tcb-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:8px 24px;width:100%;padding:10px 13px;background:#fafbfc;
  border:1px solid var(--line2);border-radius:var(--radius-s)}
.tcb-item{display:block;min-width:0}
.tcb-item .th{margin-top:4px;display:block}
@media (max-width:760px){.tcb-group{grid-template-columns:1fr}}

/* 勾选组：整行占位、组内两列并排（既不错位也不留大片空白） */
/* 组内列数自适应：3 项时排成 3 列（而不是固定 2 列多占一行），
   这样「组整行」与「版面紧凑」可以同时成立。间距与留白都压到最小，
   避免勾选组比它替换掉的半栏布局还高。 */
.tcb-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:8px 24px;width:100%;padding:10px 13px;background:#fafbfc;
  border:1px solid var(--line2);border-radius:var(--radius-s)}
.tcb-item{display:block;min-width:0}
.tcb-item .th{margin-top:4px;display:block}
@media (max-width:760px){.tcb-group{grid-template-columns:1fr}}

/* ==================== 首页任务入口 ==================== */
/* 报告指出：首页首屏以站点介绍、榜单 CTA 与行业数字为主，
   而读者来这一站是为了办具体的事（买多大／买哪台／哪个牌子／值不值）。
   把任务入口提到最前，从「介绍自己」改成「先解决问题」。 */
.tasks{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px;margin:18px 0 6px}
a.task{display:block;padding:16px 18px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);position:relative;
  padding-left:56px;transition:border-color .15s,box-shadow .15s;text-decoration:none}
a.task:hover{border-color:var(--blue);box-shadow:0 6px 20px rgba(16,49,79,.12);text-decoration:none}
a.task .task-n{position:absolute;left:16px;top:16px;width:26px;height:26px;border-radius:50%;
  background:var(--blue-bg);color:var(--blue);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
a.task b{display:block;font-size:16px;color:var(--navy);margin-bottom:5px}
a.task .task-d{display:block;font-size:13.4px;line-height:1.75;color:var(--ink2)}

/* ==================== 长表格：局部滚动与吸顶表头 ==================== */
/* 横滚提示：仅在 JS 判定确实溢出时（.scrollable）显示。
   用右缘渐隐而不是文字，是因为表格上方常已有标题，再加一行提示会显得吵；
   渐隐本身是通行的「右侧还有内容」信号。 */
.table-scroll.scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.figscroll.scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
/* 窄屏再给一行文字提示——手机上「渐隐」不如一句话直白 */
@media (max-width:700px){
  .table-scroll.scrollable{position:relative}
  .table-scroll.scrollable::before{
    content:"表格较宽，可左右滑动查看完整内容";
    display:block;font-size:12.2px;color:var(--grey);text-align:center;
    padding:8px 0 2px}
}
/* 长表限高 + 内部滚动：这样 thead 的 sticky 才真正生效
   （只给 overflow-x 的容器，表头会相对容器定位、永远不动，等于没做） */
.table-tall{max-height:min(78vh,760px);overflow:auto;overscroll-behavior:contain}
.table-tall table thead th{position:sticky;top:0;z-index:2;background:#fff;
  box-shadow:inset 0 -1px 0 var(--line)}
/* 首列也吸住：读横向滚动后的长表时，没有行标识就只能靠数行 */
.table-tall table tbody td:first-child{position:sticky;left:0;z-index:1;background:#fff}
.table-tall table tbody tr:nth-child(even) td:first-child{background:#fbfcfd}
.table-tall table tbody tr:hover td:first-child{background:var(--blue-bg)}
.table-tall table thead th:first-child{z-index:3}

/* ==================== 长表格：局部滚动与吸顶表头 ==================== */
/* 横滚提示：仅在 JS 判定确实溢出时（.scrollable）显示。
   用右缘渐隐而不是文字，是因为表格上方常已有标题，再加一行提示会显得吵；
   渐隐本身是通行的「右侧还有内容」信号。 */
.table-scroll.scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.figscroll.scrollable{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
/* 窄屏再给一行文字提示——手机上「渐隐」不如一句话直白 */
@media (max-width:700px){
  .table-scroll.scrollable{position:relative}
  .table-scroll.scrollable::before{
    content:"表格较宽，可左右滑动查看完整内容";
    display:block;font-size:12.2px;color:var(--grey);text-align:center;
    padding:8px 0 2px}
}
/* 长表限高 + 内部滚动：这样 thead 的 sticky 才真正生效
   （只给 overflow-x 的容器，表头会相对容器定位、永远不动，等于没做） */
.table-tall{max-height:min(78vh,760px);overflow:auto;overscroll-behavior:contain}
.table-tall table thead th{position:sticky;top:0;z-index:2;background:#fff;
  box-shadow:inset 0 -1px 0 var(--line)}
/* 首列也吸住：读横向滚动后的长表时，没有行标识就只能靠数行 */
.table-tall table tbody td:first-child{position:sticky;left:0;z-index:1;background:#fff}
.table-tall table tbody tr:nth-child(even) td:first-child{background:#fbfcfd}
.table-tall table tbody tr:hover td:first-child{background:var(--blue-bg)}
.table-tall table thead th:first-child{z-index:3}

/* 「一行结论」提示框：用于把关键提醒压缩到一行，避免占掉手机首屏 */
.box.one-line{margin:14px 0 18px;padding:12px 16px}
.box.one-line p{margin:0;font-size:13.9px;line-height:1.8}

/* 「一行结论」提示框：用于把关键提醒压缩到一行，避免占掉手机首屏 */
.box.one-line{margin:14px 0 18px;padding:12px 16px}
.box.one-line p{margin:0;font-size:13.9px;line-height:1.8}

/* 校验未通过的字段：与提示条同一套红色语义，让「哪一项错了」一眼可见 */
.t-err,.t-err:focus{border-color:var(--red)!important;
  box-shadow:0 0 0 3px rgba(190,60,60,.14)!important;background:#fffafa!important}
.tcb-item .t-err{outline:2px solid var(--red);outline-offset:2px}

/* 校验未通过的字段：与提示条同一套红色语义，让「哪一项错了」一眼可见 */
.t-err,.t-err:focus{border-color:var(--red)!important;
  box-shadow:0 0 0 3px rgba(190,60,60,.14)!important;background:#fffafa!important}
.tcb-item .t-err{outline:2px solid var(--red);outline-offset:2px}