:root {
  --rn-blue: #2478ed;
  --rn-blue-soft: #eaf3ff;
  --rn-green: #169c54;
  --rn-green-soft: #eaf8ef;
  --rn-ink: #14283f;
  --rn-text: #53697f;
  --rn-muted: #7d8fa1;
  --rn-line: #dbe5ef;
}

.release-notes-page .main-area > .content {
  width: min(1160px, calc(100% - 48px)) !important;
  margin: 0 auto !important;
  padding: 54px 0 72px !important;
}

.release-hero {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 48px;
  text-align: center;
}

.release-hero-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 2px;
  border: 1px solid #cfe0fb;
  border-radius: 18px;
  color: var(--rn-blue);
  background: linear-gradient(145deg, #f7fbff, #e8f2ff);
  box-shadow: 0 10px 24px rgba(36, 120, 237, .12);
}

.release-hero-icon svg { width: 29px; height: 29px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.release-hero h1 { margin: 0; color: var(--rn-ink); font-size: 20px; line-height: 1.4; letter-spacing: -.02em; }
.release-hero p { margin: 0; color: var(--rn-text); font-size: 13px; line-height: 1.7; }

.release-list { display: grid; gap: 24px; }
.release-card { overflow: hidden; border: 1px solid var(--rn-line); border-radius: 20px; background: #fff; box-shadow: 0 14px 38px rgba(24, 55, 91, .06); }
.release-card-head { display: flex; min-height: 88px; align-items: center; gap: 16px; padding: 20px 30px; border-bottom: 1px solid #e6edf5; background: linear-gradient(90deg, #eaf3ff 0%, #f8fbff 42%, #fff 100%); }
.release-card-head h2 { margin: 0; color: var(--rn-ink); font-size: 17px; line-height: 1; letter-spacing: -.01em; }
.release-date { color: #64778a; font-size: 13px; font-weight: 650; }
.release-latest { display: inline-flex; min-height: 32px; align-items: center; gap: 7px; margin-left: auto; padding: 6px 13px; border-radius: 999px; color: #fff; background: var(--rn-blue); font-size: 12px; font-weight: 800; }
.release-latest svg { width: 15px; height: 15px; fill: currentColor; }
.release-items { display: grid; gap: 16px; padding: 28px 30px 30px; }
.release-item { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 20px 22px; border: 1px solid #e5edf5; border-radius: 15px; background: #f8fafc; }
.release-item-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; }
.release-item-icon svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.release-item.feature .release-item-icon { color: var(--rn-green); background: var(--rn-green-soft); }
.release-item.improvement .release-item-icon { color: var(--rn-blue); background: var(--rn-blue-soft); }
.release-item-body { min-width: 0; }
.release-item-title { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.release-item-title h3 { margin: 0; color: var(--rn-ink); font-size: 14px; line-height: 1.5; }
.release-kind { display: inline-flex; flex: 0 0 auto; align-items: center; padding: 3px 8px; border: 1px solid currentColor; border-radius: 7px; font-size: 11px; font-weight: 800; line-height: 1.4; }
.feature .release-kind { color: var(--rn-green); background: #f4fcf7; }
.improvement .release-kind { color: var(--rn-blue); background: #f4f8ff; }
.release-notes-page .release-item p { margin: 0; color: var(--rn-text) !important; font-size: 13px !important; line-height: 1.75 !important; }

@media (max-width: 760px) {
  .release-notes-page .main-area > .content { width: calc(100% - 28px) !important; padding: 34px 0 50px !important; }
  .release-hero { margin-bottom: 28px; }
  .release-hero h1 { font-size: 20px; }
  .release-hero p { font-size: 14px; }
  .release-card-head { min-height: 74px; gap: 9px; padding: 16px 18px; }
  .release-card-head h2 { font-size: 20px; }
  .release-date { font-size: 13px; }
  .release-latest { padding: 6px 10px; font-size: 11px; }
  .release-items { padding: 18px; }
  .release-item { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .release-item-icon { width: 40px; height: 40px; border-radius: 12px; }
  .release-item-icon svg { width: 21px; height: 21px; }
  .release-item-title { align-items: flex-start; flex-direction: column; gap: 5px; }
  .release-item-title h3 { font-size: 15px; }
  .release-item p { font-size: 13px; line-height: 1.7; }
}