.changelog-page {
  min-height: 100vh;
  overflow-x: hidden;
  color: #f5f6ff;
  background: #050713;
}

.changelog-main { position: relative; z-index: 1; }

.changelog-hero {
  padding: 150px 0 78px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: radial-gradient(circle at 72% 34%, rgba(51,95,150,.22), transparent 36%);
}

.changelog-hero-grid {
  display: grid;
  grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr);
  align-items: center;
  gap: 70px;
}

.changelog-kicker {
  display: block;
  margin-bottom: 12px;
  color: #8faed2;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.changelog-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(2.8rem,6vw,5.7rem);
  line-height: .94;
  letter-spacing: -.065em;
}

.changelog-hero h1 span {
  color: transparent;
  background: linear-gradient(100deg,#6a8fc5,#335f96 58%,#f68ac6);
  -webkit-background-clip: text;
  background-clip: text;
}

.changelog-hero p {
  max-width: 720px;
  margin: 25px 0 0;
  color: rgba(235,238,255,.62);
  font-size: 1.06rem;
  line-height: 1.75;
}

.changelog-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.changelog-overview-card {
  padding: 26px;
  border: 1px solid rgba(106,143,197,.24);
  border-radius: 22px;
  background: linear-gradient(145deg,rgba(18,22,42,.96),rgba(8,10,23,.96));
  box-shadow: 0 28px 80px rgba(0,0,0,.32);
}

.changelog-overview-card > span { color:#8faed2; font-size:.7rem; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.changelog-overview-card > div { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.07); }
.changelog-overview-card strong { font-size:2rem; line-height:1; }
.changelog-overview-card small { color:rgba(235,238,255,.5); }
.changelog-overview-card footer { padding-top:18px; color:#8de6ae; font-size:.76rem; font-weight:800; }

.changelog-content { padding: 54px 0 100px; }

.changelog-toolbar {
  display: grid;
  grid-template-columns: minmax(240px,1.4fr) repeat(3,minmax(145px,.65fr)) auto auto;
  align-items:end;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(11,15,31,.86);
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}

.changelog-toolbar label { display:grid; gap:7px; color:rgba(235,238,255,.5); font-size:.68rem; font-weight:850; text-transform:uppercase; letter-spacing:.06em; }
.changelog-toolbar input,.changelog-toolbar select { width:100%; min-height:44px; padding:0 12px; color:#eef0ff; border:1px solid rgba(255,255,255,.1); border-radius:9px; outline:0; background:#090c19; }
.changelog-toolbar input:focus,.changelog-toolbar select:focus { border-color:rgba(106,143,197,.6); box-shadow:0 0 0 3px rgba(51,95,150,.1); }
.changelog-search { position:relative; }
.changelog-search > span { position:absolute; left:12px; bottom:12px; width:19px; color:#77809c; }
.changelog-search input { padding-left:40px; }
.changelog-reset { min-height:44px; display:grid; place-items:center; padding:0 10px; color:#8faed2; font-size:.76rem; font-weight:800; text-decoration:none; }

.changelog-results-head { display:flex; align-items:end; justify-content:space-between; gap:30px; margin:42px 0 26px; }
.changelog-results-head h2 { margin:0; font-size:clamp(1.7rem,3vw,2.5rem); }
.changelog-results-head p { max-width:470px; margin:0; color:rgba(235,238,255,.46); line-height:1.6; text-align:right; }

.changelog-timeline { position:relative; display:grid; gap:22px; }
.changelog-timeline::before { content:""; position:absolute; top:18px; bottom:18px; left:18px; width:1px; background:linear-gradient(#6a8fc5,rgba(246,138,198,.2)); }
.changelog-entry { display:grid; grid-template-columns:38px minmax(0,1fr); gap:18px; scroll-margin-top:110px; }
.changelog-marker { position:relative; z-index:1; padding-top:27px; }
.changelog-marker span { display:block; width:13px; height:13px; margin:auto; border:3px solid #080b17; border-radius:50%; background:#335f96; box-shadow:0 0 0 4px rgba(51,95,150,.18),0 0 20px rgba(51,95,150,.55); }
.changelog-entry.importance-critical .changelog-marker span { background:#f23f5d; box-shadow:0 0 0 4px rgba(242,63,93,.18),0 0 20px rgba(242,63,93,.6); }
.changelog-entry.importance-high .changelog-marker span { background:#f0a61b; box-shadow:0 0 0 4px rgba(240,166,27,.18),0 0 20px rgba(240,166,27,.5); }

.changelog-entry-card {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.085);
  border-left:3px solid #335f96;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(17,21,40,.94),rgba(8,11,24,.96));
  box-shadow:0 18px 55px rgba(0,0,0,.2);
}
.importance-critical .changelog-entry-card { border-left-color:#f23f5d; }
.importance-high .changelog-entry-card { border-left-color:#f0a61b; }
.importance-low .changelog-entry-card { border-left-color:#f68ac6; }
.changelog-entry-card > header { padding:24px 26px 20px; }
.changelog-entry-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.changelog-entry-meta > span { padding:6px 9px; border-radius:999px; font-size:.63rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.changelog-entry-id { padding:6px 9px; border:1px solid rgba(106,143,197,.2); border-radius:999px; color:#b8cbe5; background:rgba(51,95,150,.08); font-size:.63rem; font-weight:900; letter-spacing:.05em; text-decoration:none; }
.changelog-entry-id:hover { border-color:rgba(246,138,198,.34); color:#f8b5d7; background:rgba(113,55,80,.14); }
.changelog-entry-meta time { margin-left:auto; color:rgba(235,238,255,.4); font-size:.72rem; font-weight:750; }
.changelog-type { color:#b8cbe5; background:rgba(51,95,150,.14); border:1px solid rgba(106,143,197,.2); }
.changelog-type.type-security { color:#ff9cac; background:rgba(242,63,93,.1); border-color:rgba(242,63,93,.2); }
.changelog-type.type-fix { color:#8de6ae; background:rgba(35,165,90,.1); border-color:rgba(35,165,90,.2); }
.changelog-importance { color:#aab2c8; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); }
.changelog-importance.importance-critical { color:#ff8296; }
.changelog-importance.importance-high { color:#ffc363; }

.changelog-title-row { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:17px; }
.changelog-title-row img { width:68px; height:68px; border-radius:13px; object-fit:cover; background:#090b16; }
.changelog-version { color:#8faed2; font:800 .76rem ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.06em; }
.changelog-title-row h2 { margin:5px 0 0; font-size:clamp(1.35rem,2.5vw,2rem); }
.changelog-summary { margin:0; padding:0 26px 23px; color:rgba(235,238,255,.65); font-size:.95rem; line-height:1.7; }
.changelog-change-list { padding:21px 26px; border-top:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.018); }
.changelog-change-list h3 { margin:0 0 14px; font-size:.82rem; }
.changelog-change-list ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 22px; margin:0; padding:0; list-style:none; }
.changelog-change-list li { display:grid; grid-template-columns:19px minmax(0,1fr); gap:9px; color:rgba(235,238,255,.72); font-size:.84rem; line-height:1.5; }
.changelog-change-list li span { width:18px; height:18px; display:grid; place-items:center; border-radius:50%; color:#8de6ae; background:rgba(35,165,90,.1); }
.changelog-change-list li svg { width:11px; }
.changelog-entry-card > footer { display:flex; align-items:center; gap:14px; padding:16px 26px; border-top:1px solid rgba(255,255,255,.07); }
.changelog-entry-card > footer > div { display:grid; margin-right:auto; }
.changelog-entry-card > footer span { color:rgba(235,238,255,.35); font-size:.62rem; font-weight:850; text-transform:uppercase; }
.changelog-entry-card > footer strong { margin-top:3px; font-size:.78rem; }
.changelog-entry-card > footer a { display:inline-flex; align-items:center; gap:7px; color:#b8cbe5; font-size:.75rem; font-weight:800; text-decoration:none; }
.changelog-entry-card > footer a svg { width:16px; }
.changelog-entry.is-direct-target .changelog-entry-card { border-color:rgba(106,143,197,.4); animation:changelog-direct-target 1.8s ease-out both; }
@keyframes changelog-direct-target { 0% { box-shadow:0 0 0 3px rgba(51,95,150,.16),0 18px 55px rgba(0,0,0,.2); } 100% { box-shadow:0 18px 55px rgba(0,0,0,.2); } }

.changelog-empty { padding:65px 25px; text-align:center; border:1px dashed rgba(106,143,197,.28); border-radius:18px; background:rgba(51,95,150,.035); }
.changelog-empty > span { width:50px; height:50px; display:grid; place-items:center; margin:0 auto 16px; color:#8faed2; border-radius:14px; background:rgba(51,95,150,.12); }
.changelog-empty svg { width:24px; }
.changelog-empty h2 { margin:0; }
.changelog-empty p { color:rgba(235,238,255,.5); }

@media (max-width:1100px) {
  .changelog-hero-grid { grid-template-columns:1fr; gap:35px; }
  .changelog-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .changelog-search { grid-column:1/-1; }
}

@media (max-width:700px) {
  .changelog-hero { padding-top:120px; }
  .changelog-toolbar { grid-template-columns:1fr; }
  .changelog-search { grid-column:auto; }
  .changelog-results-head { display:grid; }
  .changelog-results-head p { text-align:left; }
  .changelog-timeline::before { left:7px; }
  .changelog-entry { grid-template-columns:15px minmax(0,1fr); gap:10px; }
  .changelog-marker { padding-top:28px; }
  .changelog-marker span { width:10px; height:10px; }
  .changelog-entry-card > header,.changelog-summary,.changelog-change-list,.changelog-entry-card > footer { padding-right:18px; padding-left:18px; }
  .changelog-entry-meta time { width:100%; margin:3px 0 0; }
  .changelog-change-list ul { grid-template-columns:1fr; }
  .changelog-entry-card > footer { align-items:flex-start; flex-direction:column; }
  .changelog-entry-card > footer > div { margin-right:0; }
}