/* ==========================================================================

   对比表格（双列对比强化）

   ========================================================================== */



.skin-5 .comparison-table {

  margin: var(--rhythm-loose) 0;

  border: 2px solid var(--color-border);

  border-radius: var(--radius-lg);

  overflow: hidden;

  font-size: var(--text-sm);

}



.skin-5 .comparison-table th {

  background-color: var(--skin-accent-light);

  color: var(--skin-accent-dark);

  font-weight: var(--font-bold);

  padding: var(--space-4);

  text-align: left;

  font-size: var(--text-sm);

}



.skin-5 .comparison-table td {

  padding: var(--space-3) var(--space-4);

  border-top: 1px solid var(--color-border);

  color: var(--color-text-secondary);

  vertical-align: top;

}



.skin-5 .comparison-table tbody tr:hover {

  background-color: var(--color-neutral-50);

}



.skin-5 .comparison-table .winner-cell {

  background-color: var(--skin-accent-light);

  color: var(--skin-accent-dark);

  font-weight: var(--font-bold);

}



.skin-5 .comparison-table .winner-cell::before {

  content: '🏆 ';

}



/* ==========================================================================

   决策辅助卡

   ========================================================================== */



.skin-5 .decision-guide {

  margin: var(--rhythm-loose) 0;

  padding: var(--rhythm-normal);

  background: linear-gradient(135deg,

    var(--color-warning-alpha-10, hsl(40, 90%, 96%)),

    var(--color-primary-alpha-10));

  border-radius: var(--radius-lg);

  border: 1px solid var(--skin-accent);

}



.skin-5 .decision-guide h2 {

  margin-top: 0;

  margin-bottom: var(--rhythm-normal);

  color: var(--skin-accent-dark);

  font-size: var(--text-xl);

}



.skin-5 .decision-guide h2::before {

  content: '🧭 ';

}



.skin-5 .decision-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-4);

  margin-bottom: var(--space-4);

}



.skin-5 .decision-row:last-child {

  margin-bottom: 0;

}



.skin-5 .decision-option {

  padding: var(--space-4);

  background-color: var(--color-surface);

  border-radius: var(--radius-md);

  border: 1px solid var(--color-border);

}



.skin-5 .decision-option-label {

  font-size: var(--text-xs);

  font-weight: var(--font-bold);

  text-transform: uppercase;

  letter-spacing: var(--tracking-wider);

  color: var(--color-text-tertiary);

  margin-bottom: var(--space-2);

}



.skin-5 .decision-option-text {

  font-size: var(--text-base);

  color: var(--color-text-primary);

  line-height: var(--leading-snug);

}



.skin-5 .decision-option-text strong {

  color: var(--skin-accent-dark);

}



/* ==========================================================================

   对比列表（双列布局）

   ========================================================================== */



.skin-5 .comparison-list {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-4);

  margin: var(--rhythm-loose) 0;

}



.skin-5 .comparison-side {

  padding: var(--space-5);

  background-color: var(--color-surface);

  border: 2px solid var(--color-border);

  border-radius: var(--radius-lg);

  transition: all var(--duration-normal) var(--ease-out);

}



.skin-5 .comparison-side:hover {

  border-color: var(--skin-accent);

  box-shadow: var(--shadow-md);

}



.skin-5 .comparison-side-winner {

  border-color: var(--skin-accent);

  background: linear-gradient(135deg,

    var(--color-warning-alpha-10, hsl(40, 90%, 96%)),

    var(--color-surface));

  position: relative;

}



.skin-5 .comparison-side-winner::before {

  content: '⭐ 更好';

  position: absolute;

  top: -12px;

  right: var(--space-4);

  padding: var(--space-1) var(--space-3);

  background-color: var(--skin-accent);

  color: hsl(0, 0%, 100%);

  font-size: var(--text-xs);

  font-weight: var(--font-bold);

  border-radius: var(--radius-full);

  white-space: nowrap;

}



.skin-5 .comparison-side-name {

  font-size: var(--text-xl);

  font-weight: var(--font-bold);

  color: var(--color-text-primary);

  margin-bottom: var(--space-3);

  padding-bottom: var(--space-2);

  border-bottom: 2px solid var(--skin-accent-light);

}



.skin-5 .comparison-side-list {

  list-style: none;

  padding: 0;

  margin: 0;

}



.skin-5 .comparison-side-list li {

  padding: var(--space-2) 0;

  padding-left: var(--space-5);

  position: relative;

  font-size: var(--text-sm);

  color: var(--color-text-secondary);

  line-height: var(--leading-snug);

  border-bottom: 1px solid var(--color-border);

}



.skin-5 .comparison-side-list li:last-child {

  border-bottom: none;

}



.skin-5 .comparison-side-list li::before {

  content: '•';

  position: absolute;

  left: var(--space-2);

  color: var(--skin-accent);

  font-weight: var(--font-bold);

}



/* ==========================================================================

   最终推荐（Verdict）

   ========================================================================== */



.skin-5 .final-verdict {

  margin: var(--rhythm-loose) 0;

  padding: var(--rhythm-normal);

  background-color: var(--skin-accent);

  color: hsl(0, 0%, 100%);

  border-radius: var(--radius-xl);

  box-shadow: var(--shadow-lg);

  text-align: center;

}



.skin-5 .final-verdict h2 {

  color: hsl(0, 0%, 100%);

  margin-top: 0;

  margin-bottom: var(--rhythm-normal);

  font-size: var(--text-2xl);

}



.skin-5 .final-verdict h2::before {

  content: '🏆 ';

}



.skin-5 .final-verdict-text {

  font-size: var(--text-lg);

  line-height: var(--leading-relaxed);

  margin-bottom: var(--rhythm-normal);

  max-width: 700px;

  margin-left: auto;

  margin-right: auto;

}



.skin-5 .final-verdict-cta {

  display: inline-flex;

  align-items: center;

  gap: var(--space-2);

  padding: var(--space-4) var(--space-6);

  background-color: hsl(0, 0%, 100%);

  color: var(--skin-accent-dark);

  font-size: var(--text-base);

  font-weight: var(--font-bold);

  border-radius: var(--radius-md);

  text-decoration: none;

  box-shadow: var(--shadow-md);

  transition: all var(--duration-normal) var(--ease-out);

}



.skin-5 .final-verdict-cta:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-xl);

  text-decoration: none;

  color: var(--skin-accent-dark);

}



.skin-5 .final-verdict-cta::after {

  content: ' →';

}



/* ==========================================================================

   L3深度探索入口

   ========================================================================== */



.skin-5 .exploration-hook {

  margin: var(--rhythm-loose) 0;

}



/* ==========================================================================

   FAQ 区

   ========================================================================== */



.skin-5 .faq-section {

  margin-top: var(--rhythm-loose);

}



/* ==========================================================================

   移动端适配

   ========================================================================== */



@media (max-width: 768px) {

  .skin-5 .comparison-header h1 { font-size: var(--text-3xl); }

  .skin-5 .versus-section {

    grid-template-columns: 1fr;

    gap: var(--space-3);

  }

  .skin-5 .versus-divider {

    transform: rotate(90deg);

    padding: var(--space-3) 0;

  }

  .skin-5 .comparison-list {

    grid-template-columns: 1fr;

  }

  .skin-5 .decision-row {

    grid-template-columns: 1fr;

  }

  .skin-5 .final-verdict-text {

    font-size: var(--text-base);

  }

  .skin-5 .final-verdict-cta {

    width: 80%;

    min-width: 80%;

    margin-left: auto;

    margin-right: auto;

    justify-content: center;

  }

  .skin-5 .comparison-table {

    display: block;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }

}



@media (prefers-reduced-motion: reduce) {

  .skin-5 .comparison-side:hover,

  .skin-5 .final-verdict-cta:hover {

    transform: none;

  }

}