/* ============================================================
   Clash下载站 · compare.css
   客户端对比页(which-client.html)专属样式
   全部引用 base.css 的 :root 令牌,不出现硬编码颜色。
   ============================================================ */

/* ---- 页首 ---- */
.cmp-hero{
  padding-bottom:12px;
}
.cmp-hero .lede{
  max-width:680px;
  margin-top:12px;
  font-size:14px;
}
.cmp-hero .chips{
  margin-top:20px;
}

/* ---- 分区说明行 ---- */
.cmp-note{
  font-size:13px;
  color:var(--text-muted);
  margin-top:6px;
  margin-bottom:18px;
}

/* ---- 对比总表 ---- */
.cmp-table{
  min-width:860px;
}
.cmp-table .st-name{
  white-space:nowrap;
}
.cmp-table .row-top td{
  background:var(--accent-tint);
}
.cmp-table .row-top .st-name{
  color:var(--accent);
}

/* ---- 逐个点评卡 ---- */
.rev-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.rev-grid>*{min-width:0}
.rev-card{
  display:flex;
  flex-direction:column;
  gap:11px;
  background:var(--bg-panel);
  border:1px solid var(--hairline);
  border-radius:var(--r-tile);
  box-shadow:var(--shadow-tile);
  padding:20px 22px;
}
.rev-card.is-pick{
  border:1.5px solid var(--accent);
  box-shadow:var(--shadow-tile-up);
}
.rev-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.rev-head h3{
  font-size:16px;
  font-weight:700;
}
.rev-card p{
  font-size:13.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.rev-card .spec-line{
  margin-top:auto;
}

/* ---- 场景建议内链 ---- */
#cmp-scenarios .callout a{
  color:var(--accent);
  border-bottom:1px solid var(--accent-tint);
}
#cmp-scenarios .callout a:hover{
  color:var(--accent-dark);
}
#cmp-scenarios .callout+.callout{
  margin-top:14px;
}

/* ---- 结论面板 ---- */
.verdict-panel{
  display:flex;
  flex-direction:column;
  gap:14px;
  background:var(--mica-strong);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid var(--mica-border);
  border-radius:var(--r-window);
  box-shadow:var(--shadow-tile-up);
  padding:28px 30px;
}
.verdict-panel p{
  font-size:14px;
  line-height:1.85;
  color:var(--text-muted);
  max-width:720px;
}
.verdict-panel p strong{
  color:var(--accent);
}
.verdict-panel .spec-line{
  align-self:flex-start;
  max-width:100%;
}
.verdict-panel .cta-row{
  margin-top:4px;
}

/* ---- 响应式 ---- */
@media (max-width:820px){
  .rev-grid{grid-template-columns:1fr}
}

@media (max-width:640px){
  .rev-card{padding:18px 18px}
  .verdict-panel{padding:22px 18px}
}