From c55eded3595bb7d7902071efb9dd2ec5e25aa55f Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Mon, 28 Sep 2026 21:15:19 +0800
Subject: [PATCH 01/11] wip(ui-el): wave 0 base for the Experiential Labs
 console theme

Remove the Apple v2 look; new console layer files (tokens, behaviour,
shell, controls, data, overlays, pages) imported from main.ts; functional
fixes rewritten as layout-only behaviour rules; unscoped leaks reverted
to upstream; Geist + Geist Mono self-hosted, MiSans 400/500/600; Lucide
icons (lucide-static 0.469.0) while the console theme is on.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 THIRD_PARTY_NOTICES.md                        |   46 +-
 .../fonts/geist/Geist-Variable.latin.woff2    |  Bin 0 -> 32968 bytes
 .../fonts/inter/Inter-Variable.latin.woff2    |  Bin 48256 -> 0 bytes
 frontend/src/assets/fonts/inter/OFL.txt       |   93 -
 frontend/src/components/common/DataTable.vue  |   39 +-
 .../components/common/NavigationProgress.vue  |   18 +-
 frontend/src/components/common/Select.vue     |    8 +-
 frontend/src/components/common/Toggle.vue     |    2 +-
 .../common/__tests__/DataTable.spec.ts        |    4 +-
 frontend/src/components/icons/Icon.vue        |   19 +
 frontend/src/components/icons/lucide.ts       |  222 +
 frontend/src/components/layout/AppHeader.vue  |    5 +-
 .../src/components/layout/TablePageLayout.vue |   14 +-
 .../StripePaymentInline.contrast.spec.ts      |    4 +-
 .../src/composables/usePresentationColors.ts  |  205 +-
 frontend/src/main.ts                          |   13 +-
 frontend/src/style.css                        | 6110 +----------------
 frontend/src/styles/console/behaviour.css     |  428 ++
 frontend/src/styles/console/controls.css      |    1 +
 frontend/src/styles/console/data.css          |    1 +
 frontend/src/styles/console/overlays.css      |    1 +
 .../src/styles/console/pages/accounts.css     |    1 +
 .../styles/console/pages/dashboard-usage.css  |    1 +
 .../console/pages/settings-ops-public.css     |    1 +
 .../pages/users-groups-proxies-keys.css       |    1 +
 frontend/src/styles/console/shell.css         |    1 +
 frontend/src/styles/console/tokens.css        |  627 ++
 frontend/src/styles/flat-theme.css            |  792 ---
 frontend/src/styles/theme.css                 |   16 +-
 frontend/src/utils/flatTheme.ts               |   19 +-
 frontend/src/views/HomeView.vue               |   90 +-
 frontend/tailwind.config.js                   |   27 +-
 32 files changed, 1550 insertions(+), 7259 deletions(-)
 create mode 100644 frontend/src/assets/fonts/geist/Geist-Variable.latin.woff2
 delete mode 100644 frontend/src/assets/fonts/inter/Inter-Variable.latin.woff2
 delete mode 100644 frontend/src/assets/fonts/inter/OFL.txt
 create mode 100644 frontend/src/components/icons/lucide.ts
 create mode 100644 frontend/src/styles/console/behaviour.css
 create mode 100644 frontend/src/styles/console/controls.css
 create mode 100644 frontend/src/styles/console/data.css
 create mode 100644 frontend/src/styles/console/overlays.css
 create mode 100644 frontend/src/styles/console/pages/accounts.css
 create mode 100644 frontend/src/styles/console/pages/dashboard-usage.css
 create mode 100644 frontend/src/styles/console/pages/settings-ops-public.css
 create mode 100644 frontend/src/styles/console/pages/users-groups-proxies-keys.css
 create mode 100644 frontend/src/styles/console/shell.css
 create mode 100644 frontend/src/styles/console/tokens.css
 delete mode 100644 frontend/src/styles/flat-theme.css

diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md
index 6549edee1a69..a7082c57d085 100644
--- a/THIRD_PARTY_NOTICES.md
+++ b/THIRD_PARTY_NOTICES.md
@@ -38,10 +38,48 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
-## Inter
+## Geist and Geist Mono
 
-The frontend includes the Inter 4.001 variable font (weights 100-900) by The Inter Project Authors (https://github.com/rsms/inter), the Latin subset file `files/inter-latin-wght-normal.woff2` of the npm package [`@fontsource-variable/inter` 5.3.0](https://www.npmjs.com/package/@fontsource-variable/inter) with no glyph changes. The font is distributed under the SIL Open Font License 1.1, included at `frontend/src/assets/fonts/inter/OFL.txt`.
+The frontend includes the Geist and Geist Mono variable fonts (weights 100-900) by Vercel, taken from the npm package [`geist` 1.7.2](https://www.npmjs.com/package/geist) (`dist/fonts/geist-sans/Geist-Variable.woff2` and `dist/fonts/geist-mono/GeistMono-Variable.woff2`) and subset to the Latin range with fontTools (no other glyph changes). The fonts are distributed under the SIL Open Font License 1.1, included at `frontend/src/assets/fonts/geist/OFL.txt`.
 
-## Geist Mono
+## Lucide
 
-The frontend includes the Geist Mono variable font by Vercel, taken from the npm package [`geist` 1.7.2](https://www.npmjs.com/package/geist) and subset to the Latin range with fontTools (no other glyph changes). The font is distributed under the SIL Open Font License 1.1, included at `frontend/src/assets/fonts/geist/OFL.txt`.
+The frontend includes icon shapes from [Lucide](https://lucide.dev) 0.469.0, copied without changes from the file `icon-nodes.json` of the npm package [`lucide-static` 0.469.0](https://www.npmjs.com/package/lucide-static/v/0.469.0) into `frontend/src/components/icons/lucide.ts`; `Icon.vue` draws them while the console theme is on. Lucide is distributed under the ISC License below. The Lucide icons derived from Feather are also covered by Feather's MIT License, reproduced after it.
+
+### ISC License (Lucide)
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+### MIT License (Feather, for the Lucide icons derived from it)
+
+Copyright (c) 2013-2022 Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/frontend/src/assets/fonts/geist/Geist-Variable.latin.woff2 b/frontend/src/assets/fonts/geist/Geist-Variable.latin.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..87ca17423f05efb43ed6d555d71a1804cdbda3f3
GIT binary patch
literal 32968
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
U=<LMaA2PaG<k`x49IIZj1$QU5n*aa+

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/fonts/inter/Inter-Variable.latin.woff2 b/frontend/src/assets/fonts/inter/Inter-Variable.latin.woff2
deleted file mode 100644
index d15208de03cd1ad7c5199f0a0ce915fe841e4722..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 48256
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

diff --git a/frontend/src/assets/fonts/inter/OFL.txt b/frontend/src/assets/fonts/inter/OFL.txt
deleted file mode 100644
index 40589daa9de8..000000000000
--- a/frontend/src/assets/fonts/inter/OFL.txt
+++ /dev/null
@@ -1,93 +0,0 @@
-Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded,
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 5430f835103b..eabf74e24628 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -105,7 +105,7 @@
           <th
             v-if="selectable"
             scope="col"
-            class="sticky-header-cell w-11 min-w-11 px-3 py-2 text-center"
+            class="sticky-header-cell w-11 min-w-11 px-3 py-3 text-center"
           >
             <input
               type="checkbox"
@@ -124,7 +124,7 @@
             scope="col"
             :aria-sort="column.sortable ? getColumnAriaSort(column.key) : undefined"
             :class="[
-              'sticky-header-cell py-2 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400',
+              'sticky-header-cell py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400',
               getAdaptivePaddingClass(),
               { 'cursor-pointer hover:bg-gray-100 dark:hover:bg-dark-700': column.sortable },
               getStickyColumnClass(column, index),
@@ -170,10 +170,10 @@
       <tbody class="table-body divide-y divide-gray-200 bg-white dark:divide-dark-700 dark:bg-dark-900">
         <!-- Loading skeleton -->
         <tr v-if="loading" v-for="i in 5" :key="i">
-          <td v-if="selectable" class="w-11 min-w-11 px-3 py-2.5">
+          <td v-if="selectable" class="w-11 min-w-11 px-3 py-4">
             <div class="mx-auto h-4 w-4 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
           </td>
-          <td v-for="column in columns" :key="column.key" :class="['whitespace-nowrap py-2.5', getAdaptivePaddingClass()]">
+          <td v-for="column in columns" :key="column.key" :class="['whitespace-nowrap py-4', getAdaptivePaddingClass()]">
             <div class="animate-pulse">
               <div class="h-4 w-3/4 rounded bg-gray-200 dark:bg-dark-700"></div>
             </div>
@@ -217,11 +217,11 @@
             class="hover:bg-gray-50 dark:hover:bg-dark-800"
             :class="{
               'cursor-pointer': clickableRows,
-              'bg-primary-50/30 dark:bg-primary-900/5': selectable && isRowSelected(item.row, item.index)
+              'bg-primary-50/40 dark:bg-primary-900/10': selectable && isRowSelected(item.row, item.index)
             }"
             @click="clickableRows && emit('rowClick', item.row)"
           >
-            <td v-if="selectable" class="w-11 min-w-11 px-3 py-2.5 text-center">
+            <td v-if="selectable" class="w-11 min-w-11 px-3 py-4 text-center">
               <input
                 type="checkbox"
                 class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-dark-600 dark:bg-dark-800"
@@ -237,7 +237,7 @@
               :key="column.key"
               :data-column="column.key"
               :class="[
-                'whitespace-nowrap py-2.5 text-sm text-gray-900 dark:text-gray-100',
+                'whitespace-nowrap py-4 text-sm text-gray-900 dark:text-gray-100',
                 getAdaptivePaddingClass(),
                 getStickyColumnClass(column, colIndex),
                 column.class
@@ -560,7 +560,7 @@ const applySortState = (state: PersistedSortState | null) => {
 const getSortIndicatorClass = (key: string, order: 'asc' | 'desc') => {
   return sortKey.value === key && sortOrder.value === order
     ? 'text-primary-600 dark:text-primary-400'
-    : 'text-gray-400 transition-colors dark:text-dark-500'
+    : 'text-gray-300 transition-colors dark:text-dark-500'
 }
 
 const getColumnAriaSort = (key: string) => {
@@ -969,7 +969,11 @@ defineExpose({
   position: sticky;
   top: 0;
   z-index: 200;
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(249 250 251);
+}
+
+.dark .table-wrapper .table-header {
+  background-color: rgb(31 41 55);
 }
 
 /* 表体保持在表头下方 */
@@ -983,7 +987,11 @@ defineExpose({
   position: sticky;
   top: 0;
   z-index: 210; /* 必须高于所有表体内容 */
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(249 250 251);
+}
+
+.dark .sticky-header-cell {
+  background-color: rgb(31 41 55);
 }
 
 /* Sticky 列基础样式 */
@@ -1018,22 +1026,21 @@ defineExpose({
 }
 
 /* 表体 sticky 列背景 */
-/* 与表体底色一致:浅色 bg-white(surface),深色 dark:bg-dark-900(sunk) */
 tbody .sticky-col {
-  background-color: rgb(var(--ui-surface));
+  background-color: white;
 }
 
 .dark tbody .sticky-col {
-  background-color: rgb(var(--ui-sunk));
+  background-color: rgb(17 24 39);
 }
 
-/* hover 状态保持(与行 hover:bg-gray-50 / dark:hover:bg-dark-800 一致) */
+/* hover 状态保持 */
 tbody tr:hover .sticky-col {
-  background-color: rgb(var(--ui-canvas));
+  background-color: rgb(249 250 251);
 }
 
 .dark tbody tr:hover .sticky-col {
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(31 41 55);
 }
 
 /* 阴影只在可滚动时显示 */
diff --git a/frontend/src/components/common/NavigationProgress.vue b/frontend/src/components/common/NavigationProgress.vue
index c5c09532d73a..d6ea47ee1c77 100644
--- a/frontend/src/components/common/NavigationProgress.vue
+++ b/frontend/src/components/common/NavigationProgress.vue
@@ -43,13 +43,27 @@ const isVisible = computed(() => isLoading.value)
 .navigation-progress-bar {
   height: 100%;
   width: 100%;
-  background: theme('colors.primary.500');
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    theme('colors.primary.400') 20%,
+    theme('colors.primary.500') 50%,
+    theme('colors.primary.400') 80%,
+    transparent 100%
+  );
   animation: progress-slide 1.5s ease-in-out infinite;
 }
 
 /* 暗色模式下的进度条颜色 */
 :root.dark .navigation-progress-bar {
-  background: theme('colors.primary.400');
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    theme('colors.primary.500') 20%,
+    theme('colors.primary.400') 50%,
+    theme('colors.primary.500') 80%,
+    transparent 100%
+  );
 }
 
 /* 进度条滑动动画 */
diff --git a/frontend/src/components/common/Select.vue b/frontend/src/components/common/Select.vue
index 14f281ce4d7f..99233bce0261 100644
--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -522,9 +522,9 @@ onUnmounted(() => {
 <style scoped>
 .select-trigger {
   @apply flex w-full items-center justify-between gap-2;
-  @apply rounded-md px-2.5 py-[5px] text-sm;
+  @apply rounded-xl px-4 py-2.5 text-sm;
   @apply bg-white dark:bg-dark-800;
-  @apply border border-gray-300 dark:border-dark-600;
+  @apply border border-gray-200 dark:border-dark-600;
   @apply text-gray-900 dark:text-gray-100;
   @apply transition-all duration-200;
   @apply focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/30;
@@ -541,7 +541,7 @@ onUnmounted(() => {
 }
 
 .select-trigger-disabled {
-  @apply cursor-not-allowed bg-gray-100 text-muted dark:bg-dark-900 dark:text-muted;
+  @apply cursor-not-allowed bg-gray-100 opacity-60 dark:bg-dark-900;
 }
 
 .select-value {
@@ -588,7 +588,7 @@ onUnmounted(() => {
 
 .select-dropdown-portal .select-option {
   @apply flex items-center justify-between gap-2;
-  @apply px-3 py-1.5 text-sm;
+  @apply px-4 py-2.5 text-sm;
   @apply text-gray-700 dark:text-gray-300;
   @apply cursor-pointer transition-colors duration-150;
   @apply hover:bg-gray-50 dark:hover:bg-dark-700;
diff --git a/frontend/src/components/common/Toggle.vue b/frontend/src/components/common/Toggle.vue
index 7af29cdc7946..9e9b4333092c 100644
--- a/frontend/src/components/common/Toggle.vue
+++ b/frontend/src/components/common/Toggle.vue
@@ -8,7 +8,7 @@
     :aria-checked="modelValue"
   >
     <span
-      class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-1 ring-gray-900/5 transition duration-200 ease-in-out"
+      class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
       :class="[modelValue ? 'translate-x-5' : 'translate-x-0']"
     />
   </button>
diff --git a/frontend/src/components/common/__tests__/DataTable.spec.ts b/frontend/src/components/common/__tests__/DataTable.spec.ts
index 6c0acce6222d..b77831da693c 100644
--- a/frontend/src/components/common/__tests__/DataTable.spec.ts
+++ b/frontend/src/components/common/__tests__/DataTable.spec.ts
@@ -73,13 +73,13 @@ describe('DataTable', () => {
     expect(nameHeader.attributes('aria-sort')).toBe('ascending')
     expect(nameHeader.findAll('svg')).toHaveLength(2)
     expect(nameHeader.findAll('svg')[0].classes()).toContain('text-primary-600')
-    expect(nameHeader.findAll('svg')[1].classes()).toContain('text-gray-400')
+    expect(nameHeader.findAll('svg')[1].classes()).toContain('text-gray-300')
 
     await nameHeader.trigger('click')
     await wrapper.vm.$nextTick()
 
     expect(nameHeader.attributes('aria-sort')).toBe('descending')
-    expect(nameHeader.findAll('svg')[0].classes()).toContain('text-gray-400')
+    expect(nameHeader.findAll('svg')[0].classes()).toContain('text-gray-300')
     expect(nameHeader.findAll('svg')[1].classes()).toContain('text-primary-600')
   })
 
diff --git a/frontend/src/components/icons/Icon.vue b/frontend/src/components/icons/Icon.vue
index 7859adee7012..d92f3bdc53de 100644
--- a/frontend/src/components/icons/Icon.vue
+++ b/frontend/src/components/icons/Icon.vue
@@ -1,5 +1,6 @@
 <template>
   <svg
+    v-if="!lucideGlyph"
     :class="sizeClass"
     fill="none"
     viewBox="0 0 24 24"
@@ -8,10 +9,24 @@
   >
     <path stroke-linecap="round" stroke-linejoin="round" :d="iconPath" />
   </svg>
+  <svg
+    v-else
+    :class="[sizeClass, 'lucide', `lucide-${lucideGlyph.name}`]"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    :stroke-width="lucideStrokeWidth(strokeWidth)"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <LucideShapes :nodes="lucideGlyph.nodes" />
+  </svg>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { flatThemeActive } from '@/utils/flatTheme'
+import { LucideShapes, lucideIcons, lucideStrokeWidth, type LucideGlyph } from './lucide'
 
 const props = withDefaults(defineProps<{
   name: keyof typeof icons
@@ -137,6 +152,10 @@ const icons = {
 
 const iconPath = computed(() => icons[props.name])
 
+// Console theme (utils/flatTheme.ts): the Lucide glyph for the same name (./lucide.ts); theme off keeps the path above.
+const lucide: Record<keyof typeof icons, LucideGlyph> = lucideIcons
+const lucideGlyph = computed(() => (flatThemeActive.value ? lucide[props.name] : undefined))
+
 const sizeClass = computed(() => ({
   xs: 'h-3 w-3',
   sm: 'h-4 w-4',
diff --git a/frontend/src/components/icons/lucide.ts b/frontend/src/components/icons/lucide.ts
new file mode 100644
index 000000000000..2e9aa487f93b
--- /dev/null
+++ b/frontend/src/components/icons/lucide.ts
@@ -0,0 +1,222 @@
+/*
+ * Lucide glyphs for Icon.vue while the console theme is on (<html class="flat-theme">, utils/flatTheme.ts).
+ * With the theme off Icon.vue keeps its Heroicons paths.
+ *
+ * Source: npm lucide-static 0.469.0 (sha512-ravTgZodIVLO53rJyjIq0iuCRHs+kjd3dAfOcTbA41KCDfdy0Pt6Me8akkhda3jRpbIxjKe1PpYZOg2eQnI/lA==), file icon-nodes.json.
+ * Every `nodes` entry is a verbatim copy of that file's entry. The release is pinned on purpose: all Lucide icons
+ * bundled by the reference console (platform.experientiallabs.ai) match it, while lucide 1.x redrew a third of them.
+ * To add an Icon.vue name: copy its glyph from that file into `nodes` and map the name in `lucideIcons`
+ * (vue-tsc fails while an Icon.vue name has no glyph here).
+ *
+ * @license lucide-static v0.469.0 - ISC (portions derived from Feather: MIT, Cole Bemis; see THIRD_PARTY_NOTICES.md)
+ *
+ * ISC License
+ *
+ * Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+import { h, type FunctionalComponent } from 'vue'
+
+type LucideShape = 'circle' | 'ellipse' | 'line' | 'path' | 'polygon' | 'polyline' | 'rect'
+export type LucideIconNode = readonly (readonly [LucideShape, Readonly<Record<string, string>>])[]
+export interface LucideGlyph {
+  name: string
+  nodes: LucideIconNode
+}
+
+const nodes = {
+  'arrow-down': [['path', { d: 'M12 5v14' }], ['path', { d: 'm19 12-7 7-7-7' }]],
+  'arrow-left': [['path', { d: 'm12 19-7-7 7-7' }], ['path', { d: 'M19 12H5' }]],
+  'arrow-right': [['path', { d: 'M5 12h14' }], ['path', { d: 'm12 5 7 7-7 7' }]],
+  'arrow-right-left': [['path', { d: 'm16 3 4 4-4 4' }], ['path', { d: 'M20 7H4' }], ['path', { d: 'm8 21-4-4 4-4' }], ['path', { d: 'M4 17h16' }]],
+  'arrow-up': [['path', { d: 'm5 12 7-7 7 7' }], ['path', { d: 'M12 19V5' }]],
+  'arrow-up-down': [['path', { d: 'm21 16-4 4-4-4' }], ['path', { d: 'M17 20V4' }], ['path', { d: 'm3 8 4-4 4 4' }], ['path', { d: 'M7 4v16' }]],
+  'badge-check': [['path', { d: 'M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z' }], ['path', { d: 'm9 12 2 2 4-4' }]],
+  'ban': [['circle', { cx: '12', cy: '12', r: '10' }], ['path', { d: 'm4.9 4.9 14.2 14.2' }]],
+  'bell': [['path', { d: 'M10.268 21a2 2 0 0 0 3.464 0' }], ['path', { d: 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' }]],
+  'book-open': [['path', { d: 'M12 7v14' }], ['path', { d: 'M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z' }]],
+  'box': [['path', { d: 'M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z' }], ['path', { d: 'm3.3 7 8.7 5 8.7-5' }], ['path', { d: 'M12 22V12' }]],
+  'brain': [['path', { d: 'M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z' }], ['path', { d: 'M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z' }], ['path', { d: 'M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4' }], ['path', { d: 'M17.599 6.5a3 3 0 0 0 .399-1.375' }], ['path', { d: 'M6.003 5.125A3 3 0 0 0 6.401 6.5' }], ['path', { d: 'M3.477 10.896a4 4 0 0 1 .585-.396' }], ['path', { d: 'M19.938 10.5a4 4 0 0 1 .585.396' }], ['path', { d: 'M6 18a4 4 0 0 1-1.967-.516' }], ['path', { d: 'M19.967 17.484A4 4 0 0 1 18 18' }]],
+  'calculator': [['rect', { width: '16', height: '20', x: '4', y: '2', rx: '2' }], ['line', { x1: '8', x2: '16', y1: '6', y2: '6' }], ['line', { x1: '16', x2: '16', y1: '14', y2: '18' }], ['path', { d: 'M16 10h.01' }], ['path', { d: 'M12 10h.01' }], ['path', { d: 'M8 10h.01' }], ['path', { d: 'M12 14h.01' }], ['path', { d: 'M8 14h.01' }], ['path', { d: 'M12 18h.01' }], ['path', { d: 'M8 18h.01' }]],
+  'calendar': [['path', { d: 'M8 2v4' }], ['path', { d: 'M16 2v4' }], ['rect', { width: '18', height: '18', x: '3', y: '4', rx: '2' }], ['path', { d: 'M3 10h18' }]],
+  'chart-column': [['path', { d: 'M3 3v16a2 2 0 0 0 2 2h16' }], ['path', { d: 'M18 17V9' }], ['path', { d: 'M13 17V5' }], ['path', { d: 'M8 17v-3' }]],
+  'check': [['path', { d: 'M20 6 9 17l-5-5' }]],
+  'chevron-down': [['path', { d: 'm6 9 6 6 6-6' }]],
+  'chevron-left': [['path', { d: 'm15 18-6-6 6-6' }]],
+  'chevron-right': [['path', { d: 'm9 18 6-6-6-6' }]],
+  'chevron-up': [['path', { d: 'm18 15-6-6-6 6' }]],
+  'chevrons-up-down': [['path', { d: 'm7 15 5 5 5-5' }], ['path', { d: 'm7 9 5-5 5 5' }]],
+  'circle-alert': [['circle', { cx: '12', cy: '12', r: '10' }], ['line', { x1: '12', x2: '12', y1: '8', y2: '12' }], ['line', { x1: '12', x2: '12.01', y1: '16', y2: '16' }]],
+  'circle-check': [['circle', { cx: '12', cy: '12', r: '10' }], ['path', { d: 'm9 12 2 2 4-4' }]],
+  'circle-dollar-sign': [['circle', { cx: '12', cy: '12', r: '10' }], ['path', { d: 'M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' }], ['path', { d: 'M12 18V6' }]],
+  'circle-help': [['circle', { cx: '12', cy: '12', r: '10' }], ['path', { d: 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3' }], ['path', { d: 'M12 17h.01' }]],
+  'circle-user': [['circle', { cx: '12', cy: '12', r: '10' }], ['circle', { cx: '12', cy: '10', r: '3' }], ['path', { d: 'M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662' }]],
+  'circle-x': [['circle', { cx: '12', cy: '12', r: '10' }], ['path', { d: 'm15 9-6 6' }], ['path', { d: 'm9 9 6 6' }]],
+  'clipboard': [['rect', { width: '8', height: '4', x: '8', y: '2', rx: '1', ry: '1' }], ['path', { d: 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' }]],
+  'clock': [['circle', { cx: '12', cy: '12', r: '10' }], ['polyline', { points: '12 6 12 12 16 14' }]],
+  'cloud': [['path', { d: 'M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z' }]],
+  'copy': [['rect', { width: '14', height: '14', x: '8', y: '8', rx: '2', ry: '2' }], ['path', { d: 'M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2' }]],
+  'cpu': [['rect', { width: '16', height: '16', x: '4', y: '4', rx: '2' }], ['rect', { width: '6', height: '6', x: '9', y: '9', rx: '1' }], ['path', { d: 'M15 2v2' }], ['path', { d: 'M15 20v2' }], ['path', { d: 'M2 15h2' }], ['path', { d: 'M2 9h2' }], ['path', { d: 'M20 15h2' }], ['path', { d: 'M20 9h2' }], ['path', { d: 'M9 2v2' }], ['path', { d: 'M9 20v2' }]],
+  'credit-card': [['rect', { width: '20', height: '14', x: '2', y: '5', rx: '2' }], ['line', { x1: '2', x2: '22', y1: '10', y2: '10' }]],
+  'database': [['ellipse', { cx: '12', cy: '5', rx: '9', ry: '3' }], ['path', { d: 'M3 5V19A9 3 0 0 0 21 19V5' }], ['path', { d: 'M3 12A9 3 0 0 0 21 12' }]],
+  'download': [['path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }], ['polyline', { points: '7 10 12 15 17 10' }], ['line', { x1: '12', x2: '12', y1: '15', y2: '3' }]],
+  'ellipsis': [['circle', { cx: '12', cy: '12', r: '1' }], ['circle', { cx: '19', cy: '12', r: '1' }], ['circle', { cx: '5', cy: '12', r: '1' }]],
+  'external-link': [['path', { d: 'M15 3h6v6' }], ['path', { d: 'M10 14 21 3' }], ['path', { d: 'M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6' }]],
+  'eye': [['path', { d: 'M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0' }], ['circle', { cx: '12', cy: '12', r: '3' }]],
+  'eye-off': [['path', { d: 'M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49' }], ['path', { d: 'M14.084 14.158a3 3 0 0 1-4.242-4.242' }], ['path', { d: 'M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143' }], ['path', { d: 'm2 2 20 20' }]],
+  'file-text': [['path', { d: 'M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z' }], ['path', { d: 'M14 2v4a2 2 0 0 0 2 2h4' }], ['path', { d: 'M10 9H8' }], ['path', { d: 'M16 13H8' }], ['path', { d: 'M16 17H8' }]],
+  'filter': [['polygon', { points: '22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3' }]],
+  'flame': [['path', { d: 'M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z' }]],
+  'flask-conical': [['path', { d: 'M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2' }], ['path', { d: 'M6.453 15h11.094' }], ['path', { d: 'M8.5 2h7' }]],
+  'gift': [['rect', { x: '3', y: '8', width: '18', height: '4', rx: '1' }], ['path', { d: 'M12 8v13' }], ['path', { d: 'M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7' }], ['path', { d: 'M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5' }]],
+  'globe': [['circle', { cx: '12', cy: '12', r: '10' }], ['path', { d: 'M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20' }], ['path', { d: 'M2 12h20' }]],
+  'house': [['path', { d: 'M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8' }], ['path', { d: 'M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z' }]],
+  'inbox': [['polyline', { points: '22 12 16 12 14 15 10 15 8 12 2 12' }], ['path', { d: 'M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z' }]],
+  'info': [['circle', { cx: '12', cy: '12', r: '10' }], ['path', { d: 'M12 16v-4' }], ['path', { d: 'M12 8h.01' }]],
+  'key-round': [['path', { d: 'M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z' }], ['circle', { cx: '16.5', cy: '7.5', r: '.5', fill: 'currentColor' }]],
+  'layout-grid': [['rect', { width: '7', height: '7', x: '3', y: '3', rx: '1' }], ['rect', { width: '7', height: '7', x: '14', y: '3', rx: '1' }], ['rect', { width: '7', height: '7', x: '14', y: '14', rx: '1' }], ['rect', { width: '7', height: '7', x: '3', y: '14', rx: '1' }]],
+  'lightbulb': [['path', { d: 'M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5' }], ['path', { d: 'M9 18h6' }], ['path', { d: 'M10 22h4' }]],
+  'link': [['path', { d: 'M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' }], ['path', { d: 'M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' }]],
+  'lock': [['rect', { width: '18', height: '11', x: '3', y: '11', rx: '2', ry: '2' }], ['path', { d: 'M7 11V7a5 5 0 0 1 10 0v4' }]],
+  'log-in': [['path', { d: 'M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4' }], ['polyline', { points: '10 17 15 12 10 7' }], ['line', { x1: '15', x2: '3', y1: '12', y2: '12' }]],
+  'mail': [['rect', { width: '20', height: '16', x: '2', y: '4', rx: '2' }], ['path', { d: 'm22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7' }]],
+  'menu': [['line', { x1: '4', x2: '20', y1: '12', y2: '12' }], ['line', { x1: '4', x2: '20', y1: '6', y2: '6' }], ['line', { x1: '4', x2: '20', y1: '18', y2: '18' }]],
+  'message-circle-more': [['path', { d: 'M7.9 20A9 9 0 1 0 4 16.1L2 22Z' }], ['path', { d: 'M8 12h.01' }], ['path', { d: 'M12 12h.01' }], ['path', { d: 'M16 12h.01' }]],
+  'message-square-more': [['path', { d: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z' }], ['path', { d: 'M8 10h.01' }], ['path', { d: 'M12 10h.01' }], ['path', { d: 'M16 10h.01' }]],
+  'moon': [['path', { d: 'M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z' }]],
+  'play': [['polygon', { points: '6 3 20 12 6 21 6 3' }]],
+  'plus': [['path', { d: 'M5 12h14' }], ['path', { d: 'M12 5v14' }]],
+  'refresh-cw': [['path', { d: 'M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8' }], ['path', { d: 'M21 3v5h-5' }], ['path', { d: 'M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16' }], ['path', { d: 'M8 16H3v5' }]],
+  'rotate-cw': [['path', { d: 'M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8' }], ['path', { d: 'M21 3v5h-5' }]],
+  'search': [['circle', { cx: '11', cy: '11', r: '8' }], ['path', { d: 'm21 21-4.3-4.3' }]],
+  'server': [['rect', { width: '20', height: '8', x: '2', y: '2', rx: '2', ry: '2' }], ['rect', { width: '20', height: '8', x: '2', y: '14', rx: '2', ry: '2' }], ['line', { x1: '6', x2: '6.01', y1: '6', y2: '6' }], ['line', { x1: '6', x2: '6.01', y1: '18', y2: '18' }]],
+  'settings': [['path', { d: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z' }], ['circle', { cx: '12', cy: '12', r: '3' }]],
+  'shield-check': [['path', { d: 'M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z' }], ['path', { d: 'm9 12 2 2 4-4' }]],
+  'sparkles': [['path', { d: 'M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z' }], ['path', { d: 'M20 3v4' }], ['path', { d: 'M22 5h-4' }], ['path', { d: 'M4 17v2' }], ['path', { d: 'M5 18H3' }]],
+  'square-pen': [['path', { d: 'M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7' }], ['path', { d: 'M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z' }]],
+  'square-terminal': [['path', { d: 'm7 11 2-2-2-2' }], ['path', { d: 'M11 13h4' }], ['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2', ry: '2' }]],
+  'sun': [['circle', { cx: '12', cy: '12', r: '4' }], ['path', { d: 'M12 2v2' }], ['path', { d: 'M12 20v2' }], ['path', { d: 'm4.93 4.93 1.41 1.41' }], ['path', { d: 'm17.66 17.66 1.41 1.41' }], ['path', { d: 'M2 12h2' }], ['path', { d: 'M20 12h2' }], ['path', { d: 'm6.34 17.66-1.41 1.41' }], ['path', { d: 'm19.07 4.93-1.41 1.41' }]],
+  'trash-2': [['path', { d: 'M3 6h18' }], ['path', { d: 'M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6' }], ['path', { d: 'M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2' }], ['line', { x1: '10', x2: '10', y1: '11', y2: '17' }], ['line', { x1: '14', x2: '14', y1: '11', y2: '17' }]],
+  'trending-up': [['polyline', { points: '22 7 13.5 15.5 8.5 10.5 2 17' }], ['polyline', { points: '16 7 22 7 22 13' }]],
+  'triangle-alert': [['path', { d: 'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3' }], ['path', { d: 'M12 9v4' }], ['path', { d: 'M12 17h.01' }]],
+  'trophy': [['path', { d: 'M6 9H4.5a2.5 2.5 0 0 1 0-5H6' }], ['path', { d: 'M18 9h1.5a2.5 2.5 0 0 0 0-5H18' }], ['path', { d: 'M4 22h16' }], ['path', { d: 'M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22' }], ['path', { d: 'M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22' }], ['path', { d: 'M18 2H6v7a6 6 0 0 0 12 0V2Z' }]],
+  'upload': [['path', { d: 'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4' }], ['polyline', { points: '17 8 12 3 7 8' }], ['line', { x1: '12', x2: '12', y1: '3', y2: '15' }]],
+  'user': [['path', { d: 'M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2' }], ['circle', { cx: '12', cy: '7', r: '4' }]],
+  'user-plus': [['path', { d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }], ['circle', { cx: '9', cy: '7', r: '4' }], ['line', { x1: '19', x2: '19', y1: '8', y2: '14' }], ['line', { x1: '22', x2: '16', y1: '11', y2: '11' }]],
+  'users': [['path', { d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }], ['circle', { cx: '9', cy: '7', r: '4' }], ['path', { d: 'M22 21v-2a4 4 0 0 0-3-3.87' }], ['path', { d: 'M16 3.13a4 4 0 0 1 0 7.75' }]],
+  'x': [['path', { d: 'M18 6 6 18' }], ['path', { d: 'm6 6 12 12' }]],
+  'zap': [['path', { d: 'M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z' }]]
+} satisfies Record<string, LucideIconNode>
+
+const glyph = (name: keyof typeof nodes): LucideGlyph => ({ name, nodes: nodes[name] })
+
+/** Icon.vue name -> Lucide glyph, in Icon.vue's order. */
+export const lucideIcons = {
+  play: glyph('play'),
+  refresh: glyph('rotate-cw'), // the reference console's Refresh button; also spins as a loading mark
+  edit: glyph('square-pen'), // pencil on a square, like pencil-square
+  trash: glyph('trash-2'),
+  plus: glyph('plus'),
+  search: glyph('search'),
+  more: glyph('ellipsis'),
+  chart: glyph('chart-column'), // bar chart, same glyph as chartBar
+  clock: glyph('clock'),
+  link: glyph('link'),
+  sync: glyph('refresh-cw'), // two-arrow loop, kept apart from refresh
+  chevronDown: glyph('chevron-down'),
+  chevronRight: glyph('chevron-right'),
+  chevronLeft: glyph('chevron-left'),
+  check: glyph('check'),
+  x: glyph('x'),
+  eye: glyph('eye'),
+  eyeOff: glyph('eye-off'),
+  cog: glyph('settings'), // the reference console's settings gear
+  grid: glyph('layout-grid'), // four separate tiles, like squares-2x2
+  chat: glyph('message-circle-more'),
+  lightbulb: glyph('lightbulb'),
+  arrowRight: glyph('arrow-right'),
+  arrowLeft: glyph('arrow-left'),
+  arrowUp: glyph('arrow-up'),
+  arrowDown: glyph('arrow-down'),
+  arrowsUpDown: glyph('arrow-up-down'),
+  chevronUp: glyph('chevron-up'),
+  externalLink: glyph('external-link'),
+  checkCircle: glyph('circle-check'),
+  xCircle: glyph('circle-x'),
+  exclamationCircle: glyph('circle-alert'),
+  exclamationTriangle: glyph('triangle-alert'),
+  trophy: glyph('trophy'),
+  infoCircle: glyph('info'),
+  questionCircle: glyph('circle-help'),
+  user: glyph('user'),
+  userCircle: glyph('circle-user'),
+  userPlus: glyph('user-plus'),
+  users: glyph('users'), // Lucide has no three-person glyph
+  document: glyph('file-text'),
+  clipboard: glyph('clipboard'),
+  copy: glyph('copy'),
+  inbox: glyph('inbox'),
+  download: glyph('download'),
+  upload: glyph('upload'),
+  filter: glyph('filter'),
+  globe: glyph('globe'),
+  sort: glyph('chevrons-up-down'),
+  key: glyph('key-round'), // head top right like the Heroicons key; the reference API-key glyph
+  lock: glyph('lock'),
+  shield: glyph('shield-check'), // the Heroicons glyph carries the check too
+  menu: glyph('menu'),
+  calendar: glyph('calendar'),
+  home: glyph('house'),
+  terminal: glyph('square-terminal'), // framed prompt, like command-line
+  gift: glyph('gift'),
+  creditCard: glyph('credit-card'),
+  mail: glyph('mail'),
+  chartBar: glyph('chart-column'),
+  trendingUp: glyph('trending-up'),
+  database: glyph('database'),
+  cube: glyph('box'), // isometric box
+  bell: glyph('bell'),
+  bolt: glyph('zap'),
+  sparkles: glyph('sparkles'),
+  cloud: glyph('cloud'),
+  server: glyph('server'),
+  sun: glyph('sun'),
+  moon: glyph('moon'),
+  book: glyph('book-open'),
+  dollar: glyph('circle-dollar-sign'), // dollar in a circle, like currency-dollar
+  ban: glyph('ban'),
+  login: glyph('log-in'), // arrow into the door
+  swap: glyph('arrow-right-left'),
+  beaker: glyph('flask-conical'), // the Heroicons beaker is a conical flask
+  cpu: glyph('cpu'),
+  chatBubble: glyph('message-square-more'),
+  calculator: glyph('calculator'),
+  fire: glyph('flame'),
+  badge: glyph('badge-check'),
+  brain: glyph('brain') // by name (the Heroicons glyph was a flask stand-in)
+}
+
+/**
+ * Icon.vue stroke widths are Heroicons weights: 1.5 by default, 2 (once 3) where a caller wants a heavier mark.
+ * On Lucide glyphs they become the reference console's weights: 1.5 -> 1.8 (its regular weight), 2 -> 2 (its
+ * heavier one, e.g. on chevron-right and x), linear beyond (3 -> 2.4), so emphasis is kept but compressed.
+ */
+export function lucideStrokeWidth(heroiconsWidth: number): number {
+  return Math.round((1.8 + (Number(heroiconsWidth) - 1.5) * 0.4) * 100) / 100
+}
+
+/** The glyph's shapes; Icon.vue's <svg> carries viewBox, fill, stroke, caps and joins. */
+export const LucideShapes: FunctionalComponent<{ nodes: LucideIconNode }> = (props) =>
+  props.nodes.map(([shape, attrs]) => h(shape, attrs))
+LucideShapes.props = ['nodes']
diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue
index fa1fa789c1ba..752c8ed95559 100644
--- a/frontend/src/components/layout/AppHeader.vue
+++ b/frontend/src/components/layout/AppHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <header class="glass sticky top-0 z-30 border-b border-gray-200/50 dark:border-dark-700/50">
-    <div class="flex h-14 items-center justify-between gap-2 px-2 sm:px-4 md:px-6">
+    <div class="flex h-16 items-center justify-between gap-2 px-2 sm:px-4 md:px-6">
       <!-- Left: Mobile Menu Toggle + Page Title -->
       <div class="flex shrink-0 items-center gap-2 sm:gap-4">
         <button
@@ -12,7 +12,7 @@
         </button>
 
         <div class="hidden lg:block">
-          <h1 class="text-base font-semibold text-gray-900 dark:text-white">
+          <h1 class="text-lg font-semibold text-gray-900 dark:text-white">
             {{ pageTitle }}
           </h1>
           <p v-if="pageDescription" class="text-xs text-gray-500 dark:text-dark-400">
@@ -26,7 +26,6 @@
         <!-- Announcement Bell -->
         <AnnouncementBell v-if="user" />
 
-
         <!-- Docs Link -->
         <a
           v-if="docUrl"
diff --git a/frontend/src/components/layout/TablePageLayout.vue b/frontend/src/components/layout/TablePageLayout.vue
index d23198dd0629..590736daa97a 100644
--- a/frontend/src/components/layout/TablePageLayout.vue
+++ b/frontend/src/components/layout/TablePageLayout.vue
@@ -52,9 +52,8 @@ onUnmounted(() => {
 <style scoped>
 /* 桌面端：Flexbox 布局 */
 .table-page-layout {
-  @apply flex flex-col gap-4;
-  /* 减去 header(h-14) + lg:p-8 的上下padding，以及控制台主题桌面端内嵌面板的上下外边距 */
-  height: calc(100vh - 56px - 4rem - var(--ui-frame-offset, 0px));
+  @apply flex flex-col gap-6;
+  height: calc(100vh - 64px - 4rem); /* 减去 header + lg:p-8 的上下padding */
 }
 
 .layout-section-fixed {
@@ -67,8 +66,7 @@ onUnmounted(() => {
 
 /* 表格滚动容器 - 增强版表体滚动方案 */
 .table-scroll-container {
-  @apply flex flex-col overflow-hidden h-full bg-white dark:bg-dark-800 rounded-xl border border-gray-200 dark:border-dark-700 shadow-sm;
-  border-radius: var(--theme-radius-2xl, 0.75rem); /* console theme: card radius; upstream: rounded-xl */
+  @apply flex flex-col overflow-hidden h-full bg-white dark:bg-dark-800 rounded-2xl border border-gray-200 dark:border-dark-700 shadow-sm;
 }
 
 .table-scroll-container :deep(.table-wrapper) {
@@ -84,7 +82,7 @@ onUnmounted(() => {
 }
 
 .table-scroll-container :deep(thead) {
-  @apply bg-white dark:bg-dark-800;
+  @apply bg-gray-50/80 dark:bg-dark-800/80 backdrop-blur-sm;
 }
 
 .table-scroll-container :deep(tbody) {
@@ -92,11 +90,11 @@ onUnmounted(() => {
 }
 
 .table-scroll-container :deep(th) {
-  @apply px-3 py-2 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400 border-b border-gray-200 dark:border-dark-700;
+  @apply px-5 py-4 text-left text-sm font-medium text-gray-600 dark:text-dark-300 border-b border-gray-200 dark:border-dark-700;
 }
 
 .table-scroll-container :deep(td) {
-  @apply px-3 py-2.5 text-sm text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-dark-800;
+  @apply px-5 py-4 text-sm text-gray-700 dark:text-gray-300 border-b border-gray-100 dark:border-dark-800;
 }
 
 .table-scroll-container-unframed {
diff --git a/frontend/src/components/payment/__tests__/StripePaymentInline.contrast.spec.ts b/frontend/src/components/payment/__tests__/StripePaymentInline.contrast.spec.ts
index 1a0462ae0dc8..2b307b3ce84f 100644
--- a/frontend/src/components/payment/__tests__/StripePaymentInline.contrast.spec.ts
+++ b/frontend/src/components/payment/__tests__/StripePaymentInline.contrast.spec.ts
@@ -91,11 +91,11 @@ describe('StripePaymentInline amount contrast', () => {
 
   it('keeps the solid fill independent of the flat theme gradient token, even when the gradient is disabled', async () => {
     const header = await amountHeader()
-    const theme = postcss.parse(readFileSync(resolve(__dirname, '../../../styles/flat-theme.css'), 'utf8'))
+    const theme = postcss.parse(readFileSync(resolve(__dirname, '../../../styles/console/tokens.css'), 'utf8'))
     const headerElement = header.element as HTMLElement
     let flatGradient = ''
     theme.walkDecls('--theme-background-gradient-to-br', declaration => { flatGradient = declaration.value })
-    expect(flatGradient).toBe('linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from))')
+    expect(flatGradient).toBe('linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from))')
     // No local gradient-token override: the shipped flat theme keeps ownership.
     expect(headerElement.style.getPropertyValue('--theme-background-gradient-to-br')).toBe('')
     const declarations = declarationsFor(header.element)
diff --git a/frontend/src/composables/usePresentationColors.ts b/frontend/src/composables/usePresentationColors.ts
index 43f2126f6246..0892e40bbf63 100644
--- a/frontend/src/composables/usePresentationColors.ts
+++ b/frontend/src/composables/usePresentationColors.ts
@@ -1,37 +1,17 @@
 import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
-import { Chart, type Plugin, type ScriptableContext } from 'chart.js'
+import { Chart } from 'chart.js'
 
-// Console theme (Apple): canvas text uses the UI font stack (SF Pro / Inter + MiSans) instead of
-// Chart.js' Helvetica/Arial default; lines are 2px, doughnuts are rings, bars have rounded ends; legends
-// are small solid dots; tooltips are a light (dark) rounded panel without a caret, like a popover; the area
-// under a filled line fades from the line colour to transparent (Stocks / Health). Resting point markers
-// are dropped except where a value would otherwise be invisible or hard to place: a series with at most
-// three values, and a value with no neighbour on either side (a single point, or one between two gaps).
-// Text and grid lines that a chart does not colour itself take the theme's axis and grid colours.
-// Chart.js' own defaults are saved before the first change and restored when the theme is switched
-// off at runtime. Charts re-resolve these defaults on the update that follows the next color read.
-const SPARSE_SERIES_MAX_POINTS = 3
-const TOOLTIP_KEYS = ['backgroundColor', 'titleColor', 'bodyColor', 'footerColor', 'borderColor', 'borderWidth',
-  'cornerRadius', 'padding', 'boxPadding', 'usePointStyle', 'caretSize'] as const
-const LEGEND_LABEL_KEYS = ['usePointStyle', 'pointStyle', 'boxWidth', 'boxHeight', 'generateLabels'] as const
+// Chart.js takes resolved values, not CSS. While the console theme is on (html.flat-theme), canvas text uses the
+// UI font stack and the text and grid lines a chart does not colour itself take the theme's axis and grid tokens
+// (--theme-chart-axis, --theme-chart-grid in styles/console/tokens.css); everything else stays Chart.js' default.
+// Chart.js' own defaults are saved before the first change and restored when the theme is switched off at
+// runtime. Charts re-resolve these defaults on the update that follows the next color read.
 type ChartDefaultsSnapshot = {
   color: typeof Chart.defaults.color
   borderColor: typeof Chart.defaults.borderColor
   fontFamily: typeof Chart.defaults.font.family
-  lineBorderWidth: typeof Chart.defaults.elements.line.borderWidth
-  pointRadius: typeof Chart.defaults.elements.point.radius
-  pointHoverRadius: typeof Chart.defaults.elements.point.hoverRadius
-  // bar defaults exist only once a chart registered BarElement
-  barBorderRadius: unknown
-  doughnutCutout: typeof Chart.overrides.doughnut.cutout
-  // cutout normally lives in the doughnut dataset defaults, not in the overrides: restore by deleting
-  doughnutCutoutOwn: boolean
-  tooltip: Record<string, unknown>
-  legendLabels: Record<string, unknown>
 }
 let upstreamChartDefaults: ChartDefaultsSnapshot | null = null
-let consoleChartsActive = false
-const valueCounts = new WeakMap<object, { length: number; count: number }>()
 
 // `#rrggbb`, `#rrggbbaa`, `rgb(r, g, b)` and `rgba(r, g, b, a)`: channels, alpha, and how the alpha was written.
 type ParsedColor = { r: number; g: number; b: number; a: number; hex: boolean; alpha: string | null }
@@ -46,160 +26,25 @@ function parseColor(value: string): ParsedColor | null {
   return { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]), a: rgb[4] === undefined ? 1 : Number(rgb[4]), hex: false, alpha: rgb[4] ?? null }
 }
 
-function hasChartValue(value: unknown): boolean {
-  if (value === null || value === undefined) return false
-  if (typeof value === 'number') return Number.isFinite(value)
-  if (Array.isArray(value)) return value.length > 1 && hasChartValue(value[1])
-  if (typeof value === 'object' && 'y' in (value as Record<string, unknown>)) return hasChartValue((value as { y: unknown }).y)
-  return true
-}
-
-function countChartValues(data: unknown[]): number {
-  const cached = valueCounts.get(data)
-  if (cached && cached.length === data.length) return cached.count
-  const count = data.reduce<number>((total, value) => total + (hasChartValue(value) ? 1 : 0), 0)
-  valueCounts.set(data, { length: data.length, count })
-  return count
-}
-
-function restingPointRadius(): number {
-  const radius = upstreamChartDefaults?.pointRadius
-  return typeof radius === 'number' && radius > 0 ? radius : 3
-}
-
-function consolePointRadius(ctx: ScriptableContext<'line'>): number {
-  const data = (ctx.dataset?.data ?? []) as unknown[]
-  if (countChartValues(data) <= SPARSE_SERIES_MAX_POINTS) return restingPointRadius()
-  const index = ctx.dataIndex
-  if (typeof index !== 'number') return 0
-  return !hasChartValue(data[index - 1]) && !hasChartValue(data[index + 1]) ? restingPointRadius() : 0
-}
-
-type LegendLabel = { fillStyle?: unknown; strokeStyle?: unknown; lineWidth?: number; lineDash?: number[] }
-type GenerateLabels = (this: unknown, chart: Chart) => LegendLabel[]
-
-// Legend markers: a line series with a translucent area fill (`#rrggbbAA` or `rgba()`) is shown as a solid dot
-// in the line colour instead of a hollow ring.
-function consoleLegendLabels(this: unknown, chart: Chart): LegendLabel[] {
-  const base = upstreamChartDefaults?.legendLabels.generateLabels as GenerateLabels | undefined
-  const items = base ? base.call(this, chart) : []
-  for (const item of items) {
-    const fill = typeof item.fillStyle === 'string' ? parseColor(item.fillStyle) : null
-    if (typeof item.strokeStyle === 'string' && fill && fill.a < 1) {
-      item.fillStyle = item.strokeStyle
-      item.lineWidth = 0
-      item.lineDash = []
-    }
-  }
-  return items
-}
-
-// Area fills: a filled line whose fill is a translucent colour (`#rrggbbAA` or `rgba()`) fades from that colour
-// at the top of the chart area to transparent at the bottom. Only the resolved element option is swapped, right
-// before the filler draws it; the dataset keeps its colour string.
-const fadeCache = new WeakMap<object, { key: string; gradient: CanvasGradient }>()
-const areaFadePlugin: Plugin = {
-  id: 'consoleAreaFade',
-  beforeDatasetsDraw(chart) {
-    if (!consoleChartsActive) return
-    const area = chart.chartArea
-    if (!area || !(area.bottom > area.top)) return
-    chart.data.datasets.forEach((dataset, index) => {
-      const meta = chart.getDatasetMeta(index)
-      if (meta.type !== 'line' || meta.hidden || !(dataset as { fill?: unknown }).fill) return
-      const element = meta.dataset as unknown as { options?: Record<string, unknown> } | undefined
-      const options = element?.options
-      const raw = (dataset as { backgroundColor?: unknown }).backgroundColor
-      const fill = typeof raw === 'string' ? parseColor(raw) : null
-      if (!element || !options || !fill || fill.a >= 1 || Object.isFrozen(options)) return
-      const key = `${raw}:${area.top}:${area.bottom}`
-      let cached = fadeCache.get(element)
-      if (!cached || cached.key !== key) {
-        const alpha = Math.min(0.3, fill.a * 2.2)
-        const gradient = chart.ctx.createLinearGradient(0, area.top, 0, area.bottom)
-        gradient.addColorStop(0, `rgba(${fill.r}, ${fill.g}, ${fill.b}, ${alpha.toFixed(3)})`)
-        gradient.addColorStop(1, `rgba(${fill.r}, ${fill.g}, ${fill.b}, 0)`)
-        cached = { key, gradient }
-        fadeCache.set(element, cached)
-      }
-      options.backgroundColor = cached.gradient
-    })
-  }
-}
-let areaFadeRegistered = false
-
-function applyConsoleChartDefaults(styles: CSSStyleDeclaration, dark: boolean) {
-  const tooltip = Chart.defaults.plugins.tooltip as unknown as Record<string, unknown>
-  const legendLabels = Chart.defaults.plugins.legend.labels as unknown as Record<string, unknown>
+function applyConsoleChartDefaults(styles: CSSStyleDeclaration) {
   if (!upstreamChartDefaults) {
     upstreamChartDefaults = {
       color: Chart.defaults.color,
       borderColor: Chart.defaults.borderColor,
-      fontFamily: Chart.defaults.font.family,
-      lineBorderWidth: Chart.defaults.elements.line.borderWidth,
-      pointRadius: Chart.defaults.elements.point.radius,
-      pointHoverRadius: Chart.defaults.elements.point.hoverRadius,
-      barBorderRadius: Chart.defaults.elements.bar?.borderRadius,
-      doughnutCutout: Chart.overrides.doughnut.cutout,
-      doughnutCutoutOwn: Object.prototype.hasOwnProperty.call(Chart.overrides.doughnut, 'cutout'),
-      tooltip: Object.fromEntries(TOOLTIP_KEYS.map((key) => [key, tooltip[key]])),
-      legendLabels: Object.fromEntries(LEGEND_LABEL_KEYS.map((key) => [key, legendLabels[key]]))
+      fontFamily: Chart.defaults.font.family
     }
   }
-  if (!areaFadeRegistered) {
-    Chart.register(areaFadePlugin)
-    areaFadeRegistered = true
-  }
-  consoleChartsActive = true
-  const font = styles.getPropertyValue('--ui-font').trim()
-  if (font) Chart.defaults.font.family = font
-  Chart.defaults.color = styles.getPropertyValue('--theme-chart-axis').trim() || (dark ? '#a1a1a6' : '#69696e')
-  Chart.defaults.borderColor = styles.getPropertyValue('--theme-chart-grid').trim() || (dark ? '#26262a' : '#ececf0')
-  Chart.defaults.elements.line.borderWidth = 2
-  Chart.defaults.elements.point.radius = consolePointRadius as unknown as typeof Chart.defaults.elements.point.radius
-  Chart.defaults.elements.point.hoverRadius = 4
-  if (Chart.defaults.elements.bar) Chart.defaults.elements.bar.borderRadius = 4
-  Chart.overrides.doughnut.cutout = '68%'
-  const title = styles.getPropertyValue('--theme-chart-title').trim() || (dark ? '#f5f5f7' : '#1d1d1f')
-  const body = styles.getPropertyValue('--theme-chart-body').trim() || (dark ? '#a1a1a6' : '#6e6e73')
-  Object.assign(tooltip, {
-    backgroundColor: dark ? 'rgba(44, 44, 46, 0.96)' : 'rgba(255, 255, 255, 0.96)',
-    titleColor: title,
-    bodyColor: title,
-    footerColor: body,
-    borderColor: dark ? 'rgba(255, 255, 255, 0.14)' : 'rgba(0, 0, 0, 0.1)',
-    borderWidth: 0.5,
-    cornerRadius: 10,
-    padding: 10,
-    boxPadding: 5,
-    usePointStyle: true,
-    caretSize: 0
-  })
-  Object.assign(legendLabels, {
-    usePointStyle: true,
-    pointStyle: 'circle',
-    boxWidth: 7,
-    boxHeight: 7,
-    generateLabels: consoleLegendLabels
-  })
+  const token = (name: string) => styles.getPropertyValue(name).trim()
+  Chart.defaults.font.family = token('--ui-font') || upstreamChartDefaults.fontFamily
+  Chart.defaults.color = token('--theme-chart-axis') || upstreamChartDefaults.color
+  Chart.defaults.borderColor = token('--theme-chart-grid') || upstreamChartDefaults.borderColor
 }
 
 function restoreUpstreamChartDefaults() {
-  consoleChartsActive = false
   if (!upstreamChartDefaults) return
   Chart.defaults.color = upstreamChartDefaults.color
   Chart.defaults.borderColor = upstreamChartDefaults.borderColor
   Chart.defaults.font.family = upstreamChartDefaults.fontFamily
-  Chart.defaults.elements.line.borderWidth = upstreamChartDefaults.lineBorderWidth
-  Chart.defaults.elements.point.radius = upstreamChartDefaults.pointRadius
-  Chart.defaults.elements.point.hoverRadius = upstreamChartDefaults.pointHoverRadius
-  if (Chart.defaults.elements.bar) {
-    Chart.defaults.elements.bar.borderRadius = (upstreamChartDefaults.barBorderRadius ?? 0) as typeof Chart.defaults.elements.bar.borderRadius
-  }
-  if (upstreamChartDefaults.doughnutCutoutOwn) Chart.overrides.doughnut.cutout = upstreamChartDefaults.doughnutCutout
-  else delete (Chart.overrides.doughnut as unknown as Record<string, unknown>).cutout
-  Object.assign(Chart.defaults.plugins.tooltip as unknown as Record<string, unknown>, upstreamChartDefaults.tooltip)
-  Object.assign(Chart.defaults.plugins.legend.labels as unknown as Record<string, unknown>, upstreamChartDefaults.legendLabels)
   upstreamChartDefaults = null
 }
 
@@ -219,26 +64,22 @@ const seriesDefaults = [
 ] as const
 // Colour by hue: upstream charts draw with Tailwind literals (a 500 shade; gray-400 for "other"). With the console
 // theme off tone() / toneText() return the literal itself, so the upstream colours stay exact. Under the theme the
-// literal's hue family (the families of tailwind.config.js) resolves to the matching chart series token for marks
-// (lines, bars, arcs, dots, SVG strokes; >= 3:1 on the chart background) and to the family's text role for text
-// drawn in that colour (axis ticks and titles, labels; >= 4.5:1). The literal's alpha and notation are kept, so
-// `${hex}20` fills and rgba() fills still fade and still read as translucent in the legend.
-type HueFamily = 'info' | 'success' | 'warning' | 'danger' | 'purple' | 'pink' | 'teal' | 'indigo' | 'gray'
+// literal's hue family (the family tailwind.config.js folds it into) resolves to that family's chart mark token
+// for marks (lines, bars, arcs, dots, SVG strokes; >= 3:1 on the chart background) and to the family's text role
+// for text drawn in that colour (axis ticks and titles, labels; >= 4.5:1). The literal's alpha and notation are
+// kept, so `${hex}20` fills and rgba() fills still fade and still read as translucent in the legend.
+type HueFamily = 'info' | 'success' | 'warning' | 'danger' | 'purple' | 'gray'
 const HUES: ReadonlyArray<readonly [number, number, number, HueFamily]> = [
-  [59, 130, 246, 'info'], // blue
-  [16, 185, 129, 'success'], [34, 197, 94, 'success'], [132, 204, 22, 'success'], // emerald, green, lime
+  [59, 130, 246, 'info'], [14, 165, 233, 'info'], [6, 182, 212, 'info'], [99, 102, 241, 'info'], // blue, sky, cyan, indigo
+  [16, 185, 129, 'success'], [34, 197, 94, 'success'], [132, 204, 22, 'success'], [20, 184, 166, 'success'], // emerald, green, lime, teal
   [245, 158, 11, 'warning'], [249, 115, 22, 'warning'], [234, 179, 8, 'warning'], // amber, orange, yellow
   [239, 68, 68, 'danger'], [244, 63, 94, 'danger'], // red, rose
-  [139, 92, 246, 'purple'], [168, 85, 247, 'purple'], [217, 70, 239, 'purple'], // violet, purple, fuchsia
-  [236, 72, 153, 'pink'],
-  [20, 184, 166, 'teal'], [6, 182, 212, 'teal'], [14, 165, 233, 'teal'], // teal, cyan, sky
-  [99, 102, 241, 'indigo'],
+  [139, 92, 246, 'purple'], [168, 85, 247, 'purple'], [217, 70, 239, 'purple'], [236, 72, 153, 'purple'], // violet, purple, fuchsia, pink
   [156, 163, 175, 'gray'] // gray-400
 ]
 const MARK_TOKENS: Record<HueFamily, string> = {
-  info: '--theme-chart-series-1', success: '--theme-chart-series-2', warning: '--theme-chart-series-3',
-  danger: '--theme-chart-series-4', purple: '--theme-chart-series-5', pink: '--theme-chart-series-6',
-  teal: '--theme-chart-series-7', indigo: '--theme-chart-series-9', gray: '--theme-chart-gray'
+  info: '--theme-chart-info', success: '--theme-chart-success', warning: '--theme-chart-warning',
+  danger: '--theme-chart-danger', purple: '--theme-chart-purple', gray: '--theme-chart-gray'
 }
 const textToken = (family: HueFamily) => family === 'gray' ? '--theme-text-gray-400' : `--theme-text-${family}-500`
 type HuePalette = Partial<Record<HueFamily, ParsedColor>>
@@ -293,7 +134,7 @@ export function usePresentationColors() {
     queued = false
     if (!active) return
     const root = document.documentElement, styles = getComputedStyle(root), dark = root.classList.contains('dark')
-    if (root.classList.contains('flat-theme')) applyConsoleChartDefaults(styles, dark)
+    if (root.classList.contains('flat-theme')) applyConsoleChartDefaults(styles)
     else restoreUpstreamChartDefaults()
     const isColor = (value: string) => !!value && typeof CSS !== 'undefined' && CSS.supports('color', value)
     const next: Record<keyof typeof defaults, string> & { series: string[] } = { ...colors.value }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index fc0ee5ac5ce6..9e87692f486f 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -7,7 +7,18 @@ import { useAppStore } from '@/stores/app'
 import { updateFavicon } from '@/utils/branding'
 import { isIOSDevice } from '@/utils/device'
 import './style.css'
-import './styles/flat-theme.css'
+// Console theme (html.flat-theme), plain CSS after the Tailwind output, in cascade order: tokens, the frozen
+// behaviour layer, then the look by area and by page group.
+import './styles/console/tokens.css'
+import './styles/console/behaviour.css'
+import './styles/console/shell.css'
+import './styles/console/controls.css'
+import './styles/console/data.css'
+import './styles/console/overlays.css'
+import './styles/console/pages/accounts.css'
+import './styles/console/pages/dashboard-usage.css'
+import './styles/console/pages/users-groups-proxies-keys.css'
+import './styles/console/pages/settings-ops-public.css'
 import { applyFlatTheme } from '@/utils/flatTheme'
 
 function initIOSViewportZoomFix() {
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 75042092c6b5..4399d59e8589 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -780,6098 +780,26 @@
 }
 
 /* ==========================================================================
- * Console theme recipes
+ * Console theme recipes (html.flat-theme; owner: the controls agent)
  *
- * The recipes above are upstream's. While <html> carries `flat-theme`, the
- * blocks below restate them in the console language (styles/flat-theme.css
- * tokens): Apple's Human Interface on the web, macOS Tahoe / 27 materials.
- * Colour only where upstream puts colour: primary actions, links, the current
- * or selected item, switches that are on, status and platform badges, the
- * KPI and quick-action tiles (the figures and hover tints upstream colours),
- * the balance capsule, the avatar, code tags, the bulk-action bar's rule,
- * charts; everything else is neutral. The page
- * sits on a neutral tonal backdrop; Liquid Glass only for chrome that content
- * moves beneath (the floating sidebar, the toolbar capsule, menus, popovers,
- * the sticky table header, the bulk-action bar, the dialog scrim); tactile
- * controls (glass capsules, a glossy blue primary, recessed fields, recessed
- * tracks with glossy thumbs and knobs); white 20px cards with smooth layered
- * shadows; 220ms calm motion, a 0.98 press and a 1px hover lift.
- * `:where()` keeps the upstream specificity so page utilities (px-3, w-full,
- * ...) still win; the blocks that restyle upstream markup built only from
- * utilities (app frame, sidebar, switches, checkboxes, pagination, row menu,
- * KPI cards) use plain selectors and say so.
+ * Upstream's recipes above are restated for the console theme here and only
+ * here. This is the one `@layer components` block that Tailwind emits after
+ * upstream's recipes and before the utilities, so a restatement written as
+ * `:where(.flat-theme) .btn` has the recipe's own specificity: it overrides
+ * the recipe, and page utilities (`btn px-2`, `input h-8 w-44`) still win.
+ *
+ * - Selectors name upstream recipe classes only: .btn*, .input*, .card*,
+ *   .table*, .badge*, .dropdown*, .modal-*, .dialog-*, .sidebar*, .page-*,
+ *   .tabs / .tab, .switch*, .progress*, .code*, .empty-state*, .skeleton,
+ *   .divider, .stat-*, .glass*. Never a Tailwind utility class name: Tailwind
+ *   copies every rule of this file whose selector names a class into each
+ *   `@apply` of that class (a `.x .bg-white` rule would land in every recipe
+ *   that applies bg-white).
+ * - Every selector starts with `:where(.flat-theme)`, so the theme switched
+ *   off renders upstream. Upstream's `dark:` variants are restated with the
+ *   same specificity: `:where(.flat-theme) .btn-secondary:is(.dark *)`.
+ * - Values come from styles/console/tokens.css. Everything that is not a
+ *   recipe restatement lives in styles/console/*.css (plain CSS, no @layer).
  * ========================================================================== */
-@layer base {
-  :where(.flat-theme) body {
-    background-color: rgb(var(--ui-canvas));
-    font-size: 0.8125rem;
-    line-height: 1.125rem;
-  }
-
-  /* the sticky toolbar (64px) never hides the keyboard focus it scrolls to */
-  html.flat-theme {
-    scroll-padding-top: 4.5rem;
-  }
-
-  .flat-theme ::selection {
-    background-color: rgb(var(--ui-primary) / 0.22);
-    color: inherit;
-  }
-
-  /* keyboard focus that no recipe restyles: Apple's blue focus halo instead of the UA ring */
-  :where(.flat-theme) :focus-visible {
-    outline: 3px solid rgb(var(--ui-primary) / 0.5);
-    outline-offset: 1px;
-  }
-
-  /* Checkbox and radio (macOS): 16px, 4px radius, a >= 3:1 outline around a shallow well (a faint inner
-     shade at the top); on: a glossy Apple-blue fill with a white check. Hidden or overlay inputs (sr-only,
-     opacity-0, hidden) keep their upstream behaviour. */
-  .flat-theme input:is([type='checkbox'], [type='radio']):not(.sr-only, .opacity-0, .hidden) {
-    appearance: none;
-    -webkit-appearance: none;
-    width: 1rem;
-    height: 1rem;
-    flex-shrink: 0;
-    border: 1px solid rgb(var(--ui-control-line));
-    border-radius: 4px;
-    background-color: rgb(var(--ui-surface));
-    background-image: linear-gradient(180deg, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0) 55%);
-    background-position: center;
-    background-repeat: no-repeat;
-    box-shadow: inset 0 1px 1px 0 rgb(0 0 0 / 0.06);
-    color: rgb(var(--ui-primary));
-    cursor: pointer;
-    vertical-align: middle;
-    transition: background-color 150ms var(--ui-ease), border-color 150ms var(--ui-ease), box-shadow 150ms var(--ui-ease);
-  }
-
-  .flat-theme input[type='radio']:not(.sr-only, .opacity-0, .hidden) {
-    border-radius: 9999px;
-  }
-
-  .flat-theme input:is([type='checkbox'], [type='radio']):not(.sr-only, .opacity-0, .hidden):hover:not(:disabled) {
-    border-color: rgb(var(--ui-ink) / 0.6);
-  }
-
-  .flat-theme input[type='checkbox']:not(.sr-only, .opacity-0, .hidden):is(:checked, :indeterminate),
-  .flat-theme input[type='radio']:not(.sr-only, .opacity-0, .hidden):checked {
-    border-color: rgb(var(--ui-primary));
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-check-fill);
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.28), 0 1px 2px 0 rgb(0 60 140 / 0.2);
-  }
-
-  .flat-theme input[type='checkbox']:not(.sr-only, .opacity-0, .hidden):checked {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4 8.3l2.55 2.55L12 5.4' stroke='white' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), var(--ui-check-fill);
-  }
-
-  .flat-theme input[type='checkbox']:not(.sr-only, .opacity-0, .hidden):indeterminate {
-    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.5 8h7' stroke='white' stroke-width='2.1' stroke-linecap='round'/%3e%3c/svg%3e"), var(--ui-check-fill);
-  }
-
-  .flat-theme input[type='radio']:not(.sr-only, .opacity-0, .hidden):checked {
-    background-image: radial-gradient(circle, #fff 0 2.75px, transparent 3.25px), var(--ui-check-fill);
-  }
-
-  /* a transparent outline (not none) stays visible as the system focus colour in forced-colors mode */
-  .flat-theme input:is([type='checkbox'], [type='radio']):not(.sr-only, .opacity-0, .hidden):focus-visible {
-    outline: 2px solid transparent;
-    outline-offset: 1px;
-    box-shadow: var(--ui-focus-ring);
-  }
-
-  .flat-theme input:is([type='checkbox'], [type='radio']):not(.sr-only, .opacity-0, .hidden):disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  /* Forced-colors mode (Windows high contrast): the drawn box and check marks are background colours
-     and images, which the browser removes, so the native controls come back. */
-  @media (forced-colors: active) {
-    .flat-theme input:is([type='checkbox'], [type='radio']):not(.sr-only, .opacity-0, .hidden) {
-      appearance: auto;
-      -webkit-appearance: auto;
-      background-image: none;
-    }
-  }
-}
-
 @layer components {
-  /* ---- app frame (upstream markup: AppLayout; the main column is marked .app-main) ----
-     The page sits on the neutral tonal backdrop (AppLayout's fixed mesh layer paints --ui-backdrop). The
-     header is a macOS Tahoe toolbar: no bar of its own; the title sits on the backdrop, the actions form one
-     Liquid Glass capsule, and content scrolling beneath fades out under a soft blurred scroll edge. */
-  :where(.flat-theme) .app-main {
-    --ui-frame-inset: 0px;
-    --ui-frame-offset: 0px;
-  }
-
-  @media (min-width: 1024px) {
-    html.flat-theme .app-main {
-      --ui-frame-offset: 0.5rem;
-    }
-
-    html.flat-theme .app-main > header > div[class~="h-14"] {
-      height: 4rem;
-      padding-left: 2rem;
-      padding-right: 2rem;
-    }
-  }
-
-  html.flat-theme .app-main > header {
-    border-bottom-color: transparent;
-    background-color: transparent;
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-    box-shadow: none;
-  }
-
-  /* the scroll edge: the backdrop tone, blurred, fading out just below the toolbar (only visible once content
-     moves beneath); dense down to the page subtitle (70 %), so the 12px subtitle and the capsule read over anything
-     that scrolls beneath (a blue button left the subtitle at 4.07:1) */
-  html.flat-theme .app-main > header::before {
-    content: '';
-    position: absolute;
-    inset: 0 0 -1rem;
-    z-index: -1;
-    background-image: var(--ui-scroll-edge);
-    -webkit-backdrop-filter: var(--ui-scroll-edge-blur);
-    backdrop-filter: var(--ui-scroll-edge-blur);
-    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
-    mask-image: linear-gradient(180deg, #000 70%, transparent);
-    pointer-events: none;
-  }
-
-  /* page title: a 22px bold title with the page description beneath it */
-  html.flat-theme .app-main > header h1 {
-    font-size: 1.375rem;
-    line-height: 1.75rem;
-    font-weight: 700;
-    letter-spacing: -0.02em;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .app-main > header h1 + p {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    color: rgb(var(--ui-muted));
-  }
-
-  /* the actions (announcements, docs, model plaza, language, subscriptions, balance, user menu): one Liquid
-     Glass capsule of 32px items */
-  html.flat-theme .app-main > header > div > div:last-child {
-    gap: 0.125rem;
-    border-radius: var(--ui-radius-capsule);
-    background-image: var(--ui-glass-fill);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    padding: 0.25rem;
-    box-shadow: var(--ui-glass-shadow);
-  }
-
-  html.flat-theme .app-main > header > div > div:last-child > :is(a, button),
-  html.flat-theme .app-main > header > div > div:last-child > div > button:first-child {
-    min-height: 2rem;
-    min-width: 2rem;
-    justify-content: center;
-    border-radius: var(--ui-radius-capsule);
-    color: rgb(var(--ui-ink) / 0.82);
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme .app-main > header > div > div:last-child > :is(a, button):hover,
-  html.flat-theme .app-main > header > div > div:last-child > div > button:first-child:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* the bell keeps upstream's blue while there are unread announcements (a status) */
-  html.flat-theme .app-main > header > div > div:last-child > div > button:first-child[class~="text-blue-600"] {
-    color: rgb(var(--ui-primary-ink));
-  }
-
-  /* balance: upstream's primary-tint capsule as a segment of the glass capsule, tinted Apple blue like the
-     current item (10 %; dark 18 %), the figure in the deeper accessible blue (>= 5:1 on the darker glass at
-     the right edge; dark #64B4FF), the glyph in the accent blue. No hover tint of its own: upstream shows the
-     balance details on hover. */
-  html.flat-theme .app-main > header [class~="bg-primary-50"][class~="rounded-xl"] {
-    min-height: 2rem;
-    margin-left: 0.125rem;
-    margin-right: 0.25rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-nav-current);
-    padding-left: 0.625rem;
-    padding-right: 0.75rem;
-  }
-
-  html.flat-theme .app-main > header [class~="bg-primary-50"][class~="rounded-xl"] > [class~="text-primary-700"] {
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    color: rgb(var(--ui-primary-ink-strong));
-  }
-
-  html.flat-theme .app-main > header [class~="bg-primary-50"][class~="rounded-xl"] > svg {
-    color: rgb(var(--ui-nav-current-ink));
-  }
-
-  /* user menu button and avatar: a round avatar with white initials on upstream's primary gradient, drawn as
-     the glossy Apple blue of the primary button (white >= 4.6:1 at every stop), with a top highlight and a
-     hairline ring */
-  html.flat-theme .app-main > header button[class~="rounded-xl"][class~="p-1.5"] {
-    gap: 0.5rem;
-    padding: 0.125rem 0.625rem 0.125rem 0.125rem;
-  }
-
-  html.flat-theme .app-main > header button[class~="rounded-xl"][class~="p-1.5"] > div:first-child {
-    height: 1.75rem;
-    width: 1.75rem;
-  }
-
-  html.flat-theme .app-main > header button[class~="rounded-xl"][class~="p-1.5"] [class~="text-sm"] {
-    font-size: 0.8125rem;
-    line-height: 1rem;
-  }
-
-  html.flat-theme .app-main > header button[class~="rounded-xl"][class~="p-1.5"] [class~="text-xs"] {
-    font-size: 0.6875rem;
-    line-height: 0.875rem;
-  }
-
-  html.flat-theme .app-main > header button > div[class~="bg-gradient-to-br"][class~="from-primary-500"] {
-    border-radius: 9999px;
-    background-image: var(--ui-primary-fill);
-    font-size: 0.6875rem;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 0 0 0.5px rgb(0 0 0 / 0.12);
-    --theme-on-fill: 255 255 255;
-  }
-
-  /* phones: the menu toggle is a round glass button beside the title */
-  html.flat-theme .app-main > header > div > div:first-child > button.btn-icon {
-    background-image: var(--ui-glass-fill);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-shadow);
-  }
-
-  /* ---- buttons ----
-     Tactile capsules. Secondary: a Liquid Glass capsule (a bright translucent fill, a specular top edge, a
-     hairline and a soft shadow). Primary: glossy Apple blue (a light band on top, the blue deepening downwards,
-     an inner highlight, a soft shadow). Ghost: no material until hover. Destructive / confirm / caution: the
-     glass capsule with a red / green / orange label (a glossy solid red to confirm inside dialogs). 32px
-     (28 small, 36 large); a 0.98 press. The material is drawn, not sampled: no backdrop filter on buttons. */
-  :where(.flat-theme) .btn {
-    min-height: var(--ui-control-h);
-    gap: 0.375rem;
-    border: 1px solid transparent;
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.3125rem 0.875rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    white-space: nowrap;
-    box-shadow: none;
-    transition-property: color, background-color, border-color, box-shadow, opacity, transform;
-    transition-duration: var(--ui-duration);
-    transition-timing-function: var(--ui-ease);
-  }
-
-  :where(.flat-theme) .btn > svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  :where(.flat-theme) .btn:focus {
-    box-shadow: none;
-  }
-
-  :where(.flat-theme) .btn:focus-visible {
-    outline: none;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: var(--ui-focus-ring);
-    box-shadow: var(--ui-focus-ring);
-  }
-
-  :where(.flat-theme) .btn:active:not(:disabled) {
-    transform: scale(0.98);
-  }
-
-  :where(.flat-theme) .btn-primary {
-    border-color: transparent;
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: rgb(var(--ui-on-primary));
-    --theme-on-fill: var(--ui-on-primary);
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  :where(.flat-theme) .btn-primary:hover:not(:disabled) {
-    background-color: rgb(var(--ui-primary-hover));
-    background-image: var(--ui-primary-fill-hover);
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  :where(.flat-theme) .btn-primary:active:not(:disabled) {
-    background-color: rgb(var(--ui-primary-active));
-    background-image: var(--ui-primary-fill-press);
-    box-shadow: var(--ui-primary-shadow-press);
-  }
-
-  :where(.flat-theme) .btn-primary:focus {
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  :where(.flat-theme) .btn-primary:focus-visible {
-    box-shadow: var(--ui-primary-shadow), var(--ui-focus-ring);
-  }
-
-  :where(.flat-theme) .btn-secondary,
-  :where(.flat-theme) .btn-danger,
-  :where(.flat-theme) .btn-success,
-  :where(.flat-theme) .btn-warning {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  :where(.flat-theme) .btn-secondary {
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .btn-secondary:hover:not(:disabled),
-  :where(.flat-theme) .btn-danger:hover:not(:disabled),
-  :where(.flat-theme) .btn-success:hover:not(:disabled),
-  :where(.flat-theme) .btn-warning:hover:not(:disabled) {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  :where(.flat-theme) .btn-secondary:active:not(:disabled),
-  :where(.flat-theme) .btn-danger:active:not(:disabled),
-  :where(.flat-theme) .btn-success:active:not(:disabled),
-  :where(.flat-theme) .btn-warning:active:not(:disabled) {
-    background-image: var(--ui-control-fill-press);
-    box-shadow: var(--ui-control-shadow-press);
-  }
-
-  :where(.flat-theme) .btn-secondary:focus,
-  :where(.flat-theme) .btn-danger:focus,
-  :where(.flat-theme) .btn-success:focus,
-  :where(.flat-theme) .btn-warning:focus {
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  :where(.flat-theme) .btn-secondary:focus-visible,
-  :where(.flat-theme) .btn-danger:focus-visible,
-  :where(.flat-theme) .btn-success:focus-visible,
-  :where(.flat-theme) .btn-warning:focus-visible {
-    box-shadow: var(--ui-control-shadow), var(--ui-focus-ring);
-  }
-
-  :where(.flat-theme) .btn-danger {
-    color: rgb(var(--ui-danger-label));
-  }
-
-  :where(.flat-theme) .btn-success {
-    color: rgb(var(--ui-success));
-  }
-
-  :where(.flat-theme) .btn-warning {
-    color: rgb(var(--ui-warning));
-  }
-
-  :where(.flat-theme) .btn-ghost {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: none;
-    color: rgb(var(--ui-ink) / 0.82);
-    box-shadow: none;
-  }
-
-  :where(.flat-theme) .btn-ghost:hover:not(:disabled) {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* inside a dialog footer the destructive confirmation is a glossy solid red capsule (white label >= 4.9:1) */
-  html.flat-theme :is(.modal-footer, .dialog-footer) .btn-danger {
-    background-color: rgb(var(--theme-color-danger-600));
-    background-image: var(--ui-danger-fill);
-    color: #fff;
-    box-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.36), inset 0 6px 8px -5px rgb(255 255 255 / 0.2),
-      inset 0 -1px 1px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(110 0 10 / 0.3), 0 1px 2px 0 rgb(0 0 0 / 0.12),
-      0 4px 10px -4px rgb(0 0 0 / 0.22);
-  }
-
-  html.flat-theme :is(.modal-footer, .dialog-footer) .btn-danger:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-danger-700));
-    background-image: var(--ui-danger-fill-hover);
-  }
-
-  :where(.flat-theme) .btn-sm {
-    min-height: 1.75rem;
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.1875rem 0.75rem;
-    font-size: 0.75rem;
-    line-height: 1.25rem;
-  }
-
-  :where(.flat-theme) .btn-sm > svg {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-
-  :where(.flat-theme) .btn-md {
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.3125rem 0.875rem;
-    font-size: 0.8125rem;
-  }
-
-  :where(.flat-theme) .btn-lg {
-    min-height: var(--ui-field-h);
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.4375rem 1.125rem;
-    font-size: 0.875rem;
-  }
-
-  :where(.flat-theme) .btn-icon {
-    min-height: var(--ui-control-h);
-    min-width: var(--ui-control-h);
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.4375rem;
-  }
-
-  /* bare icon buttons (upstream class name without a recipe of its own) */
-  :where(.flat-theme) .icon-button {
-    display: inline-flex;
-    height: var(--ui-control-h);
-    width: var(--ui-control-h);
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--ui-radius-capsule);
-    color: rgb(var(--ui-muted));
-    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
-  }
-
-  :where(.flat-theme) .icon-button:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* ---- form controls ----
-     Fields are recessed white wells: a hairline, a faint inner shade at the top, 10px corners; focus = a blue
-     edge with Apple's blue halo. Search fields with a leading magnifier are capsules. Pop-up buttons (native
-     selects, the shared Select, the date range picker, the toolbar filters) are glass capsules like the
-     secondary button. */
-  :where(.flat-theme) .input {
-    min-height: var(--ui-control-h);
-    border-radius: var(--ui-radius-field);
-    border-color: var(--ui-field-line);
-    background-color: var(--ui-field-bg);
-    padding: 0.3125rem 0.75rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-field-shadow);
-    transition-property: color, background-color, border-color, box-shadow;
-    transition-duration: var(--ui-duration);
-    transition-timing-function: var(--ui-ease);
-  }
-
-  :where(.flat-theme) .input::placeholder {
-    color: rgb(var(--ui-faint));
-  }
-
-  /* Placeholders of text fields without the .input recipe (e.g. the Ops error-list search) fall back
-     to Tailwind's gray-400 fill, about 2.5:1; they take the same readable faint text as .input. */
-  :where(.flat-theme) :is(input, textarea)::placeholder {
-    color: rgb(var(--ui-faint));
-    opacity: 1;
-  }
-
-  :where(.flat-theme) .input:hover:not(:disabled):not(:focus) {
-    border-color: var(--ui-field-line-hover);
-  }
-
-  :where(.flat-theme) .input:focus {
-    border-color: rgb(var(--ui-primary));
-    background-color: var(--ui-field-bg);
-    --tw-ring-offset-width: 0px;
-    --tw-ring-offset-shadow: 0 0 #0000;
-    --tw-ring-shadow: var(--ui-focus-ring);
-    box-shadow: var(--ui-field-shadow), var(--ui-focus-ring);
-  }
-
-  :where(.flat-theme) .input:disabled {
-    border-color: transparent;
-    background-color: rgb(var(--ui-subtle));
-    color: rgb(var(--ui-muted));
-    box-shadow: none;
-  }
-
-  /* search fields: a leading magnifier (SearchInput, the page toolbars' search boxes, filter bars) makes the field a
-     capsule; a field with another leading glyph (mail, lock, key, gift) is a form field and keeps its corners */
-  html.flat-theme div[class~="relative"]:has(> div[class~="pointer-events-none"][class~="absolute"][class~="left-0"] svg path[d^="M21 21l"]) > input[class~="input"],
-  html.flat-theme div[class~="relative"]:has(> svg[class~="absolute"] path[d^="M21 21l"]) > input[class~="input"] {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  /* raw search inputs with a leading magnifier (no .input recipe, e.g. the Ops error-list search): the same
-     recessed capsule */
-  html.flat-theme div[class~="relative"]:has(> div[class~="pointer-events-none"][class~="absolute"][class~="left-0"] svg) > input[type="text"]:not(.input) {
-    min-height: var(--ui-control-h);
-    border: 1px solid var(--ui-field-line);
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-field-bg);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-field-shadow);
-  }
-
-  html.flat-theme div[class~="relative"]:has(> div[class~="pointer-events-none"][class~="absolute"][class~="left-0"] svg) > input[type="text"]:not(.input):focus {
-    border-color: rgb(var(--ui-primary));
-    box-shadow: var(--ui-field-shadow), var(--ui-focus-ring);
-  }
-
-  /* quiet grey buttons built from utilities (button.rounded-lg.bg-gray-100: reset, secondary actions): glass
-     capsules like the secondary button */
-  html.flat-theme button[class~="rounded-lg"][class~="bg-gray-100"]:not([class~="w-full"]):not(.sidebar *) {
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="bg-gray-100"]:not([class~="w-full"]):not(.sidebar *):hover {
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  /* native selects (pop-up buttons): a glass capsule with Apple's up / down chevron */
-  :where(.flat-theme) select.input {
-    height: var(--ui-control-h);
-    appearance: none;
-    -webkit-appearance: none;
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    padding-top: 0;
-    padding-bottom: 0;
-    padding-right: 2rem;
-    background-color: transparent;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M5 6.25L8 3.5l3 2.75M5 9.75L8 12.5l3-2.75' stroke='%2369696e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), var(--ui-control-fill);
-    background-position: right 0.625rem center, 0 0;
-    background-repeat: no-repeat;
-    background-size: 0.875rem, auto;
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  :where(.flat-theme) select.input:hover:not(:disabled):not(:focus) {
-    border-color: transparent;
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M5 6.25L8 3.5l3 2.75M5 9.75L8 12.5l3-2.75' stroke='%2369696e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), var(--ui-control-fill-hover);
-  }
-
-  :where(.flat-theme) select.input:focus {
-    border-color: transparent;
-    box-shadow: var(--ui-control-shadow), var(--ui-focus-ring);
-  }
-
-  :where(.flat-theme.dark) select.input,
-  :where(.flat-theme.dark) select.input:hover:not(:disabled):not(:focus) {
-    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M5 6.25L8 3.5l3 2.75M5 9.75L8 12.5l3-2.75' stroke='%23a1a1a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"), var(--ui-control-fill);
-  }
-
-  :where(.flat-theme) .input-error,
-  :where(.flat-theme) .input-error:hover:not(:disabled):not(:focus) {
-    border-color: rgb(var(--ui-danger));
-  }
-
-  :where(.flat-theme) .input-error:focus {
-    border-color: rgb(var(--ui-danger));
-    --tw-ring-shadow: 0 0 0 3.5px rgb(var(--theme-color-danger-500) / 0.3);
-    box-shadow: var(--ui-field-shadow), 0 0 0 3.5px rgb(var(--theme-color-danger-500) / 0.3);
-  }
-
-  :where(.flat-theme) .input-label {
-    margin-bottom: 0.375rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .input-hint {
-    font-size: 0.75rem;
-    line-height: 1.125rem;
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) .input-error-text {
-    font-size: 0.75rem;
-    line-height: 1.125rem;
-    color: rgb(var(--ui-danger));
-  }
-
-  /* shared Select trigger (pop-up button, scoped styles in Select.vue) and dropdown (menu) */
-  html.flat-theme .select-trigger {
-    min-height: var(--ui-control-h);
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    padding-left: 0.875rem;
-    padding-right: 0.625rem;
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-    transition: background-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme .select-trigger:hover:not(.select-trigger-disabled) {
-    border-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme .select-trigger-open,
-  html.flat-theme .select-trigger:focus-visible {
-    border-color: transparent;
-    box-shadow: var(--ui-control-shadow), var(--ui-focus-ring);
-  }
-
-  html.flat-theme .select-trigger.select-trigger-error {
-    border-color: rgb(var(--ui-danger));
-  }
-
-  html.flat-theme .select-trigger.select-trigger-disabled {
-    background-color: rgb(var(--ui-subtle));
-    background-image: none;
-    color: rgb(var(--ui-muted));
-    box-shadow: none;
-  }
-
-  html.flat-theme.dark .select-trigger:not(.select-trigger-disabled) {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme.dark .select-trigger:hover:not(.select-trigger-disabled) {
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme.dark .select-trigger.select-trigger-error {
-    border-color: rgb(var(--ui-danger));
-  }
-
-  html.flat-theme .select-trigger .select-icon {
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme .select-trigger .select-icon > svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    stroke-width: 2.2;
-  }
-
-  /* in forms (dialogs) a wide pop-up button keeps the field's 10px corners */
-  html.flat-theme :is(.modal-body, .dialog-body) :is(.select-trigger, select.input) {
-    border-radius: var(--ui-radius-field);
-  }
-
-  /* DateRangePicker (scoped styles): the trigger is a glass pop-up capsule, the panel a glass menu */
-  html.flat-theme .date-picker-trigger {
-    min-height: var(--ui-control-h);
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    padding: 0.25rem 0.75rem;
-    font-size: 0.8125rem;
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme.dark .date-picker-trigger {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .date-picker-trigger:hover {
-    border-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme .date-picker-trigger.date-picker-trigger-open {
-    border-color: transparent;
-    box-shadow: var(--ui-control-shadow), var(--ui-focus-ring);
-  }
-
-  html.flat-theme .date-picker-trigger :is(.date-picker-icon, .date-picker-chevron) {
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme .date-picker-dropdown {
-    border-color: transparent;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme .date-picker-dropdown .date-picker-preset {
-    border-radius: var(--ui-radius-capsule);
-    font-size: 0.75rem;
-    color: rgb(var(--ui-ink) / 0.85);
-  }
-
-  html.flat-theme .date-picker-dropdown .date-picker-preset:hover:not(.date-picker-preset-active) {
-    background-color: var(--ui-menu-hover);
-  }
-
-  html.flat-theme .date-picker-dropdown .date-picker-preset.date-picker-preset-active {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  html.flat-theme .date-picker-dropdown .date-picker-apply {
-    border-radius: var(--ui-radius-capsule);
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme .date-picker-dropdown .date-picker-input {
-    border-color: var(--ui-field-line);
-    border-radius: 8px;
-    background-color: var(--ui-field-bg);
-    box-shadow: var(--ui-field-shadow);
-  }
-
-  /* Toolbar pop-up buttons built from utilities (account filters: button.inline-flex.h-8.rounded-lg.border
-     .bg-white.shadow-sm): glass capsules like the Select trigger. */
-  html.flat-theme button[class~="inline-flex"][class~="h-8"][class~="rounded-lg"][class~="border"][class~="bg-white"][class~="shadow-sm"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme button[class~="inline-flex"][class~="h-8"][class~="rounded-lg"][class~="border"][class~="bg-white"][class~="shadow-sm"]:hover {
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  /* Floating panels built from utilities (filter menus, header balance details, info popovers:
-     .absolute.bg-white.shadow-lg with a border; with shadow-xl: the header subscription popover and the users
-     group-replace menu): the glass menu material. */
-  html.flat-theme :is(div, ul)[class~="absolute"]:is([class~="shadow-lg"], [class~="shadow-xl"])[class~="bg-white"][class~="border"] {
-    border-color: transparent;
-    border-width: 0.5px;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme .select-dropdown-portal {
-    border-color: transparent;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme .select-dropdown-portal .select-search {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  html.flat-theme .select-dropdown-portal .select-options {
-    padding: 0.3125rem;
-  }
-
-  html.flat-theme .select-dropdown-portal .select-option {
-    min-height: 1.75rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    color: rgb(var(--ui-ink));
-    transition: none;
-  }
-
-  html.flat-theme .select-dropdown-portal .select-option-selected {
-    background-color: transparent;
-    color: rgb(var(--ui-ink));
-    font-weight: 500;
-  }
-
-  html.flat-theme .select-dropdown-portal .select-option-selected svg {
-    color: rgb(var(--ui-primary-ink));
-  }
-
-  /* the hovered / keyboard-focused item: a neutral grey highlight (no hue) */
-  html.flat-theme .select-dropdown-portal .select-option:not(.select-option-group):not(.select-option-disabled):is(:hover, .select-option-focused) {
-    background-color: var(--ui-menu-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .select-dropdown-portal .select-option-group,
-  html.flat-theme .select-dropdown-portal .select-option-group:hover {
-    background-color: transparent;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    letter-spacing: 0;
-    text-transform: none;
-    color: rgb(var(--ui-muted));
-  }
-
-  /* ---- surfaces ----
-     Cards: white, 20px, no border; smooth layered shadows (a hairline, a contact shadow, two soft ambient
-     layers) under a top inner highlight; dark: #161618 with a rim light and deeper shadows. Interactive cards
-     (.card-hover) lift 1px on hover. */
-  :where(.flat-theme) .glass,
-  :where(.flat-theme) .glass-card,
-  :where(.flat-theme) .card,
-  :where(.flat-theme) .card-glass {
-    background-color: rgb(var(--ui-surface));
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-    box-shadow: none;
-  }
-
-  :where(.flat-theme) .glass-card,
-  :where(.flat-theme) .card,
-  :where(.flat-theme) .card-glass {
-    border: 0;
-    border-radius: var(--ui-radius-card);
-    box-shadow: var(--ui-shadow-card);
-    transition-property: box-shadow, transform;
-    transition-duration: var(--ui-duration);
-    transition-timing-function: var(--ui-ease);
-  }
-
-  :where(.flat-theme) .card-hover:hover {
-    transform: translateY(-1px);
-    box-shadow: var(--ui-shadow-hover);
-  }
-
-  :where(.flat-theme) .card-header,
-  :where(.flat-theme) .card-footer {
-    border-color: var(--ui-hairline-soft);
-    padding: 1rem 1.25rem;
-  }
-
-  :where(.flat-theme) .card-body {
-    padding: 1.25rem;
-  }
-
-  /* card section titles (h2 / h3 at the top of a card): 15px semibold */
-  html.flat-theme .card > :is(h2, h3)[class~="font-semibold"]:first-child,
-  html.flat-theme .card > div:first-child > :is(h2, h3)[class~="font-semibold"] {
-    font-size: 0.9375rem;
-    line-height: 1.25rem;
-    letter-spacing: -0.01em;
-  }
-
-  /* ---- KPI tiles ---- */
-  :where(.flat-theme) .stat-card {
-    align-items: center;
-    gap: 0.875rem;
-    padding: 1.125rem 1.25rem;
-  }
-
-  :where(.flat-theme) .stat-icon {
-    height: 2.5rem;
-    width: 2.5rem;
-    flex-shrink: 0;
-    border-radius: 0.75rem;
-    background-image: var(--ui-tile-gloss);
-    font-size: 1.125rem;
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  :where(.flat-theme) .stat-icon > svg {
-    height: 1.25rem;
-    width: 1.25rem;
-  }
-
-  :where(.flat-theme) .stat-value {
-    font-size: 1.625rem;
-    line-height: 2rem;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    letter-spacing: -0.02em;
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .stat-label,
-  :where(.flat-theme) .ui-label {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: 500;
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) .stat-trend {
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  :where(.flat-theme) .stat-trend-up {
-    color: rgb(var(--ui-success));
-  }
-
-  :where(.flat-theme) .stat-trend-down {
-    color: rgb(var(--ui-danger));
-  }
-
-  /* KPI cards (upstream markups: dashboard = .grid > .card.p-4 > .flex > [tile, text]; usage =
-     .grid > .card.p-4.flex > [tile, text]). Upstream's layout and colours stay: the soft tinted tile (hue-100
-     fill, hue-600 glyph) beside a neutral label, the figure and upstream's meta line (semantic colours only).
-     The tile becomes a 40px squircle with a hairline and a top gloss; the figure is 26px semibold with tight
-     tracking. [class~="..."] hooks: see the selection block below. */
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(> [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child),
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) {
-    padding: 1.125rem 1.25rem;
-  }
-
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child),
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) {
-    gap: 0.875rem;
-  }
-
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child,
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child {
-    display: flex;
-    height: 2.5rem;
-    width: 2.5rem;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.75rem;
-    background-image: var(--ui-tile-gloss);
-    padding: 0;
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child svg,
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  /* the label: 12px medium, neutral */
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) > div:nth-child(2) > p:first-child,
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) > div:nth-child(2) > p:first-child {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: 500;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] p[class~="text-xl"] {
-    margin-top: 0.125rem;
-    font-size: 1.625rem;
-    line-height: 2rem;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-    font-variant-numeric: tabular-nums;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="items-baseline"]:has(> p[class~="text-xl"]) {
-    margin-top: 0.125rem;
-  }
-
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="items-baseline"] > p[class~="text-xl"] {
-    margin-top: 0;
-  }
-
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] :is(p, div)[class~="text-xs"]:not(:first-child) {
-    margin-top: 0.125rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  /* the figures upstream tints green (admin dashboard new users, admin usage total cost, user dashboard
-     balance) keep upstream's green: Apple green's accessible text colour (#127F32, 5.1:1 on the card; dark
-     #30D158); the meta line keeps the semantic colours */
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] p[class~="text-xl"]:is([class~="text-emerald-600"], [class~="text-green-600"]) {
-    color: rgb(var(--theme-text-success-600));
-  }
-
-  /* phones: the tile sits above the text, so the figure and the meta line keep the full card width
-     (「524.27M」 and 「802 启用 8 错误」 are never cut or broken) */
-  @media (max-width: 639.98px) {
-    html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child),
-    html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 0.625rem;
-    }
-
-    html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child,
-    html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child {
-      height: 2.25rem;
-      width: 2.25rem;
-      border-radius: 0.6875rem;
-    }
-
-    html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] p[class~="text-xl"] {
-      font-size: 1.375rem;
-      line-height: 1.75rem;
-    }
-  }
-
-  /* dashboard quick actions (upstream: button.group.rounded-lg.bg-gray-50.p-3 with a hue-100 tile and a hue-50
-     hover): a grouped row with the concentric 14px radius inside the 20px card (dark: one step above the
-     card), upstream's soft sky / emerald tile; on hover upstream's sky / emerald tint as a wash of the tile's
-     system colour (Apple teal / green), a neutral hover for a row without a tint */
-  html.flat-theme button[class~="group"][class~="rounded-lg"][class~="bg-gray-50"] {
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    padding: 0.75rem 0.875rem;
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-    transition: background-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme button[class~="group"][class~="rounded-lg"][class~="bg-gray-50"]:hover {
-    background-color: rgb(var(--ui-hover));
-  }
-
-  html.flat-theme.dark button[class~="group"][class~="rounded-lg"][class~="bg-gray-50"] {
-    background-color: rgb(var(--ui-raised));
-  }
-
-  html.flat-theme.dark button[class~="group"][class~="rounded-lg"][class~="bg-gray-50"]:hover {
-    background-color: rgb(var(--ui-subtle));
-  }
-
-  /* (after the dark hover: the same specificity, so the tint wins in both modes) */
-  html.flat-theme button[class~="group"][class~="rounded-lg"][class~="bg-gray-50"][class~="hover:bg-sky-50"]:hover {
-    background-color: var(--ui-wash-teal);
-  }
-
-  html.flat-theme button[class~="group"][class~="rounded-lg"][class~="bg-gray-50"][class~="hover:bg-emerald-50"]:hover {
-    background-color: var(--ui-wash-green);
-  }
-
-  html.flat-theme button[class~="group"][class~="rounded-lg"] > span[class~="h-10"][class~="w-10"][class~="rounded-lg"]:first-child:has(> svg:only-child) {
-    border-radius: 0.75rem;
-    background-image: var(--ui-tile-gloss);
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  /* ---- tables ----
-     Finder list view inside a white 20px card: a Liquid Glass sticky header (a hairline beneath; rows
-     scrolling under it show through, blurred), a quiet 12px semibold header label, alternating row tint
-     instead of row separators, a soft hover, blue-tinted selected rows, tabular figures. */
-  :where(.flat-theme) .table-container {
-    border: 0;
-    border-radius: var(--ui-radius-table);
-    background-color: rgb(var(--ui-surface));
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  :where(.flat-theme) .table {
-    font-size: 0.8125rem;
-    font-variant-numeric: tabular-nums;
-  }
-
-  :where(.flat-theme) .table th {
-    background-color: rgb(var(--ui-surface));
-    border-bottom: 1px solid var(--ui-hairline-soft);
-    padding: 0.5rem 0.75rem;
-    font-size: 0.75rem;
-    line-height: 1.125rem;
-    font-weight: 600;
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) .table td {
-    border-color: transparent;
-    padding: 0.5625rem 0.75rem;
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .table tbody tr:nth-child(even) {
-    background-color: rgb(var(--ui-row-stripe));
-  }
-
-  :where(.flat-theme) .table tbody tr:hover {
-    background-color: rgb(var(--ui-row-hover));
-  }
-
-  /* table page container (TablePageLayout .table-scroll-container, scoped): the card radius and shadow */
-  html.flat-theme .table-scroll-container {
-    border: 0;
-    border-radius: var(--ui-radius-table);
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  /* DataTable: the sticky header is a frosted glass strip. Its cells carry the material (the table collapses
-     borders, so a thead cannot draw effects of its own): a nearly opaque bright fill (--ui-header-glass) with a
-     blur of the rows scrolling beneath where the browser draws one, and a hairline at the bottom. The
-     sticky-column cells are a touch more opaque so the header labels scrolling sideways beneath them do not
-     show through. The backdrop filter sits on header cells only, never on rows. */
-  html.flat-theme .table-wrapper .table-header {
-    background-color: transparent;
-    /* the same glass under the cells, so fractional column edges show no seam of the card behind */
-    background-image: var(--ui-header-glass);
-    box-shadow: none;
-  }
-
-  html.flat-theme .table-wrapper .table-header .sticky-header-cell {
-    height: 2.5rem;
-    border-bottom-color: transparent;
-    background-color: transparent;
-    background-image: linear-gradient(180deg, transparent calc(100% - 0.5px), var(--ui-hairline) calc(100% - 0.5px)), var(--ui-header-glass);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    font-family: var(--ui-font);
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: 600;
-    letter-spacing: 0;
-    text-transform: none;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme .table-wrapper .table-header .sticky-header-cell.sticky-col {
-    background-color: var(--ui-header-glass-solid);
-  }
-
-  html.flat-theme .table-wrapper table {
-    border-color: transparent;
-  }
-
-  /* rows: no separators, alternating tint, the sticky cells follow the row colour (they must stay opaque) */
-  html.flat-theme .table-wrapper .table-body {
-    background-color: rgb(var(--ui-surface));
-  }
-
-  html.flat-theme .table-wrapper .table-body > tr:nth-child(n) {
-    border-top-width: 0;
-    background-color: rgb(var(--ui-surface));
-    transition: background-color 120ms var(--ui-ease);
-  }
-
-  /* (TablePageLayout draws a bottom border on every cell; the stripes replace it) */
-  html.flat-theme .table-wrapper .table-body > tr > td {
-    border-bottom-color: transparent;
-  }
-
-  html.flat-theme .table-wrapper .table-body > tr:nth-child(even),
-  html.flat-theme .table-wrapper .table-body > tr:nth-child(even) > td.sticky-col {
-    background-color: rgb(var(--ui-row-stripe));
-  }
-
-  html.flat-theme .table-wrapper .table-body > tr:nth-child(odd) > td.sticky-col {
-    background-color: rgb(var(--ui-surface));
-  }
-
-  html.flat-theme .table-wrapper .table-body > tr[class~="bg-primary-50/30"],
-  html.flat-theme .table-wrapper .table-body > tr[class~="bg-primary-50/30"] > td.sticky-col {
-    background-color: rgb(var(--ui-row-selected));
-  }
-
-  html.flat-theme .table-wrapper .table-body > tr:hover,
-  html.flat-theme .table-wrapper .table-body > tr:hover > td.sticky-col {
-    background-color: rgb(var(--ui-row-hover));
-  }
-
-  :where(.flat-theme) .table-body {
-    font-variant-numeric: tabular-nums;
-  }
-
-  html.flat-theme .table-wrapper tbody input[type='checkbox'],
-  html.flat-theme .table-wrapper thead input[type='checkbox'] {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  /* the dividers DataTable draws next to its sticky columns while scrolling: 1px hairlines (upstream: a 10px fading
-     shadow) */
-  html.flat-theme .table-wrapper.is-scrollable .sticky-col-left::after,
-  html.flat-theme .table-wrapper.is-scrollable .sticky-col-left-second::after,
-  html.flat-theme .table-wrapper.is-scrollable .sticky-col-right::before {
-    width: 1px;
-    background: var(--ui-hairline-soft);
-  }
-
-  /* table scrollbars (DataTable pins them with !important): a quiet capsule thumb on no track */
-  html.flat-theme .table-wrapper::-webkit-scrollbar-track {
-    background-color: transparent !important;
-  }
-
-  html.flat-theme .table-wrapper::-webkit-scrollbar-thumb {
-    border: 3px solid transparent !important;
-    background-color: rgb(var(--ui-ink) / 0.26) !important;
-  }
-
-  html.flat-theme .table-wrapper::-webkit-scrollbar-thumb:hover {
-    background-color: rgb(var(--ui-ink) / 0.42) !important;
-  }
-
-  html.flat-theme .table-wrapper::-webkit-scrollbar-corner {
-    background-color: transparent;
-  }
-
-  /* ---- badges (capsules: a 12 % tint of the system colour with its accessible text colour) ---- */
-  :where(.flat-theme) .badge {
-    min-height: 1.25rem;
-    gap: 0.3125rem;
-    border: 0;
-    border-radius: var(--ui-radius-capsule);
-    padding: 0 0.5rem;
-    font-size: 0.75rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    white-space: nowrap;
-  }
-
-  :where(.flat-theme) .badge-primary {
-    background-color: rgb(var(--ui-primary-soft));
-    color: rgb(var(--ui-primary-ink));
-  }
-
-  :where(.flat-theme) .badge-gray {
-    background-color: var(--ui-fill);
-    color: rgb(var(--ui-ink) / 0.8);
-  }
-
-  :where(.flat-theme) .badge-success {
-    background-color: rgb(var(--ui-success-soft));
-    color: rgb(var(--ui-success));
-  }
-
-  :where(.flat-theme) .badge-warning {
-    background-color: rgb(var(--ui-warning-soft));
-    color: rgb(var(--ui-warning));
-  }
-
-  :where(.flat-theme) .badge-danger {
-    background-color: rgb(var(--ui-danger-soft));
-    color: rgb(var(--ui-danger));
-  }
-
-  :where(.flat-theme) .badge-purple {
-    background-color: rgb(var(--ui-purple-soft));
-    color: rgb(var(--ui-purple));
-  }
-
-  /* small data chips built from utilities (a filled span.rounded / .rounded-md with 10-12px text, e.g. the usage
-     chips 「0 req」「A $0.00」): capsules like the tags */
-  html.flat-theme span:is([class~="rounded"], [class~="rounded-md"], [class~="rounded-sm"])[class*="bg-"]:is([class~="text-xs"], [class~="text-[10px]"], [class~="text-[11px]"]) {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  /* ---- popovers, menus, dialogs ----
-     Menus and popovers are Liquid Glass (a bright translucent fill, blur and saturation, a specular rim, a
-     hairline and a soft floating shadow; 14px); items are 13px, 28px high; the hovered item is a neutral grey
-     highlight (no hue); a selected item keeps a blue check; destructive items keep red text on a faint red
-     highlight. Dialogs are opaque 22px sheets over a blurred scrim. */
-  :where(.flat-theme) .dropdown,
-  :where(.flat-theme) .ui-popover {
-    border-color: transparent;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    padding: 0.3125rem;
-    box-shadow: var(--ui-glass-float);
-  }
-
-  :where(.flat-theme) .dropdown-item {
-    min-height: 1.75rem;
-    gap: 0.5rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    color: rgb(var(--ui-ink));
-    transition: none;
-  }
-
-  :where(.flat-theme) .dropdown-item:hover {
-    background-color: var(--ui-menu-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .dropdown-item > svg {
-    color: rgb(var(--ui-muted));
-  }
-
-  /* destructive menu items keep red text and highlight in a faint red */
-  html.flat-theme .dropdown .dropdown-item:is([class~="text-red-600"], [class~="text-red-500"]),
-  html.flat-theme .dropdown .dropdown-item:is([class~="text-red-600"], [class~="text-red-500"]) > svg {
-    color: rgb(var(--ui-danger));
-  }
-
-  html.flat-theme .dropdown .dropdown-item:is([class~="text-red-600"], [class~="text-red-500"]):hover {
-    background-color: rgb(var(--theme-color-danger-500) / 0.12);
-    color: rgb(var(--ui-danger));
-  }
-
-  /* dividers inside menus */
-  html.flat-theme .dropdown :is([class~="border-b"], [class~="border-t"]) {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  /* Account row menu (upstream markup: .action-menu-content > fieldset > button): the same glass menu,
-     28px items, monochrome 16px icons, destructive items keep their colour. */
-  html.flat-theme .action-menu-content {
-    border-color: transparent;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    padding: 0.3125rem;
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme .action-menu-content fieldset {
-    padding: 0;
-  }
-
-  html.flat-theme .action-menu-content fieldset button {
-    min-height: 1.75rem;
-    gap: 0.625rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .action-menu-content fieldset button:hover:not(:disabled) {
-    background-color: var(--ui-menu-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .action-menu-content fieldset button > svg {
-    width: 1rem;
-    height: 1rem;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme .action-menu-content fieldset button:is([class*='text-red'], [class*='text-rose']),
-  html.flat-theme .action-menu-content fieldset button:is([class*='text-red'], [class*='text-rose']) > svg {
-    color: rgb(var(--ui-danger));
-  }
-
-  html.flat-theme .action-menu-content fieldset button:is([class*='text-red'], [class*='text-rose']):hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-danger-500) / 0.12);
-    color: rgb(var(--ui-danger));
-  }
-
-  html.flat-theme .action-menu-content fieldset > div {
-    margin: 0.25rem 0.375rem;
-    border-color: var(--ui-hairline-soft);
-  }
-
-  /* other menus (role="menu" panels of upstream / fork markup, e.g. the IP copy-format menu): glass too */
-  html.flat-theme [role='menu']:is([class~="rounded-lg"], [class~="rounded-xl"], [class~="rounded-md"])[class~="shadow-lg"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme [role='menu'] > [role='menuitem'],
-  html.flat-theme [role='menu'] > * > [role='menuitem'] {
-    border-radius: 8px;
-  }
-
-  html.flat-theme [role='menu'] [role='menuitem']:hover {
-    background-color: var(--ui-menu-hover);
-  }
-
-  /* dialog scrim: a light dim with a soft blur of the page behind (the glass of sheets) */
-  :where(.flat-theme) .modal-overlay,
-  :where(.flat-theme) .dialog-overlay {
-    background-color: rgb(var(--ui-scrim));
-    -webkit-backdrop-filter: var(--ui-scrim-blur);
-    backdrop-filter: var(--ui-scrim-blur);
-  }
-
-  /* dialogs (sheets): 22px, opaque (white; #1F1F22 dark), a deep soft shadow with a hairline and a top
-     highlight; the footer is a faint toolbar band */
-  :where(.flat-theme) .modal-content,
-  :where(.flat-theme) .dialog-container {
-    border: 0;
-    border-radius: var(--ui-radius-dialog);
-    background-color: rgb(var(--ui-raised));
-    box-shadow: var(--ui-shadow-overlay);
-  }
-
-  :where(.flat-theme) .modal-header,
-  :where(.flat-theme) .dialog-header {
-    min-height: 3.5rem;
-    border-color: var(--ui-hairline-soft);
-    padding: 1rem 1.25rem 0.875rem 1.5rem;
-  }
-
-  :where(.flat-theme) .modal-title {
-    font-size: 1.0625rem;
-    line-height: 1.375rem;
-    font-weight: 600;
-    letter-spacing: -0.012em;
-    color: rgb(var(--ui-ink));
-  }
-
-  /* BaseDialog close button (upstream utilities): a 28px round glass button with the x glyph */
-  html.flat-theme .modal-header > button:last-child {
-    display: inline-flex;
-    height: 1.75rem;
-    width: 1.75rem;
-    align-items: center;
-    justify-content: center;
-    margin-right: -0.125rem;
-    border-radius: 9999px;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    padding: 0;
-    color: rgb(var(--ui-muted));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme .modal-header > button:last-child:hover {
-    background-image: var(--ui-control-fill-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .modal-header > button:last-child > svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    stroke-width: 2.4;
-  }
-
-  :where(.flat-theme) .modal-body,
-  :where(.flat-theme) .dialog-body {
-    padding: 1.25rem 1.5rem;
-  }
-
-  :where(.flat-theme) .modal-footer,
-  :where(.flat-theme) .dialog-footer {
-    gap: 0.625rem;
-    border-color: var(--ui-hairline-soft);
-    border-bottom-left-radius: var(--ui-radius-dialog);
-    border-bottom-right-radius: var(--ui-radius-dialog);
-    background-color: rgb(var(--ui-dialog-footer));
-    padding: 0.875rem 1.5rem 1rem;
-  }
-
-  /* dialogs are a comfortable 36px form: fields and footer actions */
-  html.flat-theme .modal-body .input:not(textarea),
-  html.flat-theme .modal-body .select-trigger {
-    min-height: var(--ui-field-h);
-  }
-
-  html.flat-theme .modal-body .input:not(textarea):not(select) {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  html.flat-theme .modal-body select.input {
-    height: var(--ui-field-h);
-  }
-
-  html.flat-theme .modal-footer .btn:not(.btn-sm) {
-    min-height: var(--ui-field-h);
-    padding-left: 1.125rem;
-    padding-right: 1.125rem;
-  }
-
-  /* Dialogs built from utilities instead of BaseDialog (a div.fixed.inset-0.bg-black/50 scrim and a white
-     rounded panel with shadow-xl / shadow-2xl: redeem generate / bulk edit / result, the subscription guide,
-     the backup R2 guide and split download, the 2FA setup / disable / login / step-up dialogs, the passkey
-     delete confirm, the settings web-search test and affiliate dialogs). Upstream builds them two ways: the
-     scrim is a sibling before the panel, or the scrim wraps the panel. They take BaseDialog's sheet recipe: the
-     light blurred scrim, a 22px opaque panel (#1F1F22 dark) with the deep soft shadow and top highlight, 36px
-     fields with the 10px field radius, a 28px round glass close button. BaseDialog (.modal-overlay /
-     .modal-content), drawers, the phone sidebar scrim and the driver.js tour do not match. */
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"]:has(+ div[class~="relative"][class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"])),
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="flex"][class~="bg-black/50"]:has(> div[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"])) {
-    background-color: rgb(var(--ui-scrim));
-    -webkit-backdrop-filter: var(--ui-scrim-blur);
-    backdrop-filter: var(--ui-scrim-blur);
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"] + div[class~="relative"][class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]),
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="flex"][class~="bg-black/50"] > div[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]) {
-    border-radius: var(--ui-radius-dialog);
-    background-color: rgb(var(--ui-raised));
-    box-shadow: var(--ui-shadow-overlay);
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"] + div[class~="relative"][class~="bg-white"] :is(.select-trigger, select.input),
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="flex"][class~="bg-black/50"] > div[class~="bg-white"] :is(.select-trigger, select.input) {
-    border-radius: var(--ui-radius-field);
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"] + div[class~="relative"][class~="bg-white"] :is(.input:not(textarea), .select-trigger),
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="flex"][class~="bg-black/50"] > div[class~="bg-white"] :is(.input:not(textarea), .select-trigger) {
-    min-height: var(--ui-field-h);
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"] + div[class~="relative"][class~="bg-white"] .input:not(textarea):not(select),
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="flex"][class~="bg-black/50"] > div[class~="bg-white"] .input:not(textarea):not(select) {
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"] + div[class~="relative"][class~="bg-white"] select.input,
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="flex"][class~="bg-black/50"] > div[class~="bg-white"] select.input {
-    height: var(--ui-field-h);
-  }
-
-  /* the corner close button of the guides (button.absolute.right-4.top-4 with a 20px x) */
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"] + div[class~="relative"][class~="bg-white"] > button[class~="absolute"][class~="right-4"][class~="top-4"] {
-    display: inline-flex;
-    height: 1.75rem;
-    width: 1.75rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-muted));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"] + div[class~="relative"][class~="bg-white"] > button[class~="absolute"][class~="right-4"][class~="top-4"]:hover {
-    background-image: var(--ui-control-fill-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="bg-black/50"] + div[class~="relative"][class~="bg-white"] > button[class~="absolute"][class~="right-4"][class~="top-4"] > svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    stroke-width: 2.4;
-  }
-
-  /* (the status colour of the left edge stays) */
-  :where(.flat-theme) .toast {
-    border-radius: var(--ui-radius-xl);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  /* ---- navigation (macOS Tahoe sidebar) ----
-     A floating Liquid Glass panel inset 10px from the window edges (22px corners: a bright translucent fill,
-     blur and saturation over the backdrop, a specular rim, a hairline and a soft shadow). Monochrome grey
-     glyphs and ink labels; the current item is a 10px rounded rect tinted Apple blue (10 %) with its label and
-     glyph in the accessible blue. Section titles are 11px semibold. On phones the panel slides in over the
-     page above a blurred scrim. */
-  :where(.flat-theme) .sidebar {
-    border-color: transparent;
-    background-color: transparent;
-  }
-
-  html.flat-theme .sidebar {
-    top: 0.625rem;
-    bottom: 0.625rem;
-    left: 0.625rem;
-    border-right-width: 0;
-    border-radius: var(--ui-radius-panel);
-    background-image: var(--ui-glass-fill);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-shadow);
-    transition-property: width, transform, left;
-  }
-
-  html.flat-theme .sidebar[class~="w-64"] {
-    width: calc(16rem - 1.25rem);
-  }
-
-  html.flat-theme .sidebar[class~="w-[72px]"] {
-    left: 0.5rem;
-    width: calc(72px - 1rem);
-  }
-
-  /* off-canvas (phones): moved out together with its shadow */
-  @media (max-width: 1023.98px) {
-    html.flat-theme .sidebar[class~="-translate-x-full"] {
-      --tw-translate-x: calc(-100% - 2.5rem);
-    }
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"][class~="z-30"][class~="bg-black/50"] {
-    background-color: rgb(var(--ui-scrim));
-    -webkit-backdrop-filter: var(--ui-scrim-blur);
-    backdrop-filter: var(--ui-scrim-blur);
-  }
-
-  :where(.flat-theme) .sidebar-header {
-    height: 3.75rem;
-    border-color: transparent;
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  html.flat-theme .sidebar-header.sidebar-header-collapsed {
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-  }
-
-  /* the brand: an app-icon squircle, 15px semibold name, the version as a small mono capsule */
-  html.flat-theme .sidebar-logo {
-    height: 2rem;
-    width: 2rem;
-    flex-basis: 2rem;
-    min-width: 2rem;
-    border-radius: 0.5rem;
-    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 1px 3px 0 rgb(0 0 0 / 0.12);
-  }
-
-  html.flat-theme .sidebar-brand-title {
-    font-size: 0.9375rem;
-    line-height: 1.25rem;
-    font-weight: 600;
-    letter-spacing: -0.012em;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .sidebar-brand-title:hover {
-    color: rgb(var(--ui-ink));
-    opacity: 0.8;
-  }
-
-  /* version badge under the brand: an identifier, so monospace (only the badge button itself, not the
-     buttons inside its dropdown) */
-  html.flat-theme .sidebar-brand > div > button {
-    margin-left: -0.375rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-    font-family: var(--ui-font-mono);
-    font-size: 0.6875rem;
-    line-height: 1rem;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme .sidebar-brand > div > button:hover {
-    background-color: var(--ui-nav-hover);
-  }
-
-  :where(.flat-theme) .sidebar-nav {
-    padding: 0.25rem 0.625rem 0.75rem;
-  }
-
-  html.flat-theme .sidebar[class~="w-[72px]"] .sidebar-nav {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-
-  :where(.flat-theme) .sidebar-link {
-    min-height: 2rem;
-    gap: 0.625rem;
-    border-radius: var(--ui-radius-lg);
-    padding-top: 0.375rem;
-    padding-bottom: 0.375rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    font-weight: 400;
-    color: rgb(var(--ui-ink));
-    transition-property: color, background-color;
-    transition-duration: 150ms;
-    transition-timing-function: var(--ui-ease);
-  }
-
-  html.flat-theme .sidebar-link:not(.sidebar-link-collapsed) {
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-  }
-
-  html.flat-theme .sidebar-link.sidebar-link-collapsed {
-    padding-left: 0.8125rem;
-    padding-right: 0.8125rem;
-  }
-
-  html.flat-theme .sidebar .sidebar-link.mb-1 {
-    margin-bottom: 0.125rem;
-  }
-
-  :where(.flat-theme) .sidebar-link:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .sidebar-link-active,
-  :where(.flat-theme) .sidebar-link-active:hover {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  /* glyphs: the item's icon (upstream 20px svg or an uploaded custom svg) at 18px in the muted grey; the
-     current item's glyph in the accessible blue */
-  html.flat-theme .sidebar-nav .sidebar-link > svg,
-  html.flat-theme .sidebar-nav .sidebar-link > .sidebar-svg-icon {
-    width: 1.125rem;
-    height: 1.125rem;
-    flex: 0 0 1.125rem;
-    color: rgb(var(--ui-muted));
-    stroke-width: 1.75;
-  }
-
-  html.flat-theme .sidebar-nav .sidebar-link > .sidebar-svg-icon svg {
-    width: 100%;
-    height: 100%;
-  }
-
-  html.flat-theme .sidebar-nav .sidebar-link-active > svg,
-  html.flat-theme .sidebar-nav .sidebar-link-active > .sidebar-svg-icon {
-    color: rgb(var(--ui-nav-current-ink));
-  }
-
-  /* group chevron and child rows */
-  html.flat-theme .sidebar-link .sidebar-label-flex > svg {
-    width: 0.75rem;
-    height: 0.75rem;
-    stroke-width: 2.4;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme .sidebar-link-active .sidebar-label-flex > svg {
-    color: rgb(var(--ui-nav-current-ink));
-  }
-
-  html.flat-theme .sidebar-nav div[class~="border-l"] {
-    margin-left: 1.125rem;
-    border-left-color: transparent;
-    padding-left: 0.25rem;
-  }
-
-  html.flat-theme .sidebar-nav div[class~="border-l"] > .sidebar-link > svg {
-    width: 1rem;
-    height: 1rem;
-    flex-basis: 1rem;
-  }
-
-  /* the footer rows (theme, collapse): a hairline above, grey glyphs (the sun keeps upstream's amber) */
-  html.flat-theme .sidebar > div[class~="mt-auto"] {
-    border-top: 0.5px solid var(--ui-hairline-soft);
-    padding: 0.5rem 0.625rem 0.625rem;
-  }
-
-  html.flat-theme .sidebar[class~="w-[72px]"] > div[class~="mt-auto"] {
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
-  }
-
-  html.flat-theme .sidebar > div[class~="mt-auto"] .sidebar-link {
-    margin-bottom: 0.125rem;
-  }
-
-  html.flat-theme .sidebar > div[class~="mt-auto"] .sidebar-link > svg {
-    width: 1.125rem;
-    height: 1.125rem;
-  }
-
-  html.flat-theme .sidebar > div[class~="mt-auto"] .sidebar-link > svg:not([class~="text-amber-500"]) {
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) .sidebar-section {
-    margin-bottom: 0.875rem;
-  }
-
-  :where(.flat-theme) .sidebar-section-title {
-    margin-bottom: 0.25rem;
-    padding-left: 0.625rem;
-    font-size: 0.6875rem;
-    line-height: 1rem;
-    font-weight: 600;
-    letter-spacing: 0;
-    text-transform: none;
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) .page-header {
-    margin-bottom: 1.25rem;
-  }
-
-  :where(.flat-theme) .page-title {
-    font-size: 1.625rem;
-    line-height: 2rem;
-    font-weight: 700;
-    letter-spacing: -0.022em;
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .page-description {
-    font-size: 0.8125rem;
-    color: rgb(var(--ui-muted));
-  }
-
-  /* ---- states ---- */
-  :where(.flat-theme) .empty-state {
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
-  }
-
-  :where(.flat-theme) .empty-state-icon {
-    margin-bottom: 0.75rem;
-    height: 2.5rem;
-    width: 2.5rem;
-    color: rgb(var(--ui-faint));
-  }
-
-  :where(.flat-theme) .empty-state-title {
-    font-size: 0.9375rem;
-    font-weight: 600;
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .empty-state-description {
-    font-size: 0.8125rem;
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) .skeleton {
-    border-radius: 6px;
-    background-color: rgb(var(--ui-subtle));
-  }
-
-  :where(.flat-theme) .divider {
-    background-color: var(--ui-hairline-soft);
-  }
-
-  /* segmented control (macOS Tahoe): a recessed capsule track with a glossy raised thumb */
-  :where(.flat-theme) .tabs {
-    gap: 0.125rem;
-    border: 0;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  :where(.flat-theme) .tab {
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.1875rem 0.875rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    color: rgb(var(--ui-ink) / 0.8);
-    transition-property: color, background-color, box-shadow;
-    transition-duration: var(--ui-duration);
-    transition-timing-function: var(--ui-ease);
-  }
-
-  :where(.flat-theme) .tab:hover {
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .tab-active,
-  :where(.flat-theme) .tab-active:hover {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  :where(.flat-theme) .progress {
-    height: 0.375rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  :where(.flat-theme) .progress-bar {
-    border-radius: var(--ui-radius-capsule);
-    background-image: none;
-    background-color: rgb(var(--ui-primary));
-  }
-
-  /* switches (macOS): a recessed track, Apple blue when on, light with a 3:1 ring when off; a glossy white knob */
-  :where(.flat-theme) .switch {
-    background-color: var(--ui-switch-off);
-    box-shadow: inset 0 0 0 1px var(--ui-switch-ring), var(--ui-track-shadow);
-  }
-
-  :where(.flat-theme) .switch-active {
-    background-color: rgb(var(--ui-switch-on));
-    background-image: var(--ui-switch-on-fill);
-    box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.18), inset 0 0 0 0.5px rgb(0 40 100 / 0.2);
-  }
-
-  :where(.flat-theme) .switch-thumb {
-    background-image: var(--ui-knob);
-    box-shadow: var(--ui-knob-shadow);
-  }
-
-  :where(.flat-theme) .switch-active .switch-thumb {
-    background-color: #fff;
-  }
-
-  /* Switches (upstream markup: button.inline-flex.rounded-full.h-5.w-9 / .h-6.w-11 with a knob span;
-     Toggle.vue and ~75 inline copies). [class~="..."] hooks: see the selection block below. */
-  html.flat-theme button[class~="rounded-full"]:is([class~="h-5"][class~="w-9"], [class~="h-6"][class~="w-11"]):is([class~="bg-gray-200"], [class~="bg-gray-300"]) {
-    background-color: var(--ui-switch-off);
-    box-shadow: inset 0 0 0 1px var(--ui-switch-ring), var(--ui-track-shadow);
-  }
-
-  html.flat-theme button[class~="rounded-full"]:is([class~="h-5"][class~="w-9"], [class~="h-6"][class~="w-11"]):is([class~="bg-primary-500"], [class~="bg-primary-600"]) {
-    background-color: rgb(var(--ui-switch-on));
-    background-image: var(--ui-switch-on-fill);
-    box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.18), inset 0 0 0 0.5px rgb(0 40 100 / 0.2);
-    --theme-on-fill: 255 255 255;
-  }
-
-  html.flat-theme button[class~="rounded-full"]:is([class~="h-5"][class~="w-9"], [class~="h-6"][class~="w-11"]) > span[class~="rounded-full"] {
-    background-color: #fff;
-    background-image: var(--ui-knob);
-    box-shadow: var(--ui-knob-shadow);
-  }
-
-  /* the knob is a horizontal capsule (macOS Tahoe switches): 26 x 20 in the 44 x 24 track, 21 x 16 in
-     the 36 x 20 one; the "on" position moves to the far end of the wider knob */
-  html.flat-theme button[class~="rounded-full"][class~="h-6"][class~="w-11"][class~="border-2"] > span[class~="rounded-full"][class~="h-5"][class~="w-5"] {
-    width: 1.625rem;
-  }
-
-  html.flat-theme button[class~="rounded-full"][class~="h-6"][class~="w-11"][class~="border-2"] > span[class~="h-5"][class~="w-5"][class~="translate-x-5"] {
-    --tw-translate-x: 0.875rem;
-  }
-
-  html.flat-theme button[class~="rounded-full"][class~="h-5"][class~="w-9"][class~="border-2"] > span[class~="rounded-full"][class~="h-4"][class~="w-4"] {
-    width: 1.3125rem;
-  }
-
-  html.flat-theme button[class~="rounded-full"][class~="h-5"][class~="w-9"][class~="border-2"] > span[class~="h-4"][class~="w-4"][class~="translate-x-4"] {
-    --tw-translate-x: 0.6875rem;
-  }
-
-  html.flat-theme button[class~="rounded-full"]:is([class~="h-5"][class~="w-9"], [class~="h-6"][class~="w-11"]):focus-visible {
-    --tw-ring-offset-width: 0px;
-    --tw-ring-shadow: var(--ui-focus-ring);
-    box-shadow: var(--ui-focus-ring);
-  }
-
-  /* phones: DataTable renders each row as a card (div.rounded-lg.border.bg-white.p-4): a white 20px card on
-     the backdrop without a border (#161618 in dark) */
-  html.flat-theme .table-page-layout.mobile-mode div[class~="space-y-3"] > div[class~="rounded-lg"][class~="border"][class~="p-4"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-card);
-    background-color: rgb(var(--ui-surface));
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  /* the pagination bar under a table page sits on the backdrop (no band, no rule) */
-  html.flat-theme .table-page-layout > .layout-section-fixed > div[class~="border-t"][class~="bg-white"]:has(nav[aria-label='Pagination']) {
-    border-top-color: transparent;
-    background-color: transparent;
-    padding-left: 0.5rem;
-    padding-right: 0.25rem;
-  }
-
-  /* Pagination (upstream markup: nav[aria-label=Pagination] > button, a joined group): one glass capsule of
-     28px round buttons; the current page is tinted Apple blue with the figure in the accessible blue. */
-  html.flat-theme nav[aria-label='Pagination'] {
-    gap: 0.125rem;
-    border-radius: var(--ui-radius-capsule);
-    background-image: var(--ui-control-fill);
-    padding: 0.1875rem;
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme nav[aria-label='Pagination'] > button {
-    height: 1.75rem;
-    min-width: 1.75rem;
-    justify-content: center;
-    margin-left: 0;
-    border: 0;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    padding: 0 0.5rem;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    font-variant-numeric: tabular-nums;
-    color: rgb(var(--ui-ink));
-    transition: background-color var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme nav[aria-label='Pagination'] > button:is(:first-child, :last-child) {
-    border-radius: var(--ui-radius-capsule);
-    color: rgb(var(--ui-ink) / 0.8);
-  }
-
-  html.flat-theme nav[aria-label='Pagination'] > button > svg {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-
-  html.flat-theme nav[aria-label='Pagination'] > button:hover:not(:disabled) {
-    background-color: var(--ui-nav-hover);
-  }
-
-  html.flat-theme nav[aria-label='Pagination'] > button[aria-current='page'],
-  html.flat-theme nav[aria-label='Pagination'] > button[aria-current='page']:hover {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  /* (dark: the tint sits on the lighter glass capsule, so the figure takes a lighter blue, >= 5:1) */
-  html.flat-theme.dark nav[aria-label='Pagination'] > button[aria-current='page'] {
-    color: rgb(124 192 255);
-  }
-
-  /* ---- selection: one style for "selected option card" and "active segment" ---- */
-
-  /* These hooks match upstream utility classes with [class~="..."] instead of .class on purpose:
-     inside @layer, Tailwind v3 copies every rule whose selector names a class into each
-     `@apply <that class>` site (bg-white, shadow-sm, p-1, text-*-600 ... are applied hundreds of
-     times), which multiplied this block into ~470 rules / ~93 KB. Attribute selectors keep the
-     same specificity and are not @apply candidates. */
-
-  /* Account create/edit option cards (upstream markup: button.rounded-lg.border-2.p-3 with a
-     per-platform `border-<hue>-500 bg-<hue>-50` when selected, hooked by the forms' ids): the Apple Store
-     configurator choice — a 12px white card with a hairline and a contact shadow, the selected card framed in
-     Apple blue (2px) on a faint blue fill; the icon tile inside keeps its brand colour. The 1px border + 1px
-     padding keeps the size. */
-  html.flat-theme :is(#create-account-form, #edit-account-form) button[class~="rounded-lg"][class~="border-2"][class~="p-3"] {
-    border-width: 1px;
-    border-radius: var(--ui-radius-xl);
-    padding: calc(0.75rem + 1px);
-    border-color: rgb(var(--ui-line-strong));
-    background-color: rgb(var(--ui-surface));
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
-    transition-property: border-color, background-color, box-shadow;
-    transition-duration: var(--ui-duration);
-    transition-timing-function: var(--ui-ease);
-  }
-
-  html.flat-theme.dark :is(#create-account-form, #edit-account-form) button[class~="rounded-lg"][class~="border-2"][class~="p-3"] {
-    border-color: rgb(var(--ui-line-strong));
-    background-color: rgb(var(--ui-surface));
-  }
-
-  html.flat-theme :is(#create-account-form, #edit-account-form) button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="border-gray-200"]:hover:not(:disabled) {
-    border-color: rgb(var(--ui-control-line));
-  }
-
-  html.flat-theme :is(#create-account-form, #edit-account-form) button[class~="rounded-lg"][class~="border-2"][class~="p-3"]:not([class~="border-gray-200"]) {
-    border-color: rgb(var(--ui-primary));
-    background-color: rgb(var(--ui-primary) / 0.05);
-    box-shadow: 0 0 0 1px rgb(var(--ui-primary));
-  }
-
-  html.flat-theme.dark :is(#create-account-form, #edit-account-form) button[class~="rounded-lg"][class~="border-2"][class~="p-3"]:not([class~="border-gray-200"]) {
-    border-color: rgb(var(--ui-line-focus));
-    background-color: rgb(10 132 255 / 0.12);
-    box-shadow: 0 0 0 1px rgb(var(--ui-line-focus));
-  }
-
-  /* Segmented pickers (upstream markup: a .bg-gray-100 / .bg-gray-50 track with .p-1 / .p-0.5 whose active
-     button is .bg-white.shadow-sm): the macOS segmented control — a recessed capsule track, the active
-     segment a glossy raised capsule with an ink label at 500, whatever accent colour upstream gave the option.
-     A platform glyph inside the active segment keeps its brand colour. */
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):has(> button) {
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):has(> button) > button {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):has(> button) > button:not([class~="shadow-sm"]) {
-    color: rgb(var(--ui-ink) / 0.8);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):has(> button) > button:not([class~="shadow-sm"]):hover {
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"] {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    font-weight: 500;
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  html.flat-theme.dark :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):has(> button) {
-    background-color: var(--ui-track);
-  }
-
-  html.flat-theme.dark :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"] {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"] > svg {
-    color: rgb(var(--ui-choice-brand, var(--ui-ink)));
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"]:is([class~="text-orange-600"], [class~="text-amber-600"], [class~="text-amber-700"]) {
-    --ui-choice-brand: var(--theme-text-warning-600);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"]:is([class~="text-green-600"], [class~="text-emerald-600"]) {
-    --ui-choice-brand: var(--theme-text-success-600);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"]:is([class~="text-teal-600"], [class~="text-sky-600"], [class~="text-cyan-600"]) {
-    --ui-choice-brand: var(--theme-text-teal-600);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"][class~="text-blue-600"] {
-    --ui-choice-brand: var(--theme-text-info-600);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"][class~="text-indigo-600"] {
-    --ui-choice-brand: var(--theme-text-indigo-600);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"]:is([class~="text-purple-600"], [class~="text-violet-600"], [class~="text-fuchsia-600"]) {
-    --ui-choice-brand: var(--theme-text-purple-600);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"][class~="text-pink-600"] {
-    --ui-choice-brand: var(--theme-text-pink-600);
-  }
-
-  html.flat-theme :is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]) > button[class~="bg-white"][class~="shadow-sm"]:is([class~="text-rose-600"], [class~="text-red-600"]) {
-    --ui-choice-brand: var(--theme-text-danger-600);
-  }
-
-  /* Account classification bar (AccountFolderBar): filter capsules; the current classification is tinted
-     Apple blue (the label and its count in the accessible blue), as upstream tints it in its primary. */
-  html.flat-theme nav[data-test="desktop-taxonomy-nav"] button[data-test="desktop-taxonomy-option"] {
-    min-height: 1.75rem;
-    border-radius: var(--ui-radius-capsule);
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    color: rgb(var(--ui-ink) / 0.82);
-    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme nav[data-test="desktop-taxonomy-nav"] button[data-test="desktop-taxonomy-option"]:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme nav[data-test="desktop-taxonomy-nav"] button[data-test="desktop-taxonomy-option"][class~="bg-primary-50"],
-  html.flat-theme nav[data-test="desktop-taxonomy-nav"] button[data-test="desktop-taxonomy-option"][class~="bg-primary-50"]:hover {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  html.flat-theme nav[data-test="desktop-taxonomy-nav"] button[data-test="desktop-taxonomy-option"][class~="bg-primary-50"] > span[class~="text-gray-400"] {
-    color: rgb(var(--ui-nav-current-ink));
-  }
-
-  /* phones: the table card gives way to row cards on the backdrop, so the classification strip becomes a card */
-  html.flat-theme .table-page-layout.mobile-mode div[class~="bg-surface/70"][class~="border-b"] {
-    margin-bottom: 0.75rem;
-    border-bottom-color: transparent;
-    border-radius: var(--ui-radius-card);
-    background-color: rgb(var(--ui-surface));
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  /* Bulk-action bar above the accounts table (AccountBulkActionsBar: a bordered .bg-sunk strip with a blue
-     left rule): a Liquid Glass bar, 14px, no border; upstream's left rule comes back as a 3px Apple-blue bar
-     on the left edge, inset clear of the rounded corners (its links and actions keep their colours). */
-  html.flat-theme div[class~="border-l-2"][class~="border-l-primary-500"][class~="bg-sunk"] {
-    position: relative;
-    border-color: transparent;
-    border-width: 0;
-    border-radius: var(--ui-radius-inner);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    padding: 0.625rem 0.75rem 0.625rem 1rem;
-    box-shadow: var(--ui-glass-shadow);
-  }
-
-  html.flat-theme div[class~="border-l-2"][class~="border-l-primary-500"][class~="bg-sunk"]::before {
-    content: '';
-    position: absolute;
-    top: 0.75rem;
-    bottom: 0.75rem;
-    left: 0;
-    width: 3px;
-    border-radius: 0 3px 3px 0;
-    background-color: rgb(var(--ui-line-focus));
-    pointer-events: none;
-  }
-
-  /* User Redeem balance card (RedeemView: a bg-gradient-to-br from-primary-500 to-primary-600 px-6
-     py-8 banner with white / primary-100 text): upstream's primary banner in Apple blue — the glossy fill
-     of the primary buttons (white >= 4.6:1 at every stop) with a specular top edge, every text white; the
-     icon on a frosted white tile. */
-  html.flat-theme [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] {
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 -1px 0 rgb(0 0 0 / 0.12);
-  }
-
-  html.flat-theme [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] :is([class~="text-white"], [class~="text-primary-100"]) {
-    color: #fff;
-  }
-
-  html.flat-theme [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] > [class~="bg-white/20"] {
-    background-color: rgb(255 255 255 / 0.14);
-    background-image: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04));
-    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.32), inset 0 0 0 0.5px rgb(255 255 255 / 0.22);
-  }
-
-  /* Settings tabs: SettingsView's scoped CSS hard-codes a green (#168a49) active underline; it follows the
-     accent. */
-  html.flat-theme .settings-tab-active::after {
-    background: rgb(var(--ui-primary));
-  }
-
-  /* Settings tab bar (SettingsView, scoped styles; sticky, the form scrolls beneath it): a Liquid Glass strip,
-     16px, with 10px tabs; the current tab is tinted Apple blue with its label and glyph in the accessible
-     blue (no underline). */
-  html.flat-theme .settings-tabs-shell {
-    border-color: transparent;
-    border-radius: 16px;
-    background-color: transparent;
-    background-image: var(--ui-glass-fill);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    padding: 0.3125rem;
-    box-shadow: var(--ui-glass-shadow);
-  }
-
-  html.flat-theme.dark .settings-tabs-shell {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-glass-fill);
-  }
-
-  html.flat-theme .settings-tabs-shell .settings-tab {
-    height: 2.25rem;
-    border-color: transparent;
-    border-radius: 11px;
-    color: rgb(var(--ui-ink) / 0.82);
-  }
-
-  html.flat-theme .settings-tabs-shell .settings-tab::before {
-    border-radius: 11px;
-    background: var(--ui-nav-hover);
-  }
-
-  /* (the current tab's label and glyph in the deeper accessible blue: #0066CC read 4.48:1 on the tinted glass at the
-     strip's right end; dark #64B4FF) */
-  html.flat-theme .settings-tabs-shell .settings-tab.settings-tab-active,
-  html.flat-theme.dark .settings-tabs-shell .settings-tab.settings-tab-active {
-    border-color: transparent;
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-primary-ink-strong));
-    font-weight: 600;
-    box-shadow: none;
-  }
-
-  html.flat-theme .settings-tabs-shell .settings-tab.settings-tab-active::after {
-    display: none;
-  }
-
-  html.flat-theme .settings-tabs-shell .settings-tab .settings-tab-icon,
-  html.flat-theme.dark .settings-tabs-shell .settings-tab .settings-tab-icon {
-    height: 1.25rem;
-    width: 1.25rem;
-    background-color: transparent;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme .settings-tabs-shell .settings-tab.settings-tab-active .settings-tab-icon {
-    background-color: transparent;
-    color: rgb(var(--ui-primary-ink-strong));
-  }
-
-  /* Onboarding tour: the primary action follows the accent (styles/onboarding.css:200 hard-codes a
-     green #168a49 with !important, so this needs !important as well). */
-  html.flat-theme .theme-tour-popover .driver-popover-next-btn {
-    border-radius: 9999px !important;
-    background-color: rgb(var(--ui-primary)) !important;
-    background-image: var(--ui-primary-fill) !important;
-    color: rgb(var(--ui-on-primary)) !important;
-    box-shadow: var(--ui-primary-shadow) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-next-btn:hover {
-    background-color: rgb(var(--ui-primary-hover)) !important;
-    background-image: var(--ui-primary-fill-hover) !important;
-  }
-
-  /* Ops monitor realtime window picker (OpsDashboardHeader: div.flex-wrap.gap-1 >
-     button.rounded.text-[9px], selected = bg-blue-500 text-white): the segmented control of the other
-     pickers — a recessed capsule track, the selected window a glossy raised capsule with ink text. */
-  html.flat-theme div[class~="flex-wrap"][class~="gap-1"]:has(> button[class~="rounded"][class~="text-[9px]"]) {
-    gap: 0.125rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme button[class~="rounded"][class~="text-[9px]"][class~="font-bold"] {
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    color: rgb(var(--ui-ink) / 0.8);
-  }
-
-  html.flat-theme button[class~="rounded"][class~="text-[9px]"][class~="font-bold"]:hover {
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme button[class~="rounded"][class~="text-[9px]"][class~="font-bold"][class~="bg-blue-500"],
-  html.flat-theme.dark button[class~="rounded"][class~="text-[9px]"][class~="font-bold"][class~="bg-blue-500"] {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  /* Either/or button groups (account create / edit / bulk edit: model whitelist vs mapping and the RPM
-     strategy, button.flex-1.rounded-lg.py-2.text-sm.transition-all; API key expiry presets,
-     button.rounded-lg.px-3.py-1.5.text-sm.transition-colors): upstream draws separate grey and
-     tinted buttons. Drawn as one segmented control, like the platform picker: recessed capsule track,
-     glossy raised selected segment with ink text. The multi-select error-code chips (same classes plus
-     font-medium) are left alone. */
-  html.flat-theme div[class~="flex"][class~="gap-2"]:has(> :is(button[class~="flex-1"][class~="py-2"][class~="transition-all"], button[class~="px-3"][class~="py-1.5"][class~="transition-colors"]:not([class~="font-medium"]))[class~="rounded-lg"][class~="text-sm"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"])) {
-    gap: 0.125rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme div[class~="flex"][class~="gap-2"]:has(> button[class~="px-3"][class~="py-1.5"][class~="transition-colors"]:not([class~="font-medium"])[class~="rounded-lg"][class~="text-sm"]:is([class~="bg-gray-100"], [class~="bg-primary-100"])) {
-    width: fit-content;
-    max-width: 100%;
-  }
-
-  html.flat-theme :is(button[class~="flex-1"][class~="py-2"][class~="transition-all"], button[class~="px-3"][class~="py-1.5"][class~="transition-colors"]:not([class~="font-medium"]))[class~="rounded-lg"][class~="text-sm"][class~="bg-gray-100"] {
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: none;
-    color: rgb(var(--ui-ink) / 0.8);
-    box-shadow: none;
-  }
-
-  html.flat-theme :is(button[class~="flex-1"][class~="py-2"][class~="transition-all"], button[class~="px-3"][class~="py-1.5"][class~="transition-colors"]:not([class~="font-medium"]))[class~="rounded-lg"][class~="text-sm"][class~="bg-gray-100"]:hover {
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme :is(button[class~="flex-1"][class~="py-2"][class~="transition-all"], button[class~="px-3"][class~="py-1.5"][class~="transition-colors"]:not([class~="font-medium"]))[class~="rounded-lg"][class~="text-sm"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]),
-  html.flat-theme.dark :is(button[class~="flex-1"][class~="py-2"][class~="transition-all"], button[class~="px-3"][class~="py-1.5"][class~="transition-colors"]:not([class~="font-medium"]))[class~="rounded-lg"][class~="text-sm"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]) {
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    font-weight: 500;
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  /* RPM strategy hints sit at opacity-70 (about 3.3:1); shown as muted text at full opacity (>= 4.6:1). */
-  html.flat-theme button[class~="flex-1"][class~="py-2"][class~="transition-all"][class~="rounded-lg"][class~="text-sm"] [class~="opacity-70"] {
-    opacity: 1;
-    color: rgb(var(--ui-muted));
-  }
-
-  /* Text fields with no placeholder, while empty (utils/flatTheme.ts gives them a blank " "
-     placeholder so :placeholder-shown means "empty"), and every native date / time field: nothing
-     inside the box says what it is, so a border identifies the field (WCAG 1.4.11) in the 3:1 control
-     line of checkboxes and radios. Filled fields, fields with a visible placeholder and the focus /
-     error / disabled states keep their own look. */
-  :where(.flat-theme) .input:is([placeholder=" "]:placeholder-shown, [placeholder=""]:placeholder-shown, [type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"]):not(select):not(textarea):not(:focus):not(:disabled):not(.input-error) {
-    border-color: rgb(var(--ui-control-line));
-  }
-
-  /* Distribution tables (model / group / endpoint distribution charts and the user dashboard: a
-     div.max-h-48.min-w-0.flex-1.overflow-auto > table next to the doughnut): header labels stay on
-     one line and, when the columns do not fit, the box scrolls sideways with a visible thin
-     scrollbar instead of looking clipped. */
-  html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"] > table > thead th {
-    white-space: nowrap;
-    font-weight: 600;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"]:has(> table) {
-    scrollbar-width: thin;
-    scrollbar-color: rgb(var(--ui-ink) / 0.26) transparent;
-  }
-
-  html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"]:has(> table)::-webkit-scrollbar-thumb {
-    background-color: rgb(var(--ui-ink) / 0.26);
-  }
-
-  /* The name column (model, group, endpoint, user) wraps long names instead of clipping them; it keeps room
-     for a whole short name, so a narrow card no longer squeezes it to one character per line. */
-  html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"] > table > tbody > tr > td:first-child:not([colspan]) {
-    min-width: 8rem;
-  }
-
-  /* Chart card titles next to segmented pickers do not wrap (「模型分 / 布」 on phones); the picker
-     group wraps instead. */
-  html.flat-theme [class~="card"] > div[class~="mb-4"][class~="justify-between"]:has(> div [class~="rounded-lg"]:is([class~="bg-gray-50"], [class~="bg-gray-100"]):is([class~="p-0.5"], [class~="p-1"])) > h3 {
-    flex-shrink: 0;
-    white-space: nowrap;
-  }
-
-  /* Dashboard chart row: below 1536 px the distribution card (ring + a six-column table) and the token trend
-     each take the full width, so full model names and every column fit next to the ring and the trend keeps a
-     readable time axis; from 1536 px they sit side by side again. */
-  @media (min-width: 1024px) and (max-width: 1535.98px) {
-    html.flat-theme [class~="grid"][class~="gap-6"][class~="lg:grid-cols-2"]:has(> [class~="card"]:first-child [class~="max-h-48"][class~="overflow-auto"] > table) {
-      grid-template-columns: minmax(0, 1fr);
-    }
-  }
-
-  /* Inline notices built from utilities (a rounded box with a hue-50 tint and a matching border, e.g. the
-     Backend-mode notice in Settings): the tint without the border, 12px corners (Settings-style notices). */
-  html.flat-theme div:is([class~="rounded-lg"], [class~="rounded-xl"])[class~="border"]:is([class~="bg-amber-50"], [class~="bg-yellow-50"], [class~="bg-orange-50"], [class~="bg-blue-50"], [class~="bg-sky-50"], [class~="bg-indigo-50"], [class~="bg-red-50"], [class~="bg-rose-50"], [class~="bg-green-50"], [class~="bg-emerald-50"], [class~="bg-purple-50"], [class~="bg-primary-50"]) {
-    border-color: transparent;
-    border-radius: var(--ui-radius-xl);
-  }
-  /* ---- round 4: table fitting, icon-only row actions, native date fields, onboarding copy ---- */
-
-  /* Timestamps on two lines (date / time): the cell text becomes an inline block exactly as wide as its
-     longest part, so it always breaks at the space and never inside the date or the time. Only in the
-     tables the user picked: each carries a data-table attribute on its DataTable (it lands on
-     .table-wrapper), and cells are found by DataTable's data-column, so hiding columns in 列设置 does not
-     switch the layout off. 账号管理「最近使用」 shows a relative time (「2天前」), which has no date / time
-     parts, so it is left alone. */
-  html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="created_at"] > span,
-  html.flat-theme .table-wrapper[data-table="keys"] td[data-column="created_at"] > span,
-  html.flat-theme .table-wrapper[data-table="users"] td:is([data-column="created_at"], [data-column="last_used_at"], [data-column="last_active_at"]) > span,
-  html.flat-theme .table-wrapper[data-table="usage"] td[data-column="created_at"] > span,
-  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="created_at"] > span,
-  html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="expiry"] > div > span:first-child {
-    display: inline-block;
-    width: min-content;
-    white-space: normal;
-  }
-
-  /* 账号管理「过期时间」 reads 「2026-10-25 08:00」, and a line may break after a hyphen, so min-content
-     would split the date. A width that holds the date keeps it whole and moves the time to line two. */
-  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="expires_at"] > div > span:first-child {
-    display: inline-block;
-    max-width: 10ch;
-    white-space: normal;
-  }
-
-  /* IP管理: names break only at a space or a hyphen ("美国原生-" / "超高质量") and stay on one line when they
-     have no separator; the location breaks only at the spaces around 「·」. keep-all keeps every Chinese
-     word together; min-width: min-content lets a part longer than the limit widen the column instead of
-     running into the next one. */
-  html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="name"] > span {
-    display: inline-block;
-    min-width: min-content;
-    max-width: 7.5em;
-    white-space: normal;
-    word-break: keep-all;
-  }
-
-  html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="location"] span[class~="text-sm"] {
-    min-width: min-content;
-    max-width: 5em;
-    white-space: normal;
-    word-break: keep-all;
-  }
-
-  /* API 密钥: the group cell always puts the badge on the first line and 「选择分组 ⌄」 on the second (a
-     two-column grid whose first item spans the row), so the parts never split unpredictably and the
-     column is only as wide as the wider of the two lines. */
-  html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button {
-    display: grid;
-    grid-template-columns: max-content max-content;
-    justify-content: start;
-    align-items: center;
-    column-gap: 0.25rem;
-    row-gap: 0.25rem;
-  }
-
-  html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button > :first-child {
-    grid-column: 1 / -1;
-    justify-self: start;
-  }
-
-  /* 用户管理: 「充值」 sits under the amount. */
-  html.flat-theme .table-wrapper[data-table="users"] td[data-column="balance"] > div {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.125rem;
-  }
-
-  html.flat-theme .table-wrapper[data-table="users"] td[data-column="balance"] > div > button {
-    margin-left: -0.5rem;
-  }
-
-  /* Icon-only row actions (IP管理, API 密钥, 分组管理), only with a mouse or trackpad (hover + fine
-     pointer): touch screens keep the visible labels. The label stays in the button for screen readers
-     (visually hidden) and is shown as a tooltip on hover and on keyboard focus, to the left of the
-     button and vertically centred on it, so the sticky table header (DataTable.vue .table-header,
-     z-index 200 above the table body) never covers it. The hovered cell is lifted above the other rows'
-     sticky action cells. With the console theme off the buttons keep their visible labels. */
-  html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"]:is(:hover, :focus-within) {
-    z-index: 30;
-  }
-
-  html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"] {
-    position: relative;
-  }
-
-  html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"]:focus-visible {
-    outline: 3px solid rgb(var(--ui-primary) / 0.5);
-    outline-offset: 1px;
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"] > span[class~="text-xs"] {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      margin: -1px;
-      padding: 0;
-      overflow: hidden;
-      clip: rect(0 0 0 0);
-      white-space: nowrap;
-      border: 0;
-    }
-
-    html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
-      top: 50%;
-      right: calc(100% + 0.375rem);
-      z-index: 1;
-      width: auto;
-      height: auto;
-      margin: 0;
-      padding: 0.25rem 0.5rem;
-      overflow: visible;
-      clip: auto;
-      transform: translateY(-50%);
-      border: 0;
-      border-radius: 8px;
-      background-color: transparent;
-      background-image: var(--ui-glass-fill-strong);
-      -webkit-backdrop-filter: var(--ui-glass-blur);
-      backdrop-filter: var(--ui-glass-blur);
-      color: rgb(var(--ui-ink));
-      font-size: 0.75rem;
-      line-height: 1rem;
-      font-weight: 500;
-      box-shadow: var(--ui-glass-float);
-      pointer-events: none;
-    }
-  }
-
-  /* 「用户消息限速」 three-way picker (account create / edit / bulk edit: div.flex.space-x-2 >
-     button.px-3.py-1.5.text-sm.rounded-md.border.transition-colors, selected = bg-primary-600): the
-     segmented control of the either/or groups (recessed track, glossy thumb). */
-  html.flat-theme div[class~="flex"][class~="space-x-2"]:has(> button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"])) {
-    width: fit-content;
-    max-width: 100%;
-    gap: 0.125rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme div[class~="flex"][class~="space-x-2"]:has(> button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"])) > button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"]) {
-    margin-left: 0;
-    margin-right: 0;
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    color: rgb(var(--ui-ink) / 0.8);
-    box-shadow: none;
-  }
-
-  html.flat-theme div[class~="flex"][class~="space-x-2"]:has(> button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"])) > button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"]):hover {
-    background-color: transparent;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme div[class~="flex"][class~="space-x-2"]:has(> button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"])) > button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"])[class~="bg-primary-600"] {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    font-weight: 500;
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  html.flat-theme.dark div[class~="flex"][class~="space-x-2"]:has(> button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"])) > button[class~="rounded-md"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="transition-colors"]:not([class~="inline-flex"])[class~="bg-primary-600"] {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  /* Native date / time fields (all 36, with or without the .input class): the 3:1 control line, ink
-     tabular figures, the console's calendar / clock glyph in the muted colour instead of the browser's,
-     and color-scheme following the mode so the browser's own picker opens dark in dark mode. The field
-     itself stays native. */
-  html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]):not(:focus):not(:disabled):not(.input-error) {
-    border-color: rgb(var(--ui-control-line));
-  }
-
-  html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]) {
-    color-scheme: light;
-    color: rgb(var(--ui-ink));
-    font-variant-numeric: tabular-nums;
-  }
-
-  html.flat-theme.dark input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"]) {
-    color-scheme: dark;
-  }
-
-  html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"])::-webkit-datetime-edit-fields-wrapper {
-    padding: 0;
-  }
-
-  html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"])::-webkit-calendar-picker-indicator {
-    width: 1rem;
-    height: 1rem;
-    margin-left: 0.375rem;
-    padding: 0;
-    cursor: pointer;
-    opacity: 1;
-    filter: none;
-    color: transparent;
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369696e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'/%3E%3C/svg%3E") center / 1rem no-repeat;
-  }
-
-  html.flat-theme.dark input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"])::-webkit-calendar-picker-indicator {
-    filter: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5'/%3E%3C/svg%3E");
-  }
-
-  html.flat-theme input[type="time"]::-webkit-calendar-picker-indicator {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369696e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
-  }
-
-  html.flat-theme.dark input[type="time"]::-webkit-calendar-picker-indicator {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z'/%3E%3C/svg%3E");
-  }
-
-  /* Onboarding tour copy: the emphasis lines are green (color: #10b981) inline styles in the i18n HTML
-     (i18n/locales/zh/misc.ts, en/misc.ts); they keep upstream's green in its readable Apple text shade (#127F32;
-     dark #30D158; #10b981 read 2.5:1). Only the colour declarations: the green callouts carry #10b981 in their
-     border and are mapped with the other callouts (shared:overlays O6).
-     The close button 「×」 is text, so it takes the muted text colour (>= 4.5:1). */
-  html.flat-theme .theme-tour-popover :is([style*="color: #10b981" i], [style*="color:#10b981" i]) {
-    color: rgb(var(--theme-text-success-600)) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-close-btn {
-    color: rgb(var(--ui-muted)) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-close-btn:hover {
-    color: rgb(var(--ui-ink)) !important;
-  }
-
-  /* ---- round 5: header wrap (用户管理), buttons under the text (IP管理) ---- */
-
-  /* 用户管理: the time-column headers wrap after four characters (「最后活跃」 / 「时间」; English wraps at
-     the space), so the columns are only as wide as the two-line date / time below them. */
-  html.flat-theme .table-wrapper[data-table="users"] th:is([data-column="last_active_at"], [data-column="last_used_at"], [data-column="created_at"]) > div > span:first-child {
-    max-width: 4.5em;
-  }
-
-  /* IP管理: the copy button sits under the address, the show-password button under the user name and
-     password, so both columns are only as wide as their text. */
-  html.flat-theme .table-wrapper[data-table="proxies"] td:is([data-column="address"], [data-column="auth"]) > div {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.125rem;
-  }
-
-  html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="auth"] > div > button {
-    margin-left: 0;
-  }
-
-  /* code tags (the IP address, the API key): upstream's grey fill with the text in the primary colour, as a
-     translucent grey tag with the deeper accessible blue (>= 5:1 on hovered and selected rows too; dark
-     #64B4FF) */
-  :where(.flat-theme) .code {
-    border-radius: 5px;
-    background-color: var(--ui-fill);
-    padding: 0.0625rem 0.3125rem;
-    font-size: 0.75rem;
-    color: rgb(var(--ui-primary-ink-strong));
-  }
-
-  :where(.flat-theme) .code-block {
-    border: 0;
-    border-radius: var(--ui-radius-xl);
-    background-color: rgb(var(--ui-canvas));
-    padding: 0.75rem 0.875rem;
-    font-size: 0.75rem;
-    color: rgb(var(--ui-ink));
-  }
-
-  /* purely decorative layers of upstream layouts (blurred orbs, grids, tints) */
-  :where(.flat-theme) .ui-decor {
-    display: none;
-  }
-
-  /* ---- sign-in and the other auth pages (AuthLayout) ----
-     Apple ID: the neutral tonal backdrop, the site's icon as an app-icon squircle, a 28px semibold name (no
-     gradient text), a white 22px card with smooth layered shadows and a top highlight, recessed fields and a
-     full-width glossy blue capsule. */
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="absolute"][class~="inset-0"][class~="bg-gradient-to-br"]:first-child {
-    background-color: rgb(var(--ui-canvas));
-    background-image: var(--ui-backdrop);
-  }
-
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > div[class~="mb-8"] > div[class~="rounded-2xl"] {
-    height: 4rem;
-    width: 4rem;
-    border-radius: 1rem;
-    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 2px 4px 0 rgb(0 0 0 / 0.06), 0 10px 24px -6px rgb(0 0 0 / 0.18);
-  }
-
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] h1[class~="text-gradient"] {
-    background-image: none;
-    -webkit-background-clip: border-box;
-    background-clip: border-box;
-    color: rgb(var(--ui-ink));
-    -webkit-text-fill-color: currentColor;
-    font-size: 1.75rem;
-    line-height: 2.25rem;
-    font-weight: 600;
-    letter-spacing: -0.02em;
-  }
-
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > div[class~="mb-8"] > p {
-    font-size: 0.9375rem;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > [class~="card-glass"] {
-    border: 0;
-    border-radius: var(--ui-radius-dialog);
-    background-color: rgb(var(--ui-surface));
-    box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.05), 0 2px 4px 0 rgb(0 0 0 / 0.03), 0 12px 32px -8px rgb(0 0 0 / 0.12),
-      0 32px 64px -24px rgb(0 0 0 / 0.14), inset 0 1px 0 rgb(255 255 255 / 0.9);
-  }
-
-  html.flat-theme.dark div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > [class~="card-glass"] {
-    background-color: rgb(var(--ui-surface));
-    box-shadow: 0 0 0 0.5px rgb(255 255 255 / 0.08), 0 2px 4px 0 rgb(0 0 0 / 0.3), 0 24px 56px -16px rgb(0 0 0 / 0.7),
-      inset 0 1px 0 rgb(255 255 255 / 0.06);
-  }
-
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > [class~="card-glass"] :is(h2)[class~="text-2xl"] {
-    font-size: 1.375rem;
-    line-height: 1.75rem;
-    font-weight: 600;
-    letter-spacing: -0.018em;
-  }
-
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > [class~="card-glass"] .input {
-    min-height: 2.5rem;
-    border-radius: 0.75rem;
-  }
-
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > [class~="card-glass"] .btn-primary {
-    min-height: 2.5rem;
-    font-size: 0.9375rem;
-  }
-
-  /* the copyright line keeps >= 4.5:1 (upstream gray-400) */
-  html.flat-theme div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > div[class~="mt-8"] {
-    color: rgb(var(--ui-muted));
-  }
-
-  /* Upstream recipes carry dark: variants (specificity 0,2,0 / 0,3,0); restate the console values for
-     dark mode at the same specificity where the ramps alone do not reproduce them. */
-  :where(.flat-theme) .btn-secondary:is(.dark *),
-  :where(.flat-theme) .btn-danger:is(.dark *),
-  :where(.flat-theme) .btn-success:is(.dark *),
-  :where(.flat-theme) .btn-warning:is(.dark *) {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-  }
-
-  :where(.flat-theme) .btn-secondary:is(.dark *) {
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .btn-secondary:hover:not(:disabled):is(.dark *),
-  :where(.flat-theme) .btn-danger:hover:not(:disabled):is(.dark *),
-  :where(.flat-theme) .btn-success:hover:not(:disabled):is(.dark *),
-  :where(.flat-theme) .btn-warning:hover:not(:disabled):is(.dark *) {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  :where(.flat-theme) .btn-ghost:is(.dark *) {
-    color: rgb(var(--ui-ink) / 0.82);
-  }
-
-  :where(.flat-theme) .btn-ghost:hover:not(:disabled):is(.dark *) {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .input:is(.dark *) {
-    border-color: var(--ui-field-line);
-    background-color: var(--ui-field-bg);
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .input:is(.dark *)::placeholder {
-    color: rgb(var(--ui-faint));
-  }
-
-  :where(.flat-theme) .input:hover:not(:disabled):not(:focus):is(.dark *) {
-    border-color: var(--ui-field-line-hover);
-  }
-
-  :where(.flat-theme) .input:focus:is(.dark *) {
-    border-color: rgb(var(--ui-line-focus));
-    background-color: var(--ui-field-bg);
-  }
-
-  :where(.flat-theme) .input:disabled:is(.dark *) {
-    border-color: transparent;
-    background-color: rgb(var(--ui-subtle));
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) select.input:is(.dark *) {
-    border-color: transparent;
-    background-color: transparent;
-  }
-
-  :where(.flat-theme) .glass:is(.dark *),
-  :where(.flat-theme) .glass-card:is(.dark *),
-  :where(.flat-theme) .card:is(.dark *),
-  :where(.flat-theme) .card-glass:is(.dark *) {
-    border-color: transparent;
-    background-color: rgb(var(--ui-surface));
-  }
-
-  :where(.flat-theme) .card-header:is(.dark *),
-  :where(.flat-theme) .card-footer:is(.dark *),
-  :where(.flat-theme) .modal-header:is(.dark *),
-  :where(.flat-theme) .modal-footer:is(.dark *),
-  :where(.flat-theme) .dialog-header:is(.dark *),
-  :where(.flat-theme) .dialog-footer:is(.dark *) {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  :where(.flat-theme) .modal-footer:is(.dark *),
-  :where(.flat-theme) .dialog-footer:is(.dark *) {
-    background-color: rgb(var(--ui-dialog-footer));
-  }
-
-  :where(.flat-theme) .modal-content:is(.dark *),
-  :where(.flat-theme) .dialog-container:is(.dark *) {
-    border-color: transparent;
-    background-color: rgb(var(--ui-raised));
-  }
-
-  :where(.flat-theme) .dialog-overlay:is(.dark *) {
-    background-color: rgb(var(--ui-scrim));
-  }
-
-  :where(.flat-theme) .table-container:is(.dark *) {
-    border-color: transparent;
-  }
-
-  :where(.flat-theme) .table th:is(.dark *) {
-    border-color: var(--ui-hairline-soft);
-    background-color: rgb(var(--ui-surface));
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) .table td:is(.dark *) {
-    border-color: transparent;
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .table tbody tr:hover:is(.dark *) {
-    background-color: rgb(var(--ui-row-hover));
-  }
-
-  :where(.flat-theme) .dropdown:is(.dark *) {
-    border-color: transparent;
-    background-color: transparent;
-  }
-
-  :where(.flat-theme) .dropdown-item:is(.dark *) {
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .dropdown-item:hover:is(.dark *) {
-    background-color: var(--ui-menu-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .sidebar:is(.dark *) {
-    border-color: transparent;
-    background-color: transparent;
-  }
-
-  :where(.flat-theme) .sidebar-header:is(.dark *) {
-    border-color: transparent;
-  }
-
-  :where(.flat-theme) .sidebar-link:is(.dark *) {
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .sidebar-link:hover:is(.dark *) {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .sidebar-link-active:is(.dark *),
-  :where(.flat-theme) .sidebar-link-active:hover:is(.dark *) {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-  }
-
-  :where(.flat-theme) .sidebar-section-title:is(.dark *) {
-    color: rgb(var(--ui-muted));
-  }
-
-  :where(.flat-theme) .divider:is(.dark *) {
-    background-color: var(--ui-hairline-soft);
-  }
-
-  :where(.flat-theme) .tabs:is(.dark *) {
-    background-color: var(--ui-track);
-  }
-
-  :where(.flat-theme) .tab:is(.dark *) {
-    color: rgb(var(--ui-ink) / 0.8);
-  }
-
-  :where(.flat-theme) .tab-active:is(.dark *) {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-  }
-
-  :where(.flat-theme) .progress:is(.dark *) {
-    background-color: var(--ui-track);
-  }
-
-  :where(.flat-theme) .switch:is(.dark *) {
-    background-color: var(--ui-switch-off);
-  }
-
-  :where(.flat-theme) .code:is(.dark *) {
-    background-color: var(--ui-fill);
-    color: rgb(var(--ui-primary-ink-strong));
-  }
-
-  :where(.flat-theme) .badge-primary:is(.dark *) {
-    background-color: rgb(var(--ui-primary-soft));
-    color: rgb(var(--theme-text-primary-300));
-  }
-
-  :where(.flat-theme) .badge-gray:is(.dark *) {
-    background-color: var(--ui-fill);
-    color: rgb(var(--ui-ink) / 0.85);
-  }
-
-  :where(.flat-theme) .badge-success:is(.dark *) {
-    background-color: rgb(var(--ui-success-soft));
-    color: rgb(var(--ui-success));
-  }
-
-  :where(.flat-theme) .badge-warning:is(.dark *) {
-    background-color: rgb(var(--ui-warning-soft));
-    color: rgb(var(--ui-warning));
-  }
-
-  :where(.flat-theme) .badge-danger:is(.dark *) {
-    background-color: rgb(var(--ui-danger-soft));
-    color: rgb(var(--ui-danger));
-  }
-
-  :where(.flat-theme) .badge-purple:is(.dark *) {
-    background-color: rgb(var(--ui-purple-soft));
-    color: rgb(var(--ui-purple));
-  }
-
-  :where(.flat-theme) .app-main > header:is(.dark *) {
-    border-color: transparent;
-  }
-
-  /* ---- shared fixes from the v2 site-wide sweep (round 2): rules that apply wherever the pattern
-     appears. Two owners: overlays and materials (tooltips, popovers, menus, dialogs, glass contrast,
-     the onboarding tour) and surfaces and content (cards, plain tables, nested panels, fields, tip
-     boxes, badges, solid fills). ---- */
-
-  /* shared:overlays */
-
-  /* O1 · tooltips, info popovers and hover tip bars (coordinator decision 1). Upstream draws them as dark boxes with
-     white text and a CSS arrow: HelpTooltip (the ⓘ, teleported role=tooltip), InfoPopover (teleported role=dialog),
-     the usage table's token / cost details (teleported into a fixed pointer-events-none holder), the groups page's
-     exclusive-group tip, and the tip bars built from utilities (absolute + bg-gray-900 / 800 + text-white + text-xs,
-     shown on group hover). They take the menu material of the glass menus (14px; 10px for the small tip bars), ink
-     text and no arrow. The dark-surface text shades inside (text-white, gray-300 / 400, the -300 / -400 hues) are
-     set back to the light text roles while the page is light, so they read on the light glass; in dark mode the
-     menu material is the dark surface they were measured on. */
-  html.flat-theme :is(body > div[class~="theme-dark-surface"][class~="fixed"][class~="bg-gray-900"], body > div[class~="fixed"][class~="pointer-events-none"] > div[class~="theme-dark-surface"][class~="bg-gray-900"], div[class~="pointer-events-none"][class~="absolute"] > div[class~="theme-dark-surface"][class~="bg-gray-900"], :is(div, span)[class~="absolute"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"][class~="text-xs"]:is([class~="opacity-0"], [class~="invisible"])) {
-    border-color: transparent;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme :is(div, span)[class~="absolute"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"][class~="text-xs"]:is([class~="opacity-0"], [class~="invisible"]) {
-    border-radius: var(--ui-radius-lg);
-  }
-
-  html.flat-theme:not(.dark) :is(body > div[class~="theme-dark-surface"][class~="fixed"][class~="bg-gray-900"], body > div[class~="fixed"][class~="pointer-events-none"] > div[class~="theme-dark-surface"][class~="bg-gray-900"], div[class~="pointer-events-none"][class~="absolute"] > div[class~="theme-dark-surface"][class~="bg-gray-900"], :is(div, span)[class~="absolute"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"][class~="text-xs"]:is([class~="opacity-0"], [class~="invisible"])) {
-    --theme-on-fill: var(--ui-ink);
-    --theme-text-gray-100: var(--ui-ink);
-    --theme-text-gray-200: var(--ui-ink);
-    --theme-text-gray-300: var(--ui-muted);
-    --theme-text-gray-400: var(--ui-muted);
-    --theme-text-gray-500: var(--ui-muted);
-    --theme-text-primary-300: 0 102 204;
-    --theme-text-primary-400: 0 102 204;
-    --theme-text-primary-500: 0 102 204;
-    --theme-text-primary-600: 0 102 204;
-    --theme-text-primary-700: 0 90 184;
-    --theme-text-primary-800: 0 78 160;
-    --theme-text-danger-300: 214 0 19;
-    --theme-text-danger-400: 214 0 19;
-    --theme-text-danger-500: 214 0 19;
-    --theme-text-danger-600: 214 0 19;
-    --theme-text-danger-700: 192 0 4;
-    --theme-text-danger-800: 192 0 4;
-    --theme-text-warning-300: 178 80 0;
-    --theme-text-warning-400: 178 80 0;
-    --theme-text-warning-500: 178 80 0;
-    --theme-text-warning-600: 178 80 0;
-    --theme-text-warning-700: 159 67 0;
-    --theme-text-warning-800: 159 67 0;
-    --theme-text-info-300: 0 102 204;
-    --theme-text-info-400: 0 102 204;
-    --theme-text-info-500: 0 102 204;
-    --theme-text-info-600: 0 102 204;
-    --theme-text-info-700: 0 87 182;
-    --theme-text-info-800: 0 87 182;
-    --theme-text-success-300: 18 127 50;
-    --theme-text-success-400: 18 127 50;
-    --theme-text-success-500: 18 127 50;
-    --theme-text-success-600: 18 127 50;
-    --theme-text-success-700: 0 111 39;
-    --theme-text-success-800: 0 111 39;
-    --theme-text-purple-300: 137 68 171;
-    --theme-text-purple-400: 137 68 171;
-    --theme-text-purple-500: 137 68 171;
-    --theme-text-purple-600: 137 68 171;
-    --theme-text-purple-700: 120 56 152;
-    --theme-text-purple-800: 120 56 152;
-    --theme-text-teal-300: 0 113 164;
-    --theme-text-teal-400: 0 113 164;
-    --theme-text-teal-500: 0 113 164;
-    --theme-text-teal-600: 0 113 164;
-    --theme-text-teal-700: 0 98 145;
-    --theme-text-teal-800: 0 98 145;
-    --theme-text-indigo-300: 54 52 163;
-    --theme-text-indigo-400: 54 52 163;
-    --theme-text-indigo-500: 54 52 163;
-    --theme-text-indigo-600: 54 52 163;
-    --theme-text-indigo-700: 43 38 142;
-    --theme-text-indigo-800: 43 38 142;
-    --theme-text-pink-300: 208 6 67;
-    --theme-text-pink-400: 208 6 67;
-    --theme-text-pink-500: 208 6 67;
-    --theme-text-pink-600: 208 6 67;
-    --theme-text-pink-700: 186 0 56;
-    --theme-text-pink-800: 186 0 56;
-  }
-
-  /* (inside them: the dark separators become hairlines and the dark example box a quiet fill on the light glass) */
-  html.flat-theme:not(.dark) :is(body > div[class~="fixed"][class~="pointer-events-none"] > div[class~="theme-dark-surface"], div[class~="pointer-events-none"][class~="absolute"] > div[class~="theme-dark-surface"], :is(div, span)[class~="absolute"][class~="bg-gray-900"][class~="text-white"][class~="text-xs"]) :is([class~="border-gray-700"], [class~="border-white/10"]) {
-    border-color: var(--ui-hairline);
-  }
-
-  html.flat-theme:not(.dark) div[class~="pointer-events-none"][class~="absolute"] > div[class~="theme-dark-surface"][class~="bg-gray-900"] div[class~="bg-gray-800"] {
-    background-color: var(--ui-fill);
-  }
-
-  /* (a tip that opens upwards from a cell of the first two table rows ran under the sticky header, which stacks above
-     the whole body: those tips open downwards instead, so their text is never cut) */
-  html.flat-theme .table-wrapper .table-body > tr:nth-child(-n + 2) :is(div, span)[class~="absolute"][class~="bottom-full"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"] {
-    top: 100%;
-    bottom: auto;
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-  }
-
-  /* (in the toolbar capsule, which is glass itself, a popover gets no blur of the page beneath (a backdrop root):
-     the opaque menu material there — the balance details, the subscription popover, the user and language menus) */
-  html.flat-theme .app-main > header > div > div:last-child :is(.dropdown, :is(div, ul)[class~="absolute"]:is([class~="shadow-lg"], [class~="shadow-xl"])[class~="bg-white"]) {
-    background-image: var(--ui-menu-fill-solid);
-  }
-
-  /* (no arrow: the rotated square of HelpTooltip and the groups tip, the border triangles of the usage details and
-     the tip bars) */
-  html.flat-theme :is(body > div[class~="theme-dark-surface"][class~="fixed"][class~="bg-gray-900"], body > div[class~="fixed"][class~="pointer-events-none"] > div[class~="theme-dark-surface"][class~="bg-gray-900"], div[class~="pointer-events-none"][class~="absolute"] > div[class~="theme-dark-surface"][class~="bg-gray-900"], :is(div, span)[class~="absolute"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"][class~="text-xs"]:is([class~="opacity-0"], [class~="invisible"])) > div[class~="absolute"]:is([class~="rotate-45"], [class~="border-transparent"], [class~="border-t-transparent"]) {
-    display: none;
-  }
-
-  /* O2 · announcement dialogs (AnnouncementBell list and detail, AnnouncementPopup; teleported, built from utilities):
-     the v2 sheet — the light blurred scrim instead of 70 % black, a 22px opaque panel with the overlay shadow, a
-     neutral header on a hairline instead of the blue / amber wash, soft icon tiles (hue tint + hue glyph) instead of
-     the solid gradient squares, no pulsing rings, the footer as the dialogs' toolbar band, capsule buttons. Upstream's
-     colour positions stay: the blue (bell) and orange (popup) tiles, chips, the unread bar and the popup's orange
-     action (a deeper orange so white reads >= 4.7:1). */
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="overflow-y-auto"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) {
-    background-color: rgb(var(--ui-scrim));
-    background-image: none;
-    -webkit-backdrop-filter: var(--ui-scrim-blur);
-    backdrop-filter: var(--ui-scrim-blur);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) > div[class~="rounded-3xl"] {
-    border-radius: var(--ui-radius-dialog);
-    background-color: rgb(var(--ui-raised));
-    box-shadow: var(--ui-shadow-overlay);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) > div[class~="rounded-3xl"] > div[class~="border-b"]:first-child {
-    border-color: var(--ui-hairline-soft);
-    background-color: transparent;
-    background-image: none;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) > div[class~="rounded-3xl"] > div[class~="overflow-y-auto"] {
-    background-color: transparent;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) > div[class~="rounded-3xl"] > div[class~="border-t"]:last-child {
-    border-color: var(--ui-hairline-soft);
-    background-color: rgb(var(--ui-dialog-footer));
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) h2[class~="text-2xl"] {
-    font-size: 1.25rem;
-    line-height: 1.625rem;
-    font-weight: 600;
-    letter-spacing: -0.015em;
-  }
-
-  /* (the icon tiles: bell / popup header and the unread rows) */
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) div[class~="bg-gradient-to-br"][class~="text-white"]:is([class~="from-blue-500"], [class~="from-amber-500"]) {
-    background-color: rgb(var(--ui-info-soft));
-    background-image: var(--ui-tile-gloss);
-    color: rgb(var(--ui-info));
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) div[class~="bg-gradient-to-br"][class~="text-white"][class~="from-amber-500"] {
-    background-color: rgb(var(--ui-warning-soft));
-    color: rgb(var(--ui-warning));
-  }
-
-  /* (dark: the read rows' grey tile is the raised panel's own grey; one step lighter keeps the tile visible) */
-  html.flat-theme.dark body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) div[class~="rounded-xl"][class~="bg-gray-100"][class~="dark:bg-dark-700"] {
-    background-color: rgb(var(--ui-subtle));
-  }
-
-  /* (the pulsing rings of the unread tiles, chips and dots) */
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) span[class~="animate-ping"] {
-    display: none;
-  }
-
-  /* (chips: the category and unread chips are capsules; the solid gradient unread chip becomes the soft chip, its
-     white dot takes the chip's colour) */
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) span:is([class~="rounded-md"], [class~="rounded-lg"])[class~="text-xs"]:is([class~="bg-blue-100"], [class~="bg-gradient-to-r"]) {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) span[class~="bg-gradient-to-r"][class~="text-white"]:is([class~="from-blue-500"], [class~="from-amber-500"]) {
-    background-color: rgb(var(--ui-info-soft));
-    background-image: none;
-    color: rgb(var(--ui-info));
-    box-shadow: none;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) span[class~="bg-gradient-to-r"][class~="text-white"][class~="from-amber-500"] {
-    background-color: rgb(var(--ui-warning-soft));
-    color: rgb(var(--ui-warning));
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) span[class~="bg-gradient-to-r"][class~="text-white"] span[class~="bg-white"] {
-    background-color: currentColor;
-  }
-
-  /* (close buttons: the 28px round glass button of the dialogs) */
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button[class~="bg-white/50"]:is([class~="h-9"], [class~="h-10"]) {
-    height: 1.75rem;
-    width: 1.75rem;
-    border-radius: 9999px;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-muted));
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button[class~="bg-white/50"]:is([class~="h-9"], [class~="h-10"]):hover {
-    background-image: var(--ui-control-fill-hover);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button[class~="bg-white/50"]:is([class~="h-9"], [class~="h-10"]) > svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    stroke-width: 2.4;
-  }
-
-  /* (actions: 「全部已读」 / 「标记已读」 glossy blue, 「关闭」 a glass capsule, the popup's action glossy orange; no
-     hover scale) */
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button:is([class~="bg-blue-600"], [class~="from-blue-600"], [class~="from-amber-500"])[class~="text-white"] {
-    min-height: var(--ui-control-h);
-    border-radius: var(--ui-radius-capsule);
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: #fff;
-    --tw-scale-x: 1;
-    --tw-scale-y: 1;
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button:is([class~="bg-blue-600"], [class~="from-blue-600"])[class~="text-white"]:hover:not(:disabled) {
-    background-image: var(--ui-primary-fill-hover);
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button[class~="from-amber-500"][class~="text-white"] {
-    background-color: #b25000;
-    background-image: linear-gradient(180deg, #ba5600 0%, #b05100 55%, #a64a00 100%);
-    box-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.36), inset 0 6px 8px -5px rgb(255 255 255 / 0.2),
-      inset 0 -1px 1px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(110 50 0 / 0.3), 0 1px 2px 0 rgb(0 0 0 / 0.12),
-      0 4px 10px -4px rgb(0 0 0 / 0.22);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button[class~="from-amber-500"][class~="text-white"]:hover {
-    background-image: linear-gradient(180deg, #ac4f00 0%, #a24a00 55%, #994400 100%);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button[class~="rounded-xl"][class~="border"][class~="bg-white"] {
-    min-height: var(--ui-control-h);
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="pt-[8vh]"], [class~="pt-[6vh]"]) button[class~="rounded-xl"][class~="border"][class~="bg-white"]:hover {
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  /* O2 · announcement Markdown (styles/announcement-markdown.css, bell detail, popup, preview, /purchase notes): inline
-     code ink on the quiet fill, table heads on the sunk tone, a grey quote rule, 12px corners for code blocks and
-     images, hairline rules; links and list markers keep upstream's blue */
-  html.flat-theme .markdown-body code {
-    border-radius: 6px;
-    background-color: var(--ui-fill);
-    padding: 0.0625rem 0.375rem;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .markdown-body pre {
-    border-color: var(--ui-hairline-soft);
-    border-radius: var(--ui-radius-xl);
-    background-color: rgb(var(--ui-sunk));
-  }
-
-  html.flat-theme .markdown-body pre code {
-    background-color: transparent;
-    padding: 0;
-  }
-
-  html.flat-theme .markdown-body :is(table, th, td) {
-    border-color: var(--ui-hairline);
-  }
-
-  html.flat-theme .markdown-body th {
-    background-color: rgb(var(--ui-sunk));
-    background-image: none;
-  }
-
-  html.flat-theme .markdown-body blockquote {
-    border-left-color: rgb(var(--ui-line-strong));
-    background-color: rgb(var(--ui-sunk));
-  }
-
-  html.flat-theme .markdown-body blockquote::before {
-    color: rgb(var(--ui-ink) / 0.15);
-  }
-
-  html.flat-theme .markdown-body img {
-    border-color: var(--ui-hairline-soft);
-    border-radius: var(--ui-radius-xl);
-  }
-
-  html.flat-theme .markdown-body :is(hr, h1, h2) {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  /* O3 · ConfirmDialog (28 users): its footer buttons are built from utilities (a white bordered 8px button and a
-     flat red / primary one) → the dialog capsules: cancel = glass capsule, confirm = glossy blue, delete = glossy red */
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"] {
-    min-height: var(--ui-field-h);
-    border-radius: var(--ui-radius-capsule);
-    padding-left: 1.125rem;
-    padding-right: 1.125rem;
-    font-size: 0.8125rem;
-    transition-property: color, background-color, border-color, box-shadow, transform;
-    transition-duration: var(--ui-duration);
-    transition-timing-function: var(--ui-ease);
-  }
-
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"][class~="border-gray-300"] {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"][class~="border-gray-300"]:hover {
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"][class~="text-white"][class~="bg-primary-600"] {
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: rgb(var(--ui-on-primary));
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"][class~="text-white"][class~="bg-primary-600"]:hover {
-    background-image: var(--ui-primary-fill-hover);
-  }
-
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"][class~="text-white"][class~="bg-red-600"] {
-    background-color: rgb(var(--theme-color-danger-600));
-    background-image: var(--ui-danger-fill);
-    color: #fff;
-    box-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.36), inset 0 6px 8px -5px rgb(255 255 255 / 0.2),
-      inset 0 -1px 1px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(110 0 10 / 0.3), 0 1px 2px 0 rgb(0 0 0 / 0.12),
-      0 4px 10px -4px rgb(0 0 0 / 0.22);
-  }
-
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"][class~="text-white"][class~="bg-red-600"]:hover {
-    background-image: var(--ui-danger-fill-hover);
-  }
-
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"]:active {
-    transform: scale(0.98);
-  }
-
-  html.flat-theme .modal-footer div[class~="space-x-3"] > button[class~="rounded-md"][class~="px-4"][class~="py-2"]:focus-visible {
-    outline: none;
-    --tw-ring-offset-width: 0px;
-    --tw-ring-shadow: var(--ui-focus-ring);
-  }
-
-  /* O4 · ProxySelector (its own scoped .select-dropdown, account create / edit / bulk edit, risk control, settings):
-     the shared Select's glass menu — neutral highlight, the blue check marks the choice (no blue row fill), the
-     speed-test buttons hover neutral */
-  html.flat-theme .select-dropdown {
-    border-color: transparent;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme .select-dropdown .select-header {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  html.flat-theme .select-dropdown .select-search-input::placeholder {
-    color: rgb(var(--ui-faint));
-  }
-
-  html.flat-theme .select-dropdown .select-options {
-    padding: 0.3125rem;
-  }
-
-  html.flat-theme .select-dropdown .select-options .select-option {
-    min-height: 1.75rem;
-    border-radius: 8px;
-    padding: 0.375rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    color: rgb(var(--ui-ink));
-    transition: none;
-  }
-
-  html.flat-theme .select-dropdown .select-options .select-option.select-option-selected {
-    background-color: transparent;
-    color: rgb(var(--ui-ink));
-    font-weight: 500;
-  }
-
-  html.flat-theme .select-dropdown .select-options .select-option:hover {
-    background-color: var(--ui-menu-hover);
-  }
-
-  html.flat-theme .select-dropdown :is(.test-btn, .batch-test-btn):hover:not(:disabled) {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* (dark: the scoped dark fill must not sit under the glass; on the lighter highlight the grey address line
-     lifts a step, 4.2 → 6.5:1) */
-  html.flat-theme.dark .select-dropdown {
-    background-color: transparent;
-  }
-
-  html.flat-theme.dark .select-dropdown .select-options .select-option:hover :is([class~="text-gray-500"], [class~="text-gray-600"]) {
-    color: rgb(var(--theme-text-gray-300));
-  }
-
-  /* O4 · the 列设置 menu (the same markup on 分组管理, 使用记录 admin and user, 用户管理, API 密钥: a w-48 max-h-80 glass
-     panel of px-4 py-2 rows): the menu rows of the other glass menus — 13px, 28px, 8px corners inset in the panel, the
-     neutral menu highlight (upstream: 14px text on 36px full-width rows; in dark the hover was darker than the menu) */
-  html.flat-theme div[class~="absolute"][class~="w-48"][class~="max-h-80"][class~="shadow-lg"]:has(> button[class~="px-4"][class~="py-2"]) {
-    padding: 0.3125rem;
-  }
-
-  html.flat-theme div[class~="absolute"][class~="w-48"][class~="max-h-80"][class~="shadow-lg"] > button[class~="px-4"][class~="py-2"] {
-    min-height: 1.75rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-  }
-
-  html.flat-theme div[class~="absolute"][class~="w-48"][class~="max-h-80"][class~="shadow-lg"] > button[class~="px-4"][class~="py-2"]:not(:disabled) {
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme div[class~="absolute"][class~="w-48"][class~="max-h-80"][class~="shadow-lg"] > button[class~="px-4"][class~="py-2"]:hover:not(:disabled) {
-    background-color: var(--ui-menu-hover);
-  }
-
-  /* O4 · the hand-built 「选择分组」 picker (teleported fixed z-[100000020] white panel with a ring: 用户管理 → API 密钥
-     dialog (w-64) and API 密钥 page (w-max, with a search field)): the glass menu — 14px, a recessed capsule search
-     field, 8px items without separators, the neutral highlight; the current group is marked by the check alone, as in
-     the other pickers */
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] {
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] > div[class~="border-b"] {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] input[type="text"] {
-    min-height: var(--ui-control-h);
-    border-color: var(--ui-field-line);
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-field-bg);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-field-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] input[type="text"]::placeholder {
-    color: rgb(var(--ui-faint));
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] input[type="text"]:focus {
-    border-color: rgb(var(--ui-primary));
-    --tw-ring-shadow: var(--ui-focus-ring);
-    box-shadow: var(--ui-field-shadow), var(--ui-focus-ring);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] > div[class~="p-1.5"] {
-    padding: 0.3125rem;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] > div > button[class~="rounded-lg"] {
-    min-height: 1.75rem;
-    border-color: transparent;
-    border-radius: 8px;
-    padding: 0.375rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] > div > button[class~="rounded-lg"][class~="bg-primary-50"] {
-    background-color: transparent;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="z-[100000020]"] > div > button[class~="rounded-lg"]:hover:not(:disabled) {
-    background-color: var(--ui-menu-hover);
-  }
-
-  /* O5 · glass legibility: on phones the open sidebar drawer lies over the dimmed page, which greys its thin glass
-     (section titles 4.17:1): the drawer takes the thicker menu material while it is open */
-  @media (max-width: 1023.98px) {
-    html.flat-theme .sidebar:not([class~="-translate-x-full"]) {
-      background-image: var(--ui-glass-fill-strong);
-    }
-  }
-
-  /* O5 · the collapsed sidebar's section dividers (AppSidebar scoped: upstream slate rgb(229 231 235) / dark
-     rgb(55 65 81)): the hairline of the other dividers */
-  html.flat-theme .sidebar .sidebar-section-title::after {
-    background: var(--ui-hairline);
-  }
-
-  /* O6 · onboarding tour (driver.js, popoverClass theme-tour-popover; styles/onboarding.css is upstream's look with the
-     theme off and pins everything with !important): the glass popover — menu material, 14px, the floating shadow,
-     ink / secondary text, a glass arrow, the dialogs' footer band, glass 「返回 / 跳过」 capsules and the glossy blue
-     next button (rule above), capsule key caps, and a soft blue highlight ring that follows the element's corners. */
-  html.flat-theme .driver-popover.theme-tour-popover {
-    border: 0 !important;
-    border-radius: var(--ui-radius-menu) !important;
-    background-color: transparent !important;
-    background-image: var(--ui-glass-fill-strong) !important;
-    -webkit-backdrop-filter: var(--ui-glass-blur) !important;
-    backdrop-filter: var(--ui-glass-blur) !important;
-    color: rgb(var(--ui-ink)) !important;
-    font-family: var(--ui-font) !important;
-    box-shadow: var(--ui-glass-float) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-title-text {
-    font-size: 1.0625rem !important;
-    font-weight: 600 !important;
-    letter-spacing: -0.012em !important;
-    color: rgb(var(--ui-ink)) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-description {
-    color: rgb(var(--ui-ink) / 0.86) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-close-btn {
-    border-radius: 9999px !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-close-btn:hover {
-    background-color: var(--ui-nav-hover) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-footer {
-    border-top: 0.5px solid var(--ui-hairline-soft) !important;
-    background-color: rgb(var(--ui-dialog-footer) / 0.72) !important;
-  }
-
-  html.flat-theme .theme-tour-popover :is(.driver-popover-progress-text, .shortcut-item, .driver-popover-description-hint) {
-    color: rgb(var(--ui-muted)) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .footer-shortcuts {
-    border-left-color: var(--ui-hairline) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .shortcut-item kbd {
-    border: 0 !important;
-    border-radius: var(--ui-radius-capsule) !important;
-    background-color: transparent !important;
-    background-image: var(--ui-control-fill) !important;
-    padding: 1px 7px !important;
-    font-family: var(--ui-font-mono) !important;
-    color: rgb(var(--ui-ink)) !important;
-    box-shadow: var(--ui-control-shadow) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-footer button {
-    border-radius: var(--ui-radius-capsule) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-footer button:not(.driver-popover-next-btn) {
-    border-color: transparent !important;
-    background-color: transparent !important;
-    background-image: var(--ui-control-fill) !important;
-    color: rgb(var(--ui-ink)) !important;
-    box-shadow: var(--ui-control-shadow) !important;
-  }
-
-  html.flat-theme .theme-tour-popover .driver-popover-footer button:not(.driver-popover-next-btn):hover {
-    background-image: var(--ui-control-fill-hover) !important;
-  }
-
-  html.flat-theme .driver-popover-arrow-side-left.driver-popover-arrow {
-    border-left-color: rgb(249 249 251) !important;
-  }
-
-  html.flat-theme .driver-popover-arrow-side-right.driver-popover-arrow {
-    border-right-color: rgb(249 249 251) !important;
-  }
-
-  html.flat-theme .driver-popover-arrow-side-top.driver-popover-arrow {
-    border-top-color: rgb(246 246 249) !important;
-  }
-
-  html.flat-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
-    border-bottom-color: rgb(251 251 253) !important;
-  }
-
-  html.flat-theme.dark .driver-popover-arrow-side-left.driver-popover-arrow {
-    border-left-color: rgb(45 45 49) !important;
-  }
-
-  html.flat-theme.dark .driver-popover-arrow-side-right.driver-popover-arrow {
-    border-right-color: rgb(45 45 49) !important;
-  }
-
-  html.flat-theme.dark .driver-popover-arrow-side-top.driver-popover-arrow {
-    border-top-color: rgb(41 41 45) !important;
-  }
-
-  html.flat-theme.dark .driver-popover-arrow-side-bottom.driver-popover-arrow {
-    border-bottom-color: rgb(49 49 53) !important;
-  }
-
-  html.flat-theme .driver-active-element {
-    outline: 4px solid rgb(var(--ui-primary) / 0.25) !important;
-    outline-offset: 0 !important;
-    border-radius: var(--ui-radius-lg) !important;
-  }
-
-  html.flat-theme .driver-active-element:is(.btn, [class~="rounded-full"]) {
-    border-radius: var(--ui-radius-capsule) !important;
-  }
-
-  /* (the tour copy's four inline-styled callout kinds (upstream i18n HTML: green / blue / amber / red backgrounds with
-     a 3px rule) take the theme's soft tints with ink text, readable in dark too; the green emphasis lines and the
-     grey notes take the theme's green / secondary text) */
-  html.flat-theme .theme-tour-popover [style*="background: #f0fdf4" i] {
-    border-left-color: rgb(var(--ui-success)) !important;
-    background-color: rgb(var(--ui-success-soft)) !important;
-    color: rgb(var(--ui-ink)) !important;
-  }
-
-  html.flat-theme .theme-tour-popover [style*="background: #eff6ff" i] {
-    border-left-color: rgb(var(--ui-info)) !important;
-    background-color: rgb(var(--ui-info-soft)) !important;
-    color: rgb(var(--ui-ink)) !important;
-  }
-
-  html.flat-theme .theme-tour-popover [style*="background: #fef3c7" i] {
-    border-left-color: rgb(var(--ui-warning)) !important;
-    background-color: rgb(var(--ui-warning-soft)) !important;
-    color: rgb(var(--ui-ink)) !important;
-  }
-
-  html.flat-theme .theme-tour-popover [style*="background: #fee2e2" i] {
-    border-left-color: rgb(var(--ui-danger)) !important;
-    background-color: rgb(var(--ui-danger-soft)) !important;
-    color: rgb(var(--ui-ink)) !important;
-  }
-
-  html.flat-theme .theme-tour-popover [style*="color: #6b7280" i] {
-    color: rgb(var(--ui-muted)) !important;
-  }
-
-  /* O7 · the login / register agreement dialog (LoginAgreementPrompt, teleported z-[140]) and the /purchase renewal
-     picker (PaymentView, bg-black/60): the v2 sheet — blurred light scrim, 22px opaque panel with the overlay
-     shadow, a neutral header on a hairline, the footer band, capsule buttons, the round glass close button */
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="z-[140]"], [class~="bg-black/60"][class~="backdrop-blur-sm"]) {
-    background-color: rgb(var(--ui-scrim));
-    -webkit-backdrop-filter: var(--ui-scrim-blur);
-    backdrop-filter: var(--ui-scrim-blur);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"]:is([class~="z-[140]"], [class~="bg-black/60"][class~="backdrop-blur-sm"]) > div[class~="rounded-2xl"][class~="bg-white"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-dialog);
-    background-color: rgb(var(--ui-raised));
-    box-shadow: var(--ui-shadow-overlay);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] > div[class~="rounded-2xl"] > div[class~="border-b"]:first-child {
-    border-color: var(--ui-hairline-soft);
-    background-color: transparent;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] > div[class~="rounded-2xl"] > div[class~="border-t"]:last-child {
-    border-color: var(--ui-hairline-soft);
-    background-color: rgb(var(--ui-dialog-footer));
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] span[class~="h-12"][class~="w-12"][class~="rounded-xl"][class~="bg-primary-50"] {
-    border-radius: 0.75rem;
-    background-image: var(--ui-tile-gloss);
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] a[class~="group"][class~="rounded-xl"][class~="border"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-    --tw-translate-y: 0;
-  }
-
-  html.flat-theme.dark body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] a[class~="group"][class~="rounded-xl"][class~="border"] {
-    background-color: rgb(var(--ui-subtle));
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] a[class~="group"][class~="rounded-xl"][class~="border"] > span[class~="h-10"][class~="w-10"] {
-    border-radius: 0.625rem;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] > div > div[class~="border-t"] button:is([class~="rounded-xl"], [class~="rounded-lg"]) {
-    min-height: var(--ui-field-h);
-    border-radius: var(--ui-radius-capsule);
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] > div > div[class~="border-t"] button[class~="border"][class~="bg-white"] {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] > div > div[class~="border-t"] button[class~="border"][class~="bg-white"]:hover {
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme :is(body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] > div > div[class~="border-t"], div[class~="bg-primary-50/70"][class~="border-primary-100"]) button[class~="bg-primary-600"][class~="text-white"] {
-    border-radius: var(--ui-radius-capsule);
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: rgb(var(--ui-on-primary));
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme :is(body > div[class~="fixed"][class~="inset-0"][class~="z-[140]"] > div > div[class~="border-t"], div[class~="bg-primary-50/70"][class~="border-primary-100"]) button[class~="bg-primary-600"][class~="text-white"]:hover {
-    background-image: var(--ui-primary-fill-hover);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="bg-black/60"][class~="backdrop-blur-sm"] > div[class~="rounded-2xl"] > button[class~="absolute"][class~="right-4"][class~="top-4"] {
-    display: inline-flex;
-    height: 1.75rem;
-    width: 1.75rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 9999px;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    padding: 0;
-    color: rgb(var(--ui-muted));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="bg-black/60"][class~="backdrop-blur-sm"] > div[class~="rounded-2xl"] > button[class~="absolute"][class~="right-4"][class~="top-4"] > svg {
-    width: 0.875rem;
-    height: 0.875rem;
-    stroke-width: 2.4;
-  }
-
-  /* end shared:overlays */
-
-  /* shared:surfaces */
-
-  /* S1 · ops-style cards (div / header / section .rounded-3xl.shadow-sm.ring-1.ring-gray-900/5: the ops dashboard, the
-     channel monitor pages, the user channel status page): the console card — 20px and the layered card shadow instead
-     of a 24px box with a 1px ring and a flat shadow (the .card copies say !rounded-3xl, hence !important) */
-  html.flat-theme :is(div, header, section)[class~="ring-1"][class~="ring-gray-900/5"]:is([class~="rounded-3xl"], [class~="!rounded-3xl"]) {
-    border-radius: var(--ui-radius-card) !important;
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  /* (their grey inner panels, upstream 20px inside the card: the concentric 14px) */
-  html.flat-theme :is(div, header, section)[class~="ring-gray-900/5"]:is([class~="rounded-3xl"], [class~="!rounded-3xl"]) :is(div, details)[class~="rounded-2xl"]:is([class~="bg-gray-50"], [class~="bg-gray-50/80"], [class~="bg-gray-100"]) {
-    border-radius: var(--ui-radius-inner);
-  }
-
-  /* (the page-title glyph of these cards sat on a blue square: the glyph alone, muted, and the title in bold 700
-     instead of Inter Black) */
-  html.flat-theme :is(div, header, section)[class~="ring-gray-900/5"]:is([class~="rounded-3xl"], [class~="!rounded-3xl"]) .page-title > span[class~="h-8"][class~="w-8"][class~="rounded-xl"][class~="bg-blue-50"] {
-    width: auto;
-    height: auto;
-    background-color: transparent;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme :is(div, header, section)[class~="ring-gray-900/5"]:is([class~="rounded-3xl"], [class~="!rounded-3xl"]) .page-title[class~="font-black"] {
-    font-weight: 700;
-  }
-
-  /* (a chart card's title glyph takes its chart's series colour: 请求时长分布 is drawn in the first series blue, its
-     glyph was purple) */
-  html.flat-theme div[class~="ring-gray-900/5"][class~="rounded-3xl"] h3 > svg[class~="text-purple-500"] {
-    color: rgb(var(--theme-text-info-500));
-  }
-
-  /* S2 · plain tables outside DataTable (a thead.bg-gray-50 or a grey header row: ops alerts / rules / request details
-     / system log, usage ranking, key usage, IP accounts, group rates, key picker, dialogs): the DataTable look — a
-     12px / 600 secondary header on the frosted header fill with a hairline (no capitals, no tracking), zebra rows
-     without separators, the soft row hover; a sorted column keeps its blue */
-  html.flat-theme thead[class~="bg-gray-50"]:not(.table-header),
-  html.flat-theme thead > tr[class~="bg-gray-50"] {
-    border-color: transparent;
-    background-color: transparent;
-  }
-
-  html.flat-theme thead[class~="bg-gray-50"]:not(.table-header) > tr > th,
-  html.flat-theme thead > tr[class~="bg-gray-50"] > th {
-    background-color: transparent;
-    background-image: linear-gradient(180deg, transparent calc(100% - 0.5px), var(--ui-hairline) calc(100% - 0.5px)), var(--ui-header-glass);
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: 600;
-    letter-spacing: 0;
-    text-transform: none;
-    white-space: nowrap;
-  }
-
-  html.flat-theme thead[class~="bg-gray-50"]:not(.table-header) > tr > th:not([class*="text-primary-"]),
-  html.flat-theme thead > tr[class~="bg-gray-50"] > th:not([class*="text-primary-"]) {
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme table[class~="divide-y"] > thead[class~="bg-gray-50"]:not(.table-header) + tbody,
-  html.flat-theme thead[class~="bg-gray-50"]:not(.table-header) + tbody,
-  html.flat-theme thead:has(> tr[class~="bg-gray-50"]) + tbody {
-    border-top-color: transparent;
-    background-color: transparent;
-  }
-
-  html.flat-theme thead[class~="bg-gray-50"]:not(.table-header) + tbody > tr:nth-child(n),
-  html.flat-theme thead:has(> tr[class~="bg-gray-50"]) + tbody > tr:nth-child(n) {
-    border-top-width: 0;
-    border-bottom-width: 0;
-    transition: background-color 120ms var(--ui-ease);
-  }
-
-  html.flat-theme thead[class~="bg-gray-50"]:not(.table-header) + tbody > tr:nth-child(even),
-  html.flat-theme thead:has(> tr[class~="bg-gray-50"]) + tbody > tr:nth-child(even) {
-    background-color: rgb(var(--ui-row-stripe));
-  }
-
-  html.flat-theme thead[class~="bg-gray-50"]:not(.table-header) + tbody > tr[class*="hover:bg-"]:hover,
-  html.flat-theme thead:has(> tr[class~="bg-gray-50"]) + tbody > tr[class*="hover:bg-"]:hover {
-    background-color: rgb(var(--ui-row-hover));
-  }
-
-  /* S3 · dark: grey panels nested in a card (light gray-50 / gray-100, dark dark-800 = the card's own #161618, so they
-     vanished): one step above the card, one more on hover (segmented tracks, skeletons, grid rules, table parts and
-     fields keep their own recipes) */
-  html.flat-theme.dark [class~="card"] :is([class~="bg-gray-50"], [class~="bg-gray-50/50"], [class~="bg-gray-50/70"], [class~="bg-gray-50/80"], [class~="bg-gray-100"]):is([class~="dark:bg-dark-800"], [class~="dark:bg-dark-800/30"], [class~="dark:bg-dark-800/40"], [class~="dark:bg-dark-800/50"], [class~="dark:bg-dark-800/60"], [class~="dark:bg-dark-800/70"], [class~="dark:bg-dark-800/80"]):not(input, textarea, select, thead, tbody, tr, th, td):not([class~="animate-pulse"]):not([class~="gap-px"]):not(:has(> button)) {
-    background-color: rgb(var(--ui-raised));
-  }
-
-  html.flat-theme.dark [class~="card"] :is([class~="bg-gray-50"], [class~="bg-gray-50/50"], [class~="bg-gray-50/70"], [class~="bg-gray-50/80"], [class~="bg-gray-100"]):is([class~="dark:bg-dark-800"], [class~="dark:bg-dark-800/30"], [class~="dark:bg-dark-800/40"], [class~="dark:bg-dark-800/50"], [class~="dark:bg-dark-800/60"], [class~="dark:bg-dark-800/70"], [class~="dark:bg-dark-800/80"]):not(input, textarea, select, thead, tbody, tr, th, td):not([class~="animate-pulse"]):not([class~="gap-px"]):not(:has(> button))[class*="hover:bg-"]:hover {
-    background-color: rgb(var(--ui-subtle));
-  }
-
-  /* S4 · KPI cards: the text column may shrink (min-width 0) and a figure too long for the card wraps inside it
-     instead of painting under the next card (the 26px figures, e.g. a balance of $999,999,875,767.73) */
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) > div:nth-child(2),
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) > div:nth-child(2) {
-    min-width: 0;
-  }
-
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] p[class~="text-xl"] {
-    overflow-wrap: anywhere;
-  }
-
-  /* S6 · text areas with no visible placeholder (none, or a blank one): nothing inside the box says what it is, so the
-     border is the 3:1 control line of the empty inputs (focus / error / disabled keep their own look) */
-  html.flat-theme textarea[class~="input"]:is(:not([placeholder]), [placeholder=""], [placeholder=" "]):not(:focus):not(:disabled):not([class~="input-error"]) {
-    border-color: rgb(var(--ui-control-line));
-  }
-
-  /* S7 · phones: DataTable's selected row card (bg-primary-50/40, wiped by the white row-card rule) keeps a selected
-     state: the selected-row fill and an Apple-blue hairline */
-  html.flat-theme .table-page-layout.mobile-mode div[class~="space-y-3"] > div[class~="rounded-lg"][class~="border"][class~="p-4"][class~="bg-primary-50/40"] {
-    background-color: rgb(var(--ui-row-selected));
-    box-shadow: 0 0 0 1px rgb(var(--ui-line-focus)), var(--ui-shadow-card);
-  }
-
-  /* S8 · GroupSelector rows (account create / edit / bulk edit, announcement targeting, key dialogs): the group badge
-     keeps its own width (upstream stretches it with flex-1 into a long platform-coloured bar), the account count
-     sits at the right edge */
-  html.flat-theme label[class~="cursor-pointer"]:has(> input[type="checkbox"]) > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] {
-    flex: 0 1 auto;
-  }
-
-  html.flat-theme label[class~="cursor-pointer"]:has(> input[type="checkbox"]) > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] + span[class~="shrink-0"] {
-    margin-left: auto;
-  }
-
-  /* (GroupBadge's rate chip in dark: a light overlay under the light platform text read 4.42:1; a dark overlay keeps
-     the chip and lifts the text over 4.5:1) */
-  html.flat-theme.dark span[class~="rounded"][class~="text-[10px]"][class~="font-semibold"][class~="bg-white/50"] {
-    background-color: rgb(0 0 0 / 0.24);
-  }
-
-  /* (ModelIcon's fallback letter tile for an unknown vendor: Tailwind indigo #6366F1 with white, 4.47:1, off the
-     console palette; the neutral fill of the tags with the ink letter) */
-  html.flat-theme .model-icon-fallback {
-    background: var(--ui-fill);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* S9 · white text or a white glyph on a light Apple 500 fill (orange / amber 2.2:1, green 2.2, teal 2.6, red 3.6,
-     pink 3.7, blue 4.0, purple 4.1): the same family's 600 shade (white >= 4.6:1), 700 on hover — the account type
-     tiles, the OAuth key-count chips, the re-authorise type tiles, the version update / restart / rollback buttons,
-     the plan buttons of platformColors.ts. A tile counts when its only child is the white glyph. */
-  html.flat-theme :is([class~="bg-red-500"], [class~="bg-rose-500"]):is([class~="text-white"], :has(> [class~="text-white"]:only-child)) {
-    background-color: rgb(var(--theme-color-danger-600));
-  }
-
-  html.flat-theme :is([class~="bg-orange-500"], [class~="bg-amber-500"], [class~="bg-yellow-500"]):is([class~="text-white"], :has(> [class~="text-white"]:only-child)) {
-    background-color: rgb(var(--theme-color-warning-600));
-  }
-
-  html.flat-theme [class~="bg-blue-500"]:is([class~="text-white"], :has(> [class~="text-white"]:only-child)) {
-    background-color: rgb(var(--theme-color-info-600));
-  }
-
-  html.flat-theme :is([class~="bg-green-500"], [class~="bg-emerald-500"], [class~="bg-lime-500"]):is([class~="text-white"], :has(> [class~="text-white"]:only-child)) {
-    background-color: rgb(var(--theme-color-success-600));
-  }
-
-  html.flat-theme :is([class~="bg-teal-500"], [class~="bg-cyan-500"], [class~="bg-sky-500"]):is([class~="text-white"], :has(> [class~="text-white"]:only-child)) {
-    background-color: rgb(var(--theme-color-teal-600));
-  }
-
-  html.flat-theme :is([class~="bg-purple-500"], [class~="bg-violet-500"], [class~="bg-fuchsia-500"]):is([class~="text-white"], :has(> [class~="text-white"]:only-child)) {
-    background-color: rgb(var(--theme-color-purple-600));
-  }
-
-  html.flat-theme [class~="bg-pink-500"]:is([class~="text-white"], :has(> [class~="text-white"]:only-child)) {
-    background-color: rgb(var(--theme-color-pink-600));
-  }
-
-  html.flat-theme :is([class~="bg-red-500"], [class~="bg-rose-500"])[class~="text-white"]:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-danger-700));
-  }
-
-  html.flat-theme :is([class~="bg-orange-500"], [class~="bg-amber-500"], [class~="bg-yellow-500"])[class~="text-white"]:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-warning-700));
-  }
-
-  html.flat-theme [class~="bg-blue-500"][class~="text-white"]:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-info-700));
-  }
-
-  html.flat-theme :is([class~="bg-green-500"], [class~="bg-emerald-500"], [class~="bg-lime-500"])[class~="text-white"]:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-success-700));
-  }
-
-  html.flat-theme :is([class~="bg-teal-500"], [class~="bg-cyan-500"], [class~="bg-sky-500"])[class~="text-white"]:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-teal-700));
-  }
-
-  html.flat-theme :is([class~="bg-purple-500"], [class~="bg-violet-500"], [class~="bg-fuchsia-500"])[class~="text-white"]:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-purple-700));
-  }
-
-  html.flat-theme [class~="bg-pink-500"][class~="text-white"]:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-pink-700));
-  }
-
-  /* (the version menu's full-width retry / restart / rollback buttons keep their solid status colour in the capsule of
-     its update button, with a light top gloss) */
-  html.flat-theme button[class~="w-full"][class~="rounded-lg"][class~="px-4"][class~="py-2"][class~="text-white"]:is([class~="bg-red-500"], [class~="bg-green-500"], [class~="bg-amber-500"]) {
-    border-radius: var(--ui-radius-capsule);
-    box-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.3), inset 0 -1px 1px rgb(0 0 0 / 0.12), 0 1px 2px 0 rgb(0 0 0 / 0.12);
-  }
-
-  /* (the home page's signed-in avatar initial sat white on the light primary-400 start of its gradient, 3.2:1: the
-     glossy Apple blue of the header avatar) */
-  html.flat-theme span[class~="rounded-full"][class~="from-primary-400"][class~="text-white"] {
-    background-image: var(--ui-primary-fill);
-  }
-
-  /* S10 · flat primary actions built from utilities (rounded-lg bg-primary-500 / bg-blue-500 with white text: the
-     account test and scheduled-test buttons, the version update button, the ops custom-range confirm): the glossy
-     blue capsule of .btn-primary; the account test's disabled state at the recipe's 50 % */
-  html.flat-theme button[class~="rounded-lg"][class~="text-white"][class~="font-medium"]:is([class~="bg-primary-500"], [class~="bg-blue-500"], [class~="bg-primary-400"]):is([class~="px-3"], [class~="px-4"]):is([class~="py-1.5"], [class~="py-2"]):not([class~="border"]) {
-    border-radius: var(--ui-radius-capsule);
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: rgb(var(--ui-on-primary));
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="text-white"][class~="font-medium"]:is([class~="bg-primary-500"], [class~="bg-blue-500"]):is([class~="px-3"], [class~="px-4"]):is([class~="py-1.5"], [class~="py-2"]):not([class~="border"]):hover:not(:disabled) {
-    background-color: rgb(var(--ui-primary-hover));
-    background-image: var(--ui-primary-fill-hover);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="text-white"][class~="font-medium"]:is([class~="bg-primary-500"], [class~="bg-blue-500"]):is([class~="px-3"], [class~="px-4"]):is([class~="py-1.5"], [class~="py-2"]):not([class~="border"]):active:not(:disabled) {
-    background-image: var(--ui-primary-fill-press);
-    box-shadow: var(--ui-primary-shadow-press);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="text-white"][class~="font-medium"][class~="bg-primary-400"][class~="cursor-not-allowed"] {
-    opacity: 0.5;
-  }
-
-  /* (the account test's result states, a flat green-700 / orange-700 block: the glass capsule with the green /
-     orange label of .btn-success / .btn-warning) */
-  html.flat-theme button[class~="rounded-lg"][class~="px-4"][class~="py-2"][class~="text-white"]:is([class~="bg-green-700"], [class~="bg-orange-700"]) {
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="px-4"][class~="py-2"][class~="text-white"]:is([class~="bg-green-700"], [class~="bg-orange-700"]):hover {
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="px-4"][class~="py-2"][class~="text-white"][class~="bg-green-700"] {
-    color: rgb(var(--ui-success));
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="px-4"][class~="py-2"][class~="text-white"][class~="bg-orange-700"] {
-    color: rgb(var(--ui-warning));
-  }
-
-  /* (upstream's gradient icon tiles in dialogs, a 40px from-<hue>-500 square with a white glyph — account statistics,
-     account test, re-authorise; Grok's zinc-700 tile: the grey one): the soft tile of the KPI cards, the hue's soft
-     fill and its accessible glyph) */
-  html.flat-theme .modal-content div[class~="h-10"][class~="w-10"][class~="rounded-lg"][class~="bg-gradient-to-br"]:is([class~="from-primary-500"], [class~="from-green-500"], [class~="from-blue-500"], [class~="from-purple-500"], [class~="from-orange-500"], [class~="from-zinc-700"]) {
-    background-color: rgb(var(--ui-tile-tint, var(--ui-primary-soft)));
-    background-image: var(--ui-tile-gloss);
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  html.flat-theme .modal-content div[class~="h-10"][class~="w-10"][class~="rounded-lg"][class~="bg-gradient-to-br"]:is([class~="from-primary-500"], [class~="from-green-500"], [class~="from-blue-500"], [class~="from-purple-500"], [class~="from-orange-500"], [class~="from-zinc-700"]) > :is(svg, [class~="text-white"]) {
-    color: rgb(var(--ui-tile-ink, var(--ui-primary-ink)));
-  }
-
-  html.flat-theme .modal-content div[class~="h-10"][class~="w-10"][class~="bg-gradient-to-br"][class~="from-green-500"] {
-    --ui-tile-tint: var(--ui-success-soft);
-    --ui-tile-ink: var(--ui-success);
-  }
-
-  html.flat-theme .modal-content div[class~="h-10"][class~="w-10"][class~="bg-gradient-to-br"][class~="from-blue-500"] {
-    --ui-tile-tint: var(--ui-info-soft);
-    --ui-tile-ink: var(--ui-info);
-  }
-
-  html.flat-theme .modal-content div[class~="h-10"][class~="w-10"][class~="bg-gradient-to-br"][class~="from-purple-500"] {
-    --ui-tile-tint: var(--ui-purple-soft);
-    --ui-tile-ink: var(--ui-purple);
-  }
-
-  html.flat-theme .modal-content div[class~="h-10"][class~="w-10"][class~="bg-gradient-to-br"][class~="from-orange-500"] {
-    --ui-tile-tint: var(--ui-warning-soft);
-    --ui-tile-ink: var(--ui-warning);
-  }
-
-  html.flat-theme .modal-content div[class~="h-10"][class~="w-10"][class~="bg-gradient-to-br"][class~="from-zinc-700"] {
-    --ui-tile-tint: var(--ui-subtle);
-    --ui-tile-ink: var(--ui-ink);
-  }
-
-  /* (decorative tints of dialog / card panels — the account-statistics header, the scheduled-test form, the e-mail
-     template's event box, upstream primary washes with a coloured border: the neutral grouped panel of the v2 recipe,
-     14px, sunk fill, hairline; inside a dark card one step above it) */
-  html.flat-theme div[class~="rounded-xl"][class~="border-primary-200"][class~="from-primary-50"][class~="to-primary-100"],
-  html.flat-theme div[class~="rounded-xl"][class~="border-primary-200"][class~="bg-primary-50/50"][class~="p-4"],
-  html.flat-theme div[class~="rounded-lg"][class~="border-primary-100"][class~="bg-primary-50/70"][class~="p-4"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    background-image: none;
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  html.flat-theme.dark [class~="card"] div[class~="rounded-lg"][class~="border-primary-100"][class~="bg-primary-50/70"][class~="p-4"] {
-    background-color: rgb(var(--ui-raised));
-  }
-
-  /* (the account forms' purple notes — model mapping, Gemini API key — a decorative purple box under a now neutral
-     mode switch: the neutral fill of the tags, 12px, ink text; links keep their blue) */
-  html.flat-theme .modal-content div[class~="rounded-lg"][class~="bg-purple-50"]:is([class~="p-3"], [class~="py-2"]) {
-    border-color: transparent;
-    border-radius: var(--ui-radius-xl);
-    background-color: var(--ui-fill);
-    color: rgb(var(--ui-ink) / 0.82);
-  }
-
-  html.flat-theme .modal-content div[class~="rounded-lg"][class~="bg-purple-50"]:is([class~="p-3"], [class~="py-2"]) > p[class*="text-purple-"] {
-    color: rgb(var(--ui-ink) / 0.82);
-  }
-
-  /* (dark: a recessed grouped panel instead — the light grey fill left the blue link inside at 4.3:1) */
-  html.flat-theme.dark .modal-content div[class~="rounded-lg"][class~="bg-purple-50"]:is([class~="p-3"], [class~="py-2"]) {
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  /* (account statistics: the four summary cards, tinted green / blue / amber / purple washes: white cards; their
-     soft KPI tiles keep the hue with the tile material) */
-  html.flat-theme .modal-content [class~="card"][class~="bg-gradient-to-br"][class~="to-white"]:is([class~="from-emerald-50"], [class~="from-blue-50"], [class~="from-amber-50"], [class~="from-purple-50"]) {
-    background-image: none;
-  }
-
-  html.flat-theme .modal-content [class~="card"][class~="bg-gradient-to-br"][class~="to-white"] div[class~="rounded-lg"][class~="p-1.5"]:is([class~="bg-emerald-100"], [class~="bg-blue-100"], [class~="bg-amber-100"], [class~="bg-purple-100"]) {
-    background-image: var(--ui-tile-gloss);
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  /* (编辑账号 · Codex 图片工具: every chosen option — follow channel, enable, keep, remove — reads as the console's chosen
-     card, an Apple-blue frame on a faint blue fill with a blue check; the status badge above keeps its colour) */
-  html.flat-theme #edit-account-form button[data-testid^="codex-image-tool-"]:is([class~="border-sky-300"], [class~="border-emerald-300"], [class~="border-amber-300"], [class~="border-rose-300"]) {
-    border-color: rgb(var(--ui-line-focus));
-    background-color: rgb(var(--ui-line-focus) / 0.06);
-    color: rgb(var(--ui-ink));
-    box-shadow: 0 0 0 1px rgb(var(--ui-line-focus));
-  }
-
-  html.flat-theme #edit-account-form button[data-testid^="codex-image-tool-"] > span:is([class~="bg-sky-500"], [class~="bg-emerald-500"], [class~="bg-amber-500"], [class~="bg-rose-500"]) {
-    border-color: rgb(var(--ui-primary));
-    background-color: rgb(var(--ui-primary));
-  }
-
-  /* (the account table's row checkbox cell and the Cindy preset chip turned Apple blue on hover, fork additions:
-     the neutral highlight) */
-  html.flat-theme label[class~="h-10"][class~="w-10"][class~="hover:bg-primary-50"]:hover {
-    background-color: var(--ui-nav-hover);
-  }
-
-  html.flat-theme button[data-testid="openai-cindy-laxa-preset"]:hover {
-    background-color: var(--ui-fill-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* S11 · 风控 (RiskControlView; off in production): the pre-block metric panels (a rainbow of sky / emerald / rose /
-     amber / violet tints with tinted figures) and the worker card's panels are neutral grouped panels with ink figures;
-     only the state labels keep a semantic colour — passed green, blocked red, errors orange */
-  html.flat-theme [data-test="pre-block-metric-grid"] > div[class~="rounded-lg"][class~="p-4"],
-  html.flat-theme div[class~="grid-cols-2"][class~="gap-3"]:has(> div[class~="rounded-lg"][class~="bg-emerald-50"][class~="p-4"]) > div[class~="rounded-lg"][class~="p-4"] {
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  html.flat-theme.dark [data-test="pre-block-metric-grid"] > div[class~="rounded-lg"][class~="p-4"],
-  html.flat-theme.dark div[class~="grid-cols-2"][class~="gap-3"]:has(> div[class~="rounded-lg"][class~="bg-emerald-50"][class~="p-4"]) > div[class~="rounded-lg"][class~="p-4"] {
-    background-color: rgb(var(--ui-raised));
-  }
-
-  html.flat-theme [data-test="pre-block-metric-grid"] > div > p[class~="text-2xl"],
-  html.flat-theme div[class~="grid-cols-2"][class~="gap-3"]:has(> div[class~="rounded-lg"][class~="bg-emerald-50"][class~="p-4"]) > div > p[class~="text-2xl"] {
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme [data-test="pre-block-metric-grid"] > div[class~="bg-emerald-50"] > p:first-child {
-    color: rgb(var(--ui-success));
-  }
-
-  html.flat-theme [data-test="pre-block-metric-grid"] > div[class~="bg-rose-50"] > p:first-child {
-    color: rgb(var(--ui-danger));
-  }
-
-  html.flat-theme [data-test="pre-block-metric-grid"] > div[class~="bg-amber-50"] > p:first-child {
-    color: rgb(var(--ui-warning));
-  }
-
-  /* (内容审计设置 · API Key 写入方式: a white track whose chosen button is a solid blue / amber-500 block, white on amber
-     2.2:1: the segmented control of the other pickers — recessed track, glossy thumb, ink label) */
-  html.flat-theme div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"][class~="shadow-sm"]:has(> button[class~="rounded-md"][class~="px-3"][class~="py-1.5"][class~="text-xs"]) {
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"][class~="shadow-sm"] > button[class~="rounded-md"][class~="px-3"][class~="py-1.5"][class~="text-xs"] {
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    color: rgb(var(--ui-ink) / 0.8);
-    box-shadow: none;
-  }
-
-  html.flat-theme div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"][class~="shadow-sm"] > button[class~="rounded-md"][class~="px-3"][class~="py-1.5"][class~="text-xs"]:is([class~="bg-primary-500"], [class~="bg-amber-500"]) {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  /* S12 · 使用记录 (UsageTable, admin and user side): request ID, upstream request ID and User-Agent wrap inside their
-     column instead of ending in 「…」 (the full value was only in a hover title) */
-  html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="request_id"], [data-column="upstream_request_id"]) span[class~="truncate"],
-  html.flat-theme .table-wrapper[data-table="usage"] td[data-column="user_agent"] > span[class~="truncate"] {
-    overflow: visible;
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* S13 · 个人资料 overview card: upstream's primary → amber wash comes back as a very light Apple-blue → orange tint of
-     the white card (no border: the v2 card material); dark: a faint blue glow into the card colour */
-  html.flat-theme [data-testid="profile-overview-hero"] {
-    border-color: transparent;
-    background-color: rgb(var(--ui-surface));
-    background-image: linear-gradient(to bottom right, rgb(var(--theme-color-primary-50)), rgb(var(--ui-surface)) 52%, rgb(var(--theme-color-warning-50) / 0.8));
-  }
-
-  html.flat-theme.dark [data-testid="profile-overview-hero"] {
-    background-image: linear-gradient(to bottom right, rgb(var(--theme-color-primary-950) / 0.7), rgb(var(--ui-surface)) 55%);
-  }
-
-  /* S14 · 模型广场 (PlazaNavBar, PlazaFilterBar; off in production): 回到后台 / 登录 (a flat from-primary-500 12px block
-     with a coloured glow) is the glossy blue capsule of .btn-primary; the filter chips are capsules — the chosen 全部 /
-     rate chip tinted Apple blue with the deeper accessible blue label (the current item of the classification bar),
-     the other plain chips glass capsules; the platform / group chips keep their platform tint */
-  html.flat-theme a[class~="rounded-xl"][class~="bg-gradient-to-r"][class~="from-primary-500"][class~="text-white"][class~="shadow-md"] {
-    border-radius: var(--ui-radius-capsule);
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: rgb(var(--ui-on-primary));
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme a[class~="rounded-xl"][class~="bg-gradient-to-r"][class~="from-primary-500"][class~="text-white"][class~="shadow-md"]:hover {
-    background-image: var(--ui-primary-fill-hover);
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="px-3"][class~="py-1.5"]:is([class~="shadow-primary-500/30"], [class~="ring-inset"], [class~="chip-tinted"], [class~="chip-tinted-active"]) {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="px-3"][class~="py-1.5"][class~="from-primary-500"][class~="shadow-primary-500/30"] {
-    background-color: var(--ui-nav-current);
-    background-image: none;
-    color: rgb(var(--ui-primary-ink-strong));
-    font-weight: 600;
-    box-shadow: none;
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="px-3"][class~="py-1.5"][class~="bg-white"][class~="ring-inset"][class~="ring-gray-200"] {
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-ink) / 0.82);
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="px-3"][class~="py-1.5"][class~="bg-white"][class~="ring-inset"][class~="ring-gray-200"]:hover:not(:disabled) {
-    background-image: var(--ui-control-fill-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* (the platform / group chips (PlazaFilterBar .chip-tinted, colour from --chip-accent, the theme's platform colour):
-     the label mixed 58 % with black reads >= 4.9:1 on its 9 % tint, the chosen chip's white label sits on the accent
-     mixed 60 % with black (>= 5.5:1); upstream's 78 % / 85 % mixes read 3.0-3.5:1 with the Apple hues) */
-  html.flat-theme:not(.dark) button[class~="rounded-lg"][class~="chip-tinted"] {
-    color: color-mix(in srgb, var(--chip-accent) 58%, black);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="chip-tinted-active"] {
-    background-color: color-mix(in srgb, var(--chip-accent) 60%, black);
-  }
-
-  html.flat-theme button[class~="rounded-lg"][class~="px-3"][class~="chip-tinted-active"]:not(:disabled):hover {
-    background-color: color-mix(in srgb, var(--chip-accent) 52%, black);
-  }
-
-  /* (the paid-price zone of a group's price table (PlazaModelPricingTable, --plaza-accent): its title mixed 58 % with
-     black and the 「$ / 1M token」 unit in the same colour at normal weight — upstream's 88 % mix and 62 % alpha read
-     1.8-2.7:1 with the Apple hues; dark keeps upstream's light mix, >= 4.6:1) */
-  html.flat-theme:not(.dark) [class~="plaza-pricing-table"] {
-    --pz-title: color-mix(in srgb, var(--plaza-accent) 58%, black);
-  }
-
-  html.flat-theme [class~="plaza-pricing-table"] [class~="pz-unit"] {
-    color: var(--pz-title);
-  }
-
-  /* Key 用量查询 (KeyUsageView, scoped styles with upstream's shimmer and glow): the loading skeleton is the console's
-     calm placeholder (the subtle fill pulsing in opacity, no bright shimmer sweep) and the status dot pulses without a
-     coloured glow */
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main [class~="skeleton"] {
-    background: rgb(var(--ui-subtle));
-    animation: pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main [class~="pulse-dot"] {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-    box-shadow: none;
-  }
-
-  /* end shared:surfaces */
-
-  /* ---- page sweep (v2 rollout): page-scoped fixes, one block per owner. Keep the html.flat-theme scoping
-     and the [class~="..."] hooks for upstream utility classes (see the @apply note above). Rules that
-     would change more than the owner's pages belong to the shared recipes above, not here. ---- */
-
-  /* sweep:A (admin dashboard, ops, admin usage, audit logs, orders, affiliates, risk control, prompt audit) */
-
-  /* 运维监控 (OpsDashboard): every ops rule starts at the page root, div.pb-12 holding the throughput chart
-     ([data-testid="throughput-chart-header"] exists only on this page, in the normal and the full-screen view). */
-
-  /* ops: the panels inside the ops cards (health + realtime, the six metric tiles, the six system tiles, the
-     log-config box) take the concentric 14px inner radius (upstream 20 / 12 inside the card) */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div:is([class~="rounded-2xl"], [class~="rounded-xl"])[class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"], [class~="p-6"]) {
-    border-radius: var(--ui-radius-inner);
-  }
-
-  /* ops: the health-score diagnosis popover (a white 12px panel) is a popover: the glass menu material, 14px */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="group-hover:opacity-100"] > div[class~="rounded-xl"][class~="bg-white"][class~="shadow-xl"] {
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  /* (its title rule and footer rule: menu dividers) */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="group-hover:opacity-100"] > div[class~="rounded-xl"][class~="shadow-xl"] :is([class~="border-b"], [class~="border-t"]) {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  /* ops: the tinted blue buttons (「预警规则」, the concurrency card's user-view toggle while on) are capsules like
-     the other toolbar buttons beside them (upstream 10px); the upstream tint stays */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) button[class~="rounded-lg"][class~="bg-blue-100"] {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  /* ops: the figures and the card title are Inter Black (900) upstream, heavier than every other figure of the
-     console (the KPI figures are 600) and than the CJK beside them (MiSans stops at 500): bold (700) */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) [class~="font-black"] {
-    font-weight: 700;
-  }
-
-  /* ops: the metric tiles' 「明细」 links never break into a vertical 「明 / 细」 (the tile label wraps instead), and
-     「ms (P99)」 moves under a long figure as one unit */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) button[class~="text-[10px]"][class~="font-bold"][class~="text-blue-500"] {
-    flex-shrink: 0;
-    white-space: nowrap;
-  }
-
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="items-baseline"][class~="gap-2"]:has(> div[class~="text-3xl"]) {
-    flex-wrap: wrap;
-  }
-
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="items-baseline"][class~="gap-2"]:has(> div[class~="text-3xl"]) > span {
-    white-space: nowrap;
-  }
-
-  /* ops: the system-log card (section.rounded-2xl with a grey border and a flat shadow; a translucent near-black
-     in dark) is the v2 card: 20px, no border, the layered card shadow, the surface colour */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) section[class~="rounded-2xl"][class~="border"][class~="shadow-sm"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-card);
-    background-color: rgb(var(--ui-surface));
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  /* ops: the runtime log-config box inside it is a grouped inner panel: a hairline instead of the 1px grey border
-     (recessed like the metric tiles in dark, where upstream's 70 % card colour made it vanish) */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) section[class~="rounded-2xl"] > div[class~="rounded-xl"][class~="border"][class~="bg-gray-50"] {
-    border-color: transparent;
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  html.flat-theme.dark div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) section[class~="rounded-2xl"] > div[class~="rounded-xl"][class~="border"][class~="bg-gray-50"] {
-    background-color: rgb(var(--theme-color-dark-900));
-  }
-
-  /* ops system log: the queue / written / dropped / failed counters are status chips: capsules like the badges
-     (the 12px text sits on their parent, so the shared chip rule does not reach them); the host column wraps a long
-     host name instead of cutting it */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) section[class~="rounded-2xl"] > div > div[class~="text-xs"] > span[class~="rounded-md"][class*="bg-"] {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) section[class~="rounded-2xl"] td > span[class~="block"][class~="truncate"] {
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* ops full screen (the page without AppLayout: div.flex.min-h-screen.flex-col.justify-center.bg-gray-50; AppLayout's
-     own root has no justify-center): the neutral tonal backdrop the cards float on, not a flat grey */
-  html.flat-theme div[class~="min-h-screen"][class~="flex-col"][class~="justify-center"][class~="bg-gray-50"]:has([data-testid="throughput-chart-header"]) {
-    background-color: rgb(var(--ui-canvas));
-    background-image: var(--ui-backdrop);
-    background-attachment: fixed;
-  }
-
-  /* ops 「告警规则」 dialog: OpsAlertRulesCard keeps its card chrome inside the sheet (a card in a card); as the only
-     child of a dialog body it is the sheet's content: no ring, shadow, fill or inset of its own */
-  html.flat-theme .modal-body > div[class~="rounded-3xl"][class~="ring-1"][class~="ring-gray-900/5"] {
-    border-radius: 0;
-    background-color: transparent;
-    padding: 0;
-    box-shadow: none;
-  }
-
-  /* 操作日志 detail dialog: the hero box (20px with a 1px grey border, a card inside the sheet) is an inner panel:
-     the concentric 14px and a hairline; the small section labels read in sentence case (「User-Agent」, not
-     「USER-AGENT」) */
-  html.flat-theme .modal-body div[class~="rounded-2xl"][class~="border"][class~="bg-gray-50/60"][class~="p-5"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-inner);
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  html.flat-theme .modal-body > div[class~="space-y-5"]:has(> div[class~="bg-gray-50/60"][class~="p-5"]) :is(h4, div)[class~="uppercase"][class~="tracking-wider"] {
-    letter-spacing: 0;
-    text-transform: none;
-  }
-
-  /* ops: the concurrency / queue list box (a 1px grey frame with a grey header band) is part of its card: no
-     frame, the header on the card with a hairline beneath; the grey row tiles carry the grouping */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="flex-col"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"]:has(> div[class~="border-b"][class~="bg-gray-50"]) {
-    border-color: transparent;
-    border-radius: var(--ui-radius-inner);
-  }
-
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="flex-col"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] > div[class~="border-b"][class~="bg-gray-50"]:first-child {
-    border-bottom-color: var(--ui-hairline-soft);
-    background-color: transparent;
-  }
-
-  /* ops: the concurrency rows show whole names: the user name and the e-mail beside it wrap instead of being cut
-     to 「a…」 (upstream truncates both) */
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="min-w-0"][class~="flex-1"][class~="items-center"][class~="gap-1.5"]:has(> span[class~="truncate"][class~="text-[11px]"]) {
-    flex-wrap: wrap;
-    row-gap: 0;
-  }
-
-  html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]) {
-    min-width: 0;
-    flex-shrink: 1;
-    overflow: visible;
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* ops 「运维监控设置」 dialog: its section panels and the 「高级设置」 disclosure (upstream 20px inside the 22px sheet)
-     take the concentric 14px */
-  html.flat-theme .modal-body :is(div, details)[class~="rounded-2xl"][class~="bg-gray-50"][class~="dark:bg-dark-700/50"] {
-    border-radius: var(--ui-radius-inner);
-  }
-
-  /* (dark: upstream's dark-700 at 50 % is the sheet colour itself (#1F1F22), so the sections vanished; they are
-     grouped boxes one step lighter than the sheet, as upstream draws them, so the dark field wells inside stay
-     recessed) */
-  html.flat-theme.dark .modal-body :is(div, details)[class~="rounded-2xl"][class~="bg-gray-50"][class~="dark:bg-dark-700/50"] {
-    background-color: rgb(var(--ui-subtle));
-  }
-
-  /* ops 请求错误 / 上游错误 lists (OpsErrorDetailsModal, .compact-select only there): the search takes the spare
-     eighth column, so its placeholder 「搜索 request_id / client_request_id / message」 is read whole; the pop-up
-     buttons of this filter bar are capsules like the search beside them (the dialog form rule gave them 10px) */
-  @media (min-width: 768px) {
-    html.flat-theme .modal-body div[class~="md:grid-cols-8"] > div[class~="col-span-2"][class~="compact-select"]:first-child {
-      grid-column: span 3 / span 3;
-    }
-  }
-
-  html.flat-theme .modal-body .compact-select .select-trigger {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  /* ops 请求明细 (OpsRequestDetailsModal) and the error lists of 运维监控 / 使用记录 (OpsErrorLogTable): values are
-     never cut with an ellipsis (admins see every value): the model, the request ID, the response message and the
-     user agent wrap inside their column; the full text was only in a hover title before */
-  html.flat-theme td[class~="max-w-[240px]"][class~="truncate"][class~="px-4"][class~="py-3"],
-  html.flat-theme span[class~="max-w-[220px]"][class~="truncate"][class~="font-mono"][class~="text-[11px]"],
-  html.flat-theme span[class~="min-w-0"][class~="flex-1"][class~="truncate"][class~="font-mono"][class~="text-[11px]"],
-  html.flat-theme :is(.modal-body:has(.compact-select), [class~="card"]:has(> div > button[data-testid="usage-detail-tab"])) .table-wrapper:not([data-table="usage"]) td:is([data-column="message"], [data-column="user_agent"]) > span[class~="block"][class~="truncate"] {
-    overflow: visible;
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* (the request ID may use the free width of the wide sheet: one line where it fits) */
-  html.flat-theme span[class~="max-w-[220px]"][class~="truncate"][class~="font-mono"][class~="text-[11px]"] {
-    max-width: none;
-  }
-
-  /* ops 告警事件: the alert title wraps instead of being cut at 360px */
-  html.flat-theme div[class~="truncate"][class~="max-w-[360px]"][class~="font-semibold"] {
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* ops 后台任务 明细 dialog: the job cards are inner panels (14px, a hairline) and the job name is never cut */
-  html.flat-theme .modal-body div[class~="rounded-xl"][class~="border"][class~="border-gray-100"][class~="bg-white"][class~="p-4"]:has(> div > div[class~="truncate"][class~="font-semibold"]) {
-    border-color: transparent;
-    border-radius: var(--ui-radius-inner);
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline);
-  }
-
-  html.flat-theme .modal-body div[class~="rounded-xl"][class~="p-4"] > div > div[class~="truncate"][class~="text-sm"][class~="font-semibold"] {
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* 使用记录 (admin UsageView; [data-testid="usage-detail-tab"] exists only there): the detail card's underline tabs
-     (用量明细 / 错误请求 / 用户排行) are the console's tab capsules: the current tab tinted Apple blue with its label and
-     glyph in the accessible blue (as the settings tabs and the sidebar), no underline, on a hairline-separated strip */
-  html.flat-theme div[class~="border-b"]:has(> button[data-testid="usage-detail-tab"]) {
-    gap: 0.25rem;
-    border-bottom-color: var(--ui-hairline-soft);
-    padding: 0.625rem 0.875rem;
-  }
-
-  html.flat-theme button[data-testid="usage-detail-tab"] {
-    margin-bottom: 0;
-    border-bottom-width: 0;
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.375rem 0.875rem;
-    color: rgb(var(--ui-ink) / 0.82);
-    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme button[data-testid="usage-detail-tab"]:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme button[data-testid="usage-detail-tab"][class~="border-primary-500"],
-  html.flat-theme button[data-testid="usage-detail-tab"][class~="border-primary-500"]:hover {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  /* 使用记录 filter search results (user / API key / account, .usage-filter-dropdown only in UsageFilters): the
-     same menu rows, and names are never cut */
-  html.flat-theme .usage-filter-dropdown > div[class~="absolute"][class~="shadow-lg"] {
-    padding: 0.3125rem;
-  }
-
-  html.flat-theme .usage-filter-dropdown > div[class~="absolute"][class~="shadow-lg"] > button {
-    border-radius: 8px;
-    padding: 0.3125rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-  }
-
-  html.flat-theme .usage-filter-dropdown > div[class~="absolute"][class~="shadow-lg"] > button:hover {
-    background-color: var(--ui-menu-hover);
-  }
-
-  html.flat-theme .usage-filter-dropdown > div[class~="absolute"] > button > span[class~="truncate"] {
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* 使用记录 用户排行: the user e-mail is never cut at 260px */
-  html.flat-theme td[class~="max-w-[260px]"][class~="truncate"][class~="font-medium"] {
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* 使用记录 清理 dialog (its body alone holds UsageFilters' .usage-filter-dropdown): the filter card and the recent
-     task box are grouped panels of the sheet (14px, a hairline, recessed fill), not a shadowed card in a card */
-  html.flat-theme .modal-body div[class~="card"][class~="p-6"]:has(.usage-filter-dropdown) {
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  /* (dark: one step lighter than the sheet, so the dark field wells inside stay recessed) */
-  html.flat-theme.dark .modal-body div[class~="card"][class~="p-6"]:has(.usage-filter-dropdown) {
-    background-color: rgb(var(--ui-subtle));
-  }
-
-  html.flat-theme .modal-body:has(.usage-filter-dropdown) > div > div[class~="rounded-xl"][class~="border"][class~="p-4"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-inner);
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline);
-  }
-
-  /* 操作日志 table: the operator, the action and the method + path wrap inside their columns instead of being cut
-     (upstream truncates them at 220px / 320px) */
-  html.flat-theme td[data-column="actor"] > div[class~="min-w-0"][class~="max-w-[220px]"] > div[class~="truncate"],
-  html.flat-theme td[data-column="action"] > div[class~="min-w-0"][class~="max-w-xs"] > div[class~="truncate"] {
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* 邀请返利 records (AdminAffiliateRecordsTable, the only max-w-56 truncations): e-mails, user names and order
-     numbers wrap inside 14rem instead of being cut */
-  html.flat-theme .table-wrapper :is(div, button)[class~="max-w-56"][class~="truncate"] {
-    white-space: normal;
-    overflow-wrap: anywhere;
-  }
-
-  /* end sweep:A */
-
-  /* sweep:B (accounts, proxies, groups, channels) */
-
-  /* 账号管理「更多操作」菜单 (AccountsView: a teleported div.fixed.rounded-lg.border.bg-white.shadow-xl): the glass menu
-     material and 14px corners of the other menus instead of an opaque bordered panel. */
-  html.flat-theme body > div[class~="fixed"][class~="shadow-xl"][class~="bg-white"]:has([class~="account-tools-menu-item"]) {
-    border-color: transparent;
-    border-width: 0.5px;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    box-shadow: var(--ui-glass-float);
-  }
-
-  /* its rows: 28px menu items (13px, 8px corners, the neutral highlight); the glyphs are monochrome like the row menu's
-     (upstream's violet / amber / blue icon tiles are decorative accents, not status) */
-  html.flat-theme body > div[class~="fixed"] [class~="account-tools-menu-item"],
-  html.flat-theme body > div[class~="fixed"]:has([class~="account-tools-menu-item"]) div[class~="grid"] > button {
-    min-height: 1.75rem;
-    gap: 0.625rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme body > div[class~="fixed"] [class~="account-tools-menu-item"]:hover,
-  html.flat-theme body > div[class~="fixed"]:has([class~="account-tools-menu-item"]) div[class~="grid"] > button:hover {
-    background-color: var(--ui-menu-hover);
-  }
-
-  html.flat-theme body > div[class~="fixed"] [class~="account-tools-menu-icon"] {
-    width: 1rem;
-    height: 1rem;
-    border-width: 0;
-    background-color: transparent;
-    color: rgb(var(--ui-muted));
-  }
-
-  /* The other menus built from utilities on these pages (账号管理 筛选 平台 / 类型 / 状态 / 套餐 / 代理 / 标签 and 自动刷新;
-     the 列设置 menu is a shared rule now, shared:overlays O4) take the same row metrics — 13px labels, 28px rows, 8px
-     highlight corners inset from the glass edge, the neutral menu highlight (upstream: 14px text on 36px rows; in dark
-     the hover turned darker than the menu). */
-  html.flat-theme button[data-test^="account-filter-"] + div label[class~="cursor-pointer"],
-  html.flat-theme div[class~="absolute"][class~="w-56"][class~="origin-top-right"] > div[class~="p-2"] > button[class~="rounded-md"] {
-    min-height: 1.75rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-  }
-
-  html.flat-theme button[data-test^="account-filter-"] + div label[class~="cursor-pointer"]:hover,
-  html.flat-theme button[data-test^="account-filter-"] + div div[class~="border-t"] > button:hover,
-  html.flat-theme div[class~="absolute"][class~="w-56"][class~="origin-top-right"] > div[class~="p-2"] > button[class~="rounded-md"]:hover {
-    background-color: var(--ui-menu-hover);
-  }
-
-  html.flat-theme button[data-test^="account-filter-"] + div div[class~="border-t"],
-  html.flat-theme div[class~="absolute"][class~="w-56"][class~="origin-top-right"] div[class~="border-t"] {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  /* its section titles (数据操作 / 工具 / 列显示): the 11px menu group title (no capitals, no tracking) */
-  html.flat-theme body > div[class~="fixed"]:has([class~="account-tools-menu-item"]) div[class~="uppercase"][class~="tracking-wide"] {
-    font-size: 0.6875rem;
-    letter-spacing: 0;
-    text-transform: none;
-    color: rgb(var(--ui-muted));
-  }
-
-  /* 账号管理 · 卡片视图 (AccountCardGrid: article.rounded-md.border.bg-white): the console card — white 20px, no border,
-     layered soft shadow (#161618 in dark); a selected card (upstream: a blue left rule) is framed in Apple blue on the
-     selected-row tint. */
-  html.flat-theme [data-test="account-card-grid"] article[class~="rounded-md"][class~="border"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-card);
-    background-color: rgb(var(--ui-surface));
-    box-shadow: var(--ui-shadow-card);
-    transition: box-shadow var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme [data-test="account-card-grid"] article[class~="rounded-md"][class~="border"]:hover {
-    border-color: transparent;
-    background-color: rgb(var(--ui-surface));
-    box-shadow: var(--ui-shadow-hover);
-  }
-
-  html.flat-theme [data-test="account-card-grid"] article[class~="rounded-md"][class~="border-l-primary-500"],
-  html.flat-theme [data-test="account-card-grid"] article[class~="rounded-md"][class~="border-l-primary-500"]:hover {
-    background-color: rgb(var(--ui-row-selected));
-    box-shadow: 0 0 0 2px rgb(var(--ui-primary)), var(--ui-shadow-card);
-  }
-
-  html.flat-theme [data-test="account-card-grid"] div[class~="animate-pulse"][class~="rounded-md"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-card);
-    background-color: rgb(var(--ui-subtle));
-  }
-
-  /* 卡片视图 has no table card around the list (TablePageLayout unframed), so the classification bar would sit on the
-     backdrop as a translucent band with a rule: it becomes a card of its own, as on phones. */
-  html.flat-theme .table-scroll-container-unframed div[class~="bg-surface/70"][class~="border-b"]:has(> [data-test="desktop-taxonomy-bar"]) {
-    margin-bottom: 0.75rem;
-    border-bottom-color: transparent;
-    border-radius: var(--ui-radius-card);
-    background-color: rgb(var(--ui-surface));
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  html.flat-theme .table-scroll-container-unframed [data-test="desktop-taxonomy-bar"] {
-    border-bottom-color: transparent;
-  }
-
-  /* 账号详情抽屉 (AccountDetailsDrawer): the dialog scrim (a light dim with a soft blur) instead of a flat 35 % black;
-     the panel is an opaque sheet in the dialog colour that floats 10px inside the window with 22px corners, like the
-     sidebar opposite it (phones keep the full-height panel). */
-  html.flat-theme body > div[class~="fixed"][class~="inset-0"][class~="bg-black/35"] {
-    background-color: rgb(var(--ui-scrim));
-    -webkit-backdrop-filter: var(--ui-scrim-blur);
-    backdrop-filter: var(--ui-scrim-blur);
-  }
-
-  html.flat-theme aside[data-test="account-details-drawer"] {
-    border-color: transparent;
-    background-color: rgb(var(--ui-raised));
-    box-shadow: var(--ui-shadow-overlay);
-  }
-
-  @media (min-width: 640px) {
-    html.flat-theme aside[data-test="account-details-drawer"] {
-      top: 0.625rem;
-      right: 0.625rem;
-      bottom: 0.625rem;
-      overflow: hidden;
-      border-width: 0;
-      border-radius: var(--ui-radius-panel);
-    }
-  }
-
-  /* 账号状态列 · model cooldown badges (AccountStatusIndicator, OPS-6): the countdown 「41m」 is 10px at opacity-70
-     (about 3.4:1 on the tinted badge); it takes the badge's full text colour (>= 6:1). */
-  html.flat-theme [data-testid="model-status-trigger"] span[class~="opacity-70"] {
-    opacity: 1;
-  }
-
-  /* 账号表 · 状态列的错误提示 (AccountStatusIndicator: the hover tip with the account's error message sits inside the
-     table's scroll box, left-aligned to the ? icon and as tall as the message): a long upstream error ran past the
-     table's right edge and bottom and was cut (verification round 2). It opens to the left of the icon, over the usage
-     column, and a long message scrolls inside a 12rem tip, so the whole text stays readable (the details drawer shows
-     it in full as well). The card and compact views keep upstream's placement. */
-  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] div[class~="group/error"] > div[class~="absolute"][class~="top-full"] {
-    left: auto;
-    right: 0;
-    max-height: 12rem;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-  }
-
-  /* 账号行菜单: the two Codex route items have no glyph; their labels line up with the labels of the items that do */
-  html.flat-theme .action-menu-content fieldset button:is([data-test="codex-harvest"], [data-test="codex-stop"]) {
-    padding-left: 2.25rem;
-  }
-
-  /* Account create / edit / bulk edit dialogs. The model list actions (ModelWhitelistSelector: outlined rectangles in
-     blue / green / red) are glass capsules with the coloured label, like the confirm / destructive buttons;
-     「填入」 keeps its blue tint as a capsule. */
-  html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-1.5"]:is([class~="border-blue-200"], [class~="border-emerald-200"], [class~="border-red-200"]) {
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-1.5"]:is([class~="border-blue-200"], [class~="border-emerald-200"], [class~="border-red-200"]):hover:not(:disabled) {
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  /* (dark: on the lighter glass capsule the blue / red labels take the lighter accessible tones, >= 4.8:1; the green
-     one already reads >= 5:1) */
-  html.flat-theme.dark :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-1.5"][class~="border-blue-200"] {
-    color: rgb(var(--ui-nav-current-ink));
-  }
-
-  html.flat-theme.dark :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-1.5"][class~="border-red-200"] {
-    color: rgb(var(--ui-danger-label));
-  }
-
-  html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="bg-primary-50"][class~="px-4"][class~="py-2"] {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  /* (dark: the RPM strategy hint inside the selected segment sits on the lighter glossy thumb, where the muted grey of
-     the shared rule reads 2.4:1; there it takes the ink colour, >= 4.7:1) */
-  html.flat-theme.dark :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="py-2"][class~="transition-all"][class~="rounded-lg"][class~="text-sm"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]) [class~="opacity-70"] {
-    color: rgb(var(--ui-ink));
-  }
-
-  /* The small preset buttons (model-mapping presets 「+ Sonnet4→4.6」「+ GPT-4o」…, endpoint presets, header JSON tools)
-     are capsules. The model-mapping presets are neutral chips: upstream tints each model family in its own hue — up to
-     nine accents in one row of actions; the tinted / solid blue JSON tools and the CN endpoint presets (selected =
-     blue) keep their colours. */
-  html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="px-3"][class~="py-1"][class~="text-xs"][class~="transition-colors"] {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="px-3"][class~="py-1"][class~="text-xs"][class~="transition-colors"]:not([data-testid]):not([class~="bg-primary-50"]):not([class~="bg-primary-600"]):not([class~="bg-gray-100"]) {
-    background-color: var(--ui-fill);
-    color: rgb(var(--ui-ink) / 0.85);
-  }
-
-  html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="px-3"][class~="py-1"][class~="text-xs"][class~="transition-colors"]:not([data-testid]):not([class~="bg-primary-50"]):not([class~="bg-primary-600"]):not([class~="bg-gray-100"]):hover {
-    background-color: var(--ui-fill-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* 编辑账号 · Codex 图片桥接策略 (EditAccountModal: a sky-tinted box whose default option 「跟随渠道」 is selected in sky):
-     a quiet grouped box (the sunk fill, a hairline, 14px) with a neutral glyph tile (the chosen option: shared:surfaces
-     S10). */
-  html.flat-theme #edit-account-form div[class~="overflow-hidden"][class~="rounded-lg"][class~="border-sky-100"] {
-    border-color: var(--ui-hairline-soft);
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: none;
-  }
-
-  html.flat-theme #edit-account-form div[class~="border-sky-100"] div[class~="ring-sky-100"] {
-    color: rgb(var(--ui-muted));
-    --tw-ring-color: var(--ui-hairline);
-  }
-
-  html.flat-theme #edit-account-form div[class~="border-sky-100"] > div[class~="border-t"][class~="border-sky-100"] {
-    border-top-color: var(--ui-hairline-soft);
-    background-color: rgb(var(--ui-raised));
-  }
-
-  /* IP管理 / 分组管理 icon-only row actions: the hover follows the other icon buttons (the neutral highlight, an ink
-     glyph) instead of a different hue per action (emerald, sky, cyan, purple, orange); 删除 keeps its red. */
-  html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"]:not([class~="hover:text-red-600"]):hover:not(:disabled) {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  /* IP管理「添加代理」: 标准添加 / 快捷添加 are underline tabs (the only ones left in the console): the segmented control
-     of the other two-way pickers — a recessed capsule track, the current mode a glossy raised capsule; no rule
-     under the row. (The row is found by the ProxyAdBanner link it carries, so no other dialog is touched.) */
-  html.flat-theme .modal-body > div[class~="border-b"]:has(> a[href*="/proxyip"]):has(> div > button[class~="-mb-px"][class~="border-b-2"]) {
-    border-bottom-color: transparent;
-  }
-
-  html.flat-theme .modal-body > div[class~="border-b"]:has(> a[href*="/proxyip"]) > div:has(> button[class~="-mb-px"][class~="border-b-2"]) {
-    gap: 0.125rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme .modal-body > div[class~="border-b"]:has(> a[href*="/proxyip"]) > div > button[class~="-mb-px"][class~="border-b-2"] {
-    margin-bottom: 0;
-    border-width: 0;
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.25rem 0.875rem;
-    color: rgb(var(--ui-ink) / 0.8);
-  }
-
-  html.flat-theme .modal-body > div[class~="border-b"]:has(> a[href*="/proxyip"]) > div > button[class~="-mb-px"][class~="border-b-2"]:hover {
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .modal-body > div[class~="border-b"]:has(> a[href*="/proxyip"]) > div > button[class~="-mb-px"][class~="border-b-2"][class~="border-primary-500"] {
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  /* IP管理 添加 / 编辑代理 · 有效期 presets (7 / 30 / 90 / 180 天: .btn.btn-sm, the matching one btn-primary): the same
-     segmented control as the API key expiry presets (a recessed track, the matching preset a glossy raised capsule
-     with an ink label) instead of a row of separate capsules with a solid blue one. */
-  html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="flex-wrap"][class~="gap-2"]:has(> button[class~="btn-sm"]) {
-    width: fit-content;
-    max-width: 100%;
-    gap: 0.125rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="flex-wrap"][class~="gap-2"] > button[class~="btn-sm"] {
-    min-height: 1.5rem;
-    border-color: transparent;
-    padding: 0.125rem 0.875rem;
-    background-color: transparent;
-    background-image: none;
-    color: rgb(var(--ui-ink) / 0.8);
-    box-shadow: none;
-  }
-
-  html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="flex-wrap"][class~="gap-2"] > button[class~="btn-sm"]:hover:not(:disabled) {
-    background-color: transparent;
-    background-image: none;
-    color: rgb(var(--ui-ink));
-    box-shadow: none;
-  }
-
-  html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="flex-wrap"][class~="gap-2"] > button[class~="btn-sm"][class~="btn-primary"],
-  html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="flex-wrap"][class~="gap-2"] > button[class~="btn-sm"][class~="btn-primary"]:hover:not(:disabled) {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  /* 渠道监控 · 新增 / 编辑监控 (MonitorFormDialog #channel-monitor-form): the 检查方式 / API 模式 option cards are the
-     console's choice cards — 12px, a neutral line when not chosen (upstream draws a pale blue border on every
-     unchosen card), the chosen card on a faint blue fill; the hints lose opacity-80 (4.38–4.41:1 → ≥ 5:1).
-     The provider buttons keep their brand-coloured selection, with the same 12px corners. */
-  html.flat-theme #channel-monitor-form button[class~="rounded-lg"][class~="border-2"] {
-    border-radius: var(--ui-radius-xl);
-  }
-
-  html.flat-theme #channel-monitor-form button[class~="rounded-lg"][class~="border-2"][class~="text-left"][class~="border-blue-100"] {
-    border-color: rgb(var(--ui-line-strong));
-    background-color: rgb(var(--ui-surface));
-  }
-
-  html.flat-theme:not(.dark) #channel-monitor-form button[class~="rounded-lg"][class~="border-2"][class~="text-left"][class~="border-primary-500"] {
-    background-color: rgb(var(--ui-primary) / 0.05);
-  }
-
-  html.flat-theme #channel-monitor-form button[class~="rounded-lg"][class~="border-2"][class~="text-left"] span[class~="opacity-80"] {
-    opacity: 1;
-  }
-
-  /* 渠道监控 · 请求模板管理 (MonitorTemplateManagerDialog: underline provider tabs, the only role=tablist row inside a
-     dialog body): capsule tabs like the channel dialog's — the current provider tinted Apple blue with the accessible
-     blue label; the count capsules stay. */
-  html.flat-theme .modal-body > div[class~="border-b"] > div[role="tablist"][class~="flex-wrap"] {
-    gap: 0.125rem;
-    padding-bottom: 0.375rem;
-  }
-
-  html.flat-theme .modal-body > div[class~="border-b"] > div[role="tablist"] > button[role="tab"][class~="border-b-2"] {
-    min-height: 1.75rem;
-    border-bottom-width: 0;
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.25rem 0.75rem;
-    color: rgb(var(--ui-ink) / 0.82);
-  }
-
-  html.flat-theme .modal-body > div[class~="border-b"] > div[role="tablist"] > button[role="tab"][class~="border-b-2"]:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .modal-body > div[class~="border-b"] > div[role="tablist"] > button[role="tab"][class~="border-primary-500"],
-  html.flat-theme .modal-body > div[class~="border-b"] > div[role="tablist"] > button[role="tab"][class~="border-primary-500"]:hover {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  /* 渠道管理 create / edit dialog tabs (ChannelsView .channel-tab, scoped: underline tabs, one per enabled platform):
-     capsule tabs like the account classification bar — the current tab tinted Apple blue with the accessible blue
-     label, no underline; a platform tab keeps its platform-coloured name. */
-  html.flat-theme [class~="channel-dialog-body"] [class~="channel-tab"] {
-    margin: 0.375rem 0.125rem;
-    min-height: 1.75rem;
-    border-bottom-width: 0;
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.25rem 0.75rem;
-    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme [class~="channel-dialog-body"] [class~="channel-tab-inactive"] {
-    color: rgb(var(--ui-ink) / 0.82);
-  }
-
-  html.flat-theme [class~="channel-dialog-body"] [class~="channel-tab-inactive"]:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme [class~="channel-dialog-body"] [class~="channel-tab-active"] {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  /* a current platform tab reads like the others (the accessible blue label on the blue tint; the platform-green label
-     there was 4.46:1); its glyph keeps the platform colour */
-  html.flat-theme [class~="channel-dialog-body"] [class~="channel-tab-active"] > span {
-    color: rgb(var(--ui-nav-current-ink));
-  }
-
-  /* the 10px rate capsule 「1x」 of the group chips in a platform tab (upstream: platform text on its own 10 % tint,
-     4.46:1 in light): the tint stays, the figure is ink */
-  html.flat-theme:not(.dark) [class~="channel-dialog-body"] label > span[class~="rounded-full"][class~="px-1"][class~="text-[10px]"] {
-    color: rgb(var(--ui-ink) / 0.85);
-  }
-
-  /* end sweep:B */
-
-  /* sweep:C (users, subscriptions, redeem, promo codes, announcements, system prompts, codex runtime, plugins, settings) */
-
-  /* 用户管理「更多」菜单 (UsersView: .action-menu-content > div.py-1 > button, no fieldset): the account row menu's
-     28px items, 8px neutral highlight and grey glyphs instead of 36px full-width rows. */
-  html.flat-theme .action-menu-content > div[class~="py-1"] {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  html.flat-theme .action-menu-content > div[class~="py-1"] > button {
-    min-height: 1.75rem;
-    gap: 0.625rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .action-menu-content > div[class~="py-1"] > button:hover {
-    background-color: var(--ui-menu-hover);
-  }
-
-  html.flat-theme .action-menu-content > div[class~="py-1"] > button > svg[class~="text-gray-400"] {
-    color: rgb(var(--ui-muted));
-  }
-
-  /* (删除 keeps its red, highlighted in a faint red like the other destructive menu items) */
-  html.flat-theme .action-menu-content > div[class~="py-1"] > button[class~="text-red-600"],
-  html.flat-theme .action-menu-content > div[class~="py-1"] > button[class~="text-red-600"] > svg {
-    color: rgb(var(--ui-danger));
-  }
-
-  html.flat-theme .action-menu-content > div[class~="py-1"] > button[class~="text-red-600"]:hover {
-    background-color: rgb(var(--theme-color-danger-500) / 0.12);
-  }
-
-  html.flat-theme .action-menu-content > div[class~="py-1"] > div[class~="border-t"] {
-    margin: 0.25rem 0.375rem;
-    border-color: var(--ui-hairline-soft);
-  }
-
-  /* 用户管理 / 订阅管理 toolbar pop-ups (筛选设置, 列设置: glass panels from the shared recipe): their rows are the 28px
-     menu items with 8px corners inset in the panel (upstream: 36px full-width rows). */
-  html.flat-theme .table-page-layout:is(:has(.table-wrapper[data-table="users"]), :has([data-filter-user-search])) .layout-section-fixed div[class~="absolute"][class~="shadow-lg"][class~="bg-white"][class~="border"]:is([class~="py-1"], :has(> div[class~="p-2"])) {
-    padding: 0.3125rem;
-  }
-
-  html.flat-theme .table-page-layout:is(:has(.table-wrapper[data-table="users"]), :has([data-filter-user-search])) .layout-section-fixed div[class~="absolute"][class~="shadow-lg"][class~="bg-white"][class~="border"] > div[class~="p-2"] {
-    padding: 0;
-  }
-
-  html.flat-theme .table-page-layout:is(:has(.table-wrapper[data-table="users"]), :has([data-filter-user-search])) .layout-section-fixed div[class~="absolute"][class~="shadow-lg"][class~="bg-white"][class~="border"] button[class~="w-full"] {
-    min-height: 1.75rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
-  }
-
-  html.flat-theme .table-page-layout:is(:has(.table-wrapper[data-table="users"]), :has([data-filter-user-search])) .layout-section-fixed div[class~="absolute"][class~="shadow-lg"][class~="bg-white"][class~="border"] button[class~="w-full"]:hover:not(:disabled) {
-    background-color: var(--ui-menu-hover);
-  }
-
-  /* (订阅管理 列设置: the 「用户」 group title and the rule under the e-mail / user-name pair) */
-  html.flat-theme .table-page-layout:has([data-filter-user-search]) .layout-section-fixed div[class~="absolute"][class~="shadow-lg"][class~="bg-white"][class~="border"] div[class~="border-b"][class~="pb-2"] {
-    margin-bottom: 0.25rem;
-    border-color: var(--ui-hairline-soft);
-    padding-bottom: 0.25rem;
-  }
-
-  html.flat-theme .table-page-layout:has([data-filter-user-search]) .layout-section-fixed div[class~="absolute"][class~="shadow-lg"][class~="bg-white"][class~="border"] div[class~="border-b"][class~="pb-2"] > div[class~="text-xs"] {
-    padding: 0.25rem 0.625rem 0.125rem;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    color: rgb(var(--ui-muted));
-  }
-
-  /* 用户管理「分组」列: the click-to-replace menu (div.absolute.shadow-xl.bg-white.border inside the cell) is the glass
-     menu of the other menus — 14px, 8px items, the neutral highlight (upstream tints the hovered row in its primary),
-     the header as an 11px group title. */
-  html.flat-theme .table-wrapper[data-table="users"] td[data-column="groups"] div[class~="absolute"][class~="shadow-xl"][class~="border"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-menu);
-    background-color: transparent;
-    background-image: var(--ui-glass-fill-strong);
-    -webkit-backdrop-filter: var(--ui-glass-blur);
-    backdrop-filter: var(--ui-glass-blur);
-    padding: 0.3125rem;
-    font-size: 0.8125rem;
-    box-shadow: var(--ui-glass-float);
-  }
-
-  html.flat-theme .table-wrapper[data-table="users"] td[data-column="groups"] div[class~="absolute"][class~="shadow-xl"][class~="border"] > div[class~="border-b"]:first-child {
-    border-color: transparent;
-    padding: 0.25rem 0.625rem 0.125rem;
-    font-size: 0.6875rem;
-    font-weight: 600;
-    letter-spacing: 0;
-    text-transform: none;
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme .table-wrapper[data-table="users"] td[data-column="groups"] div[class~="absolute"][class~="shadow-xl"][class~="border"] > div[class~="cursor-pointer"] {
-    min-height: 1.75rem;
-    border-radius: 8px;
-    padding: 0.25rem 0.625rem;
-    line-height: 1.25rem;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .table-wrapper[data-table="users"] td[data-column="groups"] div[class~="absolute"][class~="shadow-xl"][class~="border"] > div[class~="cursor-pointer"]:hover {
-    background-color: var(--ui-menu-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .table-wrapper[data-table="users"] td[data-column="groups"] div[class~="absolute"][class~="shadow-xl"][class~="border"] > div[class~="cursor-pointer"] > svg {
-    opacity: 1;
-    color: rgb(var(--ui-muted));
-  }
-
-  /* 用户管理「余额」: in the first row the 「点击查看充值记录」 hint above the amount would open under the sticky table
-     header (z-index 200), so there it opens to the right of the amount (without its arrow), clear of 「充值」 below.
-     (More specific than shared:overlays' 「first two rows open downwards」 rule, whose top / margin would push it onto
-     the 充值 line.) */
-  html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="0"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"][class~="text-white"] {
-    top: 50%;
-    bottom: auto;
-    left: calc(100% + 0.375rem);
-    margin-top: 0;
-    margin-bottom: 0;
-    --tw-translate-x: 0px;
-    --tw-translate-y: -50%;
-  }
-
-  html.flat-theme .table-wrapper[data-table="users"] tr[data-index="0"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"] > div[class~="top-full"] {
-    display: none;
-  }
-
-  /* (second row: the users rows are two lines high, so upstream's upward hint stays clear of the sticky header there;
-     it keeps opening upwards instead of shared:overlays' downward flip, which laid it over the row's own 「充值」) */
-  html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="1"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"][class~="text-white"] {
-    top: auto;
-    bottom: 100%;
-    margin-top: 0;
-    margin-bottom: 0.375rem;
-  }
-
-  /* 用户分组配置 (UserAllowedGroupsModal): the exclusive-group choices are the configurator cards of the account forms —
-     12px white cards with a hairline, framed in Apple blue on a faint blue fill when chosen (upstream: 2px grey /
-     primary borders); the always-available public groups keep their green tint in the same shape. 1px border + 1px
-     padding keep the size. */
-  html.flat-theme .modal-body div[class~="group"][class~="rounded-xl"][class~="border-2"][class~="p-4"][class~="transition-all"],
-  html.flat-theme .modal-body div[class~="rounded-xl"][class~="border-2"][class~="border-green-200"][class~="p-4"] {
-    border-width: 1px;
-    border-radius: var(--ui-radius-xl);
-    padding: calc(1rem + 1px);
-    transition-property: border-color, background-color, box-shadow;
-    transition-duration: var(--ui-duration);
-    transition-timing-function: var(--ui-ease);
-  }
-
-  html.flat-theme .modal-body div[class~="group"][class~="rounded-xl"][class~="border-2"][class~="p-4"][class~="transition-all"][class~="border-gray-200"] {
-    border-color: rgb(var(--ui-line-strong));
-    background-color: rgb(var(--ui-surface));
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
-  }
-
-  html.flat-theme .modal-body div[class~="group"][class~="rounded-xl"][class~="border-2"][class~="p-4"][class~="transition-all"][class~="border-gray-200"]:hover {
-    border-color: rgb(var(--ui-control-line));
-  }
-
-  html.flat-theme .modal-body div[class~="group"][class~="rounded-xl"][class~="border-2"][class~="p-4"][class~="transition-all"][class~="border-primary-400"] {
-    border-color: rgb(var(--ui-primary));
-    background-color: rgb(var(--ui-primary) / 0.05);
-    box-shadow: 0 0 0 1px rgb(var(--ui-primary));
-  }
-
-  html.flat-theme.dark .modal-body div[class~="group"][class~="rounded-xl"][class~="border-2"][class~="p-4"][class~="transition-all"][class~="border-primary-400"] {
-    border-color: rgb(var(--ui-line-focus));
-    background-color: rgb(10 132 255 / 0.12);
-    box-shadow: 0 0 0 1px rgb(var(--ui-line-focus));
-  }
-
-  /* its check boxes (a peer sr-only input + a drawn 20px box whose 8px v2 corners made it read as a radio): the
-     console check box — 16px, 4px corners, the 3:1 control line around a shallow well, glossy blue when on */
-  html.flat-theme .modal-body label > input[type="checkbox"][class~="peer"][class~="sr-only"] + div[class~="h-5"][class~="w-5"][class~="rounded-md"][class~="border-2"] {
-    width: 1rem;
-    height: 1rem;
-    border-width: 1px;
-    border-radius: 4px;
-    border-color: rgb(var(--ui-control-line));
-    background-color: rgb(var(--ui-surface));
-    background-image: linear-gradient(180deg, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0) 55%);
-    box-shadow: inset 0 1px 1px 0 rgb(0 0 0 / 0.06);
-  }
-
-  html.flat-theme .modal-body label > input[type="checkbox"][class~="peer"][class~="sr-only"]:checked + div[class~="h-5"][class~="w-5"][class~="rounded-md"][class~="border-2"] {
-    border-color: rgb(var(--ui-primary));
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-check-fill);
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.28), 0 1px 2px 0 rgb(0 60 140 / 0.2);
-  }
-
-  html.flat-theme .modal-body label > input[type="checkbox"][class~="peer"][class~="sr-only"]:focus-visible + div[class~="h-5"][class~="w-5"][class~="rounded-md"][class~="border-2"] {
-    box-shadow: var(--ui-focus-ring);
-  }
-
-  /* (a public group, always available while the list is not restricted: the same box, filled in its green) */
-  html.flat-theme .modal-body div[class~="h-5"][class~="w-5"][class~="rounded-md"][class~="border-2"][class~="border-green-400"][class~="bg-green-500"] {
-    width: 1rem;
-    height: 1rem;
-    border-width: 1px;
-    border-radius: 4px;
-    border-color: rgb(var(--theme-color-success-600));
-    background-color: rgb(var(--theme-color-success-600));
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.28);
-  }
-
-  /* its 「专属倍率」 fields (input.hide-spinner.w-24.rounded-lg.border, no .input recipe): the recessed white well with
-     the blue focus halo of every other field */
-  html.flat-theme .modal-body input[class~="hide-spinner"][class~="w-24"][class~="rounded-lg"][class~="border"] {
-    border-color: var(--ui-field-line);
-    border-radius: var(--ui-radius-field);
-    background-color: var(--ui-field-bg);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-field-shadow);
-  }
-
-  html.flat-theme .modal-body input[class~="hide-spinner"][class~="w-24"][class~="rounded-lg"][class~="border"]:hover:not(:focus) {
-    border-color: var(--ui-field-line-hover);
-  }
-
-  html.flat-theme .modal-body input[class~="hide-spinner"][class~="w-24"][class~="rounded-lg"][class~="border"]:focus {
-    border-color: rgb(var(--ui-line-focus));
-    outline: none;
-    box-shadow: var(--ui-field-shadow), var(--ui-focus-ring);
-  }
-
-  /* 替换分组 (GroupReplaceModal: label.rounded-lg.border-2.p-3 with a drawn radio): the same configurator cards, and the
-     console radio (16px, the 3:1 control line; glossy blue with a white dot when chosen) */
-  html.flat-theme .modal-body label[class~="cursor-pointer"][class~="rounded-lg"][class~="border-2"][class~="p-3"]:has(> input[type="radio"][class~="sr-only"]) {
-    border-width: 1px;
-    border-radius: var(--ui-radius-xl);
-    padding: calc(0.75rem + 1px);
-  }
-
-  html.flat-theme .modal-body label[class~="cursor-pointer"][class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="border-gray-200"]:has(> input[type="radio"][class~="sr-only"]) {
-    border-color: rgb(var(--ui-line-strong));
-    background-color: rgb(var(--ui-surface));
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.04);
-  }
-
-  html.flat-theme .modal-body label[class~="cursor-pointer"][class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="border-gray-200"]:has(> input[type="radio"][class~="sr-only"]):hover {
-    border-color: rgb(var(--ui-control-line));
-  }
-
-  html.flat-theme .modal-body label[class~="cursor-pointer"][class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="border-primary-400"]:has(> input[type="radio"][class~="sr-only"]) {
-    border-color: rgb(var(--ui-primary));
-    background-color: rgb(var(--ui-primary) / 0.05);
-    box-shadow: 0 0 0 1px rgb(var(--ui-primary));
-  }
-
-  html.flat-theme.dark .modal-body label[class~="cursor-pointer"][class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="border-primary-400"]:has(> input[type="radio"][class~="sr-only"]) {
-    border-color: rgb(var(--ui-line-focus));
-    background-color: rgb(10 132 255 / 0.12);
-    box-shadow: 0 0 0 1px rgb(var(--ui-line-focus));
-  }
-
-  html.flat-theme .modal-body label > input[type="radio"][class~="sr-only"] + div[class~="h-5"][class~="w-5"][class~="rounded-full"][class~="border-2"] {
-    width: 1rem;
-    height: 1rem;
-    border-width: 1px;
-    border-color: rgb(var(--ui-control-line));
-    background-color: rgb(var(--ui-surface));
-    background-image: linear-gradient(180deg, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0) 55%);
-    box-shadow: inset 0 1px 1px 0 rgb(0 0 0 / 0.06);
-  }
-
-  html.flat-theme .modal-body label > input[type="radio"][class~="sr-only"]:checked + div[class~="h-5"][class~="w-5"][class~="rounded-full"][class~="border-2"] {
-    border-color: rgb(var(--ui-primary));
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-check-fill);
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.28), 0 1px 2px 0 rgb(0 60 140 / 0.2);
-  }
-
-  html.flat-theme .modal-body label > input[type="radio"][class~="sr-only"]:checked + div[class~="h-5"][class~="w-5"][class~="rounded-full"][class~="border-2"] > div[class~="h-2"][class~="w-2"] {
-    width: 0.375rem;
-    height: 0.375rem;
-  }
-
-  html.flat-theme .modal-body label > input[type="radio"][class~="sr-only"]:focus-visible + div[class~="h-5"][class~="w-5"][class~="rounded-full"][class~="border-2"] {
-    box-shadow: var(--ui-focus-ring);
-  }
-
-  /* 充值和并发变动记录 (UserBalanceHistoryModal; also opened from 使用记录): 「充值」「退款」 beside the type filter are
-     bordered white boxes upstream; here the glass capsules of the other secondary buttons (their +/− glyphs keep
-     upstream's green / orange). */
-  html.flat-theme .modal-body div[class~="flex"][class~="items-center"][class~="gap-3"] > button[class~="rounded-lg"][class~="border"][class~="border-gray-200"][class~="bg-white"][class~="px-3"][class~="py-2"] {
-    min-height: var(--ui-field-h);
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    padding-left: 0.875rem;
-    padding-right: 1rem;
-    font-weight: 500;
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme .modal-body div[class~="flex"][class~="items-center"][class~="gap-3"] > button[class~="rounded-lg"][class~="border"][class~="border-gray-200"][class~="bg-white"][class~="px-3"][class~="py-2"]:hover {
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme .modal-body div[class~="flex"][class~="items-center"][class~="gap-3"] > button[class~="rounded-lg"][class~="border"][class~="border-gray-200"][class~="bg-white"][class~="px-3"][class~="py-2"]:active {
-    background-image: var(--ui-control-fill-press);
-    box-shadow: var(--ui-control-shadow-press);
-  }
-
-  /* 兑换码 / 订阅管理 selection bars (RedeemView: div.rounded-lg.bg-primary-50.p-3 above the pagination; SubscriptionsView:
-     [data-test="subscription-bulk-actions"] under the filters): the bulk-action bar of the accounts page — 14px, with the
-     chrome's rim, hairline and soft shadow — keeping upstream's primary tint (Apple blue here) as the fill. */
-  html.flat-theme .table-page-layout > .layout-section-fixed > div[class~="rounded-lg"][class~="bg-primary-50"][class~="p-3"]:has(button[class~="btn-primary"]),
-  html.flat-theme .table-page-layout [data-test="subscription-bulk-actions"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-inner);
-    box-shadow: var(--ui-glass-shadow);
-  }
-
-  /* 兑换码「生成兑换码」: the 「兑换码过期」 choices (div.grid.sm:grid-cols-5 > button.rounded-lg.border, bordered boxes
-     upstream) are glass choice tiles with the field radius, the chosen one framed in Apple blue on a faint blue
-     fill; one line each (「永不过期」 broke inside its 74px column). */
-  html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"] {
-    min-height: var(--ui-field-h);
-    border-color: transparent;
-    border-radius: var(--ui-radius-field);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    padding: 0.375rem 0.25rem;
-    font-size: 0.8125rem;
-    font-weight: 500;
-    line-height: 1.25rem;
-    white-space: nowrap;
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"][class~="border-gray-200"]:hover {
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"][class~="border-primary-500"] {
-    border-color: rgb(var(--ui-primary));
-    background-color: rgb(var(--ui-primary) / 0.06);
-    background-image: none;
-    color: rgb(var(--ui-primary-ink));
-    font-weight: 600;
-    box-shadow: 0 0 0 1px rgb(var(--ui-primary));
-  }
-
-  html.flat-theme.dark div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"][class~="border-primary-500"] {
-    border-color: rgb(var(--ui-line-focus));
-    background-color: rgb(10 132 255 / 0.14);
-    color: rgb(var(--ui-nav-current-ink));
-    box-shadow: 0 0 0 1px rgb(var(--ui-line-focus));
-  }
-
-  /* 公告「展示条件」 (AnnouncementTargetingEditor, only in the announcement dialog): three nested boxes that all took the
-     20px card radius (a 20px OR-group card inside a 20px box inside the 22px sheet); concentric instead — the box
-     14px, each OR group 12px, each condition 10px. */
-  html.flat-theme .modal-body div[class~="rounded-2xl"][class~="bg-gray-50"]:has(> div input[name="announcement-targeting-mode"]) {
-    border-radius: var(--ui-radius-inner);
-  }
-
-  html.flat-theme .modal-body div[class~="rounded-2xl"][class~="bg-gray-50"]:has(> div input[name="announcement-targeting-mode"]) div[class~="rounded-2xl"][class~="bg-white"] {
-    border-radius: var(--ui-radius-xl);
-  }
-
-  html.flat-theme .modal-body div[class~="rounded-2xl"][class~="bg-gray-50"]:has(> div input[name="announcement-targeting-mode"]) div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-3"] {
-    border-radius: var(--ui-radius-field);
-  }
-
-  /* 系统提示词 (SystemPromptsView, fork page: the switch + site default and the prompt library sat on the backdrop
-     between grey rules): each section is a white 20px card like the settings pages; the page header keeps the
-     backdrop, without the rule under it. */
-  html.flat-theme main div[class~="max-w-5xl"]:has(> header [data-test="system-prompts-save"]) > header {
-    border-bottom-color: transparent;
-    padding-bottom: 0.25rem;
-  }
-
-  html.flat-theme main div[class~="max-w-5xl"]:has(> header [data-test="system-prompts-save"]) > section {
-    border-bottom-width: 0;
-    border-radius: var(--ui-radius-card);
-    background-color: rgb(var(--ui-surface));
-    padding: 1.25rem 1.5rem 1.5rem;
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  html.flat-theme main div[class~="max-w-5xl"]:has(> header [data-test="system-prompts-save"]) > section article[class~="border-t"] {
-    border-top-color: var(--ui-hairline-soft);
-  }
-
-  /* Codex 路由设置 (CodexRuntimeSettings, fork page: one section on the backdrop): the same white 20px card */
-  html.flat-theme main > section[aria-live="polite"]:has([data-test="codex-enabled"]) {
-    border-radius: var(--ui-radius-card);
-    background-color: rgb(var(--ui-surface));
-    padding: 1.25rem 1.5rem 1.5rem;
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  /* 插件管理 (PluginsView, fork page; root = main > div holding the .s2plugin upload): the notice is a tinted 12px box
-     without its 1px blue rule and square corners (Settings notices), the empty state a dashed 20px placeholder, the
-     header tags capsules, and the plugin cards (.card with a 1px grey border) the borderless console card. */
-  html.flat-theme main > div:has(> section input[accept^=".s2plugin"]) > div[class~="border"][class~="bg-blue-50"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-xl);
-  }
-
-  html.flat-theme main > div:has(> section input[accept^=".s2plugin"]) > div[class~="border-dashed"] {
-    border-color: rgb(var(--ui-line-strong));
-    border-radius: var(--ui-radius-card);
-  }
-
-  html.flat-theme main > div:has(> section input[accept^=".s2plugin"]) > section span[class~="rounded"][class~="bg-gray-100"] {
-    border-radius: var(--ui-radius-capsule);
-    padding-left: 0.625rem;
-    padding-right: 0.625rem;
-  }
-
-  html.flat-theme main > div:has(> section input[accept^=".s2plugin"]) article[class~="card"][class~="border"],
-  html.flat-theme main > div:has(> section input[accept^=".s2plugin"]) [data-testid="retired-plugins-receipt"] {
-    border-color: transparent;
-  }
-
-  html.flat-theme main > div:has(> section input[accept^=".s2plugin"]) article[class~="card"] pre[class~="rounded"],
-  html.flat-theme main > div:has(> section input[accept^=".s2plugin"]) [data-testid="retired-plugins-receipt"] pre[class~="rounded"] {
-    border-radius: var(--ui-radius-field);
-  }
-
-  /* 系统设置: every card title is 15px semibold, like the plain titles the shared card recipe sizes (upstream nests
-     some in a flex row with an icon or buttons — 登录条款确认, 面板接口限流, SMTP 设置, 邮件模板 — or uses
-     h3.text-base / font-medium — the backup and notification cards). */
-  html.flat-theme form:has(> .settings-tabs-shell) .card > div:first-child :is(h2, h3):is([class~="text-lg"], [class~="text-base"]) {
-    font-size: 0.9375rem;
-    line-height: 1.25rem;
-    font-weight: 600;
-    letter-spacing: -0.01em;
-  }
-
-  /* 系统设置 · 网关「Beta 策略」: the common model-pattern chips and the quick-preset button are capsules like the other
-     tags (upstream: 6px outlined rectangles) */
-  html.flat-theme form:has(> .settings-tabs-shell) button[class~="rounded"][class~="border"][class~="border-gray-200"][class~="px-2"][class~="py-0.5"][class~="text-xs"],
-  html.flat-theme form:has(> .settings-tabs-shell) button[class~="rounded-md"][class~="border"][class~="bg-primary-50"][class~="text-xs"] {
-    border-radius: var(--ui-radius-capsule);
-  }
-
-  /* 系统设置 · 支付「启用的服务商」 (toggle buttons: a bordered white box, a solid primary box when on): push-on / push-off
-     capsules — the glass capsule of secondary buttons when off, the glossy blue capsule of primary buttons when on. */
-  html.flat-theme form:has(> .settings-tabs-shell) button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="font-medium"][class~="transition-all"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme form:has(> .settings-tabs-shell) button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="font-medium"][class~="transition-all"][class~="border-gray-300"]:hover {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme form:has(> .settings-tabs-shell) button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-1.5"][class~="text-sm"][class~="font-medium"][class~="transition-all"][class~="bg-primary-500"] {
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: rgb(var(--ui-on-primary));
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  /* 添加 / 编辑服务商 (PaymentProviderDialog, only opened from 系统设置 · 支付): 「支付模式」 (二维码 / 弹窗, one of two) is
-     the segmented control of the other either/or pickers (recessed track, glossy thumb, ink label); 「支持的支付方式」
-     (several) are the push-on / push-off capsules of 「启用的服务商」. Upstream: bordered boxes, solid primary when on. */
-  html.flat-theme #provider-form div[class~="flex"][class~="gap-1.5"]:not([class~="flex-wrap"]):has(> button[class~="rounded-lg"][class~="px-2.5"][class~="py-1"][class~="transition-all"]) {
-    gap: 0.125rem;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme #provider-form div[class~="flex"][class~="gap-1.5"]:not([class~="flex-wrap"]) > button[class~="rounded-lg"][class~="px-2.5"][class~="py-1"][class~="transition-all"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    color: rgb(var(--ui-ink) / 0.8);
-    box-shadow: none;
-  }
-
-  html.flat-theme #provider-form div[class~="flex"][class~="gap-1.5"]:not([class~="flex-wrap"]) > button[class~="rounded-lg"][class~="px-2.5"][class~="py-1"][class~="transition-all"]:hover {
-    background-color: transparent;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme #provider-form div[class~="flex"][class~="gap-1.5"]:not([class~="flex-wrap"]) > button[class~="rounded-lg"][class~="px-2.5"][class~="py-1"][class~="transition-all"][class~="bg-primary-500"] {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  html.flat-theme #provider-form div[class~="flex-wrap"][class~="gap-1.5"] > button[class~="rounded-lg"][class~="px-2.5"][class~="py-1"][class~="transition-all"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  html.flat-theme #provider-form div[class~="flex-wrap"][class~="gap-1.5"] > button[class~="rounded-lg"][class~="px-2.5"][class~="py-1"][class~="transition-all"][class~="border-gray-300"]:hover {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill-hover);
-  }
-
-  html.flat-theme #provider-form div[class~="flex-wrap"][class~="gap-1.5"] > button[class~="rounded-lg"][class~="px-2.5"][class~="py-1"][class~="transition-all"][class~="bg-primary-500"] {
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: rgb(var(--ui-on-primary));
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  /* The 「选择订阅分组」 placeholders these pages put into a Select's selected slot (span.text-gray-400: 订阅管理 分配订阅,
-     兑换码 生成兑换码, 系统设置 默认订阅; the Select's own placeholder is ink): on the dark glass pop-up button #A8A8AD
-     reads 4.3:1, so there it is the ink at 66 % (>= 5:1); light keeps the grey (>= 4.7:1). */
-  html.flat-theme.dark .select-trigger .select-value > span[class~="text-gray-400"] {
-    color: rgb(var(--ui-ink) / 0.66);
-  }
-
-  /* 系统设置: the red 「删除」 labels on secondary buttons (btn-secondary text-red-600 dark:text-red-400: 默认订阅, Codex 引擎
-     指纹信号, …) take the destructive label colour of the glass capsules in dark (#FF6051 on the dark glass was 4.0:1). */
-  html.flat-theme.dark form:has(> .settings-tabs-shell) .btn-secondary[class~="text-red-600"] {
-    color: rgb(var(--ui-danger-label));
-  }
-
-  /* end sweep:C */
-
-  /* sweep:D (user-side pages, public pages, mobile) */
-
-  /* ---- 用户仪表盘 (page hook: the quick actions, button.group.rounded-xl.bg-gray-50.p-4, exist only there) ---- */
-
-  /* 今日消费: the 26px figure no longer fits 「$45.1844 / $45.1844」 on one line in the 4-column row; the standard
-     price (and the 总计 line's) wraps as one piece, so its slash leads the second line instead of dangling */
-  html.flat-theme main:has(button[class~="group"][class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"]) [class~="grid"] > [class~="card"][class~="p-4"] :is(p[class~="text-xl"] > span[class~="text-sm"], p[class~="text-xs"] > span[class~="text-gray-400"]) {
-    display: inline-block;
-  }
-
-  /* quick actions and recent-usage rows: the grouped row of the admin quick actions (concentric 14px inside the
-     20px card, a sunk fill with a hairline, a neutral hover) */
-  html.flat-theme button[class~="group"][class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"],
-  html.flat-theme div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"][class~="transition-colors"][class~="justify-between"] {
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  html.flat-theme button[class~="group"][class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"]:hover,
-  html.flat-theme div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"][class~="transition-colors"][class~="justify-between"]:hover {
-    background-color: rgb(var(--ui-hover));
-  }
-
-  /* their hue-100 tiles take the tile material of the KPI / quick-action tiles (hairline and top gloss) */
-  html.flat-theme button[class~="group"][class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] > div[class~="rounded-xl"]:first-child,
-  html.flat-theme div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"][class~="transition-colors"][class~="justify-between"] > div > div[class~="rounded-xl"]:first-child {
-    background-image: var(--ui-tile-gloss);
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  /* 按平台拆分: the per-platform tiles are grouped rows too (upstream: 1px bordered 8px boxes inside the 20px card);
-     the dashed 「其他」 tile keeps its dashed edge */
-  html.flat-theme [data-testid="platform-card"] {
-    border-radius: var(--ui-radius-inner);
-  }
-
-  html.flat-theme [data-testid="platform-card"]:not([class~="border-dashed"]) {
-    border-color: transparent;
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline);
-  }
-
-  html.flat-theme.dark [data-testid="platform-card"]:not([class~="border-dashed"]) {
-    background-color: rgb(var(--ui-raised));
-  }
-
-  /* ---- 使用记录: the 用量明细 / 错误请求 switch is a segmented control (upstream draws the active tab as a raised
-     thumb with no track, over a divider line) ---- */
-  html.flat-theme main div[class~="flex"][class~="gap-2"][class~="border-b"]:has(> button[class~="tab"]) {
-    width: fit-content;
-    max-width: 100%;
-    gap: 0.125rem;
-    border-bottom-width: 0;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    padding: 0.125rem;
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  /* ---- 兑换码 (page root: main > div.max-w-2xl.space-y-6) ---- */
-
-  /* 最近活动 rows: the grouped row (14px, sunk fill, hairline); dark: raised, they vanished into the card */
-  html.flat-theme main > div[class~="max-w-2xl"][class~="space-y-6"] div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] {
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  html.flat-theme main > div[class~="max-w-2xl"][class~="space-y-6"] div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] > div > div[class~="rounded-xl"]:first-child {
-    background-image: var(--ui-tile-gloss);
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  /* the balance banner (upstream's primary banner, restored in round 2 as Apple blue): the button's vertical gradient
-     looks flat across a 650 x 230 slab, so it gets the lit depth of an Apple Cash card — a faint white light from the
-     top left, a slightly deeper bottom right, a diagonal fill (white text >= 5.3:1 where the text sits) and a thin
-     inner rim (no coloured glow); the figure is semibold with tight tracking and tabular digits */
-  html.flat-theme main > div[class~="max-w-2xl"][class~="space-y-6"] [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] {
-    background-color: rgb(var(--ui-primary));
-    background-image: radial-gradient(120% 150% at 0% 0%, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 52%),
-      radial-gradient(90% 130% at 100% 100%, rgb(0 30 90 / 0.26), rgb(0 30 90 / 0) 62%),
-      linear-gradient(162deg, #0a74e2 0%, #0067d6 50%, #0059c4 100%);
-    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 0 0 0.5px rgb(255 255 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.14);
-  }
-
-  html.flat-theme main > div[class~="max-w-2xl"][class~="space-y-6"] [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] > p[class~="text-4xl"] {
-    font-weight: 600;
-    letter-spacing: -0.025em;
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* ---- API 密钥 ---- */
-
-  /* 使用密钥 dialog: the client and shell tabs (upstream: underlined in the primary colour) become the capsules of
-     the classification bar: the current tab tinted Apple blue with its label and glyph in the accessible blue, no
-     underline, no rule beneath (the aria-labels are only used there) */
-  html.flat-theme .modal-content div[class~="overflow-x-auto"][class~="border-b"]:has(> nav:is([aria-label="Client"], [aria-label="Tabs"])) {
-    border-bottom-width: 0;
-  }
-
-  html.flat-theme .modal-content nav:is([aria-label="Client"], [aria-label="Tabs"])[class~="-mb-px"] {
-    margin-bottom: 0;
-    gap: 0.25rem;
-  }
-
-  html.flat-theme .modal-content nav:is([aria-label="Client"], [aria-label="Tabs"])[class~="-mb-px"] > button {
-    min-height: 1.75rem;
-    border-bottom-width: 0;
-    border-radius: var(--ui-radius-capsule);
-    padding: 0.25rem 0.75rem;
-    color: rgb(var(--ui-ink) / 0.82);
-    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
-  }
-
-  html.flat-theme .modal-content nav:is([aria-label="Client"], [aria-label="Tabs"])[class~="-mb-px"] > button:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme .modal-content nav:is([aria-label="Client"], [aria-label="Tabs"])[class~="-mb-px"] > button[class~="border-primary-500"],
-  html.flat-theme .modal-content nav:is([aria-label="Client"], [aria-label="Tabs"])[class~="-mb-px"] > button[class~="border-primary-500"]:hover {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  /* ---- 个人资料 (page root: [data-testid="profile-shell"]) ---- */
-
-  /* the white cards of the page: no 1px border and no 90 % see-through fill (the plain card recipe; the tinted
-     contact card keeps its tint) */
-  html.flat-theme [data-testid="profile-shell"] .card[class~="bg-white/90"] {
-    border-color: transparent;
-    background-color: rgb(var(--ui-surface));
-  }
-
-  /* inner boxes (hero figures, avatar / edit panes, account notes, sign-in method rows): grouped rows, concentric
-     14px (upstream 16-24px boxes with borders and small shadows inside the 20px card) */
-  html.flat-theme [data-testid^="profile-overview-metric"],
-  html.flat-theme [data-testid="profile-shell"] div:is([class~="rounded-3xl"], [class~="rounded-2xl"])[class~="border"][class~="border-gray-100"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-inner);
-    background-color: rgb(var(--ui-sunk));
-    box-shadow: inset 0 0 0 0.5px var(--ui-hairline-soft);
-  }
-
-  html.flat-theme.dark [data-testid^="profile-overview-metric"],
-  html.flat-theme.dark [data-testid="profile-shell"] div:is([class~="rounded-3xl"], [class~="rounded-2xl"])[class~="border"][class~="border-gray-100"] {
-    background-color: rgb(var(--ui-raised));
-  }
-
-  /* the avatars (overview card, 资料头像 preview): upstream's primary gradient rendered as a flat blue square; the
-     glossy blue of the header avatar and the primary buttons (the white initial >= 4.6:1) */
-  html.flat-theme [data-testid="profile-shell"] div[class~="bg-gradient-to-br"][class~="from-primary-500"][class~="text-white"] {
-    background-image: var(--ui-primary-fill);
-    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), inset 0 0 0 0.5px rgb(0 40 90 / 0.25), 0 1px 2px 0 rgb(0 0 0 / 0.1),
-      0 6px 16px -6px rgb(0 0 0 / 0.22);
-  }
-
-  /* ---- sign-in and the other auth pages (AuthLayout) ---- */
-
-  /* the links and the copyright under the card sit in the card's soft shadow: a deeper blue and grey keep them
-     >= 4.5:1 there (#0066CC read 4.38:1, the copyright 4.50:1) */
-  html.flat-theme:not(.dark) div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > div[class~="mt-6"] a {
-    color: rgb(var(--theme-text-primary-700));
-  }
-
-  html.flat-theme:not(.dark) div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > div[class~="mt-6"] a:hover {
-    color: rgb(var(--theme-text-primary-800));
-  }
-
-  html.flat-theme:not(.dark) div[class~="min-h-screen"][class~="justify-center"][class~="overflow-hidden"] > div[class~="z-10"] > div[class~="mt-8"] {
-    color: rgb(var(--theme-text-gray-600));
-  }
-
-  /* ---- public pages outside the console (首页, Key 用量查询, 法律文档, 404): the console's tonal backdrop instead of a
-     flat grey ---- */
-  html.flat-theme div[class~="public-texture"][class~="min-h-screen"],
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"],
-  html.flat-theme #app > div[class~="min-h-screen"][class~="bg-gray-50"]:has(> header > div > a[href="/login"]),
-  html.flat-theme div[class~="min-h-screen"][class~="overflow-hidden"][class~="bg-gray-50"]:has(> div > div > div > span[class~="text-[12rem]"]) {
-    background-color: rgb(var(--ui-canvas));
-    background-image: var(--ui-backdrop);
-  }
-
-  /* ---- Key 用量查询 ---- */
-
-  /* the key field: a recessed well; focus = the blue edge and halo (its scoped style drew upstream teal #14b8a6 and
-     a green #168a49 outline) */
-  html.flat-theme input.input-ring {
-    border-color: var(--ui-field-line);
-    background-color: var(--ui-field-bg);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-field-shadow);
-  }
-
-  html.flat-theme input.input-ring:focus {
-    border-color: rgb(var(--ui-primary));
-    outline: 2px solid transparent;
-    outline-offset: 1px;
-    box-shadow: var(--ui-field-shadow), var(--ui-focus-ring);
-  }
-
-  html.flat-theme.dark input.input-ring:focus {
-    border-color: rgb(var(--ui-line-focus));
-  }
-
-  /* 查询: the glossy blue capsule of the primary buttons (upstream: a flat primary 12px block) */
-  html.flat-theme button[class~="h-12"][class~="px-7"][class~="rounded-xl"][class~="bg-primary-500"] {
-    border-radius: var(--ui-radius-capsule);
-    background-color: rgb(var(--ui-primary));
-    background-image: var(--ui-primary-fill);
-    color: rgb(var(--ui-on-primary));
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme button[class~="h-12"][class~="px-7"][class~="rounded-xl"][class~="bg-primary-500"]:hover:not(:disabled) {
-    background-image: var(--ui-primary-fill-hover);
-  }
-
-  html.flat-theme button[class~="h-12"][class~="px-7"][class~="rounded-xl"][class~="bg-primary-500"]:active:not(:disabled) {
-    background-image: var(--ui-primary-fill-press);
-    box-shadow: var(--ui-primary-shadow-press);
-  }
-
-  /* results: white 20px cards (upstream: bordered 90 % see-through boxes) */
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main div[class~="rounded-2xl"][class~="border"][class~="border-gray-200"] {
-    border-color: transparent;
-    background-color: rgb(var(--ui-surface));
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main div[class~="rounded-2xl"][class~="border"][class~="border-gray-200"] :is(div, tr)[class~="border-b"],
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main div[class~="rounded-2xl"][class~="border"][class~="border-gray-200"] [class~="divide-y"] > * {
-    border-color: var(--ui-hairline-soft);
-  }
-
-  /* the status line above them: a glass capsule */
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main div[class~="inline-flex"][class~="rounded-full"][class~="border"][class~="px-5"][class~="py-2.5"] {
-    border-color: transparent;
-    background-color: transparent;
-    background-image: var(--ui-control-fill);
-    box-shadow: var(--ui-control-shadow);
-  }
-
-  /* 统计范围 chips: the filter capsules of the classification bar (the current one tinted blue; upstream a flat
-     solid primary block) */
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main button[class~="text-xs"][class~="px-3"][class~="py-1.5"][class~="rounded-lg"][class~="border"] {
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: transparent;
-    color: rgb(var(--ui-ink) / 0.82);
-  }
-
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main button[class~="text-xs"][class~="px-3"][class~="py-1.5"][class~="rounded-lg"][class~="border"]:hover {
-    background-color: var(--ui-nav-hover);
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main button[class~="text-xs"][class~="px-3"][class~="py-1.5"][class~="rounded-lg"][class~="border"][class~="bg-primary-500"] {
-    background-color: var(--ui-nav-current);
-    color: rgb(var(--ui-nav-current-ink));
-    font-weight: 600;
-  }
-
-  /* (light: on the backdrop the 10 % tint is darker than on glass, so the label takes the deeper blue, >= 5:1) */
-  html.flat-theme:not(.dark) div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main button[class~="text-xs"][class~="px-3"][class~="py-1.5"][class~="rounded-lg"][class~="border"][class~="bg-primary-500"] {
-    color: rgb(var(--theme-text-primary-700));
-  }
-
-  /* 应用 (custom range): the glossy blue capsule */
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main button[class~="text-xs"][class~="px-3"][class~="py-1.5"][class~="rounded-lg"][class~="bg-primary-500"]:not([class~="border"]) {
-    border-radius: var(--ui-radius-capsule);
-    background-image: var(--ui-primary-fill);
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  /* 按日明细 days: a segmented control (recessed track, glossy thumb, ink label) */
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main div[class~="inline-flex"][class~="rounded-lg"][class~="border"][class~="p-0.5"]:has(> button) {
-    gap: 0.125rem;
-    border-color: transparent;
-    border-radius: var(--ui-radius-capsule);
-    background-color: var(--ui-track);
-    box-shadow: var(--ui-track-shadow);
-  }
-
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main div[class~="inline-flex"][class~="rounded-lg"][class~="border"][class~="p-0.5"] > button {
-    border-radius: var(--ui-radius-capsule);
-    color: rgb(var(--ui-ink) / 0.8);
-  }
-
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main div[class~="inline-flex"][class~="rounded-lg"][class~="border"][class~="p-0.5"] > button:hover {
-    background-color: transparent;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main div[class~="inline-flex"][class~="rounded-lg"][class~="border"][class~="p-0.5"] > button[class~="bg-primary-500"] {
-    background-color: transparent;
-    background-image: var(--ui-thumb);
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-thumb-shadow);
-  }
-
-  /* rings: the ring colours and the amounts inside them come from the theme tokens in KeyUsageView itself; the
-     track (a warm #F0F0EE / #222222 literal) is the recessed track colour */
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main circle:is([stroke="#F0F0EE" i], [stroke="#222222"]) {
-    stroke: var(--ui-track);
-  }
-
-  /* a balance too long for the 176px ring wraps inside it on two balanced lines instead of running over the stroke */
-  html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main svg[class~="w-44"] + div > span[class~="text-2xl"] {
-    max-width: 8.5rem;
-    word-break: break-all;
-    text-wrap: balance;
-    text-align: center;
-    line-height: 1.2;
-  }
-
-  /* ---- 首页 ---- */
-
-  /* the first feature tile drew a white glyph on its white tile (invisible, theme on or off): the blue of the other two */
-  html.flat-theme div[class~="public-texture"] div[class~="h-12"][class~="w-12"][class~="bg-surface"][class~="border-line"] > svg[class~="text-white"] {
-    color: rgb(var(--ui-primary-ink));
-  }
-
-  /* feature cards: the white 20px card (upstream: a 60 % see-through box with a border and a coloured hover glow) */
-  html.flat-theme div[class~="public-texture"] div[class~="group"][class~="rounded-2xl"][class~="bg-white/60"][class~="p-6"] {
-    border-color: transparent;
-    background-color: rgb(var(--ui-surface));
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-    box-shadow: var(--ui-shadow-card);
-  }
-
-  html.flat-theme div[class~="public-texture"] div[class~="group"][class~="rounded-2xl"][class~="bg-white/60"][class~="p-6"]:hover {
-    box-shadow: var(--ui-shadow-hover);
-  }
-
-  /* provider letter tiles: the 600 shade of each hue so the white letter reads >= 4.5:1 (the 400-500 fills read
-     1.8-4.0:1); the gradient (rendered as its start colour) gives way to the solid fill */
-  html.flat-theme div[class~="public-texture"] div[class~="h-8"][class~="w-8"][class~="rounded-lg"]:is([class~="from-orange-400"], [class~="from-green-500"], [class~="from-blue-500"], [class~="from-rose-500"], [class~="bg-gray-500"]) {
-    background-image: none;
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  html.flat-theme div[class~="public-texture"] div[class~="h-8"][class~="w-8"][class~="rounded-lg"][class~="from-orange-400"] {
-    background-color: rgb(var(--theme-color-warning-600));
-  }
-
-  html.flat-theme div[class~="public-texture"] div[class~="h-8"][class~="w-8"][class~="rounded-lg"][class~="from-green-500"] {
-    background-color: rgb(var(--theme-color-success-600));
-  }
-
-  html.flat-theme div[class~="public-texture"] div[class~="h-8"][class~="w-8"][class~="rounded-lg"][class~="from-blue-500"] {
-    background-color: rgb(var(--theme-color-info-600));
-  }
-
-  html.flat-theme div[class~="public-texture"] div[class~="h-8"][class~="w-8"][class~="rounded-lg"][class~="from-rose-500"] {
-    background-color: rgb(var(--theme-color-danger-600));
-  }
-
-  html.flat-theme div[class~="public-texture"] div[class~="h-8"][class~="w-8"][class~="rounded-lg"][class~="bg-gray-500"] {
-    background-color: rgb(var(--theme-color-gray-600));
-  }
-
-  /* signed in, the 「控制台」 pill is dark in both modes: its arrow glyph (gray-400, darkened for light surfaces by the
-     theme) read about 2.9:1 on the black pill in light mode; the pill's own light secondary colour */
-  html.flat-theme div[class~="public-texture"] a[class~="rounded-full"][class~="bg-gray-900"] > svg[class~="text-gray-400"] {
-    color: rgb(255 255 255 / 0.62);
-  }
-
-  /* 「更多 · 即将推出」 was dimmed with opacity 60 % (text 2.4-3.4:1): full opacity, the muted text says it instead */
-  html.flat-theme div[class~="public-texture"] div[class~="rounded-xl"][class~="bg-white/40"][class~="opacity-60"] {
-    opacity: 1;
-  }
-
-  html.flat-theme div[class~="public-texture"] div[class~="rounded-xl"][class~="bg-white/40"][class~="opacity-60"] > span[class~="text-sm"] {
-    color: rgb(var(--ui-muted));
-  }
-
-  /* ---- 404 ---- */
-
-  /* the decorative blurred blue orbs (the other public layouts mark theirs ui-decor, which the theme hides) */
-  html.flat-theme div[class~="min-h-screen"][class~="overflow-hidden"][class~="bg-gray-50"] > div[class~="pointer-events-none"][class~="absolute"][class~="inset-0"]:has(> div[class~="blur-3xl"]) {
-    display: none;
-  }
-
-  /* the big 「404」 behind the tile stays a faint watermark on the tonal backdrop (gray-100 matched its tone) */
-  html.flat-theme:not(.dark) span[class~="text-[12rem]"][class~="text-gray-100"] {
-    color: rgb(var(--ui-ink) / 0.06);
-  }
-
-  /* the warning tile: the glossy blue of the primary buttons (upstream's primary gradient with a coloured glow) */
-  html.flat-theme div[class~="h-24"][class~="w-24"][class~="rounded-2xl"][class~="from-primary-500"] {
-    background-image: var(--ui-primary-fill);
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  /* ---- 法律文档 ---- */
-
-  /* 登录: the glossy blue capsule (upstream: a flat 8px primary block) */
-  html.flat-theme #app > div[class~="min-h-screen"][class~="bg-gray-50"] > header a[href="/login"][class~="rounded-lg"][class~="bg-primary-600"] {
-    border-radius: var(--ui-radius-capsule);
-    background-image: var(--ui-primary-fill);
-    box-shadow: var(--ui-primary-shadow);
-  }
-
-  html.flat-theme #app > div[class~="min-h-screen"][class~="bg-gray-50"] > header a[href="/login"][class~="rounded-lg"][class~="bg-primary-600"]:hover {
-    background-image: var(--ui-primary-fill-hover);
-  }
-
-  /* the document glyph tile: 12px with the tile material (upstream 6px) */
-  html.flat-theme main article span[class~="h-12"][class~="w-12"][class~="rounded-md"][class~="bg-primary-50"] {
-    border-radius: 0.75rem;
-    background-image: var(--ui-tile-gloss);
-    box-shadow: var(--ui-tile-shadow);
-  }
-
-  /* end sweep:D */
-
-  /* Reduce motion: no hover lift or press scale (styles/theme.css already stops the transitions). */
-  @media (prefers-reduced-motion: reduce) {
-    html.flat-theme .btn:active:not(:disabled),
-    html.flat-theme .card-hover:hover {
-      transform: none;
-    }
-  }
-}
-
-@layer utilities {
-  :where(.flat-theme) .glass {
-    background-color: rgb(var(--ui-surface));
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
-  }
-
-  /* monospace identifiers and tabular numerals */
-  .ui-mono {
-    font-family: var(--ui-font-mono);
-    font-variant-numeric: tabular-nums;
-  }
-
-  .ui-num {
-    font-variant-numeric: tabular-nums;
-  }
 }
diff --git a/frontend/src/styles/console/behaviour.css b/frontend/src/styles/console/behaviour.css
new file mode 100644
index 000000000000..23740adf1bb2
--- /dev/null
+++ b/frontend/src/styles/console/behaviour.css
@@ -0,0 +1,428 @@
+/* Console theme · behaviour layer (owner: the base agent; frozen after wave 0, changes go through the coordinator).
+ *
+ * Functional fixes that hold whatever the console looks like: nothing is truncated or clipped (values wrap or
+ * the table scrolls), tips and popovers open where they can be read, controls and placeholders stay
+ * identifiable, figures never spill. Each rule names its fix (B1-B6 as in ui-el MAPPING §1.6).
+ *
+ * Rules for this file:
+ * - every selector starts with html.flat-theme (theme off = upstream); specificity >= 0,2,1 so it beats page
+ *   utilities, the lazily loaded scoped styles and upstream's dark: variants (B3.1 is the one exception);
+ * - layout, overflow, position and visibility properties only; a colour only as a role token
+ *   (rgb(var(--ui-*))) where the fix is legibility itself; no radii, shadows or fonts: the look of anything
+ *   touched here belongs to the other console files, which load after this one.
+ *
+ * Hooks used (all existing, none added): data-table on DataTable's root (.table-wrapper: accounts, groups,
+ * proxies, users, keys, usage), data-column on its th / td, data-index on its rows, .table-body,
+ * .table-page-layout, .modal-body, .compact-select, .usage-filter-dropdown, .action-menu-content,
+ * .theme-tour-popover, .terminal-window, #channel-monitor-form and the data-test / data-testid attributes named
+ * below; everything else is upstream's own class names. */
+
+/* ================================================================== B1 · wrap or scroll, never cut */
+
+/* B1.1 Distribution tables (model / group / endpoint distribution, the user dashboard: a max-h-48 box beside
+   the doughnut). Header labels stay on one line; when the columns do not fit, the box scrolls sideways and
+   shows its scrollbar (upstream hides scrollbars until hover, so the table looked clipped). The name column
+   keeps room for a whole short name and wraps long ones instead of shrinking to a letter per line. */
+html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"] > table > thead th {
+  white-space: nowrap;
+}
+
+html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"]:has(> table) {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(var(--ui-line-focus)) transparent;
+}
+
+html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"]:has(> table)::-webkit-scrollbar-thumb {
+  background-color: rgb(var(--ui-line-focus));
+}
+
+html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"] > table > tbody > tr > td:first-child:not([colspan]) {
+  min-width: 8rem;
+}
+
+/* B1.2 Chart card titles beside a segmented picker never break (「模型分 / 布」 on phones): the picker group
+   wraps instead. */
+html.flat-theme [class~="card"] > div[class~="mb-4"][class~="justify-between"]:has(> div [class~="rounded-lg"]:is([class~="bg-gray-50"], [class~="bg-gray-100"]):is([class~="p-0.5"], [class~="p-1"])) > h3 {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* B1.3 Chart rows holding a distribution card: from 1024 to 1535px each card takes the full width, so the
+   ring, every column and the full names fit; from 1536px they sit side by side again. */
+@media (min-width: 1024px) and (max-width: 1535.98px) {
+  html.flat-theme [class~="grid"][class~="gap-6"][class~="lg:grid-cols-2"]:has(> [class~="card"]:first-child [class~="max-h-48"][class~="overflow-auto"] > table) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+/* B1.4 Timestamps on two lines (date / time; approved round 4): the cell text becomes a block as wide as its
+   longer part, so it breaks at the space and never inside the date or the time. Only in the tables chosen;
+   cells are found by data-column, so hiding columns does not switch it off. 账号管理「最近使用」 is relative
+   (「2天前」) and stays one line. */
+html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="usage"], [data-table="accounts"]) td[data-column="created_at"] > span,
+html.flat-theme .table-wrapper[data-table="users"] td:is([data-column="created_at"], [data-column="last_used_at"], [data-column="last_active_at"]) > span,
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="expiry"] > div > span:first-child {
+  display: inline-block;
+  width: min-content;
+  white-space: normal;
+}
+
+/* B1.5 账号管理「过期时间」 (「2026-10-25 08:00」): a line may break after a hyphen, so min-content would split the
+   date; a width that holds the date keeps it whole and moves the time to line two. */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="expires_at"] > div > span:first-child {
+  display: inline-block;
+  max-width: 10ch;
+  white-space: normal;
+}
+
+/* B1.6 IP管理 names break only at a space or a hyphen (「美国原生- / 超高质量」) and stay whole without one; the
+   location breaks only at the spaces around 「·」 (approved round 4). keep-all keeps Chinese words together;
+   min-content lets a longer part widen the column instead of running into the next one. */
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="name"] > span {
+  display: inline-block;
+  min-width: min-content;
+  max-width: 7.5em;
+  white-space: normal;
+  word-break: keep-all;
+}
+
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="location"] span[class~="text-sm"] {
+  min-width: min-content;
+  max-width: 5em;
+  white-space: normal;
+  word-break: keep-all;
+}
+
+/* B1.7 API 密钥 group cell: the badge always on line one and 「选择分组 ⌄」 on line two (approved round 4), so the
+   parts never split unpredictably and the column is as wide as the wider line. */
+html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button {
+  display: grid;
+  grid-template-columns: max-content max-content;
+  justify-content: start;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button > :first-child {
+  grid-column: 1 / -1;
+  justify-self: start;
+}
+
+/* B1.8 用户管理: 「充值」 under the amount (approved round 4); the button's own inset is pulled back so its label
+   lines up with the amount. */
+html.flat-theme .table-wrapper[data-table="users"] td[data-column="balance"] > div {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+html.flat-theme .table-wrapper[data-table="users"] td[data-column="balance"] > div > button {
+  margin-left: -0.5rem;
+}
+
+/* B1.9 用户管理 time headers wrap after four characters (「最后活跃 / 时间」; English at the space), so the columns
+   are only as wide as the two-line timestamps below them (approved round 5). */
+html.flat-theme .table-wrapper[data-table="users"] th:is([data-column="last_active_at"], [data-column="last_used_at"], [data-column="created_at"]) > div > span:first-child {
+  max-width: 4.5em;
+}
+
+/* B1.10 IP管理: the copy button under the address and the show-password button under the credentials, so both
+   columns are as wide as their text (approved round 5). */
+html.flat-theme .table-wrapper[data-table="proxies"] td:is([data-column="address"], [data-column="auth"]) > div {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.125rem;
+}
+
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="auth"] > div > button {
+  margin-left: 0;
+}
+
+/* B1.11 Group pickers (GroupSelector rows: account forms, announcement targeting, key dialogs): the group badge
+   keeps its own width instead of stretching into a bar, the account count sits at the right edge. */
+html.flat-theme label[class~="cursor-pointer"]:has(> input[type="checkbox"]) > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] {
+  flex: 0 1 auto;
+}
+
+html.flat-theme label[class~="cursor-pointer"]:has(> input[type="checkbox"]) > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] + span[class~="shrink-0"] {
+  margin-left: auto;
+}
+
+/* B1.12 Values upstream cuts with an ellipsis (the full text only in a hover title) wrap inside their column:
+   - 使用记录: request ID, upstream request ID, User-Agent;
+   - 运维监控: system-log host; concurrency rows' user name and e-mail; request details and error lists (model,
+     request ID, message, User-Agent); alert titles; background job names;
+   - 使用记录 filter results and 用户排行 e-mails; 操作日志 operator, action, method + path; 邀请返利 e-mails,
+     user names and order numbers. */
+html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="request_id"], [data-column="upstream_request_id"]) span[class~="truncate"],
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="user_agent"] > span[class~="truncate"],
+html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) section[class~="rounded-2xl"] td > span[class~="block"][class~="truncate"],
+html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]),
+html.flat-theme td[class~="max-w-[240px]"][class~="truncate"][class~="px-4"][class~="py-3"],
+html.flat-theme span[class~="max-w-[220px]"][class~="truncate"][class~="font-mono"][class~="text-[11px]"],
+html.flat-theme span[class~="min-w-0"][class~="flex-1"][class~="truncate"][class~="font-mono"][class~="text-[11px]"],
+html.flat-theme :is(.modal-body:has(.compact-select), [class~="card"]:has(> div > button[data-testid="usage-detail-tab"])) .table-wrapper:not([data-table="usage"]) td:is([data-column="message"], [data-column="user_agent"]) > span[class~="block"][class~="truncate"],
+html.flat-theme div[class~="truncate"][class~="max-w-[360px]"][class~="font-semibold"],
+html.flat-theme .modal-body div[class~="rounded-xl"][class~="p-4"] > div > div[class~="truncate"][class~="text-sm"][class~="font-semibold"],
+html.flat-theme .usage-filter-dropdown > div[class~="absolute"] > button > span[class~="truncate"],
+html.flat-theme td[class~="max-w-[260px]"][class~="truncate"][class~="font-medium"],
+html.flat-theme td[data-column="actor"] > div[class~="min-w-0"][class~="max-w-[220px]"] > div[class~="truncate"],
+html.flat-theme td[data-column="action"] > div[class~="min-w-0"][class~="max-w-xs"] > div[class~="truncate"],
+html.flat-theme .table-wrapper :is(div, button)[class~="max-w-56"][class~="truncate"] {
+  overflow: visible;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+/* (运维监控 concurrency rows: the name and the e-mail may shrink and wrap as a pair; the request ID may use
+   the wide sheet's free width and stays on one line where it fits) */
+html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="min-w-0"][class~="flex-1"][class~="items-center"][class~="gap-1.5"]:has(> span[class~="truncate"][class~="text-[11px]"]) {
+  flex-wrap: wrap;
+  row-gap: 0;
+}
+
+html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]) {
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+html.flat-theme span[class~="max-w-[220px]"][class~="truncate"][class~="font-mono"][class~="text-[11px]"] {
+  max-width: none;
+}
+
+/* B1.13 兑换码「生成兑换码」: each 「兑换码过期」 choice stays on one line (「永不过期」 broke inside its column). */
+html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"] {
+  white-space: nowrap;
+}
+
+/* ================================================================== B2 · tips and popovers where they can be read */
+
+/* B2.1 Icon-only row actions (IP管理, API 密钥, 分组管理; approved round 4), only with a mouse or trackpad: touch
+   keeps the visible labels. The label stays in the button for screen readers and shows as a tip on hover and
+   keyboard focus, left of the button and centred on it, so the sticky header (z-index 200) never covers it;
+   the hovered cell rises above the other rows' sticky action cells. The tip's look (edge, radius, shadow) is
+   overlays.css'; surface and ink here only keep it legible. */
+html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"]:is(:hover, :focus-within) {
+  z-index: 30;
+}
+
+html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"] {
+  position: relative;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"] > span[class~="text-xs"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
+    top: 50%;
+    right: calc(100% + 0.375rem);
+    z-index: 1;
+    width: auto;
+    height: auto;
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    overflow: visible;
+    clip: auto;
+    transform: translateY(-50%);
+    pointer-events: none;
+    background-color: rgb(var(--ui-surface));
+    color: rgb(var(--ui-ink));
+  }
+}
+
+/* B2.2 A tip that opens upwards from a cell of the first two rows would run under the sticky header, which
+   stacks above the whole body: those tips open downwards, and the arrow that pointed down to the cell is
+   hidden. */
+html.flat-theme .table-wrapper .table-body > tr:is([data-index="0"], [data-index="1"]) :is(div, span)[class~="absolute"][class~="bottom-full"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"] {
+  top: 100%;
+  bottom: auto;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+
+html.flat-theme .table-wrapper .table-body > tr:is([data-index="0"], [data-index="1"]) :is(div, span)[class~="absolute"][class~="bottom-full"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"] > [class~="absolute"][class~="top-full"] {
+  display: none;
+}
+
+/* B2.3 用户管理「余额」: in the first row the 「点击查看充值记录」 hint opens to the right of the amount (without its
+   arrow), clear of the header and of 「充值」 below; in the second row the two-line rows leave room above, so it
+   keeps opening upwards (both more specific than B2.2). */
+html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="0"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"][class~="text-white"] {
+  top: 50%;
+  bottom: auto;
+  left: calc(100% + 0.375rem);
+  margin-top: 0;
+  margin-bottom: 0;
+  --tw-translate-x: 0px;
+  --tw-translate-y: -50%;
+}
+
+html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="0"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"][class~="text-white"] > div[class~="top-full"] {
+  display: none;
+}
+
+html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="1"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"][class~="text-white"] {
+  top: auto;
+  bottom: 100%;
+  margin-top: 0;
+  margin-bottom: 0.375rem;
+}
+
+/* B2.4 账号表「状态」 error tip: a long upstream error ran past the table's right edge and bottom and was cut. It
+   opens leftwards from the ? icon, over the usage column, and a long message scrolls inside 12rem, so the whole
+   text stays readable (the details drawer shows it too). Card and compact views keep upstream's placement. */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] div[class~="group/error"] > div[class~="absolute"][class~="top-full"] {
+  left: auto;
+  right: 0;
+  max-height: 12rem;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+/* ================================================================== B3 · identifiable controls, readable hints */
+
+/* B3.1 Placeholders of fields without the .input recipe fall back to Tailwind's gray-400 fill (2.5:1): they take
+   the readable faint text. The one deliberate exception to the specificity floor: it matches preflight's
+   `input::placeholder` (0,0,2) and wins by order, while the recipes' and pages' placeholder: utilities still
+   win over it. */
+:where(html.flat-theme) :is(input, textarea)::placeholder {
+  color: rgb(var(--ui-faint));
+  opacity: 1;
+}
+
+/* B3.2 A field that is empty with no visible placeholder (utils/flatTheme.ts gives unlabelled .input fields a
+   blank " " placeholder, so :placeholder-shown means empty), every native date / time field and every text area
+   without a visible placeholder: nothing inside the box says what it is, so its outline is the 3:1 form-control
+   line (WCAG 1.4.11). Focus, error and disabled states keep their own look. */
+html.flat-theme .input:is([placeholder=" "]:placeholder-shown, [placeholder=""]:placeholder-shown):not(select):not(textarea):not(:focus):not(:disabled):not(.input-error),
+html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"]):not(:focus):not(:disabled):not(.input-error),
+html.flat-theme textarea[class~="input"]:is(:not([placeholder]), [placeholder=""], [placeholder=" "]):not(:focus):not(:disabled):not(.input-error) {
+  border-color: rgb(var(--ui-control-line));
+}
+
+/* B3.3 Native date / time pickers open in the page's scheme (dark in dark mode), wherever the field sits. */
+html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"]) {
+  color-scheme: light;
+}
+
+html.flat-theme.dark input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"]) {
+  color-scheme: dark;
+}
+
+/* B3.4 Keyboard focus that scrolls into view is never hidden under the sticky header. */
+html.flat-theme {
+  scroll-padding-top: calc(var(--ui-header-h) + 0.5rem);
+}
+
+/* B3.5 Hints dimmed with opacity fall below 4.5:1: full opacity, the element's own text colour. RPM strategy
+   hints (account forms, opacity-70), the model cooldown countdown in 账号状态 (opacity-70), the check-mode and
+   API-mode hints of the channel-monitor forms (opacity-80), and the home page's 「更多 · 即将推出」 row
+   (opacity-60). */
+html.flat-theme button[class~="flex-1"][class~="py-2"][class~="transition-all"][class~="rounded-lg"][class~="text-sm"] [class~="opacity-70"],
+html.flat-theme [data-testid="model-status-trigger"] span[class~="opacity-70"],
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="text-left"] > span[class~="opacity-80"],
+html.flat-theme div[class~="rounded-xl"][class~="bg-white/40"][class~="opacity-60"] {
+  opacity: 1;
+}
+
+/* B3.6 Onboarding tour: the emphasis lines are inline #10b981 in the i18n HTML (2.5:1) and the close 「×」 is
+   #9ca3af text (2.5:1); both take readable role colours (driver.js styles need !important). */
+html.flat-theme .theme-tour-popover :is([style*="color: #10b981" i], [style*="color:#10b981" i]) {
+  color: rgb(var(--ui-success)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-close-btn {
+  color: rgb(var(--ui-muted)) !important;
+}
+
+/* B3.7 Reduced motion: no press scale on buttons and no hover lift on cards (styles/theme.css already stops the
+   transitions and animations). */
+@media (prefers-reduced-motion: reduce) {
+  html.flat-theme :is(.btn:active, .card-hover:hover) {
+    transform: none;
+  }
+}
+
+/* ================================================================== B4 · figures never spill */
+
+/* B4.1 KPI cards (upstream: .grid > .card.p-4 with a tile and a text column): the text column may shrink and a
+   figure too long for the card wraps inside it ($999,999,875,767.73) instead of painting under the next card. */
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) > :nth-child(2),
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) > :nth-child(2) {
+  min-width: 0;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] p[class~="text-xl"] {
+  overflow-wrap: anywhere;
+}
+
+/* B4.2 Phones: the tile sits above the text, so the figure and the line under it use the card's full width
+   (「524.27M」, 「802 启用 8 错误」 are never cut or broken). */
+@media (max-width: 639.98px) {
+  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child),
+  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+/* B4.3 用户仪表盘「今日消费」 and 「总计」: the standard price after the figure wraps as one piece, so its slash
+   leads the second line instead of dangling. */
+html.flat-theme main:has(button[class~="group"][class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"]) [class~="grid"] > [class~="card"][class~="p-4"] :is(p[class~="text-xl"] > span[class~="text-sm"], p[class~="text-xs"] > span[class~="text-gray-400"]) {
+  display: inline-block;
+}
+
+/* B4.4 Key 用量查询: a balance too long for the 176px ring wraps inside it on balanced lines instead of running
+   over the stroke. */
+html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main svg[class~="w-44"] + div > span[class~="text-2xl"] {
+  max-width: 8.5rem;
+  word-break: break-all;
+  text-wrap: balance;
+  text-align: center;
+}
+
+/* B4.5 首页: the terminal illustration (420px upstream) fits a phone instead of being cut at the right edge. */
+html.flat-theme .terminal-window {
+  width: min(420px, calc(100vw - 3rem));
+}
+
+/* ================================================================== B6 · other behaviour */
+
+/* B6.1 运维监控 metric tiles: the 「明细」 links never break into a vertical 「明 / 细」 (the tile label wraps
+   instead), and 「ms (P99)」 moves under a long figure as one unit. */
+html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) button[class~="text-[10px]"][class~="font-bold"][class~="text-blue-500"] {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="items-baseline"][class~="gap-2"]:has(> div[class~="text-3xl"]) {
+  flex-wrap: wrap;
+}
+
+html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="items-baseline"][class~="gap-2"]:has(> div[class~="text-3xl"]) > span {
+  white-space: nowrap;
+}
+
+/* B6.2 运维监控 请求错误 / 上游错误 lists (OpsErrorDetailsModal; .compact-select exists only there): the search
+   takes the spare eighth column, so 「搜索 request_id / client_request_id / message」 is read whole. */
+@media (min-width: 768px) {
+  html.flat-theme .modal-body div[class~="md:grid-cols-8"] > div[class~="col-span-2"][class~="compact-select"]:first-child {
+    grid-column: span 3 / span 3;
+  }
+}
+
+/* B6.3 账号行菜单: the two Codex route items have no glyph; their labels line up with the labels of the items
+   that have one (inset = item padding + glyph + gap; the menu recipe may set --ui-menu-text-inset). */
+html.flat-theme .action-menu-content fieldset button:is([data-test="codex-harvest"], [data-test="codex-stop"]) {
+  padding-left: var(--ui-menu-text-inset, 2.5rem);
+}
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
new file mode 100644
index 000000000000..f75e90f55de5
--- /dev/null
+++ b/frontend/src/styles/console/controls.css
@@ -0,0 +1 @@
+/* Console theme · controls built from utilities: filter pills, segmented controls, switch copies, option cards, native dates, Select / DatePicker scoped classes (owner: the controls agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here). */
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
new file mode 100644
index 000000000000..26937ad13a31
--- /dev/null
+++ b/frontend/src/styles/console/data.css
@@ -0,0 +1 @@
+/* Console theme · data: DataTable, TablePageLayout and plain tables, pagination, bulk bars, row actions, badges, platform marks, KPI, empty and loading states (owner: the data agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here). */
diff --git a/frontend/src/styles/console/overlays.css b/frontend/src/styles/console/overlays.css
new file mode 100644
index 000000000000..1a4d139c6c20
--- /dev/null
+++ b/frontend/src/styles/console/overlays.css
@@ -0,0 +1 @@
+/* Console theme · overlays: menus, tooltips, dialogs, drawers, toasts, driver.js, announcement markdown (owner: the overlays agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here). */
diff --git a/frontend/src/styles/console/pages/accounts.css b/frontend/src/styles/console/pages/accounts.css
new file mode 100644
index 000000000000..4165ada7dc70
--- /dev/null
+++ b/frontend/src/styles/console/pages/accounts.css
@@ -0,0 +1 @@
+/* Console theme · page group: accounts and their fork components (owner: the accounts page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
new file mode 100644
index 000000000000..4dc3c17f81c2
--- /dev/null
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -0,0 +1 @@
+/* Console theme · page group: dashboards and usage records (owner: the dashboard and usage page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
new file mode 100644
index 000000000000..b00e4444d99c
--- /dev/null
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -0,0 +1 @@
+/* Console theme · page group: settings, ops and the public pages (owner: the settings, ops and public page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
diff --git a/frontend/src/styles/console/pages/users-groups-proxies-keys.css b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
new file mode 100644
index 000000000000..d57d3c792f84
--- /dev/null
+++ b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
@@ -0,0 +1 @@
+/* Console theme · page group: users, groups, proxies and API keys (owner: the users, groups, proxies and keys page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
diff --git a/frontend/src/styles/console/shell.css b/frontend/src/styles/console/shell.css
new file mode 100644
index 000000000000..2c2e1cea4406
--- /dev/null
+++ b/frontend/src/styles/console/shell.css
@@ -0,0 +1 @@
+/* Console theme · app shell: sidebar, header, page header, mobile shell, auth layout, public pages (owner: the shell agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here). */
diff --git a/frontend/src/styles/console/tokens.css b/frontend/src/styles/console/tokens.css
new file mode 100644
index 000000000000..fe3c3ba6e7e0
--- /dev/null
+++ b/frontend/src/styles/console/tokens.css
@@ -0,0 +1,627 @@
+/* Console theme · tokens (owner: the base agent; other agents request changes through the coordinator).
+ *
+ * The console theme applies while <html> carries `flat-theme` (public setting flat_theme_enabled). Everything
+ * here is declared under :root.flat-theme, so with the class absent every variable is undefined and
+ * tailwind.config.js, styles/theme.css and the components fall back to their upstream values.
+ *
+ * Source: the Experiential Labs product console (platform.experientiallabs.ai), measured 2026-09-28
+ * (artifacts/tmp/ui-el/ref/console/REF-CONSOLE.md §3-§5, §11, §13; tokens.json). Where the reference falls below
+ * our floor (text >= 4.5:1 on every neutral fill it sits on, form-control boundaries >= 3:1), the value is the
+ * nearest one that meets it (REF-CONSOLE §13; ui-el/wave0/tokens_calc.py); each such token says so. Ramps are
+ * interpolated between the measured anchors (ui-el/wave0/ramps.py).
+ *
+ * Formats: colours consumed through rgb(var(--x) / <alpha>) are RGB channels ("r g b"); --ui-link is a colour;
+ * shadows, fonts, sizes and motion are full values. The reference draws dark lines, hovers and soft fills as
+ * white or colour at an alpha; here they are composited over the dark surface (#1a1a1a), where they are drawn. */
+
+/* ------------------------------------------------------------------ fonts */
+/* Geist 1.800 and Geist Mono 1.700 (npm `geist` 1.7.2, SIL OFL 1.1: assets/fonts/geist/OFL.txt), variable
+   weight 100-900, Latin subset; the reference serves the same outlines (REF-CONSOLE §4). Downloaded only while a
+   rule uses the family, i.e. while the theme is on. Chinese uses MiSans, loaded at runtime from Xiaomi's font
+   service by utils/flatTheme.ts. */
+@font-face {
+  font-family: 'Geist';
+  src: url('../../assets/fonts/geist/Geist-Variable.latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+    U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Geist Mono';
+  src: url('../../assets/fonts/geist/GeistMono-Variable.latin.woff2') format('woff2');
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+    U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* The reference's metric-matched stand-ins (the local Arial sized to Geist's metrics) cover the Latin text while
+   the files load, so nothing reflows when they arrive and the text never flashes in MiSans' own Latin glyphs.
+   Same range as the fonts: a glyph Geist does not have skips them. */
+@font-face {
+  font-family: 'Geist Fallback';
+  src: local('Arial');
+  ascent-override: 95.94%;
+  descent-override: 28.16%;
+  line-gap-override: 0%;
+  size-adjust: 104.76%;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+    U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Geist Mono Fallback';
+  src: local('Arial');
+  ascent-override: 74.67%;
+  descent-override: 21.92%;
+  line-gap-override: 0%;
+  size-adjust: 134.59%;
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
+    U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* ------------------------------------------------------------------ roles (light) */
+:root.flat-theme {
+  /* surfaces: canvas = page and sidebar (--background), surface = cards, tables, controls, menus, dialogs;
+     subtle = grouped fills and chips; sunk = wells; raised = popovers (the reference draws them on surface) */
+  --ui-canvas: 250 250 250;
+  --ui-surface: 255 255 255;
+  --ui-subtle: 245 245 245;
+  --ui-sunk: 247 247 247;
+  --ui-raised: 255 255 255;
+  --ui-hover: 239 239 239;
+  --ui-active: 241 241 241;
+  /* Two line tiers. --ui-line: every structural line (card edges, row separators, the sidebar edge, toolbar
+     rules). --ui-line-strong: the reference's control outline (buttons, filter pills, tooltips), which a label
+     identifies anyway. --ui-control-line: the outline of form controls (inputs, selects, date fields,
+     checkboxes); the reference's #e0e0e0 is 1.32:1, #8e8e8e is the nearest grey at >= 3:1 on the surface, the
+     canvas and the grouped fill (REF-CONSOLE §13 gives #949494 for white, #919191 for the canvas).
+     --ui-line-focus: the reference's hover / focus outline of native selects. */
+  --ui-line: 237 237 237;
+  --ui-line-strong: 224 224 224;
+  --ui-line-focus: 189 189 189;
+  --ui-control-line: 142 142 142;
+  /* Text. ink-soft = ink at 66 % (values, filter pills, tooltip descriptions), composited over white.
+     muted (#737373) and muted-2 (#a3a3a3, placeholders and captions: --ui-faint) read 4.35:1 / 2.31:1 on the
+     grouped fill and 4.12:1 / 2.19:1 on hover; #6c6c6c is the nearest grey at >= 4.5:1 on every neutral fill.
+     --ui-label is the mono label's grey (ink-faint #8a8a8a, 3.45:1): #737373 holds 4.5:1 on the surfaces labels
+     sit on (white 4.74, canvas 4.54, the group-row tint #f9f9f9 4.50; REF-CONSOLE §13). */
+  --ui-ink: 10 10 10;
+  --ui-ink-soft: 93 93 93;
+  --ui-on-ink: 255 255 255;
+  --ui-muted: 108 108 108;
+  --ui-faint: 108 108 108;
+  --ui-label: 115 115 115;
+  /* Accent (the green #168a49 carries white at 4.41:1). The fill is #168848 (white 4.52:1, REF-CONSOLE §13);
+     accent text and links are #147c42, the nearest at >= 4.5:1 on every neutral fill and on the soft fill.
+     Primary actions and the segmented thumb are ink with --ui-on-ink, not the accent (REF-CONSOLE §8.3, §8.5). */
+  --ui-primary: 22 136 72;
+  --ui-primary-hover: 20 124 66;
+  --ui-primary-soft: 234 250 240;
+  --ui-on-primary: 255 255 255;
+  --ui-link: #147c42;
+  --ui-focus: 22 136 72;
+  /* Status colours (text-safe). success #22a050 (3.38:1), danger #dc3c3c (4.42:1) and warning #b45309 (4.37:1
+     on hover) move to the nearest value at >= 4.5:1 on every neutral fill; info and purple already pass.
+     The soft fills are the reference's. */
+  --ui-success: 27 125 62;
+  --ui-success-soft: 240 253 244;
+  --ui-danger: 200 55 55;
+  --ui-danger-soft: 254 242 242;
+  --ui-warning: 176 81 9;
+  --ui-warning-soft: 255 249 234;
+  --ui-info: 29 78 216;
+  --ui-info-soft: 239 246 255;
+  --ui-purple: 120 80 200;
+  --ui-purple-soft: 250 245 255;
+  /* shape: 4 chips, logo squares, checkboxes; 6 buttons, inputs, nav items, KPI tiles, tooltips; 8 cards,
+     tables, menus, dialogs, the segmented frame; 12 the sign-in logo square */
+  --ui-radius-sm: 4px;
+  --ui-radius-md: 6px;
+  --ui-radius-lg: 8px;
+  --ui-radius-xl: 12px;
+  /* depth: none inside the page; popovers and overlays float */
+  --ui-shadow-popover: 0 6px 20px rgb(20 20 18 / 0.08);
+  --ui-shadow-overlay: 0 18px 50px rgb(20 20 18 / 0.14);
+  --ui-scrim: 10 10 10 / 0.2;
+  /* metrics: small controls (buttons, search, filter pills, segments), native selects, medium buttons; the
+     sticky header height keyboard focus must clear (upstream h-16 until the shell settles it) */
+  --ui-control-h: 30px;
+  --ui-select-h: 34px;
+  --ui-control-h-md: 38px;
+  --ui-header-h: 4rem;
+  /* motion: colour, background, border and opacity 150ms; the segmented thumb 200ms and the sidebar width
+     160ms, both ease-out; no press scale, no hover lift */
+  --ui-ease: cubic-bezier(0.4, 0, 0.2, 1);
+  --ui-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ui-duration: 150ms;
+  --ui-duration-slide: 200ms;
+  --ui-duration-sidebar: 160ms;
+  /* type: Geist for Latin and figures, MiSans for Chinese (400 / 500 / 600 match Geist's stroke weights) */
+  --ui-font: 'Geist', 'Geist Fallback', 'MiSans', 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', system-ui,
+    -apple-system, sans-serif;
+  --ui-font-mono: 'Geist Mono', 'Geist Mono Fallback', 'MiSans', ui-monospace, monospace;
+  /* The mono label (.mono-label: table headers, KPI labels, group rows, section titles, field labels):
+     Geist Mono 10/15, 0.12em, uppercase, --ui-label; table headers use weight 500. */
+  --ui-label-size: 10px;
+  --ui-label-leading: 15px;
+  --ui-label-tracking: 0.12em;
+  --ui-label-weight: 400;
+  --ui-label-font: var(--ui-label-weight) var(--ui-label-size) / var(--ui-label-leading) var(--ui-font-mono);
+  /* Tailwind text-sm: the reference's 13px body text on its 19.5px line */
+  --theme-text-sm: 0.8125rem;
+  --theme-text-sm-leading: 1.21875rem;
+  accent-color: rgb(var(--ui-primary));
+  /* a weight MiSans is not loaded in is never smeared into a synthetic bold */
+  font-synthesis-weight: none;
+}
+
+/* Chinese has no capitals and 10px CJK is hard to read: labels in the Chinese interface are 11px
+   (ui-el MAPPING §2.8). i18n keeps <html lang> on the active locale. */
+:root.flat-theme:lang(zh) {
+  --ui-label-size: 11px;
+  --ui-label-leading: 16px;
+}
+
+/* ------------------------------------------------------------------ roles (dark) */
+:root.flat-theme.dark {
+  --ui-canvas: 15 15 15;
+  --ui-surface: 26 26 26;
+  --ui-subtle: 35 35 35;
+  --ui-sunk: 20 20 20;
+  --ui-raised: 26 26 26;
+  /* white at 7 / 11 % */
+  --ui-hover: 42 42 42;
+  --ui-active: 51 51 51;
+  /* white at 14 / 24 / 42 %; the form-control line is the nearest grey at >= 3:1 on the canvas, the surface and
+     the grouped fill (white 24 % is 2.19:1; REF-CONSOLE §13 gives white 33-34 %) */
+  --ui-line: 58 58 58;
+  --ui-line-strong: 81 81 81;
+  --ui-line-focus: 122 122 122;
+  --ui-control-line: 109 109 109;
+  --ui-ink: 242 242 242;
+  --ui-ink-soft: 169 169 169;
+  --ui-on-ink: 10 10 10;
+  --ui-muted: 179 179 179;
+  /* muted-2 #8c8c8c reads 4.27:1 on hover; #919191 is the nearest at >= 4.5:1 */
+  --ui-faint: 145 145 145;
+  --ui-label: 156 156 156;
+  /* the mint accent with ink on it; soft = mint at 16 % */
+  --ui-primary: 182 247 200;
+  --ui-primary-hover: 166 225 183;
+  --ui-primary-soft: 51 62 54;
+  --ui-on-primary: 10 10 10;
+  --ui-link: #b6f7c8;
+  --ui-focus: 182 247 200;
+  /* status colours; soft = the colour at 18 % */
+  --ui-success: 74 222 128;
+  --ui-success-soft: 35 61 44;
+  --ui-danger: 248 113 113;
+  --ui-danger-soft: 66 42 42;
+  --ui-warning: 251 191 36;
+  --ui-warning-soft: 67 56 28;
+  --ui-info: 147 197 253;
+  --ui-info-soft: 48 57 67;
+  --ui-purple: 196 181 253;
+  --ui-purple-soft: 57 54 67;
+  --ui-shadow-popover: 0 6px 20px rgb(0 0 0 / 0.55);
+  --ui-shadow-overlay: 0 18px 50px rgb(0 0 0 / 0.65);
+  --ui-scrim: 0 0 0 / 0.6;
+}
+
+/* ------------------------------------------------------------------ Tailwind neutrals */
+/* gray / slate / zinc / neutral / stone / accent share the gray variables (tailwind.config.js); each shade has
+   a fill, a line and a text role. The dark-* family is upstream's dark-mode palette. */
+:root.flat-theme {
+  /* the reference's grey ladder at the light end, Tailwind neutral in between, ink at 950 */
+  --theme-color-gray-50: 250 250 250;
+  --theme-color-gray-100: 245 245 245;
+  --theme-color-gray-200: 237 237 237;
+  --theme-color-gray-300: 224 224 224;
+  --theme-color-gray-400: 163 163 163;
+  --theme-color-gray-500: 115 115 115;
+  --theme-color-gray-600: 82 82 82;
+  --theme-color-gray-700: 64 64 64;
+  --theme-color-gray-800: 38 38 38;
+  --theme-color-gray-900: 23 23 23;
+  --theme-color-gray-950: 10 10 10;
+  /* borders: upstream's card (100) and default (200) borders are the structural line, 300 the control outline,
+     400 the focus outline */
+  --theme-line-gray-100: 237 237 237;
+  --theme-line-gray-200: 237 237 237;
+  --theme-line-gray-300: 224 224 224;
+  --theme-line-gray-400: 189 189 189;
+  /* text: every shade upstream uses for secondary text meets 4.5:1 on the neutral fills; 300 stays the
+     reference's decorative muted-2 (upstream's own use: dividers, idle sort arrows) */
+  --theme-text-gray-300: 163 163 163;
+  --theme-text-gray-400: 108 108 108;
+  --theme-text-gray-500: 108 108 108;
+  --theme-text-gray-600: 82 82 82;
+  --theme-text-gray-700: 64 64 64;
+  --theme-text-gray-800: 38 38 38;
+  --theme-text-gray-900: 10 10 10;
+  --theme-text-gray-950: 10 10 10;
+
+  /* dark-*: 950 canvas, 900 well, 800 surface, 700 grouped fill; the light end is text on dark */
+  --theme-color-dark-50: 242 242 242;
+  --theme-color-dark-100: 229 229 229;
+  --theme-color-dark-200: 212 212 212;
+  --theme-color-dark-300: 179 179 179;
+  --theme-color-dark-400: 156 156 156;
+  --theme-color-dark-500: 92 92 92;
+  --theme-color-dark-600: 61 61 61;
+  --theme-color-dark-700: 35 35 35;
+  --theme-color-dark-800: 26 26 26;
+  --theme-color-dark-900: 20 20 20;
+  --theme-color-dark-950: 15 15 15;
+  --theme-line-dark-400: 122 122 122;
+  --theme-line-dark-500: 102 102 102;
+  --theme-line-dark-600: 81 81 81;
+  --theme-line-dark-700: 58 58 58;
+  --theme-line-dark-800: 42 42 42;
+  --theme-line-dark-900: 35 35 35;
+  --theme-line-dark-950: 26 26 26;
+  /* muted, ink-faint and the compliant muted-2 */
+  --theme-text-dark-100: 242 242 242;
+  --theme-text-dark-200: 229 229 229;
+  --theme-text-dark-300: 179 179 179;
+  --theme-text-dark-400: 156 156 156;
+  --theme-text-dark-500: 145 145 145;
+  --theme-text-dark-600: 122 122 122;
+}
+
+/* Dark mode: upstream pairs the light text shades (100-500) with dark:, and the plain 600-900 shades appear
+   where a template has no dark variant, so every text shade is a readable light grey; lines are the white
+   alphas composited over the surface. */
+:root.flat-theme.dark {
+  --theme-text-gray-600: 179 179 179;
+  --theme-text-gray-700: 212 212 212;
+  --theme-text-gray-800: 229 229 229;
+  --theme-text-gray-900: 242 242 242;
+  --theme-text-gray-950: 242 242 242;
+  --theme-line-gray-100: 42 42 42;
+  --theme-line-gray-200: 58 58 58;
+  --theme-line-gray-300: 81 81 81;
+  --theme-line-gray-400: 122 122 122;
+}
+
+/* Secondary text on a dark surface: the whole dark theme and, in the light theme, the boxes that stay dark
+   there too (terminal output, dark tooltips, code panes), which the templates mark `theme-dark-surface`. */
+:root.flat-theme.dark,
+:root.flat-theme .theme-dark-surface {
+  --theme-text-gray-100: 242 242 242;
+  --theme-text-gray-200: 229 229 229;
+  --theme-text-gray-300: 212 212 212;
+  --theme-text-gray-400: 179 179 179;
+  --theme-text-gray-500: 145 145 145;
+}
+
+/* ------------------------------------------------------------------ Tailwind accent and status families */
+/* primary is the accent; the hue families fold into the five status families (tailwind.config.js). One fill
+   ramp per family (500 carries white text at >= 4.5:1); the text roles are the text-safe colour. */
+:root.flat-theme {
+  --theme-color-primary-50: 234 250 240;
+  --theme-color-primary-100: 211 236 219;
+  --theme-color-primary-200: 177 216 188;
+  --theme-color-primary-300: 129 188 146;
+  --theme-color-primary-400: 22 138 73;
+  --theme-color-primary-500: 22 136 72;
+  --theme-color-primary-600: 20 124 66;
+  --theme-color-primary-700: 16 103 54;
+  --theme-color-primary-800: 12 83 43;
+  --theme-color-primary-900: 8 64 32;
+  --theme-color-primary-950: 5 46 22;
+  --theme-text-primary-400: 20 124 66;
+  --theme-text-primary-500: 20 124 66;
+  --theme-text-primary-600: 20 124 66;
+  --theme-ring-primary: 22 136 72;
+
+  --theme-color-success-50: 240 253 244;
+  --theme-color-success-100: 218 242 224;
+  --theme-color-success-200: 185 225 194;
+  --theme-color-success-300: 139 202 153;
+  --theme-color-success-400: 34 160 80;
+  --theme-color-success-500: 27 125 62;
+  --theme-color-success-600: 22 108 54;
+  --theme-color-success-700: 17 92 45;
+  --theme-color-success-800: 13 76 37;
+  --theme-color-success-900: 8 61 30;
+  --theme-color-success-950: 5 46 22;
+  --theme-text-success-400: 27 125 62;
+  --theme-text-success-500: 27 125 62;
+  --theme-text-success-600: 27 125 62;
+
+  --theme-color-danger-50: 254 242 242;
+  --theme-color-danger-100: 253 222 220;
+  --theme-color-danger-200: 250 192 187;
+  --theme-color-danger-300: 243 149 141;
+  --theme-color-danger-400: 220 60 60;
+  --theme-color-danger-500: 200 55 55;
+  --theme-color-danger-600: 172 45 45;
+  --theme-color-danger-700: 145 36 36;
+  --theme-color-danger-800: 118 27 27;
+  --theme-color-danger-900: 93 18 18;
+  --theme-color-danger-950: 69 10 10;
+  --theme-text-danger-400: 200 55 55;
+  --theme-text-danger-500: 200 55 55;
+  --theme-text-danger-600: 200 55 55;
+
+  --theme-color-warning-50: 255 249 234;
+  --theme-color-warning-100: 252 234 211;
+  --theme-color-warning-200: 246 211 177;
+  --theme-color-warning-300: 237 179 129;
+  --theme-color-warning-400: 217 119 6;
+  --theme-color-warning-500: 176 81 9;
+  --theme-color-warning-600: 153 69 8;
+  --theme-color-warning-700: 131 58 6;
+  --theme-color-warning-800: 110 47 5;
+  --theme-color-warning-900: 89 36 4;
+  --theme-color-warning-950: 69 26 3;
+  --theme-text-warning-400: 176 81 9;
+  --theme-text-warning-500: 176 81 9;
+  --theme-text-warning-600: 176 81 9;
+
+  --theme-color-info-50: 239 246 255;
+  --theme-color-info-100: 217 230 253;
+  --theme-color-info-200: 183 206 249;
+  --theme-color-info-300: 140 174 242;
+  --theme-color-info-400: 89 133 232;
+  --theme-color-info-500: 29 78 216;
+  --theme-color-info-600: 29 70 188;
+  --theme-color-info-700: 28 62 161;
+  --theme-color-info-800: 27 53 134;
+  --theme-color-info-900: 25 45 109;
+  --theme-color-info-950: 23 37 84;
+  --theme-text-info-400: 29 78 216;
+  --theme-text-info-500: 29 78 216;
+  --theme-text-info-600: 29 78 216;
+
+  --theme-color-purple-50: 250 245 255;
+  --theme-color-purple-100: 236 229 251;
+  --theme-color-purple-200: 215 204 244;
+  --theme-color-purple-300: 188 172 233;
+  --theme-color-purple-400: 156 131 219;
+  --theme-color-purple-500: 120 80 200;
+  --theme-color-purple-600: 104 67 179;
+  --theme-color-purple-700: 89 54 159;
+  --theme-color-purple-800: 74 42 139;
+  --theme-color-purple-900: 60 29 120;
+  --theme-color-purple-950: 46 16 101;
+  --theme-text-purple-400: 120 80 200;
+  --theme-text-purple-500: 120 80 200;
+  --theme-text-purple-600: 120 80 200;
+
+  /* Components that read a family variable directly (utils/platformColors.ts accent(), KeyUsageView's rings)
+     name the upstream hue; the folded ones resolve to the family they fold into. */
+  --theme-color-pink-500: var(--theme-color-purple-500);
+  --theme-color-teal-500: var(--theme-color-success-500);
+  --theme-color-indigo-300: var(--theme-color-info-300);
+  --theme-color-indigo-500: var(--theme-color-info-500);
+  --theme-text-indigo-600: var(--theme-text-info-600);
+}
+
+/* Dark mode: the accent fills are mint with ink on them (--theme-on-fill), its tints are mint over the surface
+   (8 / 16 / 24 / 32 %); the deep 800-950 shades stay (upstream's dark: tints use them at low opacity). */
+:root.flat-theme.dark {
+  --theme-color-primary-50: 38 43 40;
+  --theme-color-primary-100: 51 62 54;
+  --theme-color-primary-200: 63 79 68;
+  --theme-color-primary-300: 76 97 82;
+  --theme-color-primary-400: 204 249 216;
+  --theme-color-primary-500: 182 247 200;
+  --theme-color-primary-600: 166 225 183;
+  --theme-color-primary-700: 151 203 165;
+  --theme-ring-primary: 182 247 200;
+}
+
+/* Status and accent text on a dark surface (see the gray block above): the reference's dark colours with
+   lighter steps around them. */
+:root.flat-theme.dark,
+:root.flat-theme .theme-dark-surface {
+  --theme-text-primary-50: 234 250 240;
+  --theme-text-primary-100: 217 251 226;
+  --theme-text-primary-200: 199 249 212;
+  --theme-text-primary-300: 182 247 200;
+  --theme-text-primary-400: 182 247 200;
+  --theme-text-primary-500: 182 247 200;
+  --theme-text-primary-600: 182 247 200;
+  --theme-text-primary-700: 199 249 212;
+  --theme-text-primary-800: 217 251 226;
+  --theme-text-primary-900: 234 250 240;
+  --theme-text-primary-950: 234 250 240;
+  --theme-text-success-100: 220 252 231;
+  --theme-text-success-200: 187 247 208;
+  --theme-text-success-300: 134 239 172;
+  --theme-text-success-400: 74 222 128;
+  --theme-text-success-500: 74 222 128;
+  --theme-text-success-600: 74 222 128;
+  --theme-text-success-700: 134 239 172;
+  --theme-text-success-800: 187 247 208;
+  --theme-text-danger-100: 254 226 226;
+  --theme-text-danger-200: 254 202 202;
+  --theme-text-danger-300: 252 165 165;
+  --theme-text-danger-400: 248 113 113;
+  --theme-text-danger-500: 248 113 113;
+  --theme-text-danger-600: 248 113 113;
+  --theme-text-danger-700: 252 165 165;
+  --theme-text-danger-800: 254 202 202;
+  --theme-text-warning-100: 254 243 199;
+  --theme-text-warning-200: 253 230 138;
+  --theme-text-warning-300: 252 211 77;
+  --theme-text-warning-400: 251 191 36;
+  --theme-text-warning-500: 251 191 36;
+  --theme-text-warning-600: 251 191 36;
+  --theme-text-warning-700: 252 211 77;
+  --theme-text-warning-800: 253 230 138;
+  --theme-text-info-100: 239 246 255;
+  --theme-text-info-200: 219 234 254;
+  --theme-text-info-300: 191 219 254;
+  --theme-text-info-400: 147 197 253;
+  --theme-text-info-500: 147 197 253;
+  --theme-text-info-600: 147 197 253;
+  --theme-text-info-700: 191 219 254;
+  --theme-text-info-800: 219 234 254;
+  --theme-text-purple-100: 237 233 254;
+  --theme-text-purple-200: 221 214 254;
+  --theme-text-purple-300: 221 214 254;
+  --theme-text-purple-400: 196 181 253;
+  --theme-text-purple-500: 196 181 253;
+  --theme-text-purple-600: 196 181 253;
+  --theme-text-purple-700: 221 214 254;
+  --theme-text-purple-800: 237 233 254;
+}
+
+/* ------------------------------------------------------------------ shape, depth, motion */
+:root.flat-theme {
+  /* upstream's radii onto the reference's three: controls (xl: buttons, inputs, dropdowns; lg, md) 6px, cards
+     and dialogs (2xl, 3xl) 8px, chips (DEFAULT, sm) 4px */
+  --theme-radius-sm: 4px;
+  --theme-radius-default: 4px;
+  --theme-radius-md: 6px;
+  --theme-radius-lg: 6px;
+  --theme-radius-xl: 6px;
+  --theme-radius-2xl: 8px;
+  --theme-radius-3xl: 8px;
+  --theme-radius-4xl: 8px;
+  /* the page is drawn with lines: in-page shadows are none; menus and popovers (lg, xl) and dialogs (2xl) float */
+  --theme-shadow-sm: none;
+  --theme-shadow-default: none;
+  --theme-shadow-md: none;
+  --theme-shadow-lg: var(--ui-shadow-popover);
+  --theme-shadow-xl: var(--ui-shadow-popover);
+  --theme-shadow-2xl: var(--ui-shadow-overlay);
+  --theme-shadow-inner: none;
+  --theme-shadow-glass: none;
+  --theme-shadow-glass-sm: none;
+  --theme-shadow-glow: none;
+  --theme-shadow-glow-lg: none;
+  --theme-shadow-card: none;
+  --theme-shadow-card-hover: none;
+  --theme-shadow-inner-glow: none;
+  --theme-shadow-outline: 0 0 0 1px rgb(var(--ui-line));
+  /* the reference has no decorative gradients; a named primary gradient is the solid accent */
+  --theme-background-gradient-radial: none;
+  --theme-background-gradient-primary: linear-gradient(rgb(var(--ui-primary)), rgb(var(--ui-primary)));
+  --theme-background-gradient-dark: none;
+  --theme-background-gradient-glass: none;
+  --theme-background-mesh-gradient: none;
+  /* nothing grows on hover */
+  --theme-scale-105: 1;
+  --theme-scale-110: 1;
+  --theme-scale-125: 1;
+  --theme-scale-150: 1;
+  /* entrances: the reference's reveal (200ms ease-out, 4px travel) for every upstream entrance; no glow pulse */
+  --theme-animation-fade-in: consoleFadeIn var(--ui-duration-slide) var(--ui-ease-out);
+  --theme-animation-slide-up: consoleSlideUp var(--ui-duration-slide) var(--ui-ease-out);
+  --theme-animation-slide-down: consoleSlideDown var(--ui-duration-slide) var(--ui-ease-out);
+  --theme-animation-slide-in-right: consoleSlideInRight var(--ui-duration-slide) var(--ui-ease-out);
+  --theme-animation-scale-in: consoleScaleIn var(--ui-duration-slide) var(--ui-ease-out);
+  --theme-animation-glow: none;
+}
+
+/* Upstream's decorative gradients render as their start colour. The stops belong to each element, so the
+   variables are declared on every element (declared on :root they would resolve --tw-gradient-from there).
+   An element that encodes data in both ends sets its own value inline (UsageTable's latency bar). */
+:root.flat-theme *,
+:root.flat-theme ::before,
+:root.flat-theme ::after {
+  --theme-background-gradient-to-t: linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from));
+  --theme-background-gradient-to-tr: linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from));
+  --theme-background-gradient-to-r: linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from));
+  --theme-background-gradient-to-br: linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from));
+  --theme-background-gradient-to-b: linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from));
+  --theme-background-gradient-to-bl: linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from));
+  --theme-background-gradient-to-l: linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from));
+  --theme-background-gradient-to-tl: linear-gradient(var(--tw-gradient-from), var(--tw-gradient-from));
+}
+
+/* ------------------------------------------------------------------ charts and scrollbars */
+/* Read by composables/usePresentationColors.ts (REF-CONSOLE §8.14): grid = the structural line, axis text =
+   muted; categorical series 1-12 (#rrggbb, consumers append a hex alpha) = the usage-by-model bar (ink, accent,
+   indigo, amber, cyan) followed by the usage series; "other" = #9ca3af; status marks for charts drawn with
+   upstream hue literals. The distribution charts list every value in a table beside the chart, so the series
+   are not the only carrier of the data. */
+:root.flat-theme {
+  --theme-chart-text: #5d5d5d;
+  --theme-chart-grid: #ededed;
+  --theme-chart-axis: #6c6c6c;
+  --theme-chart-axis-grid: #f5f5f5;
+  --theme-chart-tooltip: #ffffff;
+  --theme-chart-title: #0a0a0a;
+  --theme-chart-body: #6c6c6c;
+  --theme-chart-gray: #9ca3af;
+  --theme-chart-series-1: #0a0a0a;
+  --theme-chart-series-2: #168848;
+  --theme-chart-series-3: #6366f1;
+  --theme-chart-series-4: #d97706;
+  --theme-chart-series-5: #0891b2;
+  --theme-chart-series-6: #3975d8;
+  --theme-chart-series-7: #62cc49;
+  --theme-chart-series-8: #c32517;
+  --theme-chart-series-9: #e481fb;
+  --theme-chart-series-10: #0f714a;
+  --theme-chart-series-11: #81237c;
+  --theme-chart-series-12: #26a7ad;
+  --theme-chart-info: #1d4ed8;
+  --theme-chart-success: #22a050;
+  --theme-chart-warning: #d97706;
+  --theme-chart-danger: #dc3c3c;
+  --theme-chart-purple: #7850c8;
+  --theme-scrollbar-thumb: #d4d4d4;
+  --theme-scrollbar-hover: #a3a3a3;
+}
+
+:root.flat-theme.dark {
+  --theme-chart-text: #a9a9a9;
+  --theme-chart-grid: #3a3a3a;
+  --theme-chart-axis: #b3b3b3;
+  --theme-chart-axis-grid: #232323;
+  --theme-chart-tooltip: #1a1a1a;
+  --theme-chart-title: #f2f2f2;
+  --theme-chart-body: #b3b3b3;
+  --theme-chart-series-1: #f2f2f2;
+  --theme-chart-series-2: #b6f7c8;
+  --theme-chart-series-6: #1f5bbc;
+  --theme-chart-series-7: #44af27;
+  --theme-chart-series-8: #be1e10;
+  --theme-chart-series-9: #c664dc;
+  --theme-chart-series-10: #12724b;
+  --theme-chart-series-11: #91338c;
+  --theme-chart-info: #93c5fd;
+  --theme-chart-success: #4ade80;
+  --theme-chart-warning: #fbbf24;
+  --theme-chart-danger: #f87171;
+  --theme-chart-purple: #c4b5fd;
+  --theme-scrollbar-thumb: #3d3d3d;
+  --theme-scrollbar-hover: #5c5c5c;
+}
+
+/* ------------------------------------------------------------------ keyframes */
+@keyframes consoleFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes consoleSlideUp {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes consoleSlideDown {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes consoleSlideInRight {
+  from { opacity: 0; transform: translateX(4px); }
+  to { opacity: 1; transform: translateX(0); }
+}
+
+@keyframes consoleScaleIn {
+  from { opacity: 0; transform: scale(0.98); }
+  to { opacity: 1; transform: scale(1); }
+}
diff --git a/frontend/src/styles/flat-theme.css b/frontend/src/styles/flat-theme.css
deleted file mode 100644
index ee99e25f6342..000000000000
--- a/frontend/src/styles/flat-theme.css
+++ /dev/null
@@ -1,792 +0,0 @@
-/* Console theme. Applies while <html> carries the flat-theme class, which follows the
-   admin_observability_config theme switch (public setting flat_theme_enabled); without the class
-   every variable below is undefined and tailwind.config.js falls back to the upstream values.
-
-   Visual language: Apple Human Interface on the web (macOS Tahoe / 27 Liquid Glass, apple.com, iCloud).
-   - colour only where upstream sub2api puts colour: the accent (Apple blue: primary actions, links, the
-     current / selected item, switches that are on, the balance capsule, the avatar, code tags, the bulk-bar
-     rule), status and platform badges, the per-metric KPI tiles and the figures upstream tints, the
-     quick-action tiles and their hover tints, charts; everything else is neutral;
-   - environment: a neutral tonal backdrop (white and cool-grey light, never a hue) that the chrome floats on;
-   - material: Liquid Glass for chrome where content can move beneath (the floating sidebar, the toolbar
-     capsules, menus and popovers, the sticky table header, the bulk-action bar, the dialog scrim):
-     translucent fill, blur + saturation, a bright specular rim, a hairline and a soft layered shadow, with
-     opaque fallbacks for reduced transparency;
-   - tactile controls: glass capsules for secondary buttons and pop-ups, a glossy blue capsule for primary
-     actions, recessed white wells for fields, recessed tracks with glossy thumbs and knobs;
-   - surfaces: white 20px cards with smooth layered shadows and a top highlight; dark mode uses layered greys
-     (#0B0B0C / #161618 / #1F1F22) with rim light and deeper shadows.
-   Fonts: the Apple system font on Apple devices (SF Pro / PingFang SC); elsewhere Inter for Latin and digits,
-   Geist Mono for identifiers, MiSans (Regular + Medium) for Chinese. MiSans is not shipped: utils/flatTheme.ts
-   loads it from Xiaomi's official font service while the console theme is on; when that service is
-   unreachable the stack falls back to the system fonts. */
-
-/* Inter 4.001 (fontsource 5.3.0, SIL OFL 1.1, see assets/fonts/inter/OFL.txt), variable weight 100-900,
-   subset to the Latin range below. Only downloaded while a rule uses the family (the console theme). */
-@font-face {
-  font-family: 'Inter';
-  src: url('../assets/fonts/inter/Inter-Variable.latin.woff2') format('woff2');
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
-    U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* Geist Mono 1.7.2 (npm `geist`, SIL OFL 1.1, see assets/fonts/geist/OFL.txt), variable weight 100-900,
-   Latin subset: identifiers where the system has no SF Mono. */
-@font-face {
-  font-family: 'Geist Mono';
-  src: url('../assets/fonts/geist/GeistMono-Variable.latin.woff2') format('woff2');
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
-    U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* ------------------------------------------------------------------ role tokens */
-/* Layers, from back to front: backdrop (--ui-backdrop over the canvas colour) < glass chrome and white
-   surfaces (cards, tables) < raised (menus, popovers, dialogs). Colour values are RGB channels (Tailwind
-   opacity modifiers keep working); materials, fills and shadows are full values. */
-:root.flat-theme {
-  --ui-canvas: 243 243 246;
-  --ui-panel: 243 243 246;
-  --ui-surface: 255 255 255;
-  --ui-subtle: 239 239 241;
-  --ui-sunk: 250 250 251;
-  --ui-raised: 255 255 255;
-  --ui-hover: 243 243 245;
-  --ui-line: 229 229 234;
-  --ui-line-strong: 210 210 215;
-  --ui-line-focus: 0 113 227;
-  /* boundary of controls identified only by their outline (checkbox, radio, switch): >= 3:1 */
-  --ui-control-line: 134 134 139;
-  --ui-ink: 29 29 31;
-  /* #69696E: >= 4.5:1 on white and on the darkest backdrop tone (#EEEFF2) */
-  --ui-muted: 105 105 110;
-  --ui-faint: 102 102 107;
-  --ui-primary: 0 113 227;
-  --ui-primary-hover: 0 110 219;
-  --ui-primary-active: 0 98 196;
-  --ui-primary-soft: 230 241 252;
-  --ui-primary-ink: 0 102 204;
-  /* blue text on a grey or blue-tinted fill (code tags, the balance figure): a step deeper, so it keeps >= 5:1
-     where the fill sits on a hovered or selected row or on the darker glass */
-  --ui-primary-ink-strong: 0 90 184;
-  --ui-on-primary: 255 255 255;
-  --ui-success: 18 127 50;
-  --ui-success-soft: 231 248 235;
-  --ui-danger: 214 0 19;
-  --ui-danger-soft: 255 231 230;
-  --ui-warning: 178 80 0;
-  --ui-warning-soft: 255 242 224;
-  --ui-info: 0 102 204;
-  --ui-info-soft: 224 239 255;
-  --ui-purple: 137 68 171;
-  --ui-purple-soft: 245 234 251;
-  --ui-link: #0066cc;
-  /* translucent fills (adapt to what is beneath): hovers, chips, separators */
-  --ui-fill: rgb(118 118 128 / 0.12);
-  --ui-fill-hover: rgb(118 118 128 / 0.17);
-  --ui-fill-active: rgb(118 118 128 / 0.24);
-  --ui-hairline: rgb(60 60 67 / 0.18);
-  --ui-hairline-soft: rgb(60 60 67 / 0.1);
-  /* table rows (opaque, so the sticky cells can carry the same colour) */
-  --ui-row-stripe: 249 249 250;
-  --ui-row-hover: 242 242 244;
-  --ui-row-selected: 235 244 253;
-  /* navigation: hover and the current item (upstream's primary-50 tint, in Apple blue) */
-  --ui-nav-hover: rgb(0 0 0 / 0.045);
-  --ui-nav-current: rgb(0 113 227 / 0.1);
-  --ui-nav-current-ink: 0 102 204;
-  --ui-menu-hover: rgb(0 0 0 / 0.06);
-  /* environment: a neutral tonal backdrop (no hue) that the glass chrome floats on */
-  --ui-backdrop: radial-gradient(1200px 700px at 12% -10%, #ffffff, rgb(255 255 255 / 0) 60%),
-    radial-gradient(1100px 800px at 105% 5%, rgb(214 220 230 / 0.7), rgb(214 220 230 / 0) 60%),
-    linear-gradient(180deg, #f6f6f8, #eeeff2);
-  /* the soft scroll-edge layer under the toolbar (masked glass): dense behind the title and the capsule (text over any
-     content >= 4.5:1), fading out below them */
-  --ui-scroll-edge: linear-gradient(180deg, rgb(246 246 248 / 0.95), rgb(246 246 248 / 0.92));
-  --ui-scroll-edge-blur: blur(10px) saturate(150%);
-  /* Liquid Glass */
-  --ui-glass-fill: linear-gradient(180deg, rgb(255 255 255 / 0.72), rgb(255 255 255 / 0.5));
-  /* menus, popovers, tooltips: the thick menu material, nearly opaque with a faint cool-grey tint (a menu that opens
-     inside a scrolling table may get no backdrop blur in Chromium, so rows must not show through sharp) */
-  --ui-glass-fill-strong: linear-gradient(180deg, rgb(251 251 253 / 0.96), rgb(245 245 248 / 0.94));
-  /* the same material, opaque: for a menu that opens inside glass chrome (no backdrop blur there) */
-  --ui-menu-fill-solid: linear-gradient(180deg, #fbfbfd, #f5f5f8);
-  --ui-glass-blur: blur(24px) saturate(170%);
-  --ui-glass-rim: inset 0 1px 0.5px rgb(255 255 255 / 0.95), inset 0 -1px 1px rgb(0 0 0 / 0.05);
-  --ui-glass-hairline: 0 0 0 0.5px rgb(0 0 0 / 0.08);
-  --ui-glass-drop: 0 8px 24px -8px rgb(0 0 0 / 0.12), 0 2px 6px 0 rgb(0 0 0 / 0.06);
-  --ui-glass-shadow: var(--ui-glass-rim), var(--ui-glass-hairline), var(--ui-glass-drop);
-  --ui-glass-float: var(--ui-glass-rim), 0 0 0 0.5px rgb(0 0 0 / 0.1), 0 16px 40px -12px rgb(0 0 0 / 0.22),
-    0 4px 10px 0 rgb(0 0 0 / 0.07);
-  --ui-scrim-blur: blur(12px) saturate(120%);
-  /* the sticky table header: frosted glass over the rows scrolling beneath. Chromium may draw no backdrop blur for
-     elements inside a scrolling box (the table), so the frost is nearly opaque: rows never show through sharp */
-  --ui-header-glass: linear-gradient(180deg, rgb(255 255 255 / 0.95), rgb(249 249 251 / 0.94));
-  --ui-header-glass-solid: rgb(255 255 255 / 0.97);
-  /* tactile controls: glass capsules (secondary buttons, pop-ups), glossy primary, recessed fields and tracks */
-  --ui-control-fill: linear-gradient(180deg, rgb(255 255 255 / 0.96), rgb(255 255 255 / 0.74));
-  --ui-control-fill-hover: linear-gradient(180deg, #ffffff, rgb(255 255 255 / 0.9));
-  --ui-control-fill-press: linear-gradient(180deg, rgb(240 240 243 / 0.95), rgb(248 248 250 / 0.9));
-  --ui-control-shadow: inset 0 1px 0.5px #ffffff, inset 0 -1px 1px rgb(0 0 0 / 0.04), 0 0 0 0.5px rgb(0 0 0 / 0.12),
-    0 1px 2px 0 rgb(0 0 0 / 0.06), 0 3px 8px -3px rgb(0 0 0 / 0.1);
-  --ui-control-shadow-press: inset 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 0 0 0.5px rgb(0 0 0 / 0.14);
-  /* primary: Apple blue deepening downwards (white text >= 4.6:1 at every stop) under a soft inner gloss at
-     the top edge (in --ui-primary-shadow) */
-  --ui-primary-fill: linear-gradient(180deg, #0a72e0 0%, #0066d4 55%, #005fca 100%);
-  --ui-primary-fill-hover: linear-gradient(180deg, #006cdb 0%, #005fca 55%, #0058bf 100%);
-  --ui-primary-fill-press: linear-gradient(180deg, #0060c8, #0058bc);
-  --ui-primary-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.4), inset 0 6px 8px -5px rgb(255 255 255 / 0.22),
-    inset 0 -1px 1px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 40 90 / 0.3), 0 1px 2px 0 rgb(0 0 0 / 0.12),
-    0 4px 10px -4px rgb(0 0 0 / 0.22);
-  --ui-primary-shadow-press: inset 0 1px 2px 0 rgb(0 0 0 / 0.22), 0 0 0 0.5px rgb(0 40 90 / 0.35);
-  /* destructive confirmation inside dialogs: glossy red (white label >= 4.9:1 below the top band) */
-  --ui-danger-fill: linear-gradient(180deg, #d92530 0%, #cd1f2b 100%);
-  --ui-danger-fill-hover: linear-gradient(180deg, #cb1e2a 0%, #bf1a25 100%);
-  /* semantic labels on glass controls */
-  --ui-danger-label: 214 0 19;
-  --ui-check-fill: linear-gradient(180deg, #2a8bef, #0071e3);
-  /* fields: recessed white wells */
-  --ui-field-bg: #ffffff;
-  --ui-field-line: rgb(0 0 0 / 0.14);
-  --ui-field-line-hover: rgb(0 0 0 / 0.24);
-  --ui-field-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.06);
-  --ui-track: rgb(118 118 128 / 0.13);
-  --ui-track-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.08), inset 0 0 0 0.5px rgb(0 0 0 / 0.05);
-  --ui-thumb: linear-gradient(180deg, #ffffff, #f6f6f8);
-  --ui-thumb-shadow: inset 0 1px 0 #ffffff, 0 0 0 0.5px rgb(0 0 0 / 0.07), 0 1px 2px 0 rgb(0 0 0 / 0.12),
-    0 3px 8px -2px rgb(0 0 0 / 0.14);
-  /* switches: Apple blue when on (macOS); a recessed light track with a 3:1 ring when off; a glossy knob */
-  --ui-switch-on: 0 113 227;
-  --ui-switch-on-fill: linear-gradient(180deg, #1a80ea, #0068d6);
-  --ui-switch-off: rgb(120 120 128 / 0.18);
-  --ui-switch-ring: rgb(60 60 67 / 0.56);
-  --ui-knob: linear-gradient(180deg, #ffffff, #f1f1f4);
-  --ui-knob-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 1px 1px 0 rgb(0 0 0 / 0.06), 0 2px 6px 0 rgb(0 0 0 / 0.18),
-    inset 0 1px 0 #ffffff;
-  /* shape */
-  --ui-radius-sm: 6px;
-  --ui-radius-md: 8px;
-  --ui-radius-lg: 10px;
-  --ui-radius-xl: 12px;
-  --ui-radius-inner: 14px;
-  --ui-radius-field: 10px;
-  --ui-radius-menu: 14px;
-  --ui-radius-table: 20px;
-  --ui-radius-card: 20px;
-  --ui-radius-panel: 22px;
-  --ui-radius-dialog: 22px;
-  --ui-radius-capsule: 9999px;
-  --ui-control-h: 2rem;
-  --ui-field-h: 2.25rem;
-  /* depth: smooth layered shadows with a top highlight; no coloured shadows */
-  --ui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --ui-shadow-card: 0 0 0 0.5px rgb(0 0 0 / 0.05), 0 1px 1px 0 rgb(0 0 0 / 0.02), 0 4px 8px -2px rgb(0 0 0 / 0.04),
-    0 12px 24px -8px rgb(0 0 0 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.9);
-  --ui-shadow-hover: 0 0 0 0.5px rgb(0 0 0 / 0.06), 0 2px 2px 0 rgb(0 0 0 / 0.02), 0 8px 16px -4px rgb(0 0 0 / 0.07),
-    0 20px 36px -12px rgb(0 0 0 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.9);
-  --ui-shadow-panel: none;
-  --ui-shadow-primary: var(--ui-primary-shadow);
-  --ui-highlight: inset 0 1px 0 rgb(255 255 255 / 0.9);
-  --ui-card-tint: none;
-  /* the soft tinted tiles (KPI, quick actions): a hairline and a top gloss over upstream's hue-100 fill */
-  --ui-tile-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.55);
-  --ui-tile-gloss: linear-gradient(180deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0) 70%);
-  /* hover washes where upstream tints on hover (the dashboard quick actions): Apple teal / green */
-  --ui-wash-teal: rgb(48 176 199 / 0.1);
-  --ui-wash-green: rgb(52 199 89 / 0.1);
-  --ui-dialog-footer: 250 250 251;
-  --ui-focus-ring: 0 0 0 3.5px rgb(0 113 227 / 0.4);
-  --ui-shadow-popover: var(--ui-glass-float);
-  --ui-shadow-overlay: 0 0 0 0.5px rgb(0 0 0 / 0.08), 0 2px 6px 0 rgb(0 0 0 / 0.06), 0 28px 70px -12px rgb(0 0 0 / 0.32),
-    inset 0 1px 0 rgb(255 255 255 / 0.9);
-  --ui-scrim: 18 18 24 / 0.24;
-  /* motion */
-  --ui-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
-  --ui-duration: 220ms;
-  --ui-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'MiSans', 'PingFang SC', 'Hiragino Sans GB',
-    'Microsoft YaHei UI', 'Microsoft YaHei', system-ui, sans-serif;
-  --ui-font-mono: 'SF Mono', ui-monospace, 'Geist Mono', Menlo, Consolas, 'MiSans', 'Microsoft YaHei UI', monospace;
-  --theme-chart-text: #69696e;
-  --theme-chart-grid: #ececf0;
-  --theme-chart-axis: #69696e;
-  --theme-chart-axis-grid: #f2f2f5;
-  --theme-chart-tooltip: #ffffff;
-  --theme-chart-title: #1d1d1f;
-  --theme-chart-body: #69696e;
-  --theme-chart-gray: #aeaeb2;
-  --theme-scrollbar-thumb: #d1d1d6;
-  --theme-scrollbar-hover: #aeaeb2;
-  --theme-text-sm: 0.8125rem;
-  --theme-text-sm-leading: 1.125rem;
-  accent-color: rgb(var(--ui-primary));
-  /* MiSans ships 400 and 500 only: bold CJK uses the Medium face instead of a smeared synthetic bold */
-  font-synthesis-weight: none;
-}
-
-:root.flat-theme.dark {
-  --ui-canvas: 11 11 12;
-  --ui-panel: 11 11 12;
-  --ui-surface: 22 22 24;
-  --ui-subtle: 38 38 42;
-  --ui-sunk: 22 22 24;
-  --ui-raised: 31 31 34;
-  --ui-hover: 35 35 38;
-  --ui-line: 44 44 48;
-  --ui-line-strong: 58 58 62;
-  --ui-line-focus: 10 132 255;
-  --ui-control-line: 124 124 128;
-  --ui-ink: 245 245 247;
-  --ui-muted: 161 161 166;
-  --ui-faint: 171 171 176;
-  --ui-primary-soft: 22 41 62;
-  --ui-primary-ink: 41 151 255;
-  --ui-primary-ink-strong: 100 180 255;
-  --ui-success: 48 209 88;
-  --ui-success-soft: 29 55 36;
-  --ui-danger: 255 96 81;
-  --ui-danger-soft: 64 31 31;
-  --ui-warning: 255 159 10;
-  --ui-warning-soft: 64 48 23;
-  --ui-info: 45 153 255;
-  --ui-info-soft: 22 41 62;
-  --ui-purple: 207 106 255;
-  --ui-purple-soft: 52 35 62;
-  --ui-link: #2997ff;
-  --ui-fill: rgb(118 118 128 / 0.24);
-  --ui-fill-hover: rgb(118 118 128 / 0.3);
-  --ui-fill-active: rgb(118 118 128 / 0.36);
-  --ui-hairline: rgb(255 255 255 / 0.12);
-  --ui-hairline-soft: rgb(255 255 255 / 0.07);
-  --ui-row-stripe: 27 27 29;
-  --ui-row-hover: 36 36 39;
-  --ui-row-selected: 21 40 61;
-  --ui-nav-hover: rgb(255 255 255 / 0.06);
-  --ui-nav-current: rgb(10 132 255 / 0.18);
-  --ui-nav-current-ink: 100 180 255;
-  --ui-menu-hover: rgb(255 255 255 / 0.1);
-  --ui-backdrop: radial-gradient(1200px 700px at 12% -10%, rgb(150 160 180 / 0.13), rgb(150 160 180 / 0) 60%),
-    radial-gradient(1100px 800px at 105% 5%, rgb(110 120 140 / 0.1), rgb(110 120 140 / 0) 60%),
-    linear-gradient(180deg, #0e0e10, #09090a);
-  --ui-scroll-edge: linear-gradient(180deg, rgb(12 12 14 / 0.95), rgb(12 12 14 / 0.92));
-  /* dark glass carries text (sidebar, toolbar capsule, settings tab strip, bulk bar, pagination): nearly opaque, so
-     light content scrolling beneath (an e-mail preview, a white image) cannot wash the text out; over the dark
-     backdrop it reads as the same grey as the thinner glass did */
-  --ui-glass-fill: linear-gradient(180deg, rgb(38 38 42 / 0.92), rgb(28 28 32 / 0.9));
-  --ui-glass-fill-strong: linear-gradient(180deg, rgb(50 50 54 / 0.96), rgb(40 40 44 / 0.94));
-  --ui-menu-fill-solid: linear-gradient(180deg, #313135, #29292d);
-  --ui-glass-rim: inset 0 1px 0.5px rgb(255 255 255 / 0.14), inset 0 -1px 1px rgb(0 0 0 / 0.3);
-  --ui-glass-hairline: 0 0 0 0.5px rgb(255 255 255 / 0.08);
-  --ui-glass-drop: 0 10px 30px -8px rgb(0 0 0 / 0.6), 0 2px 6px 0 rgb(0 0 0 / 0.35);
-  --ui-glass-float: var(--ui-glass-rim), 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 18px 44px -12px rgb(0 0 0 / 0.7),
-    0 4px 10px 0 rgb(0 0 0 / 0.4);
-  --ui-control-fill: linear-gradient(180deg, rgb(74 74 80 / 0.72), rgb(54 54 60 / 0.64));
-  --ui-control-fill-hover: linear-gradient(180deg, rgb(84 84 90 / 0.78), rgb(62 62 68 / 0.7));
-  --ui-control-fill-press: linear-gradient(180deg, rgb(46 46 52 / 0.8), rgb(56 56 62 / 0.72));
-  --ui-control-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.14), inset 0 -1px 1px rgb(0 0 0 / 0.25),
-    0 0 0 0.5px rgb(0 0 0 / 0.55), 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 3px 8px -3px rgb(0 0 0 / 0.45);
-  --ui-control-shadow-press: inset 0 1px 2px 0 rgb(0 0 0 / 0.45), 0 0 0 0.5px rgb(0 0 0 / 0.55);
-  --ui-primary-shadow: inset 0 1px 0.5px rgb(255 255 255 / 0.32), inset 0 6px 8px -5px rgb(255 255 255 / 0.16),
-    inset 0 -1px 1px rgb(0 0 0 / 0.2), 0 0 0 0.5px rgb(0 0 0 / 0.45), 0 1px 2px 0 rgb(0 0 0 / 0.3),
-    0 4px 12px -4px rgb(0 0 0 / 0.55);
-  --ui-primary-shadow-press: inset 0 1px 2px 0 rgb(0 0 0 / 0.35), 0 0 0 0.5px rgb(0 0 0 / 0.5);
-  --ui-header-glass: linear-gradient(180deg, rgb(30 30 33 / 0.95), rgb(25 25 28 / 0.94));
-  --ui-header-glass-solid: rgb(24 24 27 / 0.97);
-  --ui-danger-label: 255 138 128;
-  --ui-check-fill: linear-gradient(180deg, #2791ff, #0a84ff);
-  --ui-field-bg: #0f0f11;
-  --ui-field-line: rgb(255 255 255 / 0.12);
-  --ui-field-line-hover: rgb(255 255 255 / 0.2);
-  --ui-field-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.45);
-  --ui-track: rgb(118 118 128 / 0.24);
-  --ui-track-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.4), inset 0 0 0 0.5px rgb(255 255 255 / 0.05);
-  --ui-thumb: linear-gradient(180deg, #6c6c72, #5a5a60);
-  --ui-thumb-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 0 0 0.5px rgb(0 0 0 / 0.4), 0 1px 3px 0 rgb(0 0 0 / 0.4);
-  --ui-switch-off: rgb(120 120 128 / 0.3);
-  --ui-switch-ring: rgb(235 235 245 / 0.34);
-  --ui-knob: linear-gradient(180deg, #ffffff, #e9e9ee);
-  --ui-knob-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.3), 0 1px 1px 0 rgb(0 0 0 / 0.3), 0 2px 6px 0 rgb(0 0 0 / 0.45),
-    inset 0 1px 0 #ffffff;
-  --ui-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.35);
-  --ui-shadow-card: 0 0 0 0.5px rgb(255 255 255 / 0.06), 0 1px 1px 0 rgb(0 0 0 / 0.3), 0 8px 24px -8px rgb(0 0 0 / 0.6),
-    inset 0 1px 0 rgb(255 255 255 / 0.05);
-  --ui-shadow-hover: 0 0 0 0.5px rgb(255 255 255 / 0.09), 0 2px 2px 0 rgb(0 0 0 / 0.3), 0 14px 32px -10px rgb(0 0 0 / 0.7),
-    inset 0 1px 0 rgb(255 255 255 / 0.06);
-  --ui-highlight: inset 0 1px 0 rgb(255 255 255 / 0.05);
-  --ui-tile-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.06), inset 0 1px 0 rgb(255 255 255 / 0.06);
-  --ui-tile-gloss: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0) 70%);
-  --ui-wash-teal: rgb(64 200 224 / 0.14);
-  --ui-wash-green: rgb(48 209 88 / 0.14);
-  --ui-dialog-footer: 27 27 30;
-  --ui-focus-ring: 0 0 0 3.5px rgb(10 132 255 / 0.5);
-  --ui-shadow-overlay: 0 0 0 0.5px rgb(255 255 255 / 0.1), 0 2px 6px 0 rgb(0 0 0 / 0.4), 0 28px 70px -12px rgb(0 0 0 / 0.75),
-    inset 0 1px 0 rgb(255 255 255 / 0.06);
-  --ui-scrim: 0 0 0 / 0.5;
-  --theme-chart-text: #a1a1a6;
-  --theme-chart-grid: #26262a;
-  --theme-chart-axis: #a1a1a6;
-  --theme-chart-axis-grid: #1d1d20;
-  --theme-chart-tooltip: #1f1f22;
-  --theme-chart-title: #f5f5f7;
-  --theme-chart-body: #a1a1a6;
-  --theme-chart-gray: #636366;
-  --theme-scrollbar-thumb: #3a3a3e;
-  --theme-scrollbar-hover: #5a5a60;
-}
-
-/* Reduce transparency: every material turns opaque (the colour the glass shows over the backdrop). */
-@media (prefers-reduced-transparency: reduce) {
-  :root.flat-theme {
-    --ui-glass-fill: linear-gradient(180deg, #fbfbfc, #f7f7f9);
-    --ui-glass-fill-strong: linear-gradient(180deg, #fbfbfd, #f4f4f7);
-    --ui-scroll-edge: linear-gradient(180deg, #f6f6f8, #f2f2f5);
-    --ui-scroll-edge-blur: none;
-    --ui-header-glass: linear-gradient(180deg, #ffffff, #ffffff);
-    --ui-control-fill: linear-gradient(180deg, #ffffff, #f7f7f9);
-    --ui-glass-blur: none;
-    --ui-scrim-blur: none;
-    --ui-scrim: 0 0 0 / 0.4;
-  }
-
-  :root.flat-theme.dark {
-    --ui-glass-fill: linear-gradient(180deg, #232326, #1d1d20);
-    --ui-glass-fill-strong: linear-gradient(180deg, #2a2a2e, #242428);
-    --ui-scroll-edge: linear-gradient(180deg, #0e0e10, #0b0b0c);
-    --ui-header-glass: linear-gradient(180deg, #19191b, #161618);
-    --ui-control-fill: linear-gradient(180deg, #3e3e44, #34343a);
-    --ui-scrim: 0 0 0 / 0.65;
-  }
-}
-
-/* ------------------------------------------------------------------ Tailwind palettes */
-/* Neutral fills (gray/slate/zinc/neutral/stone/accent share them): Apple's system grays. */
-:root.flat-theme {
-  --theme-color-gray-50: 249 249 251;
-  --theme-color-gray-100: 242 242 247;
-  --theme-color-gray-200: 229 229 234;
-  --theme-color-gray-300: 209 209 214;
-  --theme-color-gray-400: 174 174 178;
-  --theme-color-gray-500: 142 142 147;
-  --theme-color-gray-600: 99 99 102;
-  --theme-color-gray-700: 72 72 74;
-  --theme-color-gray-800: 44 44 46;
-  --theme-color-gray-900: 29 29 31;
-  --theme-color-gray-950: 17 17 19;
-  /* lines: hairline, strong, focus */
-  --theme-line-gray-100: 236 236 240;
-  --theme-line-gray-200: 229 229 234;
-  --theme-line-gray-300: 222 222 227;
-  --theme-line-gray-400: 209 209 214;
-  /* text: every shade that upstream uses for secondary text reads at >= 4.5:1 on the canvas */
-  --theme-text-gray-400: 102 102 107;
-  --theme-text-gray-500: 99 99 104;
-  --theme-text-gray-600: 86 86 91;
-  --theme-text-gray-700: 58 58 60;
-  --theme-text-gray-800: 44 44 46;
-  --theme-text-gray-900: 29 29 31;
-  --theme-text-gray-950: 29 29 31;
-
-  /* dark-mode palette (upstream `dark-*`): layered near-black greys (950 = the backdrop #0B0B0C, 800 = the
-     card #161618, 700 = raised #1F1F22); fills, then lines and text */
-  --theme-color-dark-50: 245 245 247;
-  --theme-color-dark-100: 229 229 234;
-  --theme-color-dark-200: 199 199 204;
-  --theme-color-dark-300: 142 142 147;
-  --theme-color-dark-400: 99 99 104;
-  --theme-color-dark-500: 64 64 68;
-  --theme-color-dark-600: 48 48 52;
-  --theme-color-dark-700: 31 31 34;
-  --theme-color-dark-800: 22 22 24;
-  --theme-color-dark-900: 16 16 18;
-  --theme-color-dark-950: 11 11 12;
-  --theme-line-dark-400: 84 84 88;
-  --theme-line-dark-500: 72 72 76;
-  --theme-line-dark-600: 58 58 62;
-  --theme-line-dark-700: 44 44 48;
-  --theme-line-dark-800: 36 36 40;
-  --theme-line-dark-900: 30 30 33;
-  --theme-line-dark-950: 24 24 26;
-  --theme-text-dark-100: 245 245 247;
-  --theme-text-dark-200: 229 229 234;
-  --theme-text-dark-300: 199 199 204;
-  --theme-text-dark-400: 168 168 173;
-  --theme-text-dark-500: 152 152 157;
-  --theme-text-dark-600: 142 142 147;
-  --theme-text-dark-700: 72 72 74;
-  --theme-text-dark-800: 58 58 60;
-  --theme-text-dark-900: 44 44 46;
-  --theme-text-dark-950: 28 28 30;
-
-  /* primary = Apple blue (apple.com #0071E3 fills, #0066CC text) */
-  --theme-color-primary-50: 240 247 254;
-  --theme-color-primary-100: 230 241 252;
-  --theme-color-primary-200: 204 227 249;
-  --theme-color-primary-300: 153 198 244;
-  --theme-color-primary-400: 64 148 234;
-  --theme-color-primary-500: 0 113 227;
-  --theme-color-primary-600: 0 110 219;
-  --theme-color-primary-700: 0 98 196;
-  --theme-color-primary-800: 0 83 166;
-  --theme-color-primary-900: 0 62 122;
-  --theme-color-primary-950: 0 41 82;
-  /* blue text keeps >= 4.5:1 on white, the canvas and the blue tints */
-  --theme-text-primary-400: 0 102 204;
-  --theme-text-primary-500: 0 102 204;
-  --theme-text-primary-600: 0 102 204;
-  --theme-text-primary-700: 0 90 184;
-  --theme-text-primary-800: 0 78 160;
-  --theme-text-primary-900: 0 62 128;
-  --theme-ring-primary: 0 113 227;
-}
-
-:root.flat-theme.dark {
-  /* Upstream pairs light text shades (100-500) with `dark:`; the plain 600-900 shades appear only
-     where a template has no dark variant, so they resolve to readable light grays here. */
-  --theme-text-gray-100: 245 245 247;
-  --theme-text-gray-200: 229 229 234;
-  --theme-text-gray-300: 209 209 214;
-  --theme-text-gray-600: 174 174 178;
-  --theme-text-gray-700: 199 199 204;
-  --theme-text-gray-800: 229 229 234;
-  --theme-text-gray-900: 245 245 247;
-  --theme-text-gray-950: 245 245 247;
-  --theme-line-gray-100: 36 36 40;
-  --theme-line-gray-200: 44 44 48;
-  --theme-line-gray-300: 58 58 62;
-  --theme-line-gray-400: 84 84 88;
-  /* blue stays the fill; tints are dark blue, text is the light blue */
-  --theme-color-primary-50: 19 35 54;
-  --theme-color-primary-100: 25 47 71;
-  --theme-color-primary-200: 30 62 98;
-  --theme-color-primary-300: 38 84 135;
-  --theme-color-primary-400: 10 132 255;
-  --theme-color-primary-900: 22 56 96;
-  --theme-color-primary-950: 16 36 60;
-  --theme-text-primary-50: 235 244 255;
-  --theme-text-primary-100: 214 234 255;
-  --theme-text-primary-200: 179 216 255;
-  --theme-text-primary-900: 179 216 255;
-  --theme-text-primary-950: 214 234 255;
-  --theme-ring-primary: 10 132 255;
-}
-
-/* Secondary gray and blue text on a dark surface: the whole dark theme and, in the light theme, boxes that
-   stay dark there too (terminal output, dark tooltips and code blocks), marked `theme-dark-surface`; only
-   for boxes without light surfaces inside. Every shade upstream uses on them reads >= 4.5:1 on #2C2C2E. */
-:root.flat-theme.dark,
-:root.flat-theme .theme-dark-surface {
-  --theme-text-gray-400: 168 168 173;
-  --theme-text-gray-500: 168 168 173;
-  --theme-text-primary-300: 104 184 255;
-  --theme-text-primary-400: 41 151 255;
-  --theme-text-primary-500: 41 151 255;
-  --theme-text-primary-600: 41 151 255;
-  --theme-text-primary-700: 77 169 255;
-  --theme-text-primary-800: 128 193 255;
-}
-
-/* hue families (generated by the preview tooling from Apple system colours; text roles measured) */
-:root.flat-theme {
-  --theme-color-danger-50: 255 241 241;
-  --theme-color-danger-100: 255 231 230;
-  --theme-color-danger-200: 255 212 209;
-  --theme-color-danger-300: 255 181 176;
-  --theme-color-danger-400: 255 114 106;
-  --theme-color-danger-500: 255 59 48;
-  --theme-color-danger-600: 215 0 21;
-  --theme-color-danger-700: 189 0 1;
-  --theme-color-danger-800: 160 0 0;
-  --theme-color-danger-900: 126 0 0;
-  --theme-color-danger-950: 91 0 0;
-  --theme-text-danger-400: 214 0 19;
-  --theme-text-danger-500: 214 0 19;
-  --theme-text-danger-600: 214 0 19;
-  --theme-text-danger-700: 192 0 4;
-  --theme-color-warning-50: 255 248 237;
-  --theme-color-warning-100: 255 242 224;
-  --theme-color-warning-200: 255 232 199;
-  --theme-color-warning-300: 255 215 158;
-  --theme-color-warning-400: 255 179 71;
-  --theme-color-warning-500: 255 149 0;
-  --theme-color-warning-600: 178 80 0;
-  --theme-color-warning-700: 155 64 0;
-  --theme-color-warning-800: 131 52 0;
-  --theme-color-warning-900: 102 38 0;
-  --theme-color-warning-950: 72 22 0;
-  --theme-text-warning-400: 178 80 0;
-  --theme-text-warning-500: 178 80 0;
-  --theme-text-warning-600: 178 80 0;
-  --theme-text-warning-700: 159 67 0;
-  --theme-color-info-50: 237 246 255;
-  --theme-color-info-100: 224 239 255;
-  --theme-color-info-200: 199 226 255;
-  --theme-color-info-300: 158 204 255;
-  --theme-color-info-400: 71 159 255;
-  --theme-color-info-500: 0 122 255;
-  --theme-color-info-600: 0 102 204;
-  --theme-color-info-700: 0 84 179;
-  --theme-color-info-800: 0 68 150;
-  --theme-color-info-900: 0 50 117;
-  --theme-color-info-950: 0 30 83;
-  --theme-text-info-400: 0 102 204;
-  --theme-text-info-500: 0 102 204;
-  --theme-text-info-600: 0 102 204;
-  --theme-text-info-700: 0 87 182;
-  --theme-color-success-50: 241 251 243;
-  --theme-color-success-100: 231 248 235;
-  --theme-color-success-200: 210 243 218;
-  --theme-color-success-300: 178 234 192;
-  --theme-color-success-400: 109 215 135;
-  --theme-color-success-500: 52 199 89;
-  --theme-color-success-600: 31 134 57;
-  --theme-color-success-700: 10 115 43;
-  --theme-color-success-800: 2 96 33;
-  --theme-color-success-900: 0 74 23;
-  --theme-color-success-950: 0 50 10;
-  --theme-text-success-400: 18 127 50;
-  --theme-text-success-500: 18 127 50;
-  --theme-text-success-600: 18 127 50;
-  --theme-text-success-700: 0 111 39;
-  --theme-color-purple-50: 249 243 253;
-  --theme-color-purple-100: 245 234 251;
-  --theme-color-purple-200: 237 217 248;
-  --theme-color-purple-300: 225 189 242;
-  --theme-color-purple-400: 197 130 231;
-  --theme-color-purple-500: 175 82 222;
-  --theme-color-purple-600: 137 68 171;
-  --theme-color-purple-700: 117 53 149;
-  --theme-color-purple-800: 97 40 124;
-  --theme-color-purple-900: 74 28 95;
-  --theme-color-purple-950: 49 12 66;
-  --theme-text-purple-400: 137 68 171;
-  --theme-text-purple-500: 137 68 171;
-  --theme-text-purple-600: 137 68 171;
-  --theme-text-purple-700: 120 56 152;
-  --theme-color-teal-50: 241 249 251;
-  --theme-color-teal-100: 230 246 248;
-  --theme-color-teal-200: 209 238 243;
-  --theme-color-teal-300: 176 225 234;
-  --theme-color-teal-400: 106 198 215;
-  --theme-color-teal-500: 48 176 199;
-  --theme-color-teal-600: 0 113 164;
-  --theme-color-teal-700: 0 95 142;
-  --theme-color-teal-800: 0 78 119;
-  --theme-color-teal-900: 0 58 91;
-  --theme-color-teal-950: 0 37 63;
-  --theme-text-teal-400: 0 113 164;
-  --theme-text-teal-500: 0 113 164;
-  --theme-text-teal-600: 0 113 164;
-  --theme-text-teal-700: 0 98 145;
-  --theme-color-indigo-50: 243 243 252;
-  --theme-color-indigo-100: 235 235 250;
-  --theme-color-indigo-200: 218 218 246;
-  --theme-color-indigo-300: 192 191 239;
-  --theme-color-indigo-400: 135 133 225;
-  --theme-color-indigo-500: 88 86 214;
-  --theme-color-indigo-600: 54 52 163;
-  --theme-color-indigo-700: 41 35 139;
-  --theme-color-indigo-800: 30 20 112;
-  --theme-color-indigo-900: 17 4 80;
-  --theme-color-indigo-950: 6 0 49;
-  --theme-text-indigo-400: 54 52 163;
-  --theme-text-indigo-500: 54 52 163;
-  --theme-text-indigo-600: 54 52 163;
-  --theme-text-indigo-700: 43 38 142;
-  --theme-color-pink-50: 255 240 243;
-  --theme-color-pink-100: 255 230 235;
-  --theme-color-pink-200: 255 209 218;
-  --theme-color-pink-300: 255 175 190;
-  --theme-color-pink-400: 255 104 133;
-  --theme-color-pink-500: 255 45 85;
-  --theme-color-pink-600: 211 15 69;
-  --theme-color-pink-700: 185 0 55;
-  --theme-color-pink-800: 157 0 44;
-  --theme-color-pink-900: 124 0 32;
-  --theme-color-pink-950: 89 0 18;
-  --theme-text-pink-400: 208 6 67;
-  --theme-text-pink-500: 208 6 67;
-  --theme-text-pink-600: 208 6 67;
-  --theme-text-pink-700: 186 0 56;
-}
-
-:root.flat-theme.dark,
-:root.flat-theme .theme-dark-surface {
-  --theme-text-danger-300: 255 123 106;
-  --theme-text-danger-400: 255 96 81;
-  --theme-text-danger-500: 255 96 81;
-  --theme-text-danger-600: 255 96 81;
-  --theme-text-danger-700: 255 113 96;
-  --theme-text-danger-800: 255 129 112;
-  --theme-text-warning-300: 255 185 61;
-  --theme-text-warning-400: 255 159 10;
-  --theme-text-warning-500: 255 159 10;
-  --theme-text-warning-600: 255 159 10;
-  --theme-text-warning-700: 255 175 47;
-  --theme-text-warning-800: 255 192 70;
-  --theme-text-info-300: 75 179 255;
-  --theme-text-info-400: 45 153 255;
-  --theme-text-info-500: 45 153 255;
-  --theme-text-info-600: 45 153 255;
-  --theme-text-info-700: 65 169 255;
-  --theme-text-info-800: 83 186 255;
-  --theme-text-success-300: 84 236 114;
-  --theme-text-success-400: 48 209 88;
-  --theme-text-success-500: 48 209 88;
-  --theme-text-success-600: 48 209 88;
-  --theme-text-success-700: 72 226 104;
-  --theme-text-success-800: 92 243 120;
-  --theme-text-purple-300: 234 132 255;
-  --theme-text-purple-400: 207 106 255;
-  --theme-text-purple-500: 207 106 255;
-  --theme-text-purple-600: 207 106 255;
-  --theme-text-purple-700: 224 122 255;
-  --theme-text-purple-800: 240 139 255;
-  --theme-text-teal-300: 96 226 251;
-  --theme-text-teal-400: 64 200 224;
-  --theme-text-teal-500: 64 200 224;
-  --theme-text-teal-600: 64 200 224;
-  --theme-text-teal-700: 85 216 241;
-  --theme-text-teal-800: 104 233 255;
-  --theme-text-indigo-300: 154 162 255;
-  --theme-text-indigo-400: 131 136 255;
-  --theme-text-indigo-500: 131 136 255;
-  --theme-text-indigo-600: 131 136 255;
-  --theme-text-indigo-700: 146 152 255;
-  --theme-text-indigo-800: 161 168 255;
-  --theme-text-pink-300: 255 116 144;
-  --theme-text-pink-400: 255 89 120;
-  --theme-text-pink-500: 255 89 120;
-  --theme-text-pink-600: 255 89 120;
-  --theme-text-pink-700: 255 106 135;
-  --theme-text-pink-800: 255 123 150;
-}
-
-/* chart series */
-:root.flat-theme {
-  --theme-chart-series-1: #007aff;
-  --theme-chart-series-2: #00ac3e;
-  --theme-chart-series-3: #e07900;
-  --theme-chart-series-4: #ff3b30;
-  --theme-chart-series-5: #af52de;
-  --theme-chart-series-6: #ff2d55;
-  --theme-chart-series-7: #1aa3ba;
-  --theme-chart-series-8: #a2845e;
-  --theme-chart-series-9: #5856d6;
-  --theme-chart-series-10: #00a69d;
-  --theme-chart-series-11: #1b9fd7;
-  --theme-chart-series-12: #be8d00;
-}
-
-:root.flat-theme.dark {
-  --theme-chart-series-1: #0a84ff;
-  --theme-chart-series-2: #30d158;
-  --theme-chart-series-3: #ff9f0a;
-  --theme-chart-series-4: #ff453a;
-  --theme-chart-series-5: #bf5af2;
-  --theme-chart-series-6: #ff375f;
-  --theme-chart-series-7: #40c8e0;
-  --theme-chart-series-8: #ac8e68;
-  --theme-chart-series-9: #5e5ce6;
-  --theme-chart-series-10: #63e6e2;
-  --theme-chart-series-11: #64d2ff;
-  --theme-chart-series-12: #ffd60a;
-}
-
-/* ------------------------------------------------------------------ shape, depth, motion */
-:root.flat-theme {
-  --theme-radius-sm: 4px;
-  --theme-radius-default: 6px;
-  --theme-radius-md: 8px;
-  --theme-radius-lg: 10px;
-  --theme-radius-xl: 12px;
-  --theme-radius-2xl: 20px;
-  --theme-radius-3xl: 24px;
-  --theme-radius-4xl: 28px;
-  /* cards carry smooth layered shadows; popovers, menus and dialogs float */
-  --theme-shadow-sm: var(--ui-shadow-xs);
-  --theme-shadow-default: var(--ui-shadow-xs);
-  --theme-shadow-md: var(--ui-shadow-xs);
-  --theme-shadow-lg: var(--ui-shadow-popover);
-  --theme-shadow-xl: var(--ui-shadow-popover);
-  --theme-shadow-2xl: var(--ui-shadow-overlay);
-  --theme-shadow-inner: none;
-  --theme-shadow-glass: var(--ui-shadow-card);
-  --theme-shadow-glass-sm: var(--ui-shadow-card);
-  --theme-shadow-glow: none;
-  --theme-shadow-glow-lg: none;
-  --theme-shadow-card: var(--ui-shadow-card);
-  --theme-shadow-card-hover: var(--ui-shadow-hover);
-  --theme-shadow-inner-glow: none;
-  --theme-shadow-outline: 0 0 0 1px rgb(var(--ui-line));
-  --theme-background-gradient-radial: none;
-  --theme-background-gradient-primary: linear-gradient(rgb(var(--ui-primary)), rgb(var(--ui-primary)));
-  --theme-background-gradient-dark: none;
-  --theme-background-gradient-glass: none;
-  --theme-background-mesh-gradient: var(--ui-backdrop);
-  --theme-backdrop-blur-xs: 0px;
-  --theme-backdrop-blur-sm: 0px;
-  --theme-backdrop-blur-default: 0px;
-  --theme-backdrop-blur-md: 0px;
-  --theme-backdrop-blur-lg: 0px;
-  --theme-backdrop-blur-xl: 0px;
-  --theme-backdrop-blur-2xl: 0px;
-  --theme-backdrop-blur-3xl: 0px;
-  --theme-scale-105: 1;
-  --theme-scale-110: 1;
-  --theme-scale-125: 1;
-  --theme-scale-150: 1;
-  --theme-animation-fade-in: flatThemeFadeIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-  --theme-animation-slide-up: flatThemeSlideUp 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
-  --theme-animation-slide-down: flatThemeSlideDown 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
-  --theme-animation-slide-in-right: flatThemeSlideInRight 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
-  --theme-animation-scale-in: flatThemeScaleIn 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
-  --theme-animation-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  --theme-animation-shimmer: flatThemeShimmer 2s linear infinite;
-  --theme-animation-glow: none;
-}
-
-/* Gradients render as their start colour. Stops belong to each element, so resolve locally. */
-.flat-theme *, .flat-theme ::before, .flat-theme ::after {
-  --theme-background-gradient-to-t: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
-  --theme-background-gradient-to-tr: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
-  --theme-background-gradient-to-r: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
-  --theme-background-gradient-to-br: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
-  --theme-background-gradient-to-b: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
-  --theme-background-gradient-to-bl: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
-  --theme-background-gradient-to-l: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
-  --theme-background-gradient-to-tl: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-from));
-}
-
-@keyframes flatThemeFadeIn {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-@keyframes flatThemeSlideUp {
-  0% { opacity: 0; transform: translateY(6px); }
-  100% { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes flatThemeSlideDown {
-  0% { opacity: 0; transform: translateY(-6px); }
-  100% { opacity: 1; transform: translateY(0); }
-}
-
-@keyframes flatThemeSlideInRight {
-  0% { opacity: 0; transform: translateX(6px); }
-  100% { opacity: 1; transform: translateX(0); }
-}
-
-@keyframes flatThemeScaleIn {
-  0% { opacity: 0; transform: scale(0.97); }
-  100% { opacity: 1; transform: scale(1); }
-}
-
-@keyframes flatThemeShimmer {
-  0% { background-position: -200% 0; }
-  100% { background-position: 200% 0; }
-}
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index 057695343395..9c130be2b171 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -1,6 +1,6 @@
 /* Role tokens shared by the component recipes, shared components and the few fork-only
    semantic utilities (bg-surface, text-muted, border-line, ...). These defaults reproduce the
-   upstream (v0.2.8) look; styles/flat-theme.css overrides them while <html> carries the
+   upstream (v0.2.8) look; styles/console/tokens.css overrides them while <html> carries the
    flat-theme class (public setting flat_theme_enabled). Colour values are RGB channels so the
    Tailwind opacity modifiers keep working. */
 :root {
@@ -10,15 +10,22 @@
   --ui-sunk: 249 250 251;
   --ui-raised: 243 244 246;
   --ui-hover: 243 244 246;
+  --ui-active: 229 231 235;
   --ui-line: 229 231 235;
   --ui-line-strong: 209 213 219;
   --ui-line-focus: 156 163 175;
+  --ui-control-line: 209 213 219;
   --ui-ink: 17 24 39;
+  --ui-ink-soft: 55 65 81;
+  --ui-on-ink: 255 255 255;
   --ui-muted: 107 114 128;
   --ui-faint: 156 163 175;
+  --ui-label: 107 114 128;
   --ui-primary: 20 184 166;
   --ui-primary-hover: 13 148 136;
+  --ui-primary-soft: 240 253 250;
   --ui-on-primary: 255 255 255;
+  --ui-focus: 20 184 166;
   --ui-success: 16 185 129;
   --ui-success-soft: 236 253 245;
   --ui-danger: 239 68 68;
@@ -65,12 +72,19 @@
   --ui-sunk: 15 23 42;
   --ui-raised: 51 65 85;
   --ui-hover: 51 65 85;
+  --ui-active: 71 85 105;
   --ui-line: 51 65 85;
   --ui-line-strong: 71 85 105;
   --ui-line-focus: 100 116 139;
+  --ui-control-line: 71 85 105;
   --ui-ink: 243 244 246;
+  --ui-ink-soft: 209 213 219;
+  --ui-on-ink: 17 24 39;
   --ui-muted: 148 163 184;
   --ui-faint: 100 116 139;
+  --ui-label: 148 163 184;
+  --ui-primary-soft: 27 52 64;
+  --ui-focus: 45 212 191;
   --ui-success-soft: 6 78 59;
   --ui-danger-soft: 127 29 29;
   --ui-warning-soft: 120 53 15;
diff --git a/frontend/src/utils/flatTheme.ts b/frontend/src/utils/flatTheme.ts
index acea0691d344..83a2f39e8663 100644
--- a/frontend/src/utils/flatTheme.ts
+++ b/frontend/src/utils/flatTheme.ts
@@ -4,8 +4,8 @@ const active = ref(false)
 
 // Console theme: a text field with no placeholder is given a blank one (" ") so CSS can tell an empty
 // field (:placeholder-shown) from a filled one. An empty field whose label sits outside the box is
-// identified by its border alone, and the console theme draws that border with the 3:1 control line
-// (style.css, "Text fields with no placeholder"). Nothing is visible: the placeholder is a space.
+// identified by its border alone, and the console theme draws that border with the 3:1 form-control line
+// (styles/console/behaviour.css, B3.2). Nothing is visible: the placeholder is a space.
 // An empty placeholder (placeholder="") is treated like a missing one: browsers disagree on whether it
 // counts as :placeholder-shown. Fields are re-checked when their placeholder or class changes later.
 const BLANK_PLACEHOLDER = ' '
@@ -54,12 +54,13 @@ function watchUnlabelledFields(on: boolean): void {
 }
 
 // MiSans (Chinese text of the console theme) is not shipped with the app: it is loaded from Xiaomi's
-// official font service (one stylesheet with both weights, unicode-range slices, font-display: swap)
-// while the console theme is on, and removed when it is switched off. The CSP allows both hosts
-// (backend config DefaultCSPPolicy). If the service is unreachable, the font stack in flat-theme.css
-// falls back to PingFang SC / Microsoft YaHei and the other system fonts.
+// official font service (one stylesheet with the 400, 500 and 600 weights that match Geist's strokes,
+// unicode-range slices, font-display: swap) while the console theme is on, and removed when it is
+// switched off. The CSP allows both hosts (backend config DefaultCSPPolicy). If the service is
+// unreachable, the font stack in styles/console/tokens.css falls back to PingFang SC / Microsoft YaHei
+// and the other system fonts.
 const MISANS_FONT_ORIGIN = 'https://cdn-file.hyperos.mi.com'
-const MISANS_STYLESHEET = 'https://font.sec.miui.com/font/css?family=MiSans:400,500:Chinese_Simplify,Latin'
+const MISANS_STYLESHEET = 'https://font.sec.miui.com/font/css?family=MiSans:400,500,600:Chinese_Simplify,Latin'
 
 function syncMiSansStylesheet(on: boolean): void {
   if (typeof document === 'undefined' || !document.head) return
@@ -81,7 +82,7 @@ function syncMiSansStylesheet(on: boolean): void {
   document.head.append(preconnect, stylesheet)
 }
 
-// The console theme (styles/flat-theme.css) applies while <html> carries the flat-theme class.
+// The console theme (styles/console/*.css) applies while <html> carries the flat-theme class.
 // It follows the public flat_theme_enabled setting and stays on when the setting is absent.
 export function applyFlatTheme(enabled: boolean | undefined): void {
   active.value = enabled !== false
@@ -90,5 +91,5 @@ export function applyFlatTheme(enabled: boolean | undefined): void {
   syncMiSansStylesheet(active.value)
 }
 
-/** Reactive: true while the console theme is on (identity colours turn neutral). */
+/** Reactive: true while the console theme is on. */
 export const flatThemeActive = readonly(active)
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index 1ffb0560ab34..bde794ba0b5c 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -16,7 +16,7 @@
   <div
     v-else-if="compactHomeEnabled"
     data-testid="compact-home"
-    class="public-texture relative flex min-h-screen flex-col bg-canvas text-gray-900 dark:bg-dark-950 dark:text-white"
+    class="flex min-h-screen flex-col bg-gray-50 text-gray-900 dark:bg-dark-950 dark:text-white"
   >
     <header class="border-b border-gray-200 px-4 py-4 sm:px-6 dark:border-dark-800">
       <nav class="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-3 sm:gap-4">
@@ -93,10 +93,29 @@
   <!-- Default Home Page -->
   <div
     v-else
-    class="public-texture relative flex min-h-screen flex-col overflow-hidden bg-canvas dark:bg-dark-950"
+    class="relative flex min-h-screen flex-col overflow-hidden bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100 dark:from-dark-950 dark:via-dark-900 dark:to-dark-950"
   >
+    <!-- Background Decorations -->
+    <div class="pointer-events-none absolute inset-0 overflow-hidden">
+      <div
+        class="absolute -right-40 -top-40 h-96 w-96 rounded-full bg-primary-400/20 blur-3xl"
+      ></div>
+      <div
+        class="absolute -bottom-40 -left-40 h-96 w-96 rounded-full bg-primary-500/15 blur-3xl"
+      ></div>
+      <div
+        class="absolute left-1/3 top-1/4 h-72 w-72 rounded-full bg-primary-300/10 blur-3xl"
+      ></div>
+      <div
+        class="absolute bottom-1/4 right-1/4 h-64 w-64 rounded-full bg-primary-400/10 blur-3xl"
+      ></div>
+      <div
+        class="absolute inset-0 bg-[linear-gradient(rgba(20,184,166,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(20,184,166,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"
+      ></div>
+    </div>
+
     <!-- Header -->
-    <header class="relative z-20 border-b border-line px-6 py-4">
+    <header class="relative z-20 px-6 py-4">
       <nav class="mx-auto flex max-w-6xl items-center justify-between">
         <!-- Logo -->
         <div class="flex items-center">
@@ -281,7 +300,7 @@
             class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
           >
             <div
-              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-surface text-ink border border-line"
+              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg shadow-blue-500/30 transition-transform group-hover:scale-110"
             >
               <Icon name="server" size="lg" class="text-white" />
             </div>
@@ -298,10 +317,10 @@
             class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
           >
             <div
-              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-surface text-ink border border-line"
+              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-primary-500 to-primary-600 shadow-lg shadow-primary-500/30 transition-transform group-hover:scale-110"
             >
               <svg
-                class="h-6 w-6 text-primary-600 dark:text-primary-400"
+                class="h-6 w-6 text-white"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -327,10 +346,10 @@
             class="group rounded-2xl border border-gray-200/50 bg-white/60 p-6 backdrop-blur-sm transition-all duration-300 hover:shadow-xl hover:shadow-primary-500/10 dark:border-dark-700/50 dark:bg-dark-800/60"
           >
             <div
-              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-surface text-ink border border-line"
+              class="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 shadow-lg shadow-purple-500/30 transition-transform group-hover:scale-110"
             >
               <svg
-                class="h-6 w-6 text-primary-600 dark:text-primary-400"
+                class="h-6 w-6 text-white"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -428,7 +447,7 @@
             class="flex items-center gap-2 rounded-xl border border-gray-200/50 bg-white/40 px-5 py-3 opacity-60 backdrop-blur-sm dark:border-dark-700/50 dark:bg-dark-800/40"
           >
             <div
-              class="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-500"
+              class="flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-gray-500 to-gray-600"
             >
               <span class="text-xs font-bold text-white">+</span>
             </div>
@@ -570,19 +589,20 @@ onMounted(() => {
 
 /* Terminal Window */
 .terminal-window {
-  width: min(420px, calc(100vw - 3rem));
-  background: rgb(var(--ui-surface));
-  border: 1px solid rgb(var(--ui-line));
-  color: rgb(var(--ui-ink));
+  width: 420px;
+  background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
   border-radius: 14px;
-  box-shadow: none;
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.4),
+    0 0 0 1px rgba(255, 255, 255, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
   overflow: hidden;
-  transform: none;
+  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg);
   transition: transform 0.3s ease;
 }
 
 .terminal-window:hover {
-  transform: none;
+  transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateY(-4px);
 }
 
 /* Terminal Header */
@@ -590,8 +610,8 @@ onMounted(() => {
   display: flex;
   align-items: center;
   padding: 12px 16px;
-  background: rgb(var(--ui-raised));
-  border-bottom: 1px solid rgb(var(--ui-line));
+  background: rgba(30, 41, 59, 0.8);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .terminal-buttons {
@@ -620,14 +640,14 @@ onMounted(() => {
   text-align: center;
   font-size: 12px;
   font-family: ui-monospace, monospace;
-  color: rgb(var(--ui-muted));
+  color: #64748b;
   margin-right: 52px;
 }
 
 /* Terminal Body */
 .terminal-body {
   padding: 20px 24px;
-  font-family: ui-monospace, monospace;
+  font-family: ui-monospace, 'Fira Code', monospace;
   font-size: 14px;
   line-height: 2;
 }
@@ -638,20 +658,20 @@ onMounted(() => {
   gap: 8px;
   flex-wrap: wrap;
   opacity: 0;
-  animation: line-appear 0.15s ease forwards;
+  animation: line-appear 0.5s ease forwards;
 }
 
 .line-1 {
-  animation-delay: 0s;
+  animation-delay: 0.3s;
 }
 .line-2 {
-  animation-delay: 0.1s;
+  animation-delay: 1s;
 }
 .line-3 {
-  animation-delay: 0.15s;
+  animation-delay: 1.8s;
 }
 .line-4 {
-  animation-delay: 0.2s;
+  animation-delay: 2.5s;
 }
 
 @keyframes line-appear {
@@ -666,31 +686,31 @@ onMounted(() => {
 }
 
 .code-prompt {
-  color: var(--ui-link);
+  color: #22c55e;
   font-weight: bold;
 }
 .code-cmd {
-  color: rgb(var(--ui-ink));
+  color: #38bdf8;
 }
 .code-flag {
-  color: rgb(var(--ui-muted));
+  color: #a78bfa;
 }
 .code-url {
-  color: var(--ui-link);
+  color: #14b8a6;
 }
 .code-comment {
-  color: rgb(var(--ui-muted));
+  color: #64748b;
   font-style: italic;
 }
 .code-success {
-  color: var(--ui-link);
+  color: #22c55e;
   background: rgba(34, 197, 94, 0.15);
   padding: 2px 8px;
   border-radius: 4px;
   font-weight: 600;
 }
 .code-response {
-  color: rgb(var(--ui-ink));
+  color: #fbbf24;
 }
 
 /* Blinking Cursor */
@@ -715,6 +735,10 @@ onMounted(() => {
 
 /* Dark mode adjustments */
 :deep(.dark) .terminal-window {
-  box-shadow: none;
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.6),
+    0 0 0 1px rgba(20, 184, 166, 0.2),
+    0 0 40px rgba(20, 184, 166, 0.1),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
 }
 </style>
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 02ed5710f8fd..2e0e76bfc0c4 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -2,17 +2,17 @@
  * Tailwind mapping for the console theme.
  *
  * Every palette, radius, shadow, gradient, blur and motion value resolves through a CSS variable
- * whose fallback is the upstream (v0.2.8) value. styles/flat-theme.css defines those variables
+ * whose fallback is the upstream (v0.2.8) value. styles/console/tokens.css defines those variables
  * while <html> carries `flat-theme` (public setting flat_theme_enabled), so upstream class names
  * render the console look and switching the setting off restores the upstream look.
  *
- * Colour roles: neutral families (gray/slate/zinc/neutral/stone, dark) resolve per utility
- * (fill, line, text) because upstream uses one shade for several roles; hue families fold into
- * eight families named after Apple's system colours (danger = red, warning = orange, info = blue,
- * success = green, teal, indigo, purple, pink) with a separate text role; `primary` is the accent
- * (Apple blue in the console theme). Solid primary fills export
- * `--theme-on-fill`, which `text-white` and `bg-white` read, so white text or knobs on a primary
- * fill always use the theme's on-primary colour.
+ * Colour roles: neutral families (gray/slate/zinc/neutral/stone, accent, dark) resolve per utility
+ * (fill, line, text) because upstream uses one shade for several roles. Hue families fold into the
+ * five status families of the console (danger, warning, info, success, purple), each with a fill
+ * and a text role, so upstream's hues render as the console's restrained status colours; a hue that
+ * needs its own identity again gets its own row in HUE_FAMILIES and its own variables in the tokens.
+ * `primary` is the console accent. Solid primary fills export `--theme-on-fill`, which `text-white`
+ * and `bg-white` read, so white text or knobs on a primary fill always use the on-accent colour.
  */
 import defaultColors from 'tailwindcss/colors'
 import plugin from 'tailwindcss/plugin'
@@ -33,13 +33,10 @@ const UPSTREAM_SLATE = {
 const NEUTRAL_FAMILIES = { gray: 'gray', slate: 'gray', zinc: 'gray', neutral: 'gray', stone: 'gray' }
 const HUE_FAMILIES = {
   red: 'danger', rose: 'danger',
-  amber: 'warning', yellow: 'warning', orange: 'warning',
-  blue: 'info',
-  green: 'success', emerald: 'success', lime: 'success',
-  teal: 'teal', cyan: 'teal', sky: 'teal',
-  indigo: 'indigo',
-  purple: 'purple', violet: 'purple', fuchsia: 'purple',
-  pink: 'pink'
+  orange: 'warning', amber: 'warning', yellow: 'warning',
+  blue: 'info', sky: 'info', cyan: 'info', indigo: 'info',
+  green: 'success', emerald: 'success', teal: 'success', lime: 'success',
+  purple: 'purple', violet: 'purple', fuchsia: 'purple', pink: 'purple'
 }
 
 function channels(hex) {

From ec9385e81edb72d56bd6f2cec2c67c80fccef035 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Mon, 28 Sep 2026 23:28:28 +0800
Subject: [PATCH 02/11] wip(ui-el): wave 1 - shell, controls, data, overlays,
 accounts page, public pages

Experiential Labs console language built from live measurements:
headerless content row and 240px sidebar with Lucide icons; ink primary
buttons, 30px controls, native checkboxes, segmented controls; dense
single-line tables with mono uppercase headers, monochrome identity
chips, 76px KPI cards, reference chart defaults; light popovers, modal
and menu recipes with the reference shadows; accounts page toolbar in
two rows with category and bulk menus; signin-style auth pages with a
pixel grid; accounts columns in upstream order.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../admin/account/AccountBulkActionsBar.vue   |    2 +-
 .../admin/account/AccountBulkMenu.vue         |  123 +
 .../admin/account/AccountConsoleFilters.vue   |   39 +-
 .../admin/account/AccountFolderBar.vue        |   72 +-
 .../admin/account/AccountViewModeSwitcher.vue |    1 +
 .../src/components/charts/TokenUsageTrend.vue |   10 +-
 .../components/common/AnnouncementBell.vue    |    3 +
 .../components/common/AnnouncementPopup.vue   |    1 +
 .../src/components/common/ConfirmDialog.vue   |    2 +
 frontend/src/components/common/DataTable.vue  |    9 +-
 frontend/src/components/common/GroupBadge.vue |    1 +
 .../src/components/common/HelpTooltip.vue     |    1 +
 .../src/components/common/LocaleSwitcher.vue  |    2 +
 frontend/src/components/common/Pagination.vue |    1 +
 .../components/common/PlatformTypeBadge.vue   |    2 +-
 .../src/components/common/SearchInput.vue     |    6 +-
 frontend/src/components/common/Skeleton.vue   |    1 +
 .../src/components/common/StatusBadge.vue     |    2 +-
 frontend/src/components/common/Toast.vue      |    2 +
 frontend/src/components/icons/Icon.vue        |   20 +-
 frontend/src/components/icons/lucide.ts       |   36 +-
 frontend/src/components/layout/AppHeader.vue  |   17 +-
 frontend/src/components/layout/AppSidebar.vue |   17 +
 frontend/src/components/layout/AuthLayout.vue |    6 +-
 .../src/components/layout/AuthPixelGrid.vue   |  299 +++
 .../user/dashboard/UserDashboardCharts.vue    |    2 +-
 .../src/composables/usePresentationColors.ts  |  251 +-
 frontend/src/style.css                        |  357 +++
 frontend/src/styles/console/behaviour.css     |   31 +-
 frontend/src/styles/console/controls.css      |  775 +++++-
 frontend/src/styles/console/data.css          | 1335 +++++++++-
 frontend/src/styles/console/overlays.css      | 1737 +++++++++++-
 .../src/styles/console/pages/accounts.css     |  894 ++++++-
 .../console/pages/settings-ops-public.css     | 2358 +++++++++++++++++
 frontend/src/styles/console/shell.css         |  753 +++++-
 frontend/src/styles/console/tokens.css        |    4 +-
 frontend/src/utils/platformColors.ts          |    2 +-
 frontend/src/views/HomeView.vue               |    1 +
 frontend/src/views/KeyUsageView.vue           |    2 +-
 frontend/src/views/NotFoundView.vue           |    1 +
 frontend/src/views/admin/AccountsView.vue     |   87 +-
 frontend/src/views/admin/DashboardView.vue    |    4 +-
 .../__tests__/AccountsView.console.spec.ts    |    5 +-
 .../src/views/public/LegalDocumentView.vue    |    2 +-
 44 files changed, 9160 insertions(+), 116 deletions(-)
 create mode 100644 frontend/src/components/admin/account/AccountBulkMenu.vue
 create mode 100644 frontend/src/components/layout/AuthPixelGrid.vue

diff --git a/frontend/src/components/admin/account/AccountBulkActionsBar.vue b/frontend/src/components/admin/account/AccountBulkActionsBar.vue
index fafe434954ee..e8e081458ee1 100644
--- a/frontend/src/components/admin/account/AccountBulkActionsBar.vue
+++ b/frontend/src/components/admin/account/AccountBulkActionsBar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mb-4 flex flex-col gap-3 rounded-lg border border-line border-l-2 border-l-primary-500 bg-sunk px-3 py-2.5 xl:flex-row xl:items-center xl:justify-between">
+  <div class="mb-4 flex flex-col gap-3 rounded-lg border border-line border-l-2 border-l-primary-500 bg-sunk px-3 py-2.5 xl:flex-row xl:items-center xl:justify-between" data-ui="bulk-bar account-bulk-bar">
     <div class="flex flex-wrap items-center gap-2">
       <span v-if="allResultsSelected" class="text-sm font-medium text-ink">
         {{ t('admin.accounts.bulkActions.selectedAll', { count: selectedIds.length }) }}
diff --git a/frontend/src/components/admin/account/AccountBulkMenu.vue b/frontend/src/components/admin/account/AccountBulkMenu.vue
new file mode 100644
index 000000000000..d3d7743d2079
--- /dev/null
+++ b/frontend/src/components/admin/account/AccountBulkMenu.vue
@@ -0,0 +1,123 @@
+<template>
+  <div ref="rootRef" class="relative" data-ui="account-bulk-menu">
+    <button
+      ref="triggerRef"
+      type="button"
+      class="btn btn-secondary"
+      aria-haspopup="menu"
+      :aria-expanded="open"
+      data-test="account-bulk-menu"
+      @click="open = !open"
+      @keydown.down.prevent="openAndFocus('first')"
+      @keydown.up.prevent="openAndFocus('last')"
+    >
+      <span>{{ t('admin.accounts.bulkEdit.title') }}</span>
+      <Icon name="chevronDown" size="xs" />
+    </button>
+    <div
+      v-if="open"
+      class="absolute right-0 top-full z-50 mt-1 min-w-[13rem] max-w-xs"
+      role="menu"
+      :aria-label="t('admin.accounts.bulkEdit.title')"
+      data-ui="menu"
+      @keydown="handleMenuKeydown"
+    >
+      <button
+        v-if="!allResultsSelected && totalResults > selectedCount"
+        type="button"
+        role="menuitem"
+        class="flex w-full items-center text-left"
+        data-ui="menu-item"
+        data-test="bulk-menu-select-all-results"
+        :disabled="selectingAll"
+        @click="run('select-all-results')"
+      >
+        {{ selectingAll ? t('admin.accounts.bulkActions.selectingAll') : t('admin.accounts.bulkActions.selectAllResults', { count: totalResults }) }}
+      </button>
+      <button type="button" role="menuitem" class="flex w-full items-center text-left" data-ui="menu-item" data-test="bulk-menu-edit-filtered" @click="run('edit-filtered')">
+        {{ t('admin.accounts.bulkEdit.submit') }}
+      </button>
+      <button type="button" role="menuitem" class="flex w-full items-center text-left" data-ui="menu-item" data-test="bulk-menu-taxonomy-filtered" @click="run('taxonomy-filtered')">
+        {{ t('admin.accounts.bulkTaxonomy.filteredAction') }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Console theme: the bulk bar only shows while accounts are selected, so the entries its idle state offered
+// (select every result, bulk update, classify the filtered results) stay one click away in this toolbar menu.
+// It emits the same events as AccountBulkActionsBar; AccountsView wires them to the same handlers.
+import { nextTick, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Icon from '@/components/icons/Icon.vue'
+
+defineProps<{
+  totalResults: number
+  selectedCount: number
+  selectingAll: boolean
+  allResultsSelected: boolean
+}>()
+
+const emit = defineEmits<{
+  'select-all-results': []
+  'edit-filtered': []
+  'taxonomy-filtered': []
+}>()
+
+const { t } = useI18n()
+const open = ref(false)
+const rootRef = ref<HTMLElement | null>(null)
+const triggerRef = ref<HTMLButtonElement | null>(null)
+
+const items = () => Array.from(rootRef.value?.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)') || [])
+
+const openAndFocus = async (position: 'first' | 'last') => {
+  open.value = true
+  await nextTick()
+  const list = items()
+  ;(position === 'last' ? list.at(-1) : list[0])?.focus()
+}
+
+const close = (refocus: boolean) => {
+  open.value = false
+  if (refocus) void nextTick(() => triggerRef.value?.focus())
+}
+
+const handleMenuKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    close(true)
+    return
+  }
+  if (event.key === 'Tab') {
+    close(false)
+    return
+  }
+  if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return
+  const list = items()
+  if (!list.length) return
+  event.preventDefault()
+  const current = list.indexOf(document.activeElement as HTMLButtonElement)
+  let next = current
+  if (event.key === 'Home') next = 0
+  else if (event.key === 'End') next = list.length - 1
+  else if (event.key === 'ArrowDown') next = current < 0 ? 0 : (current + 1) % list.length
+  else next = current < 0 ? list.length - 1 : (current - 1 + list.length) % list.length
+  list[next]?.focus()
+}
+
+const run = (action: 'select-all-results' | 'edit-filtered' | 'taxonomy-filtered') => {
+  close(true)
+  if (action === 'select-all-results') emit('select-all-results')
+  else if (action === 'edit-filtered') emit('edit-filtered')
+  else emit('taxonomy-filtered')
+}
+
+const handleOutsideClick = (event: MouseEvent) => {
+  if (open.value && rootRef.value && !rootRef.value.contains(event.target as Node)) open.value = false
+}
+
+onMounted(() => document.addEventListener('click', handleOutsideClick))
+onUnmounted(() => document.removeEventListener('click', handleOutsideClick))
+</script>
diff --git a/frontend/src/components/admin/account/AccountConsoleFilters.vue b/frontend/src/components/admin/account/AccountConsoleFilters.vue
index bc88ba53912f..f3812da3f27b 100644
--- a/frontend/src/components/admin/account/AccountConsoleFilters.vue
+++ b/frontend/src/components/admin/account/AccountConsoleFilters.vue
@@ -1,7 +1,22 @@
 <template>
-  <div ref="rootRef" class="min-w-0 flex-1 space-y-2">
-    <div class="flex flex-wrap items-center gap-2">
+  <SearchInput
+    v-if="part === 'search'"
+    :model-value="modelValue.search"
+    :placeholder="t('admin.accounts.searchAccounts')"
+    data-ui="account-search"
+    @update:model-value="updateSearch"
+    @search="emit('change')"
+  />
+  <div
+    v-else
+    ref="rootRef"
+    :class="part === 'filters' ? 'flex min-w-0 flex-wrap items-center' : 'min-w-0 flex-1 space-y-2'"
+    :data-ui="part === 'filters' ? 'account-filters' : undefined"
+  >
+    <div :class="part === 'filters' ? 'contents' : 'flex flex-wrap items-center gap-2'">
+      <slot name="leading" />
       <SearchInput
+        v-if="part === 'all'"
         :model-value="modelValue.search"
         :placeholder="t('admin.accounts.searchAccounts')"
         class="w-full sm:w-64"
@@ -15,12 +30,14 @@
           class="inline-flex h-8 items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 text-sm font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500/30 dark:border-dark-600 dark:bg-dark-800 dark:text-gray-200 dark:hover:bg-dark-700"
           :aria-expanded="openMenu === menu.key"
           :data-test="`account-filter-${menu.key}`"
+          data-ui="filter-pill"
           @click.stop="toggleMenu(menu.key)"
         >
           <span>{{ menu.label }}</span>
           <span
             v-if="selectedValues(menu.key).length"
             class="min-w-5 rounded-full bg-primary-100 px-1.5 text-center text-xs font-semibold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300"
+            data-ui="filter-count"
           >
             {{ selectedValues(menu.key).length }}
           </span>
@@ -30,6 +47,7 @@
         <div
           v-if="openMenu === menu.key"
           class="absolute left-0 z-50 mt-1 w-64 overflow-hidden rounded-md border border-gray-200 bg-white shadow-lg dark:border-dark-700 dark:bg-dark-800"
+          data-ui="menu"
           @click.stop
         >
           <div class="max-h-72 overflow-y-auto p-1.5">
@@ -37,6 +55,8 @@
               v-for="option in menu.options"
               :key="String(option.value)"
               class="flex cursor-pointer items-center gap-2 rounded px-2.5 py-2 text-sm hover:bg-gray-100 dark:hover:bg-dark-700"
+              data-ui="menu-item"
+              :data-selected="selectedValues(menu.key).includes(String(option.value)) ? 'true' : undefined"
             >
               <input
                 type="checkbox"
@@ -45,7 +65,7 @@
                 @change="toggleOption(menu.key, String(option.value))"
               />
               <span class="min-w-0 flex-1 truncate text-gray-700 dark:text-gray-200">{{ option.label }}</span>
-              <span class="text-xs tabular-nums text-gray-400 dark:text-dark-400">{{ option.count }}</span>
+              <span class="text-xs tabular-nums text-gray-400 dark:text-dark-400" data-ui="account-filter-option-count">{{ option.count }}</span>
             </label>
             <div v-if="menu.options.length === 0" class="px-3 py-5 text-center text-sm text-gray-400">
               {{ t('common.noData') }}
@@ -55,6 +75,7 @@
             <button
               type="button"
               class="w-full rounded px-2.5 py-1.5 text-left text-xs font-medium text-gray-500 hover:bg-gray-100 dark:text-dark-300 dark:hover:bg-dark-700"
+              data-ui="menu-item"
               @click="clearMenu(menu.key)"
             >
               {{ t('common.clear') }}
@@ -75,7 +96,7 @@
       </select>
     </div>
 
-    <div v-if="activeChips.length" class="flex flex-wrap items-center gap-1.5">
+    <div v-if="activeChips.length" :class="part === 'filters' ? 'contents' : 'flex flex-wrap items-center gap-1.5'">
       <button
         v-for="chip in activeChips"
         :key="chip.key"
@@ -91,11 +112,13 @@
       <button
         type="button"
         class="px-1.5 py-1 text-xs font-medium text-primary-600 hover:text-primary-700 dark:text-primary-400"
+        data-ui="account-filters-clear"
         @click="clearAll"
       >
         {{ t('common.clear') }}
       </button>
     </div>
+    <slot name="summary" />
   </div>
 </template>
 
@@ -114,11 +137,15 @@ import type {
 type MenuKey = 'platforms' | 'types' | 'statuses' | 'plans' | 'proxies' | 'tags'
 type MenuOption = AccountFacetOption
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   modelValue: AccountConsoleFilterState
   facets: AccountConsoleFacets | null
   groups: AdminGroup[]
-}>()
+  // With the console theme on, AccountsView lays the toolbar out in two rows and renders two parts: 'search'
+  // (row 1) and 'filters' (row 2: an optional leading slot, the filter pills, the group select, the active
+  // filter chips and a summary slot, all on one wrapping line). 'all' is the single block used with the theme off.
+  part?: 'all' | 'search' | 'filters'
+}>(), { part: 'all' })
 
 const emit = defineEmits<{
   'update:modelValue': [value: AccountConsoleFilterState]
diff --git a/frontend/src/components/admin/account/AccountFolderBar.vue b/frontend/src/components/admin/account/AccountFolderBar.vue
index 0640e62cf809..f9a4a8bab422 100644
--- a/frontend/src/components/admin/account/AccountFolderBar.vue
+++ b/frontend/src/components/admin/account/AccountFolderBar.vue
@@ -1,5 +1,64 @@
 <template>
-  <div class="min-w-0 border-b border-line bg-surface/70">
+  <div v-if="variant === 'menu'" ref="mobileMenuRef" class="relative shrink-0" data-ui="account-folder-menu">
+    <button
+      ref="mobileTriggerRef"
+      type="button"
+      class="inline-flex max-w-full items-center gap-1.5"
+      aria-haspopup="listbox"
+      :aria-expanded="mobileOpen"
+      :aria-label="`${t('admin.accounts.managementClassification')} ${activeLabel} ${formatCount(activeCount)}`"
+      :title="t('admin.accounts.managementClassification')"
+      :data-active="activeFolder ? 'true' : undefined"
+      data-ui="filter-pill"
+      data-test="account-folder-menu"
+      @click="mobileOpen = !mobileOpen"
+      @keydown.down.prevent="openMobileOptions('first')"
+      @keydown.up.prevent="openMobileOptions('last')"
+      @keydown.esc.prevent="closeMobileMenu"
+    >
+      <span class="truncate">{{ activeLabel }}</span>
+      <span data-ui="account-folder-count">{{ formatCount(activeCount) }}</span>
+      <Icon name="chevronDown" size="xs" />
+    </button>
+    <div
+      v-if="mobileOpen"
+      class="absolute left-0 top-full z-50 mt-1 max-h-[min(60vh,420px)] min-w-[13rem] max-w-xs overflow-y-auto"
+      role="listbox"
+      :aria-label="t('admin.accounts.managementClassification')"
+      data-ui="menu"
+      @keydown="handleMobileMenuKeydown"
+    >
+      <button v-if="error" type="button" class="flex w-full items-center text-left" data-ui="menu-item" data-tone="danger" @click="emit('retry')">
+        <span class="min-w-0 flex-1">{{ t('admin.accounts.facetsLoadFailed') }}</span>
+        <span class="shrink-0 font-semibold">{{ t('common.retry') }}</span>
+      </button>
+      <div v-else-if="loading" class="space-y-1 px-3 py-1.5" aria-live="polite" data-ui="account-folder-loading">
+        <div v-for="index in 3" :key="index" class="h-5 animate-pulse" />
+      </div>
+      <template v-else>
+        <button
+          v-for="item in navigationItems"
+          :key="item.value || 'all'"
+          type="button"
+          role="option"
+          :aria-selected="activeFolder === item.value"
+          class="flex w-full items-center text-left"
+          data-ui="menu-item"
+          @click="selectMobile(item.value)"
+        >
+          <span class="min-w-0 flex-1 truncate">{{ item.label }}</span>
+          <span class="shrink-0" data-ui="account-folder-count">{{ formatCount(item.count) }}</span>
+        </button>
+        <span v-if="folders.length === 0" class="block px-3 py-1.5" data-ui="account-folder-empty">{{ t('admin.accounts.noFolders') }}</span>
+      </template>
+      <div data-ui="menu-separator" />
+      <button type="button" class="flex w-full items-center text-left" data-ui="menu-item" data-test="account-folder-manage" @click="manageMobile">
+        <Icon name="cog" size="sm" />
+        <span>{{ t('admin.accounts.manageTaxonomy') }}</span>
+      </button>
+    </div>
+  </div>
+  <div v-else class="min-w-0 border-b border-line bg-surface/70">
     <div class="relative border-b border-gray-200 p-3 dark:border-dark-700 lg:hidden" ref="mobileMenuRef">
       <button
         ref="mobileTriggerRef"
@@ -103,14 +162,17 @@ import { useI18n } from 'vue-i18n'
 import Icon from '@/components/icons/Icon.vue'
 import type { AccountManagementFolder } from '@/types'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   folders: AccountManagementFolder[]
   activeFolder: string
   total?: number
   uncategorizedCount?: number
   loading?: boolean
   error?: boolean
-}>()
+  // 'menu': the console theme's toolbar control, one pill (active classification + its count) that opens every
+  // classification with its count and the manage entry; 'bar': the strip above the list (theme off).
+  variant?: 'bar' | 'menu'
+}>(), { variant: 'bar' })
 
 const emit = defineEmits<{
   select: [value: string]
@@ -132,7 +194,9 @@ const navigationItems = computed(() => [
   { value: 'uncategorized', label: t('admin.accounts.folderUncategorized'), count: safeCount(props.uncategorizedCount) },
   ...props.folders.map((folder) => ({ value: String(folder.id), label: folder.name || '-', count: safeCount(folder.account_count) }))
 ])
-const activeLabel = computed(() => navigationItems.value.find((item) => item.value === props.activeFolder)?.label || t('admin.accounts.allAccounts'))
+const activeItem = computed(() => navigationItems.value.find((item) => item.value === props.activeFolder))
+const activeLabel = computed(() => activeItem.value?.label || t('admin.accounts.allAccounts'))
+const activeCount = computed(() => (activeItem.value ? activeItem.value.count : safeCount(props.total)))
 const mobileOptions = () => Array.from(mobileMenuRef.value?.querySelectorAll<HTMLButtonElement>('[role="option"]') || [])
 const openMobileOptions = async (position: 'first' | 'last') => {
   mobileOpen.value = true
diff --git a/frontend/src/components/admin/account/AccountViewModeSwitcher.vue b/frontend/src/components/admin/account/AccountViewModeSwitcher.vue
index 9e137f72cec6..732bd3118a34 100644
--- a/frontend/src/components/admin/account/AccountViewModeSwitcher.vue
+++ b/frontend/src/components/admin/account/AccountViewModeSwitcher.vue
@@ -3,6 +3,7 @@
     class="inline-flex h-8 items-center gap-0.5 rounded-lg bg-gray-100 p-0.5 dark:bg-dark-700"
     role="group"
     :aria-label="t('admin.accounts.viewModeLabel')"
+    data-ui="account-view-switcher"
   >
     <button
       v-for="option in options"
diff --git a/frontend/src/components/charts/TokenUsageTrend.vue b/frontend/src/components/charts/TokenUsageTrend.vue
index 23f68dafec2a..d5693e3bf1bd 100644
--- a/frontend/src/components/charts/TokenUsageTrend.vue
+++ b/frontend/src/components/charts/TokenUsageTrend.vue
@@ -60,11 +60,11 @@ const presentation = usePresentationColors()
 const chartColors = computed(() => ({
   text: presentation.value.text,
   grid: presentation.value.grid,
-  input: presentation.value.series[0],
-  output: presentation.value.series[1],
-  cacheCreation: presentation.value.series[2],
-  cacheRead: presentation.value.series[10],
-  cacheHitRate: presentation.value.series[4]
+  input: presentation.value.trend[0],
+  output: presentation.value.trend[1],
+  cacheCreation: presentation.value.trend[2],
+  cacheRead: presentation.value.trend[10],
+  cacheHitRate: presentation.value.trend[4]
 }))
 
 const chartData = computed(() => {
diff --git a/frontend/src/components/common/AnnouncementBell.vue b/frontend/src/components/common/AnnouncementBell.vue
index 70f24542aa97..7433e5d58ad1 100644
--- a/frontend/src/components/common/AnnouncementBell.vue
+++ b/frontend/src/components/common/AnnouncementBell.vue
@@ -2,6 +2,7 @@
   <div>
     <!-- 铃铛按钮 -->
     <button
+      data-ui="announcement-bell"
       @click="openModal"
       class="relative flex h-9 w-9 items-center justify-center rounded-lg text-gray-600 transition-all hover:bg-gray-100 hover:scale-105 dark:text-gray-400 dark:hover:bg-dark-800"
       :class="{ 'text-blue-600 dark:text-blue-400': unreadCount > 0 }"
@@ -27,6 +28,7 @@
           @click="closeModal"
         >
           <div
+            data-ui="announcement-list"
             class="w-full max-w-[620px] overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
             @click.stop
           >
@@ -187,6 +189,7 @@
           @click="closeDetail"
         >
           <div
+            data-ui="announcement-detail"
             class="w-full max-w-[780px] overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
             @click.stop
           >
diff --git a/frontend/src/components/common/AnnouncementPopup.vue b/frontend/src/components/common/AnnouncementPopup.vue
index e7610513e5f4..f23b7f871d3e 100644
--- a/frontend/src/components/common/AnnouncementPopup.vue
+++ b/frontend/src/components/common/AnnouncementPopup.vue
@@ -6,6 +6,7 @@
         class="fixed inset-0 z-[120] flex items-start justify-center overflow-y-auto bg-black/70 p-4 pt-[8vh]"
       >
         <div
+          data-ui="announcement-popup"
           class="w-full max-w-[680px] overflow-hidden rounded-3xl bg-white shadow-2xl ring-1 ring-black/5 dark:bg-dark-800 dark:ring-white/10"
           @click.stop
         >
diff --git a/frontend/src/components/common/ConfirmDialog.vue b/frontend/src/components/common/ConfirmDialog.vue
index 6ffd9b773c28..9338b2005752 100644
--- a/frontend/src/components/common/ConfirmDialog.vue
+++ b/frontend/src/components/common/ConfirmDialog.vue
@@ -8,6 +8,7 @@
     <template #footer>
       <div class="flex justify-end space-x-3">
         <button
+          data-ui="confirm-cancel"
           @click="handleCancel"
           type="button"
           class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:border-dark-600 dark:bg-dark-700 dark:text-gray-200 dark:hover:bg-dark-600 dark:focus:ring-offset-dark-800"
@@ -15,6 +16,7 @@
           {{ cancelText }}
         </button>
         <button
+          data-ui="confirm-ok"
           @click="handleConfirm"
           type="button"
           :class="[
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index eabf74e24628..49e08aba812b 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!isDesktopViewport" class="space-y-3">
+  <div v-if="!showTable" class="space-y-3">
     <template v-if="loading">
       <div v-for="i in 5" :key="i" class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900">
         <div class="space-y-3">
@@ -270,6 +270,7 @@ import { useVirtualizer, observeElementRect as observeElementRectDefault } from
 import { useI18n } from 'vue-i18n'
 import type { Column } from './types'
 import Icon from '@/components/icons/Icon.vue'
+import { flatThemeActive } from '@/utils/flatTheme'
 
 const { t } = useI18n()
 
@@ -277,6 +278,8 @@ const desktopViewportQuery = '(min-width: 768px)'
 const isDesktopViewport = ref(
   typeof window === 'undefined' ? true : window.matchMedia(desktopViewportQuery).matches
 )
+// Console theme: phones keep the table (it scrolls sideways) instead of the stacked cards.
+const showTable = computed(() => isDesktopViewport.value || flatThemeActive.value)
 
 const emit = defineEmits<{
   sort: [key: string, order: 'asc' | 'desc']
@@ -642,7 +645,7 @@ const columnsSignature = computed(() =>
 )
 
 watch(
-  isDesktopViewport,
+  showTable,
   async (isDesktop) => {
     detachDesktopTableTracking()
     if (!isDesktop) return
@@ -756,7 +759,7 @@ const toggleAllVisible = (checked: boolean) => {
 // 是否启用虚拟化:仅桌面端且行数超过阈值时开启。小列表全量渲染,彻底绕开虚拟器的
 // 估算/测量/滚动补偿链路,消除可变行高导致的滚动抖动。
 const shouldVirtualize = computed(() =>
-  isDesktopViewport.value && (sortedData.value?.length ?? 0) > (props.virtualizeThreshold ?? 100)
+  showTable.value && (sortedData.value?.length ?? 0) > (props.virtualizeThreshold ?? 100)
 )
 
 const rowVirtualizer = useVirtualizer(computed(() => ({
diff --git a/frontend/src/components/common/GroupBadge.vue b/frontend/src/components/common/GroupBadge.vue
index ffe2d2e425d5..6b133f98ed73 100644
--- a/frontend/src/components/common/GroupBadge.vue
+++ b/frontend/src/components/common/GroupBadge.vue
@@ -1,5 +1,6 @@
 <template>
   <span
+    data-ui="group-badge"
     :class="[
       'inline-flex max-w-full items-center gap-1.5 rounded-md px-2 py-0.5 text-xs font-medium transition-colors',
       badgeClass
diff --git a/frontend/src/components/common/HelpTooltip.vue b/frontend/src/components/common/HelpTooltip.vue
index 72a76fdcedc7..92e6be82c8da 100644
--- a/frontend/src/components/common/HelpTooltip.vue
+++ b/frontend/src/components/common/HelpTooltip.vue
@@ -104,6 +104,7 @@ onBeforeUnmount(() => {
 <template>
   <div
     ref="trigger"
+    data-ui="help-tooltip"
     class="group relative ml-1 inline-flex items-center align-middle"
     @mouseenter="onEnter"
     @mouseleave="onLeave"
diff --git a/frontend/src/components/common/LocaleSwitcher.vue b/frontend/src/components/common/LocaleSwitcher.vue
index 417e5a23b204..3132486152a4 100644
--- a/frontend/src/components/common/LocaleSwitcher.vue
+++ b/frontend/src/components/common/LocaleSwitcher.vue
@@ -19,11 +19,13 @@
     <transition name="dropdown">
       <div
         v-if="isOpen"
+        data-ui="menu"
         class="absolute right-0 z-50 mt-1 w-32 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-dark-700 dark:bg-dark-800"
       >
         <button
           v-for="locale in availableLocales"
           :key="locale.code"
+          data-ui="menu-item"
           :disabled="switching"
           @click="selectLocale(locale.code)"
           class="flex w-full items-center gap-2 px-3 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-dark-700"
diff --git a/frontend/src/components/common/Pagination.vue b/frontend/src/components/common/Pagination.vue
index cdccd965df05..965ef84c5412 100644
--- a/frontend/src/components/common/Pagination.vue
+++ b/frontend/src/components/common/Pagination.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    data-ui="pagination"
     class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 dark:border-dark-700 dark:bg-dark-800 sm:px-6"
   >
     <div class="flex flex-1 items-center justify-between sm:hidden">
diff --git a/frontend/src/components/common/PlatformTypeBadge.vue b/frontend/src/components/common/PlatformTypeBadge.vue
index cadb255d2b22..8510d7ff4d95 100644
--- a/frontend/src/components/common/PlatformTypeBadge.vue
+++ b/frontend/src/components/common/PlatformTypeBadge.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="inline-flex flex-col gap-0.5 text-xs font-medium">
+  <div class="inline-flex flex-col gap-0.5 text-xs font-medium" data-ui="platform-badge">
     <!-- Row 1: Platform + Type -->
     <div class="inline-flex items-center overflow-hidden rounded-md">
       <span :class="['inline-flex items-center gap-1 px-2 py-1', platformClass]">
diff --git a/frontend/src/components/common/SearchInput.vue b/frontend/src/components/common/SearchInput.vue
index 9857c2d096ff..24d64638dbc6 100644
--- a/frontend/src/components/common/SearchInput.vue
+++ b/frontend/src/components/common/SearchInput.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="relative w-full">
     <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-      <Icon name="search" :size="flatThemeActive ? 'sm' : 'md'" class="text-gray-400" />
+      <Icon name="search" size="md" class="text-gray-400" />
     </div>
     <input
       v-model="searchValue"
       type="text"
-      :class="['input', flatThemeActive ? 'pl-9' : 'pl-10']"
+      class="input pl-10"
       :placeholder="placeholder"
     />
   </div>
@@ -16,8 +16,6 @@
 import { computed } from 'vue'
 import { useDebounceFn } from '@vueuse/core'
 import Icon from '@/components/icons/Icon.vue'
-// Console theme: a 16px icon and a tighter inset; with the theme off the upstream 20px icon and pl-10.
-import { flatThemeActive } from '@/utils/flatTheme'
 
 const props = withDefaults(defineProps<{
   modelValue: string
diff --git a/frontend/src/components/common/Skeleton.vue b/frontend/src/components/common/Skeleton.vue
index aa90a6198bd5..fd2e308fa396 100644
--- a/frontend/src/components/common/Skeleton.vue
+++ b/frontend/src/components/common/Skeleton.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    data-ui="skeleton"
     :class="[
       'animate-pulse bg-gray-200 dark:bg-dark-700',
       variant === 'circle' ? 'rounded-full' : 'rounded-lg',
diff --git a/frontend/src/components/common/StatusBadge.vue b/frontend/src/components/common/StatusBadge.vue
index a844b6cc330a..489eefc39b3e 100644
--- a/frontend/src/components/common/StatusBadge.vue
+++ b/frontend/src/components/common/StatusBadge.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center gap-1.5">
+  <div class="flex items-center gap-1.5" data-ui="status-badge">
     <span
       :class="[
         'inline-block h-2 w-2 rounded-full',
diff --git a/frontend/src/components/common/Toast.vue b/frontend/src/components/common/Toast.vue
index 65c791aeab8d..b508b398f58f 100644
--- a/frontend/src/components/common/Toast.vue
+++ b/frontend/src/components/common/Toast.vue
@@ -1,6 +1,7 @@
 <template>
   <Teleport to="body">
     <div
+      data-ui="toast-stack"
       class="pointer-events-none fixed right-4 top-4 z-[9999] space-y-3"
       aria-live="polite"
       aria-atomic="true"
@@ -16,6 +17,7 @@
         <div
           v-for="toast in toasts"
           :key="toast.id"
+          data-ui="toast"
           :class="[
             'pointer-events-auto min-w-[320px] max-w-md overflow-hidden rounded-lg shadow-lg',
             'bg-white dark:bg-dark-800',
diff --git a/frontend/src/components/icons/Icon.vue b/frontend/src/components/icons/Icon.vue
index d92f3bdc53de..2f6bc01cd0af 100644
--- a/frontend/src/components/icons/Icon.vue
+++ b/frontend/src/components/icons/Icon.vue
@@ -147,7 +147,25 @@ const icons = {
   calculator: 'M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z',
   fire: 'M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z',
   badge: 'M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z',
-  brain: 'M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m0 0l-2.69 2.689c-1.232 1.232-.65 3.318 1.067 3.611A48.309 48.309 0 0012 21c2.773 0 5.491-.235 8.135-.687 1.718-.293 2.3-2.379 1.067-3.61L19.8 15.3M12 8.25a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 0v3m-3-1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 0h6m-3 4.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z'
+  brain: 'M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23.693L5 14.5m0 0l-2.69 2.689c-1.232 1.232-.65 3.318 1.067 3.611A48.309 48.309 0 0012 21c2.773 0 5.491-.235 8.135-.687 1.718-.293 2.3-2.379 1.067-3.61L19.8 15.3M12 8.25a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 0v3m-3-1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm0 0h6m-3 4.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z',
+
+  // Layout chrome (console theme: AppSidebar / AppHeader draw these through Icon; the paths are the ones those
+  // inline icons use, so a caller with the theme off gets the same glyph)
+  dashboard: 'M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z',
+  camera: 'M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.25 2.25 0 00-1.906-1.059H9.554a2.25 2.25 0 00-1.906 1.059l-.821 1.316z M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zM18.75 10.5h.008v.008h-.008V10.5z',
+  folder: 'M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z',
+  layers: 'M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0l4.179 2.25L12 17.25 2.25 12m15.321-2.25l4.179 2.25L12 17.25l-9.75-5.25',
+  coins: 'M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z',
+  ticket: 'M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 010 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 010-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375z',
+  tag: 'M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z M6 6h.008v.008H6V6z',
+  signal: 'M9.348 14.651a3.75 3.75 0 010-5.303m5.304 0a3.75 3.75 0 010 5.303m-7.425 2.122a6.75 6.75 0 010-9.546m9.546 0a6.75 6.75 0 010 9.546M5.106 18.894c-3.808-3.807-3.808-9.98 0-13.788m13.788 0c3.808 3.807 3.808 9.98 0 13.788M12 12h.008v.008H12V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z',
+  clipboardList: 'M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15a2.25 2.25 0 012.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z',
+  receipt: 'M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z',
+  chevronDoubleLeft: 'm18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5',
+  chevronDoubleRight: 'm5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5',
+  banknotes: 'M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z',
+  chatBubbles: 'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155',
+  logout: 'M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75'
 } as const
 
 const iconPath = computed(() => icons[props.name])
diff --git a/frontend/src/components/icons/lucide.ts b/frontend/src/components/icons/lucide.ts
index 2e9aa487f93b..7bae2d528810 100644
--- a/frontend/src/components/icons/lucide.ts
+++ b/frontend/src/components/icons/lucide.ts
@@ -116,7 +116,23 @@ const nodes = {
   'user-plus': [['path', { d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }], ['circle', { cx: '9', cy: '7', r: '4' }], ['line', { x1: '19', x2: '19', y1: '8', y2: '14' }], ['line', { x1: '22', x2: '16', y1: '11', y2: '11' }]],
   'users': [['path', { d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' }], ['circle', { cx: '9', cy: '7', r: '4' }], ['path', { d: 'M22 21v-2a4 4 0 0 0-3-3.87' }], ['path', { d: 'M16 3.13a4 4 0 0 1 0 7.75' }]],
   'x': [['path', { d: 'M18 6 6 18' }], ['path', { d: 'm6 6 12 12' }]],
-  'zap': [['path', { d: 'M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z' }]]
+  'zap': [['path', { d: 'M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z' }]],
+  // layout chrome (AppSidebar / AppHeader)
+  'layout-dashboard': [['rect', { width: '7', height: '9', x: '3', y: '3', rx: '1' }], ['rect', { width: '7', height: '5', x: '14', y: '3', rx: '1' }], ['rect', { width: '7', height: '9', x: '14', y: '12', rx: '1' }], ['rect', { width: '7', height: '5', x: '3', y: '16', rx: '1' }]],
+  'images': [['path', { d: 'M18 22H4a2 2 0 0 1-2-2V6' }], ['path', { d: 'm22 13-1.296-1.296a2.41 2.41 0 0 0-3.408 0L11 18' }], ['circle', { cx: '12', cy: '8', r: '2' }], ['rect', { width: '16', height: '16', x: '6', y: '2', rx: '2' }]],
+  'folder': [['path', { d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z' }]],
+  'layers': [['path', { d: 'M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z' }], ['path', { d: 'M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12' }], ['path', { d: 'M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17' }]],
+  'coins': [['circle', { cx: '8', cy: '8', r: '6' }], ['path', { d: 'M18.09 10.37A6 6 0 1 1 10.34 18' }], ['path', { d: 'M7 6h1v4' }], ['path', { d: 'm16.71 13.88.7.71-2.82 2.82' }]],
+  'ticket': [['path', { d: 'M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z' }], ['path', { d: 'M13 5v2' }], ['path', { d: 'M13 17v2' }], ['path', { d: 'M13 11v2' }]],
+  'tag': [['path', { d: 'M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z' }], ['circle', { cx: '7.5', cy: '7.5', r: '.5', fill: 'currentColor' }]],
+  'activity': [['path', { d: 'M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2' }]],
+  'clipboard-list': [['rect', { width: '8', height: '4', x: '8', y: '2', rx: '1', ry: '1' }], ['path', { d: 'M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2' }], ['path', { d: 'M12 11h4' }], ['path', { d: 'M12 16h4' }], ['path', { d: 'M8 11h.01' }], ['path', { d: 'M8 16h.01' }]],
+  'receipt-text': [['path', { d: 'M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' }], ['path', { d: 'M14 8H8' }], ['path', { d: 'M16 12H8' }], ['path', { d: 'M13 16H8' }]],
+  'panel-left-close': [['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2' }], ['path', { d: 'M9 3v18' }], ['path', { d: 'm16 15-3-3 3-3' }]],
+  'panel-left-open': [['rect', { width: '18', height: '18', x: '3', y: '3', rx: '2' }], ['path', { d: 'M9 3v18' }], ['path', { d: 'm14 9 3 3-3 3' }]],
+  'wallet': [['path', { d: 'M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1' }], ['path', { d: 'M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4' }]],
+  'messages-square': [['path', { d: 'M14 9a2 2 0 0 1-2 2H6l-4 4V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2z' }], ['path', { d: 'M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1' }]],
+  'log-out': [['path', { d: 'M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4' }], ['polyline', { points: '16 17 21 12 16 7' }], ['line', { x1: '21', x2: '9', y1: '12', y2: '12' }]]
 } satisfies Record<string, LucideIconNode>
 
 const glyph = (name: keyof typeof nodes): LucideGlyph => ({ name, nodes: nodes[name] })
@@ -204,7 +220,23 @@ export const lucideIcons = {
   calculator: glyph('calculator'),
   fire: glyph('flame'),
   badge: glyph('badge-check'),
-  brain: glyph('brain') // by name (the Heroicons glyph was a flask stand-in)
+  brain: glyph('brain'), // by name (the Heroicons glyph was a flask stand-in)
+  // layout chrome (AppSidebar / AppHeader; ui-el icons/ICONS.md §5)
+  dashboard: glyph('layout-dashboard'),
+  camera: glyph('images'), // the batch-image and image-studio entries: pictures, by function
+  folder: glyph('folder'),
+  layers: glyph('layers'), // the reference's channel glyph
+  coins: glyph('coins'), // the recharge / subscribe entry (upstream draws a custom coin mark)
+  ticket: glyph('ticket'),
+  tag: glyph('tag'),
+  signal: glyph('activity'), // channel status: the reference Logs pulse line
+  clipboardList: glyph('clipboard-list'),
+  receipt: glyph('receipt-text'),
+  chevronDoubleLeft: glyph('panel-left-close'), // collapse the sidebar, the reference's glyph
+  chevronDoubleRight: glyph('panel-left-open'),
+  banknotes: glyph('wallet'), // the header balance
+  chatBubbles: glyph('messages-square'),
+  logout: glyph('log-out')
 }
 
 /**
diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue
index 752c8ed95559..4cffed7f521c 100644
--- a/frontend/src/components/layout/AppHeader.vue
+++ b/frontend/src/components/layout/AppHeader.vue
@@ -51,17 +51,20 @@
         </router-link>
 
         <!-- Language Switcher -->
-        <LocaleSwitcher />
+        <LocaleSwitcher data-ui="header-locale" />
 
         <!-- Subscription Progress (for users with active subscriptions; not mounted at all when the feature is off) -->
-        <SubscriptionProgressMini v-if="user && subscriptionFeatureEnabled" />
+        <SubscriptionProgressMini v-if="user && subscriptionFeatureEnabled" data-ui="header-subscription" />
 
         <!-- Balance Display -->
         <div
           v-if="user"
+          data-ui="header-balance"
           class="group relative hidden items-center gap-2 rounded-xl bg-primary-50 px-3 py-1.5 dark:bg-primary-900/20 sm:flex"
         >
+          <Icon v-if="flatThemeActive" name="banknotes" size="sm" />
           <svg
+            v-else
             class="h-4 w-4 text-primary-600 dark:text-primary-400"
             fill="none"
             viewBox="0 0 24 24"
@@ -104,7 +107,7 @@
         </div>
 
         <!-- User Dropdown -->
-        <div v-if="user" class="relative" ref="dropdownRef">
+        <div v-if="user" class="relative" ref="dropdownRef" data-ui="header-user">
           <button
             @click="toggleDropdown"
             class="flex items-center gap-2 rounded-xl p-1.5 transition-colors hover:bg-gray-100 dark:hover:bg-dark-800"
@@ -191,7 +194,9 @@
                 class="border-t border-gray-100 px-4 py-2.5 dark:border-dark-700"
               >
                 <div class="flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400">
+                  <Icon v-if="flatThemeActive" name="chatBubbles" size="sm" class="flex-shrink-0" />
                   <svg
+                    v-else
                     class="h-3.5 w-3.5 flex-shrink-0"
                     fill="none"
                     viewBox="0 0 24 24"
@@ -213,7 +218,8 @@
 
               <div v-if="showOnboardingButton" class="border-t border-gray-100 py-1 dark:border-dark-700">
                 <button @click="handleReplayGuide" class="dropdown-item w-full">
-                  <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
+                  <Icon v-if="flatThemeActive" name="questionCircle" size="sm" />
+                  <svg v-else class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24">
                     <path
                       d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 14a1 1 0 110 2 1 1 0 010-2zm1.07-7.75c0-.6-.49-1.25-1.32-1.25-.7 0-1.22.4-1.43 1.02a1 1 0 11-1.9-.62A3.41 3.41 0 0111.8 5c2.02 0 3.25 1.4 3.25 2.9 0 2-1.83 2.55-2.43 3.12-.43.4-.47.75-.47 1.23a1 1 0 01-2 0c0-1 .16-1.82 1.1-2.7.69-.64 1.82-1.05 1.82-2.06z"
                     />
@@ -227,7 +233,9 @@
                   @click="handleLogout"
                   class="dropdown-item w-full text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
                 >
+                  <Icon v-if="flatThemeActive" name="logout" size="sm" />
                   <svg
+                    v-else
                     class="h-4 w-4"
                     fill="none"
                     viewBox="0 0 24 24"
@@ -263,6 +271,7 @@ import LocaleSwitcher from '@/components/common/LocaleSwitcher.vue'
 import SubscriptionProgressMini from '@/components/common/SubscriptionProgressMini.vue'
 import AnnouncementBell from '@/components/common/AnnouncementBell.vue'
 import Icon from '@/components/icons/Icon.vue'
+import { flatThemeActive } from '@/utils/flatTheme'
 import { sanitizeUrl } from '@/utils/url'
 import { FeatureFlags, isFeatureFlagEnabled } from '@/utils/featureFlags'
 import { resolveRouteMetaKeys } from '@/router/title'
diff --git a/frontend/src/components/layout/AppSidebar.vue b/frontend/src/components/layout/AppSidebar.vue
index d00fff8bc60f..af61bed833b9 100644
--- a/frontend/src/components/layout/AppSidebar.vue
+++ b/frontend/src/components/layout/AppSidebar.vue
@@ -241,6 +241,7 @@ import { sanitizeUrl } from '@/utils/url'
 import { FeatureFlags, makeSidebarFlag } from '@/utils/featureFlags'
 import { resolveSiteBillingMode } from '@/utils/siteBillingMode'
 import { useBatchImageAccess } from '@/composables/useBatchImageAccess'
+import { flatThemeActive } from '@/utils/flatTheme'
 
 interface NavItem {
   path: string
@@ -743,6 +744,22 @@ const ChevronDownIcon = {
     )
 }
 
+// Console theme (utils/flatTheme.ts): while it is on, the inline icons above draw their Lucide glyph through
+// Icon.vue (ui-el icons/ICONS.md §5); with it off they render the upstream SVGs above, unchanged.
+const consoleThemeIcons: Array<[typeof DashboardIcon, InstanceType<typeof Icon>['$props']['name']]> = [
+  [DashboardIcon, 'dashboard'], [KeyIcon, 'key'], [BatchImageIcon, 'camera'], [ChartIcon, 'chart'],
+  [GiftIcon, 'gift'], [UserIcon, 'user'], [UsersIcon, 'users'], [FolderIcon, 'folder'], [ChannelIcon, 'layers'],
+  [CreditCardIcon, 'creditCard'], [RechargeSubscriptionIcon, 'coins'], [GlobeIcon, 'globe'], [ServerIcon, 'server'],
+  [BellIcon, 'bell'], [TicketIcon, 'ticket'], [CogIcon, 'cog'], [DocumentIcon, 'document'], [SunIcon, 'sun'],
+  [MoonIcon, 'moon'], [ChevronDoubleLeftIcon, 'chevronDoubleLeft'], [ChevronDoubleRightIcon, 'chevronDoubleRight'],
+  [OrderIcon, 'clipboardList'], [OrderListIcon, 'receipt'], [SignalIcon, 'signal'], [ShieldIcon, 'shield'],
+  [PriceTagIcon, 'tag'], [ChevronDownIcon, 'chevronDown']
+]
+for (const [icon, name] of consoleThemeIcons) {
+  const upstream = icon.render
+  icon.render = () => (flatThemeActive.value ? h(Icon, { name }) : upstream())
+}
+
 // Public-settings flags go through the registry in utils/featureFlags.ts,
 // which handles the opt-in vs opt-out fallback when settings haven't loaded
 // yet. Admin-only flags (not in public settings) stay inline below.
diff --git a/frontend/src/components/layout/AuthLayout.vue b/frontend/src/components/layout/AuthLayout.vue
index e798c2089158..f0a34c9e7547 100644
--- a/frontend/src/components/layout/AuthLayout.vue
+++ b/frontend/src/components/layout/AuthLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex min-h-screen items-center justify-center overflow-hidden p-4">
+  <div class="relative flex min-h-screen items-center justify-center overflow-hidden p-4" data-ui="auth-layout">
     <!-- Background -->
     <div
       class="absolute inset-0 bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100 dark:from-dark-950 dark:via-dark-900 dark:to-dark-950"
@@ -23,9 +23,10 @@
         class="absolute inset-0 bg-[linear-gradient(rgba(20,184,166,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(20,184,166,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"
       ></div>
     </div>
+    <AuthPixelGrid />
 
     <!-- Content Container -->
-    <div class="relative z-10 w-full max-w-md">
+    <div class="relative z-10 w-full max-w-md" data-ui="auth-column">
       <!-- Logo/Brand -->
       <div class="mb-8 text-center">
         <!-- Custom Logo or Default Logo -->
@@ -66,6 +67,7 @@
 import { computed, onMounted } from 'vue'
 import { useAppStore } from '@/stores'
 import { sanitizeUrl } from '@/utils/url'
+import AuthPixelGrid from './AuthPixelGrid.vue'
 
 const appStore = useAppStore()
 
diff --git a/frontend/src/components/layout/AuthPixelGrid.vue b/frontend/src/components/layout/AuthPixelGrid.vue
new file mode 100644
index 000000000000..16da388d25de
--- /dev/null
+++ b/frontend/src/components/layout/AuthPixelGrid.vue
@@ -0,0 +1,299 @@
+<template>
+  <div v-if="flatThemeActive" ref="rootEl" class="auth-pixel-grid" aria-hidden="true">
+    <canvas ref="canvasEl"></canvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Console theme only (utils/flatTheme.ts): the sign-in pages' background, after the reference console's sign-in
+// page. A field of 7px squares on an 8px pitch in the ink colour at five faint strengths covers the page; a soft,
+// ragged front keeps sweeping in from the left edge, lights the squares it crosses and leaves them to fade, so a band
+// on the left shimmers (on a phone it reaches across the page); everything else stays at the faintest strength.
+// The canvas is drawn at one canvas pixel per CSS pixel (soft edges on dense screens, as in the reference); the
+// layer's 40 % opacity and colour come from styles/console/pages/settings-ops-public.css.
+// Under the text of the content column the squares stay at the faintest strength, so every label, hint and link
+// keeps its contrast; fields and buttons are opaque and cover the field anyway.
+// prefers-reduced-motion: one still frame, no animation. Theme off: nothing is rendered.
+import { onBeforeUnmount, ref, watch } from 'vue'
+import { flatThemeActive } from '@/utils/flatTheme'
+
+const PITCH = 8
+const CELL = 7
+const LIGHT_LEVELS = [0.02, 0.06, 0.11, 0.17, 0.24]
+const DARK_LEVELS = [0.03, 0.08, 0.16, 0.28, 0.42]
+// Squares beyond this many columns never light up and are drawn once.
+const LIVE_COLS = 72
+// The front: its half-width in columns, speed in columns per second, how far one sweep travels (columns; a narrow
+// page lets it cross most of the width), and how strongly it lights a square (plus a per-square shimmer).
+const FRONT_HALF = 10
+const FRONT_SPEED = 11
+const REACH_MIN = 10
+const REACH_MAX = 28
+const NARROW_COLS = 64
+const LIGHT = 2.7
+const SHIMMER = 0.7
+// Strength per second: rising under the front, the lit target and the shown value fading once it has passed.
+const RISE = 3
+const FADE = 0.9
+// Text keeps a clear margin (px) and a soft edge (px) around it.
+const TEXT_PAD = 3
+const TEXT_FEATHER = 8
+
+const rootEl = ref<HTMLElement | null>(null)
+const canvasEl = ref<HTMLCanvasElement | null>(null)
+
+let ctx: CanvasRenderingContext2D | null = null
+let cols = 0
+let rows = 0
+let liveCols = 0
+let value = new Float32Array(0)
+let target = new Float32Array(0)
+let phase = new Float32Array(0)
+let quiet = new Float32Array(0)
+let fills: string[] = []
+let front = 0
+let frontEnd = 0
+let lastTime = 0
+let lastDraw = 0
+let raf = 0
+let measureRaf = 0
+let reduced = false
+let resizeObserver: ResizeObserver | null = null
+let themeObserver: MutationObserver | null = null
+let textObserver: MutationObserver | null = null
+let motionQuery: MediaQueryList | null = null
+
+function hash(a: number, b: number): number {
+  let h = Math.imul(a + 0x3c6ef372, 0x9e3779b1) ^ Math.imul(b + 0x632be5ab, 0x85ebca77)
+  h = Math.imul(h ^ (h >>> 15), 0x2c1b3c6d)
+  h = Math.imul(h ^ (h >>> 12), 0x297a2d39)
+  return ((h ^ (h >>> 15)) >>> 0) / 4294967296
+}
+
+function column(): HTMLElement | null {
+  return rootEl.value?.parentElement?.querySelector<HTMLElement>(':scope > [data-ui="auth-column"]') ?? null
+}
+
+function readFills(): void {
+  const el = rootEl.value
+  if (!el) return
+  const m = /rgba?\(\s*(\d+)[\s,]+(\d+)[\s,]+(\d+)/.exec(getComputedStyle(el).color)
+  const dark = document.documentElement.classList.contains('dark')
+  const rgb = m ? `${m[1]}, ${m[2]}, ${m[3]}` : dark ? '242, 242, 242' : '10, 10, 10'
+  fills = (dark ? DARK_LEVELS : LIGHT_LEVELS).map((a) => `rgba(${rgb}, ${a})`)
+}
+
+// 1 = free to light up, 0 = under text (faintest strength), soft in between.
+function measureQuiet(): void {
+  const el = rootEl.value
+  quiet = new Float32Array(cols * rows).fill(1)
+  const col = column()
+  if (!el || !col || !cols || !rows) return
+  const base = el.getBoundingClientRect()
+  const walker = document.createTreeWalker(col, NodeFilter.SHOW_TEXT)
+  const range = document.createRange()
+  const reach = TEXT_PAD + TEXT_FEATHER
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    if (!node.nodeValue || !node.nodeValue.trim()) continue
+    range.selectNodeContents(node)
+    for (const r of Array.from(range.getClientRects())) {
+      if (r.width < 1 || r.height < 1) continue
+      const left = r.left - base.left
+      const right = r.right - base.left
+      const top = r.top - base.top
+      const bottom = r.bottom - base.top
+      const c0 = Math.max(0, Math.floor((left - reach) / PITCH))
+      const c1 = Math.min(cols - 1, Math.floor((right + reach) / PITCH))
+      const r0 = Math.max(0, Math.floor((top - reach) / PITCH))
+      const r1 = Math.min(rows - 1, Math.floor((bottom + reach) / PITCH))
+      for (let y = r0; y <= r1; y++) {
+        const cy0 = y * PITCH
+        const dy = Math.max(top - (cy0 + CELL), cy0 - bottom, 0)
+        for (let x = c0; x <= c1; x++) {
+          const cx0 = x * PITCH
+          const dx = Math.max(left - (cx0 + CELL), cx0 - right, 0)
+          const d = Math.hypot(dx, dy) - TEXT_PAD
+          const q = d <= 0 ? 0 : Math.min(1, d / TEXT_FEATHER)
+          const i = y * cols + x
+          if (q < quiet[i]) quiet[i] = q
+        }
+      }
+    }
+  }
+}
+
+function levelOf(i: number): number {
+  const v = value[i] * quiet[i]
+  return v > 0 ? Math.min(4, Math.floor(v)) : 0
+}
+
+function addCell(path: Path2D, c: number, r: number): void {
+  const x = c * PITCH
+  const y = r * PITCH
+  if (typeof path.roundRect === 'function') path.roundRect(x, y, CELL, CELL, 1)
+  else path.rect(x, y, CELL, CELL)
+}
+
+function draw(toCol: number): void {
+  if (!ctx || !cols || !rows || fills.length !== 5) return
+  ctx.clearRect(0, 0, toCol * PITCH, rows * PITCH)
+  const paths = fills.map(() => new Path2D())
+  for (let r = 0; r < rows; r++) {
+    for (let c = 0; c < toCol; c++) addCell(paths[c < liveCols ? levelOf(r * cols + c) : 0], c, r)
+  }
+  paths.forEach((path, level) => {
+    if (!ctx) return
+    ctx.fillStyle = fills[level]
+    ctx.fill(path)
+  })
+}
+
+function resize(): void {
+  const el = rootEl.value
+  const canvas = canvasEl.value
+  if (!el || !canvas) return
+  const nextCols = Math.floor(el.clientWidth / PITCH)
+  const nextRows = Math.floor(el.clientHeight / PITCH)
+  if (nextCols !== cols || nextRows !== rows) {
+    cols = nextCols
+    rows = nextRows
+    liveCols = Math.min(cols, LIVE_COLS)
+    canvas.width = cols * PITCH
+    canvas.height = rows * PITCH
+    value = new Float32Array(cols * rows)
+    target = new Float32Array(cols * rows)
+    phase = new Float32Array(cols * rows)
+    for (let i = 0; i < phase.length; i++) phase[i] = hash(i % cols, Math.floor(i / cols)) * Math.PI * 2
+  }
+  measureQuiet()
+  draw(cols)
+}
+
+function newSweep(): void {
+  const narrow = cols < NARROW_COLS
+  const lo = narrow ? cols * 0.35 : REACH_MIN
+  const hi = narrow ? cols : REACH_MAX
+  front = -FRONT_HALF - 2
+  frontEnd = lo + Math.random() * (hi - lo)
+}
+
+function step(now: number, dt: number): void {
+  if (front > frontEnd) newSweep()
+  else front += FRONT_SPEED * dt
+  const t = now / 1000
+  for (let r = 0; r < rows; r++) {
+    const wobble = 2.4 * Math.sin(r * 0.37 + t * 0.6) + 1.2 * Math.sin(r * 1.13)
+    for (let c = 0; c < liveCols; c++) {
+      const i = r * cols + c
+      const d = Math.abs(c - front + wobble + (phase[i] - Math.PI) * 0.8)
+      if (d < FRONT_HALF) {
+        const lit = (1 - d / FRONT_HALF) * LIGHT + SHIMMER * (1 + Math.sin(phase[i] * 3 + t * 1.9))
+        if (lit > target[i]) target[i] = Math.min(4.2, lit)
+      } else if (target[i] > 0) {
+        target[i] = Math.max(0, target[i] - FADE * dt)
+      }
+      const v = value[i]
+      const g = target[i]
+      value[i] = v < g ? Math.min(g, v + RISE * dt) : Math.max(g, v - FADE * dt)
+    }
+  }
+}
+
+function frame(now: number): void {
+  raf = requestAnimationFrame(frame)
+  // rAF time can precede the moment the loop was armed: never step backwards
+  const dt = Math.max(0, Math.min(0.08, (now - (lastTime || now)) / 1000))
+  lastTime = now
+  step(now, dt)
+  if (now - lastDraw >= 33) {
+    lastDraw = now
+    draw(liveCols)
+  }
+}
+
+// Reduced motion: six seconds of the sweep computed at once, then left still.
+function stillFrame(): void {
+  newSweep()
+  for (let k = 0; k < 180; k++) step(k * 33.3, 1 / 30)
+  draw(cols)
+}
+
+function scheduleMeasure(): void {
+  if (measureRaf) return
+  measureRaf = requestAnimationFrame(() => {
+    measureRaf = 0
+    measureQuiet()
+    if (reduced || !raf) draw(cols)
+  })
+}
+
+function start(): void {
+  stop()
+  const canvas = canvasEl.value
+  const el = rootEl.value
+  if (!canvas || !el || typeof window === 'undefined') return
+  try {
+    ctx = canvas.getContext('2d')
+  } catch {
+    ctx = null
+  }
+  if (!ctx) return
+  readFills()
+  motionQuery = typeof window.matchMedia === 'function' ? window.matchMedia('(prefers-reduced-motion: reduce)') : null
+  reduced = !!motionQuery?.matches
+  motionQuery?.addEventListener?.('change', start)
+  const col = column()
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver(() => {
+      resize()
+      if (reduced) draw(cols)
+    })
+    resizeObserver.observe(el)
+    if (col) resizeObserver.observe(col)
+  }
+  if (typeof MutationObserver !== 'undefined') {
+    themeObserver = new MutationObserver(() => {
+      readFills()
+      draw(cols)
+    })
+    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+    if (col) {
+      textObserver = new MutationObserver(scheduleMeasure)
+      textObserver.observe(col, { childList: true, subtree: true, characterData: true })
+    }
+  }
+  // web fonts arriving move the text: measure again
+  document.fonts?.addEventListener?.('loadingdone', scheduleMeasure)
+  resize()
+  if (reduced) {
+    stillFrame()
+    return
+  }
+  newSweep()
+  lastTime = 0
+  raf = requestAnimationFrame(frame)
+}
+
+function stop(): void {
+  if (raf) cancelAnimationFrame(raf)
+  if (measureRaf) cancelAnimationFrame(measureRaf)
+  raf = 0
+  measureRaf = 0
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  themeObserver?.disconnect()
+  themeObserver = null
+  textObserver?.disconnect()
+  textObserver = null
+  motionQuery?.removeEventListener?.('change', start)
+  motionQuery = null
+  if (typeof document !== 'undefined') document.fonts?.removeEventListener?.('loadingdone', scheduleMeasure)
+  ctx = null
+  cols = 0
+  rows = 0
+}
+
+watch(canvasEl, (el) => (el ? start() : stop()), { flush: 'post' })
+
+onBeforeUnmount(stop)
+</script>
diff --git a/frontend/src/components/user/dashboard/UserDashboardCharts.vue b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
index 0ea213dc35d3..20cb08052c6e 100644
--- a/frontend/src/components/user/dashboard/UserDashboardCharts.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
@@ -86,7 +86,7 @@ const modelData = computed(() => !props.models?.length ? null : {
   labels: props.models.map((m: ModelStat) => m.model),
   datasets: [{
     data: props.models.map((m: ModelStat) => m.total_tokens),
-    // upstream's 8 colours are series 1-6, 11 (cyan) and 10 (lime); the Apple series under the console theme
+    // upstream's 8 colours are series 1-6, 11 (cyan) and 10 (lime); the console's categorical series under the theme
     backgroundColor: [0, 1, 2, 3, 4, 5, 10, 9].map((index) => presentation.value.series[index])
   }]
 })
diff --git a/frontend/src/composables/usePresentationColors.ts b/frontend/src/composables/usePresentationColors.ts
index 0892e40bbf63..43a3db30263a 100644
--- a/frontend/src/composables/usePresentationColors.ts
+++ b/frontend/src/composables/usePresentationColors.ts
@@ -1,17 +1,197 @@
 import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
 import { Chart } from 'chart.js'
+import type { Plugin } from 'chart.js'
 
-// Chart.js takes resolved values, not CSS. While the console theme is on (html.flat-theme), canvas text uses the
-// UI font stack and the text and grid lines a chart does not colour itself take the theme's axis and grid tokens
-// (--theme-chart-axis, --theme-chart-grid in styles/console/tokens.css); everything else stays Chart.js' default.
-// Chart.js' own defaults are saved before the first change and restored when the theme is switched off at
-// runtime. Charts re-resolve these defaults on the update that follows the next color read.
-type ChartDefaultsSnapshot = {
-  color: typeof Chart.defaults.color
-  borderColor: typeof Chart.defaults.borderColor
-  fontFamily: typeof Chart.defaults.font.family
+// Chart.js takes resolved values, not CSS. While the console theme is on (html.flat-theme), the chart defaults follow
+// the Experiential Labs console's charts (ui-el REF-CONSOLE §8.14): the UI font at 11px, axis labels in the muted
+// text colour, one 1px structural gridline per value step and none across the categories, no axis lines or tick
+// marks, three value steps, level labels (the ones that do not fit are skipped); 1.5px lines without dots (a dot on
+// hover), a thinner ring; legends with 8px squares (2px corners) in the series' solid colour and the faint text
+// colour; tooltips as the reference's popover (surface, 1px line, 6px radius, 12 / 10 inset, 11px, the popover
+// shadow, no caret, solid colour keys). A chart's own options still win over these defaults.
+// Every default changed is saved first and restored when the theme is switched off at runtime. Charts re-resolve the
+// defaults on the update that follows the next colour read.
+
+// ------------------------------------------------------------------ saved Chart.js defaults
+type Saved = { node: Record<string, any>; key: string; kind: 'route' | 'own' | 'absent'; value: unknown }
+let savedDefaults: Saved[] | null = null
+let consoleCharts = false
+
+// A defaults path such as ['plugins', 'tooltip', 'titleFont']. Chart.js routes some options to others (a getter /
+// setter pair backed by a `_name` value, e.g. tooltip fonts -> font): those are saved and restored through the
+// backing value, so the route keeps working after a restore. The registry scopes (scales.<type>, datasets.<type>,
+// elements.<type>, plugins.<id>) are never created here: a scope that is not registered yet is skipped and picked up
+// by the next colour read.
+function setDefault(path: readonly string[], value: unknown, saved: Saved[]) {
+  let node: Record<string, any> = Chart.defaults as unknown as Record<string, any>
+  for (const [depth, part] of path.slice(0, -1).entries()) {
+    if (node[part] === undefined) {
+      if (depth < 2) return
+      saved.push({ node, key: part, kind: 'absent', value: undefined })
+      node[part] = {}
+    }
+    node = node[part]
+    if (!node || typeof node !== 'object') return
+  }
+  const key = path[path.length - 1]
+  const descriptor = Object.getOwnPropertyDescriptor(node, key)
+  if (descriptor?.get && descriptor.set && Object.prototype.hasOwnProperty.call(node, `_${key}`)) {
+    saved.push({ node, key, kind: 'route', value: node[`_${key}`] })
+  } else if (descriptor) {
+    saved.push({ node, key, kind: 'own', value: node[key] })
+  } else {
+    saved.push({ node, key, kind: 'absent', value: undefined })
+  }
+  node[key] = value
+}
+
+function restoreDefaults() {
+  if (!savedDefaults) return
+  for (const entry of [...savedDefaults].reverse()) {
+    if (entry.kind === 'absent') delete entry.node[entry.key]
+    else entry.node[entry.key] = entry.value
+  }
+  savedDefaults = null
+}
+
+// ------------------------------------------------------------------ legend squares and the tooltip shadow
+type LegendItemLike = { fillStyle?: unknown; strokeStyle?: unknown; lineWidth?: number; pointStyle?: unknown; borderRadius?: unknown }
+const opaque = (value: unknown) => typeof value === 'string' && !/^#[0-9a-f]{6}[0-9a-f]{2}$/i.test(value) && !/^rgba\(.*,\s*0?\.\d+\s*\)$/i.test(value)
+
+// Legend items take the series' solid colour as an 8px square with 2px corners (a line series' translucent area
+// fill is not its colour), whether a chart asked for point styles or boxes.
+function consoleLegendLabels(generate: (chart: Chart) => LegendItemLike[]) {
+  return function (this: unknown, chart: Chart) {
+    const items = generate.call(this, chart)
+    if (!consoleCharts) return items
+    return items.map((item) => ({
+      ...item,
+      fillStyle: opaque(item.fillStyle) ? item.fillStyle : (item.strokeStyle ?? item.fillStyle),
+      lineWidth: 0,
+      pointStyle: 'rectRounded',
+      borderRadius: 2
+    }))
+  }
+}
+
+// The tooltip's colour keys are the series' solid colour too, as 8px squares with 2px corners.
+type LabelColorLike = { borderColor?: unknown; backgroundColor?: unknown; borderWidth?: unknown; borderRadius?: unknown }
+function consoleTooltipLabelColor(labelColor: (item: unknown) => LabelColorLike) {
+  return function (this: unknown, item: unknown) {
+    const color = labelColor.call(this, item)
+    if (!consoleCharts || !color) return color
+    const solid = opaque(color.backgroundColor) ? color.backgroundColor : (color.borderColor ?? color.backgroundColor)
+    return { ...color, backgroundColor: solid, borderColor: solid, borderWidth: 0, borderRadius: 2 }
+  }
+}
+
+let tooltipShadowColor = 'rgba(20, 20, 18, 0.08)'
+// Chart.js draws no tooltip shadow: the popover shadow (0 6px 20px) is painted as a rounded surface under the
+// tooltip before Chart.js draws the tooltip itself.
+const consoleTooltipShadow: Plugin = {
+  id: 'consoleTooltipShadow',
+  beforeTooltipDraw(chart, args) {
+    const tooltip = args.tooltip as unknown as { opacity: number; x: number; y: number; width: number; height: number; options: { backgroundColor?: unknown; cornerRadius?: unknown } }
+    if (!consoleCharts || !tooltip || !tooltip.opacity) return
+    const ctx = chart.ctx
+    const radius = typeof tooltip.options.cornerRadius === 'number' ? tooltip.options.cornerRadius : 6
+    ctx.save()
+    ctx.globalAlpha = tooltip.opacity
+    ctx.shadowColor = tooltipShadowColor
+    ctx.shadowBlur = 20
+    ctx.shadowOffsetY = 6
+    ctx.fillStyle = typeof tooltip.options.backgroundColor === 'string' ? tooltip.options.backgroundColor : '#ffffff'
+    ctx.beginPath()
+    ctx.roundRect(tooltip.x, tooltip.y, tooltip.width, tooltip.height, radius)
+    ctx.fill()
+    ctx.restore()
+  }
+}
+let tooltipShadowRegistered = false
+
+function applyConsoleChartDefaults(styles: CSSStyleDeclaration, dark: boolean) {
+  const token = (name: string) => styles.getPropertyValue(name).trim()
+  const rgb = (name: string, fallback: string) => {
+    const value = /^(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})$/.exec(token(name))
+    return value ? `rgb(${value[1]}, ${value[2]}, ${value[3]})` : fallback
+  }
+  restoreDefaults()
+  const saved: Saved[] = []
+  const surface = rgb('--ui-surface', dark ? '#1a1a1a' : '#ffffff')
+  const line = token('--theme-chart-grid') || rgb('--ui-line', '#ededed')
+  const font = token('--ui-font')
+  // text and lines
+  if (font) setDefault(['font', 'family'], font, saved)
+  setDefault(['font', 'size'], 11, saved)
+  setDefault(['color'], token('--theme-chart-axis') || rgb('--ui-muted', '#6c6c6c'), saved)
+  setDefault(['borderColor'], line, saved)
+  // scales: value gridlines only, no axis lines or tick marks, labels 10px, three steps
+  setDefault(['scale', 'border', 'display'], false, saved)
+  setDefault(['scale', 'grid', 'drawTicks'], false, saved)
+  setDefault(['scale', 'ticks', 'padding'], 8, saved)
+  setDefault(['scale', 'ticks', 'font'], { size: 10 }, saved)
+  // labels stay level: the ones that do not fit are skipped (the reference labels only a few dates)
+  setDefault(['scale', 'ticks', 'maxRotation'], 0, saved)
+  setDefault(['scale', 'ticks', 'autoSkipPadding'], 24, saved)
+  setDefault(['scales', 'category', 'grid', 'display'], false, saved)
+  setDefault(['scales', 'linear', 'ticks', 'maxTicksLimit'], 3, saved)
+  // marks
+  setDefault(['elements', 'line', 'borderWidth'], 1.5, saved)
+  setDefault(['elements', 'point', 'radius'], 0, saved)
+  setDefault(['elements', 'point', 'hoverRadius'], 3, saved)
+  setDefault(['elements', 'point', 'hitRadius'], 8, saved)
+  setDefault(['elements', 'arc', 'borderColor'], surface, saved)
+  setDefault(['elements', 'bar', 'borderRadius'], 0, saved)
+  setDefault(['datasets', 'doughnut', 'cutout'], '70%', saved)
+  setDefault(['datasets', 'bar', 'categoryPercentage'], 0.96, saved)
+  setDefault(['datasets', 'bar', 'barPercentage'], 1, saved)
+  // legend
+  const legend = (Chart.defaults.plugins as unknown as { legend?: { labels?: { generateLabels?: (chart: Chart) => LegendItemLike[] } } }).legend
+  const generate = legend?.labels?.generateLabels
+  setDefault(['plugins', 'legend', 'labels', 'boxWidth'], 8, saved)
+  setDefault(['plugins', 'legend', 'labels', 'boxHeight'], 8, saved)
+  setDefault(['plugins', 'legend', 'labels', 'padding'], 12, saved)
+  setDefault(['plugins', 'legend', 'labels', 'useBorderRadius'], true, saved)
+  setDefault(['plugins', 'legend', 'labels', 'borderRadius'], 2, saved)
+  setDefault(['plugins', 'legend', 'labels', 'color'], rgb('--ui-faint', '#6c6c6c'), saved)
+  if (generate) setDefault(['plugins', 'legend', 'labels', 'generateLabels'], consoleLegendLabels(generate), saved)
+  // tooltip: the reference's popover
+  const tooltip = (Chart.defaults.plugins as unknown as { tooltip?: { callbacks?: { labelColor?: (item: unknown) => LabelColorLike } } }).tooltip
+  const labelColor = tooltip?.callbacks?.labelColor
+  if (labelColor) setDefault(['plugins', 'tooltip', 'callbacks', 'labelColor'], consoleTooltipLabelColor(labelColor), saved)
+  setDefault(['plugins', 'tooltip', 'backgroundColor'], token('--theme-chart-tooltip') || surface, saved)
+  setDefault(['plugins', 'tooltip', 'borderColor'], line, saved)
+  setDefault(['plugins', 'tooltip', 'borderWidth'], 1, saved)
+  setDefault(['plugins', 'tooltip', 'cornerRadius'], 6, saved)
+  setDefault(['plugins', 'tooltip', 'padding'], { top: 10, right: 12, bottom: 10, left: 12 }, saved)
+  setDefault(['plugins', 'tooltip', 'caretSize'], 0, saved)
+  setDefault(['plugins', 'tooltip', 'caretPadding'], 8, saved)
+  setDefault(['plugins', 'tooltip', 'titleColor'], token('--theme-chart-title') || rgb('--ui-ink', '#0a0a0a'), saved)
+  setDefault(['plugins', 'tooltip', 'bodyColor'], token('--theme-chart-text') || rgb('--ui-ink-soft', '#5d5d5d'), saved)
+  setDefault(['plugins', 'tooltip', 'footerColor'], rgb('--ui-faint', '#6c6c6c'), saved)
+  setDefault(['plugins', 'tooltip', 'titleFont'], { size: 11, weight: 600 }, saved)
+  setDefault(['plugins', 'tooltip', 'bodyFont'], { size: 11 }, saved)
+  setDefault(['plugins', 'tooltip', 'footerFont'], { size: 11, weight: 400 }, saved)
+  setDefault(['plugins', 'tooltip', 'titleMarginBottom'], 8, saved)
+  setDefault(['plugins', 'tooltip', 'bodySpacing'], 6, saved)
+  setDefault(['plugins', 'tooltip', 'footerMarginTop'], 8, saved)
+  setDefault(['plugins', 'tooltip', 'boxWidth'], 8, saved)
+  setDefault(['plugins', 'tooltip', 'boxHeight'], 8, saved)
+  setDefault(['plugins', 'tooltip', 'boxPadding'], 6, saved)
+  setDefault(['plugins', 'tooltip', 'multiKeyBackground'], surface, saved)
+  savedDefaults = saved
+  tooltipShadowColor = dark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(20, 20, 18, 0.08)'
+  if (!tooltipShadowRegistered) {
+    Chart.register(consoleTooltipShadow)
+    tooltipShadowRegistered = true
+  }
+  consoleCharts = true
+}
+
+function restoreUpstreamChartDefaults() {
+  consoleCharts = false
+  restoreDefaults()
 }
-let upstreamChartDefaults: ChartDefaultsSnapshot | null = null
 
 // `#rrggbb`, `#rrggbbaa`, `rgb(r, g, b)` and `rgba(r, g, b, a)`: channels, alpha, and how the alpha was written.
 type ParsedColor = { r: number; g: number; b: number; a: number; hex: boolean; alpha: string | null }
@@ -26,28 +206,6 @@ function parseColor(value: string): ParsedColor | null {
   return { r: Number(rgb[1]), g: Number(rgb[2]), b: Number(rgb[3]), a: rgb[4] === undefined ? 1 : Number(rgb[4]), hex: false, alpha: rgb[4] ?? null }
 }
 
-function applyConsoleChartDefaults(styles: CSSStyleDeclaration) {
-  if (!upstreamChartDefaults) {
-    upstreamChartDefaults = {
-      color: Chart.defaults.color,
-      borderColor: Chart.defaults.borderColor,
-      fontFamily: Chart.defaults.font.family
-    }
-  }
-  const token = (name: string) => styles.getPropertyValue(name).trim()
-  Chart.defaults.font.family = token('--ui-font') || upstreamChartDefaults.fontFamily
-  Chart.defaults.color = token('--theme-chart-axis') || upstreamChartDefaults.color
-  Chart.defaults.borderColor = token('--theme-chart-grid') || upstreamChartDefaults.borderColor
-}
-
-function restoreUpstreamChartDefaults() {
-  if (!upstreamChartDefaults) return
-  Chart.defaults.color = upstreamChartDefaults.color
-  Chart.defaults.borderColor = upstreamChartDefaults.borderColor
-  Chart.defaults.font.family = upstreamChartDefaults.fontFamily
-  upstreamChartDefaults = null
-}
-
 // Canvas consumers need resolved colors. CSS custom properties keep optional
 // presentation policy outside their data, chart and billing logic.
 const defaults = {
@@ -56,12 +214,15 @@ const defaults = {
   tooltip: ['#ffffff', '#1f2937'], title: ['#111827', '#f3f4f6'],
   body: ['#4b5563', '#d1d5db'], gray: ['#9ca3af', '#9ca3af']
 } as const
-// Categorical series (distribution charts, token trend). Defaults are the upstream palette; the
-// console theme supplies --theme-chart-series-1..12 as #rrggbb (consumers append hex alpha).
+// Categorical series (distribution charts: slices of a whole). Defaults are the upstream palette; the console theme
+// supplies --theme-chart-series-1..12 as #rrggbb (consumers append hex alpha): the reference's usage-by-model colours
+// (ink, accent, indigo, amber, cyan) first.
 const seriesDefaults = [
   '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899',
   '#14b8a6', '#f97316', '#6366f1', '#84cc16', '#06b6d4', '#a855f7'
 ] as const
+// Time series (trend lines): the same upstream palette by default; the console theme supplies --ui-chart-trend-1..12
+// (styles/console/data.css): the reference's usage series in upstream's hue order, so an index keeps its hue.
 // Colour by hue: upstream charts draw with Tailwind literals (a 500 shade; gray-400 for "other"). With the console
 // theme off tone() / toneText() return the literal itself, so the upstream colours stay exact. Under the theme the
 // literal's hue family (the family tailwind.config.js folds it into) resolves to that family's chart mark token
@@ -99,8 +260,8 @@ function retone(literal: string, palette: HuePalette): string {
   return color.alpha === null ? `rgb(${target.r}, ${target.g}, ${target.b})` : `rgba(${target.r}, ${target.g}, ${target.b}, ${color.alpha})`
 }
 
-type Colors = Record<keyof typeof defaults, string> & {
-  series: string[]
+type Base = Record<keyof typeof defaults, string> & { series: string[]; trend: string[] }
+type Colors = Base & {
   // semantic marks (health, errors, success rates): upstream's blue / emerald / amber / red 500
   info: string
   success: string
@@ -110,7 +271,7 @@ type Colors = Record<keyof typeof defaults, string> & {
   toneText: (literal: string) => string
 }
 
-function withPalette(base: Record<keyof typeof defaults, string> & { series: string[] }, marks: HuePalette, inks: HuePalette): Colors {
+function withPalette(base: Base, marks: HuePalette, inks: HuePalette): Colors {
   const tone = (literal: string) => retone(literal, marks)
   return {
     ...base,
@@ -126,7 +287,8 @@ function withPalette(base: Record<keyof typeof defaults, string> & { series: str
 export function usePresentationColors() {
   const colors = shallowRef<Colors>(withPalette({
     ...(Object.fromEntries(Object.entries(defaults).map(([key, values]) => [key, values[0]])) as Record<keyof typeof defaults, string>),
-    series: [...seriesDefaults]
+    series: [...seriesDefaults],
+    trend: [...seriesDefaults]
   }, {}, {}))
   // (the palette signature starts as the theme-off one: no hue family resolved)
   let observer: MutationObserver | null = null, active = false, queued = false, paletteKey = '[{},{}]'
@@ -134,18 +296,20 @@ export function usePresentationColors() {
     queued = false
     if (!active) return
     const root = document.documentElement, styles = getComputedStyle(root), dark = root.classList.contains('dark')
-    if (root.classList.contains('flat-theme')) applyConsoleChartDefaults(styles)
+    if (root.classList.contains('flat-theme')) applyConsoleChartDefaults(styles, dark)
     else restoreUpstreamChartDefaults()
     const isColor = (value: string) => !!value && typeof CSS !== 'undefined' && CSS.supports('color', value)
-    const next: Record<keyof typeof defaults, string> & { series: string[] } = { ...colors.value }
+    const next: Base = { ...colors.value }
     for (const key of Object.keys(defaults) as Array<keyof typeof defaults>) {
       const value = styles.getPropertyValue(`--theme-chart-${key.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase())}`).trim()
       next[key] = isColor(value) ? value : defaults[key][dark ? 1 : 0]
     }
-    next.series = seriesDefaults.map((fallback, index) => {
-      const value = styles.getPropertyValue(`--theme-chart-series-${index + 1}`).trim()
+    const palette = (prefix: string) => seriesDefaults.map((fallback, index) => {
+      const value = styles.getPropertyValue(`${prefix}${index + 1}`).trim()
       return /^#[0-9a-f]{6}$/i.test(value) && isColor(value) ? value : fallback
     })
+    next.series = palette('--theme-chart-series-')
+    next.trend = palette('--ui-chart-trend-')
     // hue families resolve only where the theme defines their tokens; otherwise tone() keeps the literal
     const marks: HuePalette = {}, inks: HuePalette = {}
     for (const family of Object.keys(MARK_TOKENS) as HueFamily[]) {
@@ -157,7 +321,8 @@ export function usePresentationColors() {
     const nextPaletteKey = JSON.stringify([marks, inks])
     const changed = nextPaletteKey !== paletteKey ||
       (Object.keys(defaults) as Array<keyof typeof defaults>).some(key => next[key] !== colors.value[key]) ||
-      next.series.some((value, index) => value !== colors.value.series[index])
+      next.series.some((value, index) => value !== colors.value.series[index]) ||
+      next.trend.some((value, index) => value !== colors.value.trend[index])
     paletteKey = nextPaletteKey
     if (changed) colors.value = withPalette(next, marks, inks)
   }
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4399d59e8589..825f32269535 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -800,6 +800,363 @@
  *   same specificity: `:where(.flat-theme) .btn-secondary:is(.dark *)`.
  * - Values come from styles/console/tokens.css. Everything that is not a
  *   recipe restatement lives in styles/console/*.css (plain CSS, no @layer).
+ * - Overlay recipes (.modal-*, .dropdown*, .toast*, .dialog-*) are restated in
+ *   styles/console/overlays.css; focus rings of every control and the sizes of
+ *   icons inside controls are drawn in styles/console/controls.css.
  * ========================================================================== */
 @layer components {
+  /* ---------------------------------------------------------------- buttons
+   * The reference Button (REF-CONSOLE §8.3): our .btn is its `sm` size (30px,
+   * 12px inset, 13px / 600, radius 6, gap 8). No shadow, no press scale,
+   * disabled at .55. Default (.btn-secondary) and primary have no hover
+   * state (measured); ghost and destructive fade in 150ms. */
+  :where(.flat-theme) .btn {
+    gap: 0.5rem;
+    min-height: var(--ui-control-h);
+    border: 1px solid transparent;
+    border-radius: var(--ui-radius-md);
+    padding: 0.265625rem 0.75rem;
+    font-size: 0.8125rem;
+    line-height: 1.21875rem;
+    font-weight: 600;
+    letter-spacing: normal;
+    transition-property: color, background-color, border-color, opacity;
+    transition-duration: var(--ui-duration);
+    transition-timing-function: var(--ui-ease);
+  }
+
+  :where(.flat-theme) .btn:focus {
+    box-shadow: none;
+  }
+
+  :where(.flat-theme) .btn:active {
+    transform: none;
+  }
+
+  :where(.flat-theme) .btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  /* primary = ink with on-ink text (near-white with ink text in dark) */
+  :where(.flat-theme) .btn-primary,
+  :where(.flat-theme) .btn-primary:is(.dark *),
+  :where(.flat-theme) .btn-primary:hover,
+  :where(.flat-theme) .btn-primary:hover:is(.dark *) {
+    --theme-on-fill: var(--ui-on-ink);
+    border-color: rgb(var(--ui-ink));
+    background-color: rgb(var(--ui-ink));
+    background-image: none;
+    color: rgb(var(--ui-on-ink));
+    box-shadow: none;
+  }
+
+  /* default = surface, the control outline, ink text */
+  :where(.flat-theme) .btn-secondary,
+  :where(.flat-theme) .btn-secondary:is(.dark *),
+  :where(.flat-theme) .btn-secondary:hover,
+  :where(.flat-theme) .btn-secondary:hover:is(.dark *) {
+    border-color: rgb(var(--ui-line-strong));
+    background-color: rgb(var(--ui-surface));
+    color: rgb(var(--ui-ink));
+    box-shadow: none;
+  }
+
+  /* ghost = muted text; a subtle fill and ink text on hover */
+  :where(.flat-theme) .btn-ghost,
+  :where(.flat-theme) .btn-ghost:is(.dark *) {
+    border-color: transparent;
+    background-color: transparent;
+    color: rgb(var(--ui-muted));
+  }
+
+  :where(.flat-theme) .btn-ghost:hover,
+  :where(.flat-theme) .btn-ghost:hover:is(.dark *) {
+    background-color: rgb(var(--ui-subtle));
+    color: rgb(var(--ui-ink));
+  }
+
+  /* destructive: danger text on the surface, a danger edge at 30 % (50 % and
+     the soft fill on hover) */
+  :where(.flat-theme) .btn-danger,
+  :where(.flat-theme) .btn-danger:is(.dark *) {
+    border-color: rgb(var(--ui-danger) / 0.3);
+    background-color: rgb(var(--ui-surface));
+    background-image: none;
+    color: rgb(var(--ui-danger));
+    box-shadow: none;
+  }
+
+  :where(.flat-theme) .btn-danger:hover,
+  :where(.flat-theme) .btn-danger:hover:is(.dark *) {
+    border-color: rgb(var(--ui-danger) / 0.5);
+    background-color: rgb(var(--ui-danger-soft));
+    background-image: none;
+    box-shadow: none;
+  }
+
+  /* success = the reference's accent button (a positive CTA): the accent fill
+     with on-accent text. Its hover is the deeper accent: the measured opacity
+     .9 leaves white text at 3.8:1. */
+  :where(.flat-theme) .btn-success,
+  :where(.flat-theme) .btn-success:is(.dark *) {
+    --theme-on-fill: var(--ui-on-primary);
+    border-color: rgb(var(--ui-primary));
+    background-color: rgb(var(--ui-primary));
+    background-image: none;
+    color: rgb(var(--ui-on-primary));
+    box-shadow: none;
+  }
+
+  :where(.flat-theme) .btn-success:hover,
+  :where(.flat-theme) .btn-success:hover:is(.dark *) {
+    border-color: rgb(var(--ui-primary-hover));
+    background-color: rgb(var(--ui-primary-hover));
+    background-image: none;
+    box-shadow: none;
+  }
+
+  /* warning: outlined like destructive, in the warning colour */
+  :where(.flat-theme) .btn-warning,
+  :where(.flat-theme) .btn-warning:is(.dark *) {
+    border-color: rgb(var(--ui-warning) / 0.3);
+    background-color: rgb(var(--ui-surface));
+    background-image: none;
+    color: rgb(var(--ui-warning));
+    box-shadow: none;
+  }
+
+  :where(.flat-theme) .btn-warning:hover,
+  :where(.flat-theme) .btn-warning:hover:is(.dark *) {
+    border-color: rgb(var(--ui-warning) / 0.5);
+    background-color: rgb(var(--ui-warning-soft));
+    background-image: none;
+    box-shadow: none;
+  }
+
+  /* payment methods keep their brand fills (they are how a payer recognises
+     the method); they lose the coloured glow */
+  :where(.flat-theme) :is(.btn-stripe, .btn-airwallex, .btn-alipay, .btn-wxpay),
+  :where(.flat-theme) :is(.btn-stripe, .btn-airwallex, .btn-alipay, .btn-wxpay):hover {
+    box-shadow: none;
+  }
+
+  /* sizes: sm 26px (row and card actions), md 34px (beside a form field),
+     lg 38px (the reference md); icon = a 30px square */
+  :where(.flat-theme) .btn-sm {
+    min-height: 1.625rem;
+    border-radius: var(--ui-radius-md);
+    padding: 0.1875rem 0.625rem;
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+  }
+
+  :where(.flat-theme) .btn-md {
+    min-height: var(--ui-select-h);
+    border-radius: var(--ui-radius-md);
+    padding: 0.390625rem 0.875rem;
+    font-size: 0.8125rem;
+    line-height: 1.21875rem;
+  }
+
+  :where(.flat-theme) .btn-lg {
+    min-height: var(--ui-control-h-md);
+    border-radius: var(--ui-radius-md);
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  :where(.flat-theme) .btn-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--ui-control-h);
+    min-height: var(--ui-control-h);
+    border-radius: var(--ui-radius-md);
+    padding: 0;
+  }
+
+  /* ---------------------------------------------------------------- fields
+   * The reference form field (REF-CONSOLE §8.4): 34px (6.25px + the 19.5px
+   * line + 1px edges), 10px inset, 13px, radius 6, the surface, the control
+   * outline. Its focus (an accent edge) is drawn in controls.css. The empty
+   * field without a placeholder takes the 3:1 form-control line in
+   * behaviour.css (B3.2). */
+  :where(.flat-theme) .input,
+  :where(.flat-theme) .input:is(.dark *) {
+    border-radius: var(--ui-radius-md);
+    border-color: rgb(var(--ui-line-strong));
+    background-color: rgb(var(--ui-surface));
+    padding: 0.390625rem 0.625rem;
+    font-size: 0.8125rem;
+    line-height: 1.21875rem;
+    color: rgb(var(--ui-ink));
+    box-shadow: none;
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-duration: var(--ui-duration);
+    transition-timing-function: var(--ui-ease);
+  }
+
+  :where(.flat-theme) .input::placeholder,
+  :where(.flat-theme) .input:is(.dark *)::placeholder {
+    color: rgb(var(--ui-faint));
+    opacity: 1;
+  }
+
+  :where(.flat-theme) .input:disabled,
+  :where(.flat-theme) .input:disabled:is(.dark *) {
+    cursor: not-allowed;
+    background-color: rgb(var(--ui-subtle));
+    color: rgb(var(--ui-muted));
+  }
+
+  :where(.flat-theme) textarea.input {
+    padding-top: 0.4375rem;
+    padding-bottom: 0.4375rem;
+  }
+
+  /* the native select is the reference's house-select: 13px / 600 values, a
+     12px chevron 9px from the right edge, the focus line on hover */
+  :where(.flat-theme) select.input:not([multiple]):not([size]),
+  :where(.flat-theme) select.input:not([multiple]):not([size]):is(.dark *) {
+    appearance: none;
+    cursor: pointer;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e8e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5625rem center;
+    background-size: 0.75rem 0.75rem;
+    padding-right: 1.75rem;
+    font-weight: 600;
+  }
+
+  :where(.flat-theme) select.input:not([multiple]):not([size]):is(.dark *) {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c8c8c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+  }
+
+  :where(.flat-theme) select.input:not(:disabled):hover,
+  :where(.flat-theme) select.input:not(:disabled):hover:is(.dark *) {
+    border-color: rgb(var(--ui-line-focus));
+  }
+
+  /* error: a danger edge (the reference only prints the message; the edge
+     keeps the field findable) */
+  :where(.flat-theme) .input-error,
+  :where(.flat-theme) .input-error:is(.dark *) {
+    border-color: rgb(var(--ui-danger));
+  }
+
+  /* the field label is the reference's mono label (the sign-in field label:
+     Geist Mono 10/15, 600, 0.12em, uppercase; 11/16 in the Chinese interface) */
+  :where(.flat-theme) .input-label,
+  :where(.flat-theme) .input-label:is(.dark *) {
+    margin-bottom: 0.5rem;
+    font-family: var(--ui-font-mono);
+    font-size: var(--ui-label-size);
+    line-height: var(--ui-label-leading);
+    font-weight: 600;
+    letter-spacing: var(--ui-label-tracking);
+    text-transform: uppercase;
+    color: rgb(var(--ui-label));
+  }
+
+  :where(.flat-theme) .input-hint,
+  :where(.flat-theme) .input-hint:is(.dark *) {
+    margin-top: 0.375rem;
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+    color: rgb(var(--ui-muted));
+  }
+
+  :where(.flat-theme) .input-error-text {
+    margin-top: 0.375rem;
+    font-size: 0.75rem;
+    line-height: 1.125rem;
+    color: rgb(var(--ui-danger));
+  }
+
+  /* ---------------------------------------------------------------- tabs
+   * .tabs / .tab are the reference's segmented control (SlidingTabs, §8.5):
+   * a 1px structural frame on the surface, radius 8, 2px inset; segments
+   * 14px / 6px, 12.5px / 600, muted, ink on hover; the current one is ink
+   * with on-ink text, fading in 200ms (upstream has no thumb to slide). */
+  :where(.flat-theme) .tabs,
+  :where(.flat-theme) .tabs:is(.dark *) {
+    gap: 0;
+    border: 1px solid rgb(var(--ui-line));
+    border-radius: var(--ui-radius-lg);
+    background-color: rgb(var(--ui-surface));
+    padding: 2px;
+  }
+
+  :where(.flat-theme) .tab,
+  :where(.flat-theme) .tab:is(.dark *) {
+    border-radius: var(--ui-radius-md);
+    padding: 0.375rem 0.875rem;
+    font-size: 0.78125rem;
+    line-height: 1.171875rem;
+    font-weight: 600;
+    color: rgb(var(--ui-muted));
+    transition-property: color, background-color;
+    transition-duration: var(--ui-duration-slide);
+    transition-timing-function: var(--ui-ease-out);
+  }
+
+  :where(.flat-theme) .tab:hover,
+  :where(.flat-theme) .tab:hover:is(.dark *) {
+    color: rgb(var(--ui-ink));
+  }
+
+  :where(.flat-theme) .tab-active,
+  :where(.flat-theme) .tab-active:is(.dark *),
+  :where(.flat-theme) .tab-active:hover,
+  :where(.flat-theme) .tab-active:hover:is(.dark *) {
+    background-color: rgb(var(--ui-ink));
+    color: rgb(var(--ui-on-ink));
+    box-shadow: none;
+  }
+
+  /* ---------------------------------------------------------------- switch
+   * The reference settings Toggle: 34 x 20, a 16px knob 2px in. On = ink.
+   * Off = the 3:1 form-control line (the reference's ink at 20 % is 1.6:1). */
+  :where(.flat-theme) .switch,
+  :where(.flat-theme) .switch:is(.dark *) {
+    height: 1.25rem;
+    width: 2.125rem;
+    background-color: rgb(var(--ui-control-line));
+    transition-duration: var(--ui-duration);
+  }
+
+  :where(.flat-theme) .switch-active,
+  :where(.flat-theme) .switch-active:is(.dark *) {
+    background-color: rgb(var(--ui-ink));
+  }
+
+  :where(.flat-theme) .switch-thumb {
+    top: 2px;
+    left: 2px;
+    height: 1rem;
+    width: 1rem;
+    background-color: rgb(var(--ui-surface));
+    box-shadow: none;
+    transition-duration: var(--ui-duration);
+  }
+
+  :where(.flat-theme) .switch-thumb:is(.dark *) {
+    background-color: rgb(var(--ui-canvas));
+  }
+
+  :where(.flat-theme) .switch-active .switch-thumb {
+    --tw-translate-x: 0.875rem;
+  }
+
+  /* ---------------------------------------------------------------- card
+   * (for the data agent) In dark the card is the reference's surface
+   * (#1a1a1a on the #0f0f0f canvas) with its structural line (white 14 %),
+   * not upstream's dark-800 / dark-700 at 50 %; the light values already
+   * come from the tokens. */
+  :where(.flat-theme) .card:is(.dark *) {
+    border-color: rgb(var(--ui-line));
+    background-color: rgb(var(--ui-surface));
+  }
 }
diff --git a/frontend/src/styles/console/behaviour.css b/frontend/src/styles/console/behaviour.css
index 23740adf1bb2..36e3077a6cf2 100644
--- a/frontend/src/styles/console/behaviour.css
+++ b/frontend/src/styles/console/behaviour.css
@@ -55,13 +55,18 @@ html.flat-theme [class~="card"] > div[class~="mb-4"][class~="justify-between"]:h
   }
 }
 
+/* Preview decision D5 (Experiential Labs density): accounts, users, API keys and IP management use single-line rows
+   that scroll sideways, like the reference; the usage records table keeps its two-line cells. The two-line layouts
+   the owner approved in rounds 4-5 (B1.4 outside usage, B1.5-B1.10) stay available behind `ui-cells-two-line` on
+   <html>, which nothing sets by default; the owner's answer decides whether they come back or go. */
 /* B1.4 Timestamps on two lines (date / time; approved round 4): the cell text becomes a block as wide as its
    longer part, so it breaks at the space and never inside the date or the time. Only in the tables chosen;
    cells are found by data-column, so hiding columns does not switch it off. 账号管理「最近使用」 is relative
    (「2天前」) and stays one line. */
-html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="usage"], [data-table="accounts"]) td[data-column="created_at"] > span,
-html.flat-theme .table-wrapper[data-table="users"] td:is([data-column="created_at"], [data-column="last_used_at"], [data-column="last_active_at"]) > span,
-html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="expiry"] > div > span:first-child {
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="created_at"] > span,
+html.flat-theme.ui-cells-two-line .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="accounts"]) td[data-column="created_at"] > span,
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="users"] td:is([data-column="created_at"], [data-column="last_used_at"], [data-column="last_active_at"]) > span,
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-column="expiry"] > div > span:first-child {
   display: inline-block;
   width: min-content;
   white-space: normal;
@@ -69,7 +74,7 @@ html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="expiry"] >
 
 /* B1.5 账号管理「过期时间」 (「2026-10-25 08:00」): a line may break after a hyphen, so min-content would split the
    date; a width that holds the date keeps it whole and moves the time to line two. */
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="expires_at"] > div > span:first-child {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="accounts"] td[data-column="expires_at"] > div > span:first-child {
   display: inline-block;
   max-width: 10ch;
   white-space: normal;
@@ -78,7 +83,7 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="expires_at
 /* B1.6 IP管理 names break only at a space or a hyphen (「美国原生- / 超高质量」) and stay whole without one; the
    location breaks only at the spaces around 「·」 (approved round 4). keep-all keeps Chinese words together;
    min-content lets a longer part widen the column instead of running into the next one. */
-html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="name"] > span {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-column="name"] > span {
   display: inline-block;
   min-width: min-content;
   max-width: 7.5em;
@@ -86,7 +91,7 @@ html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="name"] > sp
   word-break: keep-all;
 }
 
-html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="location"] span[class~="text-sm"] {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-column="location"] span[class~="text-sm"] {
   min-width: min-content;
   max-width: 5em;
   white-space: normal;
@@ -95,7 +100,7 @@ html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="location"]
 
 /* B1.7 API 密钥 group cell: the badge always on line one and 「选择分组 ⌄」 on line two (approved round 4), so the
    parts never split unpredictably and the column is as wide as the wider line. */
-html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="keys"] td[data-column="group"] button {
   display: grid;
   grid-template-columns: max-content max-content;
   justify-content: start;
@@ -103,38 +108,38 @@ html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button
   gap: 0.25rem;
 }
 
-html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button > :first-child {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="keys"] td[data-column="group"] button > :first-child {
   grid-column: 1 / -1;
   justify-self: start;
 }
 
 /* B1.8 用户管理: 「充值」 under the amount (approved round 4); the button's own inset is pulled back so its label
    lines up with the amount. */
-html.flat-theme .table-wrapper[data-table="users"] td[data-column="balance"] > div {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="users"] td[data-column="balance"] > div {
   flex-direction: column;
   align-items: flex-start;
   gap: 0.125rem;
 }
 
-html.flat-theme .table-wrapper[data-table="users"] td[data-column="balance"] > div > button {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="users"] td[data-column="balance"] > div > button {
   margin-left: -0.5rem;
 }
 
 /* B1.9 用户管理 time headers wrap after four characters (「最后活跃 / 时间」; English at the space), so the columns
    are only as wide as the two-line timestamps below them (approved round 5). */
-html.flat-theme .table-wrapper[data-table="users"] th:is([data-column="last_active_at"], [data-column="last_used_at"], [data-column="created_at"]) > div > span:first-child {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="users"] th:is([data-column="last_active_at"], [data-column="last_used_at"], [data-column="created_at"]) > div > span:first-child {
   max-width: 4.5em;
 }
 
 /* B1.10 IP管理: the copy button under the address and the show-password button under the credentials, so both
    columns are as wide as their text (approved round 5). */
-html.flat-theme .table-wrapper[data-table="proxies"] td:is([data-column="address"], [data-column="auth"]) > div {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td:is([data-column="address"], [data-column="auth"]) > div {
   flex-direction: column;
   align-items: flex-start;
   gap: 0.125rem;
 }
 
-html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="auth"] > div > button {
+html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-column="auth"] > div > button {
   margin-left: 0;
 }
 
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index f75e90f55de5..c6ab38d2d83a 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -1 +1,774 @@
-/* Console theme · controls built from utilities: filter pills, segmented controls, switch copies, option cards, native dates, Select / DatePicker scoped classes (owner: the controls agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here). */
+/* Console theme · controls (owner: the controls agent). Plain CSS, loaded after the Tailwind output: every selector
+ * starts with html.flat-theme, so the theme switched off renders upstream, and its specificity (>= 0,2,1) outranks the
+ * page utilities, upstream's dark: forms and the lazily loaded scoped styles it has to restyle.
+ *
+ * Source: the Experiential Labs console, measured 2026-09-28 (artifacts/tmp/ui-el/ref/console/REF-CONSOLE.md §5,
+ * §8.3-§8.6, §8.18, §11, §13). The recipes (.btn*, .input*, .tabs / .tab, .switch*) are restated at the end of
+ * style.css; this file draws what the recipes cannot reach:
+ *   1. focus of every control           5. switches (Toggle.vue, its inline copies, the peer switches)
+ *   2. icons inside controls            6. checkboxes and radios
+ *   3. fields: focus, error, search,    7. segmented controls built from utilities, the settings tab strip,
+ *      native dates, utility labels        underline tabs
+ *   4. Select.vue / DateRangePicker     8. option cards, filter pills
+ *      triggers, the picker's controls  9. links
+ *
+ * Contract with the other console files: an element that carries a data-ui attribute belongs to whoever added it;
+ * the utility-pattern hooks here skip it (:not([data-ui])). data-ui hooks defined here, for anyone to use:
+ *   data-ui="seg"          a segmented control (its buttons are the segments; the current one carries
+ *                          aria-pressed / aria-selected / aria-checked="true" or data-active)
+ *   data-ui="filter-pill"  a filter trigger ("Provider v"); data-ui="filter-count" on its count badge marks it active
+ * Template lines touched for this file: none (the hooks below are upstream class names, data-test / data-testid
+ * attributes and Lucide classes that Icon.vue already renders).
+ * Custom properties: --ctl-* below (not tokens; tokens.css belongs to the coordinator). */
+
+html.flat-theme {
+  /* glyphs inside controls (search, chevrons, calendar): the reference's muted-2 #a3a3a3 is 2.5:1 on the surface;
+     the 3:1 form-control line keeps them as light as a glyph can be */
+  --ctl-glyph: var(--ui-control-line);
+  /* switch: the track when off (the reference's ink at 20 % is 1.6:1) and the knob */
+  --ctl-switch-off: var(--ui-control-line);
+  --ctl-knob: var(--ui-surface);
+  /* segmented control: frame, inset, segment metrics (REF-CONSOLE §8.5) */
+  --ctl-seg-frame: var(--ui-line);
+  --ctl-seg-inset: 2px;
+  --ctl-seg-pad-y: 0.375rem;
+  --ctl-seg-pad-x: 0.875rem;
+}
+
+html.flat-theme.dark {
+  /* the reference's dark muted-2 #8c8c8c (5.2:1 on the surface) */
+  --ctl-glyph: 140 140 140;
+  /* the reference Toggle's knob is the page ground */
+  --ctl-knob: var(--ui-canvas);
+}
+
+/* ================================================================== 1 · focus */
+
+/* Keyboard focus draws a 2px accent outline 2px out (REF-CONSOLE §13 / REF-PUBLIC §1.7: the reference's native ring
+   is invisible on its own ink button). A pointer focus draws nothing: upstream's :focus rings are removed. Fields
+   (inputs, select triggers) take an accent edge instead (§3, §4). */
+html.flat-theme :is(.btn, .btn-ghost, .btn-icon, .tab, .settings-tab, .channel-tab, .date-picker-preset, .date-picker-apply,
+    [data-testid="usage-detail-tab"], [data-ui~="filter-pill"], [data-ui~="seg"] > button):focus {
+  box-shadow: none;
+}
+
+html.flat-theme :is(.btn, .btn-ghost, .btn-icon, .tab, .settings-tab, .channel-tab, .date-picker-preset, .date-picker-apply,
+    [data-testid="usage-detail-tab"], [data-ui~="filter-pill"], [data-ui~="seg"] > button):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+/* ================================================================== 2 · icons inside controls */
+
+/* The reference sets 14px glyphs in its 30px buttons (13px in the 26px size, 16px in the 38px one); payment buttons
+   keep their brand marks. Spinners follow (the reference's loading ring is 14px). */
+html.flat-theme :is(.btn, .btn-icon):not(.btn-stripe, .btn-airwallex, .btn-alipay, .btn-wxpay) svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+/* the button's 8px gap is the only space between a glyph and its label (upstream also puts mr-* / ml-* on the
+   glyphs, doubling it) */
+html.flat-theme .btn > svg {
+  margin-inline: 0;
+}
+
+html.flat-theme .btn.btn-sm svg {
+  width: 0.8125rem;
+  height: 0.8125rem;
+}
+
+html.flat-theme .btn.btn-lg svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* ================================================================== 3 · fields */
+
+/* 3.1 Focus: an accent edge 2px wide (the 1px border plus a 1px inset), no halo; the transparent outline keeps a
+   ring in forced-colours mode. Error fields take the danger colour for both. */
+html.flat-theme .input:focus {
+  border-color: rgb(var(--ui-focus));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme .input.input-error:not(:focus) {
+  box-shadow: none;
+}
+
+html.flat-theme .input.input-error:focus {
+  border-color: rgb(var(--ui-danger));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-danger));
+}
+
+/* 3.2 Search fields: SearchInput.vue and the inline pattern (an absolute Lucide search glyph beside an .input inside
+   a relative wrapper) are the reference's 30px search (REF-CONSOLE §8.4): 4.25px + the 19.5px line + 1px edges,
+   32px left inset, the 13px glyph 10px in. */
+html.flat-theme :is(div, label, form)[class~="relative"]:has(> svg.lucide-search, > div > svg.lucide-search) > input.input {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+  padding-left: 2rem;
+}
+
+html.flat-theme :is(div, label, form)[class~="relative"] > svg.lucide-search[class~="absolute"] {
+  left: 0.625rem;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  color: rgb(var(--ctl-glyph));
+}
+
+html.flat-theme :is(div, label, form)[class~="relative"] > div[class~="absolute"]:has(> svg.lucide-search) {
+  padding-left: 0.625rem;
+}
+
+html.flat-theme :is(div, label, form)[class~="relative"] > div[class~="absolute"] > svg.lucide-search {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  color: rgb(var(--ctl-glyph));
+}
+
+/* 3.3 Native date / time fields: the picker glyph at 60 %, full on hover (the field's outline is behaviour.css B3.2) */
+html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])::-webkit-calendar-picker-indicator {
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"]):hover::-webkit-calendar-picker-indicator {
+  opacity: 1;
+}
+
+/* 3.4 The large section titles written with the label recipe (`input-label mb-0 text-base font-semibold`, the
+   account dialogs' quota group) stay titles: sans, sentence case, ink. */
+html.flat-theme .input-label[class~="text-base"] {
+  font-family: var(--ui-font);
+  letter-spacing: normal;
+  text-transform: none;
+  color: rgb(var(--ui-ink));
+}
+
+/* 3.5 Field labels written with utilities instead of the recipe (a block, font-medium, text-sm / text-xs label with
+   a mb-1 / mb-1.5 / mb-2 gap above its field: 系统设置 and other forms) read as the label recipe too, so a form has one
+   label language. Labels that wrap their own control are left alone. */
+html.flat-theme label[class~="block"][class~="font-medium"]:is([class~="text-sm"], [class~="text-xs"]):is([class~="mb-1"], [class~="mb-1.5"], [class~="mb-2"]):not(:has(input, select, textarea, button)) {
+  margin-bottom: 0.5rem;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+/* ================================================================== 4 · select and date-range triggers */
+
+/* 4.1 Select.vue's trigger is the reference's house-select (REF-CONSOLE §8.4): 34px, 10px in (9px before the
+   chevron), 13px / 600 ink, radius 6, the control outline; the focus line on hover and while open; an accent edge on
+   keyboard focus; the 12px chevron. The doubled class outranks the scoped rules and their dark: forms
+   (.dark .select-trigger[data-v]:hover is 0,4,0). */
+html.flat-theme .select-trigger.select-trigger {
+  gap: 0.375rem;
+  border-radius: var(--ui-radius-md);
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  padding: 0.390625rem 0.5625rem 0.390625rem 0.625rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+  box-shadow: none;
+  transition-property: color, border-color, box-shadow;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme .select-trigger.select-trigger:focus {
+  border-color: rgb(var(--ui-line-strong));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+html.flat-theme .select-trigger.select-trigger:hover,
+html.flat-theme .select-trigger.select-trigger.select-trigger-open {
+  border-color: rgb(var(--ui-line-focus));
+}
+
+html.flat-theme .select-trigger.select-trigger:focus-visible {
+  border-color: rgb(var(--ui-focus));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme .select-trigger.select-trigger.select-trigger-error {
+  border-color: rgb(var(--ui-danger));
+}
+
+html.flat-theme .select-trigger.select-trigger.select-trigger-error:focus-visible {
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-danger));
+}
+
+html.flat-theme .select-trigger.select-trigger.select-trigger-disabled {
+  cursor: not-allowed;
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  opacity: 0.55;
+}
+
+html.flat-theme .select-trigger .select-icon,
+html.flat-theme .select-trigger .select-clear {
+  display: inline-flex;
+  color: rgb(var(--ctl-glyph));
+}
+
+html.flat-theme .select-trigger .select-clear:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .select-trigger :is(.select-icon, .select-clear) > svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* 4.2 DateRangePicker's trigger: the same field (a 14px calendar glyph, the value at 600, the 12px chevron). */
+html.flat-theme .date-picker-trigger.date-picker-trigger {
+  gap: 0.375rem;
+  border-radius: var(--ui-radius-md);
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  padding: 0.390625rem 0.5625rem 0.390625rem 0.625rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  color: rgb(var(--ui-ink));
+  box-shadow: none;
+  transition-property: color, border-color, box-shadow;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme .date-picker-trigger.date-picker-trigger:focus {
+  border-color: rgb(var(--ui-line-strong));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+html.flat-theme .date-picker-trigger.date-picker-trigger:hover,
+html.flat-theme .date-picker-trigger.date-picker-trigger.date-picker-trigger-open {
+  border-color: rgb(var(--ui-line-focus));
+}
+
+html.flat-theme .date-picker-trigger.date-picker-trigger:focus-visible {
+  border-color: rgb(var(--ui-focus));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme .date-picker-trigger .date-picker-value {
+  font-weight: 600;
+}
+
+html.flat-theme .date-picker-trigger :is(.date-picker-icon, .date-picker-chevron) {
+  display: inline-flex;
+  color: rgb(var(--ctl-glyph));
+}
+
+html.flat-theme .date-picker-trigger .date-picker-icon > svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+html.flat-theme .date-picker-trigger .date-picker-chevron > svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+/* 4.3 Inside the picker (the panel itself is overlays.css'): presets as quiet 30px choices, the current one on the
+   accent tint (the reference's selected filter); mono field labels; 30px date fields; the apply button is the ink
+   primary. */
+html.flat-theme .date-picker-preset.date-picker-preset {
+  border-radius: var(--ui-radius-md);
+  padding: 0.3125rem 0.625rem;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  font-weight: 500;
+  color: rgb(var(--ui-muted));
+  transition-property: color, background-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme .date-picker-preset.date-picker-preset:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .date-picker-preset.date-picker-preset.date-picker-preset-active {
+  background-color: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+  font-weight: 600;
+}
+
+html.flat-theme .date-picker-label.date-picker-label {
+  margin-bottom: 0.375rem;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme .date-picker-input.date-picker-input {
+  border-radius: var(--ui-radius-md);
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  padding: 0.265625rem 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  color: rgb(var(--ui-ink));
+  box-shadow: none;
+}
+
+html.flat-theme .date-picker-input.date-picker-input:focus {
+  border-color: rgb(var(--ui-focus));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme .date-picker-apply.date-picker-apply,
+html.flat-theme .date-picker-apply.date-picker-apply:hover {
+  min-height: var(--ui-control-h);
+  border: 1px solid rgb(var(--ui-ink));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-ink));
+  padding: 0.265625rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-on-ink));
+}
+
+/* ================================================================== 5 · switches */
+
+/* The reference settings Toggle (REF-CONSOLE §8.4): 34 x 20, a 16px knob 2px in, on = ink (near-white in dark),
+   150ms. Off = the 3:1 form-control line (the reference's ink at 20 % is 1.6:1 on the surface). Toggle.vue and its
+   inline copies are a rounded-full button with a 2px transparent edge (h-6 w-11, h-5 w-9; h-4 w-7 keeps its 28 x 16
+   size) holding a knob span; on = bg-primary-500 / -600. */
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]) {
+  background-color: rgb(var(--ctl-switch-off));
+  box-shadow: none;
+  transition-property: background-color, opacity;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"]) {
+  height: 1.25rem;
+  width: 2.125rem;
+}
+
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):is([class~="bg-primary-500"], [class~="bg-primary-600"]) {
+  background-color: rgb(var(--ui-ink));
+}
+
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]) > span[class~="rounded-full"] {
+  background-color: rgb(var(--ctl-knob));
+  box-shadow: none;
+  transition-property: transform;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"]) > span[class~="rounded-full"] {
+  height: 1rem;
+  width: 1rem;
+}
+
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"]) > span[class~="rounded-full"]:is([class~="translate-x-5"], [class~="translate-x-4"]) {
+  --tw-translate-x: 0.875rem;
+}
+
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):focus {
+  box-shadow: none;
+}
+
+html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* The peer switches (a visually hidden checkbox followed by a track whose ::after is the knob). */
+html.flat-theme input[type="checkbox"][class~="peer"] + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"]) {
+  height: 1.25rem;
+  width: 2.125rem;
+  background-color: rgb(var(--ctl-switch-off));
+  box-shadow: none;
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme input[type="checkbox"][class~="peer"] + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"])::after {
+  top: 2px;
+  left: 2px;
+  height: 1rem;
+  width: 1rem;
+  border-width: 0;
+  background-color: rgb(var(--ctl-knob));
+  transition: transform var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme input[type="checkbox"][class~="peer"]:checked + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"]) {
+  background-color: rgb(var(--ui-ink));
+}
+
+html.flat-theme input[type="checkbox"][class~="peer"]:checked + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"])::after {
+  --tw-translate-x: 0.875rem;
+}
+
+html.flat-theme input[type="checkbox"][class~="peer"]:focus-visible + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"]) {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+/* ================================================================== 6 · checkboxes and radios */
+
+/* Native controls with the accent (accent-color is set on the root in tokens.css), as the reference does; 14px on
+   desktop like its row checkboxes (the 16px upstream size stays below 901px, where the reference grows them to 20).
+   Upstream's focus:ring utilities are replaced by the accent outline. */
+@media (min-width: 901px) {
+  html.flat-theme input:is([type="checkbox"], [type="radio"])[class~="h-4"][class~="w-4"] {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+html.flat-theme input:is([type="checkbox"], [type="radio"]):focus {
+  box-shadow: none;
+}
+
+html.flat-theme input:is([type="checkbox"], [type="radio"]):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* ================================================================== 7 · segmented controls and tabs */
+
+/* 7.1 Segmented controls built from utilities (upstream's pattern: a gray-100 / gray-50 box with a 4px or 2px inset
+   whose children are all buttons, the current one bg-white with a shadow) become the reference's SlidingTabs
+   (REF-CONSOLE §8.5): a 1px structural frame on the surface, radius 8, a 2px inset, no gaps; segments 14 x 6px,
+   12.5px / 600, muted, ink on hover; the current segment is ink with on-ink text (near-white with ink text in dark),
+   fading in 200ms (upstream has no thumb to slide). The platform hues of the account dialogs' segments go with it
+   (monochrome identity, D3). data-ui="seg" opts a fork component into the same look. */
+html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]),
+html.flat-theme [data-ui~="seg"] {
+  gap: 0;
+  border: 1px solid rgb(var(--ctl-seg-frame));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  padding: var(--ctl-seg-inset);
+  box-shadow: none;
+}
+
+html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button,
+html.flat-theme [data-ui~="seg"] > button {
+  margin: 0;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-muted));
+  box-shadow: none;
+  transition-property: color, background-color;
+  transition-duration: var(--ui-duration-slide);
+  transition-timing-function: var(--ui-ease-out);
+}
+
+html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button:hover,
+html.flat-theme [data-ui~="seg"] > button:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button:is([class~="bg-white"], [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]),
+html.flat-theme [data-ui~="seg"] > button:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], [data-active]:not([data-active="false"])) {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button svg,
+html.flat-theme [data-ui~="seg"] > button svg {
+  width: 0.875rem;
+  height: 0.875rem;
+  flex-shrink: 0;
+}
+
+html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* Up to 900px the reference keeps button and segment labels on one line (max-[900px]:whitespace-nowrap); the rows
+   wrap around whole controls instead ("Zhipu / GLM" no longer breaks inside its segment). */
+@media (max-width: 900px) {
+  html.flat-theme .btn,
+  html.flat-theme .tab,
+  html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button,
+  html.flat-theme [data-ui~="seg"] > button {
+    white-space: nowrap;
+  }
+}
+
+/* 7.2 The settings tab strip (SettingsView .settings-tabs-*, scoped) is the same segmented control, as wide as its
+   tabs (the reference's w-fit), 14px icons, no glow, gradient or underline. The strip keeps sticking under the
+   header; its band is the page ground at 90 % with the reference's one blur (the docs header, 8px), so content
+   never shows through. */
+html.flat-theme .settings-tabs-shell.settings-tabs-shell {
+  top: calc(var(--ui-header-h) + 0.75rem);
+  margin-inline: 0;
+  border: 0;
+  border-radius: 0;
+  background: rgb(var(--ui-canvas) / 0.9);
+  padding: 0;
+  box-shadow: none;
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+}
+
+html.flat-theme .settings-tabs.settings-tabs {
+  display: inline-flex;
+  width: max-content;
+  min-width: 0;
+  gap: 0;
+  border: 1px solid rgb(var(--ctl-seg-frame));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  padding: var(--ctl-seg-inset);
+}
+
+html.flat-theme .settings-tab.settings-tab {
+  flex: none;
+  min-width: 0;
+  height: auto;
+  gap: 0.375rem;
+  overflow: visible;
+  border: 0;
+  border-radius: var(--ui-radius-md);
+  background: transparent;
+  padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-muted));
+  box-shadow: none;
+  transition-property: color, background-color;
+  transition-duration: var(--ui-duration-slide);
+  transition-timing-function: var(--ui-ease-out);
+}
+
+html.flat-theme .settings-tab.settings-tab::before,
+html.flat-theme .settings-tab.settings-tab::after {
+  display: none;
+}
+
+html.flat-theme .settings-tab.settings-tab:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .settings-tab.settings-tab.settings-tab-active {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme .settings-tab .settings-tab-icon.settings-tab-icon {
+  height: auto;
+  width: auto;
+  border-radius: 0;
+  background: none;
+  color: inherit;
+}
+
+html.flat-theme .settings-tab .settings-tab-icon > svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+html.flat-theme .settings-tab .settings-tab-label.settings-tab-label {
+  line-height: inherit;
+}
+
+/* 7.3 Underline tabs (使用记录's detail tabs, the channel dialog's tabs) take the reference's CodeTabs underline
+   (REF-CONSOLE §8.15): a 2px accent rule under the current tab, its text ink; the others muted, ink on hover, no
+   rule; 8 x 10px like its tabs, 12.5px / 600, 14px glyphs. Platform hues on the channel tabs go (monochrome
+   identity, D3). */
+html.flat-theme :is([data-testid="usage-detail-tab"], .channel-tab.channel-tab) {
+  gap: 0.375rem;
+  padding: 0.5rem 0.625rem;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-muted));
+  transition-property: color, border-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme :is([data-testid="usage-detail-tab"]:not([class~="border-primary-500"]), .channel-tab.channel-tab-inactive) {
+  border-color: transparent;
+}
+
+html.flat-theme :is([data-testid="usage-detail-tab"]:not([class~="border-primary-500"]), .channel-tab.channel-tab-inactive):hover {
+  border-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-testid="usage-detail-tab"][class~="border-primary-500"], .channel-tab.channel-tab-active) {
+  border-color: rgb(var(--ui-focus));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .channel-tab.channel-tab > * {
+  color: inherit;
+}
+
+html.flat-theme :is([data-testid="usage-detail-tab"], .channel-tab.channel-tab) svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* ================================================================== 8 · option cards, filter pills */
+
+/* 8.1 Option cards (the account dialogs' type / method choices: a rounded-lg border-2 p-3 text-left button led by an
+   h-8 w-8 glyph tile) take the reference's dialog option card (REF-CONSOLE §8.11): radius 8, the structural line, the
+   grouped fill at 60 %, the control outline on hover; a 28px tile with a 1px line and ink at 3 %. The chosen card is
+   drawn like the segmented thumb: an ink edge 2px wide on the surface, its tile ink with on-ink glyph (upstream's
+   per-platform hues go: monochrome identity, D3). */
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) {
+  gap: 0.75rem;
+  border-width: 1px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  box-shadow: none;
+  transition-property: border-color, background-color, box-shadow;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"][class~="border-gray-200"]:has(> div:first-child[class~="h-8"][class~="w-8"]):hover {
+  border-color: rgb(var(--ui-line-strong));
+}
+
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:not([class~="border-gray-200"]):has(> div:first-child[class~="h-8"][class~="w-8"]) {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
+}
+
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) > div:first-child {
+  height: 1.75rem;
+  width: 1.75rem;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-ink) / 0.03);
+  color: rgb(var(--ui-ink) / 0.7);
+}
+
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:not([class~="border-gray-200"]):has(> div:first-child[class~="h-8"][class~="w-8"]) > div:first-child {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) > div:first-child svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) > div:last-child > span:first-child {
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) > div:last-child > span:last-child:not(:first-child) {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-muted));
+}
+
+/* 8.2 Filter pills (data-ui="filter-pill"; the reference's FilterMenu trigger, REF-CONSOLE §8.6): 30px, 10px in, gap 6,
+   radius 6, the control outline on the surface, 12.5px / 600 ink-soft, ink on hover, a 12px chevron. With a
+   data-ui="filter-count" badge inside it is active: the accent at 40 % as its edge, the accent tint, accent text and a
+   Geist Mono 10.5px count. */
+html.flat-theme [data-ui~="filter-pill"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: var(--ui-control-h);
+  height: auto;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  padding: 0 0.625rem;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink-soft));
+  box-shadow: none;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="filter-pill"]:hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="filter-pill"]:has([data-ui~="filter-count"]),
+html.flat-theme [data-ui~="filter-pill"]:has([data-ui~="filter-count"]):hover {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  background-color: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui~="filter-pill"] [data-ui~="filter-count"] {
+  min-width: 0;
+  border-radius: 0;
+  background: none;
+  padding: 0;
+  font-family: var(--ui-font-mono);
+  font-size: 0.65625rem;
+  line-height: 1rem;
+  font-weight: 400;
+  color: inherit;
+}
+
+html.flat-theme [data-ui~="filter-pill"] svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+  color: currentColor;
+}
+
+/* ================================================================== 9 · links */
+
+/* Links keep their colours from the tokens (accent text #147c42 / mint, D2); an underline sits 2px under the text
+   and is 1px thick, as the reference draws its links. */
+html.flat-theme :is(a, button)[class*="underline"] {
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index 26937ad13a31..6b5e033338d7 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -1 +1,1334 @@
-/* Console theme · data: DataTable, TablePageLayout and plain tables, pagination, bulk bars, row actions, badges, platform marks, KPI, empty and loading states (owner: the data agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here). */
+/* Console theme · data: DataTable, TablePageLayout and plain tables, pagination, bulk bars, row actions, badges, platform marks, KPI, empty and loading states (owner: the data agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here).
+ *
+ * Source: the Experiential Labs console, measured 2026-09-28 (ui-el/ref/console/REF-CONSOLE.md §5, §6, §8.7, §8.8,
+ * §8.13, §8.14, §10; crops table-head, data-row, group-row, kpi-card, chart-card, usage-card). Where the reference
+ * is below our floor the value is the compliant one from tokens.css (labels --ui-label, faint text --ui-faint, form
+ * lines --ui-control-line) and the rule says so.
+ *
+ * Specificity: every rule starts with html.flat-theme (theme off = upstream). DataTable's scoped styles reach 0,4,2
+ * (`.dark tbody tr:hover .sticky-col[data-v]`), TablePageLayout's 0,4,0 (mobile mode) and the unscoped scrollbar
+ * block uses !important: the rules that restate those carry at least one more class. Recipe classes (.badge*,
+ * .stat-*, .empty-state*, .skeleton, .progress*) are restated here at 0,2,1 with look properties only (coordinator,
+ * 2026-09-28): page font-size utilities on badges yield to the badge size, layout utilities are untouched.
+ *
+ * New data-ui hooks (one attribute each, no other template change):
+ *   data-ui="pagination"      components/common/Pagination.vue      root
+ *   data-ui="status-badge"    components/common/StatusBadge.vue     root
+ *   data-ui="platform-badge"  components/common/PlatformTypeBadge.vue root
+ *   data-ui="group-badge"     components/common/GroupBadge.vue      root
+ *   data-ui="skeleton"        components/common/Skeleton.vue        root
+ * Hooks used from other owners: data-ui~="bulk-bar" (AccountBulkActionsBar, the accounts agent), data-table and
+ * data-column (DataTable), aria-sort on sortable headers. */
+
+/* ================================================================== 0 · custom properties */
+
+html.flat-theme {
+  /* table metrics (REF §8.7): 40px header, cells inset 10 / 12, first and last column 16 */
+  --ui-table-cell-y: 10px;
+  --ui-table-cell-x: 12px;
+  --ui-table-edge-x: 16px;
+  /* width of DataTable's own selection column (checkbox + insets); the second sticky column starts after it */
+  --ui-table-select-w: 44px;
+  /* badges and status pills: Geist Mono uppercase (the reference's 9.5px pills read 10px here; 11px in the
+     Chinese interface, like the mono label) */
+  --ui-badge-size: 10px;
+  --ui-badge-leading: 16px;
+  /* data chips in cells (the reference's tool / prompt chips, Geist Mono 10-10.5px) */
+  --ui-chip-size: 10.5px;
+  /* table scrollbars stay visible (sideways scrolling must be discoverable, as the reference's Windows
+     scrollbars are); the thumb is the reference's #8b8b8b grey at >= 3:1 on the surface */
+  --ui-scroll-thumb: 142 142 142;
+  --ui-scroll-thumb-hover: 108 108 108;
+  /* uptime and quota marks (REF §3.2 --uptime-*): soft bar fills, and the text colour of each state */
+  --ui-uptime-good: 167 224 189;
+  --ui-uptime-good-ink: 47 125 79;
+  --ui-uptime-warn: 246 213 138;
+  --ui-uptime-warn-ink: 128 84 8;
+  --ui-uptime-bad: 243 169 169;
+  --ui-uptime-bad-ink: 185 74 74;
+  /* status dots (REF §8.8: success #22a050, warning, danger, idle = muted-2) */
+  --ui-dot-ok: 34 160 80;
+  --ui-dot-warn: 217 119 6;
+  --ui-dot-bad: 220 60 60;
+  --ui-dot-idle: 163 163 163;
+  /* the bulk bar floats only where its owner places it over content */
+  --ui-bulk-bar-shadow: none;
+  /* Time-series chart palette (read by composables/usePresentationColors.ts as `trend`): the reference's usage
+     series (REF §8.14 --usage-series-*) in the hue order of upstream's series (blue, emerald, amber, red, violet,
+     pink, teal, orange, indigo, lime, cyan, purple), so a chart that picks a series by index keeps its hue. Lines
+     need >= 3:1 on the surface: where the reference's value is lighter (#62cc49 2.05:1, #e481fb 2.38, #26a7ad
+     2.91, #44af27 2.84) the nearest reference or deepened value is used. */
+  --ui-chart-trend-1: #3975d8;
+  --ui-chart-trend-2: #0f714a;
+  --ui-chart-trend-3: #a77e33;
+  --ui-chart-trend-4: #c32517;
+  --ui-chart-trend-5: #81237c;
+  --ui-chart-trend-6: #c664dc;
+  --ui-chart-trend-7: #1f9197;
+  --ui-chart-trend-8: #d97706;
+  --ui-chart-trend-9: #6366f1;
+  --ui-chart-trend-10: #3f9f24;
+  --ui-chart-trend-11: #0891b2;
+  --ui-chart-trend-12: #7850c8;
+}
+
+html.flat-theme:lang(zh) {
+  --ui-badge-size: 11px;
+  --ui-chip-size: 11px;
+}
+
+html.flat-theme.dark {
+  --ui-scroll-thumb: 122 122 122;
+  --ui-scroll-thumb-hover: 156 156 156;
+  /* the reference's dark fills are the colour at 42 % over the surface */
+  --ui-uptime-good: 46 108 69;
+  --ui-uptime-good-ink: 134 239 172;
+  --ui-uptime-warn: 120 95 30;
+  --ui-uptime-warn-ink: 252 211 77;
+  --ui-uptime-bad: 119 63 63;
+  --ui-uptime-bad-ink: 252 165 165;
+  --ui-dot-ok: 74 222 128;
+  --ui-dot-warn: 251 191 36;
+  --ui-dot-bad: 248 113 113;
+  --ui-dot-idle: 140 140 140;
+  /* the reference's dark series where they hold 3:1 on #1a1a1a; blue and red are lighter (#1f5bbc 2.72, #be1e10
+     2.80), violet is the reference's dark pink (#91338c 2.53) */
+  --ui-chart-trend-1: #3975d8;
+  --ui-chart-trend-2: #44af27;
+  --ui-chart-trend-3: #9e7528;
+  --ui-chart-trend-4: #e2503f;
+  --ui-chart-trend-5: #c664dc;
+  --ui-chart-trend-6: #e481fb;
+  --ui-chart-trend-7: #26a7ad;
+  --ui-chart-trend-8: #d97706;
+  --ui-chart-trend-9: #6366f1;
+  --ui-chart-trend-10: #62cc49;
+  --ui-chart-trend-11: #0891b2;
+  --ui-chart-trend-12: #a78bfa;
+}
+
+/* ================================================================== 1 · DataTable (desktop and, theme on, phones) */
+
+/* The card around the table is the layout's (section 2); the wrapper scrolls both ways. */
+html.flat-theme .table-wrapper > table:has(> tbody.table-body) {
+  border-collapse: collapse;
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+/* the line between header and body is drawn by the sticky header cells (inset shadow), so it stays under the
+   header while the body scrolls; the collapsed border of the first body row is dropped */
+html.flat-theme .table-wrapper > table > tbody.table-body {
+  border-top-width: 0;
+  /* upstream's dark body is dark-900, a step below the sticky cells and the card */
+  background-color: rgb(var(--ui-surface));
+}
+
+/* Header: 40px, the mono label (REF §8.7: Geist Mono 10/15, .12em, uppercase, 500, ink-faint -> --ui-label),
+   surface fill, 1px structural line underneath. th sits on the 13px / 19.5px strut, as the reference's does. */
+html.flat-theme .table-wrapper .table-header .sticky-header-cell {
+  padding: var(--ui-table-cell-y) var(--ui-table-cell-x);
+  border-bottom-width: 0;
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 500;
+  line-height: 19.5px;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+  vertical-align: middle;
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .table-wrapper .table-header .sticky-header-cell:first-child {
+  padding-left: var(--ui-table-edge-x);
+}
+
+html.flat-theme .table-wrapper .table-header .sticky-header-cell:last-child {
+  padding-right: var(--ui-table-edge-x);
+}
+
+/* the reference's header has no hover fill; the label darkens a step on a sortable column (the reference means
+   to, its .mono-label overrides it) */
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[aria-sort]:hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* header slot content (labels with a help icon) keeps the label's line */
+html.flat-theme .table-wrapper .table-header .sticky-header-cell > div {
+  min-height: 19.5px;
+}
+
+/* Sort: upstream's idle double triangle is not drawn; the sorted column carries the reference's arrow (Lucide
+   arrow-up / arrow-down, 11px, stroke 2, in the label's colour). The box keeps its place, so sorting never
+   shifts a column. */
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[aria-sort] > div > span[aria-hidden="true"] {
+  width: 11px;
+  height: 11px;
+  flex: 0 0 11px;
+}
+
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[aria-sort] > div > span[aria-hidden="true"] > svg {
+  display: none;
+}
+
+html.flat-theme .table-wrapper .table-header .sticky-header-cell:is([aria-sort="ascending"], [aria-sort="descending"]) > div > span[aria-hidden="true"]::before {
+  content: '';
+  width: 11px;
+  height: 11px;
+  background-color: currentColor;
+  -webkit-mask: var(--ui-sort-arrow) center / 11px 11px no-repeat;
+  mask: var(--ui-sort-arrow) center / 11px 11px no-repeat;
+}
+
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[aria-sort="ascending"] {
+  --ui-sort-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
+}
+
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[aria-sort="descending"] {
+  --ui-sort-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
+}
+
+/* Body cells: single line, inset 10 / 12 (16 at the edges), vertically centred; rows are divided by one 1px
+   structural line (tbody's divide-y plus the cells' own bottom line, both --ui-line). */
+html.flat-theme .table-wrapper > table > tbody.table-body > tr > td {
+  /* rows are at least the reference's 42px (its request rows; the catalog's 45 come from 24px logo squares) */
+  height: 42px;
+  padding: var(--ui-table-cell-y) var(--ui-table-cell-x);
+  border-bottom-color: rgb(var(--ui-line));
+  vertical-align: middle;
+}
+
+html.flat-theme .table-wrapper > table > tbody.table-body > tr > td:first-child {
+  padding-left: var(--ui-table-edge-x);
+}
+
+html.flat-theme .table-wrapper > table > tbody.table-body > tr > td:last-child {
+  padding-right: var(--ui-table-edge-x);
+}
+
+html.flat-theme .table-wrapper > table > tbody.table-body > tr + tr {
+  border-top-color: rgb(var(--ui-line));
+}
+
+/* numbers: right-aligned columns (column.class text-right) use tabular figures; mono cells already are */
+html.flat-theme .table-wrapper > table:has(> tbody.table-body) :is(th, td)[class~="text-right"] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Figures in Geist Mono (REF §8.7: numeric cells Mono 12 / 13, tabular): the columns every table names the same way
+   for a count, an amount, a price, a rate, an id or a duration. Text in the same cell (a unit, a 「充值」 button) takes
+   MiSans / Geist through the mono stack's fallbacks. Alignment stays the column's. */
+html.flat-theme .table-wrapper > table > tbody.table-body > tr > td:is([data-column="id"], [data-column="user_id"], [data-column="group_id"], [data-column="requests"], [data-column="tokens"], [data-column="total_tokens"], [data-column="input_tokens"], [data-column="output_tokens"], [data-column="cache_tokens"], [data-column="cost"], [data-column="actual_cost"], [data-column="balance"], [data-column="balance_after"], [data-column="amount"], [data-column="pay_amount"], [data-column="order_amount"], [data-column="price"], [data-column="rebate_amount"], [data-column="total_rebate"], [data-column="bonus_amount"], [data-column="concurrency"], [data-column="current_concurrency"], [data-column="priority"], [data-column="rate_multiplier"], [data-column="sort_order"], [data-column="latency_ms"], [data-column="status_code"], [data-column="account_count"], [data-column="group_count"], [data-column="validity_days"]) {
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Small data chips inside cells (upstream's `inline-flex rounded px-2 py-0.5 text-xs` spans: group, request type,
+   billing mode, tags, cache marks): the reference's tool / prompt chip shape (REF §8.8: 4px radius, 6 / 1 inset,
+   Geist Mono 10.5px); each keeps its colour family (the status families of tokens.css). */
+html.flat-theme .table-wrapper > table > tbody.table-body > tr > td span:is([class~="inline-flex"], [class~="inline-block"])[class~="rounded"]:is([class~="px-1"], [class~="px-1.5"], [class~="px-2"]):is([class~="py-0.5"], [class~="py-px"]):is([class~="text-xs"], [class~="text-[10px]"], [class~="text-[11px]"]) {
+  padding: 1px 6px;
+  border-radius: var(--ui-radius-sm);
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-chip-size);
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.01em;
+}
+
+/* Rows: hover and keyboard focus inside a data row = --ui-hover (REF §8.7; upstream's gray-50 is the canvas colour
+   and its dark hover equals the surface). Clickable rows only change the fill, as the reference's do; the empty and
+   loading rows (no data-row-id) do not react. */
+html.flat-theme .table-wrapper .table-body > tr {
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .table-wrapper .table-body > tr[data-row-id]:is(:hover, :focus-within) {
+  background-color: rgb(var(--ui-hover));
+}
+
+/* Selected rows (DataTable's own selection, or a checked box in a `select` column): the accent's soft fill, which
+   the reference uses for every selected or active fill; hover keeps it and darkens a step. */
+html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) {
+  background-color: rgb(var(--ui-primary-soft));
+}
+
+html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)):hover {
+  background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
+}
+
+/* Sticky columns: upstream paints them white / slate (#111827, #1f2937 on hover) whatever the row shows; here they
+   take the row's own fill, and the edge against the scrolled columns is the reference's 1px line instead of a
+   shadow. */
+html.flat-theme .table-wrapper .table-body .sticky-col {
+  background-color: rgb(var(--ui-surface));
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .table-wrapper .table-body > tr[data-row-id]:is(:hover, :focus-within) > .sticky-col {
+  background-color: rgb(var(--ui-hover));
+}
+
+html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) > .sticky-col {
+  background-color: rgb(var(--ui-primary-soft));
+}
+
+html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)):hover > .sticky-col {
+  background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
+}
+
+html.flat-theme .table-wrapper.is-scrollable .sticky-col-left::after,
+html.flat-theme .table-wrapper.is-scrollable .sticky-col-left-second::after {
+  width: 1px;
+  background: rgb(var(--ui-line));
+}
+
+html.flat-theme .table-wrapper.is-scrollable .sticky-col-right::before {
+  width: 1px;
+  background: rgb(var(--ui-line));
+}
+
+/* DataTable's own selection column and a `select` column: fixed width, so the second sticky column starts where
+   the first one ends. */
+html.flat-theme .table-wrapper {
+  --select-col-width: var(--ui-table-select-w);
+}
+
+html.flat-theme .table-wrapper :is(th, td)[data-column="select"],
+html.flat-theme .table-wrapper .table-header > tr > th[class~="w-11"]:first-child,
+html.flat-theme .table-wrapper .table-body > tr > td[class~="w-11"]:first-child {
+  box-sizing: border-box;
+  width: var(--ui-table-select-w);
+  min-width: var(--ui-table-select-w);
+  max-width: var(--ui-table-select-w);
+  padding-right: 0;
+  text-align: left;
+}
+
+/* Empty: the reference's dashed frame (REF §8.7: cell inset 32 / 16, dashed --ui-line-strong, 8px radius, 240px
+   tall; title 14/500 ink-soft). Upstream's inbox glyph stays, at the reference's icon size. */
+html.flat-theme .table-wrapper .table-body > tr > td[colspan]:only-child:not([style]) {
+  padding: 32px var(--ui-table-edge-x);
+}
+
+html.flat-theme .table-wrapper .table-body > tr > td[colspan]:only-child:not([style]) > div[class~="flex-col"] {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 8px;
+  min-height: 240px;
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme .table-wrapper .table-body > tr > td[colspan]:only-child:not([style]) > div[class~="flex-col"] > svg {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme .table-wrapper .table-body > tr > td[colspan]:only-child:not([style]) > div[class~="flex-col"] > p {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+/* the EmptyState component in the empty slot carries its own frame (section 9); the cell only insets it */
+html.flat-theme .table-wrapper .table-body > tr > td[colspan]:only-child:not([style]) > .empty-state {
+  min-height: 240px;
+}
+
+/* Scrollbars: upstream forces 12px scrollbars with !important; here a 10px track with a 6px round thumb, always
+   visible, no track fill (REF §8.19: the table keeps scrollbar-gutter: stable). */
+html.flat-theme .table-wrapper::-webkit-scrollbar {
+  width: 10px !important;
+  height: 10px !important;
+}
+
+html.flat-theme .table-wrapper::-webkit-scrollbar-track {
+  margin: 0 !important;
+  border-radius: 0 !important;
+  background-color: transparent !important;
+}
+
+html.flat-theme .table-wrapper::-webkit-scrollbar-thumb {
+  border: 2px solid transparent !important;
+  border-radius: 999px !important;
+  background-color: rgb(var(--ui-scroll-thumb)) !important;
+  background-clip: padding-box !important;
+}
+
+html.flat-theme .table-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: rgb(var(--ui-scroll-thumb-hover)) !important;
+}
+
+html.flat-theme .table-wrapper::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+@supports (-moz-appearance: none) {
+  html.flat-theme .table-wrapper {
+    scrollbar-width: thin !important;
+    scrollbar-color: rgb(var(--ui-scroll-thumb)) transparent !important;
+  }
+}
+
+/* Loading rows: the reference's shimmer (section 9) on DataTable's placeholder blocks. */
+html.flat-theme .table-wrapper .table-body > tr > td > div[class~="animate-pulse"] {
+  animation: none;
+}
+
+/* ------------------------------------------------------------------ phones: a table, not cards (D9) */
+/* DataTable renders its table below 768px while the theme is on (DataTable.vue); the wrapper scrolls sideways
+   inside its card, as the reference's tables do on a phone. Rows stay single-line; the edge insets are 12. The
+   sticky name and action columns would leave no room for the columns between them on a 390px screen, so every
+   column scrolls (the page, not the wrapper, scrolls vertically there, so the header does not stick either). */
+@media (max-width: 767.98px) {
+  html.flat-theme .table-wrapper .sticky-col {
+    position: static;
+  }
+
+  html.flat-theme .table-wrapper.is-scrollable :is(.sticky-col-left, .sticky-col-left-second)::after,
+  html.flat-theme .table-wrapper.is-scrollable .sticky-col-right::before {
+    display: none;
+  }
+
+  html.flat-theme .table-wrapper > table > tbody.table-body > tr > td:first-child,
+  html.flat-theme .table-wrapper .table-header .sticky-header-cell:first-child {
+    padding-left: 12px;
+  }
+
+  html.flat-theme .table-wrapper > table > tbody.table-body > tr > td:last-child,
+  html.flat-theme .table-wrapper .table-header .sticky-header-cell:last-child {
+    padding-right: 12px;
+  }
+}
+
+/* ================================================================== 2 · TablePageLayout */
+
+/* sections 12px apart (REF §6 gap-3; the shell's gap token when it defines one); the height is the shell's */
+html.flat-theme .table-page-layout {
+  row-gap: var(--ui-shell-gap, 12px);
+}
+
+/* the card: 8px, 1px structural line, surface, no shadow (REF §8.7 container) */
+html.flat-theme .table-page-layout .table-scroll-container {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+/* upstream's translucent blurred thead: the sticky cells paint the header */
+html.flat-theme .table-page-layout .table-scroll-container thead {
+  background-color: transparent;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+/* the layout's scoped th / td insets and colours (px-5 py-4 text-sm) yield to the table language; tables that are
+   not DataTables get the same density */
+html.flat-theme .table-page-layout .table-scroll-container :is(th, td) {
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+/* below 1024px upstream drops the frame (it expected cards there); a table keeps its card. The corners are clipped
+   without making the card a scroll container (overflow: clip), so sticky content inside it (a selection tray) still
+   sticks to the viewport. */
+html.flat-theme .table-page-layout.mobile-mode .table-scroll-container {
+  overflow: clip;
+  border: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+}
+
+/* Pagination below a framed table is the card's footer (the reference's list ends inside its card on a 1px line,
+   REF §8.7 pagination): the card loses its bottom radius and the pagination section closes the frame. */
+html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scroll-container):has(+ .layout-section-fixed > [data-ui="pagination"]) > .table-scroll-container {
+  border-bottom-width: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scroll-container) + .layout-section-fixed:has(> [data-ui="pagination"]) {
+  margin-top: calc(-1 * var(--ui-shell-gap, 12px));
+}
+
+html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scroll-container) + .layout-section-fixed > [data-ui="pagination"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
+}
+
+/* ================================================================== 3 · plain tables */
+
+/* Upstream's hand-built tables with a grey header band (thead.bg-gray-50: ops, rankings, dialogs): the header reads
+   as the console's (mono label on the surface, 1px line underneath), the band and upstream's own insets stay out
+   of it. */
+html.flat-theme table > thead[class~="bg-gray-50"] {
+  background-color: transparent;
+}
+
+/* the header draws the line under itself (it may stick), so the body's own top line is dropped; a white body is the
+   surface in dark mode too (upstream: dark-900, a step below the card) */
+html.flat-theme table > thead[class~="bg-gray-50"] + tbody {
+  border-top-width: 0;
+}
+
+html.flat-theme table > thead[class~="bg-gray-50"] + tbody[class~="bg-white"] {
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme table > thead[class~="bg-gray-50"] > tr > th {
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 500;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* Distribution tables beside the charts (model / group / endpoint distribution, the spending ranking, the user
+   dashboard): the reference's usage table (REF §8.7 "/logs usage table", crop usage-card): 12px, header Geist
+   10/600 uppercase .025em, rows 35px with 1px lines, names ink 500, figures tabular, the spend in ink, the other
+   costs muted. Each row carries the colour key of its slice, as the reference's rows carry their bar colour. */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] {
+  font-size: 12px;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > thead > tr > th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding: 0 8px 8px;
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
+  color: rgb(var(--ui-muted));
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 15px;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  vertical-align: bottom;
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td {
+  padding: 8px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > :is(thead, tbody) > tr > :first-child {
+  padding-left: 0;
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > :is(thead, tbody) > tr > :last-child {
+  padding-right: 0;
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr[class~="cursor-pointer"]:hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+/* names: ink 500 (upstream draws the expandable ones as blue links; the chevron already says they open) */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td:first-child:not([colspan]) {
+  color: rgb(var(--ui-ink));
+  font-weight: 500;
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td:first-child:not([colspan]) svg {
+  color: rgb(var(--ui-label));
+}
+
+/* figures: requests and tokens muted, the actual spend ink, the account cost and the standard price muted (the
+   title attributes still name them) */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td[class~="text-right"] {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td[class~="text-right"]:is([class~="text-green-600"]) {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td[class~="text-right"]:nth-child(3) {
+  font-family: var(--ui-font-mono);
+}
+
+/* the colour key: an 8px square with 2px corners (REF §8.14 legend and usage rows) in the slice's colour; slices
+   follow the table's order (series 1-12), the ranking's remainder row is the "other" grey */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td:first-child:not([colspan])::before {
+  content: '';
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 8px;
+  border-radius: 2px;
+  background-color: var(--ui-row-key, transparent);
+  vertical-align: 0;
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td:first-child:not([colspan]):has(> span[class~="inline-flex"], > div[class~="flex"])::before {
+  display: none;
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td:first-child:not([colspan]) > :is(span[class~="inline-flex"], div[class~="flex"])::before {
+  content: '';
+  flex: 0 0 8px;
+  width: 8px;
+  height: 8px;
+  margin-right: 4px;
+  border-radius: 2px;
+  background-color: var(--ui-row-key, transparent);
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(1 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-1); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(2 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-2); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(3 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-3); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(4 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-4); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(5 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-5); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(6 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-6); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-7); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-8); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(9 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-9); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(10 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-10); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(11 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-11); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(12 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-12); }
+
+/* the user dashboard's doughnut takes series 1-6, 11 and 10 for its eight slices (UserDashboardCharts.vue) */
+html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-11); }
+html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-10); }
+html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(n + 9 of :not(:has(> td[colspan]))) { --ui-row-key: transparent; }
+
+/* the spending ranking's remainder row ("others", upstream's grey band) is the grey slice */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr[class~="bg-gray-50/70"] {
+  --ui-row-key: var(--theme-chart-gray);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, transparent);
+}
+
+/* Grouped rows (REF §8.7 group row: the surface-subtle band at 60 %): a model's per-user breakdown opens as a
+   band under its row, indented, rows 29px, figures muted. */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td[colspan] > div[class~="bg-gray-50/50"] {
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, transparent);
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td[colspan] > div > table > tbody > tr {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td[colspan] > div > table > tbody > tr > td {
+  padding: 5px 8px;
+  color: rgb(var(--ui-muted));
+  font-size: 11.5px;
+}
+
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td[colspan] > div > table > tbody > tr > td:first-child {
+  padding-left: 24px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* ================================================================== 4 · pagination */
+
+/* The reference ends a list with a 1px line and a quiet row (REF §8.7); our pagination keeps its controls in that
+   language: 12px muted counts with mono figures, page buttons 30px ghost with mono numbers, the current page as the
+   ink thumb of a segmented control (REF §8.5), arrows as 28px icon buttons. */
+html.flat-theme [data-ui="pagination"] {
+  gap: 12px;
+  min-height: 44px;
+  padding: 5px 12px 5px 16px;
+  border-top: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="pagination"] p,
+html.flat-theme [data-ui="pagination"] span[class~="text-sm"] {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui="pagination"] p > span[class~="font-medium"] {
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] {
+  gap: 2px;
+  border-radius: 0;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button {
+  justify-content: center;
+  min-width: 30px;
+  height: 30px;
+  margin: 0;
+  padding: 0 8px;
+  border: 0;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button:first-child,
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button:last-child {
+  width: 30px;
+  padding: 0;
+}
+
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button > svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button:not(:disabled):hover {
+  background-color: rgb(var(--ui-hover));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button[aria-current="page"],
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button[aria-current="page"]:hover {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button:disabled {
+  opacity: 0.55;
+}
+
+html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button:disabled:not(:first-child):not(:last-child) {
+  opacity: 1;
+  color: rgb(var(--ui-faint));
+}
+
+/* phones: previous / next are the reference's secondary buttons (30px, control outline, surface, 13/600) */
+html.flat-theme [data-ui="pagination"] > div:first-child > button {
+  min-height: 30px;
+  padding: 0 12px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="pagination"] > div:first-child > button:disabled {
+  opacity: 0.55;
+}
+
+/* ================================================================== 5 · bulk bar (visual language; placement is the page's) */
+
+/* The reference's selection tray (REF §8.12): surface, 1px structural line, 8px radius, 8 / 16 inset; the count
+   12.5px ink-soft, the selection links 12.5/600 in the accent, dots muted. It floats (popover shadow) only where
+   its owner sets --ui-bulk-bar-shadow. */
+html.flat-theme [data-ui~="bulk-bar"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-bulk-bar-shadow);
+  padding: 8px 12px 8px 16px;
+}
+
+html.flat-theme [data-ui~="bulk-bar"] > div:first-child > span[class~="text-sm"] {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui~="bulk-bar"] > div:first-child > button[class~="text-xs"] {
+  color: var(--ui-link);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="bulk-bar"] > div:first-child > button[class~="text-xs"]:hover:not(:disabled) {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+html.flat-theme [data-ui~="bulk-bar"] > div:first-child > span:not([class~="text-sm"]) {
+  color: rgb(var(--ui-faint));
+}
+
+/* ================================================================== 6 · badges, status, identity */
+
+/* .badge*: the reference's pills (REF §8.8: capsule, Geist Mono uppercase, .025em, 6 / 1 inset, soft semantic
+   fills: FREE = accent-soft, ZDR = subtle, DEMO DATA = purple-soft). */
+html.flat-theme .badge {
+  gap: 4px;
+  padding: 1px 7px;
+  border-radius: 9999px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-badge-size);
+  font-weight: 500;
+  line-height: var(--ui-badge-leading);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+html.flat-theme .badge-primary {
+  background-color: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+}
+
+html.flat-theme .badge-success {
+  background-color: rgb(var(--ui-success-soft));
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme .badge-warning {
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme .badge-danger {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme .badge-gray {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .badge-purple {
+  background-color: rgb(var(--ui-purple-soft));
+  color: rgb(var(--ui-purple));
+}
+
+/* StatusBadge: the reference's status dot (REF §8.8: 6px dot, 12px ink-soft label, 6px apart) */
+html.flat-theme [data-ui="status-badge"] {
+  gap: 6px;
+}
+
+html.flat-theme [data-ui="status-badge"] > span:first-child {
+  width: 6px;
+  height: 6px;
+  background-color: rgb(var(--ui-dot-idle));
+}
+
+html.flat-theme [data-ui="status-badge"] > span:first-child[class~="bg-green-500"] {
+  background-color: rgb(var(--ui-dot-ok));
+}
+
+html.flat-theme [data-ui="status-badge"] > span:first-child[class~="bg-yellow-500"] {
+  background-color: rgb(var(--ui-dot-warn));
+}
+
+html.flat-theme [data-ui="status-badge"] > span:first-child[class~="bg-red-500"] {
+  background-color: rgb(var(--ui-dot-bad));
+}
+
+html.flat-theme [data-ui="status-badge"] > span:last-child {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* PlatformTypeBadge (D3): identity without a hue per platform, on one line (D5 single-line rows). First the
+   reference's provider chip (REF §8.8: 4px radius, 1px control outline, Geist Mono 10px uppercase .025em, ink-soft,
+   monochrome logo) holding the platform and, after a 1px divider, the credential type; then the plan as a neutral
+   chip and the privacy state as a soft status chip; last the expiry in mono. */
+html.flat-theme [data-ui="platform-badge"] {
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--ui-font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.025em;
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] {
+  flex: 0 0 auto;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span {
+  gap: 5px;
+  padding: 1px 6px;
+  background-color: transparent;
+  color: rgb(var(--ui-ink-soft));
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span + span {
+  border-left: 1px solid rgb(var(--ui-line));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span svg {
+  width: 11px;
+  height: 11px;
+}
+
+/* the plan chip: neutral (subtle fill, muted); an abnormal subscription stays a danger chip */
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) {
+  border-color: transparent;
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span:first-child:not([title]) {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span:first-child[class~="bg-red-100"] {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+/* the privacy state is a status: private = success, Cloudflare-blocked = warning, failed = danger (soft fills) */
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[title] {
+  border-left: 0;
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[title][class~="bg-green-100"] {
+  background-color: rgb(var(--ui-success-soft));
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[title][class~="bg-yellow-100"] {
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[title][class~="bg-red-100"] {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui="platform-badge"] > div:last-child:not(:first-child):not([class~="inline-flex"]) {
+  padding-left: 1px;
+  color: rgb(var(--ui-faint));
+  font-size: 10.5px;
+  letter-spacing: 0;
+}
+
+/* GroupBadge (D3): a neutral chip (1px control outline, surface, 4px radius, 12px ink-soft, monochrome logo); the
+   multiplier a mono sub-chip on the subtle fill; the subscription's days left keep their warning / danger fills. */
+html.flat-theme [data-ui="group-badge"] {
+  gap: 5px;
+  padding: 1px 3px 1px 6px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui="group-badge"] > svg {
+  width: 12px;
+  height: 12px;
+}
+
+html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type) {
+  padding: 0 4px;
+  border-radius: 3px;
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type) [class~="font-bold"] {
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type) [class~="line-through"] {
+  opacity: 1;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type):is([class~="bg-red-200/80"]) {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type):is([class~="bg-amber-200/80"], [class~="bg-amber-100"]) {
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+/* Model marks (ModelIcon): the vendors' brand colours become the monochrome ink-soft logo of the reference's model
+   cells; a model without a mark shows the reference's letter square (REF §8.8: 1px control outline, subtle fill,
+   Geist Mono 600 ink-soft). */
+html.flat-theme .model-icon {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme .model-icon > path {
+  fill: currentColor;
+}
+
+html.flat-theme .model-icon-fallback {
+  box-sizing: border-box;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+/* ================================================================== 7 · KPI cards (D7) */
+
+/* Upstream's KPI tiles (admin and user dashboards, usage records, orders: a .card.p-4 in a grid whose first content
+   is a coloured icon tile) take the reference's StatTile (REF §8.13): 1px structural line, 6px radius, surface,
+   8 / 12 inset, the mono label, the value 15/600 tabular ink, the detail 11px muted, 76px; no icon tile; 10px
+   apart. */
+html.flat-theme [class~="grid"]:has(> [class~="card"][class~="p-4"] > div[class~="rounded-lg"][class~="p-2"]:first-child, > [class~="card"][class~="p-4"] > [class~="flex"]:first-child > div[class~="rounded-lg"][class~="p-2"]:first-child) {
+  gap: 10px;
+}
+
+/* two KPI rows in a row (the admin dashboard) read as one grid: 10px apart, not the page's 24 */
+html.flat-theme [class~="grid"]:has(> [class~="card"][class~="p-4"] > [class~="flex"]:first-child > div[class~="rounded-lg"][class~="p-2"]:first-child) + [class~="grid"]:has(> [class~="card"][class~="p-4"] > [class~="flex"]:first-child > div[class~="rounded-lg"][class~="p-2"]:first-child) {
+  margin-top: 10px;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child, > [class~="flex"]:first-child > div[class~="rounded-lg"][class~="p-2"]:first-child) {
+  --ui-kpi-accent: var(--ui-ink);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 0;
+  min-height: 76px;
+  padding: 8px 12px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:first-child:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) {
+  display: block;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child:is(:has(> svg), :has(> [class~="icon"]), :not(:has(*))) {
+  display: none;
+}
+
+/* the text column: label, value, detail, 2px apart */
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:first-child {
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div p[class~="text-xl"] {
+  color: rgb(var(--ui-kpi-accent));
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* a value upstream colours for decoration (the new-users count, the balance, the usage cost) is ink (D4) */
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div p[class~="text-xl"] > span:first-child:not([class~="text-sm"]) {
+  color: inherit;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div p[class~="text-xl"] > span[class~="text-sm"] {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  font-weight: 400;
+}
+
+/* the detail line(s): 11px muted; the cost triples keep their order, weight marks the actual cost (the titles name
+   each figure); status words keep their status colour */
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > :is(p, div):not(:first-child):not(:has(> p[class~="text-xl"])):not([class~="text-xl"]) {
+  color: rgb(var(--ui-muted));
+  font-size: 11px;
+  line-height: 16.5px;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child):not([class~="text-xl"]) :is([class~="text-green-600"], [class~="text-orange-500"], [class~="text-gray-400"], [class~="text-purple-600"]) {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child):not([class~="text-xl"]) > [class~="text-green-600"][title]:first-child {
+  color: rgb(var(--ui-ink-soft));
+  font-weight: 500;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > p[class~="text-green-600"]:not(:first-child) {
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child) > span[class~="text-green-600"]:not([title]) {
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child) > span[class~="text-red-500"] {
+  color: rgb(var(--ui-danger));
+}
+
+/* the performance tile's RPM / TPM lines: value 15/600 then the unit, TPM as the detail */
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > div[class~="items-baseline"] {
+  gap: 4px;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > div[class~="items-baseline"] > span {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 10px;
+  line-height: 16px;
+  letter-spacing: 0.025em;
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > div[class~="items-baseline"] > p[class~="text-sm"] {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Danger variant (REF §8.13, crop kpi-card-danger): a tile whose detail reports errors is the whole-card alert,
+   danger border and soft fill, the value in the danger colour. */
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child) > span[class~="text-red-500"]) {
+  --ui-kpi-accent: var(--ui-danger);
+  border-color: rgb(var(--ui-danger));
+  background-color: rgb(var(--ui-danger-soft));
+}
+
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child) > span[class~="text-red-500"]) div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:first-child {
+  color: rgb(var(--ui-muted));
+}
+
+/* Quick actions (admin and user dashboards, D4): upstream tints each tile and its hover by hue; they take the
+   reference's option card (REF §8.11 dialog option card: 8px radius, 1px structural line, the subtle fill at 60 %,
+   hover = control outline; a 28px neutral icon square with a 1px line; title 13/600 ink, description 12.5 muted). */
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]):has(> :first-child[class~="flex-shrink-0"]:is([class~="rounded-lg"], [class~="rounded-xl"])) {
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+  transition: border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]):has(> :first-child[class~="flex-shrink-0"]:is([class~="rounded-lg"], [class~="rounded-xl"])):hover {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]) > :first-child[class~="flex-shrink-0"]:is([class~="rounded-lg"], [class~="rounded-xl"]) {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-ink)) 3%, rgb(var(--ui-surface)));
+  color: rgb(var(--ui-ink-soft));
+  transform: none;
+}
+
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]) > :first-child[class~="flex-shrink-0"] svg {
+  width: 15px;
+  height: 15px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]) > :nth-child(2) > :first-child {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+}
+
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]) > :nth-child(2) > :nth-child(2) {
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  line-height: 1.5;
+}
+
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]) > svg:last-child {
+  width: 13px;
+  height: 13px;
+  color: rgb(var(--ui-faint));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]):hover > svg:last-child {
+  color: rgb(var(--ui-ink));
+}
+
+/* StatCard (.stat-*) in the same language */
+html.flat-theme .stat-card {
+  gap: 0;
+  min-height: 76px;
+  padding: 8px 12px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme .stat-card > .stat-icon {
+  display: none;
+}
+
+html.flat-theme .stat-label {
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme .stat-value {
+  color: rgb(var(--ui-ink));
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme .stat-trend {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+html.flat-theme .stat-trend-up {
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme .stat-trend-down {
+  color: rgb(var(--ui-danger));
+}
+
+/* ================================================================== 8 · progress and uptime bars */
+
+/* Bars (quota windows, capacity, progress): the reference's capsule track on the subtle fill (REF §8.14 usage bar,
+   §8.7 uptime), no gradient; the fill keeps its status colour. */
+html.flat-theme .progress,
+html.flat-theme div[class~="rounded-full"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"]):is([class~="bg-gray-200"], [class~="bg-gray-100"]):not([class~="animate-pulse"]) {
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme .progress-bar {
+  background: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 9 · empty and loading states */
+
+/* EmptyState: the reference's empty panel (REF §8.7: dashed control outline, 8px radius, title 14/500 ink-soft,
+   description 13px muted at 1.625); the icon tile is the reference's 28px neutral square (dialog option cards). */
+html.flat-theme .empty-state {
+  gap: 0;
+  padding: 32px 16px;
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme .empty-state > div:first-child {
+  width: 28px;
+  height: 28px;
+  margin-bottom: 12px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme .empty-state-icon {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .empty-state-title {
+  margin-bottom: 4px;
+  color: rgb(var(--ui-ink-soft));
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+html.flat-theme .empty-state-description {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+  line-height: 1.625;
+}
+
+html.flat-theme .empty-state-description:empty {
+  display: none;
+}
+
+/* Skeletons: the reference's shimmer (REF §8.7: surface-subtle -> ink 6 % -> surface-subtle, 400 % wide, 1.4s),
+   on the .skeleton recipe, Skeleton.vue and upstream's pulsing grey placeholder blocks. Reduced motion stops it
+   (styles/theme.css). */
+html.flat-theme :is(.skeleton, [data-ui="skeleton"], [class~="animate-pulse"][class~="bg-gray-200"], [class~="animate-pulse"] > [class~="bg-gray-200"]:empty) {
+  background-color: rgb(var(--ui-subtle));
+  background-image: linear-gradient(90deg, rgb(var(--ui-subtle)) 0%, color-mix(in srgb, rgb(var(--ui-ink)) 6%, rgb(var(--ui-subtle))) 50%, rgb(var(--ui-subtle)) 100%);
+  background-size: 400% 100%;
+  animation: consoleDataShimmer 1.4s ease-in-out infinite;
+}
+
+@keyframes consoleDataShimmer {
+  from { background-position: 100% 0; }
+  to { background-position: 0 0; }
+}
+
+/* ================================================================== 10 · chart cards */
+
+/* Cards holding a chart (REF §8.14 Spend over time: 14px inset, the title as a mono label). A chart card is known by
+   its canvas or by the fixed-height chart area it keeps while loading or empty (h-48 / h-64), so the title does not
+   change with the data. */
+html.flat-theme [class~="card"][class~="p-4"]:has(canvas, > div[class~="h-48"], > div[class~="h-64"], > div > div[class~="h-48"]) {
+  padding: 14px;
+}
+
+html.flat-theme [class~="card"][class~="p-4"]:has(canvas, > div[class~="h-48"], > div[class~="h-64"], > div > div[class~="h-48"]) > h3[class~="text-sm"][class~="font-semibold"],
+html.flat-theme [class~="card"][class~="p-4"]:has(canvas, > div[class~="h-48"], > div[class~="h-64"], > div > div[class~="h-48"]) > div:first-child > h3[class~="text-sm"][class~="font-semibold"] {
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
diff --git a/frontend/src/styles/console/overlays.css b/frontend/src/styles/console/overlays.css
index 1a4d139c6c20..53f2e44a891d 100644
--- a/frontend/src/styles/console/overlays.css
+++ b/frontend/src/styles/console/overlays.css
@@ -1 +1,1736 @@
-/* Console theme · overlays: menus, tooltips, dialogs, drawers, toasts, driver.js, announcement markdown (owner: the overlays agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here). */
+/* Console theme · overlays: menus, tooltips, dialogs, drawers, toasts, driver.js, announcement markdown (owner: the overlays agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here).
+ *
+ * Source: the Experiential Labs console, measured 2026-09-28 (ui-el/ref/console/REF-CONSOLE.md; styles.json jobs
+ * models / logs / docs and componentRecipesFromPublicJs). Measured: FilterMenu (§8.6), the tooltip bubble and the
+ * metric breakdown (§8.9), the Add-model Modal, the login modal and panel (§8.11), the compare tray (§8.12), motion
+ * (§11). Derived in the reference's language (it has no instance): toasts, drawers, dialog footers, the tour and the
+ * announcement panels; each rule says so.
+ *
+ * - Every selector starts with html.flat-theme (theme off = upstream). Specificity >= 0,2,1: this file loads after the
+ *   utilities, but lazily loaded scoped styles (Select, ProxySelector, AccountsView, DateRangePicker) and the global
+ *   CSS components import (onboarding.css, announcement-markdown.css) come later still, so their selectors are
+ *   out-specified, never out-ordered. driver.js needs !important.
+ * - Widths, positions, z-indexes, max-heights, visibility and opacity of anything that opens on hover stay upstream's
+ *   (behaviour.css and the templates own them).
+ * - Shadows only here: menus, lists and tooltips float at --ui-shadow-popover, dialogs, drawers and the tour at
+ *   --ui-shadow-overlay (the page itself has none).
+ *
+ * Hooks this file adds (template lines, nothing else changed in those templates):
+ *   components/common/AnnouncementBell.vue   data-ui="announcement-bell" (the header button, styled by shell.css),
+ *                                            data-ui="announcement-list", data-ui="announcement-detail" (the panels)
+ *   components/common/AnnouncementPopup.vue  data-ui="announcement-popup" (the panel)
+ *   components/common/ConfirmDialog.vue      data-ui="confirm-cancel", data-ui="confirm-ok" (its two utility buttons)
+ *   components/common/HelpTooltip.vue        data-ui="help-tooltip" (the trigger root)
+ *   components/common/LocaleSwitcher.vue     data-ui="menu", data-ui="menu-item"
+ *   components/common/Toast.vue              data-ui="toast-stack", data-ui="toast"
+ * Shared menu hooks for other owners' templates (the accounts filters, folder menu and bulk menu use them):
+ *   data-ui="menu" (panel), data-ui="menu-item" (row; data-tone="danger", aria-selected / aria-checked / data-selected),
+ *   data-ui="menu-label", data-ui="menu-separator", data-ui="menu-check".
+ * Existing hooks and upstream classes read: .modal-*, .dropdown / .dropdown-item, .select-dropdown-portal and its
+ * .select-* parts, .select-dropdown (ProxySelector), .date-picker-dropdown (panel only; its parts are controls.css'),
+ * .action-menu-content, .account-tools-menu-item / -icon, .theme-dark-surface, role="tooltip", info-popover ids,
+ * data-test="account-details-drawer", data-test="operation-dock", .markdown-body, .theme-tour-popover / .driver-*. */
+
+/* ================================================================== 0 · local tokens */
+html.flat-theme {
+  /* menus and lists (FilterMenu, measured): 4px panel inset, 6/12 rows, 12.5/18.75 text, 14px glyphs, 8px gap */
+  --ui-menu-inset: 4px;
+  --ui-menu-row-y: 6px;
+  --ui-menu-row-x: 12px;
+  --ui-menu-text: 12.5px;
+  --ui-menu-leading: 18.75px;
+  --ui-menu-glyph: 14px;
+  /* B6.3 (behaviour.css): a label without a glyph lines up with the labels that have one: 12 + 14 + 8 */
+  --ui-menu-text-inset: 34px;
+  /* dialogs (Modal, measured): 18px sides, 14px header, 16px body; the footer's 12px is derived */
+  --ui-dialog-x: 18px;
+  --ui-dialog-head-y: 14px;
+  --ui-dialog-body-y: 16px;
+  --ui-dialog-foot-y: 12px;
+  /* the panel curve of the reference's dialog and sign-in panel (450ms) */
+  --ui-ease-panel: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/* ================================================================== 1 · menus and dropdown lists */
+
+/* 1.1 Panels. FilterMenu: surface, 1px structural line, radius 8, 4px inset, popover shadow; the dark theme draws them
+   on the dark surface too. Covered: the .dropdown recipe (user menu, channel-monitor filters), Select's list, the
+   proxy picker, the date picker's panel (its parts are controls.css'), the row "more" menus (.action-menu-content),
+   the shared data-ui="menu" hook, and upstream's utility-built menus and popover cards (absolute / fixed, white,
+   shadow-lg / xl: column settings, filter and sort menus, the accounts toolbar menus, group pickers, auto-refresh,
+   language, version and subscription cards, search result lists). Each group is written for both themes because the
+   lazily loaded scoped styles restate their dark fill at 0,3,0. */
+html.flat-theme :is(.dropdown, .select-dropdown-portal, .select-dropdown, .date-picker-dropdown, .action-menu-content, [data-ui="menu"]),
+html.flat-theme.dark :is(.dropdown, .select-dropdown-portal, .select-dropdown, .date-picker-dropdown, .action-menu-content, [data-ui="menu"]),
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]):not([class~="inset-0"], [class~="inset-y-0"], [class~="pointer-events-none"]) {
+  border-radius: var(--ui-radius-lg);
+  border-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-popover);
+}
+
+/* panels drawn with a ring instead of a border keep their box size: the line becomes a 1px spread */
+html.flat-theme .action-menu-content,
+html.flat-theme div[class~="fixed"][class~="bg-white"][class~="ring-1"]:is([class~="shadow-lg"], [class~="shadow-xl"]) {
+  box-shadow: 0 0 0 1px rgb(var(--ui-line)), var(--ui-shadow-popover);
+}
+
+html.flat-theme [data-ui="menu"] {
+  border: 1px solid rgb(var(--ui-line));
+  padding-top: var(--ui-menu-inset);
+  padding-bottom: var(--ui-menu-inset);
+}
+
+/* reveal (REF §11: 200ms ease-out, 4px travel) instead of upstream's scale-in / 8px slide */
+html.flat-theme .dropdown {
+  animation: consoleSlideDown var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme :is(.select-dropdown-enter-active, .select-dropdown-leave-active, .date-picker-dropdown-enter-active, .date-picker-dropdown-leave-active) {
+  transition: opacity var(--ui-duration-slide) var(--ui-ease-out), transform var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme :is(.select-dropdown-leave-active, .date-picker-dropdown-leave-active) {
+  transition-duration: var(--ui-duration);
+}
+
+html.flat-theme :is(.select-dropdown-enter-from, .select-dropdown-leave-to, .date-picker-dropdown-enter-from, .date-picker-dropdown-leave-to) {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+/* 1.2 Rows. FilterMenu option: 6/12, 12.5/18.75, ink-soft, 8px gap, hover = subtle fill (text unchanged), 150ms. The
+   same row serves command menus (row "more", user menu), lists (Select, proxy picker) and upstream's utility menus
+   (their full-width buttons). The named rows share one :is() group (0,3,1), so every state below is written on it. */
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item),
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="flex"], [class~="text-left"]):not(.btn) {
+  gap: 8px;
+  padding: var(--ui-menu-row-y) var(--ui-menu-row-x);
+  font-size: var(--ui-menu-text);
+  line-height: var(--ui-menu-leading);
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+/* inset rows (upstream's p-1.5 / p-2 panels with rounded items) keep the ModelPicker's 4px corners */
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded"]):not(.btn),
+html.flat-theme .account-tools-menu-item {
+  border-radius: var(--ui-radius-sm);
+}
+
+/* neutral text: the rows' own greys and the decorative hues upstream gives single commands (re-authorise blue, refresh
+   purple, privacy emerald, ...); a selected row and a danger row keep their meaning (below) */
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(.select-option-selected, [aria-selected="true"], [aria-checked="true"], [aria-current="true"], [aria-current="page"], [data-selected="true"], [class~="bg-primary-50"], [class*="text-primary-"], [class*="text-red-"], [data-tone="danger"]),
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="text-gray-700"], [class~="text-gray-600"], [class~="text-gray-800"], [class~="text-gray-900"]):not(.btn, [class~="bg-primary-50"], [class*="text-primary-"]) {
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* selected: ink text (FilterMenu), no tint (upstream tints it primary-50) */
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):is(.select-option-selected, [aria-selected="true"], [aria-checked="true"], [aria-current="true"], [aria-current="page"], [data-selected="true"], [class~="bg-primary-50"], [class*="text-primary-"]),
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="bg-primary-50"], [class*="text-primary-"]):not(.btn) {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+/* a row's label span painted grey by its template follows the row (ink-soft, ink when selected) */
+html.flat-theme [data-ui="menu-item"] > span[class*="text-gray-"]:not([data-ui]),
+html.flat-theme.dark [data-ui="menu-item"] > span[class*="text-gray-"]:not([data-ui]) {
+  color: inherit;
+}
+
+/* hover and keyboard focus: the subtle fill (REF §8.18: list rows show focus with their fill). The fill alone is
+   1.09:1 on the surface, so keyboard focus also draws the 2px focus ring inside the row, and the list's active option
+   (keyboard or pointer) turns its text to ink: the accessibility floor, not the reference. */
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(:disabled, .select-option-group, .select-option-disabled, [aria-disabled="true"]):hover,
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(.select-option-group, .select-option-disabled):is(:focus-visible, .select-option-focused),
+html.flat-theme.dark :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(:disabled, .select-option-group, .select-option-disabled, [aria-disabled="true"]):hover,
+html.flat-theme.dark :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(.select-option-group, .select-option-disabled):is(:focus-visible, .select-option-focused),
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="flex"], [class~="text-left"]):not(.btn, :disabled):is(:hover, :focus-visible) {
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):focus-visible,
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="flex"], [class~="text-left"]):not(.btn):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: -2px;
+}
+
+html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-option-focused:not(.select-option-group, .select-option-disabled) {
+  color: rgb(var(--ui-ink));
+}
+
+/* danger rows (log out, delete): danger text and glyph, danger-soft on hover */
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):is([class*="text-red-"], [data-tone="danger"]) {
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):is([class*="text-red-"], [data-tone="danger"]):not(:disabled):is(:hover, :focus-visible),
+html.flat-theme.dark :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):is([class*="text-red-"], [data-tone="danger"]):not(:disabled):is(:hover, :focus-visible) {
+  background-color: rgb(var(--ui-danger-soft));
+}
+
+/* disabled rows (the row "more" menu dims its whole fieldset itself) */
+html.flat-theme :is(.dropdown-item, [data-ui="menu-item"]):is(:disabled, [aria-disabled="true"]),
+html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-option-disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* rows upstream builds as clickable divs (the users table's group replacement menu) */
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) > div[class~="cursor-pointer"][class~="flex"] {
+  gap: 8px;
+  padding: var(--ui-menu-row-y) var(--ui-menu-row-x);
+  font-size: var(--ui-menu-text);
+  line-height: var(--ui-menu-leading);
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) > div[class~="cursor-pointer"][class~="flex"]:hover,
+html.flat-theme.dark :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) > div[class~="cursor-pointer"][class~="flex"]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+/* 1.3 Glyphs: 14px, drawn in the row's colour (upstream's decorative icon hues fold into it; a danger row's glyph is
+   danger). A check mark on the current choice is the accent. */
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item) > svg,
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:not(.btn) > svg {
+  width: var(--ui-menu-glyph);
+  height: var(--ui-menu-glyph);
+  flex-shrink: 0;
+}
+
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item) svg:not([class*="text-primary-"]) {
+  color: inherit;
+}
+
+html.flat-theme :is(.dropdown, .select-dropdown-portal, .select-dropdown, .action-menu-content, [data-ui="menu"], .account-tools-menu-item) svg[class*="text-primary-"],
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"] svg[class*="text-primary-"] {
+  color: var(--ui-link);
+}
+
+/* 1.4 Group labels: the mono label (Geist Mono 10, 0.12em, uppercase, --ui-label; 11px in Chinese) at 8/12/4, as the
+   ModelPicker's group rows; separators are the structural line with 4px around. */
+html.flat-theme [data-ui="menu-label"],
+html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-option-group:not(.dropdown-item),
+html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(div, span, p)[class~="uppercase"]:is([class~="text-xs"], [class~="text-[10px]"], [class~="text-[11px]"]):not(button *) {
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="menu-label"],
+html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-option-group:not(.dropdown-item),
+html.flat-theme.dark :is(.select-dropdown-portal, .select-dropdown) .select-option-group:not(.dropdown-item) {
+  padding: 8px var(--ui-menu-row-x) 4px;
+  background-color: transparent;
+}
+
+/* the channel-monitor filter's "all" row carries both .select-option-group and .dropdown-item: it is a command */
+html.flat-theme .select-dropdown-portal .dropdown-item.select-option-group {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="menu-separator"] {
+  height: 0;
+  margin: 4px 0;
+  border: 0;
+  border-top: 1px solid rgb(var(--ui-line));
+}
+
+/* 1.5 The 14px choice square (FilterMenu): radius 4, the control outline; accent fill and a 10px check when chosen */
+html.flat-theme [data-ui="menu-check"] {
+  display: inline-grid;
+  place-items: center;
+  width: 14px;
+  height: 14px;
+  flex-shrink: 0;
+  border: 1px solid rgb(var(--ui-control-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: transparent;
+  color: rgb(var(--ui-on-primary));
+}
+
+html.flat-theme [data-ui="menu-check"] svg {
+  width: 10px;
+  height: 10px;
+  stroke-width: 2.5;
+}
+
+html.flat-theme :is([aria-selected="true"], [aria-checked="true"], [data-selected="true"]) > [data-ui="menu-check"],
+html.flat-theme [data-ui="menu-check"][data-checked="true"] {
+  border-color: rgb(var(--ui-primary));
+  background-color: rgb(var(--ui-primary));
+}
+
+/* 1.6 Select's list (the ModelPicker frame: a search row, then the list): a 36px search row on the structural line,
+   13px input, 14px faint glyph; a 4px list inset; a 12px muted empty state. */
+html.flat-theme .select-dropdown-portal .select-search,
+html.flat-theme .select-dropdown .select-header,
+html.flat-theme.dark .select-dropdown-portal .select-search,
+html.flat-theme.dark .select-dropdown .select-header {
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 10px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme :is(.select-dropdown-portal .select-search, .select-dropdown .select-search) > svg {
+  width: var(--ui-menu-glyph);
+  height: var(--ui-menu-glyph);
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-search-input,
+html.flat-theme.dark :is(.select-dropdown-portal, .select-dropdown) .select-search-input {
+  min-height: 36px;
+  font-size: 13px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-search-input::placeholder,
+html.flat-theme.dark :is(.select-dropdown-portal, .select-dropdown) .select-search-input::placeholder {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-options {
+  padding-top: var(--ui-menu-inset);
+  padding-bottom: var(--ui-menu-inset);
+}
+
+html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-empty,
+html.flat-theme.dark :is(.select-dropdown-portal, .select-dropdown) .select-empty {
+  padding: 16px 10px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the proxy picker's batch-test glyph button: a 28px ghost icon button, muted -> ink (no emerald) */
+html.flat-theme .select-dropdown .batch-test-btn,
+html.flat-theme.dark .select-dropdown .batch-test-btn {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .select-dropdown .batch-test-btn:not(:disabled):hover,
+html.flat-theme.dark .select-dropdown .batch-test-btn:not(:disabled):hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .select-dropdown .batch-test-btn svg {
+  width: var(--ui-menu-glyph);
+  height: var(--ui-menu-glyph);
+}
+
+/* 1.7 The accounts toolbar menus (更多操作 / 自动刷新): group titles are the section label, glyph tiles are the
+   reference's 24px monochrome logo squares (1px line, radius 4, ink-soft glyph; decisions D3 / D4, no hue per action). */
+html.flat-theme .account-tools-menu-icon,
+html.flat-theme.dark .account-tools-menu-icon {
+  width: 24px;
+  height: 24px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme .account-tools-menu-item .account-tools-menu-icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+html.flat-theme div[class~="fixed"]:has(> div > .account-tools-menu-item) > div > div[class~="px-2"][class~="py-2"] {
+  padding: 8px var(--ui-menu-row-x) 4px;
+}
+
+/* 1.8 The user menu's identity block, the mobile balance and the contact row */
+html.flat-theme .dropdown > div[class~="border-b"]:first-child {
+  padding: 10px var(--ui-menu-row-x);
+}
+
+html.flat-theme .dropdown > div[class~="border-b"]:first-child > :first-child,
+html.flat-theme.dark .dropdown > div[class~="border-b"]:first-child > :first-child {
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .dropdown > div[class~="border-b"]:first-child > :nth-child(2),
+html.flat-theme.dark .dropdown > div[class~="border-b"]:first-child > :nth-child(2) {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .dropdown > div:is([class~="border-t"], [class~="border-b"]),
+html.flat-theme.dark .dropdown > div:is([class~="border-t"], [class~="border-b"]) {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme .dropdown > div[class~="py-1"] {
+  padding-top: var(--ui-menu-inset);
+  padding-bottom: var(--ui-menu-inset);
+}
+
+html.flat-theme .dropdown > div[class~="border-t"][class~="px-4"],
+html.flat-theme .dropdown > div[class~="border-b"][class~="px-4"]:not(:first-child) {
+  padding: 8px var(--ui-menu-row-x);
+}
+
+html.flat-theme .dropdown > div[class~="border-t"][class~="px-4"] > div,
+html.flat-theme.dark .dropdown > div[class~="border-t"][class~="px-4"] > div {
+  gap: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .dropdown > div[class~="border-t"][class~="px-4"] > div > svg {
+  width: var(--ui-menu-glyph);
+  height: var(--ui-menu-glyph);
+}
+
+html.flat-theme .dropdown > div[class~="border-t"][class~="px-4"] > div > span:last-child,
+html.flat-theme.dark .dropdown > div[class~="border-t"][class~="px-4"] > div > span:last-child {
+  font-family: var(--ui-font-mono);
+  font-weight: 400;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* ================================================================== 2 · tooltips and detail popovers */
+
+/* 2.1 Upstream draws its tips as dark boxes; the reference's are light: surface, 1px control outline (line-strong),
+   radius 6, popover shadow (tooltip bubble §8.9; the metric breakdown uses the same frame at 12/8 inset). In the dark
+   theme they are the dark surface with the same outline. Covered: HelpTooltip, InfoPopover, the usage table's cost
+   and token cards, the hover tips of the accounts / users / groups / account-form templates. Opening, placement and
+   hover logic are untouched. */
+html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface),
+html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"], [class~="shadow-lg"], [class~="shadow-xl"]):not(button, a) {
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-popover);
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  line-height: 18px;
+  /* the text shades upstream chose for a dark ground, resolved for the light surface; white text is ink */
+  --theme-on-fill: var(--ui-ink);
+  --theme-text-gray-100: var(--ui-ink);
+  --theme-text-gray-200: var(--ui-ink);
+  --theme-text-gray-300: var(--ui-ink-soft);
+  --theme-text-gray-400: var(--ui-muted);
+  --theme-text-gray-500: var(--ui-muted);
+  --theme-line-gray-600: var(--ui-line);
+  --theme-line-gray-700: var(--ui-line);
+  --theme-line-gray-800: var(--ui-line);
+  --theme-text-primary-100: 20 124 66;
+  --theme-text-primary-200: 20 124 66;
+  --theme-text-primary-300: 20 124 66;
+  --theme-text-primary-400: 20 124 66;
+  --theme-text-primary-500: 20 124 66;
+  --theme-text-primary-600: 20 124 66;
+  --theme-text-primary-700: 20 124 66;
+  --theme-text-success-100: var(--ui-success);
+  --theme-text-success-200: var(--ui-success);
+  --theme-text-success-300: var(--ui-success);
+  --theme-text-success-400: var(--ui-success);
+  --theme-text-success-500: var(--ui-success);
+  --theme-text-success-600: var(--ui-success);
+  --theme-text-success-700: var(--ui-success);
+  --theme-text-danger-100: var(--ui-danger);
+  --theme-text-danger-200: var(--ui-danger);
+  --theme-text-danger-300: var(--ui-danger);
+  --theme-text-danger-400: var(--ui-danger);
+  --theme-text-danger-500: var(--ui-danger);
+  --theme-text-danger-600: var(--ui-danger);
+  --theme-text-danger-700: var(--ui-danger);
+  --theme-text-warning-100: var(--ui-warning);
+  --theme-text-warning-200: var(--ui-warning);
+  --theme-text-warning-300: var(--ui-warning);
+  --theme-text-warning-400: var(--ui-warning);
+  --theme-text-warning-500: var(--ui-warning);
+  --theme-text-warning-600: var(--ui-warning);
+  --theme-text-warning-700: var(--ui-warning);
+  /* prices, tiers and rates were tinted sky / violet / fuchsia / cyan / blue on the dark box: in the reference a figure
+     is ink (decision D2, no decorative colour) */
+  --theme-text-info-100: var(--ui-ink);
+  --theme-text-info-200: var(--ui-ink);
+  --theme-text-info-300: var(--ui-ink);
+  --theme-text-info-400: var(--ui-ink);
+  --theme-text-info-500: var(--ui-ink);
+  --theme-text-info-600: var(--ui-ink);
+  --theme-text-info-700: var(--ui-ink);
+  --theme-text-purple-100: var(--ui-ink);
+  --theme-text-purple-200: var(--ui-ink);
+  --theme-text-purple-300: var(--ui-ink);
+  --theme-text-purple-400: var(--ui-ink);
+  --theme-text-purple-500: var(--ui-ink);
+  --theme-text-purple-600: var(--ui-ink);
+  --theme-text-purple-700: var(--ui-ink);
+}
+
+/* the dark theme: the dark surface and outline; the variables above resolve to the dark roles by themselves, except
+   the accent text, which is the mint there */
+html.flat-theme.dark :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface),
+html.flat-theme.dark :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"], [class~="shadow-lg"], [class~="shadow-xl"]):not(button, a) {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  --theme-text-primary-100: 182 247 200;
+  --theme-text-primary-200: 182 247 200;
+  --theme-text-primary-300: 182 247 200;
+  --theme-text-primary-400: 182 247 200;
+  --theme-text-primary-500: 182 247 200;
+  --theme-text-primary-600: 182 247 200;
+  --theme-text-primary-700: 182 247 200;
+}
+
+/* 2.2 Insets: the bubble's 6/10 for one-line tips, the breakdown's 8/12 for paragraphs and cards (p-3 boxes). */
+html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"]):not(button, a) {
+  padding: 6px 10px;
+}
+
+html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface, div[class~="text-white"][class~="bg-gray-900"][class~="p-3"]),
+html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"]):is([class~="w-72"], [class~="w-80"], [class~="w-56"], [class~="min-w-[200px]"], [class~="min-w-[220px]"]):not(button, a) {
+  padding: 8px 12px;
+}
+
+/* titles and emphasis inside a tip are ink (the bubble's 12/16 500 title) */
+html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"]) :is(strong, b, [class~="font-semibold"], [class~="font-medium"], [class~="font-bold"]) {
+  color: rgb(var(--ui-ink));
+  font-weight: 500;
+}
+
+/* 2.3 Breakdown cards (the usage table's cost and token details): the reference's MetricFigure rows, label left,
+   figure right in Geist Mono tabular ink; the card's section title is its 11px uppercase divider label. */
+html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface {
+  padding: 8px 12px;
+}
+
+html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface [class~="justify-between"] > span:last-child {
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+  font-weight: 400;
+}
+
+html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface [class~="justify-between"] > span:first-child {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface div[class~="font-semibold"][class~="mb-1"] {
+  margin-bottom: 4px;
+  font-size: 11px;
+  line-height: 16.5px;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface :is([class~="border-t"], [class~="border-b"]) {
+  border-color: rgb(var(--ui-line));
+}
+
+/* 2.4 Arrows: the bubble's 7px square rotated 45° on the outline colour (left -4px). Rotated squares keep their
+   corner; border triangles become that square too (a triangle cannot carry an edge line). */
+html.flat-theme :is([role="tooltip"].theme-dark-surface, div[class~="text-white"][class~="bg-gray-900"][class~="p-3"]) > div[class~="absolute"][class~="rotate-45"] {
+  width: 7px;
+  height: 7px;
+  bottom: -4px;
+  border: 0 solid rgb(var(--ui-line-strong));
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  background-color: rgb(var(--ui-surface));
+}
+
+/* the usage cards' left-pointing arrow (mirrored by the template when the card opens to the left) */
+html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface > div[class~="absolute"][class~="right-full"] {
+  width: 7px;
+  height: 7px;
+  margin-right: -4px;
+  margin-left: -4px;
+  border: 0 solid rgb(var(--ui-line-strong));
+  border-left-width: 1px;
+  border-bottom-width: 1px;
+  background-color: rgb(var(--ui-surface));
+  --tw-rotate: 45deg;
+}
+
+/* hover tips with a border triangle above (pointing up) or below (pointing down) */
+html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"]) > div[class~="absolute"][class~="border-transparent"][class~="bottom-full"] {
+  width: 7px;
+  height: 7px;
+  margin-bottom: -4px;
+  border: 0 solid rgb(var(--ui-line-strong));
+  border-top-width: 1px;
+  border-left-width: 1px;
+  background-color: rgb(var(--ui-surface));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(45deg);
+}
+
+html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"]) > div[class~="absolute"][class~="border-transparent"][class~="top-full"] {
+  width: 7px;
+  height: 7px;
+  margin-top: -4px;
+  border: 0 solid rgb(var(--ui-line-strong));
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  background-color: rgb(var(--ui-surface));
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(45deg);
+}
+
+/* 2.5 HelpTooltip's trigger: a 14px info glyph, faint -> muted (the reference's cursor-help info icon; no accent) */
+html.flat-theme [data-ui="help-tooltip"] > svg {
+  width: 14px;
+  height: 14px;
+  stroke-width: 1.8;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="help-tooltip"]:hover > svg,
+html.flat-theme.dark [data-ui="help-tooltip"]:hover > svg {
+  color: rgb(var(--ui-muted));
+}
+
+/* HelpTooltip's close glyph (click mode) */
+html.flat-theme [role="tooltip"].theme-dark-surface > button[class~="absolute"] {
+  color: rgb(var(--ui-muted));
+  border-radius: var(--ui-radius-sm);
+}
+
+html.flat-theme [role="tooltip"].theme-dark-surface > button[class~="absolute"]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+/* 2.6 Icon-only row actions (behaviour B2.1 places the label left of the button): the bubble's look, 12/16 500 ink. */
+@media (hover: hover) and (pointer: fine) {
+  html.flat-theme:is(.flat-theme) .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="accounts"]) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
+    padding: 6px 10px;
+    border: 1px solid rgb(var(--ui-line-strong));
+    border-radius: var(--ui-radius-md);
+    background-color: rgb(var(--ui-surface));
+    box-shadow: var(--ui-shadow-popover);
+    color: rgb(var(--ui-ink));
+    font-size: 12px;
+    line-height: 16px;
+    font-weight: 500;
+  }
+}
+
+/* 2.7 White hover cards (the usage KPI explanations, the supported-model card; the header balance card is the shell's):
+   the breakdown frame, radius 6, control outline, 12/8 inset, 12px. */
+html.flat-theme :is(div, span)[class~="pointer-events-none"][class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]):not([data-ui="header-balance"] > *) {
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-popover);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme :is(div, span)[class~="pointer-events-none"][class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"])[class~="p-3"]:not([data-ui="header-balance"] > *) {
+  padding: 8px 12px;
+}
+
+/* ================================================================== 3 · dialogs */
+
+/* 3.1 Scrim: --scrim (ink 20% / black 60%), no blur (Modal, login modal, docs search; measured). Covers BaseDialog and
+   upstream's utility-built dialogs and drawers; image lightboxes (a scrim holding an <img>) and the mobile sidebar's
+   overlay (the shell's) keep theirs. */
+html.flat-theme .modal-overlay,
+html.flat-theme div[class~="fixed"][class~="inset-0"]:is([class~="bg-black/35"], [class~="bg-black/40"], [class~="bg-black/50"], [class~="bg-black/60"], [class~="bg-black/70"], [class~="bg-gray-950/60"], [class~="bg-gray-900/50"], [class~="bg-gray-900/60"]):not([class~="lg:hidden"], :has(> img)) {
+  background-color: rgb(var(--ui-scrim));
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+/* the Modal's scrim inset: 16px, 24px from 640px (upstream 8 / 16) */
+html.flat-theme .modal-overlay {
+  padding: 16px;
+}
+
+@media (min-width: 640px) {
+  html.flat-theme .modal-overlay {
+    padding: 24px;
+  }
+}
+
+/* 3.2 Panel: surface, 1px structural line, radius 8, overlay shadow (Modal, measured). */
+html.flat-theme .modal-content {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-overlay);
+}
+
+/* upstream's utility-built dialogs: the panel directly in (or one wrapper inside) the fixed scrim layer */
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]),
+html.flat-theme div[class~="fixed"][class~="inset-0"] > div[class~="min-h-full"] > div[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]) {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-overlay);
+}
+
+/* 3.3 Header: 14/18 inset on the structural line, 8px gap; title 14/20 600 ink (Modal h2). Titles wrap instead of
+   being cut (nothing hidden). */
+html.flat-theme .modal-header {
+  gap: 8px;
+  padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
+  border-bottom: 1px solid rgb(var(--ui-line));
+}
+
+html.flat-theme .modal-title {
+  min-width: 0;
+  margin: 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: rgb(var(--ui-ink));
+}
+
+/* 3.4 Close: 28px, 1px structural line, surface, radius 6, muted -> ink, a 15px x at 1.8 (Modal close, measured). */
+html.flat-theme .modal-header > button:last-child {
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-muted));
+  box-shadow: none;
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .modal-header > button:last-child:hover,
+html.flat-theme.dark .modal-header > button:last-child:hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .modal-header > button:last-child svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme :is(.modal-header > button:last-child, [data-test="account-details-drawer"] > header .icon-button, [data-ui^="announcement-"] button):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+/* 3.5 Body 16/18; footer (derived: the reference's modals end without one) 12/18 on the structural line, 8px gap, no
+   tint; its buttons are the .btn recipes (controls). */
+html.flat-theme .modal-body {
+  padding: var(--ui-dialog-body-y) var(--ui-dialog-x);
+}
+
+html.flat-theme .modal-footer {
+  gap: 8px;
+  padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
+  border-top: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+}
+
+/* 3.6 The confirm dialog: message 13/21 ink-soft; its two utility buttons restated as the .btn recipes (controls'
+   values: 30px, 0 12px, 13/19.5 600, radius 6, 1px edge; cancel = default, confirm = primary ink, a danger confirm
+   = destructive). */
+html.flat-theme .modal-content:has([data-ui="confirm-ok"]) .modal-body > div > p:first-child {
+  font-size: 13px;
+  line-height: 21px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme :is([data-ui="confirm-cancel"], [data-ui="confirm-ok"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: var(--ui-control-h);
+  padding: 0 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+  box-shadow: none;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-ring-offset-shadow: 0 0 #0000;
+}
+
+html.flat-theme [data-ui="confirm-cancel"]:hover,
+html.flat-theme.dark [data-ui="confirm-cancel"]:hover {
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="confirm-ok"],
+html.flat-theme [data-ui="confirm-ok"]:hover,
+html.flat-theme.dark [data-ui="confirm-ok"]:hover {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui="confirm-ok"][class~="bg-red-600"],
+html.flat-theme.dark [data-ui="confirm-ok"][class~="bg-red-600"] {
+  border-color: rgb(var(--ui-danger) / 0.3);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-danger));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="confirm-ok"][class~="bg-red-600"]:hover,
+html.flat-theme.dark [data-ui="confirm-ok"][class~="bg-red-600"]:hover {
+  border-color: rgb(var(--ui-danger) / 0.5);
+  background-color: rgb(var(--ui-danger-soft));
+}
+
+html.flat-theme :is([data-ui="confirm-cancel"], [data-ui="confirm-ok"]):focus {
+  box-shadow: none;
+}
+
+html.flat-theme :is([data-ui="confirm-cancel"], [data-ui="confirm-ok"]):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme :is([data-ui="confirm-cancel"], [data-ui="confirm-ok"]):disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+/* 3.7 Utility-built dialogs without a header strip (TOTP, passkey, backup / redeem / subscription guides, payment
+   renewal): the reference's padded panel (ReadScope, login modal): title 17/600 tight ink, close 28px ghost glyph
+   button (muted -> ink on the subtle fill). */
+html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > :is(h2, h3):is([class~="text-lg"], [class~="text-xl"]),
+html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > div:first-child > :is(h2, h3):is([class~="text-lg"], [class~="text-xl"]) {
+  font-size: 17px;
+  line-height: 25.5px;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="top-4"] {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="top-4"]:hover,
+html.flat-theme.dark div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="top-4"]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="top-4"] svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* 3.8 Motion: the scrim fades in 200ms; the panel settles on the reference's 450ms panel curve from 98% with a 160ms
+   fade; leaving is a 150ms fade (REF §11; reduced motion: theme.css stops all of it). */
+html.flat-theme .modal-enter-active {
+  transition: opacity var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme .modal-leave-active {
+  transition: opacity var(--ui-duration) ease-in;
+}
+
+html.flat-theme .modal-enter-active .modal-content {
+  transition: transform 450ms var(--ui-ease-panel), opacity 160ms var(--ui-ease-out);
+}
+
+html.flat-theme .modal-leave-active .modal-content {
+  transition: opacity var(--ui-duration) ease-in;
+}
+
+html.flat-theme :is(.modal-enter-from, .modal-leave-to) .modal-content {
+  transform: translateY(4px) scale(0.98);
+  opacity: 0;
+}
+
+html.flat-theme .modal-leave-to .modal-content {
+  transform: none;
+}
+
+/* ================================================================== 4 · drawers (derived: the reference has none) */
+
+/* 4.1 The account details drawer's shell (its content is the accounts page's): the dark theme's surface, a 1px
+   structural edge, the overlay shadow; the header is the dialog's (14/18, 14/20 600 title, mono id, 28px bordered
+   buttons). */
+html.flat-theme [data-test="account-details-drawer"] {
+  border-left: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-overlay);
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header {
+  align-items: center;
+  gap: 8px;
+  padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
+  border-bottom: 1px solid rgb(var(--ui-line));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header h2 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header h2 + span {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header p {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header .icon-button {
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header .icon-button:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header .icon-button svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* 4.2 The account-task dock (bottom right): the compare tray's floating bar (radius 8, surface, 1px line, popover
+   shadow). */
+html.flat-theme [data-test="operation-dock"] {
+  overflow: hidden;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-popover);
+}
+
+/* ================================================================== 5 · toasts (derived: the reference has none) */
+
+/* 5.1 A toast is the compare tray's floating surface: 1px structural line all round (no coloured edge), radius 8,
+   popover shadow; 12/14 inset; a 15px status glyph in the status text colour (the only colour); message 13/19.5
+   ink-soft (ink when it stands alone), title 13/600 ink; a 24px ghost close; the auto-dismiss timer stays, as a 2px
+   hairline in the control-outline grey. It arrives with the reference's reveal (200ms, 4px), not a slide from the
+   edge. */
+html.flat-theme [data-ui="toast"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-popover);
+}
+
+html.flat-theme [data-ui="toast"] > div:first-child {
+  padding: 12px 12px 12px 14px;
+}
+
+html.flat-theme [data-ui="toast"] > div:first-child > div {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui="toast"] > div:first-child > div > div:first-child {
+  margin-top: 2px;
+}
+
+html.flat-theme [data-ui="toast"] > div:first-child > div > div:first-child > svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme [data-ui="toast"] p {
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui="toast"] p[class~="font-semibold"] {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="toast"] p:not([class~="font-semibold"]) {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="toast"] p:only-child {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="toast"] > div:first-child > div > button:last-child {
+  display: inline-grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  margin: -2px -2px -2px 0;
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="toast"] > div:first-child > div > button:last-child:hover,
+html.flat-theme.dark [data-ui="toast"] > div:first-child > div > button:last-child:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="toast"] > div:first-child > div > button:last-child svg {
+  width: 14px;
+  height: 14px;
+}
+
+html.flat-theme [data-ui="toast"] > div:first-child + div {
+  height: 2px;
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui="toast"] .toast-progress {
+  background-color: rgb(var(--ui-line-strong));
+}
+
+html.flat-theme [data-ui="toast-stack"] > [data-ui="toast"] + [data-ui="toast"] {
+  margin-top: 8px;
+}
+
+html.flat-theme [data-ui="toast-stack"] > [data-ui="toast"]:is([class~="translate-x-full"]) {
+  --tw-translate-x: 0px;
+  --tw-translate-y: -4px;
+}
+
+html.flat-theme [data-ui="toast-stack"] > [data-ui="toast"]:is([class~="duration-300"], [class~="duration-200"]) {
+  transition-duration: var(--ui-duration-slide);
+  transition-timing-function: var(--ui-ease-out);
+}
+
+/* ================================================================== 6 · announcements (bell list, detail, popup) */
+
+/* 6.1 The three announcement panels read as the reference's Modal: ink scrim (3.1), surface panel, 1px line, radius 8,
+   overlay shadow; the gradient header, decorative blobs and glowing tiles go (decision D4: no decorative colour). */
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-overlay);
+  --tw-ring-shadow: 0 0 #0000;
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) .ui-decor {
+  display: none;
+}
+
+/* header strip: surface, 14/18 (list) or 18/18 (detail, popup), structural line */
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child {
+  padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child {
+  padding-top: 18px;
+  padding-bottom: 16px;
+}
+
+/* the glowing gradient tiles -> the reference's 28px icon square (1px line, ink 3% fill, ink 60% glyph) */
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div)[class~="rounded-lg"][class~="bg-gradient-to-br"],
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div)[class~="rounded-xl"][class~="bg-gradient-to-br"] {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-ink) / 0.03);
+  color: rgb(var(--ui-ink) / 0.6);
+  box-shadow: none;
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div)[class~="bg-gradient-to-br"] svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* titles: the list header 14/600 (Modal), the announcement itself 17/600 tight (panel title) */
+html.flat-theme [data-ui="announcement-list"] > div:first-child h2 {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child h2 {
+  margin-bottom: 6px;
+  font-size: 17px;
+  line-height: 25.5px;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(p, time, div[class~="text-sm"]) {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:first-child p > span,
+html.flat-theme.dark [data-ui="announcement-list"] > div:first-child p > span {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child svg[class~="h-4"] {
+  width: 13px;
+  height: 13px;
+}
+
+/* chips: "unread" and the category label become the reference's small mono pills; pulsing rings stop (the text says
+   it) */
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is([class~="bg-gradient-to-r"], [class~="bg-blue-100"]) {
+  gap: 5px;
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  line-height: 15.75px;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  box-shadow: none;
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span[class~="bg-blue-100"]:not(:has(> span)) {
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is([class~="bg-gradient-to-r"], [class~="bg-blue-100"]) > span[class~="relative"] {
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is([class~="bg-gradient-to-r"], [class~="bg-blue-100"]) > span[class~="relative"] > span {
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) [class~="animate-ping"] {
+  display: none;
+}
+
+/* header buttons: close = the Modal's 28px bordered close; "mark all read" = the default button */
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"]) > div:first-child button:last-child {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-muted));
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"]) > div:first-child button:last-child:hover,
+html.flat-theme.dark :is([data-ui="announcement-list"], [data-ui="announcement-detail"]) > div:first-child button:last-child:hover {
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"]) > div:first-child button:last-child svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:first-child button:not(:last-child) {
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--ui-control-h);
+  padding: 0 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+  box-shadow: none;
+}
+
+/* list rows: a 1px structural separator, 12/18 inset, hover = the table row hover; the unread bar and glowing tile
+   give way to an accent status dot tile */
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] {
+  gap: 12px;
+  min-height: 0 !important;
+  padding: 12px var(--ui-dialog-x);
+  border-color: rgb(var(--ui-line));
+  background: transparent;
+  cursor: pointer;
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"]:hover,
+html.flat-theme.dark [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"]:hover {
+  background: rgb(var(--ui-hover));
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div[class~="absolute"] {
+  display: none;
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:first-child {
+  width: 28px;
+  height: 28px;
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:first-child > div {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-ink) / 0.03);
+  color: rgb(var(--ui-ink) / 0.6);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:first-child > div[class~="bg-gradient-to-br"] {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  background: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:first-child svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] h3 {
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] time {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:nth-child(2) > div:last-child svg {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-faint));
+}
+
+/* the empty and loading states: the reference's empty state (14/500 ink-soft, 13 muted), neutral glyph */
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > div[class~="relative"] > div:first-child {
+  width: 40px;
+  height: 40px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > div[class~="relative"] > div:first-child svg {
+  width: 18px;
+  height: 18px;
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > div[class~="relative"] > div:last-child {
+  display: none;
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > p:first-of-type {
+  font-size: 14px;
+  font-weight: 500;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > p + p {
+  font-size: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="announcement-list"] div[class~="animate-spin"][class~="rounded-full"] {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+  border-color: rgb(var(--ui-line-strong));
+  border-top-color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="announcement-list"] div[class~="animate-pulse"][class~="rounded-full"] {
+  display: none;
+}
+
+/* body: the reference's docs article column; the gradient rule beside the text goes */
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:nth-child(2) {
+  padding: 20px var(--ui-dialog-x) 24px;
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:nth-child(2) > div > div[class~="absolute"] {
+  display: none;
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:nth-child(2) > div > div[class~="pl-6"] {
+  padding-left: 0;
+}
+
+/* footer: the dialog footer (12/18, structural line, no tint); close = default button, "mark read" = primary ink */
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child {
+  padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
+  border-top: 1px solid rgb(var(--ui-line));
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child div[class~="text-xs"] {
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child div[class~="text-xs"] svg {
+  width: 13px;
+  height: 13px;
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: var(--ui-control-h);
+  padding: 0 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+  box-shadow: none;
+  transform: none;
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:hover,
+html.flat-theme.dark :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:hover {
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:is([class~="bg-gradient-to-r"]),
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:is([class~="bg-gradient-to-r"]):hover {
+  border-color: rgb(var(--ui-ink));
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* 6.2 Markdown inside announcements: the reference's docs article (REF §8.16): 13.5/1.625 muted text, 17/600 H2 on 40 /
+   12, links ink underlined (offset 2), strong 500 ink, disc lists at 20px with muted markers, mono 12.5 code without a
+   fill, code blocks and tables on the card frame (radius 8, 1px line), a neutral call-out for quotes, no shadows. */
+html.flat-theme .markdown-body {
+  font-size: 13.5px;
+  line-height: 1.625;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .markdown-body :is(h1, h2, h3, h4) {
+  margin: 28px 0 10px;
+  padding: 0;
+  border: 0;
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+html.flat-theme .markdown-body > :is(h1, h2, h3, h4):first-child {
+  margin-top: 0;
+}
+
+html.flat-theme .markdown-body h1 {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+html.flat-theme .markdown-body h2 {
+  font-size: 17px;
+  line-height: 25.5px;
+}
+
+html.flat-theme .markdown-body h3 {
+  font-size: 15px;
+  line-height: 22.5px;
+  letter-spacing: 0;
+}
+
+html.flat-theme .markdown-body h4 {
+  font-size: 13.5px;
+  line-height: 21px;
+  letter-spacing: 0;
+}
+
+html.flat-theme .markdown-body p {
+  margin: 0 0 16px;
+  line-height: 1.625;
+}
+
+html.flat-theme .markdown-body a {
+  font-weight: 400;
+  color: rgb(var(--ui-ink));
+  text-decoration: underline;
+  text-decoration-color: rgb(var(--ui-line-focus));
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+html.flat-theme .markdown-body a:hover {
+  text-decoration-color: currentColor;
+}
+
+html.flat-theme .markdown-body :is(ul, ol) {
+  margin: 0 0 16px;
+  padding-left: 20px;
+}
+
+html.flat-theme .markdown-body :is(ul, ol) > li + li {
+  margin-top: 6px;
+}
+
+html.flat-theme .markdown-body li {
+  padding-left: 2px;
+  line-height: 1.625;
+}
+
+html.flat-theme .markdown-body li::marker {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme .markdown-body strong {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .markdown-body em {
+  color: inherit;
+}
+
+html.flat-theme .markdown-body code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .markdown-body pre {
+  margin: 16px 0;
+  padding: 16px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme .markdown-body pre code {
+  font-size: 12.5px;
+  line-height: 1.625;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .markdown-body blockquote {
+  margin: 16px 0;
+  padding: 12px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  font-size: 13px;
+  font-style: normal;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .markdown-body blockquote::before {
+  content: none;
+}
+
+html.flat-theme .markdown-body blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+html.flat-theme .markdown-body hr {
+  margin: 24px 0;
+  border: 0;
+  border-top: 1px solid rgb(var(--ui-line));
+}
+
+html.flat-theme .markdown-body table {
+  margin: 16px 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 12.5px;
+}
+
+html.flat-theme .markdown-body :is(th, td) {
+  padding: 8px 12px;
+  border: 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  vertical-align: top;
+  line-height: 1.625;
+}
+
+html.flat-theme .markdown-body tr:last-child td {
+  border-bottom: 0;
+}
+
+html.flat-theme .markdown-body th {
+  background: rgb(var(--ui-subtle));
+  font-weight: 500;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme .markdown-body thead th:first-child {
+  border-top-left-radius: 7px;
+}
+
+html.flat-theme .markdown-body thead th:last-child {
+  border-top-right-radius: 7px;
+}
+
+html.flat-theme .markdown-body tbody tr:hover,
+html.flat-theme.dark .markdown-body tbody tr:hover {
+  background: transparent;
+}
+
+html.flat-theme .markdown-body img {
+  margin: 16px 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  box-shadow: none;
+}
+
+/* ================================================================== 7 · the onboarding tour (driver.js) */
+
+/* 7.1 The popover is a panel: surface, 1px line, radius 8, overlay shadow (the sign-in panel's frame, derived); title
+   17/600 tight ink; text the docs paragraph (13.5/1.625 muted); footer the dialog footer (12/18, structural line, no
+   tint); progress and key hints in Geist Mono; next = primary ink, back = default, skip = ghost; close = 28px ghost.
+   The page dims with the dialog scrim; the highlighted element carries the reference's accent ring (34%). */
+html.flat-theme .driver-popover.theme-tour-popover {
+  border: 1px solid rgb(var(--ui-line)) !important;
+  border-radius: var(--ui-radius-lg) !important;
+  background-color: rgb(var(--ui-surface)) !important;
+  box-shadow: var(--ui-shadow-overlay) !important;
+  color: rgb(var(--ui-ink)) !important;
+  font-family: var(--ui-font) !important;
+}
+
+html.flat-theme.dark .driver-popover.theme-tour-popover {
+  border-color: rgb(var(--ui-line)) !important;
+  background-color: rgb(var(--ui-surface)) !important;
+  color: rgb(var(--ui-ink)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-title {
+  padding: 18px var(--ui-dialog-x) 8px !important;
+}
+
+html.flat-theme .theme-tour-popover :is(.driver-popover-title, .driver-popover-title-text),
+html.flat-theme.dark .theme-tour-popover :is(.driver-popover-title, .driver-popover-title-text) {
+  font-family: var(--ui-font) !important;
+  font-size: 17px !important;
+  line-height: 25.5px !important;
+  font-weight: 600 !important;
+  letter-spacing: -0.025em !important;
+  color: rgb(var(--ui-ink)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-description,
+html.flat-theme.dark .theme-tour-popover .driver-popover-description {
+  padding: 0 var(--ui-dialog-x) 18px !important;
+  font-size: 13.5px !important;
+  line-height: 1.625 !important;
+  color: rgb(var(--ui-muted)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-description :is(strong, b) {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-footer,
+html.flat-theme.dark .theme-tour-popover .driver-popover-footer {
+  padding: var(--ui-dialog-foot-y) var(--ui-dialog-x) !important;
+  border-top: 1px solid rgb(var(--ui-line)) !important;
+  background-color: rgb(var(--ui-surface)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-progress-text,
+html.flat-theme.dark .theme-tour-popover .driver-popover-progress-text {
+  font-family: var(--ui-font-mono) !important;
+  font-size: 11px !important;
+  font-weight: 400 !important;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-label)) !important;
+}
+
+html.flat-theme .theme-tour-popover .footer-shortcuts,
+html.flat-theme.dark .theme-tour-popover .footer-shortcuts {
+  border-left-color: rgb(var(--ui-line)) !important;
+}
+
+html.flat-theme .theme-tour-popover .shortcut-item,
+html.flat-theme.dark .theme-tour-popover .shortcut-item {
+  font-size: 12px !important;
+  color: rgb(var(--ui-muted)) !important;
+}
+
+html.flat-theme .theme-tour-popover .shortcut-item kbd,
+html.flat-theme.dark .theme-tour-popover .shortcut-item kbd {
+  min-width: 18px !important;
+  padding: 0 4px !important;
+  border: 1px solid rgb(var(--ui-line)) !important;
+  border-radius: var(--ui-radius-sm) !important;
+  background-color: rgb(var(--ui-subtle)) !important;
+  box-shadow: none !important;
+  font-family: var(--ui-font-mono) !important;
+  font-size: 10px !important;
+  font-weight: 400 !important;
+  line-height: 16px !important;
+  color: rgb(var(--ui-faint)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-footer button,
+html.flat-theme.dark .theme-tour-popover .driver-popover-footer button {
+  min-height: var(--ui-control-h) !important;
+  padding: 0 12px !important;
+  border: 1px solid rgb(var(--ui-line-strong)) !important;
+  border-radius: var(--ui-radius-md) !important;
+  background-color: rgb(var(--ui-surface)) !important;
+  color: rgb(var(--ui-ink)) !important;
+  box-shadow: none !important;
+  font-family: var(--ui-font) !important;
+  font-size: 13px !important;
+  font-weight: 600 !important;
+  line-height: 19.5px !important;
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-footer :is(.driver-popover-next-btn, .driver-popover-done-btn),
+html.flat-theme.dark .theme-tour-popover .driver-popover-footer :is(.driver-popover-next-btn, .driver-popover-done-btn),
+html.flat-theme .theme-tour-popover .driver-popover-footer :is(.driver-popover-next-btn, .driver-popover-done-btn):hover,
+html.flat-theme.dark .theme-tour-popover .driver-popover-footer :is(.driver-popover-next-btn, .driver-popover-done-btn):hover {
+  border-color: rgb(var(--ui-ink)) !important;
+  background-color: rgb(var(--ui-ink)) !important;
+  color: rgb(var(--ui-on-ink)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-footer :is(button:not(.driver-popover-next-btn, .driver-popover-done-btn, .driver-popover-prev-btn)),
+html.flat-theme.dark .theme-tour-popover .driver-popover-footer :is(button:not(.driver-popover-next-btn, .driver-popover-done-btn, .driver-popover-prev-btn)) {
+  border-color: transparent !important;
+  background-color: transparent !important;
+  color: rgb(var(--ui-muted)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-footer :is(button:not(.driver-popover-next-btn, .driver-popover-done-btn, .driver-popover-prev-btn)):hover,
+html.flat-theme.dark .theme-tour-popover .driver-popover-footer :is(button:not(.driver-popover-next-btn, .driver-popover-done-btn, .driver-popover-prev-btn)):hover {
+  background-color: rgb(var(--ui-subtle)) !important;
+  color: rgb(var(--ui-ink)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-footer button:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus)) !important;
+  outline-offset: 2px !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-close-btn,
+html.flat-theme.dark .theme-tour-popover .driver-popover-close-btn {
+  top: 16px !important;
+  right: 14px !important;
+  width: 28px !important;
+  height: 28px !important;
+  border-radius: var(--ui-radius-md) !important;
+  font-size: 18px !important;
+  color: rgb(var(--ui-muted)) !important;
+}
+
+html.flat-theme .theme-tour-popover .driver-popover-close-btn:hover,
+html.flat-theme.dark .theme-tour-popover .driver-popover-close-btn:hover {
+  background-color: rgb(var(--ui-subtle)) !important;
+  color: rgb(var(--ui-ink)) !important;
+}
+
+html.flat-theme .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: rgb(var(--ui-surface)) !important; }
+html.flat-theme .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: rgb(var(--ui-surface)) !important; }
+html.flat-theme .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: rgb(var(--ui-surface)) !important; }
+html.flat-theme .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: rgb(var(--ui-surface)) !important; }
+
+html.flat-theme.dark .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: rgb(var(--ui-surface)) !important; }
+html.flat-theme.dark .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: rgb(var(--ui-surface)) !important; }
+html.flat-theme.dark .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: rgb(var(--ui-surface)) !important; }
+html.flat-theme.dark .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: rgb(var(--ui-surface)) !important; }
+
+html.flat-theme .driver-overlay path {
+  fill: rgb(10 10 10) !important;
+  opacity: 0.2 !important;
+}
+
+html.flat-theme.dark .driver-overlay path {
+  fill: rgb(0 0 0) !important;
+  opacity: 0.6 !important;
+}
+
+html.flat-theme .driver-active-element {
+  outline: 3px solid rgb(var(--ui-primary) / 0.34) !important;
+  outline-offset: 2px !important;
+  border-radius: var(--ui-radius-md) !important;
+}
diff --git a/frontend/src/styles/console/pages/accounts.css b/frontend/src/styles/console/pages/accounts.css
index 4165ada7dc70..f17d9a65de20 100644
--- a/frontend/src/styles/console/pages/accounts.css
+++ b/frontend/src/styles/console/pages/accounts.css
@@ -1 +1,893 @@
-/* Console theme · page group: accounts and their fork components (owner: the accounts page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
+/* Console theme · page group: accounts (owner: the accounts page agent, A5). Plain CSS after the area files; every
+ * selector starts with html.flat-theme (theme off = upstream) and is narrowed to an accounts hook, so nothing here
+ * reaches another page. Specificity >= 0,2,1: it beats the page utilities, upstream's dark: forms and the scoped
+ * styles of the account components.
+ *
+ * Source: the Experiential Labs console /models page (ui-el ref/console/REF-CONSOLE.md §7.1, §7.4, §7.5, §8.5-§8.9,
+ * §8.12; frames ref-models-default-1440-*, ref-models-selected-1440-*, crops toolbar-row1 / filter-row(-active) /
+ * segmented / compare-tray). Values are the tokens of tokens.css; where the reference falls below our floor the
+ * compliant token is used (REF-CONSOLE §13).
+ *
+ * What this page composes (WAVE1 D6): a two-row toolbar like /models — row 1: search, view switcher, the actions
+ * (refresh, operation history, show API key, auto refresh, more, the bulk menu, add account); row 2: the
+ * classification menu, the filter pills, the route-group select, the active filter chips and the result count. The
+ * bulk bar shows only while accounts are selected, as a tray under the list. Shared looks come from the area files
+ * and are not restated here: buttons, inputs, the switch and the filter pills (style.css recipe block and
+ * controls.css, data-ui="filter-pill"), menus (overlays.css, data-ui="menu" / "menu-item" / "menu-separator"),
+ * tables, badges and the bulk bar's look (data.css, data-ui~="bulk-bar"), the header and the page gutter (shell.css).
+ *
+ * Hooks (data-ui) added for this file — every template line touched is listed in wave1/A5/REPORT.md:
+ *   views/admin/AccountsView.vue          accounts-toolbar, accounts-actions, accounts-count, accounts-list,
+ *                                         accounts-import-results, accounts-bulk-tray
+ *   admin/account/AccountConsoleFilters   account-search, account-filters, filter-pill + filter-count (controls.css
+ *                                         recipe), menu / menu-item (overlays.css recipe), account-filter-option-count,
+ *                                         account-filters-clear
+ *   admin/account/AccountFolderBar        account-folder-menu (variant="menu"), account-folder-count,
+ *                                         account-folder-loading, account-folder-empty
+ *   admin/account/AccountBulkMenu (new)   account-bulk-menu
+ *   admin/account/AccountBulkActionsBar   bulk-bar account-bulk-bar
+ *   admin/account/AccountViewModeSwitcher account-view-switcher
+ * Card grid, compact list and the drawer's content are reached through their existing data-test attributes. */
+
+html.flat-theme {
+  /* the view switcher's segment: 14px glyph, 10px either side; the frame and inset are controls.css' */
+  --accounts-seg-w: 34px;
+}
+
+/* ================================================================== 1 · toolbar (two rows) */
+
+/* One wrapping line of items, 8px apart like /models' toolbar items and 12px between the rows (REF §6, §7.1). The
+   actions container dissolves into the line, so on a narrow screen its buttons wrap one by one after the view
+   switcher (the reference's 390px toolbar), and the filters part always starts row 2. */
+html.flat-theme [data-ui="accounts-toolbar"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 8px;
+  row-gap: 12px;
+}
+
+html.flat-theme [data-ui="accounts-toolbar"] > [data-ui="accounts-actions"] {
+  display: contents;
+}
+
+/* Row 1: the search is the reference's (288 wide from 640px, and it gives way first). Its basis is the smallest
+   width, so row 1 breaks only when even that does not fit (at 1280 the actions leave it about 155px; the reference's
+   minimum is 176), and it grows back to 288 before the free space goes to the gap in front of the actions. */
+html.flat-theme [data-ui="accounts-toolbar"] > [data-ui="account-search"] {
+  flex: 1 1 150px;
+  width: auto;
+  min-width: 150px;
+  max-width: 288px;
+}
+
+html.flat-theme [data-ui="accounts-toolbar"] > [data-ui="account-view-switcher"] {
+  flex: none;
+}
+
+/* The actions sit at the right end of row 1: the first of them (refresh) takes the free space before it. */
+html.flat-theme [data-ui="accounts-actions"] > :first-child {
+  margin-left: auto;
+}
+
+/* Refresh is an icon button: a 30px square. */
+html.flat-theme [data-ui="accounts-actions"] > button.btn:first-child {
+  width: var(--ui-control-h);
+  padding-left: 0;
+  padding-right: 0;
+}
+
+/* Glyphs in the toolbar buttons keep only the button's 8px gap (upstream adds margins for its wider buttons). */
+html.flat-theme [data-ui="accounts-actions"] .btn > svg {
+  margin: 0;
+}
+
+/* 「显示 API Key」 reads like the reference's toolbar checkbox label (12px muted, 6px from the control). */
+html.flat-theme [data-ui="accounts-actions"] > label {
+  gap: 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+/* Row 2: the classification menu, the filter pills, the group select and the active chips on one wrapping line,
+   6px apart (REF §8.6), the result count at its right end. */
+html.flat-theme [data-ui="accounts-toolbar"] > [data-ui="account-filters"] {
+  flex: 1 0 100%;
+  gap: 6px;
+}
+
+/* The route-group select stands among 30px pills: the recipe's house select at the pill height. */
+html.flat-theme [data-ui="account-filters"] select.input {
+  height: var(--ui-control-h);
+  min-height: var(--ui-control-h);
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* Active filter values: removable chips (the reference's value chip: 4px radius, the structural line, subtle fill,
+   12px ink-soft; ink on hover). */
+html.flat-theme [data-ui="account-filters"] [data-test^="account-filter-chip-"] {
+  gap: 4px;
+  height: 24px;
+  max-width: 16rem;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  padding: 0 6px 0 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-ink-soft));
+  transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="account-filters"] [data-test^="account-filter-chip-"]:hover {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="account-filters"] [data-test^="account-filter-chip-"] svg {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+/* 「清除」 all filters: the reference's ghost 「✕ Clear」 (30px, 8px in, 12.5px / 600 muted, ink on hover). */
+html.flat-theme [data-ui="account-filters-clear"] {
+  min-height: var(--ui-control-h);
+  border-radius: var(--ui-radius-md);
+  padding: 0 8px;
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 600;
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="account-filters-clear"]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+/* The result count: 「1,081 models」 in Geist Mono 11 at the right end (REF §8.6), the mono label's grey. */
+html.flat-theme [data-ui="accounts-count"] {
+  margin-left: auto;
+  padding-left: 8px;
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  color: rgb(var(--ui-label));
+}
+
+/* Filter menus (AccountConsoleFilters): the panel and the options are overlays.css' menu; here only the option
+   parts: the list scrolls without upstream's inset, 14px native checkboxes (REF §8.4), counts in Mono 11. */
+html.flat-theme [data-ui="account-filters"] [data-ui="menu"] > div:first-child {
+  padding: 0;
+}
+
+html.flat-theme [data-ui="account-filters"] [data-ui="menu"] > div + div {
+  margin-top: 4px;
+  border-top: 1px solid rgb(var(--ui-line));
+  padding: 4px 0 0;
+}
+
+html.flat-theme [data-ui="account-filters"] [data-ui="menu-item"] > input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  flex-shrink: 0;
+}
+
+/* (counts sit on the rows' hover fill, where the label grey falls to 4.35:1: they take the muted grey) */
+html.flat-theme :is([data-ui="account-filter-option-count"], [data-ui="account-folder-menu"] [data-ui="menu"] [data-ui="account-folder-count"]) {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+/* ================================================================== 2 · classification menu (row 2, first) */
+
+/* The strip above the list became a filter pill that names the active classification and its count; the menu lists
+   every classification with its count and the manage entry. Default state: an idle pill; another classification
+   chosen: the pill's active state (the reference's 「Price 1」 look). */
+html.flat-theme [data-ui="account-folder-menu"] > [data-ui~="filter-pill"] {
+  max-width: 18rem;
+}
+
+html.flat-theme [data-ui="account-folder-menu"] > [data-ui~="filter-pill"] > [data-ui="account-folder-count"] {
+  flex-shrink: 0;
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  line-height: 16px;
+  font-weight: 400;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="account-folder-menu"] > [data-ui~="filter-pill"][data-active="true"],
+html.flat-theme [data-ui="account-folder-menu"] > [data-ui~="filter-pill"][data-active="true"]:hover {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  background-color: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui="account-folder-menu"] > [data-ui~="filter-pill"][data-active="true"] > [data-ui="account-folder-count"] {
+  color: inherit;
+}
+
+html.flat-theme [data-ui="account-folder-loading"] > div {
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="account-folder-empty"] {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+/* ================================================================== 3 · view switcher (row 1) */
+
+/* The reference's SlidingTabs (REF §8.5): the structural line on the surface, radius 8, a 2px inset; an ink thumb
+   (near-white in dark) slides 200ms ease-out to the chosen segment, whose glyph turns on-ink; the others are muted,
+   ink on hover. The segments are the fork's icon buttons (title and aria-label name them): 34 x 30.75, a 14px glyph;
+   the frame is the reference's 36.75px. */
+html.flat-theme [data-ui="account-view-switcher"] {
+  position: relative;
+  isolation: isolate;
+  gap: 0;
+  height: auto;
+  border: 1px solid rgb(var(--ctl-seg-frame, var(--ui-line)));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  padding: var(--ctl-seg-inset, 2px);
+}
+
+html.flat-theme [data-ui="account-view-switcher"]::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  top: var(--ctl-seg-inset, 2px);
+  bottom: var(--ctl-seg-inset, 2px);
+  left: var(--ctl-seg-inset, 2px);
+  width: var(--accounts-seg-w);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-ink));
+  transition: transform var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme [data-ui="account-view-switcher"]:has(> button:nth-child(2)[aria-pressed="true"])::before {
+  transform: translateX(var(--accounts-seg-w));
+}
+
+html.flat-theme [data-ui="account-view-switcher"]:has(> button:nth-child(3)[aria-pressed="true"])::before {
+  transform: translateX(calc(2 * var(--accounts-seg-w)));
+}
+
+html.flat-theme [data-ui="account-view-switcher"]:not(:has(> button[aria-pressed="true"]))::before {
+  opacity: 0;
+}
+
+html.flat-theme [data-ui="account-view-switcher"] > button {
+  width: var(--accounts-seg-w);
+  height: 30.75px;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  box-shadow: none;
+  transition: color var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme [data-ui="account-view-switcher"] > button:hover {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="account-view-switcher"] > button[aria-pressed="true"],
+html.flat-theme [data-ui="account-view-switcher"] > button[aria-pressed="true"]:hover {
+  background-color: transparent;
+  color: rgb(var(--ui-on-ink));
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="account-view-switcher"] > button:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme [data-ui="account-view-switcher"] > button svg {
+  width: 14px;
+  height: 14px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html.flat-theme [data-ui="account-view-switcher"]::before,
+  html.flat-theme [data-ui="account-view-switcher"] > button {
+    transition: none;
+  }
+}
+
+/* ================================================================== 4 · the list and the bulk tray */
+
+/* The table is the card (REF §8.7): no inset around the list. */
+html.flat-theme [data-ui="accounts-list"] {
+  padding: 0;
+}
+
+/* 「选中本次导入结果」: a line at the top of the card, above the table header. */
+html.flat-theme [data-ui="accounts-import-results"] {
+  margin: 0;
+  gap: 8px;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  padding: 8px 16px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+/* The bulk bar appears only while accounts are selected or 「全选所有结果」 is running (v-show on this wrapper keeps its
+   dialogs mounted), as the reference's compare tray (REF §8.12): under the list, centred, 12px off the bottom edge, floating
+   (the popover shadow), taking layout space so the rows above never move. On a phone the list scrolls with the page:
+   the tray sticks to the viewport's bottom edge while the list is in view. The bar's own look is data.css'. */
+html.flat-theme [data-ui="accounts-bulk-tray"] {
+  position: sticky;
+  bottom: 12px;
+  z-index: 20;
+  display: flex;
+  justify-content: center;
+  padding: 8px 12px 12px;
+  pointer-events: none;
+  --ui-bulk-bar-shadow: var(--ui-shadow-popover);
+}
+
+html.flat-theme [data-ui="accounts-bulk-tray"] > [data-ui~="bulk-bar"] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+  width: fit-content;
+  max-width: 100%;
+  margin: 0;
+  pointer-events: auto;
+}
+
+/* The selection summary (count, select page, select all results, clear) stays on one line; the actions wrap
+   beside it, right-aligned. */
+html.flat-theme [data-ui="accounts-bulk-tray"] > [data-ui~="bulk-bar"] > div:first-child {
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui="accounts-bulk-tray"] > [data-ui~="bulk-bar"] > div:last-child {
+  flex: 1 1 0;
+  min-width: min(100%, 20rem);
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+/* ================================================================== 5 · table columns (single-line rows, D5) */
+
+/* data.css draws every table (header, rows, lines, hover, sticky cells); here only what the accounts columns put in
+   their cells, so a row holds one line (42-45px, REF §7.5) and the table scrolls sideways instead: nothing is cut,
+   long values end in an ellipsis with the full text in their title (and in the details drawer). Rows whose usage
+   cell lists route tickets keep one line per ticket. */
+
+/* Selection: a 14px checkbox (REF §8.4) whose 32px hit area overhangs the cell padding: it takes 24px in a row
+   (24 + 2 x 10 + the line = the reference's 45px row) and 20px in the header (the 40px header). */
+html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="select"] label {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  margin: -4px;
+  border-radius: var(--ui-radius-sm);
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="select"] label {
+  margin: -6px -4px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="select"] label:hover {
+  background-color: transparent;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="select"] input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+}
+
+/* Name: the account name (13 / 600 ink, REF's model name) and its e-mail (12px muted) on one line, each ending in an
+   ellipsis with its title. The columns follow upstream's order (select, name, id, platform / type, capacity, status,
+   scheduling, ...), and status and the scheduling switch must be in view without scrolling: the name column takes
+   what is left of the content width once select 44 + id 79 + platform 312 (18rem cap, below, + its padding) +
+   capacity 87 + status 64 + scheduling 64 + the sticky actions 127 are placed (the content is the viewport less the
+   240px sidebar and 2 x 28 gutters; 12px spare), between 12rem and 16rem: 16rem at 1440, about 12rem at 1280. */
+html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="name"] {
+  width: clamp(12rem, calc(100vw - 1086px), 16rem);
+  min-width: clamp(12rem, calc(100vw - 1086px), 16rem);
+  max-width: clamp(12rem, calc(100vw - 1086px), 16rem);
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div {
+  flex-direction: row;
+  align-items: baseline;
+  gap: 8px;
+  width: 100%;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > :first-child {
+  flex: 0 1 auto;
+  min-width: 0;
+  font-weight: 600;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > span + span {
+  flex: 1 1 0;
+  min-width: 3em;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+/* Platform / type: the identity chips and the compact-mode line side by side, in at most 18rem (so the status and
+   scheduling columns after it keep their place): an account whose chips need more (OAuth with plan and privacy, a
+   subscription expiry) moves the compact-mode line, then the later chip groups, to a second line. An API-key
+   account (chips 115 + compact line 88) stays on one line. */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  /* as wide as its content up to the cap, so a table that may shrink its columns (TablePageLayout's mobile mode
+     drops min-width: max-content) does not fold a one-line cell */
+  width: max-content;
+  max-width: 18rem;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] [data-ui="platform-badge"] {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div > div:last-child {
+  white-space: nowrap;
+}
+
+/* Usage: the usage line and the capacity chip side by side; each route ticket on one line (upstream wraps them
+   inside 15rem, three lines per ticket). */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] > div > * {
+  margin-top: 0;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-usage-variant="list"] > div[class~="max-w-[15rem]"] {
+  max-width: none;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-usage-variant="list"] :is(div[class~="mb-0.5"], div[class~="mb-1"]) {
+  margin-bottom: 0;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-usage-variant="list"] > div[class~="max-w-[15rem]"] > div {
+  flex-wrap: nowrap;
+  white-space: nowrap;
+}
+
+/* Classification / route: the two labelled values on one line; the labels are mono labels. */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  max-width: 34rem;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div > * {
+  margin-top: 0;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div > div:first-child {
+  flex: none;
+  flex-wrap: nowrap;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div > div:last-child {
+  min-width: 0;
+  max-width: 18rem;
+}
+
+/* (in a hovered or selected row the label grey falls to 4.12 / 4.43:1: labels inside rows take the muted grey) */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] span[class~="uppercase"][class~="text-[10px]"] {
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-muted));
+}
+
+/* Routing groups: up to four badges and 「+N」 (its popover lists all) on one line. */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="groups"] > div {
+  max-width: none;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="groups"] > div > div:first-child {
+  flex-wrap: nowrap;
+  max-height: none;
+}
+
+/* Capacity, proxy, expiry, today's stats: their stacked parts side by side. */
+html.flat-theme .table-wrapper[data-table="accounts"] td:is([data-column="capacity"], [data-column="proxy"], [data-column="expires_at"]) > div {
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="today_stats"] > div > div {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="today_stats"] > div > div > * {
+  margin-top: 0;
+}
+
+/* Row actions: 28px icon buttons (REF §8.3: muted, the subtle fill and ink on hover; delete turns danger), 15px
+   glyphs. With a mouse or trackpad the label is kept for screen readers and shows as a tip left of the button on
+   hover and keyboard focus (the behaviour of B2.1 for the other tables); touch keeps the visible labels. */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"]:is(:hover, :focus-within) {
+  z-index: 30;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] > div {
+  gap: 2px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] {
+  position: relative;
+  min-width: 28px;
+  min-height: 28px;
+  margin-block: -2px;
+  justify-content: center;
+  border-radius: var(--ui-radius-md);
+  padding: 0 6px;
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"][class~="hover:text-red-600"]:hover {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"]:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] > svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* touch: the visible label beside its glyph (one line, so the row stays 45px) */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] {
+  flex-direction: row;
+  gap: 4px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] > span[class~="text-xs"] {
+  font-size: 12px;
+  line-height: 18px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] {
+    width: 28px;
+    padding: 0;
+  }
+
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] > span[class~="text-xs"] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* the tip: placed left of the button and centred on it, no delay; its bubble look (REF §8.9) is overlays.css' */
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
+    top: 50%;
+    right: calc(100% + 6px);
+    z-index: 1;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+}
+
+/* ================================================================== 6 · card grid and compact list */
+
+/* Shared parts of the two other views: the 14px checkbox with its 32px hit area (as in the table), the account id
+   in Geist Mono 11 (the reference's meta text), the mono labels, and the icon buttons (REF §8.3: 28px, radius 6,
+   muted; the subtle fill and ink on hover). */
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) label:has(> input[type="checkbox"]) {
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  min-height: 32px;
+  margin: -4px;
+  border-radius: var(--ui-radius-sm);
+}
+
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) label:has(> input[type="checkbox"]):hover {
+  background-color: transparent;
+}
+
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) label > input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+}
+
+/* (ids and labels sit on hovered and selected fills too: the muted grey keeps 4.5:1 there) */
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) span[class~="font-mono"][class~="text-[10px]"] {
+  font-size: 11px;
+  line-height: 16.5px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) :is(div, span)[class~="uppercase"][class~="text-[10px]"] {
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) .icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) .icon-button:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) .icon-button:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) .icon-button svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* Empty: the reference's empty state (a dashed 1px control-outline box, 240px, the message 14 / 500 ink-soft). */
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) > div[class~="min-h-52"] {
+  min-height: 240px;
+  margin: 16px;
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme :is([data-test="account-card-grid"], [data-test="account-compact-list"]) > div[class~="min-h-52"] > span {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+/* Cards: the reference's card (surface, the structural line, radius 8, 14px inset); hover shows the control outline
+   (REF §8.11 option cards), no tint and no lift; a selected card keeps a visible state: the accent at 40 % as its
+   edge and the accent tint (the selection colour of the table rows). */
+html.flat-theme [data-test="account-card-grid"] article {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  padding: 14px;
+  transition: border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-test="account-card-grid"] article:hover {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-test="account-card-grid"] article[class~="border-l-primary-500"],
+html.flat-theme [data-test="account-card-grid"] article[class~="border-l-primary-500"]:hover {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  border-left-width: 1px;
+  background-color: rgb(var(--ui-primary-soft));
+}
+
+html.flat-theme [data-test="account-card-grid"] article > div:is([data-test="account-card-usage"], [data-test="account-card-taxonomy"]) {
+  border-top-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-test="account-card-grid"] > div[class~="grid"] > div[class~="animate-pulse"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle));
+}
+
+/* Compact list: rows like the table's (the structural line between rows, the hover fill, 10 x 16 cells); a selected
+   row takes the table's selection tint instead of upstream's accent edge. */
+html.flat-theme [data-test="account-compact-list"] > div[class~="grid"] {
+  border-bottom-color: rgb(var(--ui-line));
+  padding: 10px 16px;
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-test="account-compact-list"] > div[class~="grid"]:hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+html.flat-theme [data-test="account-compact-list"] > div[class~="grid"][class~="border-l-primary-500"],
+html.flat-theme [data-test="account-compact-list"] > div[class~="grid"][class~="border-l-primary-500"]:hover {
+  border-left-width: 0;
+  background-color: rgb(var(--ui-primary-soft));
+}
+
+html.flat-theme [data-test="account-compact-list"] > div[class~="space-y-px"] > div {
+  border-bottom-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-subtle));
+}
+
+/* The identity chips are one row (data.css); in the list's narrow column they wrap instead of running into the usage
+   column. */
+html.flat-theme [data-test="account-compact-list"] [data-ui="platform-badge"] {
+  flex-wrap: wrap;
+}
+
+/* The classification column in two lines, each label beside its values (upstream stacks label, status and folder,
+   then label, groups and proxy on four or five lines). */
+@media (min-width: 1024px) {
+  html.flat-theme [data-test="account-compact-list"] > div[class~="grid"] > div[class~="lg:block"]:has(> div[class~="truncate"]) {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    column-gap: 8px;
+    row-gap: 4px;
+  }
+
+  html.flat-theme [data-test="account-compact-list"] > div[class~="grid"] > div[class~="lg:block"] > div[class~="truncate"] {
+    grid-column: 1 / -1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    margin-top: 0;
+  }
+
+  html.flat-theme [data-test="account-compact-list"] > div[class~="grid"] > div[class~="lg:block"] > div[class~="truncate"] > span:first-child {
+    flex-shrink: 0;
+    margin-right: 0;
+  }
+
+  html.flat-theme [data-test="account-compact-list"] > div[class~="grid"] > div[class~="lg:block"] > div[class~="truncate"] > span:last-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/* ================================================================== 7 · details drawer: the content
+   (the drawer's frame, header and buttons are overlays.css') */
+
+html.flat-theme [data-test="account-details-drawer"] > header + div > section,
+html.flat-theme [data-test="account-details-drawer"] > header + div > [data-test="codex-fingerprint-panel"] {
+  border-color: rgb(var(--ui-line));
+  padding: 16px var(--ui-dialog-x, 18px);
+}
+
+/* Section titles: the mono label (REF §5: section and field labels). */
+html.flat-theme [data-test="account-details-drawer"] > header + div > section > h3,
+html.flat-theme [data-test="account-details-drawer"] > header + div > section > div:first-child > h3 {
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+/* Definition lists: the label muted, the value ink; figures stay Geist Mono tabular. */
+html.flat-theme [data-test="account-details-drawer"] > header + div dl > dt {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header + div dl > dd {
+  color: rgb(var(--ui-ink));
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header + div :is(div, dd)[class~="font-mono"] {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Inner separators and the tag choices of the classification editor (a chip with its 14px checkbox). */
+html.flat-theme [data-test="account-details-drawer"] > header + div :is(div, section)[class~="border-t"] {
+  border-top-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header + div section label[class~="border"]:has(> input[type="checkbox"]) {
+  gap: 6px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  padding: 4px 8px;
+  font-size: 12.5px;
+  line-height: 18.75px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header + div section label > input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+}
+
+/* ================================================================== 8 · phones */
+@media (max-width: 639.98px) {
+  /* The reference's 390px toolbar: the search takes the whole first row. */
+  html.flat-theme [data-ui="accounts-toolbar"] > [data-ui="account-search"] {
+    flex: 1 1 100%;
+    min-width: 0;
+    max-width: none;
+  }
+
+  /* The tray on a phone: the summary wraps on its own line and the actions stay one row that scrolls sideways, so
+     the tray keeps to about two lines at the bottom edge instead of covering a quarter of the screen. */
+  html.flat-theme [data-ui="accounts-bulk-tray"] {
+    padding-inline: 8px;
+  }
+
+  html.flat-theme [data-ui="accounts-bulk-tray"] > [data-ui~="bulk-bar"] {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  html.flat-theme [data-ui="accounts-bulk-tray"] > [data-ui~="bulk-bar"] > div:first-child {
+    flex-wrap: wrap;
+    white-space: normal;
+  }
+
+  html.flat-theme [data-ui="accounts-bulk-tray"] > [data-ui~="bulk-bar"] > div:last-child {
+    flex: none;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    min-width: 0;
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  html.flat-theme [data-ui="accounts-bulk-tray"] > [data-ui~="bulk-bar"] > div:last-child > * {
+    flex-shrink: 0;
+  }
+}
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index b00e4444d99c..921219815581 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -1 +1,2359 @@
 /* Console theme · page group: settings, ops and the public pages (owner: the settings, ops and public page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
+
+/* public: sign-in, sign-up and password pages (AuthLayout), home, legal documents, 404 and key usage.
+ * Owner: wave 1 A6. Source: the reference console's /signin (artifacts/tmp/ui-el/ref/public/REF-PUBLIC.md §1) for
+ * the auth pages; the marketing site's structure (§2: top bar, hairline lattice, plain page) drawn with the console
+ * tokens and Geist for home, legal, 404 and key usage. No brand element, logo or copy of theirs.
+ *
+ * Template hooks (upstream templates otherwise unchanged):
+ *   components/layout/AuthLayout.vue:2      data-ui="auth-layout" (page root)
+ *   components/layout/AuthLayout.vue:26,70  <AuthPixelGrid /> and its import (fork component, the pixel-grid
+ *                                           background; renders nothing while the theme is off)
+ *   components/layout/AuthLayout.vue:29     data-ui="auth-column" (the content column)
+ *   views/HomeView.vue:97                   data-ui="home" (default home root; the compact preset keeps upstream's
+ *                                           data-testid="compact-home")
+ *   views/public/LegalDocumentView.vue:2    data-ui="legal"
+ *   views/NotFoundView.vue:4                data-ui="not-found"
+ *   views/KeyUsageView.vue:2                data-ui="key-usage"
+ * 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). */
+
+html.flat-theme {
+  /* the reference's small mono text: field labels and text buttons 10/15 (Chinese 11/16, as the mono label) */
+  --pub-mono-size: 10px;
+  --pub-mono-leading: 15px;
+  /* Text on the sign-in background. The pixel grid can sit behind it (its faintest step is #f8f8f8), where the
+     mono-label grey #737373 reads 4.47:1; muted #6c6c6c reads 4.84:1 there. Dark: the label grey holds (6.5:1). */
+  --pub-label: var(--ui-muted);
+  /* The outline of the sign-in fields: the reference's structural line (#ededed). Each field is identified by its
+     label above and its placeholder inside (the console fields' rule: A2 recipe + behaviour B3.2, which still draws
+     the 3:1 form-control line on an empty field without a visible placeholder); focus draws the accent edge. */
+  --pub-field-line: var(--ui-line);
+}
+
+html.flat-theme:lang(zh) {
+  --pub-mono-size: 11px;
+  --pub-mono-leading: 16px;
+}
+
+html.flat-theme.dark {
+  --pub-label: var(--ui-label);
+}
+
+/* ------------------------------------------------------------------ auth · page and background */
+html.flat-theme [data-ui="auth-layout"] {
+  padding: clamp(24px, 6vh, 48px) 0;
+  background-color: rgb(var(--ui-canvas));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="auth-layout"] > div[class~="bg-gradient-to-br"] {
+  background: rgb(var(--ui-canvas));
+}
+
+html.flat-theme [data-ui="auth-layout"] > .ui-decor {
+  display: none;
+}
+
+/* The pixel grid (components/layout/AuthPixelGrid.vue): ink squares at 40 % over the canvas. */
+html.flat-theme [data-ui="auth-layout"] > .auth-pixel-grid {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  opacity: 0.4;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="auth-layout"] > .auth-pixel-grid > canvas {
+  display: block;
+}
+
+/* the reference's 400px column with 24px sides (352px of content), no card */
+html.flat-theme [data-ui="auth-column"] {
+  max-width: 400px;
+  padding: 0 24px;
+}
+
+/* brand: a 44px ink tile (radius 12) with the site logo, then the site name as a mono wordmark; the site subtitle
+   sits under them as a mono caption */
+html.flat-theme [data-ui="auth-column"] > div[class~="mb-8"] {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  column-gap: 12px;
+  margin-bottom: 24px;
+}
+
+html.flat-theme [data-ui="auth-column"] > div[class~="mb-8"] > div {
+  flex: none;
+  width: 44px;
+  height: 44px;
+  margin: 0;
+  border-radius: var(--ui-radius-xl);
+  background-color: rgb(var(--ui-ink));
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="auth-column"] > div[class~="mb-8"] > h1[class~="text-gradient"] {
+  min-width: 0;
+  margin: 0;
+  overflow-wrap: anywhere;
+  font: 600 15px/22.5px var(--ui-font-mono);
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  text-align: left;
+  color: rgb(var(--ui-muted));
+  -webkit-text-fill-color: currentColor;
+  background: none;
+}
+
+html.flat-theme [data-ui="auth-column"] > div[class~="mb-8"] > p {
+  flex-basis: 100%;
+  margin-top: 12px;
+  font: 400 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="auth-column"] > [class~="card-glass"] {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+/* below the column: the mode link row (register / sign-in) and the copyright line */
+html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] {
+  margin-top: 22px;
+  font: 400 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] p {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] :is(a, button) {
+  margin-left: 4px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+  text-decoration: none;
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] :is(a, button):hover {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+html.flat-theme [data-ui="auth-column"] > div[class~="mt-8"] {
+  margin-top: 40px;
+  font: 400 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+/* ------------------------------------------------------------------ auth · title and rhythm */
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] > [class~="space-y-6"] > div[class~="text-center"]:first-child > h2 {
+  font: 600 28px/42px var(--ui-font);
+  letter-spacing: -0.025em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] > [class~="space-y-6"] > div[class~="text-center"]:first-child > p {
+  margin-top: 2px;
+  font: 400 14px/20px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] > [class~="space-y-6"] > div[class~="text-center"]:first-child > p > span {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+/* header -> content 40px (the reference's mb-10) */
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] > [class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 40px;
+}
+
+/* fields 16px apart; the primary button 40px below the last field (the reference's collapsed captcha slot + mt-2) */
+html.flat-theme [data-ui="auth-column"] form[class~="space-y-5"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 16px;
+}
+
+html.flat-theme [data-ui="auth-column"] form[class~="space-y-5"] > button[type="submit"]:not([hidden]) {
+  margin-top: 40px;
+}
+
+/* the third-party block: "OR" divider 24px below the primary button, buttons 24px below the divider, 12px apart */
+html.flat-theme [data-ui="auth-column"] form[class~="space-y-5"] > div[class~="space-y-3"]:not([hidden]),
+html.flat-theme [data-ui="auth-column"] [class~="space-y-6"] > :not([hidden]) ~ div[class~="space-y-3"]:not([hidden]) {
+  margin-top: 24px;
+  padding-top: 0;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="space-y-3"] > div[class~="gap-3"]:first-child + :not([hidden]) {
+  margin-top: 24px;
+}
+
+/* ------------------------------------------------------------------ auth · fields */
+html.flat-theme [data-ui="auth-column"] label.input-label {
+  display: block;
+  margin-bottom: 8px;
+  font: 600 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  text-align: left;
+  color: rgb(var(--pub-label));
+}
+
+html.flat-theme [data-ui="auth-column"] label.input-label > span {
+  margin-left: 6px;
+  font-weight: 400;
+  letter-spacing: 0.06em;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="auth-column"] .input {
+  height: 42px;
+  padding: 10px 14px;
+  border: 1px solid rgb(var(--pub-field-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-canvas));
+  color: rgb(var(--ui-ink));
+  font: 400 14px/20px var(--ui-font);
+  letter-spacing: normal;
+  box-shadow: none;
+  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-column"] .input::placeholder {
+  color: rgb(var(--ui-faint));
+  opacity: 1;
+}
+
+/* focus: the console's accent edge (2px: the border plus a 1px inset; controls.css 3.1), where the reference only
+   darkens the hairline (1.26:1) */
+html.flat-theme [data-ui="auth-column"] .input:focus {
+  border-color: rgb(var(--ui-focus));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme [data-ui="auth-column"] .input:disabled {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+  cursor: not-allowed;
+}
+
+html.flat-theme [data-ui="auth-column"] .input:is(.input-error, [class~="border-red-500"]) {
+  border-color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui="auth-column"] .input:is(.input-error, [class~="border-red-500"]):focus {
+  border-color: rgb(var(--ui-danger));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui="auth-column"] .input[class~="border-green-500"] {
+  border-color: rgb(var(--ui-success));
+}
+
+html.flat-theme [data-ui="auth-column"] .input[class~="border-green-500"]:focus {
+  border-color: rgb(var(--ui-success));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-success));
+}
+
+/* room for the show-password toggle and the code-check marks inside the field */
+html.flat-theme [data-ui="auth-column"] .input:is([class~="pr-11"], [class~="pr-10"]) {
+  padding-right: 44px;
+}
+
+/* the leading glyphs (mail, lock, key, gift) are decoration; the reference's fields carry none */
+html.flat-theme [data-ui="auth-column"] div[class~="relative"] > div[class~="pointer-events-none"][class~="left-0"] {
+  display: none;
+}
+
+/* the check marks and the spinner of the invitation / promo code fields */
+html.flat-theme [data-ui="auth-column"] div[class~="relative"] > div[class~="right-0"][class~="pr-3.5"] svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* show / hide password: a 36px target inside the field, the reference's 15px eye */
+html.flat-theme [data-ui="auth-column"] div[class~="relative"] > button[class~="absolute"][class~="right-0"] {
+  top: 3px;
+  right: 3px;
+  bottom: auto;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  justify-content: center;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="relative"] > button[class~="absolute"][class~="right-0"]:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="relative"] > button[class~="absolute"][class~="right-0"]:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: -2px;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="relative"] > button[class~="absolute"][class~="right-0"] svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* hints under a field (password rule, code hint) */
+html.flat-theme [data-ui="auth-column"] .input-hint {
+  margin-top: 6px;
+  font: 400 12px/18px var(--ui-font);
+  text-align: left;
+  color: rgb(var(--ui-muted));
+}
+
+/* the verification code: mono digits in the standard 42px field */
+html.flat-theme [data-ui="auth-column"] input#code.input {
+  font: 500 15px/20px var(--ui-font-mono);
+  letter-spacing: 0.3em;
+  text-align: left;
+}
+
+/* ------------------------------------------------------------------ auth · buttons */
+/* primary: the reference's 50px ink pill (hover ink 85 %, disabled 50 %); its leading glyph is dropped, the loading
+   spinner stays */
+html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary {
+  display: flex;
+  width: 100%;
+  height: 50px;
+  padding: 14px 24px;
+  gap: 8px;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+  font: 600 14px/20px var(--ui-font);
+  letter-spacing: -0.025em;
+  box-shadow: none;
+  transform: none;
+  transition: background-color var(--ui-duration) var(--ui-ease), opacity var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary:hover:not(:disabled) {
+  background: rgb(var(--ui-ink) / 0.85);
+}
+
+html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary:disabled {
+  opacity: 0.5;
+}
+
+html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary > svg.lucide {
+  display: none;
+}
+
+html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary > svg[class~="animate-spin"] {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+  color: currentColor;
+}
+
+/* secondary (third-party sign-in, passkey, 2FA cancel): 42px, control outline, surface, 14/600, 18px marks; hover
+   darkens the outline (ink 25 %) */
+html.flat-theme [data-ui="auth-column"] .btn.btn-secondary {
+  height: 42px;
+  min-height: 42px;
+  padding: 10px 16px;
+  gap: 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font: 600 14px/20px var(--ui-font);
+  box-shadow: none;
+  transform: none;
+  transition: border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-column"] .btn.btn-secondary:hover:not(:disabled) {
+  border-color: rgb(var(--ui-ink) / 0.25);
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="auth-column"] .btn.btn-secondary > span {
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="auth-column"] .btn.btn-secondary > svg {
+  width: 18px;
+  height: 18px;
+  margin: 0;
+}
+
+html.flat-theme [data-ui="auth-column"] .btn.btn-secondary > svg.lucide {
+  width: 16px;
+  height: 16px;
+}
+
+/* the LinuxDo mark carries its 20px size inline: drawn at 18px */
+html.flat-theme [data-ui="auth-column"] .btn.btn-secondary > svg.icon {
+  margin: 0;
+  transform: scale(0.9);
+}
+
+/* GitHub / Google side by side upstream: stacked full width as in the reference */
+html.flat-theme [data-ui="auth-column"] div[class~="grid"][class~="gap-3"] {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 12px;
+}
+
+html.flat-theme [data-ui="auth-column"] :is(.btn, a, button):focus {
+  box-shadow: none;
+}
+
+/* keyboard focus: the console's 2px accent outline 2px out (controls.css 1; the reference's native ring disappears
+   on its own ink button) */
+html.flat-theme [data-ui="auth-column"] :is(.btn, a, button):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme [data-ui="auth-column"] .btn:active {
+  transform: none;
+}
+
+/* "OR": hairlines and the mono word between them */
+html.flat-theme [data-ui="auth-column"] div[class~="h-px"][class~="flex-1"] {
+  background-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="h-px"][class~="flex-1"] + span {
+  font: 600 11px/16.5px var(--ui-font-mono);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+/* text buttons: forgot password, back to sign-in, request a new link, resend code, back to sign-up (mono,
+   uppercase, muted; ink on hover) */
+html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-between"] {
+  margin-top: 10px;
+}
+
+/* no forgot-password link (password reset off, backend mode): the empty row takes no room */
+html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-between"]:not(:has(a)) {
+  display: none;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-between"] > a,
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] a[class~="inline-flex"][class~="text-primary-600"],
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] form > div[class~="text-center"] > button,
+html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: 0;
+  font: 400 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+  text-decoration: none;
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-between"] > a:hover,
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] a[class~="inline-flex"][class~="text-primary-600"]:hover,
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] form > div[class~="text-center"] > button:hover:not(:disabled),
+html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] > button:hover {
+  color: rgb(var(--ui-ink));
+  text-decoration: none;
+}
+
+html.flat-theme [data-ui="auth-column"] [class~="card-glass"] a[class~="inline-flex"][class~="text-primary-600"] svg,
+html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] > button svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* ------------------------------------------------------------------ auth · notices and states */
+/* agreement, checkbox mode: native 14px box in the accent, 12.5px line, document links in ink, underlined */
+html.flat-theme [data-ui="auth-column"] #login-agreement-consent {
+  width: 14px;
+  height: 14px;
+  margin-top: 2px;
+}
+
+html.flat-theme [data-ui="auth-column"] #login-agreement-consent + div > p {
+  font: 400 12.5px/18px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="auth-column"] #login-agreement-consent + div label {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="auth-column"] #login-agreement-consent + div a {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+  text-decoration: underline;
+  text-decoration-color: rgb(var(--ui-line-focus));
+  text-underline-offset: 3px;
+  transition: text-decoration-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-column"] #login-agreement-consent + div a:hover {
+  text-decoration-color: currentColor;
+}
+
+/* agreement not accepted yet (modal mode): the reference's notice box (subtle fill, hairline, 13px ink) with a
+   small default button */
+html.flat-theme [data-ui="auth-column"] div[class~="border-primary-100"][class~="p-3"] {
+  padding: 10px 12px 10px 16px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="border-primary-100"][class~="p-3"] p[class~="font-medium"] {
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="border-primary-100"][class~="p-3"] p[class~="mt-1"] {
+  margin-top: 2px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="border-primary-100"][class~="p-3"] svg {
+  width: 15px;
+  height: 15px;
+  margin-top: 2px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="border-primary-100"][class~="p-3"] button {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font: 600 12px/18px var(--ui-font);
+  transition: border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="border-primary-100"][class~="p-3"] button:hover {
+  border-color: rgb(var(--ui-ink) / 0.25);
+  background: rgb(var(--ui-surface));
+}
+
+/* sign-up closed, session expired: the notice box in the warning colours */
+html.flat-theme [data-ui="auth-column"] div[class~="border-amber-200"][class~="p-4"] {
+  padding: 10px 16px;
+  border: 1px solid rgb(var(--ui-warning) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-warning-soft));
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="border-amber-200"][class~="p-4"] :is(p, div[class~="text-sm"]) {
+  font-size: 13px;
+  line-height: 19.5px;
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="border-amber-200"][class~="p-4"] svg {
+  width: 15px;
+  height: 15px;
+  margin-top: 2px;
+  color: rgb(var(--ui-warning));
+}
+
+/* code sent (email verification) and the inline code checks: the notice box in the success colours */
+html.flat-theme [data-ui="auth-column"] div[class~="border-green-200"][class~="p-4"],
+html.flat-theme [data-ui="auth-column"] div[class~="bg-green-50"][class~="px-3"][class~="py-2"] {
+  padding: 10px 16px;
+  border: 1px solid rgb(var(--ui-success) / 0.25);
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-success-soft));
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="border-green-200"][class~="p-4"] p,
+html.flat-theme [data-ui="auth-column"] div[class~="bg-green-50"][class~="px-3"][class~="py-2"] span {
+  font-size: 13px;
+  line-height: 19.5px;
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme [data-ui="auth-column"] div:is([class~="border-green-200"][class~="p-4"], [class~="bg-green-50"][class~="px-3"]) svg {
+  width: 15px;
+  height: 15px;
+  color: rgb(var(--ui-success));
+}
+
+/* result states (reset link sent, password reset, link invalid): a compact status box - the status colour on the
+   glyph and the outline, the text in ink and muted */
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"]:is([class~="bg-green-50"], [class~="bg-amber-50"]) {
+  padding: 20px 20px 18px;
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"][class~="bg-green-50"] {
+  border-color: rgb(var(--ui-success) / 0.25);
+  background: rgb(var(--ui-success-soft));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"][class~="bg-amber-50"] {
+  border-color: rgb(var(--ui-warning) / 0.3);
+  background: rgb(var(--ui-warning-soft));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"] > div {
+  gap: 12px;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"] div[class~="rounded-full"] {
+  width: 36px;
+  height: 36px;
+  background: rgb(var(--ui-surface));
+  box-shadow: 0 0 0 1px rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"] div[class~="rounded-full"] svg {
+  width: 17px;
+  height: 17px;
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"][class~="bg-green-50"] div[class~="rounded-full"] svg {
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"][class~="bg-amber-50"] div[class~="rounded-full"] svg {
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"] h3 {
+  font: 600 15px/22px var(--ui-font);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="auth-column"] div[class~="rounded-xl"][class~="p-6"] h3 + p {
+  margin-top: 4px;
+  font: 400 13px/19.5px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+/* ------------------------------------------------------------------ auth · 2FA dialog (LoginView's sibling) */
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="inset-0"][class~="z-50"] > div > div[class~="fixed"][class~="inset-0"] {
+  background: rgb(var(--ui-scrim));
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="relative"][class~="max-w-md"] {
+  max-width: 400px;
+  padding: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-overlay);
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] > div[class~="mb-6"][class~="text-center"] {
+  margin-bottom: 24px;
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] div[class~="rounded-full"][class~="h-12"] {
+  width: 36px;
+  height: 36px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] div[class~="rounded-full"][class~="h-12"] svg {
+  width: 17px;
+  height: 17px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] h3 {
+  margin-top: 16px;
+  font: 600 19px/26px var(--ui-font);
+  letter-spacing: -0.025em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] h3 + p {
+  margin-top: 6px;
+  font: 400 13px/19.5px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] h3 + p + p {
+  margin-top: 4px;
+  font: 500 12.5px/18px var(--ui-font-mono);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] input[maxlength="1"] {
+  width: 42px;
+  height: 46px;
+  border: 1px solid rgb(var(--ui-control-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-canvas));
+  color: rgb(var(--ui-ink));
+  font: 500 18px/24px var(--ui-font-mono);
+  box-shadow: none;
+  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] input[maxlength="1"]:focus {
+  border-color: rgb(var(--ui-focus));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] .btn.btn-secondary {
+  height: 42px;
+  padding: 10px 16px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font: 600 14px/20px var(--ui-font);
+  box-shadow: none;
+  transform: none;
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] .btn.btn-secondary:hover:not(:disabled) {
+  border-color: rgb(var(--ui-ink) / 0.25);
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="auth-layout"] ~ div[class~="fixed"][class~="z-50"] div[class~="max-w-md"] .btn.btn-secondary:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+  box-shadow: none;
+}
+
+/* ------------------------------------------------------------------ auth · agreement dialog (body-level layer) */
+html.flat-theme body > 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 {
+  max-width: 560px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-overlay);
+}
+
+html.flat-theme body > 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 {
+  gap: 14px;
+}
+
+html.flat-theme body > div[class~="z-[140]"] > div > div:first-child span[class~="h-12"] {
+  width: 36px;
+  height: 36px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  box-shadow: none;
+}
+
+html.flat-theme body > 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 {
+  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 {
+  padding: 1px 6px;
+  border-radius: var(--ui-radius-sm);
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+  font: 400 10.5px/15.75px var(--ui-font-mono);
+  letter-spacing: 0.025em;
+}
+
+html.flat-theme body > 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]"] {
+  padding: 16px 20px 20px;
+}
+
+html.flat-theme body > 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: 0.12em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme body > div[class~="z-[140]"] a[class~="min-h-[72px]"] {
+  min-height: 56px;
+  gap: 10px;
+  padding: 12px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-subtle) / 0.6);
+  box-shadow: none;
+  transform: none;
+  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 {
+  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 {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-ink) / 0.03);
+  color: rgb(var(--ui-ink-soft));
+  box-shadow: none;
+}
+
+html.flat-theme body > 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 {
+  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 {
+  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 {
+  color: rgb(var(--ui-ink));
+  background: none;
+}
+
+html.flat-theme body > 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 {
+  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 {
+  height: 38px;
+  padding: 0 16px;
+  border-radius: var(--ui-radius-md);
+  font: 600 14px/20px var(--ui-font);
+  box-shadow: none;
+  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 {
+  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 {
+  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 {
+  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 {
+  background: rgb(var(--ui-ink) / 0.85);
+}
+
+html.flat-theme body > div[class~="z-[140]"] :is(a, button):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* ------------------------------------------------------------------ public pages · shared structure */
+/* Home, legal documents and key usage share the marketing site's top bar (sticky, 64px, a hairline under it, the
+   canvas at 92 % with a 10px blur), its 1240px content width with a clamp(16px, 3vw, 32px) gutter and its footer
+   (a hairline, mono labels); drawn with the console tokens and Geist. */
+html.flat-theme :is([data-ui="home"], [data-ui="legal"], [data-ui="key-usage"], [data-ui="not-found"]) {
+  --pub-gutter: clamp(16px, 3vw, 32px);
+  --pub-width: 1240px;
+  background: rgb(var(--ui-canvas));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="legal"], [data-ui="key-usage"]) > header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  padding: 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background: rgb(var(--ui-canvas) / 0.92);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="legal"], [data-ui="key-usage"]) > header > :is(nav, div) {
+  max-width: var(--pub-width);
+  height: 64px;
+  margin: 0 auto;
+  padding: 0 var(--pub-gutter);
+  gap: 12px;
+}
+
+/* brand: the site logo at 32px (radius 8) and, where the page prints it, the site name as a mono wordmark */
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > :first-child div[class~="h-10"],
+html.flat-theme [data-ui="legal"] > header > div > a > span[class~="h-10"] {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ui-radius-lg);
+  background: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="key-usage"] > header > nav > a,
+html.flat-theme [data-ui="legal"] > header > div > a:first-child {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui="key-usage"] > header > nav > a > span,
+html.flat-theme [data-ui="legal"] > header > div > a:first-child > span:not([class~="h-10"]) {
+  font: 500 13px/20px var(--ui-font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-ink));
+}
+
+/* header actions: ghost icon buttons (32px, radius 6, muted -> ink on a subtle fill), the language switch */
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > div:last-child {
+  gap: 4px;
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > div:last-child > :is(a, button)[class~="p-2"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  gap: 6px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  font: 500 13px/20px var(--ui-font);
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > div:last-child > :is(a, button)[class~="p-2"]:hover {
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > div:last-child > :is(a, button)[class~="p-2"] svg {
+  width: 16px;
+  height: 16px;
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > div:last-child > div[class~="relative"] > button {
+  height: 32px;
+  padding: 0 8px;
+  gap: 6px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  font: 500 12.5px/18px var(--ui-font-mono);
+  letter-spacing: 0.04em;
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > div:last-child > div[class~="relative"] > button:hover {
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > div:last-child > div[class~="relative"] > button > span[class~="text-base"] {
+  font-size: 12.5px;
+}
+
+/* sign in / console: the console's small ink button (30px, radius 6, 13 / 600) */
+html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"],
+html.flat-theme [data-ui="legal"] > header > div > a[class~="bg-primary-600"] {
+  display: inline-flex;
+  align-items: center;
+  height: 30px;
+  margin-left: 6px;
+  padding: 0 12px;
+  gap: 8px;
+  border: 1px solid rgb(var(--ui-ink));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+  font: 600 13px/19.5px var(--ui-font);
+  box-shadow: none;
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"]:hover,
+html.flat-theme [data-ui="legal"] > header > div > a[class~="bg-primary-600"]:hover {
+  background: rgb(var(--ui-ink) / 0.85);
+}
+
+html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"] > span:not([class~="rounded-full"]) {
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+  color: rgb(var(--ui-on-ink));
+}
+
+/* the signed-in initial: a quiet disc on the ink button */
+html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"] > span[class~="rounded-full"] {
+  width: 18px;
+  height: 18px;
+  background: rgb(var(--ui-on-ink) / 0.18);
+  color: rgb(var(--ui-on-ink));
+  font: 600 10px/18px var(--ui-font-mono);
+}
+
+html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"] > svg {
+  width: 12px;
+  height: 12px;
+  color: rgb(var(--ui-on-ink) / 0.7);
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="legal"], [data-ui="key-usage"], [data-ui="not-found"]) :is(a, button):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* footer: a hairline, the copyright as a mono label on the left, links on the right */
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > footer {
+  padding: 0;
+  border-top: 1px solid rgb(var(--ui-line));
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > footer > div {
+  max-width: var(--pub-width);
+  margin: 0 auto;
+  padding: 24px var(--pub-gutter);
+  justify-content: space-between;
+  gap: 12px 24px;
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > footer p {
+  font: 400 12px/18px var(--ui-font-mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > footer a {
+  font: 400 13px/20px var(--ui-font);
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > footer a:hover {
+  color: rgb(var(--ui-ink));
+}
+
+/* ------------------------------------------------------------------ home */
+/* the marketing site's page: two hairline rails at the content edges, sections split by full-width hairlines, the
+   feature cards as a hairline lattice between the rails; no gradients, orbs or glows. overflow: clip keeps the
+   sticky bar working (overflow: hidden would make the page its own scroller). */
+html.flat-theme [data-ui="home"] {
+  overflow: clip;
+}
+
+html.flat-theme [data-ui="home"] > div:first-child[class~="pointer-events-none"] {
+  display: none;
+}
+
+html.flat-theme :is([data-ui="legal"], [data-ui="key-usage"]) {
+  position: relative;
+}
+
+@media (min-width: 901px) {
+  html.flat-theme :is([data-ui="home"], [data-ui="legal"], [data-ui="key-usage"])::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    z-index: 0;
+    width: min(var(--pub-width), calc(100% - 16px));
+    transform: translateX(-50%);
+    border-inline: 1px solid rgb(var(--ui-line));
+    pointer-events: none;
+  }
+}
+
+html.flat-theme [data-ui="home"] > main {
+  padding: 0;
+}
+
+html.flat-theme [data-ui="home"] > main > div {
+  max-width: var(--pub-width);
+}
+
+/* hero: the site name at 56 / 500, the subtitle as the lead, one ink call to action; the terminal on the right */
+html.flat-theme [data-ui="home"] > main > div > div:first-child {
+  margin-bottom: 0;
+  padding: clamp(72px, 10vh, 112px) var(--pub-gutter) 40px;
+  gap: 48px;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div:first-child h1 {
+  margin-bottom: 20px;
+  font: 500 clamp(40px, 4.4vw, 56px) / 1.05 var(--ui-font);
+  letter-spacing: -0.035em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div:first-child h1 + p {
+  max-width: 34rem;
+  margin-bottom: 32px;
+  font: 400 16px/25px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+@media (max-width: 1023px) {
+  html.flat-theme [data-ui="home"] > main > div > div:first-child h1 + p {
+    margin-inline: auto;
+  }
+}
+
+html.flat-theme [data-ui="home"] > main > div > div:first-child .btn.btn-primary {
+  height: 44px;
+  padding: 0 20px;
+  gap: 10px;
+  border: 1px solid rgb(var(--ui-ink));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+  font: 600 14px/20px var(--ui-font);
+  box-shadow: none;
+  transform: none;
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="home"] > main > div > div:first-child .btn.btn-primary:hover {
+  background: rgb(var(--ui-ink) / 0.85);
+}
+
+html.flat-theme [data-ui="home"] > main > div > div:first-child .btn.btn-primary svg {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+}
+
+/* the terminal: a console code block (surface, hairline, radius 8, a subtle tab bar with a mono label), code in
+   Geist Mono 12.5 in the reference's syntax roles; no tilt, glow or traffic-light colours */
+html.flat-theme [data-ui="home"] .terminal-window {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+  transform: none;
+}
+
+html.flat-theme [data-ui="home"] .terminal-window:hover {
+  transform: none;
+}
+
+html.flat-theme [data-ui="home"] .terminal-header {
+  height: 38px;
+  padding: 0 14px;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="home"] .terminal-buttons {
+  gap: 6px;
+}
+
+html.flat-theme [data-ui="home"] .terminal-buttons span {
+  width: 8px;
+  height: 8px;
+  background: rgb(var(--ui-line-strong));
+}
+
+/* the tab bar is the grouped fill (#f5f5f5), where the label grey reads 4.35:1: muted (4.74:1) */
+html.flat-theme [data-ui="home"] .terminal-title {
+  margin-right: 38px;
+  font: 400 var(--ui-label-size) / var(--ui-label-leading) var(--ui-font-mono);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="home"] .terminal-body {
+  padding: 18px 20px 20px;
+  font: 400 12.5px/24px var(--ui-font-mono);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="home"] .code-prompt {
+  font-weight: 400;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="home"] .code-cmd {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="home"] .code-flag {
+  color: rgb(var(--ui-purple));
+}
+
+html.flat-theme [data-ui="home"] .code-url,
+html.flat-theme [data-ui="home"] .code-response {
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui="home"] .code-comment {
+  font-style: italic;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="home"] .code-success {
+  padding: 1px 6px;
+  border-radius: var(--ui-radius-sm);
+  background: rgb(var(--ui-success-soft));
+  color: rgb(var(--ui-success));
+  font: 600 11px/16px var(--ui-font-mono);
+  letter-spacing: 0.025em;
+}
+
+html.flat-theme [data-ui="home"] .cursor {
+  width: 7px;
+  height: 15px;
+  background: rgb(var(--ui-ink));
+}
+
+/* the three highlights under the hero: mono chips on the content edge */
+html.flat-theme [data-ui="home"] > main > div > div:nth-child(2) {
+  margin-bottom: 0;
+  padding: 0 var(--pub-gutter) clamp(56px, 9vh, 88px);
+  gap: 8px;
+}
+
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui="home"] > main > div > div:nth-child(2) {
+    justify-content: flex-start;
+  }
+}
+
+html.flat-theme [data-ui="home"] > main > div > div:nth-child(2) > div {
+  height: 30px;
+  padding: 0 12px 0 10px;
+  gap: 8px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div:nth-child(2) > div > svg {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div:nth-child(2) > div > span {
+  font: 500 11px/16px var(--ui-font-mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* features: a hairline lattice between the rails (full-width hairlines above and below), 32px cells, a neutral
+   32px glyph tile, 20 / 500 titles, 14 / 22 muted text */
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] {
+  position: relative;
+  gap: 0;
+  margin-bottom: 0;
+  border-block: 1px solid rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"]::before,
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"]::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  width: 100vw;
+  height: 1px;
+  transform: translateX(-50%);
+  background: rgb(var(--ui-line));
+  pointer-events: none;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"]::before {
+  top: -1px;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"]::after {
+  bottom: -1px;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] > div {
+  min-height: 244px;
+  padding: 32px var(--pub-gutter) 36px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] > div + div {
+  border-top: 1px solid rgb(var(--ui-line));
+}
+
+@media (min-width: 768px) {
+  html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] > div {
+    padding: 32px;
+  }
+
+  html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] > div + div {
+    border-top: 0;
+    border-left: 1px solid rgb(var(--ui-line));
+  }
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] > div:hover {
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] > div > div:first-child {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 48px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+  transform: none;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] > div > div:first-child svg {
+  width: 16px;
+  height: 16px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] h3 {
+  margin-bottom: 10px;
+  font: 500 20px/26px var(--ui-font);
+  letter-spacing: -0.02em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="md:grid-cols-3"] h3 + p {
+  max-width: 30rem;
+  font: 400 14px/22px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+/* supported models: a section head on the content edge (36 / 500), provider chips with a neutral letter tile */
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-8"][class~="text-center"] {
+  margin-bottom: 0;
+  padding: clamp(72px, 10vh, 112px) var(--pub-gutter) 32px;
+  text-align: left;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-8"][class~="text-center"] h2 {
+  margin-bottom: 12px;
+  font: 500 clamp(28px, 2.6vw, 36px) / 1.15 var(--ui-font);
+  letter-spacing: -0.025em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-8"][class~="text-center"] p {
+  font: 400 15px/24px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-16"] {
+  justify-content: flex-start;
+  margin-bottom: 0;
+  padding: 0 var(--pub-gutter) clamp(72px, 10vh, 112px);
+  gap: 8px;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-16"] > div {
+  height: 44px;
+  padding: 0 12px 0 9px;
+  gap: 10px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-16"] > div[class~="opacity-60"] {
+  border-style: dashed;
+  border-color: rgb(var(--ui-line-strong));
+  background: transparent;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-16"] > div > div {
+  width: 26px;
+  height: 26px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-16"] > div > div > span {
+  font: 600 11px/16px var(--ui-font-mono);
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-16"] > div > span:not([class~="rounded"]) {
+  font: 500 13px/19.5px var(--ui-font);
+  color: rgb(var(--ui-ink));
+}
+
+/* supported = a positive state (the accent-soft pill), coming soon = neutral */
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-16"] > div > span[class~="rounded"] {
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+  font: 500 9.5px/14.25px var(--ui-font-mono);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-ui="home"] > main > div > div[class~="mb-16"] > div > span[class~="rounded"][class~="bg-gray-100"] {
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="home"] > footer {
+  position: relative;
+}
+
+html.flat-theme [data-ui="home"] > footer::before {
+  content: "";
+  position: absolute;
+  top: -1px;
+  left: 50%;
+  width: 100vw;
+  height: 1px;
+  transform: translateX(-50%);
+  background: rgb(var(--ui-line));
+}
+
+/* ------------------------------------------------------------------ home · compact preset (upstream data-testid) */
+/* the same top bar and footer; the centred block with the site logo, a 48 / 500 name, the subtitle and one ink
+   call to action */
+html.flat-theme [data-testid="compact-home"] {
+  background: rgb(var(--ui-canvas));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-testid="compact-home"] > header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  padding: 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background: rgb(var(--ui-canvas) / 0.92);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav {
+  max-width: 1240px;
+  min-height: 64px;
+  padding: 12px clamp(16px, 3vw, 32px);
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:first-child {
+  gap: 10px;
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:first-child > img {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:first-child > span {
+  font: 500 13px/20px var(--ui-font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:last-child {
+  gap: 4px;
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:last-child > :is(a, button)[class~="h-10"] {
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  font: 500 13px/20px var(--ui-font);
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:last-child > :is(a, button)[class~="h-10"]:hover {
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:last-child > :is(a, button)[class~="h-10"] svg {
+  width: 16px;
+  height: 16px;
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:last-child > div[class~="relative"] > button {
+  height: 32px;
+  padding: 0 8px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  font: 500 12.5px/18px var(--ui-font-mono);
+}
+
+html.flat-theme [data-testid="compact-home"] > header > nav > div:last-child > div[class~="relative"] > button:hover {
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-testid="compact-home"] :is(header a[class~="bg-gray-900"], main a[class~="bg-primary-600"]) {
+  min-height: 0;
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid rgb(var(--ui-ink));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+  font: 600 13px/19.5px var(--ui-font);
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-testid="compact-home"] main a[class~="bg-primary-600"] {
+  height: 44px;
+  margin-top: 32px;
+  padding: 0 20px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+html.flat-theme [data-testid="compact-home"] :is(header a[class~="bg-gray-900"], main a[class~="bg-primary-600"]):hover {
+  background: rgb(var(--ui-ink) / 0.85);
+}
+
+html.flat-theme [data-testid="compact-home"] > main > div > img {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 28px;
+  border-radius: var(--ui-radius-xl);
+}
+
+html.flat-theme [data-testid="compact-home"] > main h1 {
+  font: 500 clamp(36px, 4vw, 48px) / 1.1 var(--ui-font);
+  letter-spacing: -0.03em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-testid="compact-home"] > main h1 + p {
+  margin-top: 16px;
+  font: 400 16px/25px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-testid="compact-home"] > footer {
+  padding: 20px clamp(16px, 3vw, 32px);
+  border-top: 1px solid rgb(var(--ui-line));
+  font: 400 12px/18px var(--ui-font-mono);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-testid="compact-home"] :is(a, button):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* ------------------------------------------------------------------ legal documents */
+/* the marketing site's plain page: a 760px column, a mono kicker (the document type), a 44 / 500 title, a mono meta
+   line, 14.5 / 1.75 body text; the type's glyph tile is decoration and goes */
+html.flat-theme [data-ui="legal"] > main {
+  max-width: calc(760px + 2 * var(--pub-gutter));
+  padding: clamp(48px, 9vh, 96px) var(--pub-gutter) clamp(72px, 10vh, 112px);
+}
+
+html.flat-theme [data-ui="legal"] > main > article > div:first-child {
+  margin-bottom: 32px;
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+html.flat-theme [data-ui="legal"] > main > article > div:first-child > div > span:first-child {
+  display: none;
+}
+
+html.flat-theme [data-ui="legal"] > main > article > div:first-child p:first-child {
+  font: 400 12px/18px var(--ui-font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="legal"] > main > article > div:first-child h1 {
+  margin-top: 14px;
+  font: 500 clamp(30px, 3.4vw, 44px) / 1.1 var(--ui-font);
+  letter-spacing: -0.03em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="legal"] > main > article > div:first-child h1 + p {
+  margin-top: 16px;
+  font: 400 13px/20px var(--ui-font-mono);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content {
+  font: 400 14.5px/1.75 var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content :is(p, li) {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content p {
+  margin-bottom: 16px;
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content strong {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content h1 {
+  margin: 8px 0 20px;
+  padding-bottom: 0;
+  border-bottom: 0;
+  font: 500 24px/32px var(--ui-font);
+  letter-spacing: -0.02em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content h2 {
+  margin: 40px 0 12px;
+  font: 600 17px/25.5px var(--ui-font);
+  letter-spacing: -0.025em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content :is(h3, h4) {
+  margin: 28px 0 8px;
+  font: 600 14.5px/22px var(--ui-font);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content a {
+  color: rgb(var(--ui-ink));
+  text-decoration: underline;
+  text-decoration-color: var(--ui-link);
+  text-underline-offset: 3px;
+  overflow-wrap: anywhere;
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content a:hover {
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content :is(ul, ol) {
+  margin-bottom: 16px;
+  padding-left: 20px;
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content li {
+  margin-bottom: 10px;
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content li::marker {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content blockquote {
+  margin: 20px 0;
+  padding-left: 14px;
+  border-left: 2px solid rgb(var(--ui-line-strong));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font: 400 12.5px/1.6 var(--ui-font-mono);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content pre {
+  margin: 16px 0;
+  padding: 16px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font: 400 12.5px/1.625 var(--ui-font-mono);
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content table {
+  margin: 16px 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  font-size: 12.5px;
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content th {
+  padding: 8px 12px;
+  border: 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background: rgb(var(--ui-subtle));
+  font-weight: 500;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content td {
+  padding: 8px 12px;
+  border: 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="legal"] .legal-document-content hr {
+  margin: 32px 0;
+  border-color: rgb(var(--ui-line));
+}
+
+/* no text yet / unknown document / load error: the console's empty state (dashed control outline, radius 8) and
+   notice boxes */
+html.flat-theme [data-ui="legal"] article > div[class~="border-dashed"] {
+  display: grid;
+  min-height: 200px;
+  place-items: center;
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  background: transparent;
+  font: 400 13px/19.5px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="legal"] > main > section {
+  padding: 16px 20px;
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="legal"] > main > section h1 {
+  font: 600 15px/22px var(--ui-font);
+}
+
+html.flat-theme [data-ui="legal"] > main > section p {
+  font: 400 13px/19.5px var(--ui-font);
+}
+
+html.flat-theme [data-ui="legal"] > main > section span[class~="h-10"] {
+  width: 32px;
+  height: 32px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="legal"] > main > div > div[class~="animate-spin"] {
+  width: 20px;
+  height: 20px;
+  border: 2px solid rgb(var(--ui-ink));
+  border-top-color: transparent;
+}
+
+/* ------------------------------------------------------------------ 404 */
+/* the marketing site's 404: a plain left-aligned column (a mono kicker "404", a 44 / 500 title, one muted line, the
+   actions), no bar or footer; the giant watermark, the glowing tile and the orbs go */
+html.flat-theme [data-ui="not-found"] {
+  padding: clamp(48px, 10vh, 120px) var(--pub-gutter);
+}
+
+html.flat-theme [data-ui="not-found"] > div:first-child[class~="pointer-events-none"] {
+  display: none;
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] {
+  max-width: 720px;
+  text-align: left;
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > div:first-child {
+  margin-bottom: 18px;
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > div:first-child > div {
+  display: block;
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > div:first-child span {
+  font: 400 12px/18px var(--ui-font-mono);
+  letter-spacing: 0.08em;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > div:first-child div[class~="absolute"] {
+  display: none;
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > div:nth-child(2) {
+  margin-bottom: 32px;
+}
+
+html.flat-theme [data-ui="not-found"] h1 {
+  margin-bottom: 16px;
+  font: 500 clamp(30px, 3.4vw, 44px) / 1.1 var(--ui-font);
+  letter-spacing: -0.03em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="not-found"] h1 + p {
+  font: 400 15px/24px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > div:nth-child(3) {
+  justify-content: flex-start;
+  gap: 10px;
+}
+
+html.flat-theme [data-ui="not-found"] .btn {
+  height: 38px;
+  padding: 0 16px;
+  gap: 8px;
+  border-radius: var(--ui-radius-md);
+  font: 600 14px/20px var(--ui-font);
+  box-shadow: none;
+  transform: none;
+  transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="not-found"] .btn.btn-secondary {
+  border: 1px solid rgb(var(--ui-line-strong));
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="not-found"] .btn.btn-secondary:hover {
+  border-color: rgb(var(--ui-ink) / 0.25);
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="not-found"] .btn.btn-primary {
+  border: 1px solid rgb(var(--ui-ink));
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui="not-found"] .btn.btn-primary:hover {
+  background: rgb(var(--ui-ink) / 0.85);
+}
+
+html.flat-theme [data-ui="not-found"] .btn svg {
+  width: 15px;
+  height: 15px;
+  margin: 0;
+}
+
+html.flat-theme [data-ui="not-found"] .btn.btn-secondary svg {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > p:last-child {
+  margin-top: 28px;
+  font: 400 13px/19.5px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > p:last-child a {
+  color: rgb(var(--ui-ink));
+  text-decoration: underline;
+  text-decoration-color: var(--ui-link);
+  text-underline-offset: 3px;
+}
+
+/* ------------------------------------------------------------------ key usage */
+/* the console's language on a public page: a centred 40 / 500 title, one 42px field with its ink button, KPI-style
+   cards (hairline, radius 8, mono labels), hairline tables with mono numbers; ring strokes in the ink */
+html.flat-theme [data-ui="key-usage"] > main {
+  padding: clamp(56px, 9vh, 96px) var(--pub-gutter) clamp(72px, 10vh, 112px);
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:first-child {
+  margin-bottom: 40px;
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:first-child h1 {
+  margin-bottom: 12px;
+  font: 500 clamp(30px, 3.4vw, 40px) / 1.15 var(--ui-font);
+  letter-spacing: -0.03em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:first-child p {
+  font: 400 15px/24px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) {
+  margin-bottom: 48px;
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > div > div[class~="absolute"] {
+  display: none;
+}
+
+html.flat-theme [data-ui="key-usage"] input.input-ring {
+  height: 42px;
+  padding: 10px 44px 10px 14px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font: 400 13px/20px var(--ui-font-mono);
+  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="key-usage"] input.input-ring::placeholder {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="key-usage"] input.input-ring:focus {
+  border-color: rgb(var(--ui-focus));
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > div > button {
+  right: 3px;
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > div > button:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > div > button svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* 查询: the console's ink button at the field's height */
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > button {
+  height: 42px;
+  padding: 0 18px;
+  gap: 8px;
+  border: 1px solid rgb(var(--ui-ink));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+  font: 600 14px/20px var(--ui-font);
+  transform: none;
+  transition: background-color var(--ui-duration) var(--ui-ease), opacity var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > button:hover:not(:disabled) {
+  background: rgb(var(--ui-ink) / 0.85);
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > button:disabled {
+  opacity: 0.5;
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > button svg {
+  width: 14px;
+  height: 14px;
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > p {
+  margin-top: 12px;
+  font: 400 12px/18px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+/* the range picker after a query: a mono label, 28px range buttons (the current one in the ink) */
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] > div {
+  gap: 6px;
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] > div > span {
+  margin-right: 4px;
+  font: 400 var(--ui-label-size) / var(--ui-label-leading) var(--ui-font-mono);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] button {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+  font: 600 12.5px/18px var(--ui-font);
+  transition: border-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] button:hover {
+  border-color: rgb(var(--ui-ink) / 0.25);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] button[class~="bg-primary-500"] {
+  border-color: rgb(var(--ui-ink));
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] input.input-ring {
+  height: 28px;
+  padding: 0 8px;
+  font: 400 12.5px/18px var(--ui-font-mono);
+}
+
+/* results */
+html.flat-theme [data-ui="key-usage"] > main > div:nth-child(3) > div[class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 12px;
+}
+
+html.flat-theme [data-ui="key-usage"] .fade-up {
+  animation-name: consoleSlideUp;
+  animation-duration: var(--ui-duration-slide);
+  animation-timing-function: var(--ui-ease-out);
+}
+
+html.flat-theme [data-ui="key-usage"] div[class~="inline-flex"][class~="rounded-full"][class~="px-5"] {
+  height: 30px;
+  padding: 0 12px;
+  gap: 8px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+html.flat-theme [data-ui="key-usage"] div[class~="inline-flex"][class~="rounded-full"][class~="px-5"] > span:first-child {
+  width: 6px;
+  height: 6px;
+  animation: none;
+}
+
+html.flat-theme [data-ui="key-usage"] div[class~="inline-flex"][class~="rounded-full"][class~="px-5"] > span:nth-child(2) {
+  font: 600 12.5px/18px var(--ui-font);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="key-usage"] div[class~="inline-flex"][class~="rounded-full"][class~="px-5"] > span:nth-child(n + 3) {
+  font: 400 12.5px/18px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+/* cards: surface, hairline, radius 8, no blur, lift or shadow */
+html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"][class~="p-8"] {
+  padding: 16px 20px 24px;
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"]:hover {
+  box-shadow: none;
+}
+
+/* card titles: the mono label */
+html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"] h3 {
+  font: 500 var(--ui-label-size) / var(--ui-label-leading) var(--ui-font-mono);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"][class~="p-8"] > div:first-child {
+  margin-bottom: 16px;
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"][class~="p-8"] > div:first-child > svg {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-faint));
+}
+
+/* rings: the track in the grouped fill, the progress in the ink (the ring colours were decoration: each ring has
+   its title); the figures in the ring in mono */
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] > circle:first-child {
+  stroke: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] > circle {
+  stroke-width: 6;
+}
+
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] > circle.progress-ring {
+  stroke: rgb(var(--ui-ink));
+}
+
+/* the figures inside take the ring colour of their family inline (rgb(var(--theme-text-<family>-600))): the family
+   variables resolve to the ink here */
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] + div {
+  --theme-text-primary-600: var(--ui-ink);
+  --theme-text-indigo-600: var(--ui-ink);
+  --theme-text-success-600: var(--ui-ink);
+  --theme-text-warning-600: var(--ui-ink);
+}
+
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] + div > span[class~="text-3xl"] {
+  font: 600 30px/36px var(--ui-font);
+  letter-spacing: -0.02em;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] + div > span[class~="text-2xl"] {
+  font: 600 22px/28px var(--ui-font-mono);
+  letter-spacing: -0.01em;
+}
+
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] + div > span[class~="text-xs"] {
+  font: 400 var(--ui-label-size) / var(--ui-label-leading) var(--ui-font-mono);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] + div > span[class~="text-sm"] {
+  font: 600 13px/19.5px var(--ui-font-mono);
+}
+
+html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] + div > p {
+  font: 400 11px/16.5px var(--ui-font-mono);
+  color: rgb(var(--ui-muted));
+}
+
+/* card heads with a hairline under them; detail rows: a neutral 26px glyph tile, a 13px label, the mono value
+   (status colours kept) */
+html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"] > div[class~="px-8"][class~="py-5"] {
+  padding: 12px 20px;
+  border-bottom: 1px solid rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="divide-y"] > div {
+  padding: 11px 20px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="divide-y"] > div > div > div[class~="w-8"] {
+  width: 26px;
+  height: 26px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="divide-y"] > div > div > div[class~="w-8"] > svg {
+  width: 13px;
+  height: 13px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="divide-y"] > div > div > span {
+  font: 400 13px/19.5px var(--ui-font);
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="divide-y"] > div > span {
+  font: 600 13px/19.5px var(--ui-font-mono);
+}
+
+/* token totals: already a hairline lattice upstream; mono labels and figures */
+html.flat-theme [data-ui="key-usage"] main div[class~="gap-px"] {
+  background: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="gap-px"] > div {
+  padding: 12px 20px;
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="gap-px"] > div > div:first-child {
+  margin-bottom: 4px;
+  font: 400 var(--ui-label-size) / var(--ui-label-leading) var(--ui-font-mono);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="gap-px"] > div > div:last-child {
+  font: 600 15px/22.5px var(--ui-font-mono);
+  color: rgb(var(--ui-ink));
+}
+
+/* the 7 / 30 / 90-day switch: the console's segmented control (hairline frame, ink thumb) */
+html.flat-theme [data-ui="key-usage"] main div[class~="inline-flex"][class~="rounded-lg"][class~="p-0.5"] {
+  padding: 2px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="inline-flex"][class~="rounded-lg"][class~="p-0.5"] > button {
+  padding: 5px 12px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  font: 600 12.5px/18px var(--ui-font);
+  transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="inline-flex"][class~="rounded-lg"][class~="p-0.5"] > button:hover {
+  background: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="inline-flex"][class~="rounded-lg"][class~="p-0.5"] > button[class~="bg-primary-500"] {
+  background: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+/* tables: mono labels in the head, 12.5px mono cells, hairline rows */
+html.flat-theme [data-ui="key-usage"] main table thead tr {
+  border-color: rgb(var(--ui-line));
+  background: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="key-usage"] main table th {
+  padding: 12px;
+  font: 500 var(--ui-label-size) / var(--ui-label-leading) var(--ui-font-mono);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui="key-usage"] main table td {
+  padding: 10px 12px;
+  font: 400 12.5px/19.5px var(--ui-font-mono);
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="key-usage"] main table :is(th, td):first-child {
+  padding-left: 20px;
+}
+
+html.flat-theme [data-ui="key-usage"] main table :is(th, td):last-child {
+  padding-right: 20px;
+}
+
+html.flat-theme [data-ui="key-usage"] main table td:is(:first-child, :last-child) {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="key-usage"] main table tbody tr {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"] > div[class~="px-8"][class~="py-8"] {
+  padding: 32px 20px;
+  font: 400 13px/19.5px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+/* loading: the console skeleton (the grouped fill with a faint ink sheen) */
+html.flat-theme [data-ui="key-usage"] .skeleton {
+  border-radius: var(--ui-radius-md);
+  background: linear-gradient(90deg, rgb(var(--ui-subtle)) 25%, rgb(var(--ui-ink) / 0.06) 50%, rgb(var(--ui-subtle)) 75%);
+  background-size: 400% 100%;
+}
+
+/* end public */
diff --git a/frontend/src/styles/console/shell.css b/frontend/src/styles/console/shell.css
index 2c2e1cea4406..5fb2cc054284 100644
--- a/frontend/src/styles/console/shell.css
+++ b/frontend/src/styles/console/shell.css
@@ -1 +1,752 @@
-/* Console theme · app shell: sidebar, header, page header, mobile shell, auth layout, public pages (owner: the shell agent; html.flat-theme selectors, tokens from tokens.css, new data-ui hooks registered here). */
+/* Console theme · app shell (owner: A1 shell): the frame and canvas, the sidebar, the header row, page gutters and
+ * the shell's vertical rhythm, the mobile bar and drawer, decorative layers. Public pages live in
+ * pages/settings-ops-public.css.
+ *
+ * Source: the Experiential Labs product console (ui-el ref/console/REF-CONSOLE.md §7.1, §7.4, §8.1, §8.2, §12, §13;
+ * styles.json jobs models / logs / m-models). The reference has no top bar; our AppHeader keeps its DOM and reads as
+ * the first row of the content column (ui-el WAVE1 D1, D12): no fill, no border, not sticky on desktop; on phones it
+ * is the reference's 47px sticky bar. Colours are role tokens (tokens.css); where the reference falls below our floor
+ * the value is the nearest compliant one and says so.
+ *
+ * Every selector starts with html.flat-theme (theme off = upstream). Specificity is >= 0,2,1 so the rules beat the
+ * recipes (.sidebar*, .glass, .btn-*), the page utilities and upstream's dark: variants; the sidebar's scoped styles
+ * (0,2,0 / 0,3,1) are beaten where it matters with an extra .sidebar.
+ *
+ * Hooks: existing ones (.app-main, .sidebar*, upstream classes) plus, in AppHeader.vue, data-ui="header-locale" (:54),
+ * "header-subscription" (:57), "header-balance" (:62), "header-user" (:110); AnnouncementBell.vue carries
+ * data-ui="announcement-bell" (added by the overlays agent; its button's look is here, its dialog is overlays.css). */
+
+/* ================================================================== metrics */
+/* Read by the table-page height below and by the data agent (TablePageLayout's row-gap). Desktop (>= 1024px, the
+   breakpoint the templates switch at): the header row takes layout space but does not stick. Phones and tablets: the
+   header is the 47px sticky bar. REF §7.1: content px clamp(1rem,3vw,1.75rem) = 28, py clamp(1.25rem,4vh,1.875rem) =
+   30 at 1440x900; sidebar clamp(13rem,20vw,15rem) = 240, collapsed clamp(3.5rem,8vw,4rem) = 64; blocks 12 apart. */
+html.flat-theme {
+  --ui-shell-sidebar-w: clamp(13rem, 20vw, 15rem);
+  --ui-shell-rail-w: clamp(3.5rem, 8vw, 4rem);
+  --ui-shell-pad-x: clamp(1rem, 3vw, 1.75rem);
+  --ui-shell-pad-y: clamp(1.25rem, 4vh, 1.875rem);
+  --ui-shell-row: 30px;
+  --ui-shell-gap: 12px;
+  --ui-shell-bar-h: 47px;
+  /* the header block's rendered height, the content's top and bottom padding */
+  --ui-shell-header-h: calc(var(--ui-shell-pad-y) + var(--ui-shell-row));
+  --ui-shell-pad-top: var(--ui-shell-gap);
+  --ui-shell-pad-bottom: var(--ui-shell-pad-y);
+  /* Sidebar text and icons are ink at an alpha (REF §8.1: text 50 %, icons 30 %). On the canvas, the hover fill and
+     the active tint the reference's 3.68:1 / 2.03:1 need 58 % (4.69-4.83:1) and 46 % (3.18-3.24:1); REF §13's 56 % /
+     44 % pass on the canvas only (shell_calc.py). Dark: the reference's 50 % passes, icons need 36 % (3.08:1). */
+  --ui-shell-nav-fg: 0.58;
+  --ui-shell-nav-icon: 0.46;
+}
+
+html.flat-theme.dark {
+  --ui-shell-nav-fg: 0.5;
+  --ui-shell-nav-icon: 0.36;
+}
+
+/* --ui-header-h (tokens.css) is the sticky header keyboard focus must clear (behaviour.css B3.4): nothing sticks on
+   desktop. :root keeps the specificity above tokens.css' :root.flat-theme. */
+html.flat-theme:root {
+  --ui-header-h: 0px;
+}
+
+@media (max-width: 1023.98px) {
+  html.flat-theme {
+    --ui-shell-header-h: var(--ui-shell-bar-h);
+    --ui-shell-pad-top: var(--ui-shell-pad-y);
+  }
+
+  html.flat-theme:root {
+    --ui-header-h: var(--ui-shell-bar-h);
+  }
+}
+
+/* ================================================================== frame */
+/* The reference draws nothing behind the page: no mesh, no orbs, no gradient washes (REF §10 item 15). */
+html.flat-theme .ui-decor,
+html.flat-theme div[class~="bg-mesh-gradient"][class~="fixed"] {
+  display: none;
+}
+
+/* Route changes: upstream's 3px accent sweep becomes a 2px ink sweep (loading is not an accent role, WAVE1 D2). */
+html.flat-theme .navigation-progress {
+  height: 2px;
+}
+
+html.flat-theme .navigation-progress > .navigation-progress-bar {
+  background: linear-gradient(90deg, transparent 0%, rgb(var(--ui-ink) / 0.55) 30%, rgb(var(--ui-ink) / 0.55) 70%, transparent 100%);
+}
+
+html.flat-theme .app-main {
+  transition: margin-left var(--ui-duration-sidebar) var(--ui-ease-out);
+}
+
+@media (min-width: 1024px) {
+  html.flat-theme .app-main {
+    margin-left: var(--ui-shell-sidebar-w);
+  }
+
+  html.flat-theme .app-main[class~="lg:ml-[72px]"] {
+    margin-left: var(--ui-shell-rail-w);
+  }
+}
+
+/* Content gutter: 28 / 30 at 1440x900 (REF §7.1); on desktop the header row above holds the top padding, so the
+   content starts one block gap (12) under it. */
+html.flat-theme .app-main > main {
+  padding: var(--ui-shell-pad-top) var(--ui-shell-pad-x) var(--ui-shell-pad-bottom);
+}
+
+/* Page rhythm: a full-width page's top-level blocks sit 12px apart like the reference's (/logs: header row, toolbar,
+   KPI row, cards). Centred narrow pages (mx-auto max-w-*) keep their spacing for their page group. */
+html.flat-theme .app-main > main > :is([class~="space-y-6"], [class~="space-y-5"], [class~="space-y-4"]):not([class~="mx-auto"]) > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap);
+}
+
+/* Full-height table pages end one content padding above the viewport's bottom edge (/models: the table card ends at
+   900 - 30). Upstream subtracts its 64px header and lg:p-8 from 100vh; vh (not dvh) as upstream, so a phone's
+   collapsing address bar never resizes the page while it scrolls. The data agent owns everything inside the layout. */
+html.flat-theme .table-page-layout,
+html.flat-theme .custom-page-layout {
+  height: calc(100vh - var(--ui-shell-header-h) - var(--ui-shell-pad-top) - var(--ui-shell-pad-bottom));
+}
+
+/* ================================================================== sidebar (REF §7.1, §8.1) */
+/* Same fill as the canvas, a 1px structural line on the right, no shadow. Width and padding follow the reference's
+   clamps and slide in 160ms ease-out. */
+html.flat-theme .sidebar {
+  width: var(--ui-shell-sidebar-w);
+  padding: clamp(1rem, 3vh, 1.25rem) clamp(0.75rem, 1.5vw, 1rem);
+  border-right: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-canvas));
+  box-shadow: none;
+  transition-property: width, padding, transform;
+  transition-duration: var(--ui-duration-sidebar);
+  transition-timing-function: var(--ui-ease-out);
+}
+
+html.flat-theme .sidebar[class~="w-[72px]"] {
+  width: var(--ui-shell-rail-w);
+  padding-left: clamp(0.5rem, 1.5vw, 0.75rem);
+  padding-right: clamp(0.5rem, 1.5vw, 0.75rem);
+}
+
+/* Brand: the 20px mark 8px in from the edge (x = 24), then the site name 13/600 and, under it, the version in mono
+   (the reference's row is a mark and a word; ours also carries the version, so the lockup is two lines). */
+html.flat-theme .sidebar .sidebar-header {
+  height: auto;
+  min-height: 30px;
+  padding: 0 0 12px 8px;
+  gap: 8px;
+  border-bottom: 0;
+}
+
+html.flat-theme .sidebar .sidebar-header.sidebar-header-collapsed {
+  justify-content: center;
+  padding-left: 0;
+  padding-right: 0;
+}
+
+html.flat-theme .sidebar .sidebar-logo {
+  flex: 0 0 20px;
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+  border-radius: var(--ui-radius-sm);
+  box-shadow: none;
+}
+
+html.flat-theme .sidebar .sidebar-brand {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+html.flat-theme .sidebar .sidebar-brand-title,
+html.flat-theme .sidebar .sidebar-brand-title:hover {
+  font: 600 13px/16px var(--ui-font);
+  color: rgb(var(--ui-ink));
+}
+
+/* VersionBadge: the admin button and the plain text for users, as mono meta (REF §5: Mono 10.5 captions). The
+   update notice keeps its dot and turns the text to the warning colour. Its panel is a popover (tokens). */
+html.flat-theme .sidebar .sidebar-brand > .relative {
+  display: flex;
+  min-width: 0;
+}
+
+html.flat-theme .sidebar .sidebar-brand > .relative > :is(button, span) {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  max-width: 100%;
+  padding: 0;
+  border-radius: var(--ui-radius-sm);
+  background: transparent;
+  font: 400 10.5px/14px var(--ui-font-mono);
+  color: rgb(var(--ui-faint));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .sidebar .sidebar-brand > .relative > button:hover {
+  background: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .sidebar .sidebar-brand > .relative > button[class~="bg-amber-100"] {
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme .sidebar .sidebar-brand > .relative > button span {
+  font-weight: inherit;
+}
+
+html.flat-theme .sidebar .sidebar-brand > .relative > button > span[class~="h-2"] {
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme .sidebar .sidebar-brand > .relative > button > span[class~="h-2"] > span {
+  width: 6px;
+  height: 6px;
+}
+
+/* Navigation: flush with the brand (x = 16, first item at y = 64 like the reference); a 4px inner margin keeps focus
+   rings clear of the scroll box's clip. Our list is longer than the reference's two items: when it scrolls, its last
+   16px fade out above the bottom rule instead of cutting a row in half (the reference fades its scrolling docs strip
+   the same way, REF §7.4); the 12px end padding keeps the last row clear of the fade. */
+html.flat-theme .sidebar .sidebar-nav {
+  margin: 0 -4px;
+  padding: 2px 4px 12px;
+  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
+  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
+}
+
+html.flat-theme .sidebar .sidebar-section {
+  margin-bottom: 24px;
+}
+
+html.flat-theme .sidebar .sidebar-section:last-child {
+  margin-bottom: 0;
+}
+
+/* Section titles are the mono label (docs navigation groups: 8px above the first item, flush with the item box). */
+html.flat-theme .sidebar .sidebar-section-title {
+  min-height: var(--ui-label-leading);
+  margin: 0 0 8px;
+  padding: 0;
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme .sidebar .sidebar-section-title::after {
+  left: 10px;
+  right: 10px;
+  background: rgb(var(--ui-line));
+}
+
+/* Items: min 32px (13px on a 19.5px line + 7px above and below = 33.5), 10px inset, 6px radius, 8px from the 15px
+   icon to the label, 1px apart. Text and icon are ink at the nav alphas; hover lays ink at 2 % and lifts the text to
+   70 %; the current item only gets the accent at 8 % (REF §8.1: its text and icon keep their colour). Focus is the
+   browser's ring, as on the reference. */
+html.flat-theme .sidebar .sidebar-link {
+  gap: 8px;
+  min-height: 32px;
+  margin-bottom: 1px;
+  padding: 7px 10px;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  font: 400 13px/19.5px var(--ui-font);
+  color: rgb(var(--ui-ink) / var(--ui-shell-nav-fg));
+  transition:
+    color var(--ui-duration) var(--ui-ease),
+    background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .sidebar .sidebar-link:hover {
+  background-color: rgb(var(--ui-ink) / 0.02);
+  color: rgb(var(--ui-ink) / 0.7);
+}
+
+html.flat-theme .sidebar .sidebar-link.sidebar-link-active,
+html.flat-theme .sidebar .sidebar-link.sidebar-link-active:hover {
+  background-color: rgb(var(--ui-primary) / 0.08);
+  color: rgb(var(--ui-ink) / var(--ui-shell-nav-fg));
+}
+
+html.flat-theme .sidebar .sidebar-link > :is(svg, .sidebar-svg-icon) {
+  flex: 0 0 15px;
+  width: 15px;
+  height: 15px;
+  color: rgb(var(--ui-ink) / var(--ui-shell-nav-icon));
+}
+
+html.flat-theme .sidebar .sidebar-svg-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* a group's chevron sits at the row's end in the icon colour */
+html.flat-theme .sidebar .sidebar-label-flex > svg {
+  width: 13px;
+  height: 13px;
+  color: rgb(var(--ui-ink) / var(--ui-shell-nav-icon));
+}
+
+/* A group's children hang from a 1px guide under the parent's icon. */
+html.flat-theme .sidebar .sidebar-section > div[class~="border-l"] {
+  margin: 1px 0 4px 17px;
+  padding-left: 8px;
+  border-left-color: rgb(var(--ui-line));
+}
+
+html.flat-theme .sidebar .sidebar-section > div[class~="border-l"] > .sidebar-link {
+  min-height: 30px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+
+/* Collapsed rail (64px): 35 x 32 icon items centred (REF §8.1). The folded label (already aria-hidden) gives up its
+   line box too, so the item is the reference's 32px rather than 33.5. */
+html.flat-theme .sidebar .sidebar-link.sidebar-link-collapsed {
+  justify-content: center;
+  gap: 0;
+  width: 35px;
+  min-height: 32px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 7px 10px;
+}
+
+html.flat-theme .sidebar .sidebar-link.sidebar-link-collapsed > .sidebar-label-collapsed {
+  height: 0;
+}
+
+/* Bottom: a 1px rule, 12px, then the theme switch as a row with the collapse control at its end: the reference's
+   panel-left glyph, 28 x 28, ink 30 % -> 60 % on hover with no fill (REF §8.1; 46 % here for 3:1). The collapse
+   label stays for screen readers. */
+html.flat-theme .sidebar > div[class~="mt-auto"] {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 12px 0 0;
+  border-top: 1px solid rgb(var(--ui-line));
+}
+
+html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:first-child {
+  flex: 1 1 auto;
+  width: auto;
+  margin: 0;
+}
+
+html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-child:not(:first-child) {
+  flex: 0 0 28px;
+  justify-content: center;
+  width: 28px;
+  min-height: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  color: rgb(var(--ui-ink) / var(--ui-shell-nav-icon));
+}
+
+html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-child:not(:first-child):hover {
+  background-color: transparent;
+  color: rgb(var(--ui-ink) / 0.6);
+}
+
+html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-child:not(:first-child) > svg {
+  color: inherit;
+}
+
+html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-child:not(:first-child) > .sidebar-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+html.flat-theme .sidebar[class~="w-[72px]"] > div[class~="mt-auto"] {
+  flex-direction: column;
+  gap: 4px;
+}
+
+html.flat-theme .sidebar[class~="w-[72px]"] > div[class~="mt-auto"] > button.sidebar-link:first-child {
+  flex: 0 0 auto;
+  width: 35px;
+}
+
+/* Phones and tablets: the drawer floats over the page on the overlay scrim. The scrim sits above the sticky bar
+   (upstream stacks both at z-30, so the bar stayed undimmed beside the open drawer) and under the drawer (z-40). */
+html.flat-theme .sidebar ~ div[class~="bg-black/50"] {
+  z-index: 35;
+  background-color: rgb(var(--ui-scrim));
+}
+
+@media (max-width: 1023.98px) {
+  html.flat-theme .sidebar:not([class~="w-[72px]"]) {
+    width: 15rem;
+  }
+
+  html.flat-theme .sidebar:not([class~="-translate-x-full"]) {
+    box-shadow: var(--ui-shadow-overlay);
+  }
+}
+
+/* ================================================================== header row (WAVE1 D1, D12) */
+/* Phones and tablets first: the reference's 47px sticky bar (REF §7.4: 6 / 8 inset, canvas fill, 1px line under
+   it; 32-34px controls). */
+html.flat-theme .app-main > header {
+  padding: 6px 8px;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-canvas));
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  box-shadow: none;
+}
+
+html.flat-theme .app-main > header > div {
+  height: 34px;
+  gap: 8px;
+  padding: 0;
+}
+
+html.flat-theme .app-main > header > div > div:last-child {
+  gap: 4px;
+}
+
+@media (max-width: 1023.98px) {
+  html.flat-theme .app-main > header > div > div:first-child > button[class~="btn-icon"] {
+    display: inline-grid;
+    place-items: center;
+    width: 35px;
+    height: 32px;
+    padding: 0;
+    border-radius: var(--ui-radius-md);
+    background: transparent;
+    color: rgb(var(--ui-muted));
+  }
+
+  html.flat-theme .app-main > header > div > div:first-child > button[class~="btn-icon"]:hover {
+    background-color: rgb(var(--ui-subtle));
+    color: rgb(var(--ui-ink));
+  }
+
+  html.flat-theme .app-main > header > div > div:first-child > button[class~="btn-icon"] svg {
+    width: 15px;
+    height: 15px;
+  }
+}
+
+/* Desktop: the first row of the content column, 30px tall at the content gutter (/logs: y = 30), no fill, no line,
+   no blur, not sticky. */
+@media (min-width: 1024px) {
+  html.flat-theme .app-main > header {
+    position: static;
+    padding: var(--ui-shell-pad-y) var(--ui-shell-pad-x) 0;
+    border-bottom: 0;
+    background-color: transparent;
+  }
+
+  html.flat-theme .app-main > header > div {
+    height: var(--ui-shell-row);
+    gap: 16px;
+  }
+
+  html.flat-theme .app-main > header > div > div:first-child {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  html.flat-theme .app-main > header > div > div:last-child {
+    flex: 0 0 auto;
+    gap: 10px;
+  }
+
+  /* Title · description on one line: the page title 20/28 600 (REF §8.2), the description 13px muted on the same
+     baseline after a faint dot; a description too long for the row ends in an ellipsis. */
+  html.flat-theme .app-main > header div:has(> h1) {
+    display: flex;
+    align-items: baseline;
+    min-width: 0;
+  }
+}
+
+html.flat-theme .app-main > header h1 {
+  flex: 0 0 auto;
+  font: 600 20px/28px var(--ui-font);
+  letter-spacing: 0;
+  white-space: nowrap;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header h1 + p {
+  min-width: 0;
+  overflow: hidden;
+  font: 400 13px/19.5px var(--ui-font);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .app-main > header h1 + p::before {
+  content: '\00b7';
+  margin: 0 8px 0 10px;
+  color: rgb(var(--ui-faint));
+}
+
+/* ------------------------------------------------------------------ header controls: ghost and outlined, 30px */
+/* The bell: a ghost icon button (REF §8.3 icon buttons: muted -> ink on the subtle fill); unread keeps the red dot,
+   6px like the reference's status dots, and the glyph turns ink instead of blue. Its dialog is overlays.css'. */
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button) {
+  display: inline-grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  transform: none;
+  transition:
+    color var(--ui-duration) var(--ui-ease),
+    background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button):hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button)[class~="text-blue-600"] {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button) > svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button) > span[class~="absolute"] {
+  top: 6px;
+  right: 6px;
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button) > span[class~="absolute"] > span {
+  width: 6px;
+  height: 6px;
+}
+
+/* Docs and model plaza: ghost text links (the reference's header links: 12.5/500 muted -> ink) with a 13px glyph. */
+html.flat-theme .app-main > header > div > div:last-child > a {
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 8px;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  font: 500 12.5px/18.75px var(--ui-font);
+  color: rgb(var(--ui-muted));
+  transition:
+    color var(--ui-duration) var(--ui-ease),
+    background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .app-main > header > div > div:last-child > a:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header > div > div:last-child > a > svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* The language switch is a dropdown trigger: the reference's filter pill (REF §8.6: 30px, 10px inset, 6px gap, 1px
+   control outline, surface fill, 12.5/600 ink-soft -> ink, 12px chevron). Its menu is overlays.css'. */
+html.flat-theme .app-main > header [data-ui="header-locale"] > button {
+  gap: 6px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  font: 600 12.5px/18.75px var(--ui-font);
+  color: rgb(var(--ui-ink-soft));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .app-main > header [data-ui="header-locale"] > button:hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header [data-ui="header-locale"] > button > span[class~="text-base"] {
+  font-size: 13px;
+  line-height: 1;
+}
+
+html.flat-theme .app-main > header [data-ui="header-locale"] > button > svg {
+  width: 12px;
+  height: 12px;
+  color: inherit;
+}
+
+/* Subscriptions: the same outlined 30px control; the dots keep their state colours, the count is mono. */
+html.flat-theme .app-main > header [data-ui="header-subscription"] > button {
+  gap: 6px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme .app-main > header [data-ui="header-subscription"] > button:hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header [data-ui="header-subscription"] > button > svg {
+  width: 13px;
+  height: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .app-main > header [data-ui="header-subscription"] > button div[class~="h-2"][class~="w-2"] {
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme .app-main > header [data-ui="header-subscription"] > button span[class~="text-xs"] {
+  font: 500 11px/16.5px var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+  color: inherit;
+}
+
+/* Balance: a mono chip (WAVE1 D1, D4: neutral, no tint): wallet glyph, the amount in Geist Mono tabular, the frozen
+   amount as a warning pill; the hover card is the reference's figure breakdown (REF §8.9: 6px radius, control outline,
+   surface, 12 / 8 inset, 12px rows with mono tabular values). */
+html.flat-theme .app-main > header [data-ui="header-balance"] {
+  align-items: center;
+  gap: 6px;
+  height: 30px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme .app-main > header [data-ui="header-balance"] > svg {
+  width: 13px;
+  height: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .app-main > header [data-ui="header-balance"] > span[class~="text-sm"] {
+  font: 500 12.5px/18.75px var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header [data-ui="header-balance"] > span[class~="rounded-full"] {
+  padding: 1px 6px;
+  border-radius: 9999px;
+  background-color: rgb(var(--ui-warning-soft));
+  font: 500 10.5px/15.75px var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] {
+  min-width: 224px;
+  margin-top: 6px;
+  padding: 8px 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-popover);
+  font: 400 12px/18px var(--ui-font);
+}
+
+html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] span {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] span:last-child {
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] span:last-child[class~="text-amber-700"] {
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] > div[class~="border-t"] {
+  border-top-color: rgb(var(--ui-line));
+}
+
+/* The account menu trigger: the reference's account row (the sidebar "Log in": a 20px ring, 13/500, ink 70 % -> ink,
+   ink 2 % on hover), with the name and role on one line. The menu is overlays.css'. */
+html.flat-theme .app-main > header [data-ui="header-user"] > button {
+  gap: 8px;
+  height: 30px;
+  padding: 0 8px 0 5px;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  color: rgb(var(--ui-ink) / 0.7);
+  transition:
+    color var(--ui-duration) var(--ui-ease),
+    background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .app-main > header [data-ui="header-user"] > button:hover {
+  background-color: rgb(var(--ui-ink) / 0.02);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .app-main > header [data-ui="header-user"] > button > div:first-child {
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: 9999px;
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+  font: 600 9px/1 var(--ui-font-mono);
+  color: rgb(var(--ui-ink-soft));
+}
+
+@media (min-width: 768px) {
+  html.flat-theme .app-main > header [data-ui="header-user"] > button > div:nth-child(2) {
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+  }
+}
+
+html.flat-theme .app-main > header [data-ui="header-user"] > button > div:nth-child(2) > div:first-child {
+  font: 500 13px/19.5px var(--ui-font);
+  color: inherit;
+}
+
+html.flat-theme .app-main > header [data-ui="header-user"] > button > div:nth-child(2) > div:last-child {
+  font: 400 12px/18px var(--ui-font);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .app-main > header [data-ui="header-user"] > button > svg {
+  width: 12px;
+  height: 12px;
+  color: inherit;
+}
diff --git a/frontend/src/styles/console/tokens.css b/frontend/src/styles/console/tokens.css
index fe3c3ba6e7e0..51d6c92e61f4 100644
--- a/frontend/src/styles/console/tokens.css
+++ b/frontend/src/styles/console/tokens.css
@@ -239,7 +239,7 @@
      reference's decorative muted-2 (upstream's own use: dividers, idle sort arrows) */
   --theme-text-gray-300: 163 163 163;
   --theme-text-gray-400: 108 108 108;
-  --theme-text-gray-500: 108 108 108;
+  --theme-text-gray-500: 105 105 105; /* >= 4.5:1 on gray-200 fills (4.68) */
   --theme-text-gray-600: 82 82 82;
   --theme-text-gray-700: 64 64 64;
   --theme-text-gray-800: 38 38 38;
@@ -297,7 +297,7 @@
   --theme-text-gray-200: 229 229 229;
   --theme-text-gray-300: 212 212 212;
   --theme-text-gray-400: 179 179 179;
-  --theme-text-gray-500: 145 145 145;
+  --theme-text-gray-500: 168 168 168; /* >= 4.5:1 on dark-600 fills (upstream pairs text-gray-500 with them) */
 }
 
 /* ------------------------------------------------------------------ Tailwind accent and status families */
diff --git a/frontend/src/utils/platformColors.ts b/frontend/src/utils/platformColors.ts
index 3d552aeece77..2d1440fb6656 100644
--- a/frontend/src/utils/platformColors.ts
+++ b/frontend/src/utils/platformColors.ts
@@ -99,7 +99,7 @@ const ACCENT: Record<Platform, string> = {
   opencode_go: accent('warning', '245 158 11'), // amber-500 #f59e0b
   composite: accent('teal', '6 182 212'), // cyan-500 #06b6d4
 }
-const ACCENT_DEFAULT = accent('primary', '20 184 166') // primary-500 (teal #14b8a6; Apple blue under the theme)
+const ACCENT_DEFAULT = accent('primary', '20 184 166') // primary-500 (teal #14b8a6; the console accent under the theme)
 
 // ── Accent bar (gradient) ───────────────────────────────────────────
 const ACCENT_BAR: Record<Platform, string> = {
diff --git a/frontend/src/views/HomeView.vue b/frontend/src/views/HomeView.vue
index bde794ba0b5c..dc82608e11dc 100644
--- a/frontend/src/views/HomeView.vue
+++ b/frontend/src/views/HomeView.vue
@@ -94,6 +94,7 @@
   <div
     v-else
     class="relative flex min-h-screen flex-col overflow-hidden bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100 dark:from-dark-950 dark:via-dark-900 dark:to-dark-950"
+    data-ui="home"
   >
     <!-- Background Decorations -->
     <div class="pointer-events-none absolute inset-0 overflow-hidden">
diff --git a/frontend/src/views/KeyUsageView.vue b/frontend/src/views/KeyUsageView.vue
index ea7d6e91f412..1dffeac67d9a 100644
--- a/frontend/src/views/KeyUsageView.vue
+++ b/frontend/src/views/KeyUsageView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="relative flex min-h-screen flex-col bg-gray-50 dark:bg-dark-950">
+  <div class="relative flex min-h-screen flex-col bg-gray-50 dark:bg-dark-950" data-ui="key-usage">
     <!-- Header (same pattern as HomeView) -->
     <header class="relative z-20 px-6 py-4">
       <nav class="mx-auto flex max-w-6xl items-center justify-between">
diff --git a/frontend/src/views/NotFoundView.vue b/frontend/src/views/NotFoundView.vue
index beb29e4495b2..602dbf75f208 100644
--- a/frontend/src/views/NotFoundView.vue
+++ b/frontend/src/views/NotFoundView.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="relative flex min-h-screen items-center justify-center overflow-hidden bg-gray-50 px-4 dark:bg-dark-950"
+    data-ui="not-found"
   >
     <!-- Background Decoration -->
     <div class="pointer-events-none absolute inset-0 overflow-hidden">
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index 98ecc2ee19d3..6253cfab03ff 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -3,15 +3,21 @@
     <div v-if="immediateAccountActions.size" role="status" class="mb-3 flex items-center gap-2 text-xs text-muted"><Icon name="refresh" size="sm" class="animate-spin" />{{ t('common.processing') }}</div>
     <TablePageLayout :content-framed="viewMode !== 'cards'">
       <template #filters>
-        <div class="flex flex-wrap-reverse items-start justify-between gap-3">
+        <div :class="flatThemeActive ? undefined : 'flex flex-wrap-reverse items-start justify-between gap-3'" :data-ui="flatThemeActive ? 'accounts-toolbar' : undefined">
           <AccountConsoleFilters
+            v-if="!flatThemeActive"
             v-model="consoleFilters"
             :facets="facets"
             :groups="groups"
             @change="handleConsoleFiltersChanged"
           />
+          <template v-else>
+            <AccountConsoleFilters v-model="consoleFilters" part="search" :facets="facets" :groups="groups" @change="handleConsoleFiltersChanged" />
+            <AccountViewModeSwitcher v-model="viewMode" />
+          </template>
           <AccountTableActions
             :loading="loading"
+            data-ui="accounts-actions"
             @refresh="handleManualRefresh"
             @create="showCreate = true"
           >
@@ -24,7 +30,7 @@
                   @update:model-value="handleAPIKeyRevealToggle"
                 />
               </label>
-              <AccountViewModeSwitcher v-model="viewMode" />
+              <AccountViewModeSwitcher v-if="!flatThemeActive" v-model="viewMode" />
 
               <!-- Auto Refresh Dropdown -->
               <div class="relative" ref="autoRefreshDropdownRef">
@@ -170,7 +176,37 @@
                 </Teleport>
               </div>
             </template>
+            <template v-if="flatThemeActive" #beforeCreate>
+              <AccountBulkMenu
+                :total-results="pagination.total"
+                :selected-count="selIds.length"
+                :selecting-all="selectingAllResults"
+                :all-results-selected="allResultsSelected"
+                @select-all-results="handleSelectAllResults"
+                @edit-filtered="openBulkEditFiltered"
+                @taxonomy-filtered="openBulkTaxonomyFiltered"
+              />
+            </template>
           </AccountTableActions>
+          <AccountConsoleFilters v-if="flatThemeActive" v-model="consoleFilters" part="filters" :facets="facets" :groups="groups" @change="handleConsoleFiltersChanged">
+            <template #leading>
+              <AccountFolderBar
+                variant="menu"
+                :folders="facetFolders"
+                :active-folder="activeFolder"
+                :total="folderNavigationTotal"
+                :uncategorized-count="folderNavigationUncategorized"
+                :loading="facetsLoading"
+                :error="Boolean(facetsError)"
+                @select="handleFolderSelect"
+                @manage="showTaxonomyManager = true"
+                @retry="loadFacets"
+              />
+            </template>
+            <template #summary>
+              <span data-ui="accounts-count">{{ t('admin.accounts.accountCount', { count: pagination.total.toLocaleString() }) }}</span>
+            </template>
+          </AccountConsoleFilters>
         </div>
         <div
           v-if="hasPendingListSync"
@@ -188,6 +224,7 @@
       <template #table>
         <div class="flex h-full min-h-0 min-w-0 flex-1 flex-col">
         <AccountFolderBar
+          v-if="!flatThemeActive"
           :folders="facetFolders"
           :active-folder="activeFolder"
           :total="folderNavigationTotal"
@@ -198,14 +235,15 @@
           @manage="showTaxonomyManager = true"
           @retry="loadFacets"
         />
-        <div class="flex min-h-0 min-w-0 flex-1 flex-col p-3 sm:p-4">
-        <div v-if="completedImportJobIDs.length" class="mb-2 flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
+        <div class="flex min-h-0 min-w-0 flex-1 flex-col p-3 sm:p-4" data-ui="accounts-list">
+        <div v-if="completedImportJobIDs.length" class="mb-2 flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300" data-ui="accounts-import-results">
           <button type="button" data-test="select-imported-results" class="btn btn-secondary btn-sm" :disabled="selectingImportedResults" @click="selectImportedResults()">
             {{ t(importResultSelectionFailed ? 'admin.accounts.retryImportSelection' : 'admin.accounts.selectImportedResults') }}
           </button>
           <span>#{{ completedImportJobIDs.join(', #') }}</span>
         </div>
         <AccountBulkActionsBar
+          v-if="!flatThemeActive"
           :selected-ids="selIds"
           :selected-accounts="selectedAccounts"
           :total-results="pagination.total"
@@ -525,6 +563,30 @@
           @show-temp-unsched="handleShowTempUnsched"
         />
         </div>
+        <div v-if="flatThemeActive" v-show="selIds.length > 0 || selectingAllResults" data-ui="accounts-bulk-tray">
+          <AccountBulkActionsBar
+            :selected-ids="selIds"
+            :selected-accounts="selectedAccounts"
+            :total-results="pagination.total"
+            :selecting-all="selectingAllResults"
+            :all-results-selected="allResultsSelected"
+            @delete="handleBulkDelete"
+            @reset-status="handleBulkResetStatus"
+            @refresh-token="handleBulkRefreshToken"
+            @refresh-tier="handleBulkRefreshTier"
+            @duplicate-review="handleDuplicateReview"
+            @probe-upstream-billing="handleBulkProbeUpstreamBilling"
+            @test-connection="openBatchTest"
+            @edit-selected="openBulkEditSelected"
+            @edit-filtered="openBulkEditFiltered"
+            @taxonomy-selected="openBulkTaxonomySelected"
+            @taxonomy-filtered="openBulkTaxonomyFiltered"
+            @clear="clearSelection"
+            @select-page="selectPage"
+            @select-all-results="handleSelectAllResults"
+            @toggle-schedulable="handleBulkToggleSchedulable"
+          />
+        </div>
         </div>
         </div>
       </template>
@@ -661,6 +723,10 @@ import Toggle from '@/components/common/Toggle.vue'
 import { CreateAccountModal, EditAccountModal, BulkEditAccountModal, SyncFromCrsModal, TempUnschedStatusModal } from '@/components/account'
 import AccountTableActions from '@/components/admin/account/AccountTableActions.vue'
 import AccountBulkActionsBar from '@/components/admin/account/AccountBulkActionsBar.vue'
+// Console theme (ui-el D6): a two-row toolbar with the classification menu and a bulk menu in it; the bulk bar
+// only while accounts are selected, below the list. With the theme off the page keeps its existing layout.
+import AccountBulkMenu from '@/components/admin/account/AccountBulkMenu.vue'
+import { flatThemeActive } from '@/utils/flatTheme'
 import AccountActionMenu from '@/components/admin/account/AccountActionMenu.vue'
 import AccountCardGrid from '@/components/admin/account/AccountCardGrid.vue'
 import AccountCompactList from '@/components/admin/account/AccountCompactList.vue'
@@ -2089,25 +2155,24 @@ function accountHomepageUrl(row: Account): string {
   return baseUrl ? new URL(baseUrl).origin : ''
 }
 
-// All available columns
+// All available columns, in upstream v0.2.9's order; the fork's classification / route column follows the
+// scheduling switch.
 const allColumns = computed(() => {
   const c = [
     { key: 'select', label: '', sortable: false },
     { key: 'name', label: t('admin.accounts.columns.name'), sortable: true, class: 'w-44 min-w-44 max-w-44' },
     { key: 'id', label: t('admin.accounts.columns.id'), sortable: true },
     { key: 'platform_type', label: t('admin.accounts.columns.platformType'), sortable: false },
-    { key: 'usage', label: t('admin.accounts.columns.usage'), sortable: false },
+    { key: 'capacity', label: t('admin.accounts.columns.capacity'), sortable: false },
     { key: 'status', label: t('admin.accounts.columns.status'), sortable: true },
-    { key: 'schedulable', label: t('admin.accounts.columns.schedulable'), sortable: true }
-  ]
-  c.push(
+    { key: 'schedulable', label: t('admin.accounts.columns.schedulable'), sortable: true },
     { key: 'taxonomy_route', label: t('admin.accounts.columns.classificationRoute'), sortable: false },
-    { key: 'capacity', label: t('admin.accounts.columns.capacity'), sortable: false },
     { key: 'today_stats', label: t('admin.accounts.columns.todayStats'), sortable: false }
-  )
+  ]
   if (!authStore.isSimpleMode) {
     c.push({ key: 'groups', label: t('admin.accounts.columns.groups'), sortable: false })
   }
+  c.push({ key: 'usage', label: t('admin.accounts.columns.usage'), sortable: false })
   c.push(
     { key: 'proxy', label: t('admin.accounts.columns.proxy'), sortable: false },
     { key: 'priority', label: t('admin.accounts.columns.priority'), sortable: true },
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index d9a00281150e..b4beeaa1fd2f 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -539,8 +539,8 @@ const userTrendChartData = computed(() => {
   })
 
   const sortedDates = Array.from(allDates).sort()
-  // upstream's 12 series colours (the composable's defaults); the Apple series under the console theme
-  const colors = presentation.value.series
+  // upstream's 12 series colours (the composable's defaults); the console theme's time-series palette under the theme
+  const colors = presentation.value.trend
 
   const datasets = Array.from(userGroups.values()).map((group, idx) => ({
     label: group.name,
diff --git a/frontend/src/views/admin/__tests__/AccountsView.console.spec.ts b/frontend/src/views/admin/__tests__/AccountsView.console.spec.ts
index 217802b0a0af..44f4196fc078 100644
--- a/frontend/src/views/admin/__tests__/AccountsView.console.spec.ts
+++ b/frontend/src/views/admin/__tests__/AccountsView.console.spec.ts
@@ -315,9 +315,10 @@ describe('admin AccountsView Cockpit console', () => {
     const wrapper = mountView()
     await flushPromises()
     // upstream defaults: only today_stats, proxy, notes, scheduler_score and rate_multiplier are hidden;
-    // the scheduling switch sits right after the status column, as upstream orders them
+    // the columns follow upstream v0.2.9's order (capacity, status and the scheduling switch before groups and
+    // usage), with the fork's classification / route column right after the scheduling switch
     expect(wrapper.get('[data-test="view-table"]').attributes('data-columns')).toBe(
-      'select,name,id,platform_type,usage,status,schedulable,taxonomy_route,capacity,groups,priority,' +
+      'select,name,id,platform_type,capacity,status,schedulable,taxonomy_route,groups,usage,priority,' +
         'upstream_billing_rate,last_used_at,created_at,expires_at,actions'
     )
   })
diff --git a/frontend/src/views/public/LegalDocumentView.vue b/frontend/src/views/public/LegalDocumentView.vue
index ebf9fbc1ab19..8a26c0e31ab7 100644
--- a/frontend/src/views/public/LegalDocumentView.vue
+++ b/frontend/src/views/public/LegalDocumentView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-dark-950 dark:text-white">
+  <div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-dark-950 dark:text-white" data-ui="legal">
     <header class="border-b border-gray-200 bg-white/95 dark:border-dark-800 dark:bg-dark-900/95">
       <div class="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-4 sm:px-6">
         <RouterLink to="/home" class="flex min-w-0 items-center gap-3">

From 3550cc38be20720a0215ac0d7d7ab4634329fb53 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Tue, 29 Sep 2026 01:06:23 +0800
Subject: [PATCH 03/11] wip(ui-el): integration pass - CJK tracking, 30px
 toolbar rows, neutral chips, green switches, quiet tray

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/style.css                        | 12 ++++++++
 frontend/src/styles/console/controls.css      | 21 +++++++++++---
 frontend/src/styles/console/data.css          | 20 ++++++++++++-
 .../src/styles/console/pages/accounts.css     | 11 ++++++++
 .../styles/console/pages/dashboard-usage.css  |  7 +++++
 .../console/pages/settings-ops-public.css     | 28 +++++++++++++------
 .../pages/users-groups-proxies-keys.css       | 24 ++++++++++++++++
 frontend/src/styles/console/tokens.css        |  5 +++-
 8 files changed, 114 insertions(+), 14 deletions(-)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index 825f32269535..129aa03e17a7 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -1159,4 +1159,16 @@
     border-color: rgb(var(--ui-line));
     background-color: rgb(var(--ui-surface));
   }
+
+  /* ---------------------------------------------------------------- code
+   * (integration review) Inline code and values set as code (API keys,
+   * proxy addresses) are the reference's value chip (REF-CONSOLE §8.7 prompt
+   * chip, §8.15): Geist Mono in ink-soft on the subtle fill, radius 4. The
+   * accent is not a code colour (preview decision D2). */
+  :where(.flat-theme) .code,
+  :where(.flat-theme) .code:is(.dark *) {
+    border-radius: var(--ui-radius-sm);
+    background-color: rgb(var(--ui-subtle));
+    color: rgb(var(--ui-ink-soft));
+  }
 }
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index c6ab38d2d83a..b57dfeeb6579 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -27,6 +27,9 @@ html.flat-theme {
   --ctl-glyph: var(--ui-control-line);
   /* switch: the track when off (the reference's ink at 20 % is 1.6:1) and the knob */
   --ctl-switch-off: var(--ui-control-line);
+  /* on = the accent, as the reference's rendered route switches (green; mint in dark, where the knob is the dark
+     surface); an ink track made a column of switches the heaviest thing on a table page */
+  --ctl-switch-on: var(--ui-primary);
   --ctl-knob: var(--ui-surface);
   /* segmented control: frame, inset, segment metrics (REF-CONSOLE §8.5) */
   --ctl-seg-frame: var(--ui-line);
@@ -354,10 +357,20 @@ html.flat-theme .date-picker-apply.date-picker-apply:hover {
   color: rgb(var(--ui-on-ink));
 }
 
+/* 4.4 Toolbar density (integration review): a toolbar row holds one control height. The table pages' fixed rows
+   (actions, filters, pagination) and a horizontal row that holds a .btn (the dashboards' time-range bar) draw their
+   fields and their Select / DateRangePicker triggers at the 30px of the search field, the filter pills and the
+   buttons (the reference's /models filter row); a 34px trigger beside a 30px search or button reads as a misaligned
+   row. Labelled form fields elsewhere keep the reference's 34px field. */
+html.flat-theme :is(.table-page-layout > .layout-section-fixed, [class~="flex"][class~="items-center"]:not([class~="flex-col"]):has(> .btn)) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
 /* ================================================================== 5 · switches */
 
-/* The reference settings Toggle (REF-CONSOLE §8.4): 34 x 20, a 16px knob 2px in, on = ink (near-white in dark),
-   150ms. Off = the 3:1 form-control line (the reference's ink at 20 % is 1.6:1 on the surface). Toggle.vue and its
+/* The reference settings Toggle (REF-CONSOLE §8.4): 34 x 20, a 16px knob 2px in, 150ms; on = the accent of its
+   rendered route switches (--ctl-switch-on). Off = the 3:1 form-control line (the reference's ink at 20 % is 1.6:1 on the surface). Toggle.vue and its
    inline copies are a rounded-full button with a 2px transparent edge (h-6 w-11, h-5 w-9; h-4 w-7 keeps its 28 x 16
    size) holding a knob span; on = bg-primary-500 / -600. */
 html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]) {
@@ -374,7 +387,7 @@ html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-
 }
 
 html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):is([class~="bg-primary-500"], [class~="bg-primary-600"]) {
-  background-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ctl-switch-on));
 }
 
 html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]) > span[class~="rounded-full"] {
@@ -428,7 +441,7 @@ html.flat-theme input[type="checkbox"][class~="peer"] + div[class~="peer"][class
 }
 
 html.flat-theme input[type="checkbox"][class~="peer"]:checked + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"]) {
-  background-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ctl-switch-on));
 }
 
 html.flat-theme input[type="checkbox"][class~="peer"]:checked + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"])::after {
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index 6b5e033338d7..6535635a5304 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -770,6 +770,21 @@ html.flat-theme [data-ui~="bulk-bar"] > div:first-child > span:not([class~="text
   color: rgb(var(--ui-faint));
 }
 
+/* The tray's actions: the reference tray carries a single emphasised action, so the bar's many filled buttons
+   (enable / pause / edit / update …) become the default button (surface, control outline, ink text); destructive
+   actions keep the danger outline of .btn-danger. */
+html.flat-theme [data-ui~="bulk-bar"] .btn:is(.btn-primary, .btn-success, .btn-warning, .btn-info) {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  background-image: none;
+  color: rgb(var(--ui-ink));
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="bulk-bar"] .btn:is(.btn-primary, .btn-success, .btn-warning, .btn-info):hover:not(:disabled) {
+  background-color: rgb(var(--ui-subtle));
+}
+
 /* ================================================================== 6 · badges, status, identity */
 
 /* .badge*: the reference's pills (REF §8.8: capsule, Geist Mono uppercase, .025em, 6 / 1 inset, soft semantic
@@ -1022,6 +1037,9 @@ html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(> div[class~
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
+  /* integration review: the usage records tiles are themselves an items-center flex row; in the column the text
+     would sit centred, not on the tile's left edge like every other KPI */
+  align-items: stretch;
   gap: 0;
   min-height: 76px;
   padding: 8px 12px;
@@ -1093,7 +1111,7 @@ html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="roun
   font-weight: 500;
 }
 
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > p[class~="text-green-600"]:not(:first-child) {
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > p[class~="text-green-600"]:not(:first-child):not([class~="text-xl"]) {
   color: rgb(var(--ui-success));
 }
 
diff --git a/frontend/src/styles/console/pages/accounts.css b/frontend/src/styles/console/pages/accounts.css
index f17d9a65de20..1c5374e8dd57 100644
--- a/frontend/src/styles/console/pages/accounts.css
+++ b/frontend/src/styles/console/pages/accounts.css
@@ -436,6 +436,17 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > d
   color: rgb(var(--ui-muted));
 }
 
+/* Integration review: a name that links to the account's homepage sits in HelpTooltip's root, which keeps its own
+   ml-1 (the template's -ml-1 loses to it) and whose link carries font-medium: the linked and the plain names start on
+   the same edge at the same 600 weight. The dotted underline (the link's cue) stays. */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > [data-ui="help-tooltip"]:first-child {
+  margin-left: 0;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > [data-ui="help-tooltip"]:first-child > a {
+  font-weight: 600;
+}
+
 /* Platform / type: the identity chips and the compact-mode line side by side, in at most 18rem (so the status and
    scheduling columns after it keep their place): an account whose chips need more (OAuth with plan and privacy, a
    subscription expiry) moves the compact-mode line, then the later chip groups, to a second line. An API-key
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
index 4dc3c17f81c2..ce6f4c47ee40 100644
--- a/frontend/src/styles/console/pages/dashboard-usage.css
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -1 +1,8 @@
 /* Console theme · page group: dashboards and usage records (owner: the dashboard and usage page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
+
+/* Integration review (preview decision D2): a platform card's total spend is a value, not a state. Ink at 600 (the
+   reference's spend figures) instead of upstream's purple; the mono figure stays. */
+html.flat-theme [data-testid="platform-card"] span[class~="text-purple-600"] {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index 921219815581..bb0398cd19c9 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -29,11 +29,23 @@ html.flat-theme {
      label above and its placeholder inside (the console fields' rule: A2 recipe + behaviour B3.2, which still draws
      the 3:1 form-control line on an empty field without a visible placeholder); focus draws the accent edge. */
   --pub-field-line: var(--ui-line);
+  /* Tracking of the mono captions: the reference's values for Latin capitals (field labels 0.12em; "OR" and the text
+     buttons 0.15em; small meta lines 0.06-0.08em). Captions that carry interface text take the CJK label tracking in
+     the Chinese interface (tokens.css), where the Latin values read as spaced-out characters. Captions that carry the
+     site's own name, subtitle or the fixed English copyright keep their literal values. */
+  --pub-track-label: 0.12em;
+  --pub-track-caps: 0.15em;
+  --pub-track-meta: 0.08em;
+  --pub-track-hint: 0.06em;
 }
 
 html.flat-theme:lang(zh) {
   --pub-mono-size: 11px;
   --pub-mono-leading: 16px;
+  --pub-track-label: var(--ui-label-tracking);
+  --pub-track-caps: var(--ui-label-tracking);
+  --pub-track-meta: var(--ui-label-tracking);
+  --pub-track-hint: var(--ui-label-tracking);
 }
 
 html.flat-theme.dark {
@@ -132,7 +144,7 @@ html.flat-theme [data-ui="auth-column"] > [class~="card-glass"] {
 html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] {
   margin-top: 22px;
   font: 400 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
-  letter-spacing: 0.15em;
+  letter-spacing: var(--pub-track-caps);
   text-transform: uppercase;
   color: rgb(var(--ui-muted));
 }
@@ -210,7 +222,7 @@ html.flat-theme [data-ui="auth-column"] label.input-label {
   display: block;
   margin-bottom: 8px;
   font: 600 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
-  letter-spacing: 0.12em;
+  letter-spacing: var(--pub-track-label);
   text-transform: uppercase;
   text-align: left;
   color: rgb(var(--pub-label));
@@ -219,7 +231,7 @@ html.flat-theme [data-ui="auth-column"] label.input-label {
 html.flat-theme [data-ui="auth-column"] label.input-label > span {
   margin-left: 6px;
   font-weight: 400;
-  letter-spacing: 0.06em;
+  letter-spacing: var(--pub-track-hint);
   color: rgb(var(--ui-muted));
 }
 
@@ -443,7 +455,7 @@ html.flat-theme [data-ui="auth-column"] div[class~="h-px"][class~="flex-1"] {
 
 html.flat-theme [data-ui="auth-column"] div[class~="h-px"][class~="flex-1"] + span {
   font: 600 11px/16.5px var(--ui-font-mono);
-  letter-spacing: 0.15em;
+  letter-spacing: var(--pub-track-caps);
   text-transform: uppercase;
   color: rgb(var(--ui-muted));
 }
@@ -468,7 +480,7 @@ html.flat-theme [data-ui="auth-column"] > div[class~="mt-6"] > button {
   gap: 6px;
   margin-left: 0;
   font: 400 var(--pub-mono-size) / var(--pub-mono-leading) var(--ui-font-mono);
-  letter-spacing: 0.15em;
+  letter-spacing: var(--pub-track-caps);
   text-transform: uppercase;
   text-decoration: none;
   color: rgb(var(--ui-muted));
@@ -822,7 +834,7 @@ html.flat-theme body > div[class~="z-[140]"] > div > div[class~="max-h-[58vh]"]
 
 html.flat-theme body > 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: 0.12em;
+  letter-spacing: var(--pub-track-label);
   text-transform: uppercase;
   color: rgb(var(--ui-label));
 }
@@ -1315,7 +1327,7 @@ html.flat-theme [data-ui="home"] > main > div > div:nth-child(2) > div > svg {
 
 html.flat-theme [data-ui="home"] > main > div > div:nth-child(2) > div > span {
   font: 500 11px/16px var(--ui-font-mono);
-  letter-spacing: 0.06em;
+  letter-spacing: var(--pub-track-hint);
   text-transform: uppercase;
   color: rgb(var(--ui-ink-soft));
 }
@@ -1658,7 +1670,7 @@ html.flat-theme [data-ui="legal"] > main > article > div:first-child > div > spa
 
 html.flat-theme [data-ui="legal"] > main > article > div:first-child p:first-child {
   font: 400 12px/18px var(--ui-font-mono);
-  letter-spacing: 0.08em;
+  letter-spacing: var(--pub-track-meta);
   text-transform: uppercase;
   color: rgb(var(--ui-muted));
 }
diff --git a/frontend/src/styles/console/pages/users-groups-proxies-keys.css b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
index d57d3c792f84..81afd62803ee 100644
--- a/frontend/src/styles/console/pages/users-groups-proxies-keys.css
+++ b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
@@ -1 +1,25 @@
 /* Console theme · page group: users, groups, proxies and API keys (owner: the users, groups, proxies and keys page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
+
+/* Integration review (preview decisions D2 / D3): a user's letter avatar is identity, not a state. Drawn as the
+   reference's letter tile (REF-CONSOLE §8.8: a small square, the control line, the subtle fill, Geist Mono 600 in
+   ink-soft) instead of upstream's accent-tinted 32px circle; the letter stays. */
+html.flat-theme .table-wrapper td[data-column="email"] > div > div[class~="rounded-full"][class~="bg-primary-100"] {
+  flex: none;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme .table-wrapper td[data-column="email"] > div > div[class~="rounded-full"][class~="bg-primary-100"] > span {
+  font: 600 11px/1 var(--ui-font-mono);
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* Integration review: the proxy copy-format menu (IP management, address cell) sets each format on one line where it
+   fits. Upstream's 360px cap broke a copyable proxy URL after "bp-" or inside the address; 34rem holds a SOCKS5 URL
+   with credentials, and the value still wraps anywhere as the fallback. */
+html.flat-theme .table-wrapper td [role="menu"][class~="max-w-[360px]"] {
+  max-width: min(34rem, calc(100vw - 2rem));
+}
diff --git a/frontend/src/styles/console/tokens.css b/frontend/src/styles/console/tokens.css
index 51d6c92e61f4..ce19381bca4c 100644
--- a/frontend/src/styles/console/tokens.css
+++ b/frontend/src/styles/console/tokens.css
@@ -161,10 +161,13 @@
 }
 
 /* Chinese has no capitals and 10px CJK is hard to read: labels in the Chinese interface are 11px
-   (ui-el MAPPING §2.8). i18n keeps <html lang> on the active locale. */
+   (ui-el MAPPING §2.8). i18n keeps <html lang> on the active locale. The reference's 0.12em tracking is a Latin
+   capitals device; on full-width CJK glyphs it reads as spaced-out characters ("管 理 分 类"), so the Chinese interface
+   tracks its labels at 0.04em (picked by eye against 0.02-0.06; the English interface keeps 0.12em). */
 :root.flat-theme:lang(zh) {
   --ui-label-size: 11px;
   --ui-label-leading: 16px;
+  --ui-label-tracking: 0.04em;
 }
 
 /* ------------------------------------------------------------------ roles (dark) */

From 768522e605dd0afb6da6edb41421f498e1400aef Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Tue, 29 Sep 2026 04:43:35 +0800
Subject: [PATCH 04/11] wip(ui-el): wave 2 - every page in the Experiential
 Labs language

Shared layers: platform identity colours back (decision 2), two-line cells
active (decision 3), neutral callouts, muted table heads, dark selected-row
text, legend placement, empty-state centering, mobile page title.
Page files: accounts, dashboard-usage, users-groups-proxies-keys,
settings-ops-public, ops-channels (new), user (new); templates only gain
data-ui hooks.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/account/CreateAccountModal.vue |    2 +-
 .../account/OAuthAuthorizationFlow.vue        |    1 +
 .../admin/account/AccountStatsModal.vue       |    2 +-
 .../admin/account/AccountTestModal.vue        |    2 +-
 .../AnnouncementReadStatusDialog.vue          |    2 +-
 .../AnnouncementTargetingEditor.vue           |    2 +-
 .../admin/codex/CodexRuntimeSettings.vue      |    2 +-
 .../admin/group/GroupRPMOverridesModal.vue    |    4 +-
 .../admin/group/GroupRateMultipliersModal.vue |    4 +-
 .../admin/monitor/MonitorFormDialog.vue       |    1 +
 .../monitor/MonitorTemplateManagerDialog.vue  |    1 +
 .../components/admin/usage/UsageFilters.vue   |    2 +-
 .../src/components/admin/usage/UsageTable.vue |   14 +-
 .../admin/user/GroupReplaceModal.vue          |    2 +-
 .../admin/user/UserAllowedGroupsModal.vue     |    2 +-
 .../admin/user/UserApiKeysModal.vue           |    2 +-
 .../admin/user/UserBalanceHistoryModal.vue    |    2 +-
 .../admin/user/UserPlatformQuotaModal.vue     |    2 +-
 frontend/src/components/keys/UseKeyModal.vue  |    2 +-
 .../modelPlaza/PlazaModelPricingTable.vue     |    1 +
 .../payment/SubscriptionPlanCard.vue          |    4 +-
 .../components/user/MonitorDetailDialog.vue   |    2 +-
 .../user/UserAttributesConfigModal.vue        |    2 +-
 .../user/UserErrorRequestsTable.vue           |    4 +-
 .../components/user/monitor/MonitorCard.vue   |    3 +
 .../user/monitor/MonitorCardGrid.vue          |    2 +-
 .../components/user/monitor/MonitorHero.vue   |    2 +-
 .../ProfileIdentityBindingsSection.vue        |    1 +
 .../src/composables/usePresentationColors.ts  |   34 +-
 .../features/prompt-audit/PromptAuditView.vue |    2 +-
 frontend/src/main.ts                          |    2 +
 frontend/src/styles/console/behaviour.css     |   48 +-
 frontend/src/styles/console/controls.css      |   88 +
 frontend/src/styles/console/data.css          |  494 ++-
 frontend/src/styles/console/overlays.css      |   13 +-
 .../src/styles/console/pages/accounts.css     |  467 +-
 .../styles/console/pages/dashboard-usage.css  |  771 +++-
 .../src/styles/console/pages/ops-channels.css | 3777 +++++++++++++++++
 .../console/pages/settings-ops-public.css     | 1251 ++++++
 frontend/src/styles/console/pages/user.css    | 1646 +++++++
 .../pages/users-groups-proxies-keys.css       | 1868 +++++++-
 frontend/src/styles/console/shell.css         |   28 +
 frontend/src/styles/console/tokens.css        |  138 +
 frontend/src/utils/platformColors.ts          |   26 +-
 frontend/src/views/ModelPlazaView.vue         |    2 +-
 .../src/views/admin/AnnouncementsView.vue     |    3 +-
 frontend/src/views/admin/AuditLogView.vue     |    4 +-
 frontend/src/views/admin/BackupView.vue       |    2 +-
 .../src/views/admin/ChannelMonitorView.vue    |    6 +-
 frontend/src/views/admin/ChannelsView.vue     |   19 +-
 frontend/src/views/admin/DashboardView.vue    |    2 +-
 frontend/src/views/admin/GroupsView.vue       |    7 +-
 frontend/src/views/admin/PluginsView.vue      |    2 +-
 frontend/src/views/admin/PromoCodesView.vue   |    4 +-
 frontend/src/views/admin/ProxiesView.vue      |    4 +-
 frontend/src/views/admin/RedeemView.vue       |    5 +-
 frontend/src/views/admin/RiskControlView.vue  |    4 +-
 frontend/src/views/admin/SettingsView.vue     |    2 +-
 .../src/views/admin/SubscriptionsView.vue     |    4 +-
 .../src/views/admin/SystemPromptsView.vue     |    2 +-
 frontend/src/views/admin/UsageView.vue        |    2 +-
 frontend/src/views/admin/UsersView.vue        |    4 +-
 .../affiliates/AdminAffiliateRecordsTable.vue |    2 +-
 frontend/src/views/admin/ops/OpsDashboard.vue |    2 +-
 .../ops/components/OpsAlertEventsCard.vue     |    2 +-
 .../ops/components/OpsAlertRulesCard.vue      |    4 +-
 .../ops/components/OpsDashboardHeader.vue     |    4 +-
 .../ops/components/OpsErrorDetailModal.vue    |    2 +-
 .../ops/components/OpsErrorDetailsModal.vue   |    2 +-
 .../admin/ops/components/OpsErrorLogTable.vue |    3 +-
 .../ops/components/OpsRequestDetailsModal.vue |    2 +-
 .../ops/components/OpsSettingsDialog.vue      |    2 +-
 .../views/admin/orders/AdminOrdersView.vue    |    2 +-
 .../orders/AdminPaymentDashboardView.vue      |    2 +-
 .../admin/orders/AdminPaymentPlansView.vue    |    4 +-
 .../src/views/admin/orders/PlanEditDialog.vue |    4 +-
 frontend/src/views/user/AffiliateView.vue     |    2 +-
 .../src/views/user/AvailableChannelsView.vue  |    2 +-
 .../src/views/user/BatchImageGuideView.vue    |    2 +-
 .../src/views/user/ChannelStatusV2View.vue    |    2 +-
 frontend/src/views/user/DashboardView.vue     |    2 +-
 frontend/src/views/user/KeysView.vue          |    1 +
 frontend/src/views/user/PaymentView.vue       |    8 +-
 frontend/src/views/user/RedeemView.vue        |    2 +-
 frontend/src/views/user/SubscriptionsView.vue |    6 +-
 frontend/src/views/user/UsageView.vue         |    2 +-
 frontend/src/views/user/UserOrdersView.vue    |    2 +-
 87 files changed, 10632 insertions(+), 239 deletions(-)
 create mode 100644 frontend/src/styles/console/pages/ops-channels.css
 create mode 100644 frontend/src/styles/console/pages/user.css

diff --git a/frontend/src/components/account/CreateAccountModal.vue b/frontend/src/components/account/CreateAccountModal.vue
index c7f4a368b156..8eb034c1bc0d 100644
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -6,7 +6,7 @@
     @close="handleClose"
   >
     <!-- Step Indicator for OAuth accounts -->
-    <div v-if="isOAuthFlow" class="mb-6 flex items-center justify-center">
+    <div v-if="isOAuthFlow" class="mb-6 flex items-center justify-center" data-ui="account-create-steps">
       <div class="flex items-center space-x-4">
         <div class="flex items-center">
           <div
diff --git a/frontend/src/components/account/OAuthAuthorizationFlow.vue b/frontend/src/components/account/OAuthAuthorizationFlow.vue
index 0c16efb85726..977e76f63446 100644
--- a/frontend/src/components/account/OAuthAuthorizationFlow.vue
+++ b/frontend/src/components/account/OAuthAuthorizationFlow.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-700 dark:bg-blue-900/30"
+    data-ui="account-oauth-flow"
   >
       <div class="flex items-start gap-4">
       <div class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-blue-500">
diff --git a/frontend/src/components/admin/account/AccountStatsModal.vue b/frontend/src/components/admin/account/AccountStatsModal.vue
index 2c5af222faf1..162d1ebd91fc 100644
--- a/frontend/src/components/admin/account/AccountStatsModal.vue
+++ b/frontend/src/components/admin/account/AccountStatsModal.vue
@@ -5,7 +5,7 @@
     width="extra-wide"
     @close="handleClose"
   >
-    <div class="space-y-6">
+    <div class="space-y-6" data-ui="account-stats">
       <!-- Account Info Header -->
       <div
         v-if="account"
diff --git a/frontend/src/components/admin/account/AccountTestModal.vue b/frontend/src/components/admin/account/AccountTestModal.vue
index 4c54900aa37c..dcb3f6416d96 100644
--- a/frontend/src/components/admin/account/AccountTestModal.vue
+++ b/frontend/src/components/admin/account/AccountTestModal.vue
@@ -5,7 +5,7 @@
     width="normal"
     @close="handleClose"
   >
-    <div class="space-y-4">
+    <div class="space-y-4" data-ui="account-test">
       <!-- Account Info Card -->
       <div
         v-if="account"
diff --git a/frontend/src/components/admin/announcements/AnnouncementReadStatusDialog.vue b/frontend/src/components/admin/announcements/AnnouncementReadStatusDialog.vue
index 60c01c6dba9b..d6ed14032731 100644
--- a/frontend/src/components/admin/announcements/AnnouncementReadStatusDialog.vue
+++ b/frontend/src/components/admin/announcements/AnnouncementReadStatusDialog.vue
@@ -5,7 +5,7 @@
     width="extra-wide"
     @close="handleClose"
   >
-    <div class="space-y-4">
+    <div data-ui="announcement-read-status" class="space-y-4">
       <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <div class="flex-1">
           <input
diff --git a/frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue b/frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue
index 355f539968ed..e04872d07066 100644
--- a/frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue
+++ b/frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-dark-700 dark:bg-dark-800/50">
+  <div data-ui="announcement-targeting" class="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-dark-700 dark:bg-dark-800/50">
     <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
       <div>
         <div class="text-sm font-medium text-gray-900 dark:text-white">
diff --git a/frontend/src/components/admin/codex/CodexRuntimeSettings.vue b/frontend/src/components/admin/codex/CodexRuntimeSettings.vue
index b120854cdaa4..2b2e5e64c83b 100644
--- a/frontend/src/components/admin/codex/CodexRuntimeSettings.vue
+++ b/frontend/src/components/admin/codex/CodexRuntimeSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="space-y-4" aria-live="polite">
+  <section class="space-y-4" aria-live="polite" data-ui="codex-runtime">
     <h2 class="text-xl font-semibold text-ink">{{ text('Codex 路由设置', 'Codex route settings') }}</h2>
     <p class="text-sm text-muted">{{ text('路由材料有效、响应完整、模型声明一致是不同证据。STATE 长度仅供观测，不能证明账号套餐或模型质量；本页操作不包含质量验证。', 'Valid routing material, a complete response and a matching model declaration are separate observations. STATE length proves neither account plan nor model quality; operations on this page do not test quality.') }}</p>
     <p v-if="loading" class="text-sm text-muted">{{ t('common.loading') }}</p>
diff --git a/frontend/src/components/admin/group/GroupRPMOverridesModal.vue b/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
index 508aad1e49fc..822c864b6c73 100644
--- a/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
+++ b/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
@@ -1,9 +1,9 @@
 <template>
   <BaseDialog :show="show" :title="t('admin.groups.rpmOverridesTitle')" width="wide" @close="handleClose">
-    <div v-if="group" class="space-y-4">
+    <div v-if="group" data-ui="group-rpm-overrides" class="space-y-4">
       <!-- 分组信息 -->
       <div class="flex flex-wrap items-center gap-3 rounded-lg bg-gray-50 px-4 py-2.5 text-sm dark:bg-dark-700">
-        <span class="inline-flex items-center gap-1.5" :class="platformColorClass">
+        <span data-ui="platform-text" class="inline-flex items-center gap-1.5" :class="platformColorClass">
           <PlatformIcon :platform="group.platform" size="sm" />
           {{ t('admin.groups.platforms.' + group.platform) }}
         </span>
diff --git a/frontend/src/components/admin/group/GroupRateMultipliersModal.vue b/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
index 81b4c30d5e89..54039ac9827d 100644
--- a/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
+++ b/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
@@ -1,9 +1,9 @@
 <template>
   <BaseDialog :show="show" :title="t('admin.groups.rateMultipliersTitle')" width="wide" @close="handleClose">
-    <div v-if="group" class="space-y-4">
+    <div v-if="group" data-ui="group-rate-multipliers" class="space-y-4">
       <!-- 分组信息 -->
       <div class="flex flex-wrap items-center gap-3 rounded-lg bg-gray-50 px-4 py-2.5 text-sm dark:bg-dark-700">
-        <span class="inline-flex items-center gap-1.5" :class="platformColorClass">
+        <span data-ui="platform-text" class="inline-flex items-center gap-1.5" :class="platformColorClass">
           <PlatformIcon :platform="group.platform" size="sm" />
           {{ t('admin.groups.platforms.' + group.platform) }}
         </span>
diff --git a/frontend/src/components/admin/monitor/MonitorFormDialog.vue b/frontend/src/components/admin/monitor/MonitorFormDialog.vue
index 3ec29f0dcb26..558f775d8d9f 100644
--- a/frontend/src/components/admin/monitor/MonitorFormDialog.vue
+++ b/frontend/src/components/admin/monitor/MonitorFormDialog.vue
@@ -43,6 +43,7 @@
             :aria-pressed="form.provider === opt.value"
             class="flex items-center justify-center gap-2 rounded-lg border-2 px-3 py-2.5 text-sm font-medium transition-colors"
             :class="providerPickerClass(opt.value, form.provider === opt.value)"
+            data-ui="platform-text"
             @click="selectProvider(opt.value)"
           >
             <ProviderIcon :provider="opt.value" :size="18" />
diff --git a/frontend/src/components/admin/monitor/MonitorTemplateManagerDialog.vue b/frontend/src/components/admin/monitor/MonitorTemplateManagerDialog.vue
index 546568d4fecb..3baf851ba27e 100644
--- a/frontend/src/components/admin/monitor/MonitorTemplateManagerDialog.vue
+++ b/frontend/src/components/admin/monitor/MonitorTemplateManagerDialog.vue
@@ -137,6 +137,7 @@
             type="button"
             class="rounded-lg border-2 px-3 py-2 text-sm font-medium transition-colors"
             :class="providerPickerClass(opt.value, form.provider === opt.value)"
+            data-ui="platform-text"
             @click="form.provider = opt.value"
           >
             {{ opt.label }}
diff --git a/frontend/src/components/admin/usage/UsageFilters.vue b/frontend/src/components/admin/usage/UsageFilters.vue
index b772ee5f977b..5e69ee294eb0 100644
--- a/frontend/src/components/admin/usage/UsageFilters.vue
+++ b/frontend/src/components/admin/usage/UsageFilters.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="flat ? 'p-4 sm:p-6' : 'card p-6'">
+  <div :class="flat ? 'p-4 sm:p-6' : 'card p-6'" data-ui="usage-filters">
     <!-- Toolbar: left filters (multi-line) + right actions -->
     <div class="flex flex-wrap items-end justify-between gap-4">
       <!-- Left: filters (allowed to wrap to multiple rows) -->
diff --git a/frontend/src/components/admin/usage/UsageTable.vue b/frontend/src/components/admin/usage/UsageTable.vue
index 16dc6498534e..d3f19eb8ba23 100644
--- a/frontend/src/components/admin/usage/UsageTable.vue
+++ b/frontend/src/components/admin/usage/UsageTable.vue
@@ -119,7 +119,7 @@
         </template>
 
         <template #cell-group="{ row }">
-          <span v-if="row.group" class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
+          <span v-if="row.group" data-ui="category-chip" class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
             {{ row.group.name }}
           </span>
           <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
@@ -127,12 +127,12 @@
 
         <template #cell-stream="{ row }">
           <div class="flex flex-wrap items-center gap-1">
-            <span data-testid="request-type-badge" class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="getRequestTypeBadgeClass(row)">
+            <span data-testid="request-type-badge" data-ui="category-chip" class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="getRequestTypeBadgeClass(row)">
               {{ getRequestTypeLabel(row) }}
             </span>
             <span
               v-if="row.native_compaction_v2"
-              data-testid="native-compaction-badge"
+              data-testid="native-compaction-badge" data-ui="category-chip"
               class="inline-flex items-center rounded bg-teal-100 px-2 py-0.5 text-xs font-medium text-teal-800 dark:bg-teal-900 dark:text-teal-200"
             >
               {{ t('usage.nativeCompactionV2') }}
@@ -141,7 +141,7 @@
         </template>
 
         <template #cell-billing_mode="{ row }">
-          <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="getBillingModeBadgeClass(getDisplayBillingMode(row))">
+          <span data-ui="category-chip" class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="getBillingModeBadgeClass(getDisplayBillingMode(row))">
             {{ getBillingModeLabel(getDisplayBillingMode(row), t) }}
           </span>
         </template>
@@ -176,7 +176,7 @@
                 <div v-if="row.cache_creation_tokens > 0" class="inline-flex items-center gap-1">
                   <svg class="h-3.5 w-3.5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
                   <span class="font-medium text-amber-600 dark:text-amber-400">{{ formatCacheTokens(row.cache_creation_tokens) }}</span>
-                  <span v-if="row.cache_creation_1h_tokens > 0" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-orange-100 text-orange-600 ring-1 ring-inset ring-orange-200 dark:bg-orange-500/20 dark:text-orange-400 dark:ring-orange-500/30">1h</span>
+                  <span v-if="row.cache_creation_1h_tokens > 0" data-ui="category-chip" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-orange-100 text-orange-600 ring-1 ring-inset ring-orange-200 dark:bg-orange-500/20 dark:text-orange-400 dark:ring-orange-500/30">1h</span>
                   <span v-if="row.cache_ttl_overridden" :title="t('usage.cacheTtlOverriddenHint')" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-rose-100 text-rose-600 ring-1 ring-inset ring-rose-200 dark:bg-rose-500/20 dark:text-rose-400 dark:ring-rose-500/30 cursor-help">R</span>
                 </div>
               </div>
@@ -356,14 +356,14 @@
                 <div v-if="tokenTooltipData.cache_creation_5m_tokens > 0" class="flex items-center justify-between gap-4">
                   <span class="text-gray-400 flex items-center gap-1.5">
                     {{ t('admin.usage.cacheCreation5mTokens') }}
-                    <span class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-amber-500/20 text-amber-400 ring-1 ring-inset ring-amber-500/30">5m</span>
+                    <span data-ui="category-chip" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-amber-500/20 text-amber-400 ring-1 ring-inset ring-amber-500/30">5m</span>
                   </span>
                   <span class="font-medium text-white">{{ tokenTooltipData.cache_creation_5m_tokens.toLocaleString() }}</span>
                 </div>
                 <div v-if="tokenTooltipData.cache_creation_1h_tokens > 0" class="flex items-center justify-between gap-4">
                   <span class="text-gray-400 flex items-center gap-1.5">
                     {{ t('admin.usage.cacheCreation1hTokens') }}
-                    <span class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-orange-500/20 text-orange-400 ring-1 ring-inset ring-orange-500/30">1h</span>
+                    <span data-ui="category-chip" class="inline-flex items-center rounded px-1 py-px text-[10px] font-medium leading-tight bg-orange-500/20 text-orange-400 ring-1 ring-inset ring-orange-500/30">1h</span>
                   </span>
                   <span class="font-medium text-white">{{ tokenTooltipData.cache_creation_1h_tokens.toLocaleString() }}</span>
                 </div>
diff --git a/frontend/src/components/admin/user/GroupReplaceModal.vue b/frontend/src/components/admin/user/GroupReplaceModal.vue
index 3a34274cae0c..f71c7fc4e335 100644
--- a/frontend/src/components/admin/user/GroupReplaceModal.vue
+++ b/frontend/src/components/admin/user/GroupReplaceModal.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseDialog :show="show" :title="t('admin.users.replaceGroupTitle')" width="narrow" @close="$emit('close')">
-    <div v-if="oldGroup" class="space-y-4">
+    <div v-if="oldGroup" data-ui="group-replace" class="space-y-4">
       <!-- 提示信息 -->
       <p class="text-sm text-gray-600 dark:text-gray-400">
         {{ t('admin.users.replaceGroupHint', { old: oldGroup.name }) }}
diff --git a/frontend/src/components/admin/user/UserAllowedGroupsModal.vue b/frontend/src/components/admin/user/UserAllowedGroupsModal.vue
index 7486222572e7..8fb26005a430 100644
--- a/frontend/src/components/admin/user/UserAllowedGroupsModal.vue
+++ b/frontend/src/components/admin/user/UserAllowedGroupsModal.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseDialog :show="show" :title="t('admin.users.groupConfig')" width="wide" @close="$emit('close')">
-    <div v-if="user" class="space-y-6">
+    <div v-if="user" data-ui="user-allowed-groups" class="space-y-6">
       <!-- 用户信息头部 -->
       <div class="flex items-center gap-4 rounded-2xl bg-gradient-to-r from-primary-50 to-primary-100 p-5 dark:from-primary-900/30 dark:to-primary-800/20">
         <div class="flex h-14 w-14 items-center justify-center rounded-full bg-white shadow-sm dark:bg-dark-700">
diff --git a/frontend/src/components/admin/user/UserApiKeysModal.vue b/frontend/src/components/admin/user/UserApiKeysModal.vue
index 8a027ad41046..da20b2fbfc24 100644
--- a/frontend/src/components/admin/user/UserApiKeysModal.vue
+++ b/frontend/src/components/admin/user/UserApiKeysModal.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseDialog :show="show" :title="t('admin.users.userApiKeys')" width="wide" @close="handleClose">
-    <div v-if="user" class="space-y-4">
+    <div v-if="user" data-ui="user-api-keys" class="space-y-4">
       <div class="flex items-center gap-3 rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
         <div class="flex h-10 w-10 items-center justify-center rounded-full bg-primary-100 dark:bg-primary-900/30">
           <span class="text-lg font-medium text-primary-700 dark:text-primary-300">{{ user.email.charAt(0).toUpperCase() }}</span>
diff --git a/frontend/src/components/admin/user/UserBalanceHistoryModal.vue b/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
index b9e59433b6b3..1deb4f7ba810 100644
--- a/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
+++ b/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseDialog :show="show" :title="t('admin.users.balanceHistoryTitle')" width="wide" :close-on-click-outside="true" :z-index="40" @close="$emit('close')">
-    <div v-if="user" class="space-y-4">
+    <div v-if="user" data-ui="user-balance-history" class="space-y-4">
       <!-- User header: two-row layout with full user info -->
       <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-700">
         <!-- Row 1: avatar + email/username/created_at (left) + current balance (right) -->
diff --git a/frontend/src/components/admin/user/UserPlatformQuotaModal.vue b/frontend/src/components/admin/user/UserPlatformQuotaModal.vue
index b1c5e799dbcb..4c009ccbdf4b 100644
--- a/frontend/src/components/admin/user/UserPlatformQuotaModal.vue
+++ b/frontend/src/components/admin/user/UserPlatformQuotaModal.vue
@@ -5,7 +5,7 @@
     width="wide"
     @close="$emit('close')"
   >
-    <div v-if="user" class="space-y-4">
+    <div v-if="user" data-ui="user-platform-quota" class="space-y-4">
       <div
         v-if="hasActiveSubscription"
         class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-500/30 dark:bg-amber-500/10 dark:text-amber-200"
diff --git a/frontend/src/components/keys/UseKeyModal.vue b/frontend/src/components/keys/UseKeyModal.vue
index adb4d3752220..741fc014ceaf 100644
--- a/frontend/src/components/keys/UseKeyModal.vue
+++ b/frontend/src/components/keys/UseKeyModal.vue
@@ -5,7 +5,7 @@
     width="wide"
     @close="emit('close')"
   >
-    <div class="space-y-4">
+    <div data-ui="use-key" class="space-y-4">
       <!-- No Group Assigned Warning -->
       <div v-if="!platform" class="flex items-start gap-3 p-4 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
         <svg class="w-5 h-5 text-yellow-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
diff --git a/frontend/src/components/modelPlaza/PlazaModelPricingTable.vue b/frontend/src/components/modelPlaza/PlazaModelPricingTable.vue
index 0a8cbfa9f391..19e221e32278 100644
--- a/frontend/src/components/modelPlaza/PlazaModelPricingTable.vue
+++ b/frontend/src/components/modelPlaza/PlazaModelPricingTable.vue
@@ -79,6 +79,7 @@
               </span>
               <span
                 v-if="platform && m.platform !== platform"
+                data-ui="platform-chip"
                 :class="[
                   'inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium',
                   platformBadgeLightClass(m.platform)
diff --git a/frontend/src/components/payment/SubscriptionPlanCard.vue b/frontend/src/components/payment/SubscriptionPlanCard.vue
index 0d60f67791a3..05172a9a517b 100644
--- a/frontend/src/components/payment/SubscriptionPlanCard.vue
+++ b/frontend/src/components/payment/SubscriptionPlanCard.vue
@@ -8,7 +8,7 @@
     ]"
   >
     <!-- Colored top accent bar -->
-    <div :class="['h-1.5', accentClass]" />
+    <div data-ui="platform-text" :class="['h-1.5', accentClass]" />
 
     <div class="flex flex-1 flex-col p-4">
       <!-- Header: name + badge + price -->
@@ -31,7 +31,7 @@
             <span v-if="plan.currency" class="text-xs font-medium text-gray-400 dark:text-dark-500">{{ plan.currency }}</span>
           </div>
           <div class="flex items-center justify-end gap-1">
-            <span :class="['inline-flex shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium', badgeLightClass]">
+            <span data-ui="platform-chip" :class="['inline-flex shrink-0 rounded-full px-2 py-0.5 text-[11px] font-medium', badgeLightClass]">
               {{ pLabel }}
             </span>
             <span class="text-[11px] text-gray-400 dark:text-dark-500">/ {{ validitySuffix }}</span>
diff --git a/frontend/src/components/user/MonitorDetailDialog.vue b/frontend/src/components/user/MonitorDetailDialog.vue
index 1ba999198f99..6b9a289d08d2 100644
--- a/frontend/src/components/user/MonitorDetailDialog.vue
+++ b/frontend/src/components/user/MonitorDetailDialog.vue
@@ -11,7 +11,7 @@
     <div v-else-if="!detail" class="py-8 text-center text-sm text-gray-500">
       {{ t('channelStatus.detailLoadError') }}
     </div>
-    <div v-else class="overflow-x-auto">
+    <div v-else class="overflow-x-auto" data-ui="monitor-detail">
       <table class="w-full text-left text-sm">
         <thead class="border-b border-gray-200 dark:border-dark-700">
           <tr class="text-xs uppercase tracking-wider text-gray-500 dark:text-gray-400">
diff --git a/frontend/src/components/user/UserAttributesConfigModal.vue b/frontend/src/components/user/UserAttributesConfigModal.vue
index 2d8e05003412..d8281e924307 100644
--- a/frontend/src/components/user/UserAttributesConfigModal.vue
+++ b/frontend/src/components/user/UserAttributesConfigModal.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseDialog :show="show" :title="t('admin.users.attributes.title')" width="wide" @close="emit('close')">
-    <div class="space-y-4">
+    <div data-ui="user-attributes-config" class="space-y-4">
       <!-- Header with Add Button -->
       <div class="flex items-center justify-between">
         <p class="text-sm text-gray-500 dark:text-dark-400">
diff --git a/frontend/src/components/user/UserErrorRequestsTable.vue b/frontend/src/components/user/UserErrorRequestsTable.vue
index 2465fe2f6668..677e13b7daff 100644
--- a/frontend/src/components/user/UserErrorRequestsTable.vue
+++ b/frontend/src/components/user/UserErrorRequestsTable.vue
@@ -59,7 +59,7 @@
 
         <template #cell-group="{ row }">
           <span
-            v-if="row.group_name"
+            v-if="row.group_name" data-ui="category-chip"
             class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200"
           >{{ row.group_name }}</span>
           <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
@@ -67,7 +67,7 @@
 
         <template #cell-type="{ row }">
           <span
-            v-if="requestTypeBadge(row)"
+            v-if="requestTypeBadge(row)" data-ui="category-chip"
             class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium"
             :class="requestTypeBadge(row)!.className"
           >{{ requestTypeBadge(row)!.label }}</span>
diff --git a/frontend/src/components/user/monitor/MonitorCard.vue b/frontend/src/components/user/monitor/MonitorCard.vue
index 268790794ca6..a74bfde7a4a1 100644
--- a/frontend/src/components/user/monitor/MonitorCard.vue
+++ b/frontend/src/components/user/monitor/MonitorCard.vue
@@ -9,6 +9,7 @@
       <span
         class="w-9 h-9 rounded-xl ring-1 ring-black/5 dark:ring-white/10 grid place-items-center flex-shrink-0"
         :class="[providerGradient(item.provider), providerTintClass]"
+        data-ui="platform-text"
       >
         <ProviderIcon :provider="item.provider" :size="20" />
       </span>
@@ -20,6 +21,7 @@
           <span
             class="inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium flex-shrink-0"
             :class="providerBadgeClass(item.provider)"
+            data-ui="platform-chip"
           >
             {{ providerLabel(item.provider) }}
           </span>
@@ -30,6 +32,7 @@
           <span
             v-if="item.group_name"
             class="inline-flex items-center rounded-md px-1.5 py-0.5 text-[10px] font-medium bg-gray-100 text-gray-600 dark:bg-dark-700 dark:text-gray-300 flex-shrink-0"
+            data-ui="category-chip"
           >
             {{ item.group_name }}
           </span>
diff --git a/frontend/src/components/user/monitor/MonitorCardGrid.vue b/frontend/src/components/user/monitor/MonitorCardGrid.vue
index c7d24c012396..8a398d54aaeb 100644
--- a/frontend/src/components/user/monitor/MonitorCardGrid.vue
+++ b/frontend/src/components/user/monitor/MonitorCardGrid.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div data-ui="monitor-grid">
     <div
       v-if="loading && items.length === 0"
       class="grid gap-5 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
diff --git a/frontend/src/components/user/monitor/MonitorHero.vue b/frontend/src/components/user/monitor/MonitorHero.vue
index bc2b5f6f8780..003659392317 100644
--- a/frontend/src/components/user/monitor/MonitorHero.vue
+++ b/frontend/src/components/user/monitor/MonitorHero.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="py-3 md:py-4">
+  <section class="py-3 md:py-4" data-ui="monitor-hero">
     <div class="flex items-center justify-end gap-3 flex-wrap">
       <div
         role="tablist"
diff --git a/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue b/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
index 8764c07e3aed..c636f13c3ede 100644
--- a/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
+++ b/frontend/src/components/user/profile/ProfileIdentityBindingsSection.vue
@@ -30,6 +30,7 @@
         <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
           <div class="flex min-w-0 flex-1 items-start gap-4">
             <div
+              data-ui="platform-chip"
               :class="providerIconClass(item.provider)"
               class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-sm font-semibold"
             >
diff --git a/frontend/src/composables/usePresentationColors.ts b/frontend/src/composables/usePresentationColors.ts
index 43a3db30263a..f2def149cf17 100644
--- a/frontend/src/composables/usePresentationColors.ts
+++ b/frontend/src/composables/usePresentationColors.ts
@@ -6,8 +6,8 @@ import type { Plugin } from 'chart.js'
 // the Experiential Labs console's charts (ui-el REF-CONSOLE §8.14): the UI font at 11px, axis labels in the muted
 // text colour, one 1px structural gridline per value step and none across the categories, no axis lines or tick
 // marks, three value steps, level labels (the ones that do not fit are skipped); 1.5px lines without dots (a dot on
-// hover), a thinner ring; legends with 8px squares (2px corners) in the series' solid colour and the faint text
-// colour; tooltips as the reference's popover (surface, 1px line, 6px radius, 12 / 10 inset, 11px, the popover
+// hover), a thinner ring; legends under the plot at its left edge, with 8px squares (2px corners) in the series'
+// solid colour and the faint text colour; tooltips as the reference's popover (surface, 1px line, 6px radius, 12 / 10 inset, 11px, the popover
 // shadow, no caret, solid colour keys). A chart's own options still win over these defaults.
 // Every default changed is saved first and restored when the theme is switched off at runtime. Charts re-resolve the
 // defaults on the update that follows the next colour read.
@@ -109,6 +109,34 @@ const consoleTooltipShadow: Plugin = {
 }
 let tooltipShadowRegistered = false
 
+// Legends sit under the plot, at its left edge (REF-CONSOLE §8.14: the /logs chart's legend). Upstream's line charts
+// ask for position 'top' in their own options, which win over the defaults, so while the console charts are on this
+// plugin moves every shown legend to bottom / start before the layout pass (the legend plugin may have configured
+// its box earlier in the same update, so the box is moved too). The chart's own choice is kept on the chart and put
+// back on the first update after the theme is switched off.
+type LegendPlacement = { position: unknown; align: unknown }
+type LegendOptionsLike = { display?: unknown; position?: unknown; align?: unknown }
+const consoleLegendPlacement: Plugin = {
+  id: 'consoleLegendPlacement',
+  beforeUpdate(chart) {
+    const legend = (chart.options.plugins as unknown as { legend?: LegendOptionsLike } | undefined)?.legend
+    if (!legend) return
+    const holder = chart as unknown as { $consoleLegendPlacement?: LegendPlacement; legend?: { position?: unknown } }
+    if (consoleCharts && legend.display !== false) {
+      if (!holder.$consoleLegendPlacement) holder.$consoleLegendPlacement = { position: legend.position, align: legend.align }
+      legend.position = 'bottom'
+      legend.align = 'start'
+      if (holder.legend) holder.legend.position = 'bottom'
+    } else if (!consoleCharts && holder.$consoleLegendPlacement) {
+      const own = holder.$consoleLegendPlacement
+      legend.position = own.position
+      legend.align = own.align
+      if (holder.legend) holder.legend.position = own.position
+      delete holder.$consoleLegendPlacement
+    }
+  }
+}
+
 function applyConsoleChartDefaults(styles: CSSStyleDeclaration, dark: boolean) {
   const token = (name: string) => styles.getPropertyValue(name).trim()
   const rgb = (name: string, fallback: string) => {
@@ -182,7 +210,7 @@ function applyConsoleChartDefaults(styles: CSSStyleDeclaration, dark: boolean) {
   savedDefaults = saved
   tooltipShadowColor = dark ? 'rgba(0, 0, 0, 0.55)' : 'rgba(20, 20, 18, 0.08)'
   if (!tooltipShadowRegistered) {
-    Chart.register(consoleTooltipShadow)
+    Chart.register(consoleTooltipShadow, consoleLegendPlacement)
     tooltipShadowRegistered = true
   }
   consoleCharts = true
diff --git a/frontend/src/features/prompt-audit/PromptAuditView.vue b/frontend/src/features/prompt-audit/PromptAuditView.vue
index e0327e4a3679..a49843f85c98 100644
--- a/frontend/src/features/prompt-audit/PromptAuditView.vue
+++ b/frontend/src/features/prompt-audit/PromptAuditView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="mx-auto max-w-[1600px]" :class="activeTab === 'config' && draft ? 'pb-28' : 'pb-8'">
+    <div class="mx-auto max-w-[1600px]" :class="activeTab === 'config' && draft ? 'pb-28' : 'pb-8'" data-ui="prompt-audit-page">
       <header class="mb-6 flex flex-wrap items-end justify-between gap-4">
         <div>
           <p class="text-xs font-semibold uppercase tracking-[0.16em] text-primary-600 dark:text-primary-400">{{ t('nav.securityAudit') }}</p>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 9e87692f486f..90dbacb863ef 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -19,6 +19,8 @@ import './styles/console/pages/accounts.css'
 import './styles/console/pages/dashboard-usage.css'
 import './styles/console/pages/users-groups-proxies-keys.css'
 import './styles/console/pages/settings-ops-public.css'
+import './styles/console/pages/ops-channels.css'
+import './styles/console/pages/user.css'
 import { applyFlatTheme } from '@/utils/flatTheme'
 
 function initIOSViewportZoomFix() {
diff --git a/frontend/src/styles/console/behaviour.css b/frontend/src/styles/console/behaviour.css
index 36e3077a6cf2..e6f45f9b9131 100644
--- a/frontend/src/styles/console/behaviour.css
+++ b/frontend/src/styles/console/behaviour.css
@@ -55,18 +55,16 @@ html.flat-theme [class~="card"] > div[class~="mb-4"][class~="justify-between"]:h
   }
 }
 
-/* Preview decision D5 (Experiential Labs density): accounts, users, API keys and IP management use single-line rows
-   that scroll sideways, like the reference; the usage records table keeps its two-line cells. The two-line layouts
-   the owner approved in rounds 4-5 (B1.4 outside usage, B1.5-B1.10) stay available behind `ui-cells-two-line` on
-   <html>, which nothing sets by default; the owner's answer decides whether they come back or go. */
+/* Owner decision (2026-09-29, after the Experiential Labs preview): the two-line cell layouts approved in rounds 4-5
+   stay (B1.4-B1.10); the usage records table keeps its two-line cells too. */
 /* B1.4 Timestamps on two lines (date / time; approved round 4): the cell text becomes a block as wide as its
    longer part, so it breaks at the space and never inside the date or the time. Only in the tables chosen;
    cells are found by data-column, so hiding columns does not switch it off. 账号管理「最近使用」 is relative
    (「2天前」) and stays one line. */
 html.flat-theme .table-wrapper[data-table="usage"] td[data-column="created_at"] > span,
-html.flat-theme.ui-cells-two-line .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="accounts"]) td[data-column="created_at"] > span,
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="users"] td:is([data-column="created_at"], [data-column="last_used_at"], [data-column="last_active_at"]) > span,
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-column="expiry"] > div > span:first-child {
+html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="accounts"]) td[data-column="created_at"] > span,
+html.flat-theme .table-wrapper[data-table="users"] td:is([data-column="created_at"], [data-column="last_used_at"], [data-column="last_active_at"]) > span,
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="expiry"] > div > span:first-child {
   display: inline-block;
   width: min-content;
   white-space: normal;
@@ -74,7 +72,7 @@ html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-c
 
 /* B1.5 账号管理「过期时间」 (「2026-10-25 08:00」): a line may break after a hyphen, so min-content would split the
    date; a width that holds the date keeps it whole and moves the time to line two. */
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="accounts"] td[data-column="expires_at"] > div > span:first-child {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="expires_at"] > div > span:first-child {
   display: inline-block;
   max-width: 10ch;
   white-space: normal;
@@ -83,7 +81,7 @@ html.flat-theme.ui-cells-two-line .table-wrapper[data-table="accounts"] td[data-
 /* B1.6 IP管理 names break only at a space or a hyphen (「美国原生- / 超高质量」) and stay whole without one; the
    location breaks only at the spaces around 「·」 (approved round 4). keep-all keeps Chinese words together;
    min-content lets a longer part widen the column instead of running into the next one. */
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-column="name"] > span {
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="name"] > span {
   display: inline-block;
   min-width: min-content;
   max-width: 7.5em;
@@ -91,7 +89,7 @@ html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-c
   word-break: keep-all;
 }
 
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-column="location"] span[class~="text-sm"] {
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="location"] span[class~="text-sm"] {
   min-width: min-content;
   max-width: 5em;
   white-space: normal;
@@ -100,7 +98,7 @@ html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-c
 
 /* B1.7 API 密钥 group cell: the badge always on line one and 「选择分组 ⌄」 on line two (approved round 4), so the
    parts never split unpredictably and the column is as wide as the wider line. */
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="keys"] td[data-column="group"] button {
+html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button {
   display: grid;
   grid-template-columns: max-content max-content;
   justify-content: start;
@@ -108,38 +106,41 @@ html.flat-theme.ui-cells-two-line .table-wrapper[data-table="keys"] td[data-colu
   gap: 0.25rem;
 }
 
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="keys"] td[data-column="group"] button > :first-child {
+html.flat-theme .table-wrapper[data-table="keys"] td[data-column="group"] button > :first-child {
   grid-column: 1 / -1;
   justify-self: start;
 }
 
 /* B1.8 用户管理: 「充值」 under the amount (approved round 4); the button's own inset is pulled back so its label
    lines up with the amount. */
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="users"] td[data-column="balance"] > div {
+html.flat-theme .table-wrapper[data-table="users"] td[data-column="balance"] > div {
   flex-direction: column;
   align-items: flex-start;
   gap: 0.125rem;
 }
 
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="users"] td[data-column="balance"] > div > button {
+html.flat-theme .table-wrapper[data-table="users"] td[data-column="balance"] > div > button {
   margin-left: -0.5rem;
 }
 
 /* B1.9 用户管理 time headers wrap after four characters (「最后活跃 / 时间」; English at the space), so the columns
-   are only as wide as the two-line timestamps below them (approved round 5). */
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="users"] th:is([data-column="last_active_at"], [data-column="last_used_at"], [data-column="created_at"]) > div > span:first-child {
+   are only as wide as the two-line timestamps below them (approved round 5). The console's header row is
+   nowrap (data.css), so the label opts back into wrapping, on the mono label's own line height. */
+html.flat-theme .table-wrapper[data-table="users"] th:is([data-column="last_active_at"], [data-column="last_used_at"], [data-column="created_at"]) > div > span:first-child {
   max-width: 4.5em;
+  white-space: normal;
+  line-height: var(--ui-label-leading);
 }
 
 /* B1.10 IP管理: the copy button under the address and the show-password button under the credentials, so both
    columns are as wide as their text (approved round 5). */
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td:is([data-column="address"], [data-column="auth"]) > div {
+html.flat-theme .table-wrapper[data-table="proxies"] td:is([data-column="address"], [data-column="auth"]) > div {
   flex-direction: column;
   align-items: flex-start;
   gap: 0.125rem;
 }
 
-html.flat-theme.ui-cells-two-line .table-wrapper[data-table="proxies"] td[data-column="auth"] > div > button {
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="auth"] > div > button {
   margin-left: 0;
 }
 
@@ -202,21 +203,22 @@ html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"
 
 /* ================================================================== B2 · tips and popovers where they can be read */
 
-/* B2.1 Icon-only row actions (IP管理, API 密钥, 分组管理; approved round 4), only with a mouse or trackpad: touch
+/* B2.1 Icon-only row actions (IP管理, API 密钥, 分组管理; approved round 4; 用户管理, 订阅管理, 兑换码 added in wave 2 at the
+   management agent's request), only with a mouse or trackpad: touch
    keeps the visible labels. The label stays in the button for screen readers and shows as a tip on hover and
    keyboard focus, left of the button and centred on it, so the sticky header (z-index 200) never covers it;
    the hovered cell rises above the other rows' sticky action cells. The tip's look (edge, radius, shadow) is
    overlays.css'; surface and ink here only keep it legible. */
-html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"]:is(:hover, :focus-within) {
+html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"]:is(:hover, :focus-within) {
   z-index: 30;
 }
 
-html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"] {
+html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button[class~="flex-col"] {
   position: relative;
 }
 
 @media (hover: hover) and (pointer: fine) {
-  html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"] > span[class~="text-xs"] {
+  html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button[class~="flex-col"] > span[class~="text-xs"] {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -228,7 +230,7 @@ html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [
     border: 0;
   }
 
-  html.flat-theme .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"]) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
+  html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
     top: 50%;
     right: calc(100% + 0.375rem);
     z-index: 1;
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index b57dfeeb6579..bf9d752a7cdd 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -543,6 +543,28 @@ html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):
   }
 }
 
+/* BEGIN S platform segments */
+/* 7.1a The account dialog's platform choice (owner decision 2 and the .11 approval "platform icons keep their brand
+   colours"): an unchosen segment draws its platform glyph in the platform's identity colour (tokens.css identity
+   hues: >= 4.5:1 on the surface, so >= 3:1 as a glyph, both themes); the chosen segment stays the ink thumb with an
+   on-ink glyph (7.1). The ten segments are known by their place (CreateAccountModal's two rows, the first one marked
+   data-tour="account-form-platform"); labels stay muted. (wave 2, reported by the accounts agent) */
+html.flat-theme [data-tour="account-form-platform"] > button:nth-child(1) { --ctl-seg-glyph: var(--ui-id-orange); }
+html.flat-theme [data-tour="account-form-platform"] > button:nth-child(2) { --ctl-seg-glyph: var(--ui-id-green); }
+html.flat-theme [data-tour="account-form-platform"] > button:nth-child(3) { --ctl-seg-glyph: var(--ui-id-blue); }
+html.flat-theme [data-tour="account-form-platform"] > button:nth-child(4) { --ctl-seg-glyph: var(--ui-id-purple); }
+html.flat-theme [data-tour="account-form-platform"] > button:nth-child(5) { --ctl-seg-glyph: var(--ui-id-zinc); }
+html.flat-theme [data-tour="account-form-platform"] + div > button:nth-child(1) { --ctl-seg-glyph: var(--ui-id-pink); }
+html.flat-theme [data-tour="account-form-platform"] + div > button:nth-child(2) { --ctl-seg-glyph: var(--ui-id-indigo); }
+html.flat-theme [data-tour="account-form-platform"] + div > button:nth-child(3) { --ctl-seg-glyph: var(--ui-id-teal); }
+html.flat-theme [data-tour="account-form-platform"] + div > button:nth-child(4) { --ctl-seg-glyph: var(--ui-id-rose); }
+html.flat-theme [data-tour="account-form-platform"] + div > button:nth-child(5) { --ctl-seg-glyph: var(--ui-id-amber); }
+
+html.flat-theme :is([data-tour="account-form-platform"], [data-tour="account-form-platform"] + div) > button:not([class~="bg-white"]) > svg {
+  color: rgb(var(--ctl-seg-glyph, var(--ui-muted)));
+}
+/* END S platform segments */
+
 /* 7.2 The settings tab strip (SettingsView .settings-tabs-*, scoped) is the same segmented control, as wide as its
    tabs (the reference's w-fit), 14px icons, no glow, gradient or underline. The strip keeps sticking under the
    header; its band is the page ground at 90 % with the reference's one blur (the docs header, 8px), so content
@@ -785,3 +807,69 @@ html.flat-theme :is(a, button)[class*="underline"] {
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
 }
+
+/* BEGIN S utility buttons */
+/* ================================================================== 10 · utility-built buttons (wave 2) */
+
+/* 10.1 A solid accent button built from utilities (bg-primary-500 / -600 / -700 with white text: the chosen segment
+   of a hand-made choice, a save / add / apply button) is the reference's primary: ink with on-ink text (near-white
+   with ink text in dark), like .btn-primary and the segmented thumb (REF §8.3, §8.5). Switches (no white text),
+   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([class~="bg-primary-500"], [class~="bg-primary-600"], [class~="bg-primary-700"])[class~="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[class~="z-[140]"]) *))[class][class] {
+  --theme-on-fill: var(--ui-on-ink);
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-ink));
+  background-image: none;
+  color: rgb(var(--ui-on-ink));
+  box-shadow: none;
+}
+
+/* 10.2 ModelWhitelistSelector (account create / edit / bulk edit, risk control): the quick actions are the default
+   button (the blue and emerald outlines were decoration), clearing every model keeps the destructive outline, and
+   「填入」 beside the custom model field is the default button at the field's 34px. (wave 2, reported by the accounts
+   agent) */
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button[class~="border-red-200"], div:has(> button[data-testid="fill-related-models"]) + div button[class~="bg-primary-50"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--ui-control-h);
+  padding: 0 0.75rem;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], div:has(> button[data-testid="fill-related-models"]) + div button[class~="bg-primary-50"]):not(:disabled):hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-testid="fill-related-models"] ~ button[class~="border-red-200"][class~="border-red-200"] {
+  border-color: rgb(var(--ui-danger) / 0.3);
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-testid="fill-related-models"] ~ button[class~="border-red-200"][class~="border-red-200"]:hover {
+  border-color: rgb(var(--ui-danger) / 0.5);
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme div:has(> button[data-testid="fill-related-models"]) + div button[class~="bg-primary-50"] {
+  min-height: var(--ui-select-h);
+}
+
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button[class~="border-red-200"], div:has(> button[data-testid="fill-related-models"]) + div button[class~="bg-primary-50"]):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+/* END S utility buttons */
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index 6535635a5304..636dbd675a64 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -17,6 +17,9 @@
  *   data-ui="platform-badge"  components/common/PlatformTypeBadge.vue root
  *   data-ui="group-badge"     components/common/GroupBadge.vue      root
  *   data-ui="skeleton"        components/common/Skeleton.vue        root
+ * Opt-in hooks for page owners (wave 2, §6.4): data-ui~="platform-chip" / "platform-text" (an element upstream colours
+ * by platform with Tailwind hue classes keeps that platform colour, decision 2) and data-ui~="category-chip" (a
+ * category label drawn as the reference's neutral chip: request type, billing mode, protocol, role ...).
  * Hooks used from other owners: data-ui~="bulk-bar" (AccountBulkActionsBar, the accounts agent), data-table and
  * data-column (DataTable), aria-sort on sortable headers. */
 
@@ -53,6 +56,19 @@ html.flat-theme {
   --ui-dot-idle: 163 163 163;
   /* the bulk bar floats only where its owner places it over content */
   --ui-bulk-bar-shadow: none;
+  /* Table header labels (wave 2, the management agent's decision): the muted grey instead of the label grey, so a
+     header under an open menu's popover shadow (#f6f6f6-#f8f8f8 behind it) still reads 4.5:1 (#737373 fell to
+     4.39); 5.25 on the surface. Dark keeps the label grey (6.3 on the surface). Only table headers; the other mono
+     labels keep --ui-label. */
+  --ui-table-head: var(--ui-muted);
+  /* Badge text (light): each status text a step deeper than the status token, so a badge under a popover shadow
+     (up to 6 % of the shadow colour over its soft fill) keeps 4.5:1 (the ACTIVE success badge fell to 4.45, the
+     danger badge to 4.41). Dark reads the status tokens (>= 6:1). */
+  --ui-badge-success: 26 122 61;
+  --ui-badge-danger: 190 52 52;
+  --ui-badge-warning: 172 79 9;
+  --ui-badge-link: 19 120 64;
+  --ui-badge-muted: 104 104 104;
   /* Time-series chart palette (read by composables/usePresentationColors.ts as `trend`): the reference's usage
      series (REF §8.14 --usage-series-*) in the hue order of upstream's series (blue, emerald, amber, red, violet,
      pink, teal, orange, indigo, lime, cyan, purple), so a chart that picks a series by index keeps its hue. Lines
@@ -78,6 +94,15 @@ html.flat-theme:lang(zh) {
 }
 
 html.flat-theme.dark {
+  --ui-table-head: var(--ui-label);
+  /* danger text on the dark selected fill: the danger red 70 % toward ink (#f69898), 5.24:1 on the selected fill and
+     4.70 on its hover (#f87171 is 4.03 / 3.62; the 75 % mix, 4.98, falls to 4.47 on the hover) */
+  --ui-selected-danger: 246 152 152;
+  --ui-badge-success: var(--ui-success);
+  --ui-badge-danger: var(--ui-danger);
+  --ui-badge-warning: var(--ui-warning);
+  --ui-badge-link: 182 247 200;
+  --ui-badge-muted: var(--ui-muted);
   --ui-scroll-thumb: 122 122 122;
   --ui-scroll-thumb-hover: 156 156 156;
   /* the reference's dark fills are the colour at 42 % over the surface */
@@ -131,7 +156,7 @@ html.flat-theme .table-wrapper .table-header .sticky-header-cell {
   border-bottom-width: 0;
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ui-table-head));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 500;
@@ -231,8 +256,9 @@ html.flat-theme .table-wrapper > table > tbody.table-body > tr > td:is([data-col
 
 /* Small data chips inside cells (upstream's `inline-flex rounded px-2 py-0.5 text-xs` spans: group, request type,
    billing mode, tags, cache marks): the reference's tool / prompt chip shape (REF §8.8: 4px radius, 6 / 1 inset,
-   Geist Mono 10.5px); each keeps its colour family (the status families of tokens.css). */
-html.flat-theme .table-wrapper > table > tbody.table-body > tr > td span:is([class~="inline-flex"], [class~="inline-block"])[class~="rounded"]:is([class~="px-1"], [class~="px-1.5"], [class~="px-2"]):is([class~="py-0.5"], [class~="py-px"]):is([class~="text-xs"], [class~="text-[10px]"], [class~="text-[11px]"]) {
+   Geist Mono 10.5px); each keeps its colour family (the status families of tokens.css). A chip that carries a
+   data-ui hook (platform-chip, category-chip, a page owner's) is its owner's. */
+html.flat-theme .table-wrapper > table > tbody.table-body > tr > td span:not([data-ui]):is([class~="inline-flex"], [class~="inline-block"])[class~="rounded"]:is([class~="px-1"], [class~="px-1.5"], [class~="px-2"]):is([class~="py-0.5"], [class~="py-px"]):is([class~="text-xs"], [class~="text-[10px]"], [class~="text-[11px]"]) {
   padding: 1px 6px;
   border-radius: var(--ui-radius-sm);
   font-family: var(--ui-font-mono);
@@ -263,6 +289,21 @@ html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"],
   background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
 }
 
+/* On the dark selected fill (#333e36) upstream's secondary greys fall short (text-gray-400 / dark:text-dark-500
+   #919191 3.54:1, text-gray-500 / dark:text-dark-400 #9c9c9c 4.06:1): in a selected row they take the muted grey
+   (#b3b3b3, 5.39:1; 5.1 on the selected hover). Light is unchanged. Every selectable table. (wave 2, reported by
+   the management and user-side agents) */
+html.flat-theme.dark .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
+  color: rgb(var(--ui-muted));
+}
+
+/* and the danger red of a failure note in a selected row (the accounts usage tickets' 「…检查失败」): #f87171 is 4.03:1 on
+   the selected fill; the lighter red keeps it a failure and readable (batch 7, reported by the accounts agent).
+   Amber (6.68) and the light theme's red (4.79) hold as they are. */
+html.flat-theme.dark .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) :is([class~="text-red-500"], [class~="text-red-600"], [class~="dark:text-red-400"]) {
+  color: rgb(var(--ui-selected-danger));
+}
+
 /* Sticky columns: upstream paints them white / slate (#111827, #1f2937 on hover) whatever the row shows; here they
    take the row's own fill, and the edge against the scrolled columns is the reference's 1px line instead of a
    shadow. */
@@ -488,7 +529,7 @@ html.flat-theme table > thead[class~="bg-gray-50"] + tbody[class~="bg-white"] {
 html.flat-theme table > thead[class~="bg-gray-50"] > tr > th {
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ui-table-head));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 500;
@@ -803,27 +844,27 @@ html.flat-theme .badge {
 
 html.flat-theme .badge-primary {
   background-color: rgb(var(--ui-primary-soft));
-  color: var(--ui-link);
+  color: rgb(var(--ui-badge-link));
 }
 
 html.flat-theme .badge-success {
   background-color: rgb(var(--ui-success-soft));
-  color: rgb(var(--ui-success));
+  color: rgb(var(--ui-badge-success));
 }
 
 html.flat-theme .badge-warning {
   background-color: rgb(var(--ui-warning-soft));
-  color: rgb(var(--ui-warning));
+  color: rgb(var(--ui-badge-warning));
 }
 
 html.flat-theme .badge-danger {
   background-color: rgb(var(--ui-danger-soft));
-  color: rgb(var(--ui-danger));
+  color: rgb(var(--ui-badge-danger));
 }
 
 html.flat-theme .badge-gray {
   background-color: rgb(var(--ui-subtle));
-  color: rgb(var(--ui-muted));
+  color: rgb(var(--ui-badge-muted));
 }
 
 html.flat-theme .badge-purple {
@@ -860,10 +901,215 @@ html.flat-theme [data-ui="status-badge"] > span:last-child {
   line-height: 18px;
 }
 
-/* PlatformTypeBadge (D3): identity without a hue per platform, on one line (D5 single-line rows). First the
-   reference's provider chip (REF §8.8: 4px radius, 1px control outline, Geist Mono 10px uppercase .025em, ink-soft,
-   monochrome logo) holding the platform and, after a 1px divider, the credential type; then the plan as a neutral
-   chip and the privacy state as a soft status chip; last the expiry in mono. */
+/* Identity (owner decision 2, wave 2): platforms, groups and plans keep upstream's platform colours, drawn as the
+   reference's chips (REF §8.8 provider chip: 4px radius, 1px line, Geist Mono 10px uppercase .025em, the logo in the
+   chip's colour). A chip's colour is the Tailwind hue upstream gives it (the class names in the component:
+   bg-orange-100, text-emerald-700 ...); that hue's tokens (tokens.css "identity hues": text >= 4.5:1 on the fill, the
+   surface and the row hover; a soft fill; a 1px line) are set on each hue carrier as --pf-text / --pf-soft /
+   --pf-line / --pf-sub, and the chip rules read them with a neutral fallback, so a chip without a known hue (a free
+   plan, an unknown platform) stays the reference's neutral chip. Status stays status: the privacy state, an abnormal
+   plan, a subscription's days left and the peak-rate window keep the status colours.
+   Contract for page owners: an element that upstream colours by platform with Tailwind hue classes can opt in with
+   data-ui~="platform-chip" (line, fill, text) or data-ui~="platform-text" (text and glyph only).
+   Hooks: data-ui="platform-badge", data-ui="group-badge"; GroupOptionItem's rate pill is reached through the badge's
+   own class (.groupOptionItemBadge), no template change. */
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-orange-"],
+html.flat-theme [data-ui="group-badge"][class*="-orange-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-orange-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-orange-"],
+html.flat-theme [data-ui~="platform-text"][class*="-orange-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-orange-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-orange-"]) {
+  --pf-text: var(--ui-id-orange);
+  --pf-soft: var(--ui-id-orange-soft);
+  --pf-line: var(--ui-id-orange-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-amber-"],
+html.flat-theme [data-ui="group-badge"][class*="-amber-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-amber-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-amber-"],
+html.flat-theme [data-ui~="platform-text"][class*="-amber-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-amber-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-amber-"]) {
+  --pf-text: var(--ui-id-amber);
+  --pf-soft: var(--ui-id-amber-soft);
+  --pf-line: var(--ui-id-amber-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-emerald-"],
+html.flat-theme [data-ui="group-badge"][class*="-emerald-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-emerald-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-emerald-"],
+html.flat-theme [data-ui~="platform-text"][class*="-emerald-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-emerald-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-emerald-"]) {
+  --pf-text: var(--ui-id-emerald);
+  --pf-soft: var(--ui-id-emerald-soft);
+  --pf-line: var(--ui-id-emerald-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-green-"],
+html.flat-theme [data-ui="group-badge"][class*="-green-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-green-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-green-"],
+html.flat-theme [data-ui~="platform-text"][class*="-green-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-green-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-green-"]) {
+  --pf-text: var(--ui-id-green);
+  --pf-soft: var(--ui-id-green-soft);
+  --pf-line: var(--ui-id-green-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-teal-"],
+html.flat-theme [data-ui="group-badge"][class*="-teal-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-teal-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-teal-"],
+html.flat-theme [data-ui~="platform-text"][class*="-teal-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-teal-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-teal-"]) {
+  --pf-text: var(--ui-id-teal);
+  --pf-soft: var(--ui-id-teal-soft);
+  --pf-line: var(--ui-id-teal-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-cyan-"],
+html.flat-theme [data-ui="group-badge"][class*="-cyan-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-cyan-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-cyan-"],
+html.flat-theme [data-ui~="platform-text"][class*="-cyan-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-cyan-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-cyan-"]) {
+  --pf-text: var(--ui-id-cyan);
+  --pf-soft: var(--ui-id-cyan-soft);
+  --pf-line: var(--ui-id-cyan-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-sky-"],
+html.flat-theme [data-ui="group-badge"][class*="-sky-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-sky-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-sky-"],
+html.flat-theme [data-ui~="platform-text"][class*="-sky-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-sky-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-sky-"]) {
+  --pf-text: var(--ui-id-sky);
+  --pf-soft: var(--ui-id-sky-soft);
+  --pf-line: var(--ui-id-sky-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-blue-"],
+html.flat-theme [data-ui="group-badge"][class*="-blue-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-blue-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-blue-"],
+html.flat-theme [data-ui~="platform-text"][class*="-blue-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-blue-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-blue-"]) {
+  --pf-text: var(--ui-id-blue);
+  --pf-soft: var(--ui-id-blue-soft);
+  --pf-line: var(--ui-id-blue-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-indigo-"],
+html.flat-theme [data-ui="group-badge"][class*="-indigo-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-indigo-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-indigo-"],
+html.flat-theme [data-ui~="platform-text"][class*="-indigo-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-indigo-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-indigo-"]) {
+  --pf-text: var(--ui-id-indigo);
+  --pf-soft: var(--ui-id-indigo-soft);
+  --pf-line: var(--ui-id-indigo-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-violet-"],
+html.flat-theme [data-ui="group-badge"][class*="-violet-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-violet-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-violet-"],
+html.flat-theme [data-ui~="platform-text"][class*="-violet-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-violet-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-violet-"]) {
+  --pf-text: var(--ui-id-violet);
+  --pf-soft: var(--ui-id-violet-soft);
+  --pf-line: var(--ui-id-violet-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-purple-"],
+html.flat-theme [data-ui="group-badge"][class*="-purple-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-purple-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-purple-"],
+html.flat-theme [data-ui~="platform-text"][class*="-purple-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-purple-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-purple-"]) {
+  --pf-text: var(--ui-id-purple);
+  --pf-soft: var(--ui-id-purple-soft);
+  --pf-line: var(--ui-id-purple-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-fuchsia-"],
+html.flat-theme [data-ui="group-badge"][class*="-fuchsia-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-fuchsia-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-fuchsia-"],
+html.flat-theme [data-ui~="platform-text"][class*="-fuchsia-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-fuchsia-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-fuchsia-"]) {
+  --pf-text: var(--ui-id-fuchsia);
+  --pf-soft: var(--ui-id-fuchsia-soft);
+  --pf-line: var(--ui-id-fuchsia-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-pink-"],
+html.flat-theme [data-ui="group-badge"][class*="-pink-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-pink-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-pink-"],
+html.flat-theme [data-ui~="platform-text"][class*="-pink-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-pink-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-pink-"]) {
+  --pf-text: var(--ui-id-pink);
+  --pf-soft: var(--ui-id-pink-soft);
+  --pf-line: var(--ui-id-pink-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-rose-"],
+html.flat-theme [data-ui="group-badge"][class*="-rose-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-rose-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-rose-"],
+html.flat-theme [data-ui~="platform-text"][class*="-rose-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-rose-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-rose-"]) {
+  --pf-text: var(--ui-id-rose);
+  --pf-soft: var(--ui-id-rose-soft);
+  --pf-line: var(--ui-id-rose-line);
+  --pf-sub: var(--ui-surface);
+}
+
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-zinc-"],
+html.flat-theme [data-ui="group-badge"][class*="-zinc-"],
+html.flat-theme [data-ui="group-badge"] > span[class*="-zinc-"],
+html.flat-theme [data-ui~="platform-chip"][class*="-zinc-"],
+html.flat-theme [data-ui~="platform-text"][class*="-zinc-"],
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-zinc-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-zinc-"]) {
+  --pf-text: var(--ui-id-zinc);
+  --pf-soft: var(--ui-id-zinc-soft);
+  --pf-line: var(--ui-id-zinc-line);
+  --pf-sub: var(--ui-surface);
+}
+
+/* 6.1 PlatformTypeBadge, on one line (D5): the platform | type chip, then the plan chip and the privacy chip (each its
+   own chip: plan and privacy are different kinds), then the expiry in mono. */
 html.flat-theme [data-ui="platform-badge"] {
   flex-direction: row;
   flex-wrap: nowrap;
@@ -877,25 +1123,24 @@ html.flat-theme [data-ui="platform-badge"] {
   white-space: nowrap;
 }
 
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child {
   flex: 0 0 auto;
-  border: 1px solid rgb(var(--ui-line-strong));
+  border: 1px solid rgb(var(--pf-line, var(--ui-line-strong)));
   border-radius: var(--ui-radius-sm);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--pf-soft, var(--ui-surface)));
 }
 
 html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span {
   gap: 5px;
   padding: 1px 6px;
   background-color: transparent;
-  color: rgb(var(--ui-ink-soft));
+  color: rgb(var(--pf-text, var(--ui-ink-soft)));
   text-transform: uppercase;
   white-space: nowrap;
 }
 
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span + span {
-  border-left: 1px solid rgb(var(--ui-line));
-  color: rgb(var(--ui-muted));
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child > span + span {
+  border-left: 1px solid rgb(var(--pf-line, var(--ui-line)));
 }
 
 html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span svg {
@@ -903,41 +1148,44 @@ html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span sv
   height: 11px;
 }
 
-/* the plan chip: neutral (subtle fill, muted); an abnormal subscription stays a danger chip */
 html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) {
-  border-color: transparent;
-  background-color: rgb(var(--ui-subtle));
+  flex: 0 0 auto;
+  gap: 4px;
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
 }
 
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span:first-child:not([title]) {
-  color: rgb(var(--ui-muted));
+/* the plan: its upstream hue (Plus sky, Team / Business indigo, Pro violet, SuperGrok cyan, Heavy purple, other Grok
+   tiers amber); a free plan is the neutral chip (subtle fill, muted text) */
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span {
+  border: 1px solid rgb(var(--pf-line, var(--ui-line)));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--pf-soft, var(--ui-subtle)));
+  color: rgb(var(--pf-text, var(--ui-muted)));
 }
 
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span:first-child[class~="bg-red-100"] {
+/* an abnormal subscription is a danger state; the privacy chip is a status (private = success, Cloudflare-blocked =
+   warning, failed = danger) */
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[class~="bg-red-100"] {
+  border-color: rgb(var(--ui-danger) / 0.3);
   background-color: rgb(var(--ui-danger-soft));
   color: rgb(var(--ui-danger));
 }
 
-/* the privacy state is a status: private = success, Cloudflare-blocked = warning, failed = danger (soft fills) */
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[title] {
-  border-left: 0;
-}
-
 html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[title][class~="bg-green-100"] {
+  border-color: rgb(var(--ui-success) / 0.3);
   background-color: rgb(var(--ui-success-soft));
   color: rgb(var(--ui-success));
 }
 
 html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[title][class~="bg-yellow-100"] {
+  border-color: rgb(var(--ui-warning) / 0.3);
   background-color: rgb(var(--ui-warning-soft));
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:nth-child(2) > span[title][class~="bg-red-100"] {
-  background-color: rgb(var(--ui-danger-soft));
-  color: rgb(var(--ui-danger));
-}
-
 html.flat-theme [data-ui="platform-badge"] > div:last-child:not(:first-child):not([class~="inline-flex"]) {
   padding-left: 1px;
   color: rgb(var(--ui-faint));
@@ -945,15 +1193,16 @@ html.flat-theme [data-ui="platform-badge"] > div:last-child:not(:first-child):no
   letter-spacing: 0;
 }
 
-/* GroupBadge (D3): a neutral chip (1px control outline, surface, 4px radius, 12px ink-soft, monochrome logo); the
-   multiplier a mono sub-chip on the subtle fill; the subscription's days left keep their warning / danger fills. */
+/* 6.2 GroupBadge (group cells, group pickers): the platform's chip (upstream gives standard and subscription groups
+   their own shade of the platform's hue), 4px radius, 12px name, the logo in the chip's colour; the multiplier a mono
+   sub-chip on a lighter patch; a subscription's days left and the peak window keep their warning / danger fills. */
 html.flat-theme [data-ui="group-badge"] {
   gap: 5px;
   padding: 1px 3px 1px 6px;
-  border: 1px solid rgb(var(--ui-line-strong));
+  border: 1px solid rgb(var(--pf-line, var(--ui-line-strong)));
   border-radius: var(--ui-radius-sm);
-  background-color: rgb(var(--ui-surface));
-  color: rgb(var(--ui-ink-soft));
+  background-color: rgb(var(--pf-soft, var(--ui-surface)));
+  color: rgb(var(--pf-text, var(--ui-ink-soft)));
   font-size: 12px;
   font-weight: 500;
   line-height: 18px;
@@ -967,8 +1216,8 @@ html.flat-theme [data-ui="group-badge"] > svg {
 html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type) {
   padding: 0 4px;
   border-radius: 3px;
-  background-color: rgb(var(--ui-subtle));
-  color: rgb(var(--ui-muted));
+  background-color: rgb(var(--pf-sub, var(--ui-subtle)) / 0.72);
+  color: rgb(var(--pf-text, var(--ui-muted)));
   font-family: var(--ui-font-mono);
   font-size: 10.5px;
   font-weight: 500;
@@ -976,7 +1225,7 @@ html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type) {
 }
 
 html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type) [class~="font-bold"] {
-  color: rgb(var(--ui-ink));
+  color: rgb(var(--pf-text, var(--ui-ink)));
   font-weight: 600;
 }
 
@@ -995,17 +1244,84 @@ html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type):is([class~="b
   color: rgb(var(--ui-warning));
 }
 
-/* Model marks (ModelIcon): the vendors' brand colours become the monochrome ink-soft logo of the reference's model
-   cells; a model without a mark shows the reference's letter square (REF §8.8: 1px control outline, subtle fill,
-   Geist Mono 600 ink-soft). */
-html.flat-theme .model-icon {
+/* 6.3 Group pickers: GroupOptionItem's rate pill is the platform's chip in the reference's pill form (Geist Mono, 1px
+   line); its peak-window pill stays the warning chip. GroupSelector rows hold GroupBadge (6.2). */
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"] {
+  padding: 1px 8px;
+  border: 1px solid rgb(var(--pf-line, var(--ui-line)));
+  background-color: rgb(var(--pf-soft, var(--ui-subtle)));
+  color: rgb(var(--pf-text, var(--ui-ink-soft)));
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:not(:first-child) {
+  border-color: rgb(var(--ui-warning) / 0.3);
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+/* 6.4 Opt-in identity for page owners (the contract above) */
+html.flat-theme [data-ui~="platform-chip"] {
+  gap: 5px;
+  padding: 1px 6px;
+  border: 1px solid rgb(var(--pf-line, var(--ui-line-strong)));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--pf-soft, var(--ui-surface)));
+  color: rgb(var(--pf-text, var(--ui-ink-soft)));
+  font: 500 10px/16px var(--ui-font-mono);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-ui~="platform-text"] {
+  color: rgb(var(--pf-text, var(--ui-ink-soft)));
+}
+
+/* a category (request type, billing mode, protocol, role ...) is not identity and not status (decision 2): the
+   reference's neutral chip, whatever hue upstream gave it */
+html.flat-theme [data-ui~="category-chip"] {
+  padding: 1px 6px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
   color: rgb(var(--ui-ink-soft));
+  font: 500 var(--ui-chip-size) / 16px var(--ui-font-mono);
+  letter-spacing: 0.01em;
 }
 
-html.flat-theme .model-icon > path {
-  fill: currentColor;
+/* 6.5 Model marks (ModelIcon): the vendors' brand colours (each path's fill attribute), as upstream. A brand colour
+   below the 3:1 floor for a glyph on the console's row surfaces (light: surface, hover #efefef, selected accent-soft;
+   dark: surface, hover, selected) moves along its own hue until it passes; black and near-black marks turn to ink
+   in dark. A model without a mark shows the reference's neutral letter square. */
+html.flat-theme .model-icon {
+  color: rgb(var(--ui-ink-soft));
 }
 
+html.flat-theme .model-icon > path[fill="#D97706" i] { fill: #ca6f06; }
+html.flat-theme .model-icon > path[fill="#22B8CD" i] { fill: #1b95a6; }
+html.flat-theme .model-icon > path[fill="#23B7E5" i] { fill: #1691b8; }
+html.flat-theme .model-icon > path[fill="#F38020" i] { fill: #d7680c; }
+html.flat-theme .model-icon > path[fill="#F7D046" i] { fill: #a58207; }
+
+html.flat-theme.dark .model-icon > path:is([fill="#000000" i], [fill="#16191E" i]) { fill: rgb(var(--ui-ink)); }
+html.flat-theme.dark .model-icon > path[fill="#003425" i] { fill: #009a6e; }
+html.flat-theme.dark .model-icon > path[fill="#39594D" i] { fill: #5e937f; }
+html.flat-theme.dark .model-icon > path[fill="#0053E0" i] { fill: #3a83ff; }
+html.flat-theme.dark .model-icon > path[fill="#0070F0" i] { fill: #1c86ff; }
+html.flat-theme.dark .model-icon > path[fill="#0668E1" i] { fill: #2886f9; }
+html.flat-theme.dark .model-icon > path[fill="#1677FF" i] { fill: #2d84ff; }
+html.flat-theme.dark .model-icon > path[fill="#167ADF" i] { fill: #2a89ea; }
+html.flat-theme.dark .model-icon > path[fill="#1C64F2" i] { fill: #4a83f5; }
+html.flat-theme.dark .model-icon > path[fill="#3859FF" i] { fill: #637dff; }
+html.flat-theme.dark .model-icon > path[fill="#4D6BFE" i] { fill: #647efe; }
+html.flat-theme.dark .model-icon > path[fill="#5436F5" i] { fill: #8a75f8; }
+html.flat-theme.dark .model-icon > path[fill="#615EFF" i] { fill: #7a78ff; }
+html.flat-theme.dark .model-icon > path[fill="#6566F1" i] { fill: #7a7bf3; }
+html.flat-theme.dark .model-icon > path[fill="#F23F5D" i] { fill: #f24663; }
+
 html.flat-theme .model-icon-fallback {
   box-sizing: border-box;
   border: 1px solid rgb(var(--ui-line-strong));
@@ -1316,6 +1632,24 @@ html.flat-theme .empty-state-description:empty {
   display: none;
 }
 
+/* An empty table wider than its card (many columns, or a phone): upstream centres the empty panel on the whole
+   table width, so half of it sat outside the card (every list at 390, some at 1440). The table pages' scroll box
+   is an inline-size container and the panel sticks 16px in from its visible left edge at the box's width, so it
+   stays whole and centred in the card while the header scrolls. The scroll box takes its width from the page (it
+   never sizes to its table), the table's own width, the sticky header and the fixed columns are unchanged, and
+   the virtual-scroll spacer rows (colspan cells without children) are not touched. (wave 2, reported by the
+   user-side agent) */
+html.flat-theme .table-page-layout .table-wrapper {
+  container-type: inline-size;
+}
+
+html.flat-theme .table-page-layout .table-wrapper .table-body > tr > td[colspan]:only-child > * {
+  position: sticky;
+  left: 16px;
+  box-sizing: border-box;
+  width: calc(100cqw - 32px);
+}
+
 /* Skeletons: the reference's shimmer (REF §8.7: surface-subtle -> ink 6 % -> surface-subtle, 400 % wide, 1.4s),
    on the .skeleton recipe, Skeleton.vue and upstream's pulsing grey placeholder blocks. Reduced motion stops it
    (styles/theme.css). */
@@ -1350,3 +1684,63 @@ html.flat-theme [class~="card"][class~="p-4"]:has(canvas, > div[class~="h-48"],
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
 }
+
+/* BEGIN S callouts */
+/* ================================================================== 11 · callouts (wave 2, reported by the accounts agent) */
+
+/* Info boxes that upstream tints with the accent or a hue (bg-<hue>-50, sometimes at 50-90 %: primary, blue, sky,
+   purple, indigo, teal, violet, cyan) become the reference's neutral callout (REF §8.16: a 1px structural line, the
+   text in ink-soft; the fill the subtle ground here, so a box inside a dialog still reads as a box). Warning (amber),
+   error (red) and success (green / emerald) boxes are states and keep their colours. Reach: a div with such a fill
+   that is a box (rounded, bordered or a card) with an inset; never a data-ui element, a selected option (a ring, or a
+   -300..-700 border of the hue), a picked-value chip (a direct x button), the public pages, a button or a link.
+   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"], :has(> button[class~="text-lg"][class~="leading-none"])):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] {
+  border: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-subtle));
+  background-image: none;
+  box-shadow: none;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* 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"], :has(> button[class~="text-lg"][class~="leading-none"])):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] {
+  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"], :has(> button[class~="text-lg"][class~="leading-none"])):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] {
+  --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"], :has(> button[class~="text-lg"][class~="leading-none"])):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] {
+  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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], :has(> button[class~="text-lg"][class~="leading-none"])):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 *)) {
+  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"], :has(> button[class~="text-lg"][class~="leading-none"])):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] {
+  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"], :has(> button[class~="text-lg"][class~="leading-none"])):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] {
+  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"], :has(> button[class~="text-lg"][class~="leading-none"])):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] {
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-line));
+  color: rgb(var(--ui-muted));
+}
+/* END S callouts */
diff --git a/frontend/src/styles/console/overlays.css b/frontend/src/styles/console/overlays.css
index 53f2e44a891d..d234383de106 100644
--- a/frontend/src/styles/console/overlays.css
+++ b/frontend/src/styles/console/overlays.css
@@ -614,7 +614,7 @@ html.flat-theme [role="tooltip"].theme-dark-surface > button[class~="absolute"]:
 
 /* 2.6 Icon-only row actions (behaviour B2.1 places the label left of the button): the bubble's look, 12/16 500 ink. */
 @media (hover: hover) and (pointer: fine) {
-  html.flat-theme:is(.flat-theme) .table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="accounts"]) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
+  html.flat-theme:is(.flat-theme) :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="accounts"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
     padding: 6px 10px;
     border: 1px solid rgb(var(--ui-line-strong));
     border-radius: var(--ui-radius-md);
@@ -1734,3 +1734,14 @@ html.flat-theme .driver-active-element {
   outline-offset: 2px !important;
   border-radius: var(--ui-radius-md) !important;
 }
+
+/* BEGIN S scrim margin */
+/* An in-page dialog built from utilities (a fixed, inset-0 scrim rendered in place, not teleported) that is a child of
+   a space-y-* stack inherits the stack's top margin: the scrim moved down and left a band of the page undimmed
+   (系统设置 · 功能开关 「+ 添加专属用户」: scrim at y = 12). A fixed overlay takes no stack margin. The doubled classes
+   (0,7,2) outrank Tailwind's space-y (0,3,0) and the page files' stack rhythm rules (0,5,2), which load later.
+   (wave 2, reported by the settings agent) */
+html.flat-theme [class*="space-y-"] > div[class~="fixed"][class~="fixed"][class~="inset-0"][class~="inset-0"]:not([hidden]) {
+  margin-top: 0;
+}
+/* END S scrim margin */
diff --git a/frontend/src/styles/console/pages/accounts.css b/frontend/src/styles/console/pages/accounts.css
index 1c5374e8dd57..704bc9b15447 100644
--- a/frontend/src/styles/console/pages/accounts.css
+++ b/frontend/src/styles/console/pages/accounts.css
@@ -27,7 +27,12 @@
  *   admin/account/AccountBulkMenu (new)   account-bulk-menu
  *   admin/account/AccountBulkActionsBar   bulk-bar account-bulk-bar
  *   admin/account/AccountViewModeSwitcher account-view-switcher
- * Card grid, compact list and the drawer's content are reached through their existing data-test attributes. */
+ * Wave 2 (dialogs, section 9; one attribute each):
+ *   admin/account/AccountStatsModal       account-stats         admin/account/AccountTestModal  account-test
+ *   account/OAuthAuthorizationFlow        account-oauth-flow    account/CreateAccountModal      account-create-steps
+ * Card grid, compact list, the drawer's content, the account forms (#create-account-form, #edit-account-form,
+ * #bulk-edit-account-form) and the taxonomy manager rows are reached through their existing ids and data-test
+ * attributes. The system prompt binding inside the account dialogs is P3's (settings-ops-public.css). */
 
 html.flat-theme {
   /* the view switcher's segment: 14px glyph, 10px either side; the frame and inset are controls.css' */
@@ -372,12 +377,14 @@ html.flat-theme [data-ui="accounts-bulk-tray"] > [data-ui~="bulk-bar"] > div:las
   gap: 6px;
 }
 
-/* ================================================================== 5 · table columns (single-line rows, D5) */
+/* ================================================================== 5 · table columns */
 
 /* data.css draws every table (header, rows, lines, hover, sticky cells); here only what the accounts columns put in
-   their cells, so a row holds one line (42-45px, REF §7.5) and the table scrolls sideways instead: nothing is cut,
-   long values end in an ellipsis with the full text in their title (and in the details drawer). Rows whose usage
-   cell lists route tickets keep one line per ticket. */
+   their cells. Short cells hold one line (a row of them is 45px, REF §7.5); the two-line layouts the owner approved
+   in rounds 4-5 stay (owner decision 3, 2026-09-29): the created and expiry times on two lines (behaviour.css B1.4,
+   B1.5) and the usage column at 15rem with its route-ticket text wrapping and the capacity chip under it, as the
+   template draws them. Nothing is cut: long single-line values end in an ellipsis with the full text in their title
+   (and in the details drawer), and the table scrolls sideways for the columns after the scheduling switch. */
 
 /* Selection: a 14px checkbox (REF §8.4) whose 32px hit area overhangs the cell padding: it takes 24px in a row
    (24 + 2 x 10 + the line = the reference's 45px row) and 20px in the header (the 40px header). */
@@ -408,7 +415,10 @@ html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="s
    scheduling, ...), and status and the scheduling switch must be in view without scrolling: the name column takes
    what is left of the content width once select 44 + id 79 + platform 312 (18rem cap, below, + its padding) +
    capacity 87 + status 64 + scheduling 64 + the sticky actions 127 are placed (the content is the viewport less the
-   240px sidebar and 2 x 28 gutters; 12px spare), between 12rem and 16rem: 16rem at 1440, about 12rem at 1280. */
+   240px sidebar and 2 x 28 gutters; 12px spare), between 12rem and 16rem: 16rem at 1440, about 12rem at 1280.
+   Below 1440 the platform column gives up to 48px of its cap (15rem at 1280) and a status with a second line stays
+   within 6rem (both below), so a page holding a temporarily unschedulable or rate-limited account still shows the
+   scheduling switch at 1280. */
 html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="name"] {
   width: clamp(12rem, calc(100vw - 1086px), 16rem);
   min-width: clamp(12rem, calc(100vw - 1086px), 16rem);
@@ -447,10 +457,11 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > d
   font-weight: 600;
 }
 
-/* Platform / type: the identity chips and the compact-mode line side by side, in at most 18rem (so the status and
-   scheduling columns after it keep their place): an account whose chips need more (OAuth with plan and privacy, a
-   subscription expiry) moves the compact-mode line, then the later chip groups, to a second line. An API-key
-   account (chips 115 + compact line 88) stays on one line. */
+/* Platform / type: the identity chips (in their platform colours, data.css 6.1; nothing here recolours them) and the
+   compact-mode line side by side, in at most 18rem at 1440 and 15rem at 1280 (so the status and scheduling columns
+   after it keep their place): an account whose chips need more (OAuth with plan and privacy, a subscription expiry)
+   moves the compact-mode line, then the later chip groups, to a further line. An API-key account (chips 115 +
+   compact line 88) stays on one line at either cap. */
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div {
   flex-direction: row;
   flex-wrap: wrap;
@@ -459,7 +470,7 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_t
   /* as wide as its content up to the cap, so a table that may shrink its columns (TablePageLayout's mobile mode
      drops min-width: max-content) does not fold a one-line cell */
   width: max-content;
-  max-width: 18rem;
+  max-width: clamp(15rem, calc(100vw - 1152px), 18rem);
 }
 
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] [data-ui="platform-badge"] {
@@ -471,29 +482,14 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_t
   white-space: nowrap;
 }
 
-/* Usage: the usage line and the capacity chip side by side; each route ticket on one line (upstream wraps them
-   inside 15rem, three lines per ticket). */
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] > div {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] > div > * {
-  margin-top: 0;
-}
-
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-usage-variant="list"] > div[class~="max-w-[15rem]"] {
-  max-width: none;
-}
-
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-usage-variant="list"] :is(div[class~="mb-0.5"], div[class~="mb-1"]) {
-  margin-bottom: 0;
-}
-
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-usage-variant="list"] > div[class~="max-w-[15rem]"] > div {
-  flex-wrap: nowrap;
-  white-space: nowrap;
+/* Status: the line under a badge (a temporarily unschedulable account's expected recovery time, a rate limit's or an
+   overload's countdown, a quota's resume time) holds at most 6rem, centred under the badge, so a date and time
+   break into date / time (decision 3's two-line times; 「预计 2026/09/29」 is 89px at 11px, a countdown up to 92px)
+   instead of widening the column by half its width. */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] div[class~="flex-col"][class~="items-center"] > span:not([class~="badge"]) {
+  max-width: 6rem;
+  white-space: normal;
+  text-align: center;
 }
 
 /* Classification / route: the two labelled values on one line; the labels are mono labels. */
@@ -535,8 +531,9 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="groups"] >
   max-height: none;
 }
 
-/* Capacity, proxy, expiry, today's stats: their stacked parts side by side. */
-html.flat-theme .table-wrapper[data-table="accounts"] td:is([data-column="capacity"], [data-column="proxy"], [data-column="expires_at"]) > div {
+/* Capacity, proxy, today's stats: their stacked parts side by side (the expiry cell keeps its approved stack:
+   the two-line date, then the expired / auto-pause badges). */
+html.flat-theme .table-wrapper[data-table="accounts"] td:is([data-column="capacity"], [data-column="proxy"]) > div {
   flex-direction: row;
   align-items: center;
   gap: 8px;
@@ -862,6 +859,404 @@ html.flat-theme [data-test="account-details-drawer"] > header + div section labe
   height: 14px;
 }
 
+/* Usage actions (the drawer, the cards; the table's cell is read-only): querying the quota, the reset, the points,
+   the referral count and invite, the local refresh are the reference's small ghost buttons (ink-soft; the subtle fill
+   and ink on hover) instead of a hue each (decision 2: colour is for status); the verification link takes the link
+   colour. Status notes beside them (limits, errors, the cache warning) and plan / tier chips keep their colours. */
+html.flat-theme :is([data-test="account-details-drawer"], [data-test="account-card-grid"], [data-test="account-compact-list"], .table-wrapper[data-table="accounts"]) button[class~="rounded"][class~="px-1.5"][class~="py-0.5"][class~="text-[10px]"]:is([class~="text-blue-600"], [class~="text-orange-600"], [class~="text-emerald-700"], [class~="text-violet-600"]) {
+  color: rgb(var(--ui-ink-soft));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-test="account-details-drawer"], [data-test="account-card-grid"], [data-test="account-compact-list"], .table-wrapper[data-table="accounts"]) button[class~="rounded"][class~="px-1.5"][class~="py-0.5"][class~="text-[10px]"]:is([class~="text-blue-600"], [class~="text-orange-600"], [class~="text-emerald-700"], [class~="text-violet-600"]):not(:disabled):hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-test="account-details-drawer"], [data-test="account-card-grid"], [data-test="account-compact-list"], .table-wrapper[data-table="accounts"]) a[class~="text-[10px]"][class~="text-blue-600"] {
+  color: var(--ui-link);
+}
+
+/* ================================================================== 9 · dialogs
+   Owner decision 2: colour only for status and the accent's roles (links, positive actions, switches on, the current
+   step); platform identity keeps its colours (the re-authorisation tile, the identity chips); decorative tints, tiles
+   and number colours are neutral. Shared looks (dialog frame, buttons, fields, option cards, chart cards) are the area
+   files'; here only what the account dialogs draw themselves. */
+
+/* 9.1 The account card at the top of the connection test and the usage statistics: upstream's accent tile is the
+   reference's neutral icon square (28px, 1px line, radius 6, a 15px muted glyph: the empty state's and the option
+   cards' tile, data.css 9); the statistics card's accent gradient becomes the grouped fill. The status pill keeps its
+   status colour. */
+html.flat-theme :is([data-ui="account-test"], [data-ui="account-stats"]) > div:first-child {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="account-stats"] > div:first-child[class~="bg-gradient-to-r"] {
+  background-image: none;
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme :is([data-ui="account-test"], [data-ui="account-stats"]) > div:first-child > div:first-child > div[class~="bg-gradient-to-br"] {
+  width: 28px;
+  height: 28px;
+  flex: none;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-image: none;
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is([data-ui="account-test"], [data-ui="account-stats"]) > div:first-child > div:first-child > div[class~="bg-gradient-to-br"] > svg {
+  width: 15px;
+  height: 15px;
+  color: rgb(var(--ui-muted));
+}
+
+/* 9.2 Usage statistics, the four headline figures: the reference's KPI card (REF §8.13, the dashboards' StatTile in
+   data.css 7): surface, 1px structural line, radius 6, 8 / 12 inset, the mono label, the value 15 / 600 tabular ink,
+   the detail 11px muted; no tint and no icon tile. */
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"][class~="bg-gradient-to-br"] {
+  min-height: 76px;
+  padding: 8px 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-image: none;
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"]:has(> div[class~="card"][class~="bg-gradient-to-br"]) {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"][class~="bg-gradient-to-br"] > div:first-child {
+  margin-bottom: 2px;
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"][class~="bg-gradient-to-br"] > div:first-child > span {
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"][class~="bg-gradient-to-br"] > div:first-child > div[class~="rounded-lg"] {
+  display: none;
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"][class~="bg-gradient-to-br"] > p[class~="text-2xl"] {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"][class~="bg-gradient-to-br"] > p:not([class~="text-2xl"]),
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"][class~="bg-gradient-to-br"] > p:not([class~="text-2xl"]) > span {
+  margin-top: 0;
+  font-size: 11px;
+  line-height: 16.5px;
+  color: rgb(var(--ui-muted));
+}
+
+/* 9.3 Usage statistics, the six detail cards (today, highest cost day, highest request day, tokens, performance,
+   recent activity): the title is the mono section label (REF §5) without its tinted tile, the rows are label (12px
+   muted) and value (13 / 600 tabular ink); the two values upstream colours for decoration are ink. */
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"]:not([class~="bg-gradient-to-br"]) {
+  padding: 14px;
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"]:not([class~="bg-gradient-to-br"]) > div[class~="mb-3"]:first-child {
+  margin-bottom: 10px;
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"]:not([class~="bg-gradient-to-br"]) > div[class~="mb-3"]:first-child > div[class~="rounded-lg"] {
+  display: none;
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"]:not([class~="bg-gradient-to-br"]) > div[class~="mb-3"]:first-child > span {
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"]:not([class~="bg-gradient-to-br"]) > div[class~="space-y-2"] > div > span:first-child {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="card"]:not([class~="bg-gradient-to-br"]) > div[class~="space-y-2"] > div > span:last-child {
+  font-size: 13px;
+  line-height: 19.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink));
+}
+
+/* 9.4 OAuth authorisation (the create dialog's second step, re-authorisation): upstream's blue panel is the
+   reference's grouped panel: the subtle fill inside the structural line, a neutral icon square, ink titles and
+   ink-soft text, the numbered steps on surface cards with ink discs, a count as a neutral chip, links in the link
+   colour. The amber notice and the red error keep their status colours. */
+html.flat-theme [data-ui="account-oauth-flow"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle));
+}
+
+/* (its mono field labels take the muted grey, which holds 4.5:1 on the subtle ground: the label grey reads 4.35 there
+   in light, as in data.css 11's callouts; dark keeps its label grey) */
+html.flat-theme:not(.dark) [data-ui="account-oauth-flow"] {
+  --ui-label: var(--ui-muted);
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] > div > div[class~="bg-blue-500"]:first-child {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] > div > div[class~="bg-blue-500"]:first-child > svg {
+  width: 15px;
+  height: 15px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] :is(p, span, label, li, h5)[class*="text-blue-"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] :is(h4, p[class~="font-medium"], label > span[class~="text-sm"])[class*="text-blue-"] {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] svg[class*="text-blue-"] {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] :is(a, button)[class*="text-blue-"] {
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] :is(a, button)[class*="text-blue-"]:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] div[class~="border-blue-300"] {
+  border-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] div[class~="rounded-full"][class~="bg-blue-600"] {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui="account-oauth-flow"] span[class~="rounded-full"][class~="bg-blue-500"] {
+  background-color: rgb(var(--ui-subtle));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-line));
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* 9.5 The create dialog's steps: the current and done steps keep the accent disc (the approved preview); a step to
+   come is the neutral disc (the subtle fill, a 1px line, ink-soft figures: upstream's grey on grey read 4.49:1 light
+   and 3.45:1 dark); the connector is the control outline. */
+html.flat-theme [data-ui="account-create-steps"] div[class~="rounded-full"][class~="bg-gray-200"] {
+  background-color: rgb(var(--ui-subtle));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-line-strong));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="account-create-steps"] div[class~="h-0.5"] {
+  background-color: rgb(var(--ui-line-strong));
+}
+
+/* 9.6 Choices inside the account forms (create, edit, bulk edit). The paired choices (model whitelist / mapping, the
+   RPM strategy) are option cards like the account type cards above them (controls.css 8.1): the grouped fill inside
+   the structural line, the chosen one an ink edge 2px wide on the surface; upstream's accent and purple tints go.
+   The user-message limit's three modes are a segmented choice at the reference's 30px: the chosen one ink (REF §8.5;
+   controls.css 10.1 draws it), the others the secondary button. */
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"]) {
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-line));
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink-soft));
+  transition-property: color, background-color, box-shadow;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"][class~="bg-gray-100"]:hover {
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-line-strong));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]) {
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 0 0 2px rgb(var(--ui-ink));
+  color: rgb(var(--ui-ink));
+}
+
+/* (the strategy's hint line: upstream's 10px at 70 % opacity becomes 11px muted) */
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"] div[class~="text-[10px]"][class~="opacity-70"] {
+  font-size: 11px;
+  line-height: 16.5px;
+  font-weight: 400;
+  opacity: 1;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="px-3"][class~="py-1.5"][class~="rounded-md"][class~="border"] {
+  min-height: var(--ui-control-h);
+  padding: 0 0.75rem;
+  border-radius: var(--ui-radius-md);
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+}
+
+/* (the chosen mode's ink is controls.css 10.1's, shared by every utility-built choice; the others are drawn here) */
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="px-3"][class~="py-1.5"][class~="rounded-md"][class~="border"]:not([class~="bg-primary-600"]) {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="px-3"][class~="py-1.5"][class~="rounded-md"][class~="border"]:not([class~="bg-primary-600"]):hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+/* 9.7 (the system prompt binding, bulk and per account, is P3's: settings-ops-public.css styles its hook) */
+
+/* 9.8 Folders and tags manager: the row actions are the table's icon buttons (28px, muted; the subtle fill and ink on
+   hover; delete turns danger on hover instead of standing red in every row). */
+html.flat-theme [data-test^="taxonomy-item-"] .icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-test^="taxonomy-item-"] .icon-button:not(:disabled):hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-test^="taxonomy-item-"] [data-test="taxonomy-delete"]:not(:disabled):hover {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-test^="taxonomy-item-"] .icon-button:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme [data-test^="taxonomy-item-"] .icon-button svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* 9.9 The row “more” menu: the two Codex route commands (CodexAccountActions, menu variant) have no glyph; their
+   labels line up with the glyphed rows' labels: indented by the 14px glyph and its 8px gap (overlays.css 1.2; an
+   indent, since the menu rows' padding comes from a stronger shared selector). */
+html.flat-theme .action-menu-content button:is([data-test="codex-harvest"], [data-test="codex-stop"]) {
+  text-indent: calc(var(--ui-menu-glyph) + 8px);
+}
+
+/* 9.10 Model mapping presets in the account forms (「+ Sonnet 4.5」, 「+ Claude→Sonnet」 ...): a hue per model family goes
+   (decision 2: colour is for status, the accent's roles and platform identity; these are add actions); each is the
+   secondary chip: surface, the control outline, ink-soft 12 / 500, the subtle fill and ink on hover. */
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="px-3"][class~="py-1"][class~="text-xs"][class~="transition-colors"][class*="hover:bg-"] {
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-line-strong));
+  font-weight: 500;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="rounded-lg"][class~="px-3"][class~="py-1"][class~="text-xs"][class~="transition-colors"][class*="hover:bg-"]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+/* 9.11 Remove buttons of the mapping and rule rows in the account forms: muted, turning danger on hover (the table's
+   row delete), instead of standing red in every row. */
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="text-red-500"][class*="hover:text-red-"] {
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="text-red-500"][class*="hover:text-red-"]:not(:disabled):hover {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+/* 9.12 The edit dialog's Codex image-generation panel (OpenAI accounts): the sky box (its inset sits on the children,
+   so data.css 11's callout rule does not reach it) is the same neutral callout: the structural line, the subtle
+   ground, no shadow; its tile the neutral square, its text ink-soft; the mode strip the surface; the chosen mode an
+   option card (the ink edge 2px wide, controls.css 8.1) with an ink check disc instead of the mode's hue. The badge
+   beside the title keeps its status colour (enabled / disabled / blocked). */
+html.flat-theme #edit-account-form div[class~="overflow-hidden"][class~="rounded-lg"][class~="bg-sky-50/60"] {
+  border-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-subtle));
+  box-shadow: none;
+}
+
+html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:first-child > div[class~="rounded-md"]:first-child {
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-line));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:first-child p[class~="text-slate-600"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child {
+  border-top-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child button {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child button[class~="border-transparent"]:hover {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child button:not([class~="border-transparent"]) {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child button span[class~="text-slate-500"] {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child button > span[class~="rounded-full"]:not([class~="border-gray-300"]) {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
 /* ================================================================== 8 · phones */
 @media (max-width: 639.98px) {
   /* The reference's 390px toolbar: the search takes the whole first row. */
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
index ce6f4c47ee40..d991e6593d7d 100644
--- a/frontend/src/styles/console/pages/dashboard-usage.css
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -1,8 +1,771 @@
-/* Console theme · page group: dashboards and usage records (owner: the dashboard and usage page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
+/* Console theme · page group: dashboards and usage records (owner: the dashboard and usage page agent, wave 2; html.flat-theme selectors narrowed to the page root).
+ *
+ * Pages: 管理控制台 (/admin/dashboard), 使用记录 (/admin/usage: 用量明细 / 错误请求 / 用户排行, the filters, the cleanup
+ * dialog's filters), 仪表盘 (/dashboard) and 使用记录 (/usage). Reference counterpart: the Experiential Labs console's /logs
+ * (REF-CONSOLE §7.1 vertical rhythm, §8.4-§8.7 toolbar controls and tables, §8.12-§8.14 KPI and chart cards; crops
+ * logs-toolbar, kpi-row, chart-card, usage-card, history-card / -header / -head / -row). Colour follows the owner's
+ * decision 2 (2026-09-29): status and semantic states and the accent (links) keep their colour; category chips and
+ * decorative figures are neutral.
+ *
+ * Page roots (data-ui hooks, one attribute each, no other template change):
+ *   data-ui="admin-dashboard"   views/admin/DashboardView.vue      root
+ *   data-ui="admin-usage"       views/admin/UsageView.vue          root
+ *   data-ui="user-dashboard"    views/user/DashboardView.vue       root
+ *   data-ui="user-usage"        views/user/UsageView.vue           root
+ *   data-ui="usage-filters"     components/admin/usage/UsageFilters.vue root (the page's filter strip and the cleanup
+ *                               dialog's copy of it)
+ * Shared components (KPI tiles, chart cards, DataTable, badges, pagination, menus, tooltips) keep the shared files' look;
+ * the rules here only place them and restate what is specific to these pages. */
 
-/* Integration review (preview decision D2): a platform card's total spend is a value, not a state. Ink at 600 (the
-   reference's spend figures) instead of upstream's purple; the mono figure stays. */
-html.flat-theme [data-testid="platform-card"] span[class~="text-purple-600"] {
+/* ================================================================== 1 · rhythm */
+
+/* Blocks inside the page sections and the chart rows sit 12px apart, the reference's gap-3 (the shell already spaces the
+   page's top-level blocks so); upstream's nested space-y-6 / space-y-4 and gap-6 were 24 / 16. */
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) :is([class~="space-y-6"], [class~="space-y-4"]) > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) [class~="grid"][class~="gap-6"] {
+  gap: var(--ui-shell-gap, 12px);
+}
+
+/* ================================================================== 2 · the time-range bar: a toolbar row */
+
+/* Upstream frames 「时间范围 / 刷新 / 粒度」 in a card. The reference's /logs toolbar is a row on the canvas: its controls,
+   8px apart, 8px above and below, a 1px structural line underneath (REF §7.1 "py-2 + 底线", crop logs-toolbar). */
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) {
+  padding: 8px 0;
+  border: 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div {
+  gap: 8px;
+}
+
+/* ================================================================== 3 · labelled field pills */
+
+/* Every filter keeps its label, inside its control: the reference's filter trigger ("Price 1 ⌄", REF §8.6: 30px, radius
+   6, the control outline on the surface) holding the field label as its mono label (REF §5 .mono-label, --ui-label)
+   and then the value, so a filter row is one line of 30px controls instead of labels stacked over 34px fields.
+   The pills: the time range and the granularity, the admin filter strip (UsageFilters), the user usage filters. */
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"],
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div,
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: var(--ui-control-h);
+  padding-left: 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
+}
+
+/* the label: the mono label at the KPI labels' weight, on one line */
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] > span:first-child,
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > label,
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div > label {
+  flex: none;
+  margin: 0;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 400;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: rgb(var(--ui-label));
+}
+
+/* the value: the Select / DateRangePicker trigger or the search field, drawn inside the pill (28px, no edge of its own) */
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] > div,
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > div[class~="relative"]:has(> .select-trigger),
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div > div[class~="relative"] {
+  flex: 1 1 auto;
+  width: auto;
+  min-width: 0;
+}
+
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger),
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div .select-trigger.select-trigger,
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div .select-trigger.select-trigger {
+  width: 100%;
+  min-height: 0;
+  height: calc(var(--ui-control-h) - 2px);
+  padding: 0 9px 0 0;
+  border-color: transparent;
+  border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > input.input {
+  flex: 1 1 auto;
+  width: 11rem;
+  min-width: 0;
+  height: calc(var(--ui-control-h) - 2px);
+  padding: 0 26px 0 0;
+  border-color: transparent;
+  border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
+  background-color: transparent;
+  box-shadow: none;
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+/* states: hover and an open menu take the focus line (the reference's house-select); keyboard focus on a trigger and any
+   focus in a text field take the accent edge 2px wide (the fields' focus, controls.css 3.1) */
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"]:is(:hover, :has(.select-trigger-open, .date-picker-trigger-open)),
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div:is(:hover, :has(.select-trigger-open)),
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div:is(:hover, :has(.select-trigger-open)) {
+  border-color: rgb(var(--ui-line-focus));
+}
+
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"]:has(> div > :is(.select-trigger, .date-picker-trigger):focus-visible),
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div:has(> input:focus, > div > .select-trigger:focus-visible),
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div:has(> div > .select-trigger:focus-visible) {
+  border-color: rgb(var(--ui-focus));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger, .date-picker-trigger):focus-visible,
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div :is(.select-trigger, input):focus,
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div .select-trigger:focus-visible {
+  border-color: transparent;
+  outline: 2px solid transparent;
+  box-shadow: none;
+}
+
+/* the clear button of a search filter (✕): centred in the pill, a 20px target */
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > button[aria-label] {
+  top: 50%;
+  right: 4px;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--ui-radius-sm);
+  font-size: 11px;
+  line-height: 1;
+  color: rgb(var(--ui-muted));
+  translate: 0 -50%;
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > button[aria-label]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 4 · filter rows */
+
+/* The admin filter strip (UsageFilters) and the user filters: one wrapping row of pills with the actions at its end,
+   8px apart; the filter group is flattened into the row so the actions take the space left on the last line instead of
+   a column of their own. */
+html.flat-theme [data-ui="usage-filters"] > div,
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div {
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+}
+
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"],
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] {
+  display: contents;
+}
+
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="justify-end"],
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="justify-end"] {
+  margin-left: auto;
+  gap: 8px;
+}
+
+/* the strip inside the records card: the reference's tool strip under the card head (10 / 16, 1px line under it) */
+html.flat-theme [data-ui="usage-filters"]:not([class~="card"]) {
+  padding: 10px 16px;
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+/* the cleanup dialog carries the same filters as a plain section of its body, not a card inside the dialog */
+html.flat-theme [data-ui="usage-filters"][class~="card"] {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+/* the user usage filters: a toolbar row on the canvas above the records (the reference's /logs toolbar); the tab strip
+   under it draws the line, so the row has none of its own */
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+/* ================================================================== 5 · the search filters' result lists */
+
+/* The lists under the user / API key / account search pills are overlays.css' utility menus (panel and rows). In the
+   pill row their anchor is the pill, not a field under a label: they open 4px under the pill, flush with its left edge,
+   at least as wide as the pill and as wide as the longest name needs (names are never cut, behaviour.css B1.12). */
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > div[class~="absolute"] {
+  top: calc(100% + 4px);
+  left: -1px;
+  width: max-content;
+  min-width: calc(100% + 2px);
+  max-width: min(28rem, calc(100vw - 2rem));
+  margin-top: 0;
+}
+
+/* a result's id: Geist Mono in the faint text, after the name */
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > div[class~="absolute"] > button > span:last-child:not(:first-child) {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  color: rgb(var(--ui-faint));
+}
+
+/* ================================================================== 6 · 管理控制台: quick actions */
+
+/* The quick-action card becomes one row (MAPPING §4.5: about 44px): its title as the mono label, then each action as
+   a one-line option card (the reference's dialog option card, REF §8.11: radius 8, 1px structural line, the subtle fill
+   at 60 %, the control outline on hover; a 26px neutral icon square) with its title and description side by side and
+   the chevron. Nothing is dropped; the description wraps under the title only where the row is too narrow. */
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~="grid"] > button[class~="group"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 16px;
+  row-gap: 8px;
+  padding: 7px 7px 7px 14px;
+}
+
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~="grid"] > button[class~="group"]) > div:first-child {
+  margin: 0;
+}
+
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~="grid"] > button[class~="group"]) > div:first-child > h2 {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 400;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~="grid"] > button[class~="group"]) > [class~="grid"] {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  gap: 8px;
+  min-width: 0;
+}
+
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > [class~="grid"] > button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"][class~="p-3"] {
+  flex: 0 1 auto;
+  gap: 10px;
+  min-width: 0;
+  padding: 4px 10px 4px 4px;
+}
+
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > [class~="grid"] > button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"][class~="p-3"] > :first-child[class~="flex-shrink-0"] {
+  width: 26px;
+  height: 26px;
+}
+
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > [class~="grid"] > button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"][class~="p-3"] > span:nth-child(2) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 8px;
+}
+
+/* ================================================================== 7 · chart cards of these pages */
+
+/* The user dashboard's model card dims itself while loading with upstream's frosted veil: the reference has one blur only
+   (its docs header), so the veil is the surface at 60 % without it. */
+html.flat-theme [data-ui="user-dashboard"] .card[class~="relative"][class~="overflow-hidden"] > div[class~="absolute"][class~="inset-0"] {
+  background-color: rgb(var(--ui-surface) / 0.6);
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+
+/* ================================================================== 8 · 使用记录 (管理): the records card */
+
+/* The card's head: the tab row (controls.css 7.3 underline tabs) set 6px in, so the first tab's text lines up with the
+   table's 16px edge; the strip under it is section 4's. */
+html.flat-theme [data-ui="admin-usage"] > .card:has(> div > button[data-testid="usage-detail-tab"]) > div:first-child {
+  padding: 0 6px;
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+/* The IP-location bar above a table (UsageTable's own, IpGeoBatchToolbar in the error list): 6 / 16, the count 12px
+   muted, the batch action a link-weight accent text button (REF §8.12 tray links: 12.5 / 600, underline on hover). */
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:is(:has(+ div[class~="overflow-auto"] > .table-wrapper), :has(+ .table-wrapper)) {
+  gap: 12px;
+  padding: 6px 16px;
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:is(:has(+ div[class~="overflow-auto"] > .table-wrapper), :has(+ .table-wrapper)) > span {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:is(:has(+ div[class~="overflow-auto"] > .table-wrapper), :has(+ .table-wrapper)) > button {
+  padding: 2px 0;
+  border-radius: var(--ui-radius-sm);
+  background-color: transparent;
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 600;
+  color: var(--ui-link);
+}
+
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:is(:has(+ div[class~="overflow-auto"] > .table-wrapper), :has(+ .table-wrapper)) > button:hover:not(:disabled) {
+  background-color: transparent;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* ================================================================== 9 · the usage records table */
+
+/* Category chips (decision 2): the group, the request type, native compaction, the billing mode and the cache-TTL chips
+   (1h in the cell, 5m / 1h in the token card) carry data.css' data-ui~="category-chip" (the reference's neutral chip).
+   One request type is a state, not a category: a request stopped by the upstream's security policy (「安全策略」,
+   upstream's red chip) keeps the danger chip, on both records tables. The long-context x2, the overridden cache TTL (R),
+   the model audit line and a deleted user keep their status colours (no hook). */
+html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="user-usage"] .table-wrapper) [data-ui~="category-chip"][class~="bg-red-100"] {
+  border-color: rgb(var(--ui-danger) / 0.3);
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="user-usage"] .table-wrapper, div[class~="fixed"][class~="pointer-events-none"]) [data-ui~="category-chip"] {
+  box-shadow: none;
+}
+
+/* Texture of the cells (REF §8.7 /logs request table: the model 13/500 ink, ids and paths Geist Mono): the requested
+   model at the row's 13px (the mapping chain under it stays 12px muted), the user id after the e-mail and the endpoint
+   paths in Geist Mono; the 「入站 / 上游」 labels stay sans. Same on the error lists of both pages. */
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="model"] :is(span, div)[class~="font-medium"][class~="text-gray-900"] {
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"] .table-wrapper) td[data-column="user"] > div > span:last-child {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+}
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"] .table-wrapper, [data-ui="user-usage"] .table-wrapper) td[data-column="endpoint"] div > span[class~="ml-1"] {
+  font-family: var(--ui-font-mono);
+  font-size: 11.5px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* Figures: token counts, cache and image tokens, the billed cost are ink (their glyphs say which is which); the glyphs
+   themselves the faint grey; the account's billed cost muted. */
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] :is([class~="text-sky-600"], [class~="text-amber-600"], [class~="text-fuchsia-600"], [class~="text-pink-600"]),
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="cost"] span[class~="text-green-600"] {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg:is([class~="text-emerald-500"], [class~="text-violet-500"], [class~="text-sky-500"], [class~="text-amber-500"], [class~="text-fuchsia-500"], [class~="text-pink-500"], [class~="text-indigo-500"]) {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="cost"] div[class~="text-orange-500"] {
+  color: rgb(var(--ui-muted));
+}
+
+/* The token and cost breakdown cards (UsageTable's two portals; the frame is overlays.css 2.3): the billed amounts and
+   the total are figures, so ink at 600 instead of green / blue (decision 2), like the billed cost in the row; the
+   overridden-TTL line keeps its status colour. */
+html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface [class~="justify-between"] > span:last-child:is([class~="text-green-400"], [class~="text-blue-400"]) {
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+}
+
+/* the detail triggers (token and cost breakdowns): the reference's cursor-help info glyph, faint -> ink, no tinted disc */
+html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="tokens"], [data-column="cost"]) div[class~="group"][class~="relative"] > div[class~="rounded-full"] {
+  background-color: transparent;
+  color: rgb(var(--ui-faint));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="tokens"], [data-column="cost"]) div[class~="group"][class~="relative"] > div[class~="rounded-full"] > svg {
+  width: 14px;
+  height: 14px;
+  color: inherit;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="tokens"], [data-column="cost"]) div[class~="group"][class~="relative"]:hover > div[class~="rounded-full"] {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 10 · 使用记录 (管理): 用户排行 */
+
+/* UserTokenRanking: its bar (6 / 16, the explanation and the count 12px muted, the Top-N select at the toolbar's 30px)
+   and its table in the reference's table language (data.css section 3 gives the mono header): cells 10 / 12 (16 at the
+   edges), 42px rows, hover fill; figures Geist Mono ink-soft, the total and the cost ink (decision 2: the cost is not
+   green); the top three ranks a neutral disc, the sorted column's label a step darker with its arrow (not the accent). */
+html.flat-theme [data-ui="admin-usage"] div:has(> div[class~="border-b"] + div[class~="overflow-x-auto"] > table) > div[class~="border-b"] {
+  padding: 6px 16px;
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="admin-usage"] div:has(> div[class~="border-b"] + div[class~="overflow-x-auto"] > table) > div[class~="border-b"] :is(p, span)[class~="text-xs"] {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="admin-usage"] div:has(> div[class~="border-b"] + div[class~="overflow-x-auto"] > table) > div[class~="border-b"] .select-trigger.select-trigger {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table > thead[class~="bg-gray-50"] > tr > th {
+  height: 40px;
+  padding: 10px 12px;
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table > thead[class~="bg-gray-50"] > tr > th:hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table > thead[class~="bg-gray-50"] > tr > th[class~="text-primary-600"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody,
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr {
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr[class~="cursor-pointer"]:hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td {
+  height: 42px;
+  padding: 10px 12px;
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > :is(thead, tbody) > tr > :first-child {
+  padding-left: 16px;
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > :is(thead, tbody) > tr > :last-child {
+  padding-right: 16px;
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td[class~="text-right"] {
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td[class~="text-right"]:is([class~="font-medium"], [class~="text-green-600"]) {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td[class~="font-medium"]:not([class~="text-right"]) {
+  font-size: 13px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td[class~="font-medium"]:not([class~="text-right"]) > span {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td:first-child > span {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td:first-child > span[class~="rounded-full"] {
+  width: 22px;
+  height: 22px;
+  background-color: rgb(var(--ui-subtle));
+  font-size: 11px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 11 · 使用记录 (管理): 错误请求 */
+
+/* OpsErrorLogTable in the records card: its error type and group chips carry data.css' category chip (hooks added by the
+   ops page group); the status code and the severity keep their status colours. The detail button is an icon button,
+   muted -> ink (not the accent). */
+html.flat-theme [data-ui="admin-usage"] .table-wrapper:not([data-table]) td[data-column="actions"] > button {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="admin-usage"] .table-wrapper:not([data-table]) td[data-column="actions"] > button:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 12 · 仪表盘 (用户) */
+
+/* 按平台拆分: the reference's detail stat blocks (REF §8.13: radius 8, 1px structural line, surface, 12 / 14 inset); the
+   section title the mono label with its count in Geist Mono at the right (REF §10.19); a platform's name 13/600, its
+   total spend ink 600 (a value, not a state: decision 2); the rows' figures Geist Mono; the quota title the mono label;
+   the bars keep their status colours (data.css section 8). */
+html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid="platform-card"]) {
+  padding: 14px;
+}
+
+html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid="platform-card"]) > div:first-child > h3 {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 400;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid="platform-card"]) > div:first-child > span {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid="platform-card"]) > [class~="grid"] {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [data-testid="platform-card"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [data-testid="platform-card"][class~="border-dashed"] {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [data-testid="platform-card"] > div:first-child > span:first-child {
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+/* the total spend: ink at 600 (the reference's spend figures) instead of upstream's purple; the mono figure stays */
+html.flat-theme [data-ui="user-dashboard"] [data-testid="platform-card"] span[class~="text-purple-600"] {
+  font-size: 13px;
   font-weight: 600;
+  font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-ink));
 }
+
+html.flat-theme [data-ui="user-dashboard"] [data-testid="platform-card"] > div:nth-child(2) span[class~="font-mono"] {
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [data-testid="platform-card"] p[class~="uppercase"][class~="text-[10px]"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [data-testid="platform-card"] > div[class~="border-t"] {
+  border-color: rgb(var(--ui-line));
+}
+
+/* 最近使用 and 快捷操作 (the bottom row): card heads as the reference's card head (REF §5: 13/600 ink, 12 / 16, a 1px line
+   under it). The recent requests are the reference's request rows (REF §8.7 /logs request table: rows divided by 1px
+   lines, hover fill, the model 13/500 ink, the time 12px muted, figures Geist Mono): no grey tiles; the model glyph sits
+   in a 28px neutral square instead of the accent tint; the billed cost ink (decision 2), the standard price muted; the
+   「查看全部」 link keeps the accent (a link). */
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:grid-cols-3"] .card > div[class~="border-b"]:first-child {
+  padding: 12px 16px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:grid-cols-3"] .card > div[class~="border-b"]:first-child > h2 {
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] {
+  padding: 0;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div:is([class~="py-12"], [class~="py-8"]) {
+  padding: 32px 16px;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] {
+  gap: 16px;
+  padding: 10px 16px;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  border-radius: 0;
+  background-color: transparent;
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"]:hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:first-child {
+  gap: 12px;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:first-child > div[class~="rounded-xl"] {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-ink)) 3%, rgb(var(--ui-surface)));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:first-child > div[class~="rounded-xl"] > svg {
+  width: 15px;
+  height: 15px;
+  color: inherit;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:first-child p:first-child {
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:first-child p:last-child {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:last-child > p {
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:last-child > p:first-child {
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:last-child > p:first-child > span[class~="text-green-600"] {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:last-child > p:first-child > span:not([class~="text-green-600"]) {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > div[class~="rounded-xl"] > div:last-child > p:last-child {
+  font-size: 11.5px;
+  line-height: 17px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > a {
+  padding: 10px 16px;
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 600;
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-2"] .card > div[class~="p-6"] > div[class~="space-y-3"] > a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* 快捷操作 (user): the options stacked 8px apart in a 12px inset (their look is data.css' option card) */
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-1"] .card > div[class~="space-y-3"] {
+  padding: 12px;
+}
+
+html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-1"] .card > div[class~="space-y-3"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 8px;
+}
+
+/* ================================================================== 13 · 使用记录 (用户): tabs, table card, pagination */
+
+/* 用量明细 / 错误请求: upstream's .tab buttons over a 1px line read as the reference's underline tabs (CodeTabs, REF §8.15:
+   the current tab ink with a 2px accent rule; the others muted, ink on hover), as on the admin records card. */
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab) {
+  gap: 0;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab) > button.tab {
+  margin-bottom: -1px;
+  padding: 0.5rem 0.625rem;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab) > button.tab:hover {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab) > button.tab.tab-active {
+  border-bottom-color: rgb(var(--ui-focus));
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+/* The pagination under the records card is the card's footer (as data.css joins them on the table pages): the card
+   loses its bottom corners, the pagination takes the card's edge and the bottom corners. */
+html.flat-theme [data-ui="user-usage"] > .card:has(+ [data-ui="pagination"]):has(.table-wrapper[data-table="usage"]),
+html.flat-theme [data-ui="user-usage"] .card:has(> .table-wrapper):has(+ div > [data-ui="pagination"]) {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+html.flat-theme [data-ui="user-usage"] > .card:has(.table-wrapper[data-table="usage"]) + [data-ui="pagination"]:not([hidden]),
+html.flat-theme [data-ui="user-usage"] .card:has(> .table-wrapper) + div > [data-ui="pagination"] {
+  margin-top: 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-top-width: 0;
+  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
+}
diff --git a/frontend/src/styles/console/pages/ops-channels.css b/frontend/src/styles/console/pages/ops-channels.css
new file mode 100644
index 000000000000..a79e1c1773d3
--- /dev/null
+++ b/frontend/src/styles/console/pages/ops-channels.css
@@ -0,0 +1,3777 @@
+/* Console theme · page group: ops monitoring, channels (pricing, monitor, channel status), audit logs, affiliates, orders, risk control and prompt audit (owner: the ops and channels page agent, wave 2; html.flat-theme selectors narrowed to the page root).
+ *
+ * Reference counterpart: the Experiential Labs console's /logs (REF-CONSOLE §7.1 rhythm, §8.4-§8.7 toolbar controls and
+ * tables, §8.8 chips, §8.13 KPI tiles, §8.14 chart cards; crops logs-toolbar, kpi-row, kpi-card(-danger), chart-card,
+ * history-card / -head / -row, usage-card, uptime-good / -bad). Colour follows the owner's decision 2 (2026-09-29):
+ * status and semantic states, the accent (links, positive CTAs, switches on) and platform identity keep their colour;
+ * KPI tiles, category chips, decorative icons and decorative figures are neutral.
+ *
+ * Page roots and dialog bodies (data-ui hooks, one attribute each, no other template change):
+ *   data-ui="ops-dashboard"      views/admin/ops/OpsDashboard.vue                      the page body (also fullscreen)
+ *   the ops dialogs' bodies §4; the table pages' roots §5; /monitor §6; orders §7; risk control §8; prompt audit §9
+ *   (each section's head lists its hooks and files). Identity / category opt-ins (data.css §6.4) sit on the elements
+ *   upstream colours by platform or category: ChannelsView.vue, ChannelMonitorView.vue (§5), MonitorFormDialog.vue and
+ *   MonitorTemplateManagerDialog.vue's provider choices (§5.7), MonitorCard.vue (§6), AdminPaymentPlansView.vue and
+ *   PlanEditDialog.vue (§7), OpsErrorLogTable.vue's type and group chips (category-chip, §4.3; the list is also
+ *   使用记录's 错误请求 tab).
+ * Shared components (Select, buttons, DataTable, badges, pagination, menus, tooltips, dialogs) keep the shared files'
+ * look; the rules here restyle what upstream draws with utilities on these pages and place things. */
+
+/* ================================================================== 1 · ops monitoring: rhythm */
+
+/* The page's blocks sit 12px apart (the reference's gap-3; upstream's space-y-6 and gap-6 were 24). */
+html.flat-theme [data-ui~="ops-dashboard"][class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="grid"][class~="gap-6"] {
+  gap: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"][class~="pb-12"] {
+  padding-bottom: 0;
+}
+
+/* fullscreen: the page is its own frame (no shell): the shell's gutters, and the canvas behind it */
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] {
+  padding: clamp(1.25rem, 4vh, 1.875rem) clamp(1rem, 3vw, 1.75rem);
+}
+
+/* ================================================================== 2 · ops monitoring: the header (toolbar, KPI) */
+
+/* Upstream frames the toolbar, the health / realtime panel, the six metric cards and the six system cards in one big
+   card. The reference's /logs page has no such frame: a toolbar row on the canvas (its controls, 8px under a 1px
+   structural line), a row of KPI tiles, then the cards (REF §7.1, crops logs-toolbar, kpi-row). */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) {
+  gap: var(--ui-shell-gap, 12px);
+  padding: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+/* 2.1 toolbar row */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child {
+  gap: 8px 12px;
+  padding-bottom: 12px;
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+/* The page title is the header row's (AppHeader: 「运维监控 · 运维监控与排障」, shown from 1024px); there the page's own h1
+   stays for screen readers only. Fullscreen has no header row: its title is the page title (REF §5: 20/600). */
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > h1 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+/* below 1024px the header row shows no title: the page's own title is the card title (13/600) */
+html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > h1 {
+  gap: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > h1 {
+  gap: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > h1 > svg {
+  display: none;
+}
+
+/* the status line: the reference's meta (Mono 11, faint), the ready dot a 6px status dot */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] {
+  margin-top: 0;
+  gap: 8px;
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] {
+  gap: 6px;
+  font-family: var(--ui-font);
+  font-size: 12px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span {
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-green-500"] {
+  background-color: rgb(var(--ui-dot-ok));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-gray-400"] {
+  background-color: rgb(var(--ui-dot-idle));
+}
+
+/* the controls: one 30px row (the table pages' toolbar density), 8px apart */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child .select-trigger.select-trigger {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > div[class~="w-[1px]"] {
+  margin: 0 4px;
+  background-color: rgb(var(--ui-line));
+}
+
+/* refresh, alert rules, settings, fullscreen: the reference's default button (surface, control outline, ink 13/600,
+   radius 6), icon-only ones square; no hue */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button {
+  gap: 6px;
+  height: var(--ui-control-h);
+  min-width: var(--ui-control-h);
+  padding: 0 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button[class~="w-8"] {
+  width: var(--ui-control-h);
+  padding: 0;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button:hover:not(:disabled) {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button:disabled {
+  opacity: 0.55;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button > svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* 2.2 the KPI area: the health / realtime panel and the six metric tiles, 10px apart (REF §8.13 grid gap) */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:last-child {
+  gap: 10px;
+}
+
+/* The health / realtime panel is a card of its own (surface, 1px structural line, radius 8, 14px in). */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child {
+  padding: 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div {
+  gap: 16px;
+}
+
+/* health: the gauge keeps its status colour (it is the status); the score is a figure (600, tabular), its caption the
+   mono label; hovering opens the diagnosis */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  border-radius: var(--ui-radius-md);
+  border-color: rgb(var(--ui-line));
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover {
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] circle[class~="text-gray-200"] {
+  color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 30px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.01em;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
+  font-size: 36px;
+  line-height: 42px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:last-child,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+/* hovered (the diagnosis opens) the panel takes the grouped fill; the two captions go muted there in light (the label
+   grey is 4.35:1 on that fill, the muted grey 4.8:1; dark keeps the label grey, 5.7:1) */
+html.flat-theme:not(.dark) [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="relative"] > div[class~="absolute"] > span:last-child,
+html.flat-theme:not(.dark) [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="mt-4"] > div:first-child {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] {
+  margin-top: 10px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:last-child {
+  margin-top: 2px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+/* the diagnosis popover: the reference's detail popover (radius 6, control outline, surface, the popover shadow,
+   12 / 12 in); its status glyphs keep their colours, the rest is ink and muted */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div {
+  padding: 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-popover);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 {
+  margin-bottom: 10px;
+  padding-bottom: 8px;
+  border-color: rgb(var(--ui-line));
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 > svg {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:first-child {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:nth-child(2) {
+  font-size: 11px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div[class~="text-blue-600"] {
+  font-size: 11px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div[class~="mt-3"] {
+  border-color: rgb(var(--ui-line));
+  font-size: 11px;
+  color: rgb(var(--ui-faint));
+}
+
+/* realtime: the title a mono label (the decorative ping and the animated pulse line go: they carry no data), the window
+   choice a small segmented control, the current QPS / TPS figures 20/600, peak and average 13/600, units Mono 10 */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child {
+  margin-bottom: 10px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child > div[class~="h-3"],
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="h-8"] {
+  display: none;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child {
+  gap: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child h3,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child div[class~="uppercase"][class~="font-bold"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child {
+  gap: 0;
+  padding: 2px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button {
+  padding: 2px 8px;
+  border-radius: var(--ui-radius-sm);
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button[class~="bg-blue-500"] {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child span[class~="font-black"] {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-black"] {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-bold"],
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] span[class~="text-xs"] {
+  font-family: var(--ui-font-mono);
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] > div > div:last-child {
+  margin-top: 2px;
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+/* 2.3 the six metric tiles: the reference's StatTile (REF §8.13: surface, 1px structural line, radius 6, 8 / 12 in; the
+   mono label, the figure 15/600 tabular, the detail rows 12px with Mono figures). A value upstream colours green only
+   because it is inside its threshold is ink (the reference colours a figure only when something is wrong); warning
+   and critical keep their colour, and a critical tile is the reference's alert tile (danger line and soft fill). */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px 10px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child {
+  min-height: 18px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span:first-child,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div > div > div:first-child div[class~="uppercase"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+/* the SLA tile's threshold dot: the reference's 6px status dot */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="h-1.5"] {
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-green-500"] {
+  background-color: rgb(var(--ui-dot-ok));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-yellow-500"] {
+  background-color: rgb(var(--ui-dot-warn));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-red-500"] {
+  background-color: rgb(var(--ui-dot-bad));
+}
+
+/* 「明细」: a link (the accent text, underline on hover), not a blue label */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) button[class~="text-[10px]"][class~="text-blue-500"] {
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 16px;
+  color: var(--ui-link);
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
+}
+
+/* the tile's figure: 15/600 tabular; fullscreen 22 (the wall display) */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
+  margin-top: 2px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
+  font-size: 22px;
+  line-height: 30px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] {
+  margin-top: 2px;
+  gap: 4px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > div[class~="text-3xl"] {
+  margin-top: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > span {
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  font-weight: 400;
+  color: rgb(var(--ui-muted));
+}
+
+/* the detail rows: label 12px muted, figure Mono 12 ink-soft (REF §8.9 breakdown rows), 2px apart */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:is([class~="space-y-2"], [class~="space-y-1"], [class~="grid"], [class~="mt-3"]):not([class~="h-2"]) {
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-2"] > :not([hidden]) ~ :not([hidden]),
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-1"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 2px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="grid"] {
+  row-gap: 2px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-500"] {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"] {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"][class~="text-gray-900"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-400"] {
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the SLA bar: the reference's usage bar (a capsule on the grouped fill; the fill keeps its status colour) */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] {
+  height: 6px;
+  margin-top: 8px;
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] + div[class~="mt-3"] {
+  margin-top: 6px;
+}
+
+/* status colours of the figures: inside the threshold = ink; warning and critical keep theirs */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) :is(div, span)[class~="text-green-600"],
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) :is(div, span)[class~="text-emerald-600"] {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-green-600"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) :is(div, span)[class~="text-yellow-600"] {
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) :is(div, span):is([class~="text-red-600"], [class~="text-rose-600"]) {
+  color: rgb(var(--ui-danger));
+}
+
+/* the alert tiles: critical = the reference's danger KPI (REF §8.13 crop kpi-card-danger: the danger line, the soft
+   fill, the figure in danger); warning the same in the warning colour; the label steps to muted on the tint */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"][class~="text-red-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-red-600"]),
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div > div:has(> div[class~="text-lg"][class~="text-rose-600"]) {
+  border-color: rgb(var(--ui-danger));
+  background-color: rgb(var(--ui-danger-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"][class~="text-yellow-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-yellow-600"]),
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div > div:has(> div[class~="text-lg"][class~="text-yellow-600"]) {
+  border-color: rgb(var(--ui-warning));
+  background-color: rgb(var(--ui-warning-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"]:is([class~="text-red-600"], [class~="text-yellow-600"]), > div[class~="items-baseline"] > div[class~="text-3xl"]:is([class~="text-red-600"], [class~="text-yellow-600"])) > div:first-child > div > span:first-child,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div > div:has(> div[class~="text-lg"]:is([class~="text-rose-600"], [class~="text-yellow-600"])) > div:first-child div[class~="uppercase"] {
+  color: rgb(var(--ui-muted));
+}
+
+/* 2.4 the system tiles (CPU, memory, database, Redis, goroutines, jobs): a KPI row of their own, 10px apart, each the
+   reference's StatTile (label, figure 15/600, the detail 11px muted with Mono figures) */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] {
+  margin-top: 0;
+  padding-top: 0;
+  border-top-width: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div {
+  display: flex;
+  flex-direction: column;
+  min-height: 76px;
+  padding: 8px 12px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
+  margin-top: 2px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
+  font-size: 20px;
+  line-height: 28px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] {
+  margin-top: 2px;
+  font-size: 11px;
+  line-height: 16.5px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] span[class~="font-mono"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* ================================================================== 3 · ops monitoring: cards */
+
+/* 3.1 Every card on the page (concurrency, the five charts, alert events, OpenAI token stats, system logs): the
+   reference's card (REF §8.7 / §8.14: surface, 1px structural line, radius 8, no shadow, 14px in). */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)),
+html.flat-theme [data-ui~="ops-dashboard"] > section:is([class~="rounded-2xl"], [class~="card"]),
+html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] {
+  padding: 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+/* the card head: 12px above the body, controls 26px */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-4"]:first-child,
+html.flat-theme [data-ui~="ops-dashboard"] > section:is([class~="rounded-2xl"], [class~="card"]) > div[class~="mb-4"]:first-child,
+html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] > div[class~="mb-4"]:first-child {
+  min-height: 26px;
+  margin-bottom: 12px;
+}
+
+/* titles: a chart card's title is the mono label (REF §8.14 "SPEND OVER TIME"); a list or table card's title is the
+   reference's card title 13/600 ink with its description 12px muted ("Request history"). The coloured glyph before a
+   title is decoration and goes; the help icon stays. */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) h3 > svg:first-child {
+  display: none;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)):has(canvas, > div > div > [class~="animate-pulse"], > div[class~="min-h-0"] > div > .empty-state, > div[class~="relative"] > div > .empty-state) h3 {
+  gap: 0;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)):not(:has(canvas, > div > div > [class~="animate-pulse"], > div[class~="min-h-0"] > div > .empty-state, > div[class~="relative"] > div > .empty-state)) h3,
+html.flat-theme [data-ui~="ops-dashboard"] section:is([class~="rounded-2xl"], [class~="card"]) h3 {
+  gap: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)), section:is([class~="rounded-2xl"], [class~="card"])) > div:first-child > div > p[class~="text-xs"] {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the head's small buttons (明细 / 重置 / 下载 / 请求错误 / 上游错误, the concurrency view toggle and refresh, the alert
+   refresh): the reference's default button at the small size (26px, radius 6, control outline, surface, 12/600,
+   ink-soft, ink on hover) */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]) {
+  gap: 6px;
+  min-width: 26px;
+  height: 26px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):hover:not(:disabled) {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):disabled {
+  opacity: 0.55;
+}
+
+/* a pressed toggle (the concurrency card's per-user view) is the reference's active filter: accent line at 40 %, the
+   accent tint, accent glyph */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button[class~="bg-blue-100"] {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  background-color: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+}
+
+/* the concurrency card's two glyph-only buttons (px-2 py-1, no label) are square */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button:is([class~="bg-gray-100"], [class~="bg-blue-100"])[class~="px-2"][class~="py-1"] {
+  width: 26px;
+  padding: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button > svg {
+  width: 13px;
+  height: 13px;
+}
+
+/* chart legends in HTML (the throughput head): the reference's legend (REF §8.14: 8px squares with 2px corners, 11px) */
+html.flat-theme [data-ui~="ops-dashboard"] [data-testid="throughput-chart-toolbar"] {
+  gap: 8px;
+  font-size: 11px;
+  line-height: 16.5px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] [data-testid="throughput-chart-toolbar"] > span > span[class~="rounded-full"] {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+/* the throughput drilldown chips (a platform or a group and its request count): the reference's provider chip shape
+   (radius 4, the control outline, Geist Mono 10.5 uppercase ink-soft, the count faint) */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-3"][class~="flex-wrap"] {
+  gap: 6px;
+  margin-bottom: 10px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-3"][class~="flex-wrap"] > button {
+  gap: 6px;
+  padding: 2px 7px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.025em;
+  transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-3"][class~="flex-wrap"] > button:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-3"][class~="flex-wrap"] > button > span:last-child {
+  color: rgb(var(--ui-faint));
+}
+
+/* the error distribution's summary under the doughnut: 「最高: 上游」 ink-soft with the slice's own colour kept on the
+   value, the legend as the reference's (8px squares, 11px muted) */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] {
+  margin-top: 10px;
+  gap: 6px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="font-bold"] {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] {
+  gap: 12px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div {
+  gap: 6px;
+  font-size: 11px;
+  line-height: 16.5px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:first-child {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:last-child {
+  color: rgb(var(--ui-muted));
+  font-variant-numeric: tabular-nums;
+}
+
+/* loading text in a chart's place: the reference's quiet 12px muted line (no pulse) */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="animate-pulse"][class~="text-sm"] {
+  animation: none;
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+/* 3.2 Concurrency / queue: the list sits flush in the card like the reference's tables (no inner frame; a group band
+   for the dimension and its count, then rows divided by 1px lines); each row: name 12/600, the used / total figure
+   Mono ink-soft, the load share Mono (normal ink-soft; the load colours stay on the bar and from 50 % up), the 6px bar
+   on the grouped fill, the account and queue chips as the reference's small status chips. The band's label and count
+   are muted, not the label grey: on the band's fill the label grey is 4.50:1, the muted grey 5.0:1. */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"]:has(> div[class~="bg-gray-50"]) {
+  margin: 0 -14px -14px;
+  border-width: 1px 0 0;
+  border-color: rgb(var(--ui-line));
+  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child {
+  padding: 6px 16px;
+  border-color: rgb(var(--ui-line));
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:last-child {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] {
+  padding: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div {
+  padding: 9px 16px 10px;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  border-radius: 0;
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child {
+  margin-bottom: 6px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] :is(span, div)[class~="text-[11px]"][class~="font-bold"]:not([class~="font-mono"]) {
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="font-mono"] {
+  font-size: 11.5px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="font-bold"]:not([class~="font-mono"]) {
+  font-family: var(--ui-font-mono);
+  font-size: 11.5px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-green-600"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span:is([class~="text-yellow-600"], [class~="text-orange-600"]) {
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-red-600"] {
+  color: rgb(var(--ui-danger));
+}
+
+/* the row's bar: 6px on the grouped fill; the fill keeps the load colour (green / yellow / orange / red) */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="h-1.5"] {
+  background-color: rgb(var(--ui-subtle));
+}
+
+/* the account line under the bar: 11px, the available count ink 600 (a figure, not a status), the share muted */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] {
+  gap: 4px 10px;
+  font-size: 11px;
+  line-height: 16.5px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > svg {
+  width: 12px;
+  height: 12px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span {
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span > span[class~="text-green-600"] {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+/* the small status chips in the rows (rate limited = warning, errors = danger, queued = the reference's backlog tone,
+   available / cooling down): the reference's Chip (capsule, Geist Mono, soft status fill) */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span:is([class~="bg-amber-100"], [class~="bg-red-100"], [class~="bg-purple-100"], [class~="bg-green-100"], [class~="bg-gray-100"]) {
+  padding: 0 6px;
+  border-radius: 9999px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-badge-size, 10px);
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.01em;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-amber-100"] {
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-red-100"] {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-purple-100"] {
+  background-color: rgb(var(--ui-purple-soft));
+  color: rgb(var(--ui-purple));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-green-100"] {
+  background-color: rgb(var(--ui-success-soft));
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-gray-100"] {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+}
+
+/* the empty and disabled states of the list */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="border-dashed"] {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  font-size: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="flex-1"][class~="items-center"] {
+  font-size: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+/* an error line inside a card (upstream: a red-50 box) = the reference's danger notice (radius 6, soft fill, 12px) */
+html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)), section) > div[class~="bg-red-50"] {
+  border: 1px solid rgb(var(--ui-danger) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+  font-size: 12px;
+}
+
+/* 3.3 Hand-built tables on the page and in its dialogs (alert events and their history, system logs, OpenAI token
+   stats, request details, alert rules): the reference's table (REF §8.7): the mono label header on the surface with a
+   1px line under it (thead.bg-gray-50 is data.css' rule; the white-headed ones are drawn the same here), cells 10 / 12
+   (16 at the edges), 13px text, rows divided by 1px lines, hover = --ui-hover where the row opens something. DataTables
+   (the error lists) keep data.css. */
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > thead > tr > th {
+  padding: 10px 12px;
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 500;
+  line-height: 19.5px;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > thead {
+  border-bottom-width: 0;
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > thead + tbody {
+  border-top-width: 0;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody {
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr {
+  border-color: rgb(var(--ui-line));
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td {
+  padding: 10px 12px;
+  font-size: 13px;
+  line-height: 19.5px;
+  vertical-align: middle;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > :is(thead, tbody) > tr > :first-child {
+  padding-left: 16px;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > :is(thead, tbody) > tr > :last-child {
+  padding-right: 16px;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr:is([class~="hover:bg-gray-50"], [class~="cursor-pointer"]):hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+/* the cells' own text sizes (text-xs, 11px) read as the reference's: 13px for text, Mono 12 for times, ids and figures,
+   12px muted for the second line */
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td[class~="text-xs"] {
+  font-size: 13px;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td[class~="whitespace-nowrap"][class~="text-xs"]:first-child,
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td span[class~="font-mono"] {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td :is(div, span)[class~="text-[11px]"] {
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td :is(div)[class~="text-[10px]"] {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td :is(div, span)[class~="font-bold"]:not([class~="rounded-full"]):not([class~="rounded-md"]) {
+  font-weight: 600;
+}
+
+/* 3.4 Status chips of these pages (alert severity P0-P3 and state, log level, request kind, sink counters): the
+   reference's Chip (REF §8.8: a capsule, Geist Mono uppercase, a soft status fill, no ring); tones: critical / error /
+   failed = danger, warning / warn / P1 = warning, info / P2 = info, resolved / success = success, the rest neutral. */
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) span[class~="rounded-full"]:is([class~="text-[10px]"], [class~="text-xs"], [class~="font-semibold"]):is([class*="bg-red-"], [class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-yellow-"], [class*="bg-blue-"], [class*="bg-green-"], [class*="bg-gray-"], [class*="bg-slate-"]):not([class~="h-1.5"], [class~="h-2"]) {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 7px;
+  border-radius: 9999px;
+  box-shadow: none;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-badge-size, 10px);
+  font-weight: 500;
+  line-height: var(--ui-badge-leading, 16px);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) span[class~="rounded-full"]:is([class*="bg-red-"]):not([class~="h-1.5"], [class~="h-2"]) {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) span[class~="rounded-full"]:is([class*="bg-amber-"], [class*="bg-orange-"], [class*="bg-yellow-"]):not([class~="h-1.5"], [class~="h-2"]) {
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) span[class~="rounded-full"]:is([class*="bg-blue-"]):not([class~="h-1.5"], [class~="h-2"], [class~="h-3"]) {
+  background-color: rgb(var(--ui-info-soft));
+  color: rgb(var(--ui-info));
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) span[class~="rounded-full"]:is([class*="bg-green-"]):not([class~="h-1.5"], [class~="h-2"]) {
+  background-color: rgb(var(--ui-success-soft));
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) span[class~="rounded-full"]:is([class*="bg-gray-"], [class*="bg-slate-"]):not([class~="h-1.5"], [class~="h-2"]) {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+}
+
+/* 3.5 Alert events: the card's head holds 30px controls (four Selects and refresh, the table pages' toolbar density);
+   the events table sits flush in the card (REF §8.7 history card: the head inset, then the table from edge to edge on
+   a 1px line), 600px of it scrolls. */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child:has(.select-trigger) .select-trigger.select-trigger {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child:has(.select-trigger) > div:last-child {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child:has(.select-trigger) > div:last-child > button {
+  height: var(--ui-control-h);
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="overflow-hidden"][class~="rounded-xl"][class~="border"] {
+  margin: 0 -14px -14px;
+  border-width: 1px 0 0;
+  border-color: rgb(var(--ui-line));
+  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
+}
+
+/* the title cell keeps its two lines: the title 13/600 ink, the rule text 12px muted */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) table > tbody > tr > td[class~="min-w-[260px]"] > div:first-child {
+  font-size: 13px;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) table > tbody > tr > td[class~="min-w-[260px]"] > div:last-child:not(:first-child) {
+  color: rgb(var(--ui-muted));
+}
+
+/* the e-mail column: the state glyph keeps success / muted, the word 12px ink-soft */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) table > tbody > tr > td[class~="text-right"] span[class~="text-[11px]"] {
+  font-size: 12px;
+  font-weight: 500;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* the list's end marker and loading line */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="max-h-[600px]"] > div:last-child:is([class~="py-3"]) {
+  border-top: 1px solid rgb(var(--ui-line));
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+/* 3.6 System logs: the same card; the sink counters are the reference's small chips (radius 4, Mono 11); the runtime
+   configuration is a grouped panel (1px line, radius 8, the grouped fill); every field label (they wrap their
+   controls) is the mono label above its 34px field; the log table sits flush like the events. */
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div:first-child > div:last-child {
+  gap: 6px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div:first-child > div:last-child > span[class~="rounded-md"] {
+  padding: 1px 7px;
+  border-radius: var(--ui-radius-sm);
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div:first-child > div:last-child > span[class~="bg-gray-100"] {
+  border: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div:first-child > div:last-child > span[class~="bg-amber-100"] {
+  border: 1px solid rgb(var(--ui-warning) / 0.25);
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div:first-child > div:last-child > span[class~="bg-red-100"] {
+  border: 1px solid rgb(var(--ui-danger) / 0.25);
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="rounded-xl"][class~="bg-gray-50"] {
+  margin-bottom: 12px;
+  padding: 12px 14px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="rounded-xl"][class~="bg-gray-50"] > div:first-child {
+  margin-bottom: 10px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="rounded-xl"][class~="bg-gray-50"] > div:first-child > div:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="rounded-xl"][class~="bg-gray-50"] > p {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="rounded-xl"][class~="bg-gray-50"] > p[class~="text-red-600"] {
+  color: rgb(var(--ui-danger));
+}
+
+/* the wrapping labels: the text is the mono label; the control and the hint under it keep their own type */
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] div[class~="grid"] > label[class~="text-xs"]:not([class~="inline-flex"]) {
+  display: block;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] div[class~="grid"] > label[class~="text-xs"]:not([class~="inline-flex"]) > * {
+  margin-top: 6px;
+  font-family: var(--ui-font);
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] div[class~="grid"] > label[class~="text-xs"]:not([class~="inline-flex"]) > span[class~="block"] {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the switches of the runtime configuration: 12px ink-soft beside the box */
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] label[class~="inline-flex"][class~="text-xs"] {
+  gap: 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="grid"][class~="mb-4"] {
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="mb-3"][class~="flex-wrap"] {
+  gap: 8px;
+  margin-bottom: 14px;
+}
+
+/* the log table: flush in the card; time and host in Mono 12, the detail in Mono 12 ink-soft (log lines are machine
+   text, as the reference's labels and ids are Mono); rows top-aligned (a detail may wrap) */
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="overflow-hidden"][class~="rounded-xl"][class~="border"] {
+  margin: 0 -14px -14px;
+  border-width: 1px 0 0;
+  border-color: rgb(var(--ui-line));
+  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] table > tbody > tr > td {
+  vertical-align: top;
+}
+
+/* a detail breaks at its spaces first (upstream break-all split words mid-way); a long token still breaks anywhere */
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] table > tbody > tr > td[class~="break-all"] {
+  word-break: normal;
+  overflow-wrap: anywhere;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] table > tbody > tr > td:is(:nth-child(1), :nth-child(2), :nth-child(4)) {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  line-height: 19.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] table > tbody > tr > td:nth-child(1) {
+  color: rgb(var(--ui-muted));
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] table > thead > tr > th:is([class~="w-[170px]"]) {
+  width: 176px;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] > section[class~="rounded-2xl"] > div[class~="overflow-hidden"] > div[class~="text-center"] {
+  font-size: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+/* 3.7 OpenAI token stats (shown when the dashboard setting is on): the same card and flush table; figures Mono */
+html.flat-theme [data-ui~="ops-dashboard"] section[class~="card"] > div[class~="space-y-3"] > div[class~="overflow-hidden"][class~="rounded-xl"] {
+  margin: 0 -14px;
+  border-width: 1px 0;
+  border-color: rgb(var(--ui-line));
+  border-radius: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] section[class~="card"] > div[class~="space-y-3"] > div[class~="overflow-hidden"] table > thead[class~="bg-white"] > tr {
+  border-bottom-width: 0;
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] section[class~="card"] > div[class~="space-y-3"] > div[class~="overflow-hidden"] table > tbody > tr > td:not(:first-child) {
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] section[class~="card"] > div[class~="space-y-3"] > div[class~="overflow-hidden"] table > tbody > tr > td:first-child {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] section[class~="card"] > div[class~="space-y-3"] > div:last-child[class~="text-xs"] {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] section[class~="card"] > div:first-child > div:last-child > span[class~="text-xs"] {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-dashboard"] section[class~="card"] > div:first-child > div:last-child .select-trigger.select-trigger {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+/* ================================================================== 4 · ops monitoring: dialogs */
+
+/* Dialog bodies (hooks, one attribute each):
+     data-ui="ops-dialog ops-error-list"        OpsErrorDetailsModal.vue      request / upstream error lists
+     data-ui="ops-dialog ops-error-detail"      OpsErrorDetailModal.vue       one error (also opened from 使用记录)
+     data-ui="ops-dialog ops-request-details"   OpsRequestDetailsModal.vue    request details
+     data-ui="ops-dialog ops-settings"          OpsSettingsDialog.vue         the settings sheet
+     data-ui="ops-dialog ops-alert-rules"       OpsAlertRulesCard.vue         alert rules (inside its dialog)
+     data-ui="ops-dialog ops-alert-rule-editor" OpsAlertRulesCard.vue         create / edit a rule
+     data-ui="ops-dialog ops-alert-event"       OpsAlertEventsCard.vue        one alert event
+     data-ui="ops-dialog ops-jobs"              OpsDashboardHeader.vue        background jobs
+     data-ui="ops-dialog ops-custom-range"      OpsDashboardHeader.vue        custom time range
+   The dialog frame, header and footer are overlays.css'; the rules here draw the bodies in the reference's language
+   (REF §8.11 Modal body; panels = the grouped fill with a 1px line; labels = the mono label; figures Mono). */
+
+/* 4.1 Panels that upstream fills with gray-50 (rounded-xl / rounded-2xl): the reference's grouped panel (1px structural
+   line, radius 8, the grouped fill at 60 %, 12 / 14 in); section titles 13/600 ink, small uppercase captions the mono
+   label. */
+html.flat-theme [data-ui~="ops-dialog"] :is(div, details)[class~="bg-gray-50"]:is([class~="rounded-xl"], [class~="rounded-2xl"]):not([class~="p-4"][class~="dark:bg-dark-900"]:only-child) {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="ops-dialog"] :is(div, details)[class~="bg-gray-50"][class~="rounded-2xl"][class~="p-4"],
+html.flat-theme [data-ui~="ops-dialog"] div[class~="bg-gray-50"][class~="rounded-xl"][class~="p-6"] {
+  padding: 12px 14px 14px;
+}
+
+html.flat-theme [data-ui~="ops-dialog"] :is(h3, h4)[class~="uppercase"][class~="tracking-wider"],
+html.flat-theme [data-ui~="ops-dialog"] div[class~="text-xs"][class~="font-bold"][class~="uppercase"][class~="tracking-wider"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-dialog"] h4[class~="text-sm"][class~="font-semibold"],
+html.flat-theme [data-ui~="ops-dialog"] summary[class~="text-sm"][class~="font-semibold"] {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+/* the key-value tiles (error detail summary, alert event times): the reference's detail stat block (REF §8.13: surface,
+   1px line, radius 6, 8 / 12 in, the mono label, the value 13px ink, Mono where upstream sets it) */
+html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"] > div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] {
+  padding: 8px 12px 10px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"]:has(> div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"]) {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"] > div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] > div:nth-child(2) {
+  margin-top: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"] > div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] > div:nth-child(2)[class~="font-mono"],
+html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"] > div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] > div:nth-child(2) span[class~="font-mono"] {
+  font-size: 12.5px;
+}
+
+html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"] > div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] > div:nth-child(2) span[class~="text-primary-600"] {
+  color: rgb(var(--ui-ink));
+}
+
+/* status codes in the tiles: the reference's chip (capsule, Geist Mono, soft status fill, no ring / shadow) */
+html.flat-theme [data-ui~="ops-dialog"] span[class~="rounded-lg"][class~="font-black"][class~="ring-1"] {
+  padding: 1px 8px;
+  border-radius: 9999px;
+  box-shadow: none;
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+/* 4.2 the error detail: 16px between blocks; the root cause is the reference's warning notice (REF §8.16: the warning
+   line and soft fill, radius 6); the payloads are code blocks (REF §8.15: radius 8, 1px line, surface, Mono 12 at
+   1.6); the correlated upstream errors are cards on the panel */
+html.flat-theme [data-ui~="ops-error-detail"] {
+  padding: 0;
+}
+
+html.flat-theme [data-ui~="ops-error-detail"][class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 16px;
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] > div[class~="bg-amber-50"] {
+  padding: 12px 14px;
+  border: 1px solid rgb(var(--ui-warning));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-warning-soft));
+}
+
+/* (both hooks: over 4.1's mono-label rule for uppercase headings, which upstream's h3 here also carries) */
+html.flat-theme [data-ui~="ops-dialog"][data-ui~="ops-error-detail"] > div[class~="bg-amber-50"] > h3 {
+  font-family: var(--ui-font);
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  letter-spacing: 0;
+  text-transform: none;
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] > div[class~="bg-amber-50"] > div {
+  margin-top: 6px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.625;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] pre {
+  padding: 12px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  line-height: 1.625;
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] > div > div[class~="mt-4"][class~="space-y-3"] > div[class~="rounded-xl"][class~="border"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] div[class~="text-xs"][class~="font-black"] {
+  font-family: var(--ui-font-mono);
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] span[class~="rounded-md"][class~="font-mono"][class~="bg-gray-100"] {
+  padding: 1px 6px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] button[class~="text-primary-700"] {
+  border-radius: var(--ui-radius-sm);
+  color: var(--ui-link);
+  font-size: 11.5px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] button[class~="text-primary-700"]:hover:not(:disabled) {
+  background-color: rgb(var(--ui-subtle));
+}
+
+/* the Codex continuation section: its title a card title (13/600), its records the grouped panel */
+html.flat-theme [data-ui~="ops-error-detail"] > section > h2 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] > section > div[data-test="codex-diagnostic-record"] {
+  border-radius: var(--ui-radius-lg);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+  font-size: 13px;
+}
+
+html.flat-theme [data-ui~="ops-error-detail"] > section > div[data-test="codex-diagnostic-record"] th {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+/* 4.3 the error lists: filters in one 30px row under a 1px line (the search the reference's search field: control
+   outline, surface, 13px, the 13px glyph 10px in; the Selects and reset 30px); the count a mono meta line */
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child {
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child > div[class~="grid"] {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child input[type="text"] {
+  height: var(--ui-control-h);
+  padding: 0 10px 0 32px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child input[type="text"]:focus {
+  border-color: rgb(var(--ui-focus));
+  outline: 2px solid transparent;
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child input[type="text"] + * {
+  display: none;
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child div[class~="absolute"] {
+  padding-left: 10px;
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child div[class~="absolute"] > svg {
+  width: 13px;
+  height: 13px;
+  color: rgb(var(--ctl-glyph, var(--ui-control-line)));
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child .select-trigger.select-trigger {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+  font-size: 13px;
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child button[class~="bg-gray-100"] {
+  height: var(--ui-control-h);
+  padding: 0 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:first-child button[class~="bg-gray-100"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="ops-error-list"] > div:last-child > div[class~="mb-2"] {
+  margin-bottom: 8px;
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-label));
+}
+
+/* the list's cells: time Mono; the type and group chips are categories (data.css' category-chip hook, added to
+   OpsErrorLogTable.vue: the reference's neutral chip); the detail action a 28px icon button */
+html.flat-theme [data-ui~="ops-error-list"] .table-wrapper td[data-column="created_at"] > span {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-error-list"] .table-wrapper td[data-column="actions"] > button {
+  width: 28px;
+  height: 28px;
+  display: inline-grid;
+  place-items: center;
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-error-list"] .table-wrapper td[data-column="actions"] > button:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-error-list"] .table-wrapper td[data-column="actions"] > button > svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* 4.4 request details: the range a mono meta line; the table in a 1px frame (radius 8); the id copy the reference's
+   snippet copy button (Mono 10.5, control outline, radius 6); 「查看错误」 the destructive small button (danger text,
+   danger line at 30 %, surface; the soft fill on hover); the empty state the dashed frame */
+html.flat-theme [data-ui~="ops-request-details"] > div:first-child {
+  margin-bottom: 12px;
+}
+
+html.flat-theme [data-ui~="ops-request-details"] > div:first-child > div[class~="text-xs"] {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-request-details"] div[class~="rounded-xl"][class~="border"]:not([class~="border-dashed"]) {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="ops-request-details"] table > tbody > tr > td:nth-child(3) {
+  font-family: var(--ui-font-mono);
+  font-size: 11.5px;
+  letter-spacing: 0.025em;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-request-details"] table > tbody > tr > td:nth-child(4) {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-request-details"] table > tbody > tr > td:is(:nth-child(5), :nth-child(6)) {
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="ops-request-details"] :is(td, div) span[class~="font-mono"][class~="text-[11px]"] {
+  font-size: 12px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-dialog"] button[class~="bg-gray-100"][class~="text-[10px]"][class~="font-bold"] {
+  padding: 2px 7px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  font-weight: 500;
+  line-height: 16px;
+  transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="ops-dialog"] button[class~="bg-gray-100"][class~="text-[10px]"][class~="font-bold"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dialog"] button[class~="bg-red-50"][class~="text-red-600"] {
+  min-height: 26px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-danger) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-danger));
+  font-size: 12px;
+  font-weight: 600;
+  transition: background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="ops-dialog"] button[class~="bg-red-50"][class~="text-red-600"]:hover {
+  border-color: rgb(var(--ui-danger) / 0.5);
+  background-color: rgb(var(--ui-danger-soft));
+}
+
+html.flat-theme [data-ui~="ops-dialog"] div[class~="rounded-xl"][class~="border-dashed"] {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="ops-dialog"] svg[class~="animate-spin"][class~="text-blue-500"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* 4.5 settings: sections are the grouped panel; the toggle rows' labels 13px (upstream's bare labels were 16px);
+   recipients the reference's neutral chip (an address is a value, not a category or a state); the validation notice
+   the warning notice */
+html.flat-theme [data-ui~="ops-settings"][class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 12px;
+}
+
+html.flat-theme [data-ui~="ops-settings"] label[class~="font-medium"]:not([class~="input-label"]):not([class~="text-sm"]) {
+  font-size: 13px;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-settings"] label[class~="text-sm"][class~="font-medium"]:not([class~="block"]) {
+  font-size: 13px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-settings"] h5[class~="text-xs"][class~="font-semibold"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-settings"] p[class~="text-xs"] {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-settings"] span[class~="rounded-full"][class~="bg-blue-100"] {
+  gap: 6px;
+  padding: 1px 4px 1px 8px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui~="ops-settings"] span[class~="rounded-full"][class~="bg-blue-100"] > button {
+  display: inline-grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  border-radius: var(--ui-radius-sm);
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-settings"] span[class~="rounded-full"][class~="bg-blue-100"] > button:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-dialog"] div[class~="border-amber-200"][class~="bg-amber-50"] {
+  border-color: rgb(var(--ui-warning));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-ink));
+  font-size: 12.5px;
+}
+
+html.flat-theme [data-ui~="ops-dialog"] div[class~="border-amber-200"][class~="bg-amber-50"] > div:first-child {
+  font-weight: 600;
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui~="ops-settings"] details > summary {
+  padding: 12px 14px;
+  list-style-position: inside;
+}
+
+html.flat-theme [data-ui~="ops-settings"] details > div {
+  padding: 0 14px 14px;
+}
+
+/* 4.6 alert rules (the card is the dialog's body: no frame of its own) and the rule editor */
+html.flat-theme [data-ui~="ops-alert-rules"] {
+  padding: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child {
+  margin-bottom: 12px;
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child h3 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child p {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child > div:last-child {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child > div:last-child > button[class~="bg-gray-100"],
+html.flat-theme [data-ui~="ops-alert-event"] ~ * button[class~="bg-gray-100"] {
+  min-height: 26px;
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 12px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child > div:last-child > button[class~="bg-gray-100"]:hover:not(:disabled) {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] > div[class~="rounded-xl"][class~="border"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] table > tbody > tr > td:first-child > div:first-child {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] table > tbody > tr > td:first-child > div[class~="text-[11px]"] {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] table > tbody > tr > td:nth-child(2) {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] table > tbody > tr > td:nth-child(3) {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="ops-alert-rules"] table > tbody > tr > td:last-child {
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui~="ops-alert-rule-editor"] > div[class~="bg-red-50"] {
+  padding: 12px 14px;
+  border: 1px solid rgb(var(--ui-danger) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+  font-size: 12.5px;
+}
+
+html.flat-theme [data-ui~="ops-alert-rule-editor"] div[class~="rounded-xl"][class~="bg-gray-50"][class~="px-4"] {
+  padding: 10px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="ops-alert-rule-editor"] div[class~="rounded-xl"][class~="bg-gray-50"][class~="px-4"] > span {
+  font-size: 13px;
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+/* 4.7 one alert event: the head panel (chips, title, description, the silence control in a 1px frame and the manual
+   resolve), the time / rule / dimension tiles, the rule and log links as small default buttons, the history table */
+html.flat-theme [data-ui~="ops-alert-event"][class~="space-y-5"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 12px;
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] > div:first-child > div > div:first-child > div[class~="text-sm"] {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] div[class~="ring-1"][class~="bg-white"][class~="rounded-lg"] {
+  padding: 2px 2px 2px 8px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] div[class~="ring-1"][class~="bg-white"][class~="rounded-lg"] > span {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] a[class~="ring-1"][class~="rounded-md"] {
+  min-height: 24px;
+  padding: 0 8px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  box-shadow: none;
+  color: rgb(var(--ui-ink));
+  font-size: 12px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] a[class~="ring-1"][class~="rounded-md"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] > div[class~="rounded-xl"][class~="border"][class~="bg-white"] {
+  padding: 12px 14px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] > div[class~="rounded-xl"][class~="border"][class~="bg-white"] > div:first-child > div > div:first-child {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] div[class~="rounded-lg"][class~="border"][class~="overflow-hidden"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-ui~="ops-alert-event"] div[class~="rounded-lg"][class~="border"][class~="overflow-hidden"] td {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+}
+
+/* 4.8 background jobs: each job a card on the dialog (1px line, radius 8, 12 / 14 in); the name 13/600, times Mono */
+html.flat-theme [data-ui~="ops-jobs"][class~="space-y-3"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 8px;
+}
+
+html.flat-theme [data-ui~="ops-jobs"] > div {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="ops-jobs"] > div > div:first-child > div:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="ops-jobs"] > div > div:first-child > div:last-child {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-jobs"] > div > div[class~="grid"] {
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="ops-jobs"] > div > div[class~="grid"] span[class~="font-mono"] {
+  margin-left: 4px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="ops-jobs"] > div > div[class~="bg-rose-50"] {
+  border: 1px solid rgb(var(--ui-danger) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+/* 4.9 custom range: the fields 34px with the form-control line (radius 6, accent edge on focus); cancel = the default
+   button, confirm = the ink primary button (REF §8.3) */
+html.flat-theme [data-ui~="ops-custom-range"] input[type="datetime-local"] {
+  min-height: var(--ui-select-h);
+  padding: 6px 10px;
+  border-radius: var(--ui-radius-md);
+  box-shadow: none;
+  font-size: 13px;
+}
+
+html.flat-theme [data-ui~="ops-custom-range"] input[type="datetime-local"]:focus {
+  border-color: rgb(var(--ui-focus));
+  outline: 2px solid transparent;
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme [data-ui~="ops-custom-range"] > div:last-child {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="ops-custom-range"] > div:last-child > button {
+  min-height: var(--ui-control-h);
+  padding: 0 12px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="ops-custom-range"] > div:last-child > button[class~="bg-blue-500"] {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui~="ops-custom-range"] > div:last-child > button:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* ================================================================== 5 · table pages: channels, channel monitor, audit logs, affiliates */
+
+/* Page roots (hooks, one attribute each):
+     data-ui="channels-page"          views/admin/ChannelsView.vue              TablePageLayout (渠道定价)
+     data-ui="channel-monitor-page"   views/admin/ChannelMonitorView.vue        page body (渠道监控)
+     data-ui="audit-page"             views/admin/AuditLogView.vue              TablePageLayout (操作日志)
+     data-ui="audit-detail"           views/admin/AuditLogView.vue              the detail dialog's body
+     data-ui="affiliate-page"         views/admin/affiliates/AdminAffiliateRecordsTable.vue  TablePageLayout (邀请 / 返利 / 提取)
+   Identity and category opt-ins (data.css §6.4): ChannelsView.vue — the platform tabs, the platform choices, group names,
+   rule groups and accounts, the model-mapping fields (data-ui="platform-text"), a group's rate pill
+   (data-ui="platform-chip"); ChannelMonitorView.vue — the provider chip (platform-chip), the check mode (category-chip). */
+
+/* 5.1 Row actions drawn as a glyph over a caption (flex-col, 67px rows): the reference's ghost text button on one line
+   (REF §8.3 ghost: 28px, 8px in, 12.5/600 ink-soft, the grouped fill and ink on hover), so rows keep the reference's 42px;
+   a destructive action takes the danger colour on hover. The caption stays visible (touch and mouse alike). */
+html.flat-theme :is([data-ui~="channels-page"], [data-ui~="channel-monitor-page"]) .table-wrapper td[data-column="actions"] > div {
+  gap: 2px;
+}
+
+html.flat-theme :is([data-ui~="channels-page"], [data-ui~="channel-monitor-page"]) .table-wrapper td[data-column="actions"] button[class~="flex-col"] {
+  flex-direction: row;
+  gap: 5px;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-ink-soft));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-ui~="channels-page"], [data-ui~="channel-monitor-page"]) .table-wrapper td[data-column="actions"] button[class~="flex-col"] > span {
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+html.flat-theme :is([data-ui~="channels-page"], [data-ui~="channel-monitor-page"]) .table-wrapper td[data-column="actions"] button[class~="flex-col"] > svg {
+  width: 14px;
+  height: 14px;
+}
+
+html.flat-theme :is([data-ui~="channels-page"], [data-ui~="channel-monitor-page"]) .table-wrapper td[data-column="actions"] button[class~="flex-col"]:hover:not(:disabled) {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui~="channels-page"], [data-ui~="channel-monitor-page"]) .table-wrapper td[data-column="actions"] button[class~="flex-col"][class~="hover:bg-red-50"]:hover:not(:disabled) {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme :is([data-ui~="channels-page"], [data-ui~="channel-monitor-page"]) .table-wrapper td[data-column="actions"] button[class~="flex-col"]:disabled {
+  opacity: 0.55;
+}
+
+/* 5.2 渠道定价: the channel name 13/600 ink, the description muted; the dialog's platform tabs keep the platform logo's
+   colour (identity, decision 2) while the tab label follows the tab state (controls.css underline tabs) */
+html.flat-theme [data-ui~="channels-page"] .table-wrapper td[data-column="name"] > span {
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="channels-page"] .table-wrapper td[data-column="description"] > span {
+  font-size: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme .modal-content .channel-dialog-body .channel-tab.channel-tab > svg[data-ui~="platform-text"] {
+  color: rgb(var(--pf-text, var(--ui-ink-soft)));
+}
+
+/* the dialog's choice chips (platforms, groups, rule groups): the reference's filter chip (radius 6, the control outline,
+   surface); chosen = the accent tint and its 40 % line (the reference's selected filter); a group already bound to another
+   channel is dimmed by upstream's opacity */
+html.flat-theme .modal-content .channel-dialog-body label[class~="inline-flex"][class~="cursor-pointer"][class~="rounded-md"][class~="border"] {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  transition: border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme .modal-content .channel-dialog-body label[class~="inline-flex"][class~="cursor-pointer"][class~="rounded-md"][class~="border"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme .modal-content .channel-dialog-body label[class~="inline-flex"][class~="cursor-pointer"][class~="rounded-md"][class~="border"][class~="bg-primary-50"] {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  background-color: rgb(var(--ui-primary-soft));
+}
+
+/* the group box: a well (1px line, radius 8, the grouped fill); counts Mono faint */
+html.flat-theme .modal-content .channel-dialog-body div[class~="max-h-40"][class~="overflow-auto"][class~="rounded-lg"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme .modal-content .channel-dialog-body div[class~="max-h-40"] label > span[class~="text-[10px]"][class~="text-gray-400"] {
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-faint));
+}
+
+/* the empty lists (no mapping / pricing rules): the reference's dashed frame */
+html.flat-theme .modal-content .channel-dialog-body div[class~="border-dashed"][class~="rounded"] {
+  padding: 10px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the account-stats rules: cards on the dialog (1px line, radius 8) */
+html.flat-theme .modal-content .channel-dialog-body div[class~="rounded-lg"][class~="border"][class~="p-4"][class~="space-y-3"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+/* 5.3 渠道监控 (admin): the page head as the reference's page title block (no card: title 20/600, the description 13px
+   muted, the V2 / V1 switch the segmented control); the table as the other table pages. The monitor name 13/600; the
+   7-day availability and latency figures Mono. */
+html.flat-theme [data-ui~="channel-monitor-page"][class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header {
+  padding: 0 0 12px;
+  border-radius: 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > h1 {
+  gap: 0;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > h1 > span:first-child {
+  display: none;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > p.page-description {
+  margin-top: 2px;
+  font-size: 13px;
+  line-height: 19.5px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > div[class~="border-t"] {
+  margin-top: 12px;
+  padding-top: 0;
+  border-top-width: 0;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] .table-wrapper td[data-column="name"] span[class~="font-medium"] {
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] .table-wrapper td:is([data-column="availability_7d"], [data-column="latency"]) > span {
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* 5.4 操作日志: the filters become the table pages' toolbar (no card): each labelled field is the reference's filter
+   trigger holding its label as the mono label (the labelled field pills of 使用记录, dashboard-usage.css §3), 30px,
+   8px apart, the actions at the row's end */
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card[class~="p-4"] {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div {
+  align-items: center;
+  gap: 8px;
+}
+
+/* the field group is flattened into the row, so the actions take the space left on its last line */
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child {
+  display: contents;
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  min-height: var(--ui-control-h);
+  padding-left: 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  transition: border-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div > label.input-label {
+  flex: none;
+  margin: 0;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div > :is(div, input):not(label) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* (.input doubled: the pill's own line is the field's outline, over behaviour B3.2's empty-field line) */
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div input.input.input {
+  height: calc(var(--ui-control-h) - 2px);
+  min-height: 0;
+  padding: 0 10px 0 0;
+  border-color: transparent;
+  border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
+  background-color: transparent;
+  box-shadow: none;
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+/* the keyword field's glyph: its label names it, the glyph goes */
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div > div[class~="relative"] > svg {
+  display: none;
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div .select-trigger.select-trigger {
+  width: 100%;
+  min-height: 0;
+  height: calc(var(--ui-control-h) - 2px);
+  padding: 0 9px 0 0;
+  border-color: transparent;
+  border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div:is(:hover, :has(.select-trigger-open)) {
+  border-color: rgb(var(--ui-line-focus));
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div:has(input:focus, .select-trigger:focus-visible) {
+  border-color: rgb(var(--ui-focus));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div :is(input.input.input:focus, .select-trigger.select-trigger:focus-visible) {
+  border-color: transparent;
+  outline: 2px solid transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:last-child {
+  width: auto;
+  margin-left: auto;
+  gap: 8px;
+}
+
+/* the log table: the time Mono muted; the operator (e-mail 13/500 ink, role and sign-in 12px muted); the action Mono
+   12.5 ink over its method and path Mono 11.5 muted; the result the reference's status chip (capsule, Mono, soft fill,
+   the 6px dot) */
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[data-column="created_at"] > span {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[data-column="actor"] > div > div:first-child {
+  font-weight: 500;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[data-column="actor"] > div > div:last-child,
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[data-column="action"] > div > div:last-child {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[data-column="action"] > div > div:first-child {
+  font-size: 12.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[data-column="action"] > div > div:last-child {
+  font-size: 11.5px;
+}
+
+html.flat-theme :is([data-ui~="audit-page"], [data-ui~="audit-detail"]) span[class~="rounded-full"][class~="gap-1.5"][class~="font-semibold"] {
+  gap: 6px;
+  padding: 1px 8px;
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme :is([data-ui~="audit-page"], [data-ui~="audit-detail"]) span[class~="rounded-full"][class~="gap-1.5"][class~="bg-green-100"] {
+  background-color: rgb(var(--ui-success-soft));
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme :is([data-ui~="audit-page"], [data-ui~="audit-detail"]) span[class~="rounded-full"][class~="gap-1.5"][class~="bg-amber-100"] {
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme :is([data-ui~="audit-page"], [data-ui~="audit-detail"]) span[class~="rounded-full"][class~="gap-1.5"][class~="bg-red-100"] {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme :is([data-ui~="audit-page"], [data-ui~="audit-detail"]) span[class~="rounded-full"][class~="gap-1.5"] > span[class~="h-1.5"] {
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme :is([data-ui~="audit-page"], [data-ui~="audit-detail"]) span[class~="rounded-full"][class~="gap-1.5"] > span[class~="bg-green-500"] {
+  background-color: rgb(var(--ui-dot-ok));
+}
+
+html.flat-theme :is([data-ui~="audit-page"], [data-ui~="audit-detail"]) span[class~="rounded-full"][class~="gap-1.5"] > span[class~="bg-amber-500"] {
+  background-color: rgb(var(--ui-dot-warn));
+}
+
+html.flat-theme :is([data-ui~="audit-page"], [data-ui~="audit-detail"]) span[class~="rounded-full"][class~="gap-1.5"] > span[class~="bg-red-500"] {
+  background-color: rgb(var(--ui-dot-bad));
+}
+
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[data-column="actions"] > button {
+  gap: 5px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[data-column="actions"] > button:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* the empty state inside the table: the dashed frame (data.css) with the page's glyph muted */
+html.flat-theme [data-ui~="audit-page"] .table-wrapper td[colspan] > div[class~="flex-col"] > svg {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  color: rgb(var(--ui-faint));
+}
+
+/* 5.5 the audit detail dialog: the head panel (the grouped panel; the status chip, the action Mono 14/600 ink; the method
+   a Mono chip beside the path in a 1px field; the meta 12px muted with Mono ids), the operator / sign-in / IP tiles, the
+   User-Agent and bodies as code blocks, their captions the mono label */
+html.flat-theme [data-ui~="audit-detail"][class~="space-y-5"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 12px;
+}
+
+html.flat-theme [data-ui~="audit-detail"] > div[class~="rounded-2xl"]:first-child {
+  padding: 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="audit-detail"] > div[class~="rounded-2xl"]:first-child > div:first-child > span[class~="font-mono"] {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+html.flat-theme [data-ui~="audit-detail"] > div[class~="rounded-2xl"]:first-child > div[class~="ring-1"] {
+  margin-top: 10px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="audit-detail"] > div[class~="rounded-2xl"]:first-child > div[class~="ring-1"] > span:first-child {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="audit-detail"] > div[class~="rounded-2xl"]:first-child > div:last-child {
+  margin-top: 10px;
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="audit-detail"] > div[class~="grid"] {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui~="audit-detail"] > div[class~="grid"] > div[class~="rounded-xl"][class~="bg-gray-50"] {
+  padding: 8px 12px 10px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="audit-detail"] :is(div, h4)[class~="text-xs"][class~="font-bold"][class~="uppercase"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="audit-detail"] > div[class~="grid"] > div > div:nth-child(2) {
+  margin-top: 4px;
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui~="audit-detail"] > section > :is(div, pre)[class~="rounded-xl"][class~="bg-gray-50"] {
+  padding: 12px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 12px;
+  line-height: 1.625;
+}
+
+/* 5.6 邀请 / 返利 / 提取: a toolbar row (search, two date fields, refresh, the offline withdraw entry at its end); the
+   records use DataTable (data.css). Order numbers and codes Mono. */
+html.flat-theme [data-ui~="affiliate-page"] > .layout-section-fixed > div {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="affiliate-page"] .table-wrapper td[data-column="order"] > div > div:last-child {
+  font-family: var(--ui-font-mono);
+  font-size: 11.5px;
+  color: rgb(var(--ui-muted));
+}
+
+/* 5.7 渠道监控's dialogs (MonitorFormDialog: #channel-monitor-form; MonitorTemplateManagerDialog): the choice buttons
+   (check mode, API mode, provider) are the reference's dialog option cards (REF §8.11: radius 8, the structural line, the
+   grouped fill at 60 %, the control outline on hover); the chosen one is drawn like the segmented thumb's edge (2px ink,
+   as controls.css' option cards); a provider's logo keeps its platform colour (identity, data-ui="platform-text"), the
+   labels are ink. The OpenAI API-mode group is a grouped panel, not an info box. */
+html.flat-theme #channel-monitor-form button[aria-pressed],
+html.flat-theme .modal-content div[class~="grid"] > button[data-ui~="platform-text"][class~="border-2"] {
+  border-width: 1px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  box-shadow: none;
+  color: rgb(var(--ui-ink));
+  transition: border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease), box-shadow var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme #channel-monitor-form button[aria-pressed]:hover:not(:disabled),
+html.flat-theme .modal-content div[class~="grid"] > button[data-ui~="platform-text"][class~="border-2"]:hover {
+  border-color: rgb(var(--ui-line-strong));
+}
+
+html.flat-theme #channel-monitor-form button[aria-pressed="true"],
+html.flat-theme .modal-content div[class~="grid"] > button[data-ui~="platform-text"][class~="border-2"]:not([aria-pressed]):not([class~="bg-white"]) {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
+}
+
+html.flat-theme #channel-monitor-form button[aria-pressed] > span:first-child {
+  font-size: 13px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme #channel-monitor-form button[aria-pressed] > span:last-child:not(:first-child) {
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is(#channel-monitor-form, .modal-content) button[data-ui~="platform-text"][class~="border-2"] > svg {
+  color: rgb(var(--pf-text, var(--ui-ink-soft)));
+}
+
+html.flat-theme :is(#channel-monitor-form, .modal-content) div[class~="rounded-lg"][class~="border-blue-100"][class~="bg-blue-50/50"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+/* ================================================================== 6 · channel status (/monitor, v1 and v2) */
+
+/* Hooks (one attribute each): data-ui="monitor-hero" components/user/monitor/MonitorHero.vue (root), data-ui="monitor-grid"
+   components/user/monitor/MonitorCardGrid.vue (root), data-ui="monitor-detail" components/user/MonitorDetailDialog.vue (the
+   table's wrapper), data-ui="monitor-v2" views/user/ChannelStatusV2View.vue (root). Identity: MonitorCard.vue's logo tile
+   (data-ui="platform-text") and provider chip (platform-chip); the group chip is a category (category-chip).
+   Reference: the /models uptime column (REF §8.7: a 3px capsule per sample, the Mono figure in the state's ink) and the
+   /logs toolbar and KPI tiles. */
+
+/* 6.1 the toolbar row: window (segmented, controls.css), the overall state as the reference's status chip, refresh and
+   auto-refresh as the default button, 30px */
+html.flat-theme [data-ui~="monitor-hero"] {
+  padding: 0 0 12px;
+}
+
+html.flat-theme [data-ui~="monitor-hero"] > div {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="monitor-hero"] > div > span[class~="rounded-full"] {
+  padding: 1px 8px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-badge-size, 10px);
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: 0.06em;
+}
+
+html.flat-theme [data-ui~="monitor-hero"] > div > span[class~="rounded-full"] > span[class~="w-1.5"] {
+  width: 6px;
+  height: 6px;
+  margin-right: 6px;
+}
+
+html.flat-theme [data-ui~="monitor-hero"] > div > button[class~="h-8"] {
+  width: var(--ui-control-h);
+  height: var(--ui-control-h);
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="monitor-hero"] > div > button[class~="h-8"]:hover:not(:disabled) {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="monitor-hero"] > div > button[class~="h-8"] svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* 6.2 the monitor cards: the reference's card (surface, 1px structural line, radius 8, 14 / 16 in, no blur, no lift) in a
+   12px grid; the head = the provider's logo square (REF §8.8: 28px, 1px line, radius 6, the logo in its platform colour),
+   the name 13/600, the provider chip (identity), the model Mono 11.5 muted, the group chip (neutral); the state the
+   reference's status chip */
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] {
+  gap: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > :is(button, div)[class~="rounded-2xl"] {
+  min-height: 0;
+  padding: 14px 16px 12px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  transform: none;
+  transition: border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button[class~="rounded-2xl"]:hover {
+  border-color: rgb(var(--ui-line-strong));
+  box-shadow: none;
+  transform: none;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button[class~="rounded-2xl"]:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div:first-child {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div:first-child > span[data-ui~="platform-text"] {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div:first-child > span[data-ui~="platform-text"] svg {
+  width: 16px;
+  height: 16px;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div:first-child > div > div:first-child {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div:first-child > div > div:last-child {
+  margin-top: 2px;
+  gap: 6px;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div:first-child > div > div:last-child > span[class~="font-mono"] {
+  font-size: 11.5px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div:first-child > span[class~="rounded-full"],
+html.flat-theme [data-ui~="monitor-detail"] td span[class~="rounded-full"] {
+  padding: 1px 7px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-badge-size, 10px);
+  font-weight: 500;
+  line-height: var(--ui-badge-leading, 16px);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+/* the two figures (dialog latency, endpoint ping): the reference's StatTile in small (1px line, radius 6, 8 / 10 in; the
+   mono label with its 12px glyph; the figure Geist Mono 15/600 tabular, the unit Mono 10.5 muted) */
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="grid-cols-2"] {
+  margin-top: 12px;
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="grid-cols-2"] > div {
+  padding: 8px 10px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="grid-cols-2"] > div > div:first-child {
+  gap: 5px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="grid-cols-2"] > div > div:last-child {
+  margin-top: 2px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="grid-cols-2"] > div > div:last-child > span {
+  margin-left: 2px;
+  font-size: 10.5px;
+  font-weight: 400;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="border-t"],
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="border-t"]:not([class~="pt-3"]) {
+  margin-top: 12px;
+}
+
+/* availability: the label the mono label; the figure 22/600 tabular, keeping upstream's red-to-green hue for the value
+   (inline hsl(h 72% 42%), h = 1.2 x percent), darkened in light and lifted to pastel in dark (the reference's uptime
+   inks: light and deep on white, pastel on dark), so every hue from 0 % to 100 % reads >= 4.5:1 on the card (worst:
+   4.8:1 yellow at 50 % on white, 6.9:1 red at 0 % on the dark surface; upstream's own colour is 3.9:1 / 2.4:1 there).
+   Filters work on the rendered sRGB, so the ratio is a property of the hue, not of the data. */
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-3"][class~="items-end"] {
+  margin-top: 10px;
+  align-items: baseline;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-3"][class~="items-end"] > div:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-3"][class~="items-end"] > div:last-child > span:first-child {
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 28px;
+  letter-spacing: -0.01em;
+  filter: brightness(0.64);
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-3"][class~="items-end"] > div:last-child > span:last-child {
+  font-size: 13px;
+  font-weight: 600;
+  filter: brightness(0.64);
+}
+
+html.flat-theme.dark [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-3"][class~="items-end"] > div:last-child > span {
+  filter: contrast(0.5) brightness(1.6);
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-3"][class~="items-end"] + div[class~="text-right"] {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the 60-sample history: the reference's uptime bars (REF §8.7: capsules 3px wide, 2px apart, bottom-aligned); upstream's
+   height code stays (full = up, 65 % = degraded, 35 % = failed, 15 % = not tested) and the fills are the status dots'
+   colours (>= 3:1 on the card, the reference's pastel uptime fills are 1.5:1); captions Mono 10, faint */
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] {
+  margin-top: 12px;
+  padding-top: 10px;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div:first-child {
+  margin-bottom: 8px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div[class~="h-5"] {
+  height: 18px;
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div[class~="h-5"] > div {
+  border-radius: 9999px;
+  background-color: rgb(var(--ui-dot-idle));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div[class~="h-5"] > div[class~="bg-emerald-500"] {
+  background-color: rgb(var(--ui-dot-ok));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div[class~="h-5"] > div[class~="bg-amber-500"] {
+  background-color: rgb(var(--ui-dot-warn));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div[class~="h-5"] > div[class~="bg-red-500"] {
+  background-color: rgb(var(--ui-dot-bad));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div[class~="h-5"] > div[class~="bg-gray-300"] {
+  background-color: rgb(var(--ui-line-strong));
+}
+
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div:last-child {
+  margin-top: 4px;
+  font-family: var(--ui-font-mono);
+  font-size: 10px;
+  letter-spacing: 0.06em;
+  color: rgb(var(--ui-label));
+}
+
+/* the paused (maintenance) strip: the dashed frame */
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > button > div[class~="mt-4"][class~="pt-3"] > div[class~="border-dashed"] {
+  height: 18px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  font-family: var(--ui-font-mono);
+  color: rgb(var(--ui-label));
+}
+
+/* loading placeholders: the reference's card with shimmer blocks (data.css skeleton) */
+html.flat-theme [data-ui~="monitor-grid"] > div[class~="grid"] > div[class~="animate-pulse"] {
+  animation: none;
+}
+
+/* the model detail table: the reference's table in the dialog (mono header, 13px cells, Mono figures) */
+html.flat-theme [data-ui~="monitor-detail"] table > thead {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="monitor-detail"] table > thead > tr > th {
+  padding: 10px 12px 10px 0;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 500;
+  line-height: 19.5px;
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui~="monitor-detail"] table > tbody > tr {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="monitor-detail"] table > tbody > tr > td {
+  padding: 10px 12px 10px 0;
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui~="monitor-detail"] table > tbody > tr > td:not(:first-child):not(:nth-child(2)) {
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* 6.3 channel status v2 (the pulse matrix view; production runs v1, frames with sample data are labelled sample).
+   Upstream draws every block as an elevated card (!rounded-3xl, ring-1 at 5 %); here the reference's card: the ring takes
+   the structural line, no shadow. Upstream's !-important paddings are restated with !important where the reference's
+   insets differ (the only way past them). */
+html.flat-theme [data-ui~="monitor-v2"][class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme [data-ui~="monitor-v2"][class~="pb-12"] {
+  padding-bottom: 0;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] :is(section, div)[class~="ring-1"] {
+  --tw-ring-color: rgb(var(--ui-line));
+  box-shadow: 0 0 0 1px rgb(var(--ui-line));
+}
+
+/* the sticky head card: title 13/600 (the decorative glyph tile goes), the update line Mono 11, refresh the 30px default
+   button; the toolbar row 10 / 16 in, 8px apart */
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header {
+  padding: 12px 16px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header h1 {
+  gap: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header h1 > span:first-child {
+  display: none;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header .page-description {
+  margin-top: 2px;
+  gap: 8px;
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header .page-description > span[class~="relative"],
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header .page-description > span[class~="relative"] > span {
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header .page-description > span > span[class~="bg-green-500"] {
+  background-color: rgb(var(--ui-dot-ok));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header > button {
+  width: var(--ui-control-h);
+  height: var(--ui-control-h);
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > header.page-header > button:hover:not(:disabled) {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > .monitor-toolbar {
+  gap: 8px;
+  padding: 10px 16px;
+}
+
+/* the KPI tiles (MetricCell .stat-card): the reference's StatTile (1px line via the ring, radius 6, 8 / 12 in, 76px);
+   the state dot 6px in the status colours */
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] > .stat-card {
+  min-height: 76px !important;
+  padding: 8px 12px !important;
+  gap: 8px;
+  border-radius: var(--ui-radius-md) !important;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] > .stat-card > div[class~="rounded-full"] {
+  width: 6px;
+  height: 6px;
+  margin-top: 5px;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] > .stat-card > div > :is(small, div)[class~="text-[11px]"] {
+  margin-top: 2px;
+  font-size: 11px;
+  color: rgb(var(--ui-muted));
+}
+
+/* 6.4 the pulse matrix (RelayPulseMatrix): the card 14px in; the title 13/600 (glyph goes), the bucket chip and the
+   reset button 26px; the matrix sits on the card (no inner well), its header the mono label, rows divided by 1px lines,
+   summary figures Mono 12; each bucket a capsule like the reference's uptime bars, coloured by health in the reference's
+   uptime palette (good / warn / bad with the steps between; no traffic = the grouped fill) */
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) {
+  padding: 14px !important;
+  border-radius: var(--ui-radius-lg) !important;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) h2 {
+  gap: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) h2 > span:first-child {
+  display: none;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) h2 + p {
+  margin-top: 2px;
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) .card-header button[class~="border-gray-200"] {
+  height: 26px;
+  padding: 0 10px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .matrix-scroll {
+  padding: 0;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .matrix-header {
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 500;
+  letter-spacing: var(--ui-label-tracking);
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .matrix-row:not(.matrix-header) {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .matrix-row .dimension-cell,
+html.flat-theme [data-ui~="monitor-v2"] .matrix-row .summary-value {
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .matrix-row .dimension-cell > strong {
+  font-size: 12.5px;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .matrix-row .summary-value {
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-weight: 400;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .pulse-track .pulse-cell {
+  border-radius: 9999px;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] :is(.pulse-cell, .status-dot).health-score10,
+html.flat-theme [data-ui~="monitor-v2"] :is(.pulse-cell, .status-dot).health-score9,
+html.flat-theme [data-ui~="monitor-v2"] :is(.pulse-cell, .status-dot).health-healthy {
+  background: rgb(var(--ui-uptime-good));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] :is(.pulse-cell, .status-dot):is(.health-score8, .health-score7) {
+  background: color-mix(in srgb, rgb(var(--ui-uptime-good)) 55%, rgb(var(--ui-uptime-warn)));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] :is(.pulse-cell, .status-dot):is(.health-score6, .health-score5, .health-warning) {
+  background: rgb(var(--ui-uptime-warn));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] :is(.pulse-cell, .status-dot):is(.health-score4, .health-score3) {
+  background: color-mix(in srgb, rgb(var(--ui-uptime-warn)) 45%, rgb(var(--ui-uptime-bad)));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] :is(.pulse-cell, .status-dot):is(.health-score2, .health-score1, .health-score0, .health-critical) {
+  background: rgb(var(--ui-uptime-bad));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .pulse-cell.health-unknown {
+  background: rgb(var(--ui-subtle));
+}
+
+/* the row and legend dots: the reference's 6px status dot in the status colours (a dot must read on its own: >= 3:1) */
+html.flat-theme [data-ui~="monitor-v2"] .status-dot {
+  width: 6px;
+  height: 6px;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .status-dot:is(.health-score10, .health-score9, .health-score8, .health-healthy) {
+  background: rgb(var(--ui-dot-ok));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .status-dot:is(.health-score7, .health-score6, .health-score5, .health-warning) {
+  background: rgb(var(--ui-dot-warn));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .status-dot:is(.health-score4, .health-score3, .health-score2, .health-score1, .health-score0, .health-critical) {
+  background: rgb(var(--ui-dot-bad));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .status-dot.health-unknown {
+  background: rgb(var(--ui-dot-idle));
+}
+
+/* the score legend: the same palette as the cells, a 6px capsule; its words 11px muted */
+html.flat-theme [data-ui~="monitor-v2"] .score-legend {
+  height: 6px;
+  background: linear-gradient(90deg, rgb(var(--ui-uptime-bad)) 0%, color-mix(in srgb, rgb(var(--ui-uptime-warn)) 45%, rgb(var(--ui-uptime-bad))) 30%, rgb(var(--ui-uptime-warn)) 50%, color-mix(in srgb, rgb(var(--ui-uptime-good)) 55%, rgb(var(--ui-uptime-warn))) 70%, rgb(var(--ui-uptime-good)) 100%);
+}
+
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) .card-body > div:last-child {
+  margin-top: 12px;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) .card-body > div:last-child :is(div, span)[class~="text-[11px]"] {
+  font-size: 11px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the floating cell tooltip (teleported to the body, upstream's scoped styles): the reference's detail popover (radius
+   6, control outline, surface, popover shadow); upstream's 11px lines in ink-soft, the title ink 600 (classes doubled:
+   over upstream's scoped dark rules, .dark .matrix-floating-tooltip[data-v-*] at 0,3,0) */
+html.flat-theme .matrix-floating-tooltip.matrix-floating-tooltip {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background: rgb(var(--ui-surface));
+  box-shadow: var(--ui-shadow-popover);
+}
+
+html.flat-theme .matrix-floating-tooltip .matrix-floating-tooltip-line.matrix-floating-tooltip-line {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme .matrix-floating-tooltip .matrix-floating-tooltip-title.matrix-floating-tooltip-title {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+/* 6.5 the detail tabs card (models / error reasons / users): the ring line, the head 12 / 16 in; the tables the
+   reference's (mono header on the surface, 13px cells, 1px lines, Mono figures); error reasons as rows on the grouped
+   fill with a danger bar (no gradient) */
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="card"]:last-child > div:first-child {
+  padding: 12px 16px 0;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="card"]:last-child > div:last-child {
+  padding: 0 0 4px;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .monitor-table > thead > tr > th {
+  padding: 10px 12px;
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 500;
+  line-height: 19.5px;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .monitor-table > tbody > tr > td {
+  padding: 8px 12px;
+  border-color: rgb(var(--ui-line));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .monitor-table > :is(thead, tbody) > tr > :first-child {
+  padding-left: 16px;
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .monitor-table > tbody > tr > td > small,
+html.flat-theme [data-ui~="monitor-v2"] .monitor-table > tbody > tr > td span[class~="text-xs"][class~="block"] {
+  font-size: 11.5px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] .monitor-table > tbody > tr[class~="cursor-pointer"]:hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="card"]:last-child div[class~="rounded-2xl"][class~="bg-gray-50"] {
+  margin: 0 16px;
+  padding: 10px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="card"]:last-child div[class~="rounded-2xl"][class~="bg-gray-50"] i[class~="bg-gradient-to-r"] {
+  background: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="card"]:last-child div[class~="rounded-2xl"][class~="bg-gray-50"] small {
+  font-family: var(--ui-font-mono);
+  font-size: 11.5px;
+}
+
+/* ================================================================== 7 · orders (payment dashboard, orders, plans) */
+
+/* Roots (hooks): data-ui="payment-dashboard" views/admin/orders/AdminPaymentDashboardView.vue, data-ui="orders-page"
+   AdminOrdersView.vue, data-ui="plans-page" AdminPaymentPlansView.vue (their root divs); identity opt-ins: the plan name
+   and PlanEditDialog.vue's group options (data-ui="platform-text"). Payment is off in production: these pages render with
+   the public setting flipped in the browser only. KPI tiles are data.css' StatTile; the payment methods' brand dots stay
+   (identity). */
+html.flat-theme :is([data-ui~="payment-dashboard"], [data-ui~="orders-page"], [data-ui~="plans-page"]):is([class~="space-y-6"], [class~="space-y-4"]) > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"][class~="gap-6"] {
+  gap: var(--ui-shell-gap, 12px);
+}
+
+/* the 7 / 30 / 90-day choice: the reference's segmented control (frame 1px line, radius 8, 2px in; the current segment
+   the ink thumb) */
+html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"]:has(> button) {
+  gap: 0;
+  padding: 2px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"] > button {
+  padding: 5px 12px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 18.75px;
+  transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"] > button:hover {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"] > button[class~="bg-primary-600"] {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] > div:first-child > div {
+  gap: 8px;
+}
+
+/* the distribution and top-users cards: 14px in, the title 13/600; the ranks' medal tints are decoration: a neutral
+   Mono rank square (radius 4, the grouped fill) */
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"]:not(:has(canvas)) {
+  padding: 14px;
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"]:not(:has(canvas)) > h3 {
+  margin-bottom: 12px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"] span[class~="rounded-full"][class~="h-6"][class~="w-6"] {
+  width: 22px;
+  height: 22px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"] div[class~="rounded-lg"][class~="hover:bg-gray-50"]:hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"] :is(div, span)[class~="text-right"] > span[class~="font-medium"],
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"] div[class~="justify-between"] > span[class~="font-medium"]:last-child {
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"] div[class~="h-32"] {
+  font-size: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the orders filters: the table pages' toolbar row (no card), 30px controls, 8px apart */
+html.flat-theme [data-ui~="orders-page"] > .card[class~="p-4"]:first-child {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="orders-page"] > .card[class~="p-4"]:first-child > div {
+  gap: 8px;
+}
+
+html.flat-theme [data-ui~="orders-page"] > .card[class~="p-4"]:first-child :is(.select-trigger.select-trigger, input.input) {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+/* the order rows' actions: the reference's ghost text button (28px, 8px in, 12.5/600); each keeps its colour family
+   (view neutral, cancel warning, refund danger, retry info, approve purple: states of the order) */
+html.flat-theme [data-ui~="orders-page"] .table-wrapper td[data-column="actions"] button[class~="rounded-md"][class~="px-2"] {
+  height: 28px;
+  padding: 0 8px;
+  border-radius: var(--ui-radius-md);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="orders-page"] .table-wrapper td[data-column="actions"] button[class~="rounded-md"][class~="text-gray-600"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="orders-page"] .table-wrapper td[data-column="actions"] button[class~="rounded-md"][class~="text-gray-600"]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+/* plans: the row actions as the other table pages (one line), the price Mono; the for-sale switch is controls.css' */
+html.flat-theme [data-ui~="plans-page"] .table-wrapper td[data-column="actions"] > div {
+  gap: 2px;
+}
+
+html.flat-theme [data-ui~="plans-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"] {
+  flex-direction: row;
+  gap: 5px;
+  height: 28px;
+  padding: 0 8px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="plans-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"] > span {
+  font-size: 12.5px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+html.flat-theme [data-ui~="plans-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"] > svg {
+  width: 14px;
+  height: 14px;
+}
+
+html.flat-theme [data-ui~="plans-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"]:hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="plans-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"][class~="hover:bg-red-50"]:hover {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui~="plans-page"] .table-wrapper td[data-column="price"] > div > span:first-child {
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ================================================================== 8 · 风控中心 (risk control) */
+
+/* Root: data-ui="risk-page" views/admin/RiskControlView.vue; the settings dialog's body data-ui="risk-settings". Risk
+   control is off in production: the page renders with the public setting flipped in the browser only. */
+html.flat-theme [data-ui~="risk-page"][class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme [data-ui~="risk-page"] div[class~="grid"]:is([class~="gap-6"], [class~="gap-3"]) {
+  gap: var(--ui-shell-gap, 12px);
+}
+
+/* the page head: the reference's page title block (20/600, the description 13px muted), actions 30px */
+html.flat-theme [data-ui~="risk-page"] > div:first-child > div:first-child h1 {
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+html.flat-theme [data-ui~="risk-page"] > div:first-child > div:first-child p {
+  margin-top: 2px;
+  font-size: 13px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="risk-page"] > p[data-test="active-audit-engine"] {
+  font-family: var(--ui-font-mono);
+  font-size: 11.5px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the four overview tiles: the reference's StatTile (1px line, radius 6, 8 / 12 in; the coloured glyph tile goes (D4);
+   the label the mono label, the value 15/600, its note 11px muted, the state chip keeps its status tone) */
+html.flat-theme [data-ui~="risk-page"] > div[class~="grid"] > div[class~="rounded-lg"][class~="border"][class~="shadow-sm"] {
+  min-height: 76px;
+  padding: 8px 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="risk-page"] > div[class~="grid"] > div[class~="rounded-lg"][class~="border"][class~="shadow-sm"] > div > div[class~="h-9"] {
+  display: none;
+}
+
+html.flat-theme [data-ui~="risk-page"] > div[class~="grid"] > div[class~="rounded-lg"][class~="border"][class~="shadow-sm"] p[class~="text-xs"][class~="font-medium"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="risk-page"] > div[class~="grid"] > div[class~="rounded-lg"][class~="border"][class~="shadow-sm"] p[class~="text-xl"] {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+}
+
+html.flat-theme [data-ui~="risk-page"] > div[class~="grid"] > div[class~="rounded-lg"][class~="border"][class~="shadow-sm"] p[class~="text-xl"] + p {
+  font-size: 11px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the runtime cards: the reference's card (the head 12 / 16 in over a 1px line, the title 13/600 and its description
+   12px muted, the body 14 / 16 in) */
+html.flat-theme [data-ui~="risk-page"] .card > div[class~="border-b"][class~="px-6"][class~="py-4"] {
+  gap: 10px;
+  padding: 12px 16px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="risk-page"] .card > div[class~="border-b"] h2 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui~="risk-page"] .card > div[class~="border-b"] h2 + p {
+  margin-top: 2px;
+  font-size: 12px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="risk-page"] .card > div[class~="p-6"] {
+  padding: 14px 16px 16px;
+}
+
+html.flat-theme [data-ui~="risk-page"] .card > div[class~="grid"][class~="p-6"] {
+  gap: 14px;
+  padding: 14px 16px 16px;
+}
+
+/* the metric tiles (pre-block sync, worker counts): neutral StatTiles (the tints per metric are decoration); values 15/600
+   tabular in ink, labels the mono label */
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-metric-grid"] {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-metric-grid"] > div,
+html.flat-theme [data-ui~="risk-page"] .card div[class~="grid"][class~="grid-cols-2"][class~="gap-3"] > div[class~="rounded-lg"][class~="p-4"] {
+  padding: 8px 12px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-metric-grid"] > div > p:first-child,
+html.flat-theme [data-ui~="risk-page"] .card div[class~="grid"][class~="grid-cols-2"][class~="gap-3"] > div[class~="rounded-lg"][class~="p-4"] > p:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-metric-grid"] > div > p:nth-child(2),
+html.flat-theme [data-ui~="risk-page"] .card div[class~="grid"][class~="grid-cols-2"][class~="gap-3"] > div[class~="rounded-lg"][class~="p-4"] > p:nth-child(2) {
+  margin-top: 2px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-metric-grid"] > div > p:nth-child(3) {
+  font-size: 11px;
+  color: rgb(var(--ui-muted));
+}
+
+/* the API-key load list and its empty line: rows on the grouped fill (radius 6); key figures Mono; the load bar the
+   capsule on the grouped fill in ink */
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-list"] > div,
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-card"] p[class~="rounded-lg"][class~="bg-gray-50"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+  font-size: 13px;
+}
+
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-list"] p[class~="text-sky-700"] {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-list"] div[class~="bg-sky-500"],
+html.flat-theme [data-ui~="risk-page"] .card div[class~="h-2"] > div[class~="bg-primary-500"] {
+  background-color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="risk-page"] .card div[class~="rounded-lg"][class~="border"][class~="p-4"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+/* the records card: the model-filter line a grouped strip (radius 6), its models Mono chips; filters 30px */
+html.flat-theme [data-ui~="risk-page"] .card div[class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="px-3"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="risk-page"] .card span[class~="rounded-md"][class~="bg-white"][class~="shadow-sm"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  box-shadow: none;
+  font-size: 11px;
+}
+
+html.flat-theme [data-ui~="risk-page"] .card > div[class~="border-b"] :is(.select-trigger.select-trigger, input.input) {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+/* the result chip (block / flag / pass …): the reference's status chip shape, its tone kept */
+html.flat-theme [data-ui~="risk-page"] table > tbody > tr > td > span[class~="rounded-md"][class~="px-2"][class~="py-1"] {
+  padding: 1px 7px;
+  border-radius: 9999px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-badge-size, 10px);
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.025em;
+}
+
+/* the settings dialog: its tab strip is the segmented control; panels the grouped panel */
+html.flat-theme [data-ui~="risk-settings"] > div:first-child {
+  gap: 0;
+  width: max-content;
+  max-width: 100%;
+  padding: 2px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="risk-settings"] > div:first-child > button {
+  padding: 6px 14px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 18.75px;
+  transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme [data-ui~="risk-settings"] > div:first-child > button:hover {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="risk-settings"] > div:first-child > button[class~="bg-primary-50"] {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui~="risk-settings"] div:is([class~="rounded-lg"], [class~="rounded-xl"])[class~="border"][class~="border-gray-100"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="risk-settings"] div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"][class~="border-b"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="risk-settings"] span[class~="h-10"][class~="w-10"][class~="bg-primary-50"] {
+  display: none;
+}
+
+/* 8.1 风控中心 settings: the API-key write mode is a segmented control (frame, 2px in; 「增量添加」 the ink thumb,
+   「覆盖保存」 keeps the warning fill: it replaces the saved keys) */
+html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"]:has(> button) {
+  padding: 2px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"] > button {
+  padding: 5px 12px;
+  border-radius: var(--ui-radius-md);
+  box-shadow: none;
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"] > button[class~="bg-primary-500"] {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"] > button:not([class~="bg-primary-500"]):not([class~="bg-amber-500"]) {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"] > button:not([class~="bg-primary-500"]):not([class~="bg-amber-500"]):hover {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 9 · 提示词审计 (prompt audit) */
+
+/* Root: data-ui="prompt-audit-page" features/prompt-audit/PromptAuditView.vue (risk control's feature flag, flipped in
+   the browser only). The page head: the eyebrow is the mono label (not the accent), the title 20/600, the description
+   13px muted; the workspace card 16px in; each section's title 13/600 with its description 13px muted; tiles and wells
+   the reference's (1px line, radius 6 / 8); the save bar a surface band on a 1px line, no shadow. */
+html.flat-theme [data-ui~="prompt-audit-page"] > header {
+  margin-bottom: 12px;
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] > header p[class~="uppercase"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 400;
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] > header h1 {
+  margin-top: 4px;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+  letter-spacing: 0;
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] > header h1 + p {
+  margin-top: 2px;
+  font-size: 13px;
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] > header > div:last-child {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] > main.card {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section > div:first-child h2,
+html.flat-theme [data-ui~="prompt-audit-page"] section > div:first-child > div > h2 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section[class~="py-6"] {
+  padding-top: 16px;
+  padding-bottom: 16px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] dl > div[class~="rounded-xl"][class~="border"] {
+  padding: 8px 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] dl > div[class~="rounded-xl"][class~="border"] > dt {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section div:is([class~="rounded-xl"], [class~="rounded-lg"])[class~="border"]:not([class~="border-dashed"]) {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section div[class~="rounded-xl"][class~="border"] {
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section div[class~="rounded-lg"][class~="bg-gray-50"] {
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section div[class~="rounded-lg"][class~="bg-gray-50"] > p:nth-child(2) {
+  font-family: var(--ui-font-mono);
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section div[class~="border-dashed"] {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  color: rgb(var(--ui-muted));
+}
+
+/* the endpoint list: the header row the mono label; rows hover the reference's fill (no accent edge); the limit chips Mono */
+html.flat-theme [data-ui~="prompt-audit-page"] section div[class~="xl:grid"][class~="uppercase"] {
+  border-left-width: 0;
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  font-weight: 500;
+  letter-spacing: var(--ui-label-tracking);
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section article[class~="group"] {
+  border-left-width: 0;
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section article[class~="group"]:hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] section span[class~="rounded-md"][class~="bg-gray-100"][class~="tabular-nums"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+}
+
+/* the events' filters: wrapping labels with the label text as the mono label above the 34px control */
+html.flat-theme [data-ui~="prompt-audit-page"] form[class~="grid"] > label[class~="text-xs"] > span:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="prompt-audit-page"] div[class~="overflow-x-auto"][class~="rounded-xl"][class~="border"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+/* the save bar (config tab): a surface band on the structural line, the reference's quiet footer (no drop shadow) */
+html.flat-theme [data-ui~="prompt-audit-page"] + div[class~="sticky"][class~="bottom-0"] {
+  border-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index bb0398cd19c9..7cdd57624f0b 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -2369,3 +2369,1254 @@ html.flat-theme [data-ui="key-usage"] .skeleton {
 }
 
 /* end public */
+
+/* settings: 系统设置 (every tab, its sub-panels and dialogs), 系统提示词 (the library and the per-account binding
+ * views), Codex 路由设置 and 插件管理. Owner: wave 2 P3 (the settings page agent).
+ *
+ * Source: the reference console's settings language (artifacts/tmp/ui-el/ref/console/REF-CONSOLE.md §5, §8.3-§8.5,
+ * §8.11, §8.16 and its public recipes: Modal, ConnectModal, DemoBanner, PromoField, TopUpModal, Toggle, AddChoice)
+ * and its docs pages for long-form text (ref-docs-*: callouts, tables, code). A long form reads as the reference's
+ * panels: section cards (the surface, 1px structural line, radius 8) with a header strip (14 / 20 title, 12.5px
+ * muted description, 14 x 18 inset like its Modal) and a 16 x 18 body; mono field labels (controls.css), 34px
+ * fields, 12px help text; switch rows with a 13 / 600 title and a 12px description beside a right-aligned switch,
+ * hairlines between rows; nested groups as the reference's route cards; notices as its callouts. Colour stays for
+ * states only (warning / info notices, errors, the accent on links, focus and switches that are on; WAVE2 decision 2).
+ *
+ * Template hooks (one attribute each, upstream markup otherwise unchanged):
+ *   views/admin/SettingsView.vue:3                    data-ui="settings"       (page root)
+ *   views/admin/SystemPromptsView.vue:3               data-ui="system-prompts" (page root, fork view)
+ *   components/admin/codex/CodexRuntimeSettings.vue:2 data-ui="codex-runtime"  (page root, fork component)
+ *   views/admin/PluginsView.vue:3                     data-ui="plugins"        (page root)
+ *   views/admin/BackupView.vue:291                    data-ui="r2-guide"       (the R2 guide dialog's outer layer)
+ * Existing hooks used: .settings-tabs-* (SettingsView), #provider-form (PaymentProviderDialog), data-testid
+ * "official-model-catalog*", "image-tools-settings", "observability-settings", "backup-schedule", "retired-plugins",
+ * data-test="account-system-prompt-binding" (the per-account binding in the accounts dialogs).
+ * Selectors start with html.flat-theme and one of those roots; the theme switched off renders upstream. */
+
+/* ================================================================== settings · 0 metrics */
+html.flat-theme :is([data-ui~="settings"], [data-ui~="system-prompts"], [data-ui~="codex-runtime"], [data-ui~="plugins"]) {
+  /* the reference Modal's header (px 18, py 14) and body (px 18, py 16) insets */
+  --set-px: 1.125rem;
+  --set-head-py: 0.875rem;
+  --set-body-py: 1rem;
+  /* the space between the fields and rows of a card, and a row's half gap around its hairline */
+  --set-gap: 1rem;
+  --set-row: 0.875rem;
+  /* text that carries no size of its own (a bare label, a status line) is the console's 13 / 19.5 body text, not the
+     document's 16px */
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+}
+
+/* ================================================================== settings · 1 page rhythm, tab strip */
+
+/* 1.1 The form's blocks (the tab strip, the visible panels, the save row) and the cards of a panel sit one block gap
+   (12px) apart, the reference's /logs rhythm; upstream spaces them 24. */
+html.flat-theme [data-ui~="settings"] > form > :not([hidden]) ~ :not([hidden]),
+html.flat-theme [data-ui~="settings"] > form > [class~="space-y-6"] > :not([hidden]) ~ :not([hidden]),
+html.flat-theme [data-ui~="settings"] > form > div:not([class]) > [class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap);
+}
+
+/* The centred narrow pages (settings max-w-6xl, the prompt library max-w-5xl) start at the content gutter like every
+   console page of the reference, under the header row's title; their maximum width stays (long forms keep a readable
+   measure; the space on the right of a wide screen is canvas). */
+html.flat-theme :is([data-ui~="settings"], [data-ui~="system-prompts"])[class~="mx-auto"] {
+  margin-inline: 0;
+}
+
+html.flat-theme [data-ui~="system-prompts"][class~="px-1"] {
+  padding-inline: 0;
+}
+
+/* 1.2 The tab strip keeps sticking (upstream function) 12px under the header's line (--ui-header-h: 0 on desktop, where
+   the header scrolls away; the 47px bar below 1024). The band behind it (the canvas at 90 % with the reference's one
+   blur, controls.css 7.2) reaches one block gap above and below the strip, so a stuck strip has calm canvas around it
+   and nothing shows through the 12px above it. In flow the bands only cover canvas. */
+html.flat-theme [data-ui~="settings"] .settings-tabs-shell.settings-tabs-shell::before,
+html.flat-theme [data-ui~="settings"] .settings-tabs-shell.settings-tabs-shell::after {
+  position: absolute;
+  inset-inline: 0;
+  height: var(--ui-shell-gap);
+  background: rgb(var(--ui-canvas) / 0.9);
+  -webkit-backdrop-filter: blur(8px);
+  backdrop-filter: blur(8px);
+  content: "";
+  pointer-events: none;
+}
+
+html.flat-theme [data-ui~="settings"] .settings-tabs-shell.settings-tabs-shell::before {
+  bottom: 100%;
+}
+
+html.flat-theme [data-ui~="settings"] .settings-tabs-shell.settings-tabs-shell::after {
+  top: 100%;
+}
+
+/* ================================================================== settings · 2 section cards */
+
+/* 2.1 Header strip: the reference Modal / panel header (px 18, py 14, the structural line under it); title 14 / 20
+   600 ink, description 12.5 / 18.75 muted two pixels under it. Upstream: 24px insets, an 18px title. */
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"]:is([class~="px-6"], [class~="px-4"]) {
+  gap: 0.75rem;
+  padding: var(--set-head-py) var(--set-px);
+}
+
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] :is(h2, h3) {
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] :is(h2 + p, h3 + p, h2 + div, div > p) {
+  margin-top: 0.125rem;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  color: rgb(var(--ui-muted));
+}
+
+/* a glyph beside a card title is a neutral mark, not a hue (decision 2) */
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] :is(h2 svg, div:has(> h2) > svg) {
+  width: 0.9375rem;
+  height: 0.9375rem;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* 2.2 Body: 16 x 18, and one rhythm for every field, row and group in it (upstream mixes 16, 20 and 24). */
+html.flat-theme [data-ui~="settings"] .card > div:is([class~="p-6"], [class~="px-6"]):not([class~="border-b"]),
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] ~ div[class~="p-4"] {
+  padding: var(--set-body-py) var(--set-px) calc(var(--set-body-py) + 0.125rem);
+}
+
+html.flat-theme [data-ui~="settings"] .card > div:is([class~="p-6"], [class~="px-6"]):not([class~="border-b"]):is([class~="space-y-6"], [class~="space-y-5"], [class~="space-y-4"]) > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--set-gap);
+}
+
+/* ================================================================== settings · 3 rows, titles, labels, help */
+
+/* 3.1 Switch rows: a title and its description on the left, the switch on the right, 16px apart at least (upstream
+   has no gap: a long description ran into the switch). Title 13 / 19.5 600 ink (the reference's card and option titles;
+   upstream's bare label is 16px), description 12 / 18 muted. */
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) {
+  gap: 1rem;
+}
+
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > div:first-child {
+  min-width: 0;
+}
+
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > div:first-child > :is(label, span, h3, h4, p):first-child:not([class~="font-mono"]),
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > :is(label, span, h3, h4):first-child:not([class~="font-mono"]) {
+  font-family: var(--ui-font);
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > div:first-child > p:not(:first-child) {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > div:first-child > p:not(:first-child):is([class~="text-gray-500"], [class~="text-gray-400"], [class~="text-gray-600"]) {
+  color: rgb(var(--ui-muted));
+}
+
+/* 3.2 Titles inside a card: the bare row labels (label.font-medium, 16px upstream) and the sub-section headings of any
+   size are the reference's 13 / 600 ink card title; dialogs drawn inside the page keep theirs. A label followed by its
+   description (not by a field) is such a title too. */
+html.flat-theme [data-ui~="settings"] .card label[class~="text-sm"][class~="font-medium"]:not([class~="block"]):has(+ p) {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="settings"] .card label[class~="text-sm"][class~="font-medium"]:not([class~="block"]) + p:is([class~="text-sm"], [class~="text-xs"]) {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+html.flat-theme [data-ui~="settings"] .card :where(label[class~="font-medium"][class~="text-gray-900"], h3, h4):not(:where([class~="font-mono"], [class~="fixed"] *, .modal-content *)) {
+  font-family: var(--ui-font);
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  text-transform: none;
+  color: rgb(var(--ui-ink));
+}
+
+/* 3.3 A title's description (the paragraph right after it, 13 or 12px upstream) is 12 / 18 muted, 2px under it. */
+html.flat-theme [data-ui~="settings"] .card :where(label[class~="font-medium"][class~="text-gray-900"], h3, h4):not(:where([class~="fixed"] *, .modal-content *)) + p:where([class~="text-sm"], [class~="text-xs"]) {
+  margin-top: 0.125rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-muted));
+}
+
+/* 3.4 Field labels. The recipe and the block utility labels are the mono label already (controls.css 3.5, style.css
+   .input-label); the inline ones that sit right before their field (label[for] + input.mt-2, the grok / TTFT /
+   retired-switch fields, the small grey labels of the search provider and the backup list) join them, so a form has
+   one label language. */
+html.flat-theme [data-ui~="settings"] label[class~="text-sm"][class~="font-medium"]:not([class~="block"]):has(+ :is(input, select, textarea, div)),
+html.flat-theme [data-ui~="settings"] label[class~="text-xs"]:is([class~="text-gray-500"], [class~="text-gray-600"]):has(+ :is(input, select, textarea, div)) {
+  display: block;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+/* 3.5 Help text under a field: 12 / 18 muted, 6px under it (upstream mt-1 / mt-1.5 mix). */
+html.flat-theme [data-ui~="settings"] :is(input, select, textarea, .relative, [class~="flex"]) + p[class~="text-xs"]:is([class~="text-gray-500"], [class~="text-gray-400"]) {
+  margin-top: 0.375rem;
+  line-height: 1.125rem;
+}
+
+/* 3.6 Hairline rows and sub-sections: the structural line with one row gap (14px) on each side of it; upstream
+   pads 16 or 20 under a line that sits 16-24 below the previous row. */
+html.flat-theme [data-ui~="settings"] .card > div:is([class~="p-6"], [class~="px-6"]):not([class~="border-b"]) > [class~="border-t"]:is([class~="pt-4"], [class~="pt-5"], [class~="pt-6"]) {
+  padding-top: var(--set-row);
+}
+
+html.flat-theme [data-ui~="settings"] .card > div:is([class~="p-6"], [class~="px-6"]):not([class~="border-b"]):is([class~="space-y-6"], [class~="space-y-5"], [class~="space-y-4"]) > [class~="border-t"]:is([class~="pt-4"], [class~="pt-5"], [class~="pt-6"]):not(:first-child) {
+  margin-top: var(--set-row);
+}
+
+/* ================================================================== settings · 4 groups, notices, chips, buttons */
+
+/* 4.1 Grouped cards inside a card (a login source, a Beta policy, a menu item, a document): the reference's route
+   card, the surface with the structural line, radius 8, a 14px inset (upstream 16). Coloured boxes are notices (4.2). */
+html.flat-theme [data-ui~="settings"] .card div:is([class~="rounded-lg"], [class~="rounded-xl"])[class~="border"]:is([class~="p-4"], [class~="p-5"]):not([class*="bg-amber"], [class*="bg-green"], [class*="bg-sky"], [class*="bg-blue"], [class*="bg-red"], [class*="bg-primary"], [class~="border-dashed"]) {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  padding: 0.875rem;
+}
+
+/* a group drawn on the grouped fill keeps it (the reference's option card: the subtle fill at 60 %) */
+html.flat-theme [data-ui~="settings"] .card div[class~="rounded-lg"][class~="border"][class~="bg-gray-50"]:is([class~="p-4"], [class~="p-5"]) {
+  background-color: rgb(var(--ui-subtle) / 0.6);
+}
+
+/* one-line bordered rows (an OAuth source, a provider line): 10 x 14 */
+html.flat-theme [data-ui~="settings"] .card div[class~="rounded"][class~="border"][class~="px-4"][class~="py-3"]:not([class~="border-dashed"]) {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  padding: 0.625rem 0.875rem;
+}
+
+/* 4.2 Notices: the reference's callout (radius 6, 12 x 14, 13px with a relaxed line) in the colour of its state
+   (warning, success, danger): the soft fill and the state colour at 30 % as the edge, in dark too (the soft tokens
+   are the state at 18 %, not upstream's translucent 900 shades). Their text keeps the state colour upstream gives it
+   (the warning is the message). A notice that holds a switch row stays a row. Blue / sky info boxes are not a state:
+   they are the shared neutral callout (data.css §11, decision 2). */
+html.flat-theme [data-ui~="settings"] :is(div, p)[class~="border"]:is([class~="bg-amber-50"], [class~="bg-yellow-50"], [class~="bg-orange-50"]) {
+  border-color: rgb(var(--ui-warning) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-warning-soft));
+  padding: 0.75rem 0.875rem;
+  line-height: 1.3125rem;
+}
+
+html.flat-theme [data-ui~="settings"] :is(div, p)[class~="border"]:is([class~="bg-green-50"], [class~="bg-emerald-50"]) {
+  border-color: rgb(var(--ui-success) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-success-soft));
+  padding: 0.75rem 0.875rem;
+}
+
+html.flat-theme [data-ui~="settings"] :is(div, p)[class~="border"]:is([class~="bg-red-50"], [class~="bg-rose-50"]) {
+  border-color: rgb(var(--ui-danger) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-danger-soft));
+  padding: 0.75rem 0.875rem;
+}
+
+/* the left-rule note becomes the same notice (the reference draws no side rules) */
+html.flat-theme [data-ui~="settings"] div[class~="border-l-2"][class~="bg-amber-50"] {
+  border: 1px solid rgb(var(--ui-warning) / 0.3);
+}
+
+/* a notice's glyph sits on its first line */
+html.flat-theme [data-ui~="settings"] :is(div, p)[class~="border"][class*="bg-amber-50"] svg {
+  width: 0.9375rem;
+  height: 0.9375rem;
+}
+
+/* 4.3 Dashed "add" buttons (add an endpoint, a menu item, a rule): a quiet 34px outline in the control line, dashed,
+   radius 6, 12.5 / 600 muted, ink on hover; not the accent (the reference adds with a default button). */
+html.flat-theme [data-ui~="settings"] button[class~="border-dashed"] {
+  min-height: var(--ui-select-h);
+  gap: 0.375rem;
+  border-width: 1px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  padding: 0.3125rem 0.75rem;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-muted));
+  transition-property: color, border-color, background-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="settings"] button[class~="border-dashed"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="settings"] button[class~="border-dashed"] svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+/* dashed empty boxes ("no rule yet") are the reference's empty state: dashed control outline, radius 8, 12.5px muted */
+html.flat-theme [data-ui~="settings"] div[class~="border-dashed"] {
+  border-width: 1px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  color: rgb(var(--ui-muted));
+}
+
+/* 4.4 Remove-item glyph buttons (a red trash can at rest upstream): the reference's 28px icon button, muted at rest,
+   the danger colour on hover and focus (the accounts table's delete glyph does the same). */
+html.flat-theme [data-ui~="settings"] button[class~="text-red-400"]:is([class~="p-1"], [class~="p-2"]) {
+  display: inline-grid;
+  place-items: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--ui-radius-md);
+  padding: 0;
+  color: rgb(var(--ui-muted));
+  transition-property: color, background-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="settings"] button[class~="text-red-400"]:is([class~="p-1"], [class~="p-2"]):is(:hover, :focus-visible) {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui~="settings"] button[class~="text-red-400"]:is([class~="p-1"], [class~="p-2"]) svg {
+  width: 0.9375rem;
+  height: 0.9375rem;
+}
+
+/* 4.5 Quick-fill chips (model patterns): the reference's value chip, Geist Mono 11 ink-soft, the control outline,
+   radius 4; ink on hover (upstream turns them green). */
+html.flat-theme [data-ui~="settings"] button[class~="rounded"][class~="border"][class~="px-2"][class~="py-0.5"][class~="text-xs"] {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-surface));
+  padding: 0.0625rem 0.375rem;
+  font-family: var(--ui-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="settings"] button[class~="rounded"][class~="border"][class~="px-2"][class~="py-0.5"][class~="text-xs"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+/* 4.6 Values set as code inside a card (callback URLs, the admin key): Geist Mono 12 ink-soft on the grouped fill,
+   radius 4 (the reference's value chip). */
+html.flat-theme [data-ui~="settings"] .card code[class~="rounded"]:is([class~="bg-gray-50"], [class~="bg-gray-100"]) {
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* 4.7 Header-less tables in a card (the platform quota matrix, the source overrides): the reference's table header,
+   the mono label at 500 with the structural line under it; 8px between rows. */
+html.flat-theme [data-ui~="settings"] .card table > thead:not([class~="bg-gray-50"]) > tr > th {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 500;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+/* the matrix rows set their name beside 32px fields: centred on the field, not on its top edge */
+html.flat-theme [data-ui~="settings"] .card table tr[class~="align-top"]:has(> td > input) > td {
+  vertical-align: middle;
+}
+
+/* ================================================================== settings · 5 panels inside a card */
+
+/* 5.1 The Codex card stacks three fork panels (Image Studio, observation, the model catalogue) and the client rules:
+   one hairline between them, as between the rows of a card. */
+html.flat-theme [data-ui~="settings"] .card > div[class~="p-6"] > :is([data-testid="image-tools-settings"], [data-testid="observability-settings"], [data-testid="official-model-catalog"]) + * {
+  margin-top: var(--set-row);
+  border-top: 1px solid rgb(var(--ui-line));
+  padding-top: var(--set-row);
+}
+
+/* their checkbox options: 13px ink beside the 14px box, 8px apart */
+html.flat-theme [data-ui~="settings"] :is([data-testid="image-tools-settings"], [data-testid="observability-settings"]) > label {
+  gap: 0.5rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="settings"] :is([data-testid="image-tools-settings"], [data-testid="observability-settings"]) > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0.625rem;
+}
+
+/* 5.2 The model catalogue reads as the reference's docs reference list: a bordered scroll box (radius 8, 14px in),
+   one entry per hairline; the model id in Geist Mono 12.5 / 600 ink, the provider / product in mono 11 muted; the
+   facts as a two-column definition list, 12 / 18, labels muted, values ink-soft; the count as the reference's mono
+   meta line. Every field stays shown. */
+html.flat-theme [data-ui~="settings"] [data-testid="official-model-catalog-list"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  padding-inline: 0.875rem;
+}
+
+html.flat-theme [data-ui~="settings"] [data-testid="official-model-catalog-entry"] {
+  padding-block: 0.625rem 0.75rem;
+}
+
+html.flat-theme [data-ui~="settings"] [data-testid="official-model-catalog-entry"] > p:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="settings"] [data-testid="official-model-catalog-entry"] > p:nth-child(2) {
+  font-family: var(--ui-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.03125rem;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="settings"] [data-testid="official-model-catalog-entry"] > dl {
+  margin-top: 0.5rem;
+  column-gap: 1rem;
+  row-gap: 0.125rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+html.flat-theme [data-ui~="settings"] [data-testid="official-model-catalog-entry"] > dl > dt {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="settings"] [data-testid="official-model-catalog-entry"] > dl > dd {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="settings"] [data-testid="official-model-catalog"] > p[class~="text-xs"] {
+  font-family: var(--ui-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.03125rem;
+  color: rgb(var(--ui-label));
+}
+
+/* ================================================================== settings · 6 tab specifics */
+
+/* 6.1 数据备份 (BackupView's cards are p-6 boxes with a title block): the same section card as the other tabs, the
+   title block drawn as its header strip (the 14 x 18 inset and the line under it), the body 16 x 18. */
+html.flat-theme [data-ui~="settings"] .card[class~="p-6"] {
+  padding: var(--set-body-py) var(--set-px) calc(var(--set-body-py) + 0.125rem);
+}
+
+html.flat-theme [data-ui~="settings"] .card[class~="p-6"] > div:first-child[class~="mb-4"] {
+  margin: calc(var(--set-body-py) * -1) calc(var(--set-px) * -1) var(--set-body-py);
+  border-bottom: 1px solid rgb(var(--ui-line));
+  padding: var(--set-head-py) var(--set-px);
+}
+
+html.flat-theme [data-ui~="settings"] .card[class~="p-6"] > div:first-child[class~="mb-4"] h3 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+html.flat-theme [data-ui~="settings"] .card[class~="p-6"] > div:first-child[class~="mb-4"] h3 + p {
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+}
+
+/* the backup list: the reference's table header (mono label, the line under it), 42px rows, figures in Geist Mono */
+html.flat-theme [data-ui~="settings"] .card[class~="p-6"] table > thead > tr {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="settings"] .card[class~="p-6"] table > thead > tr > th {
+  padding-block: 0.625rem;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 500;
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="settings"] .card[class~="p-6"] table > tbody > tr {
+  border-color: rgb(var(--ui-line));
+}
+
+/* the retention summary is a grouped note (the reference's option card fill), not a grey slab */
+html.flat-theme [data-ui~="settings"] [data-testid="backup-schedule"] > div[class~="rounded-lg"][class~="bg-gray-50"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  padding: 0.625rem 0.875rem;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="settings"] [data-testid="backup-schedule"] > div[class~="rounded-lg"][class~="bg-gray-50"] > p:first-child {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+/* 6.2 邮件设置 · the template editor (EmailTemplateEditor.vue, inside the page). The selected event's summary is a
+   description, not a state: the shared neutral callout (data.css §11 gives its line, fill and text; here only its
+   radius and inset), its category and delivery chips neutral (upstream tints it with the accent and colours the
+   delivery kind). The HTML body is set as the reference's code
+   (Geist Mono 12.5 on a 1.625 line). Placeholders are value chips: the structural outline, Geist Mono 11, ink on
+   hover (not green). The live preview panel's header is a panel header (10 x 14, 13 / 600 title). */
+html.flat-theme [data-ui~="settings"] .card div[class~="rounded-lg"][class~="border"][class~="border-primary-100"] {
+  border-radius: var(--ui-radius-lg);
+  padding: 0.75rem 0.875rem;
+}
+
+html.flat-theme [data-ui~="settings"] .card div[class~="border-primary-100"] > div:first-child > div {
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+}
+
+html.flat-theme [data-ui~="settings"] .card div[class~="border-primary-100"] > div:first-child > span[class~="rounded-full"] {
+  border: 1px solid rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  padding: 0.0625rem 0.5rem;
+  font-size: 0.6875rem;
+  line-height: 1.03125rem;
+  font-weight: 500;
+  color: rgb(var(--ui-ink-soft));
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="settings"] .card div[class~="border-primary-100"] > p {
+  font-size: 0.78125rem;
+  line-height: 1.25rem;
+}
+
+html.flat-theme [data-ui~="settings"] .card textarea#email-template-html {
+  font-size: 0.78125rem;
+  line-height: 1.625;
+}
+
+html.flat-theme [data-ui~="settings"] .card button[class~="rounded-full"][class~="font-mono"][class~="px-3"] {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  padding: 0.125rem 0.625rem;
+  font-size: 0.6875rem;
+  line-height: 1.03125rem;
+  color: rgb(var(--ui-ink-soft));
+  transition-property: color, border-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="settings"] .card button[class~="rounded-full"][class~="font-mono"][class~="px-3"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="settings"] .card div[class~="rounded-lg"][class~="border"]:not([class*="bg-amber"]) > div:first-child[class~="border-b"][class~="px-4"][class~="py-3"] {
+  padding: 0.625rem 0.875rem;
+}
+
+/* ================================================================== 7 · page heads of the fork pages and plugins */
+
+/* 7.1 The page's own heading repeats the header row's title word for word (系统提示词 in Chinese — its route title is
+   not translated —, Codex 路由设置, 插件管理). From 1024px, where the header row shows the title, it is kept for
+   assistive technology only; below that the header hides its title and the page heading stays. */
+@media (min-width: 1024px) {
+  html.flat-theme:lang(zh) [data-ui~="system-prompts"] > header h1,
+  html.flat-theme [data-ui~="codex-runtime"] > h2:first-child,
+  html.flat-theme [data-ui~="plugins"] > section:first-child h2 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+/* 7.2 The intro under the title: the reference's page intro (13px on a relaxed line, muted, 780px at most). */
+html.flat-theme [data-ui~="system-prompts"] > header p,
+html.flat-theme [data-ui~="codex-runtime"] > h2:first-child + p,
+html.flat-theme [data-ui~="plugins"] > section:first-child > div:first-child > p {
+  max-width: 48.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.625;
+  color: rgb(var(--ui-muted));
+}
+
+/* (the shell's page rhythm, 0,6,2, spaces main's direct children; the doubled root attribute outranks it) */
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui~="codex-runtime"][data-ui~="codex-runtime"] > h2:first-child:not([hidden]) + p:not([hidden]) {
+    margin-top: 0;
+  }
+}
+
+/* the page title where it stays (below 1024px, or an untranslated route title): the reference's 20 / 28 page title */
+html.flat-theme :is([data-ui~="system-prompts"] > header h1, [data-ui~="codex-runtime"] > h2:first-child, [data-ui~="plugins"] > section:first-child h2) {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 8 · 系统提示词 (SystemPromptsView, fork) */
+
+/* 8.1 Rhythm: the head, the switch section and the library sit one block gap apart (the reference's 12). The head
+   is an intro line with its actions, no rule under it; each section is a section card (surface, structural line,
+   radius 8, 16 x 18). */
+html.flat-theme [data-ui~="system-prompts"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap);
+}
+
+html.flat-theme [data-ui~="system-prompts"] > header {
+  align-items: flex-end;
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+html.flat-theme [data-ui~="system-prompts"] > section {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  padding: var(--set-body-py) var(--set-px) calc(var(--set-body-py) + 0.125rem);
+}
+
+/* 8.2 The switch line (switch, title, hint on one row) and the default prompt: title 13 / 600 ink, hint 12 muted;
+   the field label is the mono label; the usage line in ink-soft with its figures tabular; the notes 12 muted. */
+html.flat-theme [data-ui~="system-prompts"] > section:first-of-type > label:first-child > span[class~="font-medium"] {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="system-prompts"] > section:first-of-type > label:first-child > span[class~="text-xs"] {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="system-prompts"] label > span[class~="block"]:first-child {
+  margin-bottom: 0.5rem;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="system-prompts"] label[class~="space-y-1"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0;
+}
+
+html.flat-theme [data-ui~="system-prompts"] label > span[class~="text-xs"]:last-child {
+  margin-top: 0.375rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="system-prompts"] [data-test="system-prompts-usage"] {
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="system-prompts"] > section > p[class~="text-xs"] {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+/* 8.3 The library card: its title row is the card's header strip (14 x 18, the line under it, 14 / 600 title, the
+   add button at the right); each prompt is a row under a hairline; the body is the reference's code (Geist Mono
+   12.5 on a 1.625 line); the byte count and the users in the mono meta line. */
+html.flat-theme [data-ui~="system-prompts"] > section:last-of-type > div:first-child {
+  margin: calc(var(--set-body-py) * -1) calc(var(--set-px) * -1) 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  padding: 0.625rem var(--set-px);
+}
+
+html.flat-theme [data-ui~="system-prompts"] > section:last-of-type > div:first-child > h2 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="system-prompts"] > section:last-of-type > article {
+  border-color: rgb(var(--ui-line));
+  padding-top: var(--set-body-py);
+}
+
+html.flat-theme [data-ui~="system-prompts"] > section:last-of-type > div:first-child + article {
+  border-top-width: 0;
+}
+
+html.flat-theme [data-ui~="system-prompts"] > section:last-of-type > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--set-gap);
+}
+
+/* a prompt's field row: the remove button stands as tall as the 34px fields beside it */
+html.flat-theme [data-ui~="system-prompts"] article > div[class~="items-end"] > .btn {
+  min-height: var(--ui-select-h);
+}
+
+html.flat-theme [data-ui~="system-prompts"] article textarea.input {
+  font-size: 0.78125rem;
+  line-height: 1.625;
+}
+
+html.flat-theme [data-ui~="system-prompts"] article > p[class~="text-xs"] {
+  gap: 0.25rem 1rem;
+  font-family: var(--ui-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.03125rem;
+  font-variant-numeric: tabular-nums;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="system-prompts"] article > p[class~="text-xs"] > [class~="text-red-600"] {
+  color: rgb(var(--ui-danger));
+}
+
+/* ================================================================== 8b · the per-account binding (accounts dialogs) */
+
+/* AccountSystemPromptBinding.vue, inside the account row menu's dialog, the bulk dialog and the account edit dialog:
+   the same field language (mono labels over 34px selects, 12px muted notes), the effect line in ink-soft. */
+html.flat-theme [data-test="account-system-prompt-binding"] label > span[class~="block"]:first-child {
+  margin-bottom: 0.5rem;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-test="account-system-prompt-binding"] label[class~="space-y-1"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0;
+}
+
+html.flat-theme [data-test="account-system-prompt-binding"] > p[class~="text-xs"] {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-test="account-system-prompt-binding"] > [data-test="system-prompt-binding-effect"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* with its apply button (the row-menu and bulk dialogs) the row holds one control height: the button stands as tall
+   as the 34px select beside it (the reference's PromoField: a 34px field and a 34px apply button) */
+html.flat-theme [data-test="account-system-prompt-binding"] > div[class~="items-end"] > .btn {
+  min-height: var(--ui-select-h);
+}
+
+html.flat-theme [data-test="account-system-prompt-binding"] > h3 {
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 9 · Codex 路由设置 (CodexRuntimeSettings, fork) */
+
+/* 9.1 The form is one section card (surface, structural line, radius 8, 16 x 18); its fields follow the settings
+   language: the two switches as 13px options beside their 14px boxes, the runtime facts as a two-column definition
+   list on the grouped fill (labels muted, values ink, identifiers in Geist Mono), mono field labels, the proxy in
+   Geist Mono, 12px notes, the actions as one row. */
+html.flat-theme [data-ui~="codex-runtime"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap);
+}
+
+html.flat-theme [data-ui~="codex-runtime"] > fieldset {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  padding: var(--set-body-py) var(--set-px) calc(var(--set-body-py) + 0.125rem);
+}
+
+html.flat-theme [data-ui~="codex-runtime"] > fieldset > label[class~="flex"] {
+  gap: 0.5rem;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="codex-runtime"] > fieldset > label[class~="flex"] + label[class~="flex"] {
+  margin-top: 0.625rem;
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-runtime-facts"] {
+  column-gap: 1.25rem;
+  row-gap: 0.25rem;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  padding: 0.625rem 0.875rem;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-runtime-facts"] > dt {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-runtime-facts"] > dd {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-runtime-facts"] > dd[class~="font-mono"] {
+  font-size: 0.75rem;
+}
+
+/* on a phone the long labels left the values a sliver (the model list broke every few letters): each value under
+   its label */
+@media (max-width: 639.98px) {
+  html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-runtime-facts"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-runtime-facts"] > dd:not(:last-child) {
+    margin-bottom: 0.375rem;
+  }
+}
+
+html.flat-theme [data-ui~="codex-runtime"] fieldset label > span:first-child:not(:only-child) {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="codex-runtime"] fieldset label[class~="space-y-2"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0;
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-proxy"] {
+  font-family: var(--ui-font-mono);
+  font-size: 0.78125rem;
+  line-height: 1.625;
+}
+
+html.flat-theme [data-ui~="codex-runtime"] > fieldset > div[class~="flex"][class~="items-end"] {
+  gap: 0.5rem;
+}
+
+/* one control height per row (controls.css 4.4): the protocol select sits beside 30px buttons */
+html.flat-theme [data-ui~="codex-runtime"] > fieldset > div[class~="flex"][class~="items-end"] select.input {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+html.flat-theme [data-ui~="codex-runtime"] > fieldset > p[class~="text-sm"] {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+/* the candidates and the issue list: a grouped box (radius 6) with a mono legend; issues in the danger colour */
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-proxy-candidates"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  padding: 0.625rem 0.875rem 0.75rem;
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-proxy-candidates"] > legend {
+  padding-inline: 0.25rem;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-proxy-issues"] {
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  color: rgb(var(--ui-danger));
+}
+
+/* 9.2 The result of a check or save (role=status under the form): a section card of its own, 12 x 14; codes,
+   fingerprints and the stages in Geist Mono; the certificates as definition lists under hairlines. */
+html.flat-theme [data-ui~="codex-runtime"] > [role="status"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  padding: 0.75rem 0.875rem;
+  line-height: 1.25rem;
+}
+
+html.flat-theme [data-ui~="codex-runtime"] > [role="status"][class~="text-red-600"] {
+  border-color: rgb(var(--ui-danger) / 0.3);
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-proxy-stages"],
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-proxy-certificate"] {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-proxy-certificate"] {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="codex-runtime"] [data-test="codex-proxy-certificate"] > dt {
+  color: rgb(var(--ui-muted));
+}
+
+/* ================================================================== 10 · 插件管理 (PluginsView) and retired plugins */
+
+/* 10.1 Rhythm and head: blocks one block gap apart; the head's rule goes (the reference draws no page rule), its
+   capability chips are the reference's neutral chips (the grouped fill, radius 4, 12px ink-soft). */
+html.flat-theme [data-ui~="plugins"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap);
+}
+
+html.flat-theme [data-ui~="plugins"] > section:first-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+html.flat-theme [data-ui~="plugins"] > section:first-child > div:first-child > div:last-child > span {
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="plugins"] > p[class~="text-xs"] {
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  color: rgb(var(--ui-muted));
+}
+
+/* 10.2 The runtime notice is the shared neutral callout (data.css §11); the empty state is the reference's dashed
+   panel (radius 8, the control outline, a 14 / 500 title, 13px muted text, a neutral glyph). */
+html.flat-theme [data-ui~="plugins"] > div[class~="border-dashed"] {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="plugins"] > div[class~="border-dashed"] > svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="plugins"] > div[class~="border-dashed"] > p:first-of-type {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="plugins"] > div[class~="border-dashed"] > p:last-of-type {
+  font-size: 0.8125rem;
+  line-height: 1.625;
+  color: rgb(var(--ui-muted));
+}
+
+/* 10.3 Plugin cards (installed and retired): section cards; the head is the header strip (14 x 18, the line under
+   it) with the name 14 / 600, the version in Geist Mono 11 muted, the id and state as small chips; the facts as a
+   two-column definition list (12 / 18, labels muted, values ink-soft, identifiers in Geist Mono); section labels
+   are the mono label; JSON is the reference's snippet (the page ground, radius 6, Geist Mono 11.5 on 1.6). */
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card > div:first-child[class~="border-b"] {
+  padding: var(--set-head-py) var(--set-px);
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card h3 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card h3 ~ span[class~="font-mono"] {
+  font-size: 0.6875rem;
+  line-height: 1.03125rem;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card h3 ~ span[class~="rounded"] {
+  border-radius: var(--ui-radius-sm);
+  padding: 0.0625rem 0.375rem;
+  font-family: var(--ui-font-mono);
+  font-size: 0.6875rem;
+  line-height: 1.03125rem;
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card > div:first-child p {
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card > :is(dl, div):not(:first-child)[class~="p-5"] {
+  padding: var(--set-body-py) var(--set-px);
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card dl {
+  column-gap: 1rem;
+  row-gap: 0.25rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card dl > dt {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card dl > dd:not([class~="text-red-600"]) {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) :is(article.card, [data-testid="retired-plugins-receipt"]) p[class~="uppercase"][class~="text-xs"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  color: rgb(var(--ui-label));
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) :is(article.card, [data-testid="retired-plugins-receipt"]) pre {
+  margin-top: 0.5rem;
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-canvas));
+  padding: 0.75rem;
+  font-size: 0.71875rem;
+  line-height: 1.6;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* the retired section's title: a section title (14 / 600) with its description, no rule (the cards carry lines) */
+html.flat-theme [data-testid="retired-plugins"] > div:first-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+
+html.flat-theme [data-testid="retired-plugins"] > div:first-child > h2 {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-testid="retired-plugins"] > div:first-child > p {
+  margin-top: 0.125rem;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) > [class~="grid"] {
+  gap: var(--ui-shell-gap);
+}
+
+html.flat-theme [data-testid="retired-plugins"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap);
+}
+
+html.flat-theme [data-testid="retired-plugins-receipt"] {
+  padding: var(--set-body-py) var(--set-px);
+}
+
+/* ================================================================== 11 · option chips, the payment provider dialog */
+
+/* Multi-choice chips (the enabled payment providers, the provider dialog's payment mode and methods: rounded-lg border
+   px-2.5 py-1 text-xs buttons; the chosen ones a solid accent block upstream): the reference's filter pill, 26px,
+   radius 6, the control outline, 12px / 500 ink-soft; chosen = its active state (the accent at 40 % as the edge, the
+   accent tint, accent text), not a solid green block (decision 2: the accent marks, it does not fill). */
+html.flat-theme :is([data-ui~="settings"], #provider-form) button[class~="rounded-lg"][class~="border"][class~="px-2.5"][class~="py-1"][class~="text-xs"] {
+  min-height: 1.625rem;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  padding: 0.1875rem 0.625rem;
+  font-size: 0.75rem;
+  line-height: 1.125rem;
+  font-weight: 500;
+  color: rgb(var(--ui-ink-soft));
+  box-shadow: none;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme :is([data-ui~="settings"], #provider-form) button[class~="rounded-lg"][class~="border"][class~="px-2.5"][class~="py-1"][class~="text-xs"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui~="settings"], #provider-form) button[class~="rounded-lg"][class~="border"][class~="px-2.5"][class~="py-1"][class~="text-xs"][class~="bg-primary-500"],
+html.flat-theme :is([data-ui~="settings"], #provider-form) button[class~="rounded-lg"][class~="border"][class~="px-2.5"][class~="py-1"][class~="text-xs"][class~="bg-primary-500"]:hover {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  background-color: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+}
+
+/* the dialog's groups and headings follow the settings form: the custom-method group is a route card; headings 13 /
+   600 ink; the inline group captions (payment mode, methods) are the mono label */
+html.flat-theme #provider-form div[class~="rounded-lg"][class~="border"][class~="p-3"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  padding: 0.75rem 0.875rem;
+}
+
+html.flat-theme #provider-form :is(h4, h5) {
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme #provider-form > div[class~="flex-wrap"] > div > span[class~="text-xs"] {
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  color: rgb(var(--ui-label));
+}
+
+/* ================================================================== 12 · the Cloudflare R2 guide (BackupView dialog) */
+
+/* A how-to in a dialog reads as the reference's docs page: 13px text on a relaxed line; the step titles 13 / 600 ink;
+   the step numbers a neutral mark (a 22px circle with the control outline, Geist Mono 11 ink-soft; upstream tints them
+   with the accent, decision 2); code and the settings table as its code and docs table (Geist Mono, the structural
+   line, the grouped fill on the key column); the Secret warning keeps its state; the free-tier line is a neutral
+   callout. Hook: BackupView.vue:291 data-ui="r2-guide" (the dialog's outer layer; the panel keeps the overlays'
+   utility-dialog look). */
+html.flat-theme [data-ui~="r2-guide"] :is(p, li) {
+  font-size: 0.8125rem;
+  line-height: 1.625;
+}
+
+html.flat-theme [data-ui~="r2-guide"] h3 {
+  font-size: 0.8125rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="r2-guide"] h3 > span[class~="rounded-full"] {
+  width: 1.375rem;
+  height: 1.375rem;
+  border: 1px solid rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  font-family: var(--ui-font-mono);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="r2-guide"] ol {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="r2-guide"] code {
+  font-family: var(--ui-font-mono);
+  font-size: 0.75rem;
+}
+
+html.flat-theme [data-ui~="r2-guide"] code[class~="block"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-canvas));
+  padding: 0.5rem 0.75rem;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="r2-guide"] div[class~="rounded-lg"][class~="border"]:has(> table) {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui~="r2-guide"] table {
+  font-size: 0.78125rem;
+  line-height: 1.25rem;
+}
+
+html.flat-theme [data-ui~="r2-guide"] table tr {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="r2-guide"] table td:first-child {
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  font-weight: 500;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="r2-guide"] table td:last-child code {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="r2-guide"] div[class~="rounded-lg"][class~="bg-amber-50"] {
+  border: 1px solid rgb(var(--ui-warning) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-warning-soft));
+  padding: 0.625rem 0.875rem;
+  font-size: 0.78125rem;
+  line-height: 1.25rem;
+}
+
+html.flat-theme [data-ui~="r2-guide"] div[class~="rounded-lg"][class~="bg-green-50"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  padding: 0.75rem 0.875rem;
+  font-size: 0.8125rem;
+  line-height: 1.625;
+  color: rgb(var(--ui-muted));
+}
+
+/* end settings */
diff --git a/frontend/src/styles/console/pages/user.css b/frontend/src/styles/console/pages/user.css
new file mode 100644
index 000000000000..07cf16ded2eb
--- /dev/null
+++ b/frontend/src/styles/console/pages/user.css
@@ -0,0 +1,1646 @@
+/* Console theme · page group: the user-side pages (dashboard, keys, usage, redeem, profile, subscriptions, purchase, orders, affiliate, available channels, model plaza, custom pages) and the mobile layouts of every page (owner: the user-side and mobile page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
+/*
+ * Source: the Experiential Labs console (ui-el/ref/console/REF-CONSOLE.md, frames ref-models / ref-logs /
+ * ref-model-detail at 1440 and 390). The reference has no signed-in user pages, so these are drawn with its
+ * vocabulary: the content column anchored to the gutter (§7.1), cards (8px, 1px structural line, surface), the
+ * StatTile and the detail stat block (§8.13), the docs callout and lists (§8.16), the snippet and CodeTabs (§8.15),
+ * the dialog option card (§8.11), the filter pill (§8.6), list rows on 1px lines (the benchmarks card).
+ * Owner decision 2 (2026-09-29): colour only for status, the accent and platform identity (data.css §6.4 hooks);
+ * balances, KPI tiles, icon tiles and decorative numbers are neutral.
+ *
+ * Hooks added for this file (one data-ui attribute each, no other template change):
+ *   data-ui="user-redeem"              views/user/RedeemView.vue:3                    page root
+ *   data-ui="user-affiliate"           views/user/AffiliateView.vue:3                 page root
+ *   data-ui="user-subscriptions"       views/user/SubscriptionsView.vue:3             page root
+ *   data-ui="user-purchase"            views/user/PaymentView.vue:3                   page root
+ *   data-ui="user-orders"              views/user/UserOrdersView.vue:3                page root
+ *   data-ui="user-available-channels"  views/user/AvailableChannelsView.vue:3         TablePageLayout root
+ *   data-ui="model-plaza"              views/ModelPlazaView.vue:8                     standalone page root
+ *   data-ui="use-key"                  components/keys/UseKeyModal.vue:8              dialog body
+ *   data-ui="user-batch-image"         views/user/BatchImageGuideView.vue:3           TablePageLayout root
+ * Identity hooks (data.css §6.4 contract, decision 2): data-ui="platform-chip" on KeysView.vue:515 (the create
+ * dialog's provider tiles), PaymentView.vue:107 and :207, SubscriptionsView.vue:45, SubscriptionPlanCard.vue:34,
+ * PlazaModelPricingTable.vue:82, ProfileIdentityBindingsSection.vue:33 (the sign-in providers' letter squares);
+ * data-ui="platform-text" on the platform marks PaymentView.vue:203, SubscriptionsView.vue:39,
+ * SubscriptionPlanCard.vue:11.
+ * Existing hooks used: data-table="keys", #key-form, the profile's data-testid, .custom-page-layout, data-testid
+ * on the image studio, data-ui="pagination" / "empty-state" recipes of data.css. */
+
+/* ================================================================== 1 · page frame */
+
+/* The narrow user pages (redeem 42rem, purchase 56rem, profile 950px) sit on the content gutter under the header
+   row's title, as every reference page does (REF §7.1: the content column has no centring), and keep their width.
+   Their blocks follow the console's page rhythm (12px, the shell's gap). */
+html.flat-theme :is([data-ui="user-redeem"], [data-ui="user-purchase"], [data-testid="profile-shell"]) {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+html.flat-theme :is([data-ui="user-redeem"], [data-ui="user-purchase"], [data-testid="profile-shell"]) > :not([hidden]) ~ :not([hidden]),
+html.flat-theme [data-testid="profile-shell"] [class~="space-y-6"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap, 12px);
+}
+
+/* Cards on these pages: the reference's panel inset (16px, REF §6 p-4) instead of upstream's 24; a header bar is
+   12 / 16 on the structural line with the title 14 / 600 (the reference's modal and card titles) and its note
+   12.5px muted. */
+html.flat-theme :is([data-ui="user-redeem"], [data-ui="user-affiliate"], [data-ui="user-purchase"], [data-testid="profile-shell"]) .card:is([class~="p-6"], [class~="p-5"]),
+html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]) {
+  padding: 16px;
+}
+
+html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card > div[class~="border-b"][class~="px-6"][class~="py-4"] {
+  padding: 12px 16px;
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card > div[class~="border-b"][class~="px-6"] :is(h2, h3),
+html.flat-theme :is([data-ui="user-affiliate"], [data-testid="profile-shell"]) .card :is(h2, h3):is([class~="text-lg"], [class~="text-base"]) {
+  color: rgb(var(--ui-ink));
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card > div[class~="border-b"][class~="px-6"] :is(h2, h3) + p,
+html.flat-theme :is([data-ui="user-affiliate"], [data-testid="profile-shell"]) .card :is(h2, h3):is([class~="text-lg"], [class~="text-base"]) + p {
+  margin-top: 2px;
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  line-height: 18.75px;
+}
+
+/* ================================================================== 2 · API keys (/keys) */
+
+/* 2.0 One toolbar row (REF §7.1 /models: the search and the filters on the left, the actions at the row's right end;
+   the management pages do the same). Upstream gives the page two slots, the actions above the filters; from 1024px
+   the layout puts them side by side on the first row and the table card under them. Keyboard order stays upstream's
+   (actions, then filters); below 1024px the slots stack as upstream. */
+@media (min-width: 1024px) {
+  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]):has(> .layout-section-fixed + .layout-section-fixed + .layout-section-scrollable) {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    column-gap: 12px;
+  }
+
+  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]) > .layout-section-fixed:first-child:has(+ .layout-section-fixed) {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+  }
+
+  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]) > .layout-section-fixed:first-child + .layout-section-fixed {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
+  }
+
+  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]) > :is(.layout-section-scrollable, .layout-section-scrollable ~ .layout-section-fixed) {
+    grid-column: 1 / -1;
+  }
+}
+
+/* 2.1 Table cells: money in Geist Mono tabular like every figure of the reference (§10.6). */
+html.flat-theme .table-wrapper[data-table="keys"] td[data-column="usage"] span[class~="font-medium"] {
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+/* the labels (今日 / 近30天) in ink-soft, the reference's colour for a row's secondary figures: muted sits at 4.5:1
+   on a hovered row, too close to the floor for a 12px label */
+html.flat-theme .table-wrapper[data-table="keys"] td[data-column="usage"] span[class~="text-gray-500"] {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+}
+
+/* the live-concurrency count: the reference's cell chip (4px, Mono), a running count keeps its success tint */
+html.flat-theme .table-wrapper[data-table="keys"] td[data-column="current_concurrency"] > span {
+  min-width: 28px;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: var(--ui-radius-sm);
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+/* 2.2 The selection row above the table (keys chosen for bulk edit): the reference tray's count, 12.5px ink-soft. */
+html.flat-theme .table-page-layout:has(.table-wrapper[data-table="keys"]) > .layout-section-fixed div[class~="flex-wrap"][class~="text-sm"]:has(> [data-test="bulk-edit-keys"]) > span {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12.5px;
+}
+
+/* 2.25 The group picker (the group cell's popover, teleported to the body; its frame and rows are the console's menus,
+   overlays.css): its search row is the ModelPicker's, as Select's (overlays 1.6): 36px on the structural line, the
+   glyph 14px faint, the field without a box of its own, 13px ink, the placeholder faint (upstream's placeholder-gray-400
+   reads the grey fill ramp: 2.4:1 light, 3.3:1 dark); a keyboard focus draws the row's line in the accent. */
+html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border-b"]:first-child {
+  padding: 0 10px;
+  border-bottom-color: rgb(var(--ui-line));
+  transition: box-shadow var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border-b"]:first-child:has(input:focus-visible) {
+  box-shadow: inset 0 -2px 0 rgb(var(--ui-focus));
+}
+
+html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border-b"]:first-child svg {
+  left: 0;
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border-b"]:first-child input {
+  min-height: 36px;
+  padding: 0 0 0 22px;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  box-shadow: none;
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+}
+
+html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border-b"]:first-child input::placeholder {
+  color: rgb(var(--ui-faint));
+}
+
+/* 2.3 Create / edit dialog (#key-form). Provider choice: the reference's dialog option card (REF §8.11: 8px, the
+   structural line, the grouped fill at 60 %, the control outline on hover); the chosen card gets the console's ink
+   edge (2px, like the segmented thumb and the account dialogs' option cards) and an ink check. The provider tiles are
+   platform identity (decision 2, data.css platform-chip): the reference's 24px logo square, 4px, 1px line. */
+html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > input[type="radio"] + span {
+  gap: 8px;
+  padding: 12px 8px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  box-shadow: none;
+  transition-property: border-color, background-color, box-shadow;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label:hover > input[type="radio"]:not(:disabled):not(:checked) + span {
+  border-color: rgb(var(--ui-line-strong));
+}
+
+html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > input[type="radio"]:checked + span {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
+}
+
+html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > input[type="radio"]:focus-visible + span {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > input[type="radio"] + span > span[class~="text-sm"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+}
+
+html.flat-theme #key-form fieldset[data-tour="key-form-provider"] [data-ui~="platform-chip"] {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border-radius: var(--ui-radius-sm);
+}
+
+html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > span[class~="absolute"][class~="rounded-full"] {
+  top: 6px;
+  right: 6px;
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme #key-form fieldset[data-tour="key-form-provider"] > p {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* Expiry presets (7 / 30 / 90 days, custom date): the reference's filter pills (§8.6: 30px, the control outline,
+   12.5 / 600 ink-soft; chosen = accent 40 % edge on the accent-soft fill, accent text). */
+html.flat-theme #key-form div[class~="flex-wrap"][class~="gap-2"] > button[type="button"][class~="rounded-lg"][class~="px-3"][class~="py-1.5"] {
+  min-height: var(--ui-control-h);
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 18.75px;
+  transition-property: color, background-color, border-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme #key-form div[class~="flex-wrap"][class~="gap-2"] > button[type="button"][class~="rounded-lg"][class~="px-3"][class~="py-1.5"]:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme #key-form div[class~="flex-wrap"][class~="gap-2"] > button[type="button"][class~="rounded-lg"][class~="px-3"][class~="py-1.5"][class~="bg-primary-100"] {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  background-color: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+}
+
+/* read-outs in the edit dialog (quota and window usage): a subtle well with Mono figures */
+html.flat-theme #key-form div[class~="rounded-lg"][class~="bg-gray-100"][class~="px-3"][class~="py-2"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 2.4 Use-key dialog (data-ui="use-key"). Client and shell tabs: the reference's CodeTabs underline (§8.15), as the
+   console's other underline tabs (controls.css 7.3): 8 / 10, 12.5 / 600, muted, ink on hover; the current one ink
+   over a 2px accent rule. On a phone the strip scrolls without a bar and fades out on the right (the reference's
+   mobile tab strip: a 2.5rem mask). */
+html.flat-theme [data-ui="use-key"] > div[class~="overflow-x-auto"][class~="border-b"] {
+  border-bottom-color: rgb(var(--ui-line));
+  scrollbar-width: none;
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="overflow-x-auto"][class~="border-b"]::-webkit-scrollbar {
+  display: none;
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="overflow-x-auto"][class~="border-b"] > nav {
+  gap: 4px;
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="overflow-x-auto"][class~="border-b"] > nav > button {
+  padding: 8px 10px;
+  border-bottom-color: transparent;
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  font-weight: 600;
+  line-height: 18.75px;
+  transition-property: color, border-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="overflow-x-auto"][class~="border-b"] > nav > button:hover {
+  border-bottom-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="overflow-x-auto"][class~="border-b"] > nav > button[class~="border-primary-500"] {
+  border-bottom-color: rgb(var(--ui-focus));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="overflow-x-auto"][class~="border-b"] > nav > button svg {
+  width: 14px;
+  height: 14px;
+}
+
+@media (max-width: 767.98px) {
+  html.flat-theme [data-ui="use-key"] > div[class~="overflow-x-auto"][class~="border-b"] {
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
+    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
+  }
+}
+
+/* Config files: the reference's code block with its tab bar (§8.15 CodeTabs: 8px, the structural line, the surface;
+   the bar on the grouped fill with the file in Mono 11 and a quiet Copy that turns accent once copied; code Mono
+   12.5 / 1.625 ink). The syntax takes the reference's roles: keyword purple, string accent, operator muted, comment
+   faint (upright: the comments are Chinese, and an oblique CJK face is synthesised), names ink. Upstream drew a dark
+   terminal here; the account test terminal stays dark. */
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > div:first-child {
+  min-height: 36px;
+  padding: 4px 6px 4px 12px;
+  border-bottom-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > div:first-child > span {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > div:first-child > button {
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16.5px;
+  transition-property: color, background-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > div:first-child > button:hover {
+  background-color: rgb(var(--ui-hover));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > div:first-child > button[class~="text-green-400"] {
+  background-color: transparent;
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > div:first-child > button svg {
+  width: 13px;
+  height: 13px;
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > pre {
+  padding: 14px 16px;
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  line-height: 20.3125px;
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > pre span[class~="text-emerald-300"] {
+  color: rgb(var(--ui-purple));
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > pre span[class~="text-sky-200"] {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > pre span[class~="text-slate-400"] {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > pre span[class~="text-amber-200"] {
+  color: var(--ui-link);
+}
+
+html.flat-theme [data-ui="use-key"] div[class~="theme-dark-surface"][class~="bg-gray-900"] > pre span[class~="text-slate-500"] {
+  color: rgb(var(--ui-faint));
+}
+
+/* notes: the platform note is the console's neutral callout (data.css §11: the line, the subtle ground, ink-soft
+   words, the glyph muted); here only the reference's docs-callout geometry (§8.16: 6px, 12 / 14, 13px at 1.625, a
+   15px glyph). The missing-group warning keeps its warning colours in the same shape. */
+html.flat-theme [data-ui="use-key"] > div[class~="bg-blue-50"] {
+  gap: 10px;
+  padding: 12px 14px;
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="bg-blue-50"] > svg {
+  width: 15px;
+  height: 15px;
+  margin-top: 3px;
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="bg-blue-50"] > p {
+  font-size: 13px;
+  line-height: 21px;
+}
+
+html.flat-theme [data-ui="use-key"] > div[class~="bg-yellow-50"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-warning) / 0.4);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-warning-soft));
+}
+
+html.flat-theme [data-ui="use-key"] [data-testid="codex-model-catalog"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+}
+
+/* ================================================================== 3 · redeem (/redeem) */
+
+/* 3.1 The balance: the reference's stat block (§8.13 detail page: the mono label over a Mono value), neutral
+   (decision 2: the balance card is not identity). Upstream's green gradient and its icon tile go; the value is
+   the page's figure (Geist Mono 26 / 600) and the concurrency its note. */
+html.flat-theme [data-ui="user-redeem"] > .card:first-child > div[class~="bg-gradient-to-br"] {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 14px 16px 16px;
+  background-color: transparent;
+  background-image: none;
+  text-align: left;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:first-child > div[class~="bg-gradient-to-br"] > div:first-child {
+  display: none;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:first-child > div[class~="bg-gradient-to-br"] > p:first-of-type {
+  color: rgb(var(--ui-label));
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:first-child > div[class~="bg-gradient-to-br"] > p[class~="text-4xl"] {
+  max-width: 100%;
+  margin-top: 6px;
+  color: rgb(var(--ui-ink));
+  font: 600 26px/34px var(--ui-font-mono);
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: anywhere;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:first-child > div[class~="bg-gradient-to-br"] > p:last-child {
+  margin-top: 4px;
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* 3.2 The code field: the reference's 38px field (md) with the gift glyph 15px faint, the button md ink */
+html.flat-theme [data-ui="user-redeem"] #code {
+  min-height: var(--ui-control-h-md, 38px);
+  padding-top: 0;
+  padding-bottom: 0;
+  padding-left: 36px;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+html.flat-theme [data-ui="user-redeem"] #code ~ *,
+html.flat-theme [data-ui="user-redeem"] div[class~="relative"]:has(> #code) > div[class~="pointer-events-none"] {
+  padding-left: 12px;
+}
+
+html.flat-theme [data-ui="user-redeem"] div[class~="relative"]:has(> #code) > div[class~="pointer-events-none"] svg {
+  width: 15px;
+  height: 15px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="user-redeem"] form button[type="submit"][class~="w-full"] {
+  min-height: var(--ui-control-h-md, 38px);
+  padding-top: 0;
+  padding-bottom: 0;
+  font-size: 14px;
+  line-height: 20px;
+}
+
+/* 3.3 About codes, the support contact: the console's neutral callout (data.css §11 gives the line, the subtle ground,
+   the ink-soft words, the neutral glyph square); this file keeps the reference's docs-callout geometry (§8.16: 6px,
+   12 / 14, 13px at 1.625, list markers faint, a 28px glyph square) and the contact as a Mono value chip. */
+html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) > .card[class~="bg-primary-50"] {
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] > div[class~="p-6"] {
+  padding: 12px 14px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] > div > div[class~="items-start"] {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] div[class~="h-10"][class~="w-10"] {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] div[class~="h-10"][class~="w-10"] svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] h3 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 21px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] ul {
+  margin-top: 2px;
+  padding-left: 18px;
+  font-size: 13px;
+  line-height: 21px;
+  list-style-position: outside;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] ul > li::marker {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] ul > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 4px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card[class~="bg-primary-50"] ul span[class~="rounded-md"] {
+  padding: 0 6px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font: 500 11.5px/18px var(--ui-font-mono);
+}
+
+/* 3.4 Recent activity: the reference's list inside a card (the benchmarks card: rows on 1px lines, the name 13px
+   ink, the meta muted, the figure Mono 13 / 600 on the right). Type tiles are the neutral 28px square; a balance
+   change keeps its sign colour (credit success, debit danger), the other types are ink (decision 2). */
+html.flat-theme [data-ui="user-redeem"] > .card:last-child > div[class~="p-6"] {
+  padding: 4px 16px 14px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 0;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div[class~="rounded-xl"][class~="bg-gray-50"] {
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid rgb(var(--ui-line));
+  border-radius: 0;
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div[class~="rounded-xl"][class~="bg-gray-50"] > div:first-child {
+  gap: 12px;
+  min-width: 0;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div > div:first-child > div[class~="h-10"][class~="w-10"] {
+  width: 28px;
+  height: 28px;
+  flex-shrink: 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-ink) / 0.03);
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div > div:first-child > div[class~="h-10"][class~="w-10"] svg {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div > div:first-child p[class~="font-medium"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div > div:first-child p[class~="text-xs"] {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div > div[class~="text-right"] > p:first-child {
+  font-family: var(--ui-font-mono);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div > div[class~="text-right"] > p:first-child:is([class~="text-purple-600"], [class~="text-blue-600"], [class~="text-orange-600"]) {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div > div[class~="text-right"] > p:not(:first-child) {
+  color: rgb(var(--ui-faint));
+  font-size: 11px;
+  line-height: 16.5px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="space-y-3"] > div > div[class~="text-right"] > p[class~="font-mono"] {
+  font-family: var(--ui-font-mono);
+}
+
+/* the list's pager: the count on the left 12px muted, the per-page field and the two buttons together on the
+   right at the console's 30px (the reference's pagination grammar, data.css) instead of spread across the card */
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="mt-4"][class~="justify-between"][class~="text-sm"] {
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 12px;
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="mt-4"][class~="justify-between"][class~="text-sm"] > span:first-child {
+  margin-right: auto;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="mt-4"][class~="justify-between"][class~="text-sm"] > button.btn {
+  min-height: var(--ui-control-h);
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="mt-4"][class~="justify-between"][class~="text-sm"] > label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="mt-4"][class~="justify-between"][class~="text-sm"] select.input {
+  min-height: var(--ui-control-h);
+  padding-top: 0;
+  padding-bottom: 0;
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+}
+
+/* 3.5 After a redeem: the success and failure panels keep their status colours in the callout shape (6px, 12 / 14,
+   the icon without its tile). */
+html.flat-theme [data-ui="user-redeem"] > .card:is([class~="bg-emerald-50"], [class~="bg-red-50"]) {
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:is([class~="bg-emerald-50"], [class~="bg-red-50"]) > div[class~="p-6"] {
+  padding: 12px 14px;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:is([class~="bg-emerald-50"], [class~="bg-red-50"]) div[class~="h-10"][class~="w-10"] {
+  width: auto;
+  height: 21px;
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui="user-redeem"] > .card:is([class~="bg-emerald-50"], [class~="bg-red-50"]) div[class~="h-10"][class~="w-10"] svg {
+  width: 15px;
+  height: 15px;
+}
+
+/* ================================================================== 4 · profile (/profile) */
+
+/* 4.1 The overview: the reference's detail-page head (§7.1 detail: a title row, then the stat blocks on the
+   canvas, 20px apart) instead of upstream's tinted hero card. The avatar is the reference's letter square (§8.8:
+   the control line, the grouped fill, Geist Mono 600 ink-soft) at 48px; the name is the page title 20 / 600; the
+   role chip is a category (neutral), the status keeps its colour; the figures are detail stat blocks (8px, 1px
+   line, 12 / 16, the mono label, Mono 15 / 600), as wide as their content like the reference's. */
+html.flat-theme [data-testid="profile-overview-hero"] {
+  overflow: visible;
+  border: 0;
+  border-radius: 0;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] > div {
+  padding: 0;
+}
+
+/* the head is a grid: the avatar beside the name block (the reference's title row: the logo beside the title), the
+   stat blocks under both from the left edge, as the reference's stat row sits under its title */
+html.flat-theme [data-testid="profile-overview-hero"] > div > div {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 14px;
+  row-gap: 16px;
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] > div > div > div:last-child {
+  display: contents;
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] > div > div > div:last-child > div:last-child {
+  grid-column: 1 / -1;
+  margin-top: 0;
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] > div > div > div[class~="h-20"][class~="w-20"],
+html.flat-theme [data-testid="profile-basics-panel"] div[class~="h-16"][class~="w-16"][class~="rounded-2xl"] {
+  width: 48px;
+  height: 48px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle));
+  background-image: none;
+  box-shadow: none;
+  color: rgb(var(--ui-ink-soft));
+  font: 600 18px/1 var(--ui-font-mono);
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] > div > div > div:last-child > div:first-child > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 4px;
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] h2[class~="text-2xl"] {
+  color: rgb(var(--ui-ink));
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] .badge.badge-primary {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] p[class~="truncate"][class~="text-sm"] {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] span[class~="rounded-full"][class~="ring-1"] {
+  padding: 1px 8px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"]:has(> [data-testid^="profile-overview-metric-"]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+html.flat-theme [data-testid^="profile-overview-metric-"] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 130px;
+  padding: 12px 16px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme [data-testid^="profile-overview-metric-"] > p:first-child {
+  color: rgb(var(--ui-label));
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-testid^="profile-overview-metric-"] > p:last-child {
+  margin-top: 0;
+  color: rgb(var(--ui-ink));
+  font: 600 15px/22.5px var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* 4.2 Panels: the basics and the sign-in bindings are cards (16px); their inner blocks are the reference's option
+   card surfaces (8px, the structural line, the grouped fill at 60 %, 16px). */
+html.flat-theme [data-testid="profile-shell"] section.card:is([data-testid="profile-basics-panel"], [data-testid="profile-auth-bindings-panel"], [data-testid^="profile-side"]) {
+  padding: 16px;
+  border-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-testid="profile-basics-panel"] > div[class~="mb-5"] {
+  margin-bottom: 12px;
+}
+
+html.flat-theme [data-testid="profile-basics-panel"] > div[class~="grid"] {
+  gap: 12px;
+}
+
+html.flat-theme [data-testid="profile-basics-panel"] > div[class~="grid"] > div[class~="rounded-3xl"] {
+  padding: 16px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+}
+
+html.flat-theme [data-testid="profile-basics-panel"] > div[class~="grid"] > div[class~="rounded-3xl"] p[class~="text-sm"][class~="font-semibold"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+/* sign-in bindings: rows on the surface (8px, 1px line, 12 / 14); a provider's letter square is identity (the shared
+   platform-chip hook: the provider's own hue at >= 4.5:1 on its fill; upstream's folded warning tint on LinuxDo was
+   4.43), the e-mail square has no hue and falls back to the neutral chip; the square is 32px at 6px, the letter
+   Geist Mono 12 / 600 */
+html.flat-theme [data-testid="profile-auth-bindings-panel"] div[class~="rounded-2xl"][class~="border"][class~="p-4"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme [data-testid="profile-auth-bindings-panel"] div[class~="h-11"][class~="w-11"][class~="rounded-2xl"] {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+  font: 600 12px/1 var(--ui-font-mono);
+  letter-spacing: 0;
+}
+
+html.flat-theme [data-testid="profile-auth-bindings-panel"] div[class~="h-11"][class~="w-11"][class~="rounded-2xl"] svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme [data-testid="profile-auth-bindings-panel"] div[class~="rounded-2xl"][class~="border"][class~="p-4"] h3 {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-testid="profile-auth-bindings-panel"] div[class~="rounded-2xl"][class~="border"][class~="p-4"] :is(p, div)[class~="text-sm"] {
+  font-size: 12.5px;
+  line-height: 18.75px;
+}
+
+html.flat-theme [data-testid="profile-auth-bindings-panel"] div[class~="rounded-2xl"][class~="border"][class~="p-4"] div[class~="space-y-3"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 6px;
+}
+
+/* the side notes (tips with a link glyph): the reference's docs card link rows (6px, 1px line, 10 / 14) */
+html.flat-theme [data-testid="profile-shell"] section.card div[class~="rounded-2xl"][class~="bg-gray-50/80"][class~="px-4"] {
+  padding: 10px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+}
+
+/* 4.3 Support contact: the console's neutral callout (data.css §11) at the docs-callout geometry, the chat glyph in a
+   32px square, the contact in Mono */
+html.flat-theme [data-testid="profile-shell"] > .card[class~="bg-primary-50"] {
+  padding: 12px 14px;
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card[class~="bg-primary-50"] > div {
+  gap: 10px;
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card[class~="bg-primary-50"] > div > div:first-child {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card[class~="bg-primary-50"] > div > div:first-child svg {
+  width: 16px;
+  height: 16px;
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card[class~="bg-primary-50"] h3 {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card[class~="bg-primary-50"] h3 + p {
+  font: 500 12.5px/18.75px var(--ui-font-mono);
+}
+
+/* 4.4 Two-factor and passkeys: the state glyph sits in the reference's neutral 32px square (6px, 1px line); an
+   enabled factor keeps its success tint; the passkey rows' key glyph is ink-soft; the empty list is the reference's
+   dashed panel. */
+html.flat-theme [data-testid="profile-shell"] > .card div[class~="flex-shrink-0"][class~="rounded-full"][class~="p-3"] {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card div[class~="flex-shrink-0"][class~="rounded-full"][class~="p-3"][class~="bg-gray-100"] {
+  background-color: rgb(var(--ui-ink) / 0.03);
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card div[class~="flex-shrink-0"][class~="rounded-full"][class~="p-3"] > svg {
+  width: 16px;
+  height: 16px;
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card div[class~="flex-shrink-0"][class~="rounded-full"][class~="p-3"][class~="bg-gray-100"] > svg {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card div[class~="flex-shrink-0"][class~="rounded-full"][class~="p-3"] + div > p[class~="font-medium"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card div[class~="flex-shrink-0"][class~="rounded-full"][class~="p-3"] + div > p[class~="text-sm"] {
+  font-size: 12.5px;
+  line-height: 18.75px;
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card div[class~="rounded-lg"][class~="border-dashed"] {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card svg[class~="text-primary-500"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-testid="profile-shell"] > .card form[class~="rounded-lg"][class~="border"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+}
+
+/* ================================================================== 5 · affiliate (/affiliate) */
+
+/* 5.1 The four figures: the reference's StatTile (§8.13 /logs: 1px line, 6px, surface, 8 / 12, the mono label, the
+   value 15 / 600 tabular ink, the note 11px muted, 76px; tiles 10px apart). The rebate rate's glyph and the green
+   figures are decoration (decision 2): neutral; a frozen amount keeps its warning colour. */
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"]:has(> .card[class~="p-5"]) {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] > .card[class~="p-5"] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-height: 76px;
+  padding: 8px 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] > .card[class~="p-5"] > p:first-child {
+  gap: 0;
+  color: rgb(var(--ui-label));
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] > .card[class~="p-5"] > p:first-child > svg {
+  display: none;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] > .card[class~="p-5"] > p[class~="text-2xl"] {
+  margin-top: 0;
+  color: rgb(var(--ui-ink));
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] > .card[class~="p-5"] > p[class~="text-2xl"] > span {
+  margin-left: 2px;
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  font-weight: 400;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] > .card[class~="p-5"] > p[class~="text-xs"] {
+  margin-top: 0;
+  color: rgb(var(--ui-muted));
+  font-size: 11px;
+  line-height: 16.5px;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] > .card[class~="p-5"] > p[class~="text-xs"][class~="text-amber-600"] {
+  color: rgb(var(--ui-warning));
+}
+
+/* 5.2 Invite code and link: mono labels over the reference's snippet well (§8.15 snippet: 6px, the canvas, Mono
+   12.5), the copy buttons as they are; the how-to is the neutral docs callout. */
+html.flat-theme [data-ui="user-affiliate"] > .card div[class~="space-y-2"] > p[class~="text-sm"][class~="font-medium"] {
+  color: rgb(var(--ui-label));
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card div[class~="space-y-2"] > div[class~="rounded-xl"][class~="border"] {
+  min-height: 42px;
+  padding: 5px 5px 5px 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-canvas));
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card div[class~="space-y-2"] > div[class~="rounded-xl"][class~="border"] > code {
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-size: 12.5px;
+  line-height: 20px;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card div[class~="space-y-2"] > div[class~="rounded-xl"][class~="border"] > code[class~="font-semibold"] {
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card div[class~="space-y-2"] > div[class~="rounded-xl"][class~="border"] > code:not([class~="font-semibold"]) {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card > div[class~="mt-5"][class~="grid"] {
+  margin-top: 14px;
+  gap: 12px;
+}
+
+/* the how-to: the console's neutral callout (data.css §11) at the docs-callout geometry */
+html.flat-theme [data-ui="user-affiliate"] > .card > div[class~="rounded-xl"][class~="bg-primary-50"] {
+  margin-top: 14px;
+  padding: 12px 14px;
+  border-radius: var(--ui-radius-md);
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card > div[class~="rounded-xl"][class~="bg-primary-50"] > p {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 21px;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card > div[class~="rounded-xl"][class~="bg-primary-50"] > ul {
+  margin-top: 2px;
+  font-size: 13px;
+  line-height: 21px;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card > div[class~="rounded-xl"][class~="bg-primary-50"] > ul > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 2px;
+}
+
+/* 5.3 Transfer: a warning note keeps its colour at the reference's note size; the invitees' empty list is the
+   reference's dashed panel; the rebate figures in the list are Mono ink (decision 2). */
+html.flat-theme [data-ui="user-affiliate"] > .card > p[class~="text-amber-600"] {
+  margin-top: 8px;
+  color: rgb(var(--ui-warning));
+  font-size: 12.5px;
+  line-height: 18.75px;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card > div[class~="border-dashed"] {
+  margin-top: 12px;
+  padding: 32px 16px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card table thead tr {
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card table thead th {
+  padding: 10px 12px;
+  color: rgb(var(--ui-label));
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card table tbody tr {
+  border-bottom-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="user-affiliate"] > .card table tbody td[class~="text-emerald-600"] {
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ================================================================== 6 · purchase, orders, subscriptions */
+
+/* 6.1 Purchase: the recharge / subscription switch is the reference's segmented control as wide as its content
+   (§8.5, SlidingTabs is inline-flex); the account card reads label, name, balance with the balance neutral. */
+html.flat-theme [data-ui="user-purchase"] > div[class~="rounded-xl"][class~="bg-gray-100"][class~="p-1"]:first-child {
+  width: fit-content;
+  max-width: 100%;
+}
+
+html.flat-theme [data-ui="user-purchase"] > div[class~="rounded-xl"][class~="bg-gray-100"][class~="p-1"]:first-child > button {
+  flex: none;
+  min-width: 6.5rem;
+}
+
+html.flat-theme [data-ui="user-purchase"] > .card[class~="p-5"] > p[class~="text-xs"]:first-child {
+  color: rgb(var(--ui-label));
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-ui="user-purchase"] > .card[class~="p-5"] > p[class~="text-base"] {
+  margin-top: 4px;
+  color: rgb(var(--ui-ink));
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 22.5px;
+}
+
+html.flat-theme [data-ui="user-purchase"] > .card[class~="p-5"] > p[class~="text-green-600"] {
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  font-weight: 400;
+  line-height: 18.75px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui="user-purchase"] > .card[class~="py-16"] {
+  padding: 32px 16px;
+}
+
+html.flat-theme [data-ui="user-purchase"] > .card[class~="py-16"] > :is(p, svg) {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+/* the confirm step (a chosen plan): the price and the rate are figures, ink Mono (decision 2: a figure is not
+   identity; the plan's platform chip keeps its colour); the totals' pay figure ink too */
+html.flat-theme [data-ui="user-purchase"] > .card span[class~="text-3xl"][class~="font-bold"],
+html.flat-theme [data-ui="user-purchase"] > .card span[class~="text-lg"][class~="font-bold"] {
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* the active subscriptions under the plans: rows on the surface, the platform mark is identity (platform-text) */
+html.flat-theme [data-ui="user-purchase"] div[class~="rounded-xl"][class~="border"][class~="px-3"][class~="py-2"]:has(> [data-ui~="platform-text"]) {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="user-purchase"] [data-ui~="platform-text"][class~="rounded-full"],
+html.flat-theme [data-ui="user-subscriptions"] [data-ui~="platform-text"][class~="rounded-full"] {
+  background-color: currentColor;
+  background-image: none;
+}
+
+/* the plan cards (SubscriptionPlanCard): the reference's card (8px, the structural line, no lift or shadow), the
+   platform rule on top 2px in the platform colour, the price a Mono figure, subscribe = the positive CTA (accent) */
+html.flat-theme [data-ui="user-purchase"] div:has(> [data-ui~="platform-text"][class~="h-1.5"]) {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  box-shadow: none;
+  transform: none;
+}
+
+html.flat-theme [data-ui="user-purchase"] [data-ui~="platform-text"][class~="h-1.5"] {
+  height: 2px;
+  background-color: currentColor;
+  background-image: none;
+}
+
+html.flat-theme [data-ui="user-purchase"] div:has(> [data-ui~="platform-text"][class~="h-1.5"]) span[class~="text-2xl"][class~="font-extrabold"] {
+  color: rgb(var(--ui-ink));
+  font: 600 22px/28px var(--ui-font-mono);
+  letter-spacing: -0.02em;
+}
+
+html.flat-theme [data-ui="user-purchase"] div:has(> [data-ui~="platform-text"][class~="h-1.5"]) > div > button[type="button"][class~="w-full"] {
+  min-height: var(--ui-control-h-md, 38px);
+  border: 1px solid rgb(var(--ui-primary));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-primary));
+  background-image: none;
+  color: rgb(var(--ui-on-primary));
+  box-shadow: none;
+  transform: none;
+}
+
+/* 6.2 Orders: the filter row loses its card (the reference's toolbars are rows, MAPPING B2); the table is the
+   reference's table card (8px, 1px line, surface) with the pagination as its footer. */
+html.flat-theme [data-ui="user-orders"] > .card[class~="p-4"]:first-child {
+  padding: 0;
+  border: 0;
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui="user-orders"] > .card[class~="p-4"]:first-child .select-trigger.select-trigger {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+html.flat-theme [data-ui="user-orders"] > .table-wrapper {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="user-orders"] > .table-wrapper:has(+ [data-ui="pagination"]) {
+  border-bottom-width: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+html.flat-theme [data-ui="user-orders"] > .table-wrapper + [data-ui="pagination"] {
+  margin-top: 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
+}
+
+/* 6.3 My subscriptions: the empty page is the reference's empty panel (dashed control outline, 8px, the 28px
+   neutral glyph square, title 14 / 500 ink-soft, note 13px muted), like the console's other empty states. */
+html.flat-theme [data-ui="user-subscriptions"] > .card[class~="p-12"] {
+  padding: 40px 16px;
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui="user-subscriptions"] > .card[class~="p-12"] > div:first-child {
+  width: 28px;
+  height: 28px;
+  margin-bottom: 12px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="user-subscriptions"] > .card[class~="p-12"] > div:first-child svg {
+  width: 15px;
+  height: 15px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="user-subscriptions"] > .card[class~="p-12"] > h3 {
+  margin-bottom: 4px;
+  color: rgb(var(--ui-ink-soft));
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+html.flat-theme [data-ui="user-subscriptions"] > .card[class~="p-12"] > p {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+  line-height: 1.625;
+}
+
+/* the subscription cards (one per plan held): the reference's card, the platform chip and dot are identity, the
+   renew button is the positive CTA (accent), the progress bars keep their status fills on the subtle track */
+html.flat-theme [data-ui="user-subscriptions"] > div[class~="grid"] > div[class~="rounded-2xl"][class~="border"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="user-subscriptions"] > div[class~="grid"] > div > div:first-child > div:last-child > button {
+  min-height: 26px;
+  border: 1px solid rgb(var(--ui-primary));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-primary));
+  color: rgb(var(--ui-on-primary));
+}
+
+html.flat-theme [data-ui="user-subscriptions"] > div[class~="grid"] div[class~="bg-gradient-to-r"][class~="from-emerald-50"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-subtle) / 0.6);
+  background-image: none;
+}
+
+html.flat-theme [data-ui="user-subscriptions"] > div[class~="grid"] div[class~="bg-gradient-to-r"][class~="from-emerald-50"] :is(span, p) {
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* ================================================================== 7 · available channels, custom pages, image tools, model plaza */
+
+/* 7.1 Custom pages: the frame is the reference's card; the open-in-new-window button sits in the card's corner */
+html.flat-theme .custom-page-layout > .card {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+/* 7.2 Image studio: the form is a card (8px, 1px line, 16px); the mode switch is the segmented control; the
+   in-page title repeats the header row's title and description on a desktop, so it steps back there (the header row
+   hides on phones, where the page's own title stays). */
+html.flat-theme [data-testid="image-studio-layout"] > form {
+  padding: 16px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+@media (min-width: 1024px) {
+  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header > div:first-child:has(> h1) {
+    display: none;
+  }
+
+  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header:not(:has(> button)) {
+    display: none;
+  }
+
+  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header:has(> button) {
+    justify-content: flex-end;
+  }
+
+  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header:not(:has(> button)) + [data-testid="image-studio-layout"] {
+    margin-top: 0;
+  }
+}
+
+/* the form's fields sit in a display:contents fieldset, so the form's 20px rhythm never reached them (upstream draws
+   them touching); they take the console's field rhythm, 16px */
+html.flat-theme [data-testid="image-studio-layout"] > form > fieldset[class~="contents"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: 16px;
+}
+
+/* 7.3 Model plaza (standalone, data-ui="model-plaza"): the public pages' top bar (settings-ops-public.css: sticky
+   64px, a hairline, the canvas at 92 % with a 10px blur; the logo 32px, the site name as a Mono wordmark; the
+   console's small ink button); the title is the reference's docs H1 (28 / 600, -0.025em) over a 14px muted lead;
+   the load error keeps its danger colours in the callout shape. */
+html.flat-theme [data-ui="model-plaza"] {
+  background-color: rgb(var(--ui-canvas));
+}
+
+html.flat-theme [data-ui="model-plaza"] > header {
+  border-bottom: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-canvas) / 0.92);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="model-plaza"] > header > div {
+  height: 64px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+html.flat-theme [data-ui="model-plaza"] > header > div > div:first-child {
+  gap: 10px;
+}
+
+html.flat-theme [data-ui="model-plaza"] > header > div > div:first-child > span[class~="h-9"] {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ui-radius-lg);
+  background-color: transparent;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="model-plaza"] > header > div > div:first-child > span[class~="truncate"] {
+  color: rgb(var(--ui-ink));
+  font: 500 13px/20px var(--ui-font-mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-ui="model-plaza"] > header > div > a {
+  height: 30px;
+  padding: 0 12px;
+  border: 1px solid rgb(var(--ui-ink));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-ink));
+  background-image: none;
+  color: rgb(var(--ui-on-ink));
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  box-shadow: none;
+  transform: none;
+}
+
+html.flat-theme [data-ui="model-plaza"] > header > div > a:hover {
+  background-color: rgb(var(--ui-ink) / 0.85);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="model-plaza"] > main {
+  padding-top: 32px;
+}
+
+@media (min-width: 640px) {
+  /* the page column lines up with the bar's (both 24px in from the 80rem column) */
+  html.flat-theme [data-ui="model-plaza"] > main {
+    padding-right: 24px;
+    padding-left: 24px;
+  }
+}
+
+html.flat-theme [data-ui="model-plaza"] > main > div > div:first-child > h1 {
+  color: rgb(var(--ui-ink));
+  font-size: 28px;
+  font-weight: 600;
+  line-height: 42px;
+  letter-spacing: -0.025em;
+}
+
+html.flat-theme [data-ui="model-plaza"] > main > div > div:first-child > h1 + p {
+  margin-top: 4px;
+  color: rgb(var(--ui-muted));
+  font-size: 14px;
+  line-height: 22.75px;
+}
+
+html.flat-theme [data-ui="model-plaza"] div[class~="rounded-2xl"][class~="border-red-200"][class~="bg-red-50"] {
+  padding: 14px 16px;
+  border-color: rgb(var(--ui-danger) / 0.4);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+  font-size: 13px;
+}
+
+/* 7.5 Available channels (a plain table, not DataTable): the header is the reference's table header (40px, the mono
+   label, the structural line under it, no band), the empty and loading states the console's (a 20px faint glyph,
+   the title 14 / 500 ink-soft, 48px of air). */
+html.flat-theme [data-ui="user-available-channels"] .table-wrapper > table > thead > tr {
+  border-bottom-color: rgb(var(--ui-line));
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui="user-available-channels"] .table-wrapper > table > thead > tr > th {
+  height: 40px;
+  padding: 10px 12px;
+  color: rgb(var(--ui-label));
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  text-align: left;
+}
+
+html.flat-theme [data-ui="user-available-channels"] .table-wrapper > table > thead > tr > th:first-child {
+  padding-left: 16px;
+}
+
+html.flat-theme [data-ui="user-available-channels"] .table-wrapper > table > tbody > tr > td[colspan],
+html.flat-theme [data-ui="user-available-channels"] [data-testid="mobile-channels"] > :is([data-testid="mobile-empty"], [data-testid="mobile-loading"]) {
+  padding: 48px 16px;
+}
+
+html.flat-theme [data-ui="user-available-channels"] :is(.table-wrapper > table > tbody > tr > td[colspan], [data-testid="mobile-empty"], [data-testid="mobile-loading"]) > svg {
+  width: 20px;
+  height: 20px;
+  margin-bottom: 10px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="user-available-channels"] :is(.table-wrapper > table > tbody > tr > td[colspan], [data-testid="mobile-empty"]) > p {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+/* 7.6 Loading on these pages: the console's quiet spinner (20px, the control line with an ink arc, as the
+   announcement list and the legal pages draw theirs) instead of upstream's accent ring; an svg spinner is ink-soft. */
+html.flat-theme :is([data-ui="user-affiliate"], [data-ui="user-subscriptions"], [data-ui="user-purchase"], [data-ui="model-plaza"], .custom-page-layout, [data-testid="profile-shell"]) div[class~="animate-spin"][class~="rounded-full"] {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: rgb(var(--ui-line-strong));
+  border-top-color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="user-redeem"] svg[class~="animate-spin"][class~="text-primary-500"] {
+  width: 20px;
+  height: 20px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* 7.7 Channel status V2 (/monitor), the first-upgrade backfill banner (role="status": the 30-day window filling in,
+   a percentage and a bar, gone once covered). It is a state, but the state of a running job, not of a channel: the
+   reference's status chip gives "running" the neutral tone (surface-subtle, ink-faint; colour is kept for outcomes:
+   passed, failed, rate-limited, complete). So it takes the console's neutral callout ground, the title ink, the note
+   ink-soft, the percentage Mono, and an ink bar on the structural line; the channels' own health keeps its colours.
+   (The coordinator asked this file to decide; the page's other rules are the ops and channels agent's.) */
+html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"] {
+  border-bottom-color: rgb(var(--ui-line));
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"] p[class~="font-semibold"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+}
+
+html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"] p[class~="text-xs"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"] span[class~="tabular-nums"] {
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+}
+
+html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"] div[role="progressbar"] {
+  background-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"] div[role="progressbar"] > div {
+  background-color: rgb(var(--ui-ink));
+}
+
+/* 7.8 My orders keeps its table outside TablePageLayout, so the console's rule for an empty table wider than its card
+   (data.css, the table pages' scroll box as an inline-size container, the panel sticky at the box's width) is
+   restated for it: on a phone the empty panel stays whole in the card instead of centring on the whole table. */
+html.flat-theme [data-ui="user-orders"] > .table-wrapper {
+  container-type: inline-size;
+}
+
+html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[colspan]:only-child > * {
+  position: sticky;
+  left: 16px;
+  box-sizing: border-box;
+  width: calc(100cqw - 32px);
+}
+
+/* ================================================================== 8 · phones and tablets (every page's layout below the
+   desktop; the shell's 47px bar, the drawer, the tables' sideways scroll and the dialog frame are the shared files') */
+
+@media (max-width: 639.98px) {
+  /* 8.1 Management toolbars (users, subscriptions, redeem codes, promo codes, announcements; the management page agent
+     leaves phones to this file): upstream's search is a flex-1 item with a zero basis beside fixed-width selects and
+     buttons, so on a phone it shrank to a few characters ("邮箱/用", "搜索"). It takes the row, like the reference's
+     phone toolbar (ref-models-390: the search spans the row, the controls wrap under it). */
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child > div[class~="flex-1"]:is(:has(> input.input), :has(> div > input.input)) {
+    flex: 1 1 100%;
+  }
+
+  /* 8.2 Affiliate: the four figures two to a row (the reference's phone KPIs, REF §7.4: grid-cols-2) */
+  html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"]:has(> .card[class~="p-5"]) {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  /* 8.2b Profile: the stat blocks two to a row (the reference's phone detail page: grid-cols-2) */
+  html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"]:has(> [data-testid^="profile-overview-metric-"]) {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  html.flat-theme [data-testid^="profile-overview-metric-"] {
+    min-width: 0;
+  }
+
+  html.flat-theme [data-testid^="profile-overview-metric-"] > p:last-child {
+    overflow-wrap: anywhere;
+  }
+
+  /* the balance is the long figure: it takes the row, the other two share the next */
+  html.flat-theme [data-testid="profile-overview-metric-balance"] {
+    grid-column: 1 / -1;
+  }
+
+  /* 8.3 Redeem: the balance a size down so a long figure keeps one line on a phone; the activity pager puts the count
+     on its own line and the page controls together under it */
+  html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="mt-4"][class~="justify-between"][class~="text-sm"] > span:first-child {
+    flex-basis: 100%;
+  }
+
+  html.flat-theme [data-ui="user-redeem"] > .card:first-child > div[class~="bg-gradient-to-br"] > p[class~="text-4xl"] {
+    font-size: 22px;
+    line-height: 30px;
+  }
+}
+
+@media (max-width: 1023.98px) {
+  /* 8.3b Available channels: the refresh button beside the search (one toolbar row, as the reference's phone toolbar
+     keeps a field and its buttons together) instead of alone on a second row */
+  html.flat-theme [data-ui="user-available-channels"] > .layout-section-fixed > div[class~="flex-col"][class~="lg:flex-row"] {
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+  }
+
+  html.flat-theme [data-ui="user-available-channels"] > .layout-section-fixed > div[class~="flex-col"][class~="lg:flex-row"] > div:last-child {
+    width: auto;
+  }
+
+  /* 8.4 Operation log (the ops agent's page) in upstream's table mode below 1024px: the table may shrink to the screen
+     (min-width 100 %) while the operator and action cells may wrap anywhere (behaviour B1.12, never cut), so the two
+     columns fell to one or two characters a line ("ad / min. / us"). They keep a readable measure and the table
+     scrolls sideways instead (D9). */
+  html.flat-theme .table-page-layout.mobile-mode .table-wrapper td[data-column="actor"] > div[class~="min-w-0"][class~="max-w-[220px]"] {
+    min-width: 9rem;
+  }
+
+  html.flat-theme .table-page-layout.mobile-mode .table-wrapper td[data-column="action"] > div[class~="min-w-0"][class~="max-w-xs"] {
+    min-width: 13rem;
+  }
+}
diff --git a/frontend/src/styles/console/pages/users-groups-proxies-keys.css b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
index 81afd62803ee..18ab618c062f 100644
--- a/frontend/src/styles/console/pages/users-groups-proxies-keys.css
+++ b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
@@ -1,9 +1,179 @@
-/* Console theme · page group: users, groups, proxies and API keys (owner: the users, groups, proxies and keys page agent, wave 2; html.flat-theme selectors narrowed to the page root). */
+/* Console theme · page group: management tables (owner: the management-tables page agent, P2, wave 2). Users (and every
+ * user dialog), groups, IP management (proxies), the admin API keys dialog, subscriptions, redeem codes, promo codes and
+ * announcements. Plain CSS after the area files; every selector starts with html.flat-theme (theme off = upstream) and is
+ * narrowed to a page root or to a dialog of these pages, so nothing here reaches another page.
+ *
+ * Source: the Experiential Labs console /models catalogue and its toolbar, the Add-model Modal (ui-el
+ * ref/console/REF-CONSOLE.md §6, §7.1, §8.3-§8.8, §8.11, §10; frames ref-models-default-1440-*, ref-models-add-model-1440-*,
+ * crops history-row, prompt-chip-btn, dialog-add-model, dialog-option-card, letter-avatar). Values are tokens.css' roles; where
+ * the reference falls below our floor the compliant token is used (REF-CONSOLE §13).
+ *
+ * Shared looks are not restated: buttons, fields and filter pills (style.css recipe block, controls.css), menus, tips and the
+ * dialog frame (overlays.css), tables, pagination, badges, identity and category chips (data.css §1-§6, including the
+ * data-ui~="platform-chip" / "category-chip" contract), the header and the gutter (shell.css), the approved two-line cells
+ * (behaviour.css B1.4-B1.10) and the icon-only actions of groups and proxies (behaviour.css B2.1, overlays.css 2.6).
+ *
+ * Owner decisions applied here (WAVE2, 2026-09-29): platform identity keeps its platform colours; a category (role, billing
+ * type, exclusive / public, protocol, code type, notify mode) is the neutral chip; colour otherwise only for status and the
+ * accent (links, positive CTAs, selection); decorative number colours and tinted identity cards are neutral.
+ *
+ * Page roots (data-ui on each view's <TablePageLayout>, one attribute each; "mgmt-page" is the group's shared token):
+ *   users-page, groups-page, proxies-page, subscriptions-page, redeem-page, promo-page, announcements-page.
+ * Dialogs are found by their own ids (#create-user-form, #balance-form, #create-proxy-form ...) or by the data-ui hook on
+ * their first content element (listed in the dialog sections below). */
 
-/* Integration review (preview decisions D2 / D3): a user's letter avatar is identity, not a state. Drawn as the
-   reference's letter tile (REF-CONSOLE §8.8: a small square, the control line, the subtle fill, Geist Mono 600 in
-   ink-soft) instead of upstream's accent-tinted 32px circle; the letter stays. */
-html.flat-theme .table-wrapper td[data-column="email"] > div > div[class~="rounded-full"][class~="bg-primary-100"] {
+/* ================================================================== 1 · toolbar (the /models toolbar row) */
+
+/* One row where it fits (REF §7.1: search, then the controls, the actions at the right end), items 8px apart and 12px
+   between wrapped rows; the filters are as wide as their value, like the reference's filter pills, so every toolbar of the
+   group fits one row at 1440 (IP management's seven actions included). Below 640px the toolbar is the phone agent's
+   (user.css), so every toolbar rule here starts at 640px. */
+@media (min-width: 640px) {
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child {
+    column-gap: 8px;
+    row-gap: 12px;
+  }
+
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child > div[class~="flex"]:not(.relative) {
+    gap: 8px;
+  }
+
+  /* the reference's search field: 288px from 640px (REF §8.4) */
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child :is(div[class~="sm:w-64"], div[class~="sm:max-w-64"]):has(> input.input) {
+    width: 288px;
+    max-width: 288px;
+    flex: 0 1 288px;
+  }
+
+  /* filters: a Select as wide as its value (the dropdown keeps its own 200px minimum) */
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div[class~="relative"]:has(> button.select-trigger),
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div:is([class~="sm:w-32"], [class~="sm:w-36"], [class~="sm:w-40"], [class~="sm:w-44"], [class~="sm:w-48"]):has(> div > button.select-trigger) {
+    width: auto;
+    flex: none;
+  }
+}
+
+@media (min-width: 768px) {
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div[class~="md:w-64"]:has(> input.input) {
+    width: 288px;
+    flex: 0 1 288px;
+  }
+}
+
+/* The groups toolbar is a column below 1024px and a row above it (lg:flex-row): its two halves take one row there and the
+   actions sit at the right end. */
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui~="groups-page"] > .layout-section-fixed:first-child > div:first-child {
+    align-items: center;
+  }
+}
+
+/* Icon-only buttons (refresh, the subscription guide) are the reference's square: 30 x 30 (REF §8.3 icon buttons). They
+   are found by their glyph: a button whose label is a bare text node also has the glyph as its only element child. */
+@media (min-width: 640px) {
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child .btn:has(> svg:only-child):has(> svg:is(.lucide-rotate-cw, .lucide-circle-help)) {
+    width: var(--ui-control-h);
+    min-width: var(--ui-control-h);
+    padding-left: 0;
+    padding-right: 0;
+    justify-content: center;
+  }
+}
+
+/* ================================================================== 2 · row actions (every table of the group) */
+
+/* The reference's icon button (REF §8.3: 28px, radius 6, muted; the subtle fill and ink on hover), 15px glyphs; a delete
+   or revoke action turns danger on hover, a disable / reset action warning (upstream's red / orange hovers are semantic;
+   its blue, green, purple, cyan and primary hovers are decoration and read as ink). With a mouse or trackpad the label is
+   kept for screen readers and shows as a tip left of the button on hover and keyboard focus (behaviour B2.1 and overlays
+   2.6 for groups, proxies, users, subscriptions and redeem codes); touch keeps the label beside its glyph, one line, so a
+   row never grows for its actions. Announcements and promo codes already have glyph-only buttons with titles. */
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] > div {
+  gap: 2px;
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] > div > * + * {
+  margin-left: 0;
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"] {
+  position: relative;
+  flex-direction: row;
+  justify-content: center;
+  gap: 4px;
+  min-width: 28px;
+  min-height: 28px;
+  margin-block: -2px;
+  padding: 0 6px;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"]:not(:disabled):is(:hover, [class~="bg-gray-100"]) {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"][class*="hover:text-red-"]:not(:disabled):hover {
+  background-color: rgb(var(--ui-danger-soft));
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"][class*="hover:text-orange-"]:not(:disabled):hover {
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"]:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"]:disabled {
+  opacity: 0.55;
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"] > svg {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
+
+html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"] > span[class~="text-xs"] {
+  font-size: 12px;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+/* with a mouse or trackpad the labelled buttons are the 28px square (the label is the tip: behaviour B2.1 hides and places
+   it, overlays.css 2.6 draws it, for every table of this group) */
+@media (hover: hover) and (pointer: fine) {
+  html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"]:has(> span[class~="text-xs"]) {
+    width: 28px;
+    padding: 0;
+  }
+}
+
+/* Glyph-only buttons with a title (announcements, promo codes): the same 28px icon button. */
+html.flat-theme :is([data-ui~="announcements-page"], [data-ui~="promo-page"]) .table-wrapper td[data-column="actions"] button[class~="flex-col"] {
+  width: 28px;
+  padding: 0;
+}
+
+/* ================================================================== 3 · shared cell parts */
+
+/* Names: the reference's first-column name, 13 / 600 ink (REF §5 模型名). */
+html.flat-theme :is([data-ui~="users-page"] td[data-column="email"] > div > span, [data-ui~="groups-page"] td[data-column="name"] > span, [data-ui~="proxies-page"] td[data-column="name"] > span, [data-ui~="announcements-page"] td[data-column="title"] > div > div:first-child > span) {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+/* A user's letter avatar is identity, not a state: the reference's letter tile (REF §8.8: a small square, the control
+   line, the subtle fill, Geist Mono 600 in ink-soft) instead of upstream's accent-tinted circle; the letter stays. Users
+   table (email) and subscriptions table (user). */
+html.flat-theme :is([data-ui~="users-page"] td[data-column="email"], [data-ui~="subscriptions-page"] td[data-column="user"]) > div > div[class~="rounded-full"][class~="bg-primary-100"] {
   flex: none;
   width: 1.5rem;
   height: 1.5rem;
@@ -12,14 +182,1692 @@ html.flat-theme .table-wrapper td[data-column="email"] > div > div[class~="round
   background-color: rgb(var(--ui-subtle));
 }
 
-html.flat-theme .table-wrapper td[data-column="email"] > div > div[class~="rounded-full"][class~="bg-primary-100"] > span {
+html.flat-theme :is([data-ui~="users-page"] td[data-column="email"], [data-ui~="subscriptions-page"] td[data-column="user"]) > div > div[class~="rounded-full"][class~="bg-primary-100"] > span {
   font: 600 11px/1 var(--ui-font-mono);
   color: rgb(var(--ui-ink-soft));
 }
 
-/* Integration review: the proxy copy-format menu (IP management, address cell) sets each format on one line where it
-   fits. Upstream's 360px cap broke a copyable proxy URL after "bp-" or inside the address; 34rem holds a SOCKS5 URL
-   with credentials, and the value still wraps anywhere as the fallback. */
-html.flat-theme .table-wrapper td [role="menu"][class~="max-w-[360px]"] {
+/* Status as the reference's status dot (REF §8.8: 6px dot, 12px ink-soft label, 6px apart; StatusBadge's look), for the
+   hand-built dot of the users table. */
+html.flat-theme [data-ui~="users-page"] td[data-column="status"] > div {
+  gap: 6px;
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="status"] > div > span:first-child {
+  width: 6px;
+  height: 6px;
+  background-color: rgb(var(--ui-dot-idle));
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="status"] > div > span:first-child[class~="bg-green-500"] {
+  background-color: rgb(var(--ui-dot-ok));
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="status"] > div > span:first-child[class~="bg-red-500"] {
+  background-color: rgb(var(--ui-dot-bad));
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="status"] > div > span:last-child {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* Figures in Geist Mono tabular (REF §8.7 numeric cells), for the columns data.css does not name. */
+html.flat-theme :is([data-ui~="redeem-page"] td[data-column="value"] > span, [data-ui~="promo-page"] td[data-column="usage"] > span, [data-ui~="groups-page"] td[data-column="usage"] span[class~="font-medium"], [data-ui~="groups-page"] td[data-column="account_count"] span[class~="font-medium"], [data-ui~="groups-page"] td[data-column="billing_type"] span:is([class*="text-emerald-"], [class*="text-amber-"], [class*="text-red-"], [class~="text-gray-400"], [class~="text-gray-600"]):not([data-ui])) {
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme :is([data-ui~="redeem-page"] td[data-column="value"] > span, [data-ui~="promo-page"] td[data-column="usage"] > span) {
+  font-size: 12.5px;
+}
+
+/* Copy buttons beside a code (redeem codes, promo codes, proxy addresses): a quiet glyph, faint to ink on hover; the
+   copied check keeps the success colour. */
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"]) td[data-column="code"] > div > button:not([class~="text-green-500"]),
+html.flat-theme [data-ui~="proxies-page"] td:is([data-column="address"], [data-column="auth"]) button {
+  color: rgb(var(--ui-faint));
+  transition: color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"]) td[data-column="code"] > div > button:not([class~="text-green-500"]):hover,
+html.flat-theme [data-ui~="proxies-page"] td:is([data-column="address"], [data-column="auth"]) button:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"]) td[data-column="code"] > div > button[class~="text-green-500"] {
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"]) td[data-column="code"] > div > button svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* codes themselves: Geist Mono 12.5 ink (REF §8.7 model id column) */
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"]) td[data-column="code"] code {
+  font-size: 12.5px;
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 4 · users table */
+
+/* Balance: the amount is a link to the balance history (the dashed underline in the control line, ink on hover); 「充值」
+   under it (B1.8) is the reference's link, the accent text at 12px, underlined on hover (upstream's hover fill goes). */
+html.flat-theme [data-ui~="users-page"] td[data-column="balance"] div[class~="group"] > button {
+  color: rgb(var(--ui-ink));
+  font-weight: 500;
+  text-decoration-color: rgb(var(--ui-line-focus));
+  text-underline-offset: 3px;
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="balance"] div[class~="group"] > button:hover {
+  color: rgb(var(--ui-ink));
+  text-decoration-color: currentColor;
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="balance"] > div > button {
+  padding-top: 0;
+  padding-bottom: 0;
+  background-color: transparent;
+  color: var(--ui-link);
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="balance"] > div > button:hover {
+  background-color: transparent;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+/* Groups (optional column): exclusive / public are categories, so the shield, globe and count are neutral. */
+html.flat-theme [data-ui~="users-page"] td[data-column="groups"] svg {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="groups"] span[class~="font-medium"] {
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+}
+
+/* 「无订阅」 (optional subscriptions column): the reference's neutral value chip (4px radius, subtle fill, muted). */
+html.flat-theme [data-ui~="users-page"] td[data-column="subscriptions"] > span[class~="rounded-md"] {
+  gap: 4px;
+  padding: 1px 6px;
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-muted));
+  font-size: 11px;
+  line-height: 16px;
+}
+
+html.flat-theme [data-ui~="users-page"] td[data-column="subscriptions"] > span[class~="rounded-md"] > svg {
+  width: 12px;
+  height: 12px;
+}
+
+/* ================================================================== 5 · groups table */
+
+/* Billing type: the category chip (data.css) and, for a subscription group, its limits in 12px muted lines. */
+html.flat-theme [data-ui~="groups-page"] td[data-column="billing_type"] > div > div {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 16px;
+}
+
+/* Accounts: 「可用 / 限流 / 总量」 as label + figure lines (12px, the figure Geist Mono ink; the rate-limited figure keeps the
+   warning colour); upstream's grey 「个账号」 boxes are plain unit text (a unit is not a chip). */
+html.flat-theme [data-ui~="groups-page"] td[data-column="account_count"] > div {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+html.flat-theme [data-ui~="groups-page"] td[data-column="account_count"] > div > div > span:first-child {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="groups-page"] td[data-column="account_count"] > div > div > span[class~="font-medium"]:not([class*="text-amber-"]) {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="groups-page"] td[data-column="account_count"] > div > div > span[class~="font-medium"][class*="text-amber-"] {
+  color: rgb(var(--ui-warning));
+}
+
+html.flat-theme [data-ui~="groups-page"] td[data-column="account_count"] > div > div > span[class~="inline-flex"] {
+  margin-left: 4px;
+  padding: 0;
+  border-radius: 0;
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  font-weight: 400;
+}
+
+/* Usage: 「今日 / 昨日 / 累计」 lines, 12 / 16 (the reference's fine print keeps these stacked figures as tight as
+   upstream's, so the row does not grow); the label muted, the figure Geist Mono ink-soft. */
+html.flat-theme [data-ui~="groups-page"] td[data-column="usage"] > div > div {
+  font-size: 12px;
+  line-height: 16px;
+}
+
+html.flat-theme [data-ui~="groups-page"] td[data-column="usage"] > div > div > span:first-child {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="groups-page"] td[data-column="usage"] span[class~="font-medium"] {
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* ================================================================== 6 · IP management (proxies) table */
+
+/* Address: the value chip (style.css .code) at the reference's Mono 12; the copy and format glyphs under it (B1.10). */
+html.flat-theme [data-ui~="proxies-page"] td[data-column="address"] code {
+  padding: 1px 6px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* Credentials: the user name in ink-soft, the masked password in Geist Mono muted. */
+html.flat-theme [data-ui~="proxies-page"] td[data-column="auth"] > div > div > span:first-child:not([class~="font-mono"]) {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="auth"] span[class~="font-mono"] {
+  color: rgb(var(--ui-muted));
+}
+
+/* Accounts using the proxy: the reference's prompt chip (REF §8.7 /logs: a chip button, Geist Mono on the subtle fill,
+   radius 4, 2 / 6 inset, ink on hover); the zero count is the same chip, not a button. The count is a figure, not a
+   status: no accent. */
+html.flat-theme [data-ui~="proxies-page"] td[data-column="account_count"] > :is(button, span)[class~="inline-flex"] {
+  padding: 2px 6px;
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="account_count"] > span[class~="inline-flex"] {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="account_count"] > button[class~="inline-flex"]:hover {
+  background-color: rgb(var(--ui-hover));
+  color: rgb(var(--ui-ink));
+}
+
+/* Latency and quality: the status chips at their own width (upstream's column stretched them into bars) and the latency
+   in the reference's lowercase unit (「711ms」, REF §10.6). */
+html.flat-theme [data-ui~="proxies-page"] td[data-column="latency"] > div {
+  align-items: flex-start;
+}
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="latency"] > div > span.badge {
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="latency"] > div > div {
+  gap: 6px;
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* Expiry and created: 12px, the date ink-soft, 「剩余 N 天」 muted unless it is a warning / danger chip. */
+html.flat-theme [data-ui~="proxies-page"] td[data-column="expiry"] > div > span:first-child,
+html.flat-theme [data-ui~="proxies-page"] td[data-column="created_at"] > span {
+  color: rgb(var(--ui-ink-soft));
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="expiry"] > div > span[class~="text-gray-500"],
+html.flat-theme [data-ui~="proxies-page"] td[data-column="expiry"] > span {
+  color: rgb(var(--ui-muted));
+}
+
+/* The copy-format menu (address cell) sets each format on one line where it fits. Upstream's 360px cap broke a copyable
+   proxy URL after "bp-" or inside the address; 34rem holds a SOCKS5 URL with credentials, and the value still wraps
+   anywhere as the fallback. The rows' names are the mono label, the values Geist Mono ink-soft. */
+html.flat-theme [data-ui~="proxies-page"] .table-wrapper td [role="menu"][class~="max-w-[360px]"] {
   max-width: min(34rem, calc(100vw - 2rem));
 }
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="address"] [role="menu"] > button > span:first-child {
+  color: rgb(var(--ui-muted));
+  font-size: 11px;
+  line-height: 16px;
+}
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="address"] [role="menu"] > button > span:last-child {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui~="proxies-page"] td[data-column="address"] [role="menu"] > button:hover > span:last-child {
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 7 · subscriptions table */
+
+/* Usage: a label, the reference's usage bar (8px capsule on the subtle track, REF §8.14; the fill keeps its status
+   colour), the amounts in Geist Mono; the reset line muted (upstream's blue is decoration). Unlimited is the neutral
+   chip (the gradient goes). */
+html.flat-theme [data-ui~="subscriptions-page"] td[data-column="usage"] :is(.usage-label, .usage-amount) {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+}
+
+html.flat-theme [data-ui~="subscriptions-page"] td[data-column="usage"] .usage-amount {
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+}
+
+html.flat-theme [data-ui~="subscriptions-page"] td[data-column="usage"] .usage-row div[class~="h-1.5"][class~="flex-1"] {
+  height: 6px;
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui~="subscriptions-page"] td[data-column="usage"] .reset-info {
+  color: rgb(var(--ui-muted));
+  font-size: 11px;
+}
+
+html.flat-theme [data-ui~="subscriptions-page"] td[data-column="usage"] div[class~="bg-gradient-to-r"] {
+  display: inline-flex;
+  gap: 6px;
+  padding: 2px 8px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui~="subscriptions-page"] td[data-column="usage"] div[class~="bg-gradient-to-r"] > span {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui~="subscriptions-page"] td[data-column="user"] a {
+  font-weight: 600;
+  color: rgb(var(--ui-ink));
+}
+
+/* Selection bar (above the table while rows are selected): the reference's tray language, neutral (REF §8.12: surface,
+   1px line, radius 8, 8 / 16 inset; the count ink-soft 12.5), not upstream's accent-tinted box. */
+html.flat-theme [data-ui~="subscriptions-page"] [data-test="subscription-bulk-actions"] {
+  padding: 8px 12px 8px 16px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="subscriptions-page"] [data-test="subscription-bulk-actions"] > div > span:first-child {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12.5px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui~="subscriptions-page"] [data-test="subscription-bulk-actions"] > p {
+  color: rgb(var(--ui-muted));
+}
+
+/* ================================================================== 7b · redeem codes: the selection strip */
+
+/* While codes are selected upstream puts an accent-tinted box above the pagination. It becomes a strip of the table card
+   between the rows and the pagination footer (the reference's compare tray takes the space under the list, REF §8.12):
+   the card's 1px sides, the surface, 8 / 16 inset; the count 12.5 ink-soft, 「清空选择」 the accent link, the batch
+   action the default button (decision: a tray's actions are neutral). */
+html.flat-theme [data-ui~="redeem-page"] > .layout-section-fixed:last-child > div[class~="bg-primary-50"]:first-child {
+  margin: 0;
+  padding: 7px 12px 7px 16px;
+  border: 1px solid rgb(var(--ui-line));
+  border-bottom-width: 0;
+  border-radius: 0;
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui~="redeem-page"] > .layout-section-fixed:last-child > div[class~="bg-primary-50"]:first-child > span {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui~="redeem-page"] > .layout-section-fixed:last-child > div[class~="bg-primary-50"]:first-child > div > button:not(.btn) {
+  color: var(--ui-link);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui~="redeem-page"] > .layout-section-fixed:last-child > div[class~="bg-primary-50"]:first-child > div > button:not(.btn):hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+html.flat-theme [data-ui~="redeem-page"] > .layout-section-fixed:last-child > div[class~="bg-primary-50"]:first-child > div > .btn.btn-primary {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="redeem-page"] > .layout-section-fixed:last-child > div[class~="bg-primary-50"]:first-child > div > .btn.btn-primary:hover {
+  background-color: rgb(var(--ui-subtle));
+}
+
+/* ================================================================== 8 · announcements table */
+
+/* Title and its meta line (「#3 · 2026/09/04 21:41:44」 in 12px muted, figures in Geist Mono); the time window as label +
+   value lines (the label muted, the value ink-soft). */
+html.flat-theme [data-ui~="announcements-page"] td[data-column="title"] > div > div:last-child {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16.5px;
+}
+
+html.flat-theme [data-ui~="announcements-page"] td[data-column="timeRange"] > div {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="announcements-page"] td[data-column="timeRange"] span[class~="font-medium"] {
+  color: rgb(var(--ui-muted));
+  font-weight: 400;
+}
+
+/* ================================================================== 9 · dialogs: shared parts */
+
+/* The dialog frame (scrim, panel, header, close, footer) is overlays.css' reference Modal; here the content these pages put
+   in it, in the Modal's texture (REF §8.11 Add-model: 16 / 18 body, option cards on the grouped fill, 28px icon squares,
+   13/600 titles, 12.5 muted text). Dialog hooks (data-ui on the first content element, one attribute each):
+   UserApiKeysModal user-api-keys, UserAllowedGroupsModal user-allowed-groups, UserBalanceHistoryModal user-balance-history,
+   UserPlatformQuotaModal user-platform-quota, GroupReplaceModal group-replace, UserAttributesConfigModal
+   user-attributes-config, GroupRateMultipliersModal group-rate-multipliers, GroupRPMOverridesModal group-rpm-overrides,
+   AnnouncementReadStatusDialog announcement-read-status, AnnouncementTargetingEditor announcement-targeting, the proxy
+   dialog's tab strip proxy-create-tabs, the redeem result's body redeem-result-body, the subscription guide's title
+   subscription-guide-title. The others are found by their form ids. */
+
+/* 9.1 The user card at the top of the user dialogs (deposit / refund, balance history, API keys, allowed groups): the
+   reference's option card (1px line, radius 8, the grouped fill at 60 %, 12 / 14 inset), its avatar the 28px icon square
+   holding the letter (Geist Mono 600, ink-soft), the e-mail 13/600 ink, the second line 12px muted. Upstream's tinted
+   circle and gradient banner are decoration (decision 2). */
+html.flat-theme :is(#balance-form, [data-ui="user-api-keys"], [data-ui="user-balance-history"], [data-ui="user-allowed-groups"]) > div:first-child {
+  gap: 12px;
+  padding: 12px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme :is(#balance-form, [data-ui="user-api-keys"], [data-ui="user-balance-history"], [data-ui="user-allowed-groups"]) > div:first-child div[class~="rounded-full"]:is([class~="bg-primary-100"], [class~="bg-white"]):is([class~="h-10"], [class~="h-14"]) {
+  flex: none;
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-ink)) 3%, rgb(var(--ui-surface)));
+  box-shadow: none;
+}
+
+html.flat-theme :is(#balance-form, [data-ui="user-api-keys"], [data-ui="user-balance-history"], [data-ui="user-allowed-groups"]) > div:first-child div[class~="rounded-full"]:is([class~="bg-primary-100"], [class~="bg-white"]):is([class~="h-10"], [class~="h-14"]) > span {
+  color: rgb(var(--ui-ink-soft));
+  font: 600 12px/1 var(--ui-font-mono);
+}
+
+html.flat-theme :is(#balance-form, [data-ui="user-api-keys"], [data-ui="user-balance-history"], [data-ui="user-allowed-groups"]) > div:first-child :is(p[class~="font-medium"], p[class~="font-semibold"]):first-child {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+}
+
+html.flat-theme :is(#balance-form, [data-ui="user-api-keys"], [data-ui="user-allowed-groups"]) > div:first-child p:is([class~="text-sm"], [class~="mt-1"]):not(:first-child) {
+  margin-top: 0;
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+/* 9.2 Option rows (allowed groups, the group replacement's choices): the reference's option card (1px line, radius 8,
+   12 / 14 inset, the control line on hover); a chosen row is the selection of the tables (the accent at 40 % as its edge,
+   the accent tint), as the accounts cards. Upstream's 2px borders, shadow and green / purple tints go. */
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="grid"] > div[class~="border-2"],
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"] {
+  padding: 12px 14px;
+  border-width: 1px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+  transition: border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="grid"] > div[class~="border-2"][class~="border-gray-200"]:hover,
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"][class~="border-gray-200"]:hover {
+  border-color: rgb(var(--ui-line-strong));
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="grid"] > div[class~="border-2"]:is([class~="border-primary-400"], [class~="border-green-200"]),
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"][class~="border-primary-400"] {
+  border-color: rgb(var(--ui-primary) / 0.4);
+  background-color: rgb(var(--ui-primary-soft));
+}
+
+/* the rows' check squares and radio dots: the reference's 14px choice square (radius 4, the form-control line; the accent
+   fill and a white check when chosen) and a 14px round radio */
+html.flat-theme [data-ui="user-allowed-groups"] label > input[type="checkbox"][class~="sr-only"] + div,
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="flex-shrink-0"] > div[class~="rounded-md"][class~="border-2"],
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="flex-shrink-0"] > input[type="checkbox"] {
+  width: 14px;
+  height: 14px;
+  border-width: 1px;
+  border-color: rgb(var(--ui-control-line));
+  border-radius: var(--ui-radius-sm);
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] label > input[type="checkbox"][class~="sr-only"]:checked + div,
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="flex-shrink-0"] > div[class~="rounded-md"][class~="border-2"][class~="bg-green-500"] {
+  border-color: rgb(var(--ui-primary));
+  background-color: rgb(var(--ui-primary));
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] label > input[type="checkbox"][class~="sr-only"] + div > svg,
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="flex-shrink-0"] > div[class~="rounded-md"][class~="border-2"] > svg {
+  color: rgb(var(--ui-on-primary));
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] label > input[type="checkbox"][class~="sr-only"]:focus-visible + div {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] label[class~="h-6"][class~="w-6"] {
+  width: 16px;
+  height: 16px;
+}
+
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"] > div[class~="rounded-full"][class~="border-2"] {
+  width: 14px;
+  height: 14px;
+  border-width: 1px;
+  border-color: rgb(var(--ui-control-line));
+}
+
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"] > div[class~="rounded-full"][class~="border-2"][class~="bg-primary-500"] {
+  border-color: rgb(var(--ui-primary));
+  background-color: rgb(var(--ui-primary));
+}
+
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"] > div[class~="rounded-full"] > div {
+  width: 6px;
+  height: 6px;
+  background-color: rgb(var(--ui-on-primary));
+}
+
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"]:has(> input:focus-visible) {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* 9.3 Section titles inside these dialogs: the reference's card title (13/600 ink), counts in Geist Mono 11 muted; the
+   coloured bullet in front of a section (exclusive purple, public green) is a category, drawn neutral. */
+html.flat-theme [data-ui="user-allowed-groups"] h4,
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) h4 {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] h4 + span {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="rounded-full"][class~="h-1.5"][class~="w-1.5"] {
+  background-color: rgb(var(--ui-faint));
+}
+
+/* 9.4 Numeric fields that upstream draws with their own utilities (the allowed groups' rate, the per-user rate and RPM
+   rows): the reference's field at the row's compact height (30px), radius 6, the 3:1 form-control line, 13px Geist Mono
+   figures; focus = the accent edge 2px wide (controls.css §3.1). */
+html.flat-theme [data-ui="user-allowed-groups"] input[type="number"][class~="hide-spinner"],
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) td input[type="number"] {
+  height: var(--ui-control-h);
+  padding: 0 10px;
+  border: 1px solid rgb(var(--ui-control-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] input[type="number"][class~="hide-spinner"]:focus,
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) td input[type="number"]:focus {
+  border-color: rgb(var(--ui-focus));
+  outline: 2px solid transparent;
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
+}
+
+/* 9.5 Tables inside these dialogs (platform quotas, per-user rates and RPM): the reference's table header (the mono label,
+   1px line under it, no band) and hairline rows. */
+html.flat-theme [data-ui="user-platform-quota"] table > thead > tr > th,
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) table > thead > tr > th {
+  background-color: rgb(var(--ui-surface));
+  box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 500;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) table > thead > tr {
+  border-bottom-width: 0;
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="user-platform-quota"] table > thead > tr {
+  border-bottom-width: 0;
+}
+
+html.flat-theme :is([data-ui="user-platform-quota"], [data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) table > tbody > tr {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) table > tbody > tr:hover {
+  background-color: rgb(var(--ui-hover));
+}
+
+/* 9.6 Call-outs: the reference's docs call-out (radius 6, 1px line, 10 / 14 inset, 13px): neutral for information (the
+   new balance, the subscription guide's tip, the invitation-code hint), the warning pair for a warning. */
+html.flat-theme #balance-form > div[class~="border-blue-200"],
+html.flat-theme [data-ui="subscription-guide-title"] ~ div[class~="bg-blue-50"],
+html.flat-theme form:has(> div > div[class~="sm:grid-cols-5"]) > div[class~="bg-blue-50"][class~="p-3"] {
+  padding: 10px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme form:has(> div > div[class~="sm:grid-cols-5"]) > div[class~="bg-blue-50"][class~="p-3"] > p {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme #balance-form > div[class~="border-blue-200"] span[class~="font-bold"] {
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="user-platform-quota"] > div[class~="border-amber-200"] {
+  padding: 10px 14px;
+  border-color: rgb(var(--ui-warning) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-warning));
+  font-size: 13px;
+}
+
+/* 9.7 A positive CTA is the accent button (the deposit's confirm; decision 2): upstream's emerald fill becomes the accent
+   with on-accent text (white on #168848, ink on the mint). */
+html.flat-theme .modal-content:has(#balance-form) .modal-footer button.btn[class~="bg-emerald-600"] {
+  border-color: rgb(var(--ui-primary));
+  background-color: rgb(var(--ui-primary));
+  color: rgb(var(--ui-on-primary));
+}
+
+html.flat-theme .modal-content:has(#balance-form) .modal-footer button.btn[class~="bg-emerald-600"]:not(:disabled):hover {
+  border-color: rgb(var(--ui-primary-hover));
+  background-color: rgb(var(--ui-primary-hover));
+}
+
+/* the amount field's 「$」 prefix: muted, in the field's own figures */
+html.flat-theme #balance-form div[class~="relative"] > div[class~="absolute"][class~="left-3"] {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 13px;
+}
+
+/* ================================================================== 10 · user dialogs */
+
+/* 10.1 Balance history: the user card's second line (notes, total recharged) in 12px muted with the total in Geist Mono
+   ink (upstream's emerald is decoration); the current balance 15/600 Mono (the reference's statistic figure) under its
+   mono label. */
+html.flat-theme [data-ui="user-balance-history"] > div:first-child > div + div {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="user-balance-history"] > div:first-child span[class~="font-semibold"][class*="text-emerald-"] {
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui="user-balance-history"] > div:first-child p[class~="text-xl"] {
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-size: 15px;
+  line-height: 22.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui="user-balance-history"] > div:first-child div[class~="text-right"] > p:first-child {
+  /* the mono label on the card's grouped fill: the muted grey keeps a margin over 4.5:1 there (the label grey is 4.50) */
+  color: rgb(var(--ui-muted));
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+/* the username beside the e-mail: a neutral value chip, not the accent tint */
+html.flat-theme [data-ui="user-balance-history"] > div:first-child span[class~="bg-primary-50"] {
+  padding: 1px 6px;
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  line-height: 16px;
+}
+
+/* the filter row's deposit / refund buttons are the default button (REF §8.3: 30px, radius 6, the control outline, 13/600
+   ink); their + / − glyphs keep the distinction in ink-soft */
+html.flat-theme [data-ui="user-balance-history"] > div:nth-child(2) > button {
+  min-height: var(--ui-control-h);
+  padding: 0 12px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="user-balance-history"] > div:nth-child(2) > button:hover {
+  background-color: rgb(var(--ui-surface));
+  border-color: rgb(var(--ui-line-focus));
+}
+
+html.flat-theme [data-ui="user-balance-history"] > div:nth-child(2) > button > svg {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* history entries: rows of the reference's list (1px line, radius 8, 12 / 14 inset), the type glyph in the 28px neutral
+   square (the per-type tints are decoration), the title 13/500 ink, notes 12 muted, the time Geist Mono 11 muted; the
+   figure Geist Mono 13/600, a credit in the success colour and a debit in danger (their meaning), other kinds ink. */
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] div[class~="h-9"][class~="w-9"] {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-ink)) 3%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] div[class~="h-9"][class~="w-9"] > svg {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] p[class~="font-medium"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] div:not([class~="text-right"]) > p[class~="text-gray-400"] {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+}
+
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] div[class~="text-right"] > p:first-child {
+  color: rgb(var(--ui-ink));
+  font-family: var(--ui-font-mono);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] div[class~="text-right"] > p:first-child[class*="text-emerald-"] {
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] div[class~="text-right"] > p:first-child[class*="text-red-"] {
+  color: rgb(var(--ui-danger));
+}
+
+html.flat-theme [data-ui="user-balance-history"] div[class~="overflow-y-auto"] > div[class~="border"] div[class~="text-right"] > p + p {
+  color: rgb(var(--ui-muted));
+  font-size: 11px;
+}
+
+/* 10.2 API keys: each key a row of the reference's list (1px line, radius 8, 12 / 14 inset); the name 13/600 ink, the key
+   in Geist Mono 12.5 muted, the meta line 12px muted; the group button the reference's quiet trigger (the subtle fill on
+   hover), its chevron faint. The group picker's panel and rows are overlays.css' menu, its chips data.css' identity. */
+html.flat-theme [data-ui="user-api-keys"] > div[class~="overflow-y-auto"] > div[class~="border"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="user-api-keys"] > div[class~="overflow-y-auto"] > div[class~="border"] span[class~="font-medium"]:first-child {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="user-api-keys"] > div[class~="overflow-y-auto"] > div[class~="border"] p[class~="font-mono"] {
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  line-height: 19px;
+}
+
+html.flat-theme [data-ui="user-api-keys"] > div[class~="overflow-y-auto"] > div[class~="border"] > div[class~="mt-3"] {
+  margin-top: 8px;
+  column-gap: 16px;
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui="user-api-keys"] > div[class~="overflow-y-auto"] > div[class~="border"] > div[class~="mt-3"] button {
+  border-radius: var(--ui-radius-sm);
+  transition: background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="user-api-keys"] > div[class~="overflow-y-auto"] > div[class~="border"] > div[class~="mt-3"] button:not(:disabled):hover {
+  background-color: rgb(var(--ui-subtle));
+}
+
+html.flat-theme [data-ui="user-api-keys"] > div[class~="overflow-y-auto"] > div[class~="border"] > div[class~="mt-3"] button > svg:last-child {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="user-api-keys"] > div[class~="overflow-y-auto"] > div[class~="border"] > div[class~="mt-3"] button:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* 10.3 Allowed groups: each row's name 13/600, the platform line 12px muted (upstream shows the platform without a hue,
+   so it stays neutral), the 「专属」 mark a category chip, the custom-rate label 12px muted. */
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="grid"] > div span[class~="text-base"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="grid"] > div span[class~="rounded-full"][class~="bg-purple-100"] {
+  padding: 1px 6px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font: 500 var(--ui-chip-size) / 16px var(--ui-font-mono);
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="grid"] > div div[class~="mt-1.5"] {
+  margin-top: 2px;
+  column-gap: 8px;
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="grid"] > div div[class~="mt-1.5"] span[class~="font-medium"] {
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] div[class~="grid"] > div label[class~="text-sm"] {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui="user-allowed-groups"] > div + div > div > p[class~="text-xs"] {
+  color: rgb(var(--ui-muted));
+}
+
+/* 10.4 Platform quotas: platform names Geist Mono 12.5 ink, the fields at the row height (30px), the reset glyph faint to
+   ink, usage Geist Mono 12 muted. */
+html.flat-theme [data-ui="user-platform-quota"] table td {
+  vertical-align: middle;
+}
+
+html.flat-theme [data-ui="user-platform-quota"] table td[class~="font-mono"] {
+  color: rgb(var(--ui-ink));
+  font-size: 12.5px;
+}
+
+html.flat-theme [data-ui="user-platform-quota"] table td input.input {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+html.flat-theme [data-ui="user-platform-quota"] table td button {
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--ui-radius-sm);
+  color: rgb(var(--ui-faint));
+  transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="user-platform-quota"] table td button:not(:disabled):hover {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="user-platform-quota"] table td:last-child {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme [data-ui="user-platform-quota"] > p {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+/* 10.5 Group replacement: the current group in a neutral card (its shield is the exclusive category, neutral), the arrow
+   faint, the chosen target 13/600 ink; each choice's platform in Geist Mono 11 muted. */
+html.flat-theme [data-ui="group-replace"] > div[class~="rounded-lg"][class~="bg-gray-50"] {
+  padding: 10px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui="group-replace"] > div[class~="rounded-lg"][class~="bg-gray-50"] svg {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="group-replace"] > div[class~="rounded-lg"][class~="bg-gray-50"] span[class~="font-medium"] {
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"] span[class~="font-medium"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="group-replace"] label[class~="border-2"] span[class~="text-xs"] {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+}
+
+html.flat-theme [data-ui="group-replace"] > p {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+  line-height: 20px;
+}
+
+/* 10.6 User attributes: rows of the reference's list; the key a Geist Mono value chip; the empty state the reference's
+   dashed panel with its glyph at 20px (REF §8.7 empty state). */
+html.flat-theme [data-ui="user-attributes-config"] > div[class~="overflow-y-auto"] > div[class~="border"] {
+  padding: 10px 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="user-attributes-config"] span[class~="font-mono"][class~="bg-gray-100"] {
+  padding: 1px 6px;
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-size: 11px;
+}
+
+html.flat-theme [data-ui="user-attributes-config"] > div[class~="py-12"][class~="text-center"] {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 4px;
+  min-height: 200px;
+  padding: 32px 16px;
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="user-attributes-config"] > div[class~="py-12"][class~="text-center"] > svg {
+  width: 20px;
+  height: 20px;
+  margin-bottom: 4px;
+  color: rgb(var(--ui-faint));
+  stroke-width: 1.8;
+}
+
+html.flat-theme [data-ui="user-attributes-config"] > div[class~="py-12"][class~="text-center"] > p:first-of-type {
+  margin-top: 0;
+  color: rgb(var(--ui-ink-soft));
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 500;
+}
+
+html.flat-theme [data-ui="user-attributes-config"] > div[class~="py-12"][class~="text-center"] > p + p {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+html.flat-theme [data-ui="user-attributes-config"] > div:first-child > p {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+/* ================================================================== 11 · group dialogs */
+
+/* 11.1 Create / edit: the field labels upstream writes without the label recipe (「从分组复制账号」, 「专属分组」 … with their
+   help glyph) read as the form's other labels (the mono label); the help glyph is the faint info glyph (overlays 2.5).
+   The groups picked to copy accounts from are the reference's removable value chips (as the accounts filter chips). */
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="mb-1.5"][class~="flex"][class~="items-center"] > label[class~="text-sm"][class~="font-medium"] {
+  color: rgb(var(--ui-label));
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-label-size);
+  line-height: var(--ui-label-leading);
+  font-weight: 600;
+  letter-spacing: var(--ui-label-tracking);
+  text-transform: uppercase;
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="group"][class~="relative"][class~="inline-flex"] > svg[class~="cursor-help"] {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="group"][class~="relative"][class~="inline-flex"]:hover > svg[class~="cursor-help"] {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form, [data-testid="codex-manifest-selected-tags"]) span[class~="rounded-full"][class~="bg-primary-100"] {
+  gap: 4px;
+  padding: 1px 4px 1px 8px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-size: 12px;
+  line-height: 20px;
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form, [data-testid="codex-manifest-selected-tags"]) span[class~="rounded-full"][class~="bg-primary-100"] > button {
+  display: inline-grid;
+  place-items: center;
+  width: 16px;
+  height: 16px;
+  margin-left: 0;
+  border-radius: 3px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form, [data-testid="codex-manifest-selected-tags"]) span[class~="rounded-full"][class~="bg-primary-100"] > button:hover {
+  background-color: rgb(var(--ui-hover));
+  color: rgb(var(--ui-ink));
+}
+
+/* the form's section titles (web search pricing, OpenAI Fast, Live, messages dispatch, image pricing, model allowlist ...):
+   one size, the reference's card title 13/600 ink (upstream mixes 14 and 16px, 500 and 600) */
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="border-t"] > h4[class~="font-medium"],
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="border-t"] > label[class~="block"][class~="mb-2"][class~="font-medium"]:not(.input-label),
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="border-t"][data-testid$="model-allowlist"] > div:first-child > div:first-child > label[class~="text-sm"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+}
+
+/* the exclusive / public switch's state word beside it: 13px ink-soft (upstream muted grey) */
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="flex"][class~="items-center"][class~="gap-3"] > button[class~="rounded-full"][class~="border-2"] + span {
+  color: rgb(var(--ui-ink-soft));
+  font-size: 13px;
+}
+
+/* 11.2 Per-user rates and RPM: the group strip a neutral card (1px line, radius 8, the grouped fill), the platform in its
+   own colour (data.css platform-text), separators faint; the add box the option card; the status pills the reference's
+   status chips. */
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) > div:first-child {
+  column-gap: 10px;
+  padding: 8px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+  font-size: 13px;
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) > div:first-child > span[class~="text-gray-400"] {
+  color: rgb(var(--ui-line-strong));
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) > div:first-child > span[data-ui~="platform-text"] {
+  font-weight: 500;
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) > div:first-child > span[data-ui~="platform-text"] > svg {
+  width: 14px;
+  height: 14px;
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) > div:first-child > span:last-child {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 12px;
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) > div:nth-child(2)[class~="border"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) table span[class~="rounded-full"]:is([class~="bg-green-100"], [class~="bg-gray-100"]) {
+  padding: 1px 7px;
+  font-family: var(--ui-font-mono);
+  font-size: 10.5px;
+  line-height: 16px;
+  font-weight: 500;
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) div[class~="overflow-hidden"][class~="rounded-lg"][class~="border"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+/* the dialogs' own close button is a variant-less .btn (text only): the reference's default button (control outline,
+   surface, ink), as every other dialog's secondary action */
+html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-overrides"]) button.btn:not([class*="btn-primary"], [class*="btn-secondary"], [class*="btn-danger"], [class*="btn-ghost"], [class*="btn-success"]) {
+  border-color: rgb(var(--ui-line-strong));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+/* 11.3 Sort order: each group a draggable row of the reference's list (1px line, radius 8, no lift shadow), its handle faint,
+   the id Geist Mono 11 muted; the platform chip is the identity chip (data.css). */
+html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]) {
+  padding: 10px 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]):hover {
+  border-color: rgb(var(--ui-line-strong));
+}
+
+html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]) > div:first-child {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]) > div:last-child {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+}
+
+html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]) div[class~="font-medium"] {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+}
+
+/* 11.4 OpenAI Messages dispatch (create / edit, 「允许 /v1/messages 调度」 on): the family-mapping card and the exact-override
+   card are one kind of card, the reference's (1px structural line, radius 8, no shadow; a header band on the grouped fill
+   at 60 % over the line, the title 13/600 ink, the hint 12px muted). Upstream tints the exact-override card with the
+   accent (primary-50 band, primary dot, title, hint and border) only to set it apart from the family card, whose band is
+   grey with a blue dot: that is decoration, not a state (nothing succeeded, nothing is selected), so both are neutral and
+   their titles tell them apart (decision 2). The mapping rows are the list rows (no lift shadow), the empty state and the
+   add button the reference's dashed frame; 「添加精确映射」 stays the accent link. */
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"]:has(> div[class~="border-b"][class~="px-4"][class~="py-3"]:first-child) {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] > div[class~="border-b"][class~="px-4"][class~="py-3"]:first-child {
+  padding: 10px 14px;
+  border-color: rgb(var(--ui-line));
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] > div[class~="border-b"]:first-child div[class~="h-2"][class~="w-2"][class~="rounded-full"] {
+  width: 6px;
+  height: 6px;
+  background-color: rgb(var(--ui-faint));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] > div[class~="border-b"]:first-child label {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 19.5px;
+  font-weight: 600;
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] > div[class~="border-b"]:first-child p {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] > div[class~="p-4"] {
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] div[class~="border-dashed"][class~="border-primary-200"] {
+  padding: 12px 14px;
+  border-width: 1px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] div[class~="group"][class~="rounded-xl"][class~="border"][class~="p-4"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] div[class~="group"][class~="rounded-xl"][class~="border"][class~="p-4"]:hover {
+  border-color: rgb(var(--ui-line-strong));
+  box-shadow: none;
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] div[class~="group"] input.input {
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] div[class~="group"] div[class~="text-primary-300"] {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] button[class~="w-full"][class~="border-dashed"] {
+  border-width: 1px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"] button[class~="w-full"][class~="border-dashed"]:hover {
+  border-color: rgb(var(--ui-line-focus));
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+/* ================================================================== 12 · IP management dialogs */
+
+/* 12.1 Standard / quick add: the reference's code tabs (REF §8.15: a 2px accent rule under the current tab, its text ink;
+   the others muted, ink on hover; 8 / 10 inset, 12.5 / 600, 14px glyphs), on the structural line. */
+html.flat-theme [data-ui="proxy-create-tabs"] {
+  margin-bottom: 16px;
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui="proxy-create-tabs"] > div:first-child > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  border-bottom-color: transparent;
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 600;
+  transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
+}
+
+html.flat-theme [data-ui="proxy-create-tabs"] > div:first-child > button:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="proxy-create-tabs"] > div:first-child > button[class~="border-primary-500"] {
+  border-bottom-color: rgb(var(--ui-focus));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="proxy-create-tabs"] > div:first-child > button > svg {
+  width: 14px;
+  height: 14px;
+  margin: 0;
+}
+
+html.flat-theme [data-ui="proxy-create-tabs"] > div:first-child > button:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: -2px;
+}
+
+/* 12.2 Expiry presets (7 / 30 / 90 / 180 days): one control, the reference's segmented choice (REF §8.5: the structural
+   frame, 2px inset, 12.5 / 600 segments, the matching preset the ink thumb), as its 24 hours / 7 days / 30 days. */
+html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"]:has(> button.btn-sm) {
+  display: inline-flex;
+  gap: 0;
+  margin-bottom: 8px;
+  padding: 2px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"] > button.btn-sm {
+  min-height: 0;
+  padding: 6px 14px;
+  border-color: transparent;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 600;
+  transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"] > button.btn-sm:hover {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"] > button.btn-sm.btn-primary,
+html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"] > button.btn-sm.btn-primary:hover {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+/* 12.3 Quick add's parse result and the quality report's summary: neutral cards (1px line, the grouped fill), the report's
+   score 15/600 Geist Mono (the reference's statistic figure); its table is data.css' plain table. */
+html.flat-theme .modal-content:has([data-ui="proxy-create-tabs"]) .modal-body div[class~="rounded-lg"][class~="bg-gray-50"][class~="p-4"]:has(> div > div > svg) {
+  padding: 10px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme .modal-body > div > div[class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"]:has(div[class~="text-2xl"]):has(+ div[class~="max-h-80"] > table) {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme .modal-body > div > div[class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"]:has(+ div[class~="max-h-80"] > table) div[class~="text-2xl"][class~="font-semibold"] {
+  font-family: var(--ui-font-mono);
+  font-size: 15px;
+  line-height: 22.5px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ================================================================== 13 · subscription, redeem, promo and announcement dialogs */
+
+/* 13.1 Adjust subscription: the facts card neutral (1px line, radius 8, the grouped fill), 13px muted with ink values. */
+html.flat-theme #extend-subscription-form > div:first-child {
+  padding: 12px 14px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme #extend-subscription-form > div:first-child > p {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+html.flat-theme #extend-subscription-form > div:first-child span[class~="font-medium"] {
+  color: rgb(var(--ui-ink));
+  font-variant-numeric: tabular-nums;
+}
+
+/* the users picked for a batch assignment: neutral rows (the grouped fill, radius 6) */
+html.flat-theme #assign-subscription-form [data-test="assign-users"] li {
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-subtle));
+  font-size: 13px;
+}
+
+/* 13.2 The subscription guide: steps numbered in the reference's letter square (20px, radius 4, 1px line, the grouped fill,
+   Geist Mono 600 ink-soft), not accent circles; lists in the docs' 13px muted; the steps' table keeps its label column on
+   the grouped fill. */
+html.flat-theme [data-ui="subscription-guide-title"] ~ div h3 > span[class~="rounded-full"][class~="bg-primary-100"] {
+  width: 20px;
+  height: 20px;
+  border: 1px solid rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="subscription-guide-title"] + p {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+html.flat-theme [data-ui="subscription-guide-title"] ~ div ol {
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+  line-height: 1.625;
+}
+
+html.flat-theme [data-ui="subscription-guide-title"] ~ div ol > li::marker {
+  color: rgb(var(--ui-faint));
+}
+
+html.flat-theme [data-ui="subscription-guide-title"] ~ div div[class~="overflow-hidden"][class~="rounded-lg"][class~="border"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="subscription-guide-title"] ~ div div[class~="overflow-hidden"] td[class~="bg-gray-50"] {
+  background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+  color: rgb(var(--ui-ink));
+}
+
+/* 13.3 Generate codes: the code-expiry choices are one control, the reference's segmented choice (the structural frame,
+   2px inset, 12.5 / 600 segments, the chosen one the ink thumb) instead of accent-tinted boxes. */
+html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"]:has(> button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"]) {
+  gap: 0;
+  padding: 2px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"] {
+  padding: 6px 10px;
+  border-color: transparent;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 600;
+  transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"]:hover {
+  background-color: transparent;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"][class~="border-primary-500"] {
+  border-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"]:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+/* 13.4 Generated codes: the header is the dialog header (14 / 18 inset on the structural line, title 14/600, the count
+   12px muted), its success mark the 28px square in the success pair (a status), the close the 28px bordered button; the
+   codes the reference's snippet (Geist Mono 12.5 on the canvas, radius 6, 12 inset); the footer the dialog footer. */
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child {
+  padding: var(--ui-dialog-head-y, 14px) var(--ui-dialog-x, 18px);
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child div[class~="rounded-full"][class~="h-10"] {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-success) / 0.3);
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-success-soft));
+}
+
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child div[class~="rounded-full"][class~="h-10"] > svg {
+  width: 15px;
+  height: 15px;
+  color: rgb(var(--ui-success));
+}
+
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child h2 {
+  color: rgb(var(--ui-ink));
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
+
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child h2 + p {
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+  line-height: 18px;
+}
+
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child > button {
+  display: inline-grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child > button:hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child > button svg {
+  width: 15px;
+  height: 15px;
+}
+
+html.flat-theme [data-ui="redeem-result-body"] {
+  padding: var(--ui-dialog-body-y, 16px) var(--ui-dialog-x, 18px);
+}
+
+html.flat-theme [data-ui="redeem-result-body"] textarea {
+  padding: 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-canvas));
+  color: rgb(var(--ui-ink));
+  font-size: 12.5px;
+  line-height: 1.625;
+}
+
+html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:last-child {
+  padding: var(--ui-dialog-foot-y, 12px) var(--ui-dialog-x, 18px);
+  border-color: rgb(var(--ui-line));
+  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+/* 13.5 Announcement targeting: the card is the reference's option card (1px line, radius 8, the grouped fill at 60 %); 「所有
+   用户 / 按条件」 is an either / or, drawn as the reference's segmented choice (the radios stay in the page for keyboards and
+   screen readers, visually hidden; the chosen label is the ink thumb; keyboard focus rings the segment); the condition
+   groups are cards on the surface without shadow; 「OR」 / 「AND」 counts in Geist Mono. */
+html.flat-theme [data-ui="announcement-targeting"] {
+  padding: 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:first-child > div:first-child {
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  font-weight: 600;
+}
+
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:first-child > div + div {
+  margin-top: 2px;
+  color: rgb(var(--ui-muted));
+  font-size: 12px;
+}
+
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child:has(> label > input[type="radio"]) {
+  display: inline-flex;
+  gap: 0;
+  padding: 2px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:has(> input[type="radio"]) {
+  position: relative;
+  gap: 0;
+  padding: 6px 14px;
+  border-radius: var(--ui-radius-md);
+  color: rgb(var(--ui-muted));
+  font-size: 12.5px;
+  line-height: 18.75px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
+}
+
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:has(> input[type="radio"]):hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:has(> input[type="radio"]:checked) {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label > input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  opacity: 0;
+}
+
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:has(> input[type="radio"]:focus-visible) {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme [data-ui="announcement-targeting"] div[class~="rounded-2xl"][class~="bg-white"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui="announcement-targeting"] div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-3"] {
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
+}
+
+/* field labels inside the card sit on its grouped fill: the muted grey (the label grey is 4.50:1 there) */
+html.flat-theme [data-ui="announcement-targeting"] .input-label {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui="announcement-targeting"] div[class~="text-sm"][class~="font-medium"] > span[class~="text-xs"] {
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+}
+
+html.flat-theme [data-ui="announcement-targeting"] div[class~="border-dashed"] {
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  color: rgb(var(--ui-muted));
+  font-size: 13px;
+}
+
+/* 13.6 Promo codes: a label's 「(留空自动生成)」-style hint reads as part of the label, at its size, in the muted grey. */
+html.flat-theme :is(#create-promo-form, #edit-promo-form) .input-label > span[class~="text-xs"] {
+  color: rgb(var(--ui-muted));
+  font-size: inherit;
+  font-weight: 400;
+  letter-spacing: normal;
+}
+
+/* 13.6b Promo code usages: rows of the reference's list (1px line, radius 8, 10 / 12 inset); the user glyph in the 28px neutral
+   square (upstream's green circle is decoration), the e-mail 13/500 ink, the time Geist Mono 11 muted; the credited amount
+   keeps the success colour (a credit), in Geist Mono. Hook: data-ui="promo-usages" on the list. */
+html.flat-theme [data-ui="promo-usages"] > div[class~="border"] {
+  padding: 10px 12px;
+  border-color: rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
+html.flat-theme [data-ui="promo-usages"] > div[class~="border"] div[class~="rounded-full"][class~="h-8"] {
+  width: 28px;
+  height: 28px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-md);
+  background-color: color-mix(in srgb, rgb(var(--ui-ink)) 3%, rgb(var(--ui-surface)));
+}
+
+html.flat-theme [data-ui="promo-usages"] > div[class~="border"] div[class~="rounded-full"][class~="h-8"] > svg {
+  width: 14px;
+  height: 14px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui="promo-usages"] > div[class~="border"] p[class~="text-xs"] {
+  color: rgb(var(--ui-muted));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+}
+
+html.flat-theme [data-ui="promo-usages"] > div[class~="border"] div[class~="text-right"] > span {
+  color: rgb(var(--ui-success));
+  font-family: var(--ui-font-mono);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* 13.7 Read status: e-mails 13/500 ink (data.css draws the table). */
+html.flat-theme [data-ui="announcement-read-status"] td[data-column="email"] > span {
+  font-weight: 500;
+}
diff --git a/frontend/src/styles/console/shell.css b/frontend/src/styles/console/shell.css
index 5fb2cc054284..f49b6b773658 100644
--- a/frontend/src/styles/console/shell.css
+++ b/frontend/src/styles/console/shell.css
@@ -445,6 +445,34 @@ html.flat-theme .app-main > header > div > div:last-child {
     width: 15px;
     height: 15px;
   }
+
+  /* The page title after the menu button (coordinator decision, wave 2: the owner prefers more information on a
+     phone): one line, 14 / 600 ink, an ellipsis when it does not fit; the description stays hidden. The title takes
+     what the controls leave; the controls keep their size. */
+  html.flat-theme .app-main > header > div > div:first-child {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  html.flat-theme .app-main > header > div > div:last-child {
+    flex: 0 0 auto;
+  }
+
+  html.flat-theme .app-main > header > div > div:first-child > div[class~="hidden"]:has(> h1) {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  html.flat-theme .app-main > header > div > div:first-child > div[class~="hidden"] > h1 {
+    overflow: hidden;
+    font: 600 14px/20px var(--ui-font);
+    text-overflow: ellipsis;
+  }
+
+  html.flat-theme .app-main > header > div > div:first-child > div[class~="hidden"] > h1 + p {
+    display: none;
+  }
 }
 
 /* Desktop: the first row of the content column, 30px tall at the content gutter (/logs: y = 30), no fill, no line,
diff --git a/frontend/src/styles/console/tokens.css b/frontend/src/styles/console/tokens.css
index ce19381bca4c..99e958411688 100644
--- a/frontend/src/styles/console/tokens.css
+++ b/frontend/src/styles/console/tokens.css
@@ -478,6 +478,144 @@
   --theme-text-purple-800: 237 233 254;
 }
 
+/* ------------------------------------------------------------------ identity hues (owner decision 2, wave 2)
+   Platform identity keeps upstream's platform colours: every Tailwind hue upstream gives a platform, a group or a plan
+   (PlatformTypeBadge, GroupBadge, the group pickers' rate pills) gets its own text colour (>= 4.5:1 on its fill, on the
+   surface and on the row hover; the logo glyph inherits it, so >= 3:1), a soft fill and a 1px line, in the reference's
+   chip. Upstream's shades: fill = the 50/100 midpoint (zinc 100), line = the 500 at 32 %, text = the 700 (orange a
+   touch deeper for the hover row, amber and green the 800); dark: fill = the 500 at 14 % and line at 40 % over the
+   surface, text = the 300. Only the identity rules in data.css §6 read them; every other upstream hue keeps folding
+   into the status families above (decision 2: colour only for identity, status and the accent). */
+:root.flat-theme {
+  --ui-id-orange: 190 64 13;
+  --ui-id-orange-soft: 255 242 225;
+  --ui-id-orange-line: 253 210 180;
+  --ui-id-amber: 146 64 14;
+  --ui-id-amber-soft: 254 247 217;
+  --ui-id-amber-line: 252 224 177;
+  --ui-id-emerald: 4 120 87;
+  --ui-id-emerald-soft: 222 252 237;
+  --ui-id-emerald-line: 179 233 215;
+  --ui-id-green: 22 101 52;
+  --ui-id-green-soft: 230 252 238;
+  --ui-id-green-line: 184 236 203;
+  --ui-id-teal: 15 118 110;
+  --ui-id-teal-soft: 222 252 246;
+  --ui-id-teal-line: 180 232 227;
+  --ui-id-cyan: 14 116 144;
+  --ui-id-cyan-soft: 222 252 254;
+  --ui-id-cyan-line: 175 232 241;
+  --ui-id-sky: 3 105 161;
+  --ui-id-sky-soft: 232 246 254;
+  --ui-id-sky-line: 178 226 248;
+  --ui-id-blue: 29 78 216;
+  --ui-id-blue-soft: 229 240 254;
+  --ui-id-blue-line: 192 215 252;
+  --ui-id-indigo: 67 56 202;
+  --ui-id-indigo-soft: 231 236 255;
+  --ui-id-indigo-line: 205 206 251;
+  --ui-id-violet: 109 40 217;
+  --ui-id-violet-soft: 241 238 254;
+  --ui-id-violet-line: 218 203 252;
+  --ui-id-purple: 126 34 206;
+  --ui-id-purple-soft: 246 238 255;
+  --ui-id-purple-line: 227 201 252;
+  --ui-id-fuchsia: 162 28 175;
+  --ui-id-fuchsia-soft: 252 238 255;
+  --ui-id-fuchsia-line: 243 196 250;
+  --ui-id-pink: 190 24 93;
+  --ui-id-pink-soft: 252 236 246;
+  --ui-id-pink-line: 249 196 222;
+  --ui-id-rose: 190 18 60;
+  --ui-id-rose-soft: 255 234 236;
+  --ui-id-rose-line: 251 194 203;
+  --ui-id-zinc: 63 63 70;
+  --ui-id-zinc-soft: 244 244 245;
+  --ui-id-zinc-line: 212 212 216;
+  /* one colour per platform for the consumers that derive their own tints, text and fills from it
+     (platformColors.ts platformAccentColor: the model plaza's chips and paid-price zone). It must carry white
+     text as a fill and turn into >= 4.5:1 text when mixed with black (light) or white (dark), so it is the text
+     shade in light and a 600-level shade in dark. */
+  --ui-id-orange-accent: 190 64 13;
+  --ui-id-amber-accent: 146 64 14;
+  --ui-id-emerald-accent: 4 120 87;
+  --ui-id-green-accent: 22 101 52;
+  --ui-id-teal-accent: 15 118 110;
+  --ui-id-cyan-accent: 14 116 144;
+  --ui-id-sky-accent: 3 105 161;
+  --ui-id-blue-accent: 29 78 216;
+  --ui-id-indigo-accent: 67 56 202;
+  --ui-id-violet-accent: 109 40 217;
+  --ui-id-purple-accent: 126 34 206;
+  --ui-id-fuchsia-accent: 162 28 175;
+  --ui-id-pink-accent: 190 24 93;
+  --ui-id-rose-accent: 190 18 60;
+  --ui-id-zinc-accent: 63 63 70;
+}
+
+:root.flat-theme.dark {
+  --ui-id-orange: 253 186 116;
+  --ui-id-orange-soft: 57 38 25;
+  --ui-id-orange-line: 115 62 24;
+  --ui-id-amber: 252 211 77;
+  --ui-id-amber-soft: 57 44 24;
+  --ui-id-amber-line: 114 79 20;
+  --ui-id-emerald: 110 231 183;
+  --ui-id-emerald-soft: 25 48 40;
+  --ui-id-emerald-line: 22 90 67;
+  --ui-id-green: 134 239 172;
+  --ui-id-green-soft: 27 50 36;
+  --ui-id-green-line: 29 94 53;
+  --ui-id-teal: 94 234 212;
+  --ui-id-teal-soft: 25 48 46;
+  --ui-id-teal-line: 24 89 82;
+  --ui-id-cyan: 103 232 249;
+  --ui-id-cyan-soft: 23 48 52;
+  --ui-id-cyan-line: 18 88 100;
+  --ui-id-sky: 125 211 252;
+  --ui-id-sky-soft: 24 45 55;
+  --ui-id-sky-line: 21 82 109;
+  --ui-id-blue: 147 197 253;
+  --ui-id-blue-soft: 31 41 57;
+  --ui-id-blue-line: 39 68 114;
+  --ui-id-indigo: 165 180 252;
+  --ui-id-indigo-soft: 36 37 56;
+  --ui-id-indigo-line: 55 56 112;
+  --ui-id-violet: 196 181 253;
+  --ui-id-violet-soft: 42 35 57;
+  --ui-id-violet-line: 71 52 114;
+  --ui-id-purple: 216 180 254;
+  --ui-id-purple-soft: 46 34 57;
+  --ui-id-purple-line: 83 50 114;
+  --ui-id-fuchsia: 240 171 252;
+  --ui-id-fuchsia-soft: 53 32 56;
+  --ui-id-fuchsia-line: 102 44 111;
+  --ui-id-pink: 249 168 212;
+  --ui-id-pink-soft: 55 32 44;
+  --ui-id-pink-line: 110 44 77;
+  --ui-id-rose: 253 164 175;
+  --ui-id-rose-soft: 57 31 36;
+  --ui-id-rose-line: 113 41 53;
+  --ui-id-zinc: 212 212 216;
+  --ui-id-zinc-soft: 39 39 42;
+  --ui-id-zinc-line: 82 82 91;
+  --ui-id-orange-accent: 202 70 12;
+  --ui-id-amber-accent: 182 85 9;
+  --ui-id-emerald-accent: 4 129 92;
+  --ui-id-green-accent: 21 130 62;
+  --ui-id-teal-accent: 14 126 116;
+  --ui-id-cyan-accent: 13 122 151;
+  --ui-id-sky-accent: 2 118 180;
+  --ui-id-blue-accent: 40 104 237;
+  --ui-id-indigo-accent: 93 92 237;
+  --ui-id-violet-accent: 132 77 242;
+  --ui-id-purple-accent: 154 63 239;
+  --ui-id-fuchsia-accent: 192 38 211;
+  --ui-id-pink-accent: 216 38 116;
+  --ui-id-rose-accent: 226 31 73;
+  --ui-id-zinc-accent: 110 110 119;
+}
+
 /* ------------------------------------------------------------------ shape, depth, motion */
 :root.flat-theme {
   /* upstream's radii onto the reference's three: controls (xl: buttons, inputs, dropdowns; lg, md) 6px, cards
diff --git a/frontend/src/utils/platformColors.ts b/frontend/src/utils/platformColors.ts
index 2d1440fb6656..5258353ef055 100644
--- a/frontend/src/utils/platformColors.ts
+++ b/frontend/src/utils/platformColors.ts
@@ -82,24 +82,26 @@ const BORDER_STRONG: Record<Platform, string> = {
 const BORDER_STRONG_DEFAULT = 'border-gray-300 dark:border-dark-600'
 
 // ── Accent (single raw color per platform; consumers derive washes/tints
-//    from it via CSS color-mix, e.g. plaza paid-price zone). The console
-//    theme's colour of the platform's hue family (as its badges) when the
-//    theme is on; the upstream Tailwind 500 otherwise ──
-const accent = (family: string, channels: string) => `rgb(var(--theme-color-${family}-500, ${channels}))`
+//    from it via CSS color-mix, e.g. plaza paid-price zone). With the console
+//    theme on, the platform's own identity hue (styles/console/tokens.css
+//    --ui-id-<hue>-accent: a shade that carries white text as a fill and mixes
+//    into readable text in both themes); with it off (the token is undefined)
+//    the upstream Tailwind 500. An unknown platform is neutral under the theme. ──
+const accent = (hue: string, channels: string) => `rgb(var(--ui-id-${hue}-accent, ${channels}))`
 const ACCENT: Record<Platform, string> = {
-  anthropic: accent('warning', '249 115 22'), // orange-500 #f97316
-  openai: accent('success', '34 197 94'), // green-500 #22c55e
+  anthropic: accent('orange', '249 115 22'), // orange-500 #f97316
+  openai: accent('green', '34 197 94'), // green-500 #22c55e
   antigravity: accent('purple', '168 85 247'), // purple-500 #a855f7
-  gemini: accent('info', '59 130 246'), // blue-500 #3b82f6
-  grok: accent('gray', '113 113 122'), // zinc-500 #71717a
+  gemini: accent('blue', '59 130 246'), // blue-500 #3b82f6
+  grok: accent('zinc', '113 113 122'), // zinc-500 #71717a
   kimi: accent('pink', '236 72 153'), // pink-500 #ec4899
   zhipu: accent('indigo', '99 102 241'), // indigo-500 #6366f1
   deepseek: accent('teal', '20 184 166'), // teal-500 #14b8a6
-  minimax: accent('danger', '244 63 94'), // rose-500 #f43f5e
-  opencode_go: accent('warning', '245 158 11'), // amber-500 #f59e0b
-  composite: accent('teal', '6 182 212'), // cyan-500 #06b6d4
+  minimax: accent('rose', '244 63 94'), // rose-500 #f43f5e
+  opencode_go: accent('amber', '245 158 11'), // amber-500 #f59e0b
+  composite: accent('cyan', '6 182 212'), // cyan-500 #06b6d4
 }
-const ACCENT_DEFAULT = accent('primary', '20 184 166') // primary-500 (teal #14b8a6; the console accent under the theme)
+const ACCENT_DEFAULT = accent('zinc', '20 184 166') // primary-500 (teal #14b8a6) upstream; neutral zinc under the theme
 
 // ── Accent bar (gradient) ───────────────────────────────────────────
 const ACCENT_BAR: Record<Platform, string> = {
diff --git a/frontend/src/views/ModelPlazaView.vue b/frontend/src/views/ModelPlazaView.vue
index 42c69c8717c7..4d487d0cb0f2 100644
--- a/frontend/src/views/ModelPlazaView.vue
+++ b/frontend/src/views/ModelPlazaView.vue
@@ -5,7 +5,7 @@
   </AppLayout>
 
   <!-- 独立形态:自带导航条(logo/站名 + 登录/回后台) -->
-  <div v-else class="min-h-screen bg-gray-50 dark:bg-dark-950">
+  <div v-else data-ui="model-plaza" class="min-h-screen bg-gray-50 dark:bg-dark-950">
     <PlazaNavBar />
     <main class="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
       <ModelPlazaContent :response="data" :loading="loading" :error="loadFailed" />
diff --git a/frontend/src/views/admin/AnnouncementsView.vue b/frontend/src/views/admin/AnnouncementsView.vue
index 29ea134e8dec..e116663147d6 100644
--- a/frontend/src/views/admin/AnnouncementsView.vue
+++ b/frontend/src/views/admin/AnnouncementsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="announcements-page mgmt-page">
       <template #filters>
         <div class="flex flex-wrap items-center gap-3">
           <!-- Left: Search + Filters -->
@@ -78,6 +78,7 @@
 
           <template #cell-notify_mode="{ row }">
             <span
+              data-ui="category-chip"
               :class="[
                 'badge',
                 row.notify_mode === 'popup'
diff --git a/frontend/src/views/admin/AuditLogView.vue b/frontend/src/views/admin/AuditLogView.vue
index b2bb2d099ab8..f05dddab24ca 100644
--- a/frontend/src/views/admin/AuditLogView.vue
+++ b/frontend/src/views/admin/AuditLogView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="audit-page">
       <!-- Filters -->
       <template #filters>
         <div class="card p-4 sm:p-6">
@@ -174,7 +174,7 @@
         </div>
       </div>
 
-      <div v-else-if="detail" class="space-y-5 py-2">
+      <div v-else-if="detail" class="space-y-5 py-2" data-ui="audit-detail">
         <!-- Hero: action + result at a glance -->
         <div class="rounded-2xl border border-gray-200 bg-gray-50/60 p-5 dark:border-dark-700 dark:bg-dark-900/60">
           <div class="flex flex-wrap items-center gap-3">
diff --git a/frontend/src/views/admin/BackupView.vue b/frontend/src/views/admin/BackupView.vue
index b9f7600a1902..d0cb98fa1866 100644
--- a/frontend/src/views/admin/BackupView.vue
+++ b/frontend/src/views/admin/BackupView.vue
@@ -288,7 +288,7 @@
     <!-- Cloudflare R2 Setup Guide Modal -->
     <teleport to="body">
       <transition name="modal">
-        <div v-if="showR2Guide" class="fixed inset-0 z-50 flex items-center justify-center p-4" @mousedown.self="showR2Guide = false">
+        <div v-if="showR2Guide" class="fixed inset-0 z-50 flex items-center justify-center p-4" data-ui="r2-guide" @mousedown.self="showR2Guide = false">
           <div class="fixed inset-0 bg-black/50" @click="showR2Guide = false"></div>
           <div class="relative max-h-[85vh] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-6 shadow-2xl dark:bg-dark-800">
             <button type="button" class="absolute right-4 top-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" @click="showR2Guide = false">
diff --git a/frontend/src/views/admin/ChannelMonitorView.vue b/frontend/src/views/admin/ChannelMonitorView.vue
index ae154f713699..df16f767df10 100644
--- a/frontend/src/views/admin/ChannelMonitorView.vue
+++ b/frontend/src/views/admin/ChannelMonitorView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="w-full min-w-0 space-y-6 pb-8">
+    <div class="w-full min-w-0 space-y-6 pb-8" data-ui="channel-monitor-page">
       <header
         class="page-header mb-0 rounded-3xl bg-white p-5 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700 sm:p-6"
       >
@@ -75,11 +75,11 @@
           </template>
 
           <template #cell-provider="{ row }">
-            <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium" :class="providerBadgeClass(row.provider)">
+            <span class="inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium" :class="providerBadgeClass(row.provider)" data-ui="platform-chip">
               {{ providerLabel(row.provider) }}
             </span>
             <!-- 三种检测模式并列展示，quota 系配额数据源与纯探活一眼可分 -->
-            <span class="ml-1 inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium" :class="checkModeBadgeClass(row.check_mode)">
+            <span class="ml-1 inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium" :class="checkModeBadgeClass(row.check_mode)" data-ui="category-chip">
               {{ checkModeLabel(row.check_mode) }}
             </span>
           </template>
diff --git a/frontend/src/views/admin/ChannelsView.vue b/frontend/src/views/admin/ChannelsView.vue
index 6e5e351d6a9a..b01c3bada501 100644
--- a/frontend/src/views/admin/ChannelsView.vue
+++ b/frontend/src/views/admin/ChannelsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="channels-page">
       <template #filters>
         <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
           <!-- Left: Search + Filters -->
@@ -166,8 +166,8 @@
             class="channel-tab group"
             :class="activeTab === section.platform ? 'channel-tab-active' : 'channel-tab-inactive'"
           >
-            <PlatformIcon :platform="section.platform" size="xs" :class="platformTextClass(section.platform)" />
-            <span :class="platformTextClass(section.platform)">{{ t('admin.groups.platforms.' + section.platform, section.platform) }}</span>
+            <PlatformIcon :platform="section.platform" size="xs" :class="platformTextClass(section.platform)" data-ui="platform-text" />
+            <span :class="platformTextClass(section.platform)" data-ui="platform-text">{{ t('admin.groups.platforms.' + section.platform, section.platform) }}</span>
           </button>
         </div>
 
@@ -246,8 +246,8 @@
                     class="h-3.5 w-3.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                     @change="togglePlatform(p)"
                   />
-                  <PlatformIcon :platform="p" size="xs" :class="platformTextClass(p)" />
-                  <span :class="platformTextClass(p)">{{ t('admin.groups.platforms.' + p, p) }}</span>
+                  <PlatformIcon :platform="p" size="xs" :class="platformTextClass(p)" data-ui="platform-text" />
+                  <span :class="platformTextClass(p)" data-ui="platform-text">{{ t('admin.groups.platforms.' + p, p) }}</span>
                 </label>
               </div>
             </div>
@@ -310,9 +310,10 @@
                       class="h-3 w-3 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
                       @change="toggleGroupInSection(sIdx, group.id)"
                     />
-                    <span :class="['font-medium', platformTextClass(group.platform)]">{{ group.name }}</span>
+                    <span :class="['font-medium', platformTextClass(group.platform)]" data-ui="platform-text">{{ group.name }}</span>
                     <span
                       :class="['rounded-full px-1 py-0 text-[10px]', platformBadgeLightClass(group.platform)]"
+                      data-ui="platform-chip"
                     >{{ group.rate_multiplier }}x</span>
                     <span class="text-[10px] text-gray-400">{{ group.account_count || 0 }}</span>
                     <span
@@ -394,6 +395,7 @@
                     type="text"
                     class="input flex-1 text-xs"
                     :class="platformTextClass(section.platform)"
+                    data-ui="platform-text"
                     :placeholder="t('admin.channels.form.mappingSource', 'Source model')"
                     @change="renameMappingKey(sIdx, srcModel, ($event.target as HTMLInputElement).value)"
                   />
@@ -403,6 +405,7 @@
                     type="text"
                     class="input flex-1 text-xs"
                     :class="platformTextClass(section.platform)"
+                    data-ui="platform-text"
                     :placeholder="t('admin.channels.form.mappingTarget', 'Target model')"
                     @input="section.model_mapping[srcModel] = ($event.target as HTMLInputElement).value"
                   />
@@ -506,7 +509,7 @@
                         : 'border-gray-200 hover:bg-gray-50 dark:border-dark-600 dark:hover:bg-dark-700'"
                     >
                       <input type="checkbox" :checked="rule.group_ids.includes(gid)" class="h-3 w-3 rounded border-gray-300 text-primary-600 focus:ring-primary-500" @change="rule.group_ids.includes(gid) ? rule.group_ids.splice(rule.group_ids.indexOf(gid), 1) : rule.group_ids.push(gid)" />
-                      <span :class="['font-medium', platformTextClass(section.platform)]">{{ getGroupNameById(gid) }}</span>
+                      <span :class="['font-medium', platformTextClass(section.platform)]" data-ui="platform-text">{{ getGroupNameById(gid) }}</span>
                     </label>
                   </div>
                   <p v-if="section.group_ids.length === 0" class="mt-1 text-xs text-gray-400">
@@ -523,7 +526,7 @@
                       :key="accountId"
                       class="inline-flex items-center gap-1 rounded-md border border-primary-300 bg-primary-50 px-2 py-0.5 text-xs dark:border-primary-700 dark:bg-primary-900/20"
                     >
-                      <span :class="['font-medium', platformTextClass(section.platform)]">{{ getRuleAccountLabel(accountId) }}</span>
+                      <span :class="['font-medium', platformTextClass(section.platform)]" data-ui="platform-text">{{ getRuleAccountLabel(accountId) }}</span>
                       <button type="button" @click="removeRuleAccount(rule, accountId)" class="text-gray-400 hover:text-red-500">
                         <Icon name="x" size="xs" />
                       </button>
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index b4beeaa1fd2f..f3c7f986289d 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div class="space-y-6" data-ui="admin-dashboard">
       <!-- Loading State -->
       <div v-if="loading" class="flex items-center justify-center py-12">
         <LoadingSpinner />
diff --git a/frontend/src/views/admin/GroupsView.vue b/frontend/src/views/admin/GroupsView.vue
index 0709b678696b..6d158c3b0aac 100644
--- a/frontend/src/views/admin/GroupsView.vue
+++ b/frontend/src/views/admin/GroupsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="groups-page mgmt-page">
       <template #filters>
         <div
           class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start"
@@ -139,6 +139,7 @@
 
           <template #cell-platform="{ value }">
             <span
+              data-ui="platform-chip"
               :class="[
                 'inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium',
                 value === 'anthropic'
@@ -171,6 +172,7 @@
             <div class="space-y-1">
               <!-- Type Badge -->
               <span
+                data-ui="category-chip"
                 :class="[
                   'inline-block rounded-full px-2 py-0.5 text-xs font-medium',
                   row.subscription_type === 'subscription'
@@ -269,7 +271,7 @@
           </template>
 
           <template #cell-is_exclusive="{ value }">
-            <span :class="['badge', value ? 'badge-primary' : 'badge-gray']">
+            <span data-ui="category-chip" :class="['badge', value ? 'badge-primary' : 'badge-gray']">
               {{
                 value ? t("admin.groups.exclusive") : t("admin.groups.public")
               }}
@@ -3763,6 +3765,7 @@
               </div>
               <div class="text-xs text-gray-500 dark:text-gray-400">
                 <span
+                  data-ui="platform-chip"
                   :class="[
                     'inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium',
                     group.platform === 'anthropic'
diff --git a/frontend/src/views/admin/PluginsView.vue b/frontend/src/views/admin/PluginsView.vue
index 8810c51ce7d1..0edb19e1340f 100644
--- a/frontend/src/views/admin/PluginsView.vue
+++ b/frontend/src/views/admin/PluginsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div class="space-y-6" data-ui="plugins">
       <section
         class="flex flex-col gap-4 border-b border-gray-200 pb-5 dark:border-dark-700 sm:flex-row sm:items-end sm:justify-between"
       >
diff --git a/frontend/src/views/admin/PromoCodesView.vue b/frontend/src/views/admin/PromoCodesView.vue
index 34cc9ef94b88..c221964faa90 100644
--- a/frontend/src/views/admin/PromoCodesView.vue
+++ b/frontend/src/views/admin/PromoCodesView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="promo-page mgmt-page">
       <template #filters>
         <div class="flex flex-wrap items-center gap-3">
           <!-- Left: Search + Filters -->
@@ -326,7 +326,7 @@
       <div v-else-if="usages.length === 0" class="py-8 text-center text-gray-500 dark:text-gray-400">
         {{ t('admin.promo.noUsages') }}
       </div>
-      <div v-else class="space-y-3">
+      <div v-else data-ui="promo-usages" class="space-y-3">
         <div
           v-for="usage in usages"
           :key="usage.id"
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index a30c5880bcd4..e4435c6dc963 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="proxies-page mgmt-page">
       <template #filters>
         <div class="flex flex-wrap items-center gap-3">
           <!-- Left: Search + Filters -->
@@ -126,6 +126,7 @@
           <template #cell-protocol="{ value }">
             <span
               v-if="value"
+              data-ui="category-chip"
               :class="['badge', value.startsWith('socks5') ? 'badge-primary' : 'badge-gray']"
             >
               {{ value.toUpperCase() }}
@@ -393,6 +394,7 @@
     >
       <!-- Tab Switch -->
       <div
+        data-ui="proxy-create-tabs"
         class="mb-6 flex items-center justify-between gap-3 border-b border-gray-200 dark:border-dark-600"
       >
         <div class="flex min-w-0 shrink-0">
diff --git a/frontend/src/views/admin/RedeemView.vue b/frontend/src/views/admin/RedeemView.vue
index 1a6931fd8216..2fdf7c3c4f6e 100644
--- a/frontend/src/views/admin/RedeemView.vue
+++ b/frontend/src/views/admin/RedeemView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="redeem-page mgmt-page">
       <template #filters>
         <div class="flex flex-wrap items-center gap-3">
           <!-- Left: Search + Filters -->
@@ -115,6 +115,7 @@
 
           <template #cell-type="{ value }">
             <span
+              data-ui="category-chip"
               :class="[
                 'badge',
                 value === 'balance'
@@ -567,7 +568,7 @@
             </button>
           </div>
           <!-- Content -->
-          <div class="p-5">
+          <div data-ui="redeem-result-body" class="p-5">
             <div class="relative">
               <textarea
                 readonly
diff --git a/frontend/src/views/admin/RiskControlView.vue b/frontend/src/views/admin/RiskControlView.vue
index 2b7276c22806..03413b1916ae 100644
--- a/frontend/src/views/admin/RiskControlView.vue
+++ b/frontend/src/views/admin/RiskControlView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div class="space-y-6" data-ui="risk-page">
       <div v-if="loading" class="flex items-center justify-center py-16">
         <div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-600"></div>
       </div>
@@ -380,7 +380,7 @@
       </template>
 
       <BaseDialog :show="settingsOpen" :title="t('admin.riskControl.settingsTitle')" width="extra-wide" @close="settingsOpen = false">
-        <div class="space-y-6">
+        <div class="space-y-6" data-ui="risk-settings">
           <div class="flex gap-2 overflow-x-auto border-b border-gray-100 pb-3 dark:border-dark-700">
             <button
               v-for="tab in settingsTabs"
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index 5ec855a70eb9..c8538a59b0ce 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="mx-auto max-w-6xl space-y-6">
+    <div class="mx-auto max-w-6xl space-y-6" data-ui="settings">
       <!-- Loading State -->
       <div v-if="loading" class="flex items-center justify-center py-12">
         <div
diff --git a/frontend/src/views/admin/SubscriptionsView.vue b/frontend/src/views/admin/SubscriptionsView.vue
index 5bbc74244545..840f7a365d11 100644
--- a/frontend/src/views/admin/SubscriptionsView.vue
+++ b/frontend/src/views/admin/SubscriptionsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="subscriptions-page mgmt-page">
       <template #filters>
         <!-- Top Toolbar: Left (search + filters) / Right (actions) -->
         <div class="flex flex-wrap items-start justify-between gap-4">
@@ -767,7 +767,7 @@
               <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
             </button>
 
-            <h2 class="mb-4 text-lg font-bold text-gray-900 dark:text-white">{{ t('admin.subscriptions.guide.title') }}</h2>
+            <h2 data-ui="subscription-guide-title" class="mb-4 text-lg font-bold text-gray-900 dark:text-white">{{ t('admin.subscriptions.guide.title') }}</h2>
             <p class="mb-5 text-sm text-gray-500 dark:text-gray-400">{{ t('admin.subscriptions.guide.subtitle') }}</p>
 
             <!-- Step 1 -->
diff --git a/frontend/src/views/admin/SystemPromptsView.vue b/frontend/src/views/admin/SystemPromptsView.vue
index fee1ab1cc86f..6fe3365800de 100644
--- a/frontend/src/views/admin/SystemPromptsView.vue
+++ b/frontend/src/views/admin/SystemPromptsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="mx-auto max-w-5xl space-y-5 px-1">
+    <div class="mx-auto max-w-5xl space-y-5 px-1" data-ui="system-prompts">
       <header class="flex flex-wrap items-start justify-between gap-3 border-b border-line pb-4">
         <div class="space-y-1">
           <h1 class="text-xl font-semibold">{{ t('admin.systemPrompts.title') }}</h1>
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index c7c2e6ad719f..bc1dbd0f6240 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div class="space-y-6" data-ui="admin-usage">
       <UsageStatsCards :stats="usageStats" />
       <!-- Charts Section -->
       <div class="space-y-4">
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index 386b0f90d8f2..2daeb814a998 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="users-page mgmt-page">
       <!-- Single Row: Search, Filters, and Actions -->
       <template #filters>
         <div class="flex flex-wrap items-center gap-3">
@@ -338,7 +338,7 @@
           </template>
 
           <template #cell-role="{ value }">
-            <span :class="['badge', value === 'admin' ? 'badge-purple' : 'badge-gray']">
+            <span data-ui="category-chip" :class="['badge', value === 'admin' ? 'badge-purple' : 'badge-gray']">
               {{ t('admin.users.roles.' + value) }}
             </span>
           </template>
diff --git a/frontend/src/views/admin/affiliates/AdminAffiliateRecordsTable.vue b/frontend/src/views/admin/affiliates/AdminAffiliateRecordsTable.vue
index ce105853fe64..7c92c29c55f8 100644
--- a/frontend/src/views/admin/affiliates/AdminAffiliateRecordsTable.vue
+++ b/frontend/src/views/admin/affiliates/AdminAffiliateRecordsTable.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="affiliate-page">
       <template #filters>
         <div class="flex flex-wrap items-center gap-3">
           <div class="relative w-full md:w-80">
diff --git a/frontend/src/views/admin/ops/OpsDashboard.vue b/frontend/src/views/admin/ops/OpsDashboard.vue
index d6240be5220e..96bce1860491 100644
--- a/frontend/src/views/admin/ops/OpsDashboard.vue
+++ b/frontend/src/views/admin/ops/OpsDashboard.vue
@@ -1,6 +1,6 @@
 <template>
   <component :is="isFullscreen ? 'div' : AppLayout" :class="isFullscreen ? 'flex min-h-screen flex-col justify-center bg-gray-50 dark:bg-dark-950' : ''">
-    <div :class="[isFullscreen ? 'p-4 md:p-6' : '', 'space-y-6 pb-12']">
+    <div :class="[isFullscreen ? 'p-4 md:p-6' : '', 'space-y-6 pb-12']" data-ui="ops-dashboard">
       <div
         v-if="errorMessage"
         class="rounded-2xl bg-red-50 p-4 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400"
diff --git a/frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue b/frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue
index a72f93527c3d..e17b7027a48e 100644
--- a/frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue
+++ b/frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue
@@ -562,7 +562,7 @@ const empty = computed(() => events.value.length === 0 && !loading.value)
         {{ t('admin.ops.alertEvents.detail.empty') }}
       </div>
 
-      <div v-else class="space-y-5">
+      <div v-else class="space-y-5" data-ui="ops-dialog ops-alert-event">
         <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
           <div class="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between">
             <div>
diff --git a/frontend/src/views/admin/ops/components/OpsAlertRulesCard.vue b/frontend/src/views/admin/ops/components/OpsAlertRulesCard.vue
index 91a7d1c462ae..cb2578f80325 100644
--- a/frontend/src/views/admin/ops/components/OpsAlertRulesCard.vue
+++ b/frontend/src/views/admin/ops/components/OpsAlertRulesCard.vue
@@ -391,7 +391,7 @@ function cancelDelete() {
 </script>
 
 <template>
-  <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+  <div class="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700" data-ui="ops-dialog ops-alert-rules">
     <div class="mb-4 flex flex-wrap items-start justify-between gap-3 sm:gap-4">
       <div>
         <h3 class="text-sm font-bold text-gray-900 dark:text-white">{{ t('admin.ops.alertRules.title') }}</h3>
@@ -513,7 +513,7 @@ function cancelDelete() {
       width="wide"
       @close="showEditor = false"
     >
-      <div class="space-y-4">
+      <div class="space-y-4" data-ui="ops-dialog ops-alert-rule-editor">
         <div v-if="!editorValidation.valid" class="rounded-xl bg-red-50 p-4 text-xs text-red-700 dark:bg-red-900/30 dark:text-red-300">
           <div class="font-bold">{{ t('admin.ops.alertRules.validation.title') }}</div>
           <ul class="mt-1 list-disc pl-5">
diff --git a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
index 1a259940178a..f5faa0aee691 100644
--- a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
+++ b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
@@ -1548,7 +1548,7 @@ function handleToolbarRefresh() {
       <div v-if="!jobHeartbeats.length" class="text-sm text-gray-500 dark:text-gray-400">
         {{ t('admin.ops.noData') }}
       </div>
-      <div v-else class="space-y-3">
+      <div v-else class="space-y-3" data-ui="ops-dialog ops-jobs">
         <div
           v-for="hb in jobHeartbeats"
           :key="hb.job_name"
@@ -1586,7 +1586,7 @@ function handleToolbarRefresh() {
 
     <!-- Custom Time Range Dialog -->
     <BaseDialog :show="showCustomTimeRangeDialog" :title="t('admin.ops.timeRange.custom')" width="narrow" @close="handleCustomTimeRangeCancel">
-      <div class="space-y-4">
+      <div class="space-y-4" data-ui="ops-dialog ops-custom-range">
         <div>
           <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
             {{ t('admin.ops.customTimeRange.startTime') }}
diff --git a/frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue b/frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue
index 1f4111c6e5b2..57599be1ce67 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue
@@ -11,7 +11,7 @@
       {{ emptyText }}
     </div>
 
-    <div v-else class="space-y-6 p-6">
+    <div v-else class="space-y-6 p-6" data-ui="ops-dialog ops-error-detail">
       <!-- Summary -->
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
diff --git a/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue b/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue
index 947e942115a1..6c537dba936e 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue
@@ -217,7 +217,7 @@ watch(
 
 <template>
   <BaseDialog :show="show" :title="modalTitle" width="full" @close="close">
-    <div class="flex h-full min-h-0 flex-col">
+    <div class="flex h-full min-h-0 flex-col" data-ui="ops-dialog ops-error-list">
       <!-- Filters -->
       <div class="mb-4 flex-shrink-0 border-b border-gray-200 pb-4 dark:border-dark-700">
         <div class="grid grid-cols-2 gap-2 md:grid-cols-8">
diff --git a/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue b/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
index 0e114d5176e8..0c26b3473415 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
@@ -22,7 +22,7 @@
         </template>
 
         <template #cell-type="{ row }">
-          <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="getTypeBadge(row).className">
+          <span class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium" :class="getTypeBadge(row).className" data-ui="category-chip">
             {{ getTypeBadge(row).label }}
           </span>
         </template>
@@ -58,6 +58,7 @@
             v-if="row.group_id"
             class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200"
             :title="t('admin.ops.errorLog.id') + ' ' + row.group_id"
+            data-ui="category-chip"
           >
             {{ row.group_name || '#' + row.group_id }}
           </span>
diff --git a/frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue b/frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue
index d38882989767..06d5bf1c5101 100644
--- a/frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue
+++ b/frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue
@@ -164,7 +164,7 @@ const kindBadgeClass = (kind: string) => {
 <template>
   <BaseDialog :show="modelValue" :title="props.preset.title || t('admin.ops.requestDetails.title')" width="full" @close="close">
     <template #default>
-      <div class="flex h-full min-h-0 flex-col">
+      <div class="flex h-full min-h-0 flex-col" data-ui="ops-dialog ops-request-details">
         <div class="mb-4 flex flex-shrink-0 items-center justify-between">
           <div class="text-xs text-gray-500 dark:text-gray-400">
             {{ t('admin.ops.requestDetails.rangeLabel', { range: rangeLabel }) }}
diff --git a/frontend/src/views/admin/ops/components/OpsSettingsDialog.vue b/frontend/src/views/admin/ops/components/OpsSettingsDialog.vue
index 105ea560aee2..9278d408c3ef 100644
--- a/frontend/src/views/admin/ops/components/OpsSettingsDialog.vue
+++ b/frontend/src/views/admin/ops/components/OpsSettingsDialog.vue
@@ -237,7 +237,7 @@ async function saveAllSettings() {
       {{ t('common.loading') }}
     </div>
 
-    <div v-else-if="runtimeSettings && emailConfig && advancedSettings" class="space-y-6">
+    <div v-else-if="runtimeSettings && emailConfig && advancedSettings" class="space-y-6" data-ui="ops-dialog ops-settings">
       <!-- 验证错误 -->
       <div v-if="!validation.valid" class="rounded-lg border border-amber-200 bg-amber-50 p-3 text-xs text-amber-800 dark:border-amber-900/50 dark:bg-amber-900/20 dark:text-amber-200">
         <div class="font-bold">{{ t('admin.ops.settings.validation.title') }}</div>
diff --git a/frontend/src/views/admin/orders/AdminOrdersView.vue b/frontend/src/views/admin/orders/AdminOrdersView.vue
index c467f086af0e..b2a9d82e230e 100644
--- a/frontend/src/views/admin/orders/AdminOrdersView.vue
+++ b/frontend/src/views/admin/orders/AdminOrdersView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-4">
+    <div class="space-y-4" data-ui="orders-page">
       <!-- Filters -->
       <div class="card p-4">
         <div class="flex flex-wrap items-center gap-3">
diff --git a/frontend/src/views/admin/orders/AdminPaymentDashboardView.vue b/frontend/src/views/admin/orders/AdminPaymentDashboardView.vue
index 70fe95962aeb..114f2ff02ab4 100644
--- a/frontend/src/views/admin/orders/AdminPaymentDashboardView.vue
+++ b/frontend/src/views/admin/orders/AdminPaymentDashboardView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div class="space-y-6" data-ui="payment-dashboard">
       <!-- Header with Day Switcher -->
       <div class="flex items-center justify-end">
         <div class="flex items-center gap-2">
diff --git a/frontend/src/views/admin/orders/AdminPaymentPlansView.vue b/frontend/src/views/admin/orders/AdminPaymentPlansView.vue
index 93a5303a7621..2defa10eed97 100644
--- a/frontend/src/views/admin/orders/AdminPaymentPlansView.vue
+++ b/frontend/src/views/admin/orders/AdminPaymentPlansView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-4">
+    <div class="space-y-4" data-ui="plans-page">
       <!-- Actions -->
       <div class="flex items-center justify-end gap-2">
         <button @click="loadPlans" :disabled="plansLoading" class="btn btn-secondary" :title="t('common.refresh')">
@@ -12,7 +12,7 @@
       <!-- Plans Table -->
       <DataTable :columns="planColumns" :data="plans" :loading="plansLoading">
         <template #cell-name="{ value, row }">
-          <span class="text-sm font-medium" :class="getPlanNameClass(row.group_id)">{{ value }}</span>
+          <span class="text-sm font-medium" :class="getPlanNameClass(row.group_id)" data-ui="platform-text">{{ value }}</span>
         </template>
         <template #cell-group_id="{ value }">
           <span v-if="isGroupMissing(value)" class="text-sm">
diff --git a/frontend/src/views/admin/orders/PlanEditDialog.vue b/frontend/src/views/admin/orders/PlanEditDialog.vue
index 7535ebc56097..23d2ed395157 100644
--- a/frontend/src/views/admin/orders/PlanEditDialog.vue
+++ b/frontend/src/views/admin/orders/PlanEditDialog.vue
@@ -10,11 +10,11 @@
           <label class="input-label">{{ t('payment.admin.group') }} <span class="text-red-500">*</span></label>
           <Select v-model="planForm.group_id" :options="groupOptions" :placeholder="t('payment.admin.selectGroup')" class="w-full">
             <template #selected="{ option }">
-              <span v-if="option?.platform" :class="platformTextClass(String(option.platform))">{{ option.label }}</span>
+              <span v-if="option?.platform" :class="platformTextClass(String(option.platform))" data-ui="platform-text">{{ option.label }}</span>
               <span v-else>{{ option?.label || t('payment.admin.selectGroup') }}</span>
             </template>
             <template #option="{ option, selected }">
-              <span class="flex-1 truncate text-left" :class="option.platform ? platformTextClass(String(option.platform)) : ''">{{ option.label }}</span>
+              <span class="flex-1 truncate text-left" :class="option.platform ? platformTextClass(String(option.platform)) : ''" data-ui="platform-text">{{ option.label }}</span>
               <Icon v-if="selected" name="check" size="sm" class="text-primary-500" :stroke-width="2" />
             </template>
           </Select>
diff --git a/frontend/src/views/user/AffiliateView.vue b/frontend/src/views/user/AffiliateView.vue
index fdf0a35d66ad..7f5575904ee2 100644
--- a/frontend/src/views/user/AffiliateView.vue
+++ b/frontend/src/views/user/AffiliateView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div data-ui="user-affiliate" class="space-y-6">
       <div v-if="loading" class="flex justify-center py-12">
         <div
           class="h-8 w-8 animate-spin rounded-full border-2 border-primary-500 border-t-transparent"
diff --git a/frontend/src/views/user/AvailableChannelsView.vue b/frontend/src/views/user/AvailableChannelsView.vue
index a6c9ebc89b9a..7ed6d61b59f6 100644
--- a/frontend/src/views/user/AvailableChannelsView.vue
+++ b/frontend/src/views/user/AvailableChannelsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="user-available-channels">
       <template #filters>
         <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
           <div class="flex flex-1 flex-wrap items-center gap-3">
diff --git a/frontend/src/views/user/BatchImageGuideView.vue b/frontend/src/views/user/BatchImageGuideView.vue
index 4cedca994918..f807476284f0 100644
--- a/frontend/src/views/user/BatchImageGuideView.vue
+++ b/frontend/src/views/user/BatchImageGuideView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="user-batch-image">
       <template #filters>
         <div class="flex flex-col gap-3">
           <div class="flex flex-col gap-3 2xl:flex-row 2xl:items-center 2xl:justify-between">
diff --git a/frontend/src/views/user/ChannelStatusV2View.vue b/frontend/src/views/user/ChannelStatusV2View.vue
index 18dacb563373..cb2e5f92a5b4 100644
--- a/frontend/src/views/user/ChannelStatusV2View.vue
+++ b/frontend/src/views/user/ChannelStatusV2View.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6 pb-12">
+    <div class="space-y-6 pb-12" data-ui="monitor-v2">
       <!-- Ops-style elevated shell: title toolbar + filters (mirrors OpsDashboardHeader) -->
       <section
         class="card sticky top-0 z-20 !rounded-3xl !border-0 p-0 shadow-sm ring-1 ring-gray-900/5 backdrop-blur-sm dark:!bg-dark-800 dark:ring-dark-700 supports-[backdrop-filter]:bg-white/95 dark:supports-[backdrop-filter]:bg-dark-800/95"
diff --git a/frontend/src/views/user/DashboardView.vue b/frontend/src/views/user/DashboardView.vue
index 815e9051821c..e2f825f53169 100644
--- a/frontend/src/views/user/DashboardView.vue
+++ b/frontend/src/views/user/DashboardView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div class="space-y-6" data-ui="user-dashboard">
       <div v-if="loading" class="flex items-center justify-center py-12"><LoadingSpinner /></div>
       <template v-else-if="stats">
         <UserDashboardStats :stats="stats" :balance="user?.balance || 0" :is-simple="authStore.isSimpleMode" :platform-quotas="platformQuotas" />
diff --git a/frontend/src/views/user/KeysView.vue b/frontend/src/views/user/KeysView.vue
index 42690cb66a9a..c2491635eac5 100644
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -512,6 +512,7 @@
                   <span
                     v-for="platform in KEY_GROUP_PROVIDER_ICONS[provider.value]"
                     :key="platform"
+                    data-ui="platform-chip"
                     class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md"
                     :class="platformBadgeLightClass(platform)"
                   >
diff --git a/frontend/src/views/user/PaymentView.vue b/frontend/src/views/user/PaymentView.vue
index 13e2b37dd409..9a81fe8b54e0 100644
--- a/frontend/src/views/user/PaymentView.vue
+++ b/frontend/src/views/user/PaymentView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="mx-auto max-w-4xl space-y-6">
+    <div data-ui="user-purchase" class="mx-auto max-w-4xl space-y-6">
       <div v-if="loading" class="flex items-center justify-center py-20">
         <div class="h-8 w-8 animate-spin rounded-full border-4 border-primary-500 border-t-transparent"></div>
       </div>
@@ -104,7 +104,7 @@
               <div class="card p-5">
                 <!-- Header: platform badge + plan name -->
                 <div class="mb-3 flex flex-wrap items-center gap-2">
-                  <span :class="['rounded-md border px-2 py-0.5 text-xs font-medium', planBadgeClass]">
+                  <span data-ui="platform-chip" :class="['rounded-md border px-2 py-0.5 text-xs font-medium', planBadgeClass]">
                     {{ platformLabel(selectedPlan.group_platform || '') }}
                   </span>
                   <h3 class="text-lg font-bold text-gray-900 dark:text-white">{{ selectedPlan.name }}</h3>
@@ -200,11 +200,11 @@
                 <div class="space-y-2">
                   <div v-for="sub in activeSubscriptions" :key="sub.id"
                     class="flex items-center gap-3 rounded-xl border border-gray-100 bg-white px-3 py-2 dark:border-dark-700 dark:bg-dark-800">
-                    <div :class="['h-6 w-1 shrink-0 rounded-full', platformAccentBarClass(sub.group?.platform || '')]" />
+                    <div data-ui="platform-text" :class="['h-6 w-1 shrink-0 rounded-full', platformAccentBarClass(sub.group?.platform || '')]" />
                     <div class="min-w-0 flex-1">
                       <div class="flex items-center gap-1.5">
                         <span class="truncate text-xs font-semibold text-gray-900 dark:text-white">{{ sub.group?.name || t('payment.groupFallback', { id: sub.group_id }) }}</span>
-                        <span :class="['shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-medium', platformBadgeLightClass(sub.group?.platform || '')]">{{ platformLabel(sub.group?.platform || '') }}</span>
+                        <span data-ui="platform-chip" :class="['shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-medium', platformBadgeLightClass(sub.group?.platform || '')]">{{ platformLabel(sub.group?.platform || '') }}</span>
                       </div>
                       <div class="flex flex-wrap gap-x-3 text-[11px] text-gray-400 dark:text-gray-500">
                         <span>{{ t('payment.planCard.rate') }}: ×{{ sub.group?.rate_multiplier ?? 1 }}</span>
diff --git a/frontend/src/views/user/RedeemView.vue b/frontend/src/views/user/RedeemView.vue
index 0e9bcc3b0c80..3731f1e014ce 100644
--- a/frontend/src/views/user/RedeemView.vue
+++ b/frontend/src/views/user/RedeemView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="mx-auto max-w-2xl space-y-6">
+    <div data-ui="user-redeem" class="mx-auto max-w-2xl space-y-6">
       <!-- Current Balance Card -->
       <div class="card overflow-hidden">
         <div class="bg-gradient-to-br from-primary-500 to-primary-600 px-6 py-8 text-center">
diff --git a/frontend/src/views/user/SubscriptionsView.vue b/frontend/src/views/user/SubscriptionsView.vue
index 7b7a71d3cb91..776dfe73c4cd 100644
--- a/frontend/src/views/user/SubscriptionsView.vue
+++ b/frontend/src/views/user/SubscriptionsView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div data-ui="user-subscriptions" class="space-y-6">
       <!-- Loading State -->
       <div v-if="loading" class="flex justify-center py-12">
         <div
@@ -36,13 +36,13 @@
             class="flex items-center justify-between border-b border-gray-100 p-4 dark:border-dark-700"
           >
             <div class="flex items-center gap-3">
-              <div :class="['h-1.5 w-1.5 shrink-0 rounded-full', platformAccentDotClass(subscription.group?.platform || '')]" />
+              <div data-ui="platform-text" :class="['h-1.5 w-1.5 shrink-0 rounded-full', platformAccentDotClass(subscription.group?.platform || '')]" />
               <div>
                 <div class="flex items-center gap-2">
                   <h3 class="font-semibold text-gray-900 dark:text-white">
                     {{ subscription.group?.name || `Group #${subscription.group_id}` }}
                   </h3>
-                  <span :class="['rounded-md border px-2 py-0.5 text-[11px] font-medium', platformBadgeClass(subscription.group?.platform || '')]">
+                  <span data-ui="platform-chip" :class="['rounded-md border px-2 py-0.5 text-[11px] font-medium', platformBadgeClass(subscription.group?.platform || '')]">
                     {{ platformLabel(subscription.group?.platform || '') }}
                   </span>
                 </div>
diff --git a/frontend/src/views/user/UsageView.vue b/frontend/src/views/user/UsageView.vue
index c1882480696c..c484d5505498 100644
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-6">
+    <div class="space-y-6" data-ui="user-usage">
       <UsageStatsCards :stats="usageStats" :show-account-cost="false" :strike-standard-cost="true" />
 
       <div class="space-y-4">
diff --git a/frontend/src/views/user/UserOrdersView.vue b/frontend/src/views/user/UserOrdersView.vue
index 003357a09883..6accd62c2d38 100644
--- a/frontend/src/views/user/UserOrdersView.vue
+++ b/frontend/src/views/user/UserOrdersView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <div class="space-y-4">
+    <div data-ui="user-orders" class="space-y-4">
       <!-- Filters -->
       <div class="card p-4">
         <div class="flex flex-wrap items-center gap-3">

From a6673f87ab2ad5e4698f99b496af3b76a54adf7e Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Tue, 29 Sep 2026 09:30:24 +0800
Subject: [PATCH 05/11] wip(ui-el): final review fixes (V1/V2/V3)

Shared: recipe dark branches carry colours only; header descriptions wrap;
date inputs on the control tiers; charts get console defaults before
mount; settings-tab hover icon; hand-written dialogs take Modal metrics;
table details (checkbox centre, empty row line, head rules, sticky edge,
unframed pagination, dialog row heights, group dialog footers).
Pages: duplicate titles, toolbars, segmented sizes, table frames and
heads, empty states, mobile fixes. Select opens under labelled filter
pills (theme on only; data-ui="select-anchor").

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../components/admin/usage/UsageFilters.vue   |  20 +-
 frontend/src/components/common/Select.vue     |   9 +-
 .../user/dashboard/UserDashboardCharts.vue    |   2 +-
 .../src/composables/usePresentationColors.ts  |   6 +
 frontend/src/style.css                        |  75 ++-
 frontend/src/styles/console/controls.css      |  21 +
 frontend/src/styles/console/data.css          |  42 +-
 frontend/src/styles/console/overlays.css      |  71 ++-
 .../src/styles/console/pages/accounts.css     |  97 +++-
 .../styles/console/pages/dashboard-usage.css  |  14 +
 .../src/styles/console/pages/ops-channels.css | 447 ++++++++++++++++--
 .../console/pages/settings-ops-public.css     | 119 ++++-
 frontend/src/styles/console/pages/user.css    |  90 +++-
 .../pages/users-groups-proxies-keys.css       |  42 +-
 frontend/src/styles/console/shell.css         |  44 +-
 frontend/src/views/admin/DashboardView.vue    |   2 +-
 frontend/src/views/admin/UsageView.vue        |   2 +-
 frontend/src/views/user/UsageView.vue         |  24 +-
 18 files changed, 973 insertions(+), 154 deletions(-)

diff --git a/frontend/src/components/admin/usage/UsageFilters.vue b/frontend/src/components/admin/usage/UsageFilters.vue
index 5e69ee294eb0..525e65368066 100644
--- a/frontend/src/components/admin/usage/UsageFilters.vue
+++ b/frontend/src/components/admin/usage/UsageFilters.vue
@@ -79,7 +79,7 @@
         </div>
 
         <!-- Model Filter -->
-        <div class="w-full sm:w-auto sm:min-w-[220px]">
+        <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[220px]">
           <label class="input-label">{{ t('usage.model') }}</label>
           <Select v-model="filters.model" :options="modelOptions" searchable @change="emitChange" />
         </div>
@@ -122,54 +122,54 @@
         </div>
 
         <!-- Request Type Filter (usage only) -->
-        <div v-if="mode !== 'errors'" class="w-full sm:w-auto sm:min-w-[180px]">
+        <div v-if="mode !== 'errors'" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[180px]">
           <label class="input-label">{{ t('usage.type') }}</label>
           <Select v-model="filters.request_type" :options="requestTypeOptions" @change="emitChange" />
         </div>
 
         <!-- Native compaction is independent of the transport request type. -->
-        <div v-if="mode !== 'errors'" class="w-full sm:w-auto sm:min-w-[180px]">
+        <div v-if="mode !== 'errors'" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[180px]">
           <label class="input-label">{{ t('usage.compactionFilter') }}</label>
           <Select v-model="filters.native_compaction_v2" :options="compactionOptions" @change="emitChange" />
         </div>
 
         <!-- Billing Type Filter (usage only) -->
-        <div v-if="mode !== 'errors'" class="w-full sm:w-auto sm:min-w-[200px]">
+        <div v-if="mode !== 'errors'" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[200px]">
           <label class="input-label">{{ t('admin.usage.billingType') }}</label>
           <Select v-model="filters.billing_type" :options="billingTypeOptions" @change="emitChange" />
         </div>
 
         <!-- Billing Mode Filter (usage only；用户排行的 user-breakdown 接口不支持该维度) -->
-        <div v-if="mode === 'usage'" class="w-full sm:w-auto sm:min-w-[200px]">
+        <div v-if="mode === 'usage'" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[200px]">
           <label class="input-label">{{ t('admin.usage.billingMode') }}</label>
           <Select v-model="filters.billing_mode" :options="billingModeOptions" @change="emitChange" />
         </div>
 
-        <div v-if="mode === 'usage'" class="w-full sm:w-auto sm:min-w-[220px]">
+        <div v-if="mode === 'usage'" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[220px]">
           <label class="input-label">{{ t('admin.usage.upstreamModelAudit') }}</label>
           <Select v-model="filters.upstream_model_mismatch" :options="upstreamModelMismatchOptions" @change="emitChange" />
         </div>
 
         <!-- Error Phase Filter (errors only) -->
-        <div v-if="mode === 'errors'" class="w-full sm:w-auto sm:min-w-[180px]">
+        <div v-if="mode === 'errors'" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[180px]">
           <label class="input-label">{{ t('admin.ops.errorLog.type') }}</label>
           <Select v-model="filters.error_phase" :options="errorPhaseOptions" @change="emitChange" />
         </div>
 
         <!-- Error Category Filter (errors only) -->
-        <div v-if="mode === 'errors'" class="w-full sm:w-auto sm:min-w-[180px]">
+        <div v-if="mode === 'errors'" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[180px]">
           <label class="input-label">{{ t('usage.errors.category') }}</label>
           <Select v-model="filters.error_category" :options="errorCategoryOptions" @change="emitChange" />
         </div>
 
         <!-- Status Code Filter (errors only) -->
-        <div v-if="mode === 'errors'" class="w-full sm:w-auto sm:min-w-[180px]">
+        <div v-if="mode === 'errors'" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[180px]">
           <label class="input-label">{{ t('admin.ops.errorLog.status') }}</label>
           <Select v-model="filters.status_code" :options="statusCodeOptions" @change="emitChange" />
         </div>
 
         <!-- Group Filter -->
-        <div class="w-full sm:w-auto sm:min-w-[200px]">
+        <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[200px]">
           <label class="input-label">{{ t('admin.usage.group') }}</label>
           <Select v-model="filters.group_id" :options="groupOptions" searchable @change="emitChange" />
         </div>
diff --git a/frontend/src/components/common/Select.vue b/frontend/src/components/common/Select.vue
index 99233bce0261..d6ebb1a00d7c 100644
--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -346,10 +346,17 @@ const handleOptionMouseEnter = (option: any, index: number) => {
   focusedIndex.value = index
 }
 
+// Console theme (html.flat-theme) only: a labelled filter pill that draws this select inside itself carries
+// data-ui~="select-anchor", and the list opens under the pill (its left edge, at least its width). Theme off: the
+// select's own root, as upstream.
+const dropdownAnchor = (container: HTMLElement): HTMLElement =>
+  (document.documentElement.classList.contains('flat-theme') &&
+    container.closest<HTMLElement>('[data-ui~="select-anchor"]')) || container
+
 // Update trigger rect periodically while open to follow scroll/resize
 const updateTriggerRect = () => {
   if (containerRef.value) {
-    triggerRect.value = containerRef.value.getBoundingClientRect()
+    triggerRect.value = dropdownAnchor(containerRef.value).getBoundingClientRect()
   }
 }
 
diff --git a/frontend/src/components/user/dashboard/UserDashboardCharts.vue b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
index 20cb08052c6e..c2639c7856fb 100644
--- a/frontend/src/components/user/dashboard/UserDashboardCharts.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
@@ -10,7 +10,7 @@
         <button @click="$emit('refresh')" :disabled="loading" class="btn btn-secondary">
           {{ t('common.refresh') }}
         </button>
-        <div class="ml-auto flex items-center gap-2">
+        <div class="ml-auto flex items-center gap-2" data-ui="select-anchor">
           <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.granularity') }}:</span>
           <div class="w-28">
             <Select :model-value="granularity" :options="[{value:'day', label:t('dashboard.day')}, {value:'hour', label:t('dashboard.hour')}]" @update:model-value="$emit('update:granularity', $event)" @change="$emit('granularityChange')" />
diff --git a/frontend/src/composables/usePresentationColors.ts b/frontend/src/composables/usePresentationColors.ts
index f2def149cf17..4b79e7bd8ac3 100644
--- a/frontend/src/composables/usePresentationColors.ts
+++ b/frontend/src/composables/usePresentationColors.ts
@@ -355,6 +355,12 @@ export function usePresentationColors() {
     if (changed) colors.value = withPalette(next, marks, inks)
   }
   const schedule = () => { if (active && !queued) { queued = true; queueMicrotask(read) } }
+  // The first read runs in setup: a chart in this component's template (vue-chartjs builds it in its own onMounted,
+  // which runs before this component's) is then created with the console defaults instead of Chart.js' own.
+  if (typeof document !== 'undefined') {
+    active = true
+    read()
+  }
   onMounted(() => {
     active = true
     read()
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 129aa03e17a7..9e15ef93224e 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -798,6 +798,9 @@
  * - Every selector starts with `:where(.flat-theme)`, so the theme switched
  *   off renders upstream. Upstream's `dark:` variants are restated with the
  *   same specificity: `:where(.flat-theme) .btn-secondary:is(.dark *)`.
+ *   A dark restatement carries colours only (color, background, border
+ *   colour, shadow): at 0,2,0 it beats page utilities (`input pl-7`) in dark
+ *   only, so box, type and motion stay in the selector without `.dark`.
  * - Values come from styles/console/tokens.css. Everything that is not a
  *   recipe restatement lives in styles/console/*.css (plain CSS, no @layer).
  * - Overlay recipes (.modal-*, .dropdown*, .toast*, .dialog-*) are restated in
@@ -983,8 +986,7 @@
    * outline. Its focus (an accent edge) is drawn in controls.css. The empty
    * field without a placeholder takes the 3:1 form-control line in
    * behaviour.css (B3.2). */
-  :where(.flat-theme) .input,
-  :where(.flat-theme) .input:is(.dark *) {
+  :where(.flat-theme) .input {
     border-radius: var(--ui-radius-md);
     border-color: rgb(var(--ui-line-strong));
     background-color: rgb(var(--ui-surface));
@@ -998,19 +1000,33 @@
     transition-timing-function: var(--ui-ease);
   }
 
-  :where(.flat-theme) .input::placeholder,
-  :where(.flat-theme) .input:is(.dark *)::placeholder {
+  :where(.flat-theme) .input:is(.dark *) {
+    border-color: rgb(var(--ui-line-strong));
+    background-color: rgb(var(--ui-surface));
+    color: rgb(var(--ui-ink));
+    box-shadow: none;
+  }
+
+  :where(.flat-theme) .input::placeholder {
     color: rgb(var(--ui-faint));
     opacity: 1;
   }
 
-  :where(.flat-theme) .input:disabled,
-  :where(.flat-theme) .input:disabled:is(.dark *) {
+  :where(.flat-theme) .input:is(.dark *)::placeholder {
+    color: rgb(var(--ui-faint));
+  }
+
+  :where(.flat-theme) .input:disabled {
     cursor: not-allowed;
     background-color: rgb(var(--ui-subtle));
     color: rgb(var(--ui-muted));
   }
 
+  :where(.flat-theme) .input:disabled:is(.dark *) {
+    background-color: rgb(var(--ui-subtle));
+    color: rgb(var(--ui-muted));
+  }
+
   :where(.flat-theme) textarea.input {
     padding-top: 0.4375rem;
     padding-bottom: 0.4375rem;
@@ -1018,8 +1034,7 @@
 
   /* the native select is the reference's house-select: 13px / 600 values, a
      12px chevron 9px from the right edge, the focus line on hover */
-  :where(.flat-theme) select.input:not([multiple]):not([size]),
-  :where(.flat-theme) select.input:not([multiple]):not([size]):is(.dark *) {
+  :where(.flat-theme) select.input:not([multiple]):not([size]) {
     appearance: none;
     cursor: pointer;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e8e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
@@ -1048,8 +1063,7 @@
 
   /* the field label is the reference's mono label (the sign-in field label:
      Geist Mono 10/15, 600, 0.12em, uppercase; 11/16 in the Chinese interface) */
-  :where(.flat-theme) .input-label,
-  :where(.flat-theme) .input-label:is(.dark *) {
+  :where(.flat-theme) .input-label {
     margin-bottom: 0.5rem;
     font-family: var(--ui-font-mono);
     font-size: var(--ui-label-size);
@@ -1060,14 +1074,21 @@
     color: rgb(var(--ui-label));
   }
 
-  :where(.flat-theme) .input-hint,
-  :where(.flat-theme) .input-hint:is(.dark *) {
+  :where(.flat-theme) .input-label:is(.dark *) {
+    color: rgb(var(--ui-label));
+  }
+
+  :where(.flat-theme) .input-hint {
     margin-top: 0.375rem;
     font-size: 0.75rem;
     line-height: 1.125rem;
     color: rgb(var(--ui-muted));
   }
 
+  :where(.flat-theme) .input-hint:is(.dark *) {
+    color: rgb(var(--ui-muted));
+  }
+
   :where(.flat-theme) .input-error-text {
     margin-top: 0.375rem;
     font-size: 0.75rem;
@@ -1080,8 +1101,7 @@
    * a 1px structural frame on the surface, radius 8, 2px inset; segments
    * 14px / 6px, 12.5px / 600, muted, ink on hover; the current one is ink
    * with on-ink text, fading in 200ms (upstream has no thumb to slide). */
-  :where(.flat-theme) .tabs,
-  :where(.flat-theme) .tabs:is(.dark *) {
+  :where(.flat-theme) .tabs {
     gap: 0;
     border: 1px solid rgb(var(--ui-line));
     border-radius: var(--ui-radius-lg);
@@ -1089,8 +1109,12 @@
     padding: 2px;
   }
 
-  :where(.flat-theme) .tab,
-  :where(.flat-theme) .tab:is(.dark *) {
+  :where(.flat-theme) .tabs:is(.dark *) {
+    border-color: rgb(var(--ui-line));
+    background-color: rgb(var(--ui-surface));
+  }
+
+  :where(.flat-theme) .tab {
     border-radius: var(--ui-radius-md);
     padding: 0.375rem 0.875rem;
     font-size: 0.78125rem;
@@ -1102,6 +1126,10 @@
     transition-timing-function: var(--ui-ease-out);
   }
 
+  :where(.flat-theme) .tab:is(.dark *) {
+    color: rgb(var(--ui-muted));
+  }
+
   :where(.flat-theme) .tab:hover,
   :where(.flat-theme) .tab:hover:is(.dark *) {
     color: rgb(var(--ui-ink));
@@ -1119,14 +1147,17 @@
   /* ---------------------------------------------------------------- switch
    * The reference settings Toggle: 34 x 20, a 16px knob 2px in. On = ink.
    * Off = the 3:1 form-control line (the reference's ink at 20 % is 1.6:1). */
-  :where(.flat-theme) .switch,
-  :where(.flat-theme) .switch:is(.dark *) {
+  :where(.flat-theme) .switch {
     height: 1.25rem;
     width: 2.125rem;
     background-color: rgb(var(--ui-control-line));
     transition-duration: var(--ui-duration);
   }
 
+  :where(.flat-theme) .switch:is(.dark *) {
+    background-color: rgb(var(--ui-control-line));
+  }
+
   :where(.flat-theme) .switch-active,
   :where(.flat-theme) .switch-active:is(.dark *) {
     background-color: rgb(var(--ui-ink));
@@ -1165,10 +1196,14 @@
    * proxy addresses) are the reference's value chip (REF-CONSOLE §8.7 prompt
    * chip, §8.15): Geist Mono in ink-soft on the subtle fill, radius 4. The
    * accent is not a code colour (preview decision D2). */
-  :where(.flat-theme) .code,
-  :where(.flat-theme) .code:is(.dark *) {
+  :where(.flat-theme) .code {
     border-radius: var(--ui-radius-sm);
     background-color: rgb(var(--ui-subtle));
     color: rgb(var(--ui-ink-soft));
   }
+
+  :where(.flat-theme) .code:is(.dark *) {
+    background-color: rgb(var(--ui-subtle));
+    color: rgb(var(--ui-ink-soft));
+  }
 }
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index bf9d752a7cdd..c751606cfd4e 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -357,6 +357,14 @@ html.flat-theme .date-picker-apply.date-picker-apply:hover {
   color: rgb(var(--ui-on-ink));
 }
 
+/* 4.3b Native date and time fields (date, datetime-local, time, month, week) keep the control heights: Chromium pads
+   their inner field row 1px top and bottom, so they stood 2px taller than the text field beside them (32 in a 30px
+   toolbar row, 36 among 34px form fields; the ops custom range 35.5 over its 34px minimum). (final review V2-07) */
+html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"])::-webkit-datetime-edit-fields-wrapper {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 /* 4.4 Toolbar density (integration review): a toolbar row holds one control height. The table pages' fixed rows
    (actions, filters, pagination) and a horizontal row that holds a .btn (the dashboards' time-range bar) draw their
    fields and their Select / DateRangePicker triggers at the 30px of the search field, the filter pills and the
@@ -367,6 +375,13 @@ html.flat-theme :is(.table-page-layout > .layout-section-fixed, [class~="flex"][
   padding-bottom: 0.265625rem;
 }
 
+/* 4.4b The same in a dialog: a row that holds a button (余额记录's type filter beside 充值 / 退款, the 专属倍率 / 专属 RPM add
+   rows, bottom-aligned) draws its fields at the button's 30px (final review V1-10) */
+html.flat-theme .modal-body [class~="flex"]:is([class~="items-center"], [class~="items-end"]):not([class~="flex-col"]):has(> button) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
 /* ================================================================== 5 · switches */
 
 /* The reference settings Toggle (REF-CONSOLE §8.4): 34 x 20, a 16px knob 2px in, 150ms; on = the accent of its
@@ -634,6 +649,12 @@ html.flat-theme .settings-tab .settings-tab-icon.settings-tab-icon {
   color: inherit;
 }
 
+/* hovered or keyboard-focused, the icon still follows the tab's text: the view's scoped dark hover colour (gray-200,
+   0,5,0) left it #e5e5e5 on the current tab's #f2f2f2 fill, 1.13:1 (final review V2-24) */
+html.flat-theme .settings-tab.settings-tab:is(:hover, :focus-visible) .settings-tab-icon.settings-tab-icon.settings-tab-icon {
+  color: inherit;
+}
+
 html.flat-theme .settings-tab .settings-tab-icon > svg {
   width: 0.875rem;
   height: 0.875rem;
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index 636dbd675a64..d874d33f54b1 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -330,9 +330,16 @@ html.flat-theme .table-wrapper.is-scrollable .sticky-col-left-second::after {
   background: rgb(var(--ui-line));
 }
 
+/* the sticky actions column keeps its 1px line and gains a 12px soft edge (ink at 5 %; at 7 % 链接失败 fell to 4.49:1),
+   so a value cut at rest reads as running on under the column (IP 管理 有效期 read "2026/10/2") (final review V1-12) */
 html.flat-theme .table-wrapper.is-scrollable .sticky-col-right::before {
-  width: 1px;
-  background: rgb(var(--ui-line));
+  width: 12px;
+  background: linear-gradient(to left, rgb(var(--ui-ink) / 0.05), rgb(var(--ui-ink) / 0));
+  box-shadow: inset -1px 0 0 rgb(var(--ui-line));
+}
+
+html.flat-theme.dark .table-wrapper.is-scrollable .sticky-col-right::before {
+  background: linear-gradient(to left, rgb(0 0 0 / 0.35), rgb(0 0 0 / 0));
 }
 
 /* DataTable's own selection column and a `select` column: fixed width, so the second sticky column starts where
@@ -352,10 +359,20 @@ html.flat-theme .table-wrapper .table-body > tr > td[class~="w-11"]:first-child
   text-align: left;
 }
 
+/* the select column's lone checkbox (DataTable's own column: 用户; a page's `select` column: 兑换码, IP, 订阅) sat
+   inline on the text baseline, 3px above the row's centre; as a block the cell's vertical-align centres it, the left
+   inset unchanged (the accounts table's label wrapper is centred already) (final review V1-09) */
+html.flat-theme .table-wrapper :is(.table-header > tr > th, .table-body > tr > td):is([class~="w-11"]:first-child, [data-column="select"]) > input[type="checkbox"]:only-child {
+  display: block;
+  margin: 0;
+}
+
 /* Empty: the reference's dashed frame (REF §8.7: cell inset 32 / 16, dashed --ui-line-strong, 8px radius, 240px
-   tall; title 14/500 ink-soft). Upstream's inbox glyph stays, at the reference's icon size. */
+   tall; title 14/500 ink-soft), with no row line under it (the reference's last:border-b-0; final review V1-11).
+   Upstream's inbox glyph stays, at the reference's icon size. */
 html.flat-theme .table-wrapper .table-body > tr > td[colspan]:only-child:not([style]) {
   padding: 32px var(--ui-table-edge-x);
+  border-bottom-width: 0;
 }
 
 html.flat-theme .table-wrapper .table-body > tr > td[colspan]:only-child:not([style]) > div[class~="flex-col"] {
@@ -507,6 +524,12 @@ html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scr
   border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
 }
 
+/* below unframed content (the accounts card view) the pagination is a bar of its own (final review V1-07) */
+html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scroll-container-unframed) + .layout-section-fixed > [data-ui="pagination"] {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+}
+
 /* ================================================================== 3 · plain tables */
 
 /* Upstream's hand-built tables with a grey header band (thead.bg-gray-50: ops, rankings, dialogs): the header reads
@@ -516,9 +539,10 @@ html.flat-theme table > thead[class~="bg-gray-50"] {
   background-color: transparent;
 }
 
-/* the header draws the line under itself (it may stick), so the body's own top line is dropped; a white body is the
-   surface in dark mode too (upstream: dark-900, a step below the card) */
-html.flat-theme table > thead[class~="bg-gray-50"] + tbody {
+/* the header draws the line under itself (it may stick), so the body's own top line is dropped, also where the table
+   divides its sections (divide-y, 0,3,0: the user ranking's 2px) (final review V1-08); a white body is the surface
+   in dark mode too (upstream: dark-900, a step below the card) */
+html.flat-theme table > thead[class~="bg-gray-50"] + tbody:not([hidden]) {
   border-top-width: 0;
 }
 
@@ -564,6 +588,12 @@ html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text
   vertical-align: bottom;
 }
 
+/* the sticky header draws the line under itself, so the first row's own top line (upstream's border-t on every row)
+   goes: one 1px line under the header, as under every other table's (final review V1-08) */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:first-child {
+  border-top-width: 0;
+}
+
 html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td {
   padding: 8px;
   border-color: rgb(var(--ui-line));
diff --git a/frontend/src/styles/console/overlays.css b/frontend/src/styles/console/overlays.css
index d234383de106..57059d86aa39 100644
--- a/frontend/src/styles/console/overlays.css
+++ b/frontend/src/styles/console/overlays.css
@@ -747,6 +747,12 @@ html.flat-theme .modal-footer {
   background-color: rgb(var(--ui-surface));
 }
 
+/* a footer slot whose button row brings upstream's own top inset (the 分组 dialogs' pt-4) sat 16px low in a 71px
+   footer: the row is the footer's content, 55px with the buttons centred like every Modal's (final review V1-16) */
+html.flat-theme .modal-footer > div[class~="flex"]:only-child:is([class~="pt-2"], [class~="pt-3"], [class~="pt-4"]) {
+  padding-top: 0;
+}
+
 /* 3.6 The confirm dialog: message 13/21 ink-soft; its two utility buttons restated as the .btn recipes (controls'
    values: 30px, 0 12px, 13/19.5 600, radius 6, 1px edge; cancel = default, confirm = primary ink, a danger confirm
    = destructive). */
@@ -816,9 +822,9 @@ html.flat-theme :is([data-ui="confirm-cancel"], [data-ui="confirm-ok"]):disabled
   cursor: not-allowed;
 }
 
-/* 3.7 Utility-built dialogs without a header strip (TOTP, passkey, backup / redeem / subscription guides, payment
-   renewal): the reference's padded panel (ReadScope, login modal): title 17/600 tight ink, close 28px ghost glyph
-   button (muted -> ink on the subtle fill). */
+/* 3.7 Utility-built dialogs without a header strip (TOTP, passkey, payment renewal; the ones led by an h2 take the
+   Modal's parts, 3.7b): the reference's padded panel (ReadScope, login modal): title 17/600 tight ink, close 28px
+   ghost glyph button (muted -> ink on the subtle fill). */
 html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > :is(h2, h3):is([class~="text-lg"], [class~="text-xl"]),
 html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > div:first-child > :is(h2, h3):is([class~="text-lg"], [class~="text-xl"]) {
   font-size: 17px;
@@ -850,6 +856,65 @@ html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="
   height: 15px;
 }
 
+/* 3.7b Utility-built dialogs led by an h2 (兑换码 生成 / 批量修改, 订阅 使用指南, 备份 R2 教程 / 分卷下载) are drawn as the
+   Modal, in the numbers of the settings page's inline dialogs (settings-ops-public.css 10b): body 16 x 18; the title
+   as the header strip, 14 / 20 600 ink at 14 x 18 on the structural line, on the Modal's 28px row (57px); a close
+   button the Modal's 28px framed close in that strip; the closing button row as the footer strip, 12 x 18 on the
+   structural line, its small close button at the control height (55px, the Modal's footer). The h3- and icon-led ones
+   (TOTP, passkey, payment renewal, the settings page's) keep 3.7 / 10b. (final review V1-01) */
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) {
+  padding: var(--ui-dialog-body-y) var(--ui-dialog-x);
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > h2 {
+  display: flex;
+  align-items: center;
+  min-height: calc(28px + 2 * var(--ui-dialog-head-y) + 1px);
+  margin: calc(-1 * var(--ui-dialog-body-y)) calc(-1 * var(--ui-dialog-x)) var(--ui-dialog-body-y);
+  border-bottom: 1px solid rgb(var(--ui-line));
+  padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2):has(> button[class~="absolute"][class~="right-4"][class~="top-4"]) > h2 {
+  padding-right: calc(var(--ui-dialog-x) + 36px);
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > button[class~="absolute"][class~="right-4"][class~="top-4"] {
+  top: var(--ui-dialog-head-y);
+  right: var(--ui-dialog-x);
+  border: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > button[class~="absolute"][class~="right-4"][class~="top-4"]:hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > button[class~="absolute"][class~="right-4"][class~="top-4"]:focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > form > div[class~="justify-end"]:last-child,
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > div:is([class~="justify-end"], [class~="text-right"]):last-child {
+  margin: var(--ui-dialog-body-y) calc(-1 * var(--ui-dialog-x)) calc(-1 * var(--ui-dialog-body-y));
+  border-top: 1px solid rgb(var(--ui-line));
+  padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
+}
+
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > div[class~="text-right"]:last-child > .btn-sm {
+  min-height: var(--ui-control-h);
+  padding: 0.265625rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+}
+
 /* 3.8 Motion: the scrim fades in 200ms; the panel settles on the reference's 450ms panel curve from 98% with a 160ms
    fade; leaving is a 150ms fade (REF §11; reduced motion: theme.css stops all of it). */
 html.flat-theme .modal-enter-active {
diff --git a/frontend/src/styles/console/pages/accounts.css b/frontend/src/styles/console/pages/accounts.css
index 704bc9b15447..3eb1dc6c1ea5 100644
--- a/frontend/src/styles/console/pages/accounts.css
+++ b/frontend/src/styles/console/pages/accounts.css
@@ -592,6 +592,12 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"]
   height: 15px;
 }
 
+/* (the glyphs are upstream's inline Heroicons at a 1.5 stroke, AccountsView.vue's actions cell; every other table's row
+   icons are Lucide at 1.8: the same stroke here, the glyphs unchanged. Final review V1-14.) */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] > svg[stroke-width="1.5"] {
+  stroke-width: 1.8;
+}
+
 /* touch: the visible label beside its glyph (one line, so the row stays 45px) */
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] {
   flex-direction: row;
@@ -859,6 +865,30 @@ html.flat-theme [data-test="account-details-drawer"] > header + div section labe
   height: 14px;
 }
 
+/* The scheduling state beside the status badge (the chip row at the top of the drawer, AccountDetailsDrawer.vue): the
+   status chip it sits next to (data.css 6 .badge: a capsule, Geist Mono at the badge size, 500, .025em, 1 / 7 inset;
+   on = the success pill, off = the grey pill), not a 4px Geist 12 rectangle. Final review V1-13. */
+html.flat-theme [data-test="account-details-drawer"] > header + div > section:first-child > div:first-child > span[class~="rounded"][class~="px-2"][class~="py-0.5"][class~="text-xs"] {
+  padding: 1px 7px;
+  border-radius: 9999px;
+  font-family: var(--ui-font-mono);
+  font-size: var(--ui-badge-size);
+  font-weight: 500;
+  line-height: var(--ui-badge-leading);
+  letter-spacing: 0.025em;
+  text-transform: uppercase;
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header + div > section:first-child > div:first-child > span[class~="rounded"][class~="px-2"][class~="py-0.5"][class~="text-xs"][class~="bg-emerald-50"] {
+  background-color: rgb(var(--ui-success-soft));
+  color: rgb(var(--ui-badge-success));
+}
+
+html.flat-theme [data-test="account-details-drawer"] > header + div > section:first-child > div:first-child > span[class~="rounded"][class~="px-2"][class~="py-0.5"][class~="text-xs"][class~="bg-gray-100"] {
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-badge-muted));
+}
+
 /* Usage actions (the drawer, the cards; the table's cell is read-only): querying the quota, the reset, the points,
    the referral count and invite, the local refresh are the reference's small ghost buttons (ink-soft; the subtle fill
    and ink on hover) instead of a hue each (decision 2: colour is for status); the verification link takes the link
@@ -1076,12 +1106,58 @@ html.flat-theme [data-ui="account-create-steps"] div[class~="h-0.5"] {
   background-color: rgb(var(--ui-line-strong));
 }
 
-/* 9.6 Choices inside the account forms (create, edit, bulk edit). The paired choices (model whitelist / mapping, the
-   RPM strategy) are option cards like the account type cards above them (controls.css 8.1): the grouped fill inside
-   the structural line, the chosen one an ink edge 2px wide on the surface; upstream's accent and purple tints go.
-   The user-message limit's three modes are a segmented choice at the reference's 30px: the chosen one ink (REF §8.5;
-   controls.css 10.1 draws it), the others the secondary button. */
-html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"]) {
+/* 9.6 Choices inside the account forms (create, edit, bulk edit); upstream's accent and purple tints go.
+   - A two-way switch whose choices are labels only (the model whitelist / mapping, the bulk form's RPM strategy) is the
+     reference's segmented control (REF §8.5, controls.css 7.1: the structural frame on the surface, radius 8, the 2px
+     inset; segments 14 x 6 at 12.5 / 600, muted, ink on hover, the chosen one ink), like the same switch in the other
+     dialogs (the announcement's 「所有用户 / 按条件」). Final review V1-15.
+   - A pair whose choices carry a description line (the create and edit forms' RPM strategy) is an option card like the
+     account type cards above it (controls.css 8.1): the grouped fill inside the structural line, the chosen one an ink
+     edge 2px wide on the surface.
+   - The user-message limit's three modes are a segmented choice at the reference's 30px: the chosen one ink (REF §8.5;
+     controls.css 10.1 draws it), the others the secondary button. */
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) div[class~="flex"][class~="gap-2"]:has(> button[class~="flex-1"][class~="rounded-lg"]):not(:has(> button div[class~="text-[10px]"])) {
+  width: fit-content;
+  max-width: 100%;
+  gap: 0;
+  padding: var(--ctl-seg-inset);
+  border: 1px solid rgb(var(--ctl-seg-frame));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"]):not(:has(div[class~="text-[10px]"])) {
+  flex: none;
+  margin: 0;
+  border-radius: var(--ui-radius-md);
+  background-color: transparent;
+  box-shadow: none;
+  padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: rgb(var(--ui-muted));
+  transition-property: color, background-color;
+  transition-duration: var(--ui-duration-slide);
+  transition-timing-function: var(--ui-ease-out);
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"][class~="bg-gray-100"]:not(:has(div[class~="text-[10px]"])):hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]):not(:has(div[class~="text-[10px]"])) {
+  background-color: rgb(var(--ui-ink));
+  color: rgb(var(--ui-on-ink));
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"]):not(:has(div[class~="text-[10px]"])) > svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"]):has(div[class~="text-[10px]"]) {
   border-radius: var(--ui-radius-lg);
   background-color: rgb(var(--ui-subtle) / 0.6);
   box-shadow: inset 0 0 0 1px rgb(var(--ui-line));
@@ -1094,17 +1170,22 @@ html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account
   transition-timing-function: var(--ui-ease);
 }
 
-html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"][class~="bg-gray-100"]:hover {
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"][class~="bg-gray-100"]:has(div[class~="text-[10px]"]):hover {
   box-shadow: inset 0 0 0 1px rgb(var(--ui-line-strong));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]) {
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]):has(div[class~="text-[10px]"]) {
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 0 0 2px rgb(var(--ui-ink));
   color: rgb(var(--ui-ink));
 }
 
+html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"]):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
+
 /* (the strategy's hint line: upstream's 10px at 70 % opacity becomes 11px muted) */
 html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"] div[class~="text-[10px]"][class~="opacity-70"] {
   font-size: 11px;
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
index d991e6593d7d..540cc46fc427 100644
--- a/frontend/src/styles/console/pages/dashboard-usage.css
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -164,6 +164,20 @@ html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > b
   color: rgb(var(--ui-ink));
 }
 
+/* The menus open from the pill, as the reference's FilterMenu opens from its trigger (REF §8.6: 4px under it, its left
+   edge): the time range's panel takes the pill as its positioning box (the picker's own wrapper steps aside), flush
+   with the pill's outer left edge and 4px under it (final review V1-02). The Select lists anchor to the pill through
+   data-ui~="select-anchor" (components/common/Select.vue, theme on only). */
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] > div[class~="relative"]:has(> .date-picker-trigger) {
+  position: static;
+}
+
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] > div[class~="relative"]:has(> .date-picker-trigger) > .date-picker-dropdown {
+  top: calc(100% + 5px);
+  left: -1px;
+  margin-top: 0;
+}
+
 /* ================================================================== 4 · filter rows */
 
 /* The admin filter strip (UsageFilters) and the user filters: one wrapping row of pills with the actions at its end,
diff --git a/frontend/src/styles/console/pages/ops-channels.css b/frontend/src/styles/console/pages/ops-channels.css
index a79e1c1773d3..58ff75eb7426 100644
--- a/frontend/src/styles/console/pages/ops-channels.css
+++ b/frontend/src/styles/console/pages/ops-channels.css
@@ -200,6 +200,31 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   gap: 16px;
 }
 
+/* the health / realtime split: upstream's fixed 200px gauge column left the realtime block 160px at 1280, too narrow for
+   the window's segmented control on one line (228px). From 1280 the gauge column is as wide as the gauge and the rest
+   goes to the realtime block; from 1024 to 1279 (a 300-400px panel) the two stack, the gauge above. */
+@media (min-width: 1280px) {
+  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
+    padding-right: 16px;
+    padding-left: 8px;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1279.98px) {
+  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
+    padding-right: 0;
+    border-right-width: 0;
+  }
+}
+
 /* health: the gauge keeps its status colour (it is the status); the score is a figure (600, tabular), its caption the
    mono label; hovering opens the diagnosis */
 html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] {
@@ -306,7 +331,8 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 }
 
 /* realtime: the title a mono label (the decorative ping and the animated pulse line go: they carry no data), the window
-   choice a small segmented control, the current QPS / TPS figures 20/600, peak and average 13/600, units Mono 10 */
+   choice the reference's time segmented control (REF §8.5, crop segmented-time: controls.css 7.1's frame and segment
+   metrics, on one line), the current QPS / TPS figures 20/600, peak and average 13/600, units Mono 10 */
 html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child {
   margin-bottom: 10px;
 }
@@ -332,22 +358,24 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 }
 
 html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child {
+  flex-wrap: nowrap;
   gap: 0;
-  padding: 2px;
-  border: 1px solid rgb(var(--ui-line));
-  border-radius: var(--ui-radius-md);
+  padding: var(--ctl-seg-inset);
+  border: 1px solid rgb(var(--ctl-seg-frame));
+  border-radius: var(--ui-radius-lg);
   background-color: rgb(var(--ui-surface));
 }
 
 html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button {
-  padding: 2px 8px;
-  border-radius: var(--ui-radius-sm);
+  padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
+  border-radius: var(--ui-radius-md);
   background-color: transparent;
   color: rgb(var(--ui-muted));
-  font-family: var(--ui-font-mono);
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 16px;
+  font-family: var(--ui-font);
+  font-size: 0.78125rem;
+  font-weight: 600;
+  line-height: 1.171875rem;
+  white-space: nowrap;
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
 
@@ -970,14 +998,15 @@ html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~=
 
 /* 3.3 Hand-built tables on the page and in its dialogs (alert events and their history, system logs, OpenAI token
    stats, request details, alert rules): the reference's table (REF §8.7): the mono label header on the surface with a
-   1px line under it (thead.bg-gray-50 is data.css' rule; the white-headed ones are drawn the same here), cells 10 / 12
+   1px line under it, in DataTable's head colour --ui-table-head (thead.bg-gray-50 is data.css' rule; the white-headed
+   ones are drawn the same here), cells 10 / 12
    (16 at the edges), 13px text, rows divided by 1px lines, hover = --ui-hover where the row opens something. DataTables
    (the error lists) keep data.css. */
 html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > thead > tr > th {
   padding: 10px 12px;
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ui-table-head));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 500;
@@ -1053,6 +1082,41 @@ html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-u
   font-weight: 600;
 }
 
+/* 3.3a The message row of an empty hand-built table (prompt audit events, risk control records: one colspan cell) is
+   the shared empty state (data.css §9, the reference's "Nothing matches"): a panel 16px inside the table, the dashed
+   control outline, radius 8, 120px, the message 14/500 ink-soft in its middle. A table wider than its scroll box (the
+   events' 1120px) keeps the panel and the message on the visible width: the box is an inline-size container, the
+   panel as wide as the box, and the cell's right padding (a percentage of the table's width) takes the overflow. */
+html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"]:has(> table > tbody > tr:only-child > td[colspan]:only-child) {
+  container-type: inline-size;
+}
+
+html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"] > table:not(:has(> tbody.table-body)) > tbody > tr:only-child > td[colspan]:only-child:not([aria-busy]) {
+  position: relative;
+  height: 152px;
+  padding: 16px calc(100% - 100cqw + 32px) 16px 32px;
+  border-bottom-width: 0;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: rgb(var(--ui-ink-soft));
+  white-space: normal;
+}
+
+html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"] > table:not(:has(> tbody.table-body)) > tbody > tr:only-child > td[colspan]:only-child:not([aria-busy])::after {
+  content: "";
+  position: absolute;
+  top: 16px;
+  bottom: 16px;
+  left: 16px;
+  width: calc(100cqw - 32px);
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  pointer-events: none;
+}
+
 /* 3.4 Status chips of these pages (alert severity P0-P3 and state, log level, request kind, sink counters): the
    reference's Chip (REF §8.8: a capsule, Geist Mono uppercase, a soft status fill, no ring); tones: critical / error /
    failed = danger, warning / warn / P1 = warning, info / P2 = info, resolved / success = success, the rest neutral. */
@@ -1527,7 +1591,7 @@ html.flat-theme [data-ui~="ops-error-detail"] > section > div[data-test="codex-d
   font-size: var(--ui-label-size);
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ui-table-head));
 }
 
 /* 4.3 the error lists: filters in one 30px row under a 1px line (the search the reference's search field: control
@@ -2117,6 +2181,16 @@ html.flat-theme [data-ui~="channels-page"] .table-wrapper td[data-column="descri
   color: rgb(var(--ui-muted));
 }
 
+/* the dialog's tab strip spans the body edge to edge: upstream's -mx-6 / px-6 assume a 24px body inset, the console's
+   dialog body is 18px in (overlays.css --ui-dialog-x), so the strip stood 6px out on each side and the body scrolled
+   sideways */
+html.flat-theme .modal-content .channel-dialog-body > div[class~="-mx-4"][class~="border-b"] {
+  margin-right: calc(-1 * var(--ui-dialog-x));
+  margin-left: calc(-1 * var(--ui-dialog-x));
+  padding-right: var(--ui-dialog-x);
+  padding-left: var(--ui-dialog-x);
+}
+
 html.flat-theme .modal-content .channel-dialog-body .channel-tab.channel-tab > svg[data-ui~="platform-text"] {
   color: rgb(var(--pf-text, var(--ui-ink-soft)));
 }
@@ -2196,6 +2270,24 @@ html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > h1 > sp
   display: none;
 }
 
+/* From 1024px the header row above prints the page title: the page's own h1 (the same words) is kept for assistive
+   technology only, as the fork pages of settings-ops-public.css 7.1 (below 1024: user.css 8.0); the mode line and the
+   V2 / V1 switch stay */
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > h1 {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > p.page-description {
+    margin-top: 0;
+  }
+}
+
 html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > p.page-description {
   margin-top: 2px;
   font-size: 13px;
@@ -2209,6 +2301,25 @@ html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > div[cla
   border-top-width: 0;
 }
 
+/* The V1 table page: the head block and the table layout share the table pages' height (shell.css: 100vh less the
+   header row and the content paddings), so the table card ends one content padding above the viewport's edge like
+   every table page's; upstream's layout took the full height under a 111px head and pushed the pager out of view. The
+   V2 settings (no table layout) scroll as before. */
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui~="channel-monitor-page"]:has(> .table-page-layout) {
+    display: flex;
+    flex-direction: column;
+    height: calc(100vh - var(--ui-shell-header-h) - var(--ui-shell-pad-top) - var(--ui-shell-pad-bottom));
+    padding-bottom: 0;
+  }
+
+  html.flat-theme [data-ui~="channel-monitor-page"] > .table-page-layout {
+    flex: 1 1 0;
+    min-height: 0;
+    height: auto;
+  }
+}
+
 html.flat-theme [data-ui~="channel-monitor-page"] .table-wrapper td[data-column="name"] span[class~="font-medium"] {
   font-weight: 600;
 }
@@ -2220,9 +2331,81 @@ html.flat-theme [data-ui~="channel-monitor-page"] .table-wrapper td:is([data-col
   color: rgb(var(--ui-ink-soft));
 }
 
+/* 5.3a 渠道监控 · V2 数据监控配置 (MonitorSettingsPanel, the section under the head): flush with the page (upstream's
+   4 / 8px inset goes), its blocks 12px apart. The head and every card are the reference's card: the 1px structural line
+   (the shared card rule drops upstream's ring and !border-0 keeps the border at 0, so an inset ring draws it), radius 8.
+   The head's title is a card title (13/600; upstream's 20/900 outranked the page title) without the decorative blue
+   tile (as the page title's), its description 12px muted, 14 / 16 in; rows and card heads 16px in; the V1-mode note is
+   the reference's warning notice (REF §8.16: the warning line, the warning fill, radius 6). */
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] {
+  padding: 0;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"][class~="space-y-5"] > :not([hidden]) ~ :not([hidden]) {
+  margin-top: var(--ui-shell-gap, 12px);
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > header.page-header {
+  padding: 14px 16px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  box-shadow: none;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > header.page-header h2.page-title {
+  gap: 0;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 19.5px;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > header.page-header h2.page-title > span:first-child {
+  display: none;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > header.page-header p.page-description {
+  margin-top: 2px;
+  font-size: 12px;
+  line-height: 18px;
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > div[class~="rounded-2xl"][class~="border-amber-200"] {
+  padding: 12px 14px;
+  border-color: rgb(var(--ui-warning));
+  border-radius: var(--ui-radius-md);
+  background-color: rgb(var(--ui-warning-soft));
+  color: rgb(var(--ui-ink));
+  font-size: 13px;
+  line-height: 1.625;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > .card[class~="ring-1"] {
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-line));
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > .card > div[class~="px-5"],
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > .card > div > div[class~="px-5"],
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > .card > .card-header {
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > .card > div[class~="px-5"][class~="py-4"] {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+html.flat-theme [data-ui~="channel-monitor-page"] > section[class~="max-w-6xl"] > .card :is(p, small)[class~="text-xs"] {
+  color: rgb(var(--ui-muted));
+}
+
 /* 5.4 操作日志: the filters become the table pages' toolbar (no card): each labelled field is the reference's filter
-   trigger holding its label as the mono label (the labelled field pills of 使用记录, dashboard-usage.css §3), 30px,
-   8px apart, the actions at the row's end */
+   trigger holding its label as the mono label at 400 muted under the 13/600 ink value (the labelled field pills of
+   使用记录, dashboard-usage.css §3: a label inside its control stays light; a field label above a field is 600), 30px,
+   8px apart from the left (upstream's justify-between spread the first line 36px apart once the field group was
+   flattened), the actions at the row's end */
 html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card[class~="p-4"] {
   padding: 0;
   border: 0;
@@ -2232,6 +2415,7 @@ html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card[class~="
 }
 
 html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div {
+  justify-content: flex-start;
   align-items: center;
   gap: 8px;
 }
@@ -2272,8 +2456,12 @@ html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div >
   min-width: 0;
 }
 
-/* (.input doubled: the pill's own line is the field's outline, over behaviour B3.2's empty-field line) */
+/* (.input doubled: the pill's own line is the field's outline, over behaviour B3.2's empty-field line). The text fields
+   are 160px (the keyword's placeholder fits), so a pill is its label plus the same field: the four text pills share the
+   first line and the Selects and the actions the second at 1280 as at 1440 (upstream's 20-character fields made the
+   actions miss the second line by a pixel at 1280). */
 html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div input.input.input {
+  width: 10rem;
   height: calc(var(--ui-control-h) - 2px);
   min-height: 0;
   padding: 0 10px 0 0;
@@ -2554,6 +2742,56 @@ html.flat-theme :is(#channel-monitor-form, .modal-content) div[class~="rounded-l
   background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
 
+/* 5.8 请求模板管理 (MonitorTemplateManagerDialog; its provider tablist is the only flex-wrap gap-1 tablist): the provider
+   tabs are the shared underline tabs (controls.css 7.3, the channel dialog's: 8 x 10, 12.5 / 600, muted, ink on
+   hover; the current one ink over the 2px accent rule), their counts the small Mono count; a template's mode and API
+   mode are categories (decision 2): the reference's neutral chip (data.css category-chip), whatever hue upstream gave
+   them (merge amber, replace purple, Responses blue, Chat Completions green). */
+html.flat-theme .modal-content div[class~="mb-4"][class~="border-b"]:has(> div[role="tablist"][class~="flex-wrap"][class~="gap-1"]) {
+  border-color: rgb(var(--ui-line));
+}
+
+html.flat-theme .modal-content div[role="tablist"][class~="flex"][class~="flex-wrap"][class~="gap-1"] > button[role="tab"][class~="border-b-2"] {
+  gap: 0.375rem;
+  padding: 0.5rem 0.625rem;
+  font-size: 0.78125rem;
+  font-weight: 600;
+  line-height: 1.171875rem;
+  color: rgb(var(--ui-muted));
+  transition-property: color, border-color;
+  transition-duration: var(--ui-duration);
+  transition-timing-function: var(--ui-ease);
+}
+
+html.flat-theme .modal-content div[role="tablist"][class~="flex"][class~="flex-wrap"][class~="gap-1"] > button[role="tab"][class~="border-transparent"]:hover {
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .modal-content div[role="tablist"][class~="flex"][class~="flex-wrap"][class~="gap-1"] > button[role="tab"][class~="border-primary-500"] {
+  border-color: rgb(var(--ui-focus));
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme .modal-content div[role="tablist"][class~="flex"][class~="flex-wrap"][class~="gap-1"] > button[role="tab"] > span[class~="rounded-full"] {
+  padding: 0 6px;
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font-family: var(--ui-font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+html.flat-theme .modal-content:has(div[role="tablist"][class~="flex"][class~="flex-wrap"][class~="gap-1"]) div[class~="items-center"][class~="gap-2"] > span[class~="inline-flex"][class~="rounded-md"][class~="px-1.5"][class~="py-0.5"][class~="text-xs"] {
+  padding: 1px 6px;
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-sm);
+  background-color: rgb(var(--ui-subtle));
+  color: rgb(var(--ui-ink-soft));
+  font: 500 var(--ui-chip-size) / 16px var(--ui-font-mono);
+  letter-spacing: 0.01em;
+}
+
 /* ================================================================== 6 · channel status (/monitor, v1 and v2) */
 
 /* Hooks (one attribute each): data-ui="monitor-hero" components/user/monitor/MonitorHero.vue (root), data-ui="monitor-grid"
@@ -2853,7 +3091,7 @@ html.flat-theme [data-ui~="monitor-detail"] table > thead > tr > th {
   font-weight: 500;
   line-height: 19.5px;
   letter-spacing: var(--ui-label-tracking);
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ui-table-head));
   white-space: nowrap;
 }
 
@@ -2949,6 +3187,28 @@ html.flat-theme [data-ui~="monitor-v2"] > section:first-child > .monitor-toolbar
   padding: 10px 16px;
 }
 
+/* its three segmented controls (window, view, metric) take the recipe's segments (controls.css 7.1: 14 x 6, 12.5 /
+   600); upstream compacts them with !px-2 !py-1 text-xs, restated with !important (the only way past them). At that
+   size the controls no longer fit upstream's single scrolling row (1136px at 1440): from 1024 the row wraps like the
+   other toolbars (8px apart, no hidden overflow) and the decorative dividers go (the reference's toolbar separates its
+   controls by the gap alone); below 1024 upstream's scrolling strip stays. */
+html.flat-theme [data-ui~="monitor-v2"] > section:first-child > .monitor-toolbar .tabs > .tab {
+  padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x) !important;
+  font-size: 0.78125rem;
+  line-height: 1.171875rem;
+}
+
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui~="monitor-v2"] > section:first-child > .monitor-toolbar {
+    flex-wrap: wrap;
+    overflow-x: visible;
+  }
+
+  html.flat-theme [data-ui~="monitor-v2"] > section:first-child > .monitor-toolbar > span[aria-hidden="true"][class~="w-px"] {
+    display: none;
+  }
+}
+
 /* the KPI tiles (MetricCell .stat-card): the reference's StatTile (1px line via the ring, radius 6, 8 / 12 in, 76px);
    the state dot 6px in the status colours */
 html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] {
@@ -2968,6 +3228,11 @@ html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] > .stat-card >
   margin-top: 5px;
 }
 
+/* the tile's label at the KPI tiles' weight (data.css §7, the ops tiles: 400; upstream font-bold) */
+html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] > .stat-card .stat-label {
+  font-weight: 400;
+}
+
 html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] > .stat-card > div > :is(small, div)[class~="text-[11px]"] {
   margin-top: 2px;
   font-size: 11px;
@@ -3021,7 +3286,7 @@ html.flat-theme [data-ui~="monitor-v2"] .matrix-scroll {
 html.flat-theme [data-ui~="monitor-v2"] .matrix-header {
   border-bottom: 1px solid rgb(var(--ui-line));
   background-color: rgb(var(--ui-surface));
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ui-table-head));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 500;
@@ -3148,11 +3413,19 @@ html.flat-theme [data-ui~="monitor-v2"] > section[class~="card"]:last-child > di
   padding: 0 0 4px;
 }
 
+/* the detail tabs: as wide as their segments (the reference's segmented control is w-fit; upstream's max-w-md block
+   left 230px of empty frame); below 640 upstream's full-width segments stay */
+@media (min-width: 640px) {
+  html.flat-theme [data-ui~="monitor-v2"] > section[class~="card"]:last-child > div:first-child > nav.tabs {
+    width: max-content;
+  }
+}
+
 html.flat-theme [data-ui~="monitor-v2"] .monitor-table > thead > tr > th {
   padding: 10px 12px;
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ui-table-head));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 500;
@@ -3216,23 +3489,23 @@ html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"][class~="gap-6"
   gap: var(--ui-shell-gap, 12px);
 }
 
-/* the 7 / 30 / 90-day choice: the reference's segmented control (frame 1px line, radius 8, 2px in; the current segment
-   the ink thumb) */
+/* the 7 / 30 / 90-day choice: the reference's segmented control (controls.css 7.1's frame and segment metrics; the
+   current segment the ink thumb) */
 html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"]:has(> button) {
   gap: 0;
-  padding: 2px;
-  border-color: rgb(var(--ui-line));
+  padding: var(--ctl-seg-inset);
+  border-color: rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
   background-color: rgb(var(--ui-surface));
 }
 
 html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"] > button {
-  padding: 5px 12px;
+  padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
   border-radius: var(--ui-radius-md);
   color: rgb(var(--ui-muted));
-  font-size: 12.5px;
+  font-size: 0.78125rem;
   font-weight: 600;
-  line-height: 18.75px;
+  line-height: 1.171875rem;
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
 
@@ -3285,9 +3558,23 @@ html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"] div[class~="h-32"] {
-  font-size: 13px;
-  color: rgb(var(--ui-muted));
+/* a card without data: the shared empty state (data.css §9: dashed control outline, radius 8, the message 14/500
+   ink-soft) */
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"] div[class~="h-32"][class~="justify-center"] {
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+/* the orders and plans tables are bare DataTables (no TablePageLayout): the table pages' table card (data.css §2: 1px
+   structural line, radius 8, surface) */
+html.flat-theme :is([data-ui~="orders-page"], [data-ui~="plans-page"]) > .table-wrapper {
+  border: 1px solid rgb(var(--ui-line));
+  border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-surface));
 }
 
 /* the orders filters: the table pages' toolbar row (no card), 30px controls, 8px apart */
@@ -3392,6 +3679,19 @@ html.flat-theme [data-ui~="risk-page"] > div:first-child > div:first-child p {
   color: rgb(var(--ui-muted));
 }
 
+/* from 1024px the header row prints this title and description word for word: kept for assistive technology only (as
+   settings-ops-public.css 7.1; below 1024 user.css 8.0 hides the title and keeps the description); the actions stay */
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui~="risk-page"] > div:first-child > div:first-child > :is(h1, p) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
 html.flat-theme [data-ui~="risk-page"] > p[data-test="active-audit-engine"] {
   font-family: var(--ui-font-mono);
   font-size: 11.5px;
@@ -3502,14 +3802,26 @@ html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-metric-grid"] > div
 
 /* the API-key load list and its empty line: rows on the grouped fill (radius 6); key figures Mono; the load bar the
    capsule on the grouped fill in ink */
-html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-list"] > div,
-html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-card"] p[class~="rounded-lg"][class~="bg-gray-50"] {
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-list"] > div {
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-md);
   background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
   font-size: 13px;
 }
 
+/* no key load yet: the shared empty state (data.css §9) */
+html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-card"] p[class~="rounded-lg"][class~="bg-gray-50"] {
+  padding: 32px 16px;
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  background-color: transparent;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: rgb(var(--ui-ink-soft));
+}
+
 html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-list"] p[class~="text-sky-700"] {
   color: rgb(var(--ui-ink));
 }
@@ -3601,21 +3913,49 @@ html.flat-theme [data-ui~="risk-settings"] span[class~="h-10"][class~="w-10"][cl
   display: none;
 }
 
-/* 8.1 风控中心 settings: the API-key write mode is a segmented control (frame, 2px in; 「增量添加」 the ink thumb,
-   「覆盖保存」 keeps the warning fill: it replaces the saved keys) */
+/* no key health yet: the shared empty state (data.css §9: dashed control outline, radius 8, title 14/500 ink-soft,
+   hint 13px muted, the glyph muted) */
+html.flat-theme [data-ui~="risk-settings"] div[class~="border-dashed"][class~="min-h-32"] {
+  padding: 32px 16px;
+  border-color: rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  background-color: transparent;
+}
+
+html.flat-theme [data-ui~="risk-settings"] div[class~="border-dashed"][class~="min-h-32"] > svg {
+  color: rgb(var(--ui-muted));
+}
+
+html.flat-theme [data-ui~="risk-settings"] div[class~="border-dashed"][class~="min-h-32"] > p[class~="text-sm"] {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme [data-ui~="risk-settings"] div[class~="border-dashed"][class~="min-h-32"] > p[class~="text-xs"] {
+  margin-top: 4px;
+  font-size: 13px;
+  line-height: 1.625;
+  color: rgb(var(--ui-muted));
+}
+
+/* 8.1 风控中心 settings: the API-key write mode is a segmented control (controls.css 7.1's frame and segment metrics;
+   「增量添加」 the ink thumb, 「覆盖保存」 keeps the warning fill: it replaces the saved keys) */
 html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"]:has(> button) {
-  padding: 2px;
-  border: 1px solid rgb(var(--ui-line));
+  padding: var(--ctl-seg-inset);
+  border: 1px solid rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
   box-shadow: none;
 }
 
 html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"] > button {
-  padding: 5px 12px;
+  padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
   border-radius: var(--ui-radius-md);
   box-shadow: none;
-  font-size: 12.5px;
+  font-size: 0.78125rem;
   font-weight: 600;
+  line-height: 1.171875rem;
 }
 
 html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"] > button[class~="bg-primary-500"] {
@@ -3664,12 +4004,31 @@ html.flat-theme [data-ui~="prompt-audit-page"] > header h1 + p {
   font-size: 13px;
 }
 
+/* from 1024px the header row prints the title and the whole description (it wraps there, shell.css): the eyebrow,
+   the h1 and the description are kept for assistive technology only (as settings-ops-public.css 7.1; below 1024
+   user.css 8.0 hides the title and keeps the rest); the config version stays at the head's end */
+@media (min-width: 1024px) {
+  html.flat-theme [data-ui~="prompt-audit-page"] > header > div:first-child > :is(p, h1) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
 html.flat-theme [data-ui~="prompt-audit-page"] > header > div:last-child {
   font-family: var(--ui-font-mono);
   font-size: 11px;
   font-variant-numeric: tabular-nums;
 }
 
+/* the events / config switch: 12px above the workspace like every block of the page (upstream mb-4) */
+html.flat-theme [data-ui~="prompt-audit-page"] > div[role="tablist"] {
+  margin-bottom: var(--ui-shell-gap, 12px);
+}
+
 html.flat-theme [data-ui~="prompt-audit-page"] > main.card {
   padding-left: 16px;
   padding-right: 16px;
@@ -3730,7 +4089,7 @@ html.flat-theme [data-ui~="prompt-audit-page"] section div[class~="border-dashed
 html.flat-theme [data-ui~="prompt-audit-page"] section div[class~="xl:grid"][class~="uppercase"] {
   border-left-width: 0;
   background-color: rgb(var(--ui-surface));
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ui-table-head));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 500;
@@ -3754,16 +4113,26 @@ html.flat-theme [data-ui~="prompt-audit-page"] section span[class~="rounded-md"]
   font-size: 11px;
 }
 
-/* the events' filters: wrapping labels with the label text as the mono label above the 34px control */
+/* the events' filters: wrapping labels with the label text as the field label above the 34px control (.input-label: the
+   mono label at 600); search and reset in the same row are the form's 34px buttons (.btn-md metrics; upstream btn-sm
+   26px sat against 34px fields) */
 html.flat-theme [data-ui~="prompt-audit-page"] form[class~="grid"] > label[class~="text-xs"] > span:first-child {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
+  font-weight: 600;
   line-height: var(--ui-label-leading);
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
   color: rgb(var(--ui-label));
 }
 
+html.flat-theme [data-ui~="prompt-audit-page"] form[class~="grid"] > div[class~="items-end"] > .btn {
+  min-height: var(--ui-select-h);
+  padding: 0.390625rem 0.875rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
+}
+
 html.flat-theme [data-ui~="prompt-audit-page"] div[class~="overflow-x-auto"][class~="rounded-xl"][class~="border"] {
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index 7cdd57624f0b..9ac7a123acf2 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -2376,7 +2376,7 @@ html.flat-theme [data-ui="key-usage"] .skeleton {
  * Source: the reference console's settings language (artifacts/tmp/ui-el/ref/console/REF-CONSOLE.md §5, §8.3-§8.5,
  * §8.11, §8.16 and its public recipes: Modal, ConnectModal, DemoBanner, PromoField, TopUpModal, Toggle, AddChoice)
  * and its docs pages for long-form text (ref-docs-*: callouts, tables, code). A long form reads as the reference's
- * panels: section cards (the surface, 1px structural line, radius 8) with a header strip (14 / 20 title, 12.5px
+ * panels: section cards (the surface, 1px structural line, radius 8) with a header strip (13 / 19.5 title, 12.5px
  * muted description, 14 x 18 inset like its Modal) and a 16 x 18 body; mono field labels (controls.css), 34px
  * fields, 12px help text; switch rows with a 13 / 600 title and a 12px description beside a right-aligned switch,
  * hairlines between rows; nested groups as the reference's route cards; notices as its callouts. Colour stays for
@@ -2455,8 +2455,9 @@ html.flat-theme [data-ui~="settings"] .settings-tabs-shell.settings-tabs-shell::
 
 /* ================================================================== settings · 2 section cards */
 
-/* 2.1 Header strip: the reference Modal / panel header (px 18, py 14, the structural line under it); title 14 / 20
-   600 ink, description 12.5 / 18.75 muted two pixels under it. Upstream: 24px insets, an 18px title. */
+/* 2.1 Header strip: the reference Modal / panel header (px 18, py 14, the structural line under it); title 13 / 19.5
+   600 ink (the reference's page card titles, "Usage", "Request history"; 14 / 600 is its dialog title), description
+   12.5 / 18.75 muted two pixels under it. Upstream: 24px insets, an 18px title. */
 html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"]:is([class~="px-6"], [class~="px-4"]) {
   gap: 0.75rem;
   padding: var(--set-head-py) var(--set-px);
@@ -2464,8 +2465,8 @@ html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"]
 
 html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] :is(h2, h3) {
   gap: 0.5rem;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
   font-weight: 600;
   letter-spacing: 0;
   color: rgb(var(--ui-ink));
@@ -2852,8 +2853,8 @@ html.flat-theme [data-ui~="settings"] .card[class~="p-6"] > div:first-child[clas
 }
 
 html.flat-theme [data-ui~="settings"] .card[class~="p-6"] > div:first-child[class~="mb-4"] h3 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
 }
 
 html.flat-theme [data-ui~="settings"] .card[class~="p-6"] > div:first-child[class~="mb-4"] h3 + p {
@@ -2954,15 +2955,53 @@ html.flat-theme [data-ui~="settings"] .card div[class~="rounded-lg"][class~="bor
   padding: 0.625rem 0.875rem;
 }
 
+/* 6.3 Empty lists (the exclusive users of 邀请返利 in 功能开关, the backup records in 数据备份: a table whose only row is one
+   colspan cell with a line of text): the shared empty state (data.css §9, the reference's "Nothing matches"; the same
+   drawing as the ops and risk pages' empty tables): a panel 16px inside the table, the dashed control outline,
+   radius 8, 120px, the message 14 / 500 ink-soft in its middle. The list's box is an inline-size container, so a
+   table wider than its box (the backup list's 800px on a narrow screen) keeps the panel and the message on the
+   visible width; the cell's right padding (a share of the table's width) takes the overflow. */
+html.flat-theme [data-ui~="settings"] .card div[class~="overflow-x-auto"]:has(> table > tbody > tr:only-child > td[colspan]:only-child) {
+  container-type: inline-size;
+}
+
+html.flat-theme [data-ui~="settings"] .card div[class~="overflow-x-auto"] > table > tbody > tr:only-child > td[colspan]:only-child {
+  position: relative;
+  height: 152px;
+  padding: 16px calc(100% - 100cqw + 32px) 16px 32px;
+  border-bottom-width: 0;
+  vertical-align: middle;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  color: rgb(var(--ui-ink-soft));
+  white-space: normal;
+}
+
+html.flat-theme [data-ui~="settings"] .card div[class~="overflow-x-auto"] > table > tbody > tr:only-child > td[colspan]:only-child::after {
+  position: absolute;
+  top: 16px;
+  bottom: 16px;
+  left: 16px;
+  width: calc(100cqw - 32px);
+  border: 1px dashed rgb(var(--ui-line-strong));
+  border-radius: var(--ui-radius-lg);
+  content: "";
+  pointer-events: none;
+}
+
 /* ================================================================== 7 · page heads of the fork pages and plugins */
 
 /* 7.1 The page's own heading repeats the header row's title word for word (系统提示词 in Chinese — its route title is
-   not translated —, Codex 路由设置, 插件管理). From 1024px, where the header row shows the title, it is kept for
-   assistive technology only; below that the header hides its title and the page heading stays. */
+   not translated —, Codex 路由设置, 插件管理), and the plugins intro repeats the header's description word for word.
+   From 1024px, where the header row shows both, they are kept for assistive technology only; below that the header
+   hides its title and description and the page's own stay. */
 @media (min-width: 1024px) {
   html.flat-theme:lang(zh) [data-ui~="system-prompts"] > header h1,
   html.flat-theme [data-ui~="codex-runtime"] > h2:first-child,
-  html.flat-theme [data-ui~="plugins"] > section:first-child h2 {
+  html.flat-theme [data-ui~="plugins"] > section:first-child h2,
+  html.flat-theme [data-ui~="plugins"] > section:first-child > div:first-child > p {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -2972,7 +3011,8 @@ html.flat-theme [data-ui~="settings"] .card div[class~="rounded-lg"][class~="bor
   }
 }
 
-/* 7.2 The intro under the title: the reference's page intro (13px on a relaxed line, muted, 780px at most). */
+/* 7.2 The intro under the title: the reference's page intro (13px on a relaxed line, muted, 780px at most); a
+   wrapped intro keeps more than one character on its last line (the Codex intro ended on a lone 「证。」). */
 html.flat-theme [data-ui~="system-prompts"] > header p,
 html.flat-theme [data-ui~="codex-runtime"] > h2:first-child + p,
 html.flat-theme [data-ui~="plugins"] > section:first-child > div:first-child > p {
@@ -2980,6 +3020,7 @@ html.flat-theme [data-ui~="plugins"] > section:first-child > div:first-child > p
   font-size: 0.8125rem;
   line-height: 1.625;
   color: rgb(var(--ui-muted));
+  text-wrap: pretty;
 }
 
 /* (the shell's page rhythm, 0,6,2, spaces main's direct children; the doubled root attribute outranks it) */
@@ -2987,6 +3028,11 @@ html.flat-theme [data-ui~="plugins"] > section:first-child > div:first-child > p
   html.flat-theme [data-ui~="codex-runtime"][data-ui~="codex-runtime"] > h2:first-child:not([hidden]) + p:not([hidden]) {
     margin-top: 0;
   }
+
+  /* with the title and the intro read-only for assistive technology, the capability chips open the plugins head */
+  html.flat-theme [data-ui~="plugins"] > section:first-child > div:first-child > p + div {
+    margin-top: 0;
+  }
 }
 
 /* the page title where it stays (below 1024px, or an untranslated route title): the reference's 20 / 28 page title */
@@ -3064,7 +3110,7 @@ html.flat-theme [data-ui~="system-prompts"] > section > p[class~="text-xs"] {
   line-height: 1.125rem;
 }
 
-/* 8.3 The library card: its title row is the card's header strip (14 x 18, the line under it, 14 / 600 title, the
+/* 8.3 The library card: its title row is the card's header strip (14 x 18, the line under it, 13 / 600 title, the
    add button at the right); each prompt is a row under a hairline; the body is the reference's code (Geist Mono
    12.5 on a 1.625 line); the byte count and the users in the mono meta line. */
 html.flat-theme [data-ui~="system-prompts"] > section:last-of-type > div:first-child {
@@ -3074,8 +3120,8 @@ html.flat-theme [data-ui~="system-prompts"] > section:last-of-type > div:first-c
 }
 
 html.flat-theme [data-ui~="system-prompts"] > section:last-of-type > div:first-child > h2 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
@@ -3365,7 +3411,7 @@ html.flat-theme [data-ui~="plugins"] > div[class~="border-dashed"] > p:last-of-t
 }
 
 /* 10.3 Plugin cards (installed and retired): section cards; the head is the header strip (14 x 18, the line under
-   it) with the name 14 / 600, the version in Geist Mono 11 muted, the id and state as small chips; the facts as a
+   it) with the name 13 / 600, the version in Geist Mono 11 muted, the id and state as small chips; the facts as a
    two-column definition list (12 / 18, labels muted, values ink-soft, identifiers in Geist Mono); section labels
    are the mono label; JSON is the reference's snippet (the page ground, radius 6, Geist Mono 11.5 on 1.6). */
 html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card > div:first-child[class~="border-b"] {
@@ -3373,8 +3419,8 @@ html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) artic
 }
 
 html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) article.card h3 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
@@ -3436,15 +3482,16 @@ html.flat-theme :is([data-ui~="plugins"], [data-testid="retired-plugins"]) :is(a
   color: rgb(var(--ui-ink-soft));
 }
 
-/* the retired section's title: a section title (14 / 600) with its description, no rule (the cards carry lines) */
+/* the retired section's title: a section title (13 / 600, as the card titles) with its description, no rule (the
+   cards carry lines) */
 html.flat-theme [data-testid="retired-plugins"] > div:first-child {
   border-bottom: 0;
   padding-bottom: 0;
 }
 
 html.flat-theme [data-testid="retired-plugins"] > div:first-child > h2 {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
@@ -3468,6 +3515,38 @@ html.flat-theme [data-testid="retired-plugins-receipt"] {
   padding: var(--set-body-py) var(--set-px);
 }
 
+/* ================================================================== 10b · the dialogs drawn inside the settings page */
+
+/* The affiliate add / edit and batch-rate dialogs and the web search test dialog are built from utilities inside the
+   page (no BaseDialog): drawn as the reference Modal like every other console dialog — the title as its header strip
+   (14 / 20 600 ink, 14 x 18, the structural line under it; 57px like the Modal header whose 28px close button sets
+   its height, the title centred in it), the body 16 x 18, the button row as the footer strip (12 x 18, the line above
+   it). They have no close button (upstream structure; cancel / close stay in the footer). */
+html.flat-theme [data-ui~="settings"] div[class~="fixed"][class~="inset-0"] > div[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]) {
+  padding: var(--ui-dialog-body-y) var(--ui-dialog-x);
+}
+
+html.flat-theme [data-ui~="settings"] div[class~="fixed"][class~="inset-0"] > div[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]) > h3:first-child {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-height: 57px;
+  margin: calc(var(--ui-dialog-body-y) * -1) calc(var(--ui-dialog-x) * -1) var(--ui-dialog-body-y);
+  border-bottom: 1px solid rgb(var(--ui-line));
+  padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: rgb(var(--ui-ink));
+}
+
+html.flat-theme [data-ui~="settings"] div[class~="fixed"][class~="inset-0"] > div[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]) > div:last-child[class~="flex"]:is([class~="mt-6"], [class~="mt-4"]):has(.btn) {
+  margin: var(--ui-dialog-body-y) calc(var(--ui-dialog-x) * -1) calc(var(--ui-dialog-body-y) * -1);
+  border-top: 1px solid rgb(var(--ui-line));
+  padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
+}
+
 /* ================================================================== 11 · option chips, the payment provider dialog */
 
 /* Multi-choice chips (the enabled payment providers, the provider dialog's payment mode and methods: rounded-lg border
diff --git a/frontend/src/styles/console/pages/user.css b/frontend/src/styles/console/pages/user.css
index 07cf16ded2eb..8c27f0a758a7 100644
--- a/frontend/src/styles/console/pages/user.css
+++ b/frontend/src/styles/console/pages/user.css
@@ -45,7 +45,7 @@ html.flat-theme [data-testid="profile-shell"] [class~="space-y-6"] > :not([hidde
    12 / 16 on the structural line with the title 14 / 600 (the reference's modal and card titles) and its note
    12.5px muted. */
 html.flat-theme :is([data-ui="user-redeem"], [data-ui="user-affiliate"], [data-ui="user-purchase"], [data-testid="profile-shell"]) .card:is([class~="p-6"], [class~="p-5"]),
-html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]) {
+html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card:not([data-testid="profile-overview-hero"]) > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]) {
   padding: 16px;
 }
 
@@ -1334,9 +1334,10 @@ html.flat-theme .custom-page-layout > .card {
   border-radius: var(--ui-radius-lg);
 }
 
-/* 7.2 Image studio: the form is a card (8px, 1px line, 16px); the mode switch is the segmented control; the
-   in-page title repeats the header row's title and description on a desktop, so it steps back there (the header row
-   hides on phones, where the page's own title stays). */
+/* 7.2 Image studio: the form is a card (8px, 1px line, 16px); the mode switch is the segmented control. The page's
+   own h1 repeats the title the header prints at every width (the desktop header row; below 1024px the 47px bar,
+   shell.css), so it is kept for assistive technology only; the intro under it repeats the header row's description
+   on a desktop only (the phone bar shows the title alone), so it steps back there. */
 html.flat-theme [data-testid="image-studio-layout"] > form {
   padding: 16px;
   border-color: rgb(var(--ui-line));
@@ -1344,13 +1345,23 @@ html.flat-theme [data-testid="image-studio-layout"] > form {
   background-color: rgb(var(--ui-surface));
 }
 
-@media (min-width: 1024px) {
-  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header > div:first-child:has(> h1) {
-    display: none;
-  }
+html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header > div:first-child > h1 {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
 
-  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header:not(:has(> button)) {
-    display: none;
+@media (min-width: 1024px) {
+  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header > div:first-child > p {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
   }
 
   html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header:has(> button) {
@@ -1465,9 +1476,10 @@ html.flat-theme [data-ui="model-plaza"] div[class~="rounded-2xl"][class~="border
   font-size: 13px;
 }
 
-/* 7.5 Available channels (a plain table, not DataTable): the header is the reference's table header (40px, the mono
-   label, the structural line under it, no band), the empty and loading states the console's (a 20px faint glyph,
-   the title 14 / 500 ink-soft, 48px of air). */
+/* 7.5 Available channels (a plain table, not DataTable): the header is the console's table header (data.css: 40px,
+   Geist Mono 500 at the label size on a 19.5px line, the table-head grey, the surface under it, the structural
+   line; REF §8.7), the empty and loading states the console's (a 20px faint glyph, the title 14 / 500 ink-soft,
+   48px of air). */
 html.flat-theme [data-ui="user-available-channels"] .table-wrapper > table > thead > tr {
   border-bottom-color: rgb(var(--ui-line));
   background-color: transparent;
@@ -1476,8 +1488,9 @@ html.flat-theme [data-ui="user-available-channels"] .table-wrapper > table > the
 html.flat-theme [data-ui="user-available-channels"] .table-wrapper > table > thead > tr > th {
   height: 40px;
   padding: 10px 12px;
-  color: rgb(var(--ui-label));
-  font: var(--ui-label-font);
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-table-head));
+  font: 500 var(--ui-label-size) / 19.5px var(--ui-font-mono);
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
   text-align: left;
@@ -1583,6 +1596,17 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
     flex: 1 1 100%;
   }
 
+  /* the same squeezed search on 订单管理 (the ops agent's page root, orders-page: the filter card's first row) */
+  html.flat-theme [data-ui~="orders-page"] > .card:first-child > div > div[class~="flex-1"]:has(> input.input) {
+    flex: 1 1 100%;
+  }
+
+  /* 用户管理: with the search on its own row the actions wrapped to the start of the next one; they keep to the row's
+     end like every other management toolbar's */
+  html.flat-theme .table-page-layout[data-ui~="users-page"] > .layout-section-fixed:first-child > div > div[class~="justify-end"] {
+    margin-left: auto;
+  }
+
   /* 8.2 Affiliate: the four figures two to a row (the reference's phone KPIs, REF §7.4: grid-cols-2) */
   html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"]:has(> .card[class~="p-5"]) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1607,6 +1631,12 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
     grid-column: 1 / -1;
   }
 
+  /* the user dashboard's balance tile likewise takes the row (in a half-width tile the grouped figure broke inside
+     its digits: "…212.4 / 3") */
+  html.flat-theme [data-ui="user-dashboard"] [class~="grid"] > .card[class~="p-4"]:has(p[class~="text-emerald-600"]) {
+    grid-column: 1 / -1;
+  }
+
   /* 8.3 Redeem: the balance a size down so a long figure keeps one line on a phone; the activity pager puts the count
      on its own line and the page controls together under it */
   html.flat-theme [data-ui="user-redeem"] > .card:last-child div[class~="mt-4"][class~="justify-between"][class~="text-sm"] > span:first-child {
@@ -1620,6 +1650,31 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
 }
 
 @media (max-width: 1023.98px) {
+  /* 8.0 Below 1024px the 47px bar prints the page title (shell.css), so a page's own heading that repeats it word for
+     word is kept for assistive technology only, as the pages already do from 1024px: 系统提示词 (its route title is
+     Chinese), Codex 路由设置, 插件管理, 风控中心, 提示词审计, 渠道监控 (the image studio: 7.2). The intros under them
+     stay. */
+  html.flat-theme:lang(zh) [data-ui~="system-prompts"] > header h1,
+  html.flat-theme [data-ui~="codex-runtime"] > h2:first-child,
+  html.flat-theme [data-ui~="plugins"] > section:first-child h2,
+  html.flat-theme [data-ui~="risk-page"] h1[class~="text-2xl"],
+  html.flat-theme [data-ui~="prompt-audit-page"] h1[class~="text-2xl"],
+  html.flat-theme [data-ui~="channel-monitor-page"] h1.page-title {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  /* 8.0b API keys: the search and the filters above the actions, as on every other toolbar at this width and on the
+     reference's /models phone toolbar (the desktop already sets them on one row, 2.0); the keyboard order stays
+     upstream's */
+  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]) > .layout-section-fixed:first-child + .layout-section-fixed {
+    order: -1;
+  }
+
   /* 8.3b Available channels: the refresh button beside the search (one toolbar row, as the reference's phone toolbar
      keeps a field and its buttons together) instead of alone on a second row */
   html.flat-theme [data-ui="user-available-channels"] > .layout-section-fixed > div[class~="flex-col"][class~="lg:flex-row"] {
@@ -1635,12 +1690,13 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
   /* 8.4 Operation log (the ops agent's page) in upstream's table mode below 1024px: the table may shrink to the screen
      (min-width 100 %) while the operator and action cells may wrap anywhere (behaviour B1.12, never cut), so the two
      columns fell to one or two characters a line ("ad / min. / us"). They keep a readable measure and the table
-     scrolls sideways instead (D9). */
+     scrolls sideways instead (D9); the action column holds the long action ids whole ("admin.backups.s3_config.read"
+     broke before its last letter at 13rem). */
   html.flat-theme .table-page-layout.mobile-mode .table-wrapper td[data-column="actor"] > div[class~="min-w-0"][class~="max-w-[220px]"] {
     min-width: 9rem;
   }
 
   html.flat-theme .table-page-layout.mobile-mode .table-wrapper td[data-column="action"] > div[class~="min-w-0"][class~="max-w-xs"] {
-    min-width: 13rem;
+    min-width: 16rem;
   }
 }
diff --git a/frontend/src/styles/console/pages/users-groups-proxies-keys.css b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
index 18ab618c062f..186949438bbc 100644
--- a/frontend/src/styles/console/pages/users-groups-proxies-keys.css
+++ b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
@@ -26,14 +26,22 @@
 
 /* One row where it fits (REF §7.1: search, then the controls, the actions at the right end), items 8px apart and 12px
    between wrapped rows; the filters are as wide as their value, like the reference's filter pills, so every toolbar of the
-   group fits one row at 1440 (IP management's seven actions included). Below 640px the toolbar is the phone agent's
-   (user.css), so every toolbar rule here starts at 640px. */
+   group fits one row at 1440 (IP management's seven actions included). Below 640px the toolbar's layout is the phone
+   agent's (user.css), so every layout rule here starts at 640px. */
 @media (min-width: 640px) {
   html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child {
     column-gap: 8px;
     row-gap: 12px;
   }
 
+  /* where the actions wrap (IP management below about 1400px, redeem codes on a tablet) the search and the filters stay
+     on the first row, level with the first row of actions, instead of centring between the action rows; the wrapped
+     actions keep to the right end (their group's own justify-end). The groups toolbar has no flex-wrap: a column below
+     1024px, upstream's lg:items-start (the same first-row start) from there. */
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child[class~="flex-wrap"] {
+    align-items: flex-start;
+  }
+
   html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child > div[class~="flex"]:not(.relative) {
     gap: 8px;
   }
@@ -60,12 +68,30 @@
   }
 }
 
-/* The groups toolbar is a column below 1024px and a row above it (lg:flex-row): its two halves take one row there and the
-   actions sit at the right end. */
-@media (min-width: 1024px) {
-  html.flat-theme [data-ui~="groups-page"] > .layout-section-fixed:first-child > div:first-child {
-    align-items: center;
-  }
+/* The three search fields upstream draws without a glyph (redeem codes, promo codes, announcements: a bare .input in a
+   flex-1 sm:max-w-64 box) are the reference search the other six pages have (controls.css 3.2): the 13px Lucide search
+   glyph (stroke 1.8, as Icon.vue draws it) 10px in and centred, in --ctl-glyph through a mask so it follows the theme,
+   the text from 32px. At every width, like the other pages' template glyph (the phone layout stays user.css'). */
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~="announcements-page"]) > .layout-section-fixed:first-child > div:first-child > div[class~="sm:max-w-64"]:has(> input.input) {
+  position: relative;
+}
+
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~="announcements-page"]) > .layout-section-fixed:first-child > div:first-child > div[class~="sm:max-w-64"]:has(> input.input)::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0.625rem;
+  width: 0.8125rem;
+  height: 0.8125rem;
+  transform: translateY(-50%);
+  background-color: rgb(var(--ctl-glyph));
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
+  pointer-events: none;
+}
+
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~="announcements-page"]) > .layout-section-fixed:first-child > div:first-child > div[class~="sm:max-w-64"] > input.input {
+  padding-left: 2rem;
 }
 
 /* Icon-only buttons (refresh, the subscription guide) are the reference's square: 30 x 30 (REF §8.3 icon buttons). They
diff --git a/frontend/src/styles/console/shell.css b/frontend/src/styles/console/shell.css
index f49b6b773658..837dda1ad0dc 100644
--- a/frontend/src/styles/console/shell.css
+++ b/frontend/src/styles/console/shell.css
@@ -112,6 +112,30 @@ html.flat-theme .custom-page-layout {
   height: calc(100vh - var(--ui-shell-header-h) - var(--ui-shell-pad-top) - var(--ui-shell-pad-bottom));
 }
 
+/* Desktop: the header row grows when a page description wraps (header row, below), so a full-height page fills the
+   column under the header instead of subtracting a fixed header height. With the one-line header it ends where the
+   calc above ends it (900 - 30). */
+@media (min-width: 1024px) {
+  html.flat-theme .app-main:has(> main > :is(.table-page-layout, .custom-page-layout)) {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+  }
+
+  html.flat-theme .app-main:has(> main > :is(.table-page-layout, .custom-page-layout)) > main {
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  html.flat-theme .app-main > main > :is(.table-page-layout, .custom-page-layout) {
+    flex: 1 1 0;
+    height: auto;
+    min-height: 0;
+  }
+}
+
 /* ================================================================== sidebar (REF §7.1, §8.1) */
 /* Same fill as the canvas, a 1px structural line on the right, no shadow. Width and padding follow the reference's
    clamps and slide in 160ms ease-out. */
@@ -476,7 +500,8 @@ html.flat-theme .app-main > header > div > div:last-child {
 }
 
 /* Desktop: the first row of the content column, 30px tall at the content gutter (/logs: y = 30), no fill, no line,
-   no blur, not sticky. */
+   no blur, not sticky. A description that does not fit wraps and the row grows with it; the controls keep to the
+   row's top, beside the title line (the 28px title line 1px down, where the 30px row centred it). */
 @media (min-width: 1024px) {
   html.flat-theme .app-main > header {
     position: static;
@@ -486,13 +511,16 @@ html.flat-theme .app-main > header > div > div:last-child {
   }
 
   html.flat-theme .app-main > header > div {
-    height: var(--ui-shell-row);
+    height: auto;
+    min-height: var(--ui-shell-row);
+    align-items: flex-start;
     gap: 16px;
   }
 
   html.flat-theme .app-main > header > div > div:first-child {
     flex: 1 1 auto;
     min-width: 0;
+    margin-top: calc((var(--ui-shell-row) - 28px) / 2);
   }
 
   html.flat-theme .app-main > header > div > div:last-child {
@@ -500,8 +528,9 @@ html.flat-theme .app-main > header > div > div:last-child {
     gap: 10px;
   }
 
-  /* Title · description on one line: the page title 20/28 600 (REF §8.2), the description 13px muted on the same
-     baseline after a faint dot; a description too long for the row ends in an ellipsis. */
+  /* Title · description: the page title 20/28 600 (REF §8.2), the description 13px muted on the same baseline
+     after a faint dot. A description longer than the row wraps, its lines under its first word (nothing is cut; the
+     ellipsis hid the end of 操作日志's and 提示词审计's notes). */
   html.flat-theme .app-main > header div:has(> h1) {
     display: flex;
     align-items: baseline;
@@ -518,16 +547,17 @@ html.flat-theme .app-main > header h1 {
 }
 
 html.flat-theme .app-main > header h1 + p {
+  display: flex;
+  align-items: baseline;
   min-width: 0;
-  overflow: hidden;
   font: 400 13px/19.5px var(--ui-font);
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  overflow-wrap: anywhere;
   color: rgb(var(--ui-muted));
 }
 
 html.flat-theme .app-main > header h1 + p::before {
   content: '\00b7';
+  flex: none;
   margin: 0 8px 0 10px;
   color: rgb(var(--ui-faint));
 }
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index f3c7f986289d..91a12684d13f 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -282,7 +282,7 @@
               <button @click="loadDashboardStats" :disabled="chartsLoading" class="btn btn-secondary">
                 {{ t('common.refresh') }}
               </button>
-              <div class="ml-auto flex items-center gap-2">
+              <div class="ml-auto flex items-center gap-2" data-ui="select-anchor">
                 <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
                   >{{ t('admin.dashboard.granularity') }}:</span
                 >
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index bc1dbd0f6240..d03dd29e4878 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -14,7 +14,7 @@
                 @change="onDateRangeChange"
               />
             </div>
-            <div class="ml-auto flex items-center gap-2">
+            <div class="ml-auto flex items-center gap-2" data-ui="select-anchor">
               <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.granularity') }}:</span>
               <div class="w-28">
                 <Select v-model="granularity" :options="granularityOptions" @change="loadChartData" />
diff --git a/frontend/src/views/user/UsageView.vue b/frontend/src/views/user/UsageView.vue
index c484d5505498..98fc13dfb50c 100644
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -14,7 +14,7 @@
                 @change="onDateRangeChange"
               />
             </div>
-            <div class="ml-auto flex items-center gap-2">
+            <div class="ml-auto flex items-center gap-2" data-ui="select-anchor">
               <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.granularity') }}:</span>
               <div class="w-28">
                 <Select v-model="granularity" :options="granularityOptions" @change="loadChartData" />
@@ -69,11 +69,11 @@
       <div class="card p-6">
         <div class="flex flex-wrap items-end justify-between gap-4">
           <div v-if="activeTab === 'errors'" class="flex flex-1 flex-wrap items-end gap-4">
-            <div class="w-full sm:w-auto sm:min-w-[220px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[220px]">
               <label class="input-label">{{ t('usage.errors.keyName') }}</label>
               <Select v-model="errorFilter.api_key_id" :options="errorKeyOptions" @change="applyErrorFilters" />
             </div>
-            <div class="w-full sm:w-auto sm:min-w-[220px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[220px]">
               <label class="input-label">{{ t('usage.errors.model') }}</label>
               <Select
                 v-model="errorFilter.model"
@@ -85,41 +85,41 @@
                 @change="applyErrorFilters"
               />
             </div>
-            <div class="w-full sm:w-auto sm:min-w-[200px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[200px]">
               <label class="input-label">{{ t('usage.errors.category') }}</label>
               <Select v-model="errorFilter.category" :options="errorCategoryOptions" @change="applyErrorFilters" />
             </div>
-            <div class="w-full sm:w-auto sm:min-w-[180px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[180px]">
               <label class="input-label">{{ t('usage.errors.status') }}</label>
               <Select v-model="errorFilter.status_code" :options="errorStatusOptions" @change="applyErrorFilters" />
             </div>
           </div>
           <div v-else class="flex flex-1 flex-wrap items-end gap-4">
-            <div class="w-full sm:w-auto sm:min-w-[220px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[220px]">
               <label class="input-label">{{ t('usage.apiKeyFilter') }}</label>
               <Select v-model="filters.api_key_id" :options="apiKeyOptions" @change="applyFilters" />
             </div>
-            <div class="w-full sm:w-auto sm:min-w-[220px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[220px]">
               <label class="input-label">{{ t('usage.model') }}</label>
               <Select v-model="filters.model" :options="modelOptions" searchable @change="applyFilters" />
             </div>
-            <div class="w-full sm:w-auto sm:min-w-[200px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[200px]">
               <label class="input-label">{{ t('admin.usage.group') }}</label>
               <Select v-model="filters.group_id" :options="groupOptions" searchable @change="applyFilters" />
             </div>
-            <div class="w-full sm:w-auto sm:min-w-[180px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[180px]">
               <label class="input-label">{{ t('usage.type') }}</label>
               <Select v-model="filters.request_type" :options="requestTypeOptions" @change="applyFilters" />
             </div>
-            <div class="w-full sm:w-auto sm:min-w-[180px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[180px]">
               <label class="input-label">{{ t('usage.compactionFilter') }}</label>
               <Select v-model="filters.native_compaction_v2" :options="compactionOptions" @change="applyFilters" />
             </div>
-            <div v-if="subscriptionFeatureEnabled" class="w-full sm:w-auto sm:min-w-[200px]">
+            <div v-if="subscriptionFeatureEnabled" data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[200px]">
               <label class="input-label">{{ t('admin.usage.billingType') }}</label>
               <Select v-model="filters.billing_type" :options="billingTypeOptions" @change="applyFilters" />
             </div>
-            <div class="w-full sm:w-auto sm:min-w-[200px]">
+            <div data-ui="select-anchor" class="w-full sm:w-auto sm:min-w-[200px]">
               <label class="input-label">{{ t('admin.usage.billingMode') }}</label>
               <Select v-model="filters.billing_mode" :options="billingModeOptions" @change="applyFilters" />
             </div>

From 2cac75c255bbb635758436f848553732284c4537 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Tue, 29 Sep 2026 13:44:20 +0800
Subject: [PATCH 06/11] wip(ui-el): perf pass partial - non-subject :has
 rewrites (interrupted by rate limit)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../monitor/MonitorTemplateManagerDialog.vue  |   4 +-
 .../src/components/admin/usage/UsageTable.vue |   2 +-
 .../admin/usage/UserTokenRanking.vue          |   2 +-
 .../payment/SubscriptionPlanCard.vue          |   1 +
 .../user/UserErrorRequestsTable.vue           |   2 +-
 .../user/dashboard/UserDashboardCharts.vue    |   4 +-
 .../user/dashboard/UserDashboardStats.vue     |   2 +-
 .../channel-monitor-v2/RelayPulseMatrix.vue   |   1 +
 .../features/image-studio/ImageStudioPage.vue |   2 +-
 frontend/src/styles/console/overlays.css      | 107 +++--
 .../styles/console/pages/dashboard-usage.css  | 124 +++---
 .../src/styles/console/pages/ops-channels.css | 412 +++++++++---------
 frontend/src/styles/console/pages/user.css    |  68 ++-
 .../pages/users-groups-proxies-keys.css       |  70 +--
 frontend/src/styles/console/shell.css         |   3 +-
 frontend/src/views/admin/DashboardView.vue    |   4 +-
 frontend/src/views/admin/GroupsView.vue       |   1 +
 frontend/src/views/admin/ProxiesView.vue      |   4 +-
 frontend/src/views/admin/RedeemView.vue       |   3 +-
 frontend/src/views/admin/UsageView.vue        |   6 +-
 .../ops/components/OpsDashboardHeader.vue     |   2 +-
 .../components/OpsErrorDistributionChart.vue  |   2 +-
 .../ops/components/OpsErrorTrendChart.vue     |   2 +-
 .../admin/ops/components/OpsLatencyChart.vue  |   2 +-
 .../components/OpsSwitchRateTrendChart.vue    |   2 +-
 .../components/OpsThroughputTrendChart.vue    |   2 +-
 frontend/src/views/user/KeysView.vue          |   4 +-
 frontend/src/views/user/UsageView.vue         |   4 +-
 28 files changed, 461 insertions(+), 381 deletions(-)

diff --git a/frontend/src/components/admin/monitor/MonitorTemplateManagerDialog.vue b/frontend/src/components/admin/monitor/MonitorTemplateManagerDialog.vue
index 3baf851ba27e..ee39e238379b 100644
--- a/frontend/src/components/admin/monitor/MonitorTemplateManagerDialog.vue
+++ b/frontend/src/components/admin/monitor/MonitorTemplateManagerDialog.vue
@@ -6,7 +6,7 @@
     @close="$emit('close')"
   >
     <!-- provider tabs -->
-    <div class="mb-4 border-b border-gray-200 dark:border-dark-700">
+    <div class="mb-4 border-b border-gray-200 dark:border-dark-700" data-ui="template-tabs">
       <div role="tablist" class="flex flex-wrap gap-1">
         <button
           v-for="tab in providerTabs"
@@ -30,7 +30,7 @@
     </div>
 
     <!-- active provider list -->
-    <div v-if="!editing" class="space-y-2">
+    <div v-if="!editing" class="space-y-2" data-ui="template-list">
       <div class="flex justify-end">
         <button class="btn btn-primary btn-sm" @click="openCreateForm">
           <Icon name="plus" size="sm" class="mr-1" />
diff --git a/frontend/src/components/admin/usage/UsageTable.vue b/frontend/src/components/admin/usage/UsageTable.vue
index d3f19eb8ba23..274c9094b849 100644
--- a/frontend/src/components/admin/usage/UsageTable.vue
+++ b/frontend/src/components/admin/usage/UsageTable.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="flat ? '' : 'card overflow-hidden'">
+  <div :class="flat ? '' : 'card overflow-hidden'" data-ui="records-card">
     <div
       v-if="showIpGeoToolbar"
       class="flex items-center justify-end gap-2 border-b border-gray-200 px-4 py-2 dark:border-dark-700"
diff --git a/frontend/src/components/admin/usage/UserTokenRanking.vue b/frontend/src/components/admin/usage/UserTokenRanking.vue
index afc97489b679..4459b8f1e84d 100644
--- a/frontend/src/components/admin/usage/UserTokenRanking.vue
+++ b/frontend/src/components/admin/usage/UserTokenRanking.vue
@@ -1,6 +1,6 @@
 <template>
   <!-- 用量页"用户排行"tab 内容：无卡片外观，依赖父级统一卡片；筛选/时间范围复用页面级筛选栏 -->
-  <div>
+  <div data-ui="token-ranking">
     <!-- Toolbar -->
     <div class="flex flex-wrap items-center justify-between gap-3 border-b border-gray-100 px-4 py-3 dark:border-dark-700/50 sm:px-6">
       <p class="text-xs text-gray-400 dark:text-gray-500">{{ t('admin.usage.tokenRanking.subtitle') }}</p>
diff --git a/frontend/src/components/payment/SubscriptionPlanCard.vue b/frontend/src/components/payment/SubscriptionPlanCard.vue
index 05172a9a517b..45005b076707 100644
--- a/frontend/src/components/payment/SubscriptionPlanCard.vue
+++ b/frontend/src/components/payment/SubscriptionPlanCard.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    data-ui="plan-card"
     :class="[
       'group relative flex flex-col overflow-hidden rounded-2xl border transition-all',
       'hover:shadow-xl hover:-translate-y-0.5',
diff --git a/frontend/src/components/user/UserErrorRequestsTable.vue b/frontend/src/components/user/UserErrorRequestsTable.vue
index 677e13b7daff..0d2fa1316327 100644
--- a/frontend/src/components/user/UserErrorRequestsTable.vue
+++ b/frontend/src/components/user/UserErrorRequestsTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex min-h-0 flex-1 flex-col">
-    <div class="card flex min-h-0 flex-1 flex-col overflow-hidden">
+    <div class="card flex min-h-0 flex-1 flex-col overflow-hidden" data-ui="records-card">
       <IpGeoBatchToolbar :ips="rows.map((r) => r.client_ip)" @failed="emit('ipGeoBatchFailed')" />
 
       <DataTable
diff --git a/frontend/src/components/user/dashboard/UserDashboardCharts.vue b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
index c2639c7856fb..932bec45f6c2 100644
--- a/frontend/src/components/user/dashboard/UserDashboardCharts.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="space-y-6">
     <!-- Date Range Filter -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="time-bar">
       <div class="flex flex-wrap items-center gap-4">
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2" data-ui="range-pill">
           <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.timeRange') }}:</span>
           <DateRangePicker :start-date="startDate" :end-date="endDate" @update:startDate="$emit('update:startDate', $event)" @update:endDate="$emit('update:endDate', $event)" @change="$emit('dateRangeChange', $event)" />
         </div>
diff --git a/frontend/src/components/user/dashboard/UserDashboardStats.vue b/frontend/src/components/user/dashboard/UserDashboardStats.vue
index 22e0b7ebbab0..297ef6ee2d56 100644
--- a/frontend/src/components/user/dashboard/UserDashboardStats.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardStats.vue
@@ -133,7 +133,7 @@
   </div>
 
   <!-- Row 3: Per-platform breakdown -->
-  <div v-if="!isSimple && platformCards.length > 0" class="card p-4">
+  <div v-if="!isSimple && platformCards.length > 0" class="card p-4" data-ui="platform-breakdown">
     <div class="mb-3 flex items-center justify-between">
       <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('dashboard.platformBreakdown') }}</h3>
       <span class="text-xs text-gray-500 dark:text-gray-400">
diff --git a/frontend/src/features/channel-monitor-v2/RelayPulseMatrix.vue b/frontend/src/features/channel-monitor-v2/RelayPulseMatrix.vue
index 678d959afc71..ba4a6537b4ee 100644
--- a/frontend/src/features/channel-monitor-v2/RelayPulseMatrix.vue
+++ b/frontend/src/features/channel-monitor-v2/RelayPulseMatrix.vue
@@ -1,6 +1,7 @@
 <template>
   <section
     class="card flex min-h-[360px] flex-col overflow-visible !rounded-3xl !border-0 !p-6 shadow-sm ring-1 ring-gray-900/5 dark:!bg-dark-800 dark:ring-dark-700"
+    data-ui="monitor-matrix"
   >
     <div class="card-header mb-4 flex shrink-0 flex-wrap items-start justify-between gap-3 !border-0 !p-0">
       <div class="min-w-0">
diff --git a/frontend/src/features/image-studio/ImageStudioPage.vue b/frontend/src/features/image-studio/ImageStudioPage.vue
index 2ca17cd87d23..51a83411c085 100644
--- a/frontend/src/features/image-studio/ImageStudioPage.vue
+++ b/frontend/src/features/image-studio/ImageStudioPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="mx-auto w-full max-w-[1500px] space-y-6">
+    <div data-ui="image-studio" class="mx-auto w-full max-w-[1500px] space-y-6">
       <header class="flex flex-wrap items-end justify-between gap-3">
         <div>
           <h1 class="text-2xl font-semibold text-gray-950 dark:text-white">{{ t('imageStudio.title') }}</h1>
diff --git a/frontend/src/styles/console/overlays.css b/frontend/src/styles/console/overlays.css
index 57059d86aa39..3e95fd00762d 100644
--- a/frontend/src/styles/console/overlays.css
+++ b/frontend/src/styles/console/overlays.css
@@ -348,7 +348,7 @@ html.flat-theme .account-tools-menu-item .account-tools-menu-icon svg {
   height: 13px;
 }
 
-html.flat-theme div[class~="fixed"]:has(> div > .account-tools-menu-item) > div > div[class~="px-2"][class~="py-2"] {
+html.flat-theme div[class~="fixed"] > div > div[class~="px-2"][class~="py-2"]:has(~ .account-tools-menu-item):not(uipad) {
   padding: 8px var(--ui-menu-row-x) 4px;
 }
 
@@ -756,10 +756,16 @@ html.flat-theme .modal-footer > div[class~="flex"]:only-child:is([class~="pt-2"]
 /* 3.6 The confirm dialog: message 13/21 ink-soft; its two utility buttons restated as the .btn recipes (controls'
    values: 30px, 0 12px, 13/19.5 600, radius 6, 1px edge; cancel = default, confirm = primary ink, a danger confirm
    = destructive). */
-html.flat-theme .modal-content:has([data-ui="confirm-ok"]) .modal-body > div > p:first-child {
-  font-size: 13px;
-  line-height: 21px;
-  color: rgb(var(--ui-ink-soft));
+html.flat-theme .modal-content:has([data-ui="confirm-ok"]) {
+  --uif-confirm: 1;
+}
+
+@container style(--uif-confirm: 1) {
+  html.flat-theme .modal-content .modal-body > div > p:first-child:not([data-uipad]) {
+    font-size: 13px;
+    line-height: 21px;
+    color: rgb(var(--ui-ink-soft));
+  }
 }
 
 html.flat-theme :is([data-ui="confirm-cancel"], [data-ui="confirm-ok"]) {
@@ -861,58 +867,69 @@ html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="
    as the header strip, 14 / 20 600 ink at 14 x 18 on the structural line, on the Modal's 28px row (57px); a close
    button the Modal's 28px framed close in that strip; the closing button row as the footer strip, 12 x 18 on the
    structural line, its small close button at the control height (55px, the Modal's footer). The h3- and icon-led ones
-   (TOTP, passkey, payment renewal, the settings page's) keep 3.7 / 10b. (final review V1-01) */
+   (TOTP, passkey, payment renewal, the settings page's) keep 3.7 / 10b. (final review V1-01)
+   Perf pass: the panel carries --uif-h2dlg / --uif-h2close (:has() in the subject only); its parts are styled
+   under @container style() on those flags, the :has() argument's specificity kept by :not(uipad...) (never matches). */
 html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) {
+  --uif-h2dlg: 1;
   padding: var(--ui-dialog-body-y) var(--ui-dialog-x);
 }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > h2 {
-  display: flex;
-  align-items: center;
-  min-height: calc(28px + 2 * var(--ui-dialog-head-y) + 1px);
-  margin: calc(-1 * var(--ui-dialog-body-y)) calc(-1 * var(--ui-dialog-x)) var(--ui-dialog-body-y);
-  border-bottom: 1px solid rgb(var(--ui-line));
-  padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 600;
-  letter-spacing: 0;
-  color: rgb(var(--ui-ink));
+html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> button[class~="absolute"][class~="right-4"][class~="top-4"]) {
+  --uif-h2close: 1;
 }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2):has(> button[class~="absolute"][class~="right-4"][class~="top-4"]) > h2 {
-  padding-right: calc(var(--ui-dialog-x) + 36px);
-}
+@container style(--uif-h2dlg: 1) {
+  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > h2:not(uipad) {
+    display: flex;
+    align-items: center;
+    min-height: calc(28px + 2 * var(--ui-dialog-head-y) + 1px);
+    margin: calc(-1 * var(--ui-dialog-body-y)) calc(-1 * var(--ui-dialog-x)) var(--ui-dialog-body-y);
+    border-bottom: 1px solid rgb(var(--ui-line));
+    padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    font-weight: 600;
+    letter-spacing: 0;
+    color: rgb(var(--ui-ink));
+  }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > button[class~="absolute"][class~="right-4"][class~="top-4"] {
-  top: var(--ui-dialog-head-y);
-  right: var(--ui-dialog-x);
-  border: 1px solid rgb(var(--ui-line));
-  background-color: rgb(var(--ui-surface));
-}
+  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="right-4"][class~="top-4"]:not(uipad) {
+    top: var(--ui-dialog-head-y);
+    right: var(--ui-dialog-x);
+    border: 1px solid rgb(var(--ui-line));
+    background-color: rgb(var(--ui-surface));
+  }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > button[class~="absolute"][class~="right-4"][class~="top-4"]:hover {
-  background-color: rgb(var(--ui-surface));
-  color: rgb(var(--ui-ink));
-}
+  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="right-4"][class~="top-4"]:not(uipad):hover {
+    background-color: rgb(var(--ui-surface));
+    color: rgb(var(--ui-ink));
+  }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > button[class~="absolute"][class~="right-4"][class~="top-4"]:focus-visible {
-  outline: 2px solid rgb(var(--ui-focus));
-  outline-offset: 2px;
-}
+  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="right-4"][class~="top-4"]:not(uipad):focus-visible {
+    outline: 2px solid rgb(var(--ui-focus));
+    outline-offset: 2px;
+  }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > form > div[class~="justify-end"]:last-child,
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > div:is([class~="justify-end"], [class~="text-right"]):last-child {
-  margin: var(--ui-dialog-body-y) calc(-1 * var(--ui-dialog-x)) calc(-1 * var(--ui-dialog-body-y));
-  border-top: 1px solid rgb(var(--ui-line));
-  padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
+  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > form > div[class~="justify-end"]:last-child:not(uipad),
+  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > div:is([class~="justify-end"], [class~="text-right"]):last-child:not(uipad) {
+    margin: var(--ui-dialog-body-y) calc(-1 * var(--ui-dialog-x)) calc(-1 * var(--ui-dialog-body-y));
+    border-top: 1px solid rgb(var(--ui-line));
+    padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
+  }
+
+  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > div[class~="text-right"]:last-child > .btn-sm:not(uipad) {
+    min-height: var(--ui-control-h);
+    padding: 0.265625rem 0.75rem;
+    font-size: 0.8125rem;
+    line-height: 1.21875rem;
+  }
 }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) > div[class~="text-right"]:last-child > .btn-sm {
-  min-height: var(--ui-control-h);
-  padding: 0.265625rem 0.75rem;
-  font-size: 0.8125rem;
-  line-height: 1.21875rem;
+@container style(--uif-h2dlg: 1) and style(--uif-h2close: 1) {
+  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > h2:not(uipad[data-uipad][data-uipad][data-uipad]):not(uipad) {
+    padding-right: calc(var(--ui-dialog-x) + 36px);
+  }
 }
 
 /* 3.8 Motion: the scrim fades in 200ms; the panel settles on the reference's 450ms panel curve from 98% with a 160ms
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
index 540cc46fc427..28f25fdfae9c 100644
--- a/frontend/src/styles/console/pages/dashboard-usage.css
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -14,6 +14,18 @@
  *   data-ui="user-usage"        views/user/UsageView.vue           root
  *   data-ui="usage-filters"     components/admin/usage/UsageFilters.vue root (the page's filter strip and the cleanup
  *                               dialog's copy of it)
+ *   data-ui="time-bar"          the 时间范围 / 粒度 card: admin DashboardView.vue, admin and user UsageView.vue,
+ *                               components/user/dashboard/UserDashboardCharts.vue
+ *   data-ui="range-pill"        the 时间范围 pill in that card (same four templates)
+ *   data-ui="select-anchor"     a labelled pill holding a Select (UsageFilters.vue, user UsageView.vue, the 粒度 pills);
+ *                               components/common/Select.vue anchors its list to it while the theme is on
+ *   data-ui="usage-records"     the records card of admin UsageView.vue
+ *   data-ui="token-ranking"     components/admin/usage/UserTokenRanking.vue root
+ *   data-ui="platform-breakdown" the 按平台拆分 card of components/user/dashboard/UserDashboardStats.vue
+ *   data-ui="records-card"      the table card of components/admin/usage/UsageTable.vue and
+ *                               components/user/UserErrorRequestsTable.vue
+ * Performance (ui-el PERF.md): no :has() in a non-subject position; the :has() left are in the subject compound of a
+ * hooked anchor, with child / sibling arguments (the open and focus states of the pills, the pagination join).
  * Shared components (KPI tiles, chart cards, DataTable, badges, pagination, menus, tooltips) keep the shared files' look;
  * the rules here only place them and restate what is specific to these pages. */
 
@@ -33,7 +45,7 @@ html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-
 
 /* Upstream frames 「时间范围 / 刷新 / 粒度」 in a card. The reference's /logs toolbar is a row on the canvas: its controls,
    8px apart, 8px above and below, a 1px structural line underneath (REF §7.1 "py-2 + 底线", crop logs-toolbar). */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] {
   padding: 8px 0;
   border: 0;
   border-bottom: 1px solid rgb(var(--ui-line));
@@ -42,7 +54,7 @@ html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-
   box-shadow: none;
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div {
   gap: 8px;
 }
 
@@ -52,7 +64,7 @@ html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-
    6, the control outline on the surface) holding the field label as its mono label (REF §5 .mono-label, --ui-label)
    and then the value, so a filter row is one line of 30px controls instead of labels stacked over 34px fields.
    The pills: the time range and the granularity, the admin filter strip (UsageFilters), the user usage filters. */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"],
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"],
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div,
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div {
   position: relative;
@@ -69,7 +81,7 @@ html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~=
 }
 
 /* the label: the mono label at the KPI labels' weight, on one line */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] > span:first-child,
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"] > span:first-child,
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > label,
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div > label {
   flex: none;
@@ -85,15 +97,15 @@ html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~=
 }
 
 /* the value: the Select / DateRangePicker trigger or the search field, drawn inside the pill (28px, no edge of its own) */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] > div,
-html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > div[class~="relative"]:has(> .select-trigger),
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"] > div,
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"] > div[class~="relative"],
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div > div[class~="relative"] {
   flex: 1 1 auto;
   width: auto;
   min-width: 0;
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger),
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger),
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div .select-trigger.select-trigger,
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div .select-trigger.select-trigger {
   width: 100%;
@@ -122,20 +134,26 @@ html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > i
 
 /* states: hover and an open menu take the focus line (the reference's house-select); keyboard focus on a trigger and any
    focus in a text field take the accent edge 2px wide (the fields' focus, controls.css 3.1) */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"]:is(:hover, :has(.select-trigger-open, .date-picker-trigger-open)),
-html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div:is(:hover, :has(.select-trigger-open)),
-html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div:is(:hover, :has(.select-trigger-open)) {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"]:hover,
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="range-pill"]:has(> div > .date-picker-trigger-open),
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="select-anchor"]:has(> div > div > .select-trigger-open),
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div:hover,
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"]:has(> div > .select-trigger-open),
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div:hover,
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"]:has(> div > .select-trigger-open) {
   border-color: rgb(var(--ui-line-focus));
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"]:has(> div > :is(.select-trigger, .date-picker-trigger):focus-visible),
-html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div:has(> input:focus, > div > .select-trigger:focus-visible),
-html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div:has(> div > .select-trigger:focus-visible) {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="range-pill"]:has(> div > .date-picker-trigger:focus-visible),
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="select-anchor"]:has(> div > div > .select-trigger:focus-visible),
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > .usage-filter-dropdown:has(> input:focus),
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"]:has(> div > .select-trigger:focus-visible),
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"]:has(> div > .select-trigger:focus-visible) {
   border-color: rgb(var(--ui-focus));
   box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger, .date-picker-trigger):focus-visible,
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger, .date-picker-trigger):focus-visible,
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div :is(.select-trigger, input):focus,
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div .select-trigger:focus-visible {
   border-color: transparent;
@@ -168,11 +186,11 @@ html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > b
    edge): the time range's panel takes the pill as its positioning box (the picker's own wrapper steps aside), flush
    with the pill's outer left edge and 4px under it (final review V1-02). The Select lists anchor to the pill through
    data-ui~="select-anchor" (components/common/Select.vue, theme on only). */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] > div[class~="relative"]:has(> .date-picker-trigger) {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="range-pill"] > div[class~="relative"] {
   position: static;
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"]:has(> div > div > [class~="relative"] > .date-picker-trigger) > div > div[class~="items-center"][class~="gap-2"] > div[class~="relative"]:has(> .date-picker-trigger) > .date-picker-dropdown {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="range-pill"] > div[class~="relative"] > .date-picker-dropdown {
   top: calc(100% + 5px);
   left: -1px;
   margin-top: 0;
@@ -253,7 +271,7 @@ html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > d
    a one-line option card (the reference's dialog option card, REF §8.11: radius 8, 1px structural line, the subtle fill
    at 60 %, the control outline on hover; a 26px neutral icon square) with its title and description side by side and
    the chevron. Nothing is dropped; the description wraps under the title only where the row is too narrow. */
-html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~="grid"] > button[class~="group"]) {
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -262,11 +280,11 @@ html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~=
   padding: 7px 7px 7px 14px;
 }
 
-html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~="grid"] > button[class~="group"]) > div:first-child {
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > div:first-child {
   margin: 0;
 }
 
-html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~="grid"] > button[class~="group"]) > div:first-child > h2 {
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > div:first-child > h2 {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   line-height: var(--ui-label-leading);
@@ -277,7 +295,7 @@ html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~=
   color: rgb(var(--ui-label));
 }
 
-html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:has(> [class~="grid"] > button[class~="group"]) > [class~="grid"] {
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > [class~="grid"] {
   display: flex;
   flex: 1 1 auto;
   flex-wrap: wrap;
@@ -318,26 +336,26 @@ html.flat-theme [data-ui="user-dashboard"] .card[class~="relative"][class~="over
 
 /* The card's head: the tab row (controls.css 7.3 underline tabs) set 6px in, so the first tab's text lines up with the
    table's 16px edge; the strip under it is section 4's. */
-html.flat-theme [data-ui="admin-usage"] > .card:has(> div > button[data-testid="usage-detail-tab"]) > div:first-child {
+html.flat-theme [data-ui="admin-usage"] > .card[data-ui~="usage-records"] > div:first-child {
   padding: 0 6px;
   border-bottom-color: rgb(var(--ui-line));
 }
 
 /* The IP-location bar above a table (UsageTable's own, IpGeoBatchToolbar in the error list): 6 / 16, the count 12px
    muted, the batch action a link-weight accent text button (REF §8.12 tray links: 12.5 / 600, underline on hover). */
-html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:is(:has(+ div[class~="overflow-auto"] > .table-wrapper), :has(+ .table-wrapper)) {
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"] {
   gap: 12px;
   padding: 6px 16px;
   border-bottom-color: rgb(var(--ui-line));
 }
 
-html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:is(:has(+ div[class~="overflow-auto"] > .table-wrapper), :has(+ .table-wrapper)) > span {
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"] > span {
   font-size: 12px;
   line-height: 18px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:is(:has(+ div[class~="overflow-auto"] > .table-wrapper), :has(+ .table-wrapper)) > button {
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"] > button {
   padding: 2px 0;
   border-radius: var(--ui-radius-sm);
   background-color: transparent;
@@ -347,7 +365,7 @@ html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~=
   color: var(--ui-link);
 }
 
-html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:is(:has(+ div[class~="overflow-auto"] > .table-wrapper), :has(+ .table-wrapper)) > button:hover:not(:disabled) {
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"] > button:hover:not(:disabled) {
   background-color: transparent;
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -436,18 +454,18 @@ html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="tokens"],
    and its table in the reference's table language (data.css section 3 gives the mono header): cells 10 / 12 (16 at the
    edges), 42px rows, hover fill; figures Geist Mono ink-soft, the total and the cost ink (decision 2: the cost is not
    green); the top three ranks a neutral disc, the sorted column's label a step darker with its arrow (not the accent). */
-html.flat-theme [data-ui="admin-usage"] div:has(> div[class~="border-b"] + div[class~="overflow-x-auto"] > table) > div[class~="border-b"] {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="border-b"] {
   padding: 6px 16px;
   border-bottom-color: rgb(var(--ui-line));
 }
 
-html.flat-theme [data-ui="admin-usage"] div:has(> div[class~="border-b"] + div[class~="overflow-x-auto"] > table) > div[class~="border-b"] :is(p, span)[class~="text-xs"] {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="border-b"] :is(p, span)[class~="text-xs"] {
   font-size: 12px;
   line-height: 18px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui="admin-usage"] div:has(> div[class~="border-b"] + div[class~="overflow-x-auto"] > table) > div[class~="border-b"] .select-trigger.select-trigger {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="border-b"] .select-trigger.select-trigger {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
@@ -466,63 +484,63 @@ html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table >
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody,
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody,
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr {
   border-color: rgb(var(--ui-line));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr {
   transition: background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr[class~="cursor-pointer"]:hover {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr[class~="cursor-pointer"]:hover {
   background-color: rgb(var(--ui-hover));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr > td {
   height: 42px;
   padding: 10px 12px;
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > :is(thead, tbody) > tr > :first-child {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > :is(thead, tbody) > tr > :first-child {
   padding-left: 16px;
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > :is(thead, tbody) > tr > :last-child {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > :is(thead, tbody) > tr > :last-child {
   padding-right: 16px;
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td[class~="text-right"] {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr > td[class~="text-right"] {
   font-family: var(--ui-font-mono);
   font-size: 12.5px;
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td[class~="text-right"]:is([class~="font-medium"], [class~="text-green-600"]) {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr > td[class~="text-right"]:is([class~="font-medium"], [class~="text-green-600"]) {
   font-weight: 500;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td[class~="font-medium"]:not([class~="text-right"]) {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr > td[class~="font-medium"]:not([class~="text-right"]) {
   font-size: 13px;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td[class~="font-medium"]:not([class~="text-right"]) > span {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr > td[class~="font-medium"]:not([class~="text-right"]) > span {
   font-family: var(--ui-font-mono);
   font-size: 12px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td:first-child > span {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr > td:first-child > span {
   font-family: var(--ui-font-mono);
   font-size: 12px;
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[class~="overflow-x-auto"] > table:has(> thead[class~="bg-gray-50"]) > tbody > tr > td:first-child > span[class~="rounded-full"] {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="overflow-x-auto"] > table > tbody > tr > td:first-child > span[class~="rounded-full"] {
   width: 22px;
   height: 22px;
   background-color: rgb(var(--ui-subtle));
@@ -551,11 +569,11 @@ html.flat-theme [data-ui="admin-usage"] .table-wrapper:not([data-table]) td[data
    section title the mono label with its count in Geist Mono at the right (REF §10.19); a platform's name 13/600, its
    total spend ink 600 (a value, not a state: decision 2); the rows' figures Geist Mono; the quota title the mono label;
    the bars keep their status colours (data.css section 8). */
-html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid="platform-card"]) {
+html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"][data-ui~="platform-breakdown"] {
   padding: 14px;
 }
 
-html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid="platform-card"]) > div:first-child > h3 {
+html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"][data-ui~="platform-breakdown"] > div:first-child > h3 {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   line-height: var(--ui-label-leading);
@@ -565,14 +583,14 @@ html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid=
   color: rgb(var(--ui-label));
 }
 
-html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid="platform-card"]) > div:first-child > span {
+html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"][data-ui~="platform-breakdown"] > div:first-child > span {
   font-family: var(--ui-font-mono);
   font-size: 11px;
   line-height: 16.5px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"]:has([data-testid="platform-card"]) > [class~="grid"] {
+html.flat-theme [data-ui="user-dashboard"] .card[class~="p-4"][data-ui~="platform-breakdown"] > [class~="grid"] {
   gap: 10px;
 }
 
@@ -743,12 +761,12 @@ html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-1"] .card > div[
 
 /* 用量明细 / 错误请求: upstream's .tab buttons over a 1px line read as the reference's underline tabs (CodeTabs, REF §8.15:
    the current tab ink with a 2px accent rule; the others muted, ink on hover), as on the admin records card. */
-html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab) {
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] {
   gap: 0;
   border-color: rgb(var(--ui-line));
 }
 
-html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab) > button.tab {
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] > button.tab {
   margin-bottom: -1px;
   padding: 0.5rem 0.625rem;
   border-bottom: 2px solid transparent;
@@ -757,12 +775,12 @@ html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab) > button.tab:hover {
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] > button.tab:hover {
   background-color: transparent;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab) > button.tab.tab-active {
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] > button.tab.tab-active {
   border-bottom-color: rgb(var(--ui-focus));
   background-color: transparent;
   color: rgb(var(--ui-ink));
@@ -770,14 +788,14 @@ html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:has(> button.tab
 
 /* The pagination under the records card is the card's footer (as data.css joins them on the table pages): the card
    loses its bottom corners, the pagination takes the card's edge and the bottom corners. */
-html.flat-theme [data-ui="user-usage"] > .card:has(+ [data-ui="pagination"]):has(.table-wrapper[data-table="usage"]),
-html.flat-theme [data-ui="user-usage"] .card:has(> .table-wrapper):has(+ div > [data-ui="pagination"]) {
+html.flat-theme [data-ui="user-usage"] > .card[data-ui~="records-card"]:has(+ [data-ui="pagination"]),
+html.flat-theme [data-ui="user-usage"] .card[data-ui~="records-card"]:has(+ div > [data-ui="pagination"]) {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-html.flat-theme [data-ui="user-usage"] > .card:has(.table-wrapper[data-table="usage"]) + [data-ui="pagination"]:not([hidden]),
-html.flat-theme [data-ui="user-usage"] .card:has(> .table-wrapper) + div > [data-ui="pagination"] {
+html.flat-theme [data-ui="user-usage"] > .card[data-ui~="records-card"] + [data-ui="pagination"]:not([hidden]),
+html.flat-theme [data-ui="user-usage"] .card[data-ui~="records-card"] + div > [data-ui="pagination"] {
   margin-top: 0;
   border: 1px solid rgb(var(--ui-line));
   border-top-width: 0;
diff --git a/frontend/src/styles/console/pages/ops-channels.css b/frontend/src/styles/console/pages/ops-channels.css
index 58ff75eb7426..b9e255fb9f5a 100644
--- a/frontend/src/styles/console/pages/ops-channels.css
+++ b/frontend/src/styles/console/pages/ops-channels.css
@@ -8,6 +8,9 @@
  *
  * Page roots and dialog bodies (data-ui hooks, one attribute each, no other template change):
  *   data-ui="ops-dashboard"      views/admin/ops/OpsDashboard.vue                      the page body (also fullscreen)
+ *   data-ui="ops-header"         views/admin/ops/components/OpsDashboardHeader.vue     the header card (toolbar, KPI)
+ *   data-ui="ops-chart"          the five chart cards' roots (OpsSwitchRateTrendChart, OpsThroughputTrendChart,
+ *                                OpsLatencyChart, OpsErrorDistributionChart, OpsErrorTrendChart)
  *   the ops dialogs' bodies §4; the table pages' roots §5; /monitor §6; orders §7; risk control §8; prompt audit §9
  *   (each section's head lists its hooks and files). Identity / category opt-ins (data.css §6.4) sit on the elements
  *   upstream colours by platform or category: ChannelsView.vue, ChannelMonitorView.vue (§5), MonitorFormDialog.vue and
@@ -15,7 +18,12 @@
  *   PlanEditDialog.vue (§7), OpsErrorLogTable.vue's type and group chips (category-chip, §4.3; the list is also
  *   使用记录's 错误请求 tab).
  * Shared components (Select, buttons, DataTable, badges, pagination, menus, tooltips, dialogs) keep the shared files'
- * look; the rules here restyle what upstream draws with utilities on these pages and place things. */
+ * look; the rules here restyle what upstream draws with utilities on these pages and place things.
+ *
+ * Re-style cost (PERF.md): no :has() outside a selector's subject compound. Where a rule would style the descendants
+ * of an element picked by :has(), that element carries a hook (above and in each section's head) or the state is
+ * passed down as a custom property; the :has() left sit in the subject compound of an anchor under a hooked root,
+ * with child arguments. */
 
 /* ================================================================== 1 · ops monitoring: rhythm */
 
@@ -42,7 +50,7 @@ html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] {
 /* Upstream frames the toolbar, the health / realtime panel, the six metric cards and the six system cards in one big
    card. The reference's /logs page has no such frame: a toolbar row on the canvas (its controls, 8px under a 1px
    structural line), a row of KPI tiles, then the cards (REF §7.1, crops logs-toolbar, kpi-row). */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] {
   gap: var(--ui-shell-gap, 12px);
   padding: 0;
   border-radius: 0;
@@ -51,7 +59,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) {
 }
 
 /* 2.1 toolbar row */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child {
   gap: 8px 12px;
   padding-bottom: 12px;
   border-bottom-color: rgb(var(--ui-line));
@@ -60,7 +68,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 /* The page title is the header row's (AppHeader: 「运维监控 · 运维监控与排障」, shown from 1024px); there the page's own h1
    stays for screen readers only. Fullscreen has no header row: its title is the page title (REF §5: 20/600). */
 @media (min-width: 1024px) {
-  html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > h1 {
+  html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > h1 {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -74,7 +82,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 }
 
 /* below 1024px the header row shows no title: the page's own title is the card title (13/600) */
-html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > h1 {
+html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > h1 {
   gap: 0;
   font-size: 13px;
   font-weight: 600;
@@ -82,7 +90,7 @@ html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rou
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > h1 {
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > h1 {
   gap: 0;
   font-size: 20px;
   font-weight: 600;
@@ -90,12 +98,12 @@ html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > h1 > svg {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > h1 > svg {
   display: none;
 }
 
 /* the status line: the reference's meta (Mono 11, faint), the ready dot a 6px status dot */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] {
   margin-top: 0;
   gap: 8px;
   font-family: var(--ui-font-mono);
@@ -105,45 +113,45 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] {
   gap: 6px;
   font-family: var(--ui-font);
   font-size: 12px;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span {
   width: 6px;
   height: 6px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-green-500"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-green-500"] {
   background-color: rgb(var(--ui-dot-ok));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-gray-400"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-gray-400"] {
   background-color: rgb(var(--ui-dot-idle));
 }
 
 /* the controls: one 30px row (the table pages' toolbar density), 8px apart */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child {
   gap: 8px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child .select-trigger.select-trigger {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child .select-trigger.select-trigger {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > div[class~="w-[1px]"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > div[class~="w-[1px]"] {
   margin: 0 4px;
   background-color: rgb(var(--ui-line));
 }
 
 /* refresh, alert rules, settings, fullscreen: the reference's default button (surface, control outline, ink 13/600,
    radius 6), icon-only ones square; no hue */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button {
   gap: 6px;
   height: var(--ui-control-h);
   min-width: var(--ui-control-h);
@@ -158,45 +166,45 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button[class~="w-8"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button[class~="w-8"] {
   width: var(--ui-control-h);
   padding: 0;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button:hover:not(:disabled) {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button:hover:not(:disabled) {
   border-color: rgb(var(--ui-line-focus));
   background-color: rgb(var(--ui-surface));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button:disabled {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button:disabled {
   opacity: 0.55;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div:first-child > div:last-child > button > svg {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button > svg {
   width: 14px;
   height: 14px;
 }
 
 /* 2.2 the KPI area: the health / realtime panel and the six metric tiles, 10px apart (REF §8.13 grid gap) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] {
   gap: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:last-child {
   gap: 10px;
 }
 
 /* The health / realtime panel is a card of its own (surface, 1px structural line, radius 8, 14px in). */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child {
   padding: 14px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div {
   gap: 16px;
 }
 
@@ -204,22 +212,22 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
    the window's segmented control on one line (228px). From 1280 the gauge column is as wide as the gauge and the rest
    goes to the realtime block; from 1024 to 1279 (a 300-400px panel) the two stack, the gauge above. */
 @media (min-width: 1280px) {
-  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
+  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
+  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
     padding-right: 16px;
     padding-left: 8px;
   }
 }
 
 @media (min-width: 1024px) and (max-width: 1279.98px) {
-  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
+  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
+  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
     padding-right: 0;
     border-right-width: 0;
   }
@@ -227,7 +235,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 
 /* health: the gauge keeps its status colour (it is the status); the score is a figure (600, tabular), its caption the
    mono label; hovering opens the diagnosis */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] {
   padding-top: 4px;
   padding-bottom: 4px;
   border-radius: var(--ui-radius-md);
@@ -235,15 +243,15 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   transition: background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover {
   background-color: rgb(var(--ui-subtle));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] circle[class~="text-gray-200"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] circle[class~="text-gray-200"] {
   color: rgb(var(--ui-subtle));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
   font-weight: 600;
   font-size: 24px;
   line-height: 30px;
@@ -251,13 +259,13 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   letter-spacing: -0.01em;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
   font-size: 36px;
   line-height: 42px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:last-child,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:last-child,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:first-child {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 400;
@@ -269,16 +277,16 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 
 /* hovered (the diagnosis opens) the panel takes the grouped fill; the two captions go muted there in light (the label
    grey is 4.35:1 on that fill, the muted grey 4.8:1; dark keeps the label grey, 5.7:1) */
-html.flat-theme:not(.dark) [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="relative"] > div[class~="absolute"] > span:last-child,
-html.flat-theme:not(.dark) [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="mt-4"] > div:first-child {
+html.flat-theme:not(.dark) [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="relative"] > div[class~="absolute"] > span:last-child,
+html.flat-theme:not(.dark) [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="mt-4"] > div:first-child {
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] {
   margin-top: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:last-child {
   margin-top: 2px;
   font-size: 12px;
   font-weight: 600;
@@ -287,7 +295,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 
 /* the diagnosis popover: the reference's detail popover (radius 6, control outline, surface, the popover shadow,
    12 / 12 in); its status glyphs keep their colours, the rest is ink and muted */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div {
   padding: 12px;
   border: 1px solid rgb(var(--ui-line-strong));
   border-radius: var(--ui-radius-md);
@@ -295,7 +303,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   box-shadow: var(--ui-shadow-popover);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 {
   margin-bottom: 10px;
   padding-bottom: 8px;
   border-color: rgb(var(--ui-line));
@@ -305,26 +313,26 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 > svg {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 > svg {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:first-child {
   font-weight: 500;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:nth-child(2) {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:nth-child(2) {
   font-size: 11px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div[class~="text-blue-600"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div[class~="text-blue-600"] {
   font-size: 11px;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div[class~="mt-3"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div[class~="mt-3"] {
   border-color: rgb(var(--ui-line));
   font-size: 11px;
   color: rgb(var(--ui-faint));
@@ -333,21 +341,21 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 /* realtime: the title a mono label (the decorative ping and the animated pulse line go: they carry no data), the window
    choice the reference's time segmented control (REF §8.5, crop segmented-time: controls.css 7.1's frame and segment
    metrics, on one line), the current QPS / TPS figures 20/600, peak and average 13/600, units Mono 10 */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child {
   margin-bottom: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child > div[class~="h-3"],
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="h-8"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child > div[class~="h-3"],
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="h-8"] {
   display: none;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child {
   gap: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child h3,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child div[class~="uppercase"][class~="font-bold"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child h3,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child div[class~="uppercase"][class~="font-bold"] {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 400;
@@ -357,7 +365,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   color: rgb(var(--ui-label));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child {
   flex-wrap: nowrap;
   gap: 0;
   padding: var(--ctl-seg-inset);
@@ -366,7 +374,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button {
   padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
   border-radius: var(--ui-radius-md);
   background-color: transparent;
@@ -379,28 +387,28 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button:hover {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button:hover {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button[class~="bg-blue-500"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button[class~="bg-blue-500"] {
   background-color: rgb(var(--ui-ink));
   color: rgb(var(--ui-on-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child span[class~="font-black"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child span[class~="font-black"] {
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-black"] {
+html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-black"] {
   font-size: 20px;
   line-height: 28px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-bold"],
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] span[class~="text-xs"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-bold"],
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] span[class~="text-xs"] {
   font-family: var(--ui-font-mono);
   font-size: 10px;
   font-weight: 500;
@@ -408,7 +416,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] > div > div:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] > div > div:last-child {
   margin-top: 2px;
   font-size: 13px;
   line-height: 19.5px;
@@ -418,7 +426,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
    mono label, the figure 15/600 tabular, the detail rows 12px with Mono figures). A value upstream colours green only
    because it is inside its threshold is ink (the reference colours a figure only when something is wrong); warning
    and critical keep their colour, and a critical tile is the reference's alert tile (danger line and soft fill). */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] {
   display: flex;
   flex-direction: column;
   padding: 8px 12px 10px;
@@ -427,41 +435,41 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child {
   min-height: 18px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span:first-child,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div > div > div:first-child div[class~="uppercase"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span:first-child,
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div > div > div:first-child div[class~="uppercase"] {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 400;
   line-height: var(--ui-label-leading);
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
-  color: rgb(var(--ui-label));
+  color: rgb(var(--ops-tile-label, var(--ui-label)));
 }
 
 /* the SLA tile's threshold dot: the reference's 6px status dot */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="h-1.5"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="h-1.5"] {
   width: 6px;
   height: 6px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-green-500"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-green-500"] {
   background-color: rgb(var(--ui-dot-ok));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-yellow-500"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-yellow-500"] {
   background-color: rgb(var(--ui-dot-warn));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-red-500"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-red-500"] {
   background-color: rgb(var(--ui-dot-bad));
 }
 
 /* 「明细」: a link (the accent text, underline on hover), not a blue label */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) button[class~="text-[10px]"][class~="text-blue-500"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] button[class~="text-[10px]"][class~="text-blue-500"] {
   font-size: 11.5px;
   font-weight: 500;
   line-height: 16px;
@@ -471,7 +479,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) b
 }
 
 /* the tile's figure: 15/600 tabular; fullscreen 22 (the wall display) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
   margin-top: 2px;
   font-size: 15px;
   font-weight: 600;
@@ -480,21 +488,21 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   letter-spacing: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
   font-size: 22px;
   line-height: 30px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] {
   margin-top: 2px;
   gap: 4px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > div[class~="text-3xl"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > div[class~="text-3xl"] {
   margin-top: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > span {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > span {
   font-family: var(--ui-font-mono);
   font-size: 10.5px;
   font-weight: 400;
@@ -502,103 +510,101 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
 }
 
 /* the detail rows: label 12px muted, figure Mono 12 ink-soft (REF §8.9 breakdown rows), 2px apart */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:is([class~="space-y-2"], [class~="space-y-1"], [class~="grid"], [class~="mt-3"]):not([class~="h-2"]) {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:is([class~="space-y-2"], [class~="space-y-1"], [class~="grid"], [class~="mt-3"]):not([class~="h-2"]) {
   margin-top: 6px;
   font-size: 12px;
   line-height: 18px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-2"] > :not([hidden]) ~ :not([hidden]),
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-1"] > :not([hidden]) ~ :not([hidden]) {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-2"] > :not([hidden]) ~ :not([hidden]),
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-1"] > :not([hidden]) ~ :not([hidden]) {
   margin-top: 2px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="grid"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="grid"] {
   row-gap: 2px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-500"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-500"] {
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"] {
   font-family: var(--ui-font-mono);
   font-size: 12px;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"][class~="text-gray-900"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"][class~="text-gray-900"] {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-400"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-400"] {
   font-family: var(--ui-font-mono);
   font-size: 10.5px;
   color: rgb(var(--ui-muted));
 }
 
 /* the SLA bar: the reference's usage bar (a capsule on the grouped fill; the fill keeps its status colour) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] {
   height: 6px;
   margin-top: 8px;
   background-color: rgb(var(--ui-subtle));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] + div[class~="mt-3"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] + div[class~="mt-3"] {
   margin-top: 6px;
 }
 
 /* status colours of the figures: inside the threshold = ink; warning and critical keep theirs */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) :is(div, span)[class~="text-green-600"],
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) :is(div, span)[class~="text-emerald-600"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] :is(div, span)[class~="text-green-600"],
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] :is(div, span)[class~="text-emerald-600"] {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-green-600"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-green-600"] {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) :is(div, span)[class~="text-yellow-600"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] :is(div, span)[class~="text-yellow-600"] {
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) :is(div, span):is([class~="text-red-600"], [class~="text-rose-600"]) {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] :is(div, span):is([class~="text-red-600"], [class~="text-rose-600"]) {
   color: rgb(var(--ui-danger));
 }
 
 /* the alert tiles: critical = the reference's danger KPI (REF §8.13 crop kpi-card-danger: the danger line, the soft
-   fill, the figure in danger); warning the same in the warning colour; the label steps to muted on the tint */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"][class~="text-red-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-red-600"]),
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div > div:has(> div[class~="text-lg"][class~="text-rose-600"]) {
+   fill, the figure in danger); warning the same in the warning colour; the label steps to muted on the tint (the tile
+   sets --ops-tile-label, the label rule above reads it: no :has() over the label's ancestors) */
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"][class~="text-red-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-red-600"]),
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div > div:has(> div[class~="text-lg"][class~="text-rose-600"]) {
   border-color: rgb(var(--ui-danger));
   background-color: rgb(var(--ui-danger-soft));
+  --ops-tile-label: var(--ui-muted);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"][class~="text-yellow-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-yellow-600"]),
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div > div:has(> div[class~="text-lg"][class~="text-yellow-600"]) {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"][class~="text-yellow-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-yellow-600"]),
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div > div:has(> div[class~="text-lg"][class~="text-yellow-600"]) {
   border-color: rgb(var(--ui-warning));
   background-color: rgb(var(--ui-warning-soft));
-}
-
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"]:is([class~="text-red-600"], [class~="text-yellow-600"]), > div[class~="items-baseline"] > div[class~="text-3xl"]:is([class~="text-red-600"], [class~="text-yellow-600"])) > div:first-child > div > span:first-child,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div > div:has(> div[class~="text-lg"]:is([class~="text-rose-600"], [class~="text-yellow-600"])) > div:first-child div[class~="uppercase"] {
-  color: rgb(var(--ui-muted));
+  --ops-tile-label: var(--ui-muted);
 }
 
 /* 2.4 the system tiles (CPU, memory, database, Redis, goroutines, jobs): a KPI row of their own, 10px apart, each the
    reference's StatTile (label, figure 15/600, the detail 11px muted with Mono figures) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] {
   margin-top: 0;
   padding-top: 0;
   border-top-width: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] {
   gap: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div {
   display: flex;
   flex-direction: column;
   min-height: 76px;
@@ -608,7 +614,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
   margin-top: 2px;
   font-size: 15px;
   font-weight: 600;
@@ -616,27 +622,29 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) >
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
+html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
   font-size: 20px;
   line-height: 28px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] {
   margin-top: 2px;
   font-size: 11px;
   line-height: 16.5px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:has(h1) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] span[class~="font-mono"] {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] span[class~="font-mono"] {
   color: rgb(var(--ui-ink-soft));
 }
 
 /* ================================================================== 3 · ops monitoring: cards */
 
 /* 3.1 Every card on the page (concurrency, the five charts, alert events, OpenAI token stats, system logs): the
-   reference's card (REF §8.7 / §8.14: surface, 1px structural line, radius 8, no shadow, 14px in). */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)),
+   reference's card (REF §8.7 / §8.14: surface, 1px structural line, radius 8, no shadow, 14px in). The rounded-3xl
+   ring-1 cards are every such card but the header (data-ui="ops-header"); the chart cards carry data-ui="ops-chart";
+   the alert events card is the only one that is a direct child of the page. */
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]),
 html.flat-theme [data-ui~="ops-dashboard"] > section:is([class~="rounded-2xl"], [class~="card"]),
 html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] {
   padding: 14px;
@@ -647,7 +655,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] {
 }
 
 /* the card head: 12px above the body, controls 26px */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-4"]:first-child,
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-4"]:first-child,
 html.flat-theme [data-ui~="ops-dashboard"] > section:is([class~="rounded-2xl"], [class~="card"]) > div[class~="mb-4"]:first-child,
 html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] > div[class~="mb-4"]:first-child {
   min-height: 26px;
@@ -657,11 +665,11 @@ html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] > div[
 /* titles: a chart card's title is the mono label (REF §8.14 "SPEND OVER TIME"); a list or table card's title is the
    reference's card title 13/600 ink with its description 12px muted ("Request history"). The coloured glyph before a
    title is decoration and goes; the help icon stays. */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) h3 > svg:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) h3 > svg:first-child {
   display: none;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)):has(canvas, > div > div > [class~="animate-pulse"], > div[class~="min-h-0"] > div > .empty-state, > div[class~="relative"] > div > .empty-state) h3 {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"])[data-ui~="ops-chart"] h3 {
   gap: 0;
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
@@ -672,7 +680,7 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   color: rgb(var(--ui-label));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)):not(:has(canvas, > div > div > [class~="animate-pulse"], > div[class~="min-h-0"] > div > .empty-state, > div[class~="relative"] > div > .empty-state)) h3,
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]):not([data-ui~="ops-chart"]) h3,
 html.flat-theme [data-ui~="ops-dashboard"] section:is([class~="rounded-2xl"], [class~="card"]) h3 {
   gap: 0;
   font-size: 13px;
@@ -681,7 +689,7 @@ html.flat-theme [data-ui~="ops-dashboard"] section:is([class~="rounded-2xl"], [c
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)), section:is([class~="rounded-2xl"], [class~="card"])) > div:first-child > div > p[class~="text-xs"] {
+html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]), section:is([class~="rounded-2xl"], [class~="card"])) > div:first-child > div > p[class~="text-xs"] {
   margin-top: 2px;
   font-size: 12px;
   line-height: 18px;
@@ -691,7 +699,7 @@ html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~=
 /* the head's small buttons (明细 / 重置 / 下载 / 请求错误 / 上游错误, the concurrency view toggle and refresh, the alert
    refresh): the reference's default button at the small size (26px, radius 6, control outline, surface, 12/600,
    ink-soft, ink on hover) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]) {
   gap: 6px;
   min-width: 26px;
   height: 26px;
@@ -706,31 +714,31 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):hover:not(:disabled) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):hover:not(:disabled) {
   border-color: rgb(var(--ui-line-focus));
   background-color: rgb(var(--ui-surface));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):disabled {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):disabled {
   opacity: 0.55;
 }
 
 /* a pressed toggle (the concurrency card's per-user view) is the reference's active filter: accent line at 40 %, the
    accent tint, accent glyph */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button[class~="bg-blue-100"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button[class~="bg-blue-100"] {
   border-color: rgb(var(--ui-primary) / 0.4);
   background-color: rgb(var(--ui-primary-soft));
   color: var(--ui-link);
 }
 
 /* the concurrency card's two glyph-only buttons (px-2 py-1, no label) are square */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button:is([class~="bg-gray-100"], [class~="bg-blue-100"])[class~="px-2"][class~="py-1"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button:is([class~="bg-gray-100"], [class~="bg-blue-100"])[class~="px-2"][class~="py-1"] {
   width: 26px;
   padding: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child button > svg {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button > svg {
   width: 13px;
   height: 13px;
 }
@@ -751,12 +759,12 @@ html.flat-theme [data-ui~="ops-dashboard"] [data-testid="throughput-chart-toolba
 
 /* the throughput drilldown chips (a platform or a group and its request count): the reference's provider chip shape
    (radius 4, the control outline, Geist Mono 10.5 uppercase ink-soft, the count faint) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-3"][class~="flex-wrap"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-3"][class~="flex-wrap"] {
   gap: 6px;
   margin-bottom: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-3"][class~="flex-wrap"] > button {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-3"][class~="flex-wrap"] > button {
   gap: 6px;
   padding: 2px 7px;
   border: 1px solid rgb(var(--ui-line-strong));
@@ -771,52 +779,52 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-3"][class~="flex-wrap"] > button:hover {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-3"][class~="flex-wrap"] > button:hover {
   border-color: rgb(var(--ui-line-focus));
   background-color: rgb(var(--ui-surface));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="mb-3"][class~="flex-wrap"] > button > span:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-3"][class~="flex-wrap"] > button > span:last-child {
   color: rgb(var(--ui-faint));
 }
 
 /* the error distribution's summary under the doughnut: 「最高: 上游」 ink-soft with the slice's own colour kept on the
    value, the legend as the reference's (8px squares, 11px muted) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] {
   margin-top: 10px;
   gap: 6px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="font-bold"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="font-bold"] {
   font-size: 12px;
   font-weight: 500;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] {
   gap: 12px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div {
   gap: 6px;
   font-size: 11px;
   line-height: 16.5px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:first-child {
   width: 8px;
   height: 8px;
   border-radius: 2px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:last-child {
   color: rgb(var(--ui-muted));
   font-variant-numeric: tabular-nums;
 }
 
 /* loading text in a chart's place: the reference's quiet 12px muted line (no pulse) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="animate-pulse"][class~="text-sm"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="animate-pulse"][class~="text-sm"] {
   animation: none;
   font-size: 12px;
   color: rgb(var(--ui-muted));
@@ -827,20 +835,20 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
    Mono ink-soft, the load share Mono (normal ink-soft; the load colours stay on the bar and from 50 % up), the 6px bar
    on the grouped fill, the account and queue chips as the reference's small status chips. The band's label and count
    are muted, not the label grey: on the band's fill the label grey is 4.50:1, the muted grey 5.0:1. */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"]:has(> div[class~="bg-gray-50"]) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"]:has(> div[class~="bg-gray-50"]) {
   margin: 0 -14px -14px;
   border-width: 1px 0 0;
   border-color: rgb(var(--ui-line));
   border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child {
   padding: 6px 16px;
   border-color: rgb(var(--ui-line));
   background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:first-child {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 400;
@@ -849,97 +857,97 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:last-child {
   font-family: var(--ui-font-mono);
   font-size: 11px;
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] {
   padding: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > :not([hidden]) ~ :not([hidden]) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > :not([hidden]) ~ :not([hidden]) {
   margin-top: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div {
   padding: 9px 16px 10px;
   border-bottom: 1px solid rgb(var(--ui-line));
   border-radius: 0;
   background-color: transparent;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child {
   margin-bottom: 6px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] :is(span, div)[class~="text-[11px]"][class~="font-bold"]:not([class~="font-mono"]) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] :is(span, div)[class~="text-[11px]"][class~="font-bold"]:not([class~="font-mono"]) {
   font-size: 12px;
   font-weight: 600;
   line-height: 18px;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="font-mono"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="font-mono"] {
   font-size: 11.5px;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="font-bold"]:not([class~="font-mono"]) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="font-bold"]:not([class~="font-mono"]) {
   font-family: var(--ui-font-mono);
   font-size: 11.5px;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-green-600"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-green-600"] {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span:is([class~="text-yellow-600"], [class~="text-orange-600"]) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span:is([class~="text-yellow-600"], [class~="text-orange-600"]) {
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-red-600"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-red-600"] {
   color: rgb(var(--ui-danger));
 }
 
 /* the row's bar: 6px on the grouped fill; the fill keeps the load colour (green / yellow / orange / red) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="h-1.5"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="h-1.5"] {
   background-color: rgb(var(--ui-subtle));
 }
 
 /* the account line under the bar: 11px, the available count ink 600 (a figure, not a status), the share muted */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] {
   gap: 4px 10px;
   font-size: 11px;
   line-height: 16.5px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > svg {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > svg {
   width: 12px;
   height: 12px;
   color: rgb(var(--ui-faint));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span {
   font-family: var(--ui-font-mono);
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span > span[class~="text-green-600"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span > span[class~="text-green-600"] {
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
 
 /* the small status chips in the rows (rate limited = warning, errors = danger, queued = the reference's backlog tone,
    available / cooling down): the reference's Chip (capsule, Geist Mono, soft status fill) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span:is([class~="bg-amber-100"], [class~="bg-red-100"], [class~="bg-purple-100"], [class~="bg-green-100"], [class~="bg-gray-100"]) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span:is([class~="bg-amber-100"], [class~="bg-red-100"], [class~="bg-purple-100"], [class~="bg-green-100"], [class~="bg-gray-100"]) {
   padding: 0 6px;
   border-radius: 9999px;
   font-family: var(--ui-font-mono);
@@ -949,46 +957,46 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   letter-spacing: 0.01em;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-amber-100"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-amber-100"] {
   background-color: rgb(var(--ui-warning-soft));
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-red-100"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-red-100"] {
   background-color: rgb(var(--ui-danger-soft));
   color: rgb(var(--ui-danger));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-purple-100"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-purple-100"] {
   background-color: rgb(var(--ui-purple-soft));
   color: rgb(var(--ui-purple));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-green-100"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-green-100"] {
   background-color: rgb(var(--ui-success-soft));
   color: rgb(var(--ui-success));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-gray-100"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-gray-100"] {
   background-color: rgb(var(--ui-subtle));
   color: rgb(var(--ui-muted));
 }
 
 /* the empty and disabled states of the list */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="border-dashed"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="border-dashed"] {
   border-color: rgb(var(--ui-line-strong));
   border-radius: var(--ui-radius-lg);
   font-size: 13px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="rounded-xl"][class~="border"] > div[class~="flex-1"][class~="items-center"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="flex-1"][class~="items-center"] {
   font-size: 13px;
   color: rgb(var(--ui-muted));
 }
 
 /* an error line inside a card (upstream: a red-50 box) = the reference's danger notice (radius 6, soft fill, 12px) */
-html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)), section) > div[class~="bg-red-50"] {
+html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]), section) > div[class~="bg-red-50"] {
   border: 1px solid rgb(var(--ui-danger) / 0.3);
   border-radius: var(--ui-radius-md);
   background-color: rgb(var(--ui-danger-soft));
@@ -1002,7 +1010,7 @@ html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~=
    ones are drawn the same here), cells 10 / 12
    (16 at the edges), 13px text, rows divided by 1px lines, hover = --ui-hover where the row opens something. DataTables
    (the error lists) keep data.css. */
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > thead > tr > th {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > thead > tr > th {
   padding: 10px 12px;
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
@@ -1016,69 +1024,69 @@ html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-u
   white-space: nowrap;
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > thead {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > thead {
   border-bottom-width: 0;
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > thead + tbody {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > thead + tbody {
   border-top-width: 0;
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody {
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr {
   border-color: rgb(var(--ui-line));
   transition: background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr > td {
   padding: 10px 12px;
   font-size: 13px;
   line-height: 19.5px;
   vertical-align: middle;
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > :is(thead, tbody) > tr > :first-child {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > :is(thead, tbody) > tr > :first-child {
   padding-left: 16px;
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > :is(thead, tbody) > tr > :last-child {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > :is(thead, tbody) > tr > :last-child {
   padding-right: 16px;
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr:is([class~="hover:bg-gray-50"], [class~="cursor-pointer"]):hover {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr:is([class~="hover:bg-gray-50"], [class~="cursor-pointer"]):hover {
   background-color: rgb(var(--ui-hover));
 }
 
 /* the cells' own text sizes (text-xs, 11px) read as the reference's: 13px for text, Mono 12 for times, ids and figures,
    12px muted for the second line */
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td[class~="text-xs"] {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr > td[class~="text-xs"] {
   font-size: 13px;
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td[class~="whitespace-nowrap"][class~="text-xs"]:first-child,
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td span[class~="font-mono"] {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr > td[class~="whitespace-nowrap"][class~="text-xs"]:first-child,
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr > td span[class~="font-mono"] {
   font-family: var(--ui-font-mono);
   font-size: 12px;
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td :is(div, span)[class~="text-[11px]"] {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr > td :is(div, span)[class~="text-[11px]"] {
   font-size: 12px;
   line-height: 18px;
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td :is(div)[class~="text-[10px]"] {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr > td :is(div)[class~="text-[10px]"] {
   font-family: var(--ui-font-mono);
   font-size: 11px;
   line-height: 16.5px;
   color: rgb(var(--ui-faint));
 }
 
-html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(:has(> tbody.table-body)) > tbody > tr > td :is(div, span)[class~="font-bold"]:not([class~="rounded-full"]):not([class~="rounded-md"]) {
+html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-ui~="risk-page"], [data-ui~="risk-settings"], [data-ui~="prompt-audit-page"]) table:not(.table-wrapper > table) > tbody > tr > td :is(div, span)[class~="font-bold"]:not([class~="rounded-full"]):not([class~="rounded-md"]) {
   font-weight: 600;
 }
 
@@ -1091,7 +1099,7 @@ html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[
   container-type: inline-size;
 }
 
-html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"] > table:not(:has(> tbody.table-body)) > tbody > tr:only-child > td[colspan]:only-child:not([aria-busy]) {
+html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"] > table:not(.table-wrapper > table) > tbody > tr:only-child > td[colspan]:only-child:not([aria-busy]) {
   position: relative;
   height: 152px;
   padding: 16px calc(100% - 100cqw + 32px) 16px 32px;
@@ -1105,7 +1113,7 @@ html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[
   white-space: normal;
 }
 
-html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"] > table:not(:has(> tbody.table-body)) > tbody > tr:only-child > td[colspan]:only-child:not([aria-busy])::after {
+html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"] > table:not(.table-wrapper > table) > tbody > tr:only-child > td[colspan]:only-child:not([aria-busy])::after {
   content: "";
   position: absolute;
   top: 16px;
@@ -1162,23 +1170,23 @@ html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-u
 /* 3.5 Alert events: the card's head holds 30px controls (four Selects and refresh, the table pages' toolbar density);
    the events table sits flush in the card (REF §8.7 history card: the head inset, then the table from edge to edge on
    a 1px line), 600px of it scrolls. */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child:has(.select-trigger) .select-trigger.select-trigger {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-4"]:first-child .select-trigger.select-trigger {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child:has(.select-trigger) > div:last-child {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-4"]:first-child > div:last-child {
   gap: 8px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div:first-child:has(.select-trigger) > div:last-child > button {
+html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-4"]:first-child > div:last-child > button {
   height: var(--ui-control-h);
   padding: 0 12px;
   font-size: 13px;
   line-height: 19.5px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) > div[class~="overflow-hidden"][class~="rounded-xl"][class~="border"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="overflow-hidden"][class~="rounded-xl"][class~="border"] {
   margin: 0 -14px -14px;
   border-width: 1px 0 0;
   border-color: rgb(var(--ui-line));
@@ -1186,25 +1194,25 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
 }
 
 /* the title cell keeps its two lines: the title 13/600 ink, the rule text 12px muted */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) table > tbody > tr > td[class~="min-w-[260px]"] > div:first-child {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) table > tbody > tr > td[class~="min-w-[260px]"] > div:first-child {
   font-size: 13px;
   line-height: 19.5px;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) table > tbody > tr > td[class~="min-w-[260px]"] > div:last-child:not(:first-child) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) table > tbody > tr > td[class~="min-w-[260px]"] > div:last-child:not(:first-child) {
   color: rgb(var(--ui-muted));
 }
 
 /* the e-mail column: the state glyph keeps success / muted, the word 12px ink-soft */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) table > tbody > tr > td[class~="text-right"] span[class~="text-[11px]"] {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) table > tbody > tr > td[class~="text-right"] span[class~="text-[11px]"] {
   font-size: 12px;
   font-weight: 500;
   color: rgb(var(--ui-ink-soft));
 }
 
 /* the list's end marker and loading line */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not(:has(h1)) div[class~="max-h-[600px]"] > div:last-child:is([class~="py-3"]) {
+html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="max-h-[600px]"] > div:last-child:is([class~="py-3"]) {
   border-top: 1px solid rgb(var(--ui-line));
   font-size: 12px;
   color: rgb(var(--ui-muted));
@@ -2489,11 +2497,11 @@ html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div >
   box-shadow: none;
 }
 
-html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div:is(:hover, :has(.select-trigger-open)) {
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div:is(:hover, :has(> div > .select-trigger-open)) {
   border-color: rgb(var(--ui-line-focus));
 }
 
-html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div:has(input:focus, .select-trigger:focus-visible) {
+html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div:has(> input:focus, > div > input:focus, > div > .select-trigger:focus-visible) {
   border-color: rgb(var(--ui-focus));
   box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
 }
@@ -2742,12 +2750,13 @@ html.flat-theme :is(#channel-monitor-form, .modal-content) div[class~="rounded-l
   background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
 
-/* 5.8 请求模板管理 (MonitorTemplateManagerDialog; its provider tablist is the only flex-wrap gap-1 tablist): the provider
+/* 5.8 请求模板管理 (MonitorTemplateManagerDialog; hooks: data-ui="template-tabs" on the tab strip, data-ui="template-list"
+   on the template list; its provider tablist is the only flex-wrap gap-1 tablist): the provider
    tabs are the shared underline tabs (controls.css 7.3, the channel dialog's: 8 x 10, 12.5 / 600, muted, ink on
    hover; the current one ink over the 2px accent rule), their counts the small Mono count; a template's mode and API
    mode are categories (decision 2): the reference's neutral chip (data.css category-chip), whatever hue upstream gave
    them (merge amber, replace purple, Responses blue, Chat Completions green). */
-html.flat-theme .modal-content div[class~="mb-4"][class~="border-b"]:has(> div[role="tablist"][class~="flex-wrap"][class~="gap-1"]) {
+html.flat-theme .modal-content div[class~="mb-4"][class~="border-b"][data-ui~="template-tabs"] {
   border-color: rgb(var(--ui-line));
 }
 
@@ -2782,7 +2791,7 @@ html.flat-theme .modal-content div[role="tablist"][class~="flex"][class~="flex-w
   line-height: 16px;
 }
 
-html.flat-theme .modal-content:has(div[role="tablist"][class~="flex"][class~="flex-wrap"][class~="gap-1"]) div[class~="items-center"][class~="gap-2"] > span[class~="inline-flex"][class~="rounded-md"][class~="px-1.5"][class~="py-0.5"][class~="text-xs"] {
+html.flat-theme .modal-content [data-ui~="template-list"] div[class~="items-center"][class~="gap-2"] > span[class~="inline-flex"][class~="rounded-md"][class~="px-1.5"][class~="py-0.5"][class~="text-xs"] {
   padding: 1px 6px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-sm);
@@ -2796,7 +2805,8 @@ html.flat-theme .modal-content:has(div[role="tablist"][class~="flex"][class~="fl
 
 /* Hooks (one attribute each): data-ui="monitor-hero" components/user/monitor/MonitorHero.vue (root), data-ui="monitor-grid"
    components/user/monitor/MonitorCardGrid.vue (root), data-ui="monitor-detail" components/user/MonitorDetailDialog.vue (the
-   table's wrapper), data-ui="monitor-v2" views/user/ChannelStatusV2View.vue (root). Identity: MonitorCard.vue's logo tile
+   table's wrapper), data-ui="monitor-v2" views/user/ChannelStatusV2View.vue (root), data-ui="monitor-matrix"
+   features/channel-monitor-v2/RelayPulseMatrix.vue (its card). Identity: MonitorCard.vue's logo tile
    (data-ui="platform-text") and provider chip (platform-chip); the group chip is a category (category-chip).
    Reference: the /models uptime column (REF §8.7: a 3px capsule per sample, the Mono figure in the state's ink) and the
    /logs toolbar and KPI tiles. */
@@ -3243,12 +3253,12 @@ html.flat-theme [data-ui~="monitor-v2"] > section[class~="grid"] > .stat-card >
    reset button 26px; the matrix sits on the card (no inner well), its header the mono label, rows divided by 1px lines,
    summary figures Mono 12; each bucket a capsule like the reference's uptime bars, coloured by health in the reference's
    uptime palette (good / warn / bad with the steps between; no traffic = the grouped fill) */
-html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) {
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"][data-ui~="monitor-matrix"] {
   padding: 14px !important;
   border-radius: var(--ui-radius-lg) !important;
 }
 
-html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) h2 {
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"][data-ui~="monitor-matrix"] h2 {
   gap: 0;
   font-size: 13px;
   font-weight: 600;
@@ -3256,17 +3266,17 @@ html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) h2 > span:first-child {
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"][data-ui~="monitor-matrix"] h2 > span:first-child {
   display: none;
 }
 
-html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) h2 + p {
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"][data-ui~="monitor-matrix"] h2 + p {
   margin-top: 2px;
   font-size: 12px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) .card-header button[class~="border-gray-200"] {
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"][data-ui~="monitor-matrix"] .card-header button[class~="border-gray-200"] {
   height: 26px;
   padding: 0 10px;
   border-color: rgb(var(--ui-line-strong));
@@ -3373,11 +3383,11 @@ html.flat-theme [data-ui~="monitor-v2"] .score-legend {
   background: linear-gradient(90deg, rgb(var(--ui-uptime-bad)) 0%, color-mix(in srgb, rgb(var(--ui-uptime-warn)) 45%, rgb(var(--ui-uptime-bad))) 30%, rgb(var(--ui-uptime-warn)) 50%, color-mix(in srgb, rgb(var(--ui-uptime-good)) 55%, rgb(var(--ui-uptime-warn))) 70%, rgb(var(--ui-uptime-good)) 100%);
 }
 
-html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) .card-body > div:last-child {
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"][data-ui~="monitor-matrix"] .card-body > div:last-child {
   margin-top: 12px;
 }
 
-html.flat-theme [data-ui~="monitor-v2"] section[class~="card"]:has(.matrix-table) .card-body > div:last-child :is(div, span)[class~="text-[11px]"] {
+html.flat-theme [data-ui~="monitor-v2"] section[class~="card"][data-ui~="monitor-matrix"] .card-body > div:last-child :is(div, span)[class~="text-[11px]"] {
   font-size: 11px;
   color: rgb(var(--ui-muted));
 }
@@ -3525,11 +3535,11 @@ html.flat-theme [data-ui~="payment-dashboard"] > div:first-child > div {
 
 /* the distribution and top-users cards: 14px in, the title 13/600; the ranks' medal tints are decoration: a neutral
    Mono rank square (radius 4, the grouped fill) */
-html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"]:not(:has(canvas)) {
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > div.card[class~="p-4"] {
   padding: 14px;
 }
 
-html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > .card[class~="p-4"]:not(:has(canvas)) > h3 {
+html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"] > div.card[class~="p-4"] > h3 {
   margin-bottom: 12px;
   font-size: 13px;
   font-weight: 600;
diff --git a/frontend/src/styles/console/pages/user.css b/frontend/src/styles/console/pages/user.css
index 8c27f0a758a7..4a02748b82ac 100644
--- a/frontend/src/styles/console/pages/user.css
+++ b/frontend/src/styles/console/pages/user.css
@@ -18,13 +18,20 @@
  *   data-ui="model-plaza"              views/ModelPlazaView.vue:8                     standalone page root
  *   data-ui="use-key"                  components/keys/UseKeyModal.vue:8              dialog body
  *   data-ui="user-batch-image"         views/user/BatchImageGuideView.vue:3           TablePageLayout root
+ *   data-ui="user-keys"                views/user/KeysView.vue:3                      TablePageLayout root
+ *   data-ui="key-group-search"         views/user/KeysView.vue:1145                   the group picker's search row
+ *   data-ui="plan-card"                components/payment/SubscriptionPlanCard.vue:3  plan card root
+ *   data-ui="image-studio"             features/image-studio/ImageStudioPage.vue:2    page root
  * Identity hooks (data.css §6.4 contract, decision 2): data-ui="platform-chip" on KeysView.vue:515 (the create
  * dialog's provider tiles), PaymentView.vue:107 and :207, SubscriptionsView.vue:45, SubscriptionPlanCard.vue:34,
  * PlazaModelPricingTable.vue:82, ProfileIdentityBindingsSection.vue:33 (the sign-in providers' letter squares);
  * data-ui="platform-text" on the platform marks PaymentView.vue:203, SubscriptionsView.vue:39,
  * SubscriptionPlanCard.vue:11.
  * Existing hooks used: data-table="keys", #key-form, the profile's data-testid, .custom-page-layout, data-testid
- * on the image studio, data-ui="pagination" / "empty-state" recipes of data.css. */
+ * on the image studio, data-ui="pagination" / "empty-state" recipes of data.css.
+ * Performance (PERF.md, before v0.2.9-codexrip.3): no :has() in a non-subject position (it re-styles the anchor's
+ * whole subtree on every change); the few :has() left sit in the subject compound under a hooked root with a child or
+ * sibling argument. */
 
 /* ================================================================== 1 · page frame */
 
@@ -45,7 +52,7 @@ html.flat-theme [data-testid="profile-shell"] [class~="space-y-6"] > :not([hidde
    12 / 16 on the structural line with the title 14 / 600 (the reference's modal and card titles) and its note
    12.5px muted. */
 html.flat-theme :is([data-ui="user-redeem"], [data-ui="user-affiliate"], [data-ui="user-purchase"], [data-testid="profile-shell"]) .card:is([class~="p-6"], [class~="p-5"]),
-html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card:not([data-testid="profile-overview-hero"]) > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]) {
+html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card:where(:not([data-testid="profile-overview-hero"])) > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]) {
   padding: 16px;
 }
 
@@ -77,26 +84,26 @@ html.flat-theme :is([data-ui="user-affiliate"], [data-testid="profile-shell"]) .
    the layout puts them side by side on the first row and the table card under them. Keyboard order stays upstream's
    (actions, then filters); below 1024px the slots stack as upstream. */
 @media (min-width: 1024px) {
-  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]):has(> .layout-section-fixed + .layout-section-fixed + .layout-section-scrollable) {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"] {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-rows: auto minmax(0, 1fr) auto;
     column-gap: 12px;
   }
 
-  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]) > .layout-section-fixed:first-child:has(+ .layout-section-fixed) {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed:first-child {
     grid-column: 2;
     grid-row: 1;
     align-self: start;
   }
 
-  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]) > .layout-section-fixed:first-child + .layout-section-fixed {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed:first-child + .layout-section-fixed {
     grid-column: 1;
     grid-row: 1;
     min-width: 0;
   }
 
-  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]) > :is(.layout-section-scrollable, .layout-section-scrollable ~ .layout-section-fixed) {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"] > :is(.layout-section-scrollable, .layout-section-scrollable ~ .layout-section-fixed) {
     grid-column: 1 / -1;
   }
 }
@@ -129,7 +136,7 @@ html.flat-theme .table-wrapper[data-table="keys"] td[data-column="current_concur
 }
 
 /* 2.2 The selection row above the table (keys chosen for bulk edit): the reference tray's count, 12.5px ink-soft. */
-html.flat-theme .table-page-layout:has(.table-wrapper[data-table="keys"]) > .layout-section-fixed div[class~="flex-wrap"][class~="text-sm"]:has(> [data-test="bulk-edit-keys"]) > span {
+html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed div[class~="flex-wrap"][class~="text-sm"] > span:first-child {
   color: rgb(var(--ui-ink-soft));
   font-size: 12.5px;
 }
@@ -144,7 +151,7 @@ html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border
   transition: box-shadow var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border-b"]:first-child:has(input:focus-visible) {
+html.flat-theme [data-ui="key-group-search"]:has(> div > input:focus-visible) {
   box-shadow: inset 0 -2px 0 rgb(var(--ui-focus));
 }
 
@@ -485,11 +492,11 @@ html.flat-theme [data-ui="user-redeem"] #code {
 }
 
 html.flat-theme [data-ui="user-redeem"] #code ~ *,
-html.flat-theme [data-ui="user-redeem"] div[class~="relative"]:has(> #code) > div[class~="pointer-events-none"] {
+html.flat-theme [data-ui="user-redeem"] div[class~="relative"] > div[class~="pointer-events-none"] {
   padding-left: 12px;
 }
 
-html.flat-theme [data-ui="user-redeem"] div[class~="relative"]:has(> #code) > div[class~="pointer-events-none"] svg {
+html.flat-theme [data-ui="user-redeem"] div[class~="relative"] > div[class~="pointer-events-none"] svg {
   width: 15px;
   height: 15px;
   color: rgb(var(--ui-faint));
@@ -769,7 +776,7 @@ html.flat-theme [data-testid="profile-overview-hero"] span[class~="rounded-full"
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"]:has(> [data-testid^="profile-overview-metric-"]) {
+html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"] {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -976,7 +983,7 @@ html.flat-theme [data-testid="profile-shell"] > .card form[class~="rounded-lg"][
 /* 5.1 The four figures: the reference's StatTile (§8.13 /logs: 1px line, 6px, surface, 8 / 12, the mono label, the
    value 15 / 600 tabular ink, the note 11px muted, 76px; tiles 10px apart). The rebate rate's glyph and the green
    figures are decoration (decision 2): neutral; a frozen amount keeps its warning colour. */
-html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"]:has(> .card[class~="p-5"]) {
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] {
   gap: 10px;
 }
 
@@ -1201,7 +1208,7 @@ html.flat-theme [data-ui="user-subscriptions"] [data-ui~="platform-text"][class~
 
 /* the plan cards (SubscriptionPlanCard): the reference's card (8px, the structural line, no lift or shadow), the
    platform rule on top 2px in the platform colour, the price a Mono figure, subscribe = the positive CTA (accent) */
-html.flat-theme [data-ui="user-purchase"] div:has(> [data-ui~="platform-text"][class~="h-1.5"]) {
+html.flat-theme [data-ui="user-purchase"] [data-ui~="plan-card"] {
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
   box-shadow: none;
@@ -1214,13 +1221,13 @@ html.flat-theme [data-ui="user-purchase"] [data-ui~="platform-text"][class~="h-1
   background-image: none;
 }
 
-html.flat-theme [data-ui="user-purchase"] div:has(> [data-ui~="platform-text"][class~="h-1.5"]) span[class~="text-2xl"][class~="font-extrabold"] {
+html.flat-theme [data-ui="user-purchase"] [data-ui~="plan-card"] span[class~="text-2xl"][class~="font-extrabold"] {
   color: rgb(var(--ui-ink));
   font: 600 22px/28px var(--ui-font-mono);
   letter-spacing: -0.02em;
 }
 
-html.flat-theme [data-ui="user-purchase"] div:has(> [data-ui~="platform-text"][class~="h-1.5"]) > div > button[type="button"][class~="w-full"] {
+html.flat-theme [data-ui="user-purchase"] [data-ui~="plan-card"] > div > button[type="button"][class~="w-full"] {
   min-height: var(--ui-control-h-md, 38px);
   border: 1px solid rgb(var(--ui-primary));
   border-radius: var(--ui-radius-md);
@@ -1345,7 +1352,7 @@ html.flat-theme [data-testid="image-studio-layout"] > form {
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header > div:first-child > h1 {
+html.flat-theme [data-ui="image-studio"] > header > div:first-child > h1 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -1355,7 +1362,7 @@ html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header > div:fi
 }
 
 @media (min-width: 1024px) {
-  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header > div:first-child > p {
+  html.flat-theme [data-ui="image-studio"] > header > div:first-child > p {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -1364,13 +1371,19 @@ html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header > div:fi
     white-space: nowrap;
   }
 
-  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header:has(> button) {
+  html.flat-theme [data-ui="image-studio"] > header:has(> button) {
     justify-content: flex-end;
   }
 
-  html.flat-theme div:has(> [data-testid="image-studio-layout"]) > header:not(:has(> button)) + [data-testid="image-studio-layout"] {
+  /* the header's words are hidden, so the page's 24px step after it moves onto its button (a header without one has no
+     height and the layout starts the page) */
+  html.flat-theme [data-ui="image-studio"] > [data-testid="image-studio-layout"] {
     margin-top: 0;
   }
+
+  html.flat-theme [data-ui="image-studio"] > header > button {
+    margin-bottom: 1.5rem;
+  }
 }
 
 /* the form's fields sit in a display:contents fieldset, so the form's 20px rhythm never reached them (upstream draws
@@ -1592,7 +1605,7 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
      leaves phones to this file): upstream's search is a flex-1 item with a zero basis beside fixed-width selects and
      buttons, so on a phone it shrank to a few characters ("邮箱/用", "搜索"). It takes the row, like the reference's
      phone toolbar (ref-models-390: the search spans the row, the controls wrap under it). */
-  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child > div[class~="flex-1"]:is(:has(> input.input), :has(> div > input.input)) {
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child > div[class~="flex-1"]:has(> input.input, > div > input.input) {
     flex: 1 1 100%;
   }
 
@@ -1608,12 +1621,12 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
   }
 
   /* 8.2 Affiliate: the four figures two to a row (the reference's phone KPIs, REF §7.4: grid-cols-2) */
-  html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"]:has(> .card[class~="p-5"]) {
+  html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   /* 8.2b Profile: the stat blocks two to a row (the reference's phone detail page: grid-cols-2) */
-  html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"]:has(> [data-testid^="profile-overview-metric-"]) {
+  html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"] {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1633,7 +1646,7 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
 
   /* the user dashboard's balance tile likewise takes the row (in a half-width tile the grouped figure broke inside
      its digits: "…212.4 / 3") */
-  html.flat-theme [data-ui="user-dashboard"] [class~="grid"] > .card[class~="p-4"]:has(p[class~="text-emerald-600"]) {
+  html.flat-theme [data-ui="user-dashboard"] [class~="grid"] > .card[class~="p-4"]:has(> div > div > p[class~="text-emerald-600"]) {
     grid-column: 1 / -1;
   }
 
@@ -1668,10 +1681,17 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
     white-space: nowrap;
   }
 
+  /* the block after a hidden heading starts the page (Codex 路由设置's intro kept the page rhythm's 12px, 渠道监控's
+     description its 2px); from 1024px the pages clear the same margins */
+  html.flat-theme [data-ui~="codex-runtime"][data-ui~="codex-runtime"] > h2:first-child:not([hidden]) + p:not([hidden]),
+  html.flat-theme [data-ui~="channel-monitor-page"][data-ui~="channel-monitor-page"] > header.page-header > h1 + p.page-description {
+    margin-top: 0;
+  }
+
   /* 8.0b API keys: the search and the filters above the actions, as on every other toolbar at this width and on the
      reference's /models phone toolbar (the desktop already sets them on one row, 2.0); the keyboard order stays
      upstream's */
-  html.flat-theme .table-page-layout:has(> .layout-section-scrollable .table-wrapper[data-table="keys"]) > .layout-section-fixed:first-child + .layout-section-fixed {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed:first-child + .layout-section-fixed {
     order: -1;
   }
 
diff --git a/frontend/src/styles/console/pages/users-groups-proxies-keys.css b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
index 186949438bbc..72eb3a6e254e 100644
--- a/frontend/src/styles/console/pages/users-groups-proxies-keys.css
+++ b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
@@ -95,9 +95,10 @@ html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~
 }
 
 /* Icon-only buttons (refresh, the subscription guide) are the reference's square: 30 x 30 (REF §8.3 icon buttons). They
-   are found by their glyph: a button whose label is a bare text node also has the glyph as its only element child. */
+   are found by their glyph: a button whose label is a bare text node also has the glyph as its only element child (one
+   :has() with a child argument on a button under the page root; `button` keeps the specificity of the former pair). */
 @media (min-width: 640px) {
-  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child .btn:has(> svg:only-child):has(> svg:is(.lucide-rotate-cw, .lucide-circle-help)) {
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child button.btn:has(> svg:only-child:is(.lucide-rotate-cw, .lucide-circle-help)) {
     width: var(--ui-control-h);
     min-width: var(--ui-control-h);
     padding-left: 0;
@@ -622,7 +623,11 @@ html.flat-theme [data-ui~="announcements-page"] td[data-column="timeRange"] span
    user-attributes-config, GroupRateMultipliersModal group-rate-multipliers, GroupRPMOverridesModal group-rpm-overrides,
    AnnouncementReadStatusDialog announcement-read-status, AnnouncementTargetingEditor announcement-targeting, the proxy
    dialog's tab strip proxy-create-tabs, the redeem result's body redeem-result-body, the subscription guide's title
-   subscription-guide-title. The others are found by their form ids. */
+   subscription-guide-title; and, so that no rule needs a :has() anchor above what it styles (PERF, 2026-09-29), the
+   redeem result's header redeem-result-head, the generate-codes form redeem-generate-form, quick add's parse result
+   proxy-parse-result, the quality report's summary proxy-quality-summary and each row of the group sort dialog
+   group-sort-row. The others are found by their form ids. :has() stays only in the subject compound, on an anchor under
+   a page root, a hook or an id, with a child argument. */
 
 /* 9.1 The user card at the top of the user dialogs (deposit / refund, balance history, API keys, allowed groups): the
    reference's option card (1px line, radius 8, the grouped fill at 60 %, 12 / 14 inset), its avatar the 28px icon square
@@ -827,7 +832,7 @@ html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-over
    new balance, the subscription guide's tip, the invitation-code hint), the warning pair for a warning. */
 html.flat-theme #balance-form > div[class~="border-blue-200"],
 html.flat-theme [data-ui="subscription-guide-title"] ~ div[class~="bg-blue-50"],
-html.flat-theme form:has(> div > div[class~="sm:grid-cols-5"]) > div[class~="bg-blue-50"][class~="p-3"] {
+html.flat-theme form[data-ui="redeem-generate-form"] > div[class~="bg-blue-50"][class~="p-3"] {
   padding: 10px 14px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-md);
@@ -835,7 +840,7 @@ html.flat-theme form:has(> div > div[class~="sm:grid-cols-5"]) > div[class~="bg-
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme form:has(> div > div[class~="sm:grid-cols-5"]) > div[class~="bg-blue-50"][class~="p-3"] > p {
+html.flat-theme form[data-ui="redeem-generate-form"] > div[class~="bg-blue-50"][class~="p-3"] > p {
   color: rgb(var(--ui-ink-soft));
 }
 
@@ -855,14 +860,14 @@ html.flat-theme [data-ui="user-platform-quota"] > div[class~="border-amber-200"]
 }
 
 /* 9.7 A positive CTA is the accent button (the deposit's confirm; decision 2): upstream's emerald fill becomes the accent
-   with on-accent text (white on #168848, ink on the mint). */
-html.flat-theme .modal-content:has(#balance-form) .modal-footer button.btn[class~="bg-emerald-600"] {
+   with on-accent text (white on #168848, ink on the mint). The footer's submit names its form (form="balance-form"). */
+html.flat-theme .modal-footer button.btn[form="balance-form"][class~="bg-emerald-600"] {
   border-color: rgb(var(--ui-primary));
   background-color: rgb(var(--ui-primary));
   color: rgb(var(--ui-on-primary));
 }
 
-html.flat-theme .modal-content:has(#balance-form) .modal-footer button.btn[class~="bg-emerald-600"]:not(:disabled):hover {
+html.flat-theme .modal-footer button.btn[form="balance-form"][class~="bg-emerald-600"]:not(:disabled):hover {
   border-color: rgb(var(--ui-primary-hover));
   background-color: rgb(var(--ui-primary-hover));
 }
@@ -1347,8 +1352,9 @@ html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-over
 }
 
 /* 11.3 Sort order: each group a draggable row of the reference's list (1px line, radius 8, no lift shadow), its handle faint,
-   the id Geist Mono 11 muted; the platform chip is the identity chip (data.css). */
-html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]) {
+   the id Geist Mono 11 muted; the platform chip is the identity chip (data.css). The row carries the hook group-sort-row
+   (GroupsView's sort dialog); `div >` keeps the specificity the former :has() gave. */
+html.flat-theme .modal-body div > div[data-ui="group-sort-row"][class~="cursor-grab"][class~="rounded-lg"][class~="border"] {
   padding: 10px 12px;
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
@@ -1356,21 +1362,21 @@ html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class
   box-shadow: none;
 }
 
-html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]):hover {
+html.flat-theme .modal-body div > div[data-ui="group-sort-row"][class~="cursor-grab"][class~="rounded-lg"][class~="border"]:hover {
   border-color: rgb(var(--ui-line-strong));
 }
 
-html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]) > div:first-child {
+html.flat-theme .modal-body div > div[data-ui="group-sort-row"][class~="cursor-grab"][class~="rounded-lg"][class~="border"] > div:first-child {
   color: rgb(var(--ui-faint));
 }
 
-html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]) > div:last-child {
+html.flat-theme .modal-body div > div[data-ui="group-sort-row"][class~="cursor-grab"][class~="rounded-lg"][class~="border"] > div:last-child {
   color: rgb(var(--ui-muted));
   font-family: var(--ui-font-mono);
   font-size: 11px;
 }
 
-html.flat-theme .modal-body div[class~="cursor-grab"][class~="rounded-lg"][class~="border"]:has(span[data-ui~="platform-chip"]) div[class~="font-medium"] {
+html.flat-theme .modal-body div > div[data-ui="group-sort-row"][class~="cursor-grab"][class~="rounded-lg"][class~="border"] div[class~="font-medium"] {
   color: rgb(var(--ui-ink));
   font-size: 13px;
   font-weight: 600;
@@ -1544,22 +1550,23 @@ html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][cla
 }
 
 /* 12.3 Quick add's parse result and the quality report's summary: neutral cards (1px line, the grouped fill), the report's
-   score 15/600 Geist Mono (the reference's statistic figure); its table is data.css' plain table. */
-html.flat-theme .modal-content:has([data-ui="proxy-create-tabs"]) .modal-body div[class~="rounded-lg"][class~="bg-gray-50"][class~="p-4"]:has(> div > div > svg) {
+   score 15/600 Geist Mono (the reference's statistic figure); its table is data.css' plain table. Hooks (ProxiesView):
+   proxy-parse-result, proxy-quality-summary. */
+html.flat-theme .modal-body div[data-ui="proxy-parse-result"][class~="rounded-lg"][class~="bg-gray-50"][class~="p-4"] {
   padding: 10px 14px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-md);
   background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
 
-html.flat-theme .modal-body > div > div[class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"]:has(div[class~="text-2xl"]):has(+ div[class~="max-h-80"] > table) {
+html.flat-theme .modal-body > div > div[data-ui="proxy-quality-summary"][class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"] {
   padding: 12px 14px;
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
   background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
 
-html.flat-theme .modal-body > div > div[class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"]:has(+ div[class~="max-h-80"] > table) div[class~="text-2xl"][class~="font-semibold"] {
+html.flat-theme .modal-body > div > div[data-ui="proxy-quality-summary"][class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"] div[class~="text-2xl"][class~="font-semibold"] {
   font-family: var(--ui-font-mono);
   font-size: 15px;
   line-height: 22.5px;
@@ -1634,8 +1641,9 @@ html.flat-theme [data-ui="subscription-guide-title"] ~ div div[class~="overflow-
 }
 
 /* 13.3 Generate codes: the code-expiry choices are one control, the reference's segmented choice (the structural frame,
-   2px inset, 12.5 / 600 segments, the chosen one the ink thumb) instead of accent-tinted boxes. */
-html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"]:has(> button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"]) {
+   2px inset, 12.5 / 600 segments, the chosen one the ink thumb) instead of accent-tinted boxes. The frame is the grid of
+   the generate form (hook redeem-generate-form, RedeemView); the repeated attributes keep the former :has() specificity. */
+html.flat-theme form[data-ui="redeem-generate-form"] > div > div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"][class~="grid-cols-2"][class~="sm:grid-cols-5"] {
   gap: 0;
   padding: 2px;
   border: 1px solid rgb(var(--ui-line));
@@ -1673,13 +1681,15 @@ html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"
 
 /* 13.4 Generated codes: the header is the dialog header (14 / 18 inset on the structural line, title 14/600, the count
    12px muted), its success mark the 28px square in the success pair (a status), the close the 28px bordered button; the
-   codes the reference's snippet (Geist Mono 12.5 on the canvas, radius 6, 12 inset); the footer the dialog footer. */
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child {
+   codes the reference's snippet (Geist Mono 12.5 on the canvas, radius 6, 12 inset); the footer the dialog footer. Hooks
+   (RedeemView): redeem-result-head on the header, redeem-result-body on the body; the footer is the body's next sibling.
+   `div > …:first-child` / `div > … + div:last-child` keep the specificity of the former :has() anchor. */
+html.flat-theme div > div[data-ui="redeem-result-head"]:first-child {
   padding: var(--ui-dialog-head-y, 14px) var(--ui-dialog-x, 18px);
   border-color: rgb(var(--ui-line));
 }
 
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child div[class~="rounded-full"][class~="h-10"] {
+html.flat-theme div > div[data-ui="redeem-result-head"]:first-child div[class~="rounded-full"][class~="h-10"] {
   width: 28px;
   height: 28px;
   border: 1px solid rgb(var(--ui-success) / 0.3);
@@ -1687,26 +1697,26 @@ html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child div[
   background-color: rgb(var(--ui-success-soft));
 }
 
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child div[class~="rounded-full"][class~="h-10"] > svg {
+html.flat-theme div > div[data-ui="redeem-result-head"]:first-child div[class~="rounded-full"][class~="h-10"] > svg {
   width: 15px;
   height: 15px;
   color: rgb(var(--ui-success));
 }
 
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child h2 {
+html.flat-theme div > div[data-ui="redeem-result-head"]:first-child h2 {
   color: rgb(var(--ui-ink));
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;
 }
 
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child h2 + p {
+html.flat-theme div > div[data-ui="redeem-result-head"]:first-child h2 + p {
   color: rgb(var(--ui-muted));
   font-size: 12px;
   line-height: 18px;
 }
 
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child > button {
+html.flat-theme div > div[data-ui="redeem-result-head"]:first-child > button {
   display: inline-grid;
   place-items: center;
   width: 28px;
@@ -1718,12 +1728,12 @@ html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child > bu
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child > button:hover {
+html.flat-theme div > div[data-ui="redeem-result-head"]:first-child > button:hover {
   background-color: rgb(var(--ui-surface));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:first-child > button svg {
+html.flat-theme div > div[data-ui="redeem-result-head"]:first-child > button svg {
   width: 15px;
   height: 15px;
 }
@@ -1742,7 +1752,7 @@ html.flat-theme [data-ui="redeem-result-body"] textarea {
   line-height: 1.625;
 }
 
-html.flat-theme div:has(> [data-ui="redeem-result-body"]) > div:last-child {
+html.flat-theme div > [data-ui="redeem-result-body"] + div:last-child {
   padding: var(--ui-dialog-foot-y, 12px) var(--ui-dialog-x, 18px);
   border-color: rgb(var(--ui-line));
   border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
diff --git a/frontend/src/styles/console/shell.css b/frontend/src/styles/console/shell.css
index 837dda1ad0dc..f2033010f348 100644
--- a/frontend/src/styles/console/shell.css
+++ b/frontend/src/styles/console/shell.css
@@ -122,7 +122,8 @@ html.flat-theme .custom-page-layout {
     height: 100vh;
   }
 
-  html.flat-theme .app-main:has(> main > :is(.table-page-layout, .custom-page-layout)) > main {
+  /* :has() in the subject only (perf pass: a non-subject :has() re-styles the anchor's whole subtree) */
+  html.flat-theme .app-main > main:has(> :is(.table-page-layout, .custom-page-layout)):not(uipad) {
     display: flex;
     flex: 1 1 0;
     flex-direction: column;
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index 91a12684d13f..9f0f031b9a1c 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -267,9 +267,9 @@
         <!-- Charts Section -->
         <div class="space-y-6">
           <!-- Date Range Filter -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="time-bar">
             <div class="flex flex-wrap items-center gap-4">
-              <div class="flex items-center gap-2">
+              <div class="flex items-center gap-2" data-ui="range-pill">
                 <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
                   >{{ t('admin.dashboard.timeRange') }}:</span
                 >
diff --git a/frontend/src/views/admin/GroupsView.vue b/frontend/src/views/admin/GroupsView.vue
index 6d158c3b0aac..550e499e6349 100644
--- a/frontend/src/views/admin/GroupsView.vue
+++ b/frontend/src/views/admin/GroupsView.vue
@@ -3754,6 +3754,7 @@
           <div
             v-for="group in sortableGroups"
             :key="group.id"
+            data-ui="group-sort-row"
             class="flex cursor-grab items-center gap-3 rounded-lg border border-gray-200 bg-white p-3 transition-shadow hover:shadow-md active:cursor-grabbing dark:border-dark-600 dark:bg-dark-700"
           >
             <div class="text-gray-400">
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index e4435c6dc963..da041e01126e 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -567,7 +567,7 @@
         </div>
 
         <!-- Parse Result -->
-        <div v-if="batchParseResult.total > 0" class="rounded-lg bg-gray-50 p-4 dark:bg-dark-700">
+        <div v-if="batchParseResult.total > 0" data-ui="proxy-parse-result" class="rounded-lg bg-gray-50 p-4 dark:bg-dark-700">
             <div class="flex items-center gap-4 text-sm">
               <div class="flex items-center gap-1.5">
               <Icon name="checkCircle" size="sm" :stroke-width="2" class="text-primary-500" />
@@ -867,7 +867,7 @@
       @close="closeQualityReportDialog"
     >
       <div v-if="qualityReport" class="space-y-4">
-        <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700">
+        <div data-ui="proxy-quality-summary" class="rounded-lg border border-gray-200 bg-gray-50 p-4 dark:border-dark-600 dark:bg-dark-700">
           <div class="flex items-center justify-between gap-4">
             <div>
               <div class="text-sm text-gray-500 dark:text-gray-400">
diff --git a/frontend/src/views/admin/RedeemView.vue b/frontend/src/views/admin/RedeemView.vue
index 2fdf7c3c4f6e..1eb29673db01 100644
--- a/frontend/src/views/admin/RedeemView.vue
+++ b/frontend/src/views/admin/RedeemView.vue
@@ -283,7 +283,7 @@
           <h2 class="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
             {{ t('admin.redeem.generateCodesTitle') }}
           </h2>
-          <form @submit.prevent="handleGenerateCodes" class="space-y-4">
+          <form data-ui="redeem-generate-form" @submit.prevent="handleGenerateCodes" class="space-y-4">
             <div>
               <label class="input-label">{{ t('admin.redeem.codeType') }}</label>
               <Select v-model="generateForm.type" :options="typeOptions" />
@@ -531,6 +531,7 @@
         <div class="relative z-10 w-full max-w-lg rounded-xl bg-white shadow-xl dark:bg-dark-800">
           <!-- Header -->
           <div
+            data-ui="redeem-result-head"
             class="flex items-center justify-between border-b border-gray-200 px-5 py-4 dark:border-dark-600"
           >
             <div class="flex items-center gap-3">
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index d03dd29e4878..b7e35ed23e3c 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -4,9 +4,9 @@
       <UsageStatsCards :stats="usageStats" />
       <!-- Charts Section -->
       <div class="space-y-4">
-        <div class="card p-4">
+        <div class="card p-4" data-ui="time-bar">
           <div class="flex flex-wrap items-center gap-4">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2" data-ui="range-pill">
               <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.timeRange') }}:</span>
               <DateRangePicker
                 v-model:start-date="startDate"
@@ -65,7 +65,7 @@
         </div>
       </div>
       <!-- 明细区：tab 栏 + 筛选 + 内容收进同一张卡片，消除割裂感 -->
-      <div class="card">
+      <div class="card" data-ui="usage-records">
         <div class="flex flex-wrap items-center border-b border-gray-200 px-2 dark:border-dark-700 sm:px-4">
           <button
             v-for="tab in detailTabs"
diff --git a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
index f5faa0aee691..2cb36aa2643d 100644
--- a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
+++ b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
@@ -861,7 +861,7 @@ function handleToolbarRefresh() {
 </script>
 
 <template>
-  <div :class="['flex flex-col gap-4 rounded-3xl bg-white shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700', props.fullscreen ? 'p-8' : 'p-6']">
+  <div :class="['flex flex-col gap-4 rounded-3xl bg-white shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700', props.fullscreen ? 'p-8' : 'p-6']" data-ui="ops-header">
     <!-- Top Toolbar -->
     <div class="flex flex-wrap items-center justify-between gap-4 border-b border-gray-100 pb-4 dark:border-dark-700">
       <div>
diff --git a/frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue b/frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue
index e63828974588..3deff2d04923 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue
@@ -118,7 +118,7 @@ const options = computed(() => ({
 </script>
 
 <template>
-  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700" data-ui="ops-chart">
     <div class="mb-4 flex items-center justify-between">
       <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
         <svg class="h-4 w-4 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue b/frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue
index 1c1d6a2c0f4e..8ef4db7840d6 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue
@@ -154,7 +154,7 @@ const options = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700" data-ui="ops-chart">
     <div class="mb-4 flex shrink-0 items-center justify-between">
       <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
         <svg class="h-4 w-4 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/frontend/src/views/admin/ops/components/OpsLatencyChart.vue b/frontend/src/views/admin/ops/components/OpsLatencyChart.vue
index 902784c715cc..e3ad3fe0b9e1 100644
--- a/frontend/src/views/admin/ops/components/OpsLatencyChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsLatencyChart.vue
@@ -75,7 +75,7 @@ const options = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700" data-ui="ops-chart">
     <div class="mb-4 flex items-center justify-between">
       <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
         <svg class="h-4 w-4 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/frontend/src/views/admin/ops/components/OpsSwitchRateTrendChart.vue b/frontend/src/views/admin/ops/components/OpsSwitchRateTrendChart.vue
index c72e577f8f30..933280884a77 100644
--- a/frontend/src/views/admin/ops/components/OpsSwitchRateTrendChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsSwitchRateTrendChart.vue
@@ -129,7 +129,7 @@ const options = computed(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+  <div class="flex h-full flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700" data-ui="ops-chart">
     <div class="mb-4 flex shrink-0 items-center justify-between">
       <h3 class="flex items-center gap-2 text-sm font-bold text-gray-900 dark:text-white">
         <svg class="h-4 w-4 text-teal-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue b/frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue
index 58df4e4c3659..9361f663edd4 100644
--- a/frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue
@@ -176,7 +176,7 @@ function downloadChart() {
 </script>
 
 <template>
-  <div class="flex h-full min-w-0 flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700">
+  <div class="flex h-full min-w-0 flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-gray-900/5 dark:bg-dark-800 dark:ring-dark-700" data-ui="ops-chart">
     <div
       data-testid="throughput-chart-header"
       class="mb-4 flex shrink-0 flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
diff --git a/frontend/src/views/user/KeysView.vue b/frontend/src/views/user/KeysView.vue
index c2491635eac5..0727d0196da9 100644
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -1,6 +1,6 @@
 <template>
   <AppLayout>
-    <TablePageLayout>
+    <TablePageLayout data-ui="user-keys">
       <template #filters>
         <div class="flex flex-col gap-3">
           <div class="flex flex-wrap items-center gap-3">
@@ -1142,7 +1142,7 @@
         }"
       >
         <!-- Search box -->
-        <div class="border-b border-gray-100 p-2 dark:border-dark-700">
+        <div data-ui="key-group-search" class="border-b border-gray-100 p-2 dark:border-dark-700">
           <div class="relative">
             <svg class="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
               <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
diff --git a/frontend/src/views/user/UsageView.vue b/frontend/src/views/user/UsageView.vue
index 98fc13dfb50c..61cd5846fd06 100644
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -4,9 +4,9 @@
       <UsageStatsCards :stats="usageStats" :show-account-cost="false" :strike-standard-cost="true" />
 
       <div class="space-y-4">
-        <div class="card p-4">
+        <div class="card p-4" data-ui="time-bar">
           <div class="flex flex-wrap items-center gap-4">
-            <div class="flex items-center gap-2">
+            <div class="flex items-center gap-2" data-ui="range-pill">
               <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('admin.dashboard.timeRange') }}:</span>
               <DateRangePicker
                 v-model:start-date="startDate"

From b140d7feea1857e4574395af76c5b798b415ff9d Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Wed, 30 Sep 2026 02:01:03 +0800
Subject: [PATCH 07/11] wip(ui-el): perf pass - settings done; data.css and
 shared layers partial (agents interrupted by billing)

---
 .../components/account/AccountStatsModal.vue  |   2 +-
 .../components/account/CreateAccountModal.vue |  20 +++
 .../components/account/EditAccountModal.vue   |   2 +
 .../admin/account/AccountStatsModal.vue       |   2 +-
 .../admin/payment/DailyRevenueChart.vue       |   2 +-
 .../admin/payment/OrderStatsCards.vue         |  10 +-
 .../admin/usage/UsageStatsCards.vue           |  10 +-
 .../charts/EndpointDistributionChart.vue      |   9 +-
 .../charts/GroupDistributionChart.vue         |   9 +-
 .../charts/ModelDistributionChart.vue         |  12 +-
 .../src/components/charts/TokenUsageTrend.vue |   2 +-
 frontend/src/components/common/DataTable.vue  |   4 +-
 .../src/components/common/GroupOptionItem.vue |   2 +-
 .../src/components/common/GroupSelector.vue   |   1 +
 .../components/common/PlatformTypeBadge.vue   |   2 +-
 frontend/src/components/layout/AppHeader.vue  |   2 +-
 frontend/src/components/layout/AppLayout.vue  |   2 +-
 .../user/dashboard/UserDashboardCharts.vue    |   6 +-
 .../user/dashboard/UserDashboardStats.vue     |  20 +--
 frontend/src/styles/console/behaviour.css     |  71 +++++---
 frontend/src/styles/console/controls.css      |  75 +++++---
 frontend/src/styles/console/data.css          | 163 +++++++++---------
 frontend/src/styles/console/overlays.css      |   4 +-
 .../styles/console/pages/dashboard-usage.css  |  17 +-
 .../console/pages/settings-ops-public.css     |  41 +++--
 frontend/src/styles/console/shell.css         |  15 +-
 frontend/src/views/admin/AccountsView.vue     |   2 +
 frontend/src/views/admin/DashboardView.vue    |  22 +--
 frontend/src/views/admin/ProxiesView.vue      |   2 +
 frontend/src/views/admin/RedeemView.vue       |   2 +
 frontend/src/views/admin/SettingsView.vue     | 152 +++++++++-------
 .../AffiliateOfflineWithdrawDialog.vue        |   1 +
 .../src/views/user/BatchImageGuideView.vue    |   2 +
 33 files changed, 417 insertions(+), 271 deletions(-)

diff --git a/frontend/src/components/account/AccountStatsModal.vue b/frontend/src/components/account/AccountStatsModal.vue
index f021310eeaf0..00aa067f5961 100644
--- a/frontend/src/components/account/AccountStatsModal.vue
+++ b/frontend/src/components/account/AccountStatsModal.vue
@@ -429,7 +429,7 @@
         </div>
 
         <!-- Usage Trend Chart -->
-        <div class="card p-4">
+        <div class="card p-4" data-ui="chart-card">
           <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
             {{ t('admin.accounts.stats.usageTrend') }}
           </h3>
diff --git a/frontend/src/components/account/CreateAccountModal.vue b/frontend/src/components/account/CreateAccountModal.vue
index 8eb034c1bc0d..1ea60b0c205a 100644
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -237,6 +237,7 @@
         <div class="mt-2 grid grid-cols-2 gap-3 sm:grid-cols-4" data-tour="account-form-type">
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'oauth-based'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -267,6 +268,7 @@
 
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'apikey'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -297,6 +299,7 @@
 
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'bedrock'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -327,6 +330,7 @@
 
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'service_account'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -367,6 +371,7 @@
         <div class="mt-2 grid grid-cols-2 gap-3" data-tour="account-form-type">
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'oauth-based'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -393,6 +398,7 @@
 
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'apikey'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -426,6 +432,7 @@
         <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2" data-tour="account-form-type">
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'oauth-based'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -454,6 +461,7 @@
             type="button"
             data-testid="grok-account-type-api-key"
             @click="accountCategory = 'apikey'"
+            data-ui="option-card"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               accountCategory === 'apikey'
@@ -486,6 +494,7 @@
           <button
             type="button"
             @click="openCodeAccountMode = 'zen'"
+            data-ui="option-card"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               openCodeAccountMode === 'zen'
@@ -509,6 +518,7 @@
           <button
             type="button"
             @click="openCodeAccountMode = 'go'"
+            data-ui="option-card"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               openCodeAccountMode === 'go'
@@ -540,6 +550,7 @@
           <button
             type="button"
             @click="accountMode = 'payg'"
+            data-ui="option-card"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               accountMode === 'payg'
@@ -567,6 +578,7 @@
             v-if="form.platform !== 'deepseek'"
             type="button"
             @click="accountMode = 'coding'"
+            data-ui="option-card"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               accountMode === 'coding'
@@ -601,6 +613,7 @@
             :key="opt.value"
             type="button"
             @click="apiProtocol = opt.value"
+            data-ui="option-card"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               apiProtocol === opt.value
@@ -674,6 +687,7 @@
         <div class="mt-2 grid grid-cols-3 gap-3" data-tour="account-form-type">
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'oauth-based'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -704,6 +718,7 @@
 
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'apikey'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -746,6 +761,7 @@
 
           <button
             type="button"
+            data-ui="option-card"
             @click="accountCategory = 'service_account'"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -807,6 +823,7 @@
             <button
               type="button"
               @click="handleSelectGeminiOAuthType('google_one')"
+              data-ui="option-card"
               :class="[
                 'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
                 geminiOAuthType === 'google_one'
@@ -850,6 +867,7 @@
             <button
               type="button"
               @click="handleSelectGeminiOAuthType('code_assist')"
+              data-ui="option-card"
               :class="[
                 'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
                 geminiOAuthType === 'code_assist'
@@ -1046,6 +1064,7 @@
           <button
             type="button"
             @click="antigravityAccountType = 'oauth'"
+            data-ui="option-card"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               antigravityAccountType === 'oauth'
@@ -1072,6 +1091,7 @@
           <button
             type="button"
             @click="antigravityAccountType = 'upstream'"
+            data-ui="option-card"
             :class="[
               'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
               antigravityAccountType === 'upstream'
diff --git a/frontend/src/components/account/EditAccountModal.vue b/frontend/src/components/account/EditAccountModal.vue
index a47f10dbe7b9..8c812c0be7f1 100644
--- a/frontend/src/components/account/EditAccountModal.vue
+++ b/frontend/src/components/account/EditAccountModal.vue
@@ -83,6 +83,7 @@
           <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
             <button
               type="button"
+              data-ui="option-card"
               @click="editOpenCodeAccountMode = 'zen'"
               :class="[
                 'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
@@ -106,6 +107,7 @@
             </button>
             <button
               type="button"
+              data-ui="option-card"
               @click="editOpenCodeAccountMode = 'go'"
               :class="[
                 'flex items-center gap-3 rounded-lg border-2 p-3 text-left transition-all',
diff --git a/frontend/src/components/admin/account/AccountStatsModal.vue b/frontend/src/components/admin/account/AccountStatsModal.vue
index 162d1ebd91fc..c16feda8ff64 100644
--- a/frontend/src/components/admin/account/AccountStatsModal.vue
+++ b/frontend/src/components/admin/account/AccountStatsModal.vue
@@ -393,7 +393,7 @@
         </div>
 
         <!-- Usage Trend Chart -->
-        <div class="card p-4">
+        <div class="card p-4" data-ui="chart-card">
           <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
             {{ t('admin.accounts.stats.usageTrend') }}
           </h3>
diff --git a/frontend/src/components/admin/payment/DailyRevenueChart.vue b/frontend/src/components/admin/payment/DailyRevenueChart.vue
index c811f8f301f2..54ba26de9877 100644
--- a/frontend/src/components/admin/payment/DailyRevenueChart.vue
+++ b/frontend/src/components/admin/payment/DailyRevenueChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card p-4">
+  <div class="card p-4" data-ui="chart-card">
     <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
       {{ t('payment.admin.dailyRevenue') }}
     </h3>
diff --git a/frontend/src/components/admin/payment/OrderStatsCards.vue b/frontend/src/components/admin/payment/OrderStatsCards.vue
index 1fece5fb5643..39058f627951 100644
--- a/frontend/src/components/admin/payment/OrderStatsCards.vue
+++ b/frontend/src/components/admin/payment/OrderStatsCards.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4" data-ui="kpi-grid">
     <!-- Today Revenue -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
           <Icon name="dollar" size="md" class="text-green-600 dark:text-green-400" :stroke-width="2" />
@@ -19,7 +19,7 @@
     </div>
 
     <!-- Total Revenue -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
           <Icon name="creditCard" size="md" class="text-blue-600 dark:text-blue-400" :stroke-width="2" />
@@ -37,7 +37,7 @@
     </div>
 
     <!-- Today Orders -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
           <Icon name="chart" size="md" class="text-purple-600 dark:text-purple-400" :stroke-width="2" />
@@ -50,7 +50,7 @@
     </div>
 
     <!-- Average Amount -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
           <Icon name="chart" size="md" class="text-amber-600 dark:text-amber-400" :stroke-width="2" />
diff --git a/frontend/src/components/admin/usage/UsageStatsCards.vue b/frontend/src/components/admin/usage/UsageStatsCards.vue
index b3232a6a1737..52d953648c07 100644
--- a/frontend/src/components/admin/usage/UsageStatsCards.vue
+++ b/frontend/src/components/admin/usage/UsageStatsCards.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
-    <div class="card p-4 flex items-center gap-3">
+  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4" data-ui="kpi-grid">
+    <div class="card p-4 flex items-center gap-3" data-ui="kpi-tile">
       <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30 text-blue-600">
         <Icon name="document" size="md" />
       </div>
@@ -10,7 +10,7 @@
         <p class="text-xs text-gray-400">{{ t('usage.inSelectedRange') }}</p>
       </div>
     </div>
-    <div class="card p-4 flex items-center gap-3">
+    <div class="card p-4 flex items-center gap-3" data-ui="kpi-tile">
       <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30 text-amber-600"><svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" /></svg></div>
       <div>
         <p class="text-xs font-medium text-gray-500">{{ t('usage.totalTokens') }}</p>
@@ -58,7 +58,7 @@
         </p>
       </div>
     </div>
-    <div class="card p-4 flex items-center gap-3">
+    <div class="card p-4 flex items-center gap-3" data-ui="kpi-tile">
       <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30 text-green-600">
         <Icon name="dollar" size="md" />
       </div>
@@ -79,7 +79,7 @@
         </p>
       </div>
     </div>
-    <div class="card p-4 flex items-center gap-3">
+    <div class="card p-4 flex items-center gap-3" data-ui="kpi-tile">
       <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30 text-purple-600">
         <Icon name="clock" size="md" />
       </div>
diff --git a/frontend/src/components/charts/EndpointDistributionChart.vue b/frontend/src/components/charts/EndpointDistributionChart.vue
index f9327c885c5a..372da76b1748 100644
--- a/frontend/src/components/charts/EndpointDistributionChart.vue
+++ b/frontend/src/components/charts/EndpointDistributionChart.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="card p-4">
-    <div class="mb-4 flex items-center justify-between gap-3">
+  <div class="card p-4" data-ui="chart-card">
+    <div data-ui="dist-head" class="mb-4 flex items-center justify-between gap-3">
       <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
         {{ title || t('usage.endpointDistribution') }}
       </h3>
@@ -75,7 +75,7 @@
       <div class="h-48 w-48 shrink-0">
         <Doughnut :data="chartData" :options="doughnutOptions" />
       </div>
-      <div class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
+      <div data-ui="dist-table" class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
         <table class="w-full text-xs">
           <thead>
             <tr class="text-gray-500 dark:text-gray-400">
@@ -89,6 +89,7 @@
           <tbody>
             <template v-for="item in displayEndpointStats" :key="item.endpoint">
               <tr
+                data-ui="dist-row"
                 class="border-t border-gray-100 transition-colors dark:border-dark-700"
                 :class="enableBreakdown ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40' : ''"
                 @click="enableBreakdown && toggleBreakdown(item.endpoint)"
@@ -113,7 +114,7 @@
                   ${{ formatCost(item.cost) }}
                 </td>
               </tr>
-              <tr v-if="expandedKey === item.endpoint">
+              <tr v-if="expandedKey === item.endpoint" data-ui="dist-group">
                 <td colspan="5" class="p-0">
                   <UserBreakdownSubTable
                     :items="breakdownItems"
diff --git a/frontend/src/components/charts/GroupDistributionChart.vue b/frontend/src/components/charts/GroupDistributionChart.vue
index 16a30d24e978..c22692df5b50 100644
--- a/frontend/src/components/charts/GroupDistributionChart.vue
+++ b/frontend/src/components/charts/GroupDistributionChart.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="card p-4">
-    <div class="mb-4 flex items-center justify-between gap-3">
+  <div class="card p-4" data-ui="chart-card">
+    <div data-ui="dist-head" class="mb-4 flex items-center justify-between gap-3">
       <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
         {{ t('admin.dashboard.groupDistribution') }}
       </h3>
@@ -37,7 +37,7 @@
       <div class="h-48 w-48 shrink-0">
         <Doughnut :data="chartData" :options="doughnutOptions" />
       </div>
-      <div class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
+      <div data-ui="dist-table" class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
         <table class="w-full text-xs">
           <thead>
             <tr class="text-gray-500 dark:text-gray-400">
@@ -52,6 +52,7 @@
           <tbody>
             <template v-for="group in displayGroupStats" :key="group.group_id">
               <tr
+                data-ui="dist-row"
                 class="border-t border-gray-100 transition-colors dark:border-dark-700"
                 :class="enableBreakdown && group.group_id > 0 ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40' : ''"
                 @click="enableBreakdown && group.group_id > 0 && toggleBreakdown('group', group.group_id)"
@@ -84,7 +85,7 @@
                 </td>
               </tr>
               <!-- User breakdown sub-rows -->
-              <tr v-if="expandedKey === `group-${group.group_id}`">
+              <tr v-if="expandedKey === `group-${group.group_id}`" data-ui="dist-group">
                 <td :colspan="distributionColspan" class="p-0">
                   <UserBreakdownSubTable
                     :items="breakdownItems"
diff --git a/frontend/src/components/charts/ModelDistributionChart.vue b/frontend/src/components/charts/ModelDistributionChart.vue
index 7463eb743560..51756a73ae77 100644
--- a/frontend/src/components/charts/ModelDistributionChart.vue
+++ b/frontend/src/components/charts/ModelDistributionChart.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="card p-4">
-    <div class="mb-4 flex items-center justify-between gap-3">
+  <div class="card p-4" data-ui="chart-card">
+    <div data-ui="dist-head" class="mb-4 flex items-center justify-between gap-3">
       <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
         {{ !enableRankingView || activeView === 'model_distribution'
           ? t('admin.dashboard.modelDistribution')
@@ -106,7 +106,7 @@
       <div class="h-48 w-48 shrink-0">
         <Doughnut :data="chartData" :options="doughnutOptions" />
       </div>
-      <div class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
+      <div data-ui="dist-table" class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
         <table class="w-full text-xs">
           <thead>
             <tr class="text-gray-500 dark:text-gray-400">
@@ -121,6 +121,7 @@
           <tbody>
             <template v-for="model in displayModelStats" :key="model.model">
               <tr
+                data-ui="dist-row"
                 class="border-t border-gray-100 transition-colors dark:border-dark-700"
                 :class="enableBreakdown ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40' : ''"
                 @click="enableBreakdown && toggleBreakdown('model', model.model)"
@@ -152,7 +153,7 @@
                   ${{ formatCost(model.cost) }}
                 </td>
               </tr>
-              <tr v-if="expandedKey === `model-${model.model}`">
+              <tr v-if="expandedKey === `model-${model.model}`" data-ui="dist-group">
                 <td :colspan="distributionColspan" class="p-0">
                   <UserBreakdownSubTable
                     :items="breakdownItems"
@@ -186,7 +187,7 @@
       <div class="h-48 w-48 shrink-0">
         <Doughnut :data="rankingChartData" :options="rankingDoughnutOptions" />
       </div>
-      <div class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
+      <div data-ui="dist-table" class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
         <table class="w-full text-xs">
           <thead>
             <tr class="text-gray-500 dark:text-gray-400">
@@ -200,6 +201,7 @@
             <tr
               v-for="(item, index) in rankingDisplayItems"
               :key="item.isOther ? 'others' : `${item.user_id}-${index}`"
+              data-ui="dist-row"
               class="border-t border-gray-100 transition-colors dark:border-dark-700"
               :class="item.isOther
                 ? 'bg-gray-50/70 dark:bg-dark-700/20'
diff --git a/frontend/src/components/charts/TokenUsageTrend.vue b/frontend/src/components/charts/TokenUsageTrend.vue
index d5693e3bf1bd..66a600215a15 100644
--- a/frontend/src/components/charts/TokenUsageTrend.vue
+++ b/frontend/src/components/charts/TokenUsageTrend.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card p-4">
+  <div class="card p-4" data-ui="chart-card">
     <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
       {{ t('admin.dashboard.tokenUsageTrend') }}
     </h3>
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 49e08aba812b..3c841bf09f4c 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -48,6 +48,7 @@
       <div
         v-for="(row, index) in sortedData"
         :key="resolveRowKey(row, index)"
+        :data-ui="isRowSelected(row, index) ? 'row-selected' : undefined"
         class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900"
         :class="{
           'cursor-pointer': clickableRows,
@@ -99,7 +100,7 @@
       'is-scrollable': isScrollable
     }"
   >
-    <table class="w-full min-w-max divide-y divide-gray-200 dark:divide-dark-700">
+    <table data-ui="data-table" class="w-full min-w-max divide-y divide-gray-200 dark:divide-dark-700">
       <thead class="table-header bg-gray-50 dark:bg-dark-800">
         <tr>
           <th
@@ -214,6 +215,7 @@
             :data-row-id="resolveRowKey(item.row, item.index)"
             :data-index="item.index"
             :ref="item.measure ? measureElement : undefined"
+            :data-ui="isRowSelected(item.row, item.index) ? 'row-selected' : undefined"
             class="hover:bg-gray-50 dark:hover:bg-dark-800"
             :class="{
               'cursor-pointer': clickableRows,
diff --git a/frontend/src/components/common/GroupOptionItem.vue b/frontend/src/components/common/GroupOptionItem.vue
index 1bf44471f448..723056040a6c 100644
--- a/frontend/src/components/common/GroupOptionItem.vue
+++ b/frontend/src/components/common/GroupOptionItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex min-w-0 flex-1 items-start justify-between gap-3">
+  <div data-ui="group-option" class="flex min-w-0 flex-1 items-start justify-between gap-3">
     <!-- Left: name + description -->
     <div
       class="flex min-w-0 flex-1 flex-col items-start"
diff --git a/frontend/src/components/common/GroupSelector.vue b/frontend/src/components/common/GroupSelector.vue
index 0cd01c21aaca..831b8050b94b 100644
--- a/frontend/src/components/common/GroupSelector.vue
+++ b/frontend/src/components/common/GroupSelector.vue
@@ -27,6 +27,7 @@
       <label
         v-for="group in filteredGroups"
         :key="group.id"
+        data-ui="group-pick-row"
         class="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 transition-colors hover:bg-white dark:hover:bg-dark-700"
         :title="group.rate_multiplier == null ? group.name : t('admin.groups.rateAndAccounts', { rate: group.rate_multiplier, count: group.account_count || 0 })"
       >
diff --git a/frontend/src/components/common/PlatformTypeBadge.vue b/frontend/src/components/common/PlatformTypeBadge.vue
index 8510d7ff4d95..1b7ddcf430cc 100644
--- a/frontend/src/components/common/PlatformTypeBadge.vue
+++ b/frontend/src/components/common/PlatformTypeBadge.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="inline-flex flex-col gap-0.5 text-xs font-medium" data-ui="platform-badge">
     <!-- Row 1: Platform + Type -->
-    <div class="inline-flex items-center overflow-hidden rounded-md">
+    <div class="inline-flex items-center overflow-hidden rounded-md" data-ui="platform-hue">
       <span :class="['inline-flex items-center gap-1 px-2 py-1', platformClass]">
         <PlatformIcon :platform="platform" size="xs" />
         <span>{{ platformLabel }}</span>
diff --git a/frontend/src/components/layout/AppHeader.vue b/frontend/src/components/layout/AppHeader.vue
index 4cffed7f521c..56c7e3cc35fe 100644
--- a/frontend/src/components/layout/AppHeader.vue
+++ b/frontend/src/components/layout/AppHeader.vue
@@ -11,7 +11,7 @@
           <Icon name="menu" size="md" />
         </button>
 
-        <div class="hidden lg:block">
+        <div class="hidden lg:block" data-ui="header-title">
           <h1 class="text-lg font-semibold text-gray-900 dark:text-white">
             {{ pageTitle }}
           </h1>
diff --git a/frontend/src/components/layout/AppLayout.vue b/frontend/src/components/layout/AppLayout.vue
index ef3d77c05689..6f64baf8044b 100644
--- a/frontend/src/components/layout/AppLayout.vue
+++ b/frontend/src/components/layout/AppLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen bg-gray-50 dark:bg-dark-950">
+  <div class="min-h-screen bg-gray-50 dark:bg-dark-950" data-ui="app-shell">
     <!-- Background Decoration -->
     <div class="pointer-events-none fixed inset-0 bg-mesh-gradient"></div>
 
diff --git a/frontend/src/components/user/dashboard/UserDashboardCharts.vue b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
index 932bec45f6c2..f64c2533d4fe 100644
--- a/frontend/src/components/user/dashboard/UserDashboardCharts.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
@@ -22,7 +22,7 @@
     <!-- Charts Grid -->
     <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
       <!-- Model Distribution Chart -->
-      <div class="card relative overflow-hidden p-4">
+      <div class="card relative overflow-hidden p-4" data-ui="chart-card">
         <div v-if="loading" class="absolute inset-0 z-10 flex items-center justify-center bg-white/50 backdrop-blur-sm dark:bg-dark-800/50">
           <LoadingSpinner size="md" />
         </div>
@@ -32,7 +32,7 @@
             <Doughnut v-if="modelData" :data="modelData" :options="doughnutOptions" />
             <div v-else class="flex h-full items-center justify-center text-sm text-gray-500 dark:text-gray-400">{{ t('dashboard.noDataAvailable') }}</div>
           </div>
-          <div class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
+          <div data-ui="dist-table" class="max-h-48 w-full min-w-0 flex-1 overflow-auto">
             <table class="w-full text-xs">
               <thead>
                 <tr class="text-gray-500 dark:text-gray-400">
@@ -44,7 +44,7 @@
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="model in models" :key="model.model" class="border-t border-gray-100 dark:border-dark-700">
+                <tr v-for="model in models" :key="model.model" data-ui="dist-row" class="border-t border-gray-100 dark:border-dark-700">
                   <td class="py-1.5 font-medium text-gray-900 [overflow-wrap:anywhere] dark:text-white" :title="model.model">{{ model.model }}</td>
                   <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">{{ formatNumber(model.requests) }}</td>
                   <td class="py-1.5 text-right text-gray-600 dark:text-gray-400">{{ formatTokens(model.total_tokens) }}</td>
diff --git a/frontend/src/components/user/dashboard/UserDashboardStats.vue b/frontend/src/components/user/dashboard/UserDashboardStats.vue
index 297ef6ee2d56..591d53d3f56f 100644
--- a/frontend/src/components/user/dashboard/UserDashboardStats.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardStats.vue
@@ -1,8 +1,8 @@
 <template>
   <!-- Row 1: Core Stats -->
-  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4" data-ui="kpi-grid">
     <!-- Balance -->
-    <div v-if="!isSimple" class="card p-4">
+    <div v-if="!isSimple" class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
           <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -18,7 +18,7 @@
     </div>
 
     <!-- API Keys -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
           <Icon name="key" size="md" class="text-blue-600 dark:text-blue-400" :stroke-width="2" />
@@ -32,7 +32,7 @@
     </div>
 
     <!-- Today Requests -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
           <Icon name="chart" size="md" class="text-green-600 dark:text-green-400" :stroke-width="2" />
@@ -46,7 +46,7 @@
     </div>
 
     <!-- Today Cost -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
           <Icon name="dollar" size="md" class="text-purple-600 dark:text-purple-400" :stroke-width="2" />
@@ -68,9 +68,9 @@
   </div>
 
   <!-- Row 2: Token Stats -->
-  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+  <div class="grid grid-cols-2 gap-4 lg:grid-cols-4" data-ui="kpi-grid">
     <!-- Today Tokens -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
           <Icon name="cube" size="md" class="text-amber-600 dark:text-amber-400" :stroke-width="2" />
@@ -84,7 +84,7 @@
     </div>
 
     <!-- Total Tokens -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-indigo-100 p-2 dark:bg-indigo-900/30">
           <Icon name="database" size="md" class="text-indigo-600 dark:text-indigo-400" :stroke-width="2" />
@@ -98,7 +98,7 @@
     </div>
 
     <!-- Performance (RPM/TPM) -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-violet-100 p-2 dark:bg-violet-900/30">
           <Icon name="bolt" size="md" class="text-violet-600 dark:text-violet-400" :stroke-width="2" />
@@ -118,7 +118,7 @@
     </div>
 
     <!-- Avg Response Time -->
-    <div class="card p-4">
+    <div class="card p-4" data-ui="kpi-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-rose-100 p-2 dark:bg-rose-900/30">
           <Icon name="clock" size="md" class="text-rose-600 dark:text-rose-400" :stroke-width="2" />
diff --git a/frontend/src/styles/console/behaviour.css b/frontend/src/styles/console/behaviour.css
index e6f45f9b9131..bbedf75acacb 100644
--- a/frontend/src/styles/console/behaviour.css
+++ b/frontend/src/styles/console/behaviour.css
@@ -27,12 +27,15 @@ html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="o
   white-space: nowrap;
 }
 
-html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"]:has(> table) {
+/* Perf pass: the box is hooked ([data-ui~="dist-table"], the three distribution charts and the user dashboard's
+   chart); the :has() stays in the subject with a child argument. The repeated [data-ui] keeps the original 0,5,2
+   (the hook plus the four class tokens it replaced), so the cascade outcome is unchanged. */
+html.flat-theme [data-ui~="dist-table"][data-ui][data-ui][data-ui]:has(> table) {
   scrollbar-width: thin;
   scrollbar-color: rgb(var(--ui-line-focus)) transparent;
 }
 
-html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"]:has(> table)::-webkit-scrollbar-thumb {
+html.flat-theme [data-ui~="dist-table"][data-ui][data-ui][data-ui]:has(> table)::-webkit-scrollbar-thumb {
   background-color: rgb(var(--ui-line-focus));
 }
 
@@ -41,16 +44,24 @@ html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="o
 }
 
 /* B1.2 Chart card titles beside a segmented picker never break (「模型分 / 布」 on phones): the picker group
-   wraps instead. */
-html.flat-theme [class~="card"] > div[class~="mb-4"][class~="justify-between"]:has(> div [class~="rounded-lg"]:is([class~="bg-gray-50"], [class~="bg-gray-100"]):is([class~="p-0.5"], [class~="p-1"])) > h3 {
-  flex-shrink: 0;
-  white-space: nowrap;
+   wraps instead. Perf pass: the rule is driven by a flag the header itself carries (:has() stays in the subject,
+   child argument) and read by the h3 through a container style query, so nothing selects "after" the :has(). */
+html.flat-theme [data-ui="dist-head"]:has(> div [class~="rounded-lg"]:is([class~="bg-gray-50"], [class~="bg-gray-100"]):is([class~="p-0.5"], [class~="p-1"])) {
+  --uif-disthead: 1;
+}
+
+@container style(--uif-disthead: 1) {
+  html.flat-theme [data-ui="dist-head"][data-ui] > h3:not(uipad) {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
 }
 
 /* B1.3 Chart rows holding a distribution card: from 1024 to 1535px each card takes the full width, so the
-   ring, every column and the full names fit; from 1536px they sit side by side again. */
+   ring, every column and the full names fit; from 1536px they sit side by side again. Perf pass: the page roots
+   that hold such a row are hooked already (admin/user dashboard and usage), and the :has() stays in the subject. */
 @media (min-width: 1024px) and (max-width: 1535.98px) {
-  html.flat-theme [class~="grid"][class~="gap-6"][class~="lg:grid-cols-2"]:has(> [class~="card"]:first-child [class~="max-h-48"][class~="overflow-auto"] > table) {
+  html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) [class~="grid"][class~="gap-6"][class~="lg:grid-cols-2"]:has(> [class~="card"]:first-child [data-ui~="dist-table"] > table) {
     grid-template-columns: minmax(0, 1fr);
   }
 }
@@ -145,12 +156,13 @@ html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="auth"] > di
 }
 
 /* B1.11 Group pickers (GroupSelector rows: account forms, announcement targeting, key dialogs): the group badge
-   keeps its own width instead of stretching into a bar, the account count sits at the right edge. */
-html.flat-theme label[class~="cursor-pointer"]:has(> input[type="checkbox"]) > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] {
+   keeps its own width instead of stretching into a bar, the account count sits at the right edge. Perf pass: the
+   rows are hooked ([data-ui="group-pick-row"], GroupSelector.vue); the two child selectors need no :has(). */
+html.flat-theme [data-ui="group-pick-row"] > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] {
   flex: 0 1 auto;
 }
 
-html.flat-theme label[class~="cursor-pointer"]:has(> input[type="checkbox"]) > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] + span[class~="shrink-0"] {
+html.flat-theme [data-ui="group-pick-row"] > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] + span[class~="shrink-0"] {
   margin-left: auto;
 }
 
@@ -162,12 +174,12 @@ html.flat-theme label[class~="cursor-pointer"]:has(> input[type="checkbox"]) > s
      user names and order numbers. */
 html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="request_id"], [data-column="upstream_request_id"]) span[class~="truncate"],
 html.flat-theme .table-wrapper[data-table="usage"] td[data-column="user_agent"] > span[class~="truncate"],
-html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) section[class~="rounded-2xl"] td > span[class~="block"][class~="truncate"],
-html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]),
+html.flat-theme [data-ui~="ops-dashboard"] section[class~="rounded-2xl"] td > span[class~="block"][class~="truncate"],
+html.flat-theme [data-ui~="ops-dashboard"] :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]),
 html.flat-theme td[class~="max-w-[240px]"][class~="truncate"][class~="px-4"][class~="py-3"],
 html.flat-theme span[class~="max-w-[220px]"][class~="truncate"][class~="font-mono"][class~="text-[11px]"],
 html.flat-theme span[class~="min-w-0"][class~="flex-1"][class~="truncate"][class~="font-mono"][class~="text-[11px]"],
-html.flat-theme :is(.modal-body:has(.compact-select), [class~="card"]:has(> div > button[data-testid="usage-detail-tab"])) .table-wrapper:not([data-table="usage"]) td:is([data-column="message"], [data-column="user_agent"]) > span[class~="block"][class~="truncate"],
+html.flat-theme :is([data-ui~="ops-error-list"], [data-ui~="usage-records"]) .table-wrapper:not([data-table="usage"]) td:is([data-column="message"], [data-column="user_agent"]) > span[class~="block"][class~="truncate"],
 html.flat-theme div[class~="truncate"][class~="max-w-[360px]"][class~="font-semibold"],
 html.flat-theme .modal-body div[class~="rounded-xl"][class~="p-4"] > div > div[class~="truncate"][class~="text-sm"][class~="font-semibold"],
 html.flat-theme .usage-filter-dropdown > div[class~="absolute"] > button > span[class~="truncate"],
@@ -180,14 +192,15 @@ html.flat-theme .table-wrapper :is(div, button)[class~="max-w-56"][class~="trunc
   overflow-wrap: anywhere;
 }
 
-/* (运维监控 concurrency rows: the name and the e-mail may shrink and wrap as a pair; the request ID may use
-   the wide sheet's free width and stays on one line where it fits) */
-html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="min-w-0"][class~="flex-1"][class~="items-center"][class~="gap-1.5"]:has(> span[class~="truncate"][class~="text-[11px]"]) {
+/* (运维监控 concurrency rows: the name and the e-mail may shrink and wrap as a pair; the request ID may use the wide
+   sheet's free width and stays on one line where it fits). Perf pass: the :has() stays in the subject of the row it
+   styles (the row is the element that wraps), scoped under the page's own hook. */
+html.flat-theme [data-ui~="ops-dashboard"][data-ui] div[class~="min-w-0"][class~="flex-1"][class~="items-center"][class~="gap-1.5"]:has(> span[class~="truncate"][class~="text-[11px]"]) {
   flex-wrap: wrap;
   row-gap: 0;
 }
 
-html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]) {
+html.flat-theme [data-ui~="ops-dashboard"] :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]) {
   min-width: 0;
   flex-shrink: 1;
 }
@@ -363,9 +376,11 @@ html.flat-theme .theme-tour-popover .driver-popover-close-btn {
 /* ================================================================== B4 · figures never spill */
 
 /* B4.1 KPI cards (upstream: .grid > .card.p-4 with a tile and a text column): the text column may shrink and a
-   figure too long for the card wraps inside it ($999,999,875,767.73) instead of painting under the next card. */
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) > :nth-child(2),
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) > :nth-child(2) {
+   figure too long for the card wraps inside it ($999,999,875,767.73) instead of painting under the next card.
+   Perf pass: the tile's next sibling is the text column, so no :has() is needed; the repeated [class]s keep the
+   original 0,8,2. */
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child + :nth-child(2),
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child + :nth-child(2) {
   min-width: 0;
 }
 
@@ -384,8 +399,10 @@ html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] p[class~="text-x
 }
 
 /* B4.3 用户仪表盘「今日消费」 and 「总计」: the standard price after the figure wraps as one piece, so its slash
-   leads the second line instead of dangling. */
-html.flat-theme main:has(button[class~="group"][class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"]) [class~="grid"] > [class~="card"][class~="p-4"] :is(p[class~="text-xl"] > span[class~="text-sm"], p[class~="text-xs"] > span[class~="text-gray-400"]) {
+   leads the second line instead of dangling. Perf pass: the page root carries the hook already, so the :has() that
+   asked "does this page hold the quick-action buttons" (a `main` anchor: every text node under it in one
+   invalidation set) is gone; the quick actions live only on the user dashboard, whose rows this rule is for. */
+html.flat-theme [data-ui="user-dashboard"][data-ui] [class~="grid"] > [class~="card"][class~="p-4"] :is(p[class~="text-xl"] > span[class~="text-sm"], p[class~="text-xs"] > span[class~="text-gray-400"]) {
   display: inline-block;
 }
 
@@ -407,16 +424,18 @@ html.flat-theme .terminal-window {
 
 /* B6.1 运维监控 metric tiles: the 「明细」 links never break into a vertical 「明 / 细」 (the tile label wraps
    instead), and 「ms (P99)」 moves under a long figure as one unit. */
-html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) button[class~="text-[10px]"][class~="font-bold"][class~="text-blue-500"] {
+html.flat-theme [data-ui~="ops-dashboard"] button[class~="text-[10px]"][class~="font-bold"][class~="text-blue-500"] {
   flex-shrink: 0;
   white-space: nowrap;
 }
 
-html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="items-baseline"][class~="gap-2"]:has(> div[class~="text-3xl"]) {
+html.flat-theme [data-ui~="ops-dashboard"][data-ui] div[class~="items-baseline"][class~="gap-2"]:has(> div[class~="text-3xl"]) {
   flex-wrap: wrap;
 }
 
-html.flat-theme div[class~="pb-12"]:has([data-testid="throughput-chart-header"]) div[class~="items-baseline"][class~="gap-2"]:has(> div[class~="text-3xl"]) > span {
+/* Perf pass: the trailing `> span` rule is named from the figure that sits beside the label (`+ span`), so nothing
+   follows a :has() any more (this keeps 「ms (P99)」 from wrapping between 「ms」 and 「(P99)」). */
+html.flat-theme [data-ui~="ops-dashboard"][data-ui] div[class~="items-baseline"][class~="gap-2"] > div[class~="text-3xl"] + span {
   white-space: nowrap;
 }
 
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index c751606cfd4e..71197aa5e285 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -110,8 +110,12 @@ html.flat-theme .input.input-error:focus {
 
 /* 3.2 Search fields: SearchInput.vue and the inline pattern (an absolute Lucide search glyph beside an .input inside
    a relative wrapper) are the reference's 30px search (REF-CONSOLE §8.4): 4.25px + the 19.5px line + 1px edges,
-   32px left inset, the 13px glyph 10px in. */
-html.flat-theme :is(div, label, form)[class~="relative"]:has(> svg.lucide-search, > div > svg.lucide-search) > input.input {
+   32px left inset, the 13px glyph 10px in.
+   Perf pass: the wrapper keeps the anchor, but the :has() argument is the glyph box ONLY (`> div > svg.lucide-search`),
+   which is the one feature Blink needs; the glyph's own box is not an anchor, so no descendant of the wrapper ends up
+   in a merged invalidation set. Measured as cheap on the accounts page (controls.css at 90 ms before, below). */
+html.flat-theme :is(div, label, form)[class~="relative"]:has(> div > svg.lucide-search) > input.input,
+html.flat-theme :is(div, label, form)[class~="relative"] > svg.lucide-search[class~="absolute"] + input.input {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
   padding-left: 2rem;
@@ -369,17 +373,43 @@ html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"],
    (actions, filters, pagination) and a horizontal row that holds a .btn (the dashboards' time-range bar) draw their
    fields and their Select / DateRangePicker triggers at the 30px of the search field, the filter pills and the
    buttons (the reference's /models filter row); a 34px trigger beside a 30px search or button reads as a misaligned
-   row. Labelled form fields elsewhere keep the reference's 34px field. */
-html.flat-theme :is(.table-page-layout > .layout-section-fixed, [class~="flex"][class~="items-center"]:not([class~="flex-col"]):has(> .btn)) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
+   row. Labelled form fields elsewhere keep the reference's 34px field.
+   Perf pass: the table pages' fixed rows and the dashboards' toolbar card are named by their own hook, without any
+   `:has()`; the "row that holds a .btn" case keeps its `:has()`, but the anchor carries the flag itself (:has() in the
+   subject, child argument only) and the fields are drawn through a container style query, so no descendant of a
+   matched row sits in a `:has()` invalidation set. The custom property inherits, so the fields see the flag wherever
+   they sit inside the row. */
+html.flat-theme :is(.table-page-layout > .layout-section-fixed, [data-ui~="time-bar"][data-ui][data-ui]) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
 
+@container style(--ctl-dense-row: 1) {
+  html.flat-theme :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input):not(uipad) {
+    padding-top: 0.265625rem;
+    padding-bottom: 0.265625rem;
+  }
+}
+
+/* the rows that ask for the dense row: a horizontal row holding a .btn (the dashboards' toolbar), and the dialogs'
+   rows (4.4b). The table pages' fixed rows keep the rule above (their own hook), so they are not doubled here. */
+html.flat-theme [class~="flex"][class~="items-center"]:not([class~="flex-col"]):has(> .btn) {
+  --ctl-dense-row: 1;
+}
+
 /* 4.4b The same in a dialog: a row that holds a button (余额记录's type filter beside 充值 / 退款, the 专属倍率 / 专属 RPM add
-   rows, bottom-aligned) draws its fields at the button's 30px (final review V1-10) */
-html.flat-theme .modal-body [class~="flex"]:is([class~="items-center"], [class~="items-end"]):not([class~="flex-col"]):has(> button) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
-  padding-top: 0.265625rem;
-  padding-bottom: 0.265625rem;
+   rows, bottom-aligned) draws its fields at the button's 30px (final review V1-10)
+   Perf pass: the row carries the flag (its own :has() stays in the subject with a child argument) and the fields
+   read it through the same container style query as 4.4. */
+html.flat-theme .modal-body [class~="flex"]:is([class~="items-center"], [class~="items-end"]):not([class~="flex-col"]):has(> button) {
+  --ctl-dense-row: 1;
+}
+
+@container style(--ctl-dense-row: 1) {
+  html.flat-theme .modal-body :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input):not(uipad) {
+    padding-top: 0.265625rem;
+    padding-bottom: 0.265625rem;
+  }
 }
 
 /* ================================================================== 5 · switches */
@@ -709,8 +739,11 @@ html.flat-theme :is([data-testid="usage-detail-tab"], .channel-tab.channel-tab)
    h-8 w-8 glyph tile) take the reference's dialog option card (REF-CONSOLE §8.11): radius 8, the structural line, the
    grouped fill at 60 %, the control outline on hover; a 28px tile with a 1px line and ink at 3 %. The chosen card is
    drawn like the segmented thumb: an ink edge 2px wide on the surface, its tile ink with on-ink glyph (upstream's
-   per-platform hues go: monochrome identity, D3). */
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) {
+   per-platform hues go: monochrome identity, D3).
+   Perf pass: the cards are hooked (data-ui="option-card", CreateAccountModal.vue and EditAccountModal.vue: the 22
+   buttons that carry the class pair), so no `:has()` on a bare button decides whether a card is a card. The repeated
+   [data-ui]s keep each rule's original specificity (0,8,3 / 0,10,3 / 0,9,3 / 0,9,4). */
+html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] {
   gap: 0.75rem;
   border-width: 1px;
   border-color: rgb(var(--ui-line));
@@ -722,17 +755,17 @@ html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][cla
   transition-timing-function: var(--ui-ease);
 }
 
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"][class~="border-gray-200"]:has(> div:first-child[class~="h-8"][class~="w-8"]):hover {
+html.flat-theme [data-ui="option-card"][class~="border-gray-200"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:hover {
   border-color: rgb(var(--ui-line-strong));
 }
 
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:not([class~="border-gray-200"]):has(> div:first-child[class~="h-8"][class~="w-8"]) {
+html.flat-theme [data-ui="option-card"]:not([class~="border-gray-200"])[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] {
   border-color: rgb(var(--ui-ink));
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
 }
 
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) > div:first-child {
+html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:first-child {
   height: 1.75rem;
   width: 1.75rem;
   border: 1px solid rgb(var(--ui-line));
@@ -741,25 +774,25 @@ html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][cla
   color: rgb(var(--ui-ink) / 0.7);
 }
 
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:not([class~="border-gray-200"]):has(> div:first-child[class~="h-8"][class~="w-8"]) > div:first-child {
+html.flat-theme [data-ui="option-card"]:not([class~="border-gray-200"])[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:first-child {
   border-color: rgb(var(--ui-ink));
   background-color: rgb(var(--ui-ink));
   color: rgb(var(--ui-on-ink));
 }
 
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) > div:first-child svg {
+html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:first-child svg {
   width: 0.875rem;
   height: 0.875rem;
 }
 
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) > div:last-child > span:first-child {
+html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:last-child > span:first-child {
   font-size: 0.8125rem;
   line-height: 1.21875rem;
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="p-3"][class~="text-left"]:has(> div:first-child[class~="h-8"][class~="w-8"]) > div:last-child > span:last-child:not(:first-child) {
+html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:last-child > span:last-child:not(:first-child) {
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: rgb(var(--ui-muted));
@@ -851,7 +884,7 @@ html.flat-theme :where(:is(button, a):is([class~="bg-primary-500"], [class~="bg-
    button (the blue and emerald outlines were decoration), clearing every model keeps the destructive outline, and
    「填入」 beside the custom model field is the default button at the field's 34px. (wave 2, reported by the accounts
    agent) */
-html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button[class~="border-red-200"], div:has(> button[data-testid="fill-related-models"]) + div button[class~="bg-primary-50"]) {
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button[class~="border-red-200"], input.input ~ button[class~="bg-primary-50"]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -869,7 +902,7 @@ html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upst
   transition-timing-function: var(--ui-ease);
 }
 
-html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], div:has(> button[data-testid="fill-related-models"]) + div button[class~="bg-primary-50"]):not(:disabled):hover {
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], input.input ~ button[class~="bg-primary-50"]):not(:disabled):hover {
   background-color: rgb(var(--ui-subtle));
   color: rgb(var(--ui-ink));
 }
@@ -885,11 +918,11 @@ html.flat-theme [data-testid="fill-related-models"] ~ button[class~="border-red-
   color: rgb(var(--ui-danger));
 }
 
-html.flat-theme div:has(> button[data-testid="fill-related-models"]) + div button[class~="bg-primary-50"] {
+html.flat-theme input.input ~ button[class~="bg-primary-50"] {
   min-height: var(--ui-select-h);
 }
 
-html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button[class~="border-red-200"], div:has(> button[data-testid="fill-related-models"]) + div button[class~="bg-primary-50"]):focus-visible {
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button[class~="border-red-200"], input.input ~ button[class~="bg-primary-50"]):focus-visible {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: 2px;
 }
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index d874d33f54b1..579c929a7236 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -135,7 +135,7 @@ html.flat-theme.dark {
 /* ================================================================== 1 · DataTable (desktop and, theme on, phones) */
 
 /* The card around the table is the layout's (section 2); the wrapper scrolls both ways. */
-html.flat-theme .table-wrapper > table:has(> tbody.table-body) {
+html.flat-theme .table-wrapper > table[data-ui~="data-table"]:is(table) {
   border-collapse: collapse;
   font-size: 13px;
   line-height: 19.5px;
@@ -241,7 +241,7 @@ html.flat-theme .table-wrapper > table > tbody.table-body > tr + tr {
 }
 
 /* numbers: right-aligned columns (column.class text-right) use tabular figures; mono cells already are */
-html.flat-theme .table-wrapper > table:has(> tbody.table-body) :is(th, td)[class~="text-right"] {
+html.flat-theme .table-wrapper > table[data-ui~="data-table"]:is(table) :is(th, td)[class~="text-right"] {
   font-variant-numeric: tabular-nums;
 }
 
@@ -281,11 +281,11 @@ html.flat-theme .table-wrapper .table-body > tr[data-row-id]:is(:hover, :focus-w
 
 /* Selected rows (DataTable's own selection, or a checked box in a `select` column): the accent's soft fill, which
    the reference uses for every selected or active fill; hover keeps it and darkens a step. */
-html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) {
+html.flat-theme .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr) {
   background-color: rgb(var(--ui-primary-soft));
 }
 
-html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)):hover {
+html.flat-theme .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr):hover {
   background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
 }
 
@@ -293,14 +293,14 @@ html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"],
    #919191 3.54:1, text-gray-500 / dark:text-dark-400 #9c9c9c 4.06:1): in a selected row they take the muted grey
    (#b3b3b3, 5.39:1; 5.1 on the selected hover). Light is unchanged. Every selectable table. (wave 2, reported by
    the management and user-side agents) */
-html.flat-theme.dark .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
+html.flat-theme.dark .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
   color: rgb(var(--ui-muted));
 }
 
 /* and the danger red of a failure note in a selected row (the accounts usage tickets' 「…检查失败」): #f87171 is 4.03:1 on
    the selected fill; the lighter red keeps it a failure and readable (batch 7, reported by the accounts agent).
    Amber (6.68) and the light theme's red (4.79) hold as they are. */
-html.flat-theme.dark .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) :is([class~="text-red-500"], [class~="text-red-600"], [class~="dark:text-red-400"]) {
+html.flat-theme.dark .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr) :is([class~="text-red-500"], [class~="text-red-600"], [class~="dark:text-red-400"]) {
   color: rgb(var(--ui-selected-danger));
 }
 
@@ -316,11 +316,11 @@ html.flat-theme .table-wrapper .table-body > tr[data-row-id]:is(:hover, :focus-w
   background-color: rgb(var(--ui-hover));
 }
 
-html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) > .sticky-col {
+html.flat-theme .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr) > .sticky-col {
   background-color: rgb(var(--ui-primary-soft));
 }
 
-html.flat-theme .table-wrapper .table-body > tr:is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)):hover > .sticky-col {
+html.flat-theme .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr):hover > .sticky-col {
   background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
 }
 
@@ -666,23 +666,28 @@ html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text
   background-color: var(--ui-row-key, transparent);
 }
 
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(1 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-1); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(2 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-2); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(3 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-3); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(4 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-4); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(5 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-5); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(6 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-6); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-7); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-8); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(9 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-9); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(10 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-10); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(11 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-11); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(12 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-12); }
-
-/* the user dashboard's doughnut takes series 1-6, 11 and 10 for its eight slices (UserDashboardCharts.vue) */
-html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-11); }
-html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of :not(:has(> td[colspan]))) { --ui-row-key: var(--theme-chart-series-10); }
-html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(n + 9 of :not(:has(> td[colspan]))) { --ui-row-key: transparent; }
+/* A data row is marked by the component (data-ui="dist-row"), a breakdown / expansion row by data-ui="dist-group":
+   counting only the data rows picks the palette colour of each slice. The `of <selector>` argument keeps the rule's
+   one type in the specificity, exactly as the pre-pass `:nth-child(n of :not(:has(> td[colspan])))` did. */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(1 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-1); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(2 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-2); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(3 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-3); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(4 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-4); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(5 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-5); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(6 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-6); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-7); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-8); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(9 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-9); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(10 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-10); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(11 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-11); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(12 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-12); }
+
+/* the user dashboard's doughnut takes series 1-6, 11 and 10 for its eight slices (UserDashboardCharts.vue): that card
+   carries data-ui="chart-card". Both rules are the same shape as the list above, so the later one still wins on source
+   order, exactly as it did before. */
+html.flat-theme [data-ui~="chart-card"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-11); }
+html.flat-theme [data-ui~="chart-card"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-10); }
+html.flat-theme [data-ui~="chart-card"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(n + 9 of tr[data-ui="dist-row"]) { --ui-row-key: transparent; }
 
 /* the spending ranking's remainder row ("others", upstream's grey band) is the grey slice */
 html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr[class~="bg-gray-50/70"] {
@@ -948,8 +953,8 @@ html.flat-theme [data-ui="group-badge"][class*="-orange-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-orange-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-orange-"],
 html.flat-theme [data-ui~="platform-text"][class*="-orange-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-orange-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-orange-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-orange-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-orange-"]) {
   --pf-text: var(--ui-id-orange);
   --pf-soft: var(--ui-id-orange-soft);
   --pf-line: var(--ui-id-orange-line);
@@ -961,8 +966,8 @@ html.flat-theme [data-ui="group-badge"][class*="-amber-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-amber-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-amber-"],
 html.flat-theme [data-ui~="platform-text"][class*="-amber-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-amber-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-amber-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-amber-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-amber-"]) {
   --pf-text: var(--ui-id-amber);
   --pf-soft: var(--ui-id-amber-soft);
   --pf-line: var(--ui-id-amber-line);
@@ -974,8 +979,8 @@ html.flat-theme [data-ui="group-badge"][class*="-emerald-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-emerald-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-emerald-"],
 html.flat-theme [data-ui~="platform-text"][class*="-emerald-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-emerald-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-emerald-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-emerald-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-emerald-"]) {
   --pf-text: var(--ui-id-emerald);
   --pf-soft: var(--ui-id-emerald-soft);
   --pf-line: var(--ui-id-emerald-line);
@@ -987,8 +992,8 @@ html.flat-theme [data-ui="group-badge"][class*="-green-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-green-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-green-"],
 html.flat-theme [data-ui~="platform-text"][class*="-green-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-green-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-green-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-green-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-green-"]) {
   --pf-text: var(--ui-id-green);
   --pf-soft: var(--ui-id-green-soft);
   --pf-line: var(--ui-id-green-line);
@@ -1000,8 +1005,8 @@ html.flat-theme [data-ui="group-badge"][class*="-teal-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-teal-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-teal-"],
 html.flat-theme [data-ui~="platform-text"][class*="-teal-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-teal-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-teal-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-teal-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-teal-"]) {
   --pf-text: var(--ui-id-teal);
   --pf-soft: var(--ui-id-teal-soft);
   --pf-line: var(--ui-id-teal-line);
@@ -1013,8 +1018,8 @@ html.flat-theme [data-ui="group-badge"][class*="-cyan-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-cyan-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-cyan-"],
 html.flat-theme [data-ui~="platform-text"][class*="-cyan-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-cyan-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-cyan-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-cyan-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-cyan-"]) {
   --pf-text: var(--ui-id-cyan);
   --pf-soft: var(--ui-id-cyan-soft);
   --pf-line: var(--ui-id-cyan-line);
@@ -1026,8 +1031,8 @@ html.flat-theme [data-ui="group-badge"][class*="-sky-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-sky-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-sky-"],
 html.flat-theme [data-ui~="platform-text"][class*="-sky-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-sky-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-sky-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-sky-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-sky-"]) {
   --pf-text: var(--ui-id-sky);
   --pf-soft: var(--ui-id-sky-soft);
   --pf-line: var(--ui-id-sky-line);
@@ -1039,8 +1044,8 @@ html.flat-theme [data-ui="group-badge"][class*="-blue-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-blue-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-blue-"],
 html.flat-theme [data-ui~="platform-text"][class*="-blue-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-blue-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-blue-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-blue-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-blue-"]) {
   --pf-text: var(--ui-id-blue);
   --pf-soft: var(--ui-id-blue-soft);
   --pf-line: var(--ui-id-blue-line);
@@ -1052,8 +1057,8 @@ html.flat-theme [data-ui="group-badge"][class*="-indigo-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-indigo-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-indigo-"],
 html.flat-theme [data-ui~="platform-text"][class*="-indigo-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-indigo-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-indigo-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-indigo-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-indigo-"]) {
   --pf-text: var(--ui-id-indigo);
   --pf-soft: var(--ui-id-indigo-soft);
   --pf-line: var(--ui-id-indigo-line);
@@ -1065,8 +1070,8 @@ html.flat-theme [data-ui="group-badge"][class*="-violet-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-violet-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-violet-"],
 html.flat-theme [data-ui~="platform-text"][class*="-violet-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-violet-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-violet-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-violet-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-violet-"]) {
   --pf-text: var(--ui-id-violet);
   --pf-soft: var(--ui-id-violet-soft);
   --pf-line: var(--ui-id-violet-line);
@@ -1078,8 +1083,8 @@ html.flat-theme [data-ui="group-badge"][class*="-purple-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-purple-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-purple-"],
 html.flat-theme [data-ui~="platform-text"][class*="-purple-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-purple-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-purple-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-purple-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-purple-"]) {
   --pf-text: var(--ui-id-purple);
   --pf-soft: var(--ui-id-purple-soft);
   --pf-line: var(--ui-id-purple-line);
@@ -1091,8 +1096,8 @@ html.flat-theme [data-ui="group-badge"][class*="-fuchsia-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-fuchsia-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-fuchsia-"],
 html.flat-theme [data-ui~="platform-text"][class*="-fuchsia-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-fuchsia-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-fuchsia-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-fuchsia-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-fuchsia-"]) {
   --pf-text: var(--ui-id-fuchsia);
   --pf-soft: var(--ui-id-fuchsia-soft);
   --pf-line: var(--ui-id-fuchsia-line);
@@ -1104,8 +1109,8 @@ html.flat-theme [data-ui="group-badge"][class*="-pink-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-pink-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-pink-"],
 html.flat-theme [data-ui~="platform-text"][class*="-pink-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-pink-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-pink-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-pink-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-pink-"]) {
   --pf-text: var(--ui-id-pink);
   --pf-soft: var(--ui-id-pink-soft);
   --pf-line: var(--ui-id-pink-line);
@@ -1117,8 +1122,8 @@ html.flat-theme [data-ui="group-badge"][class*="-rose-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-rose-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-rose-"],
 html.flat-theme [data-ui~="platform-text"][class*="-rose-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-rose-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-rose-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-rose-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-rose-"]) {
   --pf-text: var(--ui-id-rose);
   --pf-soft: var(--ui-id-rose-soft);
   --pf-line: var(--ui-id-rose-line);
@@ -1130,8 +1135,8 @@ html.flat-theme [data-ui="group-badge"][class*="-zinc-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-zinc-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-zinc-"],
 html.flat-theme [data-ui~="platform-text"][class*="-zinc-"],
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-zinc-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:first-child:has(> span:first-child[class*="-zinc-"]) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-zinc-"],
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-zinc-"]) {
   --pf-text: var(--ui-id-zinc);
   --pf-soft: var(--ui-id-zinc-soft);
   --pf-line: var(--ui-id-zinc-line);
@@ -1276,7 +1281,7 @@ html.flat-theme [data-ui="group-badge"] > span:not(:first-of-type):is([class~="b
 
 /* 6.3 Group pickers: GroupOptionItem's rate pill is the platform's chip in the reference's pill form (Geist Mono, 1px
    line); its peak-window pill stays the warning chip. GroupSelector rows hold GroupBadge (6.2). */
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"] {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"] {
   padding: 1px 8px;
   border: 1px solid rgb(var(--pf-line, var(--ui-line)));
   background-color: rgb(var(--pf-soft, var(--ui-subtle)));
@@ -1287,7 +1292,7 @@ html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div >
   line-height: 16px;
 }
 
-html.flat-theme div:has(> div > .groupOptionItemBadge) > div:last-child > div > span[class~="rounded-full"]:not(:first-child) {
+html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:not(:first-child) {
   border-color: rgb(var(--ui-warning) / 0.3);
   background-color: rgb(var(--ui-warning-soft));
   color: rgb(var(--ui-warning));
@@ -1369,16 +1374,16 @@ html.flat-theme .model-icon-fallback {
    is a coloured icon tile) take the reference's StatTile (REF §8.13): 1px structural line, 6px radius, surface,
    8 / 12 inset, the mono label, the value 15/600 tabular ink, the detail 11px muted, 76px; no icon tile; 10px
    apart. */
-html.flat-theme [class~="grid"]:has(> [class~="card"][class~="p-4"] > div[class~="rounded-lg"][class~="p-2"]:first-child, > [class~="card"][class~="p-4"] > [class~="flex"]:first-child > div[class~="rounded-lg"][class~="p-2"]:first-child) {
+html.flat-theme [class~="grid"]:where([data-ui="kpi-grid"])[data-ui] {
   gap: 10px;
 }
 
 /* two KPI rows in a row (the admin dashboard) read as one grid: 10px apart, not the page's 24 */
-html.flat-theme [class~="grid"]:has(> [class~="card"][class~="p-4"] > [class~="flex"]:first-child > div[class~="rounded-lg"][class~="p-2"]:first-child) + [class~="grid"]:has(> [class~="card"][class~="p-4"] > [class~="flex"]:first-child > div[class~="rounded-lg"][class~="p-2"]:first-child) {
+html.flat-theme [class~="grid"]:where([data-ui="kpi-grid"])[data-ui] + [class~="grid"]:where([data-ui="kpi-grid"])[data-ui] {
   margin-top: 10px;
 }
 
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child, > [class~="flex"]:first-child > div[class~="rounded-lg"][class~="p-2"]:first-child) {
+html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui] {
   --ui-kpi-accent: var(--ui-ink);
   display: flex;
   flex-direction: column;
@@ -1395,11 +1400,11 @@ html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(> div[class~
   box-shadow: none;
 }
 
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:first-child:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) {
+html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"] > [class~="flex"]:first-child[class][class] {
   display: block;
 }
 
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child:is(:has(> svg), :has(> [class~="icon"]), :not(:has(*))) {
+html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"] div[class~="rounded-lg"][class~="p-2"]:first-child[class][class] {
   display: none;
 }
 
@@ -1442,7 +1447,7 @@ html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="roun
 
 /* the detail line(s): 11px muted; the cost triples keep their order, weight marks the actual cost (the titles name
    each figure); status words keep their status colour */
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > :is(p, div):not(:first-child):not(:has(> p[class~="text-xl"])):not([class~="text-xl"]) {
+html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > :is(p, div):not(:first-child):not([class~="text-xl"])[class] {
   color: rgb(var(--ui-muted));
   font-size: 11px;
   line-height: 16.5px;
@@ -1697,15 +1702,17 @@ html.flat-theme :is(.skeleton, [data-ui="skeleton"], [class~="animate-pulse"][cl
 
 /* ================================================================== 10 · chart cards */
 
-/* Cards holding a chart (REF §8.14 Spend over time: 14px inset, the title as a mono label). A chart card is known by
-   its canvas or by the fixed-height chart area it keeps while loading or empty (h-48 / h-64), so the title does not
-   change with the data. */
-html.flat-theme [class~="card"][class~="p-4"]:has(canvas, > div[class~="h-48"], > div[class~="h-64"], > div > div[class~="h-48"]) {
+/* Cards holding a chart (REF §8.14 Spend over time: 14px inset, the title as a mono label). A chart card says so
+   itself: the component that owns the canvas or the fixed-height chart area (h-48 / h-64, which it keeps while loading
+   or empty) carries data-ui="chart-card" (the five dist/trend chart components, the two account stats modals, the
+   admin dashboard's trend card and the payment revenue card). The hook is inside :where() so the selector keeps the
+   compound's own weight exactly as the pre-pass :has(canvas, ...) did. */
+html.flat-theme [class~="card"][class~="p-4"]:where([data-ui="chart-card"]) {
   padding: 14px;
 }
 
-html.flat-theme [class~="card"][class~="p-4"]:has(canvas, > div[class~="h-48"], > div[class~="h-64"], > div > div[class~="h-48"]) > h3[class~="text-sm"][class~="font-semibold"],
-html.flat-theme [class~="card"][class~="p-4"]:has(canvas, > div[class~="h-48"], > div[class~="h-64"], > div > div[class~="h-48"]) > div:first-child > h3[class~="text-sm"][class~="font-semibold"] {
+html.flat-theme [class~="card"][class~="p-4"]:where([data-ui="chart-card"]) > h3[class~="text-sm"][class~="font-semibold"],
+html.flat-theme [class~="card"][class~="p-4"]:where([data-ui="chart-card"]) > div:first-child > h3[class~="text-sm"][class~="font-semibold"] {
   color: rgb(var(--ui-label));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
@@ -1727,7 +1734,7 @@ html.flat-theme [class~="card"][class~="p-4"]:has(canvas, > div[class~="h-48"],
    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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], body > div[class~="z-[140]"]) *))[class][class] {
   border: 1px solid rgb(var(--ui-line));
   background-color: rgb(var(--ui-subtle));
   background-image: none;
@@ -1737,38 +1744,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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], body > 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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], body > 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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], 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] {
   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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], 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 *)) {
   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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], body > 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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], 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] {
   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"], :has(> button[class~="text-lg"][class~="leading-none"])):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"], 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] {
   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/overlays.css b/frontend/src/styles/console/overlays.css
index 3e95fd00762d..d4dd2901eaa3 100644
--- a/frontend/src/styles/console/overlays.css
+++ b/frontend/src/styles/console/overlays.css
@@ -348,7 +348,9 @@ html.flat-theme .account-tools-menu-item .account-tools-menu-icon svg {
   height: 13px;
 }
 
-html.flat-theme div[class~="fixed"] > div > div[class~="px-2"][class~="py-2"]:has(~ .account-tools-menu-item):not(uipad) {
+/* Perf pass: the panel is hooked ([data-ui="account-tools-panel"], AccountsView.vue) and the :has() sits in the
+   subject with a sibling argument (the group-title row is the container whose next siblings are items). */
+html.flat-theme [data-ui="account-tools-panel"] > div[class~="px-2"][class~="py-2"]:has(~ .account-tools-menu-item) {
   padding: 8px var(--ui-menu-row-x) 4px;
 }
 
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
index 28f25fdfae9c..dd36d58d5e55 100644
--- a/frontend/src/styles/console/pages/dashboard-usage.css
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -787,15 +787,22 @@ html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] > button.tab.tab
 }
 
 /* The pagination under the records card is the card's footer (as data.css joins them on the table pages): the card
-   loses its bottom corners, the pagination takes the card's edge and the bottom corners. */
-html.flat-theme [data-ui="user-usage"] > .card[data-ui~="records-card"]:has(+ [data-ui="pagination"]),
-html.flat-theme [data-ui="user-usage"] .card[data-ui~="records-card"]:has(+ div > [data-ui="pagination"]) {
+   loses its bottom corners, the pagination takes the card's edge and the bottom corners — on BOTH tabs of the user page
+   (用量明细 and 错误请求: the error card carries the same hook, and the baseline join claims it too). The hook alone is
+   not enough for the margin: the pages' own `.space-y-6 > * ~ *` (0,5,1, dashboard-usage.css:36) carries the 12px
+   rhythm, so the margin rule has to keep the old `:has(> .table-wrapper) + div` weight — the extra attribute keeps
+   0,7,1 / 0,6,2 as it was (perf pass: the doubled attribute is deliberate, never matches twice). PERF.md: no `:has()`
+   in a non-subject position, so where the old rule put one above what it styled, the card's own
+   `[class~="overflow-hidden"]` (the records card is the only `.card` that has it and holds a table; the error card has
+   it too) carries the same weight the `:has(> .table-wrapper)` anchor did. */
+html.flat-theme [data-ui="user-usage"] > .card[class~="overflow-hidden"]:has(+ [data-ui="pagination"]),
+html.flat-theme [data-ui="user-usage"] .card[class~="overflow-hidden"]:has(+ div > [data-ui="pagination"]) {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-html.flat-theme [data-ui="user-usage"] > .card[data-ui~="records-card"] + [data-ui="pagination"]:not([hidden]),
-html.flat-theme [data-ui="user-usage"] .card[data-ui~="records-card"] + div > [data-ui="pagination"] {
+html.flat-theme [data-ui="user-usage"] > .card[data-ui~="records-card"][data-ui~="records-card"] + [data-ui="pagination"]:not([hidden]),
+html.flat-theme [data-ui="user-usage"] .card[data-ui~="records-card"][data-ui~="records-card"] + div > [data-ui="pagination"] {
   margin-top: 0;
   border: 1px solid rgb(var(--ui-line));
   border-top-width: 0;
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index 9ac7a123acf2..0fd46a26a985 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -466,8 +466,9 @@ html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-betwe
   margin-top: 10px;
 }
 
-/* no forgot-password link (password reset off, backend mode): the empty row takes no room */
-html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-between"]:not(:has(a)) {
+/* no forgot-password link (password reset off, backend mode): the row keeps a bare <span> and no link, so it takes no
+   room. Child argument: only the row's own link counts (a link inside the span would be the same row's link anyway). */
+html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-between"]:not(:has(> a)) {
   display: none;
 }
 
@@ -2479,8 +2480,11 @@ html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"]
   color: rgb(var(--ui-muted));
 }
 
-/* a glyph beside a card title is a neutral mark, not a hue (decision 2) */
-html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] :is(h2 svg, div:has(> h2) > svg) {
+/* a glyph beside a card title is a neutral mark, not a hue (decision 2). The glyph sits either inside the title or
+   just before it; both forms are named without a `:has()` on a bare `div` (the two selectors say exactly what the old
+   `:is(h2 svg, div:has(> h2) > svg)` said, because a div holding an h2 does not carry an icon of its own). */
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] h2 svg,
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] div > svg:has(~ h2) {
   width: 0.9375rem;
   height: 0.9375rem;
   color: rgb(var(--ui-ink-soft));
@@ -2500,17 +2504,21 @@ html.flat-theme [data-ui~="settings"] .card > div:is([class~="p-6"], [class~="px
 
 /* 3.1 Switch rows: a title and its description on the left, the switch on the right, 16px apart at least (upstream
    has no gap: a long description ran into the switch). Title 13 / 19.5 600 ink (the reference's card and option titles;
-   upstream's bare label is 16px), description 12 / 18 muted. */
-html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) {
+   upstream's bare label is 16px), description 12 / 18 muted.
+   The row is found by its own hook (data-ui~="setting-row", on the flex wrapper that holds the switch), not by `:has()`
+   on a bare `div`: a generic `:has()` anchor merges every descendant into one invalidation set, and the anchor's whole
+   subtree is then re-styled whenever any of those descendants may have changed. The hook keeps the same rows (a switch
+   or a peer switch that is the row's direct child) and leaves the selector's specificity untouched. */
+html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] {
   gap: 1rem;
 }
 
-html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > div:first-child {
+html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > div:first-child {
   min-width: 0;
 }
 
-html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > div:first-child > :is(label, span, h3, h4, p):first-child:not([class~="font-mono"]),
-html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > :is(label, span, h3, h4):first-child:not([class~="font-mono"]) {
+html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > div:first-child > :is(label, span, h3, h4, p):first-child:not([class~="font-mono"]),
+html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > :is(label, span, h3, h4):first-child:not([class~="font-mono"]) {
   font-family: var(--ui-font);
   font-size: 0.8125rem;
   line-height: 1.21875rem;
@@ -2520,19 +2528,21 @@ html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > div:first-child > p:not(:first-child) {
+html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > div:first-child > p:not(:first-child) {
   margin-top: 0.125rem;
   font-size: 0.75rem;
   line-height: 1.125rem;
 }
 
-html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"]:has(> button[role="switch"], > button[class~="rounded-full"][class~="border-2"], > label > input[class~="peer"]) > div:first-child > p:not(:first-child):is([class~="text-gray-500"], [class~="text-gray-400"], [class~="text-gray-600"]) {
+html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > div:first-child > p:not(:first-child):is([class~="text-gray-500"], [class~="text-gray-400"], [class~="text-gray-600"]) {
   color: rgb(var(--ui-muted));
 }
 
 /* 3.2 Titles inside a card: the bare row labels (label.font-medium, 16px upstream) and the sub-section headings of any
    size are the reference's 13 / 600 ink card title; dialogs drawn inside the page keep theirs. A label followed by its
-   description (not by a field) is such a title too. */
+   description (not by a field) is such a title too. The `:has()` stays in the subject compound on this class-qualified
+   label and asks only about its next sibling, so it neither styles a descendant of the anchor nor makes the anchor's
+   subtree part of the invalidation set. */
 html.flat-theme [data-ui~="settings"] .card label[class~="text-sm"][class~="font-medium"]:not([class~="block"]):has(+ p) {
   font-weight: 600;
   color: rgb(var(--ui-ink));
@@ -2759,8 +2769,11 @@ html.flat-theme [data-ui~="settings"] .card table > thead:not([class~="bg-gray-5
   color: rgb(var(--ui-label));
 }
 
-/* the matrix rows set their name beside 32px fields: centred on the field, not on its top edge */
-html.flat-theme [data-ui~="settings"] .card table tr[class~="align-top"]:has(> td > input) > td {
+/* the matrix rows set their name beside 32px fields: centred on the field, not on its top edge. The row carries the
+   hook (data-ui~="quota-row": the platform quota matrices, the only `align-top` rows in the page that hold inputs), so
+   the cells are styled without a `:has()` that would invalidate the anchor's subtree. The backup list's `align-top`
+   rows have no inputs and keep their alignment, exactly as the old filter left them. */
+html.flat-theme [data-ui~="settings"] .card table tr[data-ui~="quota-row"] > td {
   vertical-align: middle;
 }
 
diff --git a/frontend/src/styles/console/shell.css b/frontend/src/styles/console/shell.css
index f2033010f348..5a6a015ae619 100644
--- a/frontend/src/styles/console/shell.css
+++ b/frontend/src/styles/console/shell.css
@@ -116,13 +116,14 @@ html.flat-theme .custom-page-layout {
    column under the header instead of subtracting a fixed header height. With the one-line header it ends where the
    calc above ends it (900 - 30). */
 @media (min-width: 1024px) {
-  html.flat-theme .app-main:has(> main > :is(.table-page-layout, .custom-page-layout)) {
+  /* Perf pass: the wrapper is hooked ([data-ui="app-shell"], AppLayout.vue) instead of asking `:has(> main > ...)` on
+     .app-main, a body-level anchor whose whole subtree sat in one invalidation set. */
+  html.flat-theme [data-ui~="app-shell"] .app-main {
     display: flex;
     flex-direction: column;
     height: 100vh;
   }
 
-  /* :has() in the subject only (perf pass: a non-subject :has() re-styles the anchor's whole subtree) */
   html.flat-theme .app-main > main:has(> :is(.table-page-layout, .custom-page-layout)):not(uipad) {
     display: flex;
     flex: 1 1 0;
@@ -483,7 +484,10 @@ html.flat-theme .app-main > header > div > div:last-child {
     flex: 0 0 auto;
   }
 
-  html.flat-theme .app-main > header > div > div:first-child > div[class~="hidden"]:has(> h1) {
+  /* Perf pass: the h1 is always there (AppHeader renders the title), so the `:has(> h1)` test on the wrapper was
+     redundant; the wrapper is named by the h1 it holds (`div:has(> h1)` removal — see the desktop rule below) and
+     the once-hidden title now displays. */
+  html.flat-theme .app-main > header > div > div:first-child > div[class~="hidden"][data-ui~="header-title"] {
     display: block;
     flex: 1 1 auto;
     min-width: 0;
@@ -531,8 +535,9 @@ html.flat-theme .app-main > header > div > div:last-child {
 
   /* Title · description: the page title 20/28 600 (REF §8.2), the description 13px muted on the same baseline
      after a faint dot. A description longer than the row wraps, its lines under its first word (nothing is cut; the
-     ellipsis hid the end of 操作日志's and 提示词审计's notes). */
-  html.flat-theme .app-main > header div:has(> h1) {
+     ellipsis hid the end of 操作日志's and 提示词审计's notes). Perf pass: the wrapper is hooked
+     ([data-ui="header-title"], AppHeader.vue) instead of found by `div:has(> h1)` on a bare div. */
+  html.flat-theme .app-main > header [data-ui~="header-title"] {
     display: flex;
     align-items: baseline;
     min-width: 0;
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index 6253cfab03ff..e1caf76df064 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -93,6 +93,7 @@
                 <Teleport to="body">
                   <div
                     v-if="showAccountToolsDropdown"
+                    data-ui="account-tools-panel"
                     class="fixed z-[9999] origin-top-right overflow-hidden rounded-lg border border-gray-200 bg-white shadow-xl dark:border-dark-700 dark:bg-dark-800"
                     :style="accountToolsDropdownStyle"
                     @click.stop
@@ -274,6 +275,7 @@
           :data="accounts"
           :loading="loading"
           row-key="id"
+          :selected-keys="selIds"
           :server-side-sort="true"
           @sort="handleSort"
           default-sort-key="name"
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index 9f0f031b9a1c..f627c4c50a62 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -8,9 +8,9 @@
 
       <template v-else-if="stats">
         <!-- Row 1: Core Stats -->
-        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4" data-ui="kpi-grid">
           <!-- Total API Keys -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="kpi-tile">
             <div class="flex items-center gap-3">
               <div class="rounded-lg bg-blue-100 p-2 dark:bg-blue-900/30">
                 <Icon name="key" size="md" class="text-blue-600 dark:text-blue-400" :stroke-width="2" />
@@ -30,7 +30,7 @@
           </div>
 
           <!-- Service Accounts -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="kpi-tile">
             <div class="flex items-center gap-3">
               <div class="rounded-lg bg-purple-100 p-2 dark:bg-purple-900/30">
                 <Icon name="server" size="md" class="text-purple-600 dark:text-purple-400" :stroke-width="2" />
@@ -55,7 +55,7 @@
           </div>
 
           <!-- Today Requests -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="kpi-tile">
             <div class="flex items-center gap-3">
               <div class="rounded-lg bg-green-100 p-2 dark:bg-green-900/30">
                 <Icon name="chart" size="md" class="text-green-600 dark:text-green-400" :stroke-width="2" />
@@ -75,7 +75,7 @@
           </div>
 
           <!-- New Users Today -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="kpi-tile">
             <div class="flex items-center gap-3">
               <div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
                 <Icon name="userPlus" size="md" class="text-emerald-600 dark:text-emerald-400" :stroke-width="2" />
@@ -96,9 +96,9 @@
         </div>
 
         <!-- Row 2: Token Stats -->
-        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4">
+        <div class="grid grid-cols-2 gap-4 lg:grid-cols-4" data-ui="kpi-grid">
           <!-- Today Tokens -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="kpi-tile">
             <div class="flex items-center gap-3">
               <div class="rounded-lg bg-amber-100 p-2 dark:bg-amber-900/30">
                 <Icon name="cube" size="md" class="text-amber-600 dark:text-amber-400" :stroke-width="2" />
@@ -134,7 +134,7 @@
           </div>
 
           <!-- Total Tokens -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="kpi-tile">
             <div class="flex items-center gap-3">
               <div class="rounded-lg bg-indigo-100 p-2 dark:bg-indigo-900/30">
                 <Icon name="database" size="md" class="text-indigo-600 dark:text-indigo-400" :stroke-width="2" />
@@ -170,7 +170,7 @@
           </div>
 
           <!-- Performance (RPM/TPM) -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="kpi-tile">
             <div class="flex items-center gap-3">
               <div class="rounded-lg bg-violet-100 p-2 dark:bg-violet-900/30">
                 <Icon name="bolt" size="md" class="text-violet-600 dark:text-violet-400" :stroke-width="2" />
@@ -196,7 +196,7 @@
           </div>
 
           <!-- Avg Response Time -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="kpi-tile">
             <div class="flex items-center gap-3">
               <div class="rounded-lg bg-rose-100 p-2 dark:bg-rose-900/30">
                 <Icon name="clock" size="md" class="text-rose-600 dark:text-rose-400" :stroke-width="2" />
@@ -317,7 +317,7 @@
           </div>
 
           <!-- User Usage Trend (Full Width) -->
-          <div class="card p-4">
+          <div class="card p-4" data-ui="chart-card">
             <h3 class="mb-4 text-sm font-semibold text-gray-900 dark:text-white">
               {{ t('admin.dashboard.recentUsage') }} (Top 12)
             </h3>
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index da041e01126e..15445fa7053f 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -94,6 +94,7 @@
           :columns="columns"
           :data="proxies"
           :loading="loading"
+          :selected-keys="selectedProxyKeys"
           :server-side-sort="true"
           default-sort-key="id"
           default-sort-order="desc"
@@ -1096,6 +1097,7 @@ const batchQualityChecking = ref(false)
 const proxyTableRef = ref<HTMLElement | null>(null)
 const {
   selectedSet: selectedProxyIds,
+  selectedIds: selectedProxyKeys,
   selectedCount,
   allVisibleSelected,
   isSelected,
diff --git a/frontend/src/views/admin/RedeemView.vue b/frontend/src/views/admin/RedeemView.vue
index 1eb29673db01..539a72656657 100644
--- a/frontend/src/views/admin/RedeemView.vue
+++ b/frontend/src/views/admin/RedeemView.vue
@@ -60,6 +60,7 @@
           :columns="columns"
           :data="codes"
           :loading="loading"
+          :selected-keys="selectedCodeKeys"
           :server-side-sort="true"
           default-sort-key="id"
           default-sort-order="desc"
@@ -804,6 +805,7 @@ const copiedCode = ref<string | null>(null)
 
 const {
   selectedSet: selectedCodeIds,
+  selectedIds: selectedCodeKeys,
   selectedCount,
   allVisibleSelected,
   select,
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index c8538a59b0ce..14a221e7e686 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -227,7 +227,7 @@
               </div>
 
               <template v-else>
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">{{
                       t("admin.settings.overloadCooldown.enabled")
@@ -328,7 +328,7 @@
               </div>
 
               <template v-else>
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">{{
                       t("admin.settings.rateLimit429Cooldown.enabled")
@@ -437,7 +437,7 @@
 
               <template v-else>
                 <!-- Enable Stream Timeout -->
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">{{
                       t("admin.settings.streamTimeout.enabled")
@@ -617,7 +617,7 @@
 
               <template v-else>
                 <!-- Master Toggle -->
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">{{
                       t("admin.settings.rectifier.enabled")
@@ -635,7 +635,7 @@
                   class="space-y-4 border-t border-gray-100 pt-4 dark:border-dark-700"
                 >
                   <!-- Thinking Signature Rectifier -->
-                  <div class="flex items-center justify-between">
+                  <div class="flex items-center justify-between" data-ui="setting-row">
                     <div>
                       <label
                         class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -655,7 +655,7 @@
                   </div>
 
                   <!-- Thinking Budget Rectifier -->
-                  <div class="flex items-center justify-between">
+                  <div class="flex items-center justify-between" data-ui="setting-row">
                     <div>
                       <label
                         class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -671,7 +671,7 @@
                   </div>
 
                   <!-- API Key Signature Rectifier -->
-                  <div class="flex items-center justify-between">
+                  <div class="flex items-center justify-between" data-ui="setting-row">
                     <div>
                       <label
                         class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -1437,7 +1437,7 @@
             </div>
             <div class="space-y-5 p-6">
               <!-- Enable Registration -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
                     t("admin.settings.registration.enableRegistration")
@@ -1454,6 +1454,7 @@
               <!-- Email Verification -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -1538,6 +1539,7 @@
               <!-- Email Domain Quota -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -1555,6 +1557,7 @@
               <!-- Promo Code -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -1570,6 +1573,7 @@
               <!-- Invitation Code -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -1585,6 +1589,7 @@
               <div
                 v-if="form.email_verify_enabled"
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -1622,6 +1627,7 @@
               <!-- TOTP 2FA -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -1649,7 +1655,7 @@
                 class="border-t border-gray-100 pt-4 dark:border-dark-700"
                 data-testid="passkey-settings"
               >
-                <div class="flex items-start justify-between gap-4">
+                <div class="flex items-start justify-between gap-4" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">{{
                       t("admin.settings.security.passkey")
@@ -1706,6 +1712,7 @@
               <!-- 敏感操作 step-up 2FA -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -1721,6 +1728,7 @@
               <!-- 会话 IP/UA 绑定 -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -1768,7 +1776,7 @@
               </p>
             </div>
             <div class="space-y-5 p-6">
-              <div class="flex items-center justify-between gap-4">
+              <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">
                     {{ t("admin.settings.apiKeyAcl.trustForwardedIp") }}
@@ -1889,7 +1897,7 @@
                   </div>
                 </div>
 
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">{{
                       t("admin.settings.panelRateLimit.enabled")
@@ -1979,6 +1987,7 @@
 
                   <div
                     class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                    data-ui="setting-row"
                   >
                     <div>
                       <label class="font-medium text-gray-900 dark:text-white">{{
@@ -2047,7 +2056,7 @@
             </div>
             <div class="space-y-5 p-6">
               <!-- Enable Captcha -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
                     t("admin.settings.captcha.enable")
@@ -2465,7 +2474,7 @@
               </p>
             </div>
             <div class="space-y-5 p-6">
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
                     t("admin.settings.linuxdo.enable")
@@ -2590,7 +2599,7 @@
             <div class="space-y-6 p-6">
               <div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
                 <div class="rounded-lg border border-gray-200 p-4 dark:border-dark-700">
-                  <div class="flex items-start justify-between gap-4">
+                  <div class="flex items-start justify-between gap-4" data-ui="setting-row">
                     <div>
                       <h3 class="font-medium text-gray-900 dark:text-white">
                         GitHub
@@ -2700,7 +2709,7 @@
                 </div>
 
                 <div class="rounded-lg border border-gray-200 p-4 dark:border-dark-700">
-                  <div class="flex items-start justify-between gap-4">
+                  <div class="flex items-start justify-between gap-4" data-ui="setting-row">
                     <div>
                       <h3 class="font-medium text-gray-900 dark:text-white">
                         Google
@@ -2809,7 +2818,7 @@
               </p>
             </div>
             <div class="space-y-5 p-6">
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
                     t("admin.settings.wechatConnect.enabledLabel")
@@ -2832,7 +2841,7 @@
                   <div
                     class="rounded-lg border border-gray-200 p-4 dark:border-dark-700"
                   >
-                    <div class="flex items-start justify-between gap-4">
+                    <div class="flex items-start justify-between gap-4" data-ui="setting-row">
                       <div>
                         <h3 class="font-medium text-gray-900 dark:text-white">
                           {{ localText("PC 应用", "PC App") }}
@@ -2905,7 +2914,7 @@
                   <div
                     class="rounded-lg border border-gray-200 p-4 dark:border-dark-700"
                   >
-                    <div class="flex items-start justify-between gap-4">
+                    <div class="flex items-start justify-between gap-4" data-ui="setting-row">
                       <div>
                         <h3 class="font-medium text-gray-900 dark:text-white">
                           {{ localText("公众号", "Official Account") }}
@@ -2983,7 +2992,7 @@
                   <div
                     class="rounded-lg border border-gray-200 p-4 dark:border-dark-700"
                   >
-                    <div class="flex items-start justify-between gap-4">
+                    <div class="flex items-start justify-between gap-4" data-ui="setting-row">
                       <div>
                         <h3 class="font-medium text-gray-900 dark:text-white">
                           {{ localText("移动应用", "Mobile App") }}
@@ -3151,7 +3160,7 @@
               </p>
             </div>
             <div class="space-y-5 p-6">
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
                     t("admin.settings.dingtalk.enable")
@@ -3273,6 +3282,7 @@
                   <div
                     v-if="form.dingtalk_connect_corp_restriction_policy === 'internal_only'"
                     class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-dark-700"
+                    data-ui="setting-row"
                   >
                     <div>
                       <label class="font-medium text-gray-900 dark:text-white">{{
@@ -3290,7 +3300,7 @@
                     v-if="form.dingtalk_connect_corp_restriction_policy === 'internal_only'"
                     class="pt-4 border-t border-gray-100 dark:border-dark-700 space-y-2"
                   >
-                    <div class="flex items-center justify-between">
+                    <div class="flex items-center justify-between" data-ui="setting-row">
                       <div>
                         <label class="font-medium text-gray-900 dark:text-white">{{
                           t("admin.settings.dingtalk.syncDisplayName")
@@ -3333,7 +3343,7 @@
                     v-if="form.dingtalk_connect_corp_restriction_policy === 'internal_only'"
                     class="pt-4 border-t border-gray-100 dark:border-dark-700 space-y-2"
                   >
-                    <div class="flex items-center justify-between">
+                    <div class="flex items-center justify-between" data-ui="setting-row">
                       <div>
                         <label class="font-medium text-gray-900 dark:text-white">{{
                           t("admin.settings.dingtalk.syncCorpEmail")
@@ -3379,7 +3389,7 @@
                     v-if="form.dingtalk_connect_corp_restriction_policy === 'internal_only'"
                     class="pt-4 border-t border-gray-100 dark:border-dark-700 space-y-2"
                   >
-                    <div class="flex items-center justify-between">
+                    <div class="flex items-center justify-between" data-ui="setting-row">
                       <div>
                         <label class="font-medium text-gray-900 dark:text-white">{{
                           t("admin.settings.dingtalk.syncDept")
@@ -3439,7 +3449,7 @@
               </p>
             </div>
             <div class="space-y-5 p-6">
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
                     t("admin.settings.oidc.enable")
@@ -3742,6 +3752,7 @@
                 <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
                   <div
                     class="flex items-center justify-between rounded border border-gray-200 px-4 py-3 dark:border-dark-700"
+                    data-ui="setting-row"
                   >
                     <div>
                       <label class="font-medium text-gray-900 dark:text-white">
@@ -3756,6 +3767,7 @@
 
                   <div
                     class="flex items-center justify-between rounded border border-gray-200 px-4 py-3 dark:border-dark-700"
+                    data-ui="setting-row"
                   >
                     <div>
                       <label class="font-medium text-gray-900 dark:text-white">
@@ -3770,6 +3782,7 @@
 
                   <div
                     class="flex items-center justify-between rounded border border-gray-200 px-4 py-3 dark:border-dark-700"
+                    data-ui="setting-row"
                   >
                     <div>
                       <label class="font-medium text-gray-900 dark:text-white">
@@ -4070,7 +4083,7 @@
                       </tr>
                     </thead>
                     <tbody class="space-y-2">
-                      <tr v-for="p in platformQuotaPlatforms" :key="p" class="align-top">
+                      <tr v-for="p in platformQuotaPlatforms" :key="p" class="align-top" data-ui="quota-row">
                         <td class="pr-4 py-1">
                           <span class="font-mono text-xs text-gray-700 dark:text-gray-300">{{ p }}</span>
                         </td>
@@ -4127,6 +4140,7 @@
             <div class="space-y-6 p-6">
               <div
                 class="flex items-center justify-between rounded border border-gray-200 px-4 py-3 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">
@@ -4145,7 +4159,7 @@
                   :key="authSource.source"
                   class="rounded-xl border border-gray-200 p-4 dark:border-dark-700"
                 >
-                  <div class="flex items-center justify-between gap-4">
+                  <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                     <div>
                       <div class="font-medium text-gray-900 dark:text-white">
                         {{ authSource.title }}
@@ -4209,6 +4223,7 @@
 
                     <div
                       class="flex items-center justify-between rounded border border-gray-200 px-4 py-3 dark:border-dark-700"
+                      data-ui="setting-row"
                     >
                       <div>
                         <label
@@ -4405,7 +4420,7 @@
                             </tr>
                           </thead>
                           <tbody>
-                            <tr v-for="p in platformQuotaPlatforms" :key="`${authSource.source}-pq-${p}`" class="align-top">
+                            <tr v-for="p in platformQuotaPlatforms" :key="`${authSource.source}-pq-${p}`" class="align-top" data-ui="quota-row">
                               <td class="pr-4 py-1">
                                 <span class="font-mono text-xs text-gray-700 dark:text-gray-300">{{ p }}</span>
                               </td>
@@ -4614,7 +4629,7 @@
                   </p>
                 </div>
 
-                <div class="flex items-center justify-between">
+                <div class="flex items-center justify-between" data-ui="setting-row">
                   <div class="pr-4">
                     <label
                       class="block text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -4782,7 +4797,7 @@
               </div>
 
               <template v-else>
-                <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">
                       {{ t("admin.settings.upstreamBillingProbe.enabled") }}
@@ -4860,7 +4875,7 @@
                 {{ t("common.loading") }}
               </div>
               <template v-else>
-                <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">
                       {{ t("admin.settings.ollamaCloudUsage.enabled") }}
@@ -4944,7 +4959,7 @@
                 {{ t("common.loading") }}
               </div>
               <template v-else>
-                <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                   <div>
                     <label class="font-medium text-gray-900 dark:text-white">
                       {{ t("admin.settings.opencodeGoUsage.enabled") }}
@@ -5025,7 +5040,7 @@
               </p>
             </div>
             <div class="space-y-5 p-6">
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5114,6 +5129,7 @@
               <div
                 v-if="!form.openai_advanced_scheduler_enabled"
                 class="flex items-center justify-between border-t border-gray-100 pt-5 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label
@@ -5164,7 +5180,7 @@
                 </div>
               </div>
 
-              <div class="flex items-center justify-between border-t border-gray-100 pt-5 dark:border-dark-700">
+              <div class="flex items-center justify-between border-t border-gray-100 pt-5 dark:border-dark-700" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5186,6 +5202,7 @@
               <div
                 v-if="form.openai_advanced_scheduler_enabled"
                 class="flex items-center justify-between border-t border-gray-100 pt-5 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label
@@ -5205,6 +5222,7 @@
               <div
                 v-if="form.openai_advanced_scheduler_enabled"
                 class="flex items-center justify-between border-t border-gray-100 pt-5 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label
@@ -5330,7 +5348,7 @@
                     {{ t("admin.settings.gatewayForwarding.grokDefaultTextModelHint") }}
                   </p>
                 </div>
-                <div class="flex items-center justify-between gap-5 md:min-w-72">
+                <div class="flex items-center justify-between gap-5 md:min-w-72" data-ui="setting-row">
                   <div>
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ t("admin.settings.gatewayForwarding.grokCrossClientMap") }}
@@ -5423,7 +5441,7 @@
               </div>
 
               <!-- Fingerprint Unification -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5446,7 +5464,7 @@
               </div>
 
               <!-- Metadata Passthrough -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5467,7 +5485,7 @@
               </div>
 
               <!-- CCH Signing -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5482,7 +5500,7 @@
               </div>
 
               <!-- Claude OAuth System Prompt Injection -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5658,7 +5676,7 @@
                       <div
                         class="mt-3 grid gap-3 md:grid-cols-[minmax(0,1fr)_160px]"
                       >
-                        <div class="flex items-center justify-between gap-4">
+                        <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                           <div>
                             <label
                               class="text-xs font-medium text-gray-600 dark:text-gray-300"
@@ -5713,7 +5731,7 @@
               </div>
 
               <!-- Anthropic Cache TTL 1h Injection -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5738,7 +5756,7 @@
               </div>
 
               <!-- messages cache_control 改写 -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5761,7 +5779,7 @@
               </div>
 
               <!-- 客户端 dateline 归一化（仅 Anthropic OAuth/SetupToken） -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5877,7 +5895,7 @@
               </div>
 
               <!-- Codex 版本号自动同步 -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5936,7 +5954,7 @@
               </div>
 
               <!-- Claude Code 版本号自动同步 -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -5981,7 +5999,7 @@
             </div>
             <div class="space-y-5 p-6">
               <!-- Global Toggle -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label
                     class="text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -6452,6 +6470,7 @@
               <!-- Backend Mode -->
               <div
                 class="flex items-center justify-between rounded-lg border border-amber-200 bg-amber-50 p-4 dark:border-amber-800 dark:bg-amber-900/20"
+                data-ui="setting-row"
               >
                 <div>
                   <h3 class="text-sm font-medium text-gray-900 dark:text-white">
@@ -6774,7 +6793,7 @@
               </div>
 
               <!-- Compact Home Page -->
-              <div class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700">
+              <div class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
                     t("admin.settings.site.compactHome")
@@ -6789,6 +6808,7 @@
               <!-- Hide CCS Import Button -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -7231,7 +7251,7 @@
             </p>
           </div>
           <div class="space-y-5 p-6">
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between" data-ui="setting-row">
               <div>
                 <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.features.channelMonitor.enabled') }}
@@ -7304,7 +7324,7 @@
               </div>
 
               <div v-if="form.channel_monitor_mode === 'v2'" class="space-y-4">
-                <div class="flex items-start justify-between gap-4">
+                <div class="flex items-start justify-between gap-4" data-ui="setting-row">
                   <div class="min-w-0">
                     <p class="text-sm font-medium text-gray-900 dark:text-white">
                       {{ t('admin.settings.features.channelMonitor.hideThroughput') }}
@@ -7315,7 +7335,7 @@
                   </div>
                   <Toggle v-model="form.channel_monitor_hide_throughput" />
                 </div>
-                <div class="flex items-start justify-between gap-4">
+                <div class="flex items-start justify-between gap-4" data-ui="setting-row">
                   <div class="min-w-0">
                     <p class="text-sm font-medium text-gray-900 dark:text-white">
                       {{ t('admin.settings.features.channelMonitor.hideUserRanking') }}
@@ -7328,7 +7348,7 @@
                 </div>
               </div>
 
-              <div v-if="form.channel_monitor_mode === 'v1'" class="flex items-start justify-between gap-4">
+              <div v-if="form.channel_monitor_mode === 'v1'" class="flex items-start justify-between gap-4" data-ui="setting-row">
                 <div class="min-w-0">
                   <p class="text-sm font-medium text-gray-900 dark:text-white">
                     {{ t('admin.settings.features.channelMonitor.showQuota') }}
@@ -7362,7 +7382,7 @@
             </p>
           </div>
           <div class="space-y-5 p-6">
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between" data-ui="setting-row">
               <div>
                 <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.features.availableChannels.enabled') }}
@@ -7386,7 +7406,7 @@
             </p>
           </div>
           <div class="space-y-5 p-6">
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between" data-ui="setting-row">
               <div>
                 <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.features.modelPlaza.enabled') }}
@@ -7398,7 +7418,7 @@
               <Toggle v-model="form.model_plaza_enabled" />
             </div>
 
-            <div v-if="form.model_plaza_enabled" class="flex items-center justify-between">
+            <div v-if="form.model_plaza_enabled" class="flex items-center justify-between" data-ui="setting-row">
               <div>
                 <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.features.modelPlaza.requireAuth') }}
@@ -7466,7 +7486,7 @@
             </p>
           </div>
           <div class="space-y-5 p-6">
-            <div class="flex items-center justify-between gap-4">
+            <div class="flex items-center justify-between gap-4" data-ui="setting-row">
               <div>
                 <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.features.pluginManagement.enabled') }}
@@ -7499,7 +7519,7 @@
             </p>
           </div>
           <div class="space-y-5 p-6">
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between" data-ui="setting-row">
               <div>
                 <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.features.riskControl.enabled') }}
@@ -7511,7 +7531,7 @@
               <Toggle v-model="form.risk_control_enabled" />
             </div>
 
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between" data-ui="setting-row">
               <div>
                 <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.features.riskControl.cyberSessionBlock') }}
@@ -7537,7 +7557,7 @@
             </div>
 
             <div class="space-y-5 border-t border-gray-100 pt-5 dark:border-dark-700">
-              <div class="flex items-center justify-between gap-4">
+              <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                 <div class="min-w-0">
                   <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ t('admin.settings.features.riskControl.refusalRecovery.cyberFailover') }}
@@ -7560,7 +7580,7 @@
                 {{ t('admin.settings.features.riskControl.refusalRecovery.cyberConflict') }}
               </div>
 
-              <div class="flex items-center justify-between gap-4 border-t border-gray-100 pt-5 dark:border-dark-700">
+              <div class="flex items-center justify-between gap-4 border-t border-gray-100 pt-5 dark:border-dark-700" data-ui="setting-row">
                 <div class="min-w-0">
                   <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ t('admin.settings.features.riskControl.refusalRecovery.enabled') }}
@@ -7588,7 +7608,7 @@
                   </p>
                 </div>
 
-                <div class="flex items-center justify-between gap-4">
+                <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                   <div class="min-w-0">
                     <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ t('admin.settings.features.riskControl.refusalRecovery.rewrite') }}
@@ -7693,7 +7713,7 @@
             </p>
           </div>
           <div class="space-y-5 p-6">
-            <div class="flex items-center justify-between">
+            <div class="flex items-center justify-between" data-ui="setting-row">
               <div>
                 <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                   {{ t('admin.settings.features.affiliate.enabled') }}
@@ -7706,7 +7726,7 @@
             </div>
 
             <div v-if="form.affiliate_enabled" class="space-y-6">
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                     {{ t('admin.settings.features.affiliate.adminRechargeRebate') }}
@@ -7941,6 +7961,7 @@
                 <!-- Chip showing the picked user; clicking it re-opens the search -->
                 <div
                   v-if="affiliateModal.selectedUser"
+                  data-ui="picked-chip"
                   class="flex items-center justify-between rounded-md border border-primary-200 bg-primary-50 px-3 py-2 dark:border-primary-700/50 dark:bg-primary-900/20"
                 >
                   <div class="text-sm">
@@ -8134,7 +8155,7 @@
             </div>
             <div class="space-y-4 p-6">
               <!-- Enable toggle -->
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
                     t("admin.settings.payment.enabled")
@@ -8820,6 +8841,7 @@
               <!-- Use TLS Toggle -->
               <div
                 class="flex items-center justify-between border-t border-gray-100 pt-4 dark:border-dark-700"
+                data-ui="setting-row"
               >
                 <div>
                   <label class="font-medium text-gray-900 dark:text-white">{{
@@ -8914,7 +8936,7 @@
               </p>
             </div>
             <div class="px-6 py-6">
-              <div class="flex items-center justify-between gap-4">
+              <div class="flex items-center justify-between gap-4" data-ui="setting-row">
                 <div>
                   <label
                     class="mb-0 block text-sm font-medium text-gray-700 dark:text-gray-300"
@@ -8945,7 +8967,7 @@
               </p>
             </div>
             <div class="px-6 py-6 space-y-4">
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <label
                   class="mb-0 block text-sm font-medium text-gray-700 dark:text-gray-300"
                   >{{ t("admin.settings.balanceNotify.enabled") }}</label
@@ -9005,7 +9027,7 @@
               </p>
             </div>
             <div class="px-6 py-6 space-y-4">
-              <div class="flex items-center justify-between">
+              <div class="flex items-center justify-between" data-ui="setting-row">
                 <label
                   class="mb-0 block text-sm font-medium text-gray-700 dark:text-gray-300"
                   >{{ t("admin.settings.quotaNotify.enabled") }}</label
diff --git a/frontend/src/views/admin/affiliates/AffiliateOfflineWithdrawDialog.vue b/frontend/src/views/admin/affiliates/AffiliateOfflineWithdrawDialog.vue
index a9fe09d7b564..2107352c60fd 100644
--- a/frontend/src/views/admin/affiliates/AffiliateOfflineWithdrawDialog.vue
+++ b/frontend/src/views/admin/affiliates/AffiliateOfflineWithdrawDialog.vue
@@ -11,6 +11,7 @@
         <div
           v-if="selectedUser"
           class="flex items-center justify-between gap-3 rounded-md border border-primary-200 bg-primary-50 px-3 py-2 dark:border-primary-700/50 dark:bg-primary-900/20"
+          data-ui="picked-chip"
           data-test="withdraw-selected-user"
         >
           <div class="min-w-0 truncate text-sm">
diff --git a/frontend/src/views/user/BatchImageGuideView.vue b/frontend/src/views/user/BatchImageGuideView.vue
index f807476284f0..dacdf74f6dcc 100644
--- a/frontend/src/views/user/BatchImageGuideView.vue
+++ b/frontend/src/views/user/BatchImageGuideView.vue
@@ -79,6 +79,7 @@
           :columns="columns"
           :data="visibleBatchJobs"
           :loading="loadingKeys || loadingJobs"
+          :selected-keys="selectedJobKeys"
           :expandable-actions="false"
           row-key="id"
         >
@@ -910,6 +911,7 @@ const selectedBatchApiKeyId = ref(0)
 const items = ref<BatchImageDetailItem[]>([])
 const batchJobs = ref<BatchImageJobRow[]>([])
 const selectedJobIds = ref(new Set<string>())
+const selectedJobKeys = computed(() => Array.from(selectedJobIds.value))
 const expandedParentIds = ref(new Set<string>())
 const promptRows = ref<PromptRow[]>([])
 const promptDraft = ref('')

From 8640e50223325e71cc2c6a75fd85ae75b353c8c1 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Wed, 30 Sep 2026 06:23:47 +0800
Subject: [PATCH 08/11] wip(ui-el): perf pass - data.css done (static hooks),
 DataTable width-only actions probe; shared/pages partial

---
 .../account/BulkEditAccountModal.vue          |   6 +-
 .../components/account/CreateAccountModal.vue |  18 +-
 .../components/account/EditAccountModal.vue   |  14 +-
 .../account/HeaderOverrideEditor.vue          |   2 +-
 .../account/ModelWhitelistSelector.vue        |   2 +-
 .../account/OAuthAuthorizationFlow.vue        |   2 +-
 .../account/OpenCodeGoProtocolRulesEditor.vue |   2 +-
 .../components/account/QuotaNotifyToggle.vue  |   2 +-
 .../account/AccountSystemPromptBinding.vue    |   2 +-
 .../admin/account/AccountTaxonomyManager.vue  |   4 +-
 .../admin/account/BatchAccountTestModal.vue   |   2 +-
 .../admin/account/CodexFingerprintPanel.vue   |   2 +-
 .../AnnouncementTargetingEditor.vue           |   4 +-
 .../admin/group/GroupRPMOverridesModal.vue    |   2 +-
 .../admin/group/GroupRateMultipliersModal.vue |   2 +-
 .../monitor/MonitorAdvancedRequestConfig.vue  |   2 +-
 .../admin/monitor/MonitorFiltersBar.vue       |   2 +-
 .../admin/user/GroupReplaceModal.vue          |   1 +
 .../admin/user/UserBalanceHistoryModal.vue    |   2 +-
 .../admin/user/UserPlatformQuotaModal.vue     |   6 +-
 .../charts/EndpointDistributionChart.vue      |   6 +-
 .../charts/GroupDistributionChart.vue         |   3 +-
 .../charts/ModelDistributionChart.vue         |   9 +-
 .../src/components/common/ConfirmDialog.vue   |   2 +-
 frontend/src/components/common/DataTable.vue  |  12 +-
 frontend/src/components/common/Pagination.vue |   2 +-
 .../src/components/common/SearchInput.vue     |   3 +-
 frontend/src/components/keys/UseKeyModal.vue  |   2 +-
 .../components/modelPlaza/PlazaFilterBar.vue  |   2 +-
 .../user/UserAttributesConfigModal.vue        |   2 +-
 .../user/dashboard/UserDashboardCharts.vue    |   2 +-
 .../dashboard/UserDashboardQuickActions.vue   |   8 +-
 .../user/dashboard/UserDashboardStats.vue     |   4 +-
 .../components/user/monitor/MonitorHero.vue   |   2 +-
 .../user/profile/ProfileBalanceNotifyCard.vue |   2 +-
 .../features/image-studio/ImageStudioPage.vue |   2 +-
 .../components/EventWorkspace.vue             |   2 +-
 frontend/src/styles/console/behaviour.css     | 158 ++++----
 frontend/src/styles/console/controls.css      | 182 +++++----
 frontend/src/styles/console/data.css          | 261 +++++++-----
 frontend/src/styles/console/overlays.css      | 345 ++++++++--------
 .../styles/console/pages/dashboard-usage.css  | 106 ++---
 .../src/styles/console/pages/ops-channels.css | 380 +++++++++---------
 .../console/pages/settings-ops-public.css     |   7 +-
 frontend/src/styles/console/pages/user.css    |  96 +++--
 .../pages/users-groups-proxies-keys.css       |  95 +++--
 frontend/src/styles/console/shell.css         |  98 ++---
 frontend/src/views/admin/AccountsView.vue     |   1 -
 .../src/views/admin/AnnouncementsView.vue     |   2 +
 frontend/src/views/admin/AuditLogView.vue     |  18 +-
 frontend/src/views/admin/BackupView.vue       |   6 +-
 frontend/src/views/admin/ChannelsView.vue     |   4 +-
 frontend/src/views/admin/DashboardView.vue    |   6 +-
 frontend/src/views/admin/GroupsView.vue       |  10 +-
 frontend/src/views/admin/PromoCodesView.vue   |   2 +
 frontend/src/views/admin/ProxiesView.vue      |   7 +-
 frontend/src/views/admin/RedeemView.vue       |   9 +-
 frontend/src/views/admin/RiskControlView.vue  |   6 +-
 frontend/src/views/admin/SettingsView.vue     |  20 +-
 .../src/views/admin/SubscriptionsView.vue     |   9 +-
 frontend/src/views/admin/UsersView.vue        |   8 +-
 .../affiliates/AdminAffiliateRecordsTable.vue |   4 +-
 .../ops/components/OpsAlertEventsCard.vue     |   4 +-
 .../ops/components/OpsDashboardHeader.vue     |  28 +-
 .../ops/components/OpsErrorDetailModal.vue    |   2 +-
 .../settings/OpenAIFastPolicyUserSelector.vue |   2 +-
 .../src/views/user/AvailableChannelsView.vue  |   2 +-
 .../src/views/user/BatchImageGuideView.vue    |   2 -
 .../src/views/user/ChannelStatusV2View.vue    |   2 +-
 frontend/src/views/user/KeysView.vue          |   2 +-
 frontend/src/views/user/PaymentView.vue       |   6 +-
 frontend/src/views/user/RedeemView.vue        |   2 +-
 72 files changed, 1119 insertions(+), 917 deletions(-)

diff --git a/frontend/src/components/account/BulkEditAccountModal.vue b/frontend/src/components/account/BulkEditAccountModal.vue
index 3ba2745b97c3..f1b7db373ec4 100644
--- a/frontend/src/components/account/BulkEditAccountModal.vue
+++ b/frontend/src/components/account/BulkEditAccountModal.vue
@@ -385,7 +385,7 @@
 
               <!-- Model Mapping List -->
               <div v-if="modelMappings.length > 0" class="mb-3 space-y-2">
-                <div
+                <div data-ui="dense-dlg"
                   v-for="(mapping, index) in modelMappings"
                   :key="index"
                   class="flex items-center gap-2"
@@ -521,7 +521,7 @@
           </div>
 
           <!-- Manual input -->
-          <div class="flex items-center gap-2">
+          <div data-ui="dense-btn dense-dlg" class="flex items-center gap-2">
             <input
               v-model="customErrorCodeInput"
               id="bulk-edit-custom-error-code-input"
@@ -1235,7 +1235,7 @@
           :class="!enableOpenAICompactModelMapping && 'pointer-events-none opacity-50'"
         >
           <div v-if="openAICompactModelMappings.length > 0" class="mb-3 space-y-2">
-            <div
+            <div data-ui="dense-dlg"
               v-for="(mapping, index) in openAICompactModelMappings"
               :key="index"
               class="flex items-center gap-2"
diff --git a/frontend/src/components/account/CreateAccountModal.vue b/frontend/src/components/account/CreateAccountModal.vue
index 1ea60b0c205a..d5c9862ae9a3 100644
--- a/frontend/src/components/account/CreateAccountModal.vue
+++ b/frontend/src/components/account/CreateAccountModal.vue
@@ -70,7 +70,7 @@
       <!-- Platform Selection - Segmented Control Style -->
       <div>
         <label class="input-label">{{ t('admin.accounts.platform') }}</label>
-        <div class="mt-2 flex flex-wrap rounded-lg bg-gray-100 p-1 dark:bg-dark-700" data-tour="account-form-platform">
+        <div data-ui="seg-box" class="mt-2 flex flex-wrap rounded-lg bg-gray-100 p-1 dark:bg-dark-700" data-tour="account-form-platform">
           <button
             type="button"
             @click="form.platform = 'anthropic'"
@@ -162,7 +162,7 @@
           </button>
         </div>
         <!-- Multi-protocol API-key providers: Kimi / Zhipu GLM / DeepSeek / OpenCode -->
-        <div class="mt-2 flex flex-wrap rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
+        <div data-ui="seg-box" class="mt-2 flex flex-wrap rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
           <button
             type="button"
             @click="selectCNPlatform('kimi')"
@@ -947,7 +947,7 @@
 
           <!-- Custom OAuth Client (Advanced) -->
           <div v-if="showAdvancedOAuth" class="mt-3 group relative">
-            <button
+            <button data-ui="option-card"
               type="button"
               :disabled="!geminiAIStudioOAuthEnabled"
               @click="handleSelectGeminiOAuthType('ai_studio')"
@@ -1278,7 +1278,7 @@
               :key="getAntigravityModelMappingKey(mapping)"
               class="space-y-1"
             >
-              <div class="flex items-center gap-2">
+              <div data-ui="dense-dlg" class="flex items-center gap-2">
                 <input
                   v-model="mapping.from"
                   type="text"
@@ -1597,7 +1597,7 @@
 
             <!-- Model Mapping List -->
             <div v-if="modelMappings.length > 0" class="mb-3 space-y-2">
-              <div
+              <div data-ui="dense-dlg"
                 v-for="(mapping, index) in modelMappings"
                 :key="getModelMappingKey(mapping)"
                 class="flex items-center gap-2"
@@ -1806,7 +1806,7 @@
             </div>
 
             <!-- Manual input -->
-            <div class="flex items-center gap-2">
+            <div data-ui="dense-btn dense-dlg" class="flex items-center gap-2">
               <input
                 v-model.number="customErrorCodeInput"
                 type="number"
@@ -2074,7 +2074,7 @@
 
           <!-- Mapping Mode -->
           <div v-else class="space-y-3">
-            <div v-for="(mapping, index) in modelMappings" :key="getModelMappingKey(mapping)" class="flex items-center gap-2">
+            <div data-ui="dense-dlg" v-for="(mapping, index) in modelMappings" :key="getModelMappingKey(mapping)" class="flex items-center gap-2">
               <input v-model="mapping.from" type="text" class="input flex-1" :placeholder="t('admin.accounts.fromModel')" />
               <span class="text-gray-400">→</span>
               <input v-model="mapping.to" type="text" class="input flex-1" :placeholder="t('admin.accounts.toModel')" />
@@ -2437,7 +2437,7 @@
             </div>
 
             <div v-if="modelMappings.length > 0" class="mb-3 space-y-2">
-              <div
+              <div data-ui="dense-dlg"
                 v-for="(mapping, index) in modelMappings"
                 :key="'oauth-' + getModelMappingKey(mapping)"
                 class="flex items-center gap-2"
@@ -3421,7 +3421,7 @@
           <label class="input-label">{{ t('admin.accounts.openai.compactModelMapping') }}</label>
           <p class="input-hint">{{ t('admin.accounts.openai.compactModelMappingDesc') }}</p>
           <div v-if="openAICompactModelMappings.length > 0" class="mb-3 space-y-2">
-            <div
+            <div data-ui="dense-dlg"
               v-for="(mapping, index) in openAICompactModelMappings"
               :key="getOpenAICompactModelMappingKey(mapping)"
               class="flex items-center gap-2"
diff --git a/frontend/src/components/account/EditAccountModal.vue b/frontend/src/components/account/EditAccountModal.vue
index 8c812c0be7f1..e1b148ef492b 100644
--- a/frontend/src/components/account/EditAccountModal.vue
+++ b/frontend/src/components/account/EditAccountModal.vue
@@ -348,7 +348,7 @@
               class="mb-3 space-y-2"
               data-testid="editable-model-mappings"
             >
-              <div
+              <div data-ui="dense-dlg"
                 v-for="(mapping, index) in modelMappings"
                 :key="getModelMappingKey(mapping)"
                 class="flex items-center gap-2"
@@ -557,7 +557,7 @@
             </div>
 
             <!-- Manual input -->
-            <div class="flex items-center gap-2">
+            <div data-ui="dense-btn dense-dlg" class="flex items-center gap-2">
               <input
                 v-model.number="customErrorCodeInput"
                 type="number"
@@ -828,7 +828,7 @@
             </div>
 
             <div v-if="modelMappings.length > 0" class="mb-3 space-y-2">
-              <div
+              <div data-ui="dense-dlg"
                 v-for="(mapping, index) in modelMappings"
                 :key="'oauth-' + getModelMappingKey(mapping)"
                 class="flex items-center gap-2"
@@ -1068,7 +1068,7 @@
 
             <!-- Model Mapping List -->
             <div v-if="modelMappings.length > 0" class="mb-3 space-y-2">
-              <div
+              <div data-ui="dense-dlg"
                 v-for="(mapping, index) in modelMappings"
                 :key="getModelMappingKey(mapping)"
                 class="flex items-center gap-2"
@@ -1281,7 +1281,7 @@
 
           <!-- Mapping Mode -->
           <div v-else class="space-y-3">
-            <div v-for="(mapping, index) in modelMappings" :key="getModelMappingKey(mapping)" class="flex items-center gap-2">
+            <div data-ui="dense-dlg" v-for="(mapping, index) in modelMappings" :key="getModelMappingKey(mapping)" class="flex items-center gap-2">
               <input v-model="mapping.from" type="text" class="input flex-1" :placeholder="t('admin.accounts.fromModel')" />
               <span class="text-gray-400">→</span>
               <input v-model="mapping.to" type="text" class="input flex-1" :placeholder="t('admin.accounts.toModel')" />
@@ -1423,7 +1423,7 @@
               :key="getAntigravityModelMappingKey(mapping)"
               class="space-y-1"
             >
-              <div class="flex items-center gap-2">
+              <div data-ui="dense-dlg" class="flex items-center gap-2">
                 <input
                   v-model="mapping.from"
                   type="text"
@@ -2513,7 +2513,7 @@
           <label class="input-label">{{ t('admin.accounts.openai.compactModelMapping') }}</label>
           <p class="input-hint">{{ t('admin.accounts.openai.compactModelMappingDesc') }}</p>
           <div v-if="openAICompactModelMappings.length > 0" class="mb-3 space-y-2">
-            <div
+            <div data-ui="dense-dlg"
               v-for="(mapping, index) in openAICompactModelMappings"
               :key="getOpenAICompactModelMappingKey(mapping)"
               class="flex items-center gap-2"
diff --git a/frontend/src/components/account/HeaderOverrideEditor.vue b/frontend/src/components/account/HeaderOverrideEditor.vue
index d84bbf619224..128915f7c185 100644
--- a/frontend/src/components/account/HeaderOverrideEditor.vue
+++ b/frontend/src/components/account/HeaderOverrideEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="rows.length > 0" class="space-y-2">
-    <div
+    <div data-ui="dense-dlg"
       v-for="(row, index) in rows"
       :key="getHeaderOverrideRowKey(row)"
       class="flex items-center gap-2"
diff --git a/frontend/src/components/account/ModelWhitelistSelector.vue b/frontend/src/components/account/ModelWhitelistSelector.vue
index 4a70625bcb1f..02d1e3d15afb 100644
--- a/frontend/src/components/account/ModelWhitelistSelector.vue
+++ b/frontend/src/components/account/ModelWhitelistSelector.vue
@@ -160,7 +160,7 @@
           @compositionstart="isComposing = true"
           @compositionend="isComposing = false"
         />
-        <button
+        <button data-ui="model-add"
           type="button"
           @click="addCustom"
           class="rounded-lg bg-primary-50 px-4 py-2 text-sm font-medium text-primary-600 hover:bg-primary-100 dark:bg-primary-900/30 dark:text-primary-400 dark:hover:bg-primary-900/50"
diff --git a/frontend/src/components/account/OAuthAuthorizationFlow.vue b/frontend/src/components/account/OAuthAuthorizationFlow.vue
index 977e76f63446..4d30a71062aa 100644
--- a/frontend/src/components/account/OAuthAuthorizationFlow.vue
+++ b/frontend/src/components/account/OAuthAuthorizationFlow.vue
@@ -732,7 +732,7 @@
                   {{ loading ? t('admin.accounts.oauth.generating') : oauthGenerateAuthUrl }}
                 </button>
                 <div v-else class="space-y-3">
-                  <div class="flex items-center gap-2">
+                  <div data-ui="dense-btn dense-dlg" class="flex items-center gap-2">
                     <input
                       :value="authUrl"
                       readonly
diff --git a/frontend/src/components/account/OpenCodeGoProtocolRulesEditor.vue b/frontend/src/components/account/OpenCodeGoProtocolRulesEditor.vue
index b35037ad6633..a465bb9c257f 100644
--- a/frontend/src/components/account/OpenCodeGoProtocolRulesEditor.vue
+++ b/frontend/src/components/account/OpenCodeGoProtocolRulesEditor.vue
@@ -12,7 +12,7 @@
     </div>
     <p class="input-hint mb-2">{{ t('admin.accounts.opencodeGo.protocolRules.hint') }}</p>
     <div v-if="rows.length > 0" class="mb-2 space-y-2">
-      <div
+      <div data-ui="dense-dlg"
         v-for="(row, index) in rows"
         :key="getRowKey(row)"
         class="flex items-center gap-2"
diff --git a/frontend/src/components/account/QuotaNotifyToggle.vue b/frontend/src/components/account/QuotaNotifyToggle.vue
index 1d78dc02cd53..5744ce459c18 100644
--- a/frontend/src/components/account/QuotaNotifyToggle.vue
+++ b/frontend/src/components/account/QuotaNotifyToggle.vue
@@ -15,7 +15,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <div class="flex items-center gap-1.5">
+  <div data-ui="dense-dlg" class="flex items-center gap-1.5">
     <button
       type="button"
       @click="emit('update:enabled', !enabled)"
diff --git a/frontend/src/components/admin/account/AccountSystemPromptBinding.vue b/frontend/src/components/admin/account/AccountSystemPromptBinding.vue
index ee8f59a05764..8908b4a82913 100644
--- a/frontend/src/components/admin/account/AccountSystemPromptBinding.vue
+++ b/frontend/src/components/admin/account/AccountSystemPromptBinding.vue
@@ -4,7 +4,7 @@
     <p class="text-xs text-muted">{{ t('admin.systemPrompts.binding.description') }}</p>
     <p v-if="accountIds.length > 1" class="text-xs text-muted">{{ t('admin.systemPrompts.binding.bulkHint', { count: accountIds.length }) }}</p>
     <p v-if="error" role="alert" class="text-sm text-red-600">{{ error }}</p>
-    <div class="flex flex-wrap items-end gap-3">
+    <div data-ui="dense-dlg-if" class="flex flex-wrap items-end gap-3">
       <label class="space-y-1">
         <span class="block text-sm">{{ t('admin.systemPrompts.binding.mode') }}</span>
         <select v-model="mode" class="input" data-test="system-prompt-binding-mode" :disabled="busy">
diff --git a/frontend/src/components/admin/account/AccountTaxonomyManager.vue b/frontend/src/components/admin/account/AccountTaxonomyManager.vue
index c92a8c1cfa7f..4b01f1203a20 100644
--- a/frontend/src/components/admin/account/AccountTaxonomyManager.vue
+++ b/frontend/src/components/admin/account/AccountTaxonomyManager.vue
@@ -7,7 +7,7 @@
     @close="emit('close')"
   >
     <div class="space-y-4">
-      <div class="inline-flex rounded-md bg-gray-100 p-1 dark:bg-dark-800">
+      <div data-ui="seg-box" class="inline-flex rounded-md bg-gray-100 p-1 dark:bg-dark-800">
         <button
           v-for="item in tabs"
           :key="item.value"
@@ -44,7 +44,7 @@
           @update:model-value="updateVisibleItems"
           @end="saveOrder"
         >
-        <div v-for="item in visibleItems" :key="item.id" :data-test="`taxonomy-item-${item.id}`" class="flex min-h-12 items-center gap-3 border-b border-gray-100 px-3 py-2 last:border-b-0 dark:border-dark-700">
+        <div data-ui="dense-dlg" v-for="item in visibleItems" :key="item.id" :data-test="`taxonomy-item-${item.id}`" class="flex min-h-12 items-center gap-3 border-b border-gray-100 px-3 py-2 last:border-b-0 dark:border-dark-700">
           <button type="button" class="taxonomy-drag-handle icon-button cursor-grab text-gray-400 active:cursor-grabbing" :title="t('admin.accounts.dragToReorder')">
             <Icon name="arrowsUpDown" size="sm" />
           </button>
diff --git a/frontend/src/components/admin/account/BatchAccountTestModal.vue b/frontend/src/components/admin/account/BatchAccountTestModal.vue
index ac387cc667e6..2d4da786faec 100644
--- a/frontend/src/components/admin/account/BatchAccountTestModal.vue
+++ b/frontend/src/components/admin/account/BatchAccountTestModal.vue
@@ -1,7 +1,7 @@
 <template>
   <BaseDialog :show="show" :title="t('admin.accounts.batchTest.title')" width="extra-wide" @close="handleClose">
     <div class="space-y-4">
-      <div class="flex flex-wrap items-end gap-3">
+      <div data-ui="dense-dlg" class="flex flex-wrap items-end gap-3">
         <label class="min-w-64 flex-1">
           <span class="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">{{ t('admin.accounts.batchTest.model') }}</span>
           <select v-model="selectedModel" class="input w-full" data-testid="batch-test-model" :disabled="running">
diff --git a/frontend/src/components/admin/account/CodexFingerprintPanel.vue b/frontend/src/components/admin/account/CodexFingerprintPanel.vue
index 72255552eed7..5dc213685ac5 100644
--- a/frontend/src/components/admin/account/CodexFingerprintPanel.vue
+++ b/frontend/src/components/admin/account/CodexFingerprintPanel.vue
@@ -33,7 +33,7 @@
           <template v-if="view.scope_error"><dt>{{ txt('出口范围错误', 'Scope error') }}</dt><dd class="text-red-600">{{ view.scope_error }}</dd></template>
         </dl>
       </div>
-      <div class="flex flex-wrap items-center gap-2 text-xs">
+      <div data-ui="dense-btn" class="flex flex-wrap items-center gap-2 text-xs">
         <label>{{ txt('选择应用指纹', 'Application profile') }}
           <select v-model="profileChoice" class="input input-sm ml-2">
             <option value="keep_legacy">{{ txt('保留当前配置', 'Keep current profile') }}</option>
diff --git a/frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue b/frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue
index e04872d07066..d359289aaff6 100644
--- a/frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue
+++ b/frontend/src/components/admin/announcements/AnnouncementTargetingEditor.vue
@@ -11,7 +11,7 @@
       </div>
 
       <div class="flex items-center gap-3">
-        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300" data-ui="targeting-option">
           <input
             type="radio"
             name="announcement-targeting-mode"
@@ -22,7 +22,7 @@
           />
           {{ t('admin.announcements.form.targetingAll') }}
         </label>
-        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300">
+        <label class="flex items-center gap-2 text-sm text-gray-700 dark:text-gray-300" data-ui="targeting-option">
           <input
             type="radio"
             name="announcement-targeting-mode"
diff --git a/frontend/src/components/admin/group/GroupRPMOverridesModal.vue b/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
index 822c864b6c73..2b9318d65167 100644
--- a/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
+++ b/frontend/src/components/admin/group/GroupRPMOverridesModal.vue
@@ -20,7 +20,7 @@
         <h4 class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
           {{ t('admin.groups.addUserRpm') }}
         </h4>
-        <div class="flex items-end gap-2">
+        <div data-ui="dense-dlg" class="flex items-end gap-2">
           <div class="relative flex-1">
             <input
               v-model="searchQuery"
diff --git a/frontend/src/components/admin/group/GroupRateMultipliersModal.vue b/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
index 54039ac9827d..297942beb29a 100644
--- a/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
+++ b/frontend/src/components/admin/group/GroupRateMultipliersModal.vue
@@ -21,7 +21,7 @@
         <h4 class="mb-2 text-sm font-medium text-gray-700 dark:text-gray-300">
           {{ t('admin.groups.addUserRate') }}
         </h4>
-        <div class="flex items-end gap-2">
+        <div data-ui="dense-dlg" class="flex items-end gap-2">
           <div class="relative flex-1">
             <input
               v-model="searchQuery"
diff --git a/frontend/src/components/admin/monitor/MonitorAdvancedRequestConfig.vue b/frontend/src/components/admin/monitor/MonitorAdvancedRequestConfig.vue
index c4ccdfa3ac54..405936b106ff 100644
--- a/frontend/src/components/admin/monitor/MonitorAdvancedRequestConfig.vue
+++ b/frontend/src/components/admin/monitor/MonitorAdvancedRequestConfig.vue
@@ -4,7 +4,7 @@
     <div>
       <label class="input-label">{{ t('admin.channelMonitor.advanced.headers') }}</label>
       <div class="space-y-1.5">
-        <div
+        <div data-ui="dense-dlg"
           v-for="(row, i) in headerRows"
           :key="i"
           class="flex items-center gap-2"
diff --git a/frontend/src/components/admin/monitor/MonitorFiltersBar.vue b/frontend/src/components/admin/monitor/MonitorFiltersBar.vue
index c489738eef47..0b7403dfdd60 100644
--- a/frontend/src/components/admin/monitor/MonitorFiltersBar.vue
+++ b/frontend/src/components/admin/monitor/MonitorFiltersBar.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
     <!-- Left: Search + Filters -->
     <div class="flex flex-1 flex-wrap items-center gap-3">
-      <div class="relative w-full sm:w-64">
+      <div data-ui="search-box" class="relative w-full sm:w-64">
         <Icon
           name="search"
           size="md"
diff --git a/frontend/src/components/admin/user/GroupReplaceModal.vue b/frontend/src/components/admin/user/GroupReplaceModal.vue
index f71c7fc4e335..e68546b5c7c6 100644
--- a/frontend/src/components/admin/user/GroupReplaceModal.vue
+++ b/frontend/src/components/admin/user/GroupReplaceModal.vue
@@ -24,6 +24,7 @@
         <label
           v-for="group in availableGroups"
           :key="group.id"
+          data-ui="replace-option"
           class="flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all"
           :class="selectedGroupId === group.id
             ? 'border-primary-400 bg-primary-50/50 dark:border-primary-500 dark:bg-primary-900/20'
diff --git a/frontend/src/components/admin/user/UserBalanceHistoryModal.vue b/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
index 1deb4f7ba810..4eefe15ce07e 100644
--- a/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
+++ b/frontend/src/components/admin/user/UserBalanceHistoryModal.vue
@@ -48,7 +48,7 @@
       </div>
 
       <!-- Type filter + Action buttons -->
-      <div class="flex items-center gap-3">
+      <div data-ui="dense-dlg-if" class="flex items-center gap-3">
         <Select
           v-model="typeFilter"
           :options="typeOptions"
diff --git a/frontend/src/components/admin/user/UserPlatformQuotaModal.vue b/frontend/src/components/admin/user/UserPlatformQuotaModal.vue
index 4c009ccbdf4b..73989b2db060 100644
--- a/frontend/src/components/admin/user/UserPlatformQuotaModal.vue
+++ b/frontend/src/components/admin/user/UserPlatformQuotaModal.vue
@@ -31,7 +31,7 @@
             <tr v-for="row in quotas" :key="row.platform" class="border-b border-gray-100 dark:border-dark-800">
               <td class="px-3 py-2 font-mono text-gray-900 dark:text-white">{{ row.platform }}</td>
               <td class="px-3 py-2">
-                <div class="flex items-center gap-1">
+                <div data-ui="dense-dlg" class="flex items-center gap-1">
                   <input
                     v-model.number="row.daily_limit_usd"
                     type="number"
@@ -50,7 +50,7 @@
                 </div>
               </td>
               <td class="px-3 py-2">
-                <div class="flex items-center gap-1">
+                <div data-ui="dense-dlg" class="flex items-center gap-1">
                   <input
                     v-model.number="row.weekly_limit_usd"
                     type="number"
@@ -69,7 +69,7 @@
                 </div>
               </td>
               <td class="px-3 py-2">
-                <div class="flex items-center gap-1">
+                <div data-ui="dense-dlg" class="flex items-center gap-1">
                   <input
                     v-model.number="row.monthly_limit_usd"
                     type="number"
diff --git a/frontend/src/components/charts/EndpointDistributionChart.vue b/frontend/src/components/charts/EndpointDistributionChart.vue
index 372da76b1748..b275d5f6d20b 100644
--- a/frontend/src/components/charts/EndpointDistributionChart.vue
+++ b/frontend/src/components/charts/EndpointDistributionChart.vue
@@ -5,7 +5,7 @@
         {{ title || t('usage.endpointDistribution') }}
       </h3>
       <div class="flex flex-wrap items-center justify-end gap-2">
-        <div
+        <div data-ui="seg-box"
           v-if="showSourceToggle"
           class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
         >
@@ -41,7 +41,7 @@
           </button>
         </div>
 
-        <div
+        <div data-ui="seg-box"
           v-if="showMetricToggle"
           class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
         >
@@ -94,7 +94,7 @@
                 :class="enableBreakdown ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40' : ''"
                 @click="enableBreakdown && toggleBreakdown(item.endpoint)"
               >
-                <td class="py-1.5 font-medium [overflow-wrap:anywhere]" :class="enableBreakdown ? 'text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300' : 'text-gray-900 dark:text-white'" :title="item.endpoint">
+                <td data-ui="dist-name" class="py-1.5 font-medium [overflow-wrap:anywhere]" :class="enableBreakdown ? 'text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300' : 'text-gray-900 dark:text-white'" :title="item.endpoint">
                   <span class="inline-flex items-center gap-1">
                     <svg v-if="enableBreakdown && expandedKey === item.endpoint" class="h-3 w-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                     <svg v-else-if="enableBreakdown" class="h-3 w-3 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
diff --git a/frontend/src/components/charts/GroupDistributionChart.vue b/frontend/src/components/charts/GroupDistributionChart.vue
index c22692df5b50..6fd415d7e139 100644
--- a/frontend/src/components/charts/GroupDistributionChart.vue
+++ b/frontend/src/components/charts/GroupDistributionChart.vue
@@ -4,7 +4,7 @@
       <h3 class="text-sm font-semibold text-gray-900 dark:text-white">
         {{ t('admin.dashboard.groupDistribution') }}
       </h3>
-      <div
+      <div data-ui="seg-box"
         v-if="showMetricToggle"
         class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
       >
@@ -58,6 +58,7 @@
                 @click="enableBreakdown && group.group_id > 0 && toggleBreakdown('group', group.group_id)"
               >
                 <td
+                  data-ui="dist-name"
                   class="py-1.5 font-medium [overflow-wrap:anywhere]"
                   :class="enableBreakdown && group.group_id > 0 ? 'text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300' : 'text-gray-900 dark:text-white'"
                   :title="group.group_name || String(group.group_id)"
diff --git a/frontend/src/components/charts/ModelDistributionChart.vue b/frontend/src/components/charts/ModelDistributionChart.vue
index 51756a73ae77..335be5a95e10 100644
--- a/frontend/src/components/charts/ModelDistributionChart.vue
+++ b/frontend/src/components/charts/ModelDistributionChart.vue
@@ -7,7 +7,7 @@
           : t('admin.dashboard.spendingRankingTitle') }}
       </h3>
       <div class="flex flex-wrap items-center justify-end gap-2">
-        <div
+        <div data-ui="seg-box"
           v-if="showSourceToggle"
           class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
         >
@@ -42,7 +42,7 @@
             {{ t('usage.mapping') }}
           </button>
         </div>
-        <div
+        <div data-ui="seg-box"
           v-if="showMetricToggle"
           class="inline-flex rounded-lg border border-gray-200 bg-gray-50 p-0.5 dark:border-dark-700 dark:bg-dark-800"
         >
@@ -67,7 +67,7 @@
             {{ t('admin.dashboard.metricActualCost') }}
           </button>
         </div>
-        <div v-if="enableRankingView" class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-dark-800">
+        <div data-ui="seg-box" v-if="enableRankingView" class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-dark-800">
           <button
             type="button"
             class="rounded-md px-2.5 py-1 text-xs font-medium transition-colors"
@@ -127,6 +127,7 @@
                 @click="enableBreakdown && toggleBreakdown('model', model.model)"
               >
                 <td
+                  data-ui="dist-name"
                   class="py-1.5 font-medium [overflow-wrap:anywhere]"
                   :class="enableBreakdown ? 'text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300' : 'text-gray-900 dark:text-white'"
                   :title="model.model"
@@ -208,7 +209,7 @@
                 : 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40'"
               @click="item.isOther ? undefined : emit('ranking-click', item)"
             >
-              <td class="py-1.5">
+              <td data-ui="dist-name" class="py-1.5">
                 <div class="flex min-w-0 items-center gap-2">
                   <span class="shrink-0 text-[11px] font-semibold text-gray-500 dark:text-gray-400">
                     {{ item.isOther ? 'Σ' : `#${index + 1}` }}
diff --git a/frontend/src/components/common/ConfirmDialog.vue b/frontend/src/components/common/ConfirmDialog.vue
index 9338b2005752..f2408cc9f94c 100644
--- a/frontend/src/components/common/ConfirmDialog.vue
+++ b/frontend/src/components/common/ConfirmDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <BaseDialog :show="show" :title="title" width="narrow" @close="handleCancel">
-    <div class="space-y-4">
+    <div data-ui="confirm-body" class="space-y-4">
       <p class="text-sm text-gray-600 dark:text-gray-400">{{ message }}</p>
       <slot></slot>
     </div>
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 3c841bf09f4c..9709ce44765e 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -48,7 +48,6 @@
       <div
         v-for="(row, index) in sortedData"
         :key="resolveRowKey(row, index)"
-        :data-ui="isRowSelected(row, index) ? 'row-selected' : undefined"
         class="rounded-lg border border-gray-200 bg-white p-4 dark:border-dark-700 dark:bg-dark-900"
         :class="{
           'cursor-pointer': clickableRows,
@@ -215,7 +214,6 @@
             :data-row-id="resolveRowKey(item.row, item.index)"
             :data-index="item.index"
             :ref="item.measure ? measureElement : undefined"
-            :data-ui="isRowSelected(item.row, item.index) ? 'row-selected' : undefined"
             class="hover:bg-gray-50 dark:hover:bg-dark-800"
             :class="{
               'cursor-pointer': clickableRows,
@@ -393,9 +391,15 @@ const attachDesktopTableTracking = () => {
   checkScrollable()
   checkActionsColumnWidth()
   if (tableWrapperRef.value && typeof ResizeObserver !== 'undefined') {
-    resizeObserver = new ResizeObserver(() => {
+    // 操作列探测只取决于宽度；仅高度变化（如选择托盘展开）时跳过，避免在包裹层上连续切换两次类名、整表重算样式
+    let lastObservedWidth: number | undefined
+    resizeObserver = new ResizeObserver((entries) => {
       checkScrollable()
-      checkActionsColumnWidth()
+      const width = entries?.[0]?.contentRect.width
+      if (width === undefined || width !== lastObservedWidth) {
+        lastObservedWidth = width
+        checkActionsColumnWidth()
+      }
     })
     resizeObserver.observe(tableWrapperRef.value)
   } else {
diff --git a/frontend/src/components/common/Pagination.vue b/frontend/src/components/common/Pagination.vue
index 965ef84c5412..f52a9c6206b7 100644
--- a/frontend/src/components/common/Pagination.vue
+++ b/frontend/src/components/common/Pagination.vue
@@ -51,7 +51,7 @@
           </div>
         </div>
 
-        <div v-if="showJump" class="flex items-center space-x-2">
+        <div data-ui="dense-btn dense-dlg" v-if="showJump" class="flex items-center space-x-2">
           <span class="text-sm text-gray-700 dark:text-gray-300">{{ t('pagination.jumpTo') }}</span>
           <input
             v-model="jumpPage"
diff --git a/frontend/src/components/common/SearchInput.vue b/frontend/src/components/common/SearchInput.vue
index 24d64638dbc6..6dc9297bd492 100644
--- a/frontend/src/components/common/SearchInput.vue
+++ b/frontend/src/components/common/SearchInput.vue
@@ -1,9 +1,10 @@
 <template>
   <div class="relative w-full">
-    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+    <div data-ui="search-glyph" class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
       <Icon name="search" size="md" class="text-gray-400" />
     </div>
     <input
+      data-ui="search-field"
       v-model="searchValue"
       type="text"
       class="input pl-10"
diff --git a/frontend/src/components/keys/UseKeyModal.vue b/frontend/src/components/keys/UseKeyModal.vue
index 741fc014ceaf..ffa99946394a 100644
--- a/frontend/src/components/keys/UseKeyModal.vue
+++ b/frontend/src/components/keys/UseKeyModal.vue
@@ -64,7 +64,7 @@
               {{ t('keys.useKeyModal.openai.authModeDescription') }}
             </p>
           </div>
-          <div
+          <div data-ui="seg-box"
             class="grid grid-cols-2 gap-1 rounded-lg bg-gray-100 p-1 dark:bg-dark-700"
             role="radiogroup"
             :aria-label="t('keys.useKeyModal.openai.authModeTitle')"
diff --git a/frontend/src/components/modelPlaza/PlazaFilterBar.vue b/frontend/src/components/modelPlaza/PlazaFilterBar.vue
index 59eaba6a0c71..f75d2a3ac756 100644
--- a/frontend/src/components/modelPlaza/PlazaFilterBar.vue
+++ b/frontend/src/components/modelPlaza/PlazaFilterBar.vue
@@ -84,7 +84,7 @@
       <span class="w-10 shrink-0 pt-2 text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-dark-500">
         {{ t('modelPlaza.filters.modelLabel') }}
       </span>
-      <div class="relative w-full sm:w-72">
+      <div data-ui="search-box" class="relative w-full sm:w-72">
         <Icon
           name="search"
           size="sm"
diff --git a/frontend/src/components/user/UserAttributesConfigModal.vue b/frontend/src/components/user/UserAttributesConfigModal.vue
index d8281e924307..9a177579bfb1 100644
--- a/frontend/src/components/user/UserAttributesConfigModal.vue
+++ b/frontend/src/components/user/UserAttributesConfigModal.vue
@@ -143,7 +143,7 @@
       <!-- Options (for select/multi_select) -->
       <div v-if="form.type === 'select' || form.type === 'multi_select'" class="space-y-2">
         <label class="input-label">{{ t('admin.users.attributes.options') }}</label>
-        <div v-for="(option, index) in form.options" :key="getOptionKey(option)" class="flex items-center gap-2">
+        <div data-ui="dense-dlg" v-for="(option, index) in form.options" :key="getOptionKey(option)" class="flex items-center gap-2">
           <input
             v-model="option.value"
             type="text"
diff --git a/frontend/src/components/user/dashboard/UserDashboardCharts.vue b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
index f64c2533d4fe..d88f2b860b03 100644
--- a/frontend/src/components/user/dashboard/UserDashboardCharts.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
@@ -2,7 +2,7 @@
   <div class="space-y-6">
     <!-- Date Range Filter -->
     <div class="card p-4" data-ui="time-bar">
-      <div class="flex flex-wrap items-center gap-4">
+      <div data-ui="dense-btn" class="flex flex-wrap items-center gap-4">
         <div class="flex items-center gap-2" data-ui="range-pill">
           <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ t('dashboard.timeRange') }}:</span>
           <DateRangePicker :start-date="startDate" :end-date="endDate" @update:startDate="$emit('update:startDate', $event)" @update:endDate="$emit('update:endDate', $event)" @change="$emit('dateRangeChange', $event)" />
diff --git a/frontend/src/components/user/dashboard/UserDashboardQuickActions.vue b/frontend/src/components/user/dashboard/UserDashboardQuickActions.vue
index c1b80a2d05e5..20a64a4f1064 100644
--- a/frontend/src/components/user/dashboard/UserDashboardQuickActions.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardQuickActions.vue
@@ -4,7 +4,7 @@
       <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('dashboard.quickActions') }}</h2>
     </div>
     <div class="space-y-3 p-4">
-      <button @click="router.push('/keys')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
+      <button @click="router.push('/keys')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800" data-ui="quick-action">
         <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-primary-100 transition-transform group-hover:scale-105 dark:bg-primary-900/30">
           <Icon name="key" size="lg" class="text-primary-600 dark:text-primary-400" />
         </div>
@@ -19,7 +19,7 @@
         />
       </button>
 
-      <button @click="router.push('/usage')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
+      <button @click="router.push('/usage')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800" data-ui="quick-action">
         <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-emerald-100 transition-transform group-hover:scale-105 dark:bg-emerald-900/30">
           <Icon name="chart" size="lg" class="text-emerald-600 dark:text-emerald-400" />
         </div>
@@ -34,7 +34,7 @@
         />
       </button>
 
-      <button v-if="canUseBatchImage" @click="router.push('/batch-image')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
+      <button v-if="canUseBatchImage" @click="router.push('/batch-image')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800" data-ui="quick-action">
         <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-sky-100 transition-transform group-hover:scale-105 dark:bg-sky-900/30">
           <Icon name="sparkles" size="lg" class="text-sky-600 dark:text-sky-400" />
         </div>
@@ -49,7 +49,7 @@
         />
       </button>
 
-      <button @click="router.push('/redeem')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800">
+      <button @click="router.push('/redeem')" class="group flex w-full items-center gap-4 rounded-xl bg-gray-50 p-4 text-left transition-all duration-200 hover:bg-gray-100 dark:bg-dark-800/50 dark:hover:bg-dark-800" data-ui="quick-action">
         <div class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-xl bg-amber-100 transition-transform group-hover:scale-105 dark:bg-amber-900/30">
           <Icon name="gift" size="lg" class="text-amber-600 dark:text-amber-400" />
         </div>
diff --git a/frontend/src/components/user/dashboard/UserDashboardStats.vue b/frontend/src/components/user/dashboard/UserDashboardStats.vue
index 591d53d3f56f..16950535b03b 100644
--- a/frontend/src/components/user/dashboard/UserDashboardStats.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardStats.vue
@@ -2,7 +2,7 @@
   <!-- Row 1: Core Stats -->
   <div class="grid grid-cols-2 gap-4 lg:grid-cols-4" data-ui="kpi-grid">
     <!-- Balance -->
-    <div v-if="!isSimple" class="card p-4" data-ui="kpi-tile">
+    <div v-if="!isSimple" class="card p-4" data-ui="kpi-tile balance-tile">
       <div class="flex items-center gap-3">
         <div class="rounded-lg bg-emerald-100 p-2 dark:bg-emerald-900/30">
           <svg class="h-5 w-5 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -105,7 +105,7 @@
         </div>
         <div class="flex-1">
           <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ t('dashboard.performance') }}</p>
-          <div class="flex items-baseline gap-2">
+          <div class="flex items-baseline gap-2" data-ui="kpi-value">
             <p class="text-xl font-bold text-gray-900 dark:text-white">{{ formatTokens(stats?.rpm || 0) }}</p>
             <span class="text-xs text-gray-500 dark:text-gray-400">RPM</span>
           </div>
diff --git a/frontend/src/components/user/monitor/MonitorHero.vue b/frontend/src/components/user/monitor/MonitorHero.vue
index 003659392317..256d1972e823 100644
--- a/frontend/src/components/user/monitor/MonitorHero.vue
+++ b/frontend/src/components/user/monitor/MonitorHero.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="py-3 md:py-4" data-ui="monitor-hero">
     <div class="flex items-center justify-end gap-3 flex-wrap">
-      <div
+      <div data-ui="seg-box"
         role="tablist"
         class="inline-flex p-0.5 rounded-xl bg-gray-100 dark:bg-dark-800 border border-gray-200/60 dark:border-dark-700/60 text-xs"
       >
diff --git a/frontend/src/components/user/profile/ProfileBalanceNotifyCard.vue b/frontend/src/components/user/profile/ProfileBalanceNotifyCard.vue
index 988de67509cf..3c31e363069e 100644
--- a/frontend/src/components/user/profile/ProfileBalanceNotifyCard.vue
+++ b/frontend/src/components/user/profile/ProfileBalanceNotifyCard.vue
@@ -25,7 +25,7 @@
             {{ t('profile.balanceNotify.threshold') }}
             <span class="text-xs text-gray-400 ml-2">{{ t('profile.balanceNotify.thresholdHint') }}</span>
           </label>
-          <div class="flex items-center gap-2">
+          <div data-ui="dense-btn" class="flex items-center gap-2">
             <span class="text-gray-500">$</span>
             <input
               v-model.number="customThreshold"
diff --git a/frontend/src/features/image-studio/ImageStudioPage.vue b/frontend/src/features/image-studio/ImageStudioPage.vue
index 51a83411c085..3d6b2add13c6 100644
--- a/frontend/src/features/image-studio/ImageStudioPage.vue
+++ b/frontend/src/features/image-studio/ImageStudioPage.vue
@@ -69,7 +69,7 @@
             </p>
           </div>
 
-          <div class="grid grid-cols-2 rounded-lg bg-gray-100 p-1 dark:bg-dark-800" role="group">
+          <div data-ui="seg-box" class="grid grid-cols-2 rounded-lg bg-gray-100 p-1 dark:bg-dark-800" role="group">
             <button
               type="button"
               class="h-9 rounded-md px-3 text-sm font-medium transition-colors"
diff --git a/frontend/src/features/prompt-audit/components/EventWorkspace.vue b/frontend/src/features/prompt-audit/components/EventWorkspace.vue
index 551454dd3621..80ea7d564863 100644
--- a/frontend/src/features/prompt-audit/components/EventWorkspace.vue
+++ b/frontend/src/features/prompt-audit/components/EventWorkspace.vue
@@ -56,7 +56,7 @@
       </div>
     </form>
     <div v-if="error" role="alert" class="mt-4 rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-300">{{ error }}</div>
-    <div class="mt-5 overflow-x-auto rounded-xl border border-gray-200 dark:border-dark-700/60">
+    <div class="mt-5 overflow-x-auto rounded-xl border border-gray-200 dark:border-dark-700/60" data-ui="log-table">
       <table class="min-w-[1120px] w-full text-left text-sm">
         <thead class="bg-gray-50 text-xs uppercase tracking-wide text-gray-500 dark:bg-dark-900/70 dark:text-dark-400">
           <tr>
diff --git a/frontend/src/styles/console/behaviour.css b/frontend/src/styles/console/behaviour.css
index bbedf75acacb..2bf0d2c7c0fa 100644
--- a/frontend/src/styles/console/behaviour.css
+++ b/frontend/src/styles/console/behaviour.css
@@ -23,45 +23,51 @@
    the doughnut). Header labels stay on one line; when the columns do not fit, the box scrolls sideways and
    shows its scrollbar (upstream hides scrollbars until hover, so the table looked clipped). The name column
    keeps room for a whole short name and wraps long ones instead of shrinking to a letter per line. */
-html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"] > table > thead th {
+html.flat-theme .max-h-48.min-w-0.flex-1.overflow-auto > table > thead th {
   white-space: nowrap;
 }
 
-/* Perf pass: the box is hooked ([data-ui~="dist-table"], the three distribution charts and the user dashboard's
-   chart); the :has() stays in the subject with a child argument. The repeated [data-ui] keeps the original 0,5,2
-   (the hook plus the four class tokens it replaced), so the cascade outcome is unchanged. */
-html.flat-theme [data-ui~="dist-table"][data-ui][data-ui][data-ui]:has(> table) {
+/* Perf pass: the box always holds its table (all five template sites), so the old has-table test is gone; the
+   `div` keeps its 0,5,2 (0,5,3 for the thumb). */
+html.flat-theme div.max-h-48.min-w-0.flex-1.overflow-auto {
   scrollbar-width: thin;
   scrollbar-color: rgb(var(--ui-line-focus)) transparent;
 }
 
-html.flat-theme [data-ui~="dist-table"][data-ui][data-ui][data-ui]:has(> table)::-webkit-scrollbar-thumb {
+html.flat-theme div.max-h-48.min-w-0.flex-1.overflow-auto::-webkit-scrollbar-thumb {
   background-color: rgb(var(--ui-line-focus));
 }
 
-html.flat-theme [class~="max-h-48"][class~="min-w-0"][class~="flex-1"][class~="overflow-auto"] > table > tbody > tr > td:first-child:not([colspan]) {
+html.flat-theme .max-h-48.min-w-0.flex-1.overflow-auto > table > tbody > tr > td:first-child:not([colspan]) {
   min-width: 8rem;
 }
 
 /* B1.2 Chart card titles beside a segmented picker never break (「模型分 / 布」 on phones): the picker group
-   wraps instead. Perf pass: the rule is driven by a flag the header itself carries (:has() stays in the subject,
-   child argument) and read by the h3 through a container style query, so nothing selects "after" the :has(). */
-html.flat-theme [data-ui="dist-head"]:has(> div [class~="rounded-lg"]:is([class~="bg-gray-50"], [class~="bg-gray-100"]):is([class~="p-0.5"], [class~="p-1"])) {
+   wraps instead. Perf pass (kept :has, see below): whether a picker is rendered is a runtime prop (v-if), and the
+   title comes BEFORE the picker group, so no hook or sibling selector can express it. The header itself carries the
+   flag: the has-test sits in the subject compound of the hooked header ([data-ui="dist-head"], only the distribution
+   charts), with a child-only argument (the pickers sit at header > group > picker); the h3 reads the flag through a
+   container style query, so nothing is selected "after" the test. The repeated [data-ui] and :not(uipad) keep
+   the original 0,7,4. */
+html.flat-theme [data-ui~="dist-head"]:has(> div > .rounded-lg:is(.bg-gray-50, .bg-gray-100):is(.p-0\.5, .p-1)) {
   --uif-disthead: 1;
 }
 
 @container style(--uif-disthead: 1) {
-  html.flat-theme [data-ui="dist-head"][data-ui] > h3:not(uipad) {
+  html.flat-theme [data-ui~="dist-head"][data-ui][data-ui][data-ui][data-ui][data-ui] > h3:not(uipad):not(uipad) {
     flex-shrink: 0;
     white-space: nowrap;
   }
 }
 
 /* B1.3 Chart rows holding a distribution card: from 1024 to 1535px each card takes the full width, so the
-   ring, every column and the full names fit; from 1536px they sit side by side again. Perf pass: the page roots
-   that hold such a row are hooked already (admin/user dashboard and usage), and the :has() stays in the subject. */
+   ring, every column and the full names fit; from 1536px they sit side by side again. Perf pass (kept :has): the
+   distribution table exists only once the chart has data (v-else-if), so the row's layout depends on runtime
+   content below it. The has-test sits in the subject compound of the chart row (class-qualified, scoped under the
+   four hooked page roots that hold such rows, :where() so the scope adds no specificity) with a child-only argument
+   (row > first card > body > box > table); the original 0,8,2 is kept. */
 @media (min-width: 1024px) and (max-width: 1535.98px) {
-  html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) [class~="grid"][class~="gap-6"][class~="lg:grid-cols-2"]:has(> [class~="card"]:first-child [data-ui~="dist-table"] > table) {
+  html.flat-theme :where([data-ui~="admin-dashboard"], [data-ui~="admin-usage"], [data-ui~="user-dashboard"], [data-ui~="user-usage"]) .grid.gap-6.lg\:grid-cols-2:has(> .card:first-child > * > .max-h-48.overflow-auto > table) {
     grid-template-columns: minmax(0, 1fr);
   }
 }
@@ -100,7 +106,7 @@ html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="name"] > sp
   word-break: keep-all;
 }
 
-html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="location"] span[class~="text-sm"] {
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="location"] span.text-sm {
   min-width: min-content;
   max-width: 5em;
   white-space: normal;
@@ -157,12 +163,14 @@ html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="auth"] > di
 
 /* B1.11 Group pickers (GroupSelector rows: account forms, announcement targeting, key dialogs): the group badge
    keeps its own width instead of stretching into a bar, the account count sits at the right edge. Perf pass: the
-   rows are hooked ([data-ui="group-pick-row"], GroupSelector.vue); the two child selectors need no :has(). */
-html.flat-theme [data-ui="group-pick-row"] > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] {
+   rows are hooked ([data-ui="group-pick-row"], GroupSelector.vue, the only labels of this shape); the count is the
+   row's only span.shrink-0 (the checkbox before it is an input), so no sibling combinator names it; the repeated
+   [data-ui] and :not(uipad) keep the original 0,7,4 / 0,8,5. */
+html.flat-theme label[data-ui~="group-pick-row"][data-ui] > span.inline-flex.rounded-md.min-w-0.flex-1:not(uipad) {
   flex: 0 1 auto;
 }
 
-html.flat-theme [data-ui="group-pick-row"] > span[class~="inline-flex"][class~="rounded-md"][class~="min-w-0"][class~="flex-1"] + span[class~="shrink-0"] {
+html.flat-theme label[data-ui~="group-pick-row"][data-ui][data-ui][data-ui][data-ui][data-ui] > span.shrink-0:not(uipad):not(uipad) {
   margin-left: auto;
 }
 
@@ -172,45 +180,47 @@ html.flat-theme [data-ui="group-pick-row"] > span[class~="inline-flex"][class~="
      request ID, message, User-Agent); alert titles; background job names;
    - 使用记录 filter results and 用户排行 e-mails; 操作日志 operator, action, method + path; 邀请返利 e-mails,
      user names and order numbers. */
-html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="request_id"], [data-column="upstream_request_id"]) span[class~="truncate"],
-html.flat-theme .table-wrapper[data-table="usage"] td[data-column="user_agent"] > span[class~="truncate"],
-html.flat-theme [data-ui~="ops-dashboard"] section[class~="rounded-2xl"] td > span[class~="block"][class~="truncate"],
-html.flat-theme [data-ui~="ops-dashboard"] :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]),
-html.flat-theme td[class~="max-w-[240px]"][class~="truncate"][class~="px-4"][class~="py-3"],
-html.flat-theme span[class~="max-w-[220px]"][class~="truncate"][class~="font-mono"][class~="text-[11px]"],
-html.flat-theme span[class~="min-w-0"][class~="flex-1"][class~="truncate"][class~="font-mono"][class~="text-[11px]"],
-html.flat-theme :is([data-ui~="ops-error-list"], [data-ui~="usage-records"]) .table-wrapper:not([data-table="usage"]) td:is([data-column="message"], [data-column="user_agent"]) > span[class~="block"][class~="truncate"],
-html.flat-theme div[class~="truncate"][class~="max-w-[360px]"][class~="font-semibold"],
-html.flat-theme .modal-body div[class~="rounded-xl"][class~="p-4"] > div > div[class~="truncate"][class~="text-sm"][class~="font-semibold"],
-html.flat-theme .usage-filter-dropdown > div[class~="absolute"] > button > span[class~="truncate"],
-html.flat-theme td[class~="max-w-[260px]"][class~="truncate"][class~="font-medium"],
-html.flat-theme td[data-column="actor"] > div[class~="min-w-0"][class~="max-w-[220px]"] > div[class~="truncate"],
-html.flat-theme td[data-column="action"] > div[class~="min-w-0"][class~="max-w-xs"] > div[class~="truncate"],
-html.flat-theme .table-wrapper :is(div, button)[class~="max-w-56"][class~="truncate"] {
+html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="request_id"], [data-column="upstream_request_id"]) span.truncate,
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="user_agent"] > span.truncate,
+html.flat-theme div[data-ui~="ops-dashboard"][data-ui] section.rounded-2xl td > span.block.truncate,
+html.flat-theme div[data-ui~="ops-dashboard"][data-ui] :is(span, div).truncate:is(.text-\[11px\], .text-\[10px\]):is(.font-bold, .text-gray-400),
+html.flat-theme td.max-w-\[240px\].truncate.px-4.py-3,
+html.flat-theme span.max-w-\[220px\].truncate.font-mono.text-\[11px\],
+html.flat-theme span.min-w-0.flex-1.truncate.font-mono.text-\[11px\],
+html.flat-theme :is([data-ui~="ops-error-list"], [data-ui~="usage-records"])[data-ui]:not(uipad):not(uipad) .table-wrapper:not([data-table="usage"]) td:is([data-column="message"], [data-column="user_agent"]) > span.block.truncate,
+html.flat-theme div.truncate.max-w-\[360px\].font-semibold,
+html.flat-theme .modal-body div.rounded-xl.p-4 > div > div.truncate.text-sm.font-semibold,
+html.flat-theme .usage-filter-dropdown > div.absolute > button > span.truncate,
+html.flat-theme td.max-w-\[260px\].truncate.font-medium,
+html.flat-theme td[data-column="actor"] > div.min-w-0.max-w-\[220px\] > div.truncate,
+html.flat-theme td[data-column="action"] > div.min-w-0.max-w-xs > div.truncate,
+html.flat-theme .table-wrapper :is(div, button).max-w-56.truncate {
   overflow: visible;
   white-space: normal;
   overflow-wrap: anywhere;
 }
 
 /* (运维监控 concurrency rows: the name and the e-mail may shrink and wrap as a pair; the request ID may use the wide
-   sheet's free width and stays on one line where it fits). Perf pass: the :has() stays in the subject of the row it
-   styles (the row is the element that wraps), scoped under the page's own hook. */
-html.flat-theme [data-ui~="ops-dashboard"][data-ui] div[class~="min-w-0"][class~="flex-1"][class~="items-center"][class~="gap-1.5"]:has(> span[class~="truncate"][class~="text-[11px]"]) {
+   sheet's free width and stays on one line where it fits). Perf pass: the page is named by its hook
+   ([data-ui="ops-dashboard"]; the old "div.pb-12 holding the throughput header" test holds exactly when the header, the
+   concurrency card and the throughput chart are rendered, which share one v-if), and the row always starts with its
+   name span (OpsConcurrencyCard.vue), so neither has-test is needed; repeated [data-ui] / :not(uipad) keep 0,9,4. */
+html.flat-theme div[data-ui~="ops-dashboard"][data-ui][data-ui][data-ui] div.min-w-0.flex-1.items-center.gap-1\.5:not(uipad) {
   flex-wrap: wrap;
   row-gap: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] :is(span, div)[class~="truncate"]:is([class~="text-[11px]"], [class~="text-[10px]"]):is([class~="font-bold"], [class~="text-gray-400"]) {
+html.flat-theme div[data-ui~="ops-dashboard"][data-ui] :is(span, div).truncate:is(.text-\[11px\], .text-\[10px\]):is(.font-bold, .text-gray-400) {
   min-width: 0;
   flex-shrink: 1;
 }
 
-html.flat-theme span[class~="max-w-[220px]"][class~="truncate"][class~="font-mono"][class~="text-[11px]"] {
+html.flat-theme span.max-w-\[220px\].truncate.font-mono.text-\[11px\] {
   max-width: none;
 }
 
 /* B1.13 兑换码「生成兑换码」: each 「兑换码过期」 choice stays on one line (「永不过期」 broke inside its column). */
-html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"] {
+html.flat-theme div.grid.grid-cols-2.sm\:grid-cols-5 > button.rounded-lg.border.px-3.py-2 {
   white-space: nowrap;
 }
 
@@ -226,12 +236,12 @@ html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"
   z-index: 30;
 }
 
-html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button[class~="flex-col"] {
+html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button.flex-col {
   position: relative;
 }
 
 @media (hover: hover) and (pointer: fine) {
-  html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button[class~="flex-col"] > span[class~="text-xs"] {
+  html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button.flex-col > span.text-xs {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -243,7 +253,7 @@ html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"
     border: 0;
   }
 
-  html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
+  html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button.flex-col:is(:hover, :focus-visible) > span.text-xs {
     top: 50%;
     right: calc(100% + 0.375rem);
     z-index: 1;
@@ -263,21 +273,21 @@ html.flat-theme :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"
 /* B2.2 A tip that opens upwards from a cell of the first two rows would run under the sticky header, which
    stacks above the whole body: those tips open downwards, and the arrow that pointed down to the cell is
    hidden. */
-html.flat-theme .table-wrapper .table-body > tr:is([data-index="0"], [data-index="1"]) :is(div, span)[class~="absolute"][class~="bottom-full"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"] {
+html.flat-theme .table-wrapper .table-body > tr:is([data-index="0"], [data-index="1"]) :is(div, span).absolute.bottom-full:is(.bg-gray-900, .bg-gray-800).text-white {
   top: 100%;
   bottom: auto;
   margin-top: 0.5rem;
   margin-bottom: 0;
 }
 
-html.flat-theme .table-wrapper .table-body > tr:is([data-index="0"], [data-index="1"]) :is(div, span)[class~="absolute"][class~="bottom-full"]:is([class~="bg-gray-900"], [class~="bg-gray-800"])[class~="text-white"] > [class~="absolute"][class~="top-full"] {
+html.flat-theme .table-wrapper .table-body > tr:is([data-index="0"], [data-index="1"]) :is(div, span).absolute.bottom-full:is(.bg-gray-900, .bg-gray-800).text-white > .absolute.top-full {
   display: none;
 }
 
 /* B2.3 用户管理「余额」: in the first row the 「点击查看充值记录」 hint opens to the right of the amount (without its
    arrow), clear of the header and of 「充值」 below; in the second row the two-line rows leave room above, so it
    keeps opening upwards (both more specific than B2.2). */
-html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="0"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"][class~="text-white"] {
+html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="0"] td[data-column="balance"] div.group > div.bottom-full.text-white {
   top: 50%;
   bottom: auto;
   left: calc(100% + 0.375rem);
@@ -287,11 +297,11 @@ html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="
   --tw-translate-y: -50%;
 }
 
-html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="0"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"][class~="text-white"] > div[class~="top-full"] {
+html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="0"] td[data-column="balance"] div.group > div.bottom-full.text-white > div.top-full {
   display: none;
 }
 
-html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="1"] td[data-column="balance"] div[class~="group"] > div[class~="bottom-full"][class~="text-white"] {
+html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="1"] td[data-column="balance"] div.group > div.bottom-full.text-white {
   top: auto;
   bottom: 100%;
   margin-top: 0;
@@ -301,7 +311,7 @@ html.flat-theme .table-wrapper[data-table="users"] .table-body > tr[data-index="
 /* B2.4 账号表「状态」 error tip: a long upstream error ran past the table's right edge and bottom and was cut. It
    opens leftwards from the ? icon, over the usage column, and a long message scrolls inside 12rem, so the whole
    text stays readable (the details drawer shows it too). Card and compact views keep upstream's placement. */
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] div[class~="group/error"] > div[class~="absolute"][class~="top-full"] {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] div.group\/error > div.absolute.top-full {
   left: auto;
   right: 0;
   max-height: 12rem;
@@ -326,7 +336,7 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] d
    line (WCAG 1.4.11). Focus, error and disabled states keep their own look. */
 html.flat-theme .input:is([placeholder=" "]:placeholder-shown, [placeholder=""]:placeholder-shown):not(select):not(textarea):not(:focus):not(:disabled):not(.input-error),
 html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"], [type="month"], [type="week"]):not(:focus):not(:disabled):not(.input-error),
-html.flat-theme textarea[class~="input"]:is(:not([placeholder]), [placeholder=""], [placeholder=" "]):not(:focus):not(:disabled):not(.input-error) {
+html.flat-theme textarea.input:is(:not([placeholder]), [placeholder=""], [placeholder=" "]):not(:focus):not(:disabled):not(.input-error) {
   border-color: rgb(var(--ui-control-line));
 }
 
@@ -348,10 +358,10 @@ html.flat-theme {
    hints (account forms, opacity-70), the model cooldown countdown in 账号状态 (opacity-70), the check-mode and
    API-mode hints of the channel-monitor forms (opacity-80), and the home page's 「更多 · 即将推出」 row
    (opacity-60). */
-html.flat-theme button[class~="flex-1"][class~="py-2"][class~="transition-all"][class~="rounded-lg"][class~="text-sm"] [class~="opacity-70"],
-html.flat-theme [data-testid="model-status-trigger"] span[class~="opacity-70"],
-html.flat-theme button[class~="rounded-lg"][class~="border-2"][class~="text-left"] > span[class~="opacity-80"],
-html.flat-theme div[class~="rounded-xl"][class~="bg-white/40"][class~="opacity-60"] {
+html.flat-theme button.flex-1.py-2.transition-all.rounded-lg.text-sm .opacity-70,
+html.flat-theme [data-testid="model-status-trigger"] span.opacity-70,
+html.flat-theme button.rounded-lg.border-2.text-left > span.opacity-80,
+html.flat-theme div.rounded-xl.bg-white\/40.opacity-60 {
   opacity: 1;
 }
 
@@ -377,38 +387,43 @@ html.flat-theme .theme-tour-popover .driver-popover-close-btn {
 
 /* B4.1 KPI cards (upstream: .grid > .card.p-4 with a tile and a text column): the text column may shrink and a
    figure too long for the card wraps inside it ($999,999,875,767.73) instead of painting under the next card.
-   Perf pass: the tile's next sibling is the text column, so no :has() is needed; the repeated [class]s keep the
-   original 0,8,2. */
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child + :nth-child(2),
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child + :nth-child(2) {
+   Perf pass: the cards of this shape are exactly the KPI tiles hooked [data-ui~="kpi-tile"] (see B4.2), and the
+   text column is the tile row's second child, so neither a has-test nor a sibling combinator is needed; the repeated
+   [data-ui] and :not(uipad) keep the original 0,9,2. */
+html.flat-theme .grid > .card.p-4[data-ui~="kpi-tile"][data-ui][data-ui] > .flex > :nth-child(2):not(uipad),
+html.flat-theme .grid > .card.p-4.flex[data-ui~="kpi-tile"][data-ui][data-ui] > :nth-child(2):not(uipad) {
   min-width: 0;
 }
 
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] p[class~="text-xl"] {
+html.flat-theme .grid > .card.p-4 p.text-xl {
   overflow-wrap: anywhere;
 }
 
 /* B4.2 Phones: the tile sits above the text, so the figure and the line under it use the card's full width
-   (「524.27M」, 「802 启用 8 错误」 are never cut or broken). */
+   (「524.27M」, 「802 启用 8 错误」 are never cut or broken). Perf pass: the cards of this shape (a flex row led by the
+   tile, in or as a .card.p-4 of a grid) are exactly the KPI tiles hooked [data-ui~="kpi-tile"] (admin dashboard,
+   usage, payment dashboard, user dashboard), so the "led by the tile" has-test on a bare .flex is gone; the
+   repeated [data-ui] and :not(uipad) keep the original 0,8,2. */
 @media (max-width: 639.98px) {
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child),
-  html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][class~="flex"]:has(> div[class~="rounded-lg"][class~="p-2"]:first-child) {
+  html.flat-theme .grid > .card.p-4[data-ui~="kpi-tile"][data-ui][data-ui] > .flex:not(uipad),
+  html.flat-theme .grid > .card.p-4.flex[data-ui~="kpi-tile"][data-ui][data-ui]:not(uipad) {
     flex-direction: column;
     align-items: flex-start;
   }
 }
 
 /* B4.3 用户仪表盘「今日消费」 and 「总计」: the standard price after the figure wraps as one piece, so its slash
-   leads the second line instead of dangling. Perf pass: the page root carries the hook already, so the :has() that
+   leads the second line instead of dangling. Perf pass: the page root carries the hook already, so the has-test that
    asked "does this page hold the quick-action buttons" (a `main` anchor: every text node under it in one
-   invalidation set) is gone; the quick actions live only on the user dashboard, whose rows this rule is for. */
-html.flat-theme [data-ui="user-dashboard"][data-ui] [class~="grid"] > [class~="card"][class~="p-4"] :is(p[class~="text-xl"] > span[class~="text-sm"], p[class~="text-xs"] > span[class~="text-gray-400"]) {
+   invalidation set) is gone; the quick actions live only on the user dashboard, whose rows this rule is for. The
+   repeated [data-ui] and :not(uipad) keep the original 0,10,5. */
+html.flat-theme div[data-ui~="user-dashboard"][data-ui][data-ui][data-ui]:not(uipad) .grid > .card.p-4 :is(p.text-xl > span.text-sm, p.text-xs > span.text-gray-400) {
   display: inline-block;
 }
 
 /* B4.4 Key 用量查询: a balance too long for the 176px ring wraps inside it on balanced lines instead of running
    over the stroke. */
-html.flat-theme div[class~="relative"][class~="flex"][class~="min-h-screen"][class~="flex-col"][class~="bg-gray-50"] > main svg[class~="w-44"] + div > span[class~="text-2xl"] {
+html.flat-theme div.relative.flex.min-h-screen.flex-col.bg-gray-50 > main svg.w-44 + div > span.text-2xl {
   max-width: 8.5rem;
   word-break: break-all;
   text-wrap: balance;
@@ -424,25 +439,26 @@ html.flat-theme .terminal-window {
 
 /* B6.1 运维监控 metric tiles: the 「明细」 links never break into a vertical 「明 / 细」 (the tile label wraps
    instead), and 「ms (P99)」 moves under a long figure as one unit. */
-html.flat-theme [data-ui~="ops-dashboard"] button[class~="text-[10px]"][class~="font-bold"][class~="text-blue-500"] {
+/* Perf pass: the page is named by its hook (see B1.12) and the two figure rows (OpsDashboardHeader.vue, always led by
+   the figure) are hooked [data-ui~="ops-figure-row"], so neither a has-test nor a sibling combinator is needed; the
+   repeated [data-ui] and :not(uipad) keep the original 0,6,3 / 0,6,4 / 0,6,5. */
+html.flat-theme div[data-ui~="ops-dashboard"][data-ui] button.text-\[10px\].font-bold.text-blue-500 {
   flex-shrink: 0;
   white-space: nowrap;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][data-ui] div[class~="items-baseline"][class~="gap-2"]:has(> div[class~="text-3xl"]) {
+html.flat-theme div[data-ui~="ops-dashboard"][data-ui] div[data-ui~="ops-figure-row"][data-ui][data-ui]:not(uipad) {
   flex-wrap: wrap;
 }
 
-/* Perf pass: the trailing `> span` rule is named from the figure that sits beside the label (`+ span`), so nothing
-   follows a :has() any more (this keeps 「ms (P99)」 from wrapping between 「ms」 and 「(P99)」). */
-html.flat-theme [data-ui~="ops-dashboard"][data-ui] div[class~="items-baseline"][class~="gap-2"] > div[class~="text-3xl"] + span {
+html.flat-theme div[data-ui~="ops-dashboard"][data-ui] div[data-ui~="ops-figure-row"][data-ui][data-ui] > span:not(uipad) {
   white-space: nowrap;
 }
 
 /* B6.2 运维监控 请求错误 / 上游错误 lists (OpsErrorDetailsModal; .compact-select exists only there): the search
    takes the spare eighth column, so 「搜索 request_id / client_request_id / message」 is read whole. */
 @media (min-width: 768px) {
-  html.flat-theme .modal-body div[class~="md:grid-cols-8"] > div[class~="col-span-2"][class~="compact-select"]:first-child {
+  html.flat-theme .modal-body div.md\:grid-cols-8 > div.col-span-2.compact-select:first-child {
     grid-column: span 3 / span 3;
   }
 }
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index 71197aa5e285..32a38e26b7e4 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -17,8 +17,11 @@
  *   data-ui="seg"          a segmented control (its buttons are the segments; the current one carries
  *                          aria-pressed / aria-selected / aria-checked="true" or data-active)
  *   data-ui="filter-pill"  a filter trigger ("Provider v"); data-ui="filter-count" on its count badge marks it active
- * Template lines touched for this file: none (the hooks below are upstream class names, data-test / data-testid
- * attributes and Lucide classes that Icon.vue already renders).
+ * Template hooks added for this file (perf pass, 2026-09-30; data-ui only): search-glyph (SearchInput.vue),
+ * dense-btn / dense-btn-if / dense-dlg / dense-dlg-if (the toolbar and dialog rows of 4.4 / 4.4b), seg-box (the
+ * utility-built segmented boxes of 7.1), option-card (the account dialogs' option cards, 8.1), model-add
+ * (ModelWhitelistSelector's add button, 10.2). The other hooks are upstream class names, data-test / data-testid
+ * attributes and Lucide classes that Icon.vue already renders.
  * Custom properties: --ctl-* below (not tokens; tokens.css belongs to the coordinator). */
 
 html.flat-theme {
@@ -111,28 +114,29 @@ html.flat-theme .input.input-error:focus {
 /* 3.2 Search fields: SearchInput.vue and the inline pattern (an absolute Lucide search glyph beside an .input inside
    a relative wrapper) are the reference's 30px search (REF-CONSOLE §8.4): 4.25px + the 19.5px line + 1px edges,
    32px left inset, the 13px glyph 10px in.
-   Perf pass: the wrapper keeps the anchor, but the :has() argument is the glyph box ONLY (`> div > svg.lucide-search`),
-   which is the one feature Blink needs; the glyph's own box is not an anchor, so no descendant of the wrapper ends up
-   in a merged invalidation set. Measured as cheap on the accounts page (controls.css at 90 ms before, below). */
-html.flat-theme :is(div, label, form)[class~="relative"]:has(> div > svg.lucide-search) > input.input,
-html.flat-theme :is(div, label, form)[class~="relative"] > svg.lucide-search[class~="absolute"] + input.input {
+   Perf pass: the 12 inline search wrappers are hooked [data-ui~="search-box"]; SearchInput.vue hooks its field
+   [data-ui~="search-field"] and its glyph box [data-ui~="search-glyph"] (not its root: a caller's data-ui, e.g. the
+   accounts filters' "account-search", replaces a root's own). So neither the field nor the glyph box is found by a
+   has-test or a sibling combinator; the repeated [data-ui] and :not(uipad) keep the original 0,4,5 / 0,4,4. */
+html.flat-theme :is(div, label, form)[data-ui~="search-box"][data-ui] > input.input:not(uipad):not(uipad),
+html.flat-theme :is(div, label, form).relative > input.input[data-ui~="search-field"]:not(uipad):not(uipad) {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
   padding-left: 2rem;
 }
 
-html.flat-theme :is(div, label, form)[class~="relative"] > svg.lucide-search[class~="absolute"] {
+html.flat-theme :is(div, label, form).relative > svg.lucide-search.absolute {
   left: 0.625rem;
   width: 0.8125rem;
   height: 0.8125rem;
   color: rgb(var(--ctl-glyph));
 }
 
-html.flat-theme :is(div, label, form)[class~="relative"] > div[class~="absolute"]:has(> svg.lucide-search) {
+html.flat-theme :is(div, label, form).relative > div.absolute[data-ui~="search-glyph"]:not(uipad) {
   padding-left: 0.625rem;
 }
 
-html.flat-theme :is(div, label, form)[class~="relative"] > div[class~="absolute"] > svg.lucide-search {
+html.flat-theme :is(div, label, form).relative > div.absolute > svg.lucide-search {
   width: 0.8125rem;
   height: 0.8125rem;
   color: rgb(var(--ctl-glyph));
@@ -151,7 +155,7 @@ html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"],
 
 /* 3.4 The large section titles written with the label recipe (`input-label mb-0 text-base font-semibold`, the
    account dialogs' quota group) stay titles: sans, sentence case, ink. */
-html.flat-theme .input-label[class~="text-base"] {
+html.flat-theme .input-label.text-base {
   font-family: var(--ui-font);
   letter-spacing: normal;
   text-transform: none;
@@ -160,8 +164,10 @@ html.flat-theme .input-label[class~="text-base"] {
 
 /* 3.5 Field labels written with utilities instead of the recipe (a block, font-medium, text-sm / text-xs label with
    a mb-1 / mb-1.5 / mb-2 gap above its field: 系统设置 and other forms) read as the label recipe too, so a form has one
-   label language. Labels that wrap their own control are left alone. */
-html.flat-theme label[class~="block"][class~="font-medium"]:is([class~="text-sm"], [class~="text-xs"]):is([class~="mb-1"], [class~="mb-1.5"], [class~="mb-2"]):not(:has(input, select, textarea, button)) {
+   label language. Labels that wrap their own control are left alone (perf pass: none of the 166 labels of this shape
+   in the templates wraps a control, so the old "holds no input / select / textarea / button" test is gone;
+   :not(uipad) keeps the original 0,5,3). */
+html.flat-theme label.block.font-medium:is(.text-sm, .text-xs):is(.mb-1, .mb-1\.5, .mb-2):not(uipad) {
   margin-bottom: 0.5rem;
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
@@ -374,39 +380,43 @@ html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"],
    fields and their Select / DateRangePicker triggers at the 30px of the search field, the filter pills and the
    buttons (the reference's /models filter row); a 34px trigger beside a 30px search or button reads as a misaligned
    row. Labelled form fields elsewhere keep the reference's 34px field.
-   Perf pass: the table pages' fixed rows and the dashboards' toolbar card are named by their own hook, without any
-   `:has()`; the "row that holds a .btn" case keeps its `:has()`, but the anchor carries the flag itself (:has() in the
-   subject, child argument only) and the fields are drawn through a container style query, so no descendant of a
-   matched row sits in a `:has()` invalidation set. The custom property inherits, so the fields see the flag wherever
-   they sit inside the row. */
-html.flat-theme :is(.table-page-layout > .layout-section-fixed, [data-ui~="time-bar"][data-ui][data-ui]) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
+   Perf pass: every template row of that shape (flex items-center, not flex-col, a .btn child, a field inside) is
+   hooked [data-ui~="dense-btn"] (19 rows, see the header); the repeated [data-ui] keep the original 0,7,2. */
+html.flat-theme :is(.table-page-layout > .layout-section-fixed, [data-ui~="dense-btn"][data-ui][data-ui][data-ui]) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
 
-@container style(--ctl-dense-row: 1) {
-  html.flat-theme :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input):not(uipad) {
+/* the one row whose .btn is conditional (系统设置 affiliate search; v-if on the button) keeps a has-test, on its own
+   hooked element, in the subject compound, with a child argument; the fields read its flag through a container style
+   query (no selector follows the has-test). */
+html.flat-theme [data-ui~="dense-btn-if"]:has(> .btn) {
+  --ctl-dense-btn: 1;
+}
+
+@container style(--ctl-dense-btn: 1) {
+  html.flat-theme [data-ui~="dense-btn-if"][data-ui][data-ui][data-ui] :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
     padding-top: 0.265625rem;
     padding-bottom: 0.265625rem;
   }
 }
 
-/* the rows that ask for the dense row: a horizontal row holding a .btn (the dashboards' toolbar), and the dialogs'
-   rows (4.4b). The table pages' fixed rows keep the rule above (their own hook), so they are not doubled here. */
-html.flat-theme [class~="flex"][class~="items-center"]:not([class~="flex-col"]):has(> .btn) {
-  --ctl-dense-row: 1;
-}
-
 /* 4.4b The same in a dialog: a row that holds a button (余额记录's type filter beside 充值 / 退款, the 专属倍率 / 专属 RPM add
    rows, bottom-aligned) draws its fields at the button's 30px (final review V1-10)
-   Perf pass: the row carries the flag (its own :has() stays in the subject with a child argument) and the fields
-   read it through the same container style query as 4.4. */
-html.flat-theme .modal-body [class~="flex"]:is([class~="items-center"], [class~="items-end"]):not([class~="flex-col"]):has(> button) {
-  --ctl-dense-row: 1;
+   Perf pass: the rows of that shape that render inside a dialog body (flex items-center / items-end, not flex-col, a
+   <button> child, a field inside) are hooked [data-ui~="dense-dlg"] (36 rows); the two whose buttons are conditional
+   carry the flag as above ([data-ui~="dense-dlg-if"]). The repeated [data-ui] and :not(uipad) keep 0,7,3. */
+html.flat-theme .modal-body [data-ui~="dense-dlg"][data-ui][data-ui]:not(uipad) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
+  padding-top: 0.265625rem;
+  padding-bottom: 0.265625rem;
+}
+
+html.flat-theme [data-ui~="dense-dlg-if"]:has(> button) {
+  --ctl-dense-dlg: 1;
 }
 
-@container style(--ctl-dense-row: 1) {
-  html.flat-theme .modal-body :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input):not(uipad) {
+@container style(--ctl-dense-dlg: 1) {
+  html.flat-theme .modal-body [data-ui~="dense-dlg-if"][data-ui][data-ui]:not(uipad) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
     padding-top: 0.265625rem;
     padding-bottom: 0.265625rem;
   }
@@ -418,7 +428,7 @@ html.flat-theme .modal-body [class~="flex"]:is([class~="items-center"], [class~=
    rendered route switches (--ctl-switch-on). Off = the 3:1 form-control line (the reference's ink at 20 % is 1.6:1 on the surface). Toggle.vue and its
    inline copies are a rounded-full button with a 2px transparent edge (h-6 w-11, h-5 w-9; h-4 w-7 keeps its 28 x 16
    size) holding a knob span; on = bg-primary-500 / -600. */
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]) {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9, .h-4.w-7) {
   background-color: rgb(var(--ctl-switch-off));
   box-shadow: none;
   transition-property: background-color, opacity;
@@ -426,16 +436,16 @@ html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-
   transition-timing-function: var(--ui-ease);
 }
 
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"]) {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9) {
   height: 1.25rem;
   width: 2.125rem;
 }
 
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):is([class~="bg-primary-500"], [class~="bg-primary-600"]) {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9, .h-4.w-7):is(.bg-primary-500, .bg-primary-600) {
   background-color: rgb(var(--ctl-switch-on));
 }
 
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]) > span[class~="rounded-full"] {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9, .h-4.w-7) > span.rounded-full {
   background-color: rgb(var(--ctl-knob));
   box-shadow: none;
   transition-property: transform;
@@ -443,31 +453,31 @@ html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-
   transition-timing-function: var(--ui-ease);
 }
 
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"]) > span[class~="rounded-full"] {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9) > span.rounded-full {
   height: 1rem;
   width: 1rem;
 }
 
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"]) > span[class~="rounded-full"]:is([class~="translate-x-5"], [class~="translate-x-4"]) {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9) > span.rounded-full:is(.translate-x-5, .translate-x-4) {
   --tw-translate-x: 0.875rem;
 }
 
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):disabled {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9, .h-4.w-7):disabled {
   cursor: not-allowed;
   opacity: 0.55;
 }
 
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):focus {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9, .h-4.w-7):focus {
   box-shadow: none;
 }
 
-html.flat-theme button[class~="rounded-full"][class~="border-2"][class~="border-transparent"]:is([class~="h-6"][class~="w-11"], [class~="h-5"][class~="w-9"], [class~="h-4"][class~="w-7"]):focus-visible {
+html.flat-theme button.rounded-full.border-2.border-transparent:is(.h-6.w-11, .h-5.w-9, .h-4.w-7):focus-visible {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: 2px;
 }
 
 /* The peer switches (a visually hidden checkbox followed by a track whose ::after is the knob). */
-html.flat-theme input[type="checkbox"][class~="peer"] + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"]) {
+html.flat-theme input[type="checkbox"].peer + div.peer.rounded-full:is(.w-9, .w-11) {
   height: 1.25rem;
   width: 2.125rem;
   background-color: rgb(var(--ctl-switch-off));
@@ -475,7 +485,7 @@ html.flat-theme input[type="checkbox"][class~="peer"] + div[class~="peer"][class
   transition: background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme input[type="checkbox"][class~="peer"] + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"])::after {
+html.flat-theme input[type="checkbox"].peer + div.peer.rounded-full:is(.w-9, .w-11)::after {
   top: 2px;
   left: 2px;
   height: 1rem;
@@ -485,15 +495,15 @@ html.flat-theme input[type="checkbox"][class~="peer"] + div[class~="peer"][class
   transition: transform var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme input[type="checkbox"][class~="peer"]:checked + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"]) {
+html.flat-theme input[type="checkbox"].peer:checked + div.peer.rounded-full:is(.w-9, .w-11) {
   background-color: rgb(var(--ctl-switch-on));
 }
 
-html.flat-theme input[type="checkbox"][class~="peer"]:checked + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"])::after {
+html.flat-theme input[type="checkbox"].peer:checked + div.peer.rounded-full:is(.w-9, .w-11)::after {
   --tw-translate-x: 0.875rem;
 }
 
-html.flat-theme input[type="checkbox"][class~="peer"]:focus-visible + div[class~="peer"][class~="rounded-full"]:is([class~="w-9"], [class~="w-11"]) {
+html.flat-theme input[type="checkbox"].peer:focus-visible + div.peer.rounded-full:is(.w-9, .w-11) {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: 2px;
   box-shadow: none;
@@ -505,7 +515,7 @@ html.flat-theme input[type="checkbox"][class~="peer"]:focus-visible + div[class~
    desktop like its row checkboxes (the 16px upstream size stays below 901px, where the reference grows them to 20).
    Upstream's focus:ring utilities are replaced by the accent outline. */
 @media (min-width: 901px) {
-  html.flat-theme input:is([type="checkbox"], [type="radio"])[class~="h-4"][class~="w-4"] {
+  html.flat-theme input:is([type="checkbox"], [type="radio"]).h-4.w-4 {
     width: 0.875rem;
     height: 0.875rem;
   }
@@ -527,8 +537,12 @@ html.flat-theme input:is([type="checkbox"], [type="radio"]):focus-visible {
    (REF-CONSOLE §8.5): a 1px structural frame on the surface, radius 8, a 2px inset, no gaps; segments 14 x 6px,
    12.5px / 600, muted, ink on hover; the current segment is ink with on-ink text (near-white with ink text in dark),
    fading in 200ms (upstream has no thumb to slide). The platform hues of the account dialogs' segments go with it
-   (monochrome identity, D3). data-ui="seg" opts a fork component into the same look. */
-html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]),
+   (monochrome identity, D3). data-ui="seg" opts a fork component into the same look.
+   Perf pass: the utility-built boxes (a gray-100 / gray-50 box with a 4px or 2px inset whose children are all buttons,
+   no data-ui of their own) are hooked [data-ui~="seg-box"] in their templates (19 boxes) instead of being found by a
+   "children are all buttons" test; the repeated [data-ui] and :not(uipad) keep the original 0,4,3 of that compound
+   (the upstream thumb is still found by its bg-white class, unlike data-ui="seg"). */
+html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad),
 html.flat-theme [data-ui~="seg"] {
   gap: 0;
   border: 1px solid rgb(var(--ctl-seg-frame));
@@ -538,7 +552,7 @@ html.flat-theme [data-ui~="seg"] {
   box-shadow: none;
 }
 
-html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button,
+html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad) > button,
 html.flat-theme [data-ui~="seg"] > button {
   margin: 0;
   border-radius: var(--ui-radius-md);
@@ -554,25 +568,25 @@ html.flat-theme [data-ui~="seg"] > button {
   transition-timing-function: var(--ui-ease-out);
 }
 
-html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button:hover,
+html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad) > button:hover,
 html.flat-theme [data-ui~="seg"] > button:hover {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button:is([class~="bg-white"], [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]),
+html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad) > button:is(.bg-white, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]),
 html.flat-theme [data-ui~="seg"] > button:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], [data-active]:not([data-active="false"])) {
   background-color: rgb(var(--ui-ink));
   color: rgb(var(--ui-on-ink));
 }
 
-html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button svg,
+html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad) > button svg,
 html.flat-theme [data-ui~="seg"] > button svg {
   width: 0.875rem;
   height: 0.875rem;
   flex-shrink: 0;
 }
 
-html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button:focus-visible {
+html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad) > button:focus-visible {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: 2px;
 }
@@ -582,7 +596,7 @@ html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):
 @media (max-width: 900px) {
   html.flat-theme .btn,
   html.flat-theme .tab,
-  html.flat-theme :is(div, nav):is([class~="bg-gray-100"], [class~="bg-gray-50"]):is([class~="p-1"], [class~="p-0.5"]):is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded-xl"]):has(> button):not(:has(> :not(button))):not([data-ui]) > button,
+  html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad) > button,
   html.flat-theme [data-ui~="seg"] > button {
     white-space: nowrap;
   }
@@ -605,7 +619,7 @@ html.flat-theme [data-tour="account-form-platform"] + div > button:nth-child(3)
 html.flat-theme [data-tour="account-form-platform"] + div > button:nth-child(4) { --ctl-seg-glyph: var(--ui-id-rose); }
 html.flat-theme [data-tour="account-form-platform"] + div > button:nth-child(5) { --ctl-seg-glyph: var(--ui-id-amber); }
 
-html.flat-theme :is([data-tour="account-form-platform"], [data-tour="account-form-platform"] + div) > button:not([class~="bg-white"]) > svg {
+html.flat-theme :is([data-tour="account-form-platform"], [data-tour="account-form-platform"] + div) > button:not(.bg-white) > svg {
   color: rgb(var(--ctl-seg-glyph, var(--ui-muted)));
 }
 /* END S platform segments */
@@ -710,16 +724,16 @@ html.flat-theme :is([data-testid="usage-detail-tab"], .channel-tab.channel-tab)
   transition-timing-function: var(--ui-ease);
 }
 
-html.flat-theme :is([data-testid="usage-detail-tab"]:not([class~="border-primary-500"]), .channel-tab.channel-tab-inactive) {
+html.flat-theme :is([data-testid="usage-detail-tab"]:not(.border-primary-500), .channel-tab.channel-tab-inactive) {
   border-color: transparent;
 }
 
-html.flat-theme :is([data-testid="usage-detail-tab"]:not([class~="border-primary-500"]), .channel-tab.channel-tab-inactive):hover {
+html.flat-theme :is([data-testid="usage-detail-tab"]:not(.border-primary-500), .channel-tab.channel-tab-inactive):hover {
   border-color: transparent;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme :is([data-testid="usage-detail-tab"][class~="border-primary-500"], .channel-tab.channel-tab-active) {
+html.flat-theme :is([data-testid="usage-detail-tab"].border-primary-500, .channel-tab.channel-tab-active) {
   border-color: rgb(var(--ui-focus));
   color: rgb(var(--ui-ink));
 }
@@ -740,10 +754,11 @@ html.flat-theme :is([data-testid="usage-detail-tab"], .channel-tab.channel-tab)
    grouped fill at 60 %, the control outline on hover; a 28px tile with a 1px line and ink at 3 %. The chosen card is
    drawn like the segmented thumb: an ink edge 2px wide on the surface, its tile ink with on-ink glyph (upstream's
    per-platform hues go: monochrome identity, D3).
-   Perf pass: the cards are hooked (data-ui="option-card", CreateAccountModal.vue and EditAccountModal.vue: the 22
-   buttons that carry the class pair), so no `:has()` on a bare button decides whether a card is a card. The repeated
-   [data-ui]s keep each rule's original specificity (0,8,3 / 0,10,3 / 0,9,3 / 0,9,4). */
-html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] {
+   Perf pass: the cards are hooked (data-ui="option-card", CreateAccountModal.vue and EditAccountModal.vue: the 23
+   buttons of that shape), so no has-test on a bare button decides whether a card is a card. The repeated [data-ui]
+   and :not(uipad) keep each rule's original specificity (0,8,3 / 0,10,3 / 0,9,3 / 0,9,4 / 0,10,4 / 0,9,5 / 0,10,5 /
+   0,11,5). */
+html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) {
   gap: 0.75rem;
   border-width: 1px;
   border-color: rgb(var(--ui-line));
@@ -755,17 +770,17 @@ html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data
   transition-timing-function: var(--ui-ease);
 }
 
-html.flat-theme [data-ui="option-card"][class~="border-gray-200"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:hover {
+html.flat-theme button[data-ui~="option-card"].border-gray-200[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad):hover {
   border-color: rgb(var(--ui-line-strong));
 }
 
-html.flat-theme [data-ui="option-card"]:not([class~="border-gray-200"])[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] {
+html.flat-theme button[data-ui~="option-card"]:not(.border-gray-200)[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) {
   border-color: rgb(var(--ui-ink));
   background-color: rgb(var(--ui-surface));
   box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:first-child {
+html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) > div:first-child {
   height: 1.75rem;
   width: 1.75rem;
   border: 1px solid rgb(var(--ui-line));
@@ -774,25 +789,25 @@ html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data
   color: rgb(var(--ui-ink) / 0.7);
 }
 
-html.flat-theme [data-ui="option-card"]:not([class~="border-gray-200"])[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:first-child {
+html.flat-theme button[data-ui~="option-card"]:not(.border-gray-200)[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) > div:first-child {
   border-color: rgb(var(--ui-ink));
   background-color: rgb(var(--ui-ink));
   color: rgb(var(--ui-on-ink));
 }
 
-html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:first-child svg {
+html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) > div:first-child svg {
   width: 0.875rem;
   height: 0.875rem;
 }
 
-html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:last-child > span:first-child {
+html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) > div:last-child > span:first-child {
   font-size: 0.8125rem;
   line-height: 1.21875rem;
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui] > div:last-child > span:last-child:not(:first-child) {
+html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) > div:last-child > span:last-child:not(:first-child) {
   font-size: 0.75rem;
   line-height: 1.125rem;
   color: rgb(var(--ui-muted));
@@ -801,7 +816,9 @@ html.flat-theme [data-ui="option-card"][data-ui][data-ui][data-ui][data-ui][data
 /* 8.2 Filter pills (data-ui="filter-pill"; the reference's FilterMenu trigger, REF-CONSOLE §8.6): 30px, 10px in, gap 6,
    radius 6, the control outline on the surface, 12.5px / 600 ink-soft, ink on hover, a 12px chevron. With a
    data-ui="filter-count" badge inside it is active: the accent at 40 % as its edge, the accent tint, accent text and a
-   Geist Mono 10.5px count. */
+   Geist Mono 10.5px count. (Perf pass, kept has-test: the badge is rendered only while a filter value is selected,
+   so the pill's own look depends on runtime content; the test sits in the subject compound of the hooked pill with a
+   child argument, the badge being the pill's direct child.) */
 html.flat-theme [data-ui~="filter-pill"] {
   display: inline-flex;
   align-items: center;
@@ -827,8 +844,8 @@ html.flat-theme [data-ui~="filter-pill"]:hover {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="filter-pill"]:has([data-ui~="filter-count"]),
-html.flat-theme [data-ui~="filter-pill"]:has([data-ui~="filter-count"]):hover {
+html.flat-theme [data-ui~="filter-pill"]:has(> [data-ui~="filter-count"]),
+html.flat-theme [data-ui~="filter-pill"]:has(> [data-ui~="filter-count"]):hover {
   border-color: rgb(var(--ui-primary) / 0.4);
   background-color: rgb(var(--ui-primary-soft));
   color: var(--ui-link);
@@ -871,7 +888,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([class~="bg-primary-500"], [class~="bg-primary-600"], [class~="bg-primary-700"])[class~="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[class~="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"], body > div.z-\[140\]) *))[class][class] {
   --theme-on-fill: var(--ui-on-ink);
   border-color: rgb(var(--ui-ink));
   background-color: rgb(var(--ui-ink));
@@ -883,8 +900,9 @@ html.flat-theme :where(:is(button, a):is([class~="bg-primary-500"], [class~="bg-
 /* 10.2 ModelWhitelistSelector (account create / edit / bulk edit, risk control): the quick actions are the default
    button (the blue and emerald outlines were decoration), clearing every model keeps the destructive outline, and
    「填入」 beside the custom model field is the default button at the field's 34px. (wave 2, reported by the accounts
-   agent) */
-html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button[class~="border-red-200"], input.input ~ button[class~="bg-primary-50"]) {
+   agent; perf pass: 「填入」 is hooked [data-ui="model-add"] in ModelWhitelistSelector.vue; the repeated [data-ui] and
+   :not(uipad) keep the original 0,2,4 of that alternative, so every :is() below keeps its specificity) */
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button.border-red-200, button[data-ui~="model-add"][data-ui]:not(uipad):not(uipad):not(uipad)) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -902,27 +920,27 @@ html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upst
   transition-timing-function: var(--ui-ease);
 }
 
-html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], input.input ~ button[class~="bg-primary-50"]):not(:disabled):hover {
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], button[data-ui~="model-add"][data-ui]:not(uipad):not(uipad):not(uipad)):not(:disabled):hover {
   background-color: rgb(var(--ui-subtle));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-testid="fill-related-models"] ~ button[class~="border-red-200"][class~="border-red-200"] {
+html.flat-theme [data-testid="fill-related-models"] ~ button.border-red-200.border-red-200 {
   border-color: rgb(var(--ui-danger) / 0.3);
   color: rgb(var(--ui-danger));
 }
 
-html.flat-theme [data-testid="fill-related-models"] ~ button[class~="border-red-200"][class~="border-red-200"]:hover {
+html.flat-theme [data-testid="fill-related-models"] ~ button.border-red-200.border-red-200:hover {
   border-color: rgb(var(--ui-danger) / 0.5);
   background-color: rgb(var(--ui-danger-soft));
   color: rgb(var(--ui-danger));
 }
 
-html.flat-theme input.input ~ button[class~="bg-primary-50"] {
+html.flat-theme button[data-ui~="model-add"][data-ui]:not(uipad):not(uipad):not(uipad) {
   min-height: var(--ui-select-h);
 }
 
-html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button[class~="border-red-200"], input.input ~ button[class~="bg-primary-50"]):focus-visible {
+html.flat-theme :is([data-testid="fill-related-models"], [data-testid="sync-upstream-models"], [data-testid="fill-related-models"] ~ button.border-red-200, button[data-ui~="model-add"][data-ui]:not(uipad):not(uipad):not(uipad)):focus-visible {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: 2px;
 }
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index 579c929a7236..d485220aef22 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -21,7 +21,25 @@
  * by platform with Tailwind hue classes keeps that platform colour, decision 2) and data-ui~="category-chip" (a
  * category label drawn as the reference's neutral chip: request type, billing mode, protocol, role ...).
  * Hooks used from other owners: data-ui~="bulk-bar" (AccountBulkActionsBar, the accounts agent), data-table and
- * data-column (DataTable), aria-sort on sortable headers. */
+ * data-column (DataTable), aria-sort on sortable headers.
+ *
+ * Performance pass (2026-09-30): where a rule found its element by what it holds, the element says so itself with a
+ * STATIC data-ui hook (attribute-only template additions, never bound to state), and every rewritten selector keeps
+ * the exact weight of the pre-pass one (the hook, then repeated [data-ui] / [class] and :is(<tag>) where the replaced
+ * relational argument weighed more), so the cascade is unchanged:
+ *   data-ui="data-table"              DataTable.vue                  its <table>
+ *   data-ui="dist-row" / "dist-name"  Model / Group / Endpoint distribution charts, UserDashboardCharts: a data row / its
+ *                                     name cell when the name is a flex wrapper
+ *   data-ui="platform-hue"            PlatformTypeBadge.vue          the platform | type chip
+ *   data-ui="group-option"            GroupOptionItem.vue            root
+ *   data-ui="kpi-grid" / "kpi-tile" / "kpi-value"                    KPI grids, tiles, the RPM value row
+ *   data-ui="quick-action"            the dashboards' quick action buttons
+ *   data-ui="chart-card"              the cards that hold a chart area (chart components, dashboards, account stats, revenue)
+ *   data-ui="picked-chip"             a picked-value chip with its x button (never a callout, §11)
+ * Runtime state (a selected row, a rendered pagination, a platform hue, a KPI error count) is read only by
+ * subject-position :has() on a narrow anchor with child / sibling arguments, and passed on as custom properties:
+ * the selected row (§1), the TablePageLayout root (§2), the platform chip (§6), the KPI tile (§7). Outside those
+ * :has() arguments, no :nth-child(of), + or ~ in this file is keyed on anything that changes at runtime. */
 
 /* ================================================================== 0 · custom properties */
 
@@ -279,48 +297,92 @@ html.flat-theme .table-wrapper .table-body > tr[data-row-id]:is(:hover, :focus-w
   background-color: rgb(var(--ui-hover));
 }
 
-/* Selected rows (DataTable's own selection, or a checked box in a `select` column): the accent's soft fill, which
-   the reference uses for every selected or active fill; hover keeps it and darkens a step. */
-html.flat-theme .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr) {
+/* Selected rows (DataTable's own selection column, which gives the row bg-primary-50/40, or a checked box in a page's
+   own `select` column): the accent's soft fill, which the reference uses for every selected or active fill; hover
+   keeps it and darkens a step. The row tests its own select cell (subject-position :has(), static markup only) and
+   hands its fill to its sticky cells as --ui-row-pick-fill (registered below as a non-inherited property that only
+   .sticky-col inherits explicitly), so no rule needs a relational selector on a row to reach its cells. */
+html.flat-theme .table-wrapper .table-body > tr:where([data-row-id]):is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) {
+  --ui-row-pick-fill: rgb(var(--ui-primary-soft));
   background-color: rgb(var(--ui-primary-soft));
 }
 
-html.flat-theme .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr):hover {
+html.flat-theme .table-wrapper .table-body > tr:where([data-row-id]):is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)):hover {
+  --ui-row-pick-fill: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
   background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
 }
 
 /* On the dark selected fill (#333e36) upstream's secondary greys fall short (text-gray-400 / dark:text-dark-500
    #919191 3.54:1, text-gray-500 / dark:text-dark-400 #9c9c9c 4.06:1): in a selected row they take the muted grey
    (#b3b3b3, 5.39:1; 5.1 on the selected hover). Light is unchanged. Every selectable table. (wave 2, reported by
-   the management and user-side agents) */
-html.flat-theme.dark .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
+   the management and user-side agents)
+   DataTable's own selection is the row's class; a page's own select column makes the row publish --ui-row-picked
+   (dark theme only, so a light-theme selection never restyles the row's cells), which its cells read through a
+   style query (Chromium 111+, Safari 18+). Firefox has no style queries: it keeps the pre-pass selector in the
+   @supports (-moz-appearance: none) blocks, which Chromium never loads. Same weights (0,8,4) as the pre-pass rules. */
+html.flat-theme.dark .table-wrapper .table-body > tr:where([data-row-id]):has(> td[data-column="select"] input[type="checkbox"]:checked) {
+  --ui-row-picked: 1;
+}
+
+html.flat-theme.dark .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class][class]:is(tr):is(tr) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
   color: rgb(var(--ui-muted));
 }
 
+@container style(--ui-row-picked: 1) {
+  html.flat-theme.dark .table-wrapper .table-body > tr[data-row-id][data-row-id][data-row-id]:is(tr):is(tr) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
+    color: rgb(var(--ui-muted));
+  }
+}
+
+@supports (-moz-appearance: none) {
+  html.flat-theme.dark .table-wrapper .table-body > tr:has(> td[data-column="select"] input[type="checkbox"]:checked) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
+    color: rgb(var(--ui-muted));
+  }
+}
+
 /* and the danger red of a failure note in a selected row (the accounts usage tickets' 「…检查失败」): #f87171 is 4.03:1 on
    the selected fill; the lighter red keeps it a failure and readable (batch 7, reported by the accounts agent).
    Amber (6.68) and the light theme's red (4.79) hold as they are. */
-html.flat-theme.dark .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr) :is([class~="text-red-500"], [class~="text-red-600"], [class~="dark:text-red-400"]) {
+html.flat-theme.dark .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class][class]:is(tr):is(tr) :is([class~="text-red-500"], [class~="text-red-600"], [class~="dark:text-red-400"]) {
   color: rgb(var(--ui-selected-danger));
 }
 
+@container style(--ui-row-picked: 1) {
+  html.flat-theme.dark .table-wrapper .table-body > tr[data-row-id][data-row-id][data-row-id]:is(tr):is(tr) :is([class~="text-red-500"], [class~="text-red-600"], [class~="dark:text-red-400"]) {
+    color: rgb(var(--ui-selected-danger));
+  }
+}
+
+@supports (-moz-appearance: none) {
+  html.flat-theme.dark .table-wrapper .table-body > tr:has(> td[data-column="select"] input[type="checkbox"]:checked) :is([class~="text-red-500"], [class~="text-red-600"], [class~="dark:text-red-400"]) {
+    color: rgb(var(--ui-selected-danger));
+  }
+}
+
 /* Sticky columns: upstream paints them white / slate (#111827, #1f2937 on hover) whatever the row shows; here they
    take the row's own fill, and the edge against the scrolled columns is the reference's 1px line instead of a
-   shadow. */
+   shadow. A selected row's fill arrives as --ui-row-pick-fill (set on the row above; unset elsewhere, so the
+   fallback is the cell's own surface / hover fill). */
+@property --ui-row-pick-fill {
+  syntax: '*';
+  inherits: false;
+}
+
 html.flat-theme .table-wrapper .table-body .sticky-col {
-  background-color: rgb(var(--ui-surface));
+  --ui-row-pick-fill: inherit;
+  background-color: var(--ui-row-pick-fill, rgb(var(--ui-surface)));
   transition: background-color var(--ui-duration) var(--ui-ease);
 }
 
 html.flat-theme .table-wrapper .table-body > tr[data-row-id]:is(:hover, :focus-within) > .sticky-col {
-  background-color: rgb(var(--ui-hover));
+  background-color: var(--ui-row-pick-fill, rgb(var(--ui-hover)));
 }
 
-html.flat-theme .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr) > .sticky-col {
+html.flat-theme .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class][class]:is(tr):is(tr) > .sticky-col {
   background-color: rgb(var(--ui-primary-soft));
 }
 
-html.flat-theme .table-wrapper .table-body > tr[data-ui~="row-selected"]:is(tr):hover > .sticky-col {
+html.flat-theme .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class][class]:is(tr):is(tr):hover > .sticky-col {
   background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
 }
 
@@ -474,6 +536,10 @@ html.flat-theme .table-wrapper .table-body > tr > td > div[class~="animate-pulse
 
 /* sections 12px apart (REF §6 gap-3; the shell's gap token when it defines one); the height is the shell's */
 html.flat-theme .table-page-layout {
+  --ui-tpl-card-foot-line: initial;
+  --ui-tpl-card-foot-radius: initial;
+  --ui-tpl-foot-pull: initial;
+  --ui-tpl-pagination-radius: initial;
   row-gap: var(--ui-shell-gap, 12px);
 }
 
@@ -508,26 +574,36 @@ html.flat-theme .table-page-layout.mobile-mode .table-scroll-container {
 }
 
 /* Pagination below a framed table is the card's footer (the reference's list ends inside its card on a 1px line,
-   REF §8.7 pagination): the card loses its bottom radius and the pagination section closes the frame. */
-html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scroll-container):has(+ .layout-section-fixed > [data-ui="pagination"]) > .table-scroll-container {
-  border-bottom-width: 0;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
+   REF §8.7 pagination): the card loses its bottom radius and the pagination section closes the frame; below
+   unframed content (the accounts card view) the pagination is a bar of its own (final review V1-07).
+   The layout root states its own case (two subject-position :has() on .table-page-layout, child / sibling
+   arguments only) as custom properties; the card, the pagination section and the pagination read them, with the
+   values they get anyway as fallbacks (the card's 1px line and 8px corners from the rules above, no section
+   margin). The root resets them first, so a nested layout never reads its parent's case. Same weights as the
+   pre-pass rules (0,7,1 / 0,6,1 / 0,6,1). */
+html.flat-theme .table-page-layout:has(> .layout-section-scrollable > .table-scroll-container):has(> .layout-section-scrollable + .layout-section-fixed > [data-ui="pagination"]) {
+  --ui-tpl-card-foot-line: 0px;
+  --ui-tpl-card-foot-radius: 0px;
+  --ui-tpl-foot-pull: calc(-1 * var(--ui-shell-gap, 12px));
 }
 
-html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scroll-container) + .layout-section-fixed:has(> [data-ui="pagination"]) {
-  margin-top: calc(-1 * var(--ui-shell-gap, 12px));
+html.flat-theme .table-page-layout:has(> .layout-section-scrollable > .table-scroll-container-unframed) {
+  --ui-tpl-pagination-radius: var(--ui-radius-lg);
 }
 
-html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scroll-container) + .layout-section-fixed > [data-ui="pagination"] {
-  border: 1px solid rgb(var(--ui-line));
-  border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
+html.flat-theme .table-page-layout > .layout-section-scrollable > .table-scroll-container.table-scroll-container.table-scroll-container.table-scroll-container {
+  border-bottom-width: var(--ui-tpl-card-foot-line, 1px);
+  border-bottom-left-radius: var(--ui-tpl-card-foot-radius, var(--ui-radius-lg));
+  border-bottom-right-radius: var(--ui-tpl-card-foot-radius, var(--ui-radius-lg));
 }
 
-/* below unframed content (the accounts card view) the pagination is a bar of its own (final review V1-07) */
-html.flat-theme .table-page-layout > .layout-section-scrollable:has(> .table-scroll-container-unframed) + .layout-section-fixed > [data-ui="pagination"] {
+html.flat-theme .table-page-layout > .layout-section-scrollable + .layout-section-fixed.layout-section-fixed.layout-section-fixed {
+  margin-top: var(--ui-tpl-foot-pull, 0px);
+}
+
+html.flat-theme .table-page-layout > .layout-section-scrollable + .layout-section-fixed > [data-ui="pagination"][data-ui] {
   border: 1px solid rgb(var(--ui-line));
-  border-radius: var(--ui-radius-lg);
+  border-radius: var(--ui-tpl-pagination-radius, 0 0 var(--ui-radius-lg) var(--ui-radius-lg));
 }
 
 /* ================================================================== 3 · plain tables */
@@ -652,7 +728,9 @@ html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text
   vertical-align: 0;
 }
 
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td:first-child:not([colspan]):has(> span[class~="inline-flex"], > div[class~="flex"])::before {
+/* a name drawn as a flex wrapper (the expandable rows' chevron, the ranking's #n) carries the key inside the wrapper;
+   that name cell is marked data-ui="dist-name" */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr > td:first-child:not([colspan])[data-ui~="dist-name"]:is(td)::before {
   display: none;
 }
 
@@ -666,28 +744,24 @@ html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text
   background-color: var(--ui-row-key, transparent);
 }
 
-/* A data row is marked by the component (data-ui="dist-row"), a breakdown / expansion row by data-ui="dist-group":
-   counting only the data rows picks the palette colour of each slice. The `of <selector>` argument keeps the rule's
-   one type in the specificity, exactly as the pre-pass `:nth-child(n of :not(:has(> td[colspan])))` did. */
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(1 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-1); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(2 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-2); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(3 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-3); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(4 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-4); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(5 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-5); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(6 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-6); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-7); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-8); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(9 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-9); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(10 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-10); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(11 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-11); }
-html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(12 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-12); }
-
-/* the user dashboard's doughnut takes series 1-6, 11 and 10 for its eight slices (UserDashboardCharts.vue): that card
-   carries data-ui="chart-card". Both rules are the same shape as the list above, so the later one still wins on source
-   order, exactly as it did before. */
-html.flat-theme [data-ui~="chart-card"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-11); }
-html.flat-theme [data-ui~="chart-card"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of tr[data-ui="dist-row"]) { --ui-row-key: var(--theme-chart-series-10); }
-html.flat-theme [data-ui~="chart-card"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(n + 9 of tr[data-ui="dist-row"]) { --ui-row-key: transparent; }
+/* the slices are counted over the data rows (data-ui="dist-row"; a model's breakdown row, a colspan cell, is not one) */
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(1 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-1); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(2 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-2); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(3 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-3); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(4 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-4); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(5 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-5); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(6 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-6); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-7); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-8); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(9 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-9); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(10 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-10); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(11 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-11); }
+html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(12 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-12); }
+
+/* the user dashboard's doughnut takes series 1-6, 11 and 10 for its eight slices (UserDashboardCharts.vue) */
+html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(7 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-11); }
+html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(8 of tr[data-ui~="dist-row"]) { --ui-row-key: var(--theme-chart-series-10); }
+html.flat-theme [class~="card"][class~="relative"][class~="overflow-hidden"] [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr:nth-child(n + 9 of tr[data-ui~="dist-row"]) { --ui-row-key: transparent; }
 
 /* the spending ranking's remainder row ("others", upstream's grey band) is the grey slice */
 html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text-xs"] > tbody > tr[class~="bg-gray-50/70"] {
@@ -946,15 +1020,16 @@ html.flat-theme [data-ui="status-badge"] > span:last-child {
    plan, a subscription's days left and the peak-rate window keep the status colours.
    Contract for page owners: an element that upstream colours by platform with Tailwind hue classes can opt in with
    data-ui~="platform-chip" (line, fill, text) or data-ui~="platform-text" (text and glyph only).
-   Hooks: data-ui="platform-badge", data-ui="group-badge"; GroupOptionItem's rate pill is reached through the badge's
-   own class (.groupOptionItemBadge), no template change. */
+   Hooks: data-ui="platform-badge", data-ui="group-badge", data-ui="group-option" (GroupOptionItem's root, whose rate
+   pill is the chip) and data-ui="platform-hue" (the platform | type chip, static): the chip takes the hue of its
+   first span (subject-position :has() with a child argument, tested only on that hooked chip). */
 html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"] > span:not([title])[class*="-orange-"],
 html.flat-theme [data-ui="group-badge"][class*="-orange-"],
 html.flat-theme [data-ui="group-badge"] > span[class*="-orange-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-orange-"],
 html.flat-theme [data-ui~="platform-text"][class*="-orange-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-orange-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-orange-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-orange-"]) {
   --pf-text: var(--ui-id-orange);
   --pf-soft: var(--ui-id-orange-soft);
   --pf-line: var(--ui-id-orange-line);
@@ -967,7 +1042,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-amber-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-amber-"],
 html.flat-theme [data-ui~="platform-text"][class*="-amber-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-amber-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-amber-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-amber-"]) {
   --pf-text: var(--ui-id-amber);
   --pf-soft: var(--ui-id-amber-soft);
   --pf-line: var(--ui-id-amber-line);
@@ -980,7 +1055,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-emerald-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-emerald-"],
 html.flat-theme [data-ui~="platform-text"][class*="-emerald-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-emerald-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-emerald-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-emerald-"]) {
   --pf-text: var(--ui-id-emerald);
   --pf-soft: var(--ui-id-emerald-soft);
   --pf-line: var(--ui-id-emerald-line);
@@ -993,7 +1068,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-green-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-green-"],
 html.flat-theme [data-ui~="platform-text"][class*="-green-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-green-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-green-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-green-"]) {
   --pf-text: var(--ui-id-green);
   --pf-soft: var(--ui-id-green-soft);
   --pf-line: var(--ui-id-green-line);
@@ -1006,7 +1081,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-teal-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-teal-"],
 html.flat-theme [data-ui~="platform-text"][class*="-teal-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-teal-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-teal-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-teal-"]) {
   --pf-text: var(--ui-id-teal);
   --pf-soft: var(--ui-id-teal-soft);
   --pf-line: var(--ui-id-teal-line);
@@ -1019,7 +1094,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-cyan-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-cyan-"],
 html.flat-theme [data-ui~="platform-text"][class*="-cyan-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-cyan-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-cyan-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-cyan-"]) {
   --pf-text: var(--ui-id-cyan);
   --pf-soft: var(--ui-id-cyan-soft);
   --pf-line: var(--ui-id-cyan-line);
@@ -1032,7 +1107,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-sky-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-sky-"],
 html.flat-theme [data-ui~="platform-text"][class*="-sky-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-sky-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-sky-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-sky-"]) {
   --pf-text: var(--ui-id-sky);
   --pf-soft: var(--ui-id-sky-soft);
   --pf-line: var(--ui-id-sky-line);
@@ -1045,7 +1120,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-blue-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-blue-"],
 html.flat-theme [data-ui~="platform-text"][class*="-blue-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-blue-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-blue-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-blue-"]) {
   --pf-text: var(--ui-id-blue);
   --pf-soft: var(--ui-id-blue-soft);
   --pf-line: var(--ui-id-blue-line);
@@ -1058,7 +1133,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-indigo-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-indigo-"],
 html.flat-theme [data-ui~="platform-text"][class*="-indigo-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-indigo-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-indigo-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-indigo-"]) {
   --pf-text: var(--ui-id-indigo);
   --pf-soft: var(--ui-id-indigo-soft);
   --pf-line: var(--ui-id-indigo-line);
@@ -1071,7 +1146,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-violet-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-violet-"],
 html.flat-theme [data-ui~="platform-text"][class*="-violet-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-violet-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-violet-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-violet-"]) {
   --pf-text: var(--ui-id-violet);
   --pf-soft: var(--ui-id-violet-soft);
   --pf-line: var(--ui-id-violet-line);
@@ -1084,7 +1159,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-purple-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-purple-"],
 html.flat-theme [data-ui~="platform-text"][class*="-purple-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-purple-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-purple-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-purple-"]) {
   --pf-text: var(--ui-id-purple);
   --pf-soft: var(--ui-id-purple-soft);
   --pf-line: var(--ui-id-purple-line);
@@ -1097,7 +1172,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-fuchsia-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-fuchsia-"],
 html.flat-theme [data-ui~="platform-text"][class*="-fuchsia-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-fuchsia-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-fuchsia-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-fuchsia-"]) {
   --pf-text: var(--ui-id-fuchsia);
   --pf-soft: var(--ui-id-fuchsia-soft);
   --pf-line: var(--ui-id-fuchsia-line);
@@ -1110,7 +1185,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-pink-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-pink-"],
 html.flat-theme [data-ui~="platform-text"][class*="-pink-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-pink-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-pink-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-pink-"]) {
   --pf-text: var(--ui-id-pink);
   --pf-soft: var(--ui-id-pink-soft);
   --pf-line: var(--ui-id-pink-line);
@@ -1123,7 +1198,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-rose-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-rose-"],
 html.flat-theme [data-ui~="platform-text"][class*="-rose-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-rose-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-rose-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-rose-"]) {
   --pf-text: var(--ui-id-rose);
   --pf-soft: var(--ui-id-rose-soft);
   --pf-line: var(--ui-id-rose-line);
@@ -1136,7 +1211,7 @@ html.flat-theme [data-ui="group-badge"] > span[class*="-zinc-"],
 html.flat-theme [data-ui~="platform-chip"][class*="-zinc-"],
 html.flat-theme [data-ui~="platform-text"][class*="-zinc-"],
 html.flat-theme div[data-ui~="group-option"]:is(div) > div:last-child > div > span[class~="rounded-full"]:first-child[class*="-zinc-"],
-html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui="platform-hue"]):is(:first-child):has(> span:first-child[class*="-zinc-"]) {
+html.flat-theme [data-ui="platform-badge"] > div[class~="inline-flex"]:where([data-ui~="platform-hue"]):is(:first-child):has(> span:first-child[class*="-zinc-"]) {
   --pf-text: var(--ui-id-zinc);
   --pf-soft: var(--ui-id-zinc-soft);
   --pf-line: var(--ui-id-zinc-line);
@@ -1373,17 +1448,19 @@ html.flat-theme .model-icon-fallback {
 /* Upstream's KPI tiles (admin and user dashboards, usage records, orders: a .card.p-4 in a grid whose first content
    is a coloured icon tile) take the reference's StatTile (REF §8.13): 1px structural line, 6px radius, surface,
    8 / 12 inset, the mono label, the value 15/600 tabular ink, the detail 11px muted, 76px; no icon tile; 10px
-   apart. */
-html.flat-theme [class~="grid"]:where([data-ui="kpi-grid"])[data-ui] {
+   apart. The grids and tiles are marked (static data-ui="kpi-grid" / "kpi-tile"; "kpi-value" on the RPM value row);
+   the repeated [data-ui] / [class] and :is(div) keep the weight of the pre-pass selectors, which found them by
+   their icon tile. */
+html.flat-theme [class~="grid"][data-ui~="kpi-grid"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:is(div) {
   gap: 10px;
 }
 
 /* two KPI rows in a row (the admin dashboard) read as one grid: 10px apart, not the page's 24 */
-html.flat-theme [class~="grid"]:where([data-ui="kpi-grid"])[data-ui] + [class~="grid"]:where([data-ui="kpi-grid"])[data-ui] {
+html.flat-theme [class~="grid"][data-ui~="kpi-grid"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:is(div) + [class~="grid"][data-ui~="kpi-grid"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:is(div) {
   margin-top: 10px;
 }
 
-html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui] {
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"][data-ui][data-ui][data-ui][data-ui]:is(div) {
   --ui-kpi-accent: var(--ui-ink);
   display: flex;
   flex-direction: column;
@@ -1400,11 +1477,11 @@ html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui] {
   box-shadow: none;
 }
 
-html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"] > [class~="flex"]:first-child[class][class] {
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"] > [class~="flex"]:first-child[class][class]:is(div) {
   display: block;
 }
 
-html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"] div[class~="rounded-lg"][class~="p-2"]:first-child[class][class] {
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"] div[class~="rounded-lg"][class~="p-2"]:first-child {
   display: none;
 }
 
@@ -1447,7 +1524,7 @@ html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="roun
 
 /* the detail line(s): 11px muted; the cost triples keep their order, weight marks the actual cost (the titles name
    each figure); status words keep their status colour */
-html.flat-theme [data-ui~="kpi-grid"] > [class~="card"][class~="p-4"][data-ui~="kpi-tile"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > :is(p, div):not(:first-child):not([class~="text-xl"])[class] {
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div > :is(p, div):not(:first-child):not(div[data-ui~="kpi-value"]):not([class~="text-xl"]) {
   color: rgb(var(--ui-muted));
   font-size: 11px;
   line-height: 16.5px;
@@ -1496,21 +1573,22 @@ html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="roun
 }
 
 /* Danger variant (REF §8.13, crop kpi-card-danger): a tile whose detail reports errors is the whole-card alert,
-   danger border and soft fill, the value in the danger colour. */
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child) > span[class~="text-red-500"]) {
+   danger border and soft fill, the value in the danger colour, the label muted. The KPI tile tests its own detail
+   line (subject-position :has(), child arguments for the two tile shapes: icon tile + text column directly in the
+   card, or inside its first row) and hands the colours to its own rules: --ui-kpi-accent to the value, --ui-label to
+   the label (the only reader of --ui-label in a tile). Same weight as the pre-pass rule (0,9,5). */
+html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:where([data-ui~="kpi-tile"]):has(> * > div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child) > span[class~="text-red-500"], > div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child) > span[class~="text-red-500"]) {
   --ui-kpi-accent: var(--ui-danger);
+  --ui-label: var(--ui-muted);
   border-color: rgb(var(--ui-danger));
   background-color: rgb(var(--ui-danger-soft));
 }
 
-html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:not(:first-child) > span[class~="text-red-500"]) div[class~="rounded-lg"][class~="p-2"]:first-child + div > p:first-child {
-  color: rgb(var(--ui-muted));
-}
-
 /* Quick actions (admin and user dashboards, D4): upstream tints each tile and its hover by hue; they take the
    reference's option card (REF §8.11 dialog option card: 8px radius, 1px structural line, the subtle fill at 60 %,
-   hover = control outline; a 28px neutral icon square with a 1px line; title 13/600 ink, description 12.5 muted). */
-html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]):has(> :first-child[class~="flex-shrink-0"]:is([class~="rounded-lg"], [class~="rounded-xl"])) {
+   hover = control outline; a 28px neutral icon square with a 1px line; title 13/600 ink, description 12.5 muted).
+   The buttons are data-ui="quick-action" (they were found by their icon square). */
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"])[data-ui~="quick-action"][data-ui][data-ui] {
   gap: 12px;
   padding: 12px;
   border: 1px solid rgb(var(--ui-line));
@@ -1519,7 +1597,7 @@ html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][cla
   transition: border-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"]):has(> :first-child[class~="flex-shrink-0"]:is([class~="rounded-lg"], [class~="rounded-xl"])):hover {
+html.flat-theme button[class~="group"][class~="flex"][class~="items-center"][class~="bg-gray-50"]:is([class~="p-3"], [class~="p-4"])[data-ui~="quick-action"][data-ui][data-ui]:hover {
   border-color: rgb(var(--ui-line-strong));
   background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
@@ -1702,17 +1780,17 @@ html.flat-theme :is(.skeleton, [data-ui="skeleton"], [class~="animate-pulse"][cl
 
 /* ================================================================== 10 · chart cards */
 
-/* Cards holding a chart (REF §8.14 Spend over time: 14px inset, the title as a mono label). A chart card says so
-   itself: the component that owns the canvas or the fixed-height chart area (h-48 / h-64, which it keeps while loading
-   or empty) carries data-ui="chart-card" (the five dist/trend chart components, the two account stats modals, the
-   admin dashboard's trend card and the payment revenue card). The hook is inside :where() so the selector keeps the
-   compound's own weight exactly as the pre-pass :has(canvas, ...) did. */
-html.flat-theme [class~="card"][class~="p-4"]:where([data-ui="chart-card"]) {
+/* Cards holding a chart (REF §8.14 Spend over time: 14px inset, the title as a mono label). A chart card is the
+   card that owns a canvas or the fixed-height chart area it keeps while loading or empty (h-48 / h-64), so the title
+   does not change with the data; the component marks it data-ui="chart-card" (the dist / trend chart components, the
+   two account stats modals, the admin dashboard's usage trend card, the payment revenue card, the user dashboard's
+   model card). :is(div) twice keeps the pre-pass weight. */
+html.flat-theme [class~="card"][class~="p-4"][data-ui~="chart-card"]:is(div):is(div) {
   padding: 14px;
 }
 
-html.flat-theme [class~="card"][class~="p-4"]:where([data-ui="chart-card"]) > h3[class~="text-sm"][class~="font-semibold"],
-html.flat-theme [class~="card"][class~="p-4"]:where([data-ui="chart-card"]) > div:first-child > h3[class~="text-sm"][class~="font-semibold"] {
+html.flat-theme [class~="card"][class~="p-4"][data-ui~="chart-card"]:is(div):is(div) > h3[class~="text-sm"][class~="font-semibold"],
+html.flat-theme [class~="card"][class~="p-4"][data-ui~="chart-card"]:is(div):is(div) > div:first-child > h3[class~="text-sm"][class~="font-semibold"] {
   color: rgb(var(--ui-label));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
@@ -1730,7 +1808,8 @@ html.flat-theme [class~="card"][class~="p-4"]:where([data-ui="chart-card"]) > di
    text in ink-soft; the fill the subtle ground here, so a box inside a dialog still reads as a box). Warning (amber),
    error (red) and success (green / emerald) boxes are states and keep their colours. Reach: a div with such a fill
    that is a box (rounded, bordered or a card) with an inset; never a data-ui element, a selected option (a ring, or a
-   -300..-700 border of the hue), a picked-value chip (a direct x button), the public pages, a button or a link.
+   -300..-700 border of the hue), a picked-value chip (its direct x button; the chip is data-ui="picked-chip"), the
+   public pages, a button or a link.
    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. */
diff --git a/frontend/src/styles/console/overlays.css b/frontend/src/styles/console/overlays.css
index d4dd2901eaa3..fdff22bca473 100644
--- a/frontend/src/styles/console/overlays.css
+++ b/frontend/src/styles/console/overlays.css
@@ -19,7 +19,13 @@
  *   components/common/AnnouncementBell.vue   data-ui="announcement-bell" (the header button, styled by shell.css),
  *                                            data-ui="announcement-list", data-ui="announcement-detail" (the panels)
  *   components/common/AnnouncementPopup.vue  data-ui="announcement-popup" (the panel)
- *   components/common/ConfirmDialog.vue      data-ui="confirm-cancel", data-ui="confirm-ok" (its two utility buttons)
+ *   components/common/ConfirmDialog.vue      data-ui="confirm-cancel", data-ui="confirm-ok" (its two utility buttons),
+ *                                            data-ui="confirm-body" (the message box; perf pass)
+ *   views/admin/AccountsView.vue             data-ui="account-tools-panel" (the 更多操作 panel; perf pass)
+ *   views/user/PaymentView.vue               data-ui="image-lightbox" (the QR preview scrim; perf pass)
+ *   views/admin/BackupView.vue, RedeemView.vue, SubscriptionsView.vue
+ *                                            data-ui="h2-dlg" / "h2-dlg-close" on the scrims of the five h2-led
+ *                                            utility dialogs (3.7b; perf pass)
  *   components/common/HelpTooltip.vue        data-ui="help-tooltip" (the trigger root)
  *   components/common/LocaleSwitcher.vue     data-ui="menu", data-ui="menu-item"
  *   components/common/Toast.vue              data-ui="toast-stack", data-ui="toast"
@@ -62,7 +68,7 @@ html.flat-theme {
    lazily loaded scoped styles restate their dark fill at 0,3,0. */
 html.flat-theme :is(.dropdown, .select-dropdown-portal, .select-dropdown, .date-picker-dropdown, .action-menu-content, [data-ui="menu"]),
 html.flat-theme.dark :is(.dropdown, .select-dropdown-portal, .select-dropdown, .date-picker-dropdown, .action-menu-content, [data-ui="menu"]),
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]):not([class~="inset-0"], [class~="inset-y-0"], [class~="pointer-events-none"]) {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl):not(.inset-0, .inset-y-0, .pointer-events-none) {
   border-radius: var(--ui-radius-lg);
   border-color: rgb(var(--ui-line));
   background-color: rgb(var(--ui-surface));
@@ -71,7 +77,7 @@ html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [cl
 
 /* panels drawn with a ring instead of a border keep their box size: the line becomes a 1px spread */
 html.flat-theme .action-menu-content,
-html.flat-theme div[class~="fixed"][class~="bg-white"][class~="ring-1"]:is([class~="shadow-lg"], [class~="shadow-xl"]) {
+html.flat-theme div.fixed.bg-white.ring-1:is(.shadow-lg, .shadow-xl) {
   box-shadow: 0 0 0 1px rgb(var(--ui-line)), var(--ui-shadow-popover);
 }
 
@@ -103,7 +109,7 @@ html.flat-theme :is(.select-dropdown-enter-from, .select-dropdown-leave-to, .dat
    same row serves command menus (row "more", user menu), lists (Select, proxy picker) and upstream's utility menus
    (their full-width buttons). The named rows share one :is() group (0,3,1), so every state below is written on it. */
 html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item),
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="flex"], [class~="text-left"]):not(.btn) {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(button, a).w-full:is(.flex, .text-left):not(.btn) {
   gap: 8px;
   padding: var(--ui-menu-row-y) var(--ui-menu-row-x);
   font-size: var(--ui-menu-text);
@@ -112,21 +118,21 @@ html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [cl
 }
 
 /* inset rows (upstream's p-1.5 / p-2 panels with rounded items) keep the ModelPicker's 4px corners */
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="rounded-md"], [class~="rounded-lg"], [class~="rounded"]):not(.btn),
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(button, a).w-full:is(.rounded-md, .rounded-lg, .rounded):not(.btn),
 html.flat-theme .account-tools-menu-item {
   border-radius: var(--ui-radius-sm);
 }
 
 /* neutral text: the rows' own greys and the decorative hues upstream gives single commands (re-authorise blue, refresh
    purple, privacy emerald, ...); a selected row and a danger row keep their meaning (below) */
-html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(.select-option-selected, [aria-selected="true"], [aria-checked="true"], [aria-current="true"], [aria-current="page"], [data-selected="true"], [class~="bg-primary-50"], [class*="text-primary-"], [class*="text-red-"], [data-tone="danger"]),
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="text-gray-700"], [class~="text-gray-600"], [class~="text-gray-800"], [class~="text-gray-900"]):not(.btn, [class~="bg-primary-50"], [class*="text-primary-"]) {
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(.select-option-selected, [aria-selected="true"], [aria-checked="true"], [aria-current="true"], [aria-current="page"], [data-selected="true"], .bg-primary-50, [class*="text-primary-"], [class*="text-red-"], [data-tone="danger"]),
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(button, a).w-full:is(.text-gray-700, .text-gray-600, .text-gray-800, .text-gray-900):not(.btn, .bg-primary-50, [class*="text-primary-"]) {
   color: rgb(var(--ui-ink-soft));
 }
 
 /* selected: ink text (FilterMenu), no tint (upstream tints it primary-50) */
-html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):is(.select-option-selected, [aria-selected="true"], [aria-checked="true"], [aria-current="true"], [aria-current="page"], [data-selected="true"], [class~="bg-primary-50"], [class*="text-primary-"]),
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="bg-primary-50"], [class*="text-primary-"]):not(.btn) {
+html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):is(.select-option-selected, [aria-selected="true"], [aria-checked="true"], [aria-current="true"], [aria-current="page"], [data-selected="true"], .bg-primary-50, [class*="text-primary-"]),
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(button, a).w-full:is(.bg-primary-50, [class*="text-primary-"]):not(.btn) {
   background-color: transparent;
   color: rgb(var(--ui-ink));
 }
@@ -144,12 +150,12 @@ html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .sel
 html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(.select-option-group, .select-option-disabled):is(:focus-visible, .select-option-focused),
 html.flat-theme.dark :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(:disabled, .select-option-group, .select-option-disabled, [aria-disabled="true"]):hover,
 html.flat-theme.dark :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):not(.select-option-group, .select-option-disabled):is(:focus-visible, .select-option-focused),
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="flex"], [class~="text-left"]):not(.btn, :disabled):is(:hover, :focus-visible) {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(button, a).w-full:is(.flex, .text-left):not(.btn, :disabled):is(:hover, :focus-visible) {
   background-color: rgb(var(--ui-subtle));
 }
 
 html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item):focus-visible,
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:is([class~="flex"], [class~="text-left"]):not(.btn):focus-visible {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(button, a).w-full:is(.flex, .text-left):not(.btn):focus-visible {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: -2px;
 }
@@ -176,7 +182,7 @@ html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-option-di
 }
 
 /* rows upstream builds as clickable divs (the users table's group replacement menu) */
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) > div[class~="cursor-pointer"][class~="flex"] {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) > div.cursor-pointer.flex {
   gap: 8px;
   padding: var(--ui-menu-row-y) var(--ui-menu-row-x);
   font-size: var(--ui-menu-text);
@@ -184,8 +190,8 @@ html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [cl
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) > div[class~="cursor-pointer"][class~="flex"]:hover,
-html.flat-theme.dark :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) > div[class~="cursor-pointer"][class~="flex"]:hover {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) > div.cursor-pointer.flex:hover,
+html.flat-theme.dark :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) > div.cursor-pointer.flex:hover {
   background-color: rgb(var(--ui-subtle));
   color: rgb(var(--ui-ink));
 }
@@ -193,7 +199,7 @@ html.flat-theme.dark :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"]
 /* 1.3 Glyphs: 14px, drawn in the row's colour (upstream's decorative icon hues fold into it; a danger row's glyph is
    danger). A check mark on the current choice is the accent. */
 html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .select-dropdown .select-option, .action-menu-content :is(button, a), [data-ui="menu-item"], .account-tools-menu-item) > svg,
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"]:not(.btn) > svg {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(button, a).w-full:not(.btn) > svg {
   width: var(--ui-menu-glyph);
   height: var(--ui-menu-glyph);
   flex-shrink: 0;
@@ -204,7 +210,7 @@ html.flat-theme :is(.dropdown-item, .select-dropdown-portal .select-option, .sel
 }
 
 html.flat-theme :is(.dropdown, .select-dropdown-portal, .select-dropdown, .action-menu-content, [data-ui="menu"], .account-tools-menu-item) svg[class*="text-primary-"],
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(button, a)[class~="w-full"] svg[class*="text-primary-"] {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(button, a).w-full svg[class*="text-primary-"] {
   color: var(--ui-link);
 }
 
@@ -212,7 +218,7 @@ html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [cl
    ModelPicker's group rows; separators are the structural line with 4px around. */
 html.flat-theme [data-ui="menu-label"],
 html.flat-theme :is(.select-dropdown-portal, .select-dropdown) .select-option-group:not(.dropdown-item),
-html.flat-theme :is(div, nav, ul)[class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]) :is(div, span, p)[class~="uppercase"]:is([class~="text-xs"], [class~="text-[10px]"], [class~="text-[11px]"]):not(button *) {
+html.flat-theme :is(div, nav, ul).bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl) :is(div, span, p).uppercase:is(.text-xs, .text-\[10px\], .text-\[11px\]):not(button *) {
   font: var(--ui-label-font);
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
@@ -348,62 +354,63 @@ html.flat-theme .account-tools-menu-item .account-tools-menu-icon svg {
   height: 13px;
 }
 
-/* Perf pass: the panel is hooked ([data-ui="account-tools-panel"], AccountsView.vue) and the :has() sits in the
-   subject with a sibling argument (the group-title row is the container whose next siblings are items). */
-html.flat-theme [data-ui="account-tools-panel"] > div[class~="px-2"][class~="py-2"]:has(~ .account-tools-menu-item) {
+/* Perf pass: the panel is hooked ([data-ui="account-tools-panel"], AccountsView.vue; the only fixed panel that holds
+   .account-tools-menu-item rows), so its group titles (panel > scroller > title) need no has-test; the repeated
+   [data-ui] and :not(uipad) keep the original 0,5,5. */
+html.flat-theme div[data-ui~="account-tools-panel"][data-ui] > div > div.px-2.py-2:not(uipad) {
   padding: 8px var(--ui-menu-row-x) 4px;
 }
 
 /* 1.8 The user menu's identity block, the mobile balance and the contact row */
-html.flat-theme .dropdown > div[class~="border-b"]:first-child {
+html.flat-theme .dropdown > div.border-b:first-child {
   padding: 10px var(--ui-menu-row-x);
 }
 
-html.flat-theme .dropdown > div[class~="border-b"]:first-child > :first-child,
-html.flat-theme.dark .dropdown > div[class~="border-b"]:first-child > :first-child {
+html.flat-theme .dropdown > div.border-b:first-child > :first-child,
+html.flat-theme.dark .dropdown > div.border-b:first-child > :first-child {
   font-size: 13px;
   line-height: 19.5px;
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme .dropdown > div[class~="border-b"]:first-child > :nth-child(2),
-html.flat-theme.dark .dropdown > div[class~="border-b"]:first-child > :nth-child(2) {
+html.flat-theme .dropdown > div.border-b:first-child > :nth-child(2),
+html.flat-theme.dark .dropdown > div.border-b:first-child > :nth-child(2) {
   font-size: 12px;
   line-height: 18px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme .dropdown > div:is([class~="border-t"], [class~="border-b"]),
-html.flat-theme.dark .dropdown > div:is([class~="border-t"], [class~="border-b"]) {
+html.flat-theme .dropdown > div:is(.border-t, .border-b),
+html.flat-theme.dark .dropdown > div:is(.border-t, .border-b) {
   border-color: rgb(var(--ui-line));
 }
 
-html.flat-theme .dropdown > div[class~="py-1"] {
+html.flat-theme .dropdown > div.py-1 {
   padding-top: var(--ui-menu-inset);
   padding-bottom: var(--ui-menu-inset);
 }
 
-html.flat-theme .dropdown > div[class~="border-t"][class~="px-4"],
-html.flat-theme .dropdown > div[class~="border-b"][class~="px-4"]:not(:first-child) {
+html.flat-theme .dropdown > div.border-t.px-4,
+html.flat-theme .dropdown > div.border-b.px-4:not(:first-child) {
   padding: 8px var(--ui-menu-row-x);
 }
 
-html.flat-theme .dropdown > div[class~="border-t"][class~="px-4"] > div,
-html.flat-theme.dark .dropdown > div[class~="border-t"][class~="px-4"] > div {
+html.flat-theme .dropdown > div.border-t.px-4 > div,
+html.flat-theme.dark .dropdown > div.border-t.px-4 > div {
   gap: 8px;
   font-size: 12px;
   line-height: 18px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme .dropdown > div[class~="border-t"][class~="px-4"] > div > svg {
+html.flat-theme .dropdown > div.border-t.px-4 > div > svg {
   width: var(--ui-menu-glyph);
   height: var(--ui-menu-glyph);
 }
 
-html.flat-theme .dropdown > div[class~="border-t"][class~="px-4"] > div > span:last-child,
-html.flat-theme.dark .dropdown > div[class~="border-t"][class~="px-4"] > div > span:last-child {
+html.flat-theme .dropdown > div.border-t.px-4 > div > span:last-child,
+html.flat-theme.dark .dropdown > div.border-t.px-4 > div > span:last-child {
   font-family: var(--ui-font-mono);
   font-weight: 400;
   color: rgb(var(--ui-ink-soft));
@@ -416,8 +423,8 @@ html.flat-theme.dark .dropdown > div[class~="border-t"][class~="px-4"] > div > s
    theme they are the dark surface with the same outline. Covered: HelpTooltip, InfoPopover, the usage table's cost
    and token cards, the hover tips of the accounts / users / groups / account-form templates. Opening, placement and
    hover logic are untouched. */
-html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface),
-html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"], [class~="shadow-lg"], [class~="shadow-xl"]):not(button, a) {
+html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div.fixed.pointer-events-none > .theme-dark-surface),
+html.flat-theme :is(div, span).text-white:is(.bg-gray-900, .bg-gray-800):is(.absolute, .fixed, .shadow-lg, .shadow-xl):not(button, a) {
   border: 1px solid rgb(var(--ui-line-strong));
   border-radius: var(--ui-radius-md);
   background-color: rgb(var(--ui-surface));
@@ -483,8 +490,8 @@ html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [
 
 /* the dark theme: the dark surface and outline; the variables above resolve to the dark roles by themselves, except
    the accent text, which is the mint there */
-html.flat-theme.dark :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface),
-html.flat-theme.dark :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"], [class~="shadow-lg"], [class~="shadow-xl"]):not(button, a) {
+html.flat-theme.dark :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div.fixed.pointer-events-none > .theme-dark-surface),
+html.flat-theme.dark :is(div, span).text-white:is(.bg-gray-900, .bg-gray-800):is(.absolute, .fixed, .shadow-lg, .shadow-xl):not(button, a) {
   border-color: rgb(var(--ui-line-strong));
   background-color: rgb(var(--ui-surface));
   --theme-text-primary-100: 182 247 200;
@@ -497,38 +504,38 @@ html.flat-theme.dark :is(div, span)[class~="text-white"]:is([class~="bg-gray-900
 }
 
 /* 2.2 Insets: the bubble's 6/10 for one-line tips, the breakdown's 8/12 for paragraphs and cards (p-3 boxes). */
-html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"]):not(button, a) {
+html.flat-theme :is(div, span).text-white:is(.bg-gray-900, .bg-gray-800):is(.absolute, .fixed):not(button, a) {
   padding: 6px 10px;
 }
 
-html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface, div[class~="text-white"][class~="bg-gray-900"][class~="p-3"]),
-html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"]):is([class~="w-72"], [class~="w-80"], [class~="w-56"], [class~="min-w-[200px]"], [class~="min-w-[220px]"]):not(button, a) {
+html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"], div.fixed.pointer-events-none > .theme-dark-surface, div.text-white.bg-gray-900.p-3),
+html.flat-theme :is(div, span).text-white:is(.bg-gray-900, .bg-gray-800):is(.absolute, .fixed):is(.w-72, .w-80, .w-56, .min-w-\[200px\], .min-w-\[220px\]):not(button, a) {
   padding: 8px 12px;
 }
 
 /* titles and emphasis inside a tip are ink (the bubble's 12/16 500 title) */
-html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"]) :is(strong, b, [class~="font-semibold"], [class~="font-medium"], [class~="font-bold"]) {
+html.flat-theme :is([role="tooltip"].theme-dark-surface, .theme-dark-surface[id^="info-popover-"]) :is(strong, b, .font-semibold, .font-medium, .font-bold) {
   color: rgb(var(--ui-ink));
   font-weight: 500;
 }
 
 /* 2.3 Breakdown cards (the usage table's cost and token details): the reference's MetricFigure rows, label left,
    figure right in Geist Mono tabular ink; the card's section title is its 11px uppercase divider label. */
-html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface {
+html.flat-theme div.fixed.pointer-events-none > .theme-dark-surface {
   padding: 8px 12px;
 }
 
-html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface [class~="justify-between"] > span:last-child {
+html.flat-theme div.fixed.pointer-events-none > .theme-dark-surface .justify-between > span:last-child {
   font-family: var(--ui-font-mono);
   font-variant-numeric: tabular-nums;
   font-weight: 400;
 }
 
-html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface [class~="justify-between"] > span:first-child {
+html.flat-theme div.fixed.pointer-events-none > .theme-dark-surface .justify-between > span:first-child {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface div[class~="font-semibold"][class~="mb-1"] {
+html.flat-theme div.fixed.pointer-events-none > .theme-dark-surface div.font-semibold.mb-1 {
   margin-bottom: 4px;
   font-size: 11px;
   line-height: 16.5px;
@@ -538,13 +545,13 @@ html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface :is([class~="border-t"], [class~="border-b"]) {
+html.flat-theme div.fixed.pointer-events-none > .theme-dark-surface :is(.border-t, .border-b) {
   border-color: rgb(var(--ui-line));
 }
 
 /* 2.4 Arrows: the bubble's 7px square rotated 45° on the outline colour (left -4px). Rotated squares keep their
    corner; border triangles become that square too (a triangle cannot carry an edge line). */
-html.flat-theme :is([role="tooltip"].theme-dark-surface, div[class~="text-white"][class~="bg-gray-900"][class~="p-3"]) > div[class~="absolute"][class~="rotate-45"] {
+html.flat-theme :is([role="tooltip"].theme-dark-surface, div.text-white.bg-gray-900.p-3) > div.absolute.rotate-45 {
   width: 7px;
   height: 7px;
   bottom: -4px;
@@ -555,7 +562,7 @@ html.flat-theme :is([role="tooltip"].theme-dark-surface, div[class~="text-white"
 }
 
 /* the usage cards' left-pointing arrow (mirrored by the template when the card opens to the left) */
-html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-surface > div[class~="absolute"][class~="right-full"] {
+html.flat-theme div.fixed.pointer-events-none > .theme-dark-surface > div.absolute.right-full {
   width: 7px;
   height: 7px;
   margin-right: -4px;
@@ -568,7 +575,7 @@ html.flat-theme div[class~="fixed"][class~="pointer-events-none"] > .theme-dark-
 }
 
 /* hover tips with a border triangle above (pointing up) or below (pointing down) */
-html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"]) > div[class~="absolute"][class~="border-transparent"][class~="bottom-full"] {
+html.flat-theme :is(div, span).text-white:is(.bg-gray-900, .bg-gray-800):is(.absolute, .fixed) > div.absolute.border-transparent.bottom-full {
   width: 7px;
   height: 7px;
   margin-bottom: -4px;
@@ -579,7 +586,7 @@ html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(45deg);
 }
 
-html.flat-theme :is(div, span)[class~="text-white"]:is([class~="bg-gray-900"], [class~="bg-gray-800"]):is([class~="absolute"], [class~="fixed"]) > div[class~="absolute"][class~="border-transparent"][class~="top-full"] {
+html.flat-theme :is(div, span).text-white:is(.bg-gray-900, .bg-gray-800):is(.absolute, .fixed) > div.absolute.border-transparent.top-full {
   width: 7px;
   height: 7px;
   margin-top: -4px;
@@ -604,19 +611,19 @@ html.flat-theme.dark [data-ui="help-tooltip"]:hover > svg {
 }
 
 /* HelpTooltip's close glyph (click mode) */
-html.flat-theme [role="tooltip"].theme-dark-surface > button[class~="absolute"] {
+html.flat-theme [role="tooltip"].theme-dark-surface > button.absolute {
   color: rgb(var(--ui-muted));
   border-radius: var(--ui-radius-sm);
 }
 
-html.flat-theme [role="tooltip"].theme-dark-surface > button[class~="absolute"]:hover {
+html.flat-theme [role="tooltip"].theme-dark-surface > button.absolute:hover {
   background-color: rgb(var(--ui-subtle));
   color: rgb(var(--ui-ink));
 }
 
 /* 2.6 Icon-only row actions (behaviour B2.1 places the label left of the button): the bubble's look, 12/16 500 ink. */
 @media (hover: hover) and (pointer: fine) {
-  html.flat-theme:is(.flat-theme) :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="accounts"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button[class~="flex-col"]:is(:hover, :focus-visible) > span[class~="text-xs"] {
+  html.flat-theme:is(.flat-theme) :is(.table-wrapper:is([data-table="proxies"], [data-table="keys"], [data-table="groups"], [data-table="accounts"], [data-table="users"]), :is([data-ui~="subscriptions-page"], [data-ui~="redeem-page"]) .table-wrapper) td[data-column="actions"] button.flex-col:is(:hover, :focus-visible) > span.text-xs {
     padding: 6px 10px;
     border: 1px solid rgb(var(--ui-line-strong));
     border-radius: var(--ui-radius-md);
@@ -631,7 +638,7 @@ html.flat-theme [role="tooltip"].theme-dark-surface > button[class~="absolute"]:
 
 /* 2.7 White hover cards (the usage KPI explanations, the supported-model card; the header balance card is the shell's):
    the breakdown frame, radius 6, control outline, 12/8 inset, 12px. */
-html.flat-theme :is(div, span)[class~="pointer-events-none"][class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"]):not([data-ui="header-balance"] > *) {
+html.flat-theme :is(div, span).pointer-events-none.bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl):not([data-ui="header-balance"] > *) {
   border: 1px solid rgb(var(--ui-line-strong));
   border-radius: var(--ui-radius-md);
   background-color: rgb(var(--ui-surface));
@@ -640,7 +647,7 @@ html.flat-theme :is(div, span)[class~="pointer-events-none"][class~="bg-white"]:
   line-height: 18px;
 }
 
-html.flat-theme :is(div, span)[class~="pointer-events-none"][class~="bg-white"]:is([class~="absolute"], [class~="fixed"]):is([class~="shadow-lg"], [class~="shadow-xl"])[class~="p-3"]:not([data-ui="header-balance"] > *) {
+html.flat-theme :is(div, span).pointer-events-none.bg-white:is(.absolute, .fixed):is(.shadow-lg, .shadow-xl).p-3:not([data-ui="header-balance"] > *) {
   padding: 8px 12px;
 }
 
@@ -648,9 +655,10 @@ html.flat-theme :is(div, span)[class~="pointer-events-none"][class~="bg-white"]:
 
 /* 3.1 Scrim: --scrim (ink 20% / black 60%), no blur (Modal, login modal, docs search; measured). Covers BaseDialog and
    upstream's utility-built dialogs and drawers; image lightboxes (a scrim holding an <img>) and the mobile sidebar's
-   overlay (the shell's) keep theirs. */
+   overlay (the shell's) keep theirs. Perf pass: the one lightbox (PaymentView's QR preview) is hooked
+   [data-ui="image-lightbox"] instead of found by a has-test (the :not() keeps its 0,1,0). */
 html.flat-theme .modal-overlay,
-html.flat-theme div[class~="fixed"][class~="inset-0"]:is([class~="bg-black/35"], [class~="bg-black/40"], [class~="bg-black/50"], [class~="bg-black/60"], [class~="bg-black/70"], [class~="bg-gray-950/60"], [class~="bg-gray-900/50"], [class~="bg-gray-900/60"]):not([class~="lg:hidden"], :has(> img)) {
+html.flat-theme div.fixed.inset-0:is(.bg-black\/35, .bg-black\/40, .bg-black\/50, .bg-black\/60, .bg-black\/70, .bg-gray-950\/60, .bg-gray-900\/50, .bg-gray-900\/60):not(.lg\:hidden, [data-ui~="image-lightbox"]) {
   background-color: rgb(var(--ui-scrim));
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
@@ -676,8 +684,8 @@ html.flat-theme .modal-content {
 }
 
 /* upstream's utility-built dialogs: the panel directly in (or one wrapper inside) the fixed scrim layer */
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]),
-html.flat-theme div[class~="fixed"][class~="inset-0"] > div[class~="min-h-full"] > div[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]) {
+html.flat-theme div.fixed.inset-0 > :is(div, section).bg-white:is(.shadow-xl, .shadow-2xl):not([data-ui]),
+html.flat-theme div.fixed.inset-0 > div.min-h-full > div.bg-white:is(.shadow-xl, .shadow-2xl) {
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
   background-color: rgb(var(--ui-surface));
@@ -751,23 +759,18 @@ html.flat-theme .modal-footer {
 
 /* a footer slot whose button row brings upstream's own top inset (the 分组 dialogs' pt-4) sat 16px low in a 71px
    footer: the row is the footer's content, 55px with the buttons centred like every Modal's (final review V1-16) */
-html.flat-theme .modal-footer > div[class~="flex"]:only-child:is([class~="pt-2"], [class~="pt-3"], [class~="pt-4"]) {
+html.flat-theme .modal-footer > div.flex:only-child:is(.pt-2, .pt-3, .pt-4) {
   padding-top: 0;
 }
 
 /* 3.6 The confirm dialog: message 13/21 ink-soft; its two utility buttons restated as the .btn recipes (controls'
    values: 30px, 0 12px, 13/19.5 600, radius 6, 1px edge; cancel = default, confirm = primary ink, a danger confirm
-   = destructive). */
-html.flat-theme .modal-content:has([data-ui="confirm-ok"]) {
-  --uif-confirm: 1;
-}
-
-@container style(--uif-confirm: 1) {
-  html.flat-theme .modal-content .modal-body > div > p:first-child:not([data-uipad]) {
-    font-size: 13px;
-    line-height: 21px;
-    color: rgb(var(--ui-ink-soft));
-  }
+   = destructive). Perf pass: the message box is hooked ([data-ui="confirm-body"], ConfirmDialog.vue), so no has-test
+   on .modal-content asks whether the dialog holds the confirm button; the `div` keeps the original 0,5,3. */
+html.flat-theme .modal-content .modal-body > div[data-ui~="confirm-body"] > p:first-child {
+  font-size: 13px;
+  line-height: 21px;
+  color: rgb(var(--ui-ink-soft));
 }
 
 html.flat-theme :is([data-ui="confirm-cancel"], [data-ui="confirm-ok"]) {
@@ -802,16 +805,16 @@ html.flat-theme.dark [data-ui="confirm-ok"]:hover {
   color: rgb(var(--ui-on-ink));
 }
 
-html.flat-theme [data-ui="confirm-ok"][class~="bg-red-600"],
-html.flat-theme.dark [data-ui="confirm-ok"][class~="bg-red-600"] {
+html.flat-theme [data-ui="confirm-ok"].bg-red-600,
+html.flat-theme.dark [data-ui="confirm-ok"].bg-red-600 {
   border-color: rgb(var(--ui-danger) / 0.3);
   background-color: rgb(var(--ui-surface));
   color: rgb(var(--ui-danger));
   transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui="confirm-ok"][class~="bg-red-600"]:hover,
-html.flat-theme.dark [data-ui="confirm-ok"][class~="bg-red-600"]:hover {
+html.flat-theme [data-ui="confirm-ok"].bg-red-600:hover,
+html.flat-theme.dark [data-ui="confirm-ok"].bg-red-600:hover {
   border-color: rgb(var(--ui-danger) / 0.5);
   background-color: rgb(var(--ui-danger-soft));
 }
@@ -833,8 +836,8 @@ html.flat-theme :is([data-ui="confirm-cancel"], [data-ui="confirm-ok"]):disabled
 /* 3.7 Utility-built dialogs without a header strip (TOTP, passkey, payment renewal; the ones led by an h2 take the
    Modal's parts, 3.7b): the reference's padded panel (ReadScope, login modal): title 17/600 tight ink, close 28px
    ghost glyph button (muted -> ink on the subtle fill). */
-html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > :is(h2, h3):is([class~="text-lg"], [class~="text-xl"]),
-html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > div:first-child > :is(h2, h3):is([class~="text-lg"], [class~="text-xl"]) {
+html.flat-theme div.fixed.inset-0 :is(div, section).bg-white:is(.shadow-xl, .shadow-2xl):not([data-ui]) > :is(h2, h3):is(.text-lg, .text-xl),
+html.flat-theme div.fixed.inset-0 :is(div, section).bg-white:is(.shadow-xl, .shadow-2xl):not([data-ui]) > div:first-child > :is(h2, h3):is(.text-lg, .text-xl) {
   font-size: 17px;
   line-height: 25.5px;
   font-weight: 600;
@@ -842,7 +845,7 @@ html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="top-4"] {
+html.flat-theme div.fixed.inset-0 :is(div, section).bg-white:is(.shadow-xl, .shadow-2xl):not([data-ui]) > button.absolute.top-4 {
   display: inline-grid;
   place-items: center;
   width: 28px;
@@ -853,13 +856,13 @@ html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="
   transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="top-4"]:hover,
-html.flat-theme.dark div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="top-4"]:hover {
+html.flat-theme div.fixed.inset-0 :is(div, section).bg-white:is(.shadow-xl, .shadow-2xl):not([data-ui]) > button.absolute.top-4:hover,
+html.flat-theme.dark div.fixed.inset-0 :is(div, section).bg-white:is(.shadow-xl, .shadow-2xl):not([data-ui]) > button.absolute.top-4:hover {
   background-color: rgb(var(--ui-subtle));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="bg-white"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="top-4"] svg {
+html.flat-theme div.fixed.inset-0 :is(div, section).bg-white:is(.shadow-xl, .shadow-2xl):not([data-ui]) > button.absolute.top-4 svg {
   width: 15px;
   height: 15px;
 }
@@ -870,68 +873,61 @@ html.flat-theme div[class~="fixed"][class~="inset-0"] :is(div, section)[class~="
    button the Modal's 28px framed close in that strip; the closing button row as the footer strip, 12 x 18 on the
    structural line, its small close button at the control height (55px, the Modal's footer). The h3- and icon-led ones
    (TOTP, passkey, payment renewal, the settings page's) keep 3.7 / 10b. (final review V1-01)
-   Perf pass: the panel carries --uif-h2dlg / --uif-h2close (:has() in the subject only); its parts are styled
-   under @container style() on those flags, the :has() argument's specificity kept by :not(uipad...) (never matches). */
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> h2) {
-  --uif-h2dlg: 1;
+   Perf pass: the five scrims are hooked in their templates (data-ui="h2-dlg", plus "h2-dlg-close" on the three whose
+   panel has the top-right close button; the h2 and the close button are unconditional there), so the panel and its
+   parts are plain child selectors; :where() / the repeated [data-ui] / :not(uipad) keep each rule's original
+   specificity (0,7,4 / 0,7,5 / 0,10,6 / 0,10,5 / 0,11,5 / 0,9,6 / 0,9,5 / 0,10,5). */
+html.flat-theme div:where([data-ui~="h2-dlg"]).fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]):not(uipad) {
   padding: var(--ui-dialog-body-y) var(--ui-dialog-x);
 }
 
-html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]):has(> button[class~="absolute"][class~="right-4"][class~="top-4"]) {
-  --uif-h2close: 1;
+html.flat-theme div:where([data-ui~="h2-dlg"]).fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]) > h2:not(uipad) {
+  display: flex;
+  align-items: center;
+  min-height: calc(28px + 2 * var(--ui-dialog-head-y) + 1px);
+  margin: calc(-1 * var(--ui-dialog-body-y)) calc(-1 * var(--ui-dialog-x)) var(--ui-dialog-body-y);
+  border-bottom: 1px solid rgb(var(--ui-line));
+  padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  letter-spacing: 0;
+  color: rgb(var(--ui-ink));
 }
 
-@container style(--uif-h2dlg: 1) {
-  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > h2:not(uipad) {
-    display: flex;
-    align-items: center;
-    min-height: calc(28px + 2 * var(--ui-dialog-head-y) + 1px);
-    margin: calc(-1 * var(--ui-dialog-body-y)) calc(-1 * var(--ui-dialog-x)) var(--ui-dialog-body-y);
-    border-bottom: 1px solid rgb(var(--ui-line));
-    padding: var(--ui-dialog-head-y) var(--ui-dialog-x);
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 600;
-    letter-spacing: 0;
-    color: rgb(var(--ui-ink));
-  }
-
-  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="right-4"][class~="top-4"]:not(uipad) {
-    top: var(--ui-dialog-head-y);
-    right: var(--ui-dialog-x);
-    border: 1px solid rgb(var(--ui-line));
-    background-color: rgb(var(--ui-surface));
-  }
+html.flat-theme div[data-ui~="h2-dlg-close"][data-ui][data-ui].fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]) > h2:not(uipad):not(uipad) {
+  padding-right: calc(var(--ui-dialog-x) + 36px);
+}
 
-  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="right-4"][class~="top-4"]:not(uipad):hover {
-    background-color: rgb(var(--ui-surface));
-    color: rgb(var(--ui-ink));
-  }
+html.flat-theme div:where([data-ui~="h2-dlg"]).fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]) > button.absolute.right-4.top-4:not(uipad) {
+  top: var(--ui-dialog-head-y);
+  right: var(--ui-dialog-x);
+  border: 1px solid rgb(var(--ui-line));
+  background-color: rgb(var(--ui-surface));
+}
 
-  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > button[class~="absolute"][class~="right-4"][class~="top-4"]:not(uipad):focus-visible {
-    outline: 2px solid rgb(var(--ui-focus));
-    outline-offset: 2px;
-  }
+html.flat-theme div:where([data-ui~="h2-dlg"]).fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]) > button.absolute.right-4.top-4:not(uipad):hover {
+  background-color: rgb(var(--ui-surface));
+  color: rgb(var(--ui-ink));
+}
 
-  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > form > div[class~="justify-end"]:last-child:not(uipad),
-  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > div:is([class~="justify-end"], [class~="text-right"]):last-child:not(uipad) {
-    margin: var(--ui-dialog-body-y) calc(-1 * var(--ui-dialog-x)) calc(-1 * var(--ui-dialog-body-y));
-    border-top: 1px solid rgb(var(--ui-line));
-    padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
-  }
+html.flat-theme div:where([data-ui~="h2-dlg"]).fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]) > button.absolute.right-4.top-4:not(uipad):focus-visible {
+  outline: 2px solid rgb(var(--ui-focus));
+  outline-offset: 2px;
+}
 
-  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > div[class~="text-right"]:last-child > .btn-sm:not(uipad) {
-    min-height: var(--ui-control-h);
-    padding: 0.265625rem 0.75rem;
-    font-size: 0.8125rem;
-    line-height: 1.21875rem;
-  }
+html.flat-theme div:where([data-ui~="h2-dlg"]).fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]) > form > div.justify-end:last-child:not(uipad),
+html.flat-theme div:where([data-ui~="h2-dlg"]).fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]) > div:is(.justify-end, .text-right):last-child:not(uipad) {
+  margin: var(--ui-dialog-body-y) calc(-1 * var(--ui-dialog-x)) calc(-1 * var(--ui-dialog-body-y));
+  border-top: 1px solid rgb(var(--ui-line));
+  padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
 }
 
-@container style(--uif-h2dlg: 1) and style(--uif-h2close: 1) {
-  html.flat-theme div[class~="fixed"][class~="inset-0"] > :is(div, section)[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]):not([data-ui]) > h2:not(uipad[data-uipad][data-uipad][data-uipad]):not(uipad) {
-    padding-right: calc(var(--ui-dialog-x) + 36px);
-  }
+html.flat-theme div:where([data-ui~="h2-dlg"]).fixed.inset-0 > :is(div, section).bg-white.p-6:is(.shadow-xl, .shadow-2xl):not([data-ui]) > div.text-right:last-child > .btn-sm:not(uipad) {
+  min-height: var(--ui-control-h);
+  padding: 0.265625rem 0.75rem;
+  font-size: 0.8125rem;
+  line-height: 1.21875rem;
 }
 
 /* 3.8 Motion: the scrim fades in 200ms; the panel settles on the reference's 450ms panel curve from 98% with a 160ms
@@ -1069,12 +1065,12 @@ html.flat-theme [data-ui="toast"] p {
   line-height: 19.5px;
 }
 
-html.flat-theme [data-ui="toast"] p[class~="font-semibold"] {
+html.flat-theme [data-ui="toast"] p.font-semibold {
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="toast"] p:not([class~="font-semibold"]) {
+html.flat-theme [data-ui="toast"] p:not(.font-semibold) {
   color: rgb(var(--ui-ink-soft));
 }
 
@@ -1117,12 +1113,12 @@ html.flat-theme [data-ui="toast-stack"] > [data-ui="toast"] + [data-ui="toast"]
   margin-top: 8px;
 }
 
-html.flat-theme [data-ui="toast-stack"] > [data-ui="toast"]:is([class~="translate-x-full"]) {
+html.flat-theme [data-ui="toast-stack"] > [data-ui="toast"]:is(.translate-x-full) {
   --tw-translate-x: 0px;
   --tw-translate-y: -4px;
 }
 
-html.flat-theme [data-ui="toast-stack"] > [data-ui="toast"]:is([class~="duration-300"], [class~="duration-200"]) {
+html.flat-theme [data-ui="toast-stack"] > [data-ui="toast"]:is(.duration-300, .duration-200) {
   transition-duration: var(--ui-duration-slide);
   transition-timing-function: var(--ui-ease-out);
 }
@@ -1156,8 +1152,8 @@ html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popu
 }
 
 /* the glowing gradient tiles -> the reference's 28px icon square (1px line, ink 3% fill, ink 60% glyph) */
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div)[class~="rounded-lg"][class~="bg-gradient-to-br"],
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div)[class~="rounded-xl"][class~="bg-gradient-to-br"] {
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div).rounded-lg.bg-gradient-to-br,
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div).rounded-xl.bg-gradient-to-br {
   width: 28px;
   height: 28px;
   border: 1px solid rgb(var(--ui-line));
@@ -1167,7 +1163,7 @@ html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail
   box-shadow: none;
 }
 
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div)[class~="bg-gradient-to-br"] svg {
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(div).bg-gradient-to-br svg {
   width: 15px;
   height: 15px;
 }
@@ -1189,7 +1185,7 @@ html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popu
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(p, time, div[class~="text-sm"]) {
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child :is(p, time, div.text-sm) {
   font-size: 12px;
   line-height: 18px;
   color: rgb(var(--ui-muted));
@@ -1201,14 +1197,14 @@ html.flat-theme.dark [data-ui="announcement-list"] > div:first-child p > span {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child svg[class~="h-4"] {
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:first-child svg.h-4 {
   width: 13px;
   height: 13px;
 }
 
 /* chips: "unread" and the category label become the reference's small mono pills; pulsing rings stop (the text says
    it) */
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is([class~="bg-gradient-to-r"], [class~="bg-blue-100"]) {
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is(.bg-gradient-to-r, .bg-blue-100) {
   gap: 5px;
   padding: 1px 6px;
   border-radius: 9999px;
@@ -1222,23 +1218,26 @@ html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail
   box-shadow: none;
 }
 
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span[class~="bg-blue-100"]:not(:has(> span)) {
+/* (perf pass: the tinted chip without a dot is the detail panel's type chip; the list's unread chip, the only other
+   bg-blue-100 span there, always holds its dot and is the inline-flex one, so :not(:where(inline-flex)) replaces the
+   "holds no span" test; :not(uipad) keeps the original 0,0,1 of that part) */
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span.bg-blue-100:not(:where(.inline-flex)):not(uipad) {
   background: rgb(var(--ui-subtle));
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is([class~="bg-gradient-to-r"], [class~="bg-blue-100"]) > span[class~="relative"] {
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is(.bg-gradient-to-r, .bg-blue-100) > span.relative {
   width: 6px;
   height: 6px;
 }
 
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is([class~="bg-gradient-to-r"], [class~="bg-blue-100"]) > span[class~="relative"] > span {
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) span:is(.bg-gradient-to-r, .bg-blue-100) > span.relative > span {
   width: 6px;
   height: 6px;
   background: currentColor;
 }
 
-html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) [class~="animate-ping"] {
+html.flat-theme :is([data-ui="announcement-list"], [data-ui="announcement-detail"], [data-ui="announcement-popup"]) .animate-ping {
   display: none;
 }
 
@@ -1287,7 +1286,7 @@ html.flat-theme [data-ui="announcement-list"] > div:first-child button:not(:last
 
 /* list rows: a 1px structural separator, 12/18 inset, hover = the table row hover; the unread bar and glowing tile
    give way to an accent status dot tile */
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group {
   gap: 12px;
   min-height: 0 !important;
   padding: 12px var(--ui-dialog-x);
@@ -1296,21 +1295,21 @@ html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[cla
   cursor: pointer;
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"]:hover,
-html.flat-theme.dark [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"]:hover {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group:hover,
+html.flat-theme.dark [data-ui="announcement-list"] > div:nth-child(2) > div > div.group:hover {
   background: rgb(var(--ui-hover));
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div[class~="absolute"] {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group > div.absolute {
   display: none;
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:first-child {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group > div:first-child {
   width: 28px;
   height: 28px;
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:first-child > div {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group > div:first-child > div {
   width: 28px;
   height: 28px;
   border: 1px solid rgb(var(--ui-line));
@@ -1320,39 +1319,39 @@ html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[cla
   box-shadow: none;
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:first-child > div[class~="bg-gradient-to-br"] {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group > div:first-child > div.bg-gradient-to-br {
   border-color: rgb(var(--ui-primary) / 0.4);
   background: rgb(var(--ui-primary-soft));
   color: var(--ui-link);
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:first-child svg {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group > div:first-child svg {
   width: 15px;
   height: 15px;
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] h3 {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group h3 {
   font-size: 13px;
   line-height: 19.5px;
   font-weight: 500;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] time {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group time {
   font-family: var(--ui-font-mono);
   font-size: 11px;
   line-height: 16.5px;
   color: rgb(var(--ui-faint));
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div[class~="group"] > div:nth-child(2) > div:last-child svg {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div > div.group > div:nth-child(2) > div:last-child svg {
   width: 14px;
   height: 14px;
   color: rgb(var(--ui-faint));
 }
 
 /* the empty and loading states: the reference's empty state (14/500 ink-soft, 13 muted), neutral glyph */
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > div[class~="relative"] > div:first-child {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div.flex-col > div.relative > div:first-child {
   width: 40px;
   height: 40px;
   border: 1px solid rgb(var(--ui-line));
@@ -1360,27 +1359,27 @@ html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="f
   background: rgb(var(--ui-subtle));
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > div[class~="relative"] > div:first-child svg {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div.flex-col > div.relative > div:first-child svg {
   width: 18px;
   height: 18px;
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > div[class~="relative"] > div:last-child {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div.flex-col > div.relative > div:last-child {
   display: none;
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > p:first-of-type {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div.flex-col > p:first-of-type {
   font-size: 14px;
   font-weight: 500;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div[class~="flex-col"] > p + p {
+html.flat-theme [data-ui="announcement-list"] > div:nth-child(2) > div.flex-col > p + p {
   font-size: 13px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui="announcement-list"] div[class~="animate-spin"][class~="rounded-full"] {
+html.flat-theme [data-ui="announcement-list"] div.animate-spin.rounded-full {
   width: 20px;
   height: 20px;
   border-width: 2px;
@@ -1388,7 +1387,7 @@ html.flat-theme [data-ui="announcement-list"] div[class~="animate-spin"][class~=
   border-top-color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="announcement-list"] div[class~="animate-pulse"][class~="rounded-full"] {
+html.flat-theme [data-ui="announcement-list"] div.animate-pulse.rounded-full {
   display: none;
 }
 
@@ -1398,11 +1397,11 @@ html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popu
   background: rgb(var(--ui-surface));
 }
 
-html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:nth-child(2) > div > div[class~="absolute"] {
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:nth-child(2) > div > div.absolute {
   display: none;
 }
 
-html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:nth-child(2) > div > div[class~="pl-6"] {
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:nth-child(2) > div > div.pl-6 {
   padding-left: 0;
 }
 
@@ -1413,12 +1412,12 @@ html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popu
   background: rgb(var(--ui-surface));
 }
 
-html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child div[class~="text-xs"] {
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child div.text-xs {
   font-size: 12px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child div[class~="text-xs"] svg {
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child div.text-xs svg {
   width: 13px;
   height: 13px;
 }
@@ -1447,8 +1446,8 @@ html.flat-theme.dark :is([data-ui="announcement-detail"], [data-ui="announcement
   box-shadow: none;
 }
 
-html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:is([class~="bg-gradient-to-r"]),
-html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:is([class~="bg-gradient-to-r"]):hover {
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:is(.bg-gradient-to-r),
+html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:is(.bg-gradient-to-r):hover {
   border-color: rgb(var(--ui-ink));
   background: rgb(var(--ui-ink));
   color: rgb(var(--ui-on-ink));
@@ -1825,7 +1824,7 @@ html.flat-theme .driver-active-element {
    (系统设置 · 功能开关 「+ 添加专属用户」: scrim at y = 12). A fixed overlay takes no stack margin. The doubled classes
    (0,7,2) outrank Tailwind's space-y (0,3,0) and the page files' stack rhythm rules (0,5,2), which load later.
    (wave 2, reported by the settings agent) */
-html.flat-theme [class*="space-y-"] > div[class~="fixed"][class~="fixed"][class~="inset-0"][class~="inset-0"]:not([hidden]) {
+html.flat-theme [class*="space-y-"] > div.fixed.fixed.inset-0.inset-0:not([hidden]) {
   margin-top: 0;
 }
 /* END S scrim margin */
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
index dd36d58d5e55..c49ebe4131c0 100644
--- a/frontend/src/styles/console/pages/dashboard-usage.css
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -24,8 +24,13 @@
  *   data-ui="platform-breakdown" the 按平台拆分 card of components/user/dashboard/UserDashboardStats.vue
  *   data-ui="records-card"      the table card of components/admin/usage/UsageTable.vue and
  *                               components/user/UserErrorRequestsTable.vue
- * Performance (ui-el PERF.md): no :has() in a non-subject position; the :has() left are in the subject compound of a
- * hooked anchor, with child / sibling arguments (the open and focus states of the pills, the pagination join).
+ * Performance (ui-el PERF.md): every data-ui hook here is static (never bound to data). The relational pseudo-class
+ * (has()) is left only for states that live in another component or in data: a Select's or the DateRangePicker's open
+ * menu, their keyboard focus and a search field's focus inside a pill (section 3), and whether the error list's
+ * pagination is rendered (section 7). Those sit in the subject compound of a hooked element (range-pill, select-anchor,
+ * records-card) or of the search box's own class, with child / sibling arguments. Every rewritten selector keeps the weight it replaced: a hook that has to
+ * weigh nothing is wrapped in :where(), missing weight is added by a pad that never filters anything (:not(uipad) =
+ * 0,0,1, :not([data-uipad]) = 0,1,0).
  * Shared components (KPI tiles, chart cards, DataTable, badges, pagination, menus, tooltips) keep the shared files' look;
  * the rules here only place them and restate what is specific to these pages. */
 
@@ -45,7 +50,7 @@ html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-
 
 /* Upstream frames 「时间范围 / 刷新 / 粒度」 in a card. The reference's /logs toolbar is a row on the canvas: its controls,
    8px apart, 8px above and below, a 1px structural line underneath (REF §7.1 "py-2 + 底线", crop logs-toolbar). */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) {
   padding: 8px 0;
   border: 0;
   border-bottom: 1px solid rgb(var(--ui-line));
@@ -54,7 +59,7 @@ html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-
   box-shadow: none;
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div {
   gap: 8px;
 }
 
@@ -64,7 +69,7 @@ html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-
    6, the control outline on the surface) holding the field label as its mono label (REF §5 .mono-label, --ui-label)
    and then the value, so a filter row is one line of 30px controls instead of labels stacked over 34px fields.
    The pills: the time range and the granularity, the admin filter strip (UsageFilters), the user usage filters. */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"],
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div[class~="items-center"][class~="gap-2"],
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div,
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div {
   position: relative;
@@ -81,7 +86,7 @@ html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~=
 }
 
 /* the label: the mono label at the KPI labels' weight, on one line */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"] > span:first-child,
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div[class~="items-center"][class~="gap-2"] > span:first-child,
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > label,
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div > label {
   flex: none;
@@ -97,15 +102,15 @@ html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~=
 }
 
 /* the value: the Select / DateRangePicker trigger or the search field, drawn inside the pill (28px, no edge of its own) */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"] > div,
-html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"] > div[class~="relative"],
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div[class~="items-center"][class~="gap-2"] > div,
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div[data-ui~="select-anchor"] > div[class~="relative"],
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div > div[class~="relative"] {
   flex: 1 1 auto;
   width: auto;
   min-width: 0;
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger),
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger),
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div .select-trigger.select-trigger,
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div .select-trigger.select-trigger {
   width: 100%;
@@ -133,27 +138,30 @@ html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > i
 }
 
 /* states: hover and an open menu take the focus line (the reference's house-select); keyboard focus on a trigger and any
-   focus in a text field take the accent edge 2px wide (the fields' focus, controls.css 3.1) */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"]:hover,
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="range-pill"]:has(> div > .date-picker-trigger-open),
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="select-anchor"]:has(> div > div > .select-trigger-open),
+   focus in a text field take the accent edge 2px wide (the fields' focus, controls.css 3.1). The time bar's accent edge
+   is the range pill's only (its picker's trigger; the granularity pill's Select sits one box deeper and its keyboard
+   focus never took the edge in the approved build). An open menu and a focus inside a pill are states of the Select /
+   DateRangePicker components, which no template condition here carries: these stay relational, on the hooked pill,
+   with child arguments. */
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div[class~="items-center"][class~="gap-2"]:hover,
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div:where([class~="items-center"][class~="gap-2"])[data-ui~="range-pill"]:not([data-uipad]):has(> * > .date-picker-trigger-open),
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div:where([class~="items-center"][class~="gap-2"])[data-ui~="select-anchor"]:not([data-uipad]):has(> * > * > .select-trigger-open),
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div:hover,
-html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"]:has(> div > .select-trigger-open),
+html.flat-theme [data-ui="usage-filters"] > div > div:where([class~="flex-1"]) > div[data-ui~="select-anchor"]:has(> * > .select-trigger-open),
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div:hover,
-html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"]:has(> div > .select-trigger-open) {
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div:where([class~="flex-1"]) > div[data-ui~="select-anchor"]:has(> * > .select-trigger-open) {
   border-color: rgb(var(--ui-line-focus));
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="range-pill"]:has(> div > .date-picker-trigger:focus-visible),
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="select-anchor"]:has(> div > div > .select-trigger:focus-visible),
-html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > .usage-filter-dropdown:has(> input:focus),
-html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"]:has(> div > .select-trigger:focus-visible),
-html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > [data-ui~="select-anchor"]:has(> div > .select-trigger:focus-visible) {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div:where([class~="items-center"][class~="gap-2"])[data-ui~="range-pill"]:not(uipad[data-uipad]):has(> * > .date-picker-trigger:focus-visible),
+html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div.usage-filter-dropdown:has(> input:focus),
+html.flat-theme [data-ui="usage-filters"] > div > div:where([class~="flex-1"]) > div[data-ui~="select-anchor"]:has(> div > .select-trigger:focus-visible),
+html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div:where([class~="flex-1"]) > div[data-ui~="select-anchor"]:has(> div > .select-trigger:focus-visible) {
   border-color: rgb(var(--ui-focus));
   box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger, .date-picker-trigger):focus-visible,
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div[class~="items-center"][class~="gap-2"] :is(.select-trigger, .date-picker-trigger):focus-visible,
 html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div :is(.select-trigger, input):focus,
 html.flat-theme [data-ui="user-usage"] > .card[class~="p-6"] > div > div[class~="flex-1"] > div .select-trigger:focus-visible {
   border-color: transparent;
@@ -186,11 +194,11 @@ html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > b
    edge): the time range's panel takes the pill as its positioning box (the picker's own wrapper steps aside), flush
    with the pill's outer left edge and 4px under it (final review V1-02). The Select lists anchor to the pill through
    data-ui~="select-anchor" (components/common/Select.vue, theme on only). */
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="range-pill"] > div[class~="relative"] {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div[class~="items-center"][class~="gap-2"][data-ui~="range-pill"] > div[class~="relative"] {
   position: static;
 }
 
-html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"] > div > [data-ui~="range-pill"] > div[class~="relative"] > .date-picker-dropdown {
+html.flat-theme :is([data-ui="admin-dashboard"], [data-ui="admin-usage"], [data-ui="user-dashboard"], [data-ui="user-usage"]) .card[class~="p-4"][data-ui~="time-bar"]:not(uipad[data-uipad]):not(uipad) > div > div[class~="items-center"][class~="gap-2"][data-ui~="range-pill"] > div[class~="relative"] > .date-picker-dropdown {
   top: calc(100% + 5px);
   left: -1px;
   margin-top: 0;
@@ -271,7 +279,7 @@ html.flat-theme [data-ui="usage-filters"] > div > div[class~="flex-1"] > div > d
    a one-line option card (the reference's dialog option card, REF §8.11: radius 8, 1px structural line, the subtle fill
    at 60 %, the control outline on hover; a 26px neutral icon square) with its title and description side by side and
    the chevron. Nothing is dropped; the description wraps under the title only where the row is too narrow. */
-html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] {
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:not(uipad[data-uipad][data-uipad]) {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -280,11 +288,11 @@ html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] {
   padding: 7px 7px 7px 14px;
 }
 
-html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > div:first-child {
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:not(uipad[data-uipad][data-uipad]) > div:first-child {
   margin: 0;
 }
 
-html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > div:first-child > h2 {
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:not(uipad[data-uipad][data-uipad]) > div:first-child > h2 {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   line-height: var(--ui-label-leading);
@@ -295,7 +303,7 @@ html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > div:first-ch
   color: rgb(var(--ui-label));
 }
 
-html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"] > [class~="grid"] {
+html.flat-theme [data-ui="admin-dashboard"] > .card[class~="p-4"]:not(uipad[data-uipad][data-uipad]) > [class~="grid"] {
   display: flex;
   flex: 1 1 auto;
   flex-wrap: wrap;
@@ -336,26 +344,26 @@ html.flat-theme [data-ui="user-dashboard"] .card[class~="relative"][class~="over
 
 /* The card's head: the tab row (controls.css 7.3 underline tabs) set 6px in, so the first tab's text lines up with the
    table's 16px edge; the strip under it is section 4's. */
-html.flat-theme [data-ui="admin-usage"] > .card[data-ui~="usage-records"] > div:first-child {
+html.flat-theme [data-ui="admin-usage"] > .card[data-ui~="usage-records"]:not(uipad):not(uipad) > div:first-child {
   padding: 0 6px;
   border-bottom-color: rgb(var(--ui-line));
 }
 
 /* The IP-location bar above a table (UsageTable's own, IpGeoBatchToolbar in the error list): 6 / 16, the count 12px
    muted, the batch action a link-weight accent text button (REF §8.12 tray links: 12.5 / 600, underline on hover). */
-html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"] {
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:not(uipad[data-uipad][data-uipad]) {
   gap: 12px;
   padding: 6px 16px;
   border-bottom-color: rgb(var(--ui-line));
 }
 
-html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"] > span {
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:not(uipad[data-uipad][data-uipad]) > span {
   font-size: 12px;
   line-height: 18px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"] > button {
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:not(uipad[data-uipad][data-uipad]) > button {
   padding: 2px 0;
   border-radius: var(--ui-radius-sm);
   background-color: transparent;
@@ -365,7 +373,7 @@ html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~=
   color: var(--ui-link);
 }
 
-html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"] > button:hover:not(:disabled) {
+html.flat-theme :is([data-ui="admin-usage"], [data-ui="user-usage"]) div[class~="justify-end"][class~="border-b"]:not(uipad[data-uipad][data-uipad]) > button:hover:not(:disabled) {
   background-color: transparent;
   text-decoration: underline;
   text-underline-offset: 2px;
@@ -454,18 +462,18 @@ html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="tokens"],
    and its table in the reference's table language (data.css section 3 gives the mono header): cells 10 / 12 (16 at the
    edges), 42px rows, hover fill; figures Geist Mono ink-soft, the total and the cost ink (decision 2: the cost is not
    green); the top three ranks a neutral disc, the sorted column's label a step darker with its arrow (not the accent). */
-html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="border-b"] {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"]:not(uipad[data-uipad]):not(uipad):not(uipad) > div[class~="border-b"] {
   padding: 6px 16px;
   border-bottom-color: rgb(var(--ui-line));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="border-b"] :is(p, span)[class~="text-xs"] {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"]:not(uipad[data-uipad]):not(uipad):not(uipad) > div[class~="border-b"] :is(p, span)[class~="text-xs"] {
   font-size: 12px;
   line-height: 18px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"] > div[class~="border-b"] .select-trigger.select-trigger {
+html.flat-theme [data-ui="admin-usage"] div[data-ui~="token-ranking"]:not(uipad[data-uipad]):not(uipad):not(uipad) > div[class~="border-b"] .select-trigger.select-trigger {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
@@ -761,12 +769,12 @@ html.flat-theme [data-ui="user-dashboard"] [class~="lg:col-span-1"] .card > div[
 
 /* 用量明细 / 错误请求: upstream's .tab buttons over a 1px line read as the reference's underline tabs (CodeTabs, REF §8.15:
    the current tab ink with a 2px accent rule; the others muted, ink on hover), as on the admin records card. */
-html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] {
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:not(uipad[data-uipad]) {
   gap: 0;
   border-color: rgb(var(--ui-line));
 }
 
-html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] > button.tab {
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:not(uipad[data-uipad]) > button.tab {
   margin-bottom: -1px;
   padding: 0.5rem 0.625rem;
   border-bottom: 2px solid transparent;
@@ -775,34 +783,32 @@ html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] > button.tab {
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] > button.tab:hover {
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:not(uipad[data-uipad]) > button.tab:hover {
   background-color: transparent;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="user-usage"] > div[class~="border-b"] > button.tab.tab-active {
+html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:not(uipad[data-uipad]) > button.tab.tab-active {
   border-bottom-color: rgb(var(--ui-focus));
   background-color: transparent;
   color: rgb(var(--ui-ink));
 }
 
 /* The pagination under the records card is the card's footer (as data.css joins them on the table pages): the card
-   loses its bottom corners, the pagination takes the card's edge and the bottom corners — on BOTH tabs of the user page
-   (用量明细 and 错误请求: the error card carries the same hook, and the baseline join claims it too). The hook alone is
-   not enough for the margin: the pages' own `.space-y-6 > * ~ *` (0,5,1, dashboard-usage.css:36) carries the 12px
-   rhythm, so the margin rule has to keep the old `:has(> .table-wrapper) + div` weight — the extra attribute keeps
-   0,7,1 / 0,6,2 as it was (perf pass: the doubled attribute is deliberate, never matches twice). PERF.md: no `:has()`
-   in a non-subject position, so where the old rule put one above what it styled, the card's own
-   `[class~="overflow-hidden"]` (the records card is the only `.card` that has it and holds a table; the error card has
-   it too) carries the same weight the `:has(> .table-wrapper)` anchor did. */
-html.flat-theme [data-ui="user-usage"] > .card[class~="overflow-hidden"]:has(+ [data-ui="pagination"]),
-html.flat-theme [data-ui="user-usage"] .card[class~="overflow-hidden"]:has(+ div > [data-ui="pagination"]) {
+   loses its bottom corners, the pagination takes the card's edge and the bottom corners, on both tabs of the user page.
+   用量明细: the records card (UsageTable, records-card) is followed by nothing but its pagination (v-if total > 0), so
+   :not(:last-child) is "the pagination follows". 错误请求: the card sits in UserErrorRequestsTable with the pagination
+   (v-if total > 0) in the next box, so the hooked card tests that sibling (subject position). The weights are
+   the approved ones (0,6,1 / 0,5,2 for the corners, 0,7,1 / 0,5,2 for the pagination's edge: above the pages' 12px
+   rhythm, 0,5,1). */
+html.flat-theme [data-ui="user-usage"] > .card[data-ui~="records-card"]:not(:last-child):not([data-uipad]),
+html.flat-theme [data-ui="user-usage"] .card[data-ui~="records-card"]:has(+ div > [data-ui="pagination"]) {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
 
 html.flat-theme [data-ui="user-usage"] > .card[data-ui~="records-card"][data-ui~="records-card"] + [data-ui="pagination"]:not([hidden]),
-html.flat-theme [data-ui="user-usage"] .card[data-ui~="records-card"][data-ui~="records-card"] + div > [data-ui="pagination"] {
+html.flat-theme [data-ui="user-usage"] .card[data-ui~="records-card"] + div > [data-ui="pagination"] {
   margin-top: 0;
   border: 1px solid rgb(var(--ui-line));
   border-top-width: 0;
diff --git a/frontend/src/styles/console/pages/ops-channels.css b/frontend/src/styles/console/pages/ops-channels.css
index b9e255fb9f5a..0d4186418dc1 100644
--- a/frontend/src/styles/console/pages/ops-channels.css
+++ b/frontend/src/styles/console/pages/ops-channels.css
@@ -11,6 +11,12 @@
  *   data-ui="ops-header"         views/admin/ops/components/OpsDashboardHeader.vue     the header card (toolbar, KPI)
  *   data-ui="ops-chart"          the five chart cards' roots (OpsSwitchRateTrendChart, OpsThroughputTrendChart,
  *                                OpsLatencyChart, OpsErrorDistributionChart, OpsErrorTrendChart)
+ *   data-ui="ops-kv-grid"        the ops dialogs' key-value grids (OpsErrorDetailModal.vue:16, OpsAlertEventsCard.vue:608)
+ *   data-ui="ops-kpi-tile"       the header's six metric tiles (OpsDashboardHeader.vue 1214, 1250, 1281, 1332, 1383, 1409)
+ *   data-ui="ops-sys-tile"       the header's six system tiles (OpsDashboardHeader.vue 1440, 1454, 1472, 1489, 1505, 1524)
+ *   data-ui="log-table"          the scroll box of the risk-control log table (RiskControlView.vue:283) and of the prompt
+ *                                audit events table (features/prompt-audit/components/EventWorkspace.vue:59)
+ *   data-ui="audit-filter"       each labelled filter of the audit log toolbar (AuditLogView.vue 10, 28, 33, 38, 43, 48, 53, 58)
  *   the ops dialogs' bodies §4; the table pages' roots §5; /monitor §6; orders §7; risk control §8; prompt audit §9
  *   (each section's head lists its hooks and files). Identity / category opt-ins (data.css §6.4) sit on the elements
  *   upstream colours by platform or category: ChannelsView.vue, ChannelMonitorView.vue (§5), MonitorFormDialog.vue and
@@ -20,10 +26,15 @@
  * Shared components (Select, buttons, DataTable, badges, pagination, menus, tooltips, dialogs) keep the shared files'
  * look; the rules here restyle what upstream draws with utilities on these pages and place things.
  *
- * Re-style cost (PERF.md): no :has() outside a selector's subject compound. Where a rule would style the descendants
- * of an element picked by :has(), that element carries a hook (above and in each section's head) or the state is
- * passed down as a custom property; the :has() left sit in the subject compound of an anchor under a hooked root,
- * with child arguments. */
+ * Re-style cost (PERF.md): every data-ui hook here is static (never bound to data). The relational pseudo-class
+ * (has()) is left only where the state lives in data or in another component and no static hook can carry it, each in
+ * the subject compound of a statically hooked anchor with child arguments: the alert tiles (2.3: a tile whose figure is
+ * in the danger / warning colour), the empty hand-built tables (3.3a: a table showing its single loading / empty row),
+ * the channel monitor's V1 page (5.x: the page holding the table layout) and the audit filter pills (5.4: an open
+ * Select menu, a focus inside the pill). Every other element picked by what it contains carries a static hook or is
+ * found by its own classes or position. Rewritten selectors keep the weight they replaced: a hook that has to weigh
+ * nothing is wrapped in :where(), missing weight is added by a pad that never filters anything (:not(uipad) = 0,0,1,
+ * :not([data-uipad]) = 0,1,0); the dashboard root's element type stands for the header's former h1 argument. */
 
 /* ================================================================== 1 · ops monitoring: rhythm */
 
@@ -50,7 +61,7 @@ html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] {
 /* Upstream frames the toolbar, the health / realtime panel, the six metric cards and the six system cards in one big
    card. The reference's /logs page has no such frame: a toolbar row on the canvas (its controls, 8px under a 1px
    structural line), a row of KPI tiles, then the cards (REF §7.1, crops logs-toolbar, kpi-row). */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) {
   gap: var(--ui-shell-gap, 12px);
   padding: 0;
   border-radius: 0;
@@ -59,7 +70,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 }
 
 /* 2.1 toolbar row */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child {
   gap: 8px 12px;
   padding-bottom: 12px;
   border-bottom-color: rgb(var(--ui-line));
@@ -68,7 +79,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 /* The page title is the header row's (AppHeader: 「运维监控 · 运维监控与排障」, shown from 1024px); there the page's own h1
    stays for screen readers only. Fullscreen has no header row: its title is the page title (REF §5: 20/600). */
 @media (min-width: 1024px) {
-  html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > h1 {
+  html.flat-theme div[data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > h1 {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -82,7 +93,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 }
 
 /* below 1024px the header row shows no title: the page's own title is the card title (13/600) */
-html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > h1 {
+html.flat-theme div[data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > h1 {
   gap: 0;
   font-size: 13px;
   font-weight: 600;
@@ -90,7 +101,7 @@ html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rou
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > h1 {
+html.flat-theme div[data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > h1 {
   gap: 0;
   font-size: 20px;
   font-weight: 600;
@@ -98,12 +109,12 @@ html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > h1 > svg {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > h1 > svg {
   display: none;
 }
 
 /* the status line: the reference's meta (Mono 11, faint), the ready dot a 6px status dot */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > div[class~="mt-1"] {
   margin-top: 0;
   gap: 8px;
   font-family: var(--ui-font-mono);
@@ -113,45 +124,45 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] {
   gap: 6px;
   font-family: var(--ui-font);
   font-size: 12px;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span,
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span {
   width: 6px;
   height: 6px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-green-500"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-green-500"] {
   background-color: rgb(var(--ui-dot-ok));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-gray-400"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div > div[class~="mt-1"] > span[class~="flex"] > span > span[class~="bg-gray-400"] {
   background-color: rgb(var(--ui-dot-idle));
 }
 
 /* the controls: one 30px row (the table pages' toolbar density), 8px apart */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div:last-child {
   gap: 8px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child .select-trigger.select-trigger {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div:last-child .select-trigger.select-trigger {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > div[class~="w-[1px]"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div:last-child > div[class~="w-[1px]"] {
   margin: 0 4px;
   background-color: rgb(var(--ui-line));
 }
 
 /* refresh, alert rules, settings, fullscreen: the reference's default button (surface, control outline, ink 13/600,
    radius 6), icon-only ones square; no hue */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div:last-child > button {
   gap: 6px;
   height: var(--ui-control-h);
   min-width: var(--ui-control-h);
@@ -166,45 +177,45 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button[class~="w-8"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div:last-child > button[class~="w-8"] {
   width: var(--ui-control-h);
   padding: 0;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button:hover:not(:disabled) {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div:last-child > button:hover:not(:disabled) {
   border-color: rgb(var(--ui-line-focus));
   background-color: rgb(var(--ui-surface));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button:disabled {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div:last-child > button:disabled {
   opacity: 0.55;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div:first-child > div:last-child > button > svg {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div:first-child > div:last-child > button > svg {
   width: 14px;
   height: 14px;
 }
 
 /* 2.2 the KPI area: the health / realtime panel and the six metric tiles, 10px apart (REF §8.13 grid gap) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"][class~="lg:grid-cols-12"] {
   gap: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"][class~="lg:grid-cols-12"] > div:last-child {
   gap: 10px;
 }
 
 /* The health / realtime panel is a card of its own (surface, 1px structural line, radius 8, 14px in). */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child {
   padding: 14px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div {
   gap: 16px;
 }
 
@@ -212,22 +223,22 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
    the window's segmented control on one line (228px). From 1280 the gauge column is as wide as the gauge and the rest
    goes to the realtime block; from 1024 to 1279 (a 300-400px panel) the two stack, the gauge above. */
 @media (min-width: 1280px) {
-  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
+  html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
     grid-template-columns: auto minmax(0, 1fr);
   }
 
-  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
+  html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
     padding-right: 16px;
     padding-left: 8px;
   }
 }
 
 @media (min-width: 1024px) and (max-width: 1279.98px) {
-  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
+  html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] {
     grid-template-columns: minmax(0, 1fr);
   }
 
-  html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
+  html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"][class~="lg:grid-cols-12"] > div:first-child > div[class~="grid"] > div[class~="group"] {
     padding-right: 0;
     border-right-width: 0;
   }
@@ -235,7 +246,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 
 /* health: the gauge keeps its status colour (it is the status); the score is a figure (600, tabular), its caption the
    mono label; hovering opens the diagnosis */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] {
   padding-top: 4px;
   padding-bottom: 4px;
   border-radius: var(--ui-radius-md);
@@ -243,15 +254,15 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   transition: background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover {
   background-color: rgb(var(--ui-subtle));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] circle[class~="text-gray-200"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] circle[class~="text-gray-200"] {
   color: rgb(var(--ui-subtle));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
   font-weight: 600;
   font-size: 24px;
   line-height: 30px;
@@ -259,13 +270,13 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   letter-spacing: -0.01em;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:first-child {
   font-size: 36px;
   line-height: 42px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:last-child,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="relative"] > div[class~="absolute"] > span:last-child,
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:first-child {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 400;
@@ -277,16 +288,16 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 
 /* hovered (the diagnosis opens) the panel takes the grouped fill; the two captions go muted there in light (the label
    grey is 4.35:1 on that fill, the muted grey 4.8:1; dark keeps the label grey, 5.7:1) */
-html.flat-theme:not(.dark) [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="relative"] > div[class~="absolute"] > span:last-child,
-html.flat-theme:not(.dark) [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="mt-4"] > div:first-child {
+html.flat-theme:not(.dark) div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="relative"] > div[class~="absolute"] > span:last-child,
+html.flat-theme:not(.dark) div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"]:hover > div[class~="mt-4"] > div:first-child {
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] {
   margin-top: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="mt-4"] > div:last-child {
   margin-top: 2px;
   font-size: 12px;
   font-weight: 600;
@@ -295,7 +306,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 
 /* the diagnosis popover: the reference's detail popover (radius 6, control outline, surface, the popover shadow,
    12 / 12 in); its status glyphs keep their colours, the rest is ink and muted */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div {
   padding: 12px;
   border: 1px solid rgb(var(--ui-line-strong));
   border-radius: var(--ui-radius-md);
@@ -303,7 +314,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   box-shadow: var(--ui-shadow-popover);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 {
   margin-bottom: 10px;
   padding-bottom: 8px;
   border-color: rgb(var(--ui-line));
@@ -313,26 +324,26 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 > svg {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > h4 > svg {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:first-child {
   font-weight: 500;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:nth-child(2) {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div:nth-child(2) {
   font-size: 11px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div[class~="text-blue-600"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div > div > div:last-child > div[class~="text-blue-600"] {
   font-size: 11px;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div[class~="mt-3"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div[class~="group"] > div[class~="absolute"] > div > div[class~="mt-3"] {
   border-color: rgb(var(--ui-line));
   font-size: 11px;
   color: rgb(var(--ui-faint));
@@ -341,21 +352,21 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 /* realtime: the title a mono label (the decorative ping and the animated pulse line go: they carry no data), the window
    choice the reference's time segmented control (REF §8.5, crop segmented-time: controls.css 7.1's frame and segment
    metrics, on one line), the current QPS / TPS figures 20/600, peak and average 13/600, units Mono 10 */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child {
   margin-bottom: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child > div[class~="h-3"],
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="h-8"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child > div[class~="h-3"],
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="h-8"] {
   display: none;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:first-child {
   gap: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child h3,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child div[class~="uppercase"][class~="font-bold"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child h3,
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child div[class~="uppercase"][class~="font-bold"] {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 400;
@@ -365,7 +376,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   color: rgb(var(--ui-label));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child {
   flex-wrap: nowrap;
   gap: 0;
   padding: var(--ctl-seg-inset);
@@ -374,7 +385,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button {
   padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
   border-radius: var(--ui-radius-md);
   background-color: transparent;
@@ -387,28 +398,28 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button:hover {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button:hover {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button[class~="bg-blue-500"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button[class~="bg-blue-500"] {
   background-color: rgb(var(--ui-ink));
   color: rgb(var(--ui-on-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child span[class~="font-black"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child span[class~="font-black"] {
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-black"] {
+html.flat-theme div[data-ui~="ops-dashboard"]:not([class~="p-4"]) > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-black"] {
   font-size: 20px;
   line-height: 28px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-bold"],
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] span[class~="text-xs"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div:first-child span[class~="font-bold"],
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] span[class~="text-xs"] {
   font-family: var(--ui-font-mono);
   font-size: 10px;
   font-weight: 500;
@@ -416,7 +427,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] > div > div:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child > div[class~="grid"] > div > div:last-child {
   margin-top: 2px;
   font-size: 13px;
   line-height: 19.5px;
@@ -426,7 +437,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
    mono label, the figure 15/600 tabular, the detail rows 12px with Mono figures). A value upstream colours green only
    because it is inside its threshold is ink (the reference colours a figure only when something is wrong); warning
    and critical keep their colour, and a critical tile is the reference's alert tile (danger line and soft fill). */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] {
   display: flex;
   flex-direction: column;
   padding: 8px 12px 10px;
@@ -435,12 +446,12 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child {
   min-height: 18px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span:first-child,
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div > div > div:first-child div[class~="uppercase"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span:first-child,
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div > div > div:first-child div[class~="uppercase"] {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 400;
@@ -451,25 +462,25 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 }
 
 /* the SLA tile's threshold dot: the reference's 6px status dot */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="h-1.5"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="h-1.5"] {
   width: 6px;
   height: 6px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-green-500"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-green-500"] {
   background-color: rgb(var(--ui-dot-ok));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-yellow-500"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-yellow-500"] {
   background-color: rgb(var(--ui-dot-warn));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-red-500"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:first-child > div > span[class~="bg-red-500"] {
   background-color: rgb(var(--ui-dot-bad));
 }
 
 /* 「明细」: a link (the accent text, underline on hover), not a blue label */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] button[class~="text-[10px]"][class~="text-blue-500"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) button[class~="text-[10px]"][class~="text-blue-500"] {
   font-size: 11.5px;
   font-weight: 500;
   line-height: 16px;
@@ -479,7 +490,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 }
 
 /* the tile's figure: 15/600 tabular; fullscreen 22 (the wall display) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
   margin-top: 2px;
   font-size: 15px;
   font-weight: 600;
@@ -488,21 +499,21 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   letter-spacing: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
+html.flat-theme div[data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] :is(div[class~="text-3xl"]) {
   font-size: 22px;
   line-height: 30px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] {
   margin-top: 2px;
   gap: 4px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > div[class~="text-3xl"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > div[class~="text-3xl"] {
   margin-top: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > span {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="items-baseline"] > span {
   font-family: var(--ui-font-mono);
   font-size: 10.5px;
   font-weight: 400;
@@ -510,83 +521,85 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 }
 
 /* the detail rows: label 12px muted, figure Mono 12 ink-soft (REF §8.9 breakdown rows), 2px apart */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:is([class~="space-y-2"], [class~="space-y-1"], [class~="grid"], [class~="mt-3"]):not([class~="h-2"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div:is([class~="space-y-2"], [class~="space-y-1"], [class~="grid"], [class~="mt-3"]):not([class~="h-2"]) {
   margin-top: 6px;
   font-size: 12px;
   line-height: 18px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-2"] > :not([hidden]) ~ :not([hidden]),
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-1"] > :not([hidden]) ~ :not([hidden]) {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-2"] > :not([hidden]) ~ :not([hidden]),
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="space-y-1"] > :not([hidden]) ~ :not([hidden]) {
   margin-top: 2px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="grid"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="grid"] {
   row-gap: 2px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-500"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-500"] {
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"] {
   font-family: var(--ui-font-mono);
   font-size: 12px;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"][class~="text-gray-900"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="font-bold"][class~="text-gray-900"] {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-400"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-gray-400"] {
   font-family: var(--ui-font-mono);
   font-size: 10.5px;
   color: rgb(var(--ui-muted));
 }
 
 /* the SLA bar: the reference's usage bar (a capsule on the grouped fill; the fill keeps its status colour) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] {
   height: 6px;
   margin-top: 8px;
   background-color: rgb(var(--ui-subtle));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] + div[class~="mt-3"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div[class~="h-2"] + div[class~="mt-3"] {
   margin-top: 6px;
 }
 
 /* status colours of the figures: inside the threshold = ink; warning and critical keep theirs */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] :is(div, span)[class~="text-green-600"],
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] :is(div, span)[class~="text-emerald-600"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) :is(div, span)[class~="text-green-600"],
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) :is(div, span)[class~="text-emerald-600"] {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-green-600"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"] > div > div > span[class~="text-green-600"] {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] :is(div, span)[class~="text-yellow-600"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) :is(div, span)[class~="text-yellow-600"] {
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] :is(div, span):is([class~="text-red-600"], [class~="text-rose-600"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) :is(div, span):is([class~="text-red-600"], [class~="text-rose-600"]) {
   color: rgb(var(--ui-danger));
 }
 
 /* the alert tiles: critical = the reference's danger KPI (REF §8.13 crop kpi-card-danger: the danger line, the soft
-   fill, the figure in danger); warning the same in the warning colour; the label steps to muted on the tint (the tile
-   sets --ops-tile-label, the label rule above reads it: no :has() over the label's ancestors) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"][class~="text-red-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-red-600"]),
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div > div:has(> div[class~="text-lg"][class~="text-rose-600"]) {
+   fill, the figure in danger); warning the same in the warning colour; the label steps to muted on the tint. The level
+   lives only in the figure's colour class (data), so the tile (static hooks ops-kpi-tile / ops-sys-tile) tests its own
+   children (subject position, child arguments) and hands the label colour down as --ops-tile-label, which the label
+   rule above reads: nothing is tested above the tile. */
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:where([data-ui~="ops-kpi-tile"]):has(> div[class~="text-3xl"][class~="text-red-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-red-600"]),
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div > div:where([data-ui~="ops-sys-tile"]):has(> div[class~="text-lg"][class~="text-rose-600"]) {
   border-color: rgb(var(--ui-danger));
   background-color: rgb(var(--ui-danger-soft));
   --ops-tile-label: var(--ui-muted);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:has(> div[class~="text-3xl"][class~="text-yellow-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-yellow-600"]),
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div > div:has(> div[class~="text-lg"][class~="text-yellow-600"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:last-child > div[class~="rounded-2xl"]:where([data-ui~="ops-kpi-tile"]):has(> div[class~="text-3xl"][class~="text-yellow-600"], > div[class~="items-baseline"] > div[class~="text-3xl"][class~="text-yellow-600"]),
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div > div:where([data-ui~="ops-sys-tile"]):has(> div[class~="text-lg"][class~="text-yellow-600"]) {
   border-color: rgb(var(--ui-warning));
   background-color: rgb(var(--ui-warning-soft));
   --ops-tile-label: var(--ui-muted);
@@ -594,17 +607,17 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
 
 /* 2.4 the system tiles (CPU, memory, database, Redis, goroutines, jobs): a KPI row of their own, 10px apart, each the
    reference's StatTile (label, figure 15/600, the detail 11px muted with Mono figures) */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] {
   margin-top: 0;
   padding-top: 0;
   border-top-width: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div[class~="grid"] {
   gap: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div[class~="grid"] > div {
   display: flex;
   flex-direction: column;
   min-height: 76px;
@@ -614,7 +627,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
   margin-top: 2px;
   font-size: 15px;
   font-weight: 600;
@@ -622,19 +635,19 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
+html.flat-theme div[data-ui~="ops-dashboard"][class~="p-4"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-lg"] {
   font-size: 20px;
   line-height: 28px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] {
   margin-top: 2px;
   font-size: 11px;
   line-height: 16.5px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~="ops-header"] > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] span[class~="font-mono"] {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="border-t"] > div[class~="grid"] > div > div[class~="text-[10px]"] span[class~="font-mono"] {
   color: rgb(var(--ui-ink-soft));
 }
 
@@ -644,7 +657,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][data-ui~=
    reference's card (REF §8.7 / §8.14: surface, 1px structural line, radius 8, no shadow, 14px in). The rounded-3xl
    ring-1 cards are every such card but the header (data-ui="ops-header"); the chart cards carry data-ui="ops-chart";
    the alert events card is the only one that is a direct child of the page. */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]),
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])),
 html.flat-theme [data-ui~="ops-dashboard"] > section:is([class~="rounded-2xl"], [class~="card"]),
 html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] {
   padding: 14px;
@@ -655,7 +668,7 @@ html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] {
 }
 
 /* the card head: 12px above the body, controls 26px */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-4"]:first-child,
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="mb-4"]:first-child,
 html.flat-theme [data-ui~="ops-dashboard"] > section:is([class~="rounded-2xl"], [class~="card"]) > div[class~="mb-4"]:first-child,
 html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] > div[class~="mb-4"]:first-child {
   min-height: 26px;
@@ -665,11 +678,11 @@ html.flat-theme [data-ui~="ops-dashboard"] > div > section[class~="card"] > div[
 /* titles: a chart card's title is the mono label (REF §8.14 "SPEND OVER TIME"); a list or table card's title is the
    reference's card title 13/600 ink with its description 12px muted ("Request history"). The coloured glyph before a
    title is decoration and goes; the help icon stays. */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) h3 > svg:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) h3 > svg:first-child {
   display: none;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"])[data-ui~="ops-chart"] h3 {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"]))[data-ui~="ops-chart"]:not(uipad[data-uipad]):not(uipad) h3 {
   gap: 0;
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
@@ -680,7 +693,7 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   color: rgb(var(--ui-label));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]):not([data-ui~="ops-chart"]) h3,
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])):not([data-ui~="ops-chart"]):not(uipad[data-uipad]):not(uipad) h3,
 html.flat-theme [data-ui~="ops-dashboard"] section:is([class~="rounded-2xl"], [class~="card"]) h3 {
   gap: 0;
   font-size: 13px;
@@ -689,7 +702,7 @@ html.flat-theme [data-ui~="ops-dashboard"] section:is([class~="rounded-2xl"], [c
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]), section:is([class~="rounded-2xl"], [class~="card"])) > div:first-child > div > p[class~="text-xs"] {
+html.flat-theme div[data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])), section:is([class~="rounded-2xl"], [class~="card"])) > div:first-child > div > p[class~="text-xs"] {
   margin-top: 2px;
   font-size: 12px;
   line-height: 18px;
@@ -699,7 +712,7 @@ html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~=
 /* the head's small buttons (明细 / 重置 / 下载 / 请求错误 / 上游错误, the concurrency view toggle and refresh, the alert
    refresh): the reference's default button at the small size (26px, radius 6, control outline, surface, 12/600,
    ink-soft, ink on hover) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]) {
   gap: 6px;
   min-width: 26px;
   height: 26px;
@@ -714,31 +727,31 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):hover:not(:disabled) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):hover:not(:disabled) {
   border-color: rgb(var(--ui-line-focus));
   background-color: rgb(var(--ui-surface));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):disabled {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div:first-child button:is([class~="border-gray-200"], [class~="bg-gray-100"], [class~="bg-blue-100"]):disabled {
   opacity: 0.55;
 }
 
 /* a pressed toggle (the concurrency card's per-user view) is the reference's active filter: accent line at 40 %, the
    accent tint, accent glyph */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button[class~="bg-blue-100"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div:first-child button[class~="bg-blue-100"] {
   border-color: rgb(var(--ui-primary) / 0.4);
   background-color: rgb(var(--ui-primary-soft));
   color: var(--ui-link);
 }
 
 /* the concurrency card's two glyph-only buttons (px-2 py-1, no label) are square */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button:is([class~="bg-gray-100"], [class~="bg-blue-100"])[class~="px-2"][class~="py-1"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div:first-child button:is([class~="bg-gray-100"], [class~="bg-blue-100"])[class~="px-2"][class~="py-1"] {
   width: 26px;
   padding: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div:first-child button > svg {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div:first-child button > svg {
   width: 13px;
   height: 13px;
 }
@@ -759,12 +772,12 @@ html.flat-theme [data-ui~="ops-dashboard"] [data-testid="throughput-chart-toolba
 
 /* the throughput drilldown chips (a platform or a group and its request count): the reference's provider chip shape
    (radius 4, the control outline, Geist Mono 10.5 uppercase ink-soft, the count faint) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-3"][class~="flex-wrap"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="mb-3"][class~="flex-wrap"] {
   gap: 6px;
   margin-bottom: 10px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-3"][class~="flex-wrap"] > button {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="mb-3"][class~="flex-wrap"] > button {
   gap: 6px;
   padding: 2px 7px;
   border: 1px solid rgb(var(--ui-line-strong));
@@ -779,52 +792,52 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   transition: color var(--ui-duration) var(--ui-ease), border-color var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-3"][class~="flex-wrap"] > button:hover {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="mb-3"][class~="flex-wrap"] > button:hover {
   border-color: rgb(var(--ui-line-focus));
   background-color: rgb(var(--ui-surface));
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-3"][class~="flex-wrap"] > button > span:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="mb-3"][class~="flex-wrap"] > button > span:last-child {
   color: rgb(var(--ui-faint));
 }
 
 /* the error distribution's summary under the doughnut: 「最高: 上游」 ink-soft with the slice's own colour kept on the
    value, the legend as the reference's (8px squares, 11px muted) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) div[class~="mt-4"][class~="flex-col"][class~="items-center"] {
   margin-top: 10px;
   gap: 6px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="font-bold"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="font-bold"] {
   font-size: 12px;
   font-weight: 500;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] {
   gap: 12px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div {
   gap: 6px;
   font-size: 11px;
   line-height: 16.5px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:first-child {
   width: 8px;
   height: 8px;
   border-radius: 2px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) div[class~="mt-4"][class~="flex-col"][class~="items-center"] > div[class~="flex-wrap"] > div > span:last-child {
   color: rgb(var(--ui-muted));
   font-variant-numeric: tabular-nums;
 }
 
 /* loading text in a chart's place: the reference's quiet 12px muted line (no pulse) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="animate-pulse"][class~="text-sm"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) div[class~="animate-pulse"][class~="text-sm"] {
   animation: none;
   font-size: 12px;
   color: rgb(var(--ui-muted));
@@ -834,21 +847,23 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
    for the dimension and its count, then rows divided by 1px lines); each row: name 12/600, the used / total figure
    Mono ink-soft, the load share Mono (normal ink-soft; the load colours stay on the bar and from 50 % up), the 6px bar
    on the grouped fill, the account and queue chips as the reference's small status chips. The band's label and count
-   are muted, not the label grey: on the band's fill the label grey is 4.50:1, the muted grey 5.0:1. */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"]:has(> div[class~="bg-gray-50"]) {
+   are muted, not the label grey: on the band's fill the label grey is 4.50:1, the muted grey 5.0:1. The list is the
+   only bordered flex column directly in an ops card (OpsConcurrencyCard's data area, which always starts with the band;
+   the disabled hint is a dashed box without flex-col). */
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"][class~="flex-col"]:not(uipad) {
   margin: 0 -14px -14px;
   border-width: 1px 0 0;
   border-color: rgb(var(--ui-line));
   border-radius: 0 0 var(--ui-radius-lg) var(--ui-radius-lg);
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child {
   padding: 6px 16px;
   border-color: rgb(var(--ui-line));
   background-color: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:first-child {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   font-weight: 400;
@@ -857,97 +872,97 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="bg-gray-50"]:first-child > span:last-child {
   font-family: var(--ui-font-mono);
   font-size: 11px;
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] {
   padding: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > :not([hidden]) ~ :not([hidden]) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > :not([hidden]) ~ :not([hidden]) {
   margin-top: 0;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div {
   padding: 9px 16px 10px;
   border-bottom: 1px solid rgb(var(--ui-line));
   border-radius: 0;
   background-color: transparent;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child {
   margin-bottom: 6px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] :is(span, div)[class~="text-[11px]"][class~="font-bold"]:not([class~="font-mono"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] :is(span, div)[class~="text-[11px]"][class~="font-bold"]:not([class~="font-mono"]) {
   font-size: 12px;
   font-weight: 600;
   line-height: 18px;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="font-mono"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="font-mono"] {
   font-size: 11.5px;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="font-bold"]:not([class~="font-mono"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="font-bold"]:not([class~="font-mono"]) {
   font-family: var(--ui-font-mono);
   font-size: 11.5px;
   font-weight: 500;
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-green-600"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-green-600"] {
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span:is([class~="text-yellow-600"], [class~="text-orange-600"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span:is([class~="text-yellow-600"], [class~="text-orange-600"]) {
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-red-600"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div:first-child > div:last-child > span[class~="text-red-600"] {
   color: rgb(var(--ui-danger));
 }
 
 /* the row's bar: 6px on the grouped fill; the fill keeps the load colour (green / yellow / orange / red) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="h-1.5"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="h-1.5"] {
   background-color: rgb(var(--ui-subtle));
 }
 
 /* the account line under the bar: 11px, the available count ink 600 (a figure, not a status), the share muted */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] {
   gap: 4px 10px;
   font-size: 11px;
   line-height: 16.5px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > svg {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > svg {
   width: 12px;
   height: 12px;
   color: rgb(var(--ui-faint));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span {
   font-family: var(--ui-font-mono);
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span > span[class~="text-green-600"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] > div > div[class~="flex-wrap"] > div > span > span[class~="text-green-600"] {
   font-weight: 600;
   color: rgb(var(--ui-ink));
 }
 
 /* the small status chips in the rows (rate limited = warning, errors = danger, queued = the reference's backlog tone,
    available / cooling down): the reference's Chip (capsule, Geist Mono, soft status fill) */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span:is([class~="bg-amber-100"], [class~="bg-red-100"], [class~="bg-purple-100"], [class~="bg-green-100"], [class~="bg-gray-100"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span:is([class~="bg-amber-100"], [class~="bg-red-100"], [class~="bg-purple-100"], [class~="bg-green-100"], [class~="bg-gray-100"]) {
   padding: 0 6px;
   border-radius: 9999px;
   font-family: var(--ui-font-mono);
@@ -957,46 +972,46 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
   letter-spacing: 0.01em;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-amber-100"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-amber-100"] {
   background-color: rgb(var(--ui-warning-soft));
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-red-100"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-red-100"] {
   background-color: rgb(var(--ui-danger-soft));
   color: rgb(var(--ui-danger));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-purple-100"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-purple-100"] {
   background-color: rgb(var(--ui-purple-soft));
   color: rgb(var(--ui-purple));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-green-100"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-green-100"] {
   background-color: rgb(var(--ui-success-soft));
   color: rgb(var(--ui-success));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-gray-100"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="custom-scrollbar"] span[class~="bg-gray-100"] {
   background-color: rgb(var(--ui-subtle));
   color: rgb(var(--ui-muted));
 }
 
 /* the empty and disabled states of the list */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="border-dashed"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="border-dashed"] {
   border-color: rgb(var(--ui-line-strong));
   border-radius: var(--ui-radius-lg);
   font-size: 13px;
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="rounded-xl"][class~="border"] > div[class~="flex-1"][class~="items-center"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="rounded-xl"][class~="border"] > div[class~="flex-1"][class~="items-center"] {
   font-size: 13px;
   color: rgb(var(--ui-muted));
 }
 
 /* an error line inside a card (upstream: a red-50 box) = the reference's danger notice (radius 6, soft fill, 12px) */
-html.flat-theme [data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]), section) > div[class~="bg-red-50"] {
+html.flat-theme div[data-ui~="ops-dashboard"] :is(div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])), section) > div[class~="bg-red-50"] {
   border: 1px solid rgb(var(--ui-danger) / 0.3);
   border-radius: var(--ui-radius-md);
   background-color: rgb(var(--ui-danger-soft));
@@ -1094,8 +1109,10 @@ html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-u
    the shared empty state (data.css §9, the reference's "Nothing matches"): a panel 16px inside the table, the dashed
    control outline, radius 8, 120px, the message 14/500 ink-soft in its middle. A table wider than its scroll box (the
    events' 1120px) keeps the panel and the message on the visible width: the box is an inline-size container, the
-   panel as wide as the box, and the cell's right padding (a percentage of the table's width) takes the overflow. */
-html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"]:has(> table > tbody > tr:only-child > td[colspan]:only-child) {
+   panel as wide as the box, and the cell's right padding (a percentage of the table's width) takes the overflow.
+   Whether the table shows its single loading / empty row is data: the box (static hook log-table, RiskControlView.vue
+   and features/prompt-audit/components/EventWorkspace.vue) tests its own child chain. */
+html.flat-theme :is([data-ui~="prompt-audit-page"], [data-ui~="risk-page"]) div[class~="overflow-x-auto"]:where([data-ui~="log-table"]):has(> table > tbody > tr:only-child > td[colspan]:only-child) {
   container-type: inline-size;
 }
 
@@ -1170,23 +1187,23 @@ html.flat-theme :is([data-ui~="ops-dashboard"], [data-ui~="ops-dialog"], [data-u
 /* 3.5 Alert events: the card's head holds 30px controls (four Selects and refresh, the table pages' toolbar density);
    the events table sits flush in the card (REF §8.7 history card: the head inset, then the table from edge to edge on
    a 1px line), 600px of it scrolls. */
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-4"]:first-child .select-trigger.select-trigger {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="mb-4"]:first-child .select-trigger.select-trigger {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-4"]:first-child > div:last-child {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="mb-4"]:first-child > div:last-child {
   gap: 8px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="mb-4"]:first-child > div:last-child > button {
+html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="mb-4"]:first-child > div:last-child > button {
   height: var(--ui-control-h);
   padding: 0 12px;
   font-size: 13px;
   line-height: 19.5px;
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) > div[class~="overflow-hidden"][class~="rounded-xl"][class~="border"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) > div[class~="overflow-hidden"][class~="rounded-xl"][class~="border"] {
   margin: 0 -14px -14px;
   border-width: 1px 0 0;
   border-color: rgb(var(--ui-line));
@@ -1194,25 +1211,25 @@ html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="rin
 }
 
 /* the title cell keeps its two lines: the title 13/600 ink, the rule text 12px muted */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) table > tbody > tr > td[class~="min-w-[260px]"] > div:first-child {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) table > tbody > tr > td[class~="min-w-[260px]"] > div:first-child {
   font-size: 13px;
   line-height: 19.5px;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) table > tbody > tr > td[class~="min-w-[260px]"] > div:last-child:not(:first-child) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) table > tbody > tr > td[class~="min-w-[260px]"] > div:last-child:not(:first-child) {
   color: rgb(var(--ui-muted));
 }
 
 /* the e-mail column: the state glyph keeps success / muted, the word 12px ink-soft */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) table > tbody > tr > td[class~="text-right"] span[class~="text-[11px]"] {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) table > tbody > tr > td[class~="text-right"] span[class~="text-[11px]"] {
   font-size: 12px;
   font-weight: 500;
   color: rgb(var(--ui-ink-soft));
 }
 
 /* the list's end marker and loading line */
-html.flat-theme [data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:not([data-ui~="ops-header"]) div[class~="max-h-[600px]"] > div:last-child:is([class~="py-3"]) {
+html.flat-theme div[data-ui~="ops-dashboard"] div[class~="rounded-3xl"][class~="ring-1"]:where(:not([data-ui~="ops-header"])) div[class~="max-h-[600px]"] > div:last-child:is([class~="py-3"]) {
   border-top: 1px solid rgb(var(--ui-line));
   font-size: 12px;
   color: rgb(var(--ui-muted));
@@ -1460,7 +1477,8 @@ html.flat-theme [data-ui~="ops-dialog"] summary[class~="text-sm"][class~="font-s
 }
 
 /* the key-value tiles (error detail summary, alert event times): the reference's detail stat block (REF §8.13: surface,
-   1px line, radius 6, 8 / 12 in, the mono label, the value 13px ink, Mono where upstream sets it) */
+   1px line, radius 6, 8 / 12 in, the mono label, the value 13px ink, Mono where upstream sets it); their two grids carry
+   data-ui="ops-kv-grid" (OpsErrorDetailModal.vue:16, OpsAlertEventsCard.vue:608) */
 html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"] > div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"] {
   padding: 8px 12px 10px;
   border: 1px solid rgb(var(--ui-line));
@@ -1468,7 +1486,7 @@ html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"] > div[class~="rounded
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"]:has(> div[class~="rounded-xl"][class~="bg-gray-50"][class~="p-4"]) {
+html.flat-theme [data-ui~="ops-dialog"] div[class~="grid"][data-ui~="ops-kv-grid"]:not(uipad[data-uipad][data-uipad]) {
   gap: 10px;
 }
 
@@ -1905,8 +1923,7 @@ html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child > div:last-child
   gap: 8px;
 }
 
-html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child > div:last-child > button[class~="bg-gray-100"],
-html.flat-theme [data-ui~="ops-alert-event"] ~ * button[class~="bg-gray-100"] {
+html.flat-theme [data-ui~="ops-alert-rules"] > div:first-child > div:last-child > button[class~="bg-gray-100"] {
   min-height: 26px;
   padding: 0 10px;
   border: 1px solid rgb(var(--ui-line-strong));
@@ -2312,7 +2329,8 @@ html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > div[cla
 /* The V1 table page: the head block and the table layout share the table pages' height (shell.css: 100vh less the
    header row and the content paddings), so the table card ends one content padding above the viewport's edge like
    every table page's; upstream's layout took the full height under a 111px head and pushed the pager out of view. The
-   V2 settings (no table layout) scroll as before. */
+   V2 settings (no table layout) scroll as before. Which of the two the page shows is a setting (data): the hooked
+   root tests its own child. */
 @media (min-width: 1024px) {
   html.flat-theme [data-ui~="channel-monitor-page"]:has(> .table-page-layout) {
     display: flex;
@@ -2497,11 +2515,11 @@ html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div >
   box-shadow: none;
 }
 
-html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div:is(:hover, :has(> div > .select-trigger-open)) {
+html.flat-theme [data-ui~="audit-page"] > :where(.layout-section-fixed) > .card > div > div:first-child > div[data-ui~="audit-filter"]:is(:hover, :has(> * > .select-trigger-open)) {
   border-color: rgb(var(--ui-line-focus));
 }
 
-html.flat-theme [data-ui~="audit-page"] > .layout-section-fixed > .card > div > div:first-child > div:has(> input:focus, > div > input:focus, > div > .select-trigger:focus-visible) {
+html.flat-theme [data-ui~="audit-page"] > :where(.layout-section-fixed) > .card > div > div:first-child > div[data-ui~="audit-filter"]:has(> input:focus, > * > input:focus, > * > .select-trigger:focus-visible) {
   border-color: rgb(var(--ui-focus));
   box-shadow: inset 0 0 0 1px rgb(var(--ui-focus));
 }
@@ -2756,7 +2774,7 @@ html.flat-theme :is(#channel-monitor-form, .modal-content) div[class~="rounded-l
    hover; the current one ink over the 2px accent rule), their counts the small Mono count; a template's mode and API
    mode are categories (decision 2): the reference's neutral chip (data.css category-chip), whatever hue upstream gave
    them (merge amber, replace purple, Responses blue, Chat Completions green). */
-html.flat-theme .modal-content div[class~="mb-4"][class~="border-b"][data-ui~="template-tabs"] {
+html.flat-theme .modal-content div[class~="mb-4"][class~="border-b"][data-ui~="template-tabs"]:not(uipad[data-uipad][data-uipad]) {
   border-color: rgb(var(--ui-line));
 }
 
@@ -2791,7 +2809,7 @@ html.flat-theme .modal-content div[role="tablist"][class~="flex"][class~="flex-w
   line-height: 16px;
 }
 
-html.flat-theme .modal-content [data-ui~="template-list"] div[class~="items-center"][class~="gap-2"] > span[class~="inline-flex"][class~="rounded-md"][class~="px-1.5"][class~="py-0.5"][class~="text-xs"] {
+html.flat-theme .modal-content [data-ui~="template-list"]:not(uipad[data-uipad][data-uipad][data-uipad]) div[class~="items-center"][class~="gap-2"] > span[class~="inline-flex"][class~="rounded-md"][class~="px-1.5"][class~="py-0.5"][class~="text-xs"] {
   padding: 1px 6px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-sm);
@@ -3500,8 +3518,8 @@ html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"][class~="gap-6"
 }
 
 /* the 7 / 30 / 90-day choice: the reference's segmented control (controls.css 7.1's frame and segment metrics; the
-   current segment the ink thumb) */
-html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"]:has(> button) {
+   current segment the ink thumb); the head row's only bordered box, its buttons a constant list */
+html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"]:not(uipad) {
   gap: 0;
   padding: var(--ctl-seg-inset);
   border-color: rgb(var(--ctl-seg-frame));
@@ -3952,7 +3970,7 @@ html.flat-theme [data-ui~="risk-settings"] div[class~="border-dashed"][class~="m
 
 /* 8.1 风控中心 settings: the API-key write mode is a segmented control (controls.css 7.1's frame and segment metrics;
    「增量添加」 the ink thumb, 「覆盖保存」 keeps the warning fill: it replaces the saved keys) */
-html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"]:has(> button) {
+html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"]:not(uipad) {
   padding: var(--ctl-seg-inset);
   border: 1px solid rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index 0fd46a26a985..60caafc04492 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -2490,9 +2490,12 @@ html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"]
   color: rgb(var(--ui-ink-soft));
 }
 
-/* 2.2 Body: 16 x 18, and one rhythm for every field, row and group in it (upstream mixes 16, 20 and 24). */
+/* 2.2 Body: 16 x 18, and one rhythm for every field, row and group in it (upstream mixes 16, 20 and 24). The p-4 body
+   after a header (PaymentProviderList.vue, the only one) is found by its position, not by a sibling combinator keyed on
+   the header's class attribute (that re-styled every following sibling on any class change: coordinator, 2026-09-30);
+   the pad keeps the former weight (0,6,3). */
 html.flat-theme [data-ui~="settings"] .card > div:is([class~="p-6"], [class~="px-6"]):not([class~="border-b"]),
-html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] ~ div[class~="p-4"] {
+html.flat-theme [data-ui~="settings"] .card > div[class~="p-4"]:not(:first-child):not(uipad[data-uipad]) {
   padding: var(--set-body-py) var(--set-px) calc(var(--set-body-py) + 0.125rem);
 }
 
diff --git a/frontend/src/styles/console/pages/user.css b/frontend/src/styles/console/pages/user.css
index 4a02748b82ac..5104e9081cd9 100644
--- a/frontend/src/styles/console/pages/user.css
+++ b/frontend/src/styles/console/pages/user.css
@@ -19,8 +19,11 @@
  *   data-ui="use-key"                  components/keys/UseKeyModal.vue:8              dialog body
  *   data-ui="user-batch-image"         views/user/BatchImageGuideView.vue:3           TablePageLayout root
  *   data-ui="user-keys"                views/user/KeysView.vue:3                      TablePageLayout root
+ *   data-ui="keys-bulk-bar"            views/user/KeysView.vue:31                     the selection row (bulk edit)
  *   data-ui="key-group-search"         views/user/KeysView.vue:1145                   the group picker's search row
  *   data-ui="plan-card"                components/payment/SubscriptionPlanCard.vue:3  plan card root
+ *   data-ui="active-sub"               views/user/PaymentView.vue:201                 an active subscription's row
+ *   data-ui="balance-tile"             components/user/dashboard/UserDashboardStats.vue:5  the balance KPI tile
  *   data-ui="image-studio"             features/image-studio/ImageStudioPage.vue:2    page root
  * Identity hooks (data.css §6.4 contract, decision 2): data-ui="platform-chip" on KeysView.vue:515 (the create
  * dialog's provider tiles), PaymentView.vue:107 and :207, SubscriptionsView.vue:45, SubscriptionPlanCard.vue:34,
@@ -29,9 +32,13 @@
  * SubscriptionPlanCard.vue:11.
  * Existing hooks used: data-table="keys", #key-form, the profile's data-testid, .custom-page-layout, data-testid
  * on the image studio, data-ui="pagination" / "empty-state" recipes of data.css.
- * Performance (PERF.md, before v0.2.9-codexrip.3): no :has() in a non-subject position (it re-styles the anchor's
- * whole subtree on every change); the few :has() left sit in the subject compound under a hooked root with a child or
- * sibling argument. */
+ * Performance (PERF.md, before v0.2.9-codexrip.3): every data-ui hook here is static (never bound to data). A style that
+ * depends on what an element contains is carried by a static hook on that element, :focus-within or a sibling position
+ * (:not(:last-child)); the one relational pseudo-class (has()) left is the image studio's page root testing whether its
+ * header holds the clear-history button (7.2: the button shows while a history exists, data), in the subject compound
+ * of the hooked root with a child argument, handing its values down as custom properties. Every rewritten selector keeps the weight of the
+ * one it replaced: a hook that has to weigh nothing is wrapped in :where(), missing weight is added by a pad that never
+ * filters anything (:not(uipad) = 0,0,1, :not([data-uipad]) = 0,1,0, :not(#uipad) = 1,0,0). */
 
 /* ================================================================== 1 · page frame */
 
@@ -50,9 +57,11 @@ html.flat-theme [data-testid="profile-shell"] [class~="space-y-6"] > :not([hidde
 
 /* Cards on these pages: the reference's panel inset (16px, REF §6 p-4) instead of upstream's 24; a header bar is
    12 / 16 on the structural line with the title 14 / 600 (the reference's modal and card titles) and its note
-   12.5px muted. */
+   12.5px muted. The card bodies: the profile's at 0,6,2 (its hero excluded), the redeem page's at 0,5,2 so that the
+   redeem page's own insets (3.1 the note, 3.3 the history, 3.4 the result, all 0,5,2 and later) win (final review V3-10). */
 html.flat-theme :is([data-ui="user-redeem"], [data-ui="user-affiliate"], [data-ui="user-purchase"], [data-testid="profile-shell"]) .card:is([class~="p-6"], [class~="p-5"]),
-html.flat-theme :is([data-ui="user-redeem"], [data-testid="profile-shell"]) .card:where(:not([data-testid="profile-overview-hero"])) > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]) {
+html.flat-theme [data-testid="profile-shell"] .card:not([data-testid="profile-overview-hero"]) > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]),
+html.flat-theme [data-ui="user-redeem"] .card > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]) {
   padding: 16px;
 }
 
@@ -82,28 +91,29 @@ html.flat-theme :is([data-ui="user-affiliate"], [data-testid="profile-shell"]) .
 /* 2.0 One toolbar row (REF §7.1 /models: the search and the filters on the left, the actions at the row's right end;
    the management pages do the same). Upstream gives the page two slots, the actions above the filters; from 1024px
    the layout puts them side by side on the first row and the table card under them. Keyboard order stays upstream's
-   (actions, then filters); below 1024px the slots stack as upstream. */
+   (actions, then filters); below 1024px the slots stack as upstream. The page root carries data-ui="user-keys" (the
+   keys page always renders both slots and its table, which the former anchor tested for). */
 @media (min-width: 1024px) {
-  html.flat-theme .table-page-layout[data-ui~="user-keys"] {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"]:not([data-uipad][data-uipad][data-uipad][data-uipad][data-uipad]) {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
     grid-template-rows: auto minmax(0, 1fr) auto;
     column-gap: 12px;
   }
 
-  html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed:first-child {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"]:not([data-uipad][data-uipad][data-uipad]) > .layout-section-fixed:first-child {
     grid-column: 2;
     grid-row: 1;
     align-self: start;
   }
 
-  html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed:first-child + .layout-section-fixed {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"]:not([data-uipad][data-uipad]) > .layout-section-fixed:first-child + .layout-section-fixed {
     grid-column: 1;
     grid-row: 1;
     min-width: 0;
   }
 
-  html.flat-theme .table-page-layout[data-ui~="user-keys"] > :is(.layout-section-scrollable, .layout-section-scrollable ~ .layout-section-fixed) {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"]:not([data-uipad][data-uipad]) > :is(.layout-section-scrollable, .layout-section-scrollable ~ .layout-section-fixed) {
     grid-column: 1 / -1;
   }
 }
@@ -136,7 +146,7 @@ html.flat-theme .table-wrapper[data-table="keys"] td[data-column="current_concur
 }
 
 /* 2.2 The selection row above the table (keys chosen for bulk edit): the reference tray's count, 12.5px ink-soft. */
-html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed div[class~="flex-wrap"][class~="text-sm"] > span:first-child {
+html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed div[data-ui~="keys-bulk-bar"][class~="flex-wrap"][class~="text-sm"]:not([data-uipad]) > span {
   color: rgb(var(--ui-ink-soft));
   font-size: 12.5px;
 }
@@ -144,14 +154,15 @@ html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed
 /* 2.25 The group picker (the group cell's popover, teleported to the body; its frame and rows are the console's menus,
    overlays.css): its search row is the ModelPicker's, as Select's (overlays 1.6): 36px on the structural line, the
    glyph 14px faint, the field without a box of its own, 13px ink, the placeholder faint (upstream's placeholder-gray-400
-   reads the grey fill ramp: 2.4:1 light, 3.3:1 dark); a keyboard focus draws the row's line in the accent. */
+   reads the grey fill ramp: 2.4:1 light, 3.3:1 dark); a keyboard focus draws the row's line in the accent (the row's
+   only focusable element is a text field, which is :focus-visible whenever it is focused: :focus-within). */
 html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border-b"]:first-child {
   padding: 0 10px;
   border-bottom-color: rgb(var(--ui-line));
   transition: box-shadow var(--ui-duration) var(--ui-ease);
 }
 
-html.flat-theme [data-ui="key-group-search"]:has(> div > input:focus-visible) {
+html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[data-ui="key-group-search"]:first-child:focus-within:not(uipad) {
   box-shadow: inset 0 -2px 0 rgb(var(--ui-focus));
 }
 
@@ -492,11 +503,11 @@ html.flat-theme [data-ui="user-redeem"] #code {
 }
 
 html.flat-theme [data-ui="user-redeem"] #code ~ *,
-html.flat-theme [data-ui="user-redeem"] div[class~="relative"] > div[class~="pointer-events-none"] {
+html.flat-theme [data-ui="user-redeem"] div[class~="relative"]:not(#uipad) > div[class~="pointer-events-none"] {
   padding-left: 12px;
 }
 
-html.flat-theme [data-ui="user-redeem"] div[class~="relative"] > div[class~="pointer-events-none"] svg {
+html.flat-theme [data-ui="user-redeem"] div[class~="relative"]:not(#uipad) > div[class~="pointer-events-none"] svg {
   width: 15px;
   height: 15px;
   color: rgb(var(--ui-faint));
@@ -776,7 +787,7 @@ html.flat-theme [data-testid="profile-overview-hero"] span[class~="rounded-full"
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"] {
+html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"]:not([data-uipad]) {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
@@ -983,7 +994,7 @@ html.flat-theme [data-testid="profile-shell"] > .card form[class~="rounded-lg"][
 /* 5.1 The four figures: the reference's StatTile (§8.13 /logs: 1px line, 6px, surface, 8 / 12, the mono label, the
    value 15 / 600 tabular ink, the note 11px muted, 76px; tiles 10px apart). The rebate rate's glyph and the green
    figures are decoration (decision 2): neutral; a frozen amount keeps its warning colour. */
-html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] {
+html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"]:not([data-uipad][data-uipad]) {
   gap: 10px;
 }
 
@@ -1195,7 +1206,7 @@ html.flat-theme [data-ui="user-purchase"] > .card span[class~="text-lg"][class~=
 }
 
 /* the active subscriptions under the plans: rows on the surface, the platform mark is identity (platform-text) */
-html.flat-theme [data-ui="user-purchase"] div[class~="rounded-xl"][class~="border"][class~="px-3"][class~="py-2"]:has(> [data-ui~="platform-text"]) {
+html.flat-theme [data-ui="user-purchase"] div[data-ui~="active-sub"][class~="rounded-xl"][class~="border"][class~="px-3"][class~="py-2"] {
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
 }
@@ -1208,7 +1219,7 @@ html.flat-theme [data-ui="user-subscriptions"] [data-ui~="platform-text"][class~
 
 /* the plan cards (SubscriptionPlanCard): the reference's card (8px, the structural line, no lift or shadow), the
    platform rule on top 2px in the platform colour, the price a Mono figure, subscribe = the positive CTA (accent) */
-html.flat-theme [data-ui="user-purchase"] [data-ui~="plan-card"] {
+html.flat-theme [data-ui="user-purchase"] div[data-ui~="plan-card"][data-ui~="plan-card"] {
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
   box-shadow: none;
@@ -1221,13 +1232,13 @@ html.flat-theme [data-ui="user-purchase"] [data-ui~="platform-text"][class~="h-1
   background-image: none;
 }
 
-html.flat-theme [data-ui="user-purchase"] [data-ui~="plan-card"] span[class~="text-2xl"][class~="font-extrabold"] {
+html.flat-theme [data-ui="user-purchase"] div[data-ui~="plan-card"][data-ui~="plan-card"] span[class~="text-2xl"][class~="font-extrabold"] {
   color: rgb(var(--ui-ink));
   font: 600 22px/28px var(--ui-font-mono);
   letter-spacing: -0.02em;
 }
 
-html.flat-theme [data-ui="user-purchase"] [data-ui~="plan-card"] > div > button[type="button"][class~="w-full"] {
+html.flat-theme [data-ui="user-purchase"] div[data-ui~="plan-card"][data-ui~="plan-card"] > div > button[type="button"][class~="w-full"] {
   min-height: var(--ui-control-h-md, 38px);
   border: 1px solid rgb(var(--ui-primary));
   border-radius: var(--ui-radius-md);
@@ -1239,7 +1250,8 @@ html.flat-theme [data-ui="user-purchase"] [data-ui~="plan-card"] > div > button[
 }
 
 /* 6.2 Orders: the filter row loses its card (the reference's toolbars are rows, MAPPING B2); the table is the
-   reference's table card (8px, 1px line, surface) with the pagination as its footer. */
+   reference's table card (8px, 1px line, surface) with the pagination as its footer (the pagination, v-if total > 0,
+   is the only element that can follow the table: :not(:last-child) is "the pagination follows"). */
 html.flat-theme [data-ui="user-orders"] > .card[class~="p-4"]:first-child {
   padding: 0;
   border: 0;
@@ -1257,7 +1269,7 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper {
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui="user-orders"] > .table-wrapper:has(+ [data-ui="pagination"]) {
+html.flat-theme [data-ui="user-orders"] > .table-wrapper:not(:last-child) {
   border-bottom-width: 0;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
@@ -1352,7 +1364,7 @@ html.flat-theme [data-testid="image-studio-layout"] > form {
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui="image-studio"] > header > div:first-child > h1 {
+html.flat-theme div[data-ui="image-studio"] > header > div:first-child > h1 {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -1362,7 +1374,7 @@ html.flat-theme [data-ui="image-studio"] > header > div:first-child > h1 {
 }
 
 @media (min-width: 1024px) {
-  html.flat-theme [data-ui="image-studio"] > header > div:first-child > p {
+  html.flat-theme div[data-ui="image-studio"] > header > div:first-child > p {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -1371,18 +1383,20 @@ html.flat-theme [data-ui="image-studio"] > header > div:first-child > h1 {
     white-space: nowrap;
   }
 
-  html.flat-theme [data-ui="image-studio"] > header:has(> button) {
-    justify-content: flex-end;
+  /* the header's words are hidden: with the clear-history button the header keeps its row, the button at its end, and
+     the layout keeps the page's 24px step; without it the header has no height and the layout starts the page. The
+     button shows while a history exists (data): the page root tests its own header and hands both values down. */
+  html.flat-theme div[data-ui="image-studio"]:has(> header > button) {
+    --ui-studio-head-justify: flex-end;
+    --ui-studio-layout-gap: 1.5rem;
   }
 
-  /* the header's words are hidden, so the page's 24px step after it moves onto its button (a header without one has no
-     height and the layout starts the page) */
-  html.flat-theme [data-ui="image-studio"] > [data-testid="image-studio-layout"] {
-    margin-top: 0;
+  html.flat-theme div[data-ui="image-studio"] > header:not(uipad):not(uipad) {
+    justify-content: var(--ui-studio-head-justify, space-between);
   }
 
-  html.flat-theme [data-ui="image-studio"] > header > button {
-    margin-bottom: 1.5rem;
+  html.flat-theme div[data-ui="image-studio"] > header:not(uipad) + [data-testid="image-studio-layout"] {
+    margin-top: var(--ui-studio-layout-gap, 0px);
   }
 }
 
@@ -1604,13 +1618,15 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
   /* 8.1 Management toolbars (users, subscriptions, redeem codes, promo codes, announcements; the management page agent
      leaves phones to this file): upstream's search is a flex-1 item with a zero basis beside fixed-width selects and
      buttons, so on a phone it shrank to a few characters ("邮箱/用", "搜索"). It takes the row, like the reference's
-     phone toolbar (ref-models-390: the search spans the row, the controls wrap under it). */
-  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child > div[class~="flex-1"]:has(> input.input, > div > input.input) {
+     phone toolbar (ref-models-390: the search spans the row, the controls wrap under it). On these seven toolbars the
+     row's flex-1 children are the search box (or the block that holds it) and, on IP management and the pages with
+     a right-hand group, the actions group (justify-end), which is left alone. */
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child > div:first-child > div[class~="flex-1"]:not([class~="justify-end"]):not(uipad):not(uipad) {
     flex: 1 1 100%;
   }
 
   /* the same squeezed search on 订单管理 (the ops agent's page root, orders-page: the filter card's first row) */
-  html.flat-theme [data-ui~="orders-page"] > .card:first-child > div > div[class~="flex-1"]:has(> input.input) {
+  html.flat-theme [data-ui~="orders-page"] > .card:first-child > div > div[class~="flex-1"]:not([class~="justify-end"]):not(uipad) {
     flex: 1 1 100%;
   }
 
@@ -1621,12 +1637,12 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
   }
 
   /* 8.2 Affiliate: the four figures two to a row (the reference's phone KPIs, REF §7.4: grid-cols-2) */
-  html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"] {
+  html.flat-theme [data-ui="user-affiliate"] > div[class~="grid"]:not([data-uipad][data-uipad]) {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
   /* 8.2b Profile: the stat blocks two to a row (the reference's phone detail page: grid-cols-2) */
-  html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"] {
+  html.flat-theme [data-testid="profile-overview-hero"] div[class~="grid"]:not([data-uipad]) {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -1646,7 +1662,7 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
 
   /* the user dashboard's balance tile likewise takes the row (in a half-width tile the grouped figure broke inside
      its digits: "…212.4 / 3") */
-  html.flat-theme [data-ui="user-dashboard"] [class~="grid"] > .card[class~="p-4"]:has(> div > div > p[class~="text-emerald-600"]) {
+  html.flat-theme [data-ui="user-dashboard"] [class~="grid"] > .card[class~="p-4"][data-ui~="balance-tile"]:not(uipad) {
     grid-column: 1 / -1;
   }
 
@@ -1691,7 +1707,7 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
   /* 8.0b API keys: the search and the filters above the actions, as on every other toolbar at this width and on the
      reference's /models phone toolbar (the desktop already sets them on one row, 2.0); the keyboard order stays
      upstream's */
-  html.flat-theme .table-page-layout[data-ui~="user-keys"] > .layout-section-fixed:first-child + .layout-section-fixed {
+  html.flat-theme .table-page-layout[data-ui~="user-keys"]:not([data-uipad][data-uipad]) > .layout-section-fixed:first-child + .layout-section-fixed {
     order: -1;
   }
 
diff --git a/frontend/src/styles/console/pages/users-groups-proxies-keys.css b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
index 72eb3a6e254e..2d1fc954c0e9 100644
--- a/frontend/src/styles/console/pages/users-groups-proxies-keys.css
+++ b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
@@ -20,7 +20,19 @@
  * Page roots (data-ui on each view's <TablePageLayout>, one attribute each; "mgmt-page" is the group's shared token):
  *   users-page, groups-page, proxies-page, subscriptions-page, redeem-page, promo-page, announcements-page.
  * Dialogs are found by their own ids (#create-user-form, #balance-form, #create-proxy-form ...) or by the data-ui hook on
- * their first content element (listed in the dialog sections below). */
+ * their first content element (listed in the dialog sections below).
+ * Toolbar hooks (perf pass, static): data-ui="toolbar-select" on every Select of the seven toolbars (UsersView.vue 28,
+ * 42, 56, 70, 108; GroupsView.vue 25, 33, 41; ProxiesView.vue 24, 33; SubscriptionsView.vue 70, 79, 88; RedeemView.vue
+ * 17, 24; PromoCodesView.vue 17; AnnouncementsView.vue 17: Select's root takes the attribute) and data-ui="toolbar-icon"
+ * on the icon-only buttons (UsersView.vue 141, GroupsView.vue 60, ProxiesView.vue 48, SubscriptionsView.vue 104 and
+ * 163 (the guide), RedeemView.vue 38, PromoCodesView.vue 31, AnnouncementsView.vue 31).
+ * Performance (PERF.md): every data-ui hook here is static (never bound to data). The relational pseudo-class (has())
+ * is left only for the states of the two visually hidden radio groups (9.2 group replace: keyboard focus; 13.5
+ * targeting: the chosen radio and keyboard focus), which live on the input inside the label; those sit in the subject
+ * compound of a statically hooked label with a child argument. Everything else picked by what it contains carries a
+ * static hook or is found by its own classes, or the tested child is always there (said at the rule). Rewritten selectors keep the weight they replaced: a hook that has to weigh nothing is wrapped in :where(),
+ * missing weight is added by a pad that never filters anything (:not(uipad) = 0,0,1, :not([data-uipad]) = 0,1,0,
+ * :not(#uipad) = 1,0,0). */
 
 /* ================================================================== 1 · toolbar (the /models toolbar row) */
 
@@ -46,23 +58,26 @@
     gap: 8px;
   }
 
-  /* the reference's search field: 288px from 640px (REF §8.4) */
-  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child :is(div[class~="sm:w-64"], div[class~="sm:max-w-64"]):has(> input.input) {
+  /* the reference's search field: 288px from 640px (REF §8.4); on these toolbars the sm:w-64 / sm:max-w-64 / md:w-64
+     boxes are the search boxes (each holds its input directly) */
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child :is(div[class~="sm:w-64"], div[class~="sm:max-w-64"]):not(uipad[data-uipad]) {
     width: 288px;
     max-width: 288px;
     flex: 0 1 288px;
   }
 
-  /* filters: a Select as wide as its value (the dropdown keeps its own 200px minimum) */
-  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div[class~="relative"]:has(> button.select-trigger),
-  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div:is([class~="sm:w-32"], [class~="sm:w-36"], [class~="sm:w-40"], [class~="sm:w-44"], [class~="sm:w-48"]):has(> div > button.select-trigger) {
+  /* filters: a Select as wide as its value (the dropdown keeps its own 200px minimum): the Select (toolbar-select) and
+     the box that holds one (the sm:w-* boxes of users, IP management and subscriptions; the users page's attribute
+     filter box, relative, holds a field or a nested box and is left alone) */
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div[data-ui~="toolbar-select"][class~="relative"]:not(uipad),
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div:is([class~="sm:w-32"], [class~="sm:w-36"], [class~="sm:w-40"], [class~="sm:w-44"], [class~="sm:w-48"]):not([class~="relative"]):not(uipad):not(uipad) {
     width: auto;
     flex: none;
   }
 }
 
 @media (min-width: 768px) {
-  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div[class~="md:w-64"]:has(> input.input) {
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child div[class~="md:w-64"]:not(uipad[data-uipad]) {
     width: 288px;
     flex: 0 1 288px;
   }
@@ -72,11 +87,11 @@
    flex-1 sm:max-w-64 box) are the reference search the other six pages have (controls.css 3.2): the 13px Lucide search
    glyph (stroke 1.8, as Icon.vue draws it) 10px in and centred, in --ctl-glyph through a mask so it follows the theme,
    the text from 32px. At every width, like the other pages' template glyph (the phone layout stays user.css'). */
-html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~="announcements-page"]) > .layout-section-fixed:first-child > div:first-child > div[class~="sm:max-w-64"]:has(> input.input) {
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~="announcements-page"]) > .layout-section-fixed:first-child > div:first-child > div[class~="sm:max-w-64"]:not(uipad[data-uipad]) {
   position: relative;
 }
 
-html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~="announcements-page"]) > .layout-section-fixed:first-child > div:first-child > div[class~="sm:max-w-64"]:has(> input.input)::after {
+html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~="announcements-page"]) > .layout-section-fixed:first-child > div:first-child > div[class~="sm:max-w-64"]:not(uipad[data-uipad])::after {
   content: '';
   position: absolute;
   top: 50%;
@@ -95,10 +110,10 @@ html.flat-theme :is([data-ui~="redeem-page"], [data-ui~="promo-page"], [data-ui~
 }
 
 /* Icon-only buttons (refresh, the subscription guide) are the reference's square: 30 x 30 (REF §8.3 icon buttons). They
-   are found by their glyph: a button whose label is a bare text node also has the glyph as its only element child (one
-   :has() with a child argument on a button under the page root; `button` keeps the specificity of the former pair). */
+   carry data-ui="toolbar-icon" (the seven refresh buttons, SubscriptionsView's guide); the pad keeps the former glyph
+   test's weight (0,3,2). */
 @media (min-width: 640px) {
-  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child button.btn:has(> svg:only-child:is(.lucide-rotate-cw, .lucide-circle-help)) {
+  html.flat-theme [data-ui~="mgmt-page"] > .layout-section-fixed:first-child button.btn[data-ui~="toolbar-icon"]:not(uipad[data-uipad]) {
     width: var(--ui-control-h);
     min-width: var(--ui-control-h);
     padding-left: 0;
@@ -175,9 +190,10 @@ html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"]
 }
 
 /* with a mouse or trackpad the labelled buttons are the 28px square (the label is the tip: behaviour B2.1 hides and places
-   it, overlays.css 2.6 draws it, for every table of this group) */
+   it, overlays.css 2.6 draws it, for every table of this group); every row action of users, groups, IP management,
+   subscriptions and redeem codes has its label span, promo codes and announcements have glyph-only ones (below) */
 @media (hover: hover) and (pointer: fine) {
-  html.flat-theme [data-ui~="mgmt-page"] .table-wrapper td[data-column="actions"] button[class~="flex-col"]:has(> span[class~="text-xs"]) {
+  html.flat-theme [data-ui~="mgmt-page"]:where(:not([data-ui~="announcements-page"]):not([data-ui~="promo-page"])) .table-wrapper td[data-column="actions"] button[class~="flex-col"]:not(uipad[data-uipad]) {
     width: 28px;
     padding: 0;
   }
@@ -623,11 +639,11 @@ html.flat-theme [data-ui~="announcements-page"] td[data-column="timeRange"] span
    user-attributes-config, GroupRateMultipliersModal group-rate-multipliers, GroupRPMOverridesModal group-rpm-overrides,
    AnnouncementReadStatusDialog announcement-read-status, AnnouncementTargetingEditor announcement-targeting, the proxy
    dialog's tab strip proxy-create-tabs, the redeem result's body redeem-result-body, the subscription guide's title
-   subscription-guide-title; and, so that no rule needs a :has() anchor above what it styles (PERF, 2026-09-29), the
-   redeem result's header redeem-result-head, the generate-codes form redeem-generate-form, quick add's parse result
-   proxy-parse-result, the quality report's summary proxy-quality-summary and each row of the group sort dialog
-   group-sort-row. The others are found by their form ids. :has() stays only in the subject compound, on an anchor under
-   a page root, a hook or an id, with a child argument. */
+   subscription-guide-title; and, so that no rule has to find them by their content (PERF, 2026-09-29), the redeem
+   result's header redeem-result-head, the generate-codes form redeem-generate-form, quick add's parse result
+   proxy-parse-result, the quality report's summary proxy-quality-summary, each row of the group sort dialog
+   group-sort-row, each choice of group replace replace-option (GroupReplaceModal.vue) and the two targeting choices
+   targeting-option (AnnouncementTargetingEditor.vue). The others are found by their form ids. */
 
 /* 9.1 The user card at the top of the user dialogs (deposit / refund, balance history, API keys, allowed groups): the
    reference's option card (1px line, radius 8, the grouped fill at 60 %, 12 / 14 inset), its avatar the 28px icon square
@@ -746,7 +762,7 @@ html.flat-theme [data-ui="group-replace"] label[class~="border-2"] > div[class~=
   background-color: rgb(var(--ui-on-primary));
 }
 
-html.flat-theme [data-ui="group-replace"] label[class~="border-2"]:has(> input:focus-visible) {
+html.flat-theme [data-ui="group-replace"] label[data-ui~="replace-option"]:where([class~="border-2"]):has(> input:focus-visible) {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: 2px;
 }
@@ -832,7 +848,7 @@ html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-over
    new balance, the subscription guide's tip, the invitation-code hint), the warning pair for a warning. */
 html.flat-theme #balance-form > div[class~="border-blue-200"],
 html.flat-theme [data-ui="subscription-guide-title"] ~ div[class~="bg-blue-50"],
-html.flat-theme form[data-ui="redeem-generate-form"] > div[class~="bg-blue-50"][class~="p-3"] {
+html.flat-theme form[data-ui="redeem-generate-form"]:not(uipad):not(uipad) > div[class~="bg-blue-50"][class~="p-3"] {
   padding: 10px 14px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-md);
@@ -840,7 +856,7 @@ html.flat-theme form[data-ui="redeem-generate-form"] > div[class~="bg-blue-50"][
   color: rgb(var(--ui-ink-soft));
 }
 
-html.flat-theme form[data-ui="redeem-generate-form"] > div[class~="bg-blue-50"][class~="p-3"] > p {
+html.flat-theme form[data-ui="redeem-generate-form"]:not(uipad):not(uipad) > div[class~="bg-blue-50"][class~="p-3"] > p {
   color: rgb(var(--ui-ink-soft));
 }
 
@@ -861,13 +877,13 @@ html.flat-theme [data-ui="user-platform-quota"] > div[class~="border-amber-200"]
 
 /* 9.7 A positive CTA is the accent button (the deposit's confirm; decision 2): upstream's emerald fill becomes the accent
    with on-accent text (white on #168848, ink on the mint). The footer's submit names its form (form="balance-form"). */
-html.flat-theme .modal-footer button.btn[form="balance-form"][class~="bg-emerald-600"] {
+html.flat-theme .modal-footer button.btn[form="balance-form"][class~="bg-emerald-600"]:not(#uipad) {
   border-color: rgb(var(--ui-primary));
   background-color: rgb(var(--ui-primary));
   color: rgb(var(--ui-on-primary));
 }
 
-html.flat-theme .modal-footer button.btn[form="balance-form"][class~="bg-emerald-600"]:not(:disabled):hover {
+html.flat-theme .modal-footer button.btn[form="balance-form"][class~="bg-emerald-600"]:not(#uipad):not(:disabled):hover {
   border-color: rgb(var(--ui-primary-hover));
   background-color: rgb(var(--ui-primary-hover));
 }
@@ -1353,7 +1369,7 @@ html.flat-theme :is([data-ui="group-rate-multipliers"], [data-ui="group-rpm-over
 
 /* 11.3 Sort order: each group a draggable row of the reference's list (1px line, radius 8, no lift shadow), its handle faint,
    the id Geist Mono 11 muted; the platform chip is the identity chip (data.css). The row carries the hook group-sort-row
-   (GroupsView's sort dialog); `div >` keeps the specificity the former :has() gave. */
+   (GroupsView's sort dialog); `div >` keeps the weight of the former platform-chip test. */
 html.flat-theme .modal-body div > div[data-ui="group-sort-row"][class~="cursor-grab"][class~="rounded-lg"][class~="border"] {
   padding: 10px 12px;
   border-color: rgb(var(--ui-line));
@@ -1388,8 +1404,9 @@ html.flat-theme .modal-body div > div[data-ui="group-sort-row"][class~="cursor-g
    accent (primary-50 band, primary dot, title, hint and border) only to set it apart from the family card, whose band is
    grey with a blue dot: that is decoration, not a state (nothing succeeded, nothing is selected), so both are neutral and
    their titles tell them apart (decision 2). The mapping rows are the list rows (no lift shadow), the empty state and the
-   add button the reference's dashed frame; 「添加精确映射」 stays the accent link. */
-html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"]:has(> div[class~="border-b"][class~="px-4"][class~="py-3"]:first-child) {
+   add button the reference's dashed frame; 「添加精确映射」 stays the accent link. The two cards are the forms' only
+   relative overflow-hidden rounded-xl bordered boxes, and each starts with its header band. */
+html.flat-theme :is(#create-group-form, #edit-group-form) div[class~="relative"][class~="overflow-hidden"][class~="rounded-xl"][class~="border"]:not(uipad[data-uipad][data-uipad][data-uipad][data-uipad]) {
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
   background-color: rgb(var(--ui-surface));
@@ -1514,7 +1531,7 @@ html.flat-theme [data-ui="proxy-create-tabs"] > div:first-child > button:focus-v
 
 /* 12.2 Expiry presets (7 / 30 / 90 / 180 days): one control, the reference's segmented choice (REF §8.5: the structural
    frame, 2px inset, 12.5 / 600 segments, the matching preset the ink thumb), as its 24 hours / 7 days / 30 days. */
-html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"]:has(> button.btn-sm) {
+html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"]:not(uipad[data-uipad]) {
   display: inline-flex;
   gap: 0;
   margin-bottom: 8px;
@@ -1552,21 +1569,21 @@ html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][cla
 /* 12.3 Quick add's parse result and the quality report's summary: neutral cards (1px line, the grouped fill), the report's
    score 15/600 Geist Mono (the reference's statistic figure); its table is data.css' plain table. Hooks (ProxiesView):
    proxy-parse-result, proxy-quality-summary. */
-html.flat-theme .modal-body div[data-ui="proxy-parse-result"][class~="rounded-lg"][class~="bg-gray-50"][class~="p-4"] {
+html.flat-theme .modal-body div[data-ui="proxy-parse-result"][class~="rounded-lg"][class~="bg-gray-50"][class~="p-4"]:not(uipad[data-uipad]):not(uipad):not(uipad) {
   padding: 10px 14px;
   border: 1px solid rgb(var(--ui-line));
   border-radius: var(--ui-radius-md);
   background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
 
-html.flat-theme .modal-body > div > div[data-ui="proxy-quality-summary"][class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"] {
+html.flat-theme .modal-body > div > div[data-ui="proxy-quality-summary"][class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"]:not(uipad[data-uipad]):not(uipad):not(uipad) {
   padding: 12px 14px;
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
   background: color-mix(in srgb, rgb(var(--ui-subtle)) 60%, rgb(var(--ui-surface)));
 }
 
-html.flat-theme .modal-body > div > div[data-ui="proxy-quality-summary"][class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"] div[class~="text-2xl"][class~="font-semibold"] {
+html.flat-theme .modal-body > div > div[data-ui="proxy-quality-summary"][class~="rounded-lg"][class~="border"][class~="bg-gray-50"][class~="p-4"]:not(uipad):not(uipad) div[class~="text-2xl"][class~="font-semibold"] {
   font-family: var(--ui-font-mono);
   font-size: 15px;
   line-height: 22.5px;
@@ -1642,8 +1659,8 @@ html.flat-theme [data-ui="subscription-guide-title"] ~ div div[class~="overflow-
 
 /* 13.3 Generate codes: the code-expiry choices are one control, the reference's segmented choice (the structural frame,
    2px inset, 12.5 / 600 segments, the chosen one the ink thumb) instead of accent-tinted boxes. The frame is the grid of
-   the generate form (hook redeem-generate-form, RedeemView); the repeated attributes keep the former :has() specificity. */
-html.flat-theme form[data-ui="redeem-generate-form"] > div > div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"][class~="grid-cols-2"][class~="sm:grid-cols-5"] {
+   the generate form (hook redeem-generate-form, RedeemView); the pad keeps the former button test's weight (0,8,3). */
+html.flat-theme form[data-ui="redeem-generate-form"] > :where(div) > div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"]:not([data-uipad][data-uipad][data-uipad]) {
   gap: 0;
   padding: 2px;
   border: 1px solid rgb(var(--ui-line));
@@ -1683,7 +1700,7 @@ html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"
    12px muted), its success mark the 28px square in the success pair (a status), the close the 28px bordered button; the
    codes the reference's snippet (Geist Mono 12.5 on the canvas, radius 6, 12 inset); the footer the dialog footer. Hooks
    (RedeemView): redeem-result-head on the header, redeem-result-body on the body; the footer is the body's next sibling.
-   `div > …:first-child` / `div > … + div:last-child` keep the specificity of the former :has() anchor. */
+   `div > …:first-child` / `div > … + div:last-child` keep the weight of the former anchor. */
 html.flat-theme div > div[data-ui="redeem-result-head"]:first-child {
   padding: var(--ui-dialog-head-y, 14px) var(--ui-dialog-x, 18px);
   border-color: rgb(var(--ui-line));
@@ -1782,7 +1799,7 @@ html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:first
   font-size: 12px;
 }
 
-html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child:has(> label > input[type="radio"]) {
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child:not(uipad[data-uipad]):not(uipad) {
   display: inline-flex;
   gap: 0;
   padding: 2px;
@@ -1791,7 +1808,7 @@ html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-
   background-color: rgb(var(--ui-surface));
 }
 
-html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:has(> input[type="radio"]) {
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:not(uipad[data-uipad]) {
   position: relative;
   gap: 0;
   padding: 6px 14px;
@@ -1804,11 +1821,11 @@ html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
 
-html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:has(> input[type="radio"]):hover {
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:not(uipad[data-uipad]):hover {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:has(> input[type="radio"]:checked) {
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:where([data-ui~="targeting-option"]):has(> input[type="radio"]:checked) {
   background-color: rgb(var(--ui-ink));
   color: rgb(var(--ui-on-ink));
 }
@@ -1823,7 +1840,7 @@ html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-
   opacity: 0;
 }
 
-html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:has(> input[type="radio"]:focus-visible) {
+html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label[data-ui~="targeting-option"]:has(> input:focus-visible) {
   outline: 2px solid rgb(var(--ui-focus));
   outline-offset: 2px;
 }
diff --git a/frontend/src/styles/console/shell.css b/frontend/src/styles/console/shell.css
index 5a6a015ae619..017a6c3719ed 100644
--- a/frontend/src/styles/console/shell.css
+++ b/frontend/src/styles/console/shell.css
@@ -65,7 +65,7 @@ html.flat-theme:root {
 /* ================================================================== frame */
 /* The reference draws nothing behind the page: no mesh, no orbs, no gradient washes (REF §10 item 15). */
 html.flat-theme .ui-decor,
-html.flat-theme div[class~="bg-mesh-gradient"][class~="fixed"] {
+html.flat-theme div.bg-mesh-gradient.fixed {
   display: none;
 }
 
@@ -87,7 +87,7 @@ html.flat-theme .app-main {
     margin-left: var(--ui-shell-sidebar-w);
   }
 
-  html.flat-theme .app-main[class~="lg:ml-[72px]"] {
+  html.flat-theme .app-main.lg\:ml-\[72px\] {
     margin-left: var(--ui-shell-rail-w);
   }
 }
@@ -100,7 +100,7 @@ html.flat-theme .app-main > main {
 
 /* Page rhythm: a full-width page's top-level blocks sit 12px apart like the reference's (/logs: header row, toolbar,
    KPI row, cards). Centred narrow pages (mx-auto max-w-*) keep their spacing for their page group. */
-html.flat-theme .app-main > main > :is([class~="space-y-6"], [class~="space-y-5"], [class~="space-y-4"]):not([class~="mx-auto"]) > :not([hidden]) ~ :not([hidden]) {
+html.flat-theme .app-main > main > :is(.space-y-6, .space-y-5, .space-y-4):not(.mx-auto) > :not([hidden]) ~ :not([hidden]) {
   margin-top: var(--ui-shell-gap);
 }
 
@@ -116,15 +116,17 @@ html.flat-theme .custom-page-layout {
    column under the header instead of subtracting a fixed header height. With the one-line header it ends where the
    calc above ends it (900 - 30). */
 @media (min-width: 1024px) {
-  /* Perf pass: the wrapper is hooked ([data-ui="app-shell"], AppLayout.vue) instead of asking `:has(> main > ...)` on
-     .app-main, a body-level anchor whose whole subtree sat in one invalidation set. */
-  html.flat-theme [data-ui~="app-shell"] .app-main {
+  /* Perf pass: whether the routed page is a full-height layout is known only below .app-main (the page component
+     renders it inside the shell's <main>), so these two keep a has-test: in the subject compound, on the one .app-main
+     (scoped under the shell root, [data-ui="app-shell"], AppLayout.vue) and its <main>, with child-only arguments
+     keyed on the two layout classes; nothing is selected after the test. :where() keeps the original 0,3,2 / 0,3,3. */
+  html.flat-theme :where([data-ui~="app-shell"]) > .app-main:has(> main > :is(.table-page-layout, .custom-page-layout)) {
     display: flex;
     flex-direction: column;
     height: 100vh;
   }
 
-  html.flat-theme .app-main > main:has(> :is(.table-page-layout, .custom-page-layout)):not(uipad) {
+  html.flat-theme :where([data-ui~="app-shell"]) > .app-main > main:has(> :is(.table-page-layout, .custom-page-layout)):not(uipad) {
     display: flex;
     flex: 1 1 0;
     flex-direction: column;
@@ -152,7 +154,7 @@ html.flat-theme .sidebar {
   transition-timing-function: var(--ui-ease-out);
 }
 
-html.flat-theme .sidebar[class~="w-[72px]"] {
+html.flat-theme .sidebar.w-\[72px\] {
   width: var(--ui-shell-rail-w);
   padding-left: clamp(0.5rem, 1.5vw, 0.75rem);
   padding-right: clamp(0.5rem, 1.5vw, 0.75rem);
@@ -220,7 +222,7 @@ html.flat-theme .sidebar .sidebar-brand > .relative > button:hover {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme .sidebar .sidebar-brand > .relative > button[class~="bg-amber-100"] {
+html.flat-theme .sidebar .sidebar-brand > .relative > button.bg-amber-100 {
   color: rgb(var(--ui-warning));
 }
 
@@ -228,12 +230,12 @@ html.flat-theme .sidebar .sidebar-brand > .relative > button span {
   font-weight: inherit;
 }
 
-html.flat-theme .sidebar .sidebar-brand > .relative > button > span[class~="h-2"] {
+html.flat-theme .sidebar .sidebar-brand > .relative > button > span.h-2 {
   width: 6px;
   height: 6px;
 }
 
-html.flat-theme .sidebar .sidebar-brand > .relative > button > span[class~="h-2"] > span {
+html.flat-theme .sidebar .sidebar-brand > .relative > button > span.h-2 > span {
   width: 6px;
   height: 6px;
 }
@@ -323,13 +325,13 @@ html.flat-theme .sidebar .sidebar-label-flex > svg {
 }
 
 /* A group's children hang from a 1px guide under the parent's icon. */
-html.flat-theme .sidebar .sidebar-section > div[class~="border-l"] {
+html.flat-theme .sidebar .sidebar-section > div.border-l {
   margin: 1px 0 4px 17px;
   padding-left: 8px;
   border-left-color: rgb(var(--ui-line));
 }
 
-html.flat-theme .sidebar .sidebar-section > div[class~="border-l"] > .sidebar-link {
+html.flat-theme .sidebar .sidebar-section > div.border-l > .sidebar-link {
   min-height: 30px;
   padding-top: 5px;
   padding-bottom: 5px;
@@ -354,7 +356,7 @@ html.flat-theme .sidebar .sidebar-link.sidebar-link-collapsed > .sidebar-label-c
 /* Bottom: a 1px rule, 12px, then the theme switch as a row with the collapse control at its end: the reference's
    panel-left glyph, 28 x 28, ink 30 % -> 60 % on hover with no fill (REF §8.1; 46 % here for 3:1). The collapse
    label stays for screen readers. */
-html.flat-theme .sidebar > div[class~="mt-auto"] {
+html.flat-theme .sidebar > div.mt-auto {
   display: flex;
   align-items: center;
   gap: 4px;
@@ -362,13 +364,13 @@ html.flat-theme .sidebar > div[class~="mt-auto"] {
   border-top: 1px solid rgb(var(--ui-line));
 }
 
-html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:first-child {
+html.flat-theme .sidebar > div.mt-auto > button.sidebar-link:first-child {
   flex: 1 1 auto;
   width: auto;
   margin: 0;
 }
 
-html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-child:not(:first-child) {
+html.flat-theme .sidebar > div.mt-auto > button.sidebar-link:last-child:not(:first-child) {
   flex: 0 0 28px;
   justify-content: center;
   width: 28px;
@@ -380,16 +382,16 @@ html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-chil
   color: rgb(var(--ui-ink) / var(--ui-shell-nav-icon));
 }
 
-html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-child:not(:first-child):hover {
+html.flat-theme .sidebar > div.mt-auto > button.sidebar-link:last-child:not(:first-child):hover {
   background-color: transparent;
   color: rgb(var(--ui-ink) / 0.6);
 }
 
-html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-child:not(:first-child) > svg {
+html.flat-theme .sidebar > div.mt-auto > button.sidebar-link:last-child:not(:first-child) > svg {
   color: inherit;
 }
 
-html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-child:not(:first-child) > .sidebar-label {
+html.flat-theme .sidebar > div.mt-auto > button.sidebar-link:last-child:not(:first-child) > .sidebar-label {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -401,29 +403,29 @@ html.flat-theme .sidebar > div[class~="mt-auto"] > button.sidebar-link:last-chil
   border: 0;
 }
 
-html.flat-theme .sidebar[class~="w-[72px]"] > div[class~="mt-auto"] {
+html.flat-theme .sidebar.w-\[72px\] > div.mt-auto {
   flex-direction: column;
   gap: 4px;
 }
 
-html.flat-theme .sidebar[class~="w-[72px]"] > div[class~="mt-auto"] > button.sidebar-link:first-child {
+html.flat-theme .sidebar.w-\[72px\] > div.mt-auto > button.sidebar-link:first-child {
   flex: 0 0 auto;
   width: 35px;
 }
 
 /* Phones and tablets: the drawer floats over the page on the overlay scrim. The scrim sits above the sticky bar
    (upstream stacks both at z-30, so the bar stayed undimmed beside the open drawer) and under the drawer (z-40). */
-html.flat-theme .sidebar ~ div[class~="bg-black/50"] {
+html.flat-theme .sidebar ~ div.bg-black\/50 {
   z-index: 35;
   background-color: rgb(var(--ui-scrim));
 }
 
 @media (max-width: 1023.98px) {
-  html.flat-theme .sidebar:not([class~="w-[72px]"]) {
+  html.flat-theme .sidebar:not(.w-\[72px\]) {
     width: 15rem;
   }
 
-  html.flat-theme .sidebar:not([class~="-translate-x-full"]) {
+  html.flat-theme .sidebar:not(.-translate-x-full) {
     box-shadow: var(--ui-shadow-overlay);
   }
 }
@@ -451,7 +453,7 @@ html.flat-theme .app-main > header > div > div:last-child {
 }
 
 @media (max-width: 1023.98px) {
-  html.flat-theme .app-main > header > div > div:first-child > button[class~="btn-icon"] {
+  html.flat-theme .app-main > header > div > div:first-child > button.btn-icon {
     display: inline-grid;
     place-items: center;
     width: 35px;
@@ -462,12 +464,12 @@ html.flat-theme .app-main > header > div > div:last-child {
     color: rgb(var(--ui-muted));
   }
 
-  html.flat-theme .app-main > header > div > div:first-child > button[class~="btn-icon"]:hover {
+  html.flat-theme .app-main > header > div > div:first-child > button.btn-icon:hover {
     background-color: rgb(var(--ui-subtle));
     color: rgb(var(--ui-ink));
   }
 
-  html.flat-theme .app-main > header > div > div:first-child > button[class~="btn-icon"] svg {
+  html.flat-theme .app-main > header > div > div:first-child > button.btn-icon svg {
     width: 15px;
     height: 15px;
   }
@@ -484,22 +486,21 @@ html.flat-theme .app-main > header > div > div:last-child {
     flex: 0 0 auto;
   }
 
-  /* Perf pass: the h1 is always there (AppHeader renders the title), so the `:has(> h1)` test on the wrapper was
-     redundant; the wrapper is named by the h1 it holds (`div:has(> h1)` removal — see the desktop rule below) and
-     the once-hidden title now displays. */
-  html.flat-theme .app-main > header > div > div:first-child > div[class~="hidden"][data-ui~="header-title"] {
+  /* Perf pass: the title wrapper is hooked ([data-ui="header-title"], AppHeader.vue; its h1 is unconditional) instead
+     of found by a has-h1 test; :where() + :not(uipad) keep the original 0,4,6. */
+  html.flat-theme .app-main > header > div > div:first-child > div.hidden:where([data-ui~="header-title"]):not(uipad) {
     display: block;
     flex: 1 1 auto;
     min-width: 0;
   }
 
-  html.flat-theme .app-main > header > div > div:first-child > div[class~="hidden"] > h1 {
+  html.flat-theme .app-main > header > div > div:first-child > div.hidden > h1 {
     overflow: hidden;
     font: 600 14px/20px var(--ui-font);
     text-overflow: ellipsis;
   }
 
-  html.flat-theme .app-main > header > div > div:first-child > div[class~="hidden"] > h1 + p {
+  html.flat-theme .app-main > header > div > div:first-child > div.hidden > h1 + p {
     display: none;
   }
 }
@@ -536,8 +537,9 @@ html.flat-theme .app-main > header > div > div:last-child {
   /* Title · description: the page title 20/28 600 (REF §8.2), the description 13px muted on the same baseline
      after a faint dot. A description longer than the row wraps, its lines under its first word (nothing is cut; the
      ellipsis hid the end of 操作日志's and 提示词审计's notes). Perf pass: the wrapper is hooked
-     ([data-ui="header-title"], AppHeader.vue) instead of found by `div:has(> h1)` on a bare div. */
-  html.flat-theme .app-main > header [data-ui~="header-title"] {
+     ([data-ui="header-title"], AppHeader.vue) instead of found by a has-h1 test on a bare div; :where() +
+     :not(uipad) keep the original 0,2,4. */
+  html.flat-theme .app-main > header div:where([data-ui~="header-title"]):not(uipad) {
     display: flex;
     align-items: baseline;
     min-width: 0;
@@ -590,7 +592,7 @@ html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [dat
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button)[class~="text-blue-600"] {
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button).text-blue-600 {
   color: rgb(var(--ui-ink));
 }
 
@@ -599,14 +601,14 @@ html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [dat
   height: 15px;
 }
 
-html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button) > span[class~="absolute"] {
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button) > span.absolute {
   top: 6px;
   right: 6px;
   width: 6px;
   height: 6px;
 }
 
-html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button) > span[class~="absolute"] > span {
+html.flat-theme .app-main > header :is(button[data-ui="announcement-bell"], [data-ui="announcement-bell"] > button) > span.absolute > span {
   width: 6px;
   height: 6px;
 }
@@ -655,7 +657,7 @@ html.flat-theme .app-main > header [data-ui="header-locale"] > button:hover {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme .app-main > header [data-ui="header-locale"] > button > span[class~="text-base"] {
+html.flat-theme .app-main > header [data-ui="header-locale"] > button > span.text-base {
   font-size: 13px;
   line-height: 1;
 }
@@ -688,12 +690,12 @@ html.flat-theme .app-main > header [data-ui="header-subscription"] > button > sv
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme .app-main > header [data-ui="header-subscription"] > button div[class~="h-2"][class~="w-2"] {
+html.flat-theme .app-main > header [data-ui="header-subscription"] > button div.h-2.w-2 {
   width: 6px;
   height: 6px;
 }
 
-html.flat-theme .app-main > header [data-ui="header-subscription"] > button span[class~="text-xs"] {
+html.flat-theme .app-main > header [data-ui="header-subscription"] > button span.text-xs {
   font: 500 11px/16.5px var(--ui-font-mono);
   font-variant-numeric: tabular-nums;
   color: inherit;
@@ -718,13 +720,13 @@ html.flat-theme .app-main > header [data-ui="header-balance"] > svg {
   color: rgb(var(--ui-muted));
 }
 
-html.flat-theme .app-main > header [data-ui="header-balance"] > span[class~="text-sm"] {
+html.flat-theme .app-main > header [data-ui="header-balance"] > span.text-sm {
   font: 500 12.5px/18.75px var(--ui-font-mono);
   font-variant-numeric: tabular-nums;
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme .app-main > header [data-ui="header-balance"] > span[class~="rounded-full"] {
+html.flat-theme .app-main > header [data-ui="header-balance"] > span.rounded-full {
   padding: 1px 6px;
   border-radius: 9999px;
   background-color: rgb(var(--ui-warning-soft));
@@ -733,7 +735,7 @@ html.flat-theme .app-main > header [data-ui="header-balance"] > span[class~="rou
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] {
+html.flat-theme .app-main > header [data-ui="header-balance"] > div.absolute {
   min-width: 224px;
   margin-top: 6px;
   padding: 8px 12px;
@@ -744,20 +746,20 @@ html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="abso
   font: 400 12px/18px var(--ui-font);
 }
 
-html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] span {
+html.flat-theme .app-main > header [data-ui="header-balance"] > div.absolute span {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] span:last-child {
+html.flat-theme .app-main > header [data-ui="header-balance"] > div.absolute span:last-child {
   font-family: var(--ui-font-mono);
   font-variant-numeric: tabular-nums;
 }
 
-html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] span:last-child[class~="text-amber-700"] {
+html.flat-theme .app-main > header [data-ui="header-balance"] > div.absolute span:last-child.text-amber-700 {
   color: rgb(var(--ui-warning));
 }
 
-html.flat-theme .app-main > header [data-ui="header-balance"] > div[class~="absolute"] > div[class~="border-t"] {
+html.flat-theme .app-main > header [data-ui="header-balance"] > div.absolute > div.border-t {
   border-top-color: rgb(var(--ui-line));
 }
 
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index e1caf76df064..8d167323e6e4 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -275,7 +275,6 @@
           :data="accounts"
           :loading="loading"
           row-key="id"
-          :selected-keys="selIds"
           :server-side-sort="true"
           @sort="handleSort"
           default-sort-key="name"
diff --git a/frontend/src/views/admin/AnnouncementsView.vue b/frontend/src/views/admin/AnnouncementsView.vue
index e116663147d6..bd5f35edf13c 100644
--- a/frontend/src/views/admin/AnnouncementsView.vue
+++ b/frontend/src/views/admin/AnnouncementsView.vue
@@ -14,6 +14,7 @@
             />
           </div>
           <Select
+            data-ui="toolbar-select"
             v-model="filters.status"
             :options="statusFilterOptions"
             class="w-40"
@@ -27,6 +28,7 @@
               :disabled="loading"
               class="btn btn-secondary"
               :title="t('common.refresh')"
+              data-ui="toolbar-icon"
             >
               <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
             </button>
diff --git a/frontend/src/views/admin/AuditLogView.vue b/frontend/src/views/admin/AuditLogView.vue
index f05dddab24ca..e146d028b6aa 100644
--- a/frontend/src/views/admin/AuditLogView.vue
+++ b/frontend/src/views/admin/AuditLogView.vue
@@ -7,9 +7,9 @@
           <div class="flex flex-wrap items-end justify-between gap-4">
             <!-- Left: filter fields -->
             <div class="flex flex-1 flex-wrap items-end gap-4">
-              <div class="w-full sm:w-auto sm:min-w-[240px]">
+              <div data-ui="audit-filter" class="w-full sm:w-auto sm:min-w-[240px]">
                 <label class="input-label">{{ t('admin.audit.filters.q') }}</label>
-                <div class="relative">
+                <div data-ui="search-box" class="relative">
                   <Icon
                     name="search"
                     size="md"
@@ -25,37 +25,37 @@
                 </div>
               </div>
 
-              <div class="w-full sm:w-auto sm:min-w-[200px]">
+              <div data-ui="audit-filter" class="w-full sm:w-auto sm:min-w-[200px]">
                 <label class="input-label">{{ t('admin.audit.filters.actorEmail') }}</label>
                 <input v-model.trim="filters.actor_email" type="text" class="input" @keyup.enter="search" />
               </div>
 
-              <div class="w-full sm:w-auto sm:min-w-[180px]">
+              <div data-ui="audit-filter" class="w-full sm:w-auto sm:min-w-[180px]">
                 <label class="input-label">{{ t('admin.audit.filters.action') }}</label>
                 <input v-model.trim="filters.action" type="text" class="input" @keyup.enter="search" />
               </div>
 
-              <div class="w-full sm:w-auto sm:min-w-[160px]">
+              <div data-ui="audit-filter" class="w-full sm:w-auto sm:min-w-[160px]">
                 <label class="input-label">{{ t('admin.audit.filters.clientIp') }}</label>
                 <input v-model.trim="filters.client_ip" type="text" class="input" @keyup.enter="search" />
               </div>
 
-              <div class="w-full sm:w-auto sm:min-w-[140px]">
+              <div data-ui="audit-filter" class="w-full sm:w-auto sm:min-w-[140px]">
                 <label class="input-label">{{ t('admin.audit.filters.method') }}</label>
                 <Select v-model="filters.method" :options="methodOptions" @change="search" />
               </div>
 
-              <div class="w-full sm:w-auto sm:min-w-[170px]">
+              <div data-ui="audit-filter" class="w-full sm:w-auto sm:min-w-[170px]">
                 <label class="input-label">{{ t('admin.audit.filters.authMethod') }}</label>
                 <Select v-model="filters.auth_method" :options="authMethodOptions" @change="search" />
               </div>
 
-              <div class="w-full sm:w-auto sm:min-w-[140px]">
+              <div data-ui="audit-filter" class="w-full sm:w-auto sm:min-w-[140px]">
                 <label class="input-label">{{ t('admin.audit.filters.result') }}</label>
                 <Select v-model="filters.success" :options="resultOptions" @change="search" />
               </div>
 
-              <div class="w-full sm:w-auto sm:min-w-[170px]">
+              <div data-ui="audit-filter" class="w-full sm:w-auto sm:min-w-[170px]">
                 <label class="input-label">{{ t('admin.dashboard.timeRange') }}</label>
                 <Select
                   :model-value="timeRange"
diff --git a/frontend/src/views/admin/BackupView.vue b/frontend/src/views/admin/BackupView.vue
index d0cb98fa1866..9b27383eea16 100644
--- a/frontend/src/views/admin/BackupView.vue
+++ b/frontend/src/views/admin/BackupView.vue
@@ -186,7 +186,7 @@
               {{ t('admin.backup.operations.description') }}
             </p>
           </div>
-          <div class="flex flex-wrap items-center gap-2">
+          <div data-ui="dense-btn" class="flex flex-wrap items-center gap-2">
             <div class="flex items-center gap-1">
               <label class="text-xs text-gray-600 dark:text-gray-400">{{ t('admin.backup.operations.expireDays') }}</label>
               <input v-model.number="manualExpireDays" type="number" min="0" class="input w-20 text-xs" />
@@ -288,7 +288,7 @@
     <!-- Cloudflare R2 Setup Guide Modal -->
     <teleport to="body">
       <transition name="modal">
-        <div v-if="showR2Guide" class="fixed inset-0 z-50 flex items-center justify-center p-4" data-ui="r2-guide" @mousedown.self="showR2Guide = false">
+        <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>
           <div class="relative max-h-[85vh] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-6 shadow-2xl dark:bg-dark-800">
             <button type="button" class="absolute right-4 top-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" @click="showR2Guide = false">
@@ -371,7 +371,7 @@
     <!-- 分卷下载链接 -->
     <teleport to="body">
       <transition name="modal">
-        <div
+        <div data-ui="h2-dlg h2-dlg-close"
           v-if="downloadPartsModalOpen"
           class="fixed inset-0 z-50 flex items-center justify-center p-4"
           @mousedown.self="closeDownloadParts"
diff --git a/frontend/src/views/admin/ChannelsView.vue b/frontend/src/views/admin/ChannelsView.vue
index b01c3bada501..643ecb9779ce 100644
--- a/frontend/src/views/admin/ChannelsView.vue
+++ b/frontend/src/views/admin/ChannelsView.vue
@@ -5,7 +5,7 @@
         <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
           <!-- Left: Search + Filters -->
           <div class="flex flex-1 flex-wrap items-center gap-3">
-            <div class="relative w-full sm:w-64">
+            <div data-ui="search-box" class="relative w-full sm:w-64">
               <Icon
                 name="search"
                 size="md"
@@ -385,7 +385,7 @@
                 {{ t('admin.channels.form.noMappingRules', 'No mapping rules. Click "Add" to create one.') }}
               </div>
               <div v-else class="space-y-1">
-                <div
+                <div data-ui="dense-dlg"
                   v-for="(_, srcModel) in section.model_mapping"
                   :key="srcModel"
                   class="flex items-center gap-2"
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index f627c4c50a62..e63b7ca49068 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -179,7 +179,7 @@
                 <p class="text-xs font-medium text-gray-500 dark:text-gray-400">
                   {{ t('admin.dashboard.performance') }}
                 </p>
-                <div class="flex items-baseline gap-2">
+                <div class="flex items-baseline gap-2" data-ui="kpi-value">
                   <p class="text-xl font-bold text-gray-900 dark:text-white">
                     {{ formatTokens(stats.rpm) }}
                   </p>
@@ -228,6 +228,7 @@
               v-if="canUseBatchImage"
               type="button"
               class="group flex items-center gap-3 rounded-lg bg-gray-50 p-3 text-left transition-colors hover:bg-sky-50 dark:bg-dark-800/50 dark:hover:bg-sky-900/20"
+              data-ui="quick-action"
               @click="router.push('/batch-image')"
             >
               <span class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-sky-100 text-sky-600 dark:bg-sky-900/30 dark:text-sky-400">
@@ -246,6 +247,7 @@
             <button
               type="button"
               class="group flex items-center gap-3 rounded-lg bg-gray-50 p-3 text-left transition-colors hover:bg-emerald-50 dark:bg-dark-800/50 dark:hover:bg-emerald-900/20"
+              data-ui="quick-action"
               @click="router.push('/admin/groups')"
             >
               <span class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600 dark:bg-emerald-900/30 dark:text-emerald-400">
@@ -268,7 +270,7 @@
         <div class="space-y-6">
           <!-- Date Range Filter -->
           <div class="card p-4" data-ui="time-bar">
-            <div class="flex flex-wrap items-center gap-4">
+            <div data-ui="dense-btn" class="flex flex-wrap items-center gap-4">
               <div class="flex items-center gap-2" data-ui="range-pill">
                 <span class="text-sm font-medium text-gray-700 dark:text-gray-300"
                   >{{ t('admin.dashboard.timeRange') }}:</span
diff --git a/frontend/src/views/admin/GroupsView.vue b/frontend/src/views/admin/GroupsView.vue
index 550e499e6349..0e328dbef06e 100644
--- a/frontend/src/views/admin/GroupsView.vue
+++ b/frontend/src/views/admin/GroupsView.vue
@@ -7,7 +7,7 @@
         >
           <!-- Left: fuzzy search + filters (can wrap to multiple lines) -->
           <div class="flex flex-1 flex-wrap items-center gap-3">
-            <div class="relative w-full sm:w-64">
+            <div data-ui="search-box" class="relative w-full sm:w-64">
               <Icon
                 name="search"
                 size="md"
@@ -22,6 +22,7 @@
               />
             </div>
             <Select
+              data-ui="toolbar-select"
               v-model="filters.platform"
               :options="platformFilterOptions"
               :placeholder="t('admin.groups.allPlatforms')"
@@ -29,6 +30,7 @@
               @change="loadGroups"
             />
             <Select
+              data-ui="toolbar-select"
               v-model="filters.status"
               :options="statusOptions"
               :placeholder="t('admin.groups.allStatus')"
@@ -36,6 +38,7 @@
               @change="loadGroups"
             />
             <Select
+              data-ui="toolbar-select"
               v-if="!authStore.isSimpleMode"
               v-model="filters.is_exclusive"
               :options="exclusiveOptions"
@@ -54,6 +57,7 @@
               :disabled="loading"
               class="btn btn-secondary"
               :title="t('common.refresh')"
+              data-ui="toolbar-icon"
             >
               <Icon
                 name="refresh"
@@ -1710,7 +1714,7 @@
                     :key="getCreateMessagesDispatchRowKey(row)"
                     class="group relative rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-dark-600 dark:bg-dark-700 dark:hover:border-primary-700"
                   >
-                    <div class="flex items-center gap-4">
+                    <div data-ui="dense-dlg" class="flex items-center gap-4">
                       <div
                         class="grid flex-1 gap-4 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-start"
                       >
@@ -3355,7 +3359,7 @@
                     :key="getEditMessagesDispatchRowKey(row)"
                     class="group relative rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-all hover:border-primary-300 hover:shadow-md dark:border-dark-600 dark:bg-dark-700 dark:hover:border-primary-700"
                   >
-                    <div class="flex items-center gap-4">
+                    <div data-ui="dense-dlg" class="flex items-center gap-4">
                       <div
                         class="grid flex-1 gap-4 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:items-start"
                       >
diff --git a/frontend/src/views/admin/PromoCodesView.vue b/frontend/src/views/admin/PromoCodesView.vue
index c221964faa90..8374d8e01d88 100644
--- a/frontend/src/views/admin/PromoCodesView.vue
+++ b/frontend/src/views/admin/PromoCodesView.vue
@@ -14,6 +14,7 @@
             />
           </div>
           <Select
+            data-ui="toolbar-select"
             v-model="filters.status"
             :options="filterStatusOptions"
             class="w-36"
@@ -27,6 +28,7 @@
               :disabled="loading"
               class="btn btn-secondary"
               :title="t('common.refresh')"
+              data-ui="toolbar-icon"
             >
               <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
             </button>
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index 15445fa7053f..b3ba5d409d40 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -4,7 +4,7 @@
       <template #filters>
         <div class="flex flex-wrap items-center gap-3">
           <!-- Left: Search + Filters -->
-          <div class="relative w-full sm:w-64">
+          <div data-ui="search-box" class="relative w-full sm:w-64">
             <Icon
               name="search"
               size="md"
@@ -21,6 +21,7 @@
 
           <div class="w-full sm:w-40">
             <Select
+              data-ui="toolbar-select"
               v-model="filters.protocol"
               :options="protocolOptions"
               :placeholder="t('admin.proxies.allProtocols')"
@@ -29,6 +30,7 @@
           </div>
           <div class="w-full sm:w-36">
             <Select
+              data-ui="toolbar-select"
               v-model="filters.status"
               :options="statusOptions"
               :placeholder="t('admin.proxies.allStatus')"
@@ -43,6 +45,7 @@
               :disabled="loading"
               class="btn btn-secondary"
               :title="t('common.refresh')"
+              data-ui="toolbar-icon"
             >
               <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
             </button>
@@ -94,7 +97,6 @@
           :columns="columns"
           :data="proxies"
           :loading="loading"
-          :selected-keys="selectedProxyKeys"
           :server-side-sort="true"
           default-sort-key="id"
           default-sort-order="desc"
@@ -1097,7 +1099,6 @@ const batchQualityChecking = ref(false)
 const proxyTableRef = ref<HTMLElement | null>(null)
 const {
   selectedSet: selectedProxyIds,
-  selectedIds: selectedProxyKeys,
   selectedCount,
   allVisibleSelected,
   isSelected,
diff --git a/frontend/src/views/admin/RedeemView.vue b/frontend/src/views/admin/RedeemView.vue
index 539a72656657..46a182a70d1a 100644
--- a/frontend/src/views/admin/RedeemView.vue
+++ b/frontend/src/views/admin/RedeemView.vue
@@ -14,12 +14,14 @@
             />
           </div>
           <Select
+            data-ui="toolbar-select"
             v-model="filters.type"
             :options="filterTypeOptions"
             class="w-36"
             @change="loadCodes"
           />
           <Select
+            data-ui="toolbar-select"
             v-model="filters.status"
             :options="filterStatusOptions"
             class="w-36"
@@ -33,6 +35,7 @@
               :disabled="loading"
               class="btn btn-secondary"
               :title="t('common.refresh')"
+              data-ui="toolbar-icon"
             >
               <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
             </button>
@@ -60,7 +63,6 @@
           :columns="columns"
           :data="codes"
           :loading="loading"
-          :selected-keys="selectedCodeKeys"
           :server-side-sort="true"
           default-sort-key="id"
           default-sort-order="desc"
@@ -276,7 +278,7 @@
 
     <!-- Generate Codes Dialog -->
     <Teleport to="body">
-      <div v-if="showGenerateDialog" class="fixed inset-0 z-50 flex items-center justify-center">
+      <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
           class="relative z-10 w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-dark-800"
@@ -413,7 +415,7 @@
 
     <!-- Batch Update Dialog -->
     <Teleport to="body">
-      <div
+      <div data-ui="h2-dlg"
         v-if="showBatchUpdateDialog"
         class="fixed inset-0 z-50 flex items-center justify-center p-4"
       >
@@ -805,7 +807,6 @@ const copiedCode = ref<string | null>(null)
 
 const {
   selectedSet: selectedCodeIds,
-  selectedIds: selectedCodeKeys,
   selectedCount,
   allVisibleSelected,
   select,
diff --git a/frontend/src/views/admin/RiskControlView.vue b/frontend/src/views/admin/RiskControlView.vue
index 03413b1916ae..39a39752bdc7 100644
--- a/frontend/src/views/admin/RiskControlView.vue
+++ b/frontend/src/views/admin/RiskControlView.vue
@@ -280,7 +280,7 @@
             </div>
           </div>
 
-          <div class="overflow-x-auto">
+          <div class="overflow-x-auto" data-ui="log-table">
             <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
               <thead class="bg-gray-50 dark:bg-dark-800">
                 <tr>
@@ -724,7 +724,7 @@
                 <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ t('admin.riskControl.groupScope') }}</h3>
                 <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ t('admin.riskControl.groupScopeHint') }}</p>
               </div>
-              <div class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
+              <div data-ui="seg-box" class="inline-flex rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
                 <button
                   type="button"
                   class="rounded-md px-3 py-1.5 text-sm font-medium transition-colors"
@@ -745,7 +745,7 @@
             </div>
 
             <div v-if="!configForm.all_groups" class="space-y-4">
-              <div class="relative">
+              <div data-ui="search-box" class="relative">
                 <Icon name="search" size="sm" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
                 <input v-model.trim="groupSearch" type="search" class="input pl-9" :placeholder="t('admin.riskControl.searchGroups')" />
               </div>
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index 14a221e7e686..fc4272a6d05f 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -702,7 +702,7 @@
                         {{ t("admin.settings.rectifier.apikeyPatternsHint") }}
                       </p>
                     </div>
-                    <div
+                    <div data-ui="dense-btn"
                       v-for="(
                         _, index
                       ) in rectifierForm.apikey_signature_patterns"
@@ -2098,7 +2098,7 @@
                   >
                     {{ t("admin.settings.captcha.provider") }}
                   </label>
-                  <div
+                  <div data-ui="seg-box"
                     class="grid grid-cols-3 gap-2 rounded-lg bg-gray-100 p-1 dark:bg-dark-700"
                   >
                     <button
@@ -2202,7 +2202,7 @@
                     <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
                       {{ t("admin.settings.tencentCaptcha.region") }}
                     </label>
-                    <div class="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
+                    <div data-ui="seg-box" class="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
                       <button
                         type="button"
                         data-testid="tencent-captcha-region-cn"
@@ -2352,7 +2352,7 @@
                       >
                         {{ t("admin.settings.aliyunCaptcha.region") }}
                       </label>
-                      <div
+                      <div data-ui="seg-box"
                         class="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 dark:bg-dark-700"
                       >
                         <button
@@ -4590,7 +4590,7 @@
                   <p class="mb-2 mt-1 text-xs text-gray-500 dark:text-gray-400">
                     {{ t("admin.settings.gatewayForwarding.codexFingerprintSignalsDesc") }}
                   </p>
-                  <div
+                  <div data-ui="dense-btn"
                     v-for="(row, i) in codexFingerprintRows"
                     :key="`codex-fp-${i}`"
                     class="mb-2 flex items-center gap-2"
@@ -6352,7 +6352,7 @@
               >
                 {{ t("admin.settings.webSearchEmulation.testResultTitle") }}
               </h3>
-              <div class="flex items-center gap-2">
+              <div data-ui="dense-btn" class="flex items-center gap-2">
                 <input
                   v-model="wsTestQuery"
                   type="text"
@@ -7060,7 +7060,7 @@
 	                  <label class="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
 	                    {{ localText("展示形式", "Display mode") }}
 	                  </label>
-	                  <div class="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
+	                  <div data-ui="seg-box" class="grid grid-cols-2 gap-2 rounded-lg bg-gray-100 p-1 dark:bg-dark-700">
                     <button
                       type="button"
                       class="inline-flex items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition"
@@ -7268,7 +7268,7 @@
                 <label class="input-label">
                   {{ t('admin.settings.features.channelMonitor.mode') }}
                 </label>
-                <div class="mt-1.5 inline-flex w-full max-w-md rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-dark-600 dark:bg-dark-900/40">
+                <div data-ui="seg-box" class="mt-1.5 inline-flex w-full max-w-md rounded-lg border border-gray-200 bg-gray-50 p-1 dark:border-dark-600 dark:bg-dark-900/40">
                   <button
                     type="button"
                     class="inline-flex flex-1 items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition"
@@ -7829,7 +7829,7 @@
                   </button>
                 </div>
 
-                <div class="mb-3 flex items-center gap-2">
+                <div data-ui="dense-btn-if" class="mb-3 flex items-center gap-2">
                   <input
                     v-model="affiliateState.search"
                     type="text"
@@ -9040,7 +9040,7 @@
                   >{{ t("admin.settings.quotaNotify.emails") }}</label
                 >
                 <div class="space-y-2">
-                  <div
+                  <div data-ui="dense-btn"
                     v-for="(entry, index) in form.account_quota_notify_emails ||
                     []"
                     :key="index"
diff --git a/frontend/src/views/admin/SubscriptionsView.vue b/frontend/src/views/admin/SubscriptionsView.vue
index 840f7a365d11..cc7387e9ab94 100644
--- a/frontend/src/views/admin/SubscriptionsView.vue
+++ b/frontend/src/views/admin/SubscriptionsView.vue
@@ -7,7 +7,7 @@
           <!-- Left: Fuzzy user search + filters (wrap to multiple lines) -->
           <div class="flex flex-1 flex-wrap items-center gap-3">
             <!-- User Search -->
-            <div
+            <div data-ui="search-box"
               class="relative w-full sm:w-64"
               data-filter-user-search
             >
@@ -67,6 +67,7 @@
             <!-- Filters -->
             <div class="w-full sm:w-40">
               <Select
+                data-ui="toolbar-select"
                 v-model="filters.status"
                 :options="statusOptions"
                 :placeholder="t('admin.subscriptions.allStatus')"
@@ -75,6 +76,7 @@
             </div>
             <div class="w-full sm:w-48">
               <Select
+                data-ui="toolbar-select"
                 v-model="filters.group_id"
                 :options="groupOptions"
                 :placeholder="t('admin.subscriptions.allGroups')"
@@ -83,6 +85,7 @@
             </div>
             <div class="w-full sm:w-40">
               <Select
+                data-ui="toolbar-select"
                 v-model="filters.platform"
                 :options="platformFilterOptions"
                 :placeholder="t('admin.subscriptions.allPlatforms')"
@@ -98,6 +101,7 @@
               :disabled="loading"
               class="btn btn-secondary"
               :title="t('common.refresh')"
+              data-ui="toolbar-icon"
             >
               <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
             </button>
@@ -156,6 +160,7 @@
               @click="showGuideModal = true"
               class="btn btn-secondary"
               :title="t('admin.subscriptions.guide.showGuide')"
+              data-ui="toolbar-icon"
             >
               <Icon name="questionCircle" size="md" />
             </button>
@@ -760,7 +765,7 @@
     <!-- Subscription Guide Modal -->
     <teleport to="body">
       <transition name="modal">
-        <div v-if="showGuideModal" class="fixed inset-0 z-50 flex items-center justify-center p-4" @mousedown.self="showGuideModal = false">
+        <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>
           <div class="relative max-h-[85vh] w-full max-w-2xl overflow-y-auto rounded-xl bg-white p-6 shadow-2xl dark:bg-dark-800">
             <button type="button" class="absolute right-4 top-4 text-gray-400 hover:text-gray-600 dark:hover:text-gray-200" @click="showGuideModal = false">
diff --git a/frontend/src/views/admin/UsersView.vue b/frontend/src/views/admin/UsersView.vue
index 2daeb814a998..a52c23ba07c9 100644
--- a/frontend/src/views/admin/UsersView.vue
+++ b/frontend/src/views/admin/UsersView.vue
@@ -7,7 +7,7 @@
           <!-- Left: Search + Active Filters -->
           <div class="flex flex-1 flex-wrap items-center gap-3">
             <!-- Search Box -->
-            <div class="relative w-full md:w-64">
+            <div data-ui="search-box" class="relative w-full md:w-64">
               <Icon
                 name="search"
                 size="md"
@@ -25,6 +25,7 @@
             <!-- Role Filter (visible when enabled) -->
             <div v-if="visibleFilters.has('role')" class="w-full sm:w-32">
               <Select
+                data-ui="toolbar-select"
                 v-model="filters.role"
                 :options="[
                   { value: '', label: t('admin.users.allRoles') },
@@ -38,6 +39,7 @@
             <!-- Status Filter (visible when enabled) -->
             <div v-if="visibleFilters.has('status')" class="w-full sm:w-32">
               <Select
+                data-ui="toolbar-select"
                 v-model="filters.status"
                 :options="[
                   { value: '', label: t('admin.users.allStatus') },
@@ -51,6 +53,7 @@
             <!-- Group Filter (visible when enabled) -->
             <div v-if="visibleFilters.has('group')" class="w-full sm:w-44">
               <Select
+                data-ui="toolbar-select"
                 v-model="filters.group"
                 :options="groupFilterOptions"
                 searchable
@@ -64,6 +67,7 @@
             <!-- API Key Group Filter (visible when enabled) -->
             <div v-if="visibleFilters.has('apiKeyGroup')" class="w-full sm:w-44">
               <Select
+                data-ui="toolbar-select"
                 v-model="filters.apiKeyGroup"
                 :options="apiKeyGroupFilterOptions"
                 searchable
@@ -101,6 +105,7 @@
                 <template v-else-if="['select', 'multi_select'].includes(getAttributeDefinition(Number(attrId))?.type || '')">
                   <div class="w-full">
                     <Select
+                      data-ui="toolbar-select"
                       :model-value="value"
                       :options="[
                         { value: '', label: getAttributeDefinitionName(Number(attrId)) },
@@ -133,6 +138,7 @@
                 :disabled="loading"
                 class="btn btn-secondary px-2 md:px-3"
                 :title="t('common.refresh')"
+                data-ui="toolbar-icon"
               >
                 <Icon name="refresh" size="md" :class="loading ? 'animate-spin' : ''" />
               </button>
diff --git a/frontend/src/views/admin/affiliates/AdminAffiliateRecordsTable.vue b/frontend/src/views/admin/affiliates/AdminAffiliateRecordsTable.vue
index 7c92c29c55f8..813f42d0e364 100644
--- a/frontend/src/views/admin/affiliates/AdminAffiliateRecordsTable.vue
+++ b/frontend/src/views/admin/affiliates/AdminAffiliateRecordsTable.vue
@@ -2,8 +2,8 @@
   <AppLayout>
     <TablePageLayout data-ui="affiliate-page">
       <template #filters>
-        <div class="flex flex-wrap items-center gap-3">
-          <div class="relative w-full md:w-80">
+        <div data-ui="dense-btn" class="flex flex-wrap items-center gap-3">
+          <div data-ui="search-box" class="relative w-full md:w-80">
             <Icon name="search" size="md" class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" />
             <input v-model="filters.search" type="text" class="input pl-10" :placeholder="t('admin.affiliates.records.searchPlaceholder')" @input="debounceLoad" />
           </div>
diff --git a/frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue b/frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue
index e17b7027a48e..6a58d834c602 100644
--- a/frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue
+++ b/frontend/src/views/admin/ops/components/OpsAlertEventsCard.vue
@@ -583,7 +583,7 @@ const empty = computed(() => events.value.length === 0 && !loading.value)
             </div>
 
             <div class="flex flex-wrap gap-2">
-              <div class="flex items-center gap-2 rounded-lg bg-white px-2 py-1 ring-1 ring-gray-200 dark:bg-dark-800 dark:ring-dark-700">
+              <div data-ui="dense-btn dense-dlg" class="flex items-center gap-2 rounded-lg bg-white px-2 py-1 ring-1 ring-gray-200 dark:bg-dark-800 dark:ring-dark-700">
                 <span class="text-[11px] font-bold text-gray-600 dark:text-gray-300">{{ t('admin.ops.alertEvents.detail.silence') }}</span>
                 <Select
                   :model-value="silenceDuration"
@@ -605,7 +605,7 @@ const empty = computed(() => events.value.length === 0 && !loading.value)
           </div>
         </div>
 
-          <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div data-ui="ops-kv-grid" class="grid grid-cols-1 gap-4 sm:grid-cols-2">
             <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
               <div class="text-xs font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.alertEvents.detail.firedAt') }}</div>
               <div class="mt-1 text-sm font-medium text-gray-900 dark:text-white">{{ formatDateTime(selected.fired_at || selected.created_at) }}</div>
diff --git a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
index 2cb36aa2643d..3e07c18aed44 100644
--- a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
+++ b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
@@ -1211,7 +1211,7 @@ function handleToolbarRefresh() {
       <!-- Right: 6 cards (3 cols x 2 rows) -->
       <div class="grid h-full grid-cols-1 content-center gap-4 sm:grid-cols-2 lg:col-span-7 lg:grid-cols-3">
         <!-- Card 1: Requests -->
-        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 1;">
+        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 1;" data-ui="ops-kpi-tile">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-1">
               <span class="text-[10px] font-bold uppercase text-gray-400">{{ t('admin.ops.requestsTitle') }}</span>
@@ -1247,7 +1247,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- Card 2: SLA -->
-        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 2;">
+        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 2;" data-ui="ops-kpi-tile">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-2">
               <span class="text-[10px] font-bold uppercase text-gray-400">{{ t('admin.ops.sla') }}</span>
@@ -1278,7 +1278,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- Card 4: Request Duration -->
-        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 4;">
+        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 4;" data-ui="ops-kpi-tile">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-1">
               <span class="text-[10px] font-bold uppercase text-gray-400">{{ t('admin.ops.latencyDuration') }}</span>
@@ -1293,7 +1293,7 @@ function handleToolbarRefresh() {
               {{ t('admin.ops.requestDetails.details') }}
             </button>
           </div>
-          <div class="mt-2 flex items-baseline gap-2">
+          <div data-ui="ops-figure-row" class="mt-2 flex items-baseline gap-2">
             <div class="text-3xl font-black text-gray-900 dark:text-white">
               {{ durationP99Ms ?? '-' }}
             </div>
@@ -1329,7 +1329,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- Card 5: TTFT -->
-        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 5;">
+        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 5;" data-ui="ops-kpi-tile">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-1">
               <span class="text-[10px] font-bold uppercase text-gray-400">TTFT</span>
@@ -1344,7 +1344,7 @@ function handleToolbarRefresh() {
               {{ t('admin.ops.requestDetails.details') }}
             </button>
           </div>
-          <div class="mt-2 flex items-baseline gap-2">
+          <div data-ui="ops-figure-row" class="mt-2 flex items-baseline gap-2">
             <div class="text-3xl font-black" :class="getThresholdColorClass(getTTFTThresholdLevel(ttftP99Ms))">
               {{ ttftP99Ms ?? '-' }}
             </div>
@@ -1380,7 +1380,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- Card 3: Request Errors -->
-        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 3;">
+        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 3;" data-ui="ops-kpi-tile">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-1">
               <span class="text-[10px] font-bold uppercase text-gray-400">{{ t('admin.ops.requestErrors') }}</span>
@@ -1406,7 +1406,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- Card 6: Upstream Errors -->
-        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 6;">
+        <div class="rounded-2xl bg-gray-50 p-4 dark:bg-dark-900" style="order: 6;" data-ui="ops-kpi-tile">
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-1">
               <span class="text-[10px] font-bold uppercase text-gray-400">{{ t('admin.ops.upstreamErrors') }}</span>
@@ -1437,7 +1437,7 @@ function handleToolbarRefresh() {
     <div v-if="overview" class="mt-2 border-t border-gray-100 pt-4 dark:border-dark-700">
       <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
         <!-- CPU -->
-        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900">
+        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900" data-ui="ops-sys-tile">
           <div class="flex items-center gap-1">
             <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">CPU</div>
             <HelpTooltip v-if="!props.fullscreen" :content="t('admin.ops.tooltips.cpu')" />
@@ -1451,7 +1451,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- MEM -->
-        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900">
+        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900" data-ui="ops-sys-tile">
           <div class="flex items-center gap-1">
             <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.memory') }}</div>
             <HelpTooltip v-if="!props.fullscreen" :content="t('admin.ops.tooltips.memory')" />
@@ -1469,7 +1469,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- DB -->
-        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900">
+        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900" data-ui="ops-sys-tile">
           <div class="flex items-center gap-1">
             <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.db') }}</div>
             <HelpTooltip v-if="!props.fullscreen" :content="t('admin.ops.tooltips.db')" />
@@ -1486,7 +1486,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- Redis -->
-        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900">
+        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900" data-ui="ops-sys-tile">
           <div class="flex items-center gap-1">
             <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">Redis</div>
             <HelpTooltip v-if="!props.fullscreen" :content="t('admin.ops.tooltips.redis')" />
@@ -1502,7 +1502,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- Goroutines -->
-        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900">
+        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900" data-ui="ops-sys-tile">
           <div class="flex items-center gap-1">
             <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.goroutines') }}</div>
             <HelpTooltip v-if="!props.fullscreen" :content="t('admin.ops.tooltips.goroutines')" />
@@ -1521,7 +1521,7 @@ function handleToolbarRefresh() {
         </div>
 
         <!-- Jobs -->
-        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900">
+        <div class="rounded-xl bg-gray-50 p-3 dark:bg-dark-900" data-ui="ops-sys-tile">
           <div class="flex items-center justify-between gap-2">
             <div class="flex items-center gap-1">
               <div class="text-[10px] font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.jobs') }}</div>
diff --git a/frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue b/frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue
index 57599be1ce67..ca3d74efed6c 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorDetailModal.vue
@@ -13,7 +13,7 @@
 
     <div v-else class="space-y-6 p-6" data-ui="ops-dialog ops-error-detail">
       <!-- Summary -->
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      <div data-ui="ops-kv-grid" class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
         <div class="rounded-xl bg-gray-50 p-4 dark:bg-dark-900">
           <div class="text-xs font-bold uppercase tracking-wider text-gray-400">{{ t('admin.ops.errorDetail.requestId') }}</div>
           <div class="mt-1 break-all font-mono text-sm font-medium text-gray-900 dark:text-white">
diff --git a/frontend/src/views/admin/settings/OpenAIFastPolicyUserSelector.vue b/frontend/src/views/admin/settings/OpenAIFastPolicyUserSelector.vue
index 0b25c876adee..ad1f14bcb349 100644
--- a/frontend/src/views/admin/settings/OpenAIFastPolicyUserSelector.vue
+++ b/frontend/src/views/admin/settings/OpenAIFastPolicyUserSelector.vue
@@ -28,7 +28,7 @@
       </span>
     </div>
 
-    <div class="relative">
+    <div data-ui="search-box" class="relative">
       <Icon
         name="search"
         size="sm"
diff --git a/frontend/src/views/user/AvailableChannelsView.vue b/frontend/src/views/user/AvailableChannelsView.vue
index 7ed6d61b59f6..da3c459f02f2 100644
--- a/frontend/src/views/user/AvailableChannelsView.vue
+++ b/frontend/src/views/user/AvailableChannelsView.vue
@@ -4,7 +4,7 @@
       <template #filters>
         <div class="flex flex-col justify-between gap-4 lg:flex-row lg:items-start">
           <div class="flex flex-1 flex-wrap items-center gap-3">
-            <div class="relative w-full sm:w-80">
+            <div data-ui="search-box" class="relative w-full sm:w-80">
               <Icon
                 name="search"
                 size="md"
diff --git a/frontend/src/views/user/BatchImageGuideView.vue b/frontend/src/views/user/BatchImageGuideView.vue
index dacdf74f6dcc..f807476284f0 100644
--- a/frontend/src/views/user/BatchImageGuideView.vue
+++ b/frontend/src/views/user/BatchImageGuideView.vue
@@ -79,7 +79,6 @@
           :columns="columns"
           :data="visibleBatchJobs"
           :loading="loadingKeys || loadingJobs"
-          :selected-keys="selectedJobKeys"
           :expandable-actions="false"
           row-key="id"
         >
@@ -911,7 +910,6 @@ const selectedBatchApiKeyId = ref(0)
 const items = ref<BatchImageDetailItem[]>([])
 const batchJobs = ref<BatchImageJobRow[]>([])
 const selectedJobIds = ref(new Set<string>())
-const selectedJobKeys = computed(() => Array.from(selectedJobIds.value))
 const expandedParentIds = ref(new Set<string>())
 const promptRows = ref<PromptRow[]>([])
 const promptDraft = ref('')
diff --git a/frontend/src/views/user/ChannelStatusV2View.vue b/frontend/src/views/user/ChannelStatusV2View.vue
index cb2e5f92a5b4..acda4b5fc866 100644
--- a/frontend/src/views/user/ChannelStatusV2View.vue
+++ b/frontend/src/views/user/ChannelStatusV2View.vue
@@ -90,7 +90,7 @@
         </div>
 
         <!-- Single compact toolbar row: range · filters · view controls -->
-        <div class="monitor-toolbar flex flex-nowrap items-center gap-1.5 overflow-x-auto px-4 py-3 sm:gap-2 sm:px-5">
+        <div data-ui="dense-btn" class="monitor-toolbar flex flex-nowrap items-center gap-1.5 overflow-x-auto px-4 py-3 sm:gap-2 sm:px-5">
           <div
             class="tabs inline-flex shrink-0"
             role="group"
diff --git a/frontend/src/views/user/KeysView.vue b/frontend/src/views/user/KeysView.vue
index 0727d0196da9..c3a7334480ef 100644
--- a/frontend/src/views/user/KeysView.vue
+++ b/frontend/src/views/user/KeysView.vue
@@ -28,7 +28,7 @@
             :api-base-url="publicSettings?.api_base_url || ''"
             :custom-endpoints="publicSettings?.custom_endpoints || []"
           />
-          <div v-if="selectedIds.length" class="flex flex-wrap items-center gap-3 text-sm">
+          <div v-if="selectedIds.length" data-ui="keys-bulk-bar" class="flex flex-wrap items-center gap-3 text-sm">
             <span class="text-gray-600 dark:text-gray-300">
               {{ t('keys.bulkEdit.selectedCount', { count: selectedIds.length }) }}
             </span>
diff --git a/frontend/src/views/user/PaymentView.vue b/frontend/src/views/user/PaymentView.vue
index 9a81fe8b54e0..4877b5ae6313 100644
--- a/frontend/src/views/user/PaymentView.vue
+++ b/frontend/src/views/user/PaymentView.vue
@@ -6,7 +6,7 @@
       </div>
       <template v-else>
         <!-- Tab Switcher (hide during payment and subscription confirm) -->
-        <div v-if="tabs.length > 1 && paymentPhase === 'select' && !selectedPlan" class="flex space-x-1 rounded-xl bg-gray-100 p-1 dark:bg-dark-800">
+        <div data-ui="seg-box" v-if="tabs.length > 1 && paymentPhase === 'select' && !selectedPlan" class="flex space-x-1 rounded-xl bg-gray-100 p-1 dark:bg-dark-800">
           <button v-for="tab in tabs" :key="tab.key"
             class="flex-1 rounded-lg px-4 py-2.5 text-sm font-medium transition-all"
             :class="activeTab === tab.key ? 'bg-white text-gray-900 shadow dark:bg-dark-700 dark:text-white' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'"
@@ -198,7 +198,7 @@
               <div v-if="activeSubscriptions.length > 0">
                 <p class="mb-2 text-xs font-medium text-gray-400 dark:text-gray-500">{{ t('payment.activeSubscription') }}</p>
                 <div class="space-y-2">
-                  <div v-for="sub in activeSubscriptions" :key="sub.id"
+                  <div v-for="sub in activeSubscriptions" :key="sub.id" data-ui="active-sub"
                     class="flex items-center gap-3 rounded-xl border border-gray-100 bg-white px-3 py-2 dark:border-dark-700 dark:bg-dark-800">
                     <div data-ui="platform-text" :class="['h-6 w-1 shrink-0 rounded-full', platformAccentBarClass(sub.group?.platform || '')]" />
                     <div class="min-w-0 flex-1">
@@ -251,7 +251,7 @@
     <!-- Image Preview Overlay -->
     <Teleport to="body">
       <Transition name="modal">
-        <div v-if="previewImage" class="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 backdrop-blur-sm" @click="previewImage = ''">
+        <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" />
         </div>
       </Transition>
diff --git a/frontend/src/views/user/RedeemView.vue b/frontend/src/views/user/RedeemView.vue
index 3731f1e014ce..be07148c37f9 100644
--- a/frontend/src/views/user/RedeemView.vue
+++ b/frontend/src/views/user/RedeemView.vue
@@ -335,7 +335,7 @@
               {{ t('redeem.historyWillAppear') }}
             </p>
           </div>
-          <div class="mt-4 flex flex-wrap items-center justify-between gap-3 text-sm">
+          <div data-ui="dense-btn" class="mt-4 flex flex-wrap items-center justify-between gap-3 text-sm">
             <span>{{ t('common.total') }}: {{ historyTotal }} {{ t('pagination.results') }}</span>
             <label>
               {{ t('pagination.perPage') }}

From ffae7399028a10c5709b443c9c12525f1cf86056 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Wed, 30 Sep 2026 06:32:47 +0800
Subject: [PATCH 09/11] fix(ui-el): the v0.2.10 usage-trend metric toggle is an
 EL segmented control (static data-ui=seg)

---
 frontend/src/views/admin/DashboardView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index a009857cd571..8b873212c510 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -320,7 +320,7 @@
           <div class="card p-4" data-ui="chart-card">
             <div class="mb-4 flex items-center justify-between gap-3">
               <h3 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('admin.dashboard.recentUsage') }} (Top 12)</h3>
-              <div class="flex gap-1" role="group" :aria-label="t('admin.dashboard.recentUsage')">
+              <div class="flex gap-1" role="group" data-ui="seg" :aria-label="t('admin.dashboard.recentUsage')">
                 <button v-for="metric in (['tokens', 'actual_cost'] as const)" :key="metric" type="button"
                   class="rounded px-2 py-1 text-xs" :class="userTrendMetric === metric ? 'bg-blue-600 text-white' : 'text-gray-600 dark:text-gray-300'"
                   :aria-pressed="userTrendMetric === metric" @click="setUserTrendMetric(metric)">

From 6c1a8f7ca8a2c5b0e7a2428e0a4a85fc9a6508bc Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Wed, 30 Sep 2026 11:15:28 +0800
Subject: [PATCH 10/11] wip(ui-el): perf pass finished - shared layers and page
 files verified (pixel-identical to a6673f87a, event->paint within budget)

---
 .../user/dashboard/UserDashboardCharts.vue    |  2 +-
 frontend/src/styles/console/behaviour.css     |  9 +--
 frontend/src/styles/console/controls.css      | 10 ++--
 .../console/pages/settings-ops-public.css     | 55 ++++++++++++-------
 frontend/src/views/admin/BackupView.vue       |  4 +-
 frontend/src/views/admin/DashboardView.vue    |  2 +-
 frontend/src/views/admin/SettingsView.vue     |  9 +--
 frontend/src/views/admin/UsageView.vue        |  4 +-
 .../components/OpsOpenAITokenStatsCard.vue    |  2 +-
 frontend/src/views/auth/LoginView.vue         |  2 +-
 frontend/src/views/user/UsageView.vue         |  4 +-
 11 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/frontend/src/components/user/dashboard/UserDashboardCharts.vue b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
index d88f2b860b03..77e21c88219c 100644
--- a/frontend/src/components/user/dashboard/UserDashboardCharts.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
@@ -20,7 +20,7 @@
     </div>
 
     <!-- Charts Grid -->
-    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+    <div data-ui="dist-grid" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
       <!-- Model Distribution Chart -->
       <div class="card relative overflow-hidden p-4" data-ui="chart-card">
         <div v-if="loading" class="absolute inset-0 z-10 flex items-center justify-center bg-white/50 backdrop-blur-sm dark:bg-dark-800/50">
diff --git a/frontend/src/styles/console/behaviour.css b/frontend/src/styles/console/behaviour.css
index 2bf0d2c7c0fa..fe44adf2ff45 100644
--- a/frontend/src/styles/console/behaviour.css
+++ b/frontend/src/styles/console/behaviour.css
@@ -63,11 +63,12 @@ html.flat-theme [data-ui~="dist-head"]:has(> div > .rounded-lg:is(.bg-gray-50, .
 /* B1.3 Chart rows holding a distribution card: from 1024 to 1535px each card takes the full width, so the
    ring, every column and the full names fit; from 1536px they sit side by side again. Perf pass (kept :has): the
    distribution table exists only once the chart has data (v-else-if), so the row's layout depends on runtime
-   content below it. The has-test sits in the subject compound of the chart row (class-qualified, scoped under the
-   four hooked page roots that hold such rows, :where() so the scope adds no specificity) with a child-only argument
-   (row > first card > body > box > table); the original 0,8,2 is kept. */
+   content below it. The has-test sits in the subject compound of the hooked chart row ([data-ui="dist-grid"]: the
+   six rows whose first card can hold such a table - DashboardView, admin and user UsageView (two each),
+   UserDashboardCharts) with a child-only argument (row > first card > body > box > table); `.grid` keeps the rule in
+   the class bucket, the repeated [data-ui] keeps the original 0,8,2. */
 @media (min-width: 1024px) and (max-width: 1535.98px) {
-  html.flat-theme :where([data-ui~="admin-dashboard"], [data-ui~="admin-usage"], [data-ui~="user-dashboard"], [data-ui~="user-usage"]) .grid.gap-6.lg\:grid-cols-2:has(> .card:first-child > * > .max-h-48.overflow-auto > table) {
+  html.flat-theme .grid[data-ui~="dist-grid"][data-ui]:has(> .card:first-child > * > .max-h-48.overflow-auto > table) {
     grid-template-columns: minmax(0, 1fr);
   }
 }
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index 32a38e26b7e4..258745a9c055 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -381,15 +381,17 @@ html.flat-theme input:is([type="date"], [type="datetime-local"], [type="time"],
    buttons (the reference's /models filter row); a 34px trigger beside a 30px search or button reads as a misaligned
    row. Labelled form fields elsewhere keep the reference's 34px field.
    Perf pass: every template row of that shape (flex items-center, not flex-col, a .btn child, a field inside) is
-   hooked [data-ui~="dense-btn"] (19 rows, see the header); the repeated [data-ui] keep the original 0,7,2. */
+   hooked [data-ui~="dense-btn"] (18 rows; the two whose .btn children are all conditional follow); the repeated
+   [data-ui] keep the original 0,7,2. */
 html.flat-theme :is(.table-page-layout > .layout-section-fixed, [data-ui~="dense-btn"][data-ui][data-ui][data-ui]) :is(.select-trigger.select-trigger, .date-picker-trigger.date-picker-trigger, input.input:not([type="checkbox"], [type="radio"]), select.input) {
   padding-top: 0.265625rem;
   padding-bottom: 0.265625rem;
 }
 
-/* the one row whose .btn is conditional (系统设置 affiliate search; v-if on the button) keeps a has-test, on its own
-   hooked element, in the subject compound, with a child argument; the fields read its flag through a container style
-   query (no selector follows the has-test). */
+/* the two rows whose .btn children are all conditional (系统设置 affiliate search: v-if on the button; 运维监控 OpenAI
+   token stats toolbar: the paging buttons under v-else) keep a has-test, on their own hooked element, in the subject
+   compound, with a child argument; the fields read its flag through a container style query (no selector follows the
+   has-test). */
 html.flat-theme [data-ui~="dense-btn-if"]:has(> .btn) {
   --ctl-dense-btn: 1;
 }
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index 60caafc04492..0a71621bb419 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -15,6 +15,7 @@
  *   views/public/LegalDocumentView.vue:2    data-ui="legal"
  *   views/NotFoundView.vue:4                data-ui="not-found"
  *   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). */
 
@@ -467,8 +468,9 @@ html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-betwe
 }
 
 /* no forgot-password link (password reset off, backend mode): the row keeps a bare <span> and no link, so it takes no
-   room. Child argument: only the row's own link counts (a link inside the span would be the same row's link anyway). */
-html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-between"]:not(:has(> a)) {
+   room. Whether the link shows is a public setting (data): the row (static hook auth-link-row, LoginView.vue:69, the
+   only such row of the auth pages) tests its own child (subject position; the hook weighs nothing). */
+html.flat-theme [data-ui="auth-column"] div[class~="mt-1"][class~="justify-between"]:where([data-ui~="auth-link-row"]):not(:has(> a)) {
   display: none;
 }
 
@@ -2389,6 +2391,14 @@ html.flat-theme [data-ui="key-usage"] .skeleton {
  *   components/admin/codex/CodexRuntimeSettings.vue:2 data-ui="codex-runtime"  (page root, fork component)
  *   views/admin/PluginsView.vue:3                     data-ui="plugins"        (page root)
  *   views/admin/BackupView.vue:291                    data-ui="r2-guide"       (the R2 guide dialog's outer layer)
+ * Static hooks of the performance pass (PERF.md: a style that depends on what an element holds is carried by a hook on
+ * that element, never by a data binding):
+ *   views/admin/SettingsView.vue (84 switch rows)    data-ui="setting-row"    (3.1)
+ *   views/admin/SettingsView.vue (2 matrix rows)     data-ui="quota-row"      (6.x the platform quota matrices)
+ *   views/admin/SettingsView.vue:1863                data-ui="card-title-icon" (2.1 the glyph before a card title)
+ *   views/admin/SettingsView.vue:6413, 8050, 8103    data-ui="settings-dlg-foot" (10 the inline dialogs' button rows)
+ *   views/admin/BackupView.vue:347                   data-ui="r2-table-box"   (the R2 guide's settings table frame)
+ *   views/admin/SettingsView.vue:7851, BackupView.vue:203  data-ui="settings-list-box" (6.3 the two lists that can be empty)
  * Existing hooks used: .settings-tabs-* (SettingsView), #provider-form (PaymentProviderDialog), data-testid
  * "official-model-catalog*", "image-tools-settings", "observability-settings", "backup-schedule", "retired-plugins",
  * data-test="account-system-prompt-binding" (the per-account binding in the accounts dialogs).
@@ -2481,10 +2491,10 @@ html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"]
 }
 
 /* a glyph beside a card title is a neutral mark, not a hue (decision 2). The glyph sits either inside the title or
-   just before it; both forms are named without a `:has()` on a bare `div` (the two selectors say exactly what the old
-   `:is(h2 svg, div:has(> h2) > svg)` said, because a div holding an h2 does not carry an icon of its own). */
-html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] h2 svg,
-html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] div > svg:has(~ h2) {
+   just before it (the one such glyph, the panel rate limit card's shield, carries the static hook card-title-icon);
+   both keep the weight of the former `:is(h2 svg, div:has(> h2) > svg)` (0,5,5) through the pads. */
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] h2 svg:not(uipad),
+html.flat-theme [data-ui~="settings"] .card > div:first-child[class~="border-b"] div > svg:where([data-ui~="card-title-icon"]):not(uipad) {
   width: 0.9375rem;
   height: 0.9375rem;
   color: rgb(var(--ui-ink-soft));
@@ -2511,17 +2521,18 @@ html.flat-theme [data-ui~="settings"] .card > div:is([class~="p-6"], [class~="px
    The row is found by its own hook (data-ui~="setting-row", on the flex wrapper that holds the switch), not by `:has()`
    on a bare `div`: a generic `:has()` anchor merges every descendant into one invalidation set, and the anchor's whole
    subtree is then re-styled whenever any of those descendants may have changed. The hook keeps the same rows (a switch
-   or a peer switch that is the row's direct child) and leaves the selector's specificity untouched. */
-html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] {
+   or a peer switch that is the row's direct child); the row keeps its classes in the selector and the pad
+   :not(uipad[data-uipad]) stands for the former argument, so every rule keeps its approved weight (0,6,3 for the row). */
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"][data-ui~="setting-row"]:not(uipad[data-uipad]) {
   gap: 1rem;
 }
 
-html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > div:first-child {
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"][data-ui~="setting-row"]:not(uipad[data-uipad]) > div:first-child {
   min-width: 0;
 }
 
-html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > div:first-child > :is(label, span, h3, h4, p):first-child:not([class~="font-mono"]),
-html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > :is(label, span, h3, h4):first-child:not([class~="font-mono"]) {
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"][data-ui~="setting-row"]:not(uipad[data-uipad]) > div:first-child > :is(label, span, h3, h4, p):first-child:not([class~="font-mono"]),
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"][data-ui~="setting-row"]:not(uipad[data-uipad]) > :is(label, span, h3, h4):first-child:not([class~="font-mono"]) {
   font-family: var(--ui-font);
   font-size: 0.8125rem;
   line-height: 1.21875rem;
@@ -2531,13 +2542,13 @@ html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > :is(label, span
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > div:first-child > p:not(:first-child) {
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"][data-ui~="setting-row"]:not(uipad[data-uipad]) > div:first-child > p:not(:first-child) {
   margin-top: 0.125rem;
   font-size: 0.75rem;
   line-height: 1.125rem;
 }
 
-html.flat-theme [data-ui~="settings"] [data-ui~="setting-row"] > div:first-child > p:not(:first-child):is([class~="text-gray-500"], [class~="text-gray-400"], [class~="text-gray-600"]) {
+html.flat-theme [data-ui~="settings"] div[class~="flex"][class~="justify-between"][data-ui~="setting-row"]:not(uipad[data-uipad]) > div:first-child > p:not(:first-child):is([class~="text-gray-500"], [class~="text-gray-400"], [class~="text-gray-600"]) {
   color: rgb(var(--ui-muted));
 }
 
@@ -2775,8 +2786,9 @@ html.flat-theme [data-ui~="settings"] .card table > thead:not([class~="bg-gray-5
 /* the matrix rows set their name beside 32px fields: centred on the field, not on its top edge. The row carries the
    hook (data-ui~="quota-row": the platform quota matrices, the only `align-top` rows in the page that hold inputs), so
    the cells are styled without a `:has()` that would invalidate the anchor's subtree. The backup list's `align-top`
-   rows have no inputs and keep their alignment, exactly as the old filter left them. */
-html.flat-theme [data-ui~="settings"] .card table tr[data-ui~="quota-row"] > td {
+   rows have no inputs and keep their alignment, exactly as the old filter left them. The two pads stand for the former
+   `:has(> td > input)` (0,4,6). */
+html.flat-theme [data-ui~="settings"] .card table tr[data-ui~="quota-row"]:not(uipad):not(uipad) > td {
   vertical-align: middle;
 }
 
@@ -2976,8 +2988,10 @@ html.flat-theme [data-ui~="settings"] .card div[class~="rounded-lg"][class~="bor
    drawing as the ops and risk pages' empty tables): a panel 16px inside the table, the dashed control outline,
    radius 8, 120px, the message 14 / 500 ink-soft in its middle. The list's box is an inline-size container, so a
    table wider than its box (the backup list's 800px on a narrow screen) keeps the panel and the message on the
-   visible width; the cell's right padding (a share of the table's width) takes the overflow. */
-html.flat-theme [data-ui~="settings"] .card div[class~="overflow-x-auto"]:has(> table > tbody > tr:only-child > td[colspan]:only-child) {
+   visible width; the cell's right padding (a share of the table's width) takes the overflow. Whether a list is empty
+   is data: the two list boxes carry the static hook settings-list-box (SettingsView.vue, BackupView.vue) and test
+   their own child chain (subject position; the hook weighs nothing, so the approved weight stays). */
+html.flat-theme [data-ui~="settings"] .card div[class~="overflow-x-auto"]:where([data-ui~="settings-list-box"]):has(> table > tbody > tr:only-child > td[colspan]:only-child) {
   container-type: inline-size;
 }
 
@@ -3557,7 +3571,9 @@ html.flat-theme [data-ui~="settings"] div[class~="fixed"][class~="inset-0"] > di
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="settings"] div[class~="fixed"][class~="inset-0"] > div[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]) > div:last-child[class~="flex"]:is([class~="mt-6"], [class~="mt-4"]):has(.btn) {
+/* the button row (static hook settings-dlg-foot on the three inline dialogs' last rows, the ones that hold buttons; the
+   hook weighs what the former `:has(.btn)` did) */
+html.flat-theme [data-ui~="settings"] div[class~="fixed"][class~="inset-0"] > div[class~="bg-white"][class~="p-6"]:is([class~="shadow-xl"], [class~="shadow-2xl"]) > div:last-child[class~="flex"]:is([class~="mt-6"], [class~="mt-4"])[data-ui~="settings-dlg-foot"] {
   margin: var(--ui-dialog-body-y) calc(var(--ui-dialog-x) * -1) calc(var(--ui-dialog-body-y) * -1);
   border-top: 1px solid rgb(var(--ui-line));
   padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
@@ -3671,7 +3687,8 @@ html.flat-theme [data-ui~="r2-guide"] code[class~="block"] {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme [data-ui~="r2-guide"] div[class~="rounded-lg"][class~="border"]:has(> table) {
+/* the settings table's frame (static hook r2-table-box; the pad weighs what the former `:has(> table)` did) */
+html.flat-theme [data-ui~="r2-guide"] div[class~="rounded-lg"][class~="border"]:where([data-ui~="r2-table-box"]):not(uipad) {
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
 }
diff --git a/frontend/src/views/admin/BackupView.vue b/frontend/src/views/admin/BackupView.vue
index 9b27383eea16..7d19704bb804 100644
--- a/frontend/src/views/admin/BackupView.vue
+++ b/frontend/src/views/admin/BackupView.vue
@@ -200,7 +200,7 @@
           </div>
         </div>
 
-        <div class="overflow-x-auto">
+        <div class="overflow-x-auto" data-ui="settings-list-box">
           <table class="w-full min-w-[800px] text-sm">
             <thead>
               <tr class="border-b border-gray-200 text-left text-xs uppercase tracking-wide text-gray-500 dark:border-dark-700 dark:text-gray-400">
@@ -344,7 +344,7 @@
                 <span class="flex h-6 w-6 items-center justify-center rounded-full bg-primary-100 text-xs font-bold text-primary-700 dark:bg-primary-900/40 dark:text-primary-300">4</span>
                 {{ t('admin.backup.r2Guide.step4.title') }}
               </h3>
-              <div class="ml-8 overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600">
+              <div class="ml-8 overflow-hidden rounded-lg border border-gray-200 dark:border-dark-600" data-ui="r2-table-box">
                 <table class="w-full text-sm">
                   <tbody>
                     <tr v-for="(row, i) in r2ConfigRows" :key="i" class="border-b border-gray-100 dark:border-dark-700 last:border-0">
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index e63b7ca49068..10781cdf04b8 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -300,7 +300,7 @@
           </div>
 
           <!-- Charts Grid -->
-          <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+          <div data-ui="dist-grid" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
             <ModelDistributionChart
               :model-stats="modelStats"
               :enable-ranking-view="true"
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index fc4272a6d05f..a539248f042e 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -1860,6 +1860,7 @@
                   name="shield"
                   size="md"
                   class="text-primary-500"
+                  data-ui="card-title-icon"
                 />
                 <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
                   {{ t("admin.settings.panelRateLimit.title") }}
@@ -6409,7 +6410,7 @@
                   </p>
                 </div>
               </div>
-              <div class="mt-4 flex justify-end">
+              <div class="mt-4 flex justify-end" data-ui="settings-dlg-foot">
                 <button
                   type="button"
                   class="btn btn-secondary btn-sm"
@@ -7847,7 +7848,7 @@
                   </button>
                 </div>
 
-                <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-dark-700">
+                <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-dark-700" data-ui="settings-list-box">
                   <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
                     <thead class="bg-gray-50 dark:bg-dark-800">
                       <tr>
@@ -8046,7 +8047,7 @@
               </div>
             </div>
 
-            <div class="mt-6 flex items-center justify-between gap-3">
+            <div class="mt-6 flex items-center justify-between gap-3" data-ui="settings-dlg-foot">
               <p
                 v-if="!affiliateModalCanSubmit"
                 class="text-xs text-gray-500 dark:text-gray-400"
@@ -8099,7 +8100,7 @@
             <p class="mt-2 text-xs text-gray-400">
               {{ t('admin.settings.features.affiliate.batchModal.clearHint') }}
             </p>
-            <div class="mt-6 flex justify-end gap-2">
+            <div class="mt-6 flex justify-end gap-2" data-ui="settings-dlg-foot">
               <button type="button" class="btn btn-secondary" @click="affiliateBatchModal.open = false">
                 {{ t('common.cancel') }}
               </button>
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index b7e35ed23e3c..ba3ac6e9f9a0 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -22,7 +22,7 @@
             </div>
           </div>
         </div>
-        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div data-ui="dist-grid" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
           <ModelDistributionChart
             v-model:source="modelDistributionSource"
             v-model:metric="modelDistributionMetric"
@@ -46,7 +46,7 @@
             :filters="breakdownFilters"
           />
         </div>
-        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div data-ui="dist-grid" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
           <EndpointDistributionChart
             v-model:source="endpointDistributionSource"
             v-model:metric="endpointDistributionMetric"
diff --git a/frontend/src/views/admin/ops/components/OpsOpenAITokenStatsCard.vue b/frontend/src/views/admin/ops/components/OpsOpenAITokenStatsCard.vue
index be099a976356..4283a049c775 100644
--- a/frontend/src/views/admin/ops/components/OpsOpenAITokenStatsCard.vue
+++ b/frontend/src/views/admin/ops/components/OpsOpenAITokenStatsCard.vue
@@ -163,7 +163,7 @@ function onNextPage() {
       <h3 class="text-sm font-bold text-gray-900 dark:text-white">
         {{ t('admin.ops.openaiTokenStats.title') }}
       </h3>
-      <div class="flex flex-wrap items-center gap-2">
+      <div data-ui="dense-btn-if" class="flex flex-wrap items-center gap-2">
         <div class="w-36">
           <Select v-model="timeRange" :options="timeRangeOptions" />
         </div>
diff --git a/frontend/src/views/auth/LoginView.vue b/frontend/src/views/auth/LoginView.vue
index eaff4fd51954..9a0886599d61 100644
--- a/frontend/src/views/auth/LoginView.vue
+++ b/frontend/src/views/auth/LoginView.vue
@@ -66,7 +66,7 @@
               <Icon v-else name="eye" size="md" />
             </button>
           </div>
-          <div class="mt-1 flex items-center justify-between">
+          <div class="mt-1 flex items-center justify-between" data-ui="auth-link-row">
             <span></span>
             <router-link
               v-if="passwordResetEnabled && !backendModeEnabled"
diff --git a/frontend/src/views/user/UsageView.vue b/frontend/src/views/user/UsageView.vue
index 61cd5846fd06..8329806f9059 100644
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -23,7 +23,7 @@
           </div>
         </div>
 
-        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div data-ui="dist-grid" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
           <ModelDistributionChart
             v-model:metric="modelDistributionMetric"
             :model-stats="requestedModelStats"
@@ -47,7 +47,7 @@
           />
         </div>
 
-        <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        <div data-ui="dist-grid" class="grid grid-cols-1 gap-6 lg:grid-cols-2">
           <EndpointDistributionChart
             v-model:source="endpointDistributionSource"
             v-model:metric="endpointDistributionMetric"

From bd3c92e4640f2837ad480676fbf94820dcdd2c92 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Wed, 30 Sep 2026 11:56:45 +0800
Subject: [PATCH 11/11] fix(ui-el): V3-10 redeem insets win again; V3-11 and
 two more 2px page-head offsets (channel monitor, risk control)

---
 .../src/styles/console/pages/ops-channels.css     |  1 -
 frontend/src/styles/console/pages/user.css        | 15 ++++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/styles/console/pages/ops-channels.css b/frontend/src/styles/console/pages/ops-channels.css
index 0d4186418dc1..e69f9ba36c42 100644
--- a/frontend/src/styles/console/pages/ops-channels.css
+++ b/frontend/src/styles/console/pages/ops-channels.css
@@ -2314,7 +2314,6 @@ html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > h1 > sp
 }
 
 html.flat-theme [data-ui~="channel-monitor-page"] > header.page-header > p.page-description {
-  margin-top: 2px;
   font-size: 13px;
   line-height: 19.5px;
   color: rgb(var(--ui-muted));
diff --git a/frontend/src/styles/console/pages/user.css b/frontend/src/styles/console/pages/user.css
index 5104e9081cd9..1da08a0439c8 100644
--- a/frontend/src/styles/console/pages/user.css
+++ b/frontend/src/styles/console/pages/user.css
@@ -57,8 +57,9 @@ html.flat-theme [data-testid="profile-shell"] [class~="space-y-6"] > :not([hidde
 
 /* Cards on these pages: the reference's panel inset (16px, REF §6 p-4) instead of upstream's 24; a header bar is
    12 / 16 on the structural line with the title 14 / 600 (the reference's modal and card titles) and its note
-   12.5px muted. The card bodies: the profile's at 0,6,2 (its hero excluded), the redeem page's at 0,5,2 so that the
-   redeem page's own insets (3.1 the note, 3.3 the history, 3.4 the result, all 0,5,2 and later) win (final review V3-10). */
+   12.5px muted. The card bodies: the profile's at 0,6,2 without its overview head (4.1 keeps that one flush, final
+   review V3-04); the redeem page's at 0,5,2, so that the page's own insets further down, of the same weight, win
+   (3.3 the note, 3.4 the recent activity, 3.5 the result panels; final review V3-10). */
 html.flat-theme :is([data-ui="user-redeem"], [data-ui="user-affiliate"], [data-ui="user-purchase"], [data-testid="profile-shell"]) .card:is([class~="p-6"], [class~="p-5"]),
 html.flat-theme [data-testid="profile-shell"] .card:not([data-testid="profile-overview-hero"]) > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]),
 html.flat-theme [data-ui="user-redeem"] .card > div:is([class~="p-6"], [class~="px-6"][class~="py-6"]) {
@@ -1697,10 +1698,14 @@ html.flat-theme [data-ui="user-orders"] > .table-wrapper .table-body > tr > td[c
     white-space: nowrap;
   }
 
-  /* the block after a hidden heading starts the page (Codex 路由设置's intro kept the page rhythm's 12px, 渠道监控's
-     description its 2px); from 1024px the pages clear the same margins */
+  /* the block under such a heading starts the page: Codex 路由设置's intro kept the page rhythm's 12px (shell.css) and
+     渠道监控's description its 2px (ops-channels.css 5.3); with the heading out of the flow the margin collapsed through
+     the page root and moved the whole page down (final review V3-11). 风控中心's description kept its 2px
+     (ops-channels.css 8) under the hidden title. The doubled root attribute outranks the rhythm (0,6,2) and the
+     descriptions' margins (0,4,3 / 0,4,4), as settings-ops-public.css 7.2 does for the intro from 1024px. */
   html.flat-theme [data-ui~="codex-runtime"][data-ui~="codex-runtime"] > h2:first-child:not([hidden]) + p:not([hidden]),
-  html.flat-theme [data-ui~="channel-monitor-page"][data-ui~="channel-monitor-page"] > header.page-header > h1 + p.page-description {
+  html.flat-theme [data-ui~="channel-monitor-page"][data-ui~="channel-monitor-page"] > header.page-header > p.page-description,
+  html.flat-theme [data-ui~="risk-page"][data-ui~="risk-page"] > div:first-child > div:first-child > p {
     margin-top: 0;
   }