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 87ca17423f05..000000000000
Binary files a/frontend/src/assets/fonts/geist/Geist-Variable.latin.woff2 and /dev/null differ
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 000000000000..d15208de03cd
Binary files /dev/null and b/frontend/src/assets/fonts/inter/Inter-Variable.latin.woff2 differ
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) {