/* =============================================================
   智链导航 v3.0.0 · 更新日志时间线
   ============================================================= */
.changelog-page { max-width: 860px; margin: 0 auto; padding-bottom: 40px; }

.changelog-hero {
  padding: 28px 8px 20px;
}
.changelog-hero h1 { font-size: var(--sl-fs-2xl); font-weight: 800; color: var(--sl-text); }
.changelog-hero p { margin-top: 8px; font-size: var(--sl-fs-sm); color: var(--sl-muted); }

/* 时间线：左侧竖线 + 圆点，卡片靠右 */
.tl-timeline { position: relative; padding-left: 26px; }
.tl-timeline::before {
  content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 2px; background: var(--sl-border);
}
.tl-item { position: relative; padding-bottom: var(--sl-space-5); }
.tl-dot {
  position: absolute; left: -26px; top: 18px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--sl-card); border: 3px solid var(--sl-primary);
  box-shadow: 0 0 0 4px var(--sl-primary-soft);
}

.tl-card { padding: 16px 18px; }
.tl-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sl-space-2); margin-bottom: var(--sl-space-2); }
.tl-badge {
  font-size: var(--sl-fs-xs); font-weight: 700; padding: 2px 10px; border-radius: var(--sl-radius-pill);
}
.tl-badge-new { background: var(--sl-success-soft); color: var(--sl-success); }
.tl-badge-opt { background: var(--sl-primary-soft); color: var(--sl-primary); }
.tl-badge-fix { background: var(--sl-warning-soft); color: var(--sl-warning); }
.tl-badge-sec { background: var(--sl-danger-soft); color: var(--sl-danger); }
.tl-version { font-size: var(--sl-fs-md); font-weight: 700; color: var(--sl-text); }
.tl-date { font-size: var(--sl-fs-xs); color: var(--sl-muted); margin-left: auto; }

.tl-title { font-size: var(--sl-fs-lg); font-weight: 700; color: var(--sl-text); line-height: 1.4; }
.tl-summary { margin-top: var(--sl-space-2); font-size: var(--sl-fs-sm); color: var(--sl-muted); line-height: 1.8; white-space: pre-wrap; }

/* 手机端收紧 */
@media (max-width: 640px) {
  .tl-timeline { padding-left: 20px; }
  .tl-dot { left: -20px; width: 12px; height: 12px; border-width: 2px; }
  .tl-card { padding: 14px; }
  .tl-date { margin-left: 0; width: 100%; }
}