.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 rgba(253, 188, 26, .35);
  border-radius: 16px; background: rgba(28, 28, 28, .98); color: var(--text-primary);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .48); 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: rgba(253,188,26,.12); color: var(--primary-color); 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: var(--text-secondary); font-size: 11px; line-height: 1.4; }
#app-update-button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--primary-color); color: #212121; font-family: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; cursor: pointer; }
#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: var(--text-secondary); cursor: pointer; }
#app-update-dismiss:hover { background: rgba(255,255,255,.07); color: var(--text-primary); }
@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; } }