.changelog-container { max-width: 800px; margin: 0 auto; padding: 30px 20px 60px; }
.changelog-header { margin-bottom: 36px; }
.changelog-header h1 { font-size: 26px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.changelog-header p { font-size: 14px; color: var(--sub); }
.changelog-timeline { position: relative; padding-left: 24px; }
.changelog-timeline::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--blue), #e2e8f0); border-radius: 1px; }
.changelog-day { margin-bottom: 32px; }
.changelog-date { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; position: relative; }
.date-dot { width: 12px; height: 12px; background: var(--blue); border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 2px var(--blue); position: absolute; left: -24px; flex-shrink: 0; }
.date-text { font-size: 15px; font-weight: 700; color: var(--text); }
.changelog-card { background: var(--card, #fff); border: 1px solid var(--line2, #e8edf3); border-radius: 10px; padding: 18px 22px; margin-bottom: 12px; transition: box-shadow 0.2s; }
.changelog-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.changelog-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.changelog-card-head h3 { font-size: 15px; font-weight: 600; color: var(--text); margin: 0; }
.changelog-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.changelog-card-body { font-size: 14px; line-height: 1.8; color: var(--sub, #475569); }
.changelog-empty { text-align: center; padding: 60px 20px; color: var(--sub); font-size: 15px; }