.update-notice { box-sizing:border-box; width:min(680px,calc(100vw - 28px)); max-height:calc(100dvh - 28px); padding:0; border:0; border-radius:20px; color:#173642; background:#fff; box-shadow:0 24px 90px #001c3270; overflow:hidden; }
.update-notice::backdrop { background:#092b3bd9; }
.update-notice-body { display:flex; flex-direction:column; max-height:calc(100dvh - 28px); padding:32px; gap:18px; box-sizing:border-box; }
.update-notice h1 { font-size:30px; line-height:1.2; margin:0; }
.update-notice p { margin:0; line-height:1.55; }
.update-notice-kicker { color:#56717c; font-size:14px; }
.update-notice-icon { display:grid; place-items:center; width:60px; height:60px; background:#e4f4f0; color:#137763; border-radius:18px; font-size:34px; flex-shrink:0; }
.update-notice-changes { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 12px 0 0; line-height:1.55; }
.update-notice-changes:focus { outline:2px solid #bad8df; outline-offset:4px; border-radius:4px; }
.update-notice-changes ul { padding:0; margin:0; list-style:none; }
.update-notice-changes li { margin:0 0 20px; }
.update-notice-changes p { white-space:pre-wrap; overflow-wrap:anywhere; }
.update-notice h1 { overflow-wrap:anywhere; }
.update-notice-changes h2 { margin:0 0 6px; font-size:18px; }
.update-notice-changes section + section { border-top:1px solid #d9e4e7; padding-top:18px; margin-top:20px; }
.update-notice-changes h3 { margin:12px 0 6px; font-size:17px; }
.update-notice .btn { flex-shrink:0; width:100%; min-height:54px; white-space:normal; font-size:17px; }
.update-notice .btn:disabled { opacity:.55; cursor:default; }
.update-notice-hint { font-size:14px; color:#56717c; }
.update-notice-error { color:#b12424; font-size:14px; }
@media(max-width:480px) { .update-notice-body { padding:24px 20px; gap:16px; } .update-notice h1 { font-size:25px; } }

/* Keep controls reachable on old Android WebViews without dvh support too. */
.update-notice { max-height:calc(100vh - 28px); max-height:var(--notice-height,calc(100vh - 28px)); overflow:auto; }
.update-notice-body { max-height:calc(100vh - 28px); max-height:var(--notice-height,calc(100vh - 28px)); min-height:0; overflow:auto; }
.update-notice-body > * { flex-shrink:0; }
.update-notice-body > .update-notice-changes { flex:1 1 auto; min-height:64px; }
.update-notice-error:empty { display:none; }
@media(max-height:600px) {
 .update-notice-body { padding:14px 16px; gap:10px; }
 .update-notice h1 { font-size:22px; }
 .update-notice-icon { width:36px; height:36px; font-size:24px; }
}