.update-banner { position:fixed; top:0; left:0; right:0; z-index:9999; background:linear-gradient(135deg,#1B4332 0%,#52B788 100%); color:white; padding:calc(14px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); animation:slideDown 200ms cubic-bezier(0.23,1,0.32,1); box-shadow:0 4px 12px rgba(27,67,50,.35); border-bottom:1px solid rgba(255,255,255,.1); }
@keyframes slideDown { from { transform:translateY(-110%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes slideUp { from { transform:translateY(0); opacity:1; } to { transform:translateY(-110%); opacity:0; } }
.update-banner-content { display:flex; align-items:center; gap:12px; max-width:100%; margin:0 auto; }
.update-icon { font-size:22px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.update-text { flex:1; min-width:0; }
.update-text strong { display:block; font-size:14px; font-weight:600; margin-bottom:2px; letter-spacing:-.3px; }
.update-text p { font-size:12px; margin:0; opacity:.95; font-weight:500; }
.update-text small { display:block; font-size:12px; opacity:.8; margin-top:2px; }
.update-actions { display:flex; gap:6px; flex-shrink:0; }
.btn-update-now,.btn-update-later { padding:6px 12px; border:none; border-radius:5px; font-size:12px; font-weight:600; cursor:pointer; transition:background-color 180ms cubic-bezier(.23,1,.32,1), color 180ms cubic-bezier(.23,1,.32,1), transform 160ms cubic-bezier(.23,1,.32,1); white-space:nowrap; }
.btn-update-now { background:white; color:#1B4332; }
.btn-update-later { background:rgba(255,255,255,.25); color:white; border:1px solid rgba(255,255,255,.4); }
body.has-update-banner .phva-topbar { margin-top:calc(72px + env(safe-area-inset-top, 0px)); }
body.has-update-banner #screen-area { scroll-padding-top:calc(72px + env(safe-area-inset-top, 0px)); }
.version-info { background:#f0fdf4; border:1px solid #dcfce7; padding:12px; border-radius:8px; margin:16px 0; font-size:12px; text-align:center; }
.version-info p { margin:0; font-weight:600; color:#1B4332; }
.version-info small { display:block; color:#4b7c5c; margin-top:4px; font-size:12px; }
@media (max-width:480px) { .update-banner { padding:calc(12px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px)); } .update-banner-content { gap:10px; } .update-text strong { font-size:13px; } .update-text p { font-size:12px; } .btn-update-now,.btn-update-later { padding:5px 10px; font-size:12px; } }
@media (prefers-reduced-motion: reduce) {
  .update-banner { animation: none !important; }
  .update-banner .btn-update-now,
  .update-banner .btn-update-later { transition: none !important; }
}