From 24405a4fd52338218809531ec43d4e58c1a2bc43 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Mon, 28 Sep 2026 13:46:14 +0800
Subject: [PATCH] feat(ui): Apple-style console theme site-wide, IP copy
 formats and full names

- Console theme v2 (flat_theme_enabled): Apple HIG / Liquid Glass language.
  Colour only where upstream sub2api has colour (upstream primary becomes
  Apple blue), upstream platform colours, glass chrome, tactile controls,
  layered near-black dark mode; Inter (OFL, @fontsource-variable/inter 5.3.0)
  replaces Geist Sans. Rolled out to every page after a light/dark/mobile
  page sweep with pixel contrast audits; theme off still renders upstream.
- IP management: the copy button copies socks5://user:pass@host:port and a
  menu offers the other formats.
- Distribution tables show full model/group/endpoint names; readable
  placeholders.
- Usage popovers stay inside the viewport, batch-test errors show their text,
  charts read theme tokens (upstream colours when the theme is off), ops
  error messages are no longer cut in script.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .downstream/native-domains.md                 |   14 +-
 THIRD_PARTY_NOTICES.md                        |    8 +-
 .../fonts/geist/Geist-Variable.latin.woff2    |  Bin 32968 -> 0 bytes
 .../fonts/inter/Inter-Variable.latin.woff2    |  Bin 0 -> 48256 bytes
 frontend/src/assets/fonts/inter/OFL.txt       |   93 +
 .../admin/account/AccountStatsModal.vue       |   20 +-
 .../admin/account/BatchAccountTestModal.vue   |    3 +-
 .../admin/account/ReAuthAccountModal.vue      |    2 +-
 .../admin/payment/DailyRevenueChart.vue       |    8 +-
 .../src/components/admin/usage/UsageTable.vue |   67 +-
 .../charts/EndpointDistributionChart.vue      |    2 +-
 .../charts/GroupDistributionChart.vue         |    2 +-
 .../charts/ModelDistributionChart.vue         |    4 +-
 .../src/components/charts/TokenUsageTrend.vue |    3 +-
 .../charts/UserBreakdownSubTable.vue          |    2 +-
 frontend/src/components/common/DataTable.vue  |   16 +-
 frontend/src/components/common/GroupBadge.vue |   11 +-
 frontend/src/components/common/ModelIcon.vue  |    2 +-
 .../components/common/PlatformTypeBadge.vue   |   14 +-
 .../user/dashboard/UserDashboardCharts.vue    |    7 +-
 .../src/composables/usePresentationColors.ts  |  231 +-
 .../channel-monitor-v2/MonitorTrendChart.vue  |   17 +-
 .../src/i18n/locales/en/admin/resources.ts    |    7 +-
 .../src/i18n/locales/zh/admin/resources.ts    |    7 +-
 frontend/src/style.css                        | 5510 +++++++++++++++--
 frontend/src/styles/announcement-markdown.css |    8 +-
 frontend/src/styles/flat-theme.css            | 1032 +--
 frontend/src/styles/onboarding.css            |  102 +-
 frontend/src/utils/platformColors.ts          |   81 +-
 frontend/src/views/KeyUsageView.vue           |   41 +-
 frontend/src/views/admin/DashboardView.vue    |   16 +-
 frontend/src/views/admin/ProxiesView.vue      |   47 +-
 frontend/src/views/admin/SettingsView.vue     |   22 +-
 .../__tests__/ProxiesView.copyFormats.spec.ts |   38 +
 .../ops/components/OpsDashboardHeader.vue     |    8 +-
 .../components/OpsErrorDistributionChart.vue  |   24 +-
 .../admin/ops/components/OpsErrorLogTable.vue |    6 +-
 .../ops/components/OpsErrorTrendChart.vue     |    8 +-
 .../admin/ops/components/OpsLatencyChart.vue  |    2 +-
 .../components/OpsSwitchRateTrendChart.vue    |    4 +-
 .../components/OpsThroughputTrendChart.vue    |   12 +-
 frontend/src/views/setup/SetupWizardView.vue  |    2 +-
 frontend/src/views/user/CustomPageView.vue    |    2 +-
 frontend/src/views/user/PaymentQRCodeView.vue |    2 +-
 frontend/tailwind.config.js                   |   14 +-
 45 files changed, 6260 insertions(+), 1261 deletions(-)
 delete mode 100644 frontend/src/assets/fonts/geist/Geist-Variable.latin.woff2
 create mode 100644 frontend/src/assets/fonts/inter/Inter-Variable.latin.woff2
 create mode 100644 frontend/src/assets/fonts/inter/OFL.txt
 create mode 100644 frontend/src/views/admin/__tests__/ProxiesView.copyFormats.spec.ts

diff --git a/.downstream/native-domains.md b/.downstream/native-domains.md
index 130541aa15d3..b8013bf0019f 100644
--- a/.downstream/native-domains.md
+++ b/.downstream/native-domains.md
@@ -112,12 +112,14 @@ actual model-quality diagnostics remain separately budgeted and coordinated.
 
 `observability.theme_enabled` (public `flat_theme_enabled`, default on) toggles
 `html.flat-theme`; switching it off restores the upstream look. The console look
-lives only in the central layer: `frontend/src/styles/flat-theme.css` (tokens and
-Geist/Geist Mono Latin subsets; CJK uses system fonts), `frontend/tailwind.config.js`
-(every palette, radius, shadow and gradient resolves through a CSS variable whose
-fallback is the upstream value; hue families fold into danger/warning/info/success/
-purple; `primary` is ink), `frontend/src/style.css` (upstream recipes plus a
-`:where(.flat-theme)` console block) and the shared components and layout. Page
+lives only in the central layer: `frontend/src/styles/flat-theme.css` (tokens, the
+Inter and Geist Mono Latin subsets; Chinese uses MiSans loaded at runtime from
+Xiaomi's font service by `utils/flatTheme.ts`, falling back to system fonts),
+`frontend/tailwind.config.js` (every palette, radius, shadow and gradient resolves
+through a CSS variable whose fallback is the upstream value; `primary` is Apple blue
+and the hue families map to Apple system colours), `frontend/src/style.css`
+(upstream recipes plus a `flat-theme` console block: colour only where upstream has
+colour, Liquid Glass only on chrome) and the shared components and layout. Page
 files keep upstream class strings; after upstream merges, re-run the ops-repo
 de-sweep (`artifacts/tmp/admin-rework/ui/desweep/desweep.py`) instead of restyling
 pages.
diff --git a/THIRD_PARTY_NOTICES.md b/THIRD_PARTY_NOTICES.md
index e118ba3133f6..6549edee1a69 100644
--- a/THIRD_PARTY_NOTICES.md
+++ b/THIRD_PARTY_NOTICES.md
@@ -38,6 +38,10 @@ 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.
 
-## Geist
+## Inter
 
-The frontend includes the Geist and Geist Mono variable fonts 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 fonts are distributed under the SIL Open Font License 1.1, included at `frontend/src/assets/fonts/geist/OFL.txt`.
+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`.
+
+## Geist Mono
+
+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`.
diff --git a/frontend/src/assets/fonts/geist/Geist-Variable.latin.woff2 b/frontend/src/assets/fonts/geist/Geist-Variable.latin.woff2
deleted file mode 100644
index 87ca17423f05efb43ed6d555d71a1804cdbda3f3..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 32968
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
U=<LMaA2PaG<k`x49IIZj1$QU5n*aa+

diff --git a/frontend/src/assets/fonts/inter/Inter-Variable.latin.woff2 b/frontend/src/assets/fonts/inter/Inter-Variable.latin.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..d15208de03cd1ad7c5199f0a0ce915fe841e4722
GIT binary patch
literal 48256
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

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/fonts/inter/OFL.txt b/frontend/src/assets/fonts/inter/OFL.txt
new file mode 100644
index 000000000000..40589daa9de8
--- /dev/null
+++ b/frontend/src/assets/fonts/inter/OFL.txt
@@ -0,0 +1,93 @@
+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/admin/account/AccountStatsModal.vue b/frontend/src/components/admin/account/AccountStatsModal.vue
index 50cc9a66149b..2c5af222faf1 100644
--- a/frontend/src/components/admin/account/AccountStatsModal.vue
+++ b/frontend/src/components/admin/account/AccountStatsModal.vue
@@ -520,8 +520,8 @@ const trendChartData = computed(() => {
       {
         label: t('usage.accountBilled') + ' (USD)',
         data: stats.value.history.map((h) => h.actual_cost),
-        borderColor: '#3b82f6',
-        backgroundColor: 'rgba(59, 130, 246, 0.1)',
+        borderColor: presentation.value.tone('#3b82f6'),
+        backgroundColor: presentation.value.tone('rgba(59, 130, 246, 0.1)'),
         fill: true,
         tension: 0.3,
         yAxisID: 'y'
@@ -529,8 +529,8 @@ const trendChartData = computed(() => {
       {
         label: t('usage.userBilled') + ' (USD)',
         data: stats.value.history.map((h) => h.user_cost),
-        borderColor: '#10b981',
-        backgroundColor: 'rgba(16, 185, 129, 0.08)',
+        borderColor: presentation.value.tone('#10b981'),
+        backgroundColor: presentation.value.tone('rgba(16, 185, 129, 0.08)'),
         fill: false,
         tension: 0.3,
         borderDash: [5, 5],
@@ -539,8 +539,8 @@ const trendChartData = computed(() => {
       {
         label: t('admin.accounts.stats.requests'),
         data: stats.value.history.map((h) => h.requests),
-        borderColor: '#f97316',
-        backgroundColor: 'rgba(249, 115, 22, 0.1)',
+        borderColor: presentation.value.tone('#f97316'),
+        backgroundColor: presentation.value.tone('rgba(249, 115, 22, 0.1)'),
         fill: false,
         tension: 0.3,
         yAxisID: 'y1'
@@ -605,7 +605,7 @@ const lineChartOptions = computed(() => ({
         color: chartColors.value.grid
       },
       ticks: {
-        color: '#3b82f6',
+        color: presentation.value.toneText('#3b82f6'),
         font: {
           size: 10
         },
@@ -614,7 +614,7 @@ const lineChartOptions = computed(() => ({
       title: {
         display: true,
         text: t('usage.accountBilled') + ' (USD)',
-        color: '#3b82f6',
+        color: presentation.value.toneText('#3b82f6'),
         font: {
           size: 11
         }
@@ -628,7 +628,7 @@ const lineChartOptions = computed(() => ({
         drawOnChartArea: false
       },
       ticks: {
-        color: '#f97316',
+        color: presentation.value.toneText('#f97316'),
         font: {
           size: 10
         },
@@ -637,7 +637,7 @@ const lineChartOptions = computed(() => ({
       title: {
         display: true,
         text: t('admin.accounts.stats.requests'),
-        color: '#f97316',
+        color: presentation.value.toneText('#f97316'),
         font: {
           size: 11
         }
diff --git a/frontend/src/components/admin/account/BatchAccountTestModal.vue b/frontend/src/components/admin/account/BatchAccountTestModal.vue
index eeee0952fb6a..ac387cc667e6 100644
--- a/frontend/src/components/admin/account/BatchAccountTestModal.vue
+++ b/frontend/src/components/admin/account/BatchAccountTestModal.vue
@@ -91,6 +91,7 @@ import BaseDialog from '@/components/common/BaseDialog.vue'
 import { adminAPI } from '@/api/admin'
 import type { Account } from '@/types'
 import type { BatchTestAccountEvent } from '@/api/admin/accounts'
+import { extractApiErrorMessage } from '@/utils/apiError'
 
 type KnownAccount = Pick<Account, 'id' | 'name' | 'platform'>
 const props = defineProps<{ show: boolean; accountIds: number[]; accounts: KnownAccount[] }>()
@@ -184,7 +185,7 @@ const loadModels = async () => {
       row.supportedModels = (await adminAPI.accounts.getAvailableModels(row.id)).map(model => model.id)
       if (row.status === 'checking') row.status = 'ready'
     } catch (error) {
-      if (row.status === 'checking') { row.status = 'skipped'; row.error = String(error) }
+      if (row.status === 'checking') { row.status = 'skipped'; row.error = extractApiErrorMessage(error, t('common.unknownError')) }
     }
   }
   await Promise.all(Array.from({ length: Math.min(CATALOG_CONCURRENCY, queue.length) }, async () => {
diff --git a/frontend/src/components/admin/account/ReAuthAccountModal.vue b/frontend/src/components/admin/account/ReAuthAccountModal.vue
index 0a094834a3ea..7696e6dbb97e 100644
--- a/frontend/src/components/admin/account/ReAuthAccountModal.vue
+++ b/frontend/src/components/admin/account/ReAuthAccountModal.vue
@@ -22,7 +22,7 @@
                   : isAntigravity
                     ? 'from-purple-500 to-purple-600'
                     : isGrok
-                      ? 'bg-zinc-700 '
+                      ? 'from-zinc-700 to-zinc-900'
                       : 'from-orange-500 to-orange-600'
             ]"
           >
diff --git a/frontend/src/components/admin/payment/DailyRevenueChart.vue b/frontend/src/components/admin/payment/DailyRevenueChart.vue
index 6e2544f99436..c811f8f301f2 100644
--- a/frontend/src/components/admin/payment/DailyRevenueChart.vue
+++ b/frontend/src/components/admin/payment/DailyRevenueChart.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script setup lang="ts">
+import { usePresentationColors } from '@/composables/usePresentationColors'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import {
@@ -38,6 +39,7 @@ import type { DailyPaymentStats } from '@/types/payment'
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend, Filler)
 
 const { t } = useI18n()
+const presentation = usePresentationColors()
 
 const props = defineProps<{
   data: DailyPaymentStats[]
@@ -58,7 +60,7 @@ const chartData = computed(() => {
     labels: props.data.map(d => d.date),
     datasets: [
       ...currencies.map((currency, index) => {
-        const [borderColor, backgroundColor] = colors[index % colors.length]
+        const [borderColor, backgroundColor] = colors[index % colors.length].map(presentation.value.tone)
         return {
           label: `${currency} ${t('payment.admin.revenue')}`,
           data: props.data.map(day => day.amount[currency] || 0),
@@ -73,8 +75,8 @@ const chartData = computed(() => {
       {
         label: t('payment.admin.orderCount'),
         data: props.data.map(d => d.count),
-        borderColor: 'rgb(16, 185, 129)',
-        backgroundColor: 'rgba(16, 185, 129, 0.1)',
+        borderColor: presentation.value.tone('rgb(16, 185, 129)'),
+        backgroundColor: presentation.value.tone('rgba(16, 185, 129, 0.1)'),
         fill: false,
         tension: 0.3,
         pointRadius: 3,
diff --git a/frontend/src/components/admin/usage/UsageTable.vue b/frontend/src/components/admin/usage/UsageTable.vue
index a9498f8fa379..16dc6498534e 100644
--- a/frontend/src/components/admin/usage/UsageTable.vue
+++ b/frontend/src/components/admin/usage/UsageTable.vue
@@ -315,6 +315,7 @@
   <Teleport to="body">
     <div
       v-if="tokenTooltipVisible"
+      ref="tokenTooltipRef"
       class="fixed z-[9999] pointer-events-none -translate-y-1/2"
       :style="{
         left: tokenTooltipPosition.x + 'px',
@@ -390,7 +391,7 @@
             <span class="font-semibold text-blue-400">{{ ((tokenTooltipData?.input_tokens || 0) + (tokenTooltipData?.output_tokens || 0) + (tokenTooltipData?.cache_creation_tokens || 0) + (tokenTooltipData?.cache_read_tokens || 0)).toLocaleString() }}</span>
           </div>
         </div>
-        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
+        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800" :style="tooltipArrowStyle(tokenTooltipPosition)"></div>
       </div>
     </div>
   </Teleport>
@@ -399,6 +400,7 @@
   <Teleport to="body">
     <div
       v-if="tooltipVisible"
+      ref="tooltipRef"
       class="fixed z-[9999] pointer-events-none -translate-y-1/2"
       :style="{
         left: tooltipPosition.x + 'px',
@@ -527,14 +529,14 @@
             </div>
           </template>
         </div>
-        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800"></div>
+        <div class="absolute right-full top-1/2 h-0 w-0 -translate-y-1/2 border-b-[6px] border-r-[6px] border-t-[6px] border-b-transparent border-r-gray-900 border-t-transparent dark:border-r-gray-800" :style="tooltipArrowStyle(tooltipPosition)"></div>
       </div>
     </div>
   </Teleport>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { formatDateTime, formatReasoningEffort, reasoningEffortValuesEqual } from '@/utils/format'
@@ -690,15 +692,54 @@ const copyRequestId = (requestId: string) => copyIdentifier(requestId, t('admin.
 const copyUpstreamRequestId = (upstreamRequestId: string) =>
   copyIdentifier(upstreamRequestId, t('admin.usage.upstreamRequestIdCopied'))
 
+// Tooltip placement: right of the trigger; on its left when the popover would run past the right edge of the
+// viewport (clamped to the margin when neither side fits), and moved up or down to stay on screen, the arrow still
+// pointing at the trigger. Measured once the popover has rendered, so every value stays readable.
+type TooltipPosition = { x: number; y: number; flip: boolean; arrowY: number | null; arrow: boolean }
+const TOOLTIP_GAP = 8
+const VIEWPORT_MARGIN = 8
+const initialTooltipPosition = (trigger: DOMRect): TooltipPosition =>
+  ({ x: trigger.right + TOOLTIP_GAP, y: trigger.top + trigger.height / 2, flip: false, arrowY: null, arrow: true })
+
+const placeTooltip = (trigger: DOMRect, el: HTMLElement | null, position: TooltipPosition) => {
+  if (!el) return
+  const { width, height } = el.getBoundingClientRect()
+  const viewportWidth = document.documentElement.clientWidth
+  const viewportHeight = document.documentElement.clientHeight
+  const right = trigger.right + TOOLTIP_GAP
+  const left = trigger.left - TOOLTIP_GAP - width
+  const fitsRight = right + width <= viewportWidth - VIEWPORT_MARGIN
+  const fitsLeft = left >= VIEWPORT_MARGIN
+  position.flip = !fitsRight && fitsLeft
+  position.arrow = fitsRight || fitsLeft
+  position.x = fitsRight ? right : fitsLeft ? left : Math.max(VIEWPORT_MARGIN, viewportWidth - VIEWPORT_MARGIN - width)
+  // the box is centred on y (-translate-y-1/2)
+  const anchorY = trigger.top + trigger.height / 2
+  const half = height / 2
+  position.y = Math.max(VIEWPORT_MARGIN + half, Math.min(anchorY, viewportHeight - VIEWPORT_MARGIN - half))
+  position.arrowY = position.y === anchorY ? null : Math.max(10, Math.min(height - 10, anchorY - position.y + half))
+}
+
+// the arrow moves to the right edge (mirrored) when the popover sits left of its trigger
+const tooltipArrowStyle = (position: TooltipPosition) => ({
+  ...(position.arrowY === null ? {} : { top: `${position.arrowY}px` }),
+  ...(position.flip ? { left: '100%', right: 'auto', scale: '-1 1' } : {}),
+  ...(position.arrow ? {} : { display: 'none' })
+})
+
 // Tooltip state - cost
 const tooltipVisible = ref(false)
-const tooltipPosition = ref({ x: 0, y: 0 })
+const tooltipPosition = ref<TooltipPosition>({ x: 0, y: 0, flip: false, arrowY: null, arrow: true })
 const tooltipData = ref<AdminUsageLog | null>(null)
+const tooltipRef = ref<HTMLElement | null>(null)
+let tooltipShowCount = 0
 
 // Tooltip state - token
 const tokenTooltipVisible = ref(false)
-const tokenTooltipPosition = ref({ x: 0, y: 0 })
+const tokenTooltipPosition = ref<TooltipPosition>({ x: 0, y: 0, flip: false, arrowY: null, arrow: true })
 const tokenTooltipData = ref<AdminUsageLog | null>(null)
+const tokenTooltipRef = ref<HTMLElement | null>(null)
+let tokenTooltipShowCount = 0
 
 const getRequestTypeLabel = (row: AdminUsageLog): string => {
   const requestType = resolveUsageRequestType(row)
@@ -737,13 +778,15 @@ const formatDuration = (ms: number | null | undefined): string => {
 }
 
 // Cost tooltip functions
-const showTooltip = (event: MouseEvent, row: AdminUsageLog) => {
+const showTooltip = async (event: MouseEvent, row: AdminUsageLog) => {
   const target = event.currentTarget as HTMLElement
   const rect = target.getBoundingClientRect()
+  const shown = ++tooltipShowCount
   tooltipData.value = row
-  tooltipPosition.value.x = rect.right + 8
-  tooltipPosition.value.y = rect.top + rect.height / 2
+  tooltipPosition.value = initialTooltipPosition(rect)
   tooltipVisible.value = true
+  await nextTick()
+  if (shown === tooltipShowCount && tooltipVisible.value) placeTooltip(rect, tooltipRef.value, tooltipPosition.value)
 }
 
 const hideTooltip = () => {
@@ -752,13 +795,15 @@ const hideTooltip = () => {
 }
 
 // Token tooltip functions
-const showTokenTooltip = (event: MouseEvent, row: AdminUsageLog) => {
+const showTokenTooltip = async (event: MouseEvent, row: AdminUsageLog) => {
   const target = event.currentTarget as HTMLElement
   const rect = target.getBoundingClientRect()
+  const shown = ++tokenTooltipShowCount
   tokenTooltipData.value = row
-  tokenTooltipPosition.value.x = rect.right + 8
-  tokenTooltipPosition.value.y = rect.top + rect.height / 2
+  tokenTooltipPosition.value = initialTooltipPosition(rect)
   tokenTooltipVisible.value = true
+  await nextTick()
+  if (shown === tokenTooltipShowCount && tokenTooltipVisible.value) placeTooltip(rect, tokenTooltipRef.value, tokenTooltipPosition.value)
 }
 
 const hideTokenTooltip = () => {
diff --git a/frontend/src/components/charts/EndpointDistributionChart.vue b/frontend/src/components/charts/EndpointDistributionChart.vue
index 0ec20f32bded..f9327c885c5a 100644
--- a/frontend/src/components/charts/EndpointDistributionChart.vue
+++ b/frontend/src/components/charts/EndpointDistributionChart.vue
@@ -93,7 +93,7 @@
                 :class="enableBreakdown ? 'cursor-pointer hover:bg-gray-50 dark:hover:bg-dark-700/40' : ''"
                 @click="enableBreakdown && toggleBreakdown(item.endpoint)"
               >
-                <td class="max-w-[180px] truncate py-1.5 font-medium" :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 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 abc194640db3..16a30d24e978 100644
--- a/frontend/src/components/charts/GroupDistributionChart.vue
+++ b/frontend/src/components/charts/GroupDistributionChart.vue
@@ -57,7 +57,7 @@
                 @click="enableBreakdown && group.group_id > 0 && toggleBreakdown('group', group.group_id)"
               >
                 <td
-                  class="max-w-[100px] truncate py-1.5 font-medium"
+                  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 0cb5c6bc2070..7463eb743560 100644
--- a/frontend/src/components/charts/ModelDistributionChart.vue
+++ b/frontend/src/components/charts/ModelDistributionChart.vue
@@ -126,7 +126,7 @@
                 @click="enableBreakdown && toggleBreakdown('model', model.model)"
               >
                 <td
-                  class="max-w-[100px] truncate py-1.5 font-medium"
+                  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"
                 >
@@ -212,7 +212,7 @@
                     {{ item.isOther ? 'Σ' : `#${index + 1}` }}
                   </span>
                   <span
-                    class="block max-w-[140px] truncate font-medium text-gray-900 dark:text-white"
+                    class="block min-w-0 font-medium text-gray-900 [overflow-wrap:anywhere] dark:text-white"
                     :title="getRankingRowLabel(item)"
                   >
                     {{ getRankingRowLabel(item) }}
diff --git a/frontend/src/components/charts/TokenUsageTrend.vue b/frontend/src/components/charts/TokenUsageTrend.vue
index 92a041e8ba03..23f68dafec2a 100644
--- a/frontend/src/components/charts/TokenUsageTrend.vue
+++ b/frontend/src/components/charts/TokenUsageTrend.vue
@@ -193,7 +193,8 @@ const lineOptions = computed(() => ({
         drawOnChartArea: false
       },
       ticks: {
-        color: chartColors.value.cacheHitRate,
+        // the hit-rate axis labels are drawn in the series colour: its readable text shade under the console theme
+        color: presentation.value.toneText('#8b5cf6'),
         font: {
           size: 10
         },
diff --git a/frontend/src/components/charts/UserBreakdownSubTable.vue b/frontend/src/components/charts/UserBreakdownSubTable.vue
index 4b61c0897121..7e99407bd3d3 100644
--- a/frontend/src/components/charts/UserBreakdownSubTable.vue
+++ b/frontend/src/components/charts/UserBreakdownSubTable.vue
@@ -13,7 +13,7 @@
           :key="user.user_id"
           class="border-t border-gray-100/50 dark:border-dark-700/50"
         >
-          <td class="max-w-[120px] truncate py-1 pl-6 text-gray-600 dark:text-gray-300" :title="user.email">
+          <td class="py-1 pl-6 text-gray-600 [overflow-wrap:anywhere] dark:text-gray-300" :title="user.email">
             {{ user.email || `User #${user.user_id}` }}
           </td>
           <td class="py-1 text-right text-gray-500 dark:text-gray-400">
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 842cc98eaf63..5430f835103b 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -1044,9 +1044,9 @@ tbody tr:hover .sticky-col {
   top: 0;
   right: 0;
   bottom: 0;
-  width: 1px;
+  width: 10px;
   transform: translateX(100%);
-  background: rgb(var(--ui-line));
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
   pointer-events: none;
 }
 
@@ -1057,9 +1057,9 @@ tbody tr:hover .sticky-col {
   top: 0;
   right: 0;
   bottom: 0;
-  width: 1px;
+  width: 10px;
   transform: translateX(100%);
-  background: rgb(var(--ui-line));
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
   pointer-events: none;
 }
 
@@ -1070,20 +1070,20 @@ tbody tr:hover .sticky-col {
   top: 0;
   left: 0;
   bottom: 0;
-  width: 1px;
+  width: 10px;
   transform: translateX(-100%);
-  background: rgb(var(--ui-line));
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
   pointer-events: none;
 }
 
 /* 暗色模式阴影 */
 .dark .is-scrollable .sticky-col-left::after,
 .dark .is-scrollable .sticky-col-left-second::after {
-  background: rgb(var(--ui-line));
+  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
 }
 
 .dark .is-scrollable .sticky-col-right::before {
-  background: rgb(var(--ui-line));
+  background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
 }
 </style>
 
diff --git a/frontend/src/components/common/GroupBadge.vue b/frontend/src/components/common/GroupBadge.vue
index a81f66ae8a82..ffe2d2e425d5 100644
--- a/frontend/src/components/common/GroupBadge.vue
+++ b/frontend/src/components/common/GroupBadge.vue
@@ -33,7 +33,6 @@ import type { SubscriptionType, GroupPlatform } from '@/types'
 import { useAppStore } from '@/stores/app'
 import { formatPeakRateWindow, serverTimezoneLabel } from '@/utils/peak-rate'
 import PlatformIcon from './PlatformIcon.vue'
-import { flatThemeActive } from '@/utils/flatTheme'
 
 interface Props {
   name: string
@@ -148,10 +147,7 @@ const labelClass = computed(() => {
     }
   }
 
-  // 正常状态或无天数：根据平台显示主题色(控制台主题下平台靠图标区分,色相只表示状态)
-  if (flatThemeActive.value) {
-    return `${base} bg-white/60 text-gray-700 dark:bg-white/10 dark:text-gray-200`
-  }
+  // 正常状态或无天数：根据平台显示主题色
   if (props.platform === 'anthropic') {
     return `${base} bg-orange-200/60 text-orange-800 dark:bg-orange-800/40 dark:text-orange-300`
   }
@@ -191,11 +187,6 @@ const peakRateClass = computed(() => {
 
 // Badge color based on platform and subscription type
 const badgeClass = computed(() => {
-  if (flatThemeActive.value) {
-    return isSubscription.value
-      ? 'bg-gray-200/70 text-gray-800 dark:bg-dark-600 dark:text-gray-100'
-      : 'bg-gray-100 text-gray-700 dark:bg-dark-700 dark:text-gray-200'
-  }
   if (props.platform === 'anthropic') {
     // Claude: orange theme
     return isSubscription.value
diff --git a/frontend/src/components/common/ModelIcon.vue b/frontend/src/components/common/ModelIcon.vue
index 67f81f16835f..2a05bf71fac2 100644
--- a/frontend/src/components/common/ModelIcon.vue
+++ b/frontend/src/components/common/ModelIcon.vue
@@ -270,7 +270,7 @@ const iconInfo = computed(() => iconKey.value ? iconData[iconKey.value] : null)
   align-items: center;
   justify-content: center;
   border-radius: 4px;
-  background: #6366f1;
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
   color: white;
   font-weight: 600;
   flex-shrink: 0;
diff --git a/frontend/src/components/common/PlatformTypeBadge.vue b/frontend/src/components/common/PlatformTypeBadge.vue
index a700828ed4b2..cadb255d2b22 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">
     <!-- Row 1: Platform + Type -->
-    <div :class="['inline-flex items-center overflow-hidden rounded-md', flatThemeActive && NEUTRAL_ROW]">
+    <div class="inline-flex items-center overflow-hidden rounded-md">
       <span :class="['inline-flex items-center gap-1 px-2 py-1', platformClass]">
         <PlatformIcon :platform="platform" size="xs" />
         <span>{{ platformLabel }}</span>
@@ -31,7 +31,7 @@
       </span>
     </div>
     <!-- Row 2: Plan type + Privacy mode (only if either exists) -->
-    <div v-if="planLabel || privacyBadge" :class="['inline-flex items-center overflow-hidden rounded-md', flatThemeActive && NEUTRAL_ROW]">
+    <div v-if="planLabel || privacyBadge" class="inline-flex items-center overflow-hidden rounded-md">
       <span v-if="planLabel" :class="['inline-flex items-center gap-1 px-1.5 py-1', planBadgeClass]">
         <GrokFreeIcon
           v-if="isGrokFreePlan"
@@ -70,7 +70,6 @@ import { useI18n } from 'vue-i18n'
 import type { AccountPlatform, AccountType } from '@/types'
 import { platformLabel as sharedPlatformLabel } from '@/utils/platformColors'
 import { isOpenAIBusinessPlanType, normalizePlanType, openAIPlanTypeLabel } from '@/utils/planType'
-import { flatThemeActive } from '@/utils/flatTheme'
 import GrokFreeIcon from './GrokFreeIcon.vue'
 import PlatformIcon from './PlatformIcon.vue'
 import Icon from '@/components/icons/Icon.vue'
@@ -176,14 +175,7 @@ const planIconName = computed<'bolt' | null>(() => {
   return null
 })
 
-// Console theme: platform and plan are told apart by logo and label, not hue (hue = status).
-// One outlined, segmented chip: the row carries the ring, segments are split by a hairline.
-const NEUTRAL_PLATFORM = 'bg-white text-gray-900 dark:bg-dark-800 dark:text-gray-100'
-const NEUTRAL_TYPE = 'border-l border-gray-200 bg-gray-50 text-gray-600 dark:border-dark-600 dark:bg-dark-700 dark:text-dark-300'
-const NEUTRAL_ROW = 'self-start ring-1 ring-gray-200 dark:ring-dark-600'
-
 const platformClass = computed(() => {
-  if (flatThemeActive.value) return NEUTRAL_PLATFORM
   if (props.platform === 'anthropic') {
     return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400'
   }
@@ -212,7 +204,6 @@ const platformClass = computed(() => {
 })
 
 const typeClass = computed(() => {
-  if (flatThemeActive.value) return NEUTRAL_TYPE
   if (props.platform === 'anthropic') {
     return 'bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400'
   }
@@ -252,7 +243,6 @@ const planBadgeClass = computed(() => {
   ) {
     return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
   }
-  if (flatThemeActive.value) return NEUTRAL_PLATFORM
   if (props.platform === 'grok' && normalizedPlanType.value) {
     // Heavy / SuperGrok Heavy → purple
     if (normalizedPlanType.value.includes('heavy')) {
diff --git a/frontend/src/components/user/dashboard/UserDashboardCharts.vue b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
index 0aa17d1e75e3..0ea213dc35d3 100644
--- a/frontend/src/components/user/dashboard/UserDashboardCharts.vue
+++ b/frontend/src/components/user/dashboard/UserDashboardCharts.vue
@@ -45,7 +45,7 @@
               </thead>
               <tbody>
                 <tr v-for="model in models" :key="model.model" class="border-t border-gray-100 dark:border-dark-700">
-                  <td class="max-w-[100px] truncate py-1.5 font-medium text-gray-900 dark:text-white" :title="model.model">{{ model.model }}</td>
+                  <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>
                   <td class="py-1.5 text-right text-green-600 dark:text-green-400">${{ formatCost(model.actual_cost) }}</td>
@@ -64,6 +64,7 @@
 </template>
 
 <script setup lang="ts">
+import { usePresentationColors } from '@/composables/usePresentationColors'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import LoadingSpinner from '@/components/common/LoadingSpinner.vue'
@@ -79,12 +80,14 @@ ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, ArcEleme
 const props = defineProps<{ loading: boolean, startDate: string, endDate: string, granularity: string, trend: TrendDataPoint[], models: ModelStat[] }>()
 defineEmits(['update:startDate', 'update:endDate', 'update:granularity', 'dateRangeChange', 'granularityChange', 'refresh'])
 const { t } = useI18n()
+const presentation = usePresentationColors()
 
 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),
-    backgroundColor: ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899', '#06b6d4', '#84cc16']
+    // upstream's 8 colours are series 1-6, 11 (cyan) and 10 (lime); the Apple series under the console 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 3a848ed167c9..43f2126f6246 100644
--- a/frontend/src/composables/usePresentationColors.ts
+++ b/frontend/src/composables/usePresentationColors.ts
@@ -1,25 +1,51 @@
 import { onBeforeUnmount, onMounted, shallowRef } from 'vue'
-import { Chart, type ScriptableContext } from 'chart.js'
+import { Chart, type Plugin, type ScriptableContext } from 'chart.js'
 
-// Console theme: canvas text uses the UI font stack (Geist + MiSans) instead of Chart.js'
-// Helvetica/Arial default, lines are 2px and doughnuts are rings. 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).
+// 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
 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 }
+function parseColor(value: string): ParsedColor | null {
+  const hex = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(value)
+  if (hex) {
+    const [r, g, b] = [0, 2, 4].map((offset) => parseInt(hex[1].slice(offset, offset + 2), 16))
+    return { r, g, b, a: hex[2] ? parseInt(hex[2], 16) / 255 : 1, hex: true, alpha: hex[2] ?? null }
+  }
+  const rgb = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*([\d.]+)\s*)?\)$/i.exec(value)
+  if (!rgb) return 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)
@@ -49,33 +75,131 @@ function consolePointRadius(ctx: ScriptableContext<'line'>): number {
   return !hasChartValue(data[index - 1]) && !hasChartValue(data[index + 1]) ? restingPointRadius() : 0
 }
 
-function applyConsoleChartDefaults(styles: CSSStyleDeclaration) {
+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>
   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')
+      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]]))
     }
   }
+  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
+  })
 }
 
 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
 }
 
@@ -84,7 +208,7 @@ function restoreUpstreamChartDefaults() {
 const defaults = {
   text: ['#374151', '#e5e7eb'], grid: ['#e5e7eb', '#374151'],
   axis: ['#6b7280', '#9ca3af'], axisGrid: ['#f3f4f6', '#374151'],
-  tooltip: ['#ffffff', '#1f2937'], title: ['#111827', '#f9fafb'],
+  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
@@ -93,22 +217,86 @@ const seriesDefaults = [
   '#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899',
   '#14b8a6', '#f97316', '#6366f1', '#84cc16', '#06b6d4', '#a855f7'
 ] as const
-type Colors = Record<keyof typeof defaults, string> & { series: string[] }
+// 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'
+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
+  [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'],
+  [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'
+}
+const textToken = (family: HueFamily) => family === 'gray' ? '--theme-text-gray-400' : `--theme-text-${family}-500`
+type HuePalette = Partial<Record<HueFamily, ParsedColor>>
+
+function hueFamily(color: ParsedColor): HueFamily | undefined {
+  // a channel or two of tolerance: some upstream literals are off by one (rgba(239, 67, 67, ...) for red-500)
+  return HUES.find(([r, g, b]) => Math.abs(r - color.r) <= 2 && Math.abs(g - color.g) <= 2 && Math.abs(b - color.b) <= 2)?.[3]
+}
+
+function retone(literal: string, palette: HuePalette): string {
+  const color = parseColor(literal)
+  const family = color && hueFamily(color)
+  const target = family ? palette[family] : undefined
+  if (!color || !target) return literal
+  const hex = (value: number) => value.toString(16).padStart(2, '0')
+  if (color.hex) return `#${hex(target.r)}${hex(target.g)}${hex(target.b)}${color.alpha ?? ''}`
+  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[]
+  // semantic marks (health, errors, success rates): upstream's blue / emerald / amber / red 500
+  info: string
+  success: string
+  warning: string
+  danger: string
+  tone: (literal: string) => string
+  toneText: (literal: string) => string
+}
+
+function withPalette(base: Record<keyof typeof defaults, string> & { series: string[] }, marks: HuePalette, inks: HuePalette): Colors {
+  const tone = (literal: string) => retone(literal, marks)
+  return {
+    ...base,
+    info: tone('#3b82f6'),
+    success: tone('#10b981'),
+    warning: tone('#f59e0b'),
+    danger: tone('#ef4444'),
+    tone,
+    toneText: (literal: string) => retone(literal, inks)
+  }
+}
 
 export function usePresentationColors() {
-  const colors = shallowRef<Colors>({
+  const colors = shallowRef<Colors>(withPalette({
     ...(Object.fromEntries(Object.entries(defaults).map(([key, values]) => [key, values[0]])) as Record<keyof typeof defaults, string>),
     series: [...seriesDefaults]
-  })
-  let observer: MutationObserver | null = null, active = false, queued = false
+  }, {}, {}))
+  // (the palette signature starts as the theme-off one: no hue family resolved)
+  let observer: MutationObserver | null = null, active = false, queued = false, paletteKey = '[{},{}]'
   const read = () => {
     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 = { ...colors.value }
+    const next: Record<keyof typeof defaults, string> & { series: string[] } = { ...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]
@@ -117,9 +305,20 @@ export function usePresentationColors() {
       const value = styles.getPropertyValue(`--theme-chart-series-${index + 1}`).trim()
       return /^#[0-9a-f]{6}$/i.test(value) && isColor(value) ? value : fallback
     })
-    const changed = (Object.keys(defaults) as Array<keyof typeof defaults>).some(key => next[key] !== colors.value[key]) ||
+    // 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[]) {
+      const mark = styles.getPropertyValue(MARK_TOKENS[family]).trim()
+      if (/^#[0-9a-f]{6}$/i.test(mark) && isColor(mark)) marks[family] = parseColor(mark) ?? undefined
+      const ink = /^(\d{1,3})\s+(\d{1,3})\s+(\d{1,3})$/.exec(styles.getPropertyValue(textToken(family)).trim())
+      if (ink) inks[family] = parseColor(`rgb(${ink[1]}, ${ink[2]}, ${ink[3]})`) ?? undefined
+    }
+    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])
-    if (changed) colors.value = next
+    paletteKey = nextPaletteKey
+    if (changed) colors.value = withPalette(next, marks, inks)
   }
   const schedule = () => { if (active && !queued) { queued = true; queueMicrotask(read) } }
   onMounted(() => {
diff --git a/frontend/src/features/channel-monitor-v2/MonitorTrendChart.vue b/frontend/src/features/channel-monitor-v2/MonitorTrendChart.vue
index a03d4832775c..8af402f3a607 100644
--- a/frontend/src/features/channel-monitor-v2/MonitorTrendChart.vue
+++ b/frontend/src/features/channel-monitor-v2/MonitorTrendChart.vue
@@ -128,8 +128,8 @@ const chartData = computed(() => {
       {
         label: t('channelMonitorV2.chart.errorDataset'),
         data: errorRates,
-        borderColor: '#ef4444',
-        backgroundColor: 'rgba(239, 67, 67, 0.10)',
+        borderColor: presentation.value.tone('#ef4444'),
+        backgroundColor: presentation.value.tone('rgba(239, 67, 67, 0.10)'),
         yAxisID: 'yPct',
         tension: 0.4,
         cubicInterpolationMode: 'monotone' as const,
@@ -142,8 +142,8 @@ const chartData = computed(() => {
       {
         label: t('channelMonitorV2.chart.cacheDataset'),
         data: cacheRates,
-        borderColor: '#10b981',
-        backgroundColor: 'rgba(16, 185, 129, 0.08)',
+        borderColor: presentation.value.tone('#10b981'),
+        backgroundColor: presentation.value.tone('rgba(16, 185, 129, 0.08)'),
         yAxisID: 'yPct',
         tension: 0.4,
         cubicInterpolationMode: 'monotone' as const,
@@ -156,8 +156,8 @@ const chartData = computed(() => {
       {
         label: t('channelMonitorV2.chart.ttftDataset'),
         data: ttftP50,
-        borderColor: '#0ea5e9',
-        backgroundColor: 'rgba(14, 165, 233, 0.08)',
+        borderColor: presentation.value.tone('#0ea5e9'),
+        backgroundColor: presentation.value.tone('rgba(14, 165, 233, 0.08)'),
         yAxisID: 'yTtft',
         tension: 0.4,
         cubicInterpolationMode: 'monotone' as const,
@@ -208,6 +208,7 @@ const chartOptions = computed(() => {
   const tooltipBg = presentation.value.tooltip
   const tooltipTitle = presentation.value.title
   const tooltipBody = presentation.value.body
+  const ttftText = presentation.value.toneText('#0ea5e9')
   return {
     responsive: true,
     maintainAspectRatio: false,
@@ -258,12 +259,12 @@ const chartOptions = computed(() => {
         position: 'right' as const,
         min: 0,
         ticks: {
-          color: '#0ea5e9',
+          color: ttftText,
           font: { size: 10 },
           callback: (v: string | number) => formatMonitorMs(Number(v)),
         },
         grid: { display: false },
-        title: { display: true, text: t('channelMonitorV2.metrics.ttftP50'), color: '#0ea5e9', font: { size: 11 } },
+        title: { display: true, text: t('channelMonitorV2.metrics.ttftP50'), color: ttftText, font: { size: 11 } },
       },
     },
   }
diff --git a/frontend/src/i18n/locales/en/admin/resources.ts b/frontend/src/i18n/locales/en/admin/resources.ts
index 049ac9a34ead..7f1b48ff0201 100644
--- a/frontend/src/i18n/locales/en/admin/resources.ts
+++ b/frontend/src/i18n/locales/en/admin/resources.ts
@@ -73,7 +73,12 @@ export default {
       dataExportConfirm: 'Confirm Export',
       dataExported: 'Data exported successfully',
       dataExportFailed: 'Failed to export data',
-      copyProxyUrl: 'Copy Proxy URL',
+      copyProxyUrl: 'Copy proxy URL (standard format)',
+      copyFormats: 'Choose a copy format',
+      copyFormatStandard: 'Standard format',
+      copyFormatHostPortUserPass: 'host:port:username:password',
+      copyFormatUserPassHost: 'username:password@host:port',
+      copyFormatHostPort: 'host:port',
       urlCopied: 'Proxy URL copied',
       searchProxies: 'Search proxies...',
       allProtocols: 'All Protocols',
diff --git a/frontend/src/i18n/locales/zh/admin/resources.ts b/frontend/src/i18n/locales/zh/admin/resources.ts
index 9d85b19425c0..52f2200a364a 100644
--- a/frontend/src/i18n/locales/zh/admin/resources.ts
+++ b/frontend/src/i18n/locales/zh/admin/resources.ts
@@ -107,7 +107,12 @@ export default {
         allStatuses: '全部状态'
       },
       // Additional keys used in ProxiesView
-      copyProxyUrl: '复制代理 URL',
+      copyProxyUrl: '复制代理 URL（标准格式）',
+      copyFormats: '选择复制格式',
+      copyFormatStandard: '标准格式',
+      copyFormatHostPortUserPass: '主机:端口:用户名:密码',
+      copyFormatUserPassHost: '用户名:密码@主机:端口',
+      copyFormatHostPort: '主机:端口',
       urlCopied: '代理 URL 已复制',
       allProtocols: '全部协议',
       allStatus: '全部状态',
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 4438c26d0814..75042092c6b5 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -784,33 +784,49 @@
  *
  * 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): shadcn-neutral light, Linear-layered dark, indigo accent; 32px
- * controls (36px fields and buttons inside dialogs), 8/10/12px radii, a 1px
- * shadow on cards and outline controls, an inner highlight on solid buttons,
- * a 3px focus ring. `:where()` keeps the upstream specificity so page
- * utilities (px-3, w-full, ...) still win; the few blocks that restyle
- * upstream markup built only from utilities (app frame, switches,
- * checkboxes, pagination, row menu, KPI tiles) use plain selectors and say so.
+ * 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.
  * ========================================================================== */
 @layer base {
   :where(.flat-theme) body {
+    background-color: rgb(var(--ui-canvas));
     font-size: 0.8125rem;
-    line-height: 1.25rem;
+    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.2);
+    background-color: rgb(var(--ui-primary) / 0.22);
     color: inherit;
   }
 
-  /* keyboard focus that no recipe restyles: an accent outline instead of the UA ring */
+  /* keyboard focus that no recipe restyles: Apple's blue focus halo instead of the UA ring */
   :where(.flat-theme) :focus-visible {
-    outline: 2px solid rgb(var(--ui-primary) / 0.6);
+    outline: 3px solid rgb(var(--ui-primary) / 0.5);
     outline-offset: 1px;
   }
 
-  /* Checkbox and radio: 16px, >= 3:1 outline, indigo when on. Hidden or overlay inputs
-     (sr-only, opacity-0, hidden) keep their upstream behaviour. */
+  /* 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;
@@ -820,13 +836,14 @@
     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: var(--ui-shadow-xs);
+    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 120ms, border-color 120ms, box-shadow 120ms;
+    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) {
@@ -834,26 +851,27 @@
   }
 
   .flat-theme input:is([type='checkbox'], [type='radio']):not(.sr-only, .opacity-0, .hidden):hover:not(:disabled) {
-    border-color: rgb(var(--ui-ink) / 0.55);
+    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));
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.14), var(--ui-shadow-xs);
+    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.25l2.6 2.6L12 5.4' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
+    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='1.9' stroke-linecap='round'/%3e%3c/svg%3e");
+    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.5px, transparent 3px);
+    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 */
@@ -880,54 +898,186 @@
 }
 
 @layer components {
-  /* ---- app frame (upstream markup: AppLayout main column, marked .app-main) ----
-     Desktop: the column is an inset panel on the canvas, like shadcn's inset sidebar layout and
-     Linear's app frame. The sidebar sits on the canvas without its own border. */
+  /* ---- 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) {
-    .flat-theme .app-main {
-      --ui-frame-inset: 0.5rem;
-      --ui-frame-offset: calc(2 * var(--ui-frame-inset) + 2px);
-      margin-top: var(--ui-frame-inset);
-      margin-right: var(--ui-frame-inset);
-      margin-bottom: var(--ui-frame-inset);
-      min-height: calc(100vh - var(--ui-frame-offset));
-      border: 1px solid rgb(var(--ui-line));
-      border-radius: var(--ui-radius-xl);
-      background-color: rgb(var(--ui-panel));
-      box-shadow: var(--ui-shadow-panel);
+    html.flat-theme .app-main {
+      --ui-frame-offset: 0.5rem;
     }
 
-    .flat-theme .app-main > header {
-      border-top-left-radius: calc(var(--ui-radius-xl) - 1px);
-      border-top-right-radius: calc(var(--ui-radius-xl) - 1px);
+    html.flat-theme .app-main > header > div[class~="h-14"] {
+      height: 4rem;
+      padding-left: 2rem;
+      padding-right: 2rem;
     }
   }
 
-  :where(.flat-theme) .app-main > header {
-    border-color: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-panel));
+  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;
   }
 
-  /* ---- buttons ---- */
+  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-md);
-    padding: 0.3125rem 0.75rem;
+    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;
-    transition-duration: 120ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    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 {
@@ -948,101 +1098,128 @@
   }
 
   :where(.flat-theme) .btn:active:not(:disabled) {
-    transform: none;
+    transform: scale(0.98);
   }
 
   :where(.flat-theme) .btn-primary {
-    border-color: rgb(var(--ui-primary-active));
+    border-color: transparent;
     background-color: rgb(var(--ui-primary));
-    /* depth comes from the inner top highlight and a slightly deeper bottom edge, never from a
-       lighter top, so the label keeps >= 4.5:1 on every pixel */
-    background-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.07));
+    background-image: var(--ui-primary-fill);
     color: rgb(var(--ui-on-primary));
     --theme-on-fill: var(--ui-on-primary);
-    box-shadow: var(--ui-shadow-primary);
-  }
-
-  :where(.flat-theme.dark) .btn-primary {
-    border-color: rgb(var(--ui-primary));
+    box-shadow: var(--ui-primary-shadow);
   }
 
   :where(.flat-theme) .btn-primary:hover:not(:disabled) {
     background-color: rgb(var(--ui-primary-hover));
-    box-shadow: var(--ui-shadow-primary);
+    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: none;
-    box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.18);
+    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-shadow-primary), var(--ui-focus-ring);
+    box-shadow: var(--ui-primary-shadow), var(--ui-focus-ring);
   }
 
-  :where(.flat-theme) .btn-secondary {
-    border-color: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-surface));
-    color: rgb(var(--ui-ink));
-    box-shadow: var(--ui-shadow-xs), var(--ui-highlight);
+  :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:hover:not(:disabled) {
-    border-color: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-hover));
+  :where(.flat-theme) .btn-secondary {
+    color: rgb(var(--ui-ink));
   }
 
-  :where(.flat-theme) .btn-ghost {
+  :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;
-    color: rgb(var(--ui-muted));
+    background-image: var(--ui-control-fill-hover);
+    box-shadow: var(--ui-control-shadow);
   }
 
-  :where(.flat-theme) .btn-ghost:hover:not(:disabled) {
-    background-color: rgb(var(--ui-hover));
-    color: rgb(var(--ui-ink));
+  :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-danger,
-  :where(.flat-theme) .btn-success,
-  :where(.flat-theme) .btn-warning {
-    background-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.07));
-    color: #fff;
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.14), var(--ui-shadow-xs);
+  :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-danger {
-    background-color: rgb(var(--theme-color-danger-600));
-    border-color: rgb(var(--theme-color-danger-700));
+  :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:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-danger-700));
+  :where(.flat-theme) .btn-danger {
+    color: rgb(var(--ui-danger-label));
   }
 
   :where(.flat-theme) .btn-success {
-    background-color: rgb(var(--theme-color-success-600));
-    border-color: rgb(var(--theme-color-success-700));
+    color: rgb(var(--ui-success));
   }
 
-  :where(.flat-theme) .btn-success:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-success-700));
+  :where(.flat-theme) .btn-warning {
+    color: rgb(var(--ui-warning));
   }
 
-  :where(.flat-theme) .btn-warning {
-    background-color: rgb(var(--theme-color-warning-600));
-    border-color: rgb(var(--theme-color-warning-700));
+  :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-warning:hover:not(:disabled) {
-    background-color: rgb(var(--theme-color-warning-700));
+  :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-sm);
-    padding: 0.1875rem 0.625rem;
+    border-radius: var(--ui-radius-capsule);
+    padding: 0.1875rem 0.75rem;
     font-size: 0.75rem;
     line-height: 1.25rem;
   }
@@ -1053,22 +1230,22 @@
   }
 
   :where(.flat-theme) .btn-md {
-    border-radius: var(--ui-radius-md);
-    padding: 0.3125rem 0.75rem;
+    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-md);
-    padding: 0.4375rem 1rem;
+    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-md);
+    border-radius: var(--ui-radius-capsule);
     padding: 0.4375rem;
   }
 
@@ -1079,69 +1256,134 @@
     width: var(--ui-control-h);
     align-items: center;
     justify-content: center;
-    border-radius: var(--ui-radius-md);
+    border-radius: var(--ui-radius-capsule);
     color: rgb(var(--ui-muted));
-    transition: background-color 120ms, color 120ms;
+    transition: background-color var(--ui-duration) var(--ui-ease), color var(--ui-duration) var(--ui-ease);
   }
 
   :where(.flat-theme) .icon-button:hover {
-    background-color: rgb(var(--ui-hover));
+    background-color: var(--ui-nav-hover);
     color: rgb(var(--ui-ink));
   }
 
-  /* ---- form controls ---- */
+  /* ---- 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-md);
-    border-color: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-surface));
-    padding: 0.3125rem 0.625rem;
+    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-shadow-xs);
+    box-shadow: var(--ui-field-shadow);
     transition-property: color, background-color, border-color, box-shadow;
-    transition-duration: 120ms;
+    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: rgb(var(--ui-line-strong));
+    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-shadow-xs), 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;
   }
 
-  /* native selects: one chevron glyph for every select instead of the platform arrow */
+  /* 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-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M4.5 6.25L8 9.75l3.5-3.5' stroke='%23707070' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
-    background-position: right 0.5rem center;
+    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: 1rem;
+    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.dark) select.input {
-    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='M4.5 6.25L8 9.75l3.5-3.5' stroke='%239398a1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
+  :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,
@@ -1151,8 +1393,8 @@
 
   :where(.flat-theme) .input-error:focus {
     border-color: rgb(var(--ui-danger));
-    --tw-ring-shadow: 0 0 0 3px rgb(var(--ui-danger) / 0.16);
-    box-shadow: var(--ui-shadow-xs), 0 0 0 3px rgb(var(--ui-danger) / 0.16);
+    --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 {
@@ -1175,152 +1417,317 @@
     color: rgb(var(--ui-danger));
   }
 
-  /* shared Select trigger / dropdown (scoped styles in Select.vue): radius, depth, menu items */
+  /* shared Select trigger (pop-up button, scoped styles in Select.vue) and dropdown (menu) */
   html.flat-theme .select-trigger {
-    border-radius: var(--ui-radius-md);
-    box-shadow: var(--ui-shadow-xs), var(--ui-highlight);
+    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: rgb(var(--ui-line-strong));
-  }
-
-  html.flat-theme .select-trigger-open {
-    border-color: rgb(var(--ui-primary));
-    box-shadow: var(--ui-shadow-xs), var(--ui-focus-ring);
+    border-color: transparent;
+    background-image: var(--ui-control-fill-hover);
   }
 
-  html.flat-theme .select-trigger .select-icon > svg {
-    width: 1rem;
-    height: 1rem;
+  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-dropdown-portal {
-    border: 1px solid rgb(var(--ui-line));
-    border-radius: var(--ui-radius-lg);
-    background-color: rgb(var(--ui-raised));
-    box-shadow: var(--ui-shadow-popover);
+  html.flat-theme .select-trigger.select-trigger-error {
+    border-color: rgb(var(--ui-danger));
   }
 
-  html.flat-theme .select-dropdown-portal .select-options {
-    padding: 0.25rem;
+  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 .select-dropdown-portal .select-option {
-    min-height: 2rem;
-    border-radius: var(--ui-radius-sm);
-    padding: 0.375rem 0.5rem;
-    font-size: 0.8125rem;
+  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 .select-dropdown-portal .select-option:hover,
-  html.flat-theme .select-dropdown-portal .select-option-focused {
-    background-color: rgb(var(--ui-hover));
+  html.flat-theme.dark .select-trigger:hover:not(.select-trigger-disabled) {
+    background-image: var(--ui-control-fill-hover);
   }
 
-  html.flat-theme .select-dropdown-portal .select-option-selected {
-    background-color: rgb(var(--ui-primary-soft));
-    color: rgb(var(--ui-primary-ink));
-    font-weight: 500;
+  html.flat-theme.dark .select-trigger.select-trigger-error {
+    border-color: rgb(var(--ui-danger));
   }
 
-  /* ---- surfaces ---- */
-  :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;
+  html.flat-theme .select-trigger .select-icon {
+    color: rgb(var(--ui-muted));
   }
 
-  :where(.flat-theme) .glass-card,
-  :where(.flat-theme) .card,
-  :where(.flat-theme) .card-glass {
-    border: 1px solid rgb(var(--ui-line));
-    border-radius: var(--ui-radius-xl);
-    box-shadow: var(--ui-shadow-card), var(--ui-highlight);
-    transition-property: border-color, box-shadow;
-    transition-duration: 150ms;
+  html.flat-theme .select-trigger .select-icon > svg {
+    width: 0.875rem;
+    height: 0.875rem;
+    stroke-width: 2.2;
   }
 
-  :where(.flat-theme) .card-hover:hover {
-    transform: none;
-    box-shadow: var(--ui-shadow-card), var(--ui-highlight);
-    border-color: rgb(var(--ui-line-strong));
+  /* 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);
   }
 
-  :where(.flat-theme) .card-header,
-  :where(.flat-theme) .card-footer {
-    border-color: rgb(var(--ui-line));
-    padding: 0.875rem 1.25rem;
+  /* 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);
   }
 
-  :where(.flat-theme) .card-body {
-    padding: 1.25rem;
+  html.flat-theme.dark .date-picker-trigger {
+    border-color: transparent;
+    background-color: transparent;
+    background-image: var(--ui-control-fill);
+    color: rgb(var(--ui-ink));
   }
 
-  /* ---- KPI tiles ---- */
-  :where(.flat-theme) .stat-card {
-    align-items: center;
-    gap: 0.75rem;
-    padding: 1rem;
-    background-image: var(--ui-card-tint);
+  html.flat-theme .date-picker-trigger:hover {
+    border-color: transparent;
+    background-image: var(--ui-control-fill-hover);
   }
 
-  :where(.flat-theme) .stat-icon {
-    height: 2.25rem;
-    width: 2.25rem;
-    flex-shrink: 0;
-    border-radius: var(--ui-radius-md);
-    font-size: 1rem;
+  html.flat-theme .date-picker-trigger.date-picker-trigger-open {
+    border-color: transparent;
+    box-shadow: var(--ui-control-shadow), var(--ui-focus-ring);
   }
 
-  :where(.flat-theme) .stat-icon > svg {
-    height: 1.125rem;
-    width: 1.125rem;
+  html.flat-theme .date-picker-trigger :is(.date-picker-icon, .date-picker-chevron) {
+    color: rgb(var(--ui-muted));
   }
 
-  :where(.flat-theme) .stat-icon-primary {
-    background-color: rgb(var(--ui-primary-soft));
-    color: rgb(var(--ui-primary-ink));
+  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);
   }
 
-  :where(.flat-theme) .stat-icon-success {
-    background-color: rgb(var(--ui-success-soft));
-    color: rgb(var(--ui-success));
+  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);
   }
 
-  :where(.flat-theme) .stat-icon-warning {
-    background-color: rgb(var(--ui-warning-soft));
-    color: rgb(var(--ui-warning));
+  html.flat-theme .date-picker-dropdown .date-picker-preset:hover:not(.date-picker-preset-active) {
+    background-color: var(--ui-menu-hover);
   }
 
-  :where(.flat-theme) .stat-icon-danger {
-    background-color: rgb(var(--ui-danger-soft));
-    color: rgb(var(--ui-danger));
+  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;
   }
 
-  :where(.flat-theme) .stat-value {
-    font-size: 1.375rem;
-    line-height: 1.75rem;
-    font-weight: 600;
-    font-variant-numeric: tabular-nums;
-    letter-spacing: -0.02em;
-    color: rgb(var(--ui-ink));
+  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);
   }
 
-  :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));
+  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);
   }
 
-  :where(.flat-theme) .stat-trend {
+  /* 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;
   }
@@ -1333,44 +1740,150 @@
     color: rgb(var(--ui-danger));
   }
 
-  /* Dashboard KPI tiles (upstream markup: .grid > .card.p-4 > icon tile + label/value/meta):
-     the shadcn section-card treatment — a faint accent wash, a quiet icon tile and a tabular
-     figure as the largest text on the card.
-     Utility classes are matched as [class~="..."] so Tailwind's @apply does not copy these rules
-     into every `@apply grid|card|p-4|rounded-lg ...` site (see the selection block below). */
-  .flat-theme [class~="grid"] > [class~="card"][class~="p-4"]:has(> [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child > svg:only-child) {
-    background-image: var(--ui-card-tint);
+  /* 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;
   }
 
-  .flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child:has(> svg:only-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 [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.25rem;
-    width: 2.25rem;
+    height: 2.5rem;
+    width: 2.5rem;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    border-radius: var(--ui-radius-md);
+    border-radius: 0.75rem;
+    background-image: var(--ui-tile-gloss);
     padding: 0;
-    box-shadow: inset 0 0 0 1px rgb(var(--ui-ink) / 0.04);
+    box-shadow: var(--ui-tile-shadow);
   }
 
-  .flat-theme [class~="grid"] > [class~="card"][class~="p-4"] > [class~="flex"] > div[class~="rounded-lg"][class~="p-2"]:first-child > svg:only-child {
-    width: 1.125rem;
-    height: 1.125rem;
+  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;
   }
 
-  .flat-theme [class~="grid"] > [class~="card"][class~="p-4"] p[class~="text-xl"] {
-    font-size: 1.375rem;
-    line-height: 1.75rem;
+  /* 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));
   }
 
-  /* ---- tables ---- */
+  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-color: rgb(var(--ui-line));
-    border-radius: var(--ui-radius-xl);
+    border: 0;
+    border-radius: var(--ui-radius-table);
     background-color: rgb(var(--ui-surface));
     box-shadow: var(--ui-shadow-card);
   }
@@ -1381,42 +1894,107 @@
   }
 
   :where(.flat-theme) .table th {
-    background-color: rgb(var(--ui-sunk));
-    border-bottom: 1px solid rgb(var(--ui-line));
-    padding: 0.5625rem 0.75rem;
+    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.25rem;
-    font-weight: 500;
+    line-height: 1.125rem;
+    font-weight: 600;
     color: rgb(var(--ui-muted));
   }
 
   :where(.flat-theme) .table td {
-    border-color: rgb(var(--ui-line));
-    padding: 0.625rem 0.75rem;
+    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-sunk));
+    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;
   }
 
-  /* DataTable (sticky header cells carry their own background in DataTable.vue) */
   html.flat-theme .table-wrapper .table-header .sticky-header-cell {
     height: 2.5rem;
-    background-color: rgb(var(--ui-sunk));
+    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: 500;
+    font-weight: 600;
     letter-spacing: 0;
     text-transform: none;
     color: rgb(var(--ui-muted));
   }
 
-  html.flat-theme.dark .table-wrapper .table-header .sticky-header-cell {
+  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;
   }
@@ -1427,87 +2005,146 @@
     height: 1rem;
   }
 
-  /* ---- badges ---- */
+  /* 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: 1px solid transparent;
-    border-radius: 9999px;
+    border: 0;
+    border-radius: var(--ui-radius-capsule);
     padding: 0 0.5rem;
     font-size: 0.75rem;
-    line-height: 1.125rem;
+    line-height: 1.25rem;
     font-weight: 500;
     white-space: nowrap;
   }
 
   :where(.flat-theme) .badge-primary {
-    border-color: rgb(var(--ui-primary) / 0.22);
     background-color: rgb(var(--ui-primary-soft));
     color: rgb(var(--ui-primary-ink));
   }
 
   :where(.flat-theme) .badge-gray {
-    border-color: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-surface));
-    color: rgb(var(--ui-muted));
+    background-color: var(--ui-fill);
+    color: rgb(var(--ui-ink) / 0.8);
   }
 
   :where(.flat-theme) .badge-success {
-    border-color: rgb(var(--ui-success) / 0.2);
     background-color: rgb(var(--ui-success-soft));
     color: rgb(var(--ui-success));
   }
 
   :where(.flat-theme) .badge-warning {
-    border-color: rgb(var(--ui-warning) / 0.22);
     background-color: rgb(var(--ui-warning-soft));
     color: rgb(var(--ui-warning));
   }
 
   :where(.flat-theme) .badge-danger {
-    border-color: rgb(var(--ui-danger) / 0.2);
     background-color: rgb(var(--ui-danger-soft));
     color: rgb(var(--ui-danger));
   }
 
   :where(.flat-theme) .badge-purple {
-    border-color: rgb(var(--ui-purple) / 0.2);
     background-color: rgb(var(--ui-purple-soft));
     color: rgb(var(--ui-purple));
   }
 
-  /* ---- popovers, menus, dialogs ---- */
+  /* 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: 1px solid rgb(var(--ui-line));
-    border-radius: var(--ui-radius-lg);
-    background-color: rgb(var(--ui-raised));
-    padding: 0.25rem;
-    box-shadow: var(--ui-shadow-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: 2rem;
+    min-height: 1.75rem;
     gap: 0.5rem;
-    border-radius: var(--ui-radius-sm);
-    padding: 0.375rem 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: rgb(var(--ui-hover));
+    background-color: var(--ui-menu-hover);
+    color: rgb(var(--ui-ink));
+  }
+
+  :where(.flat-theme) .dropdown-item > svg {
+    color: rgb(var(--ui-muted));
   }
 
-  /* Account row menu (upstream markup: .action-menu-content > fieldset > button): menu surface,
-     32px items, monochrome 16px icons, destructive items keep their colour. */
+  /* 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: 1px solid rgb(var(--ui-line));
-    border-radius: var(--ui-radius-lg);
-    background-color: rgb(var(--ui-raised));
-    padding: 0.25rem;
-    box-shadow: var(--ui-shadow-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);
   }
 
   html.flat-theme .action-menu-content fieldset {
@@ -1515,17 +2152,18 @@
   }
 
   html.flat-theme .action-menu-content fieldset button {
-    min-height: 2rem;
+    min-height: 1.75rem;
     gap: 0.625rem;
-    border-radius: var(--ui-radius-sm);
-    padding: 0.375rem 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 {
-    background-color: rgb(var(--ui-hover));
+  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 {
@@ -1539,22 +2177,50 @@
     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.25rem;
-    border-color: rgb(var(--ui-line));
+    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: none;
-    backdrop-filter: none;
+    -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: 1px solid rgb(var(--ui-line));
-    border-radius: var(--ui-radius-xl);
+    border: 0;
+    border-radius: var(--ui-radius-dialog);
     background-color: rgb(var(--ui-raised));
     box-shadow: var(--ui-shadow-overlay);
   }
@@ -1562,48 +2228,58 @@
   :where(.flat-theme) .modal-header,
   :where(.flat-theme) .dialog-header {
     min-height: 3.5rem;
-    border-color: rgb(var(--ui-line));
-    padding: 0.875rem 1.25rem;
+    border-color: var(--ui-hairline-soft);
+    padding: 1rem 1.25rem 0.875rem 1.5rem;
   }
 
   :where(.flat-theme) .modal-title {
-    font-size: 0.9375rem;
+    font-size: 1.0625rem;
     line-height: 1.375rem;
     font-weight: 600;
-    letter-spacing: -0.01em;
+    letter-spacing: -0.012em;
     color: rgb(var(--ui-ink));
   }
 
-  /* BaseDialog close button (upstream utilities) as a 32px ghost icon button */
+  /* BaseDialog close button (upstream utilities): a 28px round glass button with the x glyph */
   html.flat-theme .modal-header > button:last-child {
-    margin-right: -0.375rem;
-    border-radius: var(--ui-radius-md);
-    padding: 0.375rem;
+    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-color: rgb(var(--ui-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;
+    padding: 1.25rem 1.5rem;
   }
 
   :where(.flat-theme) .modal-footer,
   :where(.flat-theme) .dialog-footer {
-    gap: 0.5rem;
-    border-color: rgb(var(--ui-line));
-    border-bottom-left-radius: calc(var(--ui-radius-xl) - 1px);
-    border-bottom-right-radius: calc(var(--ui-radius-xl) - 1px);
-    background-color: rgb(var(--ui-sunk));
-    padding: 0.75rem 1.25rem;
-  }
-
-  :where(.flat-theme.dark) :is(.modal-footer, .dialog-footer) {
-    background-color: rgb(var(--ui-surface));
+    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 */
@@ -1623,126 +2299,330 @@
 
   html.flat-theme .modal-footer .btn:not(.btn-sm) {
     min-height: var(--ui-field-h);
-    padding-left: 0.875rem;
-    padding-right: 0.875rem;
+    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);
   }
 
-  :where(.flat-theme) .toast {
-    border: 1px solid rgb(var(--ui-line));
-    border-radius: var(--ui-radius-lg);
+  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-popover);
+    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;
   }
 
-  /* ---- navigation ---- */
+  /* (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: rgb(var(--ui-canvas));
+    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.5rem;
+    height: 3.75rem;
     border-color: transparent;
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
+    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.01em;
+    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.5rem 0.75rem 0.75rem;
+    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-md);
+    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) / 0.86);
-    transition-property: color, background-color, box-shadow;
-    transition-duration: 120ms;
+    color: rgb(var(--ui-ink));
+    transition-property: color, background-color;
+    transition-duration: 150ms;
+    transition-timing-function: var(--ui-ease);
   }
 
-  html.flat-theme .sidebar-link > svg,
-  html.flat-theme .sidebar-link > .sidebar-svg-icon,
-  html.flat-theme .sidebar-link .sidebar-svg-icon svg {
-    width: 1rem;
-    height: 1rem;
-    color: rgb(var(--ui-muted));
+  html.flat-theme .sidebar-link:not(.sidebar-link-collapsed) {
+    padding-left: 0.625rem;
+    padding-right: 0.625rem;
   }
 
-  :where(.flat-theme) .sidebar-link:hover {
-    background-color: rgb(var(--ui-ink) / 0.045);
-    color: rgb(var(--ui-ink));
+  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.dark) .sidebar-link:hover {
-    background-color: rgb(255 255 255 / 0.045);
+  :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: rgb(var(--ui-primary) / 0.1);
-    color: rgb(var(--ui-primary-ink));
-    font-weight: 500;
+    background-color: var(--ui-nav-current);
+    color: rgb(var(--ui-nav-current-ink));
+    font-weight: 600;
   }
 
-  :where(.flat-theme.dark) .sidebar-link-active,
-  :where(.flat-theme.dark) .sidebar-link-active:hover {
-    background-color: rgb(var(--ui-primary) / 0.16);
-    color: rgb(var(--ui-ink));
+  /* 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-link-active > svg,
-  html.flat-theme .sidebar-link-active > .sidebar-svg-icon {
-    color: rgb(var(--ui-primary));
+  html.flat-theme .sidebar-nav .sidebar-link > .sidebar-svg-icon svg {
+    width: 100%;
+    height: 100%;
   }
 
-  html.flat-theme.dark .sidebar-link-active > svg,
-  html.flat-theme.dark .sidebar-link-active > .sidebar-svg-icon {
-    color: rgb(var(--ui-primary-ink));
+  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: 1rem;
+    margin-bottom: 0.875rem;
   }
 
   :where(.flat-theme) .sidebar-section-title {
     margin-bottom: 0.25rem;
-    font-size: 0.75rem;
+    padding-left: 0.625rem;
+    font-size: 0.6875rem;
     line-height: 1rem;
-    font-weight: 500;
+    font-weight: 600;
     letter-spacing: 0;
     text-transform: none;
     color: rgb(var(--ui-muted));
   }
 
   :where(.flat-theme) .page-header {
-    margin-bottom: 1rem;
+    margin-bottom: 1.25rem;
   }
 
   :where(.flat-theme) .page-title {
-    font-size: 1.125rem;
-    line-height: 1.5rem;
-    font-weight: 600;
-    letter-spacing: -0.01em;
+    font-size: 1.625rem;
+    line-height: 2rem;
+    font-weight: 700;
+    letter-spacing: -0.022em;
     color: rgb(var(--ui-ink));
   }
 
@@ -1765,8 +2645,8 @@
   }
 
   :where(.flat-theme) .empty-state-title {
-    font-size: 0.875rem;
-    font-weight: 500;
+    font-size: 0.9375rem;
+    font-weight: 600;
     color: rgb(var(--ui-ink));
   }
 
@@ -1776,32 +2656,34 @@
   }
 
   :where(.flat-theme) .skeleton {
-    border-radius: var(--ui-radius-sm);
+    border-radius: 6px;
     background-color: rgb(var(--ui-subtle));
   }
 
   :where(.flat-theme) .divider {
-    background-color: rgb(var(--ui-line));
+    background-color: var(--ui-hairline-soft);
   }
 
-  /* segmented control: muted track, raised active segment (shadcn tabs / Radix segmented) */
+  /* 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-lg);
-    background-color: rgb(var(--ui-subtle));
-    padding: 0.1875rem;
+    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-sm);
-    padding: 0.1875rem 0.625rem;
+    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-muted));
+    color: rgb(var(--ui-ink) / 0.8);
     transition-property: color, background-color, box-shadow;
-    transition-duration: 120ms;
+    transition-duration: var(--ui-duration);
+    transition-timing-function: var(--ui-ease);
   }
 
   :where(.flat-theme) .tab:hover {
@@ -1810,57 +2692,82 @@
 
   :where(.flat-theme) .tab-active,
   :where(.flat-theme) .tab-active:hover {
-    background-color: rgb(var(--ui-surface));
+    background-color: transparent;
+    background-image: var(--ui-thumb);
     color: rgb(var(--ui-ink));
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04);
-  }
-
-  :where(.flat-theme.dark) .tab-active,
-  :where(.flat-theme.dark) .tab-active:hover {
-    background-color: rgb(var(--ui-hover));
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.4);
+    box-shadow: var(--ui-thumb-shadow);
   }
 
   :where(.flat-theme) .progress {
     height: 0.375rem;
-    background-color: rgb(var(--ui-subtle));
+    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: rgb(var(--ui-control-line));
+    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-primary));
+    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 {
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2);
+    background-image: var(--ui-knob);
+    box-shadow: var(--ui-knob-shadow);
   }
 
   :where(.flat-theme) .switch-active .switch-thumb {
-    background-color: rgb(var(--ui-on-primary));
+    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): the off track keeps >= 3:1 against the page and the
-     knob, the on track is the accent. [class~="..."] hooks: see the KPI tile note. */
+  /* 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: rgb(var(--ui-control-line));
+    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-primary));
-    box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.12);
+    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"] {
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.22), 0 0 0 0.5px rgb(0 0 0 / 0.04);
+    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 {
@@ -1869,50 +2776,73 @@
     box-shadow: var(--ui-focus-ring);
   }
 
-  /* Pagination (upstream markup: nav[aria-label=Pagination] > button, a joined group) */
+  /* 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'] {
-    border-radius: var(--ui-radius-md);
-    box-shadow: var(--ui-shadow-xs);
+    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: var(--ui-control-h);
-    min-width: var(--ui-control-h);
+    height: 1.75rem;
+    min-width: 1.75rem;
     justify-content: center;
-    border-color: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-surface));
-    padding: 0 0.625rem;
+    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:first-child {
-    border-top-left-radius: var(--ui-radius-md);
-    border-bottom-left-radius: var(--ui-radius-md);
-    color: rgb(var(--ui-muted));
-  }
-
-  html.flat-theme nav[aria-label='Pagination'] > button:last-child {
-    border-top-right-radius: var(--ui-radius-md);
-    border-bottom-right-radius: var(--ui-radius-md);
-    color: rgb(var(--ui-muted));
+  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: 1rem;
-    height: 1rem;
+    width: 0.875rem;
+    height: 0.875rem;
   }
 
   html.flat-theme nav[aria-label='Pagination'] > button:hover:not(:disabled) {
-    background-color: rgb(var(--ui-hover));
+    background-color: var(--ui-nav-hover);
   }
 
-  html.flat-theme nav[aria-label='Pagination'] > button[aria-current='page'] {
-    border-color: rgb(var(--ui-primary) / 0.5);
-    background-color: rgb(var(--ui-primary-soft));
-    color: rgb(var(--ui-primary-ink));
+  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" ---- */
@@ -1924,20 +2854,25 @@
      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
-     selected card is the accent border (+1px ring) on the soft accent fill; the icon tile inside
-     keeps its brand colour. 1px border + 1px extra padding keeps the card size. */
+     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));
-    box-shadow: var(--ui-shadow-xs);
+    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: 120ms;
+    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) {
@@ -1946,23 +2881,55 @@
 
   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-soft));
-    box-shadow: 0 0 0 1px rgb(var(--ui-primary)), var(--ui-shadow-xs);
+    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));
   }
 
-  /* 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 active segment is a raised block 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"]) > 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: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04);
+    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: rgb(var(--theme-color-dark-600));
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.4);
+    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 {
@@ -1970,152 +2937,243 @@
   }
 
   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-color-warning-600);
+    --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"], [class~="text-teal-600"]) {
-    --ui-choice-brand: var(--theme-color-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-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-blue-600"], [class~="text-sky-600"], [class~="text-indigo-600"], [class~="text-cyan-600"]) {
-    --ui-choice-brand: var(--theme-color-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"]: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"]:is([class~="text-purple-600"], [class~="text-violet-600"], [class~="text-pink-600"], [class~="text-fuchsia-600"]) {
-    --ui-choice-brand: var(--theme-color-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-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"]:is([class~="text-rose-600"], [class~="text-red-600"]) {
-    --ui-choice-brand: var(--theme-color-danger-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.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"]:is([class~="text-orange-600"], [class~="text-amber-600"], [class~="text-amber-700"]) {
-    --ui-choice-brand: var(--theme-text-warning-400);
+  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.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"]:is([class~="text-green-600"], [class~="text-emerald-600"], [class~="text-teal-600"]) {
-    --ui-choice-brand: var(--theme-text-success-400);
+  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.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"]:is([class~="text-blue-600"], [class~="text-sky-600"], [class~="text-indigo-600"], [class~="text-cyan-600"]) {
-    --ui-choice-brand: var(--theme-text-info-400);
+  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);
   }
 
-  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"]:is([class~="text-purple-600"], [class~="text-violet-600"], [class~="text-pink-600"], [class~="text-fuchsia-600"]) {
-    --ui-choice-brand: var(--theme-text-purple-400);
+  /* 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.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"]:is([class~="text-rose-600"], [class~="text-red-600"]) {
-    --ui-choice-brand: var(--theme-text-danger-400);
+  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));
   }
 
-  /* 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): the soft accent fill with ink figures instead of a
-     solid accent block. Light: ink 17.5:1, muted 5.2:1 on #EFF0FA; dark: 14.6:1 and 5.4:1 on #202335. */
-  html.flat-theme [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] {
-    background-image: none;
-    background-color: rgb(var(--ui-primary-soft));
+  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 [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] [class~="text-white"] {
-    color: rgb(var(--ui-ink));
+  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));
   }
 
-  html.flat-theme [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] [class~="text-primary-100"] {
-    color: rgb(var(--ui-muted));
+  /* 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);
   }
 
-  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(var(--ui-surface));
-    box-shadow: 0 0 0 1px rgb(var(--ui-primary) / 0.16), var(--ui-shadow-xs);
+  /* 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.dark [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] > [class~="bg-white/20"] {
-    background-color: rgb(var(--ui-primary) / 0.16);
-    box-shadow: inset 0 0 0 1px rgb(var(--ui-primary) / 0.24);
+  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;
   }
 
-  html.flat-theme [class~="bg-gradient-to-br"][class~="from-primary-500"][class~="px-6"][class~="py-8"] > [class~="bg-white/20"] > [class~="text-white"] {
-    color: rgb(var(--ui-primary-ink));
+  /* 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);
   }
 
-  /* Settings tabs: SettingsView's scoped CSS hard-codes a green (#168a49) active underline; next to
-     the indigo label and icon it reads as a second accent, so it follows the accent. */
-  html.flat-theme .settings-tab-active::after {
+  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 shell: a sunk strip with a hairline (light) and the panel colour with an 8%
-     white line (dark), replacing SettingsView's white-on-white shell and its hard-coded navy
-     (`.dark .settings-tabs-shell { background: rgb(15 23 42 / .86) }`). */
+  /* 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-radius: var(--ui-radius-xl);
-    border-color: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-sunk));
+    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: rgb(255 255 255 / 0.08);
-    background-color: rgb(var(--ui-panel));
+    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 treatment of the
-     other pickers — subtle track, the selected window as a raised block with ink text. */
+     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-md);
-    background-color: rgb(var(--theme-color-gray-100));
+    border-radius: var(--ui-radius-capsule);
+    background-color: var(--ui-track);
     padding: 0.125rem;
-  }
-
-  html.flat-theme.dark div[class~="flex-wrap"][class~="gap-1"]:has(> button[class~="rounded"][class~="text-[9px]"]) {
-    background-color: rgb(var(--theme-color-dark-700));
+    box-shadow: var(--ui-track-shadow);
   }
 
   html.flat-theme button[class~="rounded"][class~="text-[9px]"][class~="font-bold"] {
-    border-radius: var(--ui-radius-sm);
+    border-radius: var(--ui-radius-capsule);
     background-color: transparent;
-    color: rgb(var(--ui-muted));
+    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"] {
-    background-color: rgb(var(--ui-surface));
-    color: rgb(var(--ui-ink));
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04);
-  }
-
+  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: rgb(var(--theme-color-dark-600));
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.4);
+    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: subtle track, raised
-     selected segment with ink text. The multi-select error-code chips (same classes plus
+     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-lg);
-    background-color: rgb(var(--theme-color-gray-100));
-    padding: 0.1875rem;
+    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"])) {
@@ -2123,14 +3181,11 @@
     max-width: 100%;
   }
 
-  html.flat-theme.dark 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"])) {
-    background-color: rgb(var(--theme-color-dark-700));
-  }
-
   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-md);
+    border-radius: var(--ui-radius-capsule);
     background-color: transparent;
-    color: rgb(var(--ui-muted));
+    background-image: none;
+    color: rgb(var(--ui-ink) / 0.8);
     box-shadow: none;
   }
 
@@ -2138,20 +3193,17 @@
     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"]) {
-    border-radius: var(--ui-radius-md);
-    background-color: rgb(var(--ui-surface));
+  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: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04);
-  }
-
-  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"]) {
-    background-color: rgb(var(--theme-color-dark-600));
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.4);
+    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.8:1). */
+  /* 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));
@@ -2159,9 +3211,9 @@
 
   /* 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 the border identifies the field (WCAG 1.4.11) and takes 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 borders. */
+     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));
   }
@@ -2172,15 +3224,23 @@
      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-line-strong)) transparent;
+    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-line-strong));
+    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
@@ -2190,12 +3250,21 @@
     white-space: nowrap;
   }
 
-  /* Groups table platform cell (GroupsView: span.rounded-full.gap-1.5.px-2.5.py-0.5 with a hue fill
-     per platform): the outlined neutral chip of PlatformTypeBadge's platform segment. */
-  html.flat-theme span[class~="rounded-full"][class~="gap-1.5"][class~="px-2.5"][class~="py-0.5"][class~="text-xs"][class~="font-medium"] {
-    @apply gap-1 rounded-md bg-white px-2 py-1 text-gray-900 ring-1 ring-gray-200 dark:bg-dark-800 dark:text-gray-100 dark:ring-dark-600;
+  /* 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
@@ -2285,7 +3354,7 @@
   }
 
   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: 2px solid rgb(var(--ui-primary));
+    outline: 3px solid rgb(var(--ui-primary) / 0.5);
     outline-offset: 1px;
   }
 
@@ -2313,46 +3382,41 @@
       overflow: visible;
       clip: auto;
       transform: translateY(-50%);
-      border-radius: var(--ui-radius-sm);
-      background-color: rgb(var(--ui-ink));
-      color: rgb(var(--ui-surface));
+      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-shadow-popover);
+      box-shadow: var(--ui-glass-float);
       pointer-events: none;
     }
-
-    html.flat-theme.dark .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"] {
-      background-color: rgb(var(--theme-color-dark-600));
-      color: rgb(var(--ui-ink));
-      box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), var(--ui-shadow-popover);
-    }
   }
 
   /* 「用户消息限速」 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. */
+     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-lg);
-    background-color: rgb(var(--theme-color-gray-100));
-    padding: 0.1875rem;
-  }
-
-  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"])) {
-    background-color: rgb(var(--theme-color-dark-700));
+    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-md);
+    border-radius: var(--ui-radius-capsule);
     background-color: transparent;
-    color: rgb(var(--ui-muted));
+    color: rgb(var(--ui-ink) / 0.8);
     box-shadow: none;
   }
 
@@ -2362,15 +3426,17 @@
   }
 
   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: rgb(var(--ui-surface));
+    background-color: transparent;
+    background-image: var(--ui-thumb);
     color: rgb(var(--ui-ink));
     font-weight: 500;
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08), 0 0 0 1px rgb(0 0 0 / 0.04);
+    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: rgb(var(--theme-color-dark-600));
-    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.4);
+    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
@@ -2404,27 +3470,29 @@
     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='%23707070' 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;
+    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='%239398a1' 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");
+    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='%23707070' 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");
+    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='%239398a1' 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");
+    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 (#10b981) inline styles in the i18n HTML
-     (i18n/locales/zh/misc.ts, en/misc.ts); in the console theme they use the accent text colour.
+  /* 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 [style*="#10b981" i] {
-    color: rgb(var(--ui-primary-ink)) !important;
+  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 {
@@ -2455,90 +3523,3346 @@
     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: var(--ui-radius-sm);
-    background-color: rgb(var(--ui-subtle));
+    border-radius: 5px;
+    background-color: var(--ui-fill);
     padding: 0.0625rem 0.3125rem;
     font-size: 0.75rem;
-    color: rgb(var(--ui-ink));
+    color: rgb(var(--ui-primary-ink-strong));
   }
 
   :where(.flat-theme) .code-block {
-    border: 1px solid rgb(var(--ui-line));
-    border-radius: var(--ui-radius-lg);
-    background-color: rgb(var(--ui-sunk));
-    padding: 0.75rem;
+    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));
   }
 
-  :where(.flat-theme) .table-wrapper thead.sticky {
-    box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
-  }
-
   /* purely decorative layers of upstream layouts (blurred orbs, grids, tints) */
   :where(.flat-theme) .ui-decor {
     display: none;
   }
 
-  /* Upstream recipes carry dark: variants (specificity 0,2,0); restate the console values for
+  /* ---- 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: rgb(var(--ui-hover));
+    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));
-    border-color: rgb(var(--ui-line));
+  }
+
+  :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 *) {
-    background-color: rgb(var(--ui-canvas));
     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: rgb(var(--ui-hover));
+    background-color: transparent;
+    background-image: var(--ui-thumb);
     color: rgb(var(--ui-ink));
   }
 
-  :where(.flat-theme) .input:is(.dark *)::placeholder {
-    color: rgb(var(--ui-faint));
+  :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: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-panel));
+    border-color: transparent;
   }
 
-  :where(.flat-theme) .sidebar-link-active:is(.dark *),
-  :where(.flat-theme) .sidebar-link-active:hover:is(.dark *) {
-    background-color: rgb(var(--ui-primary) / 0.16);
+  /* ---- 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);
   }
-}
 
-@layer utilities {
-  :where(.flat-theme) .glass {
-    background-color: rgb(var(--ui-surface));
-    -webkit-backdrop-filter: none;
-    backdrop-filter: none;
+  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);
   }
 
-  :where(.flat-theme) .app-main > header.glass {
-    background-color: rgb(var(--ui-panel));
+  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 */
diff --git a/frontend/src/styles/announcement-markdown.css b/frontend/src/styles/announcement-markdown.css
index e440423376c7..c5852b11135a 100644
--- a/frontend/src/styles/announcement-markdown.css
+++ b/frontend/src/styles/announcement-markdown.css
@@ -63,7 +63,7 @@
 }
 
 .markdown-body pre {
-  @apply my-5 overflow-x-auto rounded-none border border-gray-200 bg-gray-50 p-5 dark:border-dark-600 dark:bg-dark-900;
+  @apply my-5 overflow-x-auto rounded-xl border border-gray-200 bg-gray-50 p-5 dark:border-dark-600 dark:bg-dark-900/50;
 }
 
 .markdown-body pre code {
@@ -93,15 +93,15 @@
 }
 
 .markdown-body th {
-  @apply bg-blue-50 font-semibold text-gray-900 dark:bg-blue-900/20 dark:text-white;
+  @apply bg-gradient-to-br from-blue-50 to-indigo-50 font-semibold text-gray-900 dark:from-blue-900/20 dark:to-indigo-900/10 dark:text-white;
 }
 
 .markdown-body tbody tr {
-  @apply transition-colors hover:bg-gray-50 dark:hover:bg-dark-700;
+  @apply transition-colors hover:bg-gray-50 dark:hover:bg-dark-700/30;
 }
 
 .markdown-body img {
-  @apply my-5 max-w-full rounded-none border border-gray-200 dark:border-dark-600;
+  @apply my-5 max-w-full rounded-xl border border-gray-200 shadow-md dark:border-dark-600;
 }
 
 .markdown-body strong {
diff --git a/frontend/src/styles/flat-theme.css b/frontend/src/styles/flat-theme.css
index a8d05e4096c6..ee99e25f6342 100644
--- a/frontend/src/styles/flat-theme.css
+++ b/frontend/src/styles/flat-theme.css
@@ -2,24 +2,30 @@
    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:
-   - light: shadcn/ui neutral (white surfaces on a #fafafa frame, #e5e5e5 hairlines, 8-12px radii,
-     near-flat cards with a 1px shadow);
-   - dark: Linear (layered cool-gray panels on a near-black base, ~8% white hairlines, four-step text
-     hierarchy);
-   - accent: Linear indigo #5e6ad2 in both modes (primary actions, active navigation, focus, switches,
-     pagination);
-   - controls: Radix Themes / Vercel Geist texture (32px controls, 1px shadow, inner highlight on
-     solid buttons, 3px focus ring).
-   Fonts: Geist 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. */
+   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. */
 
-/* Geist / Geist Mono 1.7.2 (npm `geist`, SIL OFL 1.1, see assets/fonts/geist/OFL.txt),
-   variable weight 100-900, subset to the Latin range below. */
+/* 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: 'Geist';
-  src: url('../assets/fonts/geist/Geist-Variable.latin.woff2') format('woff2');
+  font-family: 'Inter';
+  src: url('../assets/fonts/inter/Inter-Variable.latin.woff2') format('woff2');
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
@@ -27,6 +33,8 @@
     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');
@@ -38,399 +46,667 @@
 }
 
 /* ------------------------------------------------------------------ role tokens */
-/* Surfaces, from back to front: canvas (frame + sidebar) < panel (the inset main column) <
-   surface (cards, tables, controls) < raised (menus, popovers, dialogs). */
+/* 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: 250 250 250;
-  --ui-panel: 255 255 255;
+  --ui-canvas: 243 243 246;
+  --ui-panel: 243 243 246;
   --ui-surface: 255 255 255;
-  --ui-subtle: 245 245 245;
-  --ui-sunk: 250 250 250;
+  --ui-subtle: 239 239 241;
+  --ui-sunk: 250 250 251;
   --ui-raised: 255 255 255;
-  --ui-hover: 245 245 245;
-  --ui-line: 229 229 229;
-  --ui-line-strong: 212 212 212;
-  --ui-line-focus: 163 163 163;
+  --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: 138 138 138;
-  --ui-ink: 10 10 10;
-  --ui-muted: 100 100 100;
-  --ui-faint: 112 112 112;
-  --ui-primary: 94 106 210;
-  --ui-primary-hover: 85 97 201;
-  --ui-primary-active: 75 86 189;
-  --ui-primary-soft: 239 240 250;
-  --ui-primary-ink: 79 90 197;
+  --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: 26 127 71;
-  --ui-success-soft: 236 247 240;
-  --ui-danger: 206 44 49;
-  --ui-danger-soft: 253 240 240;
-  --ui-warning: 163 82 0;
-  --ui-warning-soft: 255 245 227;
-  --ui-info: 26 102 206;
-  --ui-info-soft: 237 245 254;
-  --ui-purple: 118 80 196;
-  --ui-purple-soft: 245 241 253;
-  --ui-link: #4f5ac5;
+  --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 1px 2px 0 rgb(0 0 0 / 0.04);
-  --ui-shadow-panel: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 3px 0 rgb(0 0 0 / 0.03);
-  --ui-shadow-primary: inset 0 1px 0 0 rgb(255 255 255 / 0.16), 0 1px 2px 0 rgb(30 36 110 / 0.22);
-  --ui-highlight: inset 0 0 0 0 transparent;
-  --ui-card-tint: linear-gradient(to top, rgb(var(--ui-primary) / 0.045), rgb(var(--ui-primary) / 0) 72%);
-  --ui-focus-ring: 0 0 0 3px rgb(var(--ui-primary) / 0.22);
-  --ui-shadow-popover: 0 0 0 1px rgb(0 0 0 / 0.02), 0 4px 8px -2px rgb(0 0 0 / 0.08), 0 12px 28px -6px rgb(0 0 0 / 0.12);
-  --ui-shadow-overlay: 0 0 0 1px rgb(0 0 0 / 0.03), 0 16px 32px -8px rgb(0 0 0 / 0.16), 0 32px 64px -16px rgb(0 0 0 / 0.14);
-  --ui-scrim: 10 10 10 / 0.36;
-  --ui-font: 'Geist', 'MiSans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei',
-    'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', sans-serif;
-  --ui-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'MiSans', 'Microsoft YaHei UI',
-    monospace;
-  --theme-chart-text: #525252;
-  --theme-chart-grid: #ebebeb;
-  --theme-chart-axis: #646464;
-  --theme-chart-axis-grid: #f5f5f5;
+  --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: #0a0a0a;
-  --theme-chart-body: #525252;
-  --theme-chart-gray: #a3a3a3;
-  /* same slots as the upstream palette (blue, emerald, amber, red, violet, pink, teal, orange,
-     indigo, lime, cyan, purple) with the accent first */
-  --theme-chart-series-1: #5e6ad2;
-  --theme-chart-series-2: #2a9d6f;
-  --theme-chart-series-3: #c97a10;
-  --theme-chart-series-4: #e5484d;
-  --theme-chart-series-5: #8e6ce0;
-  --theme-chart-series-6: #d6598a;
-  --theme-chart-series-7: #1a9c98;
-  --theme-chart-series-8: #e0703a;
-  --theme-chart-series-9: #3f8ceb;
-  --theme-chart-series-10: #6f9a24;
-  --theme-chart-series-11: #1799c0;
-  --theme-chart-series-12: #8a8f98;
-  --theme-scrollbar-thumb: #d4d4d4;
-  --theme-scrollbar-hover: #a3a3a3;
+  --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.25rem;
+  --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: 8 9 10;
-  --ui-panel: 15 16 17;
-  --ui-surface: 20 21 23;
-  --ui-subtle: 28 29 32;
-  --ui-sunk: 15 16 17;
-  --ui-raised: 26 27 30;
-  --ui-hover: 31 32 35;
-  --ui-line: 35 36 39;
-  --ui-line-strong: 47 48 52;
-  --ui-line-focus: 72 74 80;
-  --ui-control-line: 107 111 119;
-  --ui-ink: 247 248 248;
-  --ui-muted: 147 152 161;
-  --ui-faint: 128 133 141;
-  --ui-primary-hover: 85 97 201;
-  --ui-primary-active: 75 86 189;
-  --ui-primary-soft: 32 35 53;
-  --ui-primary-ink: 141 149 242;
-  --ui-success: 76 183 130;
-  --ui-success-soft: 21 38 30;
-  --ui-danger: 240 122 122;
-  --ui-danger-soft: 43 24 26;
-  --ui-warning: 240 180 80;
-  --ui-warning-soft: 42 34 20;
-  --ui-info: 107 168 245;
-  --ui-info-soft: 20 32 48;
-  --ui-purple: 182 156 246;
-  --ui-purple-soft: 34 28 51;
-  --ui-link: #8d95f2;
+  --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 1px 2px 0 rgb(0 0 0 / 0.3);
-  --ui-shadow-panel: 0 0 0 1px rgb(0 0 0 / 0.35), 0 8px 24px -8px rgb(0 0 0 / 0.6);
-  --ui-shadow-primary: inset 0 1px 0 0 rgb(255 255 255 / 0.14), 0 0 0 1px rgb(0 0 0 / 0.25), 0 1px 2px 0 rgb(0 0 0 / 0.4);
-  --ui-highlight: inset 0 1px 0 0 rgb(255 255 255 / 0.035);
-  --ui-card-tint: linear-gradient(to bottom, rgb(255 255 255 / 0.018), rgb(255 255 255 / 0) 60%);
-  --ui-focus-ring: 0 0 0 3px rgb(var(--ui-primary) / 0.38);
-  --ui-shadow-popover: 0 0 0 1px rgb(0 0 0 / 0.3), 0 4px 10px -2px rgb(0 0 0 / 0.45), 0 16px 36px -8px rgb(0 0 0 / 0.6);
-  --ui-shadow-overlay: 0 0 0 1px rgb(0 0 0 / 0.35), 0 24px 64px -12px rgb(0 0 0 / 0.7);
-  --ui-scrim: 0 0 0 / 0.6;
-  --theme-chart-text: #c4c9d1;
-  --theme-chart-grid: #232427;
-  --theme-chart-axis: #9398a1;
-  --theme-chart-axis-grid: #1c1d20;
-  --theme-chart-tooltip: #1a1b1e;
-  --theme-chart-title: #f7f8f8;
-  --theme-chart-body: #c4c9d1;
-  --theme-chart-gray: #62666d;
-  --theme-chart-series-1: #7c86e6;
-  --theme-chart-series-2: #4cb782;
-  --theme-chart-series-3: #f0a24f;
-  --theme-chart-series-4: #f07a7a;
-  --theme-chart-series-5: #a48cf0;
-  --theme-chart-series-6: #e8799c;
-  --theme-chart-series-7: #3dbfb8;
-  --theme-chart-series-8: #f08a5d;
-  --theme-chart-series-9: #6ba8f5;
-  --theme-chart-series-10: #a3c75a;
-  --theme-chart-series-11: #4cc3e3;
-  --theme-chart-series-12: #9398a1;
-  --theme-scrollbar-thumb: #2f3034;
-  --theme-scrollbar-hover: #52555b;
+  --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). */
+/* Neutral fills (gray/slate/zinc/neutral/stone/accent share them): Apple's system grays. */
 :root.flat-theme {
-  --theme-color-gray-50: 250 250 250;
-  --theme-color-gray-100: 245 245 245;
-  --theme-color-gray-200: 229 229 229;
-  --theme-color-gray-300: 212 212 212;
-  --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;
+  --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: 237 237 237;
-  --theme-line-gray-200: 229 229 229;
-  --theme-line-gray-300: 229 229 229;
-  --theme-line-gray-400: 212 212 212;
-  /* text: every shade that upstream uses for secondary text reads at >= 4.5:1 on #f5f5f5 */
-  --theme-text-gray-400: 112 112 112;
-  --theme-text-gray-500: 100 100 100;
+  --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-*`): Linear's cool grays; fills, then lines and text */
-  --theme-color-dark-50: 247 248 248;
-  --theme-color-dark-100: 226 228 231;
-  --theme-color-dark-200: 208 214 224;
-  --theme-color-dark-300: 138 143 152;
-  --theme-color-dark-400: 107 111 119;
-  --theme-color-dark-500: 58 60 65;
-  --theme-color-dark-600: 42 43 47;
-  --theme-color-dark-700: 31 32 35;
-  --theme-color-dark-800: 20 21 23;
-  --theme-color-dark-900: 15 16 17;
-  --theme-color-dark-950: 8 9 10;
-  --theme-line-dark-400: 82 85 91;
-  --theme-line-dark-500: 59 61 66;
-  --theme-line-dark-600: 47 48 52;
-  --theme-line-dark-700: 35 36 39;
-  --theme-line-dark-800: 30 31 34;
-  --theme-line-dark-900: 26 27 30;
-  --theme-line-dark-950: 20 21 23;
-  --theme-text-dark-100: 247 248 248;
-  --theme-text-dark-200: 226 228 231;
-  --theme-text-dark-300: 196 201 209;
-  --theme-text-dark-400: 147 152 161;
-  --theme-text-dark-500: 128 133 141;
-  --theme-text-dark-600: 107 111 119;
-  --theme-text-dark-700: 82 85 91;
-  --theme-text-dark-800: 58 60 65;
-  --theme-text-dark-900: 31 32 35;
-  --theme-text-dark-950: 20 21 23;
+  /* 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 = indigo actions */
-  --theme-color-primary-50: 244 245 253;
-  --theme-color-primary-100: 234 236 251;
-  --theme-color-primary-200: 215 219 247;
-  --theme-color-primary-300: 184 190 240;
-  --theme-color-primary-400: 140 149 228;
-  --theme-color-primary-500: 94 106 210;
-  --theme-color-primary-600: 85 97 201;
-  --theme-color-primary-700: 75 86 189;
-  --theme-color-primary-800: 63 72 163;
-  --theme-color-primary-900: 52 59 133;
-  --theme-color-primary-950: 32 36 79;
-  /* indigo text keeps >= 4.5:1 on white and on the indigo tints */
-  --theme-text-primary-400: 94 106 210;
-  --theme-text-primary-500: 85 97 201;
-  --theme-text-primary-600: 79 90 197;
-  --theme-text-primary-700: 67 77 181;
-  --theme-text-primary-800: 58 68 166;
-  --theme-text-primary-900: 51 59 143;
-  --theme-ring-primary: 94 106 210;
-
-  /* semantic families: red/rose -> danger, amber/yellow/orange -> warning,
-     blue/sky/indigo/cyan -> info, green/emerald/teal/lime -> success,
-     purple/violet/fuchsia/pink -> purple */
-  --theme-color-danger-50: 253 243 243;
-  --theme-color-danger-100: 252 231 231;
-  --theme-color-danger-200: 249 207 207;
-  --theme-color-danger-300: 243 169 169;
-  --theme-color-danger-400: 236 110 113;
-  --theme-color-danger-500: 229 72 77;
-  --theme-color-danger-600: 206 44 49;
-  --theme-color-danger-700: 177 36 41;
-  --theme-color-danger-800: 143 31 35;
-  --theme-color-danger-900: 107 27 30;
-  --theme-color-danger-950: 61 16 18;
-  --theme-color-warning-50: 255 248 235;
-  --theme-color-warning-100: 255 239 204;
-  --theme-color-warning-200: 255 222 153;
-  --theme-color-warning-300: 250 196 92;
-  --theme-color-warning-400: 240 165 50;
-  --theme-color-warning-500: 224 128 22;
-  --theme-color-warning-600: 186 95 6;
-  --theme-color-warning-700: 153 74 7;
-  --theme-color-warning-800: 120 58 12;
-  --theme-color-warning-900: 92 45 12;
-  --theme-color-warning-950: 60 28 6;
-  --theme-color-info-50: 240 246 254;
-  --theme-color-info-100: 222 236 253;
-  --theme-color-info-200: 192 219 251;
-  --theme-color-info-300: 148 193 247;
-  --theme-color-info-400: 96 160 240;
-  --theme-color-info-500: 50 124 226;
-  --theme-color-info-600: 26 102 206;
-  --theme-color-info-700: 20 84 176;
-  --theme-color-info-800: 22 68 140;
-  --theme-color-info-900: 22 55 108;
-  --theme-color-info-950: 15 34 70;
-  --theme-color-success-50: 238 248 242;
-  --theme-color-success-100: 216 241 225;
-  --theme-color-success-200: 180 228 196;
-  --theme-color-success-300: 130 208 157;
-  --theme-color-success-400: 76 183 130;
-  --theme-color-success-500: 41 151 91;
-  --theme-color-success-600: 30 132 77;
-  --theme-color-success-700: 26 111 65;
-  --theme-color-success-800: 23 88 53;
-  --theme-color-success-900: 20 70 43;
-  --theme-color-success-950: 9 41 24;
-  --theme-color-purple-50: 247 244 254;
-  --theme-color-purple-100: 238 232 252;
-  --theme-color-purple-200: 221 210 249;
-  --theme-color-purple-300: 196 176 244;
-  --theme-color-purple-400: 166 136 236;
-  --theme-color-purple-500: 138 100 222;
-  --theme-color-purple-600: 118 80 196;
-  --theme-color-purple-700: 99 64 168;
-  --theme-color-purple-800: 79 51 134;
-  --theme-color-purple-900: 63 42 107;
-  --theme-color-purple-950: 36 22 64;
-  /* text role of the hue families (fills above stay vivid): >= 4.5:1 on white and #f5f5f5 */
-  --theme-text-danger-400: 206 44 49;
-  --theme-text-danger-500: 206 44 49;
-  --theme-text-danger-600: 184 38 43;
-  --theme-text-danger-700: 165 31 36;
-  --theme-text-success-400: 26 127 71;
-  --theme-text-success-500: 26 127 71;
-  --theme-text-success-600: 22 107 60;
-  --theme-text-success-700: 20 92 52;
-  --theme-text-warning-400: 163 82 0;
-  --theme-text-warning-500: 163 82 0;
-  --theme-text-warning-600: 138 69 0;
-  --theme-text-warning-700: 115 58 0;
-  --theme-text-info-400: 26 102 206;
-  --theme-text-info-500: 26 102 206;
-  --theme-text-info-600: 20 89 184;
-  --theme-text-info-700: 17 76 158;
-  --theme-text-purple-400: 118 80 196;
-  --theme-text-purple-500: 118 80 196;
-  --theme-text-purple-600: 106 69 181;
-  --theme-text-purple-700: 91 58 156;
+  /* 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: 247 248 248;
-  --theme-text-gray-200: 226 228 231;
-  --theme-text-gray-300: 208 214 224;
-  --theme-text-gray-600: 160 165 173;
-  --theme-text-gray-700: 196 201 209;
-  --theme-text-gray-800: 226 228 231;
-  --theme-text-gray-900: 247 248 248;
-  --theme-text-gray-950: 247 248 248;
-  --theme-line-gray-100: 30 31 34;
-  --theme-line-gray-200: 35 36 39;
-  --theme-line-gray-300: 47 48 52;
-  --theme-line-gray-400: 59 61 66;
-  /* indigo stays the fill; tints are dark indigo, text is the light indigo */
-  --theme-color-primary-50: 27 30 48;
-  --theme-color-primary-100: 32 35 53;
-  --theme-color-primary-200: 43 47 74;
-  --theme-color-primary-300: 59 65 112;
-  --theme-color-primary-400: 124 133 230;
-  --theme-color-primary-900: 61 70 150;
-  --theme-color-primary-950: 30 33 60;
-  --theme-text-primary-50: 244 245 253;
-  --theme-text-primary-100: 234 236 251;
-  --theme-text-primary-200: 215 219 247;
-  --theme-text-primary-900: 215 219 247;
-  --theme-text-primary-950: 234 236 251;
-  --theme-ring-primary: 124 133 230;
+  --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, indigo and hue 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 (with or without `dark:`) reads >= 4.5:1. */
+/* 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: 147 152 161;
-  --theme-text-gray-500: 147 152 161;
-  --theme-text-primary-300: 180 185 248;
-  --theme-text-primary-400: 141 149 242;
-  --theme-text-primary-500: 141 149 242;
-  --theme-text-primary-600: 141 149 242;
-  --theme-text-primary-700: 168 174 247;
-  --theme-text-primary-800: 196 200 250;
-  --theme-text-danger-300: 245 154 154;
-  --theme-text-danger-400: 240 138 138;
-  --theme-text-danger-500: 240 122 122;
-  --theme-text-danger-600: 240 122 122;
-  --theme-text-danger-700: 245 154 154;
-  --theme-text-danger-800: 249 186 186;
-  --theme-text-success-300: 111 208 160;
-  --theme-text-success-400: 92 201 143;
-  --theme-text-success-500: 76 183 130;
-  --theme-text-success-600: 76 183 130;
-  --theme-text-success-700: 111 208 160;
-  --theme-text-success-800: 150 222 186;
-  --theme-text-warning-300: 245 185 92;
-  --theme-text-warning-400: 245 185 92;
-  --theme-text-warning-500: 240 180 80;
-  --theme-text-warning-600: 240 180 80;
-  --theme-text-warning-700: 245 185 92;
-  --theme-text-warning-800: 248 206 140;
-  --theme-text-info-300: 156 198 249;
-  --theme-text-info-400: 125 180 247;
-  --theme-text-info-500: 107 168 245;
-  --theme-text-info-600: 107 168 245;
-  --theme-text-info-700: 125 180 247;
-  --theme-text-info-800: 156 198 249;
-  --theme-text-purple-300: 205 185 249;
-  --theme-text-purple-400: 190 166 247;
-  --theme-text-purple-500: 182 156 246;
-  --theme-text-purple-600: 182 156 246;
-  --theme-text-purple-700: 190 166 247;
-  --theme-text-purple-800: 205 185 249;
+  --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: 5px;
-  --theme-radius-md: 6px;
-  --theme-radius-lg: 8px;
-  --theme-radius-xl: 10px;
-  --theme-radius-2xl: 12px;
-  --theme-radius-3xl: 14px;
-  --theme-radius-4xl: 16px;
-  /* cards and outline controls carry a 1px shadow (shadcn shadow-xs); popovers, menus and dialogs float */
+  --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);
@@ -443,14 +719,14 @@
   --theme-shadow-glow: none;
   --theme-shadow-glow-lg: none;
   --theme-shadow-card: var(--ui-shadow-card);
-  --theme-shadow-card-hover: 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: none;
+  --theme-background-mesh-gradient: var(--ui-backdrop);
   --theme-backdrop-blur-xs: 0px;
   --theme-backdrop-blur-sm: 0px;
   --theme-backdrop-blur-default: 0px;
@@ -463,11 +739,11 @@
   --theme-scale-110: 1;
   --theme-scale-125: 1;
   --theme-scale-150: 1;
-  --theme-animation-fade-in: flatThemeFadeIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --theme-animation-slide-up: flatThemeSlideUp 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --theme-animation-slide-down: flatThemeSlideDown 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --theme-animation-slide-in-right: flatThemeSlideInRight 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  --theme-animation-scale-in: flatThemeScaleIn 0.12s cubic-bezier(0.4, 0, 0.2, 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;
@@ -491,22 +767,22 @@
 }
 
 @keyframes flatThemeSlideUp {
-  0% { opacity: 0; transform: translateY(4px); }
+  0% { opacity: 0; transform: translateY(6px); }
   100% { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes flatThemeSlideDown {
-  0% { opacity: 0; transform: translateY(-4px); }
+  0% { opacity: 0; transform: translateY(-6px); }
   100% { opacity: 1; transform: translateY(0); }
 }
 
 @keyframes flatThemeSlideInRight {
-  0% { opacity: 0; transform: translateX(4px); }
+  0% { opacity: 0; transform: translateX(6px); }
   100% { opacity: 1; transform: translateX(0); }
 }
 
 @keyframes flatThemeScaleIn {
-  0% { opacity: 0; transform: scale(0.98); }
+  0% { opacity: 0; transform: scale(0.97); }
   100% { opacity: 1; transform: scale(1); }
 }
 
diff --git a/frontend/src/styles/onboarding.css b/frontend/src/styles/onboarding.css
index a108c64b6902..1a12b1e19d1b 100644
--- a/frontend/src/styles/onboarding.css
+++ b/frontend/src/styles/onboarding.css
@@ -22,8 +22,8 @@
 .driver-active-element {
   position: relative !important;
   z-index: 99999999 !important;
-  outline: 4px solid rgba(22, 138, 73, 0.2) !important;
-  border-radius: 0 !important;
+  outline: 4px solid rgba(20, 184, 166, 0.2) !important;
+  border-radius: 4px !important;
 }
 
 /* 2. Popover Container */
@@ -31,27 +31,27 @@
   position: fixed !important;
   z-index: 100000000 !important;
   background-color: #ffffff !important;
-  border: 1px solid #dcdcdc !important;
-  box-shadow: none !important;
-  border-radius: 0 !important;
+  border: 1px solid #e5e7eb !important;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
+  border-radius: 12px !important;
   padding: 0 !important;
   max-width: min(440px, 90vw) !important; /* Responsive on small screens */
-  color: #26272b !important;
-  font-family: var(--ui-font) !important;
+  color: #1f2937 !important;
+  font-family: ui-sans-serif, system-ui, sans-serif !important;
   overflow: hidden !important;
 }
 
 .dark .driver-popover.theme-tour-popover {
-  background-color: #1b1c1e !important;
-  border-color: #26272b !important;
-  color: #f5f5f5 !important;
+  background-color: #1e293b !important;
+  border-color: #334155 !important;
+  color: #f3f4f6 !important;
 }
 
 /* 3. Header Area */
 .theme-tour-popover .driver-popover-title {
   display: flex !important;
   align-items: center !important;
-  padding: 20px 24px 12px 24px !important;
+  padding: 20px 24px 12px 24px !important; 
   margin: 0 !important;
   background-color: transparent !important;
   position: relative !important;
@@ -60,7 +60,7 @@
 .driver-popover-title-text {
   font-size: 18px !important;
   font-weight: 700 !important;
-  color: #111411 !important;
+  color: #111827 !important;
   line-height: 1.3 !important;
   padding-right: 100px !important; /* Ensure title doesn't overlap Skip/Close */
 }
@@ -74,30 +74,30 @@
   width: 28px !important;
   height: 28px !important;
   padding: 0 !important;
-  color: #8a8b8d !important;
+  color: #9ca3af !important;
   background-color: transparent !important;
   border: none !important;
   z-index: 20 !important;
-  border-radius: 0 !important;
+  border-radius: 4px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
 }
-.theme-tour-popover .driver-popover-close-btn:hover { background-color: #f5f5f5 !important; color: #56575a !important; }
-.dark .theme-tour-popover .driver-popover-close-btn:hover { background-color: #26272b !important; }
+.theme-tour-popover .driver-popover-close-btn:hover { background-color: #f3f4f6 !important; color: #4b5563 !important; }
+.dark .theme-tour-popover .driver-popover-close-btn:hover { background-color: #334155 !important; }
 
 /* 4. Body Content */
 .theme-tour-popover .driver-popover-description {
   display: block !important;
   font-size: 14px !important;
   font-weight: 400 !important;
-  color: #56575a !important;
+  color: #4b5563 !important;
   padding: 0 24px 24px 24px !important;
   margin: 0 !important;
   line-height: 1.6 !important;
   background-color: transparent !important;
 }
-.dark .theme-tour-popover .driver-popover-description { color: #bdbdbd !important; }
+.dark .theme-tour-popover .driver-popover-description { color: #cbd5e1 !important; }
 
 /* 5. Footer Area - Flex Row with Left/Right Containers */
 .theme-tour-popover .driver-popover-footer {
@@ -105,13 +105,13 @@
   align-items: center !important;
   justify-content: space-between !important; /* Push Left and Right apart */
   padding: 16px 24px !important;
-  background-color: #fafafa !important;
-  border-top: 1px solid #f5f5f5 !important;
+  background-color: #f9fafb !important;
+  border-top: 1px solid #f3f4f6 !important;
   margin: 0 !important;
 }
 .dark .theme-tour-popover .driver-popover-footer {
-  background-color: #161618 !important;
-  border-top-color: #1b1c1e !important;
+  background-color: #0f172a !important;
+  border-top-color: #1e293b !important;
 }
 
 /* Left Container: Progress + Shortcuts */
@@ -131,12 +131,12 @@
 /* Progress */
 .theme-tour-popover .driver-popover-progress-text {
   font-size: 13px !important;
-  color: #6f6f6f !important;
+  color: #6b7280 !important;
   margin: 0 !important;
   font-weight: 500 !important;
   white-space: nowrap !important;
 }
-.dark .theme-tour-popover .driver-popover-progress-text { color: #8a8b8d !important; }
+.dark .theme-tour-popover .driver-popover-progress-text { color: #9ca3af !important; }
 
 /* Shortcuts (Divider + Keys) */
 .footer-shortcuts {
@@ -144,39 +144,39 @@
   align-items: center !important;
   gap: 12px !important;
   padding-left: 16px !important;
-  border-left: 1px solid #dcdcdc !important;
+  border-left: 1px solid #e5e7eb !important;
   height: 20px !important;
 }
-.dark .footer-shortcuts { border-left-color: #26272b !important; }
+.dark .footer-shortcuts { border-left-color: #334155 !important; }
 
 .shortcut-item {
   display: flex !important;
   align-items: center !important;
   gap: 4px !important;
   font-size: 12px !important;
-  color: #6f6f6f !important;
+  color: #6b7280 !important;
   white-space: nowrap !important;
 }
-.dark .shortcut-item { color: #8a8b8d !important; }
+.dark .shortcut-item { color: #94a3b8 !important; }
 
 .shortcut-item kbd {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace !important;
   background-color: #ffffff !important;
-  border: 1px solid #dcdcdc !important;
-  border-radius: 0 !important;
+  border: 1px solid #e5e7eb !important;
+  border-radius: 4px !important;
   padding: 1px 6px !important;
   font-size: 11px !important;
   font-weight: 600 !important;
-  color: #56575a !important;
-  box-shadow: none !important;
+  color: #4b5563 !important;
+  box-shadow: 0 1px 0 rgba(0,0,0,0.05) !important;
   min-width: 20px !important;
   text-align: center !important;
   display: inline-block !important;
 }
 .dark .shortcut-item kbd {
-  background-color: #1b1c1e !important;
-  border-color: #3a3b40 !important;
-  color: #bdbdbd !important;
+  background-color: #1e293b !important;
+  border-color: #475569 !important;
+  color: #cbd5e1 !important;
 }
 
 /* Nav Buttons */
@@ -188,7 +188,7 @@
   font-size: 13px !important;
   font-weight: 500 !important;
   text-shadow: none !important;
-  border-radius: 0 !important;
+  border-radius: 6px !important;
   cursor: pointer !important;
   transition: all 0.2s !important;
   border: 1px solid transparent !important;
@@ -197,23 +197,23 @@
 }
 
 .theme-tour-popover .driver-popover-next-btn {
-  background-color: #168a49 !important;
+  background-color: #14b8a6 !important;
   color: #ffffff !important;
-  box-shadow: none !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
 }
-.theme-tour-popover .driver-popover-next-btn:hover { background-color: #137b40 !important; }
+.theme-tour-popover .driver-popover-next-btn:hover { background-color: #0d9488 !important; }
 
 .theme-tour-popover .driver-popover-prev-btn {
   background-color: white !important;
-  color: #6f6f6f !important;
-  border: 1px solid #dcdcdc !important;
-  box-shadow: none !important;
+  color: #6b7280 !important;
+  border: 1px solid #e5e7eb !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
 }
-.theme-tour-popover .driver-popover-prev-btn:hover { background-color: #fafafa !important; color: #3a3b40 !important; }
-.dark .theme-tour-popover .driver-popover-prev-btn {
-  background-color: #1b1c1e !important;
-  border-color: #3a3b40 !important;
-  color: #8a8b8d !important;
+.theme-tour-popover .driver-popover-prev-btn:hover { background-color: #f9fafb !important; color: #374151 !important; }
+.dark .theme-tour-popover .driver-popover-prev-btn { 
+  background-color: #1e293b !important; 
+  border-color: #475569 !important; 
+  color: #9ca3af !important; 
 }
 
 /* Arrows */
@@ -223,7 +223,7 @@
 .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: #ffffff !important; }
 .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: #ffffff !important; }
 
-.dark .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: #1b1c1e !important; }
-.dark .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: #1b1c1e !important; }
-.dark .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: #1b1c1e !important; }
-.dark .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: #1b1c1e !important; }
+.dark .driver-popover-arrow-side-left.driver-popover-arrow { border-left-color: #1e293b !important; }
+.dark .driver-popover-arrow-side-right.driver-popover-arrow { border-right-color: #1e293b !important; }
+.dark .driver-popover-arrow-side-top.driver-popover-arrow { border-top-color: #1e293b !important; }
+.dark .driver-popover-arrow-side-bottom.driver-popover-arrow { border-bottom-color: #1e293b !important; }
diff --git a/frontend/src/utils/platformColors.ts b/frontend/src/utils/platformColors.ts
index 051c909f0ea4..3d552aeece77 100644
--- a/frontend/src/utils/platformColors.ts
+++ b/frontend/src/utils/platformColors.ts
@@ -5,8 +5,6 @@
  * instead of defining their own color mappings.
  */
 
-import { flatThemeActive } from './flatTheme'
-
 export type Platform =
   | 'anthropic'
   | 'openai'
@@ -84,21 +82,24 @@ 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) ──
+//    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}))`
 const ACCENT: Record<Platform, string> = {
-  anthropic: '#f97316', // orange-500
-  openai: '#22c55e', // green-500
-  antigravity: '#a855f7', // purple-500
-  gemini: '#3b82f6', // blue-500
-  grok: '#71717a', // zinc-500
-  kimi: '#ec4899', // pink-500
-  zhipu: '#6366f1', // indigo-500
-  deepseek: '#14b8a6', // teal-500
-  minimax: '#f43f5e', // rose-500
-  opencode_go: '#f59e0b', // amber-500
-  composite: '#06b6d4', // cyan-500
+  anthropic: accent('warning', '249 115 22'), // orange-500 #f97316
+  openai: accent('success', '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
+  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
 }
-const ACCENT_DEFAULT = '#14b8a6' // primary-500 (teal)
+const ACCENT_DEFAULT = accent('primary', '20 184 166') // primary-500 (teal #14b8a6; Apple blue under the theme)
 
 // ── Accent bar (gradient) ───────────────────────────────────────────
 const ACCENT_BAR: Record<Platform, string> = {
@@ -227,30 +228,6 @@ const GRADIENT_SUBTEXT: Record<Platform, string> = {
 }
 const GRADIENT_SUBTEXT_DEFAULT = 'text-primary-200'
 
-// ── Console theme: neutral identity ────────────────────────────────
-// In the console theme a platform is told apart by its logo and label, never by hue: the hue
-// families carry status there (tailwind.config.js folds them into danger/warning/info/success/
-// purple), so Anthropic orange would read as a warning. Upstream look keeps the hues above.
-const NEUTRAL = {
-  badge: 'bg-gray-100 text-gray-700 border-gray-200 dark:bg-dark-700 dark:text-gray-200 dark:border-dark-600',
-  badgeLight: 'bg-gray-100 text-gray-700 dark:bg-dark-700 dark:text-gray-200',
-  border: 'border-gray-200 dark:border-dark-700',
-  borderStrong: 'border-gray-300 dark:border-dark-600',
-  accent: '#737373',
-  accentBar: 'bg-gray-800 dark:bg-gray-300',
-  text: 'text-gray-900 dark:text-gray-100',
-  icon: 'text-gray-700 dark:text-gray-300',
-  button: 'bg-primary-600 text-white hover:bg-primary-700 dark:bg-primary-600 dark:hover:bg-primary-500',
-  discount: 'bg-gray-900 text-white dark:bg-gray-100 dark:text-gray-900',
-  gradient: 'from-gray-800 to-gray-900',
-  gradientText: 'text-gray-100',
-  gradientSubtext: 'text-gray-300',
-}
-
-function identity(hue: string, neutral: string): string {
-  return flatThemeActive.value ? neutral : hue
-}
-
 // ── Public API ──────────────────────────────────────────────────────
 
 function isPlatform(p: string): p is Platform {
@@ -270,55 +247,55 @@ function isPlatform(p: string): p is Platform {
 }
 
 export function platformBadgeClass(p: string): string {
-  return identity(isPlatform(p) ? BADGE[p] : BADGE_DEFAULT, NEUTRAL.badge)
+  return isPlatform(p) ? BADGE[p] : BADGE_DEFAULT
 }
 
 export function platformBadgeLightClass(p: string): string {
-  return identity(isPlatform(p) ? BADGE_LIGHT[p] : BADGE_DEFAULT, NEUTRAL.badgeLight)
+  return isPlatform(p) ? BADGE_LIGHT[p] : BADGE_DEFAULT
 }
 
 export function platformBorderClass(p: string): string {
-  return identity(isPlatform(p) ? BORDER[p] : BORDER_DEFAULT, NEUTRAL.border)
+  return isPlatform(p) ? BORDER[p] : BORDER_DEFAULT
 }
 
 export function platformBorderStrongClass(p: string): string {
-  return identity(isPlatform(p) ? BORDER_STRONG[p] : BORDER_STRONG_DEFAULT, NEUTRAL.borderStrong)
+  return isPlatform(p) ? BORDER_STRONG[p] : BORDER_STRONG_DEFAULT
 }
 
 export function platformAccentColor(p: string): string {
-  return identity(isPlatform(p) ? ACCENT[p] : ACCENT_DEFAULT, NEUTRAL.accent)
+  return isPlatform(p) ? ACCENT[p] : ACCENT_DEFAULT
 }
 
 export function platformAccentBarClass(p: string): string {
-  return identity(isPlatform(p) ? ACCENT_BAR[p] : ACCENT_BAR_DEFAULT, NEUTRAL.accentBar)
+  return isPlatform(p) ? ACCENT_BAR[p] : ACCENT_BAR_DEFAULT
 }
 
 export function platformTextClass(p: string): string {
-  return identity(isPlatform(p) ? TEXT[p] : TEXT_DEFAULT, NEUTRAL.text)
+  return isPlatform(p) ? TEXT[p] : TEXT_DEFAULT
 }
 
 export function platformIconClass(p: string): string {
-  return identity(isPlatform(p) ? ICON[p] : ICON_DEFAULT, NEUTRAL.icon)
+  return isPlatform(p) ? ICON[p] : ICON_DEFAULT
 }
 
 export function platformButtonClass(p: string): string {
-  return identity(isPlatform(p) ? BUTTON[p] : BUTTON_DEFAULT, NEUTRAL.button)
+  return isPlatform(p) ? BUTTON[p] : BUTTON_DEFAULT
 }
 
 export function platformDiscountClass(p: string): string {
-  return identity(isPlatform(p) ? DISCOUNT[p] : DISCOUNT_DEFAULT, NEUTRAL.discount)
+  return isPlatform(p) ? DISCOUNT[p] : DISCOUNT_DEFAULT
 }
 
 export function platformGradientClass(p: string): string {
-  return identity(isPlatform(p) ? GRADIENT[p] : GRADIENT_DEFAULT, NEUTRAL.gradient)
+  return isPlatform(p) ? GRADIENT[p] : GRADIENT_DEFAULT
 }
 
 export function platformGradientTextClass(p: string): string {
-  return identity(isPlatform(p) ? GRADIENT_TEXT[p] : GRADIENT_TEXT_DEFAULT, NEUTRAL.gradientText)
+  return isPlatform(p) ? GRADIENT_TEXT[p] : GRADIENT_TEXT_DEFAULT
 }
 
 export function platformGradientSubtextClass(p: string): string {
-  return identity(isPlatform(p) ? GRADIENT_SUBTEXT[p] : GRADIENT_SUBTEXT_DEFAULT, NEUTRAL.gradientSubtext)
+  return isPlatform(p) ? GRADIENT_SUBTEXT[p] : GRADIENT_SUBTEXT_DEFAULT
 }
 
 export function platformLabel(p: string): string {
diff --git a/frontend/src/views/KeyUsageView.vue b/frontend/src/views/KeyUsageView.vue
index 1241a243a5d7..ea7d6e91f412 100644
--- a/frontend/src/views/KeyUsageView.vue
+++ b/frontend/src/views/KeyUsageView.vue
@@ -206,14 +206,14 @@
                     />
                     <defs>
                       <linearGradient :id="`ring-grad-${i}`" x1="0%" y1="0%" x2="100%" y2="100%">
-                        <stop offset="0%" :stop-color="RING_GRADIENTS[i % 4].from"/>
-                        <stop offset="100%" :stop-color="RING_GRADIENTS[i % 4].to"/>
+                        <stop offset="0%" :style="{ stopColor: RING_GRADIENTS[i % 4].from }"/>
+                        <stop offset="100%" :style="{ stopColor: RING_GRADIENTS[i % 4].to }"/>
                       </linearGradient>
                     </defs>
                   </svg>
                   <div class="absolute inset-0 flex flex-col items-center justify-center">
                     <template v-if="ring.isBalance">
-                      <span class="text-2xl font-bold tabular-nums" :style="{ color: RING_GRADIENTS[i % 4].from }">
+                      <span class="text-2xl font-bold tabular-nums" :style="{ color: RING_GRADIENTS[i % 4].text }">
                         {{ ring.amount }}
                       </span>
                     </template>
@@ -224,7 +224,7 @@
                       <span class="text-xs text-gray-500 dark:text-dark-400 mt-0.5">{{ t('keyUsage.used') }}</span>
                       <span
                         class="text-sm font-semibold mt-1 tabular-nums"
-                        :style="{ color: RING_GRADIENTS[i % 4].from }"
+                        :style="{ color: RING_GRADIENTS[i % 4].text }"
                       >{{ ring.amount }}</span>
                       <p v-if="ring.resetAt && formatResetTime(ring.resetAt)" class="text-xs text-gray-400 dark:text-gray-500 mt-0.5 tabular-nums">
                         ⟳ {{ formatResetTime(ring.resetAt) }}
@@ -528,11 +528,14 @@ function setDailyUsageDays(days: 7 | 30 | 90) {
 // ==================== Ring Animation ====================
 
 const CIRCUMFERENCE = 2 * Math.PI * 68
+// Upstream's ring colours (#14B8A6 -> #5EEAD4, #6366F1 -> #A5B4FC, #10B981 -> #6EE7B7, #F59E0B -> #FCD34D; the first ring
+// is upstream's primary teal) as fallbacks of the console theme's colours; the amount inside a ring takes the
+// family's readable text shade under the theme.
 const RING_GRADIENTS = [
-  { from: '#168a49', to: '#5eead4' },
-  { from: '#6366F1', to: '#A5B4FC' },
-  { from: '#10B981', to: '#6EE7B7' },
-  { from: '#F59E0B', to: '#FCD34D' },
+  { from: 'rgb(var(--theme-color-primary-500, 20 184 166))', to: 'rgb(var(--theme-color-info-400, 94 234 212))', text: 'rgb(var(--theme-text-primary-600, 20 184 166))' },
+  { from: 'rgb(var(--theme-color-indigo-500, 99 102 241))', to: 'rgb(var(--theme-color-indigo-300, 165 180 252))', text: 'rgb(var(--theme-text-indigo-600, 99 102 241))' },
+  { from: 'rgb(var(--theme-color-success-500, 16 185 129))', to: 'rgb(var(--theme-color-success-300, 110 231 183))', text: 'rgb(var(--theme-text-success-600, 16 185 129))' },
+  { from: 'rgb(var(--theme-color-warning-500, 245 158 11))', to: 'rgb(var(--theme-color-warning-300, 252 211 77))', text: 'rgb(var(--theme-text-warning-600, 245 158 11))' },
 ]
 
 const ringAnimated = ref(false)
@@ -949,9 +952,9 @@ onUnmounted(() => {
   transition: box-shadow 0.2s ease, border-color 0.2s ease;
 }
 .input-ring:focus {
+  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2);
   border-color: #14b8a6;
-  outline: 2px solid rgba(22, 138, 73, 0.2);
-  outline-offset: 1px;
+  outline: none;
 }
 
 /* Ring animation */
@@ -962,17 +965,19 @@ onUnmounted(() => {
 }
 
 /* Skeleton loading */
-@keyframes pulse-opacity-kv {
-  0%, 100% { opacity: 0.72; }
-  50% { opacity: 1; }
+@keyframes shimmer-kv {
+  0%   { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
 }
 .skeleton {
-  background: rgb(var(--ui-surface));
-  animation: pulse-opacity-kv 1.8s ease-in-out infinite;
+  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+  background-size: 200% 100%;
+  animation: shimmer-kv 1.8s ease-in-out infinite;
   border-radius: 8px;
 }
 :global(.dark) .skeleton {
-  background: rgb(var(--ui-raised));
+  background: linear-gradient(90deg, #334155 25%, #1e293b 50%, #334155 75%);
+  background-size: 200% 100%;
 }
 
 /* Fade up animation */
@@ -990,8 +995,8 @@ onUnmounted(() => {
 
 /* Pulse dot */
 @keyframes pulse-dot-kv {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
+  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
+  50% { opacity: 0.6; box-shadow: 0 0 8px 2px currentColor; }
 }
 .pulse-dot {
   animation: pulse-dot-kv 2s ease-in-out infinite;
diff --git a/frontend/src/views/admin/DashboardView.vue b/frontend/src/views/admin/DashboardView.vue
index d19f8d1d1437..d9a00281150e 100644
--- a/frontend/src/views/admin/DashboardView.vue
+++ b/frontend/src/views/admin/DashboardView.vue
@@ -539,20 +539,8 @@ const userTrendChartData = computed(() => {
   })
 
   const sortedDates = Array.from(allDates).sort()
-  const colors = [
-    '#3b82f6',
-    '#10b981',
-    '#f59e0b',
-    '#ef4444',
-    '#8b5cf6',
-    '#ec4899',
-    '#168a49',
-    '#f97316',
-    '#6366f1',
-    '#84cc16',
-    '#06b6d4',
-    '#a855f7'
-  ]
+  // upstream's 12 series colours (the composable's defaults); the Apple series under the console theme
+  const colors = presentation.value.series
 
   const datasets = Array.from(userGroups.values()).map((group, idx) => ({
     label: group.name,
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index 34214d14c537..a30c5880bcd4 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -136,28 +136,45 @@
           <template #cell-address="{ row }">
             <div class="flex items-center gap-1.5">
               <code class="code text-xs">{{ row.host }}:{{ row.port }}</code>
-              <div class="relative">
+              <div class="relative inline-flex items-center">
                 <button
                   type="button"
                   class="rounded p-0.5 text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"
                   :title="t('admin.proxies.copyProxyUrl')"
+                  :aria-label="t('admin.proxies.copyProxyUrl')"
                   @click.stop="copyProxyUrl(row)"
                   @contextmenu.prevent="toggleCopyMenu(row.id)"
                 >
                   <Icon name="copy" size="sm" />
                 </button>
-                <!-- 右键展开格式选择菜单 -->
+                <button
+                  type="button"
+                  class="rounded p-0.5 text-gray-400 hover:text-primary-600 dark:hover:text-primary-400"
+                  :title="t('admin.proxies.copyFormats')"
+                  :aria-label="t('admin.proxies.copyFormats')"
+                  aria-haspopup="menu"
+                  :aria-expanded="copyMenuProxyId === row.id"
+                  data-test="proxy-copy-formats"
+                  @click.stop="toggleCopyMenu(row.id)"
+                >
+                  <Icon name="chevronDown" size="xs" />
+                </button>
+                <!-- 复制格式菜单：点下拉箭头或右键复制图标展开 -->
                 <div
                   v-if="copyMenuProxyId === row.id"
-                  class="absolute left-0 top-full z-50 mt-1 w-auto min-w-[180px] rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-dark-500 dark:bg-dark-700"
+                  role="menu"
+                  class="absolute left-0 top-full z-50 mt-1 w-max min-w-[220px] max-w-[360px] whitespace-normal rounded-lg border border-gray-200 bg-white py-1 shadow-lg dark:border-dark-500 dark:bg-dark-700"
                 >
                   <button
                     v-for="fmt in getCopyFormats(row)"
-                    :key="fmt.label"
-                    class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-gray-100 dark:hover:bg-dark-600"
+                    :key="fmt.key"
+                    type="button"
+                    role="menuitem"
+                    class="flex w-full flex-col items-start gap-0.5 px-3 py-1.5 text-left text-xs hover:bg-gray-100 dark:hover:bg-dark-600"
                     @click.stop="copyFormat(fmt.value)"
                   >
-                    <span class="truncate font-mono text-gray-600 dark:text-gray-300">{{ fmt.label }}</span>
+                    <span class="text-[11px] text-gray-500 dark:text-gray-400">{{ fmt.name }}</span>
+                    <span class="font-mono text-gray-700 [overflow-wrap:anywhere] dark:text-gray-200">{{ fmt.value }}</span>
                   </button>
                 </div>
               </div>
@@ -2046,15 +2063,23 @@ function buildProxyUrl(row: any): string {
 
 function getCopyFormats(row: any) {
   const hasAuth = row.username || row.password
-  const fullUrl = buildProxyUrl(row)
+  const hostPort = `${row.host}:${row.port}`
   const formats = [
-    { label: fullUrl, value: fullUrl },
+    { key: 'url', name: t('admin.proxies.copyFormatStandard'), value: buildProxyUrl(row) },
   ]
   if (hasAuth) {
-    const withoutProtocol = fullUrl.replace(/^[^:]+:\/\//, '')
-    formats.push({ label: withoutProtocol, value: withoutProtocol })
+    formats.push({
+      key: 'host-port-user-pass',
+      name: t('admin.proxies.copyFormatHostPortUserPass'),
+      value: `${hostPort}:${row.username || ''}:${row.password || ''}`,
+    })
+    formats.push({
+      key: 'user-pass-host',
+      name: t('admin.proxies.copyFormatUserPassHost'),
+      value: `${buildAuthPart(row)}${hostPort}`,
+    })
   }
-  formats.push({ label: `${row.host}:${row.port}`, value: `${row.host}:${row.port}` })
+  formats.push({ key: 'host-port', name: t('admin.proxies.copyFormatHostPort'), value: hostPort })
   return formats
 }
 
diff --git a/frontend/src/views/admin/SettingsView.vue b/frontend/src/views/admin/SettingsView.vue
index 29f23d7a25b2..5ec855a70eb9 100644
--- a/frontend/src/views/admin/SettingsView.vue
+++ b/frontend/src/views/admin/SettingsView.vue
@@ -13692,7 +13692,9 @@ watch(
 .settings-tabs-shell {
   @apply sticky z-20 -mx-1 rounded-2xl border border-white/80 bg-white/90 p-1.5 backdrop-blur-xl;
   top: 4.75rem;
-  box-shadow: none;
+  box-shadow:
+    0 12px 28px rgb(15 23 42 / 0.07),
+    0 1px 0 rgb(255 255 255 / 0.9) inset;
 }
 
 .settings-tabs-scroll {
@@ -13730,7 +13732,7 @@ watch(
 .settings-tab::before {
   @apply absolute inset-0 -z-10 rounded-xl opacity-0 transition-opacity duration-200;
   content: "";
-  background: rgb(var(--ui-surface));
+  background: linear-gradient(135deg, rgb(248 250 252 / 0.95), rgb(241 245 249 / 0.8));
 }
 
 .settings-tab:hover::before,
@@ -13744,7 +13746,9 @@ watch(
 
 .settings-tab-active {
   @apply border-primary-200/80 bg-white text-primary-700 shadow-sm dark:border-primary-400/30 dark:bg-dark-700/95 dark:text-primary-200;
-  box-shadow: none;
+  box-shadow:
+    0 8px 18px rgb(15 23 42 / 0.08),
+    0 1px 0 rgb(255 255 255 / 0.92) inset;
 }
 
 .settings-tab-active::before {
@@ -13759,7 +13763,7 @@ watch(
   height: 2px;
   border-radius: 9999px;
   content: "";
-  background: #168a49;
+  background: linear-gradient(90deg, #14b8a6, #0ea5e9);
 }
 
 .settings-tab-icon {
@@ -13787,14 +13791,18 @@ watch(
 .dark .settings-tabs-shell {
   border-color: rgb(51 65 85 / 0.65);
   background: rgb(15 23 42 / 0.86);
-  box-shadow: none;
+  box-shadow:
+    0 16px 36px rgb(0 0 0 / 0.28),
+    0 1px 0 rgb(255 255 255 / 0.06) inset;
 }
 
 .dark .settings-tab::before {
-  background: rgb(var(--ui-raised));
+  background: linear-gradient(135deg, rgb(30 41 59 / 0.9), rgb(51 65 85 / 0.62));
 }
 
 .dark .settings-tab-active {
-  box-shadow: none;
+  box-shadow:
+    0 12px 26px rgb(0 0 0 / 0.22),
+    0 1px 0 rgb(255 255 255 / 0.08) inset;
 }
 </style>
diff --git a/frontend/src/views/admin/__tests__/ProxiesView.copyFormats.spec.ts b/frontend/src/views/admin/__tests__/ProxiesView.copyFormats.spec.ts
new file mode 100644
index 000000000000..5ccb4a518ac7
--- /dev/null
+++ b/frontend/src/views/admin/__tests__/ProxiesView.copyFormats.spec.ts
@@ -0,0 +1,38 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { flushPromises, shallowMount } from '@vue/test-utils'
+import ProxiesView from '../ProxiesView.vue'
+
+const { list, getAllWithCount } = vi.hoisted(() => ({ list: vi.fn(), getAllWithCount: vi.fn() }))
+vi.mock('@/api/admin', () => ({ adminAPI: { proxies: { list, getAllWithCount } } }))
+vi.mock('@/stores/app', () => ({ useAppStore: () => ({ showError: vi.fn(), showSuccess: vi.fn() }) }))
+vi.mock('vue-i18n', async () => ({
+  ...await vi.importActual<typeof import('vue-i18n')>('vue-i18n'),
+  useI18n: () => ({ t: (key: string) => key }),
+}))
+
+let wrapper: ReturnType<typeof shallowMount>
+afterEach(() => wrapper?.unmount())
+
+describe('proxy copy formats', () => {
+  it('offers the standard URL first and the other formats with the real credentials', async () => {
+    list.mockResolvedValue({ items: [{ id: 7, name: 'jp', protocol: 'socks5', host: '203.0.113.8', port: 6023, username: 'user-a', password: 'p@ss:w', status: 'active' }], total: 1, pages: 1 })
+    getAllWithCount.mockResolvedValue([])
+    wrapper = shallowMount(ProxiesView, {
+      global: { stubs: {
+        AppLayout: { template: '<div><slot /></div>' },
+        TablePageLayout: { template: '<div><slot name="table" /></div>' },
+        DataTable: { props: ['data'], template: '<div v-for="row in data" :key="row.id"><slot name="cell-address" :row="row" /></div>' },
+      } },
+    })
+    await flushPromises()
+
+    await wrapper.get('[data-test="proxy-copy-formats"]').trigger('click')
+    const values = wrapper.findAll('[role="menuitem"] .font-mono').map(item => item.text())
+    expect(values).toEqual([
+      'socks5://user-a:p%40ss%3Aw@203.0.113.8:6023',
+      '203.0.113.8:6023:user-a:p@ss:w',
+      'user-a:p%40ss%3Aw@203.0.113.8:6023',
+      '203.0.113.8:6023',
+    ])
+  })
+})
diff --git a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
index 0d40fcbb4a87..1a259940178a 100644
--- a/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
+++ b/frontend/src/views/admin/ops/components/OpsDashboardHeader.vue
@@ -442,9 +442,9 @@ const healthScoreColor = computed(() => {
   if (isSystemIdle.value) return presentation.value.gray
   const score = healthScoreValue.value
   if (score == null) return presentation.value.gray
-  if (score >= 90) return '#10b981' // green
-  if (score >= 60) return '#f59e0b' // yellow
-  return '#ef4444' // red
+  if (score >= 90) return presentation.value.success // green
+  if (score >= 60) return presentation.value.warning // yellow
+  return presentation.value.danger // red
 })
 
 const healthScoreClass = computed(() => {
@@ -1187,7 +1187,7 @@ function handleToolbarRefresh() {
                   <path
                     d="M0 16 Q 20 16, 40 16 T 80 16 T 120 10 T 160 22 T 200 16 T 240 16 T 280 16"
                     fill="none"
-                    stroke="#3b82f6"
+                    :stroke="presentation.info"
                     stroke-width="2"
                     vector-effect="non-scaling-stroke"
                   >
diff --git a/frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue b/frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue
index 7566a2dbc438..e63828974588 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorDistributionChart.vue
@@ -24,12 +24,19 @@ const { t } = useI18n()
 
 const presentation = usePresentationColors()
 const colors = computed(() => ({
-  blue: '#3b82f6',
-  red: '#ef4444',
-  orange: '#f59e0b',
+  blue: presentation.value.tone('#3b82f6'),
+  red: presentation.value.tone('#ef4444'),
+  orange: presentation.value.tone('#f59e0b'),
   gray: presentation.value.gray,
   text: presentation.value.axis
 }))
+// the top reason is written in its category colour: the readable text shade under the console theme
+const textColors = computed(() => ({
+  blue: presentation.value.toneText('#3b82f6'),
+  red: presentation.value.toneText('#ef4444'),
+  orange: presentation.value.toneText('#f59e0b'),
+  gray: presentation.value.toneText('#9ca3af')
+}))
 
 const totalSlaErrors = computed(() =>
   (props.data?.items ?? []).reduce((total, item) => total + Number(item.sla || 0), 0)
@@ -47,6 +54,7 @@ interface ErrorCategory {
   label: string
   count: number
   color: string
+  textColor: string
 }
 
 const categories = computed<ErrorCategory[]>(() => {
@@ -69,10 +77,10 @@ const categories = computed<ErrorCategory[]>(() => {
   }
 
   const out: ErrorCategory[] = []
-  if (upstream > 0) out.push({ label: t('admin.ops.upstream'), count: upstream, color: colors.value.orange })
-  if (client > 0) out.push({ label: t('admin.ops.client'), count: client, color: colors.value.blue })
-  if (system > 0) out.push({ label: t('admin.ops.system'), count: system, color: colors.value.red })
-  if (other > 0) out.push({ label: t('admin.ops.other'), count: other, color: colors.value.gray })
+  if (upstream > 0) out.push({ label: t('admin.ops.upstream'), count: upstream, color: colors.value.orange, textColor: textColors.value.orange })
+  if (client > 0) out.push({ label: t('admin.ops.client'), count: client, color: colors.value.blue, textColor: textColors.value.blue })
+  if (system > 0) out.push({ label: t('admin.ops.system'), count: system, color: colors.value.red, textColor: textColors.value.red })
+  if (other > 0) out.push({ label: t('admin.ops.other'), count: other, color: colors.value.gray, textColor: textColors.value.gray })
   return out
 })
 
@@ -142,7 +150,7 @@ const options = computed(() => ({
         </div>
         <div class="mt-4 flex flex-col items-center gap-2">
           <div v-if="topReason" class="text-xs font-bold text-gray-900 dark:text-white">
-            {{ t('admin.ops.top') }}: <span :style="{ color: topReason.color }">{{ topReason.label }}</span>
+            {{ t('admin.ops.top') }}: <span :style="{ color: topReason.textColor }">{{ topReason.label }}</span>
           </div>
           <div class="flex flex-wrap justify-center gap-3">
             <div v-for="item in categories" :key="item.label" class="flex items-center gap-1.5 text-xs">
diff --git a/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue b/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
index 90aafd960757..0e114d5176e8 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
@@ -328,7 +328,7 @@ function formatSmartMessage(msg: string): string {
       if (obj?.error?.message) return String(obj.error.message)
       if (obj?.message) return String(obj.message)
       if (obj?.detail) return String(obj.detail)
-      if (typeof obj === 'object') return JSON.stringify(obj).substring(0, 150)
+      if (typeof obj === 'object') return JSON.stringify(obj)
     } catch {
       // ignore parse error
     }
@@ -338,6 +338,8 @@ function formatSmartMessage(msg: string): string {
   if (msg.includes('connection refused')) return t('admin.ops.errorLog.commonErrors.connectionRefused')
   if (msg.toLowerCase().includes('rate limit')) return t('admin.ops.errorLog.commonErrors.rateLimit')
 
-  return msg.length > 200 ? msg.substring(0, 200) + '...' : msg
+  // never cut here: the error detail dialog does not repeat this message when upstream details exist; the cell
+  // truncates (upstream look, full text in its title) or wraps (console theme) on its own
+  return msg
 }
 </script>
diff --git a/frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue b/frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue
index 40d92f815d11..1c1d6a2c0f4e 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorTrendChart.vue
@@ -37,10 +37,10 @@ const { t } = useI18n()
 
 const presentation = usePresentationColors()
 const colors = computed(() => ({
-  red: '#ef4444',
-  redAlpha: '#ef444420',
-  purple: '#8b5cf6',
-  purpleAlpha: '#8b5cf620',
+  red: presentation.value.tone('#ef4444'),
+  redAlpha: presentation.value.tone('#ef444420'),
+  purple: presentation.value.tone('#8b5cf6'),
+  purpleAlpha: presentation.value.tone('#8b5cf620'),
   gray: presentation.value.gray,
   grid: presentation.value.axisGrid,
   text: presentation.value.axis
diff --git a/frontend/src/views/admin/ops/components/OpsLatencyChart.vue b/frontend/src/views/admin/ops/components/OpsLatencyChart.vue
index 723a7bae371e..902784c715cc 100644
--- a/frontend/src/views/admin/ops/components/OpsLatencyChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsLatencyChart.vue
@@ -21,7 +21,7 @@ const { t } = useI18n()
 
 const presentation = usePresentationColors()
 const colors = computed(() => ({
-  blue: '#3b82f6',
+  blue: presentation.value.tone('#3b82f6'),
   grid: presentation.value.axisGrid,
   text: presentation.value.axis
 }))
diff --git a/frontend/src/views/admin/ops/components/OpsSwitchRateTrendChart.vue b/frontend/src/views/admin/ops/components/OpsSwitchRateTrendChart.vue
index 6787d58bc279..c72e577f8f30 100644
--- a/frontend/src/views/admin/ops/components/OpsSwitchRateTrendChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsSwitchRateTrendChart.vue
@@ -34,8 +34,8 @@ const { t } = useI18n()
 
 const presentation = usePresentationColors()
 const colors = computed(() => ({
-  teal: '#168a49',
-  tealAlpha: '#168a4920',
+  teal: presentation.value.tone('#14b8a6'),
+  tealAlpha: presentation.value.tone('#14b8a620'),
   grid: presentation.value.axisGrid,
   text: presentation.value.axis
 }))
diff --git a/frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue b/frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue
index b746587d62f7..58df4e4c3659 100644
--- a/frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue
+++ b/frontend/src/views/admin/ops/components/OpsThroughputTrendChart.vue
@@ -46,10 +46,12 @@ watch(
 
 const presentation = usePresentationColors()
 const colors = computed(() => ({
-  blue: '#3b82f6',
-  blueAlpha: '#3b82f620',
-  green: '#10b981',
-  greenAlpha: '#10b98120',
+  blue: presentation.value.tone('#3b82f6'),
+  blueAlpha: presentation.value.tone('#3b82f620'),
+  green: presentation.value.tone('#10b981'),
+  greenAlpha: presentation.value.tone('#10b98120'),
+  // the TPS axis labels are drawn in the series colour: its readable text shade under the console theme
+  greenText: presentation.value.toneText('#10b981'),
   grid: presentation.value.axisGrid,
   text: presentation.value.axis
 }))
@@ -151,7 +153,7 @@ const options = computed(() => {
         display: true,
         position: 'right' as const,
         grid: { display: false },
-        ticks: { color: c.green, font: { size: 10 } }
+        ticks: { color: c.greenText, font: { size: 10 } }
       }
     }
   }
diff --git a/frontend/src/views/setup/SetupWizardView.vue b/frontend/src/views/setup/SetupWizardView.vue
index 317e3257f647..d883c1b835ee 100644
--- a/frontend/src/views/setup/SetupWizardView.vue
+++ b/frontend/src/views/setup/SetupWizardView.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex min-h-screen items-center justify-center bg-gray-50 p-4 dark:bg-dark-900"
+    class="flex min-h-screen items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 p-4 dark:from-dark-900 dark:to-dark-800"
   >
     <div class="w-full max-w-2xl">
       <!-- Logo & Title -->
diff --git a/frontend/src/views/user/CustomPageView.vue b/frontend/src/views/user/CustomPageView.vue
index 89e96b214092..793f5297f9cf 100644
--- a/frontend/src/views/user/CustomPageView.vue
+++ b/frontend/src/views/user/CustomPageView.vue
@@ -508,7 +508,7 @@ onUnmounted(() => {
 .custom-embed-shell {
   @apply relative;
   @apply h-full w-full overflow-hidden rounded-2xl;
-  @apply bg-gray-50 dark:bg-dark-900;
+  @apply bg-gradient-to-b from-gray-50 to-white dark:from-dark-900 dark:to-dark-950;
   @apply p-0;
 }
 
diff --git a/frontend/src/views/user/PaymentQRCodeView.vue b/frontend/src/views/user/PaymentQRCodeView.vue
index 4b7a831719ee..0569bf690773 100644
--- a/frontend/src/views/user/PaymentQRCodeView.vue
+++ b/frontend/src/views/user/PaymentQRCodeView.vue
@@ -116,7 +116,7 @@ async function renderQR() {
     const logoSize = 48
     const x = (canvas.width - logoSize) / 2
     const y = (canvas.height - logoSize) / 2
-    // White background with rounded-none corners
+    // White background with rounded corners
     const pad = 5
     ctx.fillStyle = '#FFFFFF'
     ctx.beginPath()
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index c4d0cda8dc6b..02ed5710f8fd 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -8,8 +8,9 @@
  *
  * 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
- * five semantic families (danger, warning, info, success, purple) with a separate text role;
- * `primary` is the accent (indigo in the console theme). Solid primary fills export
+ * 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.
  */
@@ -33,9 +34,12 @@ const NEUTRAL_FAMILIES = { gray: 'gray', slate: 'gray', zinc: 'gray', neutral: '
 const HUE_FAMILIES = {
   red: 'danger', rose: 'danger',
   amber: 'warning', yellow: 'warning', orange: 'warning',
-  blue: 'info', sky: 'info', indigo: 'info', cyan: 'info',
-  green: 'success', emerald: 'success', teal: 'success', lime: 'success',
-  purple: 'purple', violet: 'purple', fuchsia: 'purple', pink: 'purple'
+  blue: 'info',
+  green: 'success', emerald: 'success', lime: 'success',
+  teal: 'teal', cyan: 'teal', sky: 'teal',
+  indigo: 'indigo',
+  purple: 'purple', violet: 'purple', fuchsia: 'purple',
+  pink: 'pink'
 }
 
 function channels(hex) {