.update-banner {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--text-strong);
  color: var(--bg);
  border-radius: var(--radius-full);
  box-shadow: 0 16px 48px -16px oklch(0% 0 0 / 0.4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  z-index: 100;
  max-inline-size: calc(100% - 2 * var(--space-4));
  animation: update-banner-in 380ms var(--ease-out-expo);
}

.update-banner__text {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.update-banner__btn {
  padding: var(--space-2) var(--space-4);
  background: var(--accent);
  color: oklch(98.5% 0.008 75);
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: var(--text-sm);
  min-height: 36px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .update-banner__btn:hover { background: var(--accent-strong); }
}

@keyframes update-banner-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .update-banner { animation: none; }
}