.updates-main {
  width: min(calc(100% - 40px), var(--page-width));
  margin: 130px auto 0;
}
.updates-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.updates-header h1 { margin: 6px 0 8px; font-size: clamp(34px, 5vw, 58px); line-height: 1; }
.updates-header > div:first-child > p:last-child { margin: 0; color: var(--text-muted); font-size: 13px; }
.update-tabs {
  position: relative;
  display: grid;
  width: min(100%, 330px);
  flex: 0 0 330px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 17px;
  background: var(--surface-soft);
}
.update-tab-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc(50% - 5px);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 26%, transparent);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
[data-update-mode="release"] .update-tab-indicator { transform: translateX(100%); }
.update-tabs button {
  position: relative;
  z-index: 1;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-muted);
  font-weight: 750;
  cursor: pointer;
  transition: color .2s ease;
}
.update-tabs button.is-active { color: #fff; }
.update-panels { margin-top: 64px; touch-action: pan-y; }
.update-panel[hidden] { display: none; }
.update-panel.is-entering { animation: update-panel-in .28s ease both; }
.updates-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 28px 18px; }
@keyframes update-panel-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
  .updates-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .updates-main { width: calc(100% - 24px); margin-top: 92px; }
  .updates-header { align-items: stretch; flex-direction: column; padding: 24px 18px; }
  .update-tabs { width: 100%; flex-basis: auto; }
  .update-panels { margin-top: 46px; }
  .updates-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px 10px; }
}
@media (max-width: 520px) {
  .updates-header h1 { font-size: 38px; }
  .updates-header > div:first-child > p:last-child { font-size: 12px; line-height: 1.7; }
  .update-tabs button { min-height: 42px; font-size: 12px; }
  .updates-grid { gap: 20px 8px; }
}