diff --git a/eslint-suppressions.json b/eslint-suppressions.json
index b542b114..8cb8c073 100644
--- a/eslint-suppressions.json
+++ b/eslint-suppressions.json
@@ -47,17 +47,6 @@
       "count": 3
     }
   },
-  "src/App.vue": {
-    "@typescript-eslint/no-explicit-any": {
-      "count": 2
-    },
-    "@typescript-eslint/no-unused-vars": {
-      "count": 1
-    },
-    "sonarjs/no-ignored-exceptions": {
-      "count": 1
-    }
-  },
   "src/ace-config.ts": {
     "@typescript-eslint/no-explicit-any": {
       "count": 24
diff --git a/src/@layouts/components/VerticalNavLayout.vue b/src/@layouts/components/VerticalNavLayout.vue
index 6d327069..eec7ef6f 100644
--- a/src/@layouts/components/VerticalNavLayout.vue
+++ b/src/@layouts/components/VerticalNavLayout.vue
@@ -2,6 +2,7 @@
 import { useDisplay } from 'vuetify'
 import VerticalNav from '@layouts/components/VerticalNav.vue'
 import GlassFixedShellBackplate from '@/components/theme/GlassFixedShellBackplate.vue'
+import GlassNavbarRefractionDefs from '@/components/theme/GlassNavbarRefractionDefs.vue'
 import {
   readThemeCustomizerSettings,
   THEME_CUSTOMIZER_CHANGE_EVENT,
@@ -11,6 +12,7 @@ import { useGlassFixedShellBackplate } from '@/composables/useGlassFixedShellBac
 import { usePWA } from '@/composables/usePWA'
 import { useShellScrollState } from '@/composables/useShellScrollState'
 import { useFooterDockHeight } from '@/composables/useFooterDockHeight'
+import { supportsGlassNavbarLiveRefraction } from '@/utils/glassNavbarRefraction'
 
 const FLOATING_NAVBAR_INSET_PX = 16
 
@@ -26,7 +28,10 @@ export default defineComponent({
     // App Dock 通过 Teleport 挂载到 body，不参与内容流；将实际高度交给布局用于末尾避让。
     const { footerDockHeight } = useFooterDockHeight()
     const fixedShellBackplate = useGlassFixedShellBackplate()
-    const themeLayout = ref(readThemeCustomizerSettings().layout)
+    const navbarRefractionMode = supportsGlassNavbarLiveRefraction() ? 'chromium' : 'goal1'
+    const initialThemeSettings = readThemeCustomizerSettings()
+    const themeLayout = ref(initialThemeSettings.layout)
+    const shellTheme = ref(initialThemeSettings.theme)
     const canUseDesktopLayout = computed(() => !mdAndDown.value && !appMode.value)
     const isOverlayShell = computed(() => mdAndDown.value && !appMode.value)
     const isCollapsedLayout = computed(() => canUseDesktopLayout.value && themeLayout.value === 'collapsed')
@@ -57,9 +62,22 @@ export default defineComponent({
     const isDialogOpen = ref(false)
     let dialogObserver: MutationObserver | null = null
     const shellScroll = useShellScrollState({ scrollLocked: isDialogOpen })
+    const isGlassFloatingAway = ref(false)
+
+    // 桌面脱离窗口边缘是材质状态；复用滚动坐标，但不等待移动App的64px收起阈值。
+    watch(
+      () => [shellScroll.scrollY.value, isFloatingNavbarEligible.value, shellTheme.value] as const,
+      ([scrollY, eligible, theme]) => {
+        if (!eligible || theme !== 'glass' || scrollY <= 4) isGlassFloatingAway.value = false
+        else if (scrollY >= 12) isGlassFloatingAway.value = true
+      },
+      { immediate: true },
+    )
 
     const handleThemeCustomizerChange = (event: Event) => {
-      themeLayout.value = (event as CustomEvent<ThemeCustomizerSettings>).detail.layout
+      const settings = (event as CustomEvent<ThemeCustomizerSettings>).detail
+      themeLayout.value = settings.layout
+      shellTheme.value = settings.theme
     }
 
     // 监听弹窗状态变化
@@ -149,7 +167,10 @@ export default defineComponent({
 
       // 👉 根据路由 meta 决定 footer 高度
       const shouldShowFooter = !route.meta.hideFooter
-      const isNavbarAwayFromTop = shellScroll.state.value !== 'expanded'
+      const isNavbarAwayFromTop =
+        isFloatingNavbarEligible.value && shellTheme.value === 'glass'
+          ? isGlassFloatingAway.value
+          : shellScroll.state.value !== 'expanded'
       // compact/revealed 是 App 上下文顶栏的呈现状态；其他 Shell 只消费 away-from-top 材质状态。
       const isNavbarCompact = appMode.value && shellScroll.state.value === 'compact'
       const isNavbarRevealed = appMode.value && shellScroll.state.value === 'revealed'
@@ -208,6 +229,8 @@ export default defineComponent({
               ? 'theme-qualified'
               : 'connected',
           'data-shell-scroll-direction': shellScroll.direction.value,
+          'data-glass-navigation-refraction': navbarRefractionMode,
+          'data-glass-navbar-refraction': navbarRefractionMode,
           style: {
             '--layout-footer-dock-height': `${footerDockHeight.value ?? 0}px`,
             '--shell-floating-navbar-scale-x': floatingNavbarScale.value,
@@ -215,6 +238,7 @@ export default defineComponent({
           },
         },
         [
+          navbarRefractionMode === 'chromium' ? h(GlassNavbarRefractionDefs) : null,
           fixedShellBackplateNode,
           verticalNav,
           h('div', { class: 'layout-content-wrapper' }, [navbar, main, footer]),
diff --git a/src/@layouts/components/__tests__/VerticalNavLayout.spec.ts b/src/@layouts/components/__tests__/VerticalNavLayout.spec.ts
index 57da91ea..3c1d5294 100644
--- a/src/@layouts/components/__tests__/VerticalNavLayout.spec.ts
+++ b/src/@layouts/components/__tests__/VerticalNavLayout.spec.ts
@@ -13,6 +13,8 @@ const mocks = vi.hoisted(() => ({
   isStandaloneMode: false,
   isWindowControlsOverlayMode: false,
   mdAndDown: false,
+  navbarRefractionSupported: false,
+  scrollY: 0,
   revision: undefined as { value: number } | undefined,
   state: 'expanded' as 'expanded' | 'compact' | 'revealed',
 }))
@@ -24,6 +26,10 @@ vi.mock('@/composables/useShellScrollState', async () => {
     useShellScrollState: () => ({
       direction: computed(() => mocks.direction),
       state: computed(() => mocks.state),
+      scrollY: computed(() => {
+        void mocks.revision!.value
+        return mocks.scrollY
+      }),
     }),
   }
 })
@@ -85,6 +91,10 @@ vi.mock('@/composables/useGlassFixedShellBackplate', async () => {
   }
 })
 
+vi.mock('@/utils/glassNavbarRefraction', () => ({
+  supportsGlassNavbarLiveRefraction: () => mocks.navbarRefractionSupported,
+}))
+
 vi.mock('@/composables/useThemeCustomizer', () => ({
   readThemeCustomizerSettings: () => ({ layout: 'vertical' }),
   THEME_CUSTOMIZER_CHANGE_EVENT: 'moviepilot:theme-customizer-change',
@@ -94,6 +104,10 @@ vi.mock('@/components/theme/GlassFixedShellBackplate.vue', () => ({
   default: { template: '<div data-testid="fixed-shell-backplate" />' },
 }))
 
+vi.mock('@/components/theme/GlassNavbarRefractionDefs.vue', () => ({
+  default: { template: '<svg data-testid="navbar-refraction-defs" />' },
+}))
+
 vi.mock('@layouts/components/VerticalNav.vue', () => ({
   default: { template: '<aside data-testid="vertical-nav"><slot /></aside>' },
 }))
@@ -143,6 +157,8 @@ describe('VerticalNavLayout shell states', () => {
     mocks.isStandaloneMode = false
     mocks.isWindowControlsOverlayMode = false
     mocks.mdAndDown = false
+    mocks.navbarRefractionSupported = false
+    mocks.scrollY = 0
     mocks.state = 'expanded'
   })
 
@@ -177,6 +193,20 @@ describe('VerticalNavLayout shell states', () => {
     expect(revealedWrapper.get('.layout-navbar').attributes('data-shell-navbar-state')).toBe('revealed')
   })
 
+  it('mounts live backdrop definitions only for the verified Chromium path', () => {
+    const goal1Wrapper = mountLayout()
+
+    expect(goal1Wrapper.get('.layout-wrapper').attributes('data-glass-navbar-refraction')).toBe('goal1')
+    expect(goal1Wrapper.find('[data-testid="navbar-refraction-defs"]').exists()).toBe(false)
+    goal1Wrapper.unmount()
+
+    mocks.navbarRefractionSupported = true
+    const chromiumWrapper = mountLayout()
+
+    expect(chromiumWrapper.get('.layout-wrapper').attributes('data-glass-navbar-refraction')).toBe('chromium')
+    expect(chromiumWrapper.find('[data-testid="navbar-refraction-defs"]').exists()).toBe(true)
+  })
+
   it('keeps the footer contract stable across App and drawer shells', async () => {
     mocks.appMode = true
     mocks.mdAndDown = true
@@ -358,6 +388,26 @@ describe('VerticalNavLayout shell states', () => {
     expect(appWrapper.get('.layout-navbar').attributes()).toHaveProperty('inert')
   })
 
+  it('responds to glass floating early with hysteresis without compacting App controls', async () => {
+    const wrapper = mountLayout()
+    window.dispatchEvent(
+      new CustomEvent('moviepilot:theme-customizer-change', { detail: { layout: 'horizontal', theme: 'glass' } }),
+    )
+    await nextTick()
+    const root = wrapper.get('.layout-wrapper')
+    mocks.scrollY = 12
+    await refreshShell()
+    expect(root.classes()).toContain('layout-navbar-away-from-top')
+    expect(wrapper.get('.layout-navbar').attributes('data-shell-navbar-state')).toBe('expanded')
+    mocks.scrollY = 8
+    await refreshShell()
+    expect(root.classes()).toContain('layout-navbar-away-from-top')
+    mocks.scrollY = 4
+    await refreshShell()
+    expect(root.classes()).not.toContain('layout-navbar-away-from-top')
+    wrapper.unmount()
+  })
+
   it('exposes floating eligibility only for an ordinary desktop horizontal environment', async () => {
     mocks.state = 'compact'
     const browserWrapper = mountLayout()
diff --git a/src/App.vue b/src/App.vue
index 9a5be4f3..0f63d7f1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -286,7 +286,20 @@ const shouldRenderGlassOpticalLayer = computed(
     isInitialRouteReady.value &&
     Boolean(activeBackgroundImage.value),
 )
-const GlassOpticalLayer = defineAsyncComponent(() => import('@/components/theme/GlassOpticalLayer.vue'))
+const loadGlassOpticalLayer = () => import('@/components/theme/GlassOpticalLayer.vue')
+const GlassOpticalLayer = defineAsyncComponent(loadGlassOpticalLayer)
+
+// 模块下载与壁纸准备并行；实际挂载仍等待路由和壁纸，CSS 档不请求光学组件。
+watch(
+  () => isGlassTheme.value && opticalQuality.value !== 'css',
+  enabled => {
+    if (!enabled) return
+    void loadGlassOpticalLayer().catch(error => {
+      console.warn('[Glass] Optical component preload failed', error)
+    })
+  },
+  { immediate: true },
+)
 const transparentBackgroundBlur = ref(16)
 const transparencyGlassQuality = ref<TransparencyGlassQuality>(
   localStorage.getItem('transparency-glass-quality') === 'realtime' ? 'realtime' : 'lightweight',
@@ -864,13 +877,15 @@ async function removeLoadingWithStateCheck() {
     globalLoadingStateManager.setLoadingState('pwa-state', true)
 
     // 静默检查PWA状态恢复，但不能让恢复异常或慢请求挡住应用外壳。
-    const pwaController = (window as any).pwaStateController
+    const pwaController = (
+      window as Window & {
+        /** 宿主可选的状态恢复钩子；启动预算到期后不阻塞外壳。 */
+        pwaStateController?: { waitForStateRestore?: () => unknown }
+      }
+    ).pwaStateController
     if (pwaController?.waitForStateRestore) {
-      await waitForLaunchTask(
-        Promise.resolve().then(() => pwaController.waitForStateRestore()),
-        getRemainingLaunchBudget(),
-        'PWA state restore',
-      )
+      const restoreState = pwaController.waitForStateRestore.bind(pwaController)
+      await waitForLaunchTask(Promise.resolve().then(restoreState), getRemainingLaunchBudget(), 'PWA state restore')
     }
     globalLoadingStateManager.setLoadingState('pwa-state', false)
 
@@ -893,7 +908,7 @@ async function removeLoadingWithStateCheck() {
       checkAndEmitUnreadMessages()
     }
   } catch (error) {
-    // 即使出错也要移除加载界面
+    console.warn('[Launch] State checks failed; revealing the application shell', error)
     globalLoadingStateManager.reset()
     await animateAndRemoveLoader()
   }
@@ -927,9 +942,12 @@ async function loadBackgroundImages(loadVersion: number, retryCount = 0) {
     resetBackgroundCrossfade()
     recordGlassLaunchTiming('wallpaper-committed', activeBackgroundImage.value)
     startBackgroundRotation()
-  } catch (error: any) {
+  } catch (error: unknown) {
     if (loadVersion !== backgroundLoadVersion) return
-    const isAbortError = error.name === 'AbortError' || error.code === 'ERR_CANCELED'
+    const isAbortError =
+      typeof error === 'object' &&
+      error !== null &&
+      (('name' in error && error.name === 'AbortError') || ('code' in error && error.code === 'ERR_CANCELED'))
     if (retryCount < maxRetries) {
       const baseDelay = isAbortError ? 1000 : 3000
       const retryDelay = Math.min(baseDelay * Math.pow(2, retryCount), 10000)
diff --git a/src/components/theme/GlassFixedShellBackplate.vue b/src/components/theme/GlassFixedShellBackplate.vue
index 433a3b7f..488fe53b 100644
--- a/src/components/theme/GlassFixedShellBackplate.vue
+++ b/src/components/theme/GlassFixedShellBackplate.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'
 import type { GlassFixedShellBackplateLayer } from '@/composables/useGlassFixedShellBackplate'
 
 interface Props {
@@ -12,17 +13,292 @@ interface Props {
   transitionDurationMs: number
 }
 
+/** 共用稳定壁纸背板、但拥有独立外轮廓的导航表面。 */
+type GeometrySurface = 'sidebar' | 'navbar'
+
+/** SVG objectBoundingBox 坐标，分别以背板的实际宽和高归一化。 */
+interface NormalizedClipRect {
+  /** 可见高度占背板高度的比例。 */
+  height: number
+  /** 水平方向圆角半径占背板宽度的比例。 */
+  rx: number
+  /** 垂直方向圆角半径占背板高度的比例。 */
+  ry: number
+  /** 可见宽度占背板宽度的比例。 */
+  width: number
+  /** 相对背板左边缘的位置。 */
+  x: number
+  /** 相对背板上边缘的位置。 */
+  y: number
+}
+
+/** 背板实际CSS像素边界，不使用可能包含滚动条的window.innerWidth。 */
+interface BackplateBounds {
+  /** 真实高度。 */
+  height: number
+  /** 实际左侧视口坐标。 */
+  left: number
+  /** 实际顶部视口坐标。 */
+  top: number
+  /** 排除滚动条后的实际宽度。 */
+  width: number
+}
+
+const GEOMETRY_SURFACES: readonly GeometrySurface[] = ['sidebar', 'navbar']
+const GEOMETRY_ATTRIBUTE_FILTER = [
+  'class',
+  'data-glass-appearance',
+  'data-glass-quality',
+  'data-shell-display-environment',
+  'data-shell-mode',
+  'data-shell-navbar-attachment',
+  'data-theme',
+  'style',
+]
+
 const props = defineProps<Props>()
+const mainBackplateRef = ref<HTMLElement | null>(null)
+const clipRects = ref<NormalizedClipRect[]>([])
+const clipPathId = `glass-fixed-shell-clip-${useId().replace(/[^a-zA-Z0-9_-]/gu, '-')}`
 const transitionStyle = computed(() => ({
   '--glass-fixed-shell-transition-duration': `${Math.max(0, props.transitionDurationMs)}ms`,
 }))
+const mainBackplateStyle = computed(() => ({
+  ...transitionStyle.value,
+  clipPath: clipRects.value.length === GEOMETRY_SURFACES.length ? `url(#${clipPathId})` : undefined,
+}))
+
+const observedElements: Record<GeometrySurface, HTMLElement | null> = {
+  navbar: null,
+  sidebar: null,
+}
+const transitionHandlers: Record<GeometrySurface, EventListener | null> = {
+  navbar: null,
+  sidebar: null,
+}
+
+let isMounted = false
+let observedShell: HTMLElement | null = null
+let resizeObserver: ResizeObserver | null = null
+let stateObserver: MutationObserver | null = null
+let geometrySyncQueued = false
+let usesResizeFallback = false
+let lastGeometryKey = ''
+
+function getLayoutShell() {
+  return mainBackplateRef.value?.closest('.layout-wrapper') as HTMLElement | null
+}
+
+/** 仅为桌面连接式导航启用几何裁剪，其他壳层继续使用主题原有 CSS 裁剪。 */
+function isConnectedDesktopShell(shell: HTMLElement) {
+  return (
+    document.documentElement.dataset.theme === 'glass' &&
+    !props.isOverlayNav &&
+    shell.dataset.shellMode === 'desktop' &&
+    shell.dataset.shellNavbarAttachment === 'connected' &&
+    !shell.classList.contains('layout-horizontal-nav-active') &&
+    !shell.classList.contains('layout-overlay-nav') &&
+    !shell.classList.contains('layout-app-shell') &&
+    !shell.classList.contains('layout-window-controls-overlay-shell')
+  )
+}
+
+function readBackplateBounds(): BackplateBounds | null {
+  const backplate = mainBackplateRef.value
+  if (!backplate) return null
+
+  const bounds = backplate.getBoundingClientRect()
+  const width = Number.isFinite(bounds.width) ? Math.max(0, bounds.width) : 0
+  const height = Number.isFinite(bounds.height) ? Math.max(0, bounds.height) : 0
+  if (width <= 0 || height <= 0) return null
+
+  return {
+    height,
+    left: Number.isFinite(bounds.left) ? bounds.left : 0,
+    top: Number.isFinite(bounds.top) ? bounds.top : 0,
+    width,
+  }
+}
+
+function clamp(value: number, minimum: number, maximum: number) {
+  return Math.min(Math.max(value, minimum), maximum)
+}
+
+/** 固定导航四角共用等半径；读取计算后的像素值与CSS轮廓保持一致。 */
+function readComputedRadius(element: HTMLElement) {
+  const radius = Number.parseFloat(window.getComputedStyle(element).borderTopLeftRadius)
+  return Number.isFinite(radius) ? Math.max(0, radius) : 0
+}
+
+function readNormalizedClipRect(element: HTMLElement, backplate: BackplateBounds) {
+  const bounds = element.getBoundingClientRect()
+  const left = Number.isFinite(bounds.left) ? bounds.left : 0
+  const top = Number.isFinite(bounds.top) ? bounds.top : 0
+  const width = Number.isFinite(bounds.width) ? Math.max(0, bounds.width) : 0
+  const height = Number.isFinite(bounds.height) ? Math.max(0, bounds.height) : 0
+  const right = Number.isFinite(bounds.right) ? bounds.right : left + width
+  const bottom = Number.isFinite(bounds.bottom) ? bounds.bottom : top + height
+  const visibleLeft = clamp(Math.min(left, right) - backplate.left, 0, backplate.width)
+  const visibleTop = clamp(Math.min(top, bottom) - backplate.top, 0, backplate.height)
+  const visibleRight = clamp(Math.max(left, right) - backplate.left, 0, backplate.width)
+  const visibleBottom = clamp(Math.max(top, bottom) - backplate.top, 0, backplate.height)
+  const visibleWidth = visibleRight - visibleLeft
+  const visibleHeight = visibleBottom - visibleTop
+
+  if (visibleWidth <= 0 || visibleHeight <= 0) return null
+
+  const radius = readComputedRadius(element)
+  const normalizedWidth = visibleWidth / backplate.width
+  const normalizedHeight = visibleHeight / backplate.height
+
+  return {
+    height: normalizedHeight,
+    rx: clamp(radius / backplate.width, 0, normalizedWidth / 2),
+    ry: clamp(radius / backplate.height, 0, normalizedHeight / 2),
+    width: normalizedWidth,
+    x: visibleLeft / backplate.width,
+    y: visibleTop / backplate.height,
+  } satisfies NormalizedClipRect
+}
+
+function bindGeometrySurface(surface: GeometrySurface, element: HTMLElement | null) {
+  const previousElement = observedElements[surface]
+  if (previousElement === element) return
+
+  if (resizeObserver && previousElement) resizeObserver.unobserve(previousElement)
+  const previousHandler = transitionHandlers[surface]
+  if (previousElement && previousHandler) {
+    previousElement.removeEventListener('transitionrun', previousHandler)
+    previousElement.removeEventListener('transitionend', previousHandler)
+    previousElement.removeEventListener('transitioncancel', previousHandler)
+  }
+
+  observedElements[surface] = element
+  transitionHandlers[surface] = null
+  if (!element) return
+
+  resizeObserver?.observe(element)
+  const transitionHandler: EventListener = () => scheduleGeometrySync()
+  transitionHandlers[surface] = transitionHandler
+  element.addEventListener('transitionrun', transitionHandler)
+  element.addEventListener('transitionend', transitionHandler)
+  element.addEventListener('transitioncancel', transitionHandler)
+}
+
+function observeStateSources() {
+  if (!stateObserver) return
+
+  stateObserver.disconnect()
+  stateObserver.observe(document.documentElement, {
+    attributeFilter: GEOMETRY_ATTRIBUTE_FILTER,
+    attributes: true,
+  })
+  if (document.body) {
+    stateObserver.observe(document.body, {
+      attributeFilter: GEOMETRY_ATTRIBUTE_FILTER,
+      attributes: true,
+    })
+  }
+  if (observedShell) {
+    stateObserver.observe(observedShell, {
+      attributeFilter: GEOMETRY_ATTRIBUTE_FILTER,
+      attributes: true,
+    })
+  }
+}
+
+function refreshObservedElements() {
+  const shell = getLayoutShell()
+  if (shell !== observedShell) {
+    observedShell = shell
+    observeStateSources()
+  }
+
+  bindGeometrySurface('sidebar', shell?.querySelector<HTMLElement>('.layout-vertical-nav:not(.overlay-nav)') ?? null)
+  bindGeometrySurface('navbar', shell?.querySelector<HTMLElement>('.layout-navbar') ?? null)
+}
+
+function applyGeometry(nextRects: NormalizedClipRect[]) {
+  const nextKey = JSON.stringify(nextRects)
+  if (nextKey === lastGeometryKey) return
+
+  lastGeometryKey = nextKey
+  clipRects.value = nextRects
+}
+
+function syncGeometry() {
+  if (!isMounted) return
+
+  refreshObservedElements()
+  const shell = observedShell
+  const backplate = readBackplateBounds()
+  const sidebar = observedElements.sidebar
+  const navbar = observedElements.navbar
+
+  if (!shell || !backplate || !isConnectedDesktopShell(shell) || !sidebar || !navbar) {
+    applyGeometry([])
+    return
+  }
+
+  const nextRects = GEOMETRY_SURFACES.map(surface =>
+    readNormalizedClipRect(observedElements[surface] as HTMLElement, backplate),
+  )
+  if (nextRects.some(rect => rect === null)) {
+    applyGeometry([])
+    return
+  }
+
+  applyGeometry(nextRects as NormalizedClipRect[])
+}
+
+function scheduleGeometrySync() {
+  if (geometrySyncQueued) return
+
+  geometrySyncQueued = true
+  queueMicrotask(() => {
+    geometrySyncQueued = false
+    syncGeometry()
+  })
+}
+
+watch(() => props.isOverlayNav, scheduleGeometrySync, { flush: 'sync' })
+
+onMounted(() => {
+  isMounted = true
+  stateObserver = new MutationObserver(scheduleGeometrySync)
+  resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(() => scheduleGeometrySync())
+  usesResizeFallback = resizeObserver === null
+  if (usesResizeFallback) window.addEventListener('resize', scheduleGeometrySync, { passive: true })
+  else if (mainBackplateRef.value) resizeObserver?.observe(mainBackplateRef.value)
+
+  refreshObservedElements()
+  observeStateSources()
+  syncGeometry()
+  void nextTick(syncGeometry)
+})
+
+onBeforeUnmount(() => {
+  isMounted = false
+  stateObserver?.disconnect()
+  stateObserver = null
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  if (usesResizeFallback) window.removeEventListener('resize', scheduleGeometrySync)
+  usesResizeFallback = false
+
+  for (const surface of GEOMETRY_SURFACES) bindGeometrySurface(surface, null)
+  observedShell = null
+  geometrySyncQueued = false
+  lastGeometryKey = ''
+})
 </script>
 
 <template>
   <div
+    ref="mainBackplateRef"
     class="glass-fixed-shell-backplate glass-fixed-shell-backplate--main"
     data-backplate-surface="main"
-    :style="transitionStyle"
+    :style="mainBackplateStyle"
     aria-hidden="true"
   >
     <div
@@ -46,6 +322,24 @@ const transitionStyle = computed(() => ({
     </div>
   </div>
 
+  <svg class="glass-fixed-shell-backplate__geometry" width="0" height="0" aria-hidden="true" focusable="false">
+    <defs>
+      <clipPath :id="clipPathId" clipPathUnits="objectBoundingBox">
+        <rect
+          v-for="(rect, index) in clipRects"
+          :key="GEOMETRY_SURFACES[index]"
+          :data-clip-surface="GEOMETRY_SURFACES[index]"
+          :height="rect.height"
+          :rx="rect.rx"
+          :ry="rect.ry"
+          :width="rect.width"
+          :x="rect.x"
+          :y="rect.y"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+
   <div
     v-if="isOverlayNav"
     class="glass-fixed-shell-backplate glass-fixed-shell-backplate--overlay-nav"
@@ -89,6 +383,12 @@ const transitionStyle = computed(() => ({
   pointer-events: none;
 }
 
+.glass-fixed-shell-backplate__geometry {
+  position: fixed;
+  overflow: hidden;
+  pointer-events: none;
+}
+
 .glass-fixed-shell-backplate--main {
   --glass-fixed-shell-nav-inline-size: #{variables.$layout-vertical-nav-width};
 
diff --git a/src/components/theme/GlassNavbarRefractionDefs.vue b/src/components/theme/GlassNavbarRefractionDefs.vue
new file mode 100644
index 00000000..2306984e
--- /dev/null
+++ b/src/components/theme/GlassNavbarRefractionDefs.vue
@@ -0,0 +1,510 @@
+<script lang="ts" setup>
+import type { Ref } from 'vue'
+import {
+  createGlassNavbarDisplacementMap,
+  getGlassNavbarOpticalResponse,
+  NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP,
+} from '@/utils/glassNavbarRefraction'
+import { useEffectiveGlassSettings } from '@/composables/useThemeCustomizer'
+
+/** 独立持有几何、位移图和就绪状态的导航表面。 */
+type NavigationSurface = 'navbar' | 'sidebar'
+
+interface NavigationSurfaceState {
+  /** 已解码缓存对应的完整几何与光学参数键。 */
+  cachedGeometry: string
+  /** 已成功解码、允许重新激活的 PNG。 */
+  cachedMap: string
+  /** 初始图像尺寸与计算样式不可用时的半径回退。 */
+  defaultGeometry: {
+    height: number
+    radius: number
+    width: number
+  }
+  /** 被观察的真实导航元素，前景控件不参与位移。 */
+  element: HTMLElement | null
+  /** 避免相同失败输入反复解码的键。 */
+  failedGeometry: string
+  /** 必须全部结束后才允许激活最终几何的过渡属性。 */
+  geometryTransitions: Set<string>
+  /** 输入改变时解除失败重试抑制的上一份几何键。 */
+  lastObservedGeometry: string
+  /** 使过时解码结果失效的单调版本。 */
+  mapRevision: number
+  /** 与 feImage 同批提交的 CSS 像素尺寸。 */
+  mapSize: { height: number; width: number }
+  /** 当前绑定到 feImage 的位移图。 */
+  mapUrl: Ref<string>
+  /** 正在解码的输入，重复尺寸通知不会将它取消。 */
+  pendingGeometry: string
+  /** CSS 只在该属性为 true 时激活对应 SVG。 */
+  readyAttribute: string
+  /** 承载布局资格与就绪属性的外壳。 */
+  shell: HTMLElement | null
+}
+
+const settings = useEffectiveGlassSettings()
+const opticalResponse = computed(() =>
+  getGlassNavbarOpticalResponse({
+    deformation: settings.value.glassDeformationStrength,
+    translation: settings.value.glassTranslationStrength,
+  }),
+)
+
+const DEFAULT_NAVBAR_GEOMETRY = {
+  height: 64,
+  radius: 16,
+  width: 1200,
+}
+const DEFAULT_SIDEBAR_GEOMETRY = {
+  height: 800,
+  radius: 0,
+  width: 260,
+}
+const MAP_RESIZE_SETTLE_MS = 60
+const OBSERVED_SIZE_STYLE_PROPERTIES = [
+  '--shell-floating-navbar-radius',
+  '--shell-floating-navbar-inset',
+  '--layout-navbar-block-size',
+  '--layout-navbar-safe-area-top',
+  '--navbar-tab-height',
+  '--layout-vertical-nav-width',
+  '--layout-vertical-nav-collapsed-width',
+  'border-radius',
+  'border-start-start-radius',
+  'width',
+  'height',
+  'inline-size',
+  'block-size',
+]
+const navbarMapUrl = ref(NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP)
+const sidebarMapUrl = ref(NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP)
+const navbarMapSize = reactive({
+  height: DEFAULT_NAVBAR_GEOMETRY.height,
+  width: DEFAULT_NAVBAR_GEOMETRY.width,
+})
+const sidebarMapSize = reactive({
+  height: DEFAULT_SIDEBAR_GEOMETRY.height,
+  width: DEFAULT_SIDEBAR_GEOMETRY.width,
+})
+
+let observedShell: HTMLElement | null = null
+let resizeObserver: ResizeObserver | null = null
+let stateObserver: MutationObserver | null = null
+let resizeTimer: ReturnType<typeof setTimeout> | null = null
+let transparencyQuery: MediaQueryList | null = null
+const navbarState: NavigationSurfaceState = {
+  cachedGeometry: '',
+  cachedMap: NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP,
+  defaultGeometry: DEFAULT_NAVBAR_GEOMETRY,
+  element: null,
+  failedGeometry: '',
+  geometryTransitions: new Set(),
+  lastObservedGeometry: '',
+  mapRevision: 0,
+  mapSize: navbarMapSize,
+  mapUrl: navbarMapUrl,
+  pendingGeometry: '',
+  readyAttribute: 'data-glass-navbar-refraction-ready',
+  shell: null,
+}
+const sidebarState: NavigationSurfaceState = {
+  cachedGeometry: '',
+  cachedMap: NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP,
+  defaultGeometry: DEFAULT_SIDEBAR_GEOMETRY,
+  element: null,
+  failedGeometry: '',
+  geometryTransitions: new Set(),
+  lastObservedGeometry: '',
+  mapRevision: 0,
+  mapSize: sidebarMapSize,
+  mapUrl: sidebarMapUrl,
+  pendingGeometry: '',
+  readyAttribute: 'data-glass-sidebar-refraction-ready',
+  shell: null,
+}
+const surfaceStates: Record<NavigationSurface, NavigationSurfaceState> = {
+  navbar: navbarState,
+  sidebar: sidebarState,
+}
+const SURFACE_KEYS: readonly NavigationSurface[] = ['navbar', 'sidebar']
+const transitionHandlers: Record<NavigationSurface, EventListener | null> = {
+  navbar: null,
+  sidebar: null,
+}
+
+function getSurfaceState(surface: NavigationSurface) {
+  return surfaceStates[surface]
+}
+
+/** 只有桌面清透/色调导航进入 SVG 位移增强；磨砂固定层沿用稳定背板或原生 CSS。 */
+function isRefractionActive(surface: NavigationSurface) {
+  const { theme, glassAppearance, glassQuality } = document.documentElement.dataset
+  const state = getSurfaceState(surface)
+  const shell = state.shell
+  const element = state.element
+
+  if (
+    !element ||
+    !shell ||
+    theme !== 'glass' ||
+    (glassAppearance !== 'clear' && glassAppearance !== 'tinted') ||
+    (glassQuality !== 'balanced' && glassQuality !== 'high') ||
+    transparencyQuery?.matches
+  )
+    return false
+
+  if (surface === 'navbar') {
+    return (
+      (shell.dataset.shellMode === 'desktop' &&
+        !shell.classList.contains('layout-horizontal-nav-active') &&
+        !shell.classList.contains('layout-window-controls-overlay-shell')) ||
+      (shell.classList.contains('layout-navbar-floating-eligible') &&
+        shell.classList.contains('layout-navbar-away-from-top'))
+    )
+  }
+
+  return (
+    !element.classList.contains('overlay-nav') &&
+    !shell.classList.contains('layout-overlay-nav') &&
+    !shell.classList.contains('layout-app-shell') &&
+    !shell.classList.contains('layout-horizontal-nav-active')
+  )
+}
+
+/** 几何或状态变化后立即撤销对应 map，避免另一个尺寸继续采样旧位移场。 */
+function invalidateDisplacementMap(surface: NavigationSurface) {
+  const state = getSurfaceState(surface)
+  state.mapRevision += 1
+  state.pendingGeometry = ''
+  state.shell?.setAttribute(state.readyAttribute, 'false')
+}
+
+function getInlineStyleValue(styleText: string | null, property: string) {
+  const declarations = document.createElement('div').style
+  declarations.cssText = styleText ?? ''
+  return declarations.getPropertyValue(property).trim()
+}
+
+/** 滚动缩放变量不改变真实采样几何，只有尺寸声明变化才撤销当前 map。 */
+function hasObservedSizeStyleChange(record: MutationRecord) {
+  if (record.attributeName !== 'style') return true
+
+  const target = record.target as Element
+  const currentStyle = target.getAttribute('style')
+
+  return OBSERVED_SIZE_STYLE_PROPERTIES.some(
+    property => getInlineStyleValue(record.oldValue, property) !== getInlineStyleValue(currentStyle, property),
+  )
+}
+
+function handleStateMutations(records: MutationRecord[]) {
+  if (records.some(hasObservedSizeStyleChange)) scheduleDisplacementMapSync()
+}
+
+/** 读取真实表面边界；圆角使用计算后的 CSS 像素，矩形侧栏明确传入 0。 */
+function readDisplacementGeometry(surface: NavigationSurface) {
+  const state = getSurfaceState(surface)
+  if (!state.element) return null
+  const bounds = state.element.getBoundingClientRect()
+  const styles = getComputedStyle(state.element)
+  // 自定义属性可能保留 rem；只有计算后的圆角与位移图使用同一 CSS 像素坐标。
+  const borderRadius = Number.parseFloat(styles.borderStartStartRadius)
+  const height = Math.max(1, Math.round(bounds.height))
+  const width = Math.max(1, Math.round(bounds.width))
+
+  const radius = Number.isFinite(borderRadius) ? borderRadius : state.defaultGeometry.radius
+  const optics = opticalResponse.value
+  return {
+    height,
+    radius,
+    width,
+    optics,
+    key: `${width}:${height}:${radius}:${optics.horizontalRatio}:${optics.verticalRatio}:${optics.translationPx}`,
+  }
+}
+
+/** map 与 feImage 尺寸同批更新；解码失败或过期结果继续使用 CSS 材质。 */
+async function syncDisplacementMap(surface: NavigationSurface) {
+  const state = getSurfaceState(surface)
+  if (!isRefractionActive(surface) || state.geometryTransitions.size > 0) return
+  const geometry = readDisplacementGeometry(surface)
+  if (!geometry || state.pendingGeometry === geometry.key) return
+  const { height, radius, width, optics, key: geometryKey } = geometry
+  const revision = ++state.mapRevision
+  state.pendingGeometry = geometryKey
+  if (state.lastObservedGeometry !== geometryKey) {
+    state.lastObservedGeometry = geometryKey
+    state.failedGeometry = ''
+  }
+
+  try {
+    if (state.cachedGeometry !== geometryKey) {
+      if (state.failedGeometry === geometryKey) return
+      const map = createGlassNavbarDisplacementMap({ height, radius, width, optics })
+      if (map === NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP) {
+        state.failedGeometry = geometryKey
+        invalidateDisplacementMap(surface)
+        return
+      }
+      const decoded = new Image()
+      decoded.src = map
+      await decoded.decode()
+      if (revision !== state.mapRevision || !isRefractionActive(surface)) return
+      state.cachedGeometry = geometryKey
+      state.cachedMap = map
+      state.failedGeometry = ''
+    }
+    state.mapSize.height = height
+    state.mapSize.width = width
+    state.mapUrl.value = state.cachedMap
+    await nextTick()
+    if (revision === state.mapRevision && isRefractionActive(surface)) {
+      state.shell?.setAttribute(state.readyAttribute, 'true')
+    }
+  } catch {
+    // 位移是增强能力；图片解码失败不阻断导航和原生玻璃表面。
+    if (revision === state.mapRevision) {
+      state.failedGeometry = geometryKey
+      invalidateDisplacementMap(surface)
+    }
+  } finally {
+    if (revision === state.mapRevision) state.pendingGeometry = ''
+  }
+}
+
+function syncDisplacementMaps() {
+  for (const surface of SURFACE_KEYS) void syncDisplacementMap(surface)
+}
+
+// 连续 resize 需要合并；相同几何的通知不撤销已就绪或正在解码的位移图。
+function scheduleDisplacementMapSync() {
+  if (resizeTimer !== null) clearTimeout(resizeTimer)
+  resizeTimer = null
+
+  let shouldSync = false
+  for (const surface of SURFACE_KEYS) {
+    const state = getSurfaceState(surface)
+    if (!isRefractionActive(surface) || state.geometryTransitions.size > 0) {
+      if (state.element) invalidateDisplacementMap(surface)
+      continue
+    }
+
+    const geometry = readDisplacementGeometry(surface)
+    if (!geometry || geometry.key === state.pendingGeometry) continue
+    if (geometry.key === state.cachedGeometry && state.mapUrl.value === state.cachedMap) {
+      // 取消草稿可能命中旧缓存，同时还有另一参数的解码；先使该异步结果失效。
+      if (state.pendingGeometry) invalidateDisplacementMap(surface)
+      state.shell?.setAttribute(state.readyAttribute, 'true')
+      continue
+    }
+    invalidateDisplacementMap(surface)
+    shouldSync = true
+  }
+  if (!shouldSync) return
+
+  resizeTimer = setTimeout(() => {
+    resizeTimer = null
+    syncDisplacementMaps()
+  }, MAP_RESIZE_SETTLE_MS)
+}
+
+function handleGeometryTransition(surface: NavigationSurface, event: TransitionEvent) {
+  const state = getSurfaceState(surface)
+  if (
+    event.target !== state.element ||
+    !/^(inset|top|left|right|width|height|inline-size|block-size|border.*radius)/u.test(event.propertyName)
+  )
+    return
+  if (event.type === 'transitionrun') {
+    state.geometryTransitions.add(event.propertyName)
+    invalidateDisplacementMap(surface)
+  } else {
+    state.geometryTransitions.delete(event.propertyName)
+    // transitionend/cancel 已给出稳定尺寸，无需再附加 resize 防抖等待。
+    if (state.geometryTransitions.size === 0) {
+      if (resizeTimer !== null) clearTimeout(resizeTimer)
+      resizeTimer = null
+      syncDisplacementMaps()
+    }
+  }
+}
+
+// 草稿预览和取消复用同一有效参数源，旧异步解码不可覆盖新的滑杆值。
+watch(opticalResponse, scheduleDisplacementMapSync, { flush: 'sync' })
+
+onMounted(() => {
+  observedShell =
+    document.querySelector<HTMLElement>('.layout-wrapper[data-glass-navigation-refraction="chromium"]') ??
+    document.querySelector<HTMLElement>('.layout-wrapper[data-glass-navbar-refraction="chromium"]')
+  if (!observedShell) return
+
+  navbarState.element = observedShell.querySelector<HTMLElement>('.layout-navbar')
+  // Drawer 与桌面共用此元素；资格随断点判断，不能在挂载时永久排除 overlay 状态。
+  sidebarState.element = observedShell.querySelector<HTMLElement>('.layout-vertical-nav')
+  for (const surface of SURFACE_KEYS) getSurfaceState(surface).shell = observedShell
+
+  transparencyQuery = window.matchMedia('(prefers-reduced-transparency: reduce)')
+  transparencyQuery.addEventListener('change', scheduleDisplacementMapSync)
+  stateObserver = new MutationObserver(handleStateMutations)
+  stateObserver.observe(document.documentElement, {
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: ['class', 'style', 'data-theme', 'data-glass-appearance', 'data-glass-quality'],
+  })
+  stateObserver.observe(observedShell, {
+    attributes: true,
+    attributeOldValue: true,
+    attributeFilter: ['class', 'style'],
+  })
+  for (const surface of SURFACE_KEYS) {
+    const state = getSurfaceState(surface)
+    const element = state.element
+    if (!element) continue
+    stateObserver.observe(element, {
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: ['class', 'style'],
+    })
+    const transitionHandler: EventListener = event => handleGeometryTransition(surface, event as TransitionEvent)
+    transitionHandlers[surface] = transitionHandler
+    element.addEventListener('transitionrun', transitionHandler)
+    element.addEventListener('transitionend', transitionHandler)
+    element.addEventListener('transitioncancel', transitionHandler)
+  }
+
+  scheduleDisplacementMapSync()
+  if (typeof ResizeObserver === 'undefined') {
+    window.addEventListener('resize', scheduleDisplacementMapSync, { passive: true })
+
+    return
+  }
+
+  resizeObserver = new ResizeObserver(scheduleDisplacementMapSync)
+  for (const surface of SURFACE_KEYS) {
+    const element = getSurfaceState(surface).element
+    if (element) resizeObserver.observe(element)
+  }
+})
+
+onBeforeUnmount(() => {
+  for (const surface of SURFACE_KEYS) {
+    const state = getSurfaceState(surface)
+    invalidateDisplacementMap(surface)
+    state.geometryTransitions.clear()
+    if (state.element && transitionHandlers[surface]) {
+      state.element.removeEventListener('transitionrun', transitionHandlers[surface])
+      state.element.removeEventListener('transitionend', transitionHandlers[surface])
+      state.element.removeEventListener('transitioncancel', transitionHandlers[surface])
+    }
+    transitionHandlers[surface] = null
+    state.shell?.removeAttribute(state.readyAttribute)
+    state.element = null
+    state.shell = null
+  }
+  if (resizeTimer !== null) clearTimeout(resizeTimer)
+  resizeTimer = null
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  stateObserver?.disconnect()
+  stateObserver = null
+  transparencyQuery?.removeEventListener('change', scheduleDisplacementMapSync)
+  transparencyQuery = null
+  window.removeEventListener('resize', scheduleDisplacementMapSync)
+  observedShell = null
+})
+</script>
+
+<template>
+  <svg class="glass-navbar-refraction-defs" width="0" height="0" aria-hidden="true" focusable="false">
+    <defs>
+      <filter
+        id="glass-navbar-live-refraction-balanced"
+        x="0%"
+        y="0%"
+        width="100%"
+        height="100%"
+        color-interpolation-filters="sRGB"
+      >
+        <feImage
+          x="0"
+          y="0"
+          :width="navbarMapSize.width"
+          :height="navbarMapSize.height"
+          preserveAspectRatio="none"
+          :href="navbarMapUrl"
+          result="map"
+        />
+        <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="B" scale="-22" />
+      </filter>
+
+      <filter
+        id="glass-navbar-live-refraction-high"
+        x="0%"
+        y="0%"
+        width="100%"
+        height="100%"
+        color-interpolation-filters="sRGB"
+      >
+        <feImage
+          x="0"
+          y="0"
+          :width="navbarMapSize.width"
+          :height="navbarMapSize.height"
+          preserveAspectRatio="none"
+          :href="navbarMapUrl"
+          result="map"
+        />
+        <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="B" scale="-34" />
+      </filter>
+
+      <filter
+        id="glass-sidebar-live-refraction-balanced"
+        x="0%"
+        y="0%"
+        width="100%"
+        height="100%"
+        color-interpolation-filters="sRGB"
+      >
+        <feImage
+          x="0"
+          y="0"
+          :width="sidebarMapSize.width"
+          :height="sidebarMapSize.height"
+          preserveAspectRatio="none"
+          :href="sidebarMapUrl"
+          result="map"
+        />
+        <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="B" scale="-22" />
+      </filter>
+
+      <filter
+        id="glass-sidebar-live-refraction-high"
+        x="0%"
+        y="0%"
+        width="100%"
+        height="100%"
+        color-interpolation-filters="sRGB"
+      >
+        <feImage
+          x="0"
+          y="0"
+          :width="sidebarMapSize.width"
+          :height="sidebarMapSize.height"
+          preserveAspectRatio="none"
+          :href="sidebarMapUrl"
+          result="map"
+        />
+        <feDisplacementMap in="SourceGraphic" in2="map" xChannelSelector="R" yChannelSelector="B" scale="-34" />
+      </filter>
+    </defs>
+  </svg>
+</template>
+
+<style scoped>
+.glass-navbar-refraction-defs {
+  position: fixed;
+  overflow: hidden;
+  pointer-events: none;
+}
+</style>
diff --git a/src/components/theme/__tests__/GlassFixedShellBackplate.spec.ts b/src/components/theme/__tests__/GlassFixedShellBackplate.spec.ts
index d41a5d04..baa0e606 100644
--- a/src/components/theme/__tests__/GlassFixedShellBackplate.spec.ts
+++ b/src/components/theme/__tests__/GlassFixedShellBackplate.spec.ts
@@ -1,5 +1,6 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, it } from 'vitest'
+import { flushPromises, mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import GlassFixedShellBackplate from '@/components/theme/GlassFixedShellBackplate.vue'
 import type { GlassFixedShellBackplateLayer } from '@/composables/useGlassFixedShellBackplate'
 
@@ -26,9 +27,146 @@ const initialLayers: readonly GlassFixedShellBackplateLayer[] = [
   },
 ]
 
+interface TestRect {
+  bottom: number
+  height: number
+  left: number
+  right: number
+  top: number
+  width: number
+  toJSON: () => Record<string, never>
+}
+
+interface BackplateMountOptions {
+  [key: string]: unknown
+  attachTo?: Element
+  props: {
+    isOverlayNav: boolean
+    isOverlayNavActive: boolean
+    layers: readonly GlassFixedShellBackplateLayer[]
+    transitionDurationMs: number
+  }
+}
+
+const mountedWrappers: Array<ReturnType<typeof mount>> = []
+let resizeCallback: ResizeObserverCallback | undefined
+let resizeDisconnect: ReturnType<typeof vi.fn> | undefined
+let backplateRect: TestRect
+let sidebarRect: TestRect
+let navbarRect: TestRect
+
+function createRect(left: number, top: number, width: number, height: number): TestRect {
+  return {
+    bottom: top + height,
+    height,
+    left,
+    right: left + width,
+    top,
+    toJSON: () => ({}),
+    width,
+  }
+}
+
+function mountBackplate(options: BackplateMountOptions) {
+  const wrapper = mount(GlassFixedShellBackplate, options)
+  mountedWrappers.push(wrapper)
+  return wrapper
+}
+
+function mountConnectedShell(horizontal = false) {
+  const shell = document.createElement('div')
+  shell.className = `layout-wrapper${horizontal ? ' layout-horizontal-nav-active' : ''}`
+  shell.dataset.shellMode = 'desktop'
+  shell.dataset.shellNavbarAttachment = horizontal ? 'theme-qualified' : 'connected'
+
+  const sidebar = document.createElement('aside')
+  sidebar.className = 'layout-vertical-nav'
+  const navbar = document.createElement('header')
+  navbar.className = 'layout-navbar'
+  shell.append(sidebar, navbar)
+  document.body.append(shell)
+
+  return {
+    navbar,
+    shell,
+    sidebar,
+    wrapper: mountBackplate({
+      attachTo: shell,
+      props: {
+        isOverlayNav: false,
+        isOverlayNavActive: false,
+        layers: initialLayers,
+        transitionDurationMs: 1500,
+      },
+    }),
+  }
+}
+
+async function settleGeometry() {
+  await nextTick()
+  await flushPromises()
+  await nextTick()
+  await Promise.resolve()
+}
+
 describe('GlassFixedShellBackplate', () => {
+  beforeEach(() => {
+    resizeCallback = undefined
+    resizeDisconnect = vi.fn()
+    backplateRect = createRect(5, 3, 1185, 790)
+    sidebarRect = createRect(13, 11, 252, 774)
+    navbarRect = createRect(273, 11, 909, 72)
+
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        constructor(callback: ResizeObserverCallback) {
+          resizeCallback = callback
+        }
+
+        observe() {}
+
+        unobserve() {}
+
+        disconnect() {
+          resizeDisconnect?.()
+        }
+      },
+    )
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      if (this.classList.contains('glass-fixed-shell-backplate--main')) return backplateRect as DOMRect
+      if (this.classList.contains('layout-vertical-nav')) return sidebarRect as DOMRect
+      if (this.classList.contains('layout-navbar')) return navbarRect as DOMRect
+      return createRect(0, 0, 0, 0) as DOMRect
+    })
+    vi.spyOn(window, 'getComputedStyle').mockImplementation(
+      element =>
+        ({
+          borderBottomLeftRadius: element instanceof HTMLElement ? '16px' : '0px',
+          borderBottomRightRadius: element instanceof HTMLElement ? '16px' : '0px',
+          borderEndEndRadius: element instanceof HTMLElement ? '16px' : '0px',
+          borderEndStartRadius: element instanceof HTMLElement ? '16px' : '0px',
+          borderRadius: element instanceof HTMLElement ? '16px' : '0px',
+          borderStartEndRadius: element instanceof HTMLElement ? '16px' : '0px',
+          borderStartStartRadius: element instanceof HTMLElement ? '16px' : '0px',
+          borderTopLeftRadius: element instanceof HTMLElement ? '16px' : '0px',
+          borderTopRightRadius: element instanceof HTMLElement ? '16px' : '0px',
+          getPropertyValue: (property: string) => (property.includes('radius') ? '16px' : ''),
+        }) as unknown as CSSStyleDeclaration,
+    )
+    document.documentElement.dataset.theme = 'glass'
+  })
+
+  afterEach(() => {
+    for (const wrapper of mountedWrappers.splice(0)) wrapper.unmount()
+    document.querySelectorAll('.layout-wrapper').forEach(element => element.remove())
+    document.documentElement.removeAttribute('data-theme')
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+  })
+
   it('renders the App-owned slots once for the shared desktop shell', () => {
-    const wrapper = mount(GlassFixedShellBackplate, {
+    const wrapper = mountBackplate({
       props: {
         isOverlayNav: false,
         isOverlayNavActive: false,
@@ -51,7 +189,7 @@ describe('GlassFixedShellBackplate', () => {
   })
 
   it('preserves slot nodes while their active and previous roles swap', async () => {
-    const wrapper = mount(GlassFixedShellBackplate, {
+    const wrapper = mountBackplate({
       props: {
         isOverlayNav: false,
         isOverlayNavActive: false,
@@ -76,7 +214,7 @@ describe('GlassFixedShellBackplate', () => {
   })
 
   it('adds a separately clipped surface only for mobile overlay navigation', () => {
-    const wrapper = mount(GlassFixedShellBackplate, {
+    const wrapper = mountBackplate({
       props: {
         isOverlayNav: true,
         isOverlayNavActive: true,
@@ -90,4 +228,71 @@ describe('GlassFixedShellBackplate', () => {
     expect(overlay.classes()).toContain('is-visible')
     expect(overlay.findAll('[data-backplate-slot]')).toHaveLength(2)
   })
+
+  it('maps both connected surfaces to backplate-relative objectBoundingBox geometry', async () => {
+    const { wrapper } = mountConnectedShell()
+    await settleGeometry()
+
+    const main = wrapper.get('[data-backplate-surface="main"]')
+    const mainElement = main.element as HTMLElement
+    const clipPath = wrapper.get('clipPath')
+    const rects = clipPath.findAll('rect')
+
+    expect(clipPath.attributes('clipPathUnits')).toBe('objectBoundingBox')
+    expect(rects).toHaveLength(2)
+    expect(mainElement.style.clipPath).toMatch(/^url\(#glass-fixed-shell-clip-/u)
+    expect(Number(rects[0].attributes('x'))).toBeCloseTo(8 / 1185, 8)
+    expect(Number(rects[0].attributes('y'))).toBeCloseTo(8 / 790, 8)
+    expect(Number(rects[0].attributes('width'))).toBeCloseTo(252 / 1185, 8)
+    expect(Number(rects[0].attributes('height'))).toBeCloseTo(774 / 790, 8)
+    expect(Number(rects[0].attributes('rx'))).toBeCloseTo(16 / 1185, 8)
+    expect(Number(rects[0].attributes('ry'))).toBeCloseTo(16 / 790, 8)
+    expect(Number(rects[1].attributes('x'))).toBeCloseTo(268 / 1185, 8)
+    expect(Number(rects[1].attributes('y'))).toBeCloseTo(8 / 790, 8)
+    expect(Number(rects[1].attributes('width'))).toBeCloseTo(909 / 1185, 8)
+    expect(Number(rects[1].attributes('height'))).toBeCloseTo(72 / 790, 8)
+    expect(Number(rects[1].attributes('rx'))).toBeCloseTo(16 / 1185, 8)
+    expect(Number(rects[1].attributes('ry'))).toBeCloseTo(16 / 790, 8)
+    expect(wrapper.findAll('[data-backplate-surface="main"]')).toHaveLength(1)
+    expect(wrapper.findAll('[data-backplate-slot]')).toHaveLength(2)
+  })
+
+  it('does not activate the connected clip for horizontal navigation', async () => {
+    const { wrapper } = mountConnectedShell(true)
+    await settleGeometry()
+
+    expect((wrapper.get('[data-backplate-surface="main"]').element as HTMLElement).style.clipPath).toBe('')
+    expect(wrapper.findAll('clipPath rect')).toHaveLength(0)
+  })
+
+  it('refreshes dimensions and disconnects the resize observer on unmount', async () => {
+    const { wrapper } = mountConnectedShell()
+    await settleGeometry()
+
+    backplateRect = createRect(5, 3, 1180, 790)
+    sidebarRect = createRect(13, 11, 60, 774)
+    navbarRect = createRect(273, 11, 904, 96)
+    resizeCallback?.([], {} as ResizeObserver)
+    await settleGeometry()
+
+    const rects = wrapper.findAll('clipPath rect')
+    expect(Number(rects[0].attributes('width'))).toBeCloseTo(60 / 1180, 8)
+    expect(Number(rects[1].attributes('x'))).toBeCloseTo(268 / 1180, 8)
+    expect(Number(rects[1].attributes('height'))).toBeCloseTo(96 / 790, 8)
+
+    wrapper.unmount()
+    expect(resizeDisconnect).toHaveBeenCalledOnce()
+  })
+
+  it('uses window resize when ResizeObserver is unavailable', async () => {
+    vi.stubGlobal('ResizeObserver', undefined)
+    const { wrapper } = mountConnectedShell()
+    await settleGeometry()
+
+    sidebarRect = createRect(13, 11, 60, 774)
+    window.dispatchEvent(new Event('resize'))
+    await settleGeometry()
+
+    expect(Number(wrapper.find('clipPath rect').attributes('width'))).toBeCloseTo(60 / 1185, 8)
+  })
 })
diff --git a/src/components/theme/__tests__/GlassNavbarRefractionDefs.spec.ts b/src/components/theme/__tests__/GlassNavbarRefractionDefs.spec.ts
new file mode 100644
index 00000000..91f3117b
--- /dev/null
+++ b/src/components/theme/__tests__/GlassNavbarRefractionDefs.spec.ts
@@ -0,0 +1,470 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import GlassNavbarRefractionDefs from '../GlassNavbarRefractionDefs.vue'
+import { createGlassNavbarDisplacementMap } from '@/utils/glassNavbarRefraction'
+import { ref } from 'vue'
+
+vi.mock('@/utils/glassNavbarRefraction', async importOriginal => ({
+  ...(await importOriginal<typeof import('@/utils/glassNavbarRefraction')>()),
+  createGlassNavbarDisplacementMap: vi.fn(() => 'data:image/png;base64,test'),
+  NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP: 'neutral',
+}))
+const effectiveSettings = ref({ glassDeformationStrength: 48, glassTranslationStrength: 48 })
+vi.mock('@/composables/useThemeCustomizer', () => ({ useEffectiveGlassSettings: () => effectiveSettings }))
+
+describe('GlassNavbarRefractionDefs', () => {
+  let shell: HTMLDivElement
+  let navbar: HTMLElement
+  let resize: ResizeObserverCallback | undefined
+  let wrapper: ReturnType<typeof mount> | undefined
+  let width: number
+  let sidebarWidth: number
+  let radius: number
+  let sidebar: HTMLElement | undefined
+  let transparencyReduced: boolean
+  let transparencyChange: ((event: MediaQueryListEvent) => void) | undefined
+  let decodePending: Array<{ resolve: () => void; reject: (reason?: unknown) => void }>
+  const disconnect = vi.fn()
+  const observe = vi.fn()
+
+  beforeEach(() => {
+    vi.useFakeTimers()
+    vi.clearAllMocks()
+    effectiveSettings.value = { glassDeformationStrength: 48, glassTranslationStrength: 48 }
+    width = 1423
+    sidebarWidth = 260
+    radius = 16
+    transparencyReduced = false
+    transparencyChange = undefined
+    decodePending = []
+    sidebar = undefined
+    shell = document.createElement('div')
+    shell.className =
+      'layout-wrapper layout-horizontal-nav-active layout-navbar-floating-eligible layout-navbar-away-from-top'
+    shell.dataset.glassNavbarRefraction = 'chromium'
+    shell.innerHTML = '<header class="layout-navbar"></header>'
+    document.body.append(shell)
+    navbar = shell.querySelector('.layout-navbar') as HTMLElement
+    Object.assign(document.documentElement.dataset, { theme: 'glass', glassAppearance: 'clear', glassQuality: 'high' })
+    vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockImplementation(function (this: HTMLElement) {
+      const isSidebar = this.classList.contains('layout-vertical-nav')
+      const elementWidth = isSidebar ? sidebarWidth : width
+      const elementHeight = isSidebar ? 800 : 64
+
+      return {
+        x: 16,
+        y: 16,
+        left: 16,
+        top: 16,
+        width: elementWidth,
+        height: elementHeight,
+        right: elementWidth + 16,
+        bottom: elementHeight + 16,
+        toJSON: () => ({}),
+      }
+    })
+    vi.spyOn(window, 'getComputedStyle').mockImplementation(
+      element =>
+        ({
+          borderStartStartRadius: element.classList.contains('layout-vertical-nav') ? '0px' : `${radius}px`,
+          getPropertyValue: () => '1rem',
+        }) as unknown as CSSStyleDeclaration,
+    )
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        constructor(callback: ResizeObserverCallback) {
+          resize = callback
+        }
+        observe = observe
+        disconnect = disconnect
+      },
+    )
+    vi.stubGlobal('matchMedia', () => ({
+      get matches() {
+        return transparencyReduced
+      },
+      addEventListener: vi.fn((_event: string, listener: (event: MediaQueryListEvent) => void) => {
+        transparencyChange = listener
+      }),
+      removeEventListener: vi.fn(),
+    }))
+    vi.stubGlobal(
+      'Image',
+      class {
+        src = ''
+        decode = vi.fn(
+          () =>
+            new Promise<void>((resolve, reject) => {
+              decodePending.push({ resolve, reject })
+            }),
+        )
+      },
+    )
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+    wrapper = undefined
+    shell.remove()
+    vi.restoreAllMocks()
+    vi.unstubAllGlobals()
+    vi.useRealTimers()
+  })
+
+  async function settle() {
+    await vi.advanceTimersByTimeAsync(65)
+    completePendingDecode()
+    await flushPromises()
+  }
+
+  function expectReadyForWidth(expectedWidth: number) {
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('true')
+    expect(wrapper?.get('feImage').attributes('width')).toBe(String(expectedWidth))
+  }
+
+  function expectReadyForSidebar(expectedWidth: number) {
+    expect(shell.dataset.glassSidebarRefractionReady).toBe('true')
+    expect(wrapper?.findAll('feImage')[2].attributes('width')).toBe(String(expectedWidth))
+    expect(wrapper?.findAll('feImage')[2].attributes('height')).toBe('800')
+  }
+
+  function completePendingDecode() {
+    for (const pending of decodePending.splice(0)) pending.resolve()
+  }
+
+  function dispatchTransition(type: 'transitionrun' | 'transitionend' | 'transitioncancel', propertyName: string) {
+    const event = new Event(type, { bubbles: true }) as TransitionEvent
+    Object.defineProperty(event, 'propertyName', { value: propertyName })
+    navbar.dispatchEvent(event)
+  }
+
+  function mountWithSidebar(overlay = false) {
+    sidebar = document.createElement('aside')
+    sidebar.className = `layout-vertical-nav${overlay ? ' overlay-nav' : ''}`
+    shell.prepend(sidebar)
+    wrapper = mount(GlassNavbarRefractionDefs)
+  }
+
+  it('enables a readable rectangular lens on the fixed desktop navbar', async () => {
+    shell.className = 'layout-wrapper'
+    shell.dataset.shellMode = 'desktop'
+    radius = 0
+    mountWithSidebar()
+    await settle()
+    expectReadyForWidth(1423)
+    expectReadyForSidebar(260)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledWith(
+      expect.objectContaining({ width: 1423, height: 64, radius: 0 }),
+    )
+    shell.classList.add('layout-overlay-nav')
+    shell.dataset.shellMode = 'drawer'
+    sidebar?.classList.add('overlay-nav')
+    await flushPromises()
+    await settle()
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+  })
+
+  it('uses computed pixel radius and activates only a decoded map with matching dimensions', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledWith(
+      expect.objectContaining({ width: 1423, height: 64, radius: 16 }),
+    )
+    expectReadyForWidth(1423)
+  })
+
+  it('keeps independent geometry caches when switching between horizontal and vertical navigation', async () => {
+    mountWithSidebar()
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+    expectReadyForWidth(1423)
+    expect(shell.dataset.glassSidebarRefractionReady).toBe('false')
+    shell.className = 'layout-wrapper'
+    await flushPromises()
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(2)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledWith(
+      expect.objectContaining({ width: 1423, height: 64, radius: 16 }),
+    )
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ width: 260, height: 800, radius: 0 }),
+    )
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+    expectReadyForSidebar(260)
+
+    shell.className =
+      'layout-wrapper layout-horizontal-nav-active layout-navbar-floating-eligible layout-navbar-away-from-top'
+    await flushPromises()
+    await settle()
+    expectReadyForWidth(1423)
+    expect(shell.dataset.glassSidebarRefractionReady).toBe('false')
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(2)
+  })
+
+  it('rebuilds only the sidebar map when its collapsed width changes', async () => {
+    shell.className = 'layout-wrapper'
+    mountWithSidebar()
+    await settle()
+    const initialCallCount = vi.mocked(createGlassNavbarDisplacementMap).mock.calls.length
+
+    sidebarWidth = 80
+    resize?.([], {} as ResizeObserver)
+    await settle()
+
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(initialCallCount + 1)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ width: 80, height: 800, radius: 0 }),
+    )
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+    expectReadyForSidebar(80)
+  })
+
+  it('does not generate a live map for a mobile Drawer surface', async () => {
+    shell.className = 'layout-wrapper layout-overlay-nav'
+    mountWithSidebar(true)
+    await settle()
+
+    expect(createGlassNavbarDisplacementMap).not.toHaveBeenCalled()
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+    expect(shell.dataset.glassSidebarRefractionReady).toBe('false')
+  })
+
+  it('activates the existing sidebar when a Drawer viewport returns to desktop', async () => {
+    shell.className = 'layout-wrapper layout-overlay-nav'
+    mountWithSidebar(true)
+    await settle()
+    shell.classList.remove('layout-overlay-nav')
+    sidebar?.classList.remove('overlay-nav')
+    await flushPromises()
+    await settle()
+    expectReadyForSidebar(260)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not strand a sidebar update when an unrelated fixed navbar transition ends', async () => {
+    shell.className = 'layout-wrapper'
+    mountWithSidebar()
+    await settle()
+    dispatchTransition('transitionrun', 'height')
+    effectiveSettings.value = { glassDeformationStrength: 99, glassTranslationStrength: 99 }
+    dispatchTransition('transitionend', 'height')
+    completePendingDecode()
+    await flushPromises()
+    expectReadyForSidebar(260)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(2)
+  })
+
+  it('keeps unchanged geometry ready but disables old sampling when the size changes', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+    resize?.([], {} as ResizeObserver)
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('true')
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+    width = 1200
+    resize?.([], {} as ResizeObserver)
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ width: 1200, height: 64, radius: 16 }),
+    )
+    expectReadyForWidth(1200)
+  })
+
+  it('restores a cached map immediately when the final geometry transition ends', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+    dispatchTransition('transitionrun', 'inset-inline-start')
+    dispatchTransition('transitionrun', 'border-radius')
+    dispatchTransition('transitionend', 'inset-inline-start')
+    await flushPromises()
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+    dispatchTransition('transitionend', 'border-radius')
+    await flushPromises()
+    expectReadyForWidth(1423)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not cancel a pending decode on a duplicate resize notification', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await vi.advanceTimersByTimeAsync(65)
+    resize?.([], {} as ResizeObserver)
+    completePendingDecode()
+    await flushPromises()
+    expectReadyForWidth(1423)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+  })
+
+  it('rejects a late draft decode when cancellation already restored the cached map', async () => {
+    vi.mocked(createGlassNavbarDisplacementMap)
+      .mockReturnValueOnce('data:image/png;base64,saved')
+      .mockReturnValueOnce('data:image/png;base64,draft')
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+    effectiveSettings.value = { glassDeformationStrength: 99, glassTranslationStrength: 99 }
+    await vi.advanceTimersByTimeAsync(65)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(2)
+    effectiveSettings.value = { glassDeformationStrength: 48, glassTranslationStrength: 48 }
+    expectReadyForWidth(1423)
+    completePendingDecode()
+    await flushPromises()
+    expect(wrapper.get('feImage').attributes('href')).toBe('data:image/png;base64,saved')
+  })
+
+  it('does not generate a map in CSS quality', async () => {
+    document.documentElement.dataset.glassQuality = 'css'
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+    expect(createGlassNavbarDisplacementMap).not.toHaveBeenCalled()
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+  })
+
+  it('rebuilds on effective preview parameters and restores the cancelled draft', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+    effectiveSettings.value = { glassDeformationStrength: 0, glassTranslationStrength: 100 }
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ optics: { horizontalRatio: 0, verticalRatio: 0, translationPx: 17 } }),
+    )
+    effectiveSettings.value = { glassDeformationStrength: 48, glassTranslationStrength: 48 }
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ optics: expect.objectContaining({ translationPx: expect.closeTo(1.880064) }) }),
+    )
+  })
+
+  it('does not activate a pending map after switching to CSS quality', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await vi.advanceTimersByTimeAsync(65)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+    document.documentElement.dataset.glassQuality = 'css'
+    await flushPromises()
+    completePendingDecode()
+    await flushPromises()
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+  })
+
+  it('does not generate or activate a map while reduced transparency is enabled', async () => {
+    transparencyReduced = true
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+    expect(createGlassNavbarDisplacementMap).not.toHaveBeenCalled()
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+
+    transparencyReduced = false
+    transparencyChange?.({ matches: false } as MediaQueryListEvent)
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+    expectReadyForWidth(1423)
+  })
+
+  it('regenerates after a geometry transition ends or is cancelled', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+
+    width = 1200
+    dispatchTransition('transitionrun', 'width')
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+    dispatchTransition('transitionend', 'width')
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ width: 1200, height: 64, radius: 16 }),
+    )
+    expectReadyForWidth(1200)
+
+    radius = 20
+    dispatchTransition('transitionrun', 'border-radius')
+    dispatchTransition('transitioncancel', 'border-radius')
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ width: 1200, height: 64, radius: 20 }),
+    )
+    expectReadyForWidth(1200)
+  })
+
+  it('waits for every geometry transition before restoring the map', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+
+    dispatchTransition('transitionrun', 'width')
+    dispatchTransition('transitionrun', 'border-radius')
+    dispatchTransition('transitionend', 'width')
+    await vi.advanceTimersByTimeAsync(65)
+    expect(shell.dataset.glassNavbarRefractionReady).toBe('false')
+
+    dispatchTransition('transitioncancel', 'border-radius')
+    await settle()
+    expectReadyForWidth(1423)
+  })
+
+  it('only regenerates for radius or observed theme size changes', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+
+    shell.style.setProperty('--shell-floating-navbar-scale-x', '0.9')
+    await flushPromises()
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+
+    radius = 20
+    shell.style.setProperty('--shell-floating-navbar-radius', '20px')
+    await flushPromises()
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ width: 1423, height: 64, radius: 20 }),
+    )
+  })
+
+  it('does not retry a failed geometry in a feedback loop', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await vi.advanceTimersByTimeAsync(65)
+    const [pending] = decodePending.splice(0)
+    pending.reject(new Error('decode failed'))
+    await flushPromises()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+
+    resize?.([], {} as ResizeObserver)
+    await settle()
+    resize?.([], {} as ResizeObserver)
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+  })
+
+  it('uses the window resize fallback and removes it on unmount', async () => {
+    vi.stubGlobal('ResizeObserver', undefined)
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await settle()
+    expect(observe).not.toHaveBeenCalled()
+
+    width = 1200
+    window.dispatchEvent(new Event('resize'))
+    await settle()
+    expect(createGlassNavbarDisplacementMap).toHaveBeenLastCalledWith(
+      expect.objectContaining({ width: 1200, height: 64, radius: 16 }),
+    )
+
+    wrapper.unmount()
+    wrapper = undefined
+    width = 1100
+    window.dispatchEvent(new Event('resize'))
+    await settle()
+    expect(shell.hasAttribute('data-glass-navbar-refraction-ready')).toBe(false)
+  })
+
+  it('drops pending work on unmount', async () => {
+    wrapper = mount(GlassNavbarRefractionDefs)
+    await vi.advanceTimersByTimeAsync(65)
+    expect(createGlassNavbarDisplacementMap).toHaveBeenCalledTimes(1)
+    wrapper.unmount()
+    wrapper = undefined
+    completePendingDecode()
+    await flushPromises()
+    expect(shell.hasAttribute('data-glass-navbar-refraction-ready')).toBe(false)
+    expect(disconnect).toHaveBeenCalled()
+  })
+})
diff --git a/src/composables/__tests__/useGlassOpticalRenderer.spec.ts b/src/composables/__tests__/useGlassOpticalRenderer.spec.ts
index 7fc8762b..203c474e 100644
--- a/src/composables/__tests__/useGlassOpticalRenderer.spec.ts
+++ b/src/composables/__tests__/useGlassOpticalRenderer.spec.ts
@@ -92,6 +92,27 @@ class ResizeObserverMock {
   }
 }
 
+/** 提供可显式触发 DOM 变更回调的 MutationObserver 实现。 */
+class MutationObserverTriggerMock implements MutationObserver {
+  static instances: MutationObserverTriggerMock[] = []
+
+  constructor(private readonly callback: MutationCallback) {
+    MutationObserverTriggerMock.instances.push(this)
+  }
+
+  disconnect() {}
+
+  observe() {}
+
+  takeRecords() {
+    return []
+  }
+
+  trigger(records: MutationRecord[]) {
+    this.callback(records, this)
+  }
+}
+
 /** 创建带稳定视口边界的光学表面元素。 */
 function appendOpticalSurface(className: string, bounds: Pick<DOMRect, 'height' | 'width' | 'x' | 'y'>) {
   const surface = document.createElement('section')
@@ -170,6 +191,30 @@ function createRemovalRecord(target: Element, removedNodes: Element[]): Mutation
   }
 }
 
+/** 构造会改变光学表面资格的属性变更记录。 */
+function createAttributeRecord(target: Element): MutationRecord {
+  return {
+    addedNodes: Object.assign([], { item: () => null }) as unknown as NodeList,
+    attributeName: 'data-glass-optical-mode',
+    attributeNamespace: null,
+    nextSibling: null,
+    oldValue: null,
+    previousSibling: null,
+    removedNodes: Object.assign([], { item: () => null }) as unknown as NodeList,
+    target,
+    type: 'attributes',
+  }
+}
+
+/** 执行有限数量的排队帧，避免交互衰减帧让测试进入无界循环。 */
+function flushQueuedAnimationFrames(callbacks: Map<number, FrameRequestCallback>, passes = 8) {
+  for (let pass = 0; pass < passes && callbacks.size > 0; pass += 1) {
+    const queued = [...callbacks.values()]
+    callbacks.clear()
+    queued.forEach(callback => callback(performance.now() + pass * 16))
+  }
+}
+
 function dispatchTouchEvent(
   type: 'touchcancel' | 'touchend' | 'touchmove' | 'touchstart',
   touches: Array<{ clientX: number; clientY: number; identifier: number }>,
@@ -185,8 +230,12 @@ function dispatchTouchEvent(
   return event
 }
 
+let documentHasFocus = true
+
 beforeEach(() => {
   ResizeObserverMock.instances = []
+  MutationObserverTriggerMock.instances = []
+  documentHasFocus = true
   wallpaperToneMocks.load.mockReset()
   wallpaperToneMocks.load.mockResolvedValue({
     corsReady: false,
@@ -200,6 +249,7 @@ beforeEach(() => {
   wallpaperToneMocks.takeDecodedSource.mockReturnValue(undefined)
   vi.stubGlobal('ResizeObserver', ResizeObserverMock)
   vi.stubGlobal('WebGLRenderingContext', class {})
+  vi.spyOn(document, 'hasFocus').mockImplementation(() => documentHasFocus)
   vi.spyOn(HTMLCanvasElement.prototype, 'getContext').mockReturnValue(null)
 })
 
@@ -1344,6 +1394,48 @@ describe('glass optical surface discovery', () => {
     scope.stop()
   })
 
+  it('keeps stable texture sampling lazy and limits diffuse taps to non-prefiltered frosted output', async () => {
+    const three = await import('three')
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(document.createElement('canvas')),
+        quality: ref('high'),
+        routeKey: ref('/dashboard'),
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    const scene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(candidate => candidate.children[0]?.material?.uniforms.uTextureMix)
+    if (!scene) throw new Error('main optical scene was not rendered')
+    const material = scene.children[0].material!
+    const shader = material.fragmentShader
+    const previousToneIndex = shader.indexOf('toneMapWallpaper(previous, viewportUv, uPreviousWallpaperExposure)')
+    const currentToneIndex = shader.indexOf('toneMapWallpaper(current, viewportUv, uWallpaperExposure)')
+    const mixIndex = shader.indexOf('return mix(previousTone, currentTone, uTextureMix)')
+    const diffuseStart = shader.indexOf('if (frosted > 0.5 && usesPrefilteredFrost <= 0.5)')
+
+    expect(shader).toContain('bool needsPrevious = uTextureMix < 0.999')
+    expect(shader).toContain('bool needsCurrent = uTextureMix > 0.001')
+    expect(shader).toContain('if (needsPrevious)')
+    expect(shader).toContain('if (needsCurrent)')
+    expect(previousToneIndex).toBeGreaterThanOrEqual(0)
+    expect(currentToneIndex).toBeGreaterThan(previousToneIndex)
+    expect(mixIndex).toBeGreaterThan(currentToneIndex)
+    expect(diffuseStart).toBeGreaterThanOrEqual(0)
+    expect(shader.indexOf('sampleHighQualityDiffuse', diffuseStart)).toBeGreaterThan(diffuseStart)
+    expect(shader.indexOf('sampleBalancedDiffuse', diffuseStart)).toBeGreaterThan(diffuseStart)
+    expect(material.uniforms.uQuality.value).toBe(1)
+    scope.stop()
+  })
+
   it('retains a prepared transaction until it becomes the rendered active wallpaper', async () => {
     const three = await import('three')
     const wallpaperUrl = ref('https://example.com/wallpaper-1.jpg')
@@ -2768,6 +2860,7 @@ describe('glass optical surface discovery', () => {
 
     await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
     const dispose = vi.spyOn(three.WebGLRenderer.prototype, 'dispose')
+    const contextLoss = vi.spyOn(three.WebGLRenderer.prototype, 'forceContextLoss')
     const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
     vi.useFakeTimers()
 
@@ -2775,12 +2868,46 @@ describe('glass optical surface discovery', () => {
     document.dispatchEvent(new Event('visibilitychange'))
     await vi.advanceTimersByTimeAsync(APP_ACTIVITY_SUSPEND_DELAY_MS - 1)
     expect(dispose).not.toHaveBeenCalled()
+    expect(contextLoss).not.toHaveBeenCalled()
 
     visibilityState = 'visible'
     window.dispatchEvent(new Event('focus'))
     await nextTick()
     await Promise.resolve()
     expect(dispose).not.toHaveBeenCalled()
+    expect(contextLoss).not.toHaveBeenCalled()
+    expect(render).toHaveBeenCalled()
+    scope.stop()
+  })
+
+  it('keeps an initially unfocused visible renderer ready without drawing until focus resumes it', async () => {
+    const three = await import('three')
+    const canvas = document.createElement('canvas')
+    const visibilityState: DocumentVisibilityState = 'visible'
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState)
+    documentHasFocus = false
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(canvas),
+        quality: ref('balanced'),
+        routeKey: ref('/dashboard'),
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    expect(render).not.toHaveBeenCalled()
+
+    documentHasFocus = true
+    window.dispatchEvent(new Event('focus'))
+    await nextTick()
+    await Promise.resolve()
+
     expect(render).toHaveBeenCalled()
     scope.stop()
   })
@@ -2904,6 +3031,413 @@ describe('glass optical surface discovery', () => {
     scope.stop()
   })
 
+  it.each(['blur', 'hidden'] as const)(
+    'blocks render, interaction, geometry, and scroll work after a real %s pause',
+    async pauseEvent => {
+      const three = await import('three')
+      const canvas = document.createElement('canvas')
+      const surface = appendOpticalSurface('app-hover-lift-card', { height: 320, width: 520, x: 40, y: 80 })
+      const root = document.createElement('div')
+      root.append(canvas)
+      Object.defineProperty(root, 'scrollHeight', { configurable: true, value: 1200 })
+      document.body.append(root)
+      let visibilityState: DocumentVisibilityState = 'visible'
+      vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState)
+      vi.stubGlobal('MutationObserver', MutationObserverTriggerMock)
+      const callbacks = new Map<number, FrameRequestCallback>()
+      let frameId = 0
+      vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+        frameId += 1
+        callbacks.set(frameId, callback)
+        return frameId
+      })
+      vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(id => callbacks.delete(id))
+      const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
+      const reflectionStrength = ref(40)
+      const motionRevision = ref(0)
+      const scope = effectScope()
+      const renderer = scope.run(() =>
+        useGlassOpticalRenderer({
+          active: ref(true),
+          appearance: ref('clear'),
+          canvas: ref(canvas),
+          dynamicsMode: ref<'fluid' | 'off' | 'ripple'>('fluid'),
+          pageMotion: {
+            acknowledgeGeometryReady: vi.fn(() => true),
+            active: ref(false),
+            epoch: ref(1),
+            opacity: ref(1),
+            revision: motionRevision,
+          },
+          quality: ref('balanced'),
+          routeKey: ref('/dashboard'),
+          reflectionStrength,
+          surfaceSpace: 'scroll',
+          tintColor: ref('#8D51F9'),
+          wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+        }),
+      )
+
+      await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+      flushQueuedAnimationFrames(callbacks)
+      render.mockClear()
+      callbacks.clear()
+      const framesBeforePause = renderer?.renderedFrames.value
+
+      if (pauseEvent === 'blur') {
+        documentHasFocus = false
+        window.dispatchEvent(new Event('blur'))
+      } else {
+        visibilityState = 'hidden'
+        document.dispatchEvent(new Event('visibilitychange'))
+      }
+
+      expect(callbacks.size).toBe(0)
+
+      setOpticalSurfaceBounds(surface, { height: 360, width: 560, x: 220, y: 180 })
+      reflectionStrength.value = 100
+      motionRevision.value += 1
+      ResizeObserverMock.instances.forEach(observer => observer.trigger())
+      MutationObserverTriggerMock.instances[0]?.trigger([createAttributeRecord(surface)])
+      window.dispatchEvent(new MouseEvent('pointermove', { clientX: 280, clientY: 240 }))
+      window.dispatchEvent(new Event('scroll'))
+      await nextTick()
+
+      expect(render).not.toHaveBeenCalled()
+      expect(renderer?.renderedFrames.value).toBe(framesBeforePause)
+      expect(callbacks.size).toBe(0)
+      scope.stop()
+    },
+  )
+
+  it('restores the latest uniform and scroll geometry after a paused resume', async () => {
+    const three = await import('three')
+    const canvas = document.createElement('canvas')
+    const root = document.createElement('div')
+    root.append(canvas)
+    Object.defineProperty(root, 'scrollHeight', { configurable: true, value: 1200 })
+    Object.defineProperty(root, 'scrollWidth', { configurable: true, value: 1200 })
+    document.body.append(root)
+    const surface = appendOpticalSurface('app-hover-lift-card', { height: 320, width: 520, x: 40, y: 80 })
+    let visibilityState: DocumentVisibilityState = 'visible'
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState)
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let frameId = 0
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      frameId += 1
+      callbacks.set(frameId, callback)
+      return frameId
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(id => callbacks.delete(id))
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
+    const reflectionStrength = ref(40)
+    const motionRevision = ref(0)
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(canvas),
+        dynamicsMode: ref<'fluid' | 'off' | 'ripple'>('off'),
+        pageMotion: {
+          acknowledgeGeometryReady: vi.fn(() => true),
+          active: ref(false),
+          epoch: ref(1),
+          opacity: ref(1),
+          revision: motionRevision,
+        },
+        quality: ref('balanced'),
+        reflectionStrength,
+        routeKey: ref('/dashboard'),
+        surfaceSpace: 'scroll',
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    flushQueuedAnimationFrames(callbacks)
+    const scene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(candidate => candidate.children[0]?.material?.uniforms.uRects)
+    if (!scene) throw new Error('main optical scene was not rendered')
+    const uniforms = scene.children[0].material!.uniforms
+    render.mockClear()
+    callbacks.clear()
+
+    visibilityState = 'hidden'
+    document.dispatchEvent(new Event('visibilitychange'))
+    setOpticalSurfaceBounds(surface, { height: 360, width: 560, x: 220, y: 180 })
+    reflectionStrength.value = 100
+    motionRevision.value += 1
+    ResizeObserverMock.instances.forEach(observer => observer.trigger())
+    await nextTick()
+
+    expect(render).not.toHaveBeenCalled()
+    expect(callbacks.size).toBe(0)
+
+    visibilityState = 'visible'
+    document.dispatchEvent(new Event('visibilitychange'))
+    window.dispatchEvent(new Event('focus'))
+    window.dispatchEvent(new Event('pageshow'))
+    await nextTick()
+    await Promise.resolve()
+
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(uniforms.uReflectionStrength.value).toBeGreaterThan(1)
+    expect(uniforms.uRects.value[0].x).toBeCloseTo(220 / 1200)
+    expect(uniforms.uRects.value[0].y).toBeCloseTo(1 - (180 + 360) / 1200)
+    scope.stop()
+  })
+
+  it('cancels a pending resume when blur arrives before nextTick and resumes on the next focus', async () => {
+    const three = await import('three')
+    const canvas = document.createElement('canvas')
+    let visibilityState: DocumentVisibilityState = 'visible'
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState)
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(canvas),
+        quality: ref('balanced'),
+        routeKey: ref('/dashboard'),
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    render.mockClear()
+    visibilityState = 'hidden'
+    document.dispatchEvent(new Event('visibilitychange'))
+    visibilityState = 'visible'
+    document.dispatchEvent(new Event('visibilitychange'))
+    documentHasFocus = false
+    window.dispatchEvent(new Event('blur'))
+    await nextTick()
+    await Promise.resolve()
+
+    expect(render).not.toHaveBeenCalled()
+
+    documentHasFocus = true
+    window.dispatchEvent(new Event('focus'))
+    await nextTick()
+    await Promise.resolve()
+    expect(render).toHaveBeenCalledTimes(1)
+    scope.stop()
+  })
+
+  it('keeps hidden-to-visible rendering paused without focus until an explicit focus event', async () => {
+    const three = await import('three')
+    const canvas = document.createElement('canvas')
+    let visibilityState: DocumentVisibilityState = 'visible'
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState)
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(canvas),
+        quality: ref('balanced'),
+        routeKey: ref('/dashboard'),
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    render.mockClear()
+    visibilityState = 'hidden'
+    document.dispatchEvent(new Event('visibilitychange'))
+    documentHasFocus = false
+    visibilityState = 'visible'
+    document.dispatchEvent(new Event('visibilitychange'))
+    window.dispatchEvent(new Event('pageshow'))
+    await nextTick()
+    await Promise.resolve()
+
+    expect(render).not.toHaveBeenCalled()
+
+    documentHasFocus = true
+    window.dispatchEvent(new Event('focus'))
+    await nextTick()
+    await Promise.resolve()
+    expect(render).toHaveBeenCalledTimes(1)
+    scope.stop()
+  })
+
+  it('commits correct native-scroll pixels before releasing the takeover on resume', async () => {
+    const three = await import('three')
+    const canvas = document.createElement('canvas')
+    const root = document.createElement('div')
+    root.append(canvas)
+    Object.defineProperty(root, 'scrollHeight', { configurable: true, value: 1200 })
+    document.body.append(root)
+    appendOpticalSurface('app-hover-lift-card', { height: 320, width: 520, x: 40, y: 80 })
+    let visibilityState: DocumentVisibilityState = 'visible'
+    let scrollY = 0
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState)
+    vi.spyOn(window, 'scrollY', 'get').mockImplementation(() => scrollY)
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let frameId = 0
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      frameId += 1
+      callbacks.set(frameId, callback)
+      return frameId
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(id => callbacks.delete(id))
+    const snapshots: Array<{ hasWallpaper: number; nativePresentation: string | undefined; scrollOffset: number }> = []
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render').mockImplementation(scene => {
+      const material = (scene as unknown as { children: Array<{ material?: ShaderMaterial }> }).children[0]?.material
+      const uniforms = material?.uniforms as
+        { uHasWallpaperTexture?: { value: number }; uScrollOffset?: { value: { y: number } } } | undefined
+      if (uniforms?.uHasWallpaperTexture && uniforms.uScrollOffset) {
+        snapshots.push({
+          hasWallpaper: uniforms.uHasWallpaperTexture.value,
+          nativePresentation: document.documentElement.dataset.glassScrollPresentation,
+          scrollOffset: uniforms.uScrollOffset.value.y,
+        })
+      }
+    })
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(canvas),
+        dynamicsMode: ref<'fluid' | 'off' | 'ripple'>('off'),
+        quality: ref('balanced'),
+        routeKey: ref('/dashboard'),
+        surfaceSpace: 'scroll',
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    flushQueuedAnimationFrames(callbacks)
+    const scene = render.mock.calls.at(-1)?.[0] as unknown as {
+      children: Array<{
+        material: { uniforms: { uHasWallpaperTexture: { value: number }; uScrollOffset: { value: { y: number } } } }
+      }>
+    }
+    const uniforms = scene.children[0].material.uniforms
+    snapshots.length = 0
+    render.mockClear()
+
+    scrollY = 240
+    window.dispatchEvent(new Event('scroll'))
+    expect(document.documentElement.dataset.glassScrollPresentation).toBe('native')
+    expect(uniforms.uHasWallpaperTexture.value).toBe(0)
+    const firstScrollFrame = [...callbacks.values()][0]
+    callbacks.clear()
+    firstScrollFrame?.(performance.now() + 16)
+    expect(uniforms.uScrollOffset.value.y).toBe(240)
+
+    visibilityState = 'hidden'
+    document.dispatchEvent(new Event('visibilitychange'))
+    expect(callbacks.size).toBe(0)
+    expect(document.documentElement.dataset.glassScrollPresentation).toBe('native')
+    expect(uniforms.uHasWallpaperTexture.value).toBe(0)
+
+    scrollY = 480
+    window.dispatchEvent(new Event('scroll'))
+    expect(uniforms.uScrollOffset.value.y).toBe(240)
+
+    visibilityState = 'visible'
+    document.dispatchEvent(new Event('visibilitychange'))
+    await nextTick()
+    await Promise.resolve()
+
+    expect(snapshots).toEqual([{ hasWallpaper: 1, nativePresentation: 'native', scrollOffset: 480 }])
+    expect(document.documentElement.dataset.glassScrollPresentation).toBeUndefined()
+    expect(uniforms.uHasWallpaperTexture.value).toBe(1)
+    scope.stop()
+  })
+
+  it('waits for page-motion geometry acknowledgement after a paused resume', async () => {
+    const three = await import('three')
+    const canvas = document.createElement('canvas')
+    const root = document.createElement('div')
+    root.append(canvas)
+    Object.defineProperty(root, 'scrollHeight', { configurable: true, value: 1200 })
+    document.body.append(root)
+    appendOpticalSurface('app-hover-lift-card', { height: 320, width: 520, x: 40, y: 80 })
+    let visibilityState: DocumentVisibilityState = 'visible'
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState)
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let frameId = 0
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      frameId += 1
+      callbacks.set(frameId, callback)
+      return frameId
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(id => callbacks.delete(id))
+    const acknowledgeGeometryReady = vi.fn(() => true)
+    const motionActive = ref(false)
+    const motionEpoch = ref(0)
+    const motionRevision = ref(0)
+    const committedWeights: number[] = []
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render').mockImplementation(scene => {
+      const material = (scene as unknown as { children: Array<{ material?: ShaderMaterial }> }).children[0]?.material
+      const weights = material?.uniforms.uSurfaceWeights?.value as number[] | undefined
+      if (weights) committedWeights.push(weights[0])
+    })
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(canvas),
+        dynamicsMode: ref<'fluid' | 'off' | 'ripple'>('off'),
+        pageMotion: {
+          acknowledgeGeometryReady,
+          active: motionActive,
+          epoch: motionEpoch,
+          opacity: ref(1),
+          revision: motionRevision,
+        },
+        quality: ref('balanced'),
+        routeKey: ref('/dashboard'),
+        surfaceSpace: 'scroll',
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    flushQueuedAnimationFrames(callbacks)
+    committedWeights.length = 0
+    render.mockClear()
+    callbacks.clear()
+
+    motionEpoch.value = 7
+    motionActive.value = true
+    expect(callbacks.size).toBe(1)
+    visibilityState = 'hidden'
+    document.dispatchEvent(new Event('visibilitychange'))
+    expect(callbacks.size).toBe(0)
+    expect(acknowledgeGeometryReady).not.toHaveBeenCalled()
+
+    visibilityState = 'visible'
+    document.dispatchEvent(new Event('visibilitychange'))
+    await nextTick()
+    await Promise.resolve()
+
+    expect(acknowledgeGeometryReady).not.toHaveBeenCalled()
+    expect(committedWeights[0]).toBe(0)
+    flushQueuedAnimationFrames(callbacks, 6)
+
+    expect(acknowledgeGeometryReady).toHaveBeenCalledOnce()
+    expect(acknowledgeGeometryReady).toHaveBeenCalledWith(7, expect.any(Number))
+    expect(committedWeights.at(-1)).toBe(1)
+    scope.stop()
+  })
+
   it('releases renderer resources after the long background timeout', async () => {
     const three = await import('three')
     const canvas = document.createElement('canvas')
@@ -2945,11 +3479,100 @@ describe('glass optical surface discovery', () => {
     scope.stop()
   })
 
+  it('rebuilds long-background resources and acknowledges the latest page-motion epoch', async () => {
+    const three = await import('three')
+    const canvas = document.createElement('canvas')
+    const root = document.createElement('div')
+    root.append(canvas)
+    Object.defineProperty(root, 'scrollHeight', { configurable: true, value: 1200 })
+    document.body.append(root)
+    appendOpticalSurface('app-hover-lift-card', { height: 320, width: 520, x: 40, y: 80 })
+    let visibilityState: DocumentVisibilityState = 'visible'
+    vi.spyOn(document, 'visibilityState', 'get').mockImplementation(() => visibilityState)
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let frameId = 0
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      frameId += 1
+      callbacks.set(frameId, callback)
+      return frameId
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(id => callbacks.delete(id))
+    const acknowledgeGeometryReady = vi.fn()
+    const committedWeights: number[] = []
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render').mockImplementation(scene => {
+      const material = (scene as unknown as { children: Array<{ material?: ShaderMaterial }> }).children[0]?.material
+      const weights = material?.uniforms.uSurfaceWeights?.value as number[] | undefined
+      if (weights) committedWeights.push(weights[0])
+    })
+    const motionActive = ref(false)
+    const motionEpoch = ref(0)
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(canvas),
+        dynamicsMode: ref<'fluid' | 'off' | 'ripple'>('off'),
+        pageMotion: {
+          acknowledgeGeometryReady,
+          active: motionActive,
+          epoch: motionEpoch,
+          opacity: ref(1),
+          revision: ref(0),
+        },
+        quality: ref('balanced'),
+        routeKey: ref('/dashboard'),
+        surfaceSpace: 'scroll',
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('https://example.com/wallpaper.jpg'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    flushQueuedAnimationFrames(callbacks)
+    committedWeights.length = 0
+    render.mockClear()
+    callbacks.clear()
+
+    motionEpoch.value = 11
+    motionActive.value = true
+    motionEpoch.value = 12
+    expect(callbacks.size).toBe(1)
+
+    const dispose = vi.spyOn(three.WebGLRenderer.prototype, 'dispose')
+    const contextLoss = vi.spyOn(three.WebGLRenderer.prototype, 'forceContextLoss')
+    vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] })
+    visibilityState = 'hidden'
+    document.dispatchEvent(new Event('visibilitychange'))
+    expect(callbacks.size).toBe(0)
+
+    await vi.advanceTimersByTimeAsync(APP_ACTIVITY_SUSPEND_DELAY_MS)
+    expect(dispose).toHaveBeenCalledTimes(1)
+    expect(contextLoss).not.toHaveBeenCalled()
+    expect(acknowledgeGeometryReady).not.toHaveBeenCalled()
+
+    visibilityState = 'visible'
+    document.dispatchEvent(new Event('visibilitychange'))
+    window.dispatchEvent(new Event('focus'))
+    await nextTick()
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+
+    expect(acknowledgeGeometryReady).not.toHaveBeenCalled()
+    expect(callbacks.size).toBeGreaterThan(0)
+    flushQueuedAnimationFrames(callbacks, 8)
+
+    expect(acknowledgeGeometryReady).toHaveBeenCalledOnce()
+    expect(acknowledgeGeometryReady).toHaveBeenCalledWith(12, expect.any(Number))
+    expect(committedWeights).toContain(0)
+    expect(committedWeights.at(-1)).toBe(1)
+    scope.stop()
+  })
+
   it('releases a paused renderer after the visible window remains unfocused', async () => {
     const three = await import('three')
     const canvas = document.createElement('canvas')
     vi.spyOn(document, 'visibilityState', 'get').mockReturnValue('visible')
-    vi.spyOn(document, 'hasFocus').mockReturnValue(false)
+    documentHasFocus = false
     const scope = effectScope()
     const renderer = scope.run(() =>
       useGlassOpticalRenderer({
@@ -3037,6 +3660,14 @@ describe('glass optical surface discovery', () => {
       callbacks.clear()
       scheduledCallbacks.forEach(callback => callback(performance.now()))
     }
+    const mainScene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(scene => scene.children[0]?.material?.uniforms.uPointer)
+    if (!mainScene) throw new Error('main optical scene was not rendered')
+    const uniforms = mainScene.children[0].material!.uniforms as unknown as {
+      uPointer: { value: { x: number; y: number } }
+      uTrail: { value: Array<{ x: number; y: number; z: number }> }
+    }
     render.mockClear()
 
     dispatchTouchEvent('touchstart', [{ clientX: 80, clientY: 180, identifier: 7 }])
@@ -3050,18 +3681,9 @@ describe('glass optical surface discovery', () => {
     callbacks.clear()
     interactionFrames.forEach(callback => callback(moveEvent.timeStamp + 16))
 
-    const scene = render.mock.calls.at(-1)?.[0] as unknown as {
-      children: Array<{
-        material: {
-          uniforms: {
-            uPointer: { value: { x: number; y: number } }
-            uTrail: { value: Array<{ x: number; y: number; z: number }> }
-          }
-        }
-      }>
-    }
-    const pointer = scene.children[0].material.uniforms.uPointer.value
-    const trail = scene.children[0].material.uniforms.uTrail.value
+    expect(render).not.toHaveBeenCalled()
+    const pointer = uniforms.uPointer.value
+    const trail = uniforms.uTrail.value
     expect(pointer.x).toBeCloseTo(180 / 390)
     expect(pointer.y).toBeCloseTo(1 - 320 / 844)
     expect(trail[0]).toMatchObject({ z: 1 })
@@ -3633,6 +4255,16 @@ describe('glass optical surface discovery', () => {
       scheduledCallbacks.forEach(callback => callback(performance.now()))
     }
     expect(callbacks.size).toBe(0)
+    const mainScene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(scene => scene.children[0]?.material?.uniforms.uScrollOffset)
+    if (!mainScene) throw new Error('main optical scene was not rendered')
+    const settledUniforms = mainScene.children[0].material!.uniforms as unknown as {
+      uMotion: { value: number }
+      uRects: { value: Array<{ y: number }> }
+      uScrollOffset: { value: { y: number } }
+      uTrail: { value: Array<{ z: number }> }
+    }
 
     vi.spyOn(window, 'scrollY', 'get').mockReturnValue(120)
     setOpticalSurfaceBounds(surface, { height: 500, width: 350, x: 20, y: -20 })
@@ -3643,19 +4275,6 @@ describe('glass optical surface discovery', () => {
       scheduledCallbacks.forEach(callback => callback(performance.now() + 160 + pass * 16))
     }
 
-    const settledScene = render.mock.calls.at(-1)?.[0] as unknown as {
-      children: Array<{
-        material: {
-          uniforms: {
-            uMotion: { value: number }
-            uRects: { value: Array<{ y: number }> }
-            uScrollOffset: { value: { y: number } }
-            uTrail: { value: Array<{ z: number }> }
-          }
-        }
-      }>
-    }
-    const settledUniforms = settledScene.children[0].material.uniforms
     expect(settledUniforms.uMotion.value).toBe(0)
     expect(settledUniforms.uTrail.value.every(trail => trail.z === 0)).toBe(true)
     expect(settledUniforms.uRects.value[0].y).toBeCloseTo(1 - (100 + 500) / 844)
@@ -3705,6 +4324,15 @@ describe('glass optical surface discovery', () => {
       scheduledCallbacks.forEach(callback => callback(performance.now() + pass * 16))
     }
     expect(callbacks.size).toBe(0)
+    const mainScene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(scene => scene.children[0]?.material?.uniforms.uScrollOffset)
+    if (!mainScene) throw new Error('main optical scene was not rendered')
+    const uniforms = mainScene.children[0].material!.uniforms as unknown as {
+      uMotion: { value: number }
+      uScrollOffset: { value: { y: number } }
+      uTrail: { value: Array<{ z: number }> }
+    }
     render.mockClear()
 
     scrollY = 80
@@ -3719,18 +4347,6 @@ describe('glass optical surface discovery', () => {
       callbacks.clear()
       scheduledCallbacks.forEach(callback => {
         callback(performance.now() + 100 + pass * 16)
-        const scene = render.mock.calls.at(-1)?.[0] as unknown as {
-          children: Array<{
-            material: {
-              uniforms: {
-                uMotion: { value: number }
-                uScrollOffset: { value: { y: number } }
-                uTrail: { value: Array<{ z: number }> }
-              }
-            }
-          }>
-        }
-        const uniforms = scene.children[0].material.uniforms
         renderedScrollOffsets.push(uniforms.uScrollOffset.value.y)
         expect(uniforms.uMotion.value).toBe(0)
         expect(uniforms.uTrail.value.every(trail => trail.z === 0)).toBe(true)
@@ -3763,21 +4379,6 @@ describe('glass optical surface discovery', () => {
     vi.spyOn(window, 'scrollY', 'get').mockImplementation(() => scrollY)
     const three = await import('three')
     const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
-    const wallpaperSampling: number[] = []
-    render.mockImplementation(scene => {
-      const uniforms = (
-        scene as unknown as {
-          children: Array<{
-            material?: {
-              uniforms?: {
-                uHasWallpaperTexture?: { value: number }
-              }
-            }
-          }>
-        }
-      ).children[0]?.material?.uniforms
-      if (uniforms?.uHasWallpaperTexture) wallpaperSampling.push(uniforms.uHasWallpaperTexture.value)
-    })
     const callbacks = new Map<number, FrameRequestCallback>()
     let frameId = 0
     vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
@@ -3808,11 +4409,16 @@ describe('glass optical surface discovery', () => {
       callbacks.clear()
       scheduledCallbacks.forEach(callback => callback(performance.now() + pass * 16))
     }
-    expect(wallpaperSampling.at(-1)).toBe(1)
+    const mainScene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(scene => scene.children[0]?.material?.uniforms.uHasWallpaperTexture)
+    if (!mainScene) throw new Error('main optical scene was not rendered')
+    const wallpaperSampling = mainScene.children[0].material!.uniforms.uHasWallpaperTexture
+    expect(wallpaperSampling.value).toBe(1)
 
     window.dispatchEvent(new WheelEvent('wheel', { deltaY: 80 }))
 
-    expect(wallpaperSampling.at(-1)).toBe(0)
+    expect(wallpaperSampling.value).toBe(0)
     expect(document.documentElement.dataset.glassScrollPresentation).toBe('native')
 
     scrollY = 240
@@ -3823,13 +4429,152 @@ describe('glass optical surface discovery', () => {
       scheduledCallbacks.forEach(callback => callback(performance.now() + 100 + pass * 16))
     }
 
-    expect(wallpaperSampling.at(-1)).toBe(1)
+    expect(wallpaperSampling.value).toBe(1)
     expect(document.documentElement).not.toHaveAttribute('data-glass-scroll-presentation')
     expect(callbacks.size).toBe(0)
 
     scope.stop()
   })
 
+  it('skips hidden native scroll draws and commits one frame before revealing the canvas', async () => {
+    vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1200)
+    vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800)
+    let scrollY = 0
+    vi.spyOn(window, 'scrollY', 'get').mockImplementation(() => scrollY)
+    const three = await import('three')
+    const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
+    const callbacks = new Map<number, FrameRequestCallback>()
+    let frameId = 0
+    vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+      frameId += 1
+      callbacks.set(frameId, callback)
+
+      return frameId
+    })
+    vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(id => callbacks.delete(id))
+    appendOpticalSurface('app-hover-lift-card', { height: 300, width: 400, x: 40, y: 120 })
+    const scope = effectScope()
+    const renderer = scope.run(() =>
+      useGlassOpticalRenderer({
+        active: ref(true),
+        appearance: ref('clear'),
+        canvas: ref(document.createElement('canvas')),
+        dynamicsMode: ref<'fluid' | 'off' | 'ripple'>('off'),
+        quality: ref('high'),
+        routeKey: ref('/dashboard'),
+        surfaceSpace: 'scroll',
+        tintColor: ref('#8D51F9'),
+        wallpaperUrl: ref('/api/v1/login/wallpapers/opaque-id'),
+      }),
+    )
+
+    await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+    expect(document.documentElement.dataset.glassRendererState).toBe('ready')
+    const mainScene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(scene => scene.children[0]?.material?.uniforms.uScrollOffset)
+    if (!mainScene) throw new Error('main optical scene was not rendered')
+    const uniforms = mainScene.children[0].material!.uniforms
+    const framesBeforeNativeScroll = renderer?.renderedFrames.value
+    let presentationAtRestoreRender: string | undefined
+    render.mockImplementation(() => {
+      presentationAtRestoreRender = document.documentElement.dataset.glassScrollPresentation
+    })
+    render.mockClear()
+
+    window.dispatchEvent(new WheelEvent('wheel', { deltaY: 80 }))
+
+    expect(render).not.toHaveBeenCalled()
+    expect(renderer?.renderedFrames.value).toBe(framesBeforeNativeScroll)
+    expect(document.documentElement.dataset.glassScrollPresentation).toBe('native')
+
+    scrollY = 240
+    window.dispatchEvent(new Event('scroll'))
+    const firstScrollFrame = [...callbacks.values()][0]
+    callbacks.clear()
+    firstScrollFrame?.(performance.now() + 100)
+
+    expect(render).not.toHaveBeenCalled()
+    expect(uniforms.uScrollOffset.value.y).toBe(240)
+    expect(document.documentElement.dataset.glassScrollPresentation).toBe('native')
+
+    const secondScrollFrame = [...callbacks.values()][0]
+    callbacks.clear()
+    secondScrollFrame?.(performance.now() + 116)
+
+    expect(render).not.toHaveBeenCalled()
+    expect(document.documentElement.dataset.glassScrollPresentation).toBe('native')
+
+    const restoreFrame = [...callbacks.values()][0]
+    callbacks.clear()
+    restoreFrame?.(performance.now() + 132)
+
+    expect(render).toHaveBeenCalledTimes(1)
+    expect(presentationAtRestoreRender).toBe('native')
+    expect(renderer?.renderedFrames.value).toBe((framesBeforeNativeScroll ?? 0) + 1)
+    expect(document.documentElement).not.toHaveAttribute('data-glass-scroll-presentation')
+
+    scope.stop()
+  })
+
+  it.each(['loading', 'fallback'] as const)(
+    'keeps drawing while the scroll context is ready but the composite renderer state is %s',
+    async rootState => {
+      vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1200)
+      vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800)
+      const three = await import('three')
+      const render = vi.spyOn(three.WebGLRenderer.prototype, 'render')
+      const callbacks = new Map<number, FrameRequestCallback>()
+      let frameId = 0
+      vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => {
+        frameId += 1
+        callbacks.set(frameId, callback)
+
+        return frameId
+      })
+      vi.spyOn(window, 'cancelAnimationFrame').mockImplementation(id => callbacks.delete(id))
+      appendOpticalSurface('app-hover-lift-card', { height: 300, width: 400, x: 40, y: 120 })
+      const scope = effectScope()
+      const renderer = scope.run(() =>
+        useGlassOpticalRenderer({
+          active: ref(true),
+          appearance: ref('clear'),
+          canvas: ref(document.createElement('canvas')),
+          dynamicsMode: ref<'fluid' | 'off' | 'ripple'>('off'),
+          quality: ref('high'),
+          routeKey: ref('/dashboard'),
+          surfaceSpace: 'scroll',
+          tintColor: ref('#8D51F9'),
+          wallpaperUrl: ref('/api/v1/login/wallpapers/opaque-id'),
+        }),
+      )
+
+      await vi.waitFor(() => expect(renderer?.state.value).toBe('ready'))
+      for (let pass = 0; pass < 4 && callbacks.size > 0; pass += 1) {
+        const scheduledCallbacks = [...callbacks.values()]
+        callbacks.clear()
+        scheduledCallbacks.forEach(callback => callback(performance.now() + pass * 16))
+      }
+      render.mockClear()
+
+      window.dispatchEvent(new WheelEvent('wheel', { deltaY: 80 }))
+      expect(document.documentElement.dataset.glassScrollPresentation).toBe('native')
+      expect(render).not.toHaveBeenCalled()
+
+      document.documentElement.dataset.glassRendererState = rootState
+      window.dispatchEvent(new Event('scroll'))
+      const firstScrollFrame = [...callbacks.values()][0]
+      callbacks.clear()
+      firstScrollFrame?.(performance.now() + 100)
+
+      expect(renderer?.state.value).toBe('ready')
+      expect(document.documentElement.dataset.glassRendererState).toBe(rootState)
+      expect(render).toHaveBeenCalledTimes(1)
+
+      scope.stop()
+    },
+  )
+
   it('clears ripple state before native scroll presentation takes ownership', async () => {
     vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(1200)
     vi.spyOn(window, 'innerHeight', 'get').mockReturnValue(800)
@@ -4120,6 +4865,14 @@ describe('glass optical surface discovery', () => {
       callbacks.clear()
       scheduledCallbacks.forEach(callback => callback(performance.now() + pass * 16))
     }
+    const mainScene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(scene => scene.children[0]?.material?.uniforms.uRects)
+    if (!mainScene) throw new Error('main optical scene was not rendered')
+    const uniforms = mainScene.children[0].material!.uniforms as unknown as {
+      uRects: { value: Array<{ y: number }> }
+    }
+    const initialRectY = uniforms.uRects.value[0]?.y
     render.mockClear()
     setRenderTarget.mockClear()
 
@@ -4135,7 +4888,8 @@ describe('glass optical surface discovery', () => {
     callbacks.clear()
     scheduledCallbacks.forEach(callback => callback(performance.now() + 100))
 
-    expect(render).toHaveBeenCalled()
+    expect(render).not.toHaveBeenCalled()
+    expect(uniforms.uRects.value[0]?.y).not.toBe(initialRectY)
     expect(setRenderTarget).not.toHaveBeenCalled()
 
     const transitionEnd = new Event('transitionend', { bubbles: true }) as TransitionEvent
@@ -4199,6 +4953,13 @@ describe('glass optical surface discovery', () => {
       scheduledCallbacks.forEach(callback => callback(performance.now() + pass * 16))
     }
     expect(callbacks.size).toBe(0)
+    const mainScene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(scene => scene.children[0]?.material?.uniforms.uRects)
+    if (!mainScene) throw new Error('main optical scene was not rendered')
+    const scrollUniforms = mainScene.children[0].material!.uniforms as unknown as {
+      uRects: { value: Array<{ y: number }> }
+    }
     querySelectorAll.mockClear()
 
     scrollY = 1000
@@ -4209,16 +4970,7 @@ describe('glass optical surface discovery', () => {
     const firstScrollFrame = [...callbacks.values()]
     callbacks.clear()
     firstScrollFrame.forEach(callback => callback(performance.now() + 100))
-    const firstScrollScene = render.mock.calls.at(-1)?.[0] as unknown as {
-      children: Array<{
-        material: {
-          uniforms: {
-            uRects: { value: Array<{ y: number }> }
-          }
-        }
-      }>
-    }
-    expect(firstScrollScene.children[0].material.uniforms.uRects.value[0].y).toBeCloseTo(1 - (1100 + 240) / 2000)
+    expect(scrollUniforms.uRects.value[0].y).toBeCloseTo(1 - (1100 + 240) / 2000)
     expect(querySelectorAll).not.toHaveBeenCalled()
 
     for (let pass = 0; pass < 3 && callbacks.size > 0; pass += 1) {
@@ -4303,6 +5055,13 @@ describe('glass optical surface discovery', () => {
       scheduledCallbacks.forEach(callback => callback(performance.now() + pass * 16))
     }
     expect(callbacks.size).toBe(0)
+    const mainScene = render.mock.calls
+      .map(call => call[0] as unknown as { children: Array<{ material?: ShaderMaterial }> })
+      .find(scene => scene.children[0]?.material?.uniforms.uRects)
+    if (!mainScene) throw new Error('main optical scene was not rendered')
+    const uniforms = mainScene.children[0].material!.uniforms as unknown as {
+      uRects: { value: Array<{ y: number }> }
+    }
     querySelectorAll.mockClear()
 
     setOpticalSurfaceBounds(surface, { height: 300, width: 400, x: 40, y: 180 })
@@ -4311,17 +5070,7 @@ describe('glass optical surface discovery', () => {
     const firstScrollFrame = [...callbacks.values()]
     callbacks.clear()
     firstScrollFrame.forEach(callback => callback(performance.now() + 100))
-
-    const firstScrollScene = render.mock.calls.at(-1)?.[0] as unknown as {
-      children: Array<{
-        material: {
-          uniforms: {
-            uRects: { value: Array<{ y: number }> }
-          }
-        }
-      }>
-    }
-    expect(firstScrollScene.children[0].material.uniforms.uRects.value[0].y).toBeCloseTo(1 - (180 + 300) / 1200)
+    expect(uniforms.uRects.value[0].y).toBeCloseTo(1 - (180 + 300) / 1200)
     expect(querySelectorAll).toHaveBeenCalled()
 
     scope.stop()
diff --git a/src/composables/useGlassOpticalRenderer.ts b/src/composables/useGlassOpticalRenderer.ts
index d3cc57b4..13ff1e47 100644
--- a/src/composables/useGlassOpticalRenderer.ts
+++ b/src/composables/useGlassOpticalRenderer.ts
@@ -707,27 +707,34 @@ vec3 toneMapWallpaper(vec3 color, vec2 uv, float wallpaperExposure) {
 vec3 sampleWallpaper(vec2 uv) {
   vec2 viewportUv = vec2(0.5) + (uv - vec2(0.5)) / max(uCoverScale, vec2(0.0001));
   vec2 previousUv = vec2(0.5) + (viewportUv - vec2(0.5)) * uPreviousCoverScale;
-  vec3 previous;
-  vec3 current;
+  vec3 previous = vec3(0.0);
+  vec3 current = vec3(0.0);
+  // 稳定端点只读取参与输出的纹理；过渡中仍按各自曝光映射后混合。
+  bool needsPrevious = uTextureMix < 0.999;
+  bool needsCurrent = uTextureMix > 0.001;
   if (uAppearance > 1.5 && uHasFrostedTexture > 0.5) {
     float frostLod = (1.0 - uFrostDetailLevel) * 6.0;
     // 低分辨率预滤已经扩大了每个 texel 的原图 footprint，LOD 只追加当前纹理内的低通层级。
     float frostGradientScale = exp2(frostLod);
-    previous = texture2DGradEXT(
-      uPreviousFrostedTexture,
-      previousUv,
-      dFdx(previousUv) * frostGradientScale,
-      dFdy(previousUv) * frostGradientScale
-    ).rgb;
-    current = texture2DGradEXT(
-      uFrostedTexture,
-      uv,
-      dFdx(uv) * frostGradientScale,
-      dFdy(uv) * frostGradientScale
-    ).rgb;
+    if (needsPrevious) {
+      previous = texture2DGradEXT(
+        uPreviousFrostedTexture,
+        previousUv,
+        dFdx(previousUv) * frostGradientScale,
+        dFdy(previousUv) * frostGradientScale
+      ).rgb;
+    }
+    if (needsCurrent) {
+      current = texture2DGradEXT(
+        uFrostedTexture,
+        uv,
+        dFdx(uv) * frostGradientScale,
+        dFdy(uv) * frostGradientScale
+      ).rgb;
+    }
   } else {
-    previous = texture2D(uPreviousTexture, previousUv).rgb;
-    current = texture2D(uTexture, uv).rgb;
+    if (needsPrevious) previous = texture2D(uPreviousTexture, previousUv).rgb;
+    if (needsCurrent) current = texture2D(uTexture, uv).rgb;
   }
 
   if (uTextureMix <= 0.001) {
@@ -929,25 +936,23 @@ ${GLASS_FLUID_FRAGMENT_SURFACE_REFRACTION}
     ? refracted
     : sampleChromatic(sourceUv, detailSeparation);
   refracted = mix(refracted, detailed, mix(0.06, 0.16, uQuality) * (1.0 - frosted));
-  vec2 diffusionAxis = length(refraction) > 0.00001 ? normalize(refraction) : wakePerpendicular;
-  float diffusionRadius =
-    mix(0.0022, 0.0038, uQuality) *
-    (
-      0.82 +
-      materialEnergy * mix(0.28, 0.76, uMotionExpansion) +
-      flowSurfaceDetail * dynamicMask * 0.38
-    );
-  float frostedDensity = frosted * (1.0 - uFrostDetailLevel);
-  diffusionRadius *= 1.0 + frostedDensity * mix(1.15, 1.55, uQuality);
-  vec3 diffused;
-  if (usesPrefilteredFrost > 0.5) {
-    diffused = refracted;
-  } else if (uQuality > 0.5) {
-    diffused = sampleHighQualityDiffuse(sourceUv, diffusionAxis, diffusionRadius);
-  } else {
-    diffused = sampleBalancedDiffuse(sourceUv, diffusionAxis, diffusionRadius);
+  // 非磨砂不使用扩散结果；预滤磨砂已具备低通纹理，两者都无需额外邻域采样。
+  if (frosted > 0.5 && usesPrefilteredFrost <= 0.5) {
+    vec2 diffusionAxis = length(refraction) > 0.00001 ? normalize(refraction) : wakePerpendicular;
+    float diffusionRadius =
+      mix(0.0022, 0.0038, uQuality) *
+      (
+        0.82 +
+        materialEnergy * mix(0.28, 0.76, uMotionExpansion) +
+        flowSurfaceDetail * dynamicMask * 0.38
+      );
+    float frostedDensity = frosted * (1.0 - uFrostDetailLevel);
+    diffusionRadius *= 1.0 + frostedDensity * mix(1.15, 1.55, uQuality);
+    vec3 diffused = uQuality > 0.5
+      ? sampleHighQualityDiffuse(sourceUv, diffusionAxis, diffusionRadius)
+      : sampleBalancedDiffuse(sourceUv, diffusionAxis, diffusionRadius);
+    refracted = mix(refracted, diffused, frosted);
   }
-  refracted = mix(refracted, diffused, frosted);
   float refractedLuminance = dot(refracted, vec3(0.2126, 0.7152, 0.0722));
   float tinted = step(0.5, uAppearance) * (1.0 - step(1.5, uAppearance));
   float transmissionOffset = min(uTransmissionStrength - 1.0, 0.0);
@@ -1326,12 +1331,19 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   let contextRecoveryPending = false
   let resumePromise: Promise<void> | null = null
   let resumeVersion = 0
+  // 失焦后的暂停状态由活动事件解除，观察器与参数更新不能自行恢复呈现。
+  let presentationPaused = document.visibilityState === 'hidden' || !document.hasFocus()
   let dynamicsGeneration = 0
   const presentationSpace = options.surfaceSpace ?? 'fixed'
   const usesDynamicsOnly = () =>
     presentationSpace === 'scroll' || (presentationSpace === 'fixed' && toValue(options.appearance) === 'frosted')
   const wallpaperSourceCache = options.wallpaperSourceCache ?? createGlassWallpaperSourceCache()
 
+  /** 所有持续绘制入口共享活动边界，资源准备和 uniform 同步不依赖呈现帧。 */
+  function canPresentFrame() {
+    return toValue(options.active) && !presentationPaused && document.visibilityState !== 'hidden'
+  }
+
   /** 滚动期间由原生 backdrop 接管壁纸；稳定态恢复完整纹理折射与流体反馈。 */
   function syncWallpaperSamplingMode() {
     if (!resources) return
@@ -1347,18 +1359,18 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
     scrollPresentationRestoreTimer = null
   }
 
-  function finishNativeScrollPresentation(timestamp = performance.now()) {
+  function finishNativeScrollPresentation(timestamp = performance.now(), advanceFlow = false) {
     clearScrollPresentationRestoreTimer()
-    if (presentationSpace !== 'scroll' || !scrollWallpaperSamplingSuppressed) return
+    if (presentationSpace !== 'scroll' || !scrollWallpaperSamplingSuppressed || !canPresentFrame()) return
 
     scrollWallpaperSamplingSuppressed = false
     syncWallpaperSamplingMode()
-    renderFrame(timestamp, false)
+    renderFrame(timestamp, advanceFlow)
     document.documentElement.removeAttribute('data-glass-scroll-presentation')
   }
 
   function beginNativeScrollPresentation() {
-    if (presentationSpace !== 'scroll' || !resources) return
+    if (presentationSpace !== 'scroll' || !resources || !canPresentFrame()) return
 
     clearScrollPresentationRestoreTimer()
     scrollPresentationRestoreTimer = window.setTimeout(() => finishNativeScrollPresentation(), 180)
@@ -1532,6 +1544,18 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
     transformingSurfaces.clear()
   }
 
+  /** 暂停和销毁共用几何帧清理，恢复时按最新 DOM 重新测量。 */
+  function cancelSurfaceUpdateFrames() {
+    if (surfaceUpdateFrame !== null) cancelAnimationFrame(surfaceUpdateFrame)
+    surfaceUpdateFrame = null
+    if (surfaceStabilityFrame !== null) cancelAnimationFrame(surfaceStabilityFrame)
+    surfaceStabilityFrame = null
+    if (presentationResizeTimer !== null) window.clearTimeout(presentationResizeTimer)
+    presentationResizeTimer = null
+    presentationResizeCandidate = ''
+    presentationResizeStableSamples = 0
+  }
+
   function clearBackgroundDisposeTimer() {
     if (backgroundDisposeTimer === null) return
 
@@ -1584,7 +1608,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
 
   function renderWallpaperTransitionFrame(timestamp: number) {
     wallpaperTransitionFrame = null
-    if (document.visibilityState === 'hidden') return
+    if (!canPresentFrame()) return
 
     renderFrame(timestamp)
     if (previousTexture && wallpaperTransitionFrame === null) {
@@ -1593,7 +1617,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function scheduleWallpaperTransition() {
-    if (wallpaperTransitionFrame !== null || !previousTexture || document.visibilityState === 'hidden') return
+    if (wallpaperTransitionFrame !== null || !previousTexture || !canPresentFrame()) return
 
     wallpaperTransitionFrame = requestAnimationFrame(renderWallpaperTransitionFrame)
   }
@@ -1821,12 +1845,23 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function renderFrame(timestamp = performance.now(), advanceFlow = true) {
-    if (!resources || !toValue(options.active) || document.visibilityState === 'hidden') return
+    if (!resources || !canPresentFrame()) return
 
     updateWallpaperTransition(timestamp)
     if (fluidDynamics && advanceFlow) {
       resources.uniforms.uFlowTexture.value = fluidDynamics.step()
     }
+    // 原生 backdrop 接管期间 scroll canvas 已由 CSS 隐藏；保留事务、流场和 uniform 同步，跳过主材质输出。
+    if (
+      presentationSpace === 'scroll' &&
+      scrollWallpaperSamplingSuppressed &&
+      state.value === 'ready' &&
+      document.documentElement.dataset.glassRendererState === 'ready' &&
+      document.documentElement.dataset.glassScrollPresentation === 'native'
+    ) {
+      return
+    }
+
     if (presentationSpace === 'scroll') {
       const { height: presentationHeight } = getCommittedPresentationSize()
       const scaleY = presentationBufferHeight / Math.max(presentationHeight, 1)
@@ -1848,7 +1883,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function scheduleFrame() {
-    if (animationFrame !== null || !resources) return
+    if (animationFrame !== null || !resources || !canPresentFrame()) return
 
     animationFrame = requestAnimationFrame(renderScheduledFrame)
   }
@@ -2130,11 +2165,13 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function scheduleSurfaceUpdate() {
+    if (!canPresentFrame()) return
     if (queueScrollGeometryRefresh(false)) return
     if (surfaceUpdateFrame !== null || !resources) return
 
     surfaceUpdateFrame = requestAnimationFrame(timestamp => {
       surfaceUpdateFrame = null
+      if (!canPresentFrame()) return
       updateSurfaceUniforms(timestamp, false)
       // 表面失效必须在同一有界帧内清除旧像素，不能等待下一次指针或壁纸事件。
       renderFrame(timestamp, false)
@@ -2144,6 +2181,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   /** DOM 重排后连续采样少量帧，避免把虚拟列表的中间几何误认为最终表面。 */
   function scheduleSurfaceStabilityUpdate(motionEpoch?: number) {
     if (motionEpoch !== undefined) pagePresentationMotionEpoch = motionEpoch
+    if (!canPresentFrame()) return
     if (queueScrollGeometryRefresh(true)) return
     surfaceStabilityPass = 0
     surfaceStableFrameCount = 0
@@ -2152,7 +2190,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
 
     const sample = (timestamp: number) => {
       surfaceStabilityFrame = null
-      if (!resources || !toValue(options.active) || document.visibilityState === 'hidden') return
+      if (!resources || !canPresentFrame()) return
 
       updateSurfaceUniforms(timestamp, false)
       const signature = surfaceSlots
@@ -2192,13 +2230,14 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
    * 连续两个 80ms 样本一致才允许覆盖已提交的 presentation 首帧。
    */
   function schedulePresentationResizeUpdate() {
+    if (!canPresentFrame()) return
     if (presentationResizeTimer !== null) window.clearTimeout(presentationResizeTimer)
     presentationResizeCandidate = ''
     presentationResizeStableSamples = 0
 
     const sample = () => {
       presentationResizeTimer = null
-      if (!resources) return
+      if (!resources || !canPresentFrame()) return
 
       const presentation = measurePresentationSize()
       const candidate = `${window.innerWidth},${window.innerHeight},${presentation.width},${presentation.height}`
@@ -2220,7 +2259,13 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
 
   /** 共享页面 motion 活跃时，页面几何变化必须在浏览器绘制前完成一次完整 presentation 提交。 */
   function commitActivePagePresentation(timestamp = performance.now()) {
-    if (!resources || presentationSpace !== 'scroll' || !toValue(options.pageMotion?.active ?? false)) return false
+    if (
+      !resources ||
+      !canPresentFrame() ||
+      presentationSpace !== 'scroll' ||
+      !toValue(options.pageMotion?.active ?? false)
+    )
+      return false
 
     if (presentationResizeTimer !== null) window.clearTimeout(presentationResizeTimer)
     presentationResizeTimer = null
@@ -2235,7 +2280,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
 
   /** 普通表面尺寸即时更新；页面根尺寸在稳定后覆盖 presentation。 */
   function handleSurfaceResize(entries: ResizeObserverEntry[]) {
-    if (!resources) return
+    if (!resources || !canPresentFrame()) return
 
     const presentationRoot = presentationSpace === 'scroll' ? options.canvas.value?.parentElement : null
     const presentationChanged = presentationRoot && entries.some(entry => entry.target === presentationRoot)
@@ -2251,12 +2296,13 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
 
   /** CSS transform 不改变布局尺寸，过渡期间用有界帧同步真实几何并清除旧蒙版。 */
   function scheduleSurfaceTransformFrame() {
+    if (!canPresentFrame()) return
     if (queueScrollGeometryRefresh(false)) return
     if (surfaceTransformFrame !== null || !resources) return
 
     surfaceTransformFrame = requestAnimationFrame(timestamp => {
       surfaceTransformFrame = null
-      if (!resources || !toValue(options.active) || document.visibilityState === 'hidden') {
+      if (!resources || !canPresentFrame()) {
         cancelSurfaceTransformFrame()
         return
       }
@@ -2444,7 +2490,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function resizeRenderer() {
-    if (!resources) return
+    if (!resources || !canPresentFrame()) return
 
     const viewportWidth = window.innerWidth
     const viewportHeight = window.innerHeight
@@ -2649,7 +2695,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function renderInteractionFrame(timestamp: number) {
-    if (!resources || !toValue(options.active) || document.visibilityState === 'hidden') {
+    if (!resources || !canPresentFrame()) {
       animationFrame = null
       interactionAnimating = false
       return
@@ -2714,7 +2760,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function startInteractionAnimation() {
-    if (interactionAnimating) return
+    if (interactionAnimating || !canPresentFrame()) return
 
     cancelScheduledFrame()
     interactionAnimating = true
@@ -2731,6 +2777,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
     target?: EventTarget | null,
   ) {
     if (
+      !canPresentFrame() ||
       !hasDynamicCapability() ||
       (hasRippleCapability() && presentationSpace === 'scroll' && scrollWallpaperSamplingSuppressed)
     ) {
@@ -2929,12 +2976,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
     scrollAnimationFrame = null
     scrollFrameCommitted = false
     scrollLateGeometryCommitted = false
-    if (
-      presentationSpace !== 'scroll' ||
-      !resources ||
-      !toValue(options.active) ||
-      document.visibilityState === 'hidden'
-    ) {
+    if (presentationSpace !== 'scroll' || !resources || !canPresentFrame()) {
       scrollDirty = false
       scrollStableFrameCount = 0
       return
@@ -2980,13 +3022,13 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function scheduleScrollFrame() {
-    if (scrollAnimationFrame !== null || presentationSpace !== 'scroll' || !resources) return
+    if (scrollAnimationFrame !== null || presentationSpace !== 'scroll' || !resources || !canPresentFrame()) return
 
     scrollAnimationFrame = requestAnimationFrame(renderScrollFrame)
   }
 
   function handleScroll(event: Event) {
-    if (presentationSpace !== 'scroll' || !resources) return
+    if (presentationSpace !== 'scroll' || !resources || !canPresentFrame()) return
 
     const target = event.target
     if (!isRelevantScrollTarget(target)) return
@@ -3023,7 +3065,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function handleScrollEnd(event: Event) {
-    if (presentationSpace !== 'scroll' || !resources) return
+    if (presentationSpace !== 'scroll' || !resources || !canPresentFrame()) return
 
     const target = event.target
     if (
@@ -3041,20 +3083,25 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
 
   /** 暂停事件驱动帧但保留 WebGL context、纹理、流场和最后一张稳定画面。 */
   function pauseRenderer() {
+    presentationPaused = true
+    resumeVersion += 1
+    resumePromise = null
     cancelScheduledFrame()
     cancelScrollFrame()
-    finishNativeScrollPresentation()
+    // 原生滚动背板保持接管，恢复时先提交正确像素再揭示 canvas。
     cancelWallpaperTransitionFrame()
     cancelSurfaceTransformFrame()
+    cancelSurfaceUpdateFrames()
     interactionAnimating = false
   }
 
   /** 合并同一可见性事务的多个浏览器事件，只恢复一次稳定帧。 */
   function resumeRenderer() {
+    if (!canPresentFrame()) return Promise.resolve()
     if (resumePromise) return resumePromise
 
     const version = resumeVersion
-    const canResume = () => toValue(options.active) && document.visibilityState !== 'hidden'
+    const canResume = () => canPresentFrame()
     const task = (async () => {
       clearBackgroundDisposeTimer()
       if (!canResume()) return
@@ -3063,6 +3110,7 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
       if (version !== resumeVersion || !canResume()) return
       if (!resources) {
         await initializeRenderer()
+        if (canPresentFrame() && !pagePresentationGeometryReady) scheduleSurfaceStabilityUpdate()
         return
       }
 
@@ -3071,12 +3119,14 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
       const timestamp = performance.now()
       const keepRippleAnimating = hasRippleCapability() ? advanceRipple(timestamp) : false
       if (!keepRippleAnimating) resetInteractionState()
-      renderFrame(timestamp, !hasRippleCapability())
+      if (scrollWallpaperSamplingSuppressed) finishNativeScrollPresentation(timestamp, !hasRippleCapability())
+      else renderFrame(timestamp, !hasRippleCapability())
       if (keepRippleAnimating) {
         interactionAnimating = true
         animationFrame = requestAnimationFrame(renderInteractionFrame)
       }
       scheduleWallpaperTransition()
+      if (!pagePresentationGeometryReady) scheduleSurfaceStabilityUpdate()
     })()
 
     resumePromise = task
@@ -3100,12 +3150,13 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
   }
 
   function handleVisibilityChange() {
-    if (document.visibilityState === 'hidden') {
+    if (document.visibilityState === 'hidden' || !document.hasFocus()) {
       pauseRenderer()
-      scheduleInactiveRendererDisposal(() => document.visibilityState === 'hidden')
+      scheduleInactiveRendererDisposal(() => document.visibilityState === 'hidden' || !document.hasFocus())
       return
     }
 
+    presentationPaused = false
     void resumeRenderer()
   }
 
@@ -3116,8 +3167,15 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
     scheduleInactiveRendererDisposal(() => document.visibilityState === 'visible' && !document.hasFocus())
   }
 
-  function handleWindowResume() {
-    if (document.visibilityState === 'visible') void resumeRenderer()
+  function handleWindowResume(event: Event) {
+    if (document.visibilityState !== 'visible') return
+    if (event.type === 'pageshow' && !document.hasFocus()) {
+      handleWindowBlur()
+      return
+    }
+
+    presentationPaused = false
+    void resumeRenderer()
   }
 
   function handleContextLost(event: Event) {
@@ -3339,21 +3397,8 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
     cancelScrollFrame()
     cancelWallpaperTransitionFrame()
     cancelSurfaceTransformFrame()
+    cancelSurfaceUpdateFrames()
     clearBackgroundDisposeTimer()
-    if (surfaceUpdateFrame !== null) {
-      cancelAnimationFrame(surfaceUpdateFrame)
-      surfaceUpdateFrame = null
-    }
-    if (surfaceStabilityFrame !== null) {
-      cancelAnimationFrame(surfaceStabilityFrame)
-      surfaceStabilityFrame = null
-    }
-    if (presentationResizeTimer !== null) {
-      window.clearTimeout(presentationResizeTimer)
-      presentationResizeTimer = null
-    }
-    presentationResizeCandidate = ''
-    presentationResizeStableSamples = 0
     removeEvents()
     resizeObserver?.disconnect()
     resizeObserver = null
@@ -3983,6 +4028,9 @@ export function useGlassOpticalRenderer(options: UseGlassOpticalRendererOptions)
       resizeRenderer()
       await loadWallpaper(toValue(options.wallpaperUrl), version)
       preparePendingWallpaper()
+      if (version === loadVersion && presentationPaused) {
+        scheduleInactiveRendererDisposal(() => document.visibilityState === 'hidden' || !document.hasFocus())
+      }
     } catch (error) {
       fallbackFromCurrentLoad(version, '玻璃光学渲染器初始化失败，已回退标准材质:', error)
     }
diff --git a/src/styles/__tests__/glassOverlayMaterial.spec.ts b/src/styles/__tests__/glassOverlayMaterial.spec.ts
index d82491ed..8cf92d58 100644
--- a/src/styles/__tests__/glassOverlayMaterial.spec.ts
+++ b/src/styles/__tests__/glassOverlayMaterial.spec.ts
@@ -189,7 +189,7 @@ describe('glass overlay material styles', () => {
 
     expect(styles).toContain('--glass-fixed-shell-backplate-filter: blur(min(var(--glass-blur-raised), 60px))')
     expect(styles).toMatch(
-      /&\[data-glass-appearance='frosted'\]\[data-glass-quality='css'\][\s\S]*?\.layout-wrapper\.layout-fixed-shell-backplate-active \.layout-vertical-nav::before,[\s\S]*?\.layout-wrapper\.layout-fixed-shell-backplate-active \.layout-navbar,[\s\S]*?backdrop-filter:\s*none\s*!important;/,
+      /&\[data-glass-appearance='frosted'\]\[data-glass-quality='css'\]\s+body\[data-theme='glass'\][\s\S]*?\.layout-wrapper\.layout-fixed-shell-backplate-active \.layout-vertical-nav::before,[\s\S]*?\.layout-wrapper\.layout-fixed-shell-backplate-active \.layout-navbar,[\s\S]*?backdrop-filter:\s*none\s*!important;/,
     )
     expect(styles).toMatch(
       /\[data-glass-appearance='frosted'\]\[data-glass-quality='balanced'\]\s*\{[\s\S]*?--glass-fixed-shell-backplate-filter:\s*var\(--glass-native-surface-backdrop-filter\);/,
@@ -226,6 +226,42 @@ describe('glass overlay material styles', () => {
     expect(overlayBackplateRule).toMatch(/transition:\s*clip-path 0\.25s ease-in-out/u)
   })
 
+  it('keeps desktop sidebar refraction isolated from the attached navbar and mobile Drawer', () => {
+    const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
+    const defs = readFileSync(resolve(cwd(), 'src/components/theme/GlassNavbarRefractionDefs.vue'), 'utf8')
+    const layout = readFileSync(resolve(cwd(), 'src/@layouts/components/VerticalNavLayout.vue'), 'utf8')
+
+    expect(styles).toContain('--glass-sidebar-live-filter: var(--glass-fixed-shell-backdrop-filter)')
+    expect(styles).toContain('--glass-sidebar-diffusion-blur: clamp(')
+    expect(styles).toContain('--glass-sidebar-absorption-start: clamp(')
+    expect(styles).toContain('--glass-sidebar-absorption-end: clamp(')
+    expect(styles).toContain('--glass-sidebar-edge-opacity: clamp(')
+    expect(styles).toMatch(
+      /\.layout-vertical-nav\s*\{[\s\S]*?&::before\s*\{[\s\S]*?backdrop-filter:\s*var\(--glass-sidebar-live-filter\);[\s\S]*?background-image:\s*var\(--glass-sheen\)/,
+    )
+    expect(styles).toMatch(
+      /\.layout-wrapper\[data-glass-navigation-refraction='chromium'\]\[data-glass-sidebar-refraction-ready='true'\][\s\S]*?\.layout-vertical-nav:not\(\.overlay-nav\)\s*\{[\s\S]*?url\('#glass-sidebar-live-refraction-high'\)/,
+    )
+    expect(styles).toMatch(
+      /\.layout-wrapper\[data-glass-navigation-refraction='chromium'\]\[data-glass-sidebar-refraction-ready='true'\][\s\S]*?\.layout-vertical-nav:not\(\.overlay-nav\)\s*\{[\s\S]*?url\('#glass-sidebar-live-refraction-balanced'\)/,
+    )
+    expect(styles).toMatch(
+      /&\[data-glass-appearance='frosted'\]\s*\{[\s\S]*?\.layout-vertical-nav::before\s*\{[\s\S]*?var\(--glass-sidebar-absorption-start\)[\s\S]*?var\(--glass-sidebar-absorption-end\)[\s\S]*?var\(--glass-sidebar-edge-opacity\)/,
+    )
+    expect(defs).toContain('id="glass-sidebar-live-refraction-balanced"')
+    expect(defs).toContain('id="glass-sidebar-live-refraction-high"')
+    expect(styles).not.toContain("url('#glass-sidebar-live-refraction-high') var(--glass-fixed-shell-backdrop-filter)")
+    expect(styles).toContain('--glass-sidebar-live-filter: none !important')
+    expect(styles).toContain('--glass-fixed-shell-backplate-filter: var(--glass-sidebar-backdrop-filter)')
+    expect(styles).toContain('--glass-navbar-scrolled-backdrop-filter: none')
+    expect(defs).toContain("readyAttribute: 'data-glass-sidebar-refraction-ready'")
+    expect(layout).toContain("'data-glass-navigation-refraction': navbarRefractionMode")
+    expect(layout).toContain("'data-glass-navbar-refraction': navbarRefractionMode")
+    expect(styles).not.toContain(
+      ".layout-wrapper[data-glass-navigation-refraction='chromium'][data-glass-sidebar-refraction-ready='true']\n  .layout-navbar",
+    )
+  })
+
   it('limits detached navbar geometry to eligible Transparent and Glass horizontal shells', () => {
     const layout = readFileSync(resolve(cwd(), 'src/@layouts/components/VerticalNavLayout.vue'), 'utf8')
 
@@ -392,4 +428,83 @@ describe('glass overlay material styles', () => {
       /\[data-glass-appearance='frosted'\]\[data-page-presentation-motion='active'\]\s+\.mp-page-route\s*\{[\s\S]*?opacity:\s*1;[\s\S]*?transform:\s*translate3d\(0,\s*var\(--mp-page-motion-translate-y,\s*0\),\s*0\);/,
     )
   })
+
+  it('keeps floating clear and tinted navbars on CSS material until Chromium SVG is ready', () => {
+    const styles = readFileSync(resolve(cwd(), 'src/styles/themes/glass.scss'), 'utf8')
+    const baseMaterialStart = styles.lastIndexOf('// 基础材质由单一真实表面承载')
+    const svgEnhancementStart = styles.indexOf('// 只有已确认的 Chromium SVG 能力')
+    const reducedTransparencyStart = styles.lastIndexOf('@media (prefers-reduced-transparency: reduce)')
+    const reducedMotionStart = styles.lastIndexOf('@media (prefers-reduced-motion: reduce)')
+    const tintedNavbarStart = styles.indexOf(
+      "html[data-theme='glass'][data-glass-appearance='tinted']",
+      svgEnhancementStart,
+    )
+    const baseMaterialRule = styles.slice(baseMaterialStart, svgEnhancementStart)
+    const svgFilterRule = styles.slice(svgEnhancementStart, tintedNavbarStart)
+    const reducedTransparencyRule = styles.slice(reducedTransparencyStart, reducedMotionStart)
+    const reducedMotionRule = styles.slice(reducedMotionStart)
+
+    expect(baseMaterialStart).toBeGreaterThanOrEqual(0)
+    expect(svgEnhancementStart).toBeGreaterThan(baseMaterialStart)
+    expect(baseMaterialRule).toContain("[data-glass-appearance='clear'], [data-glass-appearance='tinted']")
+    expect(baseMaterialRule).toContain('--glass-navbar-opacity: clamp(')
+    expect(baseMaterialRule).toContain(
+      '--glass-navbar-reflection-ratio: clamp(0, calc(var(--glass-reflection, 0.38) * 2.6316), 1.7)',
+    )
+    expect(baseMaterialRule).toContain(
+      '--glass-navbar-sheen-opacity: clamp(0, calc(0.18 * var(--glass-navbar-reflection-ratio)), 0.3)',
+    )
+    expect(baseMaterialRule).toContain(
+      '--glass-navbar-rim-opacity: clamp(0, calc(0.24 * var(--glass-navbar-reflection-ratio)), 0.4)',
+    )
+    expect(baseMaterialRule).toContain(
+      '--glass-navbar-top-opacity: clamp(0, calc(0.4 * var(--glass-navbar-reflection-ratio)), 0.65)',
+    )
+    expect(baseMaterialRule).toContain('var(--glass-background-visibility, 0.58)')
+    expect(baseMaterialRule).toContain('var(--glass-surface-density, 0.62)')
+    expect(baseMaterialRule).toContain('--glass-navbar-blur: clamp(')
+    expect(baseMaterialRule).toContain('0.62px + var(--glass-surface-density, 0.62) * 0.8px')
+    expect(baseMaterialRule).toContain('- var(--glass-background-visibility, 0.58) * 0.25px')
+    expect(baseMaterialRule).toContain('--glass-navbar-brightness: var(--glass-transmission-brightness, 1)')
+    expect(baseMaterialRule).toContain('--glass-navbar-saturation: clamp(')
+    expect(baseMaterialRule).toContain('--glass-navbar-sheen: linear-gradient(')
+    expect(baseMaterialRule).toContain('var(--glass-navbar-reflection-ratio)')
+    expect(baseMaterialRule).toContain('--glass-navbar-scrim: linear-gradient(')
+    expect(baseMaterialRule).toContain(
+      '--glass-navbar-tint: clamp(0, calc(var(--glass-tint-density, 0.65) * 0.12), 0.18)',
+    )
+    expect(baseMaterialRule).toContain('--glass-navbar-live-filter: blur(var(--glass-navbar-blur))')
+    expect(baseMaterialRule).toContain('brightness(var(--glass-navbar-brightness))')
+    expect(baseMaterialRule).toContain('background: var(--glass-navbar-sheen), var(--glass-navbar-scrim) !important')
+    expect(baseMaterialRule).toContain('box-shadow: var(--glass-navbar-shadow) !important')
+    expect(baseMaterialRule).toContain('border: 0 !important')
+    expect(baseMaterialRule).toContain('inset-block-start: var(--shell-floating-navbar-inset) !important')
+    expect(baseMaterialRule).toContain('inset-inline: var(--shell-floating-navbar-inset) !important')
+    expect(baseMaterialRule).not.toContain('data-glass-navbar-refraction-ready')
+    expect(baseMaterialRule).not.toContain('&::before')
+    expect(baseMaterialRule).not.toContain('&::after')
+    expect(baseMaterialRule).not.toContain("url('#glass-navbar-live-refraction-")
+    expect(svgFilterRule).toContain("data-glass-navbar-refraction-ready='true'")
+    expect(svgFilterRule).toContain("url('#glass-navbar-live-refraction-balanced')")
+    expect(svgFilterRule).toContain("url('#glass-navbar-live-refraction-high')")
+    expect(svgFilterRule).toContain('blur(var(--glass-navbar-blur))')
+    expect(svgFilterRule).toContain('saturate(var(--glass-navbar-saturation))')
+    expect(svgFilterRule).toContain('brightness(var(--glass-navbar-brightness))')
+    expect(svgFilterRule).not.toContain('background:')
+    expect(svgFilterRule).not.toContain('box-shadow:')
+    expect(svgFilterRule).not.toContain('border:')
+    expect(tintedNavbarStart).toBeGreaterThan(svgEnhancementStart)
+    expect(styles.slice(tintedNavbarStart, reducedTransparencyStart)).toContain('var(--glass-material-accent-rgb)')
+    expect(styles.slice(tintedNavbarStart, reducedTransparencyStart)).toContain('var(--glass-navbar-tint)')
+    expect(reducedTransparencyRule).toContain('--glass-navbar-live-filter: none !important')
+    expect(reducedTransparencyRule).toContain('-webkit-backdrop-filter: none !important')
+    expect(reducedTransparencyRule).toContain('backdrop-filter: none !important')
+    expect(reducedTransparencyRule).toContain('background: rgb(11, 19, 34) !important')
+    expect(reducedTransparencyRule).toContain('background-image: none !important')
+    expect(reducedMotionRule).toContain('.layout-navbar')
+    expect(reducedMotionRule).toContain('.navbar-content-container')
+    expect(reducedMotionRule).toContain('transition: none !important')
+    expect(reducedMotionRule).not.toContain('inset-block-start: 0 !important')
+    expect(reducedMotionRule).not.toContain('inset-inline: 0 !important')
+  })
 })
diff --git a/src/styles/themes/_glass-v3.scss b/src/styles/themes/_glass-v3.scss
new file mode 100644
index 00000000..7a512e32
--- /dev/null
+++ b/src/styles/themes/_glass-v3.scss
@@ -0,0 +1,309 @@
+@use '@configured-variables' as variables;
+
+// V3 表面按信息角色统一材料；只改变承载层，不改变图表、业务数据与交互命中区。
+@mixin surfaces {
+  html[data-theme='glass'] {
+    --glass-v3-ink: 23, 27, 32;
+    --glass-v3-fill: clamp(0.1, calc(0.08 + var(--glass-surface-density, 0.62) * 0.12), 0.22);
+    --glass-v3-rim: clamp(0.12, calc(0.16 + var(--glass-reflection, 0.38) * 0.28), 0.4);
+    --glass-v3-sheen: clamp(0.04, calc(0.035 + var(--glass-reflection, 0.38) * 0.18), 0.2);
+    --glass-v3-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
+    --glass-v3-card-tint: 0;
+    --glass-v3-navigation-blur: clamp(
+      0.65px,
+      calc(0.9px + var(--glass-surface-density, 0.62) * 0.6px - var(--glass-background-visibility, 0.58) * 0.25px),
+      1.6px
+    );
+    --glass-v3-navigation-filter: blur(var(--glass-v3-navigation-blur)) saturate(118%)
+      brightness(var(--glass-transmission-brightness, 1));
+    --glass-v3-card-background:
+      linear-gradient(128deg, rgba(255, 255, 255, var(--glass-v3-sheen)), transparent 38%),
+      linear-gradient(
+        135deg,
+        rgba(var(--glass-material-accent-rgb, var(--v-theme-primary)), var(--glass-v3-card-tint)),
+        rgba(var(--glass-material-accent-rgb, var(--v-theme-primary)), calc(var(--glass-v3-card-tint) * 0.35))
+      ),
+      linear-gradient(
+        180deg,
+        rgba(var(--glass-v3-ink), var(--glass-v3-fill)),
+        rgba(var(--glass-v3-ink), calc(var(--glass-v3-fill) + 0.055))
+      );
+
+    &[data-glass-appearance='tinted'] {
+      --glass-v3-card-tint: clamp(0.025, calc(var(--glass-tint-density, 0.65) * 0.13), 0.15);
+    }
+
+    &[data-glass-appearance='frosted'] {
+      --glass-v3-ink: 243, 246, 249;
+      --glass-v3-fill: clamp(0.08, calc(0.065 + var(--glass-surface-density, 0.86) * 0.11), 0.21);
+      --glass-v3-sheen: clamp(0.08, calc(0.07 + var(--glass-reflection, 0.35) * 0.22), 0.24);
+      --glass-v3-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
+    }
+
+    body[data-theme='glass'] {
+      // 已有业务类是语义材料的适配入口；海报整图、内部图表和菜单不承载第二层卡片材料。
+      .layout-page-content
+        .v-card:not(
+          .v-card .v-card,
+          .no-blur,
+          .media-card,
+          .playing-card,
+          .bg-primary,
+          .bg-success,
+          .bg-info,
+          .bg-warning,
+          .bg-error
+        ),
+      .layout-page-content :is(.site-card, .plugin-card, .downloading-card, .subscribe-card),
+      .dashboard-grid-content-measure > .v-card,
+      .dashboard-grid-content-measure > :first-child > .v-card {
+        border-radius: var(--app-theme-surface-radius, 20px) !important;
+        background: var(--glass-v3-card-background) !important;
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, var(--glass-v3-rim)),
+          inset 1px 0 0 rgba(255, 255, 255, calc(var(--glass-v3-rim) * 0.6)),
+          inset -1px -2px 2px rgba(0, 0, 0, 0.16),
+          inset 0 0 0 1px rgba(255, 255, 255, calc(var(--glass-v3-rim) * 0.25)),
+          var(--glass-v3-shadow) !important;
+      }
+
+      .layout-page-content
+        .v-card:not(
+          .v-card .v-card,
+          .no-blur,
+          .media-card,
+          .playing-card,
+          .bg-primary,
+          .bg-success,
+          .bg-info,
+          .bg-warning,
+          .bg-error
+        ):focus-within,
+      .layout-page-content :is(.site-card, .plugin-card, .downloading-card, .subscribe-card):focus-within,
+      .dashboard-grid-content-measure > .v-card:focus-within {
+        outline: 2px solid rgba(var(--v-theme-primary), 0.65);
+        outline-offset: 2px;
+      }
+
+      .dashboard-grid-content-measure > .v-card :is(h4, h5, h6),
+      .site-card .font-semibold,
+      .downloading-card__metrics strong {
+        font-variant-numeric: tabular-nums;
+      }
+
+      // 列表和图表内部使用平面分组，不叠加同一强度的高光、边框或阴影。
+      .dashboard-grid-content-measure > .v-card .v-list {
+        background: transparent !important;
+        box-shadow: none !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+      }
+
+      .layout-page-content .site-card > .v-sheet {
+        background: rgba(var(--glass-v3-ink), 0.1) !important;
+        background-image: none !important;
+        box-shadow: none !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+        border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
+      }
+
+      .layout-page-content .site-card .border-t .text-medium-emphasis {
+        // 上传/下载是核心读数，信息权重高于网址和能力标识。
+        color: rgb(var(--v-theme-on-surface)) !important;
+        font-weight: 600;
+        font-variant-numeric: tabular-nums;
+      }
+
+      .layout-page-content .site-card h3,
+      .layout-page-content .plugin-card__banner .v-card-title {
+        font-weight: 650;
+        letter-spacing: 0;
+      }
+
+      .layout-page-content .plugin-card__banner {
+        --plugin-card-banner-scrim: linear-gradient(rgba(23, 27, 32, 0.035), rgba(23, 27, 32, 0.1));
+        --plugin-card-banner-tint: linear-gradient(
+          125deg,
+          rgba(var(--plugin-card-effective-accent-rgb), 0.16),
+          rgba(var(--plugin-card-effective-accent-rgb), 0.045) 70%
+        );
+
+        border-block-end: 1px solid rgba(255, 255, 255, 0.12);
+      }
+
+      .layout-page-content .plugin-card__banner .text-shadow {
+        text-shadow: none;
+      }
+
+      .layout-page-content .plugin-card__plugin-icon {
+        border-radius: var(--app-control-radius, 14px);
+        box-shadow:
+          inset 0 1px 0 rgba(255, 255, 255, 0.25),
+          0 5px 12px rgba(0, 0, 0, 0.12);
+      }
+
+      .layout-page-content .media-card > .v-card-text {
+        // 电影画面仍可检查，文字所在的下半区才承担阅读吸收。
+        background: linear-gradient(
+          180deg,
+          rgba(23, 27, 32, 0.04),
+          rgba(23, 27, 32, 0.64) 52%,
+          rgba(23, 27, 32, 0.92)
+        ) !important;
+      }
+    }
+  }
+
+  // 固定导航保留布局占位，玻璃实体在占位内留出空气，采样几何仍由真实元素提供。
+  html[data-theme='glass']
+    body[data-theme='glass']
+    .layout-wrapper[data-shell-mode='desktop']:not(
+      .layout-horizontal-nav-active,
+      .layout-window-controls-overlay-shell
+    ) {
+    --glass-v3-nav-reserved-width: #{variables.$layout-vertical-nav-width};
+
+    &.layout-vertical-nav-collapsed {
+      --glass-v3-nav-reserved-width: #{variables.$layout-vertical-nav-collapsed-width};
+    }
+
+    .layout-vertical-nav {
+      border-radius: 16px;
+      box-shadow: var(--glass-v3-shadow) !important;
+      block-size: calc(100% - 16px);
+      inline-size: calc(var(--glass-v3-nav-reserved-width) - 8px) !important;
+      inset-block-start: 8px;
+      inset-inline-start: 8px;
+      overflow: clip;
+    }
+
+    &.layout-vertical-nav-collapsed .layout-vertical-nav.hovered {
+      inline-size: calc(#{variables.$layout-vertical-nav-width} - 8px) !important;
+    }
+
+    .layout-navbar {
+      border-radius: 16px !important;
+      inline-size: calc(100% - var(--glass-v3-nav-reserved-width) - 16px) !important;
+      inset-block-start: 8px !important;
+      inset-inline-start: calc(var(--glass-v3-nav-reserved-width) + 8px) !important;
+      overflow: clip;
+    }
+  }
+
+  @media (hover: hover) {
+    html[data-theme='glass'] body[data-theme='glass'] {
+      .layout-page-content
+        .v-card:not(
+          .v-card .v-card,
+          .no-blur,
+          .media-card,
+          .playing-card,
+          .bg-primary,
+          .bg-success,
+          .bg-info,
+          .bg-warning,
+          .bg-error
+        ):hover,
+      .layout-page-content :is(.site-card, .plugin-card, .downloading-card, .subscribe-card):hover,
+      .dashboard-grid-content-measure > .v-card:hover,
+      .dashboard-grid-content-measure > :first-child > .v-card:hover {
+        --glass-v3-rim: clamp(0.2, calc(0.22 + var(--glass-reflection, 0.38) * 0.36), 0.54);
+        --glass-v3-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
+      }
+    }
+  }
+
+  // 固定导航与已认可水平透镜使用同族材料；真实折射留在单个背景承载层。
+  html[data-theme='glass']:is([data-glass-appearance='clear'], [data-glass-appearance='tinted'])
+    body[data-theme='glass']
+    .layout-wrapper[data-shell-mode='desktop']:not(.layout-horizontal-nav-active) {
+    .layout-navbar {
+      --glass-navbar-live-filter: var(--glass-v3-navigation-filter);
+
+      transform: none !important;
+      background: var(--glass-v3-card-background) !important;
+      backdrop-filter: var(--glass-navbar-live-filter) !important;
+      -webkit-backdrop-filter: var(--glass-navbar-live-filter) !important;
+      box-shadow:
+        inset 0 -1px 0 rgba(255, 255, 255, var(--glass-v3-rim)),
+        0 8px 24px rgba(0, 0, 0, 0.1) !important;
+    }
+
+    .layout-vertical-nav::before {
+      border-inline-end: 0;
+      background: var(--glass-v3-card-background) !important;
+      box-shadow:
+        inset -1px 0 0 rgba(255, 255, 255, var(--glass-v3-rim)),
+        inset -3px 0 4px rgba(255, 255, 255, 0.035),
+        8px 0 24px rgba(0, 0, 0, 0.08) !important;
+    }
+  }
+
+  @each $quality, $filter in ('balanced': 'balanced', 'high': 'high') {
+    html[data-theme='glass'][data-glass-quality='#{$quality}']:is(
+        [data-glass-appearance='clear'],
+        [data-glass-appearance='tinted']
+      )
+      body[data-theme='glass']
+      .layout-wrapper[data-shell-mode='desktop'][data-glass-navbar-refraction='chromium'][data-glass-navbar-refraction-ready='true']:not(
+        .layout-horizontal-nav-active
+      )
+      .layout-navbar {
+      --glass-navbar-live-filter: url('#glass-navbar-live-refraction-#{$filter}') var(--glass-v3-navigation-filter);
+    }
+  }
+
+  // 稳定背板已承担背景吸收，侧栏用明亮散射层呈现厚度，避免再覆盖一层深色渐变。
+  html[data-theme='glass'][data-glass-appearance='frosted'] body[data-theme='glass'] {
+    .layout-wrapper[data-shell-mode='desktop'] .layout-vertical-nav::before {
+      background: var(--glass-v3-card-background) !important;
+      box-shadow:
+        inset -1px 0 0 rgba(255, 255, 255, 0.32),
+        8px 0 24px rgba(0, 0, 0, 0.07) !important;
+    }
+  }
+
+  // 圆角在脱离边缘的首帧采用最终值，真实inset或transform继续使用同一150ms运动节奏。
+  html[data-theme='glass']:is(
+      [data-glass-appearance='clear'],
+      [data-glass-appearance='tinted'],
+      [data-glass-appearance='frosted']
+    )
+    body[data-theme='glass']
+    .layout-wrapper.layout-navbar-floating-eligible {
+    .layout-navbar,
+    .navbar-content-container {
+      transition-property:
+        transform, background-color, box-shadow, opacity, inset-block-start, inset-inline-start, inset-inline-end !important;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html[data-theme='glass'] body[data-theme='glass'] .layout-wrapper.layout-navbar-floating-eligible {
+      .layout-navbar,
+      .navbar-content-container {
+        transition-duration: 0s !important;
+      }
+    }
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    html[data-theme='glass'] {
+      --glass-v3-navigation-filter: none !important;
+      --glass-v3-card-background: linear-gradient(rgb(31, 34, 39), rgb(31, 34, 39)) !important;
+    }
+
+    html[data-theme='glass'] body[data-theme='glass'] {
+      .layout-wrapper[data-shell-mode='desktop'] .layout-navbar,
+      .layout-wrapper[data-shell-mode='desktop'] .layout-vertical-nav::before,
+      .layout-page-content :is(.site-card, .plugin-card, .downloading-card, .subscribe-card),
+      .dashboard-grid-content-measure > .v-card,
+      .dashboard-grid-content-measure > :first-child > .v-card {
+        background: rgb(31, 34, 39) !important;
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+      }
+    }
+  }
+}
diff --git a/src/styles/themes/glass.scss b/src/styles/themes/glass.scss
index ad79b8d4..f1470fa3 100644
--- a/src/styles/themes/glass.scss
+++ b/src/styles/themes/glass.scss
@@ -2,6 +2,7 @@
 /* stylelint-disable scss/at-rule-no-unknown */
 
 @use '@configured-variables' as variables;
+@use 'glass-v3';
 
 // 材质只覆盖统一表面 token；质量档只替换光学层，不改变业务组件契约。
 html[data-theme='glass'] {
@@ -53,6 +54,8 @@ html[data-theme='glass'] {
   --glass-control-prominent-backdrop-filter: none;
   --glass-navbar-backdrop-filter: var(--glass-raised-backdrop-filter);
   --glass-navbar-scrolled-backdrop-filter: blur(3px) saturate(115%);
+  --glass-navbar-live-filter: none;
+  --glass-sidebar-live-filter: var(--glass-fixed-shell-backdrop-filter);
   --glass-overlay-surface: rgba(11, 19, 34, calc(0.1 + var(--glass-surface-density, 0.62) * 0.22));
   --glass-overlay-blur: var(--glass-overlay-clarity-blur, 6px);
   --glass-overlay-saturate: 115%;
@@ -227,6 +230,35 @@ html[data-theme='glass'] {
       brightness(var(--glass-transmission-brightness));
     --glass-fixed-shell-backplate-filter: blur(min(var(--glass-blur-raised), 60px)) saturate(var(--glass-saturate))
       brightness(var(--glass-transmission-brightness));
+    // 固定大表面用受控扩散与吸收表达厚度，避免直接沿用卡片的高频玻璃参数。
+    --glass-sidebar-diffusion-blur: clamp(
+      14px,
+      calc(6px + var(--glass-surface-density, 0.86) * 16px + (1 - var(--glass-background-visibility, 0.58)) * 6px),
+      28px
+    );
+    --glass-sidebar-diffusion-saturation: clamp(
+      126%,
+      calc(112% + var(--glass-background-visibility, 0.58) * 30% + var(--glass-surface-density, 0.86) * 8%),
+      154%
+    );
+    --glass-sidebar-absorption-start: clamp(
+      0.18,
+      calc(0.08 + var(--glass-surface-density, 0.86) * 0.2 + (1 - var(--glass-background-visibility, 0.58)) * 0.12),
+      0.42
+    );
+    --glass-sidebar-absorption-end: clamp(
+      0.28,
+      calc(var(--glass-sidebar-absorption-start) + 0.12 + (1 - var(--glass-background-visibility, 0.58)) * 0.08),
+      0.54
+    );
+    --glass-sidebar-edge-opacity: clamp(
+      0.12,
+      calc(0.08 + var(--glass-reflection, 0.5) * 0.22 + (1 - var(--glass-background-visibility, 0.58)) * 0.06),
+      0.4
+    );
+    --glass-sidebar-backdrop-filter: blur(var(--glass-sidebar-diffusion-blur))
+      saturate(var(--glass-sidebar-diffusion-saturation)) brightness(var(--glass-transmission-brightness));
+    --glass-sidebar-live-filter: var(--glass-sidebar-backdrop-filter);
     --glass-control-prominent-backdrop-filter: blur(24px) saturate(150%);
     --glass-overlay-surface: rgba(var(--v-theme-background), calc(0.24 + var(--glass-surface-density, 0.86) * 0.12));
     --glass-overlay-blur: min(var(--glass-blur-raised), 36px);
@@ -489,8 +521,8 @@ html[data-theme='glass'] {
       position: absolute;
       z-index: -1;
       border-inline-end: 1px solid var(--glass-border-raised);
-      -webkit-backdrop-filter: var(--glass-fixed-shell-backdrop-filter);
-      backdrop-filter: var(--glass-fixed-shell-backdrop-filter);
+      -webkit-backdrop-filter: var(--glass-sidebar-live-filter);
+      backdrop-filter: var(--glass-sidebar-live-filter);
       background-color: var(--glass-surface-raised);
       background-image: var(--glass-sheen);
       box-shadow: var(--glass-shadow-raised);
@@ -500,6 +532,59 @@ html[data-theme='glass'] {
     }
   }
 
+  &[data-glass-appearance='frosted'] {
+    .layout-wrapper[data-shell-mode='desktop'] {
+      --glass-navbar-backdrop-filter: var(--glass-sidebar-backdrop-filter);
+    }
+
+    // Frosted 的大表面先扩散再吸收背景，边缘高光只保留在真实 DOM 背板的外轮廓。
+    .layout-wrapper[data-shell-mode='desktop'] .layout-vertical-nav::before {
+      border-inline-end: 0;
+      background-color: transparent;
+      background-image:
+        var(--glass-sheen),
+        linear-gradient(
+          90deg,
+          rgba(7, 14, 25, var(--glass-sidebar-absorption-start)),
+          rgba(7, 14, 25, var(--glass-sidebar-absorption-end))
+        );
+      box-shadow:
+        inset -1px 0 0 rgba(255, 255, 255, var(--glass-sidebar-edge-opacity)),
+        0 8px 24px rgba(3, 7, 18, 0.12);
+    }
+
+    .layout-wrapper[data-shell-mode='desktop'] > .glass-fixed-shell-backplate--main {
+      // 固定顶栏与侧栏共用同一 L 形稳定背板，扩散参数必须作用于真实承载层。
+      --glass-fixed-shell-backplate-filter: var(--glass-sidebar-backdrop-filter);
+    }
+
+    .layout-wrapper[data-shell-mode='desktop'].layout-fixed-shell-backplate-active {
+      --glass-navbar-scrolled-backdrop-filter: none;
+
+      .layout-navbar,
+      .layout-vertical-nav::before {
+        -webkit-backdrop-filter: none !important;
+        backdrop-filter: none !important;
+      }
+    }
+
+    .layout-wrapper[data-shell-mode='desktop']:not(.layout-fixed-shell-backplate-active) .layout-vertical-nav::before,
+    .layout-wrapper[data-shell-mode='desktop']:not(.layout-fixed-shell-backplate-active) .layout-navbar {
+      -webkit-backdrop-filter: var(--glass-sidebar-backdrop-filter) !important;
+      backdrop-filter: var(--glass-sidebar-backdrop-filter) !important;
+    }
+
+    .layout-wrapper[data-shell-mode='desktop']:not(.layout-fixed-shell-backplate-active) .layout-navbar {
+      // 原生回退没有壁纸背板的吸收层，独立保证繁忙页面下的文字对比。
+      background:
+        var(--glass-sheen),
+        linear-gradient(
+          rgba(7, 14, 25, var(--glass-sidebar-absorption-start)),
+          rgba(7, 14, 25, var(--glass-sidebar-absorption-end))
+        ) !important;
+    }
+  }
+
   // Chromium 磨砂 fixed 层直接渲染稳定壁纸背板，固定功能层不得读取随页面重绘的 document backdrop。
   &[data-glass-appearance='frosted'][data-glass-quality='css'] body[data-theme='glass'] {
     .layout-wrapper.layout-fixed-shell-backplate-active .layout-vertical-nav::before,
@@ -1651,3 +1736,199 @@ html[data-theme='glass'] body[data-theme='glass'] .native-login-field:focus-with
     transition: none;
   }
 }
+
+// 浮动顶栏使用同一布局坐标系，只插值真实 inset，避免切换 transform 采样空间。
+html[data-theme='glass']:is([data-glass-appearance='clear'], [data-glass-appearance='tinted'])
+  body[data-theme='glass']
+  .layout-wrapper.layout-navbar-floating-eligible
+  .layout-navbar {
+  inline-size: auto !important;
+  inset-block-start: 0 !important;
+  inset-inline: 0 !important;
+  transform: none !important;
+  transition:
+    background-color var(--shell-floating-navbar-motion-duration) var(--shell-floating-navbar-motion-easing),
+    border-color var(--shell-floating-navbar-motion-duration) var(--shell-floating-navbar-motion-easing),
+    border-radius var(--shell-floating-navbar-motion-duration) var(--shell-floating-navbar-motion-easing),
+    box-shadow var(--shell-floating-navbar-motion-duration) var(--shell-floating-navbar-motion-easing),
+    inset-block-start var(--shell-floating-navbar-motion-duration) var(--shell-floating-navbar-motion-easing),
+    inset-inline-end var(--shell-floating-navbar-motion-duration) var(--shell-floating-navbar-motion-easing),
+    inset-inline-start var(--shell-floating-navbar-motion-duration) var(--shell-floating-navbar-motion-easing) !important;
+
+  .navbar-content-container {
+    position: relative;
+    z-index: 1;
+    // 外壳内收时，导航内容仍按视口中心对齐，避免控件位置跟随采样面的宽度变化。
+    inline-size: min(100vw, variables.$layout-boxed-content-width);
+    inset-inline-start: 50%;
+    transform: translateX(-50%) !important;
+  }
+}
+
+// 基础材质由单一真实表面承载；柔和迎光表达厚度，不叠加父子两层硬高光。
+html[data-theme='glass']:is([data-glass-appearance='clear'], [data-glass-appearance='tinted'])
+  body[data-theme='glass']
+  .layout-wrapper.layout-navbar-floating-eligible.layout-navbar-away-from-top
+  .layout-navbar {
+  // 共享材质响应只改变浮动表面的光学参数，不把内容层一起变暗或变透明。
+  // 0.38 是 Natural clear/high 的反射参考值，三个亮边在该点保持默认材质能量。
+  --glass-navbar-reflection-ratio: clamp(0, calc(var(--glass-reflection, 0.38) * 2.6316), 1.7);
+  --glass-navbar-sheen-opacity: clamp(0, calc(0.18 * var(--glass-navbar-reflection-ratio)), 0.3);
+  --glass-navbar-rim-opacity: clamp(0, calc(0.24 * var(--glass-navbar-reflection-ratio)), 0.4);
+  --glass-navbar-top-opacity: clamp(0, calc(0.4 * var(--glass-navbar-reflection-ratio)), 0.65);
+  --glass-navbar-opacity: clamp(
+    0,
+    calc(0.02 + var(--glass-surface-density, 0.62) * 0.05 + (1 - var(--glass-background-visibility, 0.58)) * 0.02),
+    0.2
+  );
+  --glass-navbar-scrim-end: clamp(
+    0,
+    calc(0.045 + var(--glass-surface-density, 0.62) * 0.1 + (1 - var(--glass-background-visibility, 0.58)) * 0.05),
+    0.28
+  );
+  --glass-navbar-blur: clamp(
+    0.35px,
+    calc(0.62px + var(--glass-surface-density, 0.62) * 0.8px - var(--glass-background-visibility, 0.58) * 0.25px),
+    1.4px
+  );
+  --glass-navbar-brightness: var(--glass-transmission-brightness, 1);
+  --glass-navbar-saturation: clamp(
+    110%,
+    calc(110% + var(--glass-background-visibility, 0.58) * 12% + var(--glass-tint-density, 0.65) * 4%),
+    124%
+  );
+  --glass-navbar-sheen: linear-gradient(
+    145deg,
+    rgba(255, 255, 255, var(--glass-navbar-sheen-opacity)),
+    transparent 38%
+  );
+  --glass-navbar-rim: rgba(255, 255, 255, var(--glass-navbar-rim-opacity));
+  --glass-navbar-scrim: linear-gradient(
+    rgba(7, 14, 25, var(--glass-navbar-opacity)),
+    rgba(7, 14, 25, var(--glass-navbar-scrim-end))
+  );
+  --glass-navbar-tint: clamp(0, calc(var(--glass-tint-density, 0.65) * 0.12), 0.18);
+  --glass-navbar-shadow:
+    inset 0 0 0 1px var(--glass-navbar-rim), inset 0 1px 2px rgba(255, 255, 255, var(--glass-navbar-top-opacity)),
+    inset 0 -1px 2px rgba(4, 10, 20, calc(0.1 + var(--glass-surface-density, 0.62) * 0.12)),
+    0 12px 32px
+      rgba(3, 7, 18, calc(0.08 + var(--glass-reflection, 0.5) * 0.1 + var(--glass-surface-density, 0.62) * 0.08));
+  --glass-navbar-live-filter: blur(var(--glass-navbar-blur)) saturate(var(--glass-navbar-saturation))
+    brightness(var(--glass-navbar-brightness));
+
+  border: 0 !important;
+  -webkit-backdrop-filter: var(--glass-navbar-live-filter) !important;
+  backdrop-filter: var(--glass-navbar-live-filter) !important;
+  background: var(--glass-navbar-sheen), var(--glass-navbar-scrim) !important;
+  box-shadow: var(--glass-navbar-shadow) !important;
+  inset-block-start: var(--shell-floating-navbar-inset) !important;
+  inset-inline: var(--shell-floating-navbar-inset) !important;
+}
+
+// 只有已确认的 Chromium SVG 能力才替换基础 CSS 滤镜；未就绪时保持同族材质与真实几何。
+html[data-theme='glass'][data-glass-quality='high']:is(
+    [data-glass-appearance='clear'],
+    [data-glass-appearance='tinted']
+  )
+  body[data-theme='glass']
+  .layout-wrapper[data-glass-navbar-refraction='chromium'][data-glass-navbar-refraction-ready='true'].layout-navbar-floating-eligible.layout-navbar-away-from-top
+  .layout-navbar {
+  --glass-navbar-live-filter: url('#glass-navbar-live-refraction-high') blur(var(--glass-navbar-blur))
+    saturate(var(--glass-navbar-saturation)) brightness(var(--glass-navbar-brightness));
+}
+
+html[data-theme='glass'][data-glass-quality='balanced']:is(
+    [data-glass-appearance='clear'],
+    [data-glass-appearance='tinted']
+  )
+  body[data-theme='glass']
+  .layout-wrapper[data-glass-navbar-refraction='chromium'][data-glass-navbar-refraction-ready='true'].layout-navbar-floating-eligible.layout-navbar-away-from-top
+  .layout-navbar {
+  --glass-navbar-live-filter: url('#glass-navbar-live-refraction-balanced') blur(var(--glass-navbar-blur))
+    saturate(var(--glass-navbar-saturation)) brightness(var(--glass-navbar-brightness));
+}
+
+// 常驻侧栏保持附着几何，只有同源位移图解码完成后才接管其单独的背景表面。
+html[data-theme='glass'][data-glass-quality='high']:is(
+    [data-glass-appearance='clear'],
+    [data-glass-appearance='tinted']
+  )
+  body[data-theme='glass']
+  .layout-wrapper[data-glass-navigation-refraction='chromium'][data-glass-sidebar-refraction-ready='true']
+  .layout-vertical-nav:not(.overlay-nav) {
+  --glass-sidebar-live-filter: url('#glass-sidebar-live-refraction-high') blur(1px) saturate(115%)
+    brightness(var(--glass-transmission-brightness));
+
+  -webkit-backdrop-filter: var(--glass-sidebar-live-filter) !important;
+  backdrop-filter: var(--glass-sidebar-live-filter) !important;
+
+  &::before {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+}
+
+html[data-theme='glass'][data-glass-quality='balanced']:is(
+    [data-glass-appearance='clear'],
+    [data-glass-appearance='tinted']
+  )
+  body[data-theme='glass']
+  .layout-wrapper[data-glass-navigation-refraction='chromium'][data-glass-sidebar-refraction-ready='true']
+  .layout-vertical-nav:not(.overlay-nav) {
+  --glass-sidebar-live-filter: url('#glass-sidebar-live-refraction-balanced') blur(1px) saturate(115%)
+    brightness(var(--glass-transmission-brightness));
+
+  -webkit-backdrop-filter: var(--glass-sidebar-live-filter) !important;
+  backdrop-filter: var(--glass-sidebar-live-filter) !important;
+
+  &::before {
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+  }
+}
+
+html[data-theme='glass'][data-glass-appearance='tinted']
+  body[data-theme='glass']
+  .layout-wrapper.layout-navbar-floating-eligible.layout-navbar-away-from-top
+  .layout-navbar {
+  background:
+    var(--glass-navbar-sheen),
+    linear-gradient(
+      rgba(var(--glass-material-accent-rgb), var(--glass-navbar-tint)),
+      rgba(var(--glass-material-accent-rgb), calc(var(--glass-navbar-tint) * 0.45))
+    ),
+    var(--glass-navbar-scrim) !important;
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  html[data-theme='glass'] body[data-theme='glass'] .layout-vertical-nav {
+    --glass-sidebar-live-filter: none !important;
+  }
+
+  html[data-theme='glass']:is([data-glass-appearance='clear'], [data-glass-appearance='tinted'])
+    body[data-theme='glass']
+    .layout-wrapper.layout-navbar-floating-eligible.layout-navbar-away-from-top
+    .layout-navbar {
+    --glass-navbar-live-filter: none !important;
+
+    -webkit-backdrop-filter: none !important;
+    backdrop-filter: none !important;
+    background: rgb(11, 19, 34) !important;
+    background-image: none !important;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html[data-theme='glass']:is([data-glass-appearance='clear'], [data-glass-appearance='tinted'])
+    body[data-theme='glass']
+    .layout-wrapper.layout-navbar-floating-eligible
+    .layout-navbar,
+  html[data-theme='glass']:is([data-glass-appearance='clear'], [data-glass-appearance='tinted'])
+    body[data-theme='glass']
+    .layout-wrapper.layout-navbar-floating-eligible
+    .navbar-content-container {
+    transition: none !important;
+  }
+}
+
+@include glass-v3.surfaces;
diff --git a/src/utils/__tests__/glassNavbarRefraction.spec.ts b/src/utils/__tests__/glassNavbarRefraction.spec.ts
new file mode 100644
index 00000000..1b8b870d
--- /dev/null
+++ b/src/utils/__tests__/glassNavbarRefraction.spec.ts
@@ -0,0 +1,194 @@
+import { describe, expect, it } from 'vitest'
+import {
+  createGlassNavbarDisplacementField,
+  getGlassNavbarOpticalResponse,
+  supportsGlassNavbarLiveRefraction,
+} from '@/utils/glassNavbarRefraction'
+
+describe('getGlassNavbarOpticalResponse', () => {
+  it('prioritizes default reading while retaining the horizontal lens', () => {
+    const optics = getGlassNavbarOpticalResponse({ deformation: 48, translation: 48 })
+    expect(optics.translationPx).toBeCloseTo(1.880064)
+    expect(optics.verticalRatio * 24).toBeLessThan(0.02)
+    expect(optics.horizontalRatio * 24).toBeGreaterThan(2.9)
+  })
+  it.each([
+    [0, 0],
+    [50, 2.125],
+    [80, 8.704],
+    [99, 16.495083],
+    [100, 17],
+  ])('maps translation %s to the readable curve at %s pixels', (translation, pixels) => {
+    expect(getGlassNavbarOpticalResponse({ deformation: 48, translation }).translationPx).toBeCloseTo(pixels)
+  })
+  it('keeps the midpoint deformation equivalent to the original 12.5% input', () => {
+    const parameters = Object.freeze({ deformation: 50, translation: 50 })
+    const optics = getGlassNavbarOpticalResponse(parameters)
+    expect(optics.horizontalRatio).toBeCloseTo(0.1386328125)
+    expect(optics.verticalRatio).toBeCloseTo(0.000859375)
+    expect(parameters).toEqual({ deformation: 50, translation: 50 })
+  })
+  it('separates translation from deformation and limits the maximum translation', () => {
+    expect(getGlassNavbarOpticalResponse({ deformation: 0, translation: 100 })).toEqual({
+      horizontalRatio: 0,
+      verticalRatio: 0,
+      translationPx: 17,
+    })
+    expect(getGlassNavbarOpticalResponse({ deformation: 100, translation: 0 })).toEqual({
+      horizontalRatio: 0.42,
+      verticalRatio: 0.055,
+      translationPx: 0,
+    })
+    expect(getGlassNavbarOpticalResponse({ deformation: -30, translation: 300 }).translationPx).toBe(17)
+    expect(getGlassNavbarOpticalResponse({ deformation: 48, translation: 99 }).translationPx).toBeGreaterThan(16)
+    expect(getGlassNavbarOpticalResponse({ deformation: 48, translation: 99 }).translationPx).toBeLessThan(17)
+  })
+})
+
+describe('createGlassNavbarDisplacementField', () => {
+  function pixelAt(field: ReturnType<typeof createGlassNavbarDisplacementField>, x: number, y: number) {
+    const offset = (y * field.width + x) * 4
+
+    return [...field.pixels.slice(offset, offset + 4)]
+  }
+
+  it('keeps both contour boundary and interior neutral while bending only the narrow rim', () => {
+    const field = createGlassNavbarDisplacementField({
+      height: 41,
+      radius: 12,
+      width: 101,
+      optics: getGlassNavbarOpticalResponse({ deformation: 100, translation: 0 }),
+    })
+
+    expect(field.width).toBe(101)
+    expect(field.height).toBe(41)
+    expect(pixelAt(field, 50, 0)).toEqual([128, 128, 128, 255])
+    expect(pixelAt(field, 50, 20)).toEqual([128, 128, 128, 255])
+    expect(pixelAt(field, 50, 5)[2]).toBeLessThan(128)
+    expect(pixelAt(field, 5, 20)[0]).toBeLessThan(120)
+    expect(pixelAt(field, 95, 20)[0]).toBeGreaterThan(136)
+    expect(pixelAt(field, 50, 35)[2]).toBeGreaterThan(128)
+  })
+
+  it.each([
+    { width: 1423, height: 64, radius: 16 },
+    { width: 401, height: 72, radius: 16 },
+    { width: 127, height: 64, radius: 8 },
+    { width: 127, height: 64, radius: 32 },
+    { width: 260, height: 800, radius: 0 },
+    { width: 68, height: 862, radius: 0 },
+    { width: 252, height: 846, radius: 16 },
+    { width: 60, height: 846, radius: 16 },
+  ])('keeps two-dimensional sampling forward and inside the image for $width x $height r$radius', geometry => {
+    for (const deformation of [0, 48, 100])
+      for (const translation of [0, 48, 100])
+        for (const scale of [-22, -34]) {
+          const field = createGlassNavbarDisplacementField({
+            ...geometry,
+            optics: getGlassNavbarOpticalResponse({ deformation, translation }),
+          })
+          const source = (x: number, y: number) => {
+            const pixel = pixelAt(field, x, y)
+            return [x + 0.5 + scale * (pixel[0] / 255 - 0.5), y + 0.5 + scale * (pixel[2] / 255 - 0.5)]
+          }
+          let minimumDeterminant = Number.POSITIVE_INFINITY
+          let minimumX = Number.POSITIVE_INFINITY
+          let minimumY = Number.POSITIVE_INFINITY
+          let maximumX = 0
+          let maximumY = 0
+          for (let y = 0; y < field.height; y += 1) {
+            for (let x = 0; x < field.width; x += 1) {
+              const point = source(x, y)
+              minimumX = Math.min(minimumX, point[0])
+              minimumY = Math.min(minimumY, point[1])
+              maximumX = Math.max(maximumX, point[0])
+              maximumY = Math.max(maximumY, point[1])
+              if (x === field.width - 1 || y === field.height - 1) continue
+              const nextX = source(x + 1, y)
+              const nextY = source(x, y + 1)
+              const determinant =
+                (nextX[0] - point[0]) * (nextY[1] - point[1]) - (nextY[0] - point[0]) * (nextX[1] - point[1])
+              minimumDeterminant = Math.min(minimumDeterminant, determinant)
+            }
+          }
+          expect(minimumDeterminant).toBeGreaterThan(0.05)
+          expect(minimumX).toBeGreaterThanOrEqual(0)
+          expect(minimumY).toBeGreaterThanOrEqual(0)
+          expect(maximumX).toBeLessThanOrEqual(field.width)
+          expect(maximumY).toBeLessThanOrEqual(field.height)
+        }
+  })
+
+  it('keeps a fixed rectangle optically active without substituting a rounded corner', () => {
+    const field = createGlassNavbarDisplacementField({
+      height: 800,
+      radius: 0,
+      width: 260,
+      optics: getGlassNavbarOpticalResponse({ deformation: 100, translation: 0 }),
+    })
+
+    expect(pixelAt(field, 130, 0)).toEqual([128, 128, 128, 255])
+    expect(pixelAt(field, 130, 8)[2]).toBeLessThan(128)
+    expect(pixelAt(field, 8, 400)[0]).toBeLessThan(128)
+    expect(pixelAt(field, 8, 8)[0]).toBeLessThan(128)
+    expect(pixelAt(field, 8, 8)[2]).toBeLessThan(128)
+  })
+
+  it('clamps invalidly small geometry to a renderable pixel surface', () => {
+    const field = createGlassNavbarDisplacementField({ height: 0, radius: 20, width: -10 })
+
+    expect(field.width).toBe(1)
+    expect(field.height).toBe(1)
+    expect([...field.pixels]).toEqual([128, 128, 128, 255])
+  })
+
+  it('limits vertical text stretching without flattening the horizontal lens', () => {
+    const field = createGlassNavbarDisplacementField({ width: 1423, height: 64, radius: 16 })
+    const displacement = (x: number, y: number, channel: number) => -34 * (pixelAt(field, x, y)[channel] / 255 - 0.5)
+    let maximumHorizontal = 0
+    let maximumVertical = 0
+    let minimumVerticalStep = Infinity
+    let maximumVerticalStep = 0
+    for (let y = 1; y < field.height; y += 1) {
+      const previous = displacement(711, y - 1, 2)
+      const current = displacement(711, y, 2)
+      maximumVertical = Math.max(maximumVertical, Math.abs(current))
+      minimumVerticalStep = Math.min(minimumVerticalStep, 1 + current - previous)
+      maximumVerticalStep = Math.max(maximumVerticalStep, 1 + current - previous)
+    }
+    for (let x = 0; x < 32; x += 1) maximumHorizontal = Math.max(maximumHorizontal, Math.abs(displacement(x, 32, 0)))
+    expect(maximumHorizontal).toBeGreaterThan(1.5)
+    expect(maximumVertical).toBeLessThan(0.5)
+    expect(minimumVerticalStep).toBeGreaterThan(0.85)
+    expect(maximumVerticalStep).toBeLessThan(1.15)
+  })
+})
+
+describe('supportsGlassNavbarLiveRefraction', () => {
+  it('enables the verified Chromium engine path for Chrome and Edge', () => {
+    expect(
+      supportsGlassNavbarLiveRefraction({
+        userAgent: 'Mozilla/5.0 Chrome/140.0.0.0 Safari/537.36',
+        userAgentData: {
+          brands: [{ brand: 'Chromium' }, { brand: 'Google Chrome' }],
+        },
+      }),
+    ).toBe(true)
+    expect(
+      supportsGlassNavbarLiveRefraction({
+        userAgent: 'Mozilla/5.0 Chrome/140.0.0.0 Safari/537.36 Edg/140.0.0.0',
+        userAgentData: {
+          brands: [{ brand: 'Chromium' }, { brand: 'Microsoft Edge' }],
+        },
+      }),
+    ).toBe(true)
+  })
+
+  it.each([
+    ['Safari', 'Mozilla/5.0 Version/26.4 Safari/605.1.15'],
+    ['iOS Chrome', 'Mozilla/5.0 CriOS/140.0.0.0 Mobile/15E148 Safari/604.1'],
+    ['Firefox', 'Mozilla/5.0 Firefox/142.0'],
+  ])('keeps %s on the stable Goal 1 material', (_browser, userAgent) => {
+    expect(supportsGlassNavbarLiveRefraction({ userAgent })).toBe(false)
+  })
+})
diff --git a/src/utils/glassNavbarRefraction.ts b/src/utils/glassNavbarRefraction.ts
new file mode 100644
index 00000000..ec2ff56e
--- /dev/null
+++ b/src/utils/glassNavbarRefraction.ts
@@ -0,0 +1,224 @@
+import {
+  getGlassOpticalPresetParameters,
+  normalizeGlassOpticalStrength,
+  type GlassOpticalParameters,
+} from '@/utils/glassOptics'
+
+export interface GlassNavbarRefractionBrowserIdentity {
+  /** User-Agent Client Hints 暴露的浏览器品牌。 */
+  userAgentData?: {
+    brands?: readonly {
+      brand: string
+    }[]
+  }
+  /** Client Hints 不可用时使用的传统浏览器标识。 */
+  userAgent: string
+}
+
+export interface GlassNavbarDisplacementGeometry {
+  /** 折射表面的实际 CSS 像素高度。 */
+  height: number
+  /** 最终可见外轮廓的圆角半径。 */
+  radius: number
+  /** 折射表面的实际 CSS 像素宽度。 */
+  width: number
+  /** 由当前生效滑杆计算的顶栏光学响应；省略时采用清透自然默认值。 */
+  optics?: GlassNavbarOpticalResponse
+}
+
+/** 顶栏局部取样预算，不包含共享 renderer 的流动、尾波与惯性。 */
+export interface GlassNavbarOpticalResponse {
+  /** 横向边缘峰值位移与轮廓带宽之比。 */
+  horizontalRatio: number
+  /** 纵向峰值位移与轮廓带宽之比，严格小于横向以保护字形高度。 */
+  verticalRatio: number
+  /** 主体内容统一向右显示的 CSS 像素偏移，外轮廓平缓回零。 */
+  translationPx: number
+}
+
+/** 导航以低中段可读性为优先，高段保留完整位移预算；不改写共享参数或材质响应。 */
+export function getGlassNavbarOpticalResponse(
+  parameters: Pick<GlassOpticalParameters, 'deformation' | 'translation'>,
+): GlassNavbarOpticalResponse {
+  // 两个滑杆分别映射，50% 均使用 12.5% 的光学输入，避免平移维持高强度而抵消阅读改善。
+  const deformation = (normalizeGlassOpticalStrength(parameters.deformation) / 100) ** 3
+  const translation = (normalizeGlassOpticalStrength(parameters.translation) / 100) ** 3
+  return {
+    horizontalRatio: 0.42 * (1 - (1 - deformation) ** 3),
+    verticalRatio: 0.055 * deformation ** 2,
+    translationPx: 17 * translation,
+  }
+}
+
+export interface GlassNavbarDisplacementField {
+  /** 位移图的 CSS 像素高度。 */
+  height: number
+  /** 按 RGBA 顺序存储的非预乘像素通道。 */
+  pixels: Uint8ClampedArray
+  /** 位移图的 CSS 像素宽度。 */
+  width: number
+}
+
+export const NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP =
+  'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1" height="1"%3E%3Cpath fill="%23808080" d="M0 0h1v1H0z"/%3E%3C/svg%3E'
+
+const DISPLACEMENT_NEUTRAL_CHANNEL = 128
+const HIGH_REFRACTION_SCALE_PX = 34
+const OUTER_NEUTRAL_GUARD_PX = 0.5
+const REFRACTION_BAND_PX = 24
+// 峰值靠近外沿，内侧有足够距离释放放大率；对称波峰会在窄轮廓内反向采样。
+const PEAK_DEPTH_RATIO = 0.16
+const DEFAULT_NAVBAR_OPTICS = getGlassNavbarOpticalResponse(getGlassOpticalPresetParameters('clear', 'high', 'natural'))
+
+function normalizePixelSize(value: number) {
+  return Number.isFinite(value) ? Math.max(1, Math.round(value)) : 1
+}
+
+function roundedRectangleSignedDistance(x: number, y: number, width: number, height: number, radius: number) {
+  const offsetX = Math.abs(x - width / 2) - (width / 2 - radius)
+  const offsetY = Math.abs(y - height / 2) - (height / 2 - radius)
+  const outsideX = Math.max(offsetX, 0)
+  const outsideY = Math.max(offsetY, 0)
+
+  return Math.hypot(outsideX, outsideY) + Math.min(Math.max(offsetX, offsetY), 0) - radius
+}
+
+function clampChannel(value: number) {
+  return Math.max(0, Math.min(255, Math.round(value)))
+}
+
+function smoothstep(value: number) {
+  return value * value * (3 - 2 * value)
+}
+
+/** 外侧快速形成厚度，内侧缓慢回到中性，保留清透中心且不折返背景。 */
+function refractionProfile(depth: number, band: number, guard: number) {
+  if (depth <= guard || depth >= band) return 0
+
+  const peakDepth = Math.max(guard, band * PEAK_DEPTH_RATIO)
+  if (depth <= peakDepth) return smoothstep((depth - guard) / (peakDepth - guard || 1))
+  return 1 - smoothstep((depth - peakDepth) / (band - peakDepth))
+}
+
+/**
+ * 生成圆角表面的法线位移场。
+ * 外轮廓回到中性；内部统一平移与局部透镜分开计算，不用弯曲字形代替平移。
+ */
+export function createGlassNavbarDisplacementField({
+  height,
+  radius,
+  width,
+  optics = DEFAULT_NAVBAR_OPTICS,
+}: GlassNavbarDisplacementGeometry): GlassNavbarDisplacementField {
+  const pixelWidth = normalizePixelSize(width)
+  const pixelHeight = normalizePixelSize(height)
+  const maxRadius = Math.min(pixelWidth, pixelHeight) / 2
+  const pixelRadius = Number.isFinite(radius) ? Math.max(0, Math.min(maxRadius, radius)) : 0
+  // 直角固定表面没有圆角半径可供推导，仍使用受最短边约束的直边带；radius=0 不能被当成无折射。
+  const radiusBand = pixelRadius > 0 ? pixelRadius * 1.5 : REFRACTION_BAND_PX
+  const maximumBand = Math.min(REFRACTION_BAND_PX, radiusBand, Math.min(pixelWidth, pixelHeight) / 2)
+  const pixels = new Uint8ClampedArray(pixelWidth * pixelHeight * 4)
+
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    pixels[offset] = DISPLACEMENT_NEUTRAL_CHANNEL
+    pixels[offset + 1] = DISPLACEMENT_NEUTRAL_CHANNEL
+    pixels[offset + 2] = DISPLACEMENT_NEUTRAL_CHANNEL
+    pixels[offset + 3] = 255
+  }
+
+  for (let y = 0; y < pixelHeight; y += 1) {
+    for (let x = 0; x < pixelWidth; x += 1) {
+      const sampleX = x + 0.5
+      const sampleY = y + 0.5
+      const signedDistance = roundedRectangleSignedDistance(sampleX, sampleY, pixelWidth, pixelHeight, pixelRadius)
+      const distanceInside = -signedDistance
+      // 长直边允许更厚的透镜；向圆角与法线交汇轴渐缩，避免高曲率区产生聚焦尖点。
+      const edgeX = Math.min(sampleX, pixelWidth - sampleX)
+      const edgeY = Math.min(sampleY, pixelHeight - sampleY)
+      const straightWeight = smoothstep(Math.min(1, Math.abs(edgeX - edgeY) / (maximumBand * 2 || 1)))
+      const cornerBand = Math.min(maximumBand, pixelRadius)
+      // 矩形角点没有圆弧法线；固定带宽交给四条直边的轴向剖面处理，避免角点成为采样断点。
+      const bandWidth = pixelRadius === 0 ? maximumBand : cornerBand + (maximumBand - cornerBand) * straightWeight
+      const outerGuard = Math.min(OUTER_NEUTRAL_GUARD_PX, bandWidth / 4)
+      const channelAmplitude = (bandWidth * optics.horizontalRatio * 255) / HIGH_REFRACTION_SCALE_PX
+
+      if (
+        signedDistance > 0 ||
+        distanceInside <= outerGuard ||
+        bandWidth <= outerGuard ||
+        Math.min(pixelWidth, pixelHeight) < 4
+      )
+        continue
+
+      // 横向平移从边缘透镜退出后进入，避免两种回落梯度叠加导致局部反向采样。
+      const horizontalRamp = smoothstep(Math.max(0, Math.min(1, (edgeX - maximumBand) / 64)))
+      const verticalRamp = smoothstep(Math.min(1, (edgeY - outerGuard) / Math.max(1, Math.min(12, maximumBand))))
+      const translationChannel = (optics.translationPx * horizontalRamp * verticalRamp * 255) / HIGH_REFRACTION_SCALE_PX
+
+      if (pixelRadius === 0) {
+        // 矩形的四条直边分别取样，角点用叠加的轴向剖面保持连续，不伪造圆角法线。
+        const leftProfile = refractionProfile(sampleX, maximumBand, outerGuard)
+        const rightProfile = refractionProfile(pixelWidth - sampleX, maximumBand, outerGuard)
+        const topProfile = refractionProfile(sampleY, maximumBand, outerGuard)
+        const bottomProfile = refractionProfile(pixelHeight - sampleY, maximumBand, outerGuard)
+        const verticalAmplitude = (maximumBand * optics.verticalRatio * 255) / HIGH_REFRACTION_SCALE_PX
+        const offset = (y * pixelWidth + x) * 4
+
+        pixels[offset] = clampChannel(
+          DISPLACEMENT_NEUTRAL_CHANNEL + channelAmplitude * (rightProfile - leftProfile) + translationChannel,
+        )
+        pixels[offset + 2] = clampChannel(
+          DISPLACEMENT_NEUTRAL_CHANNEL + verticalAmplitude * (bottomProfile - topProfile),
+        )
+        continue
+      }
+
+      const profile = distanceInside < bandWidth ? refractionProfile(distanceInside, bandWidth, outerGuard) : 0
+      const verticalProgress = Math.min(1, (distanceInside - outerGuard) / (bandWidth - outerGuard))
+      const verticalProfile = Math.sin(Math.PI * verticalProgress) ** 2
+      const verticalAmplitude = (bandWidth * optics.verticalRatio * 255) / HIGH_REFRACTION_SCALE_PX
+      const gradientX =
+        roundedRectangleSignedDistance(sampleX + 0.5, sampleY, pixelWidth, pixelHeight, pixelRadius) -
+        roundedRectangleSignedDistance(sampleX - 0.5, sampleY, pixelWidth, pixelHeight, pixelRadius)
+      const gradientY =
+        roundedRectangleSignedDistance(sampleX, sampleY + 0.5, pixelWidth, pixelHeight, pixelRadius) -
+        roundedRectangleSignedDistance(sampleX, sampleY - 0.5, pixelWidth, pixelHeight, pixelRadius)
+      const gradientLength = Math.hypot(gradientX, gradientY) || 1
+      const offset = (y * pixelWidth + x) * 4
+      pixels[offset] = clampChannel(
+        DISPLACEMENT_NEUTRAL_CHANNEL + (channelAmplitude * gradientX * profile) / gradientLength + translationChannel,
+      )
+      pixels[offset + 2] = clampChannel(
+        DISPLACEMENT_NEUTRAL_CHANNEL + (verticalAmplitude * gradientY * verticalProfile) / gradientLength,
+      )
+    }
+  }
+
+  return { height: pixelHeight, pixels, width: pixelWidth }
+}
+
+/** 把位移场栅格化为浏览器可直接加载的无损 PNG。 */
+export function createGlassNavbarDisplacementMap(geometry: GlassNavbarDisplacementGeometry) {
+  const field = createGlassNavbarDisplacementField(geometry)
+  const canvas = document.createElement('canvas')
+  const context = canvas.getContext('2d')
+
+  if (!context) return NEUTRAL_GLASS_NAVBAR_DISPLACEMENT_MAP
+
+  canvas.width = field.width
+  canvas.height = field.height
+  const imageData = context.createImageData(field.width, field.height)
+
+  imageData.data.set(field.pixels)
+  context.putImageData(imageData, 0, 0)
+
+  return canvas.toDataURL('image/png')
+}
+
+/** 仅在已验证 SVG backdrop 位移的 Chromium 引擎启用实时顶栏折射。 */
+export function supportsGlassNavbarLiveRefraction(browserIdentity: GlassNavbarRefractionBrowserIdentity = navigator) {
+  const brands = browserIdentity.userAgentData?.brands
+  if (brands?.length) return brands.some(({ brand }) => brand === 'Chromium')
+
+  return /\b(?:Chrome|Chromium)\/\d+/u.test(browserIdentity.userAgent)
+}