.ac-site-main:has(.changelog-page) { padding: 0 !important; }
body:has(.changelog-page) { background: #07111a; }
.changelog-page {
    min-height: calc(100dvh - 4.75rem);
    padding: 1.1rem clamp(0.8rem, 3vw, 2.2rem) 2.6rem;
    color: #e2e8f0;
    background:
        radial-gradient(720px 240px at 12% -10%, rgba(74, 222, 128, 0.16), transparent 55%),
        radial-gradient(680px 220px at 90% 0%, rgba(248, 113, 113, 0.14), transparent 50%),
        #07111a;
}
.cl-hero { text-align: center; margin-bottom: 1rem; }
.cl-kicker {
    display: inline-flex; align-items: center; gap: 0.4rem;
    letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.68rem; font-weight: 800; color: #86efac;
}
.cl-kicker i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; }
.cl-hero h1 { margin: 0.2rem 0; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.cl-hero p { max-width: 46rem; margin: 0 auto; color: #94a3b8; }
.cl-filters {
    display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: end;
    max-width: 72rem; margin: 0 auto 1.1rem;
    padding: 0.75rem; border-radius: 1rem;
    background: rgba(15, 23, 42, 0.72); border: 1px solid rgba(148, 163, 184, 0.22);
}
.cl-filters label { display: grid; gap: 0.2rem; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; }
.cl-filters .cl-grow { flex: 1 1 12rem; }
.cl-filters select, .cl-filters input, .cl-filters button {
    border-radius: 0.7rem; border: 1px solid rgba(148, 163, 184, 0.3);
    background: #0b1220; color: #f8fafc; padding: 0.45rem 0.6rem; min-height: 2.4rem;
}
.cl-filters button { font-weight: 800; background: #166534; border-color: #22c55e; cursor: pointer; }
.cl-empty { text-align: center; color: #94a3b8; }
.cl-feed { max-width: 72rem; margin: 0 auto; display: grid; gap: 1.1rem; }
.cl-day { display: grid; gap: 0.65rem; }
.cl-day-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cl-day-head form { margin: 0; }
.cl-clear {
    border: 1px solid rgba(248, 113, 113, 0.55);
    background: transparent;
    color: #fecaca;
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}
.cl-clear:hover { background: rgba(248, 113, 113, 0.16); }
.cl-day-head time { font-weight: 900; font-size: 1.05rem; }
.cl-live {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    color: #052e16; background: #4ade80; border-radius: 999px; padding: 0.12rem 0.45rem;
}
.cl-card {
    display: grid; grid-template-columns: 7.2rem 1fr auto; gap: 0.8rem; align-items: center;
    padding: 0.65rem; border-radius: 1rem;
    background: rgba(15, 23, 42, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.2);
}
.cl-added { border-color: rgba(74, 222, 128, 0.45); }
.cl-removed { border-color: rgba(248, 113, 113, 0.5); }
.cl-moved { border-color: rgba(251, 191, 36, 0.45); }
.cl-card.is-live { box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35); }
.cl-shot {
    position: relative; display: block; height: 4.6rem; border-radius: 0.75rem; overflow: hidden; background: #020617;
}
.cl-shot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-shot-fallback { display: grid; place-items: center; height: 100%; font-weight: 900; color: #94a3b8; }
.cl-shot img.cl-diff {
    position: absolute;
    left: 0.28rem;
    bottom: 0.28rem;
    width: 1.45rem;
    height: 1.45rem;
    object-fit: contain;
    background: rgba(2, 6, 23, 0.72);
    border-radius: 0.35rem;
    padding: 0.08rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.cl-kind { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.cl-added .cl-kind { color: #86efac; }
.cl-removed .cl-kind { color: #fca5a5; }
.cl-moved .cl-kind { color: #fcd34d; }
.cl-body h2 { margin: 0.1rem 0; font-size: 1.05rem; font-weight: 900; }
.cl-body h2 a { color: inherit; text-decoration: none; }
.cl-body h2 a:hover { text-decoration: underline; }
.cl-creator, .cl-note { margin: 0; color: #94a3b8; font-size: 0.82rem; }
.cl-ranks { display: flex; align-items: center; gap: 0.35rem; font-variant-numeric: tabular-nums; }
.cl-ranks b { font-size: 1.35rem; line-height: 1; }
.cl-from { color: #fca5a5; }
.cl-to { color: #86efac; }
.cl-arrow { color: #cbd5e1; font-size: 1.2rem; }
.cl-delta { font-style: normal; font-weight: 800; font-size: 0.78rem; border-radius: 999px; padding: 0.1rem 0.4rem; }
.cl-delta.is-up { color: #052e16; background: #86efac; }
.cl-delta.is-down { color: #450a0a; background: #fca5a5; }
.cl-pager { display: flex; justify-content: center; gap: 0.8rem; align-items: center; margin-top: 1.2rem; }
.cl-pager a { color: #e2e8f0; font-weight: 800; }
@media (max-width: 720px) {
    .cl-card { grid-template-columns: 5.4rem 1fr; }
    .cl-ranks { grid-column: 1 / -1; }
}