/* cms 软件测评 VS 页 */
.cms-vs-page { padding: 16px 0 24px; }

/* 雷达图评分对比 */
.cms-radar { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cms-radar-chart { flex: 0 0 300px; max-width: 100%; margin: 0 auto; }
.cms-radar-svg { width: 100%; height: auto; display: block; overflow: visible; }
.cms-radar-side { flex: 1; min-width: 240px; }
.cms-radar-legend { display: flex; gap: 18px; margin-bottom: 14px; }
.cms-radar-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #374151; }
.cms-radar-lg i { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.cms-radar-lg-a i { background: #1565c0; }
.cms-radar-lg-b i { background: #c62828; }
.cms-vs-subhd { font-size: 13px; font-weight: 700; color: #1f2937; margin: 0 0 12px; padding-left: 10px; border-left: 3px solid var(--cms-primary); }
.cms-radar-bars { display: flex; flex-direction: column; gap: 9px; }
.cms-rbar-row { display: grid; grid-template-columns: 26px 1fr auto 1fr 26px; align-items: center; gap: 6px; }
.cms-rbar-va, .cms-rbar-vb { font-size: 12px; font-weight: 800; }
.cms-rbar-va { text-align: right; color: #1565c0; }
.cms-rbar-vb { text-align: left; color: #c62828; }
.cms-rbar-barwrap { display: flex; height: 8px; background: #f1f3f5; border-radius: 4px; overflow: hidden; }
.cms-rbar-barwrap-a { justify-content: flex-end; }
.cms-rbar-a { height: 100%; background: linear-gradient(90deg, #42a5f5, #1565c0); border-radius: 4px; }
.cms-rbar-b { height: 100%; background: linear-gradient(90deg, #c62828, #ef5350); border-radius: 4px; }
.cms-rbar-dim { font-size: 11px; color: #6b7280; padding: 0 6px; white-space: nowrap; text-align: center; min-width: 40px; }
@media (max-width:639px) {
  .cms-radar { gap: 8px; }
  .cms-radar-chart { flex-basis: 260px; }
}
.cms-vs-wrap { display: flex; gap: 16px; align-items: flex-start; }
.cms-vs-main { flex: 1; min-width: 0; }
.cms-vs-side { width: 240px; flex-shrink: 0; display: none; }
@media (min-width:1024px) { .cms-vs-side { display: block; } }

.cms-vs-hero {
  background: #fff; border: 1px solid var(--cms-border);
  border-radius: var(--cms-radius); padding: 20px; margin-bottom: 12px;
}
.cms-vs-page-title { text-align: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--cms-border); }
.cms-vs-page-title h1 { font-size: 18px; font-weight: 900; color: #111; margin-bottom: 6px; }
@media (min-width:640px) { .cms-vs-page-title h1 { font-size: 22px; } }
.cms-vs-page-title span { font-size: 11px; color: var(--cms-muted); }
.cms-vs-row {
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
@media (min-width:640px) { .cms-vs-row { gap: 32px; } }
.cms-vs-card { flex: 1; min-width: 0; max-width: 200px; position: relative; text-align: center; }
.cms-vs-win { border: 2px solid var(--cms-primary); border-radius: var(--cms-radius-lg); padding: 12px 8px; background: var(--cms-primary-light); }
.cms-vs-win-badge {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  background: var(--cms-primary); color: #fff; font-size: 9px; font-weight: 700;
  padding: 2px 8px; border-radius: 4px; white-space: nowrap;
}
.cms-vs-ver { font-size: 10px; color: var(--cms-muted); margin: 4px 0; }
.cms-vs-score-num small { font-size: 14px; color: var(--cms-muted); font-weight: 400; }
.cms-vs-stars { color: var(--cms-amber); font-size: 11px; letter-spacing: -1px; margin: 4px 0; }
.cms-vs-mini { list-style: none; margin: 8px 0 0; padding: 0; font-size: 10px; color: var(--cms-muted); }
.cms-vs-mini li { display: flex; justify-content: space-between; padding: 2px 0; }
.cms-vs-mini em { color: var(--cms-text); font-style: normal; font-weight: 600; }
.cms-vs-mid {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--cms-primary), #c62828);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 4px 12px rgba(21,101,192,.3);
}
.cms-vs-mid strong { font-size: 16px; font-weight: 900; line-height: 1; }
.cms-vs-mid span { font-size: 8px; opacity: .85; margin-top: 2px; }
.cms-vs-dim-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin: 16px 0; padding: 12px; background: var(--cms-bg); border-radius: var(--cms-radius);
}
@media (min-width:640px) { .cms-vs-dim-grid { grid-template-columns: repeat(2, 1fr); } }
.cms-vs-dim span { font-size: 11px; color: var(--cms-muted); display: block; margin-bottom: 4px; }
.cms-vs-dim-bar { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: #e5e7eb; margin-bottom: 4px; }
.cms-vs-dim-bar i { display: block; height: 100%; }
.cms-vs-dim-bar i.a { background: var(--cms-primary); }
.cms-vs-dim-bar i.b { background: #c62828; }
.cms-vs-dim em { font-size: 10px; color: var(--cms-muted); font-style: normal; }
.cms-vs-card img, .cms-vs-ico {
  width: 56px; height: 56px; border-radius: var(--cms-radius-lg);
  margin: 0 auto 8px; display: block;
}
@media (min-width:640px) { .cms-vs-card img, .cms-vs-ico { width: 64px; height: 64px; } }
.cms-vs-ico {
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 18px; font-weight: 900;
}
.cms-vs-card h2 { font-size: 13px; font-weight: 900; color: #111; }
.cms-vs-card .cms-vs-score-num { font-size: 24px; font-weight: 900; margin-top: 8px; }
.cms-vs-card-a .cms-vs-score-num { color: var(--cms-primary); }
.cms-vs-card-b .cms-vs-score-num { color: #c62828; }
.cms-vs-verdict {
  margin-top: 16px; padding: 12px; border-radius: var(--cms-radius);
  background: var(--cms-primary-light); font-size: 12px; color: #374151;
}

.cms-vs-rec {
  background: linear-gradient(90deg, var(--cms-primary-light), #fce4ec);
  border: 1px solid rgba(21,101,192,.15); border-radius: var(--cms-radius);
  padding: 12px 16px; margin-bottom: 12px;
}
.cms-vs-rec-tag {
  display: inline-block; font-size: 10px; font-weight: 700;
  background: var(--cms-primary); color: #fff; padding: 2px 8px; border-radius: 4px; margin-bottom: 8px;
}
.cms-vs-rec-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cms-vs-rec-list a {
  font-size: 12px; background: #fff; padding: 4px 10px; border-radius: 4px;
  border: 1px solid rgba(21,101,192,.2);
}

.cms-vs-block {
  background: #fff; border: 1px solid var(--cms-border);
  border-radius: var(--cms-radius); overflow: hidden; margin-bottom: 12px;
}
.cms-vs-tabhd { display: flex; border-bottom: 1px solid var(--cms-border); }
.cms-vs-tabhd [data-tab] {
  flex: 1; text-align: center; padding: 12px; font-size: 12px; font-weight: 600;
  color: var(--cms-muted); cursor: pointer; border-bottom: 2px solid transparent;
}
.cms-vs-tabhd [data-tab].on { color: var(--cms-primary); border-bottom-color: var(--cms-primary); }
.cms-vs-bbd { padding: 16px; }
.cms-vs-bhd { padding: 12px 16px; font-size: 14px; font-weight: 700; border-bottom: 1px solid var(--cms-border); }
.cms-vs-content { font-size: 13px; line-height: 1.8; color: #374151; }
.cms-vs-content h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800; color: var(--cms-green-dark);
  margin: 22px 0 12px; padding: 0 0 9px; border-bottom: 1px dashed #c3e0c9;
}
.cms-vs-content h3::before {
  content: ""; flex: none; width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343a047' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cline x1='7' y1='9' x2='17' y2='9'/%3E%3Cline x1='7' y1='13' x2='13' y2='13'/%3E%3C/svg%3E") center/contain no-repeat;
}

.cms-vs-tablewrap { overflow-x: auto; }
.cms-vs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.cms-vs-table th, .cms-vs-table td { padding: 10px 12px; border: 1px solid #e5e7eb; text-align: left; }
.cms-vs-table thead th { background: var(--cms-bg); font-weight: 600; }
.cms-vs-table tbody tr:nth-child(even) { background: #fafafa; }
.cms-vs-table td:first-child { color: var(--cms-muted); width: 28%; }

.cms-vs-bars { padding: 16px; }
.cms-vs-bar-row { margin-bottom: 12px; }
.cms-vs-bar-label { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 4px; }
.cms-vs-bar-label .a { color: var(--cms-primary); font-weight: 600; }
.cms-vs-bar-label .b { color: #c62828; font-weight: 600; }
.cms-vs-bar-track { display: flex; gap: 4px; height: 8px; border-radius: 4px; overflow: hidden; background: #e5e7eb; }
.cms-vs-bar-a { background: var(--cms-primary); height: 100%; border-radius: 4px 0 0 4px; }
.cms-vs-bar-b { background: #c62828; height: 100%; border-radius: 0 4px 4px 0; }

.cms-vs-comments { display: flex; flex-direction: column; gap: 0; }
.cms-vs-comments .cms-cm-item { padding: 12px 0; }

[data-tabs] [data-panel] { display: none; }
[data-tabs] [data-panel].on { display: block; }