/* ==========================================================================
   Clash资源站 · compare.css — 选型指南(clients.html)页面专属样式
   页首选型总览 / 维度说明格 / 对比总表 / 逐款点评卡 / 场景建议 / 结论卡
   ========================================================================== */

/* ---------- 页首:选型总览 ---------- */
.pick-lead{
  padding-top:58px;
  padding-bottom:38px;
}
.pick-h1{
  font-size:clamp(28px,5.4vw,46px);
  line-height:1.22;
  margin-top:12px;
}
.pick-ul{
  border-bottom:6px solid var(--stamp);
  padding-bottom:2px;
}
.pick-intro{
  margin-top:16px;
  max-width:760px;
  font-size:15.5px;
  line-height:1.9;
  color:var(--ink-2);
}
.pick-stamp{
  margin-top:14px;
}
.pick-toc{
  margin-top:24px;
}

/* ---------- 维度说明格 ---------- */
.dim-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;
  margin-top:26px;
  margin-bottom:28px;
}
.dim-grid > *{min-width:0}
.dim-item{
  background:var(--paper);
  border:1px solid var(--thread);
  padding-top:12px;
  padding-bottom:13px;
  padding-left:14px;
  padding-right:14px;
}
.dim-item b{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:14.5px;
  margin-bottom:4px;
}
.dim-item span{
  display:block;
  font-size:13px;
  line-height:1.7;
  color:var(--ink-2);
}

/* ---------- 对比总表 ---------- */
.compare-table{
  min-width:940px;
}
.compare-table .ct-name{
  font-weight:700;
  white-space:nowrap;
}
.st-live{
  color:var(--ok);
  font-weight:600;
  white-space:nowrap;
}
.st-eol{
  color:var(--ink-2);
  white-space:nowrap;
}
.matrix-note{
  margin-top:14px;
  font-size:13px;
  line-height:1.8;
  color:var(--ink-2);
}
.matrix-note a{
  border-bottom:1px solid var(--oak);
}
.matrix-note a:hover{
  color:var(--stamp);
  border-bottom-color:var(--stamp);
}

/* ---------- 逐款点评卡 ---------- */
.review-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
  margin-top:28px;
}
.review-grid > *{min-width:0}
.rev-title-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.rev-name{
  font-size:19px;
  line-height:1.35;
}
.rev-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:10px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.03em;
  color:var(--ink-2);
}
.rev-meta > span{
  min-width:0;
  overflow-wrap:anywhere;
}
.rev-text{
  font-size:14.5px;
  line-height:1.9;
}
.rev-link{
  margin-top:12px;
  font-size:13.5px;
}
.rev-link a{
  font-weight:600;
  border-bottom:1px solid var(--oak);
  padding-bottom:1px;
}
.rev-link a:hover{
  color:var(--stamp);
  border-bottom-color:var(--stamp);
}

@media (max-width:820px){
  .review-grid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* ---------- 场景建议 ---------- */
.scene-stack{
  margin-top:24px;
}
.scene-stack .callout a{
  border-bottom:1px solid var(--oak);
}
.scene-stack .callout a:hover{
  color:var(--stamp);
  border-bottom-color:var(--stamp);
}

/* ---------- 结论卡 ---------- */
.verdict-card{
  margin-top:26px;
  text-align:center;
  padding-top:26px;
  padding-bottom:46px;
  padding-left:24px;
  padding-right:24px;
}
.verdict-title{
  font-size:22px;
  margin-bottom:10px;
}
.verdict-text{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
  font-size:14.5px;
  line-height:1.9;
}
.verdict-card .cta-row{
  margin-top:0;
}

@media (max-width:640px){
  .pick-lead{
    padding-top:42px;
    padding-bottom:30px;
  }
  .verdict-card{
    padding-left:16px;
    padding-right:16px;
  }
}