diff --git a/apps/web/src/app/styles/console.css b/apps/web/src/app/styles/console.css
index 459d943..26525e9 100644
--- a/apps/web/src/app/styles/console.css
+++ b/apps/web/src/app/styles/console.css
@@ -317,9 +317,10 @@
 /* ── 抽屉:一次性的配置岔路(接入模型 / 改绑定)——————————————————
    右侧 520px 定宽面板 + 遮罩;头固定、身滚动、底动作栏常驻。
    配置不该把货架顶下去:做完就该回到原地,所以是抽屉不是页内表单。 */
-.g-drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
+/* 层级压过顶栏(顶栏 z=40 一档);背景显式给白 —— 不吃 .gov-root 之外的令牌缺失 */
+.g-drawer { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: flex-end; }
 .g-drawer-veil { flex: 1; border: 0; padding: 0; background: rgba(19, 28, 38, .38); backdrop-filter: blur(1.5px); cursor: default; animation: g-fade .16s ease-out; }
-.g-drawer-p { position: relative; display: flex; flex-direction: column; width: min(520px, 100vw); background: var(--card); border-left: 1px solid var(--cline); box-shadow: -18px 0 44px -24px rgba(19, 28, 38, .5); animation: g-slidein .2s cubic-bezier(.2, .8, .2, 1); }
+.g-drawer-p { position: relative; display: flex; flex-direction: column; width: min(520px, 100vw); background: var(--card, #fff); border-left: 1px solid var(--cline, #e2e7ee); box-shadow: -18px 0 44px -24px rgba(19, 28, 38, .5); animation: g-slidein .2s cubic-bezier(.2, .8, .2, 1); }
 @keyframes g-fade { from { opacity: 0; } }
 @keyframes g-slidein { from { transform: translateX(24px); opacity: .6; } }
 @media (prefers-reduced-motion: reduce) { .g-drawer-veil, .g-drawer-p { animation: none; } }
diff --git a/apps/web/src/features/gov-system/internal/panel.tsx b/apps/web/src/features/gov-system/internal/panel.tsx
index cdfff01..6713b10 100644
--- a/apps/web/src/features/gov-system/internal/panel.tsx
+++ b/apps/web/src/features/gov-system/internal/panel.tsx
@@ -6,6 +6,7 @@
  * 区首页只负责导航,治理动作一律落在下钻详情页的**就地确认带**(影响预览三必答)。
  */
 import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import type { LlmInstanceView, LlmProvider } from '@contracts';
 import { probeLlmDraftRoute, probeLlmInstanceRoute, upsertLlmInstanceRoute } from '@contracts';
@@ -154,8 +155,20 @@ function LlmDrawer({
     onError: (e: unknown) => setProbed({ ok: false, error: (e as { message?: string }).message ?? '测试失败' }),
   });
 
-  return (
-    <div className="g-drawer" role="dialog" aria-modal="true" aria-label={isNew ? '接入模型' : `配置 ${draft.name}`}>
+  /*
+   * **挂到 body 上**(2026-07-30 实测踩到):抽屉是 `position: fixed`,而详情页容器
+   * `.g-detail` 带着入场动画的 `transform` —— 带 transform 的祖先会成为 fixed 的包含块,
+   * 于是抽屉被钉进那张卡的盒子里,量出来只有 520×129:头尾一挤,输入框整片没了。
+   * 走 portal 就与 DOM 位置解绑,谁在祖先上加动画都影响不到它。
+   */
+  return createPortal(
+    /*
+     * `gov-root` 这个类必须跟着一起挂:整套令牌(--card / --cline / --ink …)
+     * 定义在 `.gov-root` 上,而 portal 把节点挂到了 body —— 出了那个作用域,
+     * `var(--card)` 解析为空,面板背景直接变透明(实测 rgba(0,0,0,0),
+     * 顶栏与页面内容从抽屉里透出来)。挂上它,portal 与令牌两头都成立。
+     */
+    <div className="gov-root g-drawer" role="dialog" aria-modal="true" aria-label={isNew ? '接入模型' : `配置 ${draft.name}`}>
       <button className="g-drawer-veil" aria-label="关闭" onClick={onCancel} />
       <div className="g-drawer-p">
         <header>
@@ -274,7 +287,8 @@ function LlmDrawer({
           </button>
         </footer>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }