/* ===========================
   Timeline
   =========================== */
.timeline { position: relative; padding-left: 30px; margin: 30px 0; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent-blue), var(--accent-gold));
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  margin-bottom: 24px;
  padding: 16px 20px;
  background: var(--bg-card);
  border-radius: 8px;
  border-left: 3px solid transparent;
  transition: background 0.3s;
}
.timeline-item:hover { border-left-color: var(--accent); }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -26px; top: 22px;
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  border: 3px solid var(--bg-body);
}
.timeline-item .year { font-weight: 700; color: var(--accent-blue); font-size: 0.9rem; }
.timeline-item .event { color: var(--text-color); margin-top: 4px; }

/* ===========================
   VS 对比栏
   =========================== */
.vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0;
}
.vs > div { padding: 20px; border-radius: 10px; }
.vs .l { background: rgba(233,69,96,.07); border: 1px solid rgba(233,69,96,.22); }
.vs .r { background: rgba(74,158,255,.07); border: 1px solid rgba(74,158,255,.22); }
.vs h4 { margin-bottom: 8px; }
.vs .l h4 { color: var(--accent); }
.vs .r h4 { color: var(--accent-blue); }
.vs li {
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 0.88rem;
  list-style: none;
  padding-left: 14px;
  position: relative;
}
.vs li::before { content: '▸'; position: absolute; left: 0; }