/* ============================================================
   Clash客户端 · compare.css
   选型对比页专属:首屏与决策速查 / 对比表 / 客户端点评卡 /
   场景建议与常见问题 / 结论区
   ============================================================ */

/* ---------- 1. 首屏 ---------- */
.cmp-hero{
  position:relative;
  overflow:hidden;
  padding-top:56px;
  padding-bottom:64px;
  background:var(--bg);
}
.cmp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hero-halo);
  pointer-events:none;
}
.cmp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:var(--grid-tex);
  background-size:52px 52px;
  -webkit-mask-image:var(--viz-mask);
  mask-image:var(--viz-mask);
  pointer-events:none;
}
.cmp-hero-inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,44fr) minmax(0,56fr);
  gap:48px;
  align-items:center;
}
.cmp-hero-inner > *{min-width:0}
.cmp-hero-copy{max-width:520px}
.cmp-title{margin-top:16px}
.cmp-chips{margin-top:24px}
.cmp-chip-a{transition:border-color .18s ease,color .18s ease}
.cmp-chip-a:hover{border-color:var(--stroke-accent);color:var(--text)}

/* 决策速查面板 */
.cmp-quick{
  border:1px solid var(--stroke-accent);
  border-radius:var(--r-l);
  background:var(--bg-panel);
  box-shadow:var(--shadow-soft),0 0 26px -8px var(--glow-cyan);
  overflow:hidden;
}
.cmp-quick-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 18px;
  border-bottom:1px solid var(--line-soft);
  background:var(--term-bar);
}
.cmp-quick-k{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
}
.cmp-quick-ep{
  margin-left:auto;
  max-width:100%;
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-dim);
  white-space:nowrap;
  text-overflow:ellipsis;
}
.cmp-quick-body{padding:4px 18px 14px}
.cmp-quick-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:16px;
  align-items:baseline;
  padding:12px 0;
  border-bottom:1px solid var(--line-soft);
}
.cmp-quick-row:last-child{border-bottom:0}
.cmp-quick-need{
  font-size:13.5px;
  line-height:1.6;
  color:var(--text-muted);
}
.cmp-quick-pick{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  overflow:hidden;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--cyan);
  white-space:nowrap;
  transition:color .18s ease;
}
.cmp-quick-pick:hover{color:var(--text)}
.cmp-quick-pick svg{width:12px;height:12px;flex:none}

/* ---------- 2. 对比表 ---------- */
.cmp-table-wrap{margin-top:26px}
.cmp-table{min-width:940px}
.cmp-table th:first-child,
.cmp-table td:first-child{
  position:sticky;
  left:0;
  z-index:1;
  background:var(--bg-panel-2);
  box-shadow:1px 0 0 var(--line-light);
}
.cmp-table td:first-child{
  font-weight:700;
  color:var(--ink);
}
.cmp-tlink{
  color:var(--accent-dark);
  font-weight:700;
  border-bottom:1px solid rgba(43,63,216,.35);
  transition:color .18s ease,border-color .18s ease;
}
.cmp-tlink:hover{color:var(--ink);border-color:var(--ink)}
.cmp-table .badge-rec{
  border-color:rgba(43,63,216,.35);
  background:rgba(43,63,216,.08);
  color:var(--accent-dark);
}
.cmp-note{
  margin-top:18px;
  font-size:13.5px;
  line-height:1.75;
}

/* ---------- 3. 客户端点评卡 ---------- */
.cmp-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:34px;
}
.cmp-cards > *{min-width:0}
.cmp-card{display:flex;flex-direction:column}
.cmp-card-lead{
  border-color:var(--stroke-cyan);
  background:linear-gradient(180deg,var(--glass-2) 0%,var(--glass) 100%);
}
.cmp-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}
.cmp-name{font-size:17px;color:var(--text)}
.cmp-facts{
  margin-top:7px;
  font-family:var(--font-mono);
  font-size:11.5px;
  line-height:1.7;
  color:var(--text-dim);
}
.cmp-text{
  margin-top:12px;
  margin-bottom:18px;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.cmp-foot{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--stroke-soft);
}
.cmp-foot-link{font-size:13.5px}

/* ---------- 4. 场景建议与常见问题 ---------- */
.cmp-scenes{margin-top:30px}
.cmp-scenes > .callout{margin:0}
.cmp-subhead{margin-top:56px}
.cmp-faq{margin-top:22px}

/* ---------- 5. 结论区 ---------- */
.cmp-verdict{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:center;
  margin-top:30px;
}
.cmp-verdict-main{min-width:0}
.cmp-verdict-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.18em;
  color:var(--success);
}
.cmp-verdict-name{
  margin-top:8px;
  font-size:clamp(20px,2vw,24px);
  color:var(--text);
}
.cmp-verdict-list{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.cmp-verdict-list li{
  position:relative;
  padding-left:20px;
  font-size:14.5px;
  line-height:1.72;
  color:var(--text-muted);
}
.cmp-verdict-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:6px;
  height:6px;
  border-radius:2px;
  background:var(--success);
  box-shadow:0 0 8px var(--glow-lime);
}
.cmp-verdict-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.cmp-verdict-note{
  margin-top:20px;
  font-size:13.5px;
  line-height:1.75;
  color:var(--text-muted);
}

/* ---------- 6. 响应式 ---------- */
@media (max-width:1080px){
  .cmp-hero-inner{grid-template-columns:1fr;gap:34px}
  .cmp-hero-copy{max-width:none}
  .cmp-verdict{grid-template-columns:1fr;gap:24px}
}
@media (max-width:900px){
  .cmp-cards{grid-template-columns:1fr}
}
@media (max-width:720px){
  .cmp-hero{padding-top:40px;padding-bottom:46px}
  .cmp-subhead{margin-top:40px}
}
@media (max-width:640px){
  .cmp-quick-row{grid-template-columns:1fr;gap:5px}
  .cmp-quick-ep{display:none}
  .cmp-quick-body{padding:2px 16px 12px}
}
@media (prefers-reduced-motion:reduce){
  .cmp-chip-a,.cmp-quick-pick,.cmp-tlink{transition:none}
}