From a305e4013b10b9b0e002d8cdae41717fd9ad4746 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Wed, 30 Sep 2026 13:58:22 +0800
Subject: [PATCH 1/3] perf(ui): teleport overlays into #overlay-root instead of
 <body>

Every overlay (BaseDialog, Select, the accounts tools panel and row menu,
tooltips, drawers, toasts: 31 <Teleport to="body"> in 25 files) inserted
its content among <body>'s own children, next to the anchors Vue appends
at mount time. <body> carries the positional (:first/:last-child) and
sibling (space-y / divide-y ~) invalidation flags, so each open or close
restyled the whole document: 130-290 ms event->paint on /admin/accounts.

index.html now ends <body> with an empty #overlay-root and every Teleport
targets it, so opening an overlay only touches that container (~0.5 ms
forced recalc instead of ~170 ms). The container has no styles and makes
no stacking context: overlays keep their z-order.

The login agreement dialog selectors (body > div.z-[140]) follow the
overlay into #overlay-root; :where() keeps them at their old specificity.
The test setup recreates #overlay-root before each test, since many specs
reset document.body.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/index.html                           |  2 +
 frontend/src/__tests__/setup.ts               | 13 ++++-
 .../components/account/AccountGroupsCell.vue  |  2 +-
 .../components/account/AccountTestModal.vue   |  2 +-
 .../admin/account-jobs/AccountTaskDrawer.vue  |  2 +-
 .../admin/account/AccountActionMenu.vue       |  2 +-
 .../admin/account/AccountDetailsDrawer.vue    |  2 +-
 .../admin/account/AccountTestModal.vue        |  2 +-
 .../src/components/admin/usage/UsageTable.vue |  4 +-
 .../admin/user/UserApiKeysModal.vue           |  2 +-
 .../components/auth/LoginAgreementPrompt.vue  |  2 +-
 .../channels/SupportedModelChip.vue           |  2 +-
 .../components/common/AnnouncementBell.vue    |  4 +-
 .../components/common/AnnouncementPopup.vue   |  2 +-
 frontend/src/components/common/BaseDialog.vue |  2 +-
 .../src/components/common/HelpTooltip.vue     |  2 +-
 .../src/components/common/InfoPopover.vue     |  2 +-
 frontend/src/components/common/Select.vue     |  2 +-
 frontend/src/components/common/Toast.vue      |  2 +-
 .../channel-monitor-v2/FilterMultiSelect.vue  |  2 +-
 .../channel-monitor-v2/RelayPulseMatrix.vue   |  2 +-
 frontend/src/styles/console/controls.css      |  2 +-
 frontend/src/styles/console/data.css          | 18 +++---
 .../console/pages/settings-ops-public.css     | 56 +++++++++----------
 frontend/src/views/admin/AccountsView.vue     |  2 +-
 frontend/src/views/admin/RedeemView.vue       |  6 +-
 frontend/src/views/admin/UsersView.vue        |  2 +-
 .../src/views/user/BatchImageGuideView.vue    |  4 +-
 frontend/src/views/user/KeysView.vue          |  2 +-
 frontend/src/views/user/PaymentView.vue       |  4 +-
 30 files changed, 83 insertions(+), 70 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index ef5c8cca3316..6d55435f7989 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,6 +9,8 @@
   </head>
   <body>
     <div id="app"></div>
+    <!-- Target of every <Teleport>: an overlay inserted among <body>'s own children restyles the whole page. -->
+    <div id="overlay-root"></div>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/frontend/src/__tests__/setup.ts b/frontend/src/__tests__/setup.ts
index 9dad8c1f123b..2fee78ac0224 100644
--- a/frontend/src/__tests__/setup.ts
+++ b/frontend/src/__tests__/setup.ts
@@ -3,7 +3,7 @@
  * 提供全局 mock 和测试工具
  */
 import { config } from '@vue/test-utils'
-import { vi } from 'vitest'
+import { beforeEach, vi } from 'vitest'
 
 function createMemoryStorage(): Storage {
   const values = new Map<string, string>()
@@ -89,6 +89,17 @@ class MockResizeObserver {
 
 globalThis.ResizeObserver = MockResizeObserver as unknown as typeof ResizeObserver
 
+// Overlays teleport into #overlay-root (index.html); many specs reset document.body, so recreate it per test.
+function ensureOverlayRoot() {
+  if (typeof document === 'undefined' || document.getElementById('overlay-root')) return
+  const overlayRoot = document.createElement('div')
+  overlayRoot.id = 'overlay-root'
+  document.body.appendChild(overlayRoot)
+}
+
+ensureOverlayRoot()
+beforeEach(ensureOverlayRoot)
+
 // Vue Test Utils 全局配置
 config.global.stubs = {
   // 可以在这里添加全局 stub
diff --git a/frontend/src/components/account/AccountGroupsCell.vue b/frontend/src/components/account/AccountGroupsCell.vue
index 37771275fafd..01c395fb16b3 100644
--- a/frontend/src/components/account/AccountGroupsCell.vue
+++ b/frontend/src/components/account/AccountGroupsCell.vue
@@ -24,7 +24,7 @@
     </div>
 
     <!-- Popover 显示完整列表 -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <Transition
         enter-active-class="transition duration-150 ease-out"
         enter-from-class="opacity-0 scale-95"
diff --git a/frontend/src/components/account/AccountTestModal.vue b/frontend/src/components/account/AccountTestModal.vue
index e6602f1e2579..7264f82bc34e 100644
--- a/frontend/src/components/account/AccountTestModal.vue
+++ b/frontend/src/components/account/AccountTestModal.vue
@@ -154,7 +154,7 @@
       </div>
 
       <!-- Image Lightbox -->
-      <Teleport to="body">
+      <Teleport to="#overlay-root">
         <Transition name="fade">
           <div
             v-if="previewImageUrl"
diff --git a/frontend/src/components/admin/account-jobs/AccountTaskDrawer.vue b/frontend/src/components/admin/account-jobs/AccountTaskDrawer.vue
index be68fddc52c7..96be07b217df 100644
--- a/frontend/src/components/admin/account-jobs/AccountTaskDrawer.vue
+++ b/frontend/src/components/admin/account-jobs/AccountTaskDrawer.vue
@@ -26,7 +26,7 @@
       <button class="btn btn-secondary btn-sm" :disabled="store.loadingJobs || store.jobPage.page * store.jobPage.pageSize >= store.jobPage.total" @click="loadHistory(store.jobPage.page + 1)">{{ t('admin.accountTasks.nextPage') }}</button>
     </template>
   </BaseDialog>
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <Transition name="operation-dock">
       <aside v-if="dockJob && !store.drawerOpen && !store.embeddedOpen" class="fixed bottom-4 right-4 z-40 w-[calc(100%-2rem)] border border-line bg-canvas shadow-outline sm:w-80" :aria-label="t('admin.accountTasks.inProgress')" data-test="operation-dock">
         <div class="flex items-center gap-3 px-4 py-3">
diff --git a/frontend/src/components/admin/account/AccountActionMenu.vue b/frontend/src/components/admin/account/AccountActionMenu.vue
index 91bae82e4298..346044709966 100644
--- a/frontend/src/components/admin/account/AccountActionMenu.vue
+++ b/frontend/src/components/admin/account/AccountActionMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <div v-if="show && anchorRect">
       <!-- Backdrop: click anywhere outside to close -->
       <div class="fixed inset-0 z-[9998]" @click="emit('close')"></div>
diff --git a/frontend/src/components/admin/account/AccountDetailsDrawer.vue b/frontend/src/components/admin/account/AccountDetailsDrawer.vue
index fa3fe7ef1488..323f040eb568 100644
--- a/frontend/src/components/admin/account/AccountDetailsDrawer.vue
+++ b/frontend/src/components/admin/account/AccountDetailsDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <Transition
       enter-active-class="transition-opacity duration-200"
       enter-from-class="opacity-0"
diff --git a/frontend/src/components/admin/account/AccountTestModal.vue b/frontend/src/components/admin/account/AccountTestModal.vue
index dcb3f6416d96..71b570ccf7e3 100644
--- a/frontend/src/components/admin/account/AccountTestModal.vue
+++ b/frontend/src/components/admin/account/AccountTestModal.vue
@@ -284,7 +284,7 @@
       </div>
 
       <!-- Image Lightbox -->
-      <Teleport to="body">
+      <Teleport to="#overlay-root">
         <Transition name="fade">
           <div
             v-if="previewImageUrl"
diff --git a/frontend/src/components/admin/usage/UsageTable.vue b/frontend/src/components/admin/usage/UsageTable.vue
index 274c9094b849..ff0e836c30b6 100644
--- a/frontend/src/components/admin/usage/UsageTable.vue
+++ b/frontend/src/components/admin/usage/UsageTable.vue
@@ -312,7 +312,7 @@
   </div>
 
   <!-- Token Tooltip Portal -->
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <div
       v-if="tokenTooltipVisible"
       ref="tokenTooltipRef"
@@ -397,7 +397,7 @@
   </Teleport>
 
   <!-- Cost Tooltip Portal -->
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <div
       v-if="tooltipVisible"
       ref="tooltipRef"
diff --git a/frontend/src/components/admin/user/UserApiKeysModal.vue b/frontend/src/components/admin/user/UserApiKeysModal.vue
index da20b2fbfc24..be1d321e47c6 100644
--- a/frontend/src/components/admin/user/UserApiKeysModal.vue
+++ b/frontend/src/components/admin/user/UserApiKeysModal.vue
@@ -51,7 +51,7 @@
   </BaseDialog>
 
   <!-- Group Selector Dropdown -->
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <div
       v-if="groupSelectorKeyId !== null && dropdownPosition"
       ref="dropdownRef"
diff --git a/frontend/src/components/auth/LoginAgreementPrompt.vue b/frontend/src/components/auth/LoginAgreementPrompt.vue
index f73a3b1c4c36..346909c1ed3e 100644
--- a/frontend/src/components/auth/LoginAgreementPrompt.vue
+++ b/frontend/src/components/auth/LoginAgreementPrompt.vue
@@ -57,7 +57,7 @@
     </div>
   </div>
 
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <Transition name="agreement-fade">
       <div
         v-if="dialogVisible"
diff --git a/frontend/src/components/channels/SupportedModelChip.vue b/frontend/src/components/channels/SupportedModelChip.vue
index f19ab08b18a3..8168dd2ecaab 100644
--- a/frontend/src/components/channels/SupportedModelChip.vue
+++ b/frontend/src/components/channels/SupportedModelChip.vue
@@ -31,7 +31,7 @@
     <!-- Teleport to body so the popover is not clipped by card/overflow-hidden
          ancestors. Fixed-position coords are computed from the trigger's
          bounding rect; re-measured on enter / scroll / resize. -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div
         v-show="show"
         ref="popoverEl"
diff --git a/frontend/src/components/common/AnnouncementBell.vue b/frontend/src/components/common/AnnouncementBell.vue
index 7433e5d58ad1..e653b78839bd 100644
--- a/frontend/src/components/common/AnnouncementBell.vue
+++ b/frontend/src/components/common/AnnouncementBell.vue
@@ -20,7 +20,7 @@
     </button>
 
     <!-- 公告列表 Modal -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <Transition name="modal-fade">
         <div
           v-if="isModalOpen"
@@ -181,7 +181,7 @@
     </Teleport>
 
     <!-- 公告详情 Modal -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <Transition name="modal-fade">
         <div
           v-if="detailModalOpen && selectedAnnouncement"
diff --git a/frontend/src/components/common/AnnouncementPopup.vue b/frontend/src/components/common/AnnouncementPopup.vue
index f23b7f871d3e..ff003286de1f 100644
--- a/frontend/src/components/common/AnnouncementPopup.vue
+++ b/frontend/src/components/common/AnnouncementPopup.vue
@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <Transition name="popup-fade">
       <div
         v-if="displayedAnnouncement"
diff --git a/frontend/src/components/common/BaseDialog.vue b/frontend/src/components/common/BaseDialog.vue
index d413055cff65..74da6d4337ab 100644
--- a/frontend/src/components/common/BaseDialog.vue
+++ b/frontend/src/components/common/BaseDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <Transition name="modal">
       <div
         v-if="show"
diff --git a/frontend/src/components/common/HelpTooltip.vue b/frontend/src/components/common/HelpTooltip.vue
index 92e6be82c8da..6efb3199c26f 100644
--- a/frontend/src/components/common/HelpTooltip.vue
+++ b/frontend/src/components/common/HelpTooltip.vue
@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
     </slot>
 
     <!-- Teleport to body to escape modal overflow clipping -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <!-- before: 伪元素向下延伸一段透明区域，盖住提示框与触发图标之间的空隙，让指针能连续移入提示框。 -->
       <div
         ref="tooltip"
diff --git a/frontend/src/components/common/InfoPopover.vue b/frontend/src/components/common/InfoPopover.vue
index 23e8cb82a0ca..5801cb9388d7 100644
--- a/frontend/src/components/common/InfoPopover.vue
+++ b/frontend/src/components/common/InfoPopover.vue
@@ -16,7 +16,7 @@
     >
       <slot name="trigger" />
     </button>
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div
         v-if="open"
         :id="panelId"
diff --git a/frontend/src/components/common/Select.vue b/frontend/src/components/common/Select.vue
index d6ebb1a00d7c..09ef7cc8a7e6 100644
--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -46,7 +46,7 @@
     </button>
 
     <!-- Teleport dropdown to body to escape stacking context -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <Transition name="select-dropdown">
         <div
           v-if="isOpen"
diff --git a/frontend/src/components/common/Toast.vue b/frontend/src/components/common/Toast.vue
index b508b398f58f..62859951e332 100644
--- a/frontend/src/components/common/Toast.vue
+++ b/frontend/src/components/common/Toast.vue
@@ -1,5 +1,5 @@
 <template>
-  <Teleport to="body">
+  <Teleport to="#overlay-root">
     <div
       data-ui="toast-stack"
       class="pointer-events-none fixed right-4 top-4 z-[9999] space-y-3"
diff --git a/frontend/src/features/channel-monitor-v2/FilterMultiSelect.vue b/frontend/src/features/channel-monitor-v2/FilterMultiSelect.vue
index 2eea94796ac5..44cd0046620d 100644
--- a/frontend/src/features/channel-monitor-v2/FilterMultiSelect.vue
+++ b/frontend/src/features/channel-monitor-v2/FilterMultiSelect.vue
@@ -28,7 +28,7 @@
       </span>
     </button>
 
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <Transition name="select-dropdown">
         <div
           v-if="isOpen"
diff --git a/frontend/src/features/channel-monitor-v2/RelayPulseMatrix.vue b/frontend/src/features/channel-monitor-v2/RelayPulseMatrix.vue
index ba4a6537b4ee..1a3f91e0ef03 100644
--- a/frontend/src/features/channel-monitor-v2/RelayPulseMatrix.vue
+++ b/frontend/src/features/channel-monitor-v2/RelayPulseMatrix.vue
@@ -145,7 +145,7 @@
       </div>
     </div>
 
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div
         v-if="floatingTooltip.visible"
         class="matrix-floating-tooltip"
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index 258745a9c055..a3c040836ea0 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -890,7 +890,7 @@ html.flat-theme :is(a, button)[class*="underline"] {
    checkbox squares and check badges (spans), steppers (divs) and the .btn recipe are not buttons of this kind; the
    public pages keep their own rules. Kept at 0,3,1 (the page files refine; the account forms' 9.6 agrees).
    (wave 2, reported by the accounts agent) */
-html.flat-theme :where(:is(button, a):is(.bg-primary-500, .bg-primary-600, .bg-primary-700).text-white:not(.btn):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div.z-\[140\]) *))[class][class] {
+html.flat-theme :where(:is(button, a):is(.bg-primary-500, .bg-primary-600, .bg-primary-700).text-white:not(.btn):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div.z-\[140\]) *))[class][class] {
   --theme-on-fill: var(--ui-on-ink);
   border-color: rgb(var(--ui-ink));
   background-color: rgb(var(--ui-ink));
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index d485220aef22..9cb71a7b1d71 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -1813,7 +1813,7 @@ html.flat-theme [class~="card"][class~="p-4"][data-ui~="chart-card"]:is(div):is(
    Static reach 2026-09-29 (_tools/callout_reach.py): 50 boxes; skipped 14 (selected cards, the drag-over drop zone,
    strips without a box, the header balance, the OAuth flow panel, the picked-user chips, the login agreement).
    Specificity is kept at 0,3,1 (the conditions sit in :where()) so the page files, loaded later, can refine. */
-html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *))[class][class] {
+html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *))[class][class] {
   border: 1px solid rgb(var(--ui-line));
   background-color: rgb(var(--ui-subtle));
   background-image: none;
@@ -1823,38 +1823,38 @@ html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/5
 
 /* a box upstream draws without a radius (the plugins page's runtime notice) takes the reference callout's 6px; boxes
    with their own rounded-* and cards (their 8px) keep theirs (batch 6, reported by the settings agent) */
-html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *)):not([class*="rounded"], [class~="card"])[class][class] {
+html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *)):not([class*="rounded"], [class~="card"])[class][class] {
   border-radius: var(--ui-radius-md);
 }
 
 /* a form inside a callout (the scheduled test's new plan): the mono field labels take the muted grey, which holds
    4.5:1 on the subtle ground (the label grey #737373 reads 4.35 there); dark keeps its label grey (5.7) */
-html.flat-theme:not(.dark) :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *))[class][class] {
+html.flat-theme:not(.dark) :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *))[class][class] {
   --ui-label: var(--ui-muted);
 }
 
 /* the box's words: body text ink-soft, its title and bold words ink; links and buttons inside keep their own colours */
-html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *)) :where(:is([class*="text-primary-"], [class*="text-blue-"], [class*="text-sky-"], [class*="text-purple-"], [class*="text-indigo-"], [class*="text-teal-"], [class*="text-violet-"], [class*="text-cyan-"]):not(a, button, a *, button *, code))[class][class] {
+html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *)) :where(:is([class*="text-primary-"], [class*="text-blue-"], [class*="text-sky-"], [class*="text-purple-"], [class*="text-indigo-"], [class*="text-teal-"], [class*="text-violet-"], [class*="text-cyan-"]):not(a, button, a *, button *, code))[class][class] {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *)) :where(:is([class~="font-medium"], [class~="font-semibold"], [class~="font-bold"], strong, h3, h4):not(a, button, a *, button *))[class][class],
-html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *)) :where(:is(strong, h3, h4):not(a, button, a *, button *)) {
+html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *)) :where(:is([class~="font-medium"], [class~="font-semibold"], [class~="font-bold"], strong, h3, h4):not(a, button, a *, button *))[class][class],
+html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *)) :where(:is(strong, h3, h4):not(a, button, a *, button *)) {
   color: rgb(var(--ui-ink));
 }
 
 /* faded secondary lines (opacity-70 / -80) would fall under 4.5:1 on the subtle ground: full opacity, muted */
-html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *)) :where(:is([class~="opacity-70"], [class~="opacity-75"], [class~="opacity-80"], [class~="opacity-90"]))[class][class] {
+html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *)) :where(:is([class~="opacity-70"], [class~="opacity-75"], [class~="opacity-80"], [class~="opacity-90"]))[class][class] {
   opacity: 1;
   color: rgb(var(--ui-muted));
 }
 
 /* glyphs muted; an icon tile on a tinted ground becomes the reference's neutral square (surface, 1px line) */
-html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *)) :where(svg:is([class*="text-primary-"], [class*="text-blue-"], [class*="text-sky-"], [class*="text-purple-"], [class*="text-indigo-"], [class*="text-teal-"], [class*="text-violet-"], [class*="text-cyan-"]))[class][class] {
+html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *)) :where(svg:is([class*="text-primary-"], [class*="text-blue-"], [class*="text-sky-"], [class*="text-purple-"], [class*="text-indigo-"], [class*="text-teal-"], [class*="text-violet-"], [class*="text-cyan-"]))[class][class] {
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], body > div[class~="z-[140]"]) *)) :where(div[class*="rounded"]:is([class~="bg-primary-100"], [class~="bg-blue-100"], [class~="bg-sky-100"], [class~="bg-purple-100"], [class~="bg-indigo-100"], [class~="bg-teal-100"], [class~="bg-violet-100"], [class~="bg-cyan-100"], [class~="bg-white"]))[class][class] {
+html.flat-theme :where(div:is([class~="bg-primary-50"], [class~="bg-primary-50/50"], [class~="bg-primary-50/60"], [class~="bg-primary-50/70"], [class~="bg-primary-50/80"], [class~="bg-primary-50/90"], [class~="bg-blue-50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-blue-50/70"], [class~="bg-blue-50/80"], [class~="bg-blue-50/90"], [class~="bg-sky-50"], [class~="bg-sky-50/50"], [class~="bg-sky-50/60"], [class~="bg-sky-50/70"], [class~="bg-sky-50/80"], [class~="bg-sky-50/90"], [class~="bg-purple-50"], [class~="bg-purple-50/50"], [class~="bg-purple-50/60"], [class~="bg-purple-50/70"], [class~="bg-purple-50/80"], [class~="bg-purple-50/90"], [class~="bg-indigo-50"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"], [class~="bg-indigo-50/90"], [class~="bg-teal-50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-teal-50/70"], [class~="bg-teal-50/80"], [class~="bg-teal-50/90"], [class~="bg-violet-50"], [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-violet-50/70"], [class~="bg-violet-50/80"], [class~="bg-violet-50/90"], [class~="bg-cyan-50"], [class~="bg-cyan-50/50"], [class~="bg-cyan-50/60"], [class~="bg-cyan-50/70"], [class~="bg-cyan-50/80"], [class~="bg-cyan-50/90"]):is([class*="rounded"]:not([class~="rounded-full"]), [class~="border"], [class~="card"]):is([class~="p-2"], [class~="p-3"], [class~="p-4"], [class~="p-5"], [class~="p-6"], [class~="py-2"], [class~="py-2.5"], [class~="py-3"], [class~="py-4"], [class~="card"]):not([data-ui], [class*="ring-"], [class~="border-primary-300"], [class~="border-primary-400"], [class~="border-primary-500"], [class~="border-primary-600"], [class~="border-primary-700"], [class~="border-blue-300"], [class~="border-blue-400"], [class~="border-blue-500"], [class~="border-blue-600"], [class~="border-blue-700"], [class~="border-sky-300"], [class~="border-sky-400"], [class~="border-sky-500"], [class~="border-sky-600"], [class~="border-sky-700"], [class~="border-purple-300"], [class~="border-purple-400"], [class~="border-purple-500"], [class~="border-purple-600"], [class~="border-purple-700"], [class~="border-indigo-300"], [class~="border-indigo-400"], [class~="border-indigo-500"], [class~="border-indigo-600"], [class~="border-indigo-700"], [class~="border-teal-300"], [class~="border-teal-400"], [class~="border-teal-500"], [class~="border-teal-600"], [class~="border-teal-700"], [class~="border-violet-300"], [class~="border-violet-400"], [class~="border-violet-500"], [class~="border-violet-600"], [class~="border-violet-700"], [class~="border-cyan-300"], [class~="border-cyan-400"], [class~="border-cyan-500"], [class~="border-cyan-600"], [class~="border-cyan-700"]):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div[class~="z-[140]"]) *)) :where(div[class*="rounded"]:is([class~="bg-primary-100"], [class~="bg-blue-100"], [class~="bg-sky-100"], [class~="bg-purple-100"], [class~="bg-indigo-100"], [class~="bg-teal-100"], [class~="bg-violet-100"], [class~="bg-cyan-100"], [class~="bg-white"]))[class][class] {
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 0 0 1px rgb(var(--ui-line));
   color: rgb(var(--ui-muted));
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index 0a71621bb419..cd68fbf2b257 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -17,7 +17,7 @@
  *   views/KeyUsageView.vue:2                data-ui="key-usage"
  *   views/auth/LoginView.vue:69             data-ui="auth-link-row" (the forgot-password row; static, performance pass)
  * Everything else is reached through upstream classes ([class~="…"]); the 2FA dialog is the sibling LoginView
- * renders after AuthLayout, the agreement dialog is the body-level z-[140] layer (unique to LoginAgreementPrompt). */
+ * renders after AuthLayout, the agreement dialog is the z-[140] layer in #overlay-root (unique to LoginAgreementPrompt). */
 
 html.flat-theme {
   /* the reference's small mono text: field labels and text buttons 10/15 (Chinese 11/16, as the mono label) */
@@ -770,14 +770,14 @@ html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div
   box-shadow: none;
 }
 
-/* ------------------------------------------------------------------ auth · agreement dialog (body-level layer) */
-html.flat-theme body > div[class~="z-[140]"] {
+/* ------------------------------------------------------------------ auth · agreement dialog (the #overlay-root layer; :where() adds no id specificity) */
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] {
   background: rgb(var(--ui-scrim));
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div {
   max-width: 560px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
@@ -785,17 +785,17 @@ html.flat-theme body > div[class~="z-[140]"] > div {
   box-shadow: var(--ui-shadow-overlay);
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:first-child {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:first-child {
   padding: 18px 20px 16px;
   border-bottom: 1px solid rgb(var(--ui-line));
   background: rgb(var(--ui-surface));
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:first-child > div {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:first-child > div {
   gap: 14px;
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:first-child span[class~="h-12"] {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:first-child span[class~="h-12"] {
   width: 36px;
   height: 36px;
   border: 1px solid rgb(var(--ui-line));
@@ -805,18 +805,18 @@ html.flat-theme body > div[class~="z-[140]"] > div > div:first-child span[class~
   box-shadow: none;
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:first-child span[class~="h-12"] svg {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:first-child span[class~="h-12"] svg {
   width: 17px;
   height: 17px;
 }
 
-html.flat-theme body > div[class~="z-[140]"] h2 {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] h2 {
   font: 600 17px/25.5px var(--ui-font);
   letter-spacing: -0.025em;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme body > div[class~="z-[140]"] h2 + span {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] h2 + span {
   padding: 1px 6px;
   border-radius: var(--ui-radius-sm);
   background: rgb(var(--ui-subtle));
@@ -825,24 +825,24 @@ html.flat-theme body > div[class~="z-[140]"] h2 + span {
   letter-spacing: 0.025em;
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:first-child p {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:first-child p {
   margin-top: 4px;
   font: 400 13px/19.5px var(--ui-font);
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div[class~="max-h-[58vh]"] {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div[class~="max-h-[58vh]"] {
   padding: 16px 20px 20px;
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div[class~="max-h-[58vh]"] > div:first-child > p {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div[class~="max-h-[58vh]"] > div:first-child > p {
   font: 500 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
   letter-spacing: var(--pub-track-label);
   text-transform: uppercase;
   color: rgb(var(--ui-label));
 }
 
-html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] a[class~="min-h-[72px]"] {
   min-height: 56px;
   gap: 10px;
   padding: 12px 14px;
@@ -854,14 +854,14 @@ html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] {
   transition: border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"]:hover {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] a[class~="min-h-[72px]"]:hover {
   border-color: rgb(var(--ui-line-strong));
   background: rgb(var(--ui-subtle) / 0.6);
   box-shadow: none;
   transform: none;
 }
 
-html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:first-child {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:first-child {
   width: 28px;
   height: 28px;
   border: 1px solid rgb(var(--ui-line));
@@ -871,40 +871,40 @@ html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:fir
   box-shadow: none;
 }
 
-html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:first-child svg {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:first-child svg {
   width: 14px;
   height: 14px;
 }
 
-html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:nth-child(2) > span {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:nth-child(2) > span {
   font: 600 13px/19.5px var(--ui-font);
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:last-child {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:last-child {
   width: 24px;
   height: 24px;
   color: rgb(var(--ui-muted));
   background: none;
 }
 
-html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"]:hover > span:last-child {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] a[class~="min-h-[72px]"]:hover > span:last-child {
   color: rgb(var(--ui-ink));
   background: none;
 }
 
-html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:last-child svg {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] a[class~="min-h-[72px]"] > span:last-child svg {
   width: 13px;
   height: 13px;
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:last-child {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:last-child {
   padding: 12px 20px;
   border-top: 1px solid rgb(var(--ui-line));
   background: rgb(var(--ui-surface));
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:last-child button {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:last-child button {
   height: 38px;
   padding: 0 16px;
   border-radius: var(--ui-radius-md);
@@ -913,28 +913,28 @@ html.flat-theme body > div[class~="z-[140]"] > div > div:last-child button {
   transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:last-child button:first-child {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:last-child button:first-child {
   border: 1px solid rgb(var(--ui-line-strong));
   background: rgb(var(--ui-surface));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:last-child button:first-child:hover {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:last-child button:first-child:hover {
   border-color: rgb(var(--ui-ink) / 0.25);
   background: rgb(var(--ui-surface));
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:last-child button:last-child {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:last-child button:last-child {
   border: 1px solid rgb(var(--ui-ink));
   background: rgb(var(--ui-ink));
   color: rgb(var(--ui-on-ink));
 }
 
-html.flat-theme body > div[class~="z-[140]"] > div > div:last-child button:last-child:hover {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:last-child button:last-child:hover {
   background: rgb(var(--ui-ink) / 0.85);
 }
 
-html.flat-theme body > div[class~="z-[140]"] :is(a, button):focus-visible {
+html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] :is(a, button):focus-visible {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: 2px;
 }
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index 8d167323e6e4..608bbbe43fac 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -90,7 +90,7 @@
                   <span class="hidden md:inline">{{ t('admin.accounts.moreActions') }}</span>
                   <Icon name="chevronDown" size="xs" class="ml-1 hidden md:inline" />
                 </button>
-                <Teleport to="body">
+                <Teleport to="#overlay-root">
                   <div
                     v-if="showAccountToolsDropdown"
                     data-ui="account-tools-panel"
diff --git a/frontend/src/views/admin/RedeemView.vue b/frontend/src/views/admin/RedeemView.vue
index 46a182a70d1a..e7ff0729ab94 100644
--- a/frontend/src/views/admin/RedeemView.vue
+++ b/frontend/src/views/admin/RedeemView.vue
@@ -277,7 +277,7 @@
     />
 
     <!-- Generate Codes Dialog -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div data-ui="h2-dlg" v-if="showGenerateDialog" class="fixed inset-0 z-50 flex items-center justify-center">
         <div class="fixed inset-0 bg-black/50" @click="showGenerateDialog = false"></div>
         <div
@@ -414,7 +414,7 @@
     </Teleport>
 
     <!-- Batch Update Dialog -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div data-ui="h2-dlg"
         v-if="showBatchUpdateDialog"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
@@ -528,7 +528,7 @@
     </Teleport>
 
     <!-- Generated Codes Result Dialog -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div v-if="showResultDialog" class="fixed inset-0 z-50 flex items-center justify-center p-4">
         <div class="fixed inset-0 bg-black/50" @click="closeResultDialog"></div>
         <div class="relative z-10 w-full max-w-lg rounded-xl bg-white shadow-xl dark:bg-dark-800">
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index a52c23ba07c9..1141668fb82b 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -681,7 +681,7 @@
     </TablePageLayout>
 
     <!-- Action Menu (Teleported) -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div
         v-if="activeMenuId !== null && menuPosition"
         class="action-menu-content fixed z-[9999] w-48 overflow-hidden rounded-xl bg-white shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
diff --git a/frontend/src/views/user/BatchImageGuideView.vue b/frontend/src/views/user/BatchImageGuideView.vue
index f807476284f0..3d843b387901 100644
--- a/frontend/src/views/user/BatchImageGuideView.vue
+++ b/frontend/src/views/user/BatchImageGuideView.vue
@@ -278,7 +278,7 @@
       </template>
     </TablePageLayout>
 
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div
         v-if="openMoreJobId"
         class="fixed z-[9999] w-44 overflow-hidden rounded-xl bg-white py-1 text-sm shadow-lg ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
@@ -312,7 +312,7 @@
       </div>
     </Teleport>
 
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div
         v-if="promptPopover.visible"
         class="batch-prompt-popover fixed z-[9999] rounded-lg border border-gray-200 bg-white p-3 text-sm text-gray-800 shadow-xl ring-1 ring-black/5 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-100 dark:ring-white/10"
diff --git a/frontend/src/views/user/KeysView.vue b/frontend/src/views/user/KeysView.vue
index d6011aaf06f3..5411fad537ab 100644
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -1130,7 +1130,7 @@
     </BaseDialog>
 
     <!-- Group Selector Dropdown (Teleported to body to avoid overflow clipping) -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <div
         v-if="groupSelectorKeyId !== null && dropdownPosition"
         ref="dropdownRef"
diff --git a/frontend/src/views/user/PaymentView.vue b/frontend/src/views/user/PaymentView.vue
index 4877b5ae6313..c27ed9f5d2bc 100644
--- a/frontend/src/views/user/PaymentView.vue
+++ b/frontend/src/views/user/PaymentView.vue
@@ -232,7 +232,7 @@
       </template>
     </div>
     <!-- Renewal Plan Selection Modal -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <Transition name="modal">
         <div v-if="showRenewalModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4" @click.self="closeRenewalModal">
           <div class="relative flex max-h-full w-full max-w-lg flex-col rounded-2xl border border-gray-200 bg-white p-6 shadow-2xl dark:border-dark-700 dark:bg-dark-900">
@@ -249,7 +249,7 @@
       </Transition>
     </Teleport>
     <!-- Image Preview Overlay -->
-    <Teleport to="body">
+    <Teleport to="#overlay-root">
       <Transition name="modal">
         <div data-ui="image-lightbox" v-if="previewImage" class="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 backdrop-blur-sm" @click="previewImage = ''">
           <img :src="previewImage" alt="" class="max-h-[85vh] max-w-[90vw] rounded-xl object-contain shadow-2xl" />

From 1f24a8da5ef7a68253b45529abc50929c9f08808 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Wed, 30 Sep 2026 13:58:32 +0800
Subject: [PATCH 2/3] perf(ui): lock body scroll with attributes, not a class
 or inline style

With overlays out of <body>'s child list, dialogs still cost ~170 ms per
open/close on /admin/accounts: the scroll lock toggled body.modal-open
(BaseDialog) or an inline body overflow (announcement list and popup),
and a class or style change on <body> invalidates every element (the
console theme matches [class~=]/[class*=] and :not([style]) widely).

The lock is now an attribute no other selector uses, which restyles only
<body>: body[data-modal-open] (dialogStack, still reference counted) and
body[data-announcement-open] (announcement bell and popup, same set/clear
points as before). Same overflow: hidden; the scroll-lock specs assert
the attribute instead of the class / inline style.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/components/common/AnnouncementBell.vue   |  5 +++--
 frontend/src/components/common/AnnouncementPopup.vue  |  8 ++++----
 frontend/src/components/common/BaseDialog.vue         |  2 +-
 .../common/__tests__/AnnouncementPopup.spec.ts        |  4 ++--
 .../common/__tests__/BaseDialog.scrollLock.spec.ts    |  2 +-
 .../components/common/__tests__/BaseDialog.spec.ts    |  4 ++--
 frontend/src/components/common/dialogStack.ts         | 11 ++++++-----
 frontend/src/style.css                                |  5 +++--
 8 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/common/AnnouncementBell.vue b/frontend/src/components/common/AnnouncementBell.vue
index e653b78839bd..f271e9c64e2b 100644
--- a/frontend/src/components/common/AnnouncementBell.vue
+++ b/frontend/src/components/common/AnnouncementBell.vue
@@ -413,13 +413,14 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   document.removeEventListener('keydown', handleEscape)
-  document.body.style.overflow = ''
+  document.body.removeAttribute('data-announcement-open')
 })
 
 watch(
   [isModalOpen, detailModalOpen, () => announcementStore.currentPopup],
   ([modal, detail, popup]) => {
-    document.body.style.overflow = (modal || detail || popup) ? 'hidden' : ''
+    // body scroll lock (style.css); an attribute, not an inline style: that would restyle the whole page
+    document.body.toggleAttribute('data-announcement-open', Boolean(modal || detail || popup))
   }
 )
 </script>
diff --git a/frontend/src/components/common/AnnouncementPopup.vue b/frontend/src/components/common/AnnouncementPopup.vue
index ff003286de1f..f0fec5b72435 100644
--- a/frontend/src/components/common/AnnouncementPopup.vue
+++ b/frontend/src/components/common/AnnouncementPopup.vue
@@ -138,14 +138,14 @@ function handleDismiss() {
   announcementStore.dismissPopup()
 }
 
-// Manage body overflow — only set, never unset (bell component handles restore)
+// Manage the body scroll lock (data-announcement-open, style.css) — only set, never unset (bell component handles restore)
 watch(
   displayedAnnouncement,
   (popup) => {
     if (popup) {
-      document.body.style.overflow = 'hidden'
+      document.body.setAttribute('data-announcement-open', '')
     } else if (props.preview) {
-      document.body.style.overflow = ''
+      document.body.removeAttribute('data-announcement-open')
     }
   },
   { immediate: true },
@@ -153,7 +153,7 @@ watch(
 
 onBeforeUnmount(() => {
   if (props.preview) {
-    document.body.style.overflow = ''
+    document.body.removeAttribute('data-announcement-open')
   }
 })
 </script>
diff --git a/frontend/src/components/common/BaseDialog.vue b/frontend/src/components/common/BaseDialog.vue
index 74da6d4337ab..dc93b8987f7b 100644
--- a/frontend/src/components/common/BaseDialog.vue
+++ b/frontend/src/components/common/BaseDialog.vue
@@ -166,7 +166,7 @@ watch(
     if (isOpen) {
       // 保存当前焦点元素
       previousActiveElement = document.activeElement as HTMLElement
-      // 注册到共享对话框栈:body.modal-open 按引用计数管理,关闭嵌套子级时父级仍保持滚动锁定
+      // 注册到共享对话框栈:body[data-modal-open] 按引用计数管理,关闭嵌套子级时父级仍保持滚动锁定
       registerDialog(dialogId, props.zIndex)
 
       // 等待DOM更新后设置焦点到对话框(仅当自己仍是栈顶,避免抢走更晚打开的对话框的焦点)
diff --git a/frontend/src/components/common/__tests__/AnnouncementPopup.spec.ts b/frontend/src/components/common/__tests__/AnnouncementPopup.spec.ts
index 0770971c7300..f245eefad6b6 100644
--- a/frontend/src/components/common/__tests__/AnnouncementPopup.spec.ts
+++ b/frontend/src/components/common/__tests__/AnnouncementPopup.spec.ts
@@ -40,7 +40,7 @@ describe('AnnouncementPopup', () => {
 
   afterEach(() => {
     document.body.innerHTML = ''
-    document.body.style.overflow = ''
+    document.body.removeAttribute('data-announcement-open')
   })
 
   it('renders mixed Markdown and HTML inside the shared styled container', async () => {
@@ -106,7 +106,7 @@ describe('AnnouncementPopup', () => {
     expect(dismissPopup).not.toHaveBeenCalled()
 
     await wrapper.setProps({ announcement: null })
-    expect(document.body.style.overflow).toBe('')
+    expect(document.body.hasAttribute('data-announcement-open')).toBe(false)
     wrapper.unmount()
   })
 
diff --git a/frontend/src/components/common/__tests__/BaseDialog.scrollLock.spec.ts b/frontend/src/components/common/__tests__/BaseDialog.scrollLock.spec.ts
index 3e4182f3c274..e12e08ab1e6b 100644
--- a/frontend/src/components/common/__tests__/BaseDialog.scrollLock.spec.ts
+++ b/frontend/src/components/common/__tests__/BaseDialog.scrollLock.spec.ts
@@ -8,7 +8,7 @@ function dialog(show = true) {
   return mount(BaseDialog, { props: { show, title: 'Details' }, global: { stubs: { Icon: true } } })
 }
 
-const locked = () => document.body.classList.contains('modal-open')
+const locked = () => document.body.hasAttribute('data-modal-open')
 
 describe('dialog body scroll lock', () => {
   it('keeps the body locked when a hidden sibling mounts or unmounts', () => {
diff --git a/frontend/src/components/common/__tests__/BaseDialog.spec.ts b/frontend/src/components/common/__tests__/BaseDialog.spec.ts
index b59b3f8b1d71..c43277460a01 100644
--- a/frontend/src/components/common/__tests__/BaseDialog.spec.ts
+++ b/frontend/src/components/common/__tests__/BaseDialog.spec.ts
@@ -10,7 +10,7 @@ vi.mock('vue-i18n', () => ({
 describe('BaseDialog', () => {
   afterEach(() => {
     document.body.innerHTML = ''
-    document.body.classList.remove('modal-open')
+    document.body.removeAttribute('data-modal-open')
   })
 
   it('resets body scroll position when reopened', async () => {
@@ -54,7 +54,7 @@ describe('BaseDialog', () => {
     expect(outer.emitted('close')).toBeUndefined()
 
     await inner.setProps({ show: false })
-    expect(document.body.classList.contains('modal-open')).toBe(true)
+    expect(document.body.hasAttribute('data-modal-open')).toBe(true)
 
     inner.unmount()
     outer.unmount()
diff --git a/frontend/src/components/common/dialogStack.ts b/frontend/src/components/common/dialogStack.ts
index a3da051abf7b..4f125105bacd 100644
--- a/frontend/src/components/common/dialogStack.ts
+++ b/frontend/src/components/common/dialogStack.ts
@@ -5,8 +5,9 @@ import { shallowReactive } from 'vue'
  *
  * - Keyboard handling (Escape, Tab cycling) and auto-focus only act on the top-most dialog,
  *   so a confirm nested inside an editor no longer closes the editor as well.
- * - The `body.modal-open` scroll lock is reference counted: added on the first registration,
- *   removed on the last unregistration, instead of every dialog toggling it on its own.
+ * - The `body[data-modal-open]` scroll lock is reference counted: added on the first registration,
+ *   removed on the last unregistration, instead of every dialog toggling it on its own. It is an
+ *   attribute no other selector uses: a class or inline-style change on <body> restyles the whole page.
  * - `dialogLayer` stacks nested dialogs ten z-index steps above the previous one so a child
  *   always paints above its parent even when both use the default z-index.
  */
@@ -27,7 +28,7 @@ export const DEFAULT_DIALOG_Z_INDEX = 50
 export const GATE_DIALOG_Z_INDEX = 80
 
 const LAYER_STEP = 10
-const BODY_LOCK_CLASS = 'modal-open'
+const BODY_LOCK_ATTRIBUTE = 'data-modal-open'
 
 const dialogs = shallowReactive<DialogEntry[]>([])
 let sequence = 0
@@ -45,7 +46,7 @@ export function registerDialog(id: string, zIndex = DEFAULT_DIALOG_Z_INDEX): voi
   } else {
     dialogs.push({ id, zIndex })
   }
-  document.body.classList.add(BODY_LOCK_CLASS)
+  document.body.setAttribute(BODY_LOCK_ATTRIBUTE, '')
 }
 
 export function unregisterDialog(id: string): void {
@@ -54,7 +55,7 @@ export function unregisterDialog(id: string): void {
     dialogs.splice(index, 1)
   }
   if (dialogs.length === 0) {
-    document.body.classList.remove(BODY_LOCK_CLASS)
+    document.body.removeAttribute(BODY_LOCK_ATTRIBUTE)
   }
 }
 
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 9e15ef93224e..7f3669863fbb 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -429,8 +429,9 @@
     @apply flex-shrink-0;
   }
 
-  /* 防止body滚动的工具类 */
-  body.modal-open {
+  /* 对话框/公告弹窗打开时禁止 body 滚动(dialogStack 与公告组件设置的属性;<body> 的 class 或内联样式变化会让整页重算样式) */
+  body[data-modal-open],
+  body[data-announcement-open] {
     overflow: hidden;
   }
 

From 4d1c9e74ed8b08d9a4e1f56d1286c3bd3310315d Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Wed, 30 Sep 2026 14:02:29 +0800
Subject: [PATCH 3/3] perf(ui): retarget the three lowercase <teleport> tags to
 #overlay-root

BackupView (2) and SubscriptionsView (1) spell the tag in lowercase, so the
first pass missed them; every teleport now targets #overlay-root.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/views/admin/BackupView.vue        | 4 ++--
 frontend/src/views/admin/SubscriptionsView.vue | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/views/admin/BackupView.vue b/frontend/src/views/admin/BackupView.vue
index 7d19704bb804..5c61a2aca916 100644
--- a/frontend/src/views/admin/BackupView.vue
+++ b/frontend/src/views/admin/BackupView.vue
@@ -286,7 +286,7 @@
     </div>
 
     <!-- Cloudflare R2 Setup Guide Modal -->
-    <teleport to="body">
+    <teleport to="#overlay-root">
       <transition name="modal">
         <div v-if="showR2Guide" class="fixed inset-0 z-50 flex items-center justify-center p-4" data-ui="r2-guide h2-dlg h2-dlg-close" @mousedown.self="showR2Guide = false">
           <div class="fixed inset-0 bg-black/50" @click="showR2Guide = false"></div>
@@ -369,7 +369,7 @@
       </transition>
     </teleport>
     <!-- 分卷下载链接 -->
-    <teleport to="body">
+    <teleport to="#overlay-root">
       <transition name="modal">
         <div data-ui="h2-dlg h2-dlg-close"
           v-if="downloadPartsModalOpen"
diff --git a/frontend/src/views/admin/SubscriptionsView.vue b/frontend/src/views/admin/SubscriptionsView.vue
index cc7387e9ab94..5e2529ace62d 100644
--- a/frontend/src/views/admin/SubscriptionsView.vue
+++ b/frontend/src/views/admin/SubscriptionsView.vue
@@ -763,7 +763,7 @@
       @cancel="showResetQuotaConfirm = false"
     />
     <!-- Subscription Guide Modal -->
-    <teleport to="body">
+    <teleport to="#overlay-root">
       <transition name="modal">
         <div data-ui="h2-dlg h2-dlg-close" v-if="showGuideModal" class="fixed inset-0 z-50 flex items-center justify-center p-4" @mousedown.self="showGuideModal = false">
           <div class="fixed inset-0 bg-black/50" @click="showGuideModal = false"></div>