:root { --log-bg: #071523; --log-panel: #0d2032; --log-line: #213a4d; --log-text: #edf6ff; --log-muted: #91a8ba; }
html { scroll-padding-top: 120px; }
body.changelog-page { margin: 0; background: var(--log-bg); color: var(--log-text); overflow-x: hidden; }
.changelog-page .announcement { position: relative; z-index: 25; }
.changelog-header .main-nav { gap: 24px; margin-left: 34px; }
.changelog-header .main-nav a.active { color: #fff; }
.changelog-header .main-nav a.active:after { left: 0; right: 0; }
.changelog-page .menu-toggle span { background: #a5bdcb; }
.changelog-page .theme-slot { z-index: 46; }
.changelog-hero { position: relative; min-height: 650px; display: flex; align-items: center; overflow: hidden; background: radial-gradient(circle at 76% 32%, rgba(34, 188, 202, .2), transparent 27%), radial-gradient(circle at 18% 85%, rgba(126, 107, 230, .13), transparent 31%), linear-gradient(135deg, #071523, #0b1d30 58%, #071624); }
.changelog-hero:after { content: ""; position: absolute; inset: 0; opacity: .2; background-image: linear-gradient(rgba(112, 168, 191, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 168, 191, .11) 1px, transparent 1px); background-size: 66px 66px; mask-image: linear-gradient(to bottom, #000, transparent 92%); }
.hero-layout { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 80px; padding-top: 86px; padding-bottom: 92px; }
.hero-copy-block h1 { margin: 27px 0 24px; font-size: 66px; line-height: 1.12; letter-spacing: -.065em; }
.hero-copy-block h1 span { color: #7f9ab0; }
.hero-copy-block > p { max-width: 610px; margin: 0; color: #9db2c3; font-size: 17px; line-height: 2; }
.hero-actions-row { display: flex; align-items: center; gap: 28px; margin-top: 36px; }
.log-back { padding-bottom: 7px; border-bottom: 1px solid #385269; color: #eaf4fb; font-size: 15px; font-weight: 800; }
.log-back span { margin-left: 11px; color: #62dfca; }
.release-overview { position: relative; min-height: 385px; display: grid; place-items: center; align-content: center; border: 1px solid rgba(101, 163, 183, .24); border-radius: 26px; background: linear-gradient(145deg, rgba(18, 45, 65, .88), rgba(7, 24, 39, .88)); box-shadow: 0 40px 110px rgba(0, 0, 0, .34); overflow: hidden; text-align: center; backdrop-filter: blur(12px); }
.release-overview:before { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, rgba(44, 230, 165, .12), transparent 68%); }
.overview-orbit { position: absolute; width: 285px; height: 285px; border: 1px dashed rgba(83, 183, 191, .23); border-radius: 50%; box-shadow: 0 0 0 44px rgba(43, 217, 232, .025), 0 0 0 86px rgba(153, 137, 255, .018); }
.release-overview > p, .release-overview > strong, .release-overview > span, .overview-stats { position: relative; z-index: 1; }
.release-overview > p { margin: 0 0 9px; color: #62dbc9; font: 12px 'DM Mono', monospace; letter-spacing: .16em; }
.release-overview > strong { font-size: 78px; line-height: 1; letter-spacing: -.07em; }
.release-overview > span { margin-top: 10px; color: #9eb4c5; font-size: 16px; }
.overview-stats { display: flex; margin-top: 41px; }
.overview-stats div { min-width: 95px; padding: 0 18px; border-left: 1px solid #294357; }
.overview-stats div:first-child { border-left: 0; }
.overview-stats b, .overview-stats small { display: block; }
.overview-stats b { font-size: 24px; }
.overview-stats small { margin-top: 6px; color: #7890a4; font-size: 11px; }
.latest-section { padding: 125px 0; background: #e2ecf2; color: #081a2d; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 48px; }
.section-heading span, .history-top > div:first-child > span { color: #169fae; font: 700 12px 'DM Mono', monospace; letter-spacing: .14em; }
.section-heading h2, .history-top h2 { margin: 12px 0 0; font-size: 43px; letter-spacing: -.05em; }
.section-heading > p { max-width: 430px; margin: 0 0 4px; color: #435f74; font-size: 16px; line-height: 1.85; }
.latest-release { display: grid; grid-template-columns: 215px 1fr; overflow: hidden; border: 1px solid #abc5d3; border-radius: 20px; background: #fff; box-shadow: 0 28px 75px rgba(27, 63, 86, .13); }
.latest-meta { display: flex; flex-direction: column; align-items: flex-start; padding: 42px 30px; color: #fff; background: radial-gradient(circle at 20% 86%, rgba(43, 217, 232, .18), transparent 35%), linear-gradient(160deg, #0c2235, #071522); }
.version-pill { padding: 7px 10px; border: 1px solid #35617a; border-radius: 18px; color: #62e2cc; font: 11px 'DM Mono', monospace; }
.latest-meta b { margin-top: auto; font-size: 27px; }
.latest-meta small { margin-top: 8px; color: #8ba4b7; font-size: 13px; }
.latest-features { display: grid; grid-template-columns: 1fr 1fr; }
.update-item { display: flex; gap: 15px; min-height: 142px; padding: 27px 25px; border-right: 1px solid #dbe6ec; border-bottom: 1px solid #dbe6ec; background: linear-gradient(145deg, #fff, #f7fafc); }
.update-item:nth-child(even) { border-right: 0; }
.update-item:nth-last-child(-n+2) { border-bottom: 0; }
.update-item.featured { background: linear-gradient(145deg, #edfafa, #f7fbfc); }
.update-item i { flex: 0 0 32px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; background: #e3f5f5; color: #1397a1; font: 10px 'DM Mono', monospace; font-style: normal; }
.update-item b { color: #0b2235; font-size: 17px; }
.update-item p { margin: 8px 0 0; color: #496579; font-size: 14px; line-height: 1.75; }
.history-section { padding: 125px 0 140px; background: linear-gradient(180deg, #f5f9fb, #e8f0f5); color: #081a2d; }
.history-top { display: flex; justify-content: space-between; align-items: end; gap: 60px; margin-bottom: 55px; }
.history-top p { max-width: 520px; margin: 14px 0 0; color: #4d687c; font-size: 16px; line-height: 1.8; }
.filter-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 480px; }
.filter-buttons button { min-height: 42px; padding: 0 17px; border: 1px solid #b6cbd7; border-radius: 22px; background: rgba(255, 255, 255, .56); color: #3c596e; font: 700 13px inherit; cursor: pointer; transition: .22s; }
.filter-buttons button:hover, .filter-buttons button.active { border-color: #0e293d; background: #0e293d; color: #fff; box-shadow: 0 9px 24px rgba(25, 58, 81, .14); }
.release-timeline { position: relative; display: grid; gap: 16px; }
.release-timeline:before { content: ""; position: absolute; z-index: 0; left: 195px; top: 35px; bottom: 35px; width: 1px; background: linear-gradient(#29c8c4, #b8cbd6 18%, #b8cbd6 82%, #8e80e6); }
.release-card { position: relative; z-index: 1; display: grid; grid-template-columns: 215px 1fr; min-height: 170px; border: 1px solid #c2d3dd; border-radius: 15px; background: #f9fcfe; box-shadow: 0 12px 35px rgba(32, 67, 90, .055); overflow: hidden; transition: .25s; }
.release-card:hover { transform: translateY(-3px); border-color: #8ebfc7; box-shadow: 0 22px 52px rgba(28, 70, 94, .11); }
.release-card[hidden] { display: none; }
.release-version { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 34px; border-right: 1px solid #d4e1e8; background: linear-gradient(145deg, #edf4f7, #f8fbfc); }
.release-version:before { content: ""; position: absolute; right: 13px; top: 50%; width: 15px; height: 15px; border: 4px solid #eef5f8; border-radius: 50%; background: #28c9bb; transform: translateY(-50%); box-shadow: 0 0 0 1px #85cfc8; }
.release-version b { font: 800 27px 'DM Mono', monospace; letter-spacing: -.06em; }
.release-version span { margin-top: 10px; color: #547085; font-size: 13px; font-weight: 700; }
.release-content { padding: 31px 35px; }
.release-content h3 { margin: 0; font-size: 21px; }
.release-content p { max-width: 750px; margin: 10px 0 17px; color: #4a667a; font-size: 15px; line-height: 1.75; }
.release-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.release-tags span { padding: 6px 9px; border: 1px solid #c6d8e1; border-radius: 13px; background: #f5f9fb; color: #47647a; font-size: 11px; }
.release-card.origin .release-version:before { background: #8e80e6; box-shadow: 0 0 0 1px #b7aef1; }
.filter-empty { padding: 60px 20px; border: 1px dashed #b6cbd7; border-radius: 15px; color: #587388; text-align: center; }
.changelog-cta { padding: 92px 0; color: #fff; background: radial-gradient(circle at 80% 25%, rgba(31, 151, 167, .15), transparent 30%), #071523; }
.changelog-cta .section-shell { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.changelog-cta span:first-child { color: #58dcca; font: 11px 'DM Mono', monospace; letter-spacing: .14em; }
.changelog-cta h2 { margin: 15px 0 0; font-size: 42px; line-height: 1.28; letter-spacing: -.05em; }
.changelog-cta p { margin: 15px 0 0; color: #8fa6b8; font-size: 15px; }
.changelog-cta .section-shell > div:last-child { display: flex; gap: 12px; }
.changelog-footer { padding: 26px 0; border-top: 1px solid #1c3347; background: #040d16; color: #70879a; font-size: 12px; }
.changelog-footer .section-shell { display: flex; justify-content: space-between; gap: 30px; }
.changelog-footer div div { display: flex; gap: 26px; }
.changelog-footer a:hover { color: #fff; }

.theme-day body.changelog-page { background: #e3edf3; }
.theme-day .changelog-hero { color: #fff; }
.theme-day .changelog-header .main-nav a.active { color: #fff !important; }
.theme-day .latest-section { background: #dfeaf1; }
.theme-day .history-section { background: linear-gradient(180deg, #f2f7fa, #e3edf3); }

@media (max-width: 1100px) {
  .changelog-header .main-nav { gap: 15px; margin-left: 10px; }
  .hero-layout { gap: 38px; }
  .hero-copy-block h1 { font-size: 55px; }
  .latest-release { grid-template-columns: 180px 1fr; }
}

@media (max-width: 900px) {
  .hero-layout { grid-template-columns: 1fr; padding-top: 75px; }
  .release-overview { min-height: 330px; }
  .section-heading, .history-top { display: block; }
  .section-heading > p { margin-top: 18px; }
  .filter-buttons { justify-content: flex-start; margin-top: 26px; max-width: none; }
  .latest-release { grid-template-columns: 1fr; }
  .latest-meta { min-height: 150px; }
  .latest-meta b { margin-top: 28px; }
  .changelog-cta .section-shell { display: block; }
  .changelog-cta .section-shell > div:last-child { margin-top: 30px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 98px; }
  .changelog-header .main-nav { top: 65px; gap: 17px; margin: 0; background: #0b1a2a; }
  .changelog-hero { min-height: auto; }
  .hero-layout { padding-top: 66px; padding-bottom: 75px; }
  .hero-copy-block h1 { font-size: 45px; }
  .hero-copy-block > p { font-size: 16px; }
  .hero-actions-row { align-items: flex-start; flex-direction: column; gap: 20px; }
  .release-overview > strong { font-size: 68px; }
  .overview-stats div { min-width: 82px; padding: 0 12px; }
  .latest-section, .history-section { padding: 88px 0; }
  .section-heading h2, .history-top h2 { font-size: 34px; }
  .latest-features { grid-template-columns: 1fr; }
  .update-item, .update-item:nth-child(even), .update-item:nth-last-child(-n+2) { min-height: 0; border-right: 0; border-bottom: 1px solid #dbe6ec; }
  .update-item:last-child { border-bottom: 0; }
  .filter-buttons { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .filter-buttons button { flex: 0 0 auto; }
  .release-timeline:before { left: 25px; }
  .release-card { grid-template-columns: 1fr; margin-left: 12px; }
  .release-version { padding: 24px 28px 20px 48px; border-right: 0; border-bottom: 1px solid #d4e1e8; }
  .release-version:before { left: 13px; right: auto; }
  .release-content { padding: 25px 28px; }
  .changelog-cta { padding: 75px 0; }
  .changelog-cta h2 { font-size: 34px; }
  .changelog-cta .section-shell > div:last-child { flex-direction: column; }
  .changelog-cta .btn { width: 100%; }
  .changelog-footer .section-shell, .changelog-footer div div { display: block; }
  .changelog-footer div div { margin-top: 12px; line-height: 2.1; }
  .changelog-footer a { margin-right: 16px; }
}