.portal-update-notice {
  position: fixed;
  z-index: 100000;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(520px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid #d1cdca;
  border-radius: 10px;
  background: #fff;
  color: #231f20;
  box-shadow: 0 8px 32px #0003;
  font: 14px/1.45 Arial, sans-serif;
  box-sizing: border-box;
}
.portal-update-notice[hidden] { display: none; }
.portal-update-notice p { margin: 0; flex: 1; }
.portal-update-notice > div { display: flex; gap: 8px; }
.portal-update-notice button {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #a90000;
  border-radius: 5px;
  background: #b40101;
  color: #fff;
  font: bold 13px/1.3 Arial, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.portal-update-notice [data-update-later] { background: #fff; color: #231f20; border-color: #b9b3af; }
.portal-update-notice button:focus-visible { outline: 3px solid #231f20; outline-offset: 3px; }
@media (max-width: 600px) {
  .portal-update-notice { flex-wrap: wrap; }
  .portal-update-notice p { flex-basis: calc(100% - 40px); }
  .portal-update-notice > div { width: 100%; }
  .portal-update-notice button { flex: 1; }
}