diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf33d51..84f73db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,27 @@ All notable changes to DLSSync are documented here.
 The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.6.4] - 2026-06-02
+
+A visual overhaul. The game detail panel, the library filters, and the About, Settings, and Backups pages were rebuilt, the whole app reads correctly in light mode, and notifications stop repeating themselves and start telling you something worth reading.
+
+### Added
+
+- A "DLL updates ready" notification that sums up what is waiting — "8 updates ready in 3 games" — and opens the Library when you click it, so you are not counting per game.
+
+### Changed
+
+- The game detail panel is part of the window now, not a card floating beside it. The title bar runs the full width with minimize, maximize, and close in the corner where they belong, the whole top edge drags the window, and the panel keeps a fixed header and footer so the cover, the anti-cheat warning, and the Apply button stay put while the rest scrolls. The thin line above the cover takes its color from the game's art.
+- Library filters went from two rows of scattered pills to two compact menus, Launcher and Status, that never wrap; sort, view, and density sit together on the right.
+- About, Settings, and Backups were redesigned for clearer hierarchy and tidier stat cards, and every tab shows one title instead of two.
+- Notifications carry the vendor's logo — NVIDIA, AMD, Intel, Microsoft — in place of a generic glyph.
+
+### Fixed
+
+- Light mode is legible everywhere. White text over a bright cover no longer washes out, and the version picker, command palette, and notifications no longer bleed the blurred cover art into a reddish smear behind the content.
+- The same "new driver available" alert was re-posted on every launch; identical notifications collapse to one now.
+- The command palette search box dropped its boxy focus outline, and the page title no longer appears twice at the top of every tab.
+
 ## [1.6.3] - 2026-06-01
 
 DLSSync speaks your language now, and it stops standing between you and the DLSS Enabler.
@@ -94,6 +115,7 @@ of the Arc desktop package, and install progress no longer breaks when you switc
 - AMD opens its official download page instead of a constructed installer URL. The direct `.exe` is gated behind a license prompt and its filename changes per release, so a fabricated link was unreliable; version and changelog detection are unchanged.
 - Vendor installer exit codes are reported with a readable message. Intel's "no compatible device" (exit code 8) now explains the GPU may be OEM-locked or need a different driver branch, pointing to the manufacturer or Windows Update.
 
+[1.6.4]: https://github.com/xt0n1-t3ch/DLSSync/releases/tag/v1.6.4
 [1.6.3]: https://github.com/xt0n1-t3ch/DLSSync/releases/tag/v1.6.3
 [1.6.2]: https://github.com/xt0n1-t3ch/DLSSync/releases/tag/v1.6.2
 [1.6.1]: https://github.com/xt0n1-t3ch/DLSSync/releases/tag/v1.6.1
diff --git a/Cargo.lock b/Cargo.lock
index 946cd78..e8e295b 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -105,7 +105,7 @@ dependencies = [
 
 [[package]]
 name = "anticheat-detect"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "jwalk",
  "memchr",
@@ -352,7 +352,7 @@ checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
 
 [[package]]
 name = "backup-store"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "chrono",
  "rusqlite",
@@ -1094,7 +1094,7 @@ dependencies = [
 
 [[package]]
 name = "dll-catalog"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "bytes",
  "chrono",
@@ -1117,7 +1117,7 @@ dependencies = [
 
 [[package]]
 name = "dll-scanner"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "jwalk",
  "once_cell",
@@ -1154,7 +1154,7 @@ dependencies = [
 
 [[package]]
 name = "dlssync"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "anticheat-detect",
  "anyhow",
@@ -1236,7 +1236,7 @@ dependencies = [
 
 [[package]]
 name = "driver-catalog"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "async-trait",
  "chrono",
@@ -1252,7 +1252,7 @@ dependencies = [
 
 [[package]]
 name = "driver-install"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "dll-catalog",
  "futures-util",
@@ -2558,7 +2558,7 @@ dependencies = [
 
 [[package]]
 name = "launcher-scan"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "serde",
  "serde_json",
@@ -2695,7 +2695,7 @@ dependencies = [
 
 [[package]]
 name = "manifest-builder"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "anyhow",
  "chrono",
@@ -2880,7 +2880,7 @@ dependencies = [
 
 [[package]]
 name = "notifications-store"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "chrono",
  "rusqlite",
@@ -2972,7 +2972,7 @@ dependencies = [
 
 [[package]]
 name = "nvapi-drs"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "serde",
  "windows-sys 0.59.0",
@@ -3335,7 +3335,7 @@ checksum = "df94ce210e5bc13cb6651479fa48d14f601d9858cfe0467f43ae157023b938d3"
 
 [[package]]
 name = "pe-version"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "pelite",
  "serde",
@@ -4705,7 +4705,7 @@ dependencies = [
 
 [[package]]
 name = "system-drivers"
-version = "1.6.3"
+version = "1.6.4"
 dependencies = [
  "serde",
  "tempfile",
diff --git a/Cargo.toml b/Cargo.toml
index c2181b1..3b2e5a4 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -3,7 +3,7 @@ resolver = "2"
 members = ["src-tauri", "crates/*"]
 
 [workspace.package]
-version = "1.6.3"
+version = "1.6.4"
 edition = "2021"
 license = "Apache-2.0"
 repository = "https://github.com/xt0n1-t3ch/DLSSync"
diff --git a/crates/notifications-store/src/lib.rs b/crates/notifications-store/src/lib.rs
index 3f3419c..ceb4819 100644
--- a/crates/notifications-store/src/lib.rs
+++ b/crates/notifications-store/src/lib.rs
@@ -25,6 +25,7 @@ pub enum NotificationKind {
     CatalogUpdateAvailable,
     DriverUpdateAvailable,
     SystemDriverUpdateAvailable,
+    DllUpdatesAvailable,
     BackupRestored,
     ScanFailed,
     CatalogRefreshFailed,
@@ -40,6 +41,7 @@ impl NotificationKind {
             Self::CatalogUpdateAvailable => "catalog_update_available",
             Self::DriverUpdateAvailable => "driver_update_available",
             Self::SystemDriverUpdateAvailable => "system_driver_update_available",
+            Self::DllUpdatesAvailable => "dll_updates_available",
             Self::BackupRestored => "backup_restored",
             Self::ScanFailed => "scan_failed",
             Self::CatalogRefreshFailed => "catalog_refresh_failed",
@@ -55,6 +57,7 @@ impl NotificationKind {
             "catalog_update_available" => Ok(Self::CatalogUpdateAvailable),
             "driver_update_available" => Ok(Self::DriverUpdateAvailable),
             "system_driver_update_available" => Ok(Self::SystemDriverUpdateAvailable),
+            "dll_updates_available" => Ok(Self::DllUpdatesAvailable),
             "backup_restored" => Ok(Self::BackupRestored),
             "scan_failed" => Ok(Self::ScanFailed),
             "catalog_refresh_failed" => Ok(Self::CatalogRefreshFailed),
@@ -384,6 +387,7 @@ mod tests {
             NotificationKind::CatalogUpdateAvailable,
             NotificationKind::DriverUpdateAvailable,
             NotificationKind::SystemDriverUpdateAvailable,
+            NotificationKind::DllUpdatesAvailable,
             NotificationKind::BackupRestored,
             NotificationKind::ScanFailed,
             NotificationKind::CatalogRefreshFailed,
diff --git a/frontend/package.json b/frontend/package.json
index e16a319..1989ef3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "dlssync-frontend",
   "private": true,
-  "version": "1.6.3",
+  "version": "1.6.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 7250858..fbf5e70 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -37,7 +37,7 @@
     installDriverInstallListener,
     installSystemDriverListener,
   } from "./lib/driverInstallEvents";
-  import { isLocale, localeFromNavigator, setLocale } from "./lib/i18n/index";
+  import { isLocale, localeFromNavigator, setLocale, t } from "./lib/i18n/index";
 
   let theme = $state(localStorage.getItem("dlssync-theme") || "dark");
 
@@ -54,6 +54,7 @@
   }
 
   let collapsed = $derived($settings?.ui_prefs.sidebar_collapsed ?? false);
+  let railGameId = $derived($currentView === "library" ? $drawerGameId : null);
 
   onMount(async () => {
     await loadSettings();
@@ -114,7 +115,7 @@
   });
 </script>
 
-<div class="app-shell">
+<div class="app-shell" class:rail-open={!!railGameId} class:sidebar-collapsed={collapsed}>
   <div class="app-ambient" aria-hidden="true">
     <div class="ambient-mesh"></div>
     {#if $activeArt}
@@ -123,36 +124,40 @@
     <div class="ambient-grain"></div>
   </div>
   <Sidebar />
-  <div class="app-main" class:sidebar-collapsed={collapsed}>
-    <TopBar onToggleTheme={toggleTheme} {theme} />
+  <TopBar onToggleTheme={toggleTheme} {theme} />
+  <div class="app-main">
     <main class="main-content">
       <div class="main-inner">
-        {#if $currentView === "library" && $drawerGameId}
-          <div in:fly={{ y: 8, duration: 200 }}>
-            <GameDetailDrawer
-              gameId={$drawerGameId}
-              onClose={() => drawerGameId.set(null)}
-              onApplyStart={() => applyModalOpen.set(true)}
-            />
-          </div>
-        {:else if $currentView === "library"}
-          <div in:fly={{ y: 8, duration: 200 }}><Library /></div>
-        {:else if $currentView === "catalog"}
-          <div in:fly={{ y: 8, duration: 200 }}><Catalog /></div>
-        {:else if $currentView === "backups"}
-          <div in:fly={{ y: 8, duration: 200 }}><Backups /></div>
-        {:else if $currentView === "drivers"}
-          <div in:fly={{ y: 8, duration: 200 }}><Drivers /></div>
-        {:else if $currentView === "settings"}
-          <div in:fly={{ y: 8, duration: 200 }}>
-            <Settings onToggleTheme={toggleTheme} currentTheme={theme} />
-          </div>
-        {:else if $currentView === "about"}
-          <div in:fly={{ y: 8, duration: 200 }}><About /></div>
-        {/if}
+        <div class="main-primary">
+          {#if $currentView === "library"}
+            <div in:fly={{ y: 8, duration: 200 }}><Library /></div>
+          {:else if $currentView === "catalog"}
+            <div in:fly={{ y: 8, duration: 200 }}><Catalog /></div>
+          {:else if $currentView === "backups"}
+            <div in:fly={{ y: 8, duration: 200 }}><Backups /></div>
+          {:else if $currentView === "drivers"}
+            <div in:fly={{ y: 8, duration: 200 }}><Drivers /></div>
+          {:else if $currentView === "settings"}
+            <div in:fly={{ y: 8, duration: 200 }}>
+              <Settings onToggleTheme={toggleTheme} currentTheme={theme} />
+            </div>
+          {:else if $currentView === "about"}
+            <div in:fly={{ y: 8, duration: 200 }}><About /></div>
+          {/if}
+        </div>
       </div>
     </main>
   </div>
+  {#if railGameId}
+    <button class="rail-scrim" aria-label={$t("common.close")} onclick={() => drawerGameId.set(null)}></button>
+    <aside class="detail-rail" class:has-rail={!!railGameId} in:fly={{ x: 24, duration: 220 }}>
+      <GameDetailDrawer
+        gameId={railGameId}
+        onClose={() => drawerGameId.set(null)}
+        onApplyStart={() => applyModalOpen.set(true)}
+      />
+    </aside>
+  {/if}
 </div>
 <Toast />
 <ActivityDock />
@@ -175,9 +180,35 @@
     position: fixed;
     inset: 0;
     z-index: 1;
-    display: flex;
+    display: grid;
+    grid-template-rows: var(--topbar-height) 1fr;
+    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 0fr;
     overflow: hidden;
     background: transparent;
+    transition: grid-template-columns var(--dur-normal) var(--ease-out);
+  }
+  .app-shell.sidebar-collapsed {
+    grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr) 0fr;
+  }
+  .app-shell.rail-open {
+    grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--drawer-width);
+  }
+  .app-shell.rail-open.sidebar-collapsed {
+    grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr) var(--drawer-width);
+  }
+  .app-shell :global(.sidebar) {
+    grid-row: 1 / -1;
+    grid-column: 1;
+    height: 100%;
+  }
+  .app-shell :global(.topbar) {
+    grid-row: 1;
+    grid-column: 2 / -1;
+    position: relative;
+    z-index: 70;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .app-shell { transition: none; }
   }
   .app-ambient {
     position: absolute;
@@ -232,24 +263,78 @@
   /* The content column: the topbar overlays the top so scrolling content frosts
      under it (real glass), and the sidebar is an integrated column to the left. */
   .app-main {
+    grid-row: 2;
+    grid-column: 2;
     position: relative;
     z-index: 1;
-    flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
+    overflow: hidden;
   }
   .main-content {
     flex: 1;
     overflow-y: auto;
     background: transparent;
-    padding-top: var(--topbar-height);
   }
   .main-inner {
     max-width: var(--content-max);
     padding: clamp(18px, 2.4vw, 36px) clamp(18px, 3.2vw, 48px) clamp(16px, 2vw, 28px);
     margin: 0 auto;
   }
+  .main-primary { min-width: 0; }
+
+  .detail-rail {
+    grid-row: 2;
+    grid-column: 3;
+    position: relative;
+    z-index: 2;
+    height: 100%;
+    width: var(--drawer-width);
+    overflow: hidden;
+    border-inline-start: 1px solid var(--border);
+  }
+  .detail-rail :global(.detail-view) { width: 100%; height: 100%; }
+  .rail-scrim { display: none; }
+
+  @media (min-width: 1120px) {
+    .app-shell.rail-open {
+      grid-template-columns: var(--sidebar-width) minmax(var(--rail-width), 1fr) var(--drawer-width);
+    }
+    .app-shell.rail-open.sidebar-collapsed {
+      grid-template-columns: var(--sidebar-width-collapsed) minmax(var(--rail-width), 1fr) var(--drawer-width);
+    }
+  }
+
+  @media (max-width: 1119px) {
+    .app-shell.rail-open,
+    .app-shell.rail-open.sidebar-collapsed {
+      grid-template-columns: var(--sidebar-width) minmax(0, 1fr) 0fr;
+    }
+    .app-shell.rail-open.sidebar-collapsed {
+      grid-template-columns: var(--sidebar-width-collapsed) minmax(0, 1fr) 0fr;
+    }
+    .rail-scrim {
+      display: block;
+      position: fixed;
+      inset: var(--topbar-height) 0 0 0;
+      z-index: 59;
+      background: var(--bg-overlay);
+      border: none;
+      cursor: pointer;
+    }
+    .detail-rail {
+      position: fixed;
+      top: var(--topbar-height);
+      right: 0;
+      bottom: 0;
+      width: min(95vw, var(--drawer-width));
+      height: auto;
+      z-index: 60;
+      border-inline-start: 1px solid var(--border);
+    }
+  }
+
   @media (max-width: 720px) {
     .main-inner { padding: 16px 16px 20px; }
   }
diff --git a/frontend/src/components/CommandPalette.svelte b/frontend/src/components/CommandPalette.svelte
index c69f04d..4c31e93 100644
--- a/frontend/src/components/CommandPalette.svelte
+++ b/frontend/src/components/CommandPalette.svelte
@@ -463,6 +463,7 @@
     padding: 0;
     outline: none;
   }
+  .palette-search input:focus { outline: none; border: none; box-shadow: none; }
   .palette-search input::placeholder { color: var(--text-placeholder); font-weight: 400; }
   .palette-search input::selection { background: var(--accent-soft); color: var(--text-primary); }
   .palette-search-kbd {
diff --git a/frontend/src/components/FilterMenu.svelte b/frontend/src/components/FilterMenu.svelte
new file mode 100644
index 0000000..2811d59
--- /dev/null
+++ b/frontend/src/components/FilterMenu.svelte
@@ -0,0 +1,298 @@
+<script lang="ts">
+  import { tick } from "svelte";
+  import { fly } from "svelte/transition";
+
+  type Option = { id: string; label: string; count?: number; tone?: "danger" | null };
+
+  let {
+    label,
+    options,
+    selectedId,
+    onSelect,
+  }: {
+    label: string;
+    options: Option[];
+    selectedId: string;
+    onSelect: (id: string) => void;
+  } = $props();
+
+  let open = $state(false);
+  let triggerEl: HTMLButtonElement | undefined = $state();
+  let panelEl: HTMLDivElement | undefined = $state();
+  let activeIndex = $state(0);
+
+  const reduced =
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  let selected = $derived(options.find((o) => o.id === selectedId) ?? options[0]);
+  let activeLabel = $derived(selected?.label ?? "");
+
+  function openMenu(): void {
+    open = true;
+    activeIndex = Math.max(0, options.findIndex((o) => o.id === selectedId));
+    void tick().then(() => panelEl?.focus());
+  }
+
+  function closeMenu(returnFocus = true): void {
+    open = false;
+    if (returnFocus) void tick().then(() => triggerEl?.focus());
+  }
+
+  function toggle(): void {
+    if (open) closeMenu();
+    else openMenu();
+  }
+
+  function move(delta: number): void {
+    const n = options.length;
+    if (n === 0) return;
+    activeIndex = (activeIndex + delta + n) % n;
+  }
+
+  function choose(id: string): void {
+    onSelect(id);
+    closeMenu();
+  }
+
+  function onTriggerKey(e: KeyboardEvent): void {
+    if (open) return;
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      openMenu();
+    }
+  }
+
+  function onPanelKey(e: KeyboardEvent): void {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeMenu();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      move(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      move(-1);
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      activeIndex = 0;
+    } else if (e.key === "End") {
+      e.preventDefault();
+      activeIndex = options.length - 1;
+    } else if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      const opt = options[activeIndex];
+      if (opt) choose(opt.id);
+    } else if (e.key === "Tab") {
+      closeMenu(false);
+    }
+  }
+
+  function onWindowPointer(e: MouseEvent): void {
+    if (!open) return;
+    const target = e.target as Node | null;
+    if (triggerEl && target && triggerEl.contains(target)) return;
+    if (panelEl && target && !panelEl.contains(target)) closeMenu(false);
+  }
+</script>
+
+<svelte:window onmousedown={onWindowPointer} />
+
+<div class="filter-menu">
+  <button
+    class="filter-menu-trigger"
+    type="button"
+    bind:this={triggerEl}
+    aria-haspopup="listbox"
+    aria-expanded={open}
+    onclick={toggle}
+    onkeydown={onTriggerKey}
+  >
+    <span class="filter-menu-label">{label}</span>
+    <span class="filter-menu-value">{activeLabel}</span>
+    <svg class="filter-menu-chevron" class:is-open={open} width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9" /></svg>
+  </button>
+
+  {#if open}
+    <div
+      class="filter-menu-popover surface"
+      role="listbox"
+      aria-label={label}
+      tabindex="-1"
+      bind:this={panelEl}
+      onkeydown={onPanelKey}
+      transition:fly={{ y: 6, duration: reduced ? 0 : 150 }}
+    >
+      {#each options as opt, i (opt.id)}
+        <button
+          class="filter-menu-option"
+          class:active={i === activeIndex}
+          class:chosen={opt.id === selectedId}
+          class:tone-danger={opt.tone === "danger"}
+          type="button"
+          role="option"
+          aria-selected={opt.id === selectedId}
+          onclick={() => choose(opt.id)}
+          onpointerenter={() => (activeIndex = i)}
+        >
+          <svg class="filter-menu-check" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
+          <span class="filter-menu-option-label">{opt.label}</span>
+          {#if opt.count !== undefined}
+            <span class="filter-menu-count">{opt.count}</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .filter-menu {
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+  }
+  .filter-menu-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 32px;
+    max-width: 220px;
+    padding: 0 10px 0 12px;
+    border-radius: var(--radius-full);
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    font-size: var(--fs-sm);
+    font-weight: 500;
+    white-space: nowrap;
+    transition:
+      background var(--dur-fast) var(--ease),
+      border-color var(--dur-fast) var(--ease),
+      color var(--dur-fast) var(--ease);
+  }
+  .filter-menu-trigger:hover {
+    background: var(--bg-elevated);
+    border-color: var(--border-hover);
+    color: var(--text-primary);
+  }
+  .filter-menu-trigger[aria-expanded="true"] {
+    background: var(--accent-dim);
+    border-color: var(--accent);
+    color: var(--accent);
+  }
+  .filter-menu-trigger:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-ring);
+  }
+  .filter-menu-label {
+    font-size: var(--fs-2xs);
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: var(--letter-wider);
+    color: var(--text-muted);
+  }
+  .filter-menu-trigger[aria-expanded="true"] .filter-menu-label {
+    color: inherit;
+  }
+  .filter-menu-value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+    color: var(--text-primary);
+  }
+  .filter-menu-trigger[aria-expanded="true"] .filter-menu-value {
+    color: inherit;
+  }
+  .filter-menu-chevron {
+    flex-shrink: 0;
+    color: var(--text-muted);
+    transition: transform var(--dur-fast) var(--ease);
+  }
+  .filter-menu-trigger:hover .filter-menu-chevron,
+  .filter-menu-trigger[aria-expanded="true"] .filter-menu-chevron {
+    color: inherit;
+  }
+  .filter-menu-chevron.is-open {
+    transform: rotate(180deg);
+  }
+
+  .filter-menu-popover {
+    position: absolute;
+    top: calc(100% + 6px);
+    inset-inline-start: 0;
+    z-index: 60;
+    min-width: max(100%, 13rem);
+    max-width: min(20rem, 90vw);
+    padding: 4px;
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-lg);
+  }
+  .filter-menu-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    height: 34px;
+    padding: 0 10px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: none;
+    font: inherit;
+    font-size: var(--fs-sm);
+    text-align: left;
+    color: var(--text-secondary);
+    cursor: pointer;
+  }
+  .filter-menu-check {
+    flex-shrink: 0;
+    opacity: 0;
+    color: var(--accent);
+  }
+  .filter-menu-option.chosen .filter-menu-check {
+    opacity: 1;
+  }
+  .filter-menu-option-label {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .filter-menu-count {
+    flex-shrink: 0;
+    font-size: var(--fs-2xs);
+    font-weight: 600;
+    padding: 1px 6px;
+    border-radius: var(--radius-full);
+    background: var(--bg-elevated);
+    color: var(--text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+  .filter-menu-option.active {
+    background: var(--bg-card-hover);
+    color: var(--text-primary);
+  }
+  .filter-menu-option.chosen {
+    color: var(--accent);
+    font-weight: 600;
+  }
+  .filter-menu-option.chosen .filter-menu-count {
+    background: var(--accent-glow);
+    color: var(--accent);
+  }
+  .filter-menu-option.tone-danger.chosen {
+    color: var(--danger);
+  }
+  .filter-menu-option.tone-danger.chosen .filter-menu-check {
+    color: var(--danger);
+  }
+  .filter-menu-option.tone-danger.chosen .filter-menu-count {
+    background: var(--danger-glow);
+    color: var(--danger);
+  }
+  .filter-menu-option:focus-visible {
+    outline: none;
+    box-shadow: var(--shadow-ring);
+  }
+</style>
diff --git a/frontend/src/components/GameCard.svelte b/frontend/src/components/GameCard.svelte
index 4dfd800..c838a4c 100644
--- a/frontend/src/components/GameCard.svelte
+++ b/frontend/src/components/GameCard.svelte
@@ -233,7 +233,7 @@
   .game-card:hover {
     transform: translateY(-2px);
     border-color: var(--accent-ring);
-    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--accent-dim);
+    box-shadow: var(--shadow-card-hover);
   }
   .game-card.is-hidden { opacity: 0.78; }
   .game-card.is-hidden .art-img { filter: grayscale(0.4) brightness(0.85); }
diff --git a/frontend/src/components/GameDetailDrawer.svelte b/frontend/src/components/GameDetailDrawer.svelte
index 2ff39ff..95f13ee 100644
--- a/frontend/src/components/GameDetailDrawer.svelte
+++ b/frontend/src/components/GameDetailDrawer.svelte
@@ -3,6 +3,7 @@
   import { get } from "svelte/store";
   import { t, locale, translate } from "../lib/i18n/index";
   import { setActiveArt, clearActiveArt } from "../lib/artContext";
+  import { coverAccent } from "../lib/coverAccent";
   import { EXTERNAL_URLS, STREAMLINE_OVERRIDE_NOTE } from "../lib/ux";
   import {
     games,
@@ -51,9 +52,22 @@
   } = $props();
 
   let game = $derived($games.find((g) => g.id === gameId));
+  let coverAccentColor = $state<string | null>(null);
   $effect(() => {
     if (game?.image_url) setActiveArt(game.image_url);
   });
+  $effect(() => {
+    const url = game?.image_url;
+    coverAccentColor = null;
+    if (!url) return;
+    let active = true;
+    void coverAccent(url).then((color) => {
+      if (active) coverAccentColor = color;
+    });
+    return () => {
+      active = false;
+    };
+  });
 
   onDestroy(() => {
     clearActiveArt();
@@ -491,10 +505,9 @@
 <svelte:window onkeydown={(e) => { if (game && e.key === "Escape") onClose(); }} />
 
 {#if game}
-  <div class="detail-view" style:--launcher-accent={accent} aria-label={game.name}>
-    <button class="detail-back" onclick={onClose} title={$t("component.gameDrawer.backToLibraryTitle")}>
-      <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
-      {$t("component.gameDrawer.backToLibrary")}
+  <div class="detail-view" style:--launcher-accent={accent} style:--game-accent={coverAccentColor ?? "var(--accent)"} aria-label={game.name}>
+    <button class="detail-back" onclick={onClose} title={$t("component.gameDrawer.backToLibraryTitle")} aria-label={$t("component.gameDrawer.backToLibrary")}>
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
     </button>
     <header class="detail-hero">
       <div class="drawer-art">
@@ -506,7 +519,7 @@
         <div class="drawer-art-overlay"></div>
       </div>
       <div class="drawer-meta">
-        <span class="launcher-chip" style:background={accent}>{launcherLabel(game.launcher)}</span>
+        <span class="launcher-chip">{launcherLabel(game.launcher)}</span>
         <h2 class="drawer-title">{game.name}</h2>
         <p class="drawer-path mono truncate" title={game.install_dir}>{game.install_dir}</p>
       </div>
@@ -542,7 +555,7 @@
       {#if acActive}
         <div class="warning-banner edge-accent" class:is-warning={acSeverity !== "danger"} class:is-danger={acSeverity === "danger"} role="alert">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
-          <span>{warningMessage(acReport!)}{#if acStatus} {acStatus}{/if}</span>
+          <span class="warning-text">{warningMessage(acReport!)}{#if acStatus} {acStatus}{/if}</span>
           <button
             class="learn-more"
             title={$t("component.gameDrawer.anticheat.learnMoreTitle")}
@@ -559,7 +572,7 @@
       {#if dlssEnabler}
         <div class="warning-banner edge-accent is-info" role="status">
           <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
-          <span>{$t("note.enablerManaged")}</span>
+          <span class="warning-text">{$t("note.enablerManaged")}</span>
         </div>
       {/if}
 
@@ -620,7 +633,7 @@
         {/if}
 
         {#if featureBuckets.length > 0}
-          <ul class="feature-list">
+          <ul class="feature-list stagger">
             {#each featureBuckets as b (b.feature)}
               {@const selState = featureSelectionState(b)}
               {@const expanded = !!expandedFeatures[b.feature]}
@@ -868,7 +881,7 @@
       {/if}
 
       {#if game && !loading && !rescanning}
-        <section class="advanced-block" class:open={dlssExpanded} style="margin-top: 12px;">
+        <section class="advanced-block" class:open={dlssExpanded}>
           <button type="button" class="advanced-head" onclick={toggleDlss} aria-expanded={dlssExpanded}>
             <span class="advanced-titles">
               <span class="advanced-name">
@@ -899,22 +912,21 @@
     </div>
 
     <footer class="drawer-foot">
-      <button class="btn btn-ghost" onclick={openFolder} title={$t("component.gameDrawer.foot.openFolderTitle")}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
-        {$t("view.library.menu.openFolder")}
+      <button class="btn btn-ghost foot-util" onclick={openFolder} title={$t("component.gameDrawer.foot.openFolderTitle")} aria-label={$t("view.library.menu.openFolder")}>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+      </button>
+      <button class="btn btn-ghost foot-util" onclick={doRescan} title={$t("component.gameDrawer.foot.rescanTitle")} aria-label={$t("view.library.rescan")} disabled={loading || rescanning}>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
       </button>
-      <button class="btn btn-ghost" onclick={doRescan} title={$t("component.gameDrawer.foot.rescanTitle")} disabled={loading || rescanning}>
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
-        {$t("view.library.rescan")}
+      <button class="btn btn-ghost foot-util" onclick={toggleHidden} title={isHidden ? $t("component.gameDrawer.foot.restore") : $t("component.gameDrawer.foot.hide")} aria-label={isHidden ? $t("component.gameDrawer.foot.restore") : $t("component.gameDrawer.foot.hide")}>
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
       </button>
-      <button class="btn btn-ghost" onclick={toggleHidden}>{isHidden ? $t("component.gameDrawer.foot.restore") : $t("component.gameDrawer.foot.hide")}</button>
-      <div class="foot-spacer"></div>
       {#if aheadCount > 0}
         <span class="chip chip-info ahead-chip">{$t("component.gameDrawer.foot.aheadChip", { count: aheadCount })}</span>
       {/if}
       {#if streamlineSetMembers.length > 0}
         <button
-          class="btn btn-ghost"
+          class="btn btn-ghost foot-streamline"
           onclick={applyStreamlineSetAction}
           title={`${$t("component.gameDrawer.streamlineSet.title")} ${STREAMLINE_OVERRIDE_NOTE}`}
         >
@@ -924,7 +936,7 @@
         </button>
       {/if}
       <button
-        class="btn btn-primary halo is-update"
+        class="btn btn-primary halo is-update foot-apply"
         class:is-active={selectedCount > 0}
         disabled={selectedCount === 0}
         onclick={applySelected}
@@ -946,35 +958,50 @@
 
 <style>
   .detail-view {
+    container-type: inline-size;
+    container-name: drawer;
+    position: relative;
     display: flex;
     flex-direction: column;
+    height: 100%;
+    width: 100%;
+    min-height: 0;
+    gap: 0;
+    background: var(--bg-card);
+    border: none;
+    border-radius: 0;
+    overflow: hidden;
   }
   .detail-back {
+    position: absolute;
+    top: var(--space-3);
+    left: var(--space-3);
+    z-index: 5;
     display: inline-flex;
     align-items: center;
-    gap: 7px;
-    align-self: flex-start;
-    margin-bottom: 14px;
-    padding: 7px 13px 7px 10px;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
     border-radius: var(--radius-full);
-    font-size: var(--fs-sm);
-    font-weight: 600;
-    color: var(--text-secondary);
-    background: var(--bg-card);
-    border: 1px solid var(--border);
+    color: #fff;
+    background: rgba(0, 0, 0, 0.55);
+    border: 1px solid rgba(255, 255, 255, 0.3);
     cursor: pointer;
-    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
+    backdrop-filter: var(--glass-blur-bar);
+    -webkit-backdrop-filter: var(--glass-blur-bar);
+    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
   }
-  .detail-back:hover { color: var(--text-primary); background: var(--bg-card-hover); border-color: var(--border-hover); }
+  .detail-back:hover { background: rgba(0, 0, 0, 0.72); border-color: rgba(255, 255, 255, 0.5); transform: translateX(-1px); }
   .detail-back:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
 
   .detail-hero {
+    flex-shrink: 0;
     position: relative;
-    border-radius: var(--radius-xl);
+    border: none;
+    border-radius: 0;
     overflow: hidden;
-    border: 1px solid var(--border);
   }
-  .drawer-art { width: 100%; height: clamp(180px, 26vh, 260px); overflow: hidden; position: relative; }
+  .drawer-art { width: 100%; height: clamp(132px, 20vh, 190px); overflow: hidden; position: relative; }
   .drawer-art::before {
     content: "";
     position: absolute;
@@ -982,7 +1009,7 @@
     left: 0;
     right: 0;
     height: 2px;
-    background: var(--launcher-accent, var(--accent));
+    background: var(--game-accent, var(--launcher-accent, var(--accent)));
     z-index: 2;
     pointer-events: none;
   }
@@ -994,15 +1021,22 @@
     align-items: center;
     justify-content: center;
     background: var(--bg-art-fallback);
-    color: var(--launcher-accent, var(--accent));
-    font-size: 96px;
+    color: var(--accent);
+    font-size: var(--fs-display);
     font-weight: 700;
     opacity: 0.55;
   }
   .drawer-art-overlay {
     position: absolute;
     inset: 0;
-    background: linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.95) 100%);
+    background: linear-gradient(
+      180deg,
+      rgba(0, 0, 0, 0.5) 0%,
+      rgba(0, 0, 0, 0.12) 22%,
+      rgba(0, 0, 0, 0) 44%,
+      rgba(0, 0, 0, 0.58) 72%,
+      rgba(0, 0, 0, 0.92) 100%
+    );
     pointer-events: none;
   }
   .drawer-meta {
@@ -1010,101 +1044,131 @@
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 18px 22px 20px;
+    padding: var(--space-4) var(--space-5) var(--space-4);
     z-index: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-2);
   }
   .launcher-chip {
     display: inline-flex;
     align-items: center;
-    padding: 3px 9px;
+    padding: 3px var(--space-2);
     border-radius: var(--radius-full);
-    font-size: 10px;
+    font-size: var(--fs-2xs);
     font-weight: 700;
     letter-spacing: var(--letter-wider);
     text-transform: uppercase;
-    color: #0a0d13;
-    margin-bottom: 8px;
+    background: var(--accent);
+    color: var(--accent-fg);
   }
   .drawer-title {
-    font-size: 22px;
+    font-size: var(--fs-xl-plus);
     font-weight: 700;
+    line-height: var(--lh-tight);
     letter-spacing: var(--letter-tighter);
     color: #fff;
-    margin-bottom: 4px;
-    text-shadow: 0 2px 8px rgba(0,0,0,0.8);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 12px rgba(0, 0, 0, 0.8);
+  }
+  .drawer-path {
+    font-size: var(--fs-xs);
+    color: rgba(255, 255, 255, 0.88);
+    max-width: 100%;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
   }
-  .drawer-path { font-size: 11px; color: rgba(255,255,255,0.78); }
 
   .drawer-body {
-    padding: 18px 2px 24px;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--space-4) var(--space-4) var(--space-5);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    scrollbar-width: none;
+    -ms-overflow-style: none;
   }
+  .drawer-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
 
   .warning-banner {
     position: relative;
-    overflow: hidden;
     display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 12px 14px 12px 16px;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    column-gap: var(--space-3);
+    row-gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
     border-radius: var(--radius-md);
     background: var(--warning-dim);
     border: 1px solid var(--warning);
     color: var(--warning);
-    font-size: 11.5px;
-    line-height: 1.45;
-    margin-bottom: 20px;
+    font-size: var(--fs-sm);
+    line-height: var(--lh-snug);
   }
   .warning-banner.is-danger {
-    background: var(--danger-dim, rgba(220, 70, 70, 0.14));
-    border-color: var(--danger, #dc4646);
-    color: var(--danger, #dc4646);
+    background: var(--danger-dim);
+    border-color: var(--danger);
+    color: var(--danger);
   }
   .warning-banner.is-info {
-    background: var(--info-dim, rgba(10, 132, 255, 0.12));
+    background: var(--info-dim);
     border-color: var(--info);
     color: var(--info);
   }
-  .warning-banner svg { flex-shrink: 0; margin-top: 1px; }
+  .warning-banner svg { flex-shrink: 0; margin-top: 2px; }
+  .warning-text {
+    flex: 1 1 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
+    white-space: normal;
+  }
   .learn-more {
     margin-left: auto;
     height: 28px;
-    padding: 0 12px;
+    padding: 0 var(--space-3);
     border-radius: var(--radius-md);
-    background: rgba(255, 255, 255, 0.08);
+    background: var(--bg-cap);
     color: currentColor;
-    font-size: 11px;
+    font-size: var(--fs-xs);
     font-weight: 600;
-    letter-spacing: 0.02em;
+    letter-spacing: var(--letter-wide);
     border: 1px solid currentColor;
-    flex-shrink: 0;
+    flex: 0 0 auto;
+    align-self: flex-start;
     display: inline-flex;
     align-items: center;
+    white-space: nowrap;
+    cursor: pointer;
     transition:
       background var(--dur-fast) var(--ease),
       color var(--dur-fast) var(--ease);
   }
   .learn-more:hover {
-    background: rgba(255, 255, 255, 0.18);
+    background: var(--bg-elevated);
     color: var(--text-primary);
   }
   .learn-more:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
 
   .status-ribbon {
+    flex-shrink: 0;
     display: flex;
     align-items: center;
     gap: 8px;
-    margin-top: 14px;
-    padding: 10px 16px;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-md);
+    margin: 0;
+    padding: 11px 16px;
+    border: none;
+    border-top: 1px solid var(--border);
+    border-radius: 0;
     font-size: var(--fs-sm);
     color: var(--text-secondary);
-    background: var(--bg-elevated);
+    background: var(--bg-card);
     font-variant-numeric: tabular-nums;
   }
-  .status-ribbon.is-update { color: var(--update); background: var(--update-dim); border-color: var(--update-glow); }
-  .status-ribbon.is-success { color: var(--success); background: var(--success-dim); border-color: var(--success-glow); }
-  .status-ribbon.is-danger { color: var(--danger); background: var(--danger-dim); border-color: var(--danger-glow); }
+  .status-ribbon.is-update { color: var(--update); background: var(--update-dim); }
+  .status-ribbon.is-success { color: var(--success); background: var(--success-dim); }
+  .status-ribbon.is-danger { color: var(--danger); background: var(--danger-dim); }
   .status-ribbon.is-muted { color: var(--text-muted); }
   .ribbon-dot {
     width: 7px;
@@ -1136,55 +1200,67 @@
   .empty-state .error-hint { color: var(--text-secondary); }
 
   .summary-row {
-    display: flex;
-    gap: 6px;
-    padding: 10px 12px;
-    background: var(--bg-elevated);
-    border-radius: var(--radius-md);
-    margin-bottom: 16px;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: var(--space-2);
   }
   .summary-stat {
-    flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 4px;
+    gap: var(--space-1);
+    padding: var(--space-3) var(--space-2);
+    background: var(--bg-cap);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
   }
   .stat-num {
-    font-size: 20px;
+    font-size: var(--fs-xl);
     font-weight: 700;
     color: var(--text-primary);
     letter-spacing: var(--letter-tighter);
     font-variant-numeric: tabular-nums;
+    line-height: var(--lh-tight);
   }
   .stat-num.is-update { color: var(--update); }
   .stat-num.is-accent { color: var(--accent); }
   .stat-label {
-    font-size: 9.5px;
-    color: var(--text-muted);
+    font-size: var(--fs-2xs);
     text-transform: uppercase;
     letter-spacing: var(--letter-wider);
-    margin-top: 2px;
+    color: var(--text-muted);
   }
 
-  .quick-actions { display: flex; gap: 8px; margin-bottom: 16px; }
+  .quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
 
-  .feature-list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
+  .feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
   .feature-row {
     position: relative;
     display: grid;
     grid-template-columns: 22px 36px 1fr auto;
-    gap: 12px;
+    gap: var(--space-3);
     align-items: flex-start;
-    padding: 14px 16px;
+    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
+    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
+  }
+  .feature-row:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
+  .feature-row.is-update {
+    border-color: color-mix(in srgb, var(--update) 40%, var(--border));
+    background: color-mix(in srgb, var(--update-dim) 50%, var(--bg-card));
+  }
+  .feature-row.is-update::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: var(--space-3);
+    bottom: var(--space-3);
+    width: 3px;
+    border-radius: 0 var(--radius-full) var(--radius-full) 0;
+    background: var(--update);
   }
-  .feature-row.is-update { border-color: rgba(34, 211, 238, 0.30); }
-  .feature-row.is-update:hover { background: var(--bg-card-hover); border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--accent-dim); }
-  .feature-row:hover { background: var(--bg-card-hover); }
   .feature-row.disabled { opacity: 0.55; }
 
   .feature-check { display: inline-flex; cursor: pointer; padding-top: 3px; }
@@ -1237,7 +1313,8 @@
     width: 36px;
     height: 36px;
     border-radius: var(--radius-md);
-    background: color-mix(in srgb, var(--feature-accent) 14%, var(--bg-elevated));
+    background: color-mix(in srgb, var(--feature-accent) 16%, var(--bg-elevated));
+    border: 1px solid color-mix(in srgb, var(--feature-accent) 28%, transparent);
     color: var(--feature-accent);
     display: inline-flex;
     align-items: center;
@@ -1246,9 +1323,9 @@
   }
 
   .feature-body { min-width: 0; }
-  .feature-head { display: flex; align-items: center; gap: 8px; }
-  .feature-title { font-size: 13.5px; font-weight: 600; color: var(--text-primary); letter-spacing: var(--letter-tight); }
-  .feature-blurb { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
+  .feature-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+  .feature-title { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); letter-spacing: var(--letter-tight); }
+  .feature-blurb { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); line-height: var(--lh-snug); }
 
   .feature-versions {
     display: flex;
@@ -1332,7 +1409,7 @@
   .files-list {
     grid-column: 1 / -1;
     list-style: none;
-    margin: 14px -4px 0;
+    margin: 12px 0 2px;
     padding: 8px 6px;
     background: var(--bg-input);
     border: 1px solid var(--border);
@@ -1342,9 +1419,9 @@
   }
   .files-list.flat {
     grid-column: auto;
+    margin: 0;
     background: var(--bg-card);
     border-radius: var(--radius-md);
-    margin: 0;
   }
   .file-row {
     position: relative;
@@ -1377,20 +1454,20 @@
   .small-chip { padding: 1px 7px; font-size: 9.5px; letter-spacing: 0.04em; }
 
   .advanced-block {
-    margin-top: 16px;
     background: transparent;
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
+    border: none;
+    border-top: 1px solid var(--border);
+    border-radius: 0;
     overflow: hidden;
-    transition: background 0.15s var(--ease);
+    transition: background var(--dur-fast) var(--ease);
   }
-  .advanced-block.open { background: var(--bg-elevated); }
+  .advanced-block.open { background: transparent; }
   .advanced-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
-    padding: 12px 14px;
+    padding: 14px 4px;
     background: none;
     border: none;
     color: inherit;
@@ -1398,7 +1475,7 @@
     cursor: pointer;
     text-align: left;
   }
-  .advanced-head:hover { background: var(--bg-elevated); }
+  .advanced-head:hover { background: var(--bg-card-hover); border-radius: var(--radius-md); }
   .advanced-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   .advanced-name {
     display: inline-flex;
@@ -1418,46 +1495,57 @@
   }
   .advanced-chevron.open { transform: rotate(180deg); color: var(--text-primary); }
   .count.chip { padding: 1px 7px; }
-  .dlss-drawer-body { padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px; }
+  .dlss-drawer-body { padding: 0 4px 12px; display: flex; flex-direction: column; gap: 10px; }
 
   .drawer-foot {
     position: sticky;
-    bottom: 16px;
-    margin-top: 20px;
-    padding: 12px 14px;
-    border: 1px solid var(--border-strong);
-    border-radius: var(--radius-lg);
-    background: var(--bg-elevated);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+    bottom: 0;
+    flex-shrink: 0;
+    margin: 0;
+    padding: var(--space-3) var(--space-4);
+    background: var(--glass-2);
+    backdrop-filter: var(--glass-blur-bar);
+    -webkit-backdrop-filter: var(--glass-blur-bar);
+    border-top: 1px solid var(--border);
+    box-shadow: var(--glass-edge);
     display: flex;
-    gap: 8px;
-    align-items: center;
     flex-wrap: wrap;
-    container-type: inline-size;
+    gap: var(--space-2);
+    align-items: center;
     z-index: 4;
   }
-  .foot-spacer { flex: 1 1 0; min-width: 0; }
-  .ahead-chip { padding: 3px 8px; flex-shrink: 0; }
-
-  @container (max-width: 460px) {
-    .drawer-foot { padding: 12px 14px; gap: 6px; row-gap: 8px; }
-    .drawer-foot .btn-primary {
-      order: 99;
-      width: 100%;
-      justify-content: center;
-    }
-    .foot-spacer { display: none; }
-    .ahead-chip { order: 98; flex: 1 0 100%; text-align: center; }
+  .drawer-foot::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: calc(-1 * var(--space-4));
+    height: var(--space-4);
+    background: linear-gradient(to top, var(--bg-card), transparent);
+    pointer-events: none;
   }
-
-  @container (max-width: 360px) {
-    .drawer-foot .btn-ghost {
-      padding-left: 8px;
-      padding-right: 8px;
-      font-size: 0;
-    }
-    .drawer-foot .btn-ghost svg { margin: 0; }
+  .drawer-foot .foot-util {
+    flex: 0 0 auto;
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    justify-content: center;
+  }
+  .drawer-foot .foot-util svg { margin: 0; }
+  .drawer-foot .foot-apply {
+    flex: 1 1 auto;
+    min-width: 150px;
+    height: 40px;
+    order: 9;
+    justify-content: center;
+  }
+  .drawer-foot .foot-streamline {
+    flex: 1 1 100%;
+    height: 40px;
+    order: 8;
+    justify-content: center;
   }
+  .ahead-chip { order: 7; padding: 4px var(--space-3); flex: 0 0 auto; }
 
   .spinner {
     width: 14px;
@@ -1468,4 +1556,15 @@
     animation: spin 0.7s linear infinite;
   }
   @keyframes spin { to { transform: rotate(360deg); } }
+
+  @container drawer (max-width: 420px) {
+    .summary-row { gap: var(--space-1); }
+    .summary-stat { padding: var(--space-2) var(--space-1); }
+    .feature-row {
+      grid-template-columns: 22px 1fr auto;
+      column-gap: var(--space-2);
+    }
+    .feature-glyph { display: none; }
+    .drawer-foot .foot-apply { flex: 1 1 100%; order: 9; }
+  }
 </style>
diff --git a/frontend/src/components/NotificationsBell.svelte b/frontend/src/components/NotificationsBell.svelte
index 0a67075..4a48a33 100644
--- a/frontend/src/components/NotificationsBell.svelte
+++ b/frontend/src/components/NotificationsBell.svelte
@@ -14,6 +14,7 @@
   import { EXTERNAL_URLS } from "../lib/ux";
   import { t, translate, locale } from "../lib/i18n/index";
   import { get } from "svelte/store";
+  import BrandMark from "./BrandMark.svelte";
 
   let { open, onClose }: { open: boolean; onClose: () => void } = $props();
   let panelEl: HTMLDivElement | undefined = $state();
@@ -61,6 +62,9 @@
     } else if (entry.kind === "driver_update_available" || entry.kind === "system_driver_update_available") {
       currentView.set("drivers");
       onClose();
+    } else if (entry.kind === "dll_updates_available") {
+      currentView.set("library");
+      onClose();
     } else if (entry.kind === "backup_restored") {
       currentView.set("backups");
       onClose();
@@ -127,6 +131,7 @@
       case "apply_cancelled": return "↺";
       case "app_update_available": return "↑";
       case "catalog_update_available": return "★";
+      case "dll_updates_available": return "⟳";
       case "driver_update_available":
       case "system_driver_update_available": return "⬇";
       case "backup_restored": return "↺";
@@ -136,6 +141,15 @@
     }
   }
 
+  function vendorKeyForEntry(entry: NotificationEntry): string | null {
+    const s = `${entry.title} ${entry.body ?? ""}`.toLowerCase();
+    if (/nvidia|dlss|reflex|streamline|geforce|\brtx\b|nvngx/.test(s)) return "nvidia";
+    if (/\bamd\b|\bfsr\b|fidelityfx|radeon/.test(s)) return "amd";
+    if (/intel|xess|\barc\b/.test(s)) return "intel";
+    if (/microsoft|directstorage/.test(s)) return "microsoft";
+    return null;
+  }
+
   function tintForKind(kind: NotificationKind): string {
     switch (kind) {
       case "apply_success": return "green";
@@ -143,6 +157,7 @@
       case "apply_cancelled": return "orange";
       case "app_update_available": return "blue";
       case "catalog_update_available": return "purple";
+      case "dll_updates_available": return "blue";
       case "driver_update_available": return "green";
       case "system_driver_update_available": return "purple";
       case "backup_restored": return "green";
@@ -165,6 +180,7 @@
         <div class="bell-panel-empty">{$t("component.notif.empty")}</div>
       {:else}
         {#each entries as entry (entry.id)}
+          {@const vendorKey = vendorKeyForEntry(entry)}
           <div
             class="bell-item"
             class:bell-item-unread={entry.read_at == null}
@@ -180,9 +196,15 @@
                 onclick={() => handleItemClick(entry)}
                 aria-label="{$t('notifKind.' + entry.kind)}: {entry.title}"
               >
-                <span class="aura-badge bell-item-badge" data-tint={tintForKind(entry.kind)} aria-hidden="true">
-                  {kindIcon(entry.kind)}
-                </span>
+                {#if vendorKey}
+                  <span class="bell-item-badge bell-item-logo" aria-hidden="true">
+                    <BrandMark key={vendorKey} tone="color" size={18} showLabel={false} />
+                  </span>
+                {:else}
+                  <span class="aura-badge bell-item-badge" data-tint={tintForKind(entry.kind)} aria-hidden="true">
+                    {kindIcon(entry.kind)}
+                  </span>
+                {/if}
                 <span class="bell-item-text">
                   <span class="bell-item-title">{entry.title}</span>
                   {#if entry.body}
@@ -243,6 +265,7 @@
     box-shadow: var(--shadow-lg);
     z-index: 200;
   }
+  .bell-panel.glass-dialog::before { display: none; }
   @media (max-width: 460px) {
     .bell-panel {
       left: 12px;
@@ -328,6 +351,14 @@
     font-size: 14px;
     font-weight: 700;
     line-height: 1;
+    flex-shrink: 0;
+  }
+  .bell-item-logo {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
   }
   .bell-item-text {
     display: flex;
diff --git a/frontend/src/components/Sidebar.svelte b/frontend/src/components/Sidebar.svelte
index f34d8dc..2fbc752 100644
--- a/frontend/src/components/Sidebar.svelte
+++ b/frontend/src/components/Sidebar.svelte
@@ -67,7 +67,7 @@
 </script>
 
 <aside class="sidebar" class:collapsed>
-  <div class="sidebar-brand">
+  <div class="sidebar-brand" data-tauri-drag-region>
     <span class="brand-pill" aria-hidden="true">
       <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
         <path d="M3 12a9 9 0 1 0 3-6.7"/>
@@ -168,15 +168,15 @@
   .sidebar-brand {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: var(--space-3);
     height: var(--topbar-height);
-    padding: 0 14px;
+    padding: 0 var(--space-4);
     border-bottom: 1px solid var(--border);
   }
   .sidebar.collapsed .sidebar-brand { padding: 0; justify-content: center; }
   .brand-pill {
-    width: 44px;
-    height: 44px;
+    width: 40px;
+    height: 40px;
     border-radius: var(--radius-lg);
     background: var(--accent-dim);
     color: var(--accent);
@@ -184,55 +184,70 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    box-shadow: inset 0 0 0 1px var(--accent-ring);
   }
-  .brand-wrap { display: flex; flex-direction: column; gap: 0; line-height: 1.1; min-width: 0; }
+  .brand-wrap { display: flex; flex-direction: column; gap: 0; line-height: var(--lh-tight); min-width: 0; }
   .brand-name {
-    font-size: 15px;
+    font-size: var(--fs-lg);
     font-weight: 700;
-    letter-spacing: -0.01em;
+    letter-spacing: var(--letter-tight);
     color: var(--text-primary);
   }
-  .brand-version { font-size: 9.5px; color: var(--text-muted); margin-top: 2px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
+  .brand-version { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
   .sidebar-nav {
     display: flex;
     flex-direction: column;
-    gap: 4px;
-    padding: 14px 14px;
+    gap: var(--space-1);
+    padding: var(--space-4);
     overflow-y: auto;
   }
-  .sidebar.collapsed .sidebar-nav { padding: 14px 10px; align-items: center; }
+  .sidebar.collapsed .sidebar-nav { padding: var(--space-4) var(--space-2); align-items: center; }
   .nav-label {
-    font-size: 10px;
+    font-size: var(--fs-2xs);
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: var(--letter-wider);
     color: var(--text-muted);
-    padding: 10px 10px 4px;
+    padding: var(--space-3) var(--space-3) var(--space-1);
   }
+  .nav-label:not(:first-child) { margin-top: var(--space-2); }
   .nav-pill {
     position: relative;
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: var(--space-3);
     width: 100%;
-    height: 44px;
-    padding: 0 12px;
-    border-radius: var(--radius-lg);
+    height: 42px;
+    padding: 0 var(--space-3);
+    border-radius: var(--radius-md);
     color: var(--text-secondary);
-    font-size: 14px;
+    font-size: var(--fs-md);
     font-weight: 500;
     transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--spring);
   }
-  .sidebar.collapsed .nav-pill { width: 44px; height: 44px; justify-content: center; padding: 0; }
+  .sidebar.collapsed .nav-pill { width: 42px; height: 42px; justify-content: center; padding: 0; }
   .nav-pill :global(svg) { width: 20px; height: 20px; flex-shrink: 0; }
   .nav-pill:hover { background: var(--bg-card-hover); color: var(--text-primary); transform: translateX(2px); }
   .nav-pill:active { transform: translateX(2px) scale(0.99); }
+  .nav-pill:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
   .nav-pill.active {
+    background: var(--accent-dim);
+    color: var(--accent);
+    font-weight: 600;
+  }
+  .nav-pill.active::before {
+    content: "";
+    position: absolute;
+    left: calc(-1 * var(--space-3));
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 18px;
+    border-radius: var(--radius-full);
     background: var(--accent);
-    color: var(--accent-fg);
-    box-shadow: 0 4px 14px var(--accent-dim);
   }
-  .nav-pill.active:hover { background: var(--accent-hover); }
+  .sidebar.collapsed .nav-pill.active::before { left: -7px; }
+  .nav-pill.active:hover { background: var(--accent-dim); transform: none; }
   .nav-label-text { flex: 1; text-align: left; }
   .nav-counter {
     font-family: var(--font-mono);
@@ -245,50 +260,51 @@
     font-variant-numeric: tabular-nums;
     min-width: 18px;
     text-align: center;
-    line-height: 1.4;
+    line-height: var(--lh-tight);
   }
   .nav-counter.is-update { background: var(--update-dim); color: var(--update); }
-  .nav-pill.active .nav-counter { background: rgba(255, 255, 255, 0.22); color: var(--accent-fg); }
+  .nav-pill.active .nav-counter { background: var(--bg-card); color: var(--accent); }
   .nav-counter.is-collapsed {
     position: absolute;
     top: 2px;
     right: 2px;
     padding: 0 4px;
     min-width: 14px;
-    font-size: 9px;
-    line-height: 1.4;
+    font-size: var(--fs-2xs);
+    line-height: var(--lh-tight);
   }
 
   .lang-switcher {
-    margin: auto 14px 0;
+    margin: auto var(--space-4) 0;
     width: auto;
     border-top: 1px solid var(--border);
     border-radius: 0;
-    padding: 14px 12px 12px;
+    padding: var(--space-4) var(--space-3) var(--space-3);
     height: auto;
   }
   .sidebar.collapsed .lang-switcher {
-    width: 44px;
+    width: 42px;
     height: auto;
-    margin: auto 10px 0;
-    padding: 14px 0 0;
+    margin: auto var(--space-2) 0;
+    padding: var(--space-4) 0 0;
     justify-content: center;
     border-radius: 0;
   }
   .lang-switcher:hover { transform: none; }
   .lang-switcher:active { transform: scale(0.99); }
   .lang-switcher.active { background: transparent; color: var(--accent); box-shadow: none; }
+  .lang-switcher.active::before { content: none; }
   .lang-switcher.active:hover { background: var(--bg-card-hover); }
   .lang-code { flex-shrink: 0; }
 
   .sidebar-toggle {
-    margin: 10px 14px 14px;
+    margin: var(--space-2) var(--space-4) var(--space-4);
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
     height: 40px;
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-md);
     background: transparent;
     color: var(--text-muted);
     font-size: var(--fs-xs);
@@ -299,10 +315,10 @@
   .sidebar-toggle:hover { background: var(--bg-card-hover); color: var(--text-primary); }
   .sidebar-toggle:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
   .sidebar.collapsed .sidebar-toggle {
-    width: 44px;
-    height: 44px;
+    width: 42px;
+    height: 42px;
     padding: 0;
-    margin: 10px 10px 14px;
+    margin: var(--space-2) var(--space-2) var(--space-4);
     justify-content: center;
   }
   .toggle-label { white-space: nowrap; }
diff --git a/frontend/src/components/TopBar.svelte b/frontend/src/components/TopBar.svelte
index d66f822..a26cc5e 100644
--- a/frontend/src/components/TopBar.svelte
+++ b/frontend/src/components/TopBar.svelte
@@ -51,7 +51,6 @@
   }
 
   let showSearch = $derived($currentView === "library");
-  let pageTitle = $derived(showSearch ? "" : $t("view." + $currentView + ".title"));
   let unread = $derived($notificationsUnreadCount);
   let modKeyLabel = $derived(typeof navigator !== "undefined" && navigator.platform.toLowerCase().includes("mac") ? "⌘" : "Ctrl");
 </script>
@@ -71,8 +70,6 @@
         />
         <span class="kbd">/</span>
       </div>
-    {:else if pageTitle}
-      <span class="page-title">{pageTitle}</span>
     {/if}
   </div>
 
@@ -128,6 +125,7 @@
 <style>
   .topbar {
     height: var(--topbar-height);
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -139,25 +137,17 @@
     box-shadow: var(--glass-edge);
     gap: 16px;
     user-select: none;
-    -webkit-app-region: drag;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 50;
   }
   @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
     .topbar { background: var(--glass-fallback); }
   }
   .topbar-left { flex: 1; min-width: 0; display: flex; align-items: center; }
-  .page-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); letter-spacing: var(--letter-tighter); -webkit-app-region: no-drag; }
   .search-wrap {
     position: relative;
     width: 100%;
     max-width: 320px;
     display: flex;
     align-items: center;
-    -webkit-app-region: no-drag;
   }
   .search-icon {
     position: absolute;
@@ -179,7 +169,7 @@
   .search-wrap input:focus { background: var(--bg-card); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }
   .search-wrap .kbd { position: absolute; right: 12px; pointer-events: none; }
 
-  .topbar-right { display: flex; align-items: center; gap: 6px; -webkit-app-region: no-drag; }
+  .topbar-right { display: flex; align-items: center; gap: 6px; }
 
   .bell-wrap { position: relative; display: inline-flex; }
   .topbar-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-muted); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); position: relative; }
@@ -204,10 +194,20 @@
     pointer-events: none;
   }
 
-  .window-controls { display: flex; gap: 2px; margin-left: 6px; padding-left: 6px; border-left: 1px solid var(--border); }
-  .win-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); color: var(--text-muted); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
+  .window-controls { display: flex; gap: 2px; margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--border); }
+  .win-btn {
+    width: 34px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    color: var(--text-muted);
+    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
+  }
+  .win-btn:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
   .win-quiet { color: var(--text-placeholder); }
-  .win-quiet:hover { color: var(--text-secondary); background: var(--bg-elevated); }
+  .win-quiet:hover { color: var(--text-primary); background: var(--bg-elevated); }
   .win-close { color: var(--text-muted); }
-  .win-close:hover { color: #fff; background: var(--danger); }
+  .win-close:hover { color: var(--accent-fg); background: var(--danger); }
 </style>
diff --git a/frontend/src/components/VersionPickerPopover.svelte b/frontend/src/components/VersionPickerPopover.svelte
index 487c524..5d0fe74 100644
--- a/frontend/src/components/VersionPickerPopover.svelte
+++ b/frontend/src/components/VersionPickerPopover.svelte
@@ -371,37 +371,44 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: min(600px, 92vw);
+    width: min(580px, 92vw);
     max-height: 84vh;
     display: flex;
     flex-direction: column;
     z-index: 221;
+    background: var(--bg-card);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
   }
   .picker-head {
-    padding: 16px 48px 16px 18px;
+    padding: var(--space-4) 52px var(--space-4) var(--space-5);
     border-bottom: 1px solid var(--border);
     display: grid;
-    grid-template-columns: 40px 1fr;
-    gap: 12px;
+    grid-template-columns: 42px 1fr;
+    gap: var(--space-3);
     align-items: flex-start;
   }
   .picker-glyph {
-    width: 40px;
-    height: 40px;
+    width: 42px;
+    height: 42px;
     border-radius: var(--radius-md);
     background: var(--accent-dim);
     color: var(--accent);
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    box-shadow: inset 0 0 0 1px var(--accent-soft);
   }
-  .picker-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
-  .title-line { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: var(--letter-tight); }
-  .subtitle-line { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }
-  .file-line { font-size: 10px; color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .picker-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+  .title-line { font-size: var(--fs-md); font-weight: 700; color: var(--text-primary); letter-spacing: var(--letter-tight); }
+  .subtitle-line { font-size: var(--fs-xs); color: var(--text-secondary); line-height: var(--lh-snug); }
+  .file-line { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
   .rank {
-    padding: 12px 18px;
+    padding: var(--space-3) var(--space-5);
     border-bottom: 1px solid var(--border);
   }
   .rank-eyebrow {
@@ -411,11 +418,11 @@
     color: var(--text-muted);
     font-weight: 700;
     display: block;
-    margin-bottom: 6px;
+    margin-bottom: var(--space-2);
   }
   .rank-eyebrow.accent { color: var(--accent); }
   .rank-1 { background: var(--bg-input); }
-  .rank-1-row { display: flex; align-items: center; gap: 10px; }
+  .rank-1-row { display: flex; align-items: baseline; gap: var(--space-3); }
   .installed-version {
     font-size: var(--fs-xl-plus);
     font-weight: 700;
@@ -430,66 +437,84 @@
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
-    gap: 14px;
-    padding: 12px 14px;
-    background: linear-gradient(135deg, var(--accent-dim) 0%, transparent 70%);
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
+    background: var(--accent-dim);
     border: 1px solid var(--accent);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-lg);
     color: var(--text-primary);
     cursor: pointer;
-    transition: transform 0.1s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
+    transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
     text-align: left;
   }
   .rec-tile:hover {
     transform: translateY(-1px);
-    background: linear-gradient(135deg, var(--accent-glow) 0%, var(--accent-dim) 70%);
+    background: var(--accent-soft);
+    box-shadow: var(--shadow-sm);
   }
+  .rec-tile:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
   .rec-tile.is-current {
-    background: transparent;
+    background: var(--bg-elevated);
     border-color: var(--border-strong);
   }
-  .rec-tile.is-current:hover { background: var(--bg-elevated); }
-  .rec-meta { display: flex; flex-direction: column; gap: 2px; }
-  .rec-label { font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: var(--letter-wider); text-transform: uppercase; }
+  .rec-tile.is-current:hover { background: var(--bg-elevated-2); box-shadow: none; }
+  .rec-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
+  .rec-label { font-size: var(--fs-2xs); font-weight: 700; color: var(--accent); letter-spacing: var(--letter-wider); text-transform: uppercase; }
   .rec-tile.is-current .rec-label { color: var(--text-muted); }
-  .rec-version { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--letter-tighter); }
-  .rec-sub { font-size: 11px; color: var(--text-secondary); }
+  .rec-version { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--letter-tighter); color: var(--text-primary); }
+  .rec-sub { font-size: var(--fs-xs); color: var(--text-secondary); }
   .rec-cta {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
-    padding: 8px 14px;
+    gap: var(--space-1);
+    padding: var(--space-2) var(--space-3);
     background: var(--accent);
     color: var(--accent-fg);
     border-radius: var(--radius-md);
     font-size: var(--fs-sm);
     font-weight: 700;
     letter-spacing: var(--letter-tight);
+    flex-shrink: 0;
   }
   .rec-tile.is-current .rec-cta {
-    background: var(--bg-elevated);
+    background: var(--bg-elevated-2);
     color: var(--text-secondary);
   }
 
   .picker-toolbar {
-    padding: 10px 18px;
+    padding: var(--space-2) var(--space-5);
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: var(--space-2);
     border-bottom: 1px solid var(--border);
     flex-wrap: wrap;
     background: var(--bg-input);
   }
-  .picker-search { flex: 1; min-width: 160px; font-size: var(--fs-sm); padding: 6px 10px; }
-  .picker-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); cursor: pointer; user-select: none; }
+  .picker-search { flex: 1; min-width: 160px; font-size: var(--fs-sm); padding: var(--space-1) var(--space-3); }
+  .picker-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    font-size: var(--fs-xs);
+    color: var(--text-secondary);
+    cursor: pointer;
+    user-select: none;
+    padding: 5px var(--space-2);
+    border-radius: var(--radius-full);
+    border: 1px solid var(--border);
+    background: var(--bg-card);
+    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+  }
+  .picker-toggle:hover { border-color: var(--border-hover); color: var(--text-primary); }
+  .picker-toggle:has(input:checked) { border-color: var(--accent); color: var(--text-primary); }
   .picker-toggle input { accent-color: var(--accent); }
 
   .rank-3 { flex: 1; overflow-y: auto; padding: 0; }
   .group-head {
     display: flex;
     align-items: center;
-    gap: 6px;
-    padding: 10px 18px 4px;
+    gap: var(--space-1);
+    padding: var(--space-2) var(--space-5) var(--space-1);
     font-size: var(--fs-xs);
     text-transform: uppercase;
     letter-spacing: var(--letter-wider);
@@ -511,17 +536,17 @@
     font-weight: 600;
   }
   .picker-state {
-    padding: 30px 18px;
+    padding: var(--space-6) var(--space-5);
     text-align: center;
-    color: var(--text-muted);
-    font-size: 12px;
+    color: var(--text-secondary);
+    font-size: var(--fs-sm);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
   }
   .picker-state.danger { color: var(--danger); }
-  .picker-state .small { font-size: 10.5px; opacity: 0.85; max-width: 360px; }
+  .picker-state .small { font-size: var(--fs-2xs); color: var(--text-muted); max-width: 360px; }
 
   .picker-list { list-style: none; padding: 2px 0 6px; margin: 0; }
   .picker-row { padding: 0; }
@@ -530,19 +555,21 @@
     display: grid;
     grid-template-columns: 22px 1fr auto;
     align-items: center;
-    gap: 10px;
-    padding: 9px 18px;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-5);
     background: none;
     border: none;
     text-align: left;
     color: inherit;
     cursor: pointer;
     border-left: 2px solid transparent;
+    transition: background var(--dur-fast) var(--ease);
   }
   .picker-row-btn:hover { background: var(--bg-elevated); }
-  .picker-row.newer .picker-row-btn { border-left-color: rgba(34, 211, 238, 0.45); }
-  .picker-row.current .picker-row-btn { border-left-color: var(--info); background: rgba(124, 185, 232, 0.06); }
-  .picker-row.older .picker-row-btn { border-left-color: rgba(71, 80, 99, 0.5); }
+  .picker-row-btn:focus-visible { outline: none; background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border-focus); }
+  .picker-row.newer .picker-row-btn { border-left-color: color-mix(in oklab, var(--accent) 55%, transparent); }
+  .picker-row.current .picker-row-btn { border-left-color: var(--info); background: var(--info-dim); }
+  .picker-row.older .picker-row-btn { border-left-color: var(--border-strong); }
   .picker-row.active .picker-row-btn { background: var(--accent-soft); border-left-color: var(--accent); }
 
   .rank-marker {
@@ -556,24 +583,24 @@
     border-radius: var(--radius-full);
   }
   .newer-marker { color: var(--update); background: var(--update-dim); }
-  .current-marker { color: var(--info); background: rgba(124, 185, 232, 0.18); }
+  .current-marker { color: var(--info); background: var(--info-dim); }
   .older-marker { color: var(--text-muted); background: var(--neutral-dim); }
 
   .row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
-  .row-version { font-size: 13px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
-  .row-meta-line { display: flex; gap: 6px; min-width: 0; align-items: center; }
-  .row-date { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
-  .row-notes { font-size: 10px; color: var(--text-muted); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
-  .row-tags { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
+  .row-version { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
+  .row-meta-line { display: flex; gap: var(--space-1); min-width: 0; align-items: center; }
+  .row-date { font-size: var(--fs-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
+  .row-notes { font-size: var(--fs-2xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
+  .row-tags { display: inline-flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
   .row-shield { color: var(--success); display: inline-flex; }
-  .small-chip { padding: 2px 7px; font-size: 9.5px; letter-spacing: 0.04em; }
+  .small-chip { padding: 2px 7px; font-size: 9.5px; letter-spacing: var(--letter-wide); }
 
   .picker-foot {
-    padding: 9px 18px;
+    padding: var(--space-2) var(--space-5);
     border-top: 1px solid var(--border);
     background: var(--bg-input);
   }
-  .foot-count { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
+  .foot-count { font-size: var(--fs-2xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
 
   .spinner {
     width: 14px;
diff --git a/frontend/src/lib/coverAccent.ts b/frontend/src/lib/coverAccent.ts
new file mode 100644
index 0000000..5dc4828
--- /dev/null
+++ b/frontend/src/lib/coverAccent.ts
@@ -0,0 +1,111 @@
+const cache = new Map<string, string | null>();
+
+const SAMPLE_SIZE = 16;
+const NEAR_BLACK = 28;
+const NEAR_WHITE = 228;
+const GREY_SPREAD = 22;
+const MIN_SATURATION = 0.18;
+const HUE_BUCKETS = 12;
+
+interface Bucket {
+  count: number;
+  weight: number;
+  hueSum: number;
+  satSum: number;
+  litSum: number;
+}
+
+function rgbToHsl(r: number, g: number, b: number): [number, number, number] {
+  const rn = r / 255;
+  const gn = g / 255;
+  const bn = b / 255;
+  const max = Math.max(rn, gn, bn);
+  const min = Math.min(rn, gn, bn);
+  const lightness = (max + min) / 2;
+  const delta = max - min;
+  if (delta === 0) return [0, 0, lightness];
+  const saturation = delta / (1 - Math.abs(2 * lightness - 1));
+  let hue: number;
+  if (max === rn) hue = ((gn - bn) / delta) % 6;
+  else if (max === gn) hue = (bn - rn) / delta + 2;
+  else hue = (rn - gn) / delta + 4;
+  hue *= 60;
+  if (hue < 0) hue += 360;
+  return [hue, saturation, lightness];
+}
+
+function isNeutral(r: number, g: number, b: number): boolean {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  if (max <= NEAR_BLACK) return true;
+  if (min >= NEAR_WHITE) return true;
+  return max - min <= GREY_SPREAD;
+}
+
+function dominantFromPixels(data: Uint8ClampedArray): string | null {
+  const buckets = new Map<number, Bucket>();
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const a = data[i + 3];
+    if (a < 128) continue;
+    if (isNeutral(r, g, b)) continue;
+    const [hue, sat, lit] = rgbToHsl(r, g, b);
+    if (sat < MIN_SATURATION) continue;
+    const key = Math.floor(hue / (360 / HUE_BUCKETS));
+    const weight = sat * sat;
+    const bucket = buckets.get(key) ?? { count: 0, weight: 0, hueSum: 0, satSum: 0, litSum: 0 };
+    bucket.count += 1;
+    bucket.weight += weight;
+    bucket.hueSum += hue * weight;
+    bucket.satSum += sat * weight;
+    bucket.litSum += lit * weight;
+    buckets.set(key, bucket);
+  }
+  let best: Bucket | null = null;
+  for (const bucket of buckets.values()) {
+    if (!best || bucket.weight > best.weight) best = bucket;
+  }
+  if (!best || best.weight === 0) return null;
+  const hue = Math.round(best.hueSum / best.weight);
+  const sat = Math.round(Math.min(1, Math.max(0.42, best.satSum / best.weight)) * 100);
+  const lit = Math.round(Math.min(0.66, Math.max(0.46, best.litSum / best.weight)) * 100);
+  return `hsl(${hue}, ${sat}%, ${lit}%)`;
+}
+
+export function coverAccent(url: string): Promise<string | null> {
+  const cached = cache.get(url);
+  if (cached !== undefined) return Promise.resolve(cached);
+  return new Promise((resolve) => {
+    const finish = (value: string | null): void => {
+      cache.set(url, value);
+      resolve(value);
+    };
+    try {
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        try {
+          const canvas = document.createElement("canvas");
+          canvas.width = SAMPLE_SIZE;
+          canvas.height = SAMPLE_SIZE;
+          const ctx = canvas.getContext("2d", { willReadFrequently: true });
+          if (!ctx) {
+            finish(null);
+            return;
+          }
+          ctx.drawImage(img, 0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+          const { data } = ctx.getImageData(0, 0, SAMPLE_SIZE, SAMPLE_SIZE);
+          finish(dominantFromPixels(data));
+        } catch {
+          finish(null);
+        }
+      };
+      img.onerror = () => finish(null);
+      img.src = url;
+    } catch {
+      finish(null);
+    }
+  });
+}
diff --git a/frontend/src/lib/i18n/locales/_meta.json b/frontend/src/lib/i18n/locales/_meta.json
index a5478ec..1339392 100644
--- a/frontend/src/lib/i18n/locales/_meta.json
+++ b/frontend/src/lib/i18n/locales/_meta.json
@@ -654,6 +654,11 @@
     "desc": "Notification headline for a new system (non-GPU) driver. Translate fully. Source: NotificationsBell kindLabel case system_driver_update_available.",
     "where": "NotificationsBell entry title."
   },
+  "notifKind.dll_updates_available": {
+    "en": "Updates ready",
+    "desc": "Notification headline / aria for the proactive DLL-updates digest. Translate fully. Source: NotificationsBell aria notifKind.dll_updates_available.",
+    "where": "NotificationsBell entry aria-label."
+  },
   "notifKind.backup_restored": {
     "en": "Backup restored",
     "desc": "Notification headline for a restored backup. Translate fully. Source: NotificationsBell kindLabel case backup_restored.",
@@ -5229,6 +5234,21 @@
     "desc": "Notification body counting hardware categories with updates (plural)",
     "where": "stores.ts emitSystemDriverUpdateNotification"
   },
+  "notif.dll.digestTitle": {
+    "en": "{count} updates ready in {games}",
+    "desc": "Proactive digest notification title; {count} is total pending DLL updates (plural), {games} is the localized digestGames sub-phrase",
+    "where": "stores.ts emitDllUpdatesDigest"
+  },
+  "notif.dll.digestGames": {
+    "en": "{count} games",
+    "desc": "Sub-phrase counting distinct games with pending updates (plural), composed into notif.dll.digestTitle",
+    "where": "stores.ts emitDllUpdatesDigest"
+  },
+  "notif.dll.digestBody": {
+    "en": "Open the Library to apply them",
+    "desc": "Body of the proactive DLL-updates digest notification",
+    "where": "stores.ts emitDllUpdatesDigest"
+  },
   "feature.dlss_sr.title": {
     "en": "DLSS Super Resolution",
     "desc": "Display title for the DLSS Super Resolution feature, used in catalog rows, apply-modal group tiles, and drawer feature sections",
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
index 09dd47d..7ef2d9d 100644
--- a/frontend/src/lib/i18n/locales/en.json
+++ b/frontend/src/lib/i18n/locales/en.json
@@ -957,6 +957,7 @@
     "catalog_update_available": "New catalog version",
     "driver_update_available": "GPU driver update",
     "system_driver_update_available": "System driver update",
+    "dll_updates_available": "Updates ready",
     "backup_restored": "Backup restored",
     "scan_failed": "Library scan failed",
     "catalog_refresh_failed": "Catalog refresh failed",
@@ -1673,6 +1674,13 @@
       "categories_one": "Across {count} hardware category",
       "categories_other": "Across {count} hardware categories"
     },
+    "dll": {
+      "digestTitle_one": "{count} update ready in {games}",
+      "digestTitle_other": "{count} updates ready in {games}",
+      "digestGames_one": "{count} game",
+      "digestGames_other": "{count} games",
+      "digestBody": "Open the Library to apply them"
+    },
     "apply": {
       "successTitle": "{gameLabel} updated",
       "failureTitle": "{gameLabel} update failed",
diff --git a/frontend/src/lib/i18n/locales/es.json b/frontend/src/lib/i18n/locales/es.json
index f20633f..89a5434 100644
--- a/frontend/src/lib/i18n/locales/es.json
+++ b/frontend/src/lib/i18n/locales/es.json
@@ -957,6 +957,7 @@
     "catalog_update_available": "Nueva versión del catálogo",
     "driver_update_available": "Actualización de controlador de GPU",
     "system_driver_update_available": "Actualización de controlador del sistema",
+    "dll_updates_available": "Actualizaciones listas",
     "backup_restored": "Copia de seguridad restaurada",
     "scan_failed": "Error al analizar la biblioteca",
     "catalog_refresh_failed": "Error al actualizar el catálogo",
@@ -1673,6 +1674,13 @@
       "categories_one": "En {count} categoría de hardware",
       "categories_other": "En {count} categorías de hardware"
     },
+    "dll": {
+      "digestTitle_one": "{count} actualización lista en {games}",
+      "digestTitle_other": "{count} actualizaciones listas en {games}",
+      "digestGames_one": "{count} juego",
+      "digestGames_other": "{count} juegos",
+      "digestBody": "Abre la Biblioteca para aplicarlas"
+    },
     "apply": {
       "successTitle": "{gameLabel} actualizado",
       "failureTitle": "Error al actualizar {gameLabel}",
diff --git a/frontend/src/lib/notifications.ts b/frontend/src/lib/notifications.ts
index 6d5bb27..5d959b9 100644
--- a/frontend/src/lib/notifications.ts
+++ b/frontend/src/lib/notifications.ts
@@ -12,6 +12,7 @@ export type NotificationKind =
   | "catalog_update_available"
   | "driver_update_available"
   | "system_driver_update_available"
+  | "dll_updates_available"
   | "backup_restored"
   | "scan_failed"
   | "catalog_refresh_failed";
diff --git a/frontend/src/lib/stores.ts b/frontend/src/lib/stores.ts
index ca20050..a9891ad 100644
--- a/frontend/src/lib/stores.ts
+++ b/frontend/src/lib/stores.ts
@@ -34,7 +34,15 @@ import {
 } from "./api";
 import { sortDriverReports, hasDriverUpdate, driverPageUrl } from "./drivers";
 import { vendorLabel, familyLabel, familyShort, type UpdateStatus } from "./labels";
-import { buildShasByVendor, gameStatusFromRecords, type CatalogShasByVendor, type RelationContext } from "./relation";
+import {
+  buildShasByVendor,
+  gameStatusFromRecords,
+  dllRelation,
+  targetVersion,
+  recordUpdatable,
+  type CatalogShasByVendor,
+  type RelationContext,
+} from "./relation";
 import {
   notifications,
   pushNotification,
@@ -378,6 +386,64 @@ export const outdatedGameCount: Readable<number> = derived(
     $games.reduce((n, g) => (!$hidden.has(g.id) && $statuses[g.id] === "outdated" ? n + 1 : n), 0),
 );
 
+/** Total pending DLL updates and the number of distinct games carrying at least
+ *  one, computed from the same primitives the Library hero uses
+ *  (`outdatedDllsAcrossLibrary`): outdated, updatable, pinned-aware records with a
+ *  resolvable target. Reused by the proactive digest notification. */
+export function pendingDllUpdateDigest(): { total: number; games: number } {
+  const $games = get(games);
+  const $hidden = get(hiddenIds);
+  const $statuses = get(gameStatuses);
+  const $dlls = get(gameDlls);
+  const $ctx = get(relationContext);
+  const $settings = get(settings);
+  const prefs = $settings?.update_prefs ?? null;
+  let total = 0;
+  let gamesWithUpdates = 0;
+  for (const game of $games) {
+    if ($hidden.has(game.id)) continue;
+    if ($statuses[game.id] !== "outdated") continue;
+    const records = $dlls[game.id] ?? [];
+    const disabled = $settings?.game_preferences[game.id]?.disabled_families ?? [];
+    const pinned = $settings?.game_preferences[game.id]?.pinned_versions ?? {};
+    let gameCount = 0;
+    for (const r of records) {
+      if (disabled.includes(r.family)) continue;
+      if (!recordUpdatable(r, prefs)) continue;
+      const pin = pinned[`${r.family}|${r.path}`] ?? null;
+      if (dllRelation(r, $ctx, pin) !== "outdated") continue;
+      if (!targetVersion(r, $ctx, pin)) continue;
+      gameCount += 1;
+    }
+    if (gameCount > 0) {
+      total += gameCount;
+      gamesWithUpdates += 1;
+    }
+  }
+  return { total, games: gamesWithUpdates };
+}
+
+/** Push ONE proactive digest ("N updates ready in M games") when the library has
+ *  pending DLL updates. The title is stable for identical counts, so the backend
+ *  dedup (skip a non-dismissed entry with the same kind+title) prevents spam on
+ *  re-fire. No-ops when nothing is pending. */
+export function emitDllUpdatesDigest(): void {
+  const { total, games: gameCount } = pendingDllUpdateDigest();
+  if (total === 0) return;
+  const loc = get(locale);
+  const gamesPhrase = translate(loc, "notif.dll.digestGames", { count: gameCount });
+  const title = translate(loc, "notif.dll.digestTitle", { count: total, games: gamesPhrase });
+  if (alreadyEmitted("dll_updates_available", title)) return;
+  const entry = makeNotificationEntry(
+    "dll_updates_available",
+    title,
+    translate(loc, "notif.dll.digestBody"),
+  );
+  pushNotification(entry).catch((err) =>
+    console.warn("[dlssync] push dll-updates digest failed:", err),
+  );
+}
+
 export const restorableBackupCount: Readable<number> = derived(
   backups,
   ($entries) => $entries.reduce((n, b) => (b.restored_at == null ? n + 1 : n), 0),
@@ -516,6 +582,7 @@ async function loadAllDlls(list: DetectedGame[]): Promise<void> {
     failureToastShown = true;
     showToast("warning", translate(get(locale), "toast.gamesFailedToScan", { count: errCount }));
   }
+  emitDllUpdatesDigest();
 }
 
 export async function rescanGame(gameId: string): Promise<void> {
@@ -571,6 +638,7 @@ export async function loadCatalog(): Promise<void> {
     const after = get(catalogLatestByKey);
     const diffs = diffCatalogLatest(before, after);
     if (diffs.length > 0) emitCatalogUpdateNotifications(diffs);
+    emitDllUpdatesDigest();
   } catch (err: unknown) {
     catalogStatus.set({ kind: "danger", label: "error" });
     const message = formatError(err);
diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
index 25c31e9..3d26c15 100644
--- a/frontend/src/styles/global.css
+++ b/frontend/src/styles/global.css
@@ -169,6 +169,7 @@
   --topbar-height: 52px;
   --content-max: 1600px;
   --drawer-width: clamp(440px, 38vw, 600px);
+  --rail-width: clamp(400px, 32vw, 480px);
   --card-art-aspect: 2 / 1;
 
   --glass-1: rgba(22, 24, 34, 0.44);
@@ -281,7 +282,7 @@
   --vendor-microsoft-dim: rgba(134, 97, 197, 0.10);
   --vendor-microsoft-glow: rgba(134, 97, 197, 0.20);
 
-  --shadow-halo: 0 0 0 1px var(--accent), 0 0 16px var(--accent-glow), 0 0 36px var(--accent-dim);
+  --shadow-halo: 0 0 0 1px var(--accent), 0 2px 10px var(--accent-glow);
 
   --border: rgba(0, 0, 0, 0.06);
   --border-strong: rgba(0, 0, 0, 0.20);
@@ -297,21 +298,21 @@
   --glass-1: rgba(255, 255, 255, 0.55);
   --glass-2: rgba(255, 255, 255, 0.48);
   --glass-3: rgba(255, 255, 255, 0.66);
-  --glass-strong: rgba(252, 253, 255, 0.70);
+  --glass-strong: rgba(252, 253, 255, 0.95);
   --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.7);
   --accent-progress: #0aa2a2;
 
   --art-blur: 90px;
   --art-dim: 0.82;
-  --art-opacity: 0.30;
-  --art-sat: 1.15;
+  --art-opacity: 0.05;
+  --art-sat: 1.0;
   --art-edge-left: 23.8%;
   --art-edge-left-fade: 32.3%;
   --art-edge-top: 16.9%;
   --art-edge-top-fade: 25.4%;
-  --ambient-glow-1: hsla(211, 100%, 62%, 0.26);
-  --ambient-glow-2: hsla(168, 72%, 52%, 0.20);
-  --ambient-glow-3: hsla(266, 85%, 66%, 0.20);
+  --ambient-glow-1: hsla(211, 100%, 62%, 0.07);
+  --ambient-glow-2: hsla(168, 72%, 52%, 0.05);
+  --ambient-glow-3: hsla(266, 85%, 66%, 0.05);
 }
 
 *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@@ -659,6 +660,13 @@ input::placeholder, textarea::placeholder { color: var(--text-placeholder); }
 .halo.is-danger::after { box-shadow: 0 0 0 1px var(--danger), 0 0 18px var(--danger-glow), 0 0 40px var(--danger-dim); }
 .halo.is-success::after { box-shadow: 0 0 0 1px var(--success), 0 0 18px var(--success-glow), 0 0 40px var(--success-dim); }
 
+/* Light mode: glows read as a dirty bloom on a near-white surface, so the status
+   halo collapses to a crisp colored ring plus a soft downward-tinted shadow —
+   the light-native elevation cue. Dark keeps the full additive glow above. */
+[data-theme="light"] .halo.is-update::after  { box-shadow: 0 0 0 1px var(--update),  0 2px 10px var(--update-glow); }
+[data-theme="light"] .halo.is-danger::after  { box-shadow: 0 0 0 1px var(--danger),  0 2px 10px var(--danger-glow); }
+[data-theme="light"] .halo.is-success::after { box-shadow: 0 0 0 1px var(--success), 0 2px 10px var(--success-glow); }
+
 .surface-elevated-2 { background: var(--bg-elevated-2); }
 .surface-cap { background: var(--bg-cap); }
 
diff --git a/frontend/src/views/About.svelte b/frontend/src/views/About.svelte
index 2097edd..46cfd1c 100644
--- a/frontend/src/views/About.svelte
+++ b/frontend/src/views/About.svelte
@@ -68,8 +68,12 @@
     const bulletRe = /^\s*[-*]\s+(.+)$/gm;
     const bullets: string[] = [];
     for (const m of body.matchAll(bulletRe)) {
-      const text = m[1].trim().replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1");
-      if (text.length > 0) bullets.push(text);
+      const text = m[1]
+        .trim()
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+        .replace(/`([^`]+)`/g, "$1")
+        .replace(/\*\*([^*]+)\*\*/g, "$1");
+      if (text.length > 0 && !/^\d{4}-\d{2}-\d{2}$/.test(text)) bullets.push(text);
       if (bullets.length >= 6) break;
     }
     return { version: head[1], bullets };
@@ -280,31 +284,34 @@
   </div>
 </header>
 
-<section class="brand-row edge-accent" in:fly={{ y: 6, duration: 240 }}>
-  <div class="brand-mark" aria-hidden="true">
-    <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
-      <path d="M3 12a9 9 0 1 0 3-6.7"/>
-      <polyline points="3 4 3 9 8 9"/>
-    </svg>
-  </div>
-  <div class="brand-text">
-    <div class="brand-title-row">
-      <h2 class="brand-title">DLSSync</h2>
-      <span class="brand-version mono">v{version}</span>
+<section class="brand-hero" in:fly={{ y: 6, duration: 240 }}>
+  <div class="brand-hero-glow" aria-hidden="true"></div>
+  <div class="brand-hero-top">
+    <div class="brand-mark" aria-hidden="true">
+      <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M3 12a9 9 0 1 0 3-6.7"/>
+        <polyline points="3 4 3 9 8 9"/>
+      </svg>
+    </div>
+    <div class="brand-text">
+      <div class="brand-title-row">
+        <h2 class="brand-title">DLSSync</h2>
+        <span class="brand-version mono">v{version}</span>
+      </div>
       <span class="brand-tagline">{$t("view.about.tagline")}</span>
     </div>
   </div>
   <div class="brand-pillars">
     <span class="pillar" title={$t("view.about.pillar.hashVerifiedTitle")}>
-      <ShieldCheck size={13} />
+      <ShieldCheck size={14} />
       {$t("view.about.pillar.hashVerified")}
     </span>
     <span class="pillar" title={$t("view.about.pillar.vendorSignedTitle")}>
-      <Signature size={13} />
+      <Signature size={14} />
       {$t("view.about.pillar.vendorSigned")}
     </span>
     <span class="pillar" title={$t("view.about.pillar.reversibleTitle")}>
-      <History size={13} />
+      <History size={14} />
       {$t("view.about.pillar.reversible")}
     </span>
   </div>
@@ -313,9 +320,14 @@
 {#if releaseHighlights && releaseHighlights.bullets.length > 0}
   <section class="whats-new" in:fly={{ y: 6, duration: 240, delay: 40 }}>
     <header class="wn-head">
-      <span class="wn-eyebrow">{$t("view.about.whatsNew.eyebrow")}</span>
-      <span class="wn-version mono">v{releaseHighlights.version}</span>
-      <button class="wn-link" onclick={openReleases} title={$t("view.about.whatsNew.openReleasesTitle")}>{$t("view.about.whatsNew.viewChangelog")}</button>
+      <span class="wn-tag">
+        <span class="wn-eyebrow">{$t("view.about.whatsNew.eyebrow")}</span>
+        <span class="wn-version mono">v{releaseHighlights.version}</span>
+      </span>
+      <button class="wn-link" onclick={openReleases} title={$t("view.about.whatsNew.openReleasesTitle")}>
+        {$t("view.about.whatsNew.viewChangelog")}
+        <ExternalLink size={12} />
+      </button>
     </header>
     <ul class="wn-list">
       {#each releaseHighlights.bullets as bullet (bullet)}
@@ -338,30 +350,30 @@
   </div>
 {/if}
 
-<section class="info-bar" in:fly={{ y: 6, duration: 280, delay: 60 }}>
-  <div class="info-item">
-    <span class="info-item-label">{$t("view.about.kpi.familiesTracked")}</span>
-    <span class="info-item-value">{Math.round(familyTween.current)}</span>
+<section class="about-kpis" in:fly={{ y: 6, duration: 280, delay: 60 }}>
+  <div class="about-kpi">
+    <span class="kpi-label">{$t("view.about.kpi.familiesTracked")}</span>
+    <span class="kpi-value">{Math.round(familyTween.current)}</span>
   </div>
-  <div class="info-item">
-    <span class="info-item-label">{$t("view.about.kpi.versionsInManifest")}</span>
-    <span class="info-item-value">{Math.round(releaseTween.current).toLocaleString()}</span>
+  <div class="about-kpi">
+    <span class="kpi-label">{$t("view.about.kpi.versionsInManifest")}</span>
+    <span class="kpi-value">{Math.round(releaseTween.current).toLocaleString()}</span>
   </div>
-  <div class="info-item">
-    <span class="info-item-label">{$t("view.about.kpi.upstreamVendors")}</span>
-    <span class="info-item-value">{vendorCount}</span>
+  <div class="about-kpi">
+    <span class="kpi-label">{$t("view.about.kpi.upstreamVendors")}</span>
+    <span class="kpi-value">{vendorCount}</span>
   </div>
-  <div class="info-item">
-    <span class="info-item-label">{$t("view.about.kpi.gamesDetected")}</span>
-    <span class="info-item-value">{Math.round(gameTween.current)}</span>
+  <div class="about-kpi">
+    <span class="kpi-label">{$t("view.about.kpi.gamesDetected")}</span>
+    <span class="kpi-value">{Math.round(gameTween.current)}</span>
   </div>
-  <div class="info-item">
-    <span class="info-item-label">{$t("view.about.kpi.backupsStored")}</span>
-    <span class="info-item-value">{Math.round(backupTween.current)}</span>
+  <div class="about-kpi">
+    <span class="kpi-label">{$t("view.about.kpi.backupsStored")}</span>
+    <span class="kpi-value">{Math.round(backupTween.current)}</span>
   </div>
-  <div class="info-item">
-    <span class="info-item-label">{$t("view.about.kpi.manifestUpdated")}</span>
-    <span class="info-item-value is-mono">{$manifestUpdatedAt || "—"}</span>
+  <div class="about-kpi">
+    <span class="kpi-label">{$t("view.about.kpi.manifestUpdated")}</span>
+    <span class="kpi-value is-mono">{$manifestUpdatedAt || "—"}</span>
   </div>
 </section>
 
@@ -583,61 +595,96 @@
   .sponsor-btn:hover svg { color: #f0707f; }
   .kofi-btn svg { color: #ff5e5b; }
   .kofi-btn:hover svg { color: #ff7674; }
-  .brand-row {
-    display: grid;
-    grid-template-columns: 56px 1fr auto;
-    gap: 18px;
+  .brand-hero {
+    position: relative;
+    display: flex;
     align-items: center;
-    padding: 16px 22px;
+    justify-content: space-between;
+    gap: clamp(16px, 3vw, 32px);
+    flex-wrap: wrap;
+    padding: clamp(20px, 2.6vw, 28px) clamp(22px, 3vw, 30px);
     margin-bottom: 18px;
-    background: var(--bg-card);
+    background:
+      linear-gradient(135deg, var(--accent-soft), transparent 58%),
+      var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    position: relative;
+    border-radius: var(--radius-2xl);
     overflow: hidden;
+    isolation: isolate;
   }
-  .brand-row::before {
-    content: '';
+  .brand-hero-glow {
     position: absolute;
-    inset: 0 0 auto 0;
-    height: 1px;
-    background: var(--border);
+    inset: -40% auto auto -10%;
+    width: 340px;
+    height: 340px;
+    border-radius: 50%;
+    background: radial-gradient(circle, var(--accent-glow), transparent 70%);
+    opacity: 0.55;
+    pointer-events: none;
+    z-index: -1;
+  }
+  :global([data-theme="light"]) .brand-hero-glow { opacity: 0.35; }
+  .brand-hero-top {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    min-width: 0;
   }
   .brand-mark {
-    width: 56px;
-    height: 56px;
-    border-radius: var(--radius-md);
+    width: 60px;
+    height: 60px;
+    border-radius: var(--radius-lg);
     display: inline-flex;
     align-items: center;
     justify-content: center;
     background: var(--accent-dim);
     color: var(--accent);
-    box-shadow: inset 0 0 0 1px var(--accent-ring);
+    box-shadow: inset 0 0 0 1px var(--accent-ring), 0 0 24px var(--accent-glow);
+    flex-shrink: 0;
   }
-  .brand-text { min-width: 0; }
-  .brand-title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+  .brand-text { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
+  .brand-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
   .brand-title {
-    font-size: var(--fs-xl);
-    font-weight: 700;
+    font-size: var(--fs-2xl);
+    font-weight: 800;
     letter-spacing: var(--letter-tighter);
     color: var(--text-primary);
-    line-height: 1.1;
+    line-height: 1.05;
   }
   .whats-new {
+    position: relative;
     background: var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    padding: 16px 20px;
+    border-radius: var(--radius-2xl);
+    padding: 18px 22px 18px 26px;
     margin-bottom: 22px;
+    overflow: hidden;
+  }
+  .whats-new::before {
+    content: '';
+    position: absolute;
+    left: 0; top: 14px; bottom: 14px;
+    width: 3px;
+    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
+    background: var(--accent);
   }
   .wn-head {
     display: flex;
     align-items: center;
-    gap: 10px;
-    margin-bottom: 12px;
+    gap: 12px;
+    margin-bottom: 14px;
+    flex-wrap: wrap;
+  }
+  .wn-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 4px 10px 4px 11px;
+    background: var(--accent-dim);
+    border-radius: var(--radius-full);
   }
   .wn-eyebrow {
-    font-size: var(--fs-xs);
+    font-size: var(--fs-2xs);
     font-weight: 700;
     color: var(--accent);
     text-transform: uppercase;
@@ -645,84 +692,96 @@
   }
   .wn-version {
     font-size: var(--fs-xs);
-    color: var(--text-muted);
+    font-weight: 600;
+    color: var(--accent);
     font-variant-numeric: tabular-nums;
   }
   .wn-link {
     margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
     background: transparent;
     border: none;
     color: var(--accent);
     font-size: var(--fs-xs);
     font-weight: 600;
     cursor: pointer;
-    padding: 4px 8px;
+    padding: 5px 9px;
     border-radius: var(--radius-sm);
     transition: background var(--dur-fast) var(--ease);
   }
   .wn-link:hover { background: var(--accent-dim); }
   .wn-link:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
+  .wn-link :global(svg) { flex-shrink: 0; }
   .wn-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 11px;
   }
   .wn-list li {
     font-size: var(--fs-sm);
     color: var(--text-secondary);
-    padding-left: 18px;
+    padding-left: 20px;
     position: relative;
-    line-height: var(--lh-snug);
+    line-height: var(--lh-normal);
+    max-width: 78ch;
+    overflow-wrap: anywhere;
   }
   .wn-list li::before {
     content: '';
     position: absolute;
     left: 4px;
-    top: 8px;
-    width: 4px;
-    height: 4px;
+    top: 7px;
+    width: 5px;
+    height: 5px;
     border-radius: 50%;
     background: var(--accent);
+    box-shadow: 0 0 8px var(--accent-glow);
   }
+  :global([data-theme="light"]) .wn-list li::before { box-shadow: none; }
 
   .brand-version {
-    font-size: var(--fs-sm);
-    font-weight: 600;
+    font-size: var(--fs-xs);
+    font-weight: 700;
     color: var(--accent);
     background: var(--accent-dim);
-    padding: 2px 9px;
+    padding: 3px 10px;
     border-radius: var(--radius-full);
     letter-spacing: 0;
+    box-shadow: inset 0 0 0 1px var(--accent-ring);
   }
   .brand-tagline {
-    font-size: var(--fs-2xs);
-    color: var(--text-muted);
-    text-transform: uppercase;
-    letter-spacing: var(--letter-wider);
-    font-weight: 600;
+    font-size: var(--fs-sm);
+    color: var(--text-secondary);
+    letter-spacing: var(--letter-tight);
+    font-weight: 500;
+    line-height: var(--lh-snug);
   }
   .brand-pillars { display: flex; gap: 10px; flex-wrap: wrap; }
   .pillar {
     display: inline-flex;
     align-items: center;
-    gap: 6px;
+    gap: 7px;
     font-size: var(--fs-xs);
     color: var(--text-secondary);
-    font-weight: 500;
-    padding: 6px 10px;
+    font-weight: 600;
+    padding: 8px 13px;
     background: var(--bg-elevated);
     border: 1px solid var(--border);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-full);
     cursor: help;
+    transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
   }
+  .pillar:hover { border-color: var(--accent-ring); color: var(--text-primary); }
   .pillar :global(svg) { color: var(--accent); flex-shrink: 0; }
 
-  @media (max-width: 760px) {
-    .brand-row { grid-template-columns: 56px 1fr; }
-    .brand-pillars { grid-column: 1 / -1; }
+  @media (max-width: 640px) {
+    .brand-hero { gap: 16px; }
+    .brand-pillars { width: 100%; }
   }
 
   .update-banner {
@@ -739,20 +798,56 @@
   .update-banner.is-danger { color: var(--danger); border-color: color-mix(in oklab, var(--danger) 40%, transparent); background: var(--danger-dim); }
   .update-banner.is-info { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-soft); }
 
+  .about-kpis {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1px;
+    margin-bottom: 18px;
+    background: var(--border);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    overflow: hidden;
+  }
+  .about-kpi {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 14px 16px;
+    background: var(--bg-card);
+    min-width: 0;
+  }
+  .kpi-label {
+    font-size: var(--fs-2xs);
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: var(--letter-wider);
+    font-weight: 600;
+  }
+  .kpi-value {
+    font-size: var(--fs-xl);
+    font-weight: 700;
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+    letter-spacing: var(--letter-tighter);
+    line-height: 1.15;
+    overflow-wrap: anywhere;
+  }
+  .kpi-value.is-mono { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; }
+
   .info-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 14px;
     margin-bottom: 16px;
   }
   .surface {
     background: var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-    padding: 18px 20px;
-    transition: border-color var(--dur-fast) var(--ease);
+    border-radius: var(--radius-2xl);
+    padding: 20px 22px;
+    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
   }
-  .surface:hover { border-color: var(--border-hover); }
+  .surface:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
   .surface-head {
     display: flex;
     align-items: center;
@@ -815,6 +910,8 @@
     color: var(--text-primary);
     margin: 0;
     text-align: right;
+    min-width: 0;
+    overflow-wrap: anywhere;
   }
 
   .path-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
@@ -913,20 +1010,22 @@
     grid-template-columns: 1fr auto;
     grid-template-rows: auto auto;
     gap: 0 8px;
-    padding: 10px 14px 10px 16px;
+    padding: 12px 14px 12px 18px;
     background: var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: var(--radius-md);
+    border-radius: var(--radius-lg);
     cursor: pointer;
     text-align: left;
-    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
+    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
     overflow: hidden;
   }
   .source-card:hover {
     border-color: var(--src-accent, var(--accent));
     background: var(--bg-card-hover);
-    transform: translateY(-1px);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
   }
+  .source-card:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
   .source-stripe {
     position: absolute;
     left: 0; top: 0; bottom: 0;
@@ -966,10 +1065,10 @@
     align-items: center;
     justify-content: space-between;
     gap: 16px;
-    padding: 14px 18px;
+    padding: 16px 20px;
     background: var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-2xl);
     flex-wrap: wrap;
     position: relative;
     overflow: hidden;
@@ -1079,25 +1178,39 @@
   .support-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 10px;
+    gap: 12px;
   }
   .support-cta {
+    position: relative;
     display: inline-flex;
     align-items: center;
-    gap: 10px;
-    padding: 14px 16px;
+    gap: 12px;
+    padding: 16px 18px;
     background: var(--bg-card);
     border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-xl);
     cursor: pointer;
     color: var(--text-secondary);
-    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
+    overflow: hidden;
+    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+  }
+  .support-cta::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, var(--accent-soft), transparent 60%);
+    opacity: 0;
+    transition: opacity var(--dur-fast) var(--ease);
+    pointer-events: none;
   }
   .support-cta:hover {
     color: var(--text-primary);
-    background: var(--bg-card-hover);
+    border-color: var(--accent-ring);
     transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
   }
+  .support-cta:hover::before { opacity: 1; }
+  .support-cta:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
   .support-cta.is-star :global(svg) { color: var(--gh-star); }
   .support-cta.is-star:hover { border-color: var(--gh-star); }
   .support-cta.is-endorse:hover { border-color: var(--nexus); }
@@ -1106,11 +1219,13 @@
   .support-cta-count {
     margin-left: auto;
     font-size: var(--fs-xs);
+    font-weight: 600;
     color: var(--accent);
     background: var(--accent-dim);
-    padding: 2px 8px;
+    padding: 2px 9px;
     border-radius: var(--radius-full);
     font-variant-numeric: tabular-nums;
+    box-shadow: inset 0 0 0 1px var(--accent-ring);
   }
 
   .spin { width: 12px; height: 12px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
diff --git a/frontend/src/views/Backups.svelte b/frontend/src/views/Backups.svelte
index 9d5af07..ae6d4c0 100644
--- a/frontend/src/views/Backups.svelte
+++ b/frontend/src/views/Backups.svelte
@@ -467,8 +467,10 @@
 </header>
 
 {#if $backups.length === 0}
-  <div class="empty">
-    <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5" rx="0.5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
+  <div class="empty" in:fly={{ y: 8, duration: 240 }}>
+    <span class="empty-icon" aria-hidden="true">
+      <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="21 8 21 21 3 21 3 8"/><rect x="1" y="3" width="22" height="5" rx="0.5"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
+    </span>
     <h3 class="empty-title">{$t("view.backups.emptyTitle")}</h3>
     <p class="section-sub">{$t("view.backups.emptyBody")}</p>
   </div>
@@ -494,7 +496,7 @@
           <span class="bk-stat-lbl">{$t("view.backups.kpi.diskUsed")}</span>
         </div>
       </div>
-      <div class="bk-stat">
+      <div class="bk-stat" class:is-zero={totalRestorable === 0}>
         <span class="bk-stat-badge aura-badge" data-tint="orange" aria-hidden="true">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9c-2.52 0-4.85.93-6.63 2.46"/><polyline points="3 4 3 9 8 9"/></svg>
         </span>
@@ -503,7 +505,7 @@
           <span class="bk-stat-lbl">{$t("view.backups.kpi.restorable")}</span>
         </div>
       </div>
-      <div class="bk-stat">
+      <div class="bk-stat" class:is-zero={totalRestored === 0}>
         <span class="bk-stat-badge aura-badge" data-tint="green" aria-hidden="true">
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
         </span>
@@ -518,18 +520,15 @@
         <span class="hero-meta-label">{$t("view.backups.meta.gamesCovered")}</span>
         <span class="hero-meta-value">{uniqueGames}</span>
       </span>
-      <span class="hero-meta-sep"></span>
       <span class="hero-meta-item">
         <span class="hero-meta-label">{$t("view.backups.meta.newest")}</span>
         <span class="hero-meta-value mono">{newestDate ? fmtDateShort(newestDate) : "—"}</span>
       </span>
-      <span class="hero-meta-sep"></span>
       <span class="hero-meta-item">
         <span class="hero-meta-label">{$t("view.backups.meta.oldest")}</span>
         <span class="hero-meta-value mono">{oldestDate ? fmtDateShort(oldestDate) : "—"}</span>
       </span>
       {#if totalMissing > 0}
-        <span class="hero-meta-sep"></span>
         <span class="hero-meta-item hero-meta-warn" title={$t("view.backups.meta.missingHint")}>
           <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
           <span class="hero-meta-value">{$t("view.backups.meta.missingCount", { count: totalMissing })}</span>
@@ -894,79 +893,121 @@
   .view-header > div:first-child { flex: 1 1 240px; min-width: 0; }
   .header-actions { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
   .empty {
-    padding: 80px 0;
+    padding: clamp(56px, 9vh, 96px) 24px;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
     color: var(--text-muted);
   }
-  .empty.small { padding: 40px 0; }
-  .empty :global(svg) { opacity: 0.4; margin-bottom: 8px; }
-  .empty-title { font-size: var(--fs-lg); font-weight: 600; color: var(--text-primary); }
-  .empty .section-sub { max-width: 460px; }
+  .empty.small {
+    padding: 40px 24px;
+    background: var(--bg-card);
+    border: 1px dashed var(--border-strong);
+    border-radius: var(--radius-lg);
+  }
+  .empty-icon {
+    width: 64px;
+    height: 64px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-2xl);
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    color: var(--text-secondary);
+    margin-bottom: var(--space-2);
+  }
+  .empty.small :global(svg) { opacity: 0.4; margin-bottom: 8px; }
+  .empty-title { font-size: var(--fs-lg); font-weight: 700; color: var(--text-primary); letter-spacing: var(--letter-tight); }
+  .empty .section-sub { max-width: 440px; line-height: var(--lh-normal); }
 
-  .backup-hero { margin-bottom: 16px; overflow: hidden; }
+  .backup-hero { margin-bottom: var(--space-4); overflow: hidden; }
   .hero-stats {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
-    gap: 16px 20px;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: var(--space-3);
+  }
+  .bk-stat {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    min-width: 0;
+    padding: var(--space-3);
+    border-radius: var(--radius-lg);
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
   }
-  .bk-stat { display: flex; align-items: center; gap: 13px; min-width: 0; }
-  .bk-stat-badge { width: 42px; height: 42px; border-radius: 13px; }
-  .bk-stat-badge svg { display: block; }
-  .bk-stat-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
+  .bk-stat:hover { border-color: var(--border-hover); background: var(--bg-elevated-2); }
+  .bk-stat.is-zero { opacity: 0.62; }
+  .bk-stat-badge { width: 44px; height: 44px; border-radius: var(--radius-md); }
+  .bk-stat-badge svg { display: block; width: 18px; height: 18px; }
+  .bk-stat-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
   .bk-stat-num {
     font-size: var(--fs-2xl);
-    font-weight: 700;
+    font-weight: 800;
     color: var(--text-primary);
     letter-spacing: var(--letter-tighter);
     font-variant-numeric: tabular-nums;
-    line-height: 1.15;
+    line-height: 1.05;
   }
   .bk-stat-num.is-update { color: var(--update); }
   .bk-stat-num.is-success { color: var(--success); }
+  .bk-stat.is-zero .bk-stat-num { color: var(--text-secondary); }
   .bk-stat-lbl {
     font-size: var(--fs-2xs);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: var(--letter-wider);
-    font-weight: 600;
+    font-weight: 700;
   }
   .hero-meta-strip {
-    margin-top: 12px;
-    padding-top: 12px;
+    margin-top: var(--space-4);
+    padding-top: var(--space-4);
     border-top: 1px solid var(--border);
     display: flex;
-    align-items: center;
-    gap: 14px;
+    align-items: stretch;
+    gap: var(--space-2);
     flex-wrap: wrap;
   }
-  .hero-meta-item { display: inline-flex; align-items: baseline; gap: 6px; }
+  .hero-meta-item {
+    display: inline-flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 7px 14px;
+    border-radius: var(--radius-md);
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    min-width: 0;
+  }
   .hero-meta-label {
     font-size: var(--fs-2xs);
     color: var(--text-muted);
     text-transform: uppercase;
     letter-spacing: var(--letter-wider);
-    font-weight: 600;
+    font-weight: 700;
+    white-space: nowrap;
   }
   .hero-meta-value {
     font-size: var(--fs-sm);
     color: var(--text-primary);
-    font-weight: 600;
+    font-weight: 700;
     font-variant-numeric: tabular-nums;
+    white-space: nowrap;
   }
-  .hero-meta-value.mono { font-family: var(--font-mono, monospace); font-size: 12px; }
-  .hero-meta-sep {
-    width: 3px;
-    height: 3px;
-    border-radius: 50%;
-    background: var(--text-muted);
-    opacity: 0.4;
+  .hero-meta-value.mono { font-family: var(--font-mono, monospace); letter-spacing: var(--letter-tight); }
+  .hero-meta-warn {
+    flex-direction: row;
+    align-items: center;
+    gap: 7px;
+    background: var(--danger-dim);
+    border-color: transparent;
+    color: var(--danger);
+    cursor: help;
   }
-  .hero-meta-warn { gap: 5px; color: var(--danger); cursor: help; }
-  .hero-meta-warn svg { display: block; }
+  .hero-meta-warn svg { display: block; flex-shrink: 0; }
   .hero-meta-warn .hero-meta-value { color: var(--danger); }
 
   .backup-toolbar {
@@ -1027,34 +1068,35 @@
   .search-clear:hover { color: var(--text-primary); background: var(--bg-elevated); }
   .toolbar-summary { font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
 
-  .groups { display: flex; flex-direction: column; gap: 10px; }
+  .groups { display: flex; flex-direction: column; gap: var(--space-2); }
   .group {
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     overflow: hidden;
-    transition: border-color 0.15s var(--ease);
+    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
   }
-  .group:hover { border-color: var(--border-hover); }
+  .group:hover { border-color: var(--border-hover); box-shadow: var(--shadow-xs); }
   .group-head {
     display: grid;
-    grid-template-columns: 96px 1fr auto;
+    grid-template-columns: 92px 1fr auto;
     align-items: center;
-    gap: 14px;
+    gap: var(--space-3);
     width: 100%;
-    padding: 12px 16px;
+    padding: var(--space-3) var(--space-4);
     background: transparent;
     border: none;
     color: var(--text-primary);
     cursor: pointer;
     text-align: left;
-    transition: background 0.12s var(--ease);
+    transition: background var(--dur-fast) var(--ease);
   }
   .group-head:hover { background: var(--bg-card-hover); }
+  .group-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-dim); }
   .group-thumb {
-    width: 96px;
+    width: 92px;
     aspect-ratio: 16 / 9;
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius-md);
     overflow: hidden;
     background: var(--bg-art-fallback);
     display: inline-flex;
@@ -1062,6 +1104,7 @@
     justify-content: center;
     flex-shrink: 0;
     position: relative;
+    box-shadow: inset 0 0 0 1px var(--border);
   }
   .group-thumb::after {
     content: "";
@@ -1078,10 +1121,17 @@
     opacity: 0.7;
   }
   .group-meta { min-width: 0; }
-  .group-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
-  .group-name { font-size: var(--fs-md); font-weight: 600; letter-spacing: var(--letter-tight); }
-  .group-launcher { font-size: var(--fs-2xs); padding: 1px 7px; }
-  .group-stats { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-muted); flex-wrap: wrap; }
+  .group-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
+  .group-name {
+    font-size: var(--fs-md);
+    font-weight: 700;
+    letter-spacing: var(--letter-tight);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .group-launcher { font-size: var(--fs-2xs); padding: 1px 7px; flex-shrink: 0; }
+  .group-stats { display: flex; align-items: center; gap: 7px; font-size: var(--fs-xs); color: var(--text-muted); flex-wrap: wrap; }
   .group-stats :global(strong) { color: var(--text-secondary); font-weight: 600; }
   .stat-line.is-update { color: var(--update); }
   .stat-line.is-success { color: var(--success); }
@@ -1106,14 +1156,22 @@
   .entries { list-style: none; padding: 0; margin: 0; }
   .entry {
     display: grid;
-    grid-template-columns: 28px 32px 1fr auto;
+    grid-template-columns: 28px 34px 1fr auto;
     align-items: center;
-    gap: 12px;
-    padding: 12px 16px;
+    gap: var(--space-3);
+    padding: var(--space-3) var(--space-4);
     border-top: 1px solid var(--border);
-    transition: background 0.12s var(--ease);
+    transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+    position: relative;
   }
   .entry.is-selected { background: var(--accent-soft); }
+  .entry.is-selected::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 2px;
+    background: var(--accent);
+  }
   .entry-check, .group-check {
     display: inline-flex;
     align-items: center;
@@ -1196,8 +1254,8 @@
   .bulk-spacer { flex: 1; }
   .entry:hover { background: var(--bg-card-hover); }
   .entry-glyph {
-    width: 32px;
-    height: 32px;
+    width: 34px;
+    height: 34px;
     border-radius: var(--radius-md);
     background: var(--accent-dim);
     color: var(--accent);
@@ -1261,5 +1319,34 @@
     font-variant-numeric: tabular-nums;
   }
   .entry-meta .hwid { max-width: 320px; display: inline-block; vertical-align: bottom; }
-  .entry.driver-entry { grid-template-columns: 32px 1fr auto; }
+  .entry.driver-entry { grid-template-columns: 34px 1fr auto; }
+
+  @media (max-width: 1080px) {
+    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  }
+  @media (max-width: 720px) {
+    .hero-stats { grid-template-columns: 1fr; }
+    .bk-stat-num { font-size: var(--fs-xl); }
+    .group-head { grid-template-columns: 64px 1fr auto; }
+    .group-thumb { width: 64px; }
+    .entry {
+      grid-template-columns: 24px 30px 1fr;
+      row-gap: var(--space-2);
+    }
+    .entry-glyph { width: 30px; height: 30px; }
+    .entry-actions {
+      grid-column: 1 / -1;
+      justify-content: flex-end;
+      flex-wrap: wrap;
+    }
+    .entry.driver-entry { grid-template-columns: 30px 1fr; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .group,
+    .group-head,
+    .entry,
+    .bk-stat,
+    .chevron { transition: none; }
+  }
 </style>
diff --git a/frontend/src/views/Library.svelte b/frontend/src/views/Library.svelte
index da9e0eb..18619d6 100644
--- a/frontend/src/views/Library.svelte
+++ b/frontend/src/views/Library.svelte
@@ -38,6 +38,7 @@
   import { launcherLabel, familyGroup, type FamilyGroup } from "../lib/labels";
   import GameCard from "../components/GameCard.svelte";
   import GameListRow from "../components/GameListRow.svelte";
+  import FilterMenu from "../components/FilterMenu.svelte";
   import ContextMenu, { type ContextMenuAction, type ContextMenuItem } from "../components/ContextMenu.svelte";
   import { dispatchApply, type ApplyTarget } from "../lib/applyController";
   import { listen, type UnlistenFn } from "@tauri-apps/api/event";
@@ -142,6 +143,27 @@
 
   let hiddenCount = $derived($hiddenIds.size);
 
+  let launcherOptions = $derived.by(() =>
+    launcherFilters
+      .map((f) => ({
+        id: f.id,
+        label: f.brand ?? translate($locale, f.labelKey),
+        count: f.id === "all" ? $games.length : $games.filter((g) => g.launcher === f.id).length,
+      }))
+      .filter((o) => o.id === "all" || availableLaunchers.has(o.id) || o.count > 0),
+  );
+
+  let statusOptions = $derived.by(() =>
+    statusFilters
+      .filter((f) => f.id !== "hidden" || hiddenCount > 0)
+      .map((f) => ({
+        id: f.id,
+        label: translate($locale, f.labelKey),
+        count: f.id === "hidden" ? hiddenCount : undefined,
+        tone: f.id === "hidden" ? ("danger" as const) : null,
+      })),
+  );
+
   function onCardClick(game: DetectedGame): void {
     drawerGameId.set(game.id);
   }
@@ -400,77 +422,40 @@
   </div>
 {/if}
 
-<div class="filters-bar">
-  <div class="filters-primary">
-    <div class="filter-group">
-      <span class="filter-group-label">{$t("view.library.filter.launcher")}</span>
-      <div class="pills">
-        {#each launcherFilters as f}
-          {@const total = f.id === "all" ? $games.length : $games.filter((g) => g.launcher === f.id).length}
-          {#if f.id === "all" || availableLaunchers.has(f.id) || total > 0}
-            <button
-              class="pill"
-              class:active={$launcherFilter === f.id}
-              onclick={() => launcherFilter.set(f.id)}
-            >
-              {f.brand ?? $t(f.labelKey)}
-              <span class="pill-count">{total}</span>
-            </button>
-          {/if}
-        {/each}
-      </div>
-    </div>
-    <span class="filter-divider" aria-hidden="true"></span>
-    <div class="filter-group">
-      <span class="filter-group-label">{$t("view.library.filter.status")}</span>
-      <div class="pills">
-        {#each statusFilters as f}
-          {#if f.id !== "hidden" || hiddenCount > 0}
-            <button
-              class="pill"
-              class:active={$statusFilter === f.id}
-              class:is-hidden={f.id === "hidden"}
-              onclick={() => statusFilter.set(f.id)}
-            >
-              {$t(f.labelKey)}
-              {#if f.id === "hidden"}
-                <span class="pill-count">{hiddenCount}</span>
-              {/if}
-            </button>
-          {/if}
-        {/each}
-      </div>
-    </div>
-  </div>
+<div class="filter-toolbar glass-panel" role="toolbar" aria-label={$t("view.library.filter.launcher")}>
+  <FilterMenu
+    label={$t("view.library.filter.launcher")}
+    options={launcherOptions}
+    selectedId={$launcherFilter}
+    onSelect={(id) => launcherFilter.set(id)}
+  />
 
-  <div class="filters-secondary">
-    <div class="filter-group">
-      <span class="filter-group-label">{$t("view.library.filter.sort")}</span>
-      <select class="sort-select" value={sortKey} onchange={(e) => void setSort((e.currentTarget as HTMLSelectElement).value as LibrarySort)} aria-label={$t("view.library.filter.sortAria")}>
-        {#each LIBRARY_SORT_LABELS as opt (opt.id)}
-          <option value={opt.id} title={opt.hint ? $t("librarySort." + opt.id + ".hint") : $t("librarySort." + opt.id + ".label")}>{$t("librarySort." + opt.id + ".label")}</option>
-        {/each}
-      </select>
-    </div>
-    <div class="filter-group">
-      <span class="filter-group-label">{$t("view.library.filter.view")}</span>
-      <div class="seg">
-        <button class="seg-btn" class:active={viewMode === "grid"} onclick={() => void setViewMode("grid")} aria-pressed={viewMode === "grid"} title={$t("view.library.view.gridTitle")}>
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
-          {$t("view.library.view.grid")}
-        </button>
-        <button class="seg-btn" class:active={viewMode === "list"} onclick={() => void setViewMode("list")} aria-pressed={viewMode === "list"} title={$t("view.library.view.listTitle")}>
-          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
-          {$t("view.library.view.list")}
-        </button>
-      </div>
+  <FilterMenu
+    label={$t("view.library.filter.status")}
+    options={statusOptions}
+    selectedId={$statusFilter}
+    onSelect={(id) => statusFilter.set(id as StatusFilter)}
+  />
+
+  <div class="filter-controls">
+    <select class="sort-select" value={sortKey} onchange={(e) => void setSort((e.currentTarget as HTMLSelectElement).value as LibrarySort)} aria-label={$t("view.library.filter.sortAria")} title={$t("view.library.filter.sort")}>
+      {#each LIBRARY_SORT_LABELS as opt (opt.id)}
+        <option value={opt.id} title={opt.hint ? $t("librarySort." + opt.id + ".hint") : $t("librarySort." + opt.id + ".label")}>{$t("librarySort." + opt.id + ".label")}</option>
+      {/each}
+    </select>
+    <div class="seg" aria-label={$t("view.library.filter.view")}>
+      <button class="seg-btn" class:active={viewMode === "grid"} onclick={() => void setViewMode("grid")} aria-pressed={viewMode === "grid"} title={$t("view.library.view.gridTitle")} aria-label={$t("view.library.view.grid")}>
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
+        <span class="seg-text">{$t("view.library.view.grid")}</span>
+      </button>
+      <button class="seg-btn" class:active={viewMode === "list"} onclick={() => void setViewMode("list")} aria-pressed={viewMode === "list"} title={$t("view.library.view.listTitle")} aria-label={$t("view.library.view.list")}>
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
+        <span class="seg-text">{$t("view.library.view.list")}</span>
+      </button>
     </div>
-    <div class="filter-group">
-      <span class="filter-group-label">{$t("view.library.filter.density")}</span>
-      <div class="seg">
-        <button class="seg-btn" class:active={density === "compact"} onclick={() => void setDensity("compact")} aria-pressed={density === "compact"} title={$t("view.library.density.compactTitle")}>{$t("view.library.density.compact")}</button>
-        <button class="seg-btn" class:active={density === "comfy"} onclick={() => void setDensity("comfy")} aria-pressed={density === "comfy"} title={$t("view.library.density.comfyTitle")}>{$t("view.library.density.comfy")}</button>
-      </div>
+    <div class="seg" aria-label={$t("view.library.filter.density")}>
+      <button class="seg-btn" class:active={density === "compact"} onclick={() => void setDensity("compact")} aria-pressed={density === "compact"} title={$t("view.library.density.compactTitle")}>{$t("view.library.density.compact")}</button>
+      <button class="seg-btn" class:active={density === "comfy"} onclick={() => void setDensity("comfy")} aria-pressed={density === "comfy"} title={$t("view.library.density.comfyTitle")}>{$t("view.library.density.comfy")}</button>
     </div>
   </div>
 </div>
@@ -607,54 +592,37 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 18px;
-    gap: 16px;
+    margin-bottom: var(--space-4);
+    gap: var(--space-4);
     flex-wrap: wrap;
   }
   .view-header > div:first-child { flex: 1 1 240px; min-width: 0; }
   .header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; flex-shrink: 0; }
-  .filters-bar {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    margin-bottom: 22px;
-    padding-bottom: 18px;
-    border-bottom: 1px solid var(--border);
-  }
-  .filters-primary {
+  .filter-toolbar {
+    position: sticky;
+    top: var(--space-2);
+    z-index: 4;
     display: flex;
-    flex-wrap: wrap;
-    align-items: flex-start;
-    gap: 14px 22px;
+    flex-wrap: nowrap;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-lg);
+    margin-bottom: var(--space-4);
   }
-  .filters-secondary {
+  .filter-controls {
     display: flex;
-    flex-wrap: wrap;
-    align-items: flex-end;
-    gap: 14px 20px;
-  }
-  .filter-divider {
-    align-self: stretch;
-    width: 1px;
-    background: var(--border);
-    margin: 2px 0;
-  }
-  @media (max-width: 720px) {
-    .filter-divider { display: none; }
+    align-items: center;
+    gap: var(--space-2);
+    margin-inline-start: auto;
+    flex-shrink: 0;
   }
-  .filter-group { display: flex; flex-direction: column; gap: 7px; }
-  .filter-group-label {
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: var(--letter-wider);
-    color: var(--text-muted);
+  .seg-text { display: none; }
+  @media (max-width: 560px) {
+    .filter-toolbar { position: static; }
   }
-  .pill.is-hidden { color: var(--text-muted); }
-  .pill.is-hidden.active { background: var(--danger-dim); border-color: var(--danger); color: var(--danger); }
-  .pill.is-hidden.active .pill-count { background: var(--danger-glow); color: var(--danger); }
 
-  .updates-hero-shell { container-type: inline-size; margin-bottom: 20px; }
+  .updates-hero-shell { container-type: inline-size; margin-bottom: var(--space-3); }
   .updates-hero {
     position: relative;
     display: flex;
@@ -761,15 +729,17 @@
 
   .sort-select {
     height: 32px;
-    padding: 0 12px;
+    padding: 0 var(--space-3);
     border-radius: var(--radius-md);
-    background: var(--bg-card);
+    background: var(--bg-input);
     border: 1px solid var(--border);
     color: var(--text-primary);
     font-size: var(--fs-sm);
     font-family: inherit;
     cursor: pointer;
-    min-width: 160px;
+    min-width: 7.5rem;
+    max-width: 100%;
+    flex-shrink: 1;
   }
   .sort-select:hover { border-color: var(--border-hover); }
   .sort-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--shadow-ring); }
diff --git a/frontend/src/views/Settings.svelte b/frontend/src/views/Settings.svelte
index f5d7fa9..760612e 100644
--- a/frontend/src/views/Settings.svelte
+++ b/frontend/src/views/Settings.svelte
@@ -440,13 +440,13 @@
           </div>
         </div>
 
-        <header class="section-head" style="margin-top: 20px;">
+        <header class="section-head section-head-gap">
           <h2 class="section-title-h">{$t("view.settings.general.performance.title")}</h2>
           <p class="section-help">{$t("view.settings.general.performance.help")}</p>
         </header>
         <PerformanceToggles />
 
-        <header class="section-head" style="margin-top: 20px;">
+        <header class="section-head section-head-gap">
           <h2 class="section-title-h">{$t("view.settings.general.updateBehavior.title")}</h2>
           <p class="section-help">{$t("view.settings.general.updateBehavior.help")}</p>
         </header>
@@ -469,7 +469,7 @@
           {/each}
         </div>
 
-        <header class="section-head" style="margin-top: 20px;">
+        <header class="section-head section-head-gap">
           <h2 class="section-title-h">{$t("view.settings.general.support.title")}</h2>
           <p class="section-help">{$t("view.settings.general.support.help")}</p>
         </header>
@@ -509,7 +509,7 @@
           </div>
         </div>
 
-        <header class="section-head" style="margin-top: 20px;">
+        <header class="section-head section-head-gap">
           <h2 class="section-title-h">{$t("view.settings.updates.prefs.title")}</h2>
           <p class="section-help">{$t("view.settings.updates.prefs.help")}</p>
         </header>
@@ -606,7 +606,7 @@
           </div>
         </div>
 
-        <header class="section-head" style="margin-top: 20px;">
+        <header class="section-head section-head-gap">
           <h2 class="section-title-h">{$t("view.settings.detection.launcherOverrides.title")}</h2>
           <p class="section-help">{$t("view.settings.detection.launcherOverrides.help")}</p>
         </header>
@@ -664,7 +664,7 @@
           </div>
         </div>
 
-        <header class="section-head" style="margin-top: 20px;">
+        <header class="section-head section-head-gap">
           <h2 class="section-title-h">SteamGridDB <span class="section-tag">{$t("view.settings.art.sgdb.fallback")}</span></h2>
           <p class="section-help">{$t("view.settings.art.sgdb.help")}</p>
           <p class="section-help muted">{$t("view.settings.art.sgdb.helpMuted")}</p>
@@ -688,7 +688,7 @@
           </div>
         </div>
 
-        <header class="section-head" style="margin-top: 20px;">
+        <header class="section-head section-head-gap">
           <h2 class="section-title-h">Steam Web API <span class="section-tag">{$t("view.settings.art.steamApi.optional")}</span></h2>
           <p class="section-help">{$t("view.settings.art.steamApi.help", { manifest: "appmanifest_*.acf", site: "steamcommunity.com/dev/apikey" })}</p>
           <p class="section-help muted">{$t("view.settings.art.steamApi.helpMuted", { file: "settings.json" })}</p>
@@ -804,7 +804,7 @@
           </div>
         </div>
 
-        <div class="settings-card" style="margin-top: 18px;">
+        <div class="settings-card">
           <header class="card-head">
             <h3>{$t("view.settings.advanced.network.title")}</h3>
             <p class="card-sub">{$t("view.settings.advanced.network.sub")}</p>
@@ -871,12 +871,12 @@
           </div>
         </div>
 
-        <div class="settings-card" style="margin-top: 18px;">
+        <div class="settings-card">
           <header class="card-head">
             <h3>{$t("view.settings.advanced.dlssOverrides.title")} <span class="chip chip-update small-pill"><BrandMark key="nvidia" tone="mono" size={11} /></span></h3>
             <p class="card-sub">{$t("view.settings.advanced.dlssOverrides.sub", { drivers: $t("view.settings.advanced.dlssOverrides.driversTabBold") })}</p>
           </header>
-          <button class="btn btn-primary" style="margin-top: 14px;" onclick={() => currentView.set("drivers")}>{$t("view.settings.advanced.dlssOverrides.openDrivers")}</button>
+          <button class="btn btn-primary card-cta" onclick={() => currentView.set("drivers")}>{$t("view.settings.advanced.dlssOverrides.openDrivers")}</button>
         </div>
       </section>
     {/if}
@@ -885,20 +885,24 @@
 {/if}
 
 <style>
-  .view-header { margin-bottom: 18px; }
+  .view-header { margin-bottom: var(--space-5); }
   .loading { padding: 60px 0; text-align: center; color: var(--text-muted); }
 
   .settings-hero {
-    margin-bottom: 18px;
-    padding: 16px 20px;
-    border-radius: var(--radius-lg);
-    background: var(--bg-card);
+    margin-bottom: var(--space-6);
+    padding: var(--space-5) var(--space-6);
+    border-radius: var(--radius-xl);
+    background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
     border: 1px solid var(--border);
+    box-shadow: var(--shadow-xs);
     display: grid;
     grid-template-columns: 1fr auto;
-    gap: 18px;
+    gap: var(--space-5);
     align-items: center;
   }
+  @media (max-width: 640px) {
+    .settings-hero { grid-template-columns: 1fr; }
+  }
   .hero-eyebrow {
     font-size: var(--fs-2xs);
     font-weight: 700;
@@ -906,105 +910,136 @@
     letter-spacing: var(--letter-wider);
     text-transform: uppercase;
   }
-  .hero-title-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
+  .hero-title-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); flex-wrap: wrap; }
   .hero-version { font-size: var(--fs-xl); font-weight: 700; color: var(--text-primary); letter-spacing: var(--letter-tighter); font-variant-numeric: tabular-nums; }
   .hero-status { padding: 4px 10px; font-size: var(--fs-2xs); }
-  .hero-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: 6px; line-height: var(--lh-snug); max-width: 540px; }
-  .hero-actions { display: flex; gap: 6px; flex-wrap: wrap; }
+  .hero-sub { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-2); line-height: var(--lh-snug); max-width: 540px; }
+  .hero-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
 
   .settings-layout {
     display: grid;
-    grid-template-columns: 220px 1fr;
-    gap: 28px;
+    grid-template-columns: 224px minmax(0, 1fr);
+    gap: clamp(var(--space-5), 3vw, var(--space-8));
     align-items: start;
   }
   @media (max-width: 900px) {
-    .settings-layout { grid-template-columns: 1fr; }
+    .settings-layout { grid-template-columns: 1fr; gap: var(--space-4); }
   }
   .side-nav {
     position: sticky;
-    top: 0;
+    top: var(--space-2);
     display: flex;
     flex-direction: column;
     gap: 2px;
-    padding: 6px 0;
+    padding: var(--space-2);
+    border-radius: var(--radius-xl);
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+  }
+  @media (max-width: 900px) {
+    .side-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--space-1); }
+    .side-tab { flex: 1 1 auto; }
   }
   .side-tab {
     position: relative;
     display: grid;
     grid-template-columns: 22px 1fr;
     align-items: center;
-    gap: 10px;
-    padding: 10px 14px;
+    gap: var(--space-3);
+    min-height: 40px;
+    padding: var(--space-2) var(--space-3);
     background: transparent;
     border: none;
     color: var(--text-secondary);
     font-size: var(--fs-sm);
-    font-weight: 500;
+    font-weight: 600;
     text-align: left;
+    cursor: pointer;
     border-radius: var(--radius-md);
-    transition: background 0.12s var(--ease), color 0.12s var(--ease);
+    transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
   }
   .side-tab:hover { background: var(--bg-elevated); color: var(--text-primary); }
-  .side-tab-icon { color: var(--text-muted); display: inline-flex; }
+  .side-tab:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
+  .side-tab-icon { color: var(--text-muted); display: inline-flex; transition: color var(--dur-fast) var(--ease); }
   .side-tab.active { background: var(--accent-dim); color: var(--accent); }
   .side-tab.active .side-tab-icon { color: var(--accent); }
   .side-tab-rail {
     position: absolute;
-    left: -6px;
+    left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 3px;
-    height: 60%;
-    border-radius: var(--radius-xs);
+    height: 56%;
+    border-radius: var(--radius-full);
     background: transparent;
-    transition: background 0.12s var(--ease);
+    transition: background var(--dur-fast) var(--ease);
   }
   .side-tab.active .side-tab-rail { background: var(--accent); }
 
-  .tab-panels { max-width: 920px; min-width: 0; }
-  .section-head { margin-bottom: 10px; }
+  .tab-panels { max-width: 960px; min-width: 0; container-type: inline-size; }
+  .tab-panels > :global(section) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .section-head {
+    display: block;
+    margin: 0;
+    padding-left: var(--space-3);
+    border-left: 2px solid var(--accent);
+  }
+  .section-head-gap { margin-top: var(--space-5); }
   .section-title-h {
-    font-size: var(--fs-lg);
+    font-size: var(--fs-md);
     font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: var(--letter-wide);
+    letter-spacing: var(--letter-tight);
     color: var(--text-primary);
-    margin-bottom: 3px;
+    margin-bottom: 2px;
     display: flex;
     align-items: center;
-    gap: 8px;
+    gap: var(--space-2);
+    text-transform: none;
   }
   .section-tag {
     font-size: var(--fs-2xs);
-    color: var(--text-muted);
+    color: var(--text-secondary);
     text-transform: uppercase;
     letter-spacing: var(--letter-wider);
     padding: 1px 7px;
     background: var(--bg-elevated);
+    border: 1px solid var(--border);
     border-radius: var(--radius-full);
     font-weight: 600;
   }
   .section-help {
     font-size: var(--fs-sm);
-    color: var(--text-muted);
+    color: var(--text-secondary);
     line-height: var(--lh-snug);
+    max-width: 64ch;
   }
-  .section-help.muted { font-size: var(--fs-xs); opacity: 0.75; margin-top: 4px; }
+  .section-help.muted { font-size: var(--fs-xs); color: var(--text-muted); margin-top: var(--space-1); }
 
-  .card { padding: 4px 18px; }
+  .card { padding: var(--space-1) var(--space-5); }
   .row {
-    display: flex;
-    justify-content: space-between;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
-    gap: 18px;
-    padding: 14px 0;
+    gap: var(--space-5);
+    padding: var(--space-4) 0;
+  }
+  .art-row {
+    align-items: start;
+    grid-template-columns: minmax(0, 1fr) clamp(200px, 38%, 300px);
+    gap: var(--space-4);
+  }
+  @container (max-width: 520px) {
+    .art-row { grid-template-columns: 1fr; gap: var(--space-2); }
   }
-  .art-row { align-items: flex-start; display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
   .row-divider { border-top: 1px solid var(--border); }
   .inline-num {
-    width: 80px;
-    padding: 6px 10px;
+    width: 88px;
+    padding: var(--space-2) var(--space-3);
     border-radius: var(--radius-sm);
     border: 1px solid var(--border);
     background: var(--bg-input);
@@ -1014,46 +1049,92 @@
     font-variant-numeric: tabular-nums;
     text-align: right;
     flex-shrink: 0;
+    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
   }
   .inline-num:focus {
     outline: none;
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-dim);
   }
-  .lang-select { width: 180px; flex-shrink: 0; }
-  .row-label { font-size: var(--fs-base); font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: 8px; }
-  .row-sub { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
-  .row-text { min-width: 0; flex: 1; }
+  .lang-select { width: 200px; max-width: 100%; flex-shrink: 0; }
+  .art-row input[type="text"],
+  .art-row input[type="password"] {
+    width: 100%;
+    padding: var(--space-2) var(--space-3);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border);
+    background: var(--bg-input);
+    color: var(--text-primary);
+    font-family: var(--font-mono);
+    font-size: var(--fs-sm);
+    transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+  }
+  .art-row input::placeholder { color: var(--text-placeholder); }
+  .art-row input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-dim);
+  }
+  .row-label { font-size: var(--fs-base); font-weight: 600; color: var(--text-primary); display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+  .row-sub { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px; line-height: var(--lh-normal); }
+  .row-text { min-width: 0; }
+  .settings-card {
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: var(--space-1) var(--space-5) var(--space-5);
+    min-width: 0;
+  }
+  .card-head {
+    padding: var(--space-4) 0 var(--space-2);
+    margin-bottom: var(--space-2);
+    border-bottom: 1px solid var(--border);
+  }
+  .card-head h3 {
+    font-size: var(--fs-base);
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: var(--letter-tight);
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .card-sub { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 3px; line-height: var(--lh-snug); }
+  .card-cta { margin-top: var(--space-4); }
+
   .files-disclosure {
     display: inline-flex;
     align-items: center;
     gap: 5px;
-    margin-top: 6px;
+    margin-top: var(--space-2);
     font-size: var(--fs-2xs);
-    font-weight: 500;
-    color: var(--text-muted);
+    font-weight: 600;
+    color: var(--text-secondary);
     background: transparent;
     border: none;
     cursor: pointer;
     padding: 2px 0;
+    border-radius: var(--radius-xs);
+    transition: color var(--dur-fast) var(--ease);
   }
-  .files-disclosure:hover { color: var(--text-primary); }
-  .files-disclosure .chev { transition: transform 0.15s var(--ease); }
+  .files-disclosure:hover { color: var(--accent); }
+  .files-disclosure:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
+  .files-disclosure .chev { transition: transform var(--dur-fast) var(--ease); }
   .files-disclosure .chev.open { transform: rotate(180deg); }
-  .files-meta { margin-top: 6px; padding: 7px 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-2xs); color: var(--text-muted); }
+  .files-meta { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-2xs); color: var(--text-secondary); }
 
-  .folder-input-row { display: flex; gap: 10px; align-items: center; padding: 14px 0 4px; }
+  .folder-input-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4) 0 var(--space-1); flex-wrap: wrap; }
   .folder-input-wrap {
-    flex: 1;
+    flex: 1 1 240px;
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: var(--space-3);
     height: 42px;
-    padding: 0 16px;
+    padding: 0 var(--space-4);
     background: var(--bg-elevated);
     border-radius: var(--radius-full);
-    border: 1px solid transparent;
-    transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
+    border: 1px solid var(--border);
+    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
   }
   .folder-input-wrap:focus-within {
     border-color: var(--accent);
@@ -1078,24 +1159,25 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: 8px;
-    padding: 24px 0 18px;
+    gap: var(--space-2);
+    padding: var(--space-6) 0 var(--space-5);
     color: var(--text-muted);
     font-size: var(--fs-sm);
   }
 
-  .path-list { list-style: none; padding: 12px 0 4px; margin: 0; display: flex; flex-direction: column; gap: 8px; }
+  .path-list { list-style: none; padding: var(--space-3) 0 var(--space-1); margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
   .path-row {
     display: flex;
     align-items: center;
-    gap: 12px;
-    padding: 10px 14px;
+    gap: var(--space-3);
+    padding: var(--space-2) var(--space-3);
     background: var(--bg-elevated);
+    border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    transition: background 0.12s var(--ease);
+    transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
   }
-  .path-row:hover { background: var(--bg-card-hover); }
-  .path-icon { width: 32px; height: 32px; border-radius: 10px; }
+  .path-row:hover { background: var(--bg-card-hover); border-color: var(--border-hover); }
+  .path-icon { width: 32px; height: 32px; border-radius: var(--radius-md); }
   .path-text { font-size: var(--fs-xs); color: var(--text-primary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .path-action {
     width: 32px;
@@ -1112,18 +1194,22 @@
     transition: background 0.12s var(--ease), color 0.12s var(--ease);
   }
   .path-action:hover { background: var(--bg-card-hover); color: var(--text-primary); }
+  .path-action:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
   .path-action.path-action-danger:hover { background: var(--badge-red-bg); color: var(--badge-red-fg); }
-  .row-actions { padding: 12px 0 14px; }
+  .row-actions { padding: var(--space-3) 0 var(--space-4); }
 
-  .launcher-card { padding: 6px 18px; }
+  .launcher-card { padding: var(--space-2) var(--space-5); }
   .launcher-row {
     display: grid;
-    grid-template-columns: 200px 1fr;
-    gap: 20px;
-    align-items: flex-start;
-    padding: 16px 0;
+    grid-template-columns: 200px minmax(0, 1fr);
+    gap: var(--space-5);
+    align-items: start;
+    padding: var(--space-4) 0;
   }
-  .launcher-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
+  @container (max-width: 560px) {
+    .launcher-row { grid-template-columns: 1fr; gap: var(--space-3); }
+  }
+  .launcher-head { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
   .launcher-logo {
     width: 40px;
     height: 40px;
@@ -1136,19 +1222,19 @@
   }
   .launcher-logo svg { display: block; }
   .launcher-head-text { min-width: 0; }
-  .launcher-input-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
-  .path-input-row { display: flex; align-items: stretch; gap: 6px; height: 36px; }
+  .launcher-input-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
+  .path-input-row { display: flex; align-items: stretch; gap: var(--space-2); height: 38px; }
   .path-input-row input {
     flex: 1;
     min-width: 0;
-    padding: 0 12px;
-    background: var(--bg-elevated);
-    border: 1px solid transparent;
+    padding: 0 var(--space-3);
+    background: var(--bg-input);
+    border: 1px solid var(--border);
     border-radius: var(--radius-md);
     font-family: var(--font-mono);
     font-size: var(--fs-xs);
     color: var(--text-primary);
-    transition: border-color 0.12s var(--ease), background 0.12s var(--ease), box-shadow 0.12s var(--ease);
+    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
   }
   .path-input-row input:focus {
     outline: none;
@@ -1170,6 +1256,7 @@
     transition: background 0.12s var(--ease), color 0.12s var(--ease);
   }
   .path-remove:hover { background: var(--badge-red-bg); color: var(--badge-red-fg); }
+  .path-remove:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
   .add-path-pill {
     align-self: flex-start;
     display: inline-flex;
@@ -1192,4 +1279,11 @@
     border-color: var(--accent);
     border-style: solid;
   }
+  .add-path-pill:focus-visible { outline: none; box-shadow: var(--shadow-ring); }
+
+  @media (prefers-reduced-motion: reduce) {
+    .side-tab, .side-tab-icon, .side-tab-rail, .inline-num, .files-disclosure,
+    .files-disclosure .chev, .folder-input-wrap, .path-row, .path-action,
+    .path-remove, .path-input-row input, .add-path-pill { transition: none; }
+  }
 </style>
diff --git a/package.json b/package.json
index 65ca6fc..37f9028 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dlssync",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "private": true,
   "scripts": {
     "dev": "tauri dev",
diff --git a/src-tauri/src/commands/notifications.rs b/src-tauri/src/commands/notifications.rs
index 13d0746..1021fe6 100644
--- a/src-tauri/src/commands/notifications.rs
+++ b/src-tauri/src/commands/notifications.rs
@@ -54,6 +54,13 @@ pub async fn push_notification(
     {
         let guard = state.notifications.read();
         let store = store_required(&guard)?;
+        let existing = store.list(&ListFilter::default())?;
+        let duplicate = existing
+            .iter()
+            .any(|e| e.kind == entry.kind && e.title == entry.title);
+        if duplicate {
+            return Ok(());
+        }
         store.insert(&entry)?;
     }
     let _ = app.emit(NOTIFICATION_PUSHED_EVENT, &entry);
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index b3d3c8f..815fed5 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "DLSSync",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "identifier": "io.github.xt0n1-t3ch.dlssync",
   "build": {
     "beforeBuildCommand": "pnpm -w run prebuild:kill && pnpm --filter dlssync-frontend build",
diff --git a/tests/components/GameDetailDrawer.test.ts b/tests/components/GameDetailDrawer.test.ts
index a1859ca..03fdc0a 100644
--- a/tests/components/GameDetailDrawer.test.ts
+++ b/tests/components/GameDetailDrawer.test.ts
@@ -50,7 +50,7 @@ describe("GameDetailView — full-page detail, not an overlay drawer", () => {
     expect(summary).not.toMatch(/position:\s*sticky/);
     const foot = ruleBody(drawerSource, ".drawer-foot");
     expect(foot).toMatch(/position:\s*sticky/);
-    expect(foot).toMatch(/bottom:\s*16px/);
+    expect(foot).toMatch(/bottom:\s*0/);
   });
 
   it("aligns the warning-banner Learn-more anchor with the link-btn doctrine", () => {
@@ -61,14 +61,19 @@ describe("GameDetailView — full-page detail, not an overlay drawer", () => {
   });
 });
 
-describe("GameDetailView — wired at the app level (replaces the library content)", () => {
-  it("App renders the detail in the content area when a game is open, not Library as an overlay", () => {
+describe("GameDetailView — wired at the app level (master-detail right rail)", () => {
+  it("App renders the detail in a persistent right rail beside the library, not replacing it", () => {
     expect(appSource).toMatch(/import GameDetailDrawer from "\.\/components\/GameDetailDrawer\.svelte"/);
-    expect(appSource).toMatch(/\$currentView === "library" && \$drawerGameId/);
+    expect(appSource).toMatch(/railGameId = \$derived\(\$currentView === "library" \? \$drawerGameId : null\)/);
+    expect(appSource).toMatch(/\{#if railGameId\}/);
+    expect(appSource).toMatch(/class="detail-rail"/);
+    expect(appSource).toMatch(/class:has-rail=\{!!railGameId\}/);
+    expect(appSource).toMatch(/var\(--rail-width\)/);
     expect(appSource).toContain("<GameDetailDrawer");
   });
 
-  it("Library no longer renders the detail itself and drops the push-padding side-panel", () => {
+  it("the library content stays mounted in its own primary column, never push-padded away", () => {
+    expect(appSource).toMatch(/class="main-primary"/);
     expect(librarySource).not.toContain("GameDetailDrawer");
     expect(appSource).not.toContain("data-drawer-open");
     expect(appSource).not.toMatch(/padding-right:\s*var\(--drawer-width\)/);
diff --git a/tests/components/NotificationsBell.test.ts b/tests/components/NotificationsBell.test.ts
index e325166..4451f98 100644
--- a/tests/components/NotificationsBell.test.ts
+++ b/tests/components/NotificationsBell.test.ts
@@ -47,7 +47,7 @@ describe("NotificationsBell popup (rendered)", () => {
       makeNotificationEntry("apply_success", "ok"),
       makeNotificationEntry("apply_failure", "bad"),
       makeNotificationEntry("app_update_available", "v2"),
-      makeNotificationEntry("catalog_update_available", "dlss"),
+      makeNotificationEntry("catalog_update_available", "new catalog release"),
       makeNotificationEntry("catalog_refresh_failed", "warn"),
     ]);
     const { container } = render(NotificationsBell, { props: { open: true, onClose: vi.fn() } });
@@ -56,6 +56,17 @@ describe("NotificationsBell popup (rendered)", () => {
     expect(tints).toEqual(["green", "red", "blue", "purple", "orange"]);
   });
 
+  it("renders a vendor brand logo (not a tint badge) for tech/vendor notifications", async () => {
+    notifications.set([
+      makeNotificationEntry("catalog_update_available", "DLSS 310.6 available"),
+      makeNotificationEntry("driver_update_available", "GPU driver 999 — RTX 4070 Ti SUPER"),
+    ]);
+    const { container } = render(NotificationsBell, { props: { open: true, onClose: vi.fn() } });
+    await tick();
+    expect(container.querySelectorAll(".bell-item-logo").length).toBe(2);
+    expect(container.querySelectorAll(".bell-item-badge[data-tint]").length).toBe(0);
+  });
+
   it("renders external link actions: release entry gets GitHub + Nexus, driver entry gets one", async () => {
     notifications.set([
       makeNotificationEntry("app_update_available", "DLSSync v1.6.0 available", "Fixed XeSS", {
@@ -90,6 +101,18 @@ describe("NotificationsBell popup (rendered)", () => {
     expect(tints).toEqual(["green", "purple", "green"]);
   });
 
+  it("renders the dll-updates digest with a blue tint badge (no vendor logo)", async () => {
+    notifications.set([
+      makeNotificationEntry("dll_updates_available", "8 updates ready in 3 games", "Open the Library to apply them"),
+    ]);
+    const { container } = render(NotificationsBell, { props: { open: true, onClose: vi.fn() } });
+    await tick();
+    expect(container.querySelectorAll(".bell-item-logo").length).toBe(0);
+    const badge = container.querySelector(".bell-item-badge[data-tint]");
+    expect(badge?.getAttribute("data-tint")).toBe("blue");
+    expect(container.textContent).toContain("8 updates ready in 3 games");
+  });
+
   it("marks unread entries with the accent stripe", async () => {
     notifications.set([makeNotificationEntry("apply_success", "unread one")]);
     const { container } = render(NotificationsBell, { props: { open: true, onClose: vi.fn() } });
diff --git a/tests/unit/designTokens.test.ts b/tests/unit/designTokens.test.ts
index f1647ca..6b44a60 100644
--- a/tests/unit/designTokens.test.ts
+++ b/tests/unit/designTokens.test.ts
@@ -35,6 +35,10 @@ describe("design tokens — spacing scale, density, tactile + glass-dialog utili
     expect(css).toMatch(/--density:\s*1;/);
   });
 
+  it("defines the master-detail right-rail width token", () => {
+    expect(css).toMatch(/--rail-width:\s*clamp\([^;]+\);/);
+  });
+
   it("provides the shared tactile utilities .hover-lift and .press", () => {
     expect(ruleBody(css, ".hover-lift:hover")).toMatch(
       /translateY\(-2px\)\s*scale\(1\.02\)/,
diff --git a/tests/unit/notifications.test.ts b/tests/unit/notifications.test.ts
index 5f1cab6..f7592dd 100644
--- a/tests/unit/notifications.test.ts
+++ b/tests/unit/notifications.test.ts
@@ -9,6 +9,7 @@ const ALL_KINDS: NotificationKind[] = [
   "catalog_update_available",
   "driver_update_available",
   "system_driver_update_available",
+  "dll_updates_available",
   "backup_restored",
   "scan_failed",
   "catalog_refresh_failed",