/* ==========================================================================
   Clash Verge官网 · 客户端对比页专属样式(compare.css)
   依赖 base.css / components.css 的设计令牌,不散落硬编码颜色
   ========================================================================== */

/* ============ 对比总表:首列冻结,窄屏横滑时保留客户端名 ============ */
.cmp-scroll .data-table{min-width:820px}
.cmp-scroll .data-table th:first-child,
.cmp-scroll .data-table td:first-child{
  position:sticky;left:0;z-index:2;
  box-shadow:1px 0 0 var(--border-soft);
}
.cmp-scroll .data-table thead th:first-child{z-index:3}
.cmp-scroll .data-table td:first-child{background:var(--bg)}
.cmp-note{
  margin-top:16px;
  display:flex;align-items:flex-start;gap:10px;
  font-size:13px;line-height:1.85;color:var(--text-dim);
}
.cmp-note::before{
  content:"";width:6px;height:6px;flex:none;margin-top:8px;
  border:1px solid var(--border-strong);
}

/* ============ 逐款点评 ============ */
.cmp-list{display:flex;flex-direction:column;gap:16px}
.cmp-item{
  min-width:0;
  background:var(--bg-panel);border:1px solid var(--border-soft);
  padding:26px 28px;
  transition:border-color .2s ease;
}
.cmp-item:hover{border-color:var(--border-strong)}
.cmp-item-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cmp-item-name{font-size:19px;font-weight:700;color:var(--text)}
.cmp-item-os{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  color:var(--text-muted);
}
.cmp-item-head .badge{margin-left:auto}
.cmp-item-body{margin-top:12px;color:var(--text-muted);font-size:14px;line-height:1.9}
.cmp-item-body p+p{margin-top:.8em}
.cmp-item-body strong{color:var(--text);font-weight:600}
.cmp-item-body a{
  color:var(--text);
  text-decoration:underline;
  text-decoration-color:var(--border-strong);
  text-underline-offset:3px;
  transition:color .2s ease,text-decoration-color .2s ease;
}
.cmp-item-body a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.cmp-item-meta{
  margin-top:16px;padding-top:12px;border-top:1px solid var(--border-soft);
  display:flex;flex-wrap:wrap;gap:6px 18px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:var(--text-dim);
}

/* ============ 场景选型:callout 进网格后去掉默认外边距 ============ */
.cmp-scenes .callout{margin:0}

/* ============ 结论面板 ============ */
.cmp-verdict{
  border:1px solid var(--border);border-top:2px solid var(--accent);
  background:var(--bg-panel);
  padding:32px 30px;
}
.cmp-verdict-title{font-size:20px;font-weight:750;color:var(--text);margin-bottom:12px}
.cmp-verdict p{color:var(--text-muted);font-size:14px;line-height:1.9;max-width:760px}
.cmp-verdict p+p{margin-top:.8em}
.cmp-verdict strong{color:var(--text);font-weight:600}
.cmp-verdict-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

/* ============ 窄屏微调 ============ */
@media (max-width:640px){
  .cmp-item{padding:20px}
  .cmp-item-head .badge{margin-left:0}
  .cmp-verdict{padding:24px 20px}
}