diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4f65b134..0c7188ea 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -146,6 +146,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * Track-advance queue pushes no longer suspend idle auto-pull, so the connection LED does not flash yellow on every song change. Yellow sync still appears after a local queue edit while paused; it clears while audio is playing.
 
+### Update notification — clearer popup on Linux
+
+**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#1142](https://github.com/Psychotoxical/psysonic/pull/1142)**, reported by zunoz on Discord
+
+* The "new version available" popup no longer shows blurry, unfocused text on some Linux setups (the background blur could bleed onto the dialog). The version arrow now lines up with the heading, and the Skip / Remind me later buttons read clearly — Remind me later is the highlighted action when there's no in-app installer.
+
 
 ## [1.48.1] - 2026-06-15
 
diff --git a/src/components/AppUpdater.tsx b/src/components/AppUpdater.tsx
index 30383772..42e3ec5d 100644
--- a/src/components/AppUpdater.tsx
+++ b/src/components/AppUpdater.tsx
@@ -1,10 +1,11 @@
-import { createPortal } from 'react-dom';
+import { type ReactNode } from 'react';
 import { open } from '@tauri-apps/plugin-shell';
-import { ArrowUpCircle, CheckCircle2, ChevronDown, Download, FolderOpen, RefreshCw, ShieldCheck, X } from 'lucide-react';
+import { ArrowUpCircle, CheckCircle2, ChevronDown, Download, FolderOpen, RefreshCw, ShieldCheck } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { version as currentVersion } from '../../package.json';
 import { formatBytes } from '../utils/format/formatBytes';
 import { useAppUpdater } from '../hooks/useAppUpdater';
+import Modal from './Modal';
 import Changelog from './appUpdater/Changelog';
 
 export default function AppUpdater() {
@@ -18,222 +19,208 @@ export default function AppUpdater() {
 
   if (!release || dismissed) return null;
 
-  return createPortal(
-    <>
-      <div className="eq-popup-backdrop" onClick={() => setDismissed(true)} style={{ zIndex: 3000 }} />
-      <div
-        className="eq-popup update-modal"
-        style={{ zIndex: 3001 }}
-        onClick={e => e.stopPropagation()}
-      >
-        {/* Header */}
-        <div className="eq-popup-header update-modal-header">
-          <ArrowUpCircle size={16} style={{ color: 'var(--accent)', flexShrink: 0 }} />
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <span className="eq-popup-title">{t('common.updaterModalTitle')}</span>
-            <span className="update-modal-versions">
-              v{currentVersion} → <strong>v{release.version}</strong>
-            </span>
-          </div>
-          <button
-            className="app-updater-dismiss"
-            onClick={() => setDismissed(true)}
-            data-tooltip={t('common.updaterRemindBtn')}
-            data-tooltip-pos="bottom"
-          >
-            <X size={14} />
+  // Footer actions — state-dependent. Downloading has no actions (no footer).
+  // When there is no in-app install (AUR / from-source), "Remind me later" is the
+  // primary action, so it gets the accent button; Skip stays a clear button.
+  let footer: ReactNode = null;
+  if (dlState === 'idle') {
+    footer = (
+      <>
+        <button className="btn btn-surface" onClick={handleSkip}>
+          {t('common.updaterSkipBtn')}
+        </button>
+        <div style={{ flex: 1 }} />
+        <button
+          className={`btn ${showInstallBtn ? 'btn-surface' : 'btn-primary'}`}
+          onClick={() => setDismissed(true)}
+        >
+          {t('common.updaterRemindBtn')}
+        </button>
+        {showInstallBtn && (
+          <button className="btn btn-primary" onClick={handleDownload}>
+            <Download size={14} />
+            {useTauriUpdater
+              ? t('common.updaterInstallNow', { defaultValue: 'Install now' })
+              : t('common.updaterDownloadBtn')}
           </button>
-        </div>
+        )}
+      </>
+    );
+  } else if (dlState === 'done' && useTauriUpdater) {
+    footer = (
+      <>
+        <div style={{ flex: 1 }} />
+        <button className="btn btn-primary" onClick={handleRestartNow}>
+          <RefreshCw size={14} />
+          {t('common.updaterRestartNow', { defaultValue: 'Restart now' })}
+        </button>
+      </>
+    );
+  } else if (dlState === 'done') {
+    footer = (
+      <>
+        <div style={{ flex: 1 }} />
+        <button className="btn btn-primary" onClick={() => setDismissed(true)}>
+          {t('common.updaterRemindBtn')}
+        </button>
+      </>
+    );
+  } else if (dlState === 'error') {
+    footer = (
+      <>
+        <button className="btn btn-surface" onClick={() => setDismissed(true)}>
+          {t('common.updaterRemindBtn')}
+        </button>
+        <div style={{ flex: 1 }} />
+        <button className="btn btn-primary" onClick={handleDownload}>
+          {t('common.updaterRetryBtn')}
+        </button>
+      </>
+    );
+  }
 
-        {/* Scrollable body: changelog + download area — single overflow container */}
-        <div className="update-modal-body">
-          {/* Collapsible Changelog */}
-          {release.body && (
-            <div className="update-modal-changelog">
-              <button
-                type="button"
-                className="update-modal-changelog-toggle"
-                onClick={() => setChangelogOpen(v => !v)}
-              >
-                <ChevronDown
-                  size={13}
-                  style={{
-                    transform: changelogOpen ? 'rotate(180deg)' : 'none',
-                    transition: 'transform 0.2s',
-                    flexShrink: 0,
-                  }}
-                />
-                {t('common.updaterChangelog')}
-              </button>
-              {changelogOpen && (
-                <div className="update-modal-changelog-body">
-                  <Changelog body={release.body} />
-                </div>
-              )}
-            </div>
-          )}
-
-        {/* Download / AUR area */}
-        <div className="update-modal-download-area">
-          {showAurHint ? (
-            <div className="update-modal-aur">
-              <div className="update-modal-aur-title">{t('common.updaterAurHint')}</div>
-              <code className="update-modal-aur-cmd">yay -S psysonic-bin</code>
-              <code className="update-modal-aur-cmd update-modal-aur-alt">sudo pacman -Syu psysonic-bin</code>
-            </div>
-          ) : useTauriUpdater ? (
-            <>
-              {dlState === 'idle' && (
-                <div className="update-modal-mac-info">
-                  <div className="update-modal-mac-info-main">
-                    {t('common.updaterMacReadyTitle', { defaultValue: 'Ready to install' })}
-                  </div>
-                  <div className="update-modal-mac-info-sub">
-                    {t('common.updaterMacReady', {
-                      defaultValue: 'The update downloads, verifies and applies in place — no DMG needed. The app restarts automatically when done.',
-                    })}
-                  </div>
-                  <div className="update-modal-trust-badges">
-                    <span className="update-modal-trust-badge">
-                      <ShieldCheck size={12} />
-                      {t('common.updaterTrustNotarized', { defaultValue: 'Notarized by Apple' })}
-                    </span>
-                    <span className="update-modal-trust-badge">
-                      <CheckCircle2 size={12} />
-                      {t('common.updaterTrustSignature', { defaultValue: 'Signature verified' })}
-                    </span>
-                  </div>
-                </div>
-              )}
-              {dlState === 'downloading' && (
-                <div className="update-modal-progress">
-                  <div className="app-updater-progress-bar">
-                    <div className="app-updater-progress-fill" style={{ width: `${pct}%` }} />
-                  </div>
-                  <span className="app-updater-pct">{pct}%</span>
-                  <span className="update-modal-dl-bytes">
-                    {formatBytes(dlProgress.bytes)}
-                    {dlProgress.total > 0 && ` / ${formatBytes(dlProgress.total)}`}
-                  </span>
-                </div>
-              )}
-              {dlState === 'done' && (
-                <div className="update-modal-done">
-                  <CheckCircle2 size={32} className="update-modal-done-icon" />
-                  <div className="update-modal-done-title">
-                    {t('common.updaterMacDoneTitle', { defaultValue: 'Update installed' })}
-                  </div>
-                  <div className="update-modal-done-countdown">
-                    {countdown !== null
-                      ? t('common.updaterRestartingIn', { defaultValue: 'Restarting in {{n}}s…', n: countdown })
-                      : t('common.updaterRestarting', { defaultValue: 'Restarting…' })}
-                  </div>
-                </div>
-              )}
-              {dlState === 'error' && (
-                <div className="app-updater-error">{dlError || t('common.updaterErrorMsg')}</div>
-              )}
-            </>
-          ) : asset ? (
-            <>
-              {dlState === 'idle' && (
-                <div className="update-modal-asset">
-                  <span className="update-modal-asset-name">{asset.name}</span>
-                  <span className="update-modal-asset-size">{formatBytes(asset.size)}</span>
-                </div>
-              )}
-              {dlState === 'downloading' && (
-                <div className="update-modal-progress">
-                  <div className="app-updater-progress-bar">
-                    <div className="app-updater-progress-fill" style={{ width: `${pct}%` }} />
-                  </div>
-                  <span className="app-updater-pct">{pct}%</span>
-                  <span className="update-modal-dl-bytes">
-                    {formatBytes(dlProgress.bytes)}
-                    {dlProgress.total > 0 && ` / ${formatBytes(dlProgress.total)}`}
-                  </span>
-                </div>
-              )}
-              {dlState === 'done' && (
-                <div className="update-modal-done">
-                  <div className="update-modal-done-title">{t('common.updaterDone')}</div>
-                  <div className="update-modal-done-hint">{t('common.updaterInstallHint')}</div>
-                  <button className="btn btn-surface update-modal-folder-btn" onClick={handleShowFolder}>
-                    <FolderOpen size={14} />
-                    {t('common.updaterShowFolder')}
-                  </button>
-                </div>
-              )}
-              {dlState === 'error' && (
-                <div className="app-updater-error">{dlError || t('common.updaterErrorMsg')}</div>
-              )}
-            </>
-          ) : (
-            <div className="update-modal-asset-none">
-              <button
-                className="app-updater-btn-primary"
-                onClick={() => open(`https://github.com/Psychotoxical/psysonic/releases/tag/${release.tag}`)}
-              >
-                {t('common.updaterOpenGitHub')}
-              </button>
+  return (
+    <Modal
+      open
+      onClose={() => setDismissed(true)}
+      icon={<ArrowUpCircle size={18} />}
+      title={t('common.updaterModalTitle')}
+      subtitle={<>v{currentVersion} → <strong>v{release.version}</strong></>}
+      closeLabel={t('common.updaterRemindBtn')}
+      footer={footer}
+    >
+      {/* Collapsible changelog */}
+      {release.body && (
+        <div className="update-modal-changelog">
+          <button
+            type="button"
+            className="update-modal-changelog-toggle"
+            onClick={() => setChangelogOpen(v => !v)}
+          >
+            <ChevronDown
+              size={13}
+              style={{
+                transform: changelogOpen ? 'rotate(180deg)' : 'none',
+                transition: 'transform 0.2s',
+                flexShrink: 0,
+              }}
+            />
+            {t('common.updaterChangelog')}
+          </button>
+          {changelogOpen && (
+            <div className="update-modal-changelog-body">
+              <Changelog body={release.body} />
             </div>
           )}
         </div>
-        </div>{/* end update-modal-body */}
+      )}
 
-        {/* Footer buttons — state-dependent to avoid redundant/jumping buttons */}
-        <div className="update-modal-footer">
-          {dlState === 'idle' && (
-            <>
-              <button className="btn btn-ghost update-modal-skip" onClick={handleSkip}>
-                {t('common.updaterSkipBtn')}
-              </button>
-              <div style={{ flex: 1 }} />
-              <button className="btn btn-surface" onClick={() => setDismissed(true)}>
-                {t('common.updaterRemindBtn')}
-              </button>
-              {showInstallBtn && (
-                <button className="btn btn-primary" onClick={handleDownload}>
-                  <Download size={14} />
-                  {useTauriUpdater
-                    ? t('common.updaterInstallNow', { defaultValue: 'Install now' })
-                    : t('common.updaterDownloadBtn')}
+      {/* Download / AUR area */}
+      <div className="update-modal-download-area">
+        {showAurHint ? (
+          <div className="update-modal-aur">
+            <div className="update-modal-aur-title">{t('common.updaterAurHint')}</div>
+            <code className="update-modal-aur-cmd">yay -S psysonic-bin</code>
+            <code className="update-modal-aur-cmd update-modal-aur-alt">sudo pacman -Syu psysonic-bin</code>
+          </div>
+        ) : useTauriUpdater ? (
+          <>
+            {dlState === 'idle' && (
+              <div className="update-modal-mac-info">
+                <div className="update-modal-mac-info-main">
+                  {t('common.updaterMacReadyTitle', { defaultValue: 'Ready to install' })}
+                </div>
+                <div className="update-modal-mac-info-sub">
+                  {t('common.updaterMacReady', {
+                    defaultValue: 'The update downloads, verifies and applies in place — no DMG needed. The app restarts automatically when done.',
+                  })}
+                </div>
+                <div className="update-modal-trust-badges">
+                  <span className="update-modal-trust-badge">
+                    <ShieldCheck size={12} />
+                    {t('common.updaterTrustNotarized', { defaultValue: 'Notarized by Apple' })}
+                  </span>
+                  <span className="update-modal-trust-badge">
+                    <CheckCircle2 size={12} />
+                    {t('common.updaterTrustSignature', { defaultValue: 'Signature verified' })}
+                  </span>
+                </div>
+              </div>
+            )}
+            {dlState === 'downloading' && (
+              <div className="update-modal-progress">
+                <div className="app-updater-progress-bar">
+                  <div className="app-updater-progress-fill" style={{ width: `${pct}%` }} />
+                </div>
+                <span className="app-updater-pct">{pct}%</span>
+                <span className="update-modal-dl-bytes">
+                  {formatBytes(dlProgress.bytes)}
+                  {dlProgress.total > 0 && ` / ${formatBytes(dlProgress.total)}`}
+                </span>
+              </div>
+            )}
+            {dlState === 'done' && (
+              <div className="update-modal-done">
+                <CheckCircle2 size={32} className="update-modal-done-icon" />
+                <div className="update-modal-done-title">
+                  {t('common.updaterMacDoneTitle', { defaultValue: 'Update installed' })}
+                </div>
+                <div className="update-modal-done-countdown">
+                  {countdown !== null
+                    ? t('common.updaterRestartingIn', { defaultValue: 'Restarting in {{n}}s…', n: countdown })
+                    : t('common.updaterRestarting', { defaultValue: 'Restarting…' })}
+                </div>
+              </div>
+            )}
+            {dlState === 'error' && (
+              <div className="app-updater-error">{dlError || t('common.updaterErrorMsg')}</div>
+            )}
+          </>
+        ) : asset ? (
+          <>
+            {dlState === 'idle' && (
+              <div className="update-modal-asset">
+                <span className="update-modal-asset-name">{asset.name}</span>
+                <span className="update-modal-asset-size">{formatBytes(asset.size)}</span>
+              </div>
+            )}
+            {dlState === 'downloading' && (
+              <div className="update-modal-progress">
+                <div className="app-updater-progress-bar">
+                  <div className="app-updater-progress-fill" style={{ width: `${pct}%` }} />
+                </div>
+                <span className="app-updater-pct">{pct}%</span>
+                <span className="update-modal-dl-bytes">
+                  {formatBytes(dlProgress.bytes)}
+                  {dlProgress.total > 0 && ` / ${formatBytes(dlProgress.total)}`}
+                </span>
+              </div>
+            )}
+            {dlState === 'done' && (
+              <div className="update-modal-done">
+                <div className="update-modal-done-title">{t('common.updaterDone')}</div>
+                <div className="update-modal-done-hint">{t('common.updaterInstallHint')}</div>
+                <button className="btn btn-surface update-modal-folder-btn" onClick={handleShowFolder}>
+                  <FolderOpen size={14} />
+                  {t('common.updaterShowFolder')}
                 </button>
-              )}
-            </>
-          )}
-          {dlState === 'downloading' && <div style={{ flex: 1 }} />}
-          {dlState === 'done' && useTauriUpdater && (
-            <>
-              <div style={{ flex: 1 }} />
-              <button className="btn btn-primary" onClick={handleRestartNow}>
-                <RefreshCw size={14} />
-                {t('common.updaterRestartNow', { defaultValue: 'Restart now' })}
-              </button>
-            </>
-          )}
-          {dlState === 'done' && !useTauriUpdater && (
-            <>
-              <div style={{ flex: 1 }} />
-              <button className="btn btn-surface" onClick={() => setDismissed(true)}>
-                {t('common.updaterRemindBtn')}
-              </button>
-            </>
-          )}
-          {dlState === 'error' && (
-            <>
-              <div style={{ flex: 1 }} />
-              <button className="btn btn-surface" onClick={() => setDismissed(true)}>
-                {t('common.updaterRemindBtn')}
-              </button>
-              <button className="btn btn-primary" onClick={handleDownload}>
-                {t('common.updaterRetryBtn')}
-              </button>
-            </>
-          )}
-        </div>
+              </div>
+            )}
+            {dlState === 'error' && (
+              <div className="app-updater-error">{dlError || t('common.updaterErrorMsg')}</div>
+            )}
+          </>
+        ) : (
+          <div className="update-modal-asset-none">
+            <button
+              className="app-updater-btn-primary"
+              onClick={() => open(`https://github.com/Psychotoxical/psysonic/releases/tag/${release.tag}`)}
+            >
+              {t('common.updaterOpenGitHub')}
+            </button>
+          </div>
+        )}
       </div>
-    </>,
-    document.body
+    </Modal>
   );
 }
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
new file mode 100644
index 00000000..bf1a78fe
--- /dev/null
+++ b/src/components/Modal.tsx
@@ -0,0 +1,78 @@
+import { type ReactNode, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X } from 'lucide-react';
+
+interface ModalProps {
+  open: boolean;
+  /** Called on Escape, backdrop click, and the header close button. */
+  onClose: () => void;
+  title: ReactNode;
+  /** Smaller line under the title (e.g. a version range). */
+  subtitle?: ReactNode;
+  /** Leading icon, aligned with the title line. */
+  icon?: ReactNode;
+  /** Action row pinned to the bottom, above the modal edge. */
+  footer?: ReactNode;
+  size?: 'sm' | 'md' | 'lg';
+  /** Hide the header close (X) button. */
+  hideClose?: boolean;
+  /** Accessible label / tooltip for the close button. */
+  closeLabel?: string;
+  children: ReactNode;
+}
+
+/**
+ * Reusable modal shell: a portal to `document.body` with an opaque, centered
+ * card over a dimmed backdrop. Closes on Escape, backdrop click and the header
+ * X. Deliberately uses **no `backdrop-filter`** — on WebKitGTK (some GPU stacks)
+ * the blur bleeds onto the modal content, making text look unfocused. The other
+ * hand-rolled modals migrate onto this over time.
+ */
+export default function Modal({
+  open, onClose, title, subtitle, icon, footer, size = 'md', hideClose, closeLabel, children,
+}: ModalProps) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div className="ui-modal-backdrop" onClick={onClose}>
+      <div
+        className={`ui-modal ui-modal--${size}`}
+        role="dialog"
+        aria-modal="true"
+        onClick={e => e.stopPropagation()}
+      >
+        <div className="ui-modal-header">
+          {icon && <span className="ui-modal-icon">{icon}</span>}
+          <div className="ui-modal-titles">
+            <span className="ui-modal-title">{title}</span>
+            {subtitle != null && <span className="ui-modal-subtitle">{subtitle}</span>}
+          </div>
+          {!hideClose && (
+            <button
+              type="button"
+              className="ui-modal-close"
+              onClick={onClose}
+              aria-label={closeLabel ?? 'Close'}
+              data-tooltip={closeLabel}
+              data-tooltip-pos="bottom"
+            >
+              <X size={16} />
+            </button>
+          )}
+        </div>
+        <div className="ui-modal-body">{children}</div>
+        {footer && <div className="ui-modal-footer">{footer}</div>}
+      </div>
+    </div>,
+    document.body,
+  );
+}
diff --git a/src/styles/components/index.css b/src/styles/components/index.css
index 582c13aa..b29817e5 100644
--- a/src/styles/components/index.css
+++ b/src/styles/components/index.css
@@ -17,6 +17,7 @@
 @import './share-queue-preview-modal.css';
 @import './tracklist.css';
 @import './modal.css';
+@import './ui-modal.css';
 @import './playback-delay-sleep-delayed-start-modal.css';
 @import './lucky-mix-pips-shared-by-the-inline-queue-lucky-cube-indicator.css';
 @import './playback-buffering-overlay.css';
diff --git a/src/styles/components/ui-modal.css b/src/styles/components/ui-modal.css
new file mode 100644
index 00000000..1f673ab9
--- /dev/null
+++ b/src/styles/components/ui-modal.css
@@ -0,0 +1,98 @@
+/* ─── Reusable Modal shell (src/components/Modal.tsx) ─── */
+@keyframes ui-modal-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.ui-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 3000;
+  background: var(--modal-scrim, rgba(0, 0, 0, 0.5));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6vh 16px;
+  animation: fadeIn 150ms ease both;
+  /* No backdrop-filter: on WebKitGTK (some GPU stacks) the blur bleeds onto the
+     modal content and makes its text look unfocused. */
+}
+
+.ui-modal {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: min(520px, 94vw);
+  max-height: 88vh;
+  background: var(--bg-sidebar);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
+  animation: ui-modal-in 200ms ease both;
+}
+.ui-modal--sm { width: min(400px, 94vw); }
+.ui-modal--lg { width: min(720px, 94vw); }
+
+.ui-modal-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 14px 16px 12px 18px;
+}
+.ui-modal-icon {
+  display: flex;
+  align-items: center;
+  margin-top: 1px;
+  color: var(--accent);
+  flex-shrink: 0;
+}
+.ui-modal-titles {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ui-modal-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.3;
+}
+.ui-modal-subtitle {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.ui-modal-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  padding: 2px;
+  background: none;
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  color: var(--text-muted);
+  opacity: 0.7;
+  transition: opacity var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
+}
+.ui-modal-close:hover {
+  opacity: 1;
+  color: var(--text-primary);
+  background: var(--bg-glass);
+}
+
+.ui-modal-body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.ui-modal-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 12px 18px;
+  border-top: 1px solid var(--border-subtle);
+  flex-shrink: 0;
+}
diff --git a/src/styles/layout/update-toast.css b/src/styles/layout/update-toast.css
index e66403ac..a1a00e1f 100644
--- a/src/styles/layout/update-toast.css
+++ b/src/styles/layout/update-toast.css
@@ -34,18 +34,6 @@
   text-transform: uppercase;
   flex: 1;
 }
-.app-updater-dismiss {
-  background: none;
-  border: none;
-  cursor: pointer;
-  color: var(--text-muted);
-  padding: 0;
-  display: flex;
-  align-items: center;
-  opacity: 0.6;
-  transition: opacity var(--transition-fast);
-}
-.app-updater-dismiss:hover { opacity: 1; }
 .app-updater-version {
   font-size: 12px;
   color: var(--text-secondary);
@@ -136,30 +124,7 @@
   font-style: italic;
 }
 
-/* ── Update Modal ────────────────────────────────────────────────────────── */
-.update-modal {
-  width: min(520px, 94vw);
-  gap: 0;
-  padding: 0;
-  max-height: 85vh;
-  display: flex;
-  flex-direction: column;
-}
-.update-modal-header {
-  padding: 14px 16px 14px 18px;
-}
-.update-modal-versions {
-  font-size: 12px;
-  color: var(--text-muted);
-  display: block;
-  margin-top: 2px;
-}
-/* Scrollable middle section (changelog + download area combined) */
-.update-modal-body {
-  flex: 1;
-  overflow-y: auto;
-  min-height: 0;
-}
+/* ── Update Modal — content styles (the shell is the reusable Modal) ── */
 /* Changelog accordion */
 .update-modal-changelog {
   border-top: 1px solid var(--border-subtle);
@@ -318,22 +283,6 @@
 .update-modal-asset-none {
   padding: 4px 0;
 }
-/* Footer */
-.update-modal-footer {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  padding: 12px 18px;
-  border-top: 1px solid var(--border-subtle);
-  flex-shrink: 0;
-}
-.update-modal-skip {
-  font-size: 12px;
-  color: var(--text-muted);
-  padding: var(--space-1) var(--space-2);
-}
-.update-modal-skip:hover { color: var(--text-secondary); }
-
 .update-toast {
   margin: 0 var(--space-1) var(--space-2);
   padding: var(--space-3) var(--space-3);