.page-wrap.narrow { max-width: 780px; }
.page-wrap.narrow .page-title { margin-bottom: 2.6rem; }

#changelogList:empty { min-height: 100vh; }
.changelog-entry { position: relative; margin-bottom: 1.1rem; padding: 1.7rem 1.9rem; border-radius: 22px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)); box-shadow: 0 20px 60px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.changelog-entry::before { content: ""; position: absolute; left: 0; top: 1.95rem; width: 3px; height: 22px; border-radius: 0 3px 3px 0; background: #f4f7ff; box-shadow: 0 0 12px rgba(170,195,255,0.9), 0 0 28px rgba(120,155,240,0.5); }
.changelog-entry-title { margin-bottom: 0.35rem; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.4px; }
.changelog-entry-date { margin-bottom: 1.1rem; color: var(--text-dim); font-size: 0.85rem; letter-spacing: 0.5px; }
.changelog-entry-body { color: #c9cfdd; font-size: 0.98rem; line-height: 1.7; }
.changelog-line { margin-bottom: 0.5rem; }
.changelog-line:last-child { margin-bottom: 0; }
.changelog-group { margin-bottom: 1.1rem; }
.changelog-group:last-child { margin-bottom: 0; }
.changelog-group-title { margin-bottom: 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.changelog-group-title.ct-green { color: #86efac; }
.changelog-group-title.ct-emerald { color: #5ed6a4; }
.changelog-group-title.ct-amber { color: #fcd34d; }
.changelog-group-title.ct-red { color: #fca5a5; }
.changelog-group-list { list-style: none; }
.changelog-group-list li { position: relative; padding-left: 1.2rem; margin-bottom: 0.4rem; color: #c9cfdd; }
.changelog-group-list li:last-child { margin-bottom: 0; }
.changelog-group-list li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px rgba(150,180,255,0.6); }
.changelog-empty { padding: 1rem 0; color: var(--text-dim); font-size: 1rem; }

.reaction-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,0.07); }
.reaction-btn { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09); color: var(--text-dim); font: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.25s, box-shadow 0.2s; }
.reaction-btn:hover { border-color: rgba(150,180,255,0.5); color: #fff; transform: translateY(-1px); }
.reaction-btn:disabled { opacity: 0.6; cursor: default; transform: none; }
.reaction-btn.active { background: rgba(120,155,240,0.16); border-color: rgba(190,210,255,0.7); color: var(--accent-3); box-shadow: 0 0 18px rgba(120,155,240,0.25); }

@media (max-width: 700px) {
    .changelog-entry { padding: 1.4rem 1.2rem; border-radius: 18px; }
    .changelog-entry-title { font-size: 1.15rem; }
}