diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 0cdad429..41946436 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -56,7 +56,7 @@ export const Header: React.FC = () => {
   const t = (zh: string, en: string) => language === 'zh' ? zh : en;
 
   return (
-    <header className="linear-header sticky top-0 z-40 hd-drag lg:hd-drag relative">
+    <header className="linear-header sticky top-0 z-50 hd-drag lg:hd-drag relative">
       <div className="max-w-[1440px] mx-auto px-4 sm:px-6 lg:px-8">
         <div className="linear-header-inner flex h-14 items-center justify-between">
           {/* Logo and Title */}
diff --git a/src/index.css b/src/index.css
index d85fab12..3595eade 100644
--- a/src/index.css
+++ b/src/index.css
@@ -455,6 +455,15 @@ html body[data-scroll-locked] {
   overflow: clip !important;
 }
 
+/* body's overflow never propagates to the viewport (html owns overflow), so the
+   root scroller must be locked directly or the page behind a modal overlay keeps
+   scrolling (scrollbar drag + wheel). hidden — not clip — keeps the viewport a
+   scroll container, so the scroll offset, the sticky header's anchor and the
+   scrollbar-gutter: stable reservation all survive the lock. */
+html:has(body[data-scroll-locked]) {
+  overflow: hidden !important;
+}
+
 /* 窗口滚动条颜色由 --ui-line-strong 等 token 统一驱动（见文件底部 Linear 段落）。 */