.client-update-open { overflow:hidden; }
.client-update-notice { box-sizing:border-box; position:fixed; inset:0; margin:auto; width:min(440px,calc(100% - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow-y:auto; overscroll-behavior:contain; padding:24px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-top:1px solid var(--red); box-shadow:0 18px 60px #0007; }
.client-update-notice::backdrop { background:#202021e8; }
.client-update-notice:has(.update-help[open]) { width:min(660px,calc(100% - 32px)); }
.client-update-notice .update-brand { display:flex; align-items:center; gap:10px; margin-bottom:16px; color:var(--red); font:700 9px var(--font-mono); }
.client-update-notice .update-brand img { width:32px; height:32px; }
.client-update-notice .update-state { display:flex; align-items:center; gap:7px; margin-top:12px; color:var(--wait); font:700 9px var(--font-mono); }
.client-update-notice .update-state::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--wait); box-shadow:0 0 0 3px #e8b47822; }
.client-update-notice [hidden] { display:none; }
.client-update-notice .update-title { margin:0; color:#fff; font:700 22px/1.1 var(--font-ui); }
.client-update-notice .update-description { margin:14px 0 0; color:var(--muted-strong); font:12px/1.6 var(--font-ui); }
.client-update-notice .update-versions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:18px 0; border:1px solid var(--line-soft); background:var(--panel-strong); }
.client-update-notice .update-versions > div { padding:12px; }
.client-update-notice .update-versions > div + div { border-left:1px solid var(--line-soft); }
.client-update-notice .update-versions dt { color:var(--muted); font:9px/1.4 var(--font-mono); letter-spacing:.25px; }
.client-update-notice .update-versions dd { margin:6px 0 0; color:var(--wait); font:700 14px/1.2 var(--font-mono); }
.client-update-notice .update-versions > div:last-child dd { color:var(--green); }
.client-update-notice .update-controls { position:relative; }
.client-update-notice .update-help summary, .client-update-notice .update-skip { display:flex; align-items:center; justify-content:center; width:calc(50% - 4px); height:36px; min-height:36px; padding:0 10px; border:1px solid var(--line); background:var(--panel-strong); color:var(--text); font:700 10px/1.4 var(--font-ui); cursor:pointer; list-style:none; }
.client-update-notice .update-skip { position:absolute; top:0; right:0; margin:0; border-radius:0; }
.client-update-notice .update-skip:hover { border-color:var(--red); }
.client-update-notice .update-skip:focus-visible { outline:2px solid var(--wait); outline-offset:3px; }
.client-update-notice .update-help summary::-webkit-details-marker { display:none; }
.client-update-notice .update-help summary:hover { border-color:var(--red); }
.client-update-notice .update-help summary:focus-visible { outline:2px solid var(--wait); outline-offset:3px; }
.client-update-notice .update-help summary::after { content:"+"; margin-left:10px; color:var(--muted-strong); }
.client-update-notice .update-help[open] summary::after { content:"−"; }
.client-update-notice .update-help ol { display:grid; gap:12px; margin:14px 0 0; padding:0; color:var(--muted-strong); font:12px/1.6 var(--font-ui); list-style:none; counter-reset:update-step; }
.client-update-notice .update-help li { position:relative; padding-left:27px; counter-increment:update-step; }
.client-update-notice .update-help li::before { position:absolute; left:0; top:2px; content:counter(update-step, decimal-leading-zero); color:var(--muted); font:10px/1.6 var(--font-mono); }
.client-update-notice .update-help b { color:var(--text); font-weight:600; }
.client-update-notice .update-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:18px; }
.client-update-notice .update-method { min-width:0; padding:16px; border:1px solid var(--line-soft); background:var(--panel-strong); }
.client-update-notice .update-method h3 { margin:0; padding-bottom:12px; border-bottom:1px solid var(--line-soft); color:var(--text); font:700 12px/1.4 var(--font-ui); }
.client-update-notice .update-method h3 span { display:block; margin-top:5px; color:var(--muted); font:10px/1.4 var(--font-mono); }
.client-update-notice .update-complete { grid-column:1/-1; margin:6px 0 0; color:var(--muted-strong); font:11px/1.6 var(--font-ui); }
.client-update-notice .update-reload { padding:0; border:0; background:transparent; color:var(--red); font:inherit; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.client-update-notice .update-reload:hover { color:var(--red); }
.client-update-notice .update-reload:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
@media (max-width:580px) { .client-update-notice { padding:20px; } .client-update-notice .update-methods { grid-template-columns:1fr; } }