.app-update-banner {
  position: fixed; right: 24px; bottom: 24px; z-index: 11000;
  width: min(440px, calc(100vw - 32px)); display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto 32px; align-items: center;
  gap: 12px; padding: 14px; border: 1px solid #d5e1ef;
  border-radius: 16px; background: #fff; color: #24364b;
  box-shadow: 0 8px 28px rgba(26, 53, 82, .16); animation: updateBannerIn 220ms ease-out;
}
.app-update-banner[hidden] { display: none; }
.app-update-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #eaf3fd; color: #1976d2; font-size: 18px; }
.app-update-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.app-update-copy strong { font-size: 13px; font-weight: 800; }
.app-update-copy span { color: #607086; font-size: 11px; line-height: 1.4; }
#app-update-button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: #1976d2; color: #fff; font-family: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
#app-update-button:hover { background: #1565c0; }
#app-update-button:focus-visible, #app-update-dismiss:focus-visible { outline: 2px solid #1976d2; outline-offset: 3px; }
#app-update-button:disabled { cursor: wait; opacity: .75; }
#app-update-dismiss { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: #607086; cursor: pointer; }
#app-update-dismiss:hover { background: #edf3fa; color: #24364b; }
@keyframes updateBannerIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .app-update-banner { right: 16px; bottom: 16px; grid-template-columns: 40px minmax(0,1fr) 32px; }
  #app-update-button { grid-column: 2 / 4; width: 100%; }
  #app-update-dismiss { grid-column: 3; grid-row: 1; }
}
@media print { .app-update-banner { display: none !important; } }