/* T13: 「有新版本 · 重新載入」 banner (web/lib/update.js). Small pill just below the page header (it
   must not cover the back / call / info buttons); above the lock screen (z-index 1000) so a locked
   app can still be updated when it is not safe to do it silently. */
.update-banner {
  position: fixed; top: calc(var(--safe-t) + var(--head-h, 56px) + 8px); left: 50%; transform: translateX(-50%); z-index: 1001;
  display: flex; align-items: center; gap: 4px; max-width: calc(100vw - 24px);
  background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px;
  box-shadow: var(--shadow-2); padding: 4px 4px 4px 14px; font-size: 14px; font-weight: 600;
  animation: update-in 0.18s ease-out;
}
.update-banner-text { white-space: nowrap; }
.update-banner-text::after { content: '·'; margin-left: 6px; color: var(--text-3, var(--text)); }
.update-banner-btn {
  border: 0; background: var(--accent); color: var(--accent-ink); border-radius: 999px; min-height: 34px;
  padding: 0 14px; font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer;
}
.update-banner-close {
  border: 0; background: transparent; color: var(--text-2, var(--text)); width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.update-banner-close:hover, .update-banner-close:focus-visible { background: var(--surface-2, transparent); }
@keyframes update-in { from { opacity: 0; transform: translate(-50%, -6px); } }
@media (prefers-reduced-motion: reduce) { .update-banner { animation: none; } }