From 83f1dbf22faed38d21a8418ed263459b1767e5eb Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Thu, 1 Oct 2026 01:51:47 +0800
Subject: [PATCH 1/5] feat(ui): stacked table cells so wide admin tables fit
 without sideways scrolling

Console theme, option B of the ui-tune table-width round (owner-approved
2026-09-30): related columns become lines of one cell, each part keeping its
own cell slot, header label, sort control and help tip. Nothing is hidden;
rows may grow taller.

- DataTable: Column.stack / stackLayout / cellLabel / stackBelow. A stacked
  host draws its parts' header labels (a sortable part sorts on a click on its
  label or with its own sort button, whose name carries the order) and its
  cell lines. Parts are columns again from stackBelow up and whenever the
  theme is off (upstream's column order); phone cards are unchanged.
- columnStack.ts: stackColumns() applies the column settings to stacked
  tables (a hidden part drops its line, a hidden host keeps its parts' lines).
- Accounts always stacked (9 columns; the 5 optional columns join cells);
  admin usage and the admin error list below 1800px, the ops error dialog at
  every width (it is at most 1240px wide); user usage, user errors and IP
  management below 1400px; API keys use the compact recipe up to 1440px.
- tables.css (after the page files): the layout rules, all under
  html.flat-theme; existing rules keyed on a merged column also name its line.
- Account names and e-mails break at word joins, model ids only after a slash
  (an outlier part over 32 characters also after its hyphens); without the
  theme both render as upstream.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/admin/usage/UsageTable.vue |  18 +-
 frontend/src/components/common/DataTable.vue  | 279 +++++-
 .../common/__tests__/DataTable.spec.ts        | 149 +++
 frontend/src/components/common/columnStack.ts | 112 +++
 frontend/src/components/common/types.ts       |  29 +
 .../user/UserErrorRequestsTable.vue           |  27 +-
 .../src/i18n/locales/en/admin/accounts.ts     |   4 +
 frontend/src/i18n/locales/en/common.ts        |   3 +
 .../src/i18n/locales/zh/admin/accounts.ts     |   4 +
 frontend/src/i18n/locales/zh/common.ts        |   3 +
 frontend/src/main.ts                          |   1 +
 frontend/src/styles/console/behaviour.css     |   1 +
 frontend/src/styles/console/data.css          |   4 +-
 .../src/styles/console/pages/accounts.css     |  20 +-
 .../styles/console/pages/dashboard-usage.css  |   3 +-
 .../pages/users-groups-proxies-keys.css       |   4 +
 frontend/src/styles/console/tables.css        | 870 ++++++++++++++++++
 frontend/src/utils/softWrap.ts                |  77 ++
 frontend/src/views/admin/AccountsView.vue     |  43 +-
 frontend/src/views/admin/ProxiesView.vue      |  12 +-
 frontend/src/views/admin/UsageView.vue        |  14 +-
 .../__tests__/AccountsView.bulkEdit.spec.ts   |   5 +-
 .../__tests__/AccountsView.console.spec.ts    |  13 +-
 .../AccountsView.priorityColumn.spec.ts       |   9 +-
 .../AccountsView.usageWindowsHint.spec.ts     |  12 +-
 .../admin/ops/components/OpsErrorLogTable.vue |  46 +-
 frontend/src/views/user/UsageView.vue         |  10 +-
 27 files changed, 1677 insertions(+), 95 deletions(-)
 create mode 100644 frontend/src/components/common/columnStack.ts
 create mode 100644 frontend/src/styles/console/tables.css
 create mode 100644 frontend/src/utils/softWrap.ts

diff --git a/frontend/src/components/admin/usage/UsageTable.vue b/frontend/src/components/admin/usage/UsageTable.vue
index ff0e836c30b6..37e887a9fa81 100644
--- a/frontend/src/components/admin/usage/UsageTable.vue
+++ b/frontend/src/components/admin/usage/UsageTable.vue
@@ -60,25 +60,25 @@
                    class="break-all"
                    :class="i === 0 ? 'font-medium text-gray-900 dark:text-white' : 'text-gray-500 dark:text-gray-400'"
                    :style="i > 0 ? `padding-left: ${i * 0.75}rem` : ''">
-                <span v-if="i > 0" class="mr-0.5">↳</span>{{ step }}
+                <span v-if="i > 0" class="mr-0.5">↳</span><template v-for="(part, j) in modelParts(step)" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template>
               </div>
             </div>
             <div v-else-if="row.upstream_model && row.upstream_model !== row.model" class="space-y-0.5">
               <div class="break-all font-medium text-gray-900 dark:text-white">
-                {{ row.model }}
+                <template v-for="(part, j) in modelParts(row.model)" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template>
               </div>
               <div class="break-all text-gray-500 dark:text-gray-400">
-                <span class="mr-0.5">↳</span>{{ row.upstream_model }}
+                <span class="mr-0.5">↳</span><template v-for="(part, j) in modelParts(row.upstream_model)" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template>
               </div>
             </div>
-            <span v-else class="font-medium text-gray-900 dark:text-white">{{ row.model }}</span>
+            <span v-else class="font-medium text-gray-900 dark:text-white"><template v-for="(part, j) in modelParts(row.model)" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template></span>
             <div
               v-if="row.upstream_model_mismatch === true && row.upstream_response_model"
               class="break-all pl-3 text-[11px]"
               :class="isLikelyModelVariant(row) ? 'text-amber-600 dark:text-amber-400' : 'text-orange-600 dark:text-orange-400'"
               :title="modelAuditTitle(row)"
             >
-              <span class="mr-1">↳ {{ t('usage.upstreamResponseModel') }}:</span>{{ row.upstream_response_model }}
+              <span class="mr-1">↳ {{ t('usage.upstreamResponseModel') }}:</span><template v-for="(part, j) in modelParts(row.upstream_response_model)" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template>{{ ' ' }}
               <span
                 class="ml-1 inline-flex rounded px-1 py-px text-[10px] font-medium ring-1 ring-inset"
                 :class="isLikelyModelVariant(row)
@@ -541,6 +541,8 @@ import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/stores/app'
 import { formatDateTime, formatReasoningEffort, reasoningEffortValuesEqual } from '@/utils/format'
 import { formatCacheTokens, formatMultiplier } from '@/utils/formatters'
+import { modelWrapParts } from '@/utils/softWrap'
+import { flatThemeActive } from '@/utils/flatTheme'
 import { formatTokenPricePerMillion } from '@/utils/usagePricing'
 import { getUsageServiceTierLabel } from '@/utils/usageServiceTier'
 import { resolveUsageRequestType } from '@/utils/usageRequestType'
@@ -574,6 +576,12 @@ import {
   hasImageInputCost,
 } from '@/utils/imageUsage'
 
+// Console theme: a model id breaks only between the parts of modelWrapParts (after a slash; an outlier part also after
+// its hyphens), each part drawn whole (tables.css, data-ui="model-part"); without the theme it is one plain part, as
+// upstream draws it.
+const modelParts = (value: unknown): string[] =>
+  flatThemeActive.value ? modelWrapParts(value) : [value == null ? '' : String(value)]
+
 /** Compute the account-billed cost for display: (account_stats_cost ?? total_cost) * rate_multiplier */
 function accountBilled(row: { total_cost?: number | null; account_stats_cost?: number | null; account_rate_multiplier?: number | null }): number {
   const base = row.account_stats_cost != null ? row.account_stats_cost : (row.total_cost ?? 0)
diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 9709ce44765e..0a08c89c062f 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -118,51 +118,108 @@
             />
           </th>
           <th
-            v-for="(column, index) in columns"
+            v-for="(column, index) in displayColumns"
             :key="column.key"
             :data-column="column.key"
+            :data-stack="column.stack?.length ? '' : undefined"
             scope="col"
-            :aria-sort="column.sortable ? getColumnAriaSort(column.key) : undefined"
+            :aria-sort="isHostSortable(column) ? getColumnAriaSort(column.key) : undefined"
             :class="[
               'sticky-header-cell py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400',
               getAdaptivePaddingClass(),
-              { 'cursor-pointer hover:bg-gray-100 dark:hover:bg-dark-700': column.sortable },
+              { 'cursor-pointer hover:bg-gray-100 dark:hover:bg-dark-700': isHostSortable(column) },
               getStickyColumnClass(column, index),
               column.class
             ]"
-            @click="column.sortable && handleSort(column.key)"
+            @click="isHostSortable(column) && handleSort(column.key)"
           >
             <div :class="['flex items-center space-x-1', getHeaderContentAlignmentClass(column)]">
-              <slot
-                :name="`header-${column.key}`"
-                :column="column"
-                :sort-key="sortKey"
-                :sort-order="sortOrder"
-              >
-                <span>{{ column.label }}</span>
-              </slot>
-              <span
-                v-if="column.sortable"
-                class="inline-flex h-5 w-4 flex-col items-center justify-center"
-                aria-hidden="true"
-              >
-                <svg
-                  class="h-2.5 w-2.5"
-                  :class="getSortIndicatorClass(column.key, 'asc')"
-                  fill="currentColor"
-                  viewBox="0 0 10 10"
+              <template v-if="!column.hostHidden">
+                <slot
+                  :name="`header-${column.key}`"
+                  :column="column"
+                  :sort-key="sortKey"
+                  :sort-order="sortOrder"
                 >
-                  <path d="M5 2L1.5 6.5h7L5 2z" />
-                </svg>
-                <svg
-                  class="-mt-0.5 h-2.5 w-2.5"
-                  :class="getSortIndicatorClass(column.key, 'desc')"
-                  fill="currentColor"
-                  viewBox="0 0 10 10"
+                  <span>{{ column.label }}</span>
+                </slot>
+                <span
+                  v-if="column.sortable"
+                  class="inline-flex h-5 w-4 flex-col items-center justify-center"
+                  aria-hidden="true"
+                >
+                  <svg
+                    class="h-2.5 w-2.5"
+                    :class="getSortIndicatorClass(column.key, 'asc')"
+                    fill="currentColor"
+                    viewBox="0 0 10 10"
+                  >
+                    <path d="M5 2L1.5 6.5h7L5 2z" />
+                  </svg>
+                  <svg
+                    class="-mt-0.5 h-2.5 w-2.5"
+                    :class="getSortIndicatorClass(column.key, 'desc')"
+                    fill="currentColor"
+                    viewBox="0 0 10 10"
+                  >
+                    <path d="M5 8L1.5 3.5h7L5 8z" />
+                  </svg>
+                </span>
+              </template>
+              <!-- Stacked parts: one label each under the host's, in cell order. A sortable part sorts by its own key on a
+                   click anywhere on its label, or with its sort button (keyboard: the button names the part and the
+                   current order; data-sort draws the arrow). -->
+              <div
+                v-if="column.stack?.length"
+                data-ui="th-subs"
+                :data-inline="column.stackLayout === 'inline' ? '' : undefined"
+                @click.stop
+              >
+                <div
+                  v-for="(part, partIndex) in column.stack"
+                  :key="part.key"
+                  data-ui="th-sub"
+                  :data-line="part.key"
+                  :data-sep="partIndex > 0 ? '' : undefined"
+                  :data-sort="part.sortable ? getColumnAriaSort(part.key) : undefined"
+                  @click="part.sortable && handleSort(part.key)"
                 >
-                  <path d="M5 8L1.5 3.5h7L5 8z" />
-                </svg>
-              </span>
+                  <slot
+                    :name="`header-${part.key}`"
+                    :column="part"
+                    :sort-key="sortKey"
+                    :sort-order="sortOrder"
+                  >
+                    <span>{{ part.label }}</span>
+                  </slot>
+                  <button
+                    v-if="part.sortable"
+                    type="button"
+                    data-ui="th-sub-sort"
+                    class="inline-flex h-5 w-4 flex-col items-center justify-center"
+                    :aria-label="getStackPartSortLabel(part)"
+                  >
+                    <svg
+                      class="h-2.5 w-2.5"
+                      :class="getSortIndicatorClass(part.key, 'asc')"
+                      fill="currentColor"
+                      viewBox="0 0 10 10"
+                      aria-hidden="true"
+                    >
+                      <path d="M5 2L1.5 6.5h7L5 2z" />
+                    </svg>
+                    <svg
+                      class="-mt-0.5 h-2.5 w-2.5"
+                      :class="getSortIndicatorClass(part.key, 'desc')"
+                      fill="currentColor"
+                      viewBox="0 0 10 10"
+                      aria-hidden="true"
+                    >
+                      <path d="M5 8L1.5 3.5h7L5 8z" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
             </div>
           </th>
         </tr>
@@ -173,7 +230,7 @@
           <td v-if="selectable" class="w-11 min-w-11 px-3 py-4">
             <div class="mx-auto h-4 w-4 animate-pulse rounded bg-gray-200 dark:bg-dark-700"></div>
           </td>
-          <td v-for="column in columns" :key="column.key" :class="['whitespace-nowrap py-4', getAdaptivePaddingClass()]">
+          <td v-for="column in displayColumns" :key="column.key" :class="['whitespace-nowrap py-4', getAdaptivePaddingClass()]">
             <div class="animate-pulse">
               <div class="h-4 w-3/4 rounded bg-gray-200 dark:bg-dark-700"></div>
             </div>
@@ -233,9 +290,10 @@
               />
             </td>
             <td
-              v-for="(column, colIndex) in columns"
+              v-for="(column, colIndex) in displayColumns"
               :key="column.key"
               :data-column="column.key"
+              :data-stack="column.stack?.length ? '' : undefined"
               :class="[
                 'whitespace-nowrap py-4 text-sm text-gray-900 dark:text-gray-100',
                 getAdaptivePaddingClass(),
@@ -243,7 +301,8 @@
                 column.class
               ]"
             >
-              <slot :name="`cell-${column.key}`"
+              <slot v-if="!column.stack?.length || (!column.hostHidden && !column.cellLabel)"
+                    :name="`cell-${column.key}`"
                     :row="item.row"
                     :value="item.row[column.key]"
                     :expanded="actionsExpanded">
@@ -251,6 +310,41 @@
                    ? column.formatter(item.row[column.key], item.row)
                    : item.row[column.key] }}
               </slot>
+              <!-- Stacked parts: each part's own cell slot on a line of its own, in column order. data-host-line: nothing
+                   is drawn above the lines (the host's content is their first, labelled line, or the host is hidden). -->
+              <div
+                v-if="column.stack?.length"
+                data-ui="cell-lines"
+                :data-inline="column.stackLayout === 'inline' ? '' : undefined"
+                :data-host-line="column.cellLabel || column.hostHidden ? '' : undefined"
+              >
+                <div v-if="column.cellLabel && !column.hostHidden" data-ui="cell-line" :data-line="column.key">
+                  <span data-ui="cell-line-label">{{ column.cellLabel }}</span>
+                  <div data-ui="cell-line-value">
+                    <slot :name="`cell-${column.key}`"
+                          :row="item.row"
+                          :value="item.row[column.key]"
+                          :expanded="actionsExpanded">
+                      {{ column.formatter
+                         ? column.formatter(item.row[column.key], item.row)
+                         : item.row[column.key] }}
+                    </slot>
+                  </div>
+                </div>
+                <div v-for="part in column.stack" :key="part.key" data-ui="cell-line" :data-line="part.key">
+                  <span v-if="part.cellLabel" data-ui="cell-line-label">{{ part.cellLabel === true ? part.label : part.cellLabel }}</span>
+                  <div data-ui="cell-line-value">
+                    <slot :name="`cell-${part.key}`"
+                          :row="item.row"
+                          :value="item.row[part.key]"
+                          :expanded="actionsExpanded">
+                      {{ part.formatter
+                         ? part.formatter(item.row[part.key], item.row)
+                         : item.row[part.key] }}
+                    </slot>
+                  </div>
+                </div>
+              </div>
             </td>
           </tr>
           <tr v-if="virtualPaddingBottom > 0" aria-hidden="true">
@@ -265,10 +359,11 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, onUnmounted, watch, nextTick } from 'vue'
+import { computed, ref, shallowRef, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useVirtualizer, observeElementRect as observeElementRectDefault } from '@tanstack/vue-virtual'
 import { useI18n } from 'vue-i18n'
-import type { Column } from './types'
+import type { Column, StackPart } from './types'
+import { flattenStackedColumns, inColumnOrder } from './columnStack'
 import Icon from '@/components/icons/Icon.vue'
 import { flatThemeActive } from '@/utils/flatTheme'
 
@@ -511,7 +606,8 @@ const collator = new Intl.Collator(undefined, {
 
 const getSortableKeys = () => {
   const keys = new Set<string>()
-  for (const col of props.columns) {
+  // stacked parts keep their own sort (and a persisted sort on them stays valid)
+  for (const col of allColumnsFlat.value) {
     if (col.sortable) keys.add(col.key)
   }
   return keys
@@ -577,6 +673,14 @@ const getColumnAriaSort = (key: string) => {
   return sortOrder.value === 'asc' ? 'ascending' : 'descending'
 }
 
+// A stacked part's sort button (aria-sort belongs to a column header, so the order is in the button's name)
+const getStackPartSortLabel = (part: StackPart) => {
+  const order = getColumnAriaSort(part.key)
+  if (order === 'ascending') return t('common.sortByColumnAscending', { column: part.label })
+  if (order === 'descending') return t('common.sortByColumnDescending', { column: part.label })
+  return t('common.sortByColumn', { column: part.label })
+}
+
 const getHeaderContentAlignmentClass = (column: Column) => {
   const className = column.class || ''
   if (className.includes('text-center')) return 'justify-center'
@@ -645,9 +749,96 @@ const resolveStableRowKey = (row: any): string | number | undefined => {
 
 const resolveRowKey = (row: any, index: number) => resolveStableRowKey(row) ?? index
 
-const dataColumns = computed(() => props.columns.filter((column) => column.key !== 'actions'))
+// --- Stacked cells (Column.stack) ---
+// A column that carries stacked parts draws them as lines of its cell. That layout is the console theme's: without the
+// theme, and from a column's stackBelow width up, every part is a column of its own again (upstream's table). One
+// media query per stackBelow width; the widths the viewport has reached are kept in a set that changes only when a
+// breakpoint is crossed.
+const stackWidthsKey = computed(() => {
+  const widths = new Set<number>()
+  for (const column of props.columns) {
+    if (column.stack?.length && column.stackBelow) widths.add(column.stackBelow)
+  }
+  return [...widths].sort((a, b) => a - b).join(',')
+})
+const stackWidthsReached = shallowRef<ReadonlySet<number>>(new Set())
+let stackWidthQueries: Array<{ width: number; query: MediaQueryList }> = []
+
+const readStackWidths = () => {
+  const reached = new Set<number>()
+  for (const { width, query } of stackWidthQueries) {
+    if (query.matches) reached.add(width)
+  }
+  stackWidthsReached.value = reached
+}
+
+const detachStackWidthQueries = () => {
+  for (const { query } of stackWidthQueries) {
+    if (typeof query.removeEventListener === 'function') {
+      query.removeEventListener('change', readStackWidths)
+    } else {
+      query.removeListener(readStackWidths)
+    }
+  }
+  stackWidthQueries = []
+}
+
+watch(
+  stackWidthsKey,
+  (key) => {
+    detachStackWidthQueries()
+    if (key && typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+      stackWidthQueries = key.split(',').map((width) => ({
+        width: Number(width),
+        query: window.matchMedia(`(min-width: ${width}px)`)
+      }))
+      for (const { query } of stackWidthQueries) {
+        if (typeof query.addEventListener === 'function') {
+          query.addEventListener('change', readStackWidths)
+        } else {
+          query.addListener(readStackWidths)
+        }
+      }
+    }
+    readStackWidths()
+  },
+  { immediate: true }
+)
+
+onUnmounted(detachStackWidthQueries)
+
+const isStackedNow = (column: Column) =>
+  flatThemeActive.value &&
+  !!column.stack?.length &&
+  (!column.stackBelow || !stackWidthsReached.value.has(column.stackBelow))
+
+// The columns drawn: stacked hosts carry their parts; everything else is one column per key, in upstream's order.
+const displayColumns = computed<Column[]>(() => {
+  const result: Column[] = []
+  for (const column of props.columns) {
+    if (isStackedNow(column)) {
+      result.push(column)
+    } else {
+      result.push(...flattenStackedColumns([column]))
+    }
+  }
+  return inColumnOrder(result)
+})
+// Every column, parts in place (the cards on phones, the sortable keys).
+const allColumnsFlat = computed(() => flattenStackedColumns(props.columns))
+
+// A hidden host keeps only its parts' lines: no label, no sort of its own.
+const isHostSortable = (column: Column) => !!column.sortable && !column.hostHidden
+
+const dataColumns = computed(() => allColumnsFlat.value.filter((column) => column.key !== 'actions'))
 const columnsSignature = computed(() =>
-  props.columns.map((column) => `${column.key}:${column.sortable ? '1' : '0'}`).join('|')
+  displayColumns.value
+    .map((column) => {
+      const own = `${column.key}:${isHostSortable(column) ? '1' : '0'}`
+      if (!column.stack?.length) return own
+      return `${own}[${column.stack.map((part) => `${part.key}:${part.sortable ? '1' : '0'}`).join(',')}]`
+    })
+    .join('|')
 )
 
 watch(
@@ -715,7 +906,7 @@ const sortedData = computed(() => {
     .map(item => item.row)
 })
 
-const tableColumnCount = computed(() => props.columns.length + (props.selectable ? 1 : 0))
+const tableColumnCount = computed(() => displayColumns.value.length + (props.selectable ? 1 : 0))
 const selectedKeySet = computed(() => new Set(props.selectedKeys))
 const visibleRowKeys = computed(() =>
   (sortedData.value ?? []).map((row, index) => resolveRowKey(row, index))
@@ -856,11 +1047,11 @@ const renderRows = computed<Array<{ index: number; row: any; measure: boolean }>
 })
 
 const hasActionsColumn = computed(() => {
-  return props.columns.some(column => column.key === 'actions')
+  return allColumnsFlat.value.some(column => column.key === 'actions')
 })
 
 const hasSelectColumn = computed(() => {
-  return props.columns.length > 0 && props.columns[0].key === 'select'
+  return displayColumns.value.length > 0 && displayColumns.value[0].key === 'select'
 })
 
 // 生成固定列的 CSS 类
@@ -893,7 +1084,7 @@ const getStickyColumnClass = (column: Column, index: number) => {
 
 // 根据列数自适应调整内边距
 const getAdaptivePaddingClass = () => {
-  const columnCount = props.columns.length
+  const columnCount = displayColumns.value.length
 
   // 列数越多，内边距越小
   if (columnCount >= 10) {
diff --git a/frontend/src/components/common/__tests__/DataTable.spec.ts b/frontend/src/components/common/__tests__/DataTable.spec.ts
index b77831da693c..e29ca8724200 100644
--- a/frontend/src/components/common/__tests__/DataTable.spec.ts
+++ b/frontend/src/components/common/__tests__/DataTable.spec.ts
@@ -1,7 +1,10 @@
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
+import type { Ref } from 'vue'
 
 import DataTable from '../DataTable.vue'
+import type { Column } from '../types'
+import { flatThemeActive } from '@/utils/flatTheme'
 
 vi.mock('vue-i18n', () => ({
   useI18n: () => ({
@@ -9,6 +12,16 @@ vi.mock('vue-i18n', () => ({
   })
 }))
 
+// the console theme switch, off unless a test turns it on (stacked cells are the theme's layout)
+vi.mock('@/utils/flatTheme', async () => {
+  const { ref } = await import('vue')
+  return { flatThemeActive: ref(false) }
+})
+const setConsoleTheme = (on: boolean) => {
+  const theme = flatThemeActive as unknown as Ref<boolean>
+  theme.value = on
+}
+
 const stubDesktopMatchMedia = () => {
   Object.defineProperty(window, 'matchMedia', {
     writable: true,
@@ -44,6 +57,7 @@ const stubMobileMatchMedia = () => {
 describe('DataTable', () => {
   beforeEach(() => {
     stubDesktopMatchMedia()
+    setConsoleTheme(false)
     localStorage.clear()
   })
 
@@ -357,4 +371,139 @@ describe('DataTable', () => {
 
     expect(wrapper.emitted('update:selectedKeys')?.at(-1)?.[0]).toEqual([99, 1, 2])
   })
+
+  describe('stacked cells', () => {
+    const stackedColumns = (extra: Partial<Column> = {}): Column[] => [
+      {
+        key: 'name',
+        label: 'Name',
+        sortable: true,
+        stack: [
+          { key: 'id', label: 'ID', sortable: true },
+          { key: 'notes', label: 'Notes', cellLabel: true }
+        ],
+        ...extra
+      },
+      { key: 'status', label: 'Status' }
+    ]
+    const rows = [{ id: 7, name: 'Alpha', notes: 'first', status: 'ok' }]
+
+    // matchMedia whose (min-width: Npx) queries match from the given width up; resize() crosses breakpoints
+    const stubViewport = (width: number) => {
+      const queries: Array<{ matches: boolean; min: number; listeners: Array<() => void> }> = []
+      const minOf = (query: string) => Number(/min-width:\s*(\d+)px/.exec(query)?.[1] ?? 0)
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: vi.fn().mockImplementation((query: string) => {
+          const entry = { min: minOf(query), matches: width >= minOf(query), listeners: [] as Array<() => void> }
+          queries.push(entry)
+          return {
+            get matches() {
+              return entry.matches
+            },
+            media: query,
+            onchange: null,
+            addEventListener: (_type: string, fn: () => void) => entry.listeners.push(fn),
+            removeEventListener: vi.fn(),
+            addListener: (fn: () => void) => entry.listeners.push(fn),
+            removeListener: vi.fn(),
+            dispatchEvent: vi.fn()
+          }
+        })
+      })
+      return {
+        resize(next: number) {
+          for (const entry of queries) {
+            const matches = next >= entry.min
+            if (matches === entry.matches) continue
+            entry.matches = matches
+            entry.listeners.forEach((fn) => fn())
+          }
+        }
+      }
+    }
+
+    it('draws the parts as lines of the host cell, each with its own header label and sort', async () => {
+      setConsoleTheme(true)
+      const wrapper = mount(DataTable, {
+        props: { columns: stackedColumns(), data: rows, serverSideSort: true },
+        slots: { 'cell-id': '<template #cell-id="{ row }"><span data-test="id-cell">#{{ row.id }}</span></template>' }
+      })
+      await wrapper.vm.$nextTick()
+
+      expect(wrapper.findAll('thead th').map((th) => th.attributes('data-column'))).toEqual(['name', 'status'])
+      const head = wrapper.get('th[data-column="name"]')
+      expect(head.attributes('data-stack')).toBe('')
+      // a sortable part: its label sorts on a click, its button (keyboard) names the part and the order
+      const idSub = head.get('div[data-ui="th-sub"][data-line="id"]')
+      expect(idSub.attributes('data-sort')).toBe('none')
+      const idSort = idSub.get('button[data-ui="th-sub-sort"]')
+      expect(idSort.attributes('aria-label')).toBe('common.sortByColumn')
+      expect(idSort.attributes('aria-sort')).toBeUndefined()
+      const notesSub = head.get('div[data-ui="th-sub"][data-line="notes"]')
+      expect(notesSub.text()).toBe('Notes')
+      expect(notesSub.attributes('data-sort')).toBeUndefined()
+      expect(notesSub.find('button').exists()).toBe(false)
+
+      const cell = wrapper.get('td[data-column="name"]')
+      expect(cell.text()).toContain('Alpha')
+      const lines = cell.findAll('[data-ui="cell-lines"] > [data-ui="cell-line"]')
+      expect(lines.map((line) => line.attributes('data-line'))).toEqual(['id', 'notes'])
+      expect(lines[0].get('[data-test="id-cell"]').text()).toBe('#7')
+      expect(lines[1].get('[data-ui="cell-line-label"]').text()).toBe('Notes')
+      expect(lines[1].get('[data-ui="cell-line-value"]').text()).toBe('first')
+
+      await idSort.trigger('click')
+      expect(wrapper.emitted('sort')).toEqual([['id', 'asc']])
+      expect(idSub.attributes('data-sort')).toBe('ascending')
+      expect(idSort.attributes('aria-label')).toBe('common.sortByColumnAscending')
+      expect(head.attributes('aria-sort')).toBe('none')
+
+      await idSub.get('span').trigger('click')
+      expect(wrapper.emitted('sort')).toEqual([['id', 'asc'], ['id', 'desc']])
+      expect(idSub.attributes('data-sort')).toBe('descending')
+      await notesSub.trigger('click')
+      expect(wrapper.emitted('sort')).toHaveLength(2)
+    })
+
+    it('draws every part as a column of its own from stackBelow up and without the console theme', async () => {
+      setConsoleTheme(true)
+      const viewport = stubViewport(1440)
+      const wrapper = mount(DataTable, {
+        props: { columns: stackedColumns({ stackBelow: 1800 }), data: rows }
+      })
+      await wrapper.vm.$nextTick()
+      const keys = () => wrapper.findAll('thead th').map((th) => th.attributes('data-column'))
+      expect(keys()).toEqual(['name', 'status'])
+
+      viewport.resize(1920)
+      await wrapper.vm.$nextTick()
+      expect(keys()).toEqual(['name', 'id', 'notes', 'status'])
+      expect(wrapper.find('[data-ui="cell-lines"]').exists()).toBe(false)
+
+      viewport.resize(1280)
+      await wrapper.vm.$nextTick()
+      expect(keys()).toEqual(['name', 'status'])
+
+      setConsoleTheme(false)
+      await wrapper.vm.$nextTick()
+      expect(keys()).toEqual(['name', 'id', 'notes', 'status'])
+    })
+
+    it('keeps a hidden host for its parts without its own content or sort', async () => {
+      setConsoleTheme(true)
+      const wrapper = mount(DataTable, {
+        props: { columns: stackedColumns({ hostHidden: true, sortable: false }), data: rows }
+      })
+      await wrapper.vm.$nextTick()
+
+      const head = wrapper.get('th[data-column="name"]')
+      expect(head.attributes('aria-sort')).toBeUndefined()
+      expect(head.text()).not.toContain('Name')
+      const cell = wrapper.get('td[data-column="name"]')
+      expect(cell.text()).not.toContain('Alpha')
+      expect(cell.get('[data-ui="cell-lines"]').attributes('data-host-line')).toBe('')
+      expect(cell.findAll('[data-ui="cell-line"]')).toHaveLength(2)
+    })
+  })
 })
diff --git a/frontend/src/components/common/columnStack.ts b/frontend/src/components/common/columnStack.ts
new file mode 100644
index 000000000000..ee128deff37a
--- /dev/null
+++ b/frontend/src/components/common/columnStack.ts
@@ -0,0 +1,112 @@
+import type { Column, StackPart } from './types'
+
+/** The columns drawn as lines of one host column's cell (DataTable, Column.stack). */
+export interface ColumnStackSpec {
+  /** the parts, in cell order: a column key, or a key with a label in front of its line (true = its column label) */
+  parts: Array<string | { key: string; cellLabel?: string | true }>
+  /** 'inline': the parts share one line (a row of chips) */
+  layout?: 'lines' | 'inline'
+  /** a line label for the host's own content (true = the host's column label) */
+  cellLabel?: string | true
+  /** viewport width (px) from which the parts are columns of their own again (Column.stackBelow) */
+  below?: number
+}
+
+/**
+ * Turns a flat column list (in the column settings' order) into the stacked list DataTable draws: every part named in
+ * a spec leaves the list and is carried by its host column, and column visibility applies to both. A hidden part is
+ * left out of its host's cell; a hidden host whose parts are visible keeps its place with `hostHidden`, so its cell
+ * holds only their lines; a host with no visible part is a plain column. Columns without a spec pass through. Every
+ * column and part keeps its position in the flat list (`order`), so a table drawn without stacking has upstream's
+ * column order.
+ */
+export function stackColumns(
+  columns: Column[],
+  specs: Record<string, ColumnStackSpec>,
+  isVisible: (key: string) => boolean = () => true
+): Column[] {
+  const byKey = new Map(columns.map((column) => [column.key, column]))
+  const position = new Map(columns.map((column, index) => [column.key, index]))
+  const hostOf = new Map<string, string>()
+  for (const [host, spec] of Object.entries(specs)) {
+    if (!byKey.has(host)) continue
+    for (const part of spec.parts) hostOf.set(typeof part === 'string' ? part : part.key, host)
+  }
+
+  const result: Column[] = []
+  for (const column of columns) {
+    if (hostOf.has(column.key)) continue
+    const spec = specs[column.key]
+    const hostVisible = isVisible(column.key)
+    const order = position.get(column.key)
+    if (!spec) {
+      if (hostVisible) result.push({ ...column, order })
+      continue
+    }
+    const stack: StackPart[] = []
+    for (const part of spec.parts) {
+      const key = typeof part === 'string' ? part : part.key
+      const def = byKey.get(key)
+      if (!def || !isVisible(key)) continue
+      stack.push({
+        key: def.key,
+        label: def.label,
+        sortable: def.sortable,
+        class: def.class,
+        formatter: def.formatter,
+        cellLabel: typeof part === 'string' ? undefined : part.cellLabel,
+        order: position.get(key)
+      })
+    }
+    if (stack.length === 0) {
+      if (hostVisible) result.push({ ...column, order })
+      continue
+    }
+    result.push({
+      ...column,
+      // a hidden host keeps its place for its parts, without a sort of its own
+      sortable: hostVisible ? column.sortable : false,
+      stack,
+      stackLayout: spec.layout,
+      cellLabel: spec.cellLabel === true ? column.label : spec.cellLabel,
+      stackBelow: spec.below,
+      hostHidden: hostVisible ? undefined : true,
+      order
+    })
+  }
+  return result
+}
+
+/** Every column of a stacked list with its parts as columns, in upstream's column order; hidden hosts are left out. */
+export function flattenStackedColumns(columns: Column[]): Column[] {
+  const result: Column[] = []
+  for (const column of columns) {
+    if (!column.stack?.length) {
+      if (!column.hostHidden) result.push(column)
+      continue
+    }
+    if (!column.hostHidden) result.push(plainColumn(column))
+    for (const part of column.stack) result.push(plainColumn(part))
+  }
+  return inColumnOrder(result)
+}
+
+/** Stable sort by `order` when every column carries one (lists built by stackColumns); otherwise as given. */
+export function inColumnOrder(columns: Column[]): Column[] {
+  if (!columns.every((column) => typeof column.order === 'number')) return columns
+  return columns
+    .map((column, index) => ({ column, index }))
+    .sort((a, b) => (a.column.order as number) - (b.column.order as number) || a.index - b.index)
+    .map(({ column }) => column)
+}
+
+function plainColumn(column: Column | StackPart): Column {
+  return {
+    key: column.key,
+    label: column.label,
+    sortable: column.sortable,
+    class: column.class,
+    formatter: column.formatter,
+    order: column.order
+  }
+}
diff --git a/frontend/src/components/common/types.ts b/frontend/src/components/common/types.ts
index fd19573dcb95..cbca730fc6aa 100644
--- a/frontend/src/components/common/types.ts
+++ b/frontend/src/components/common/types.ts
@@ -8,4 +8,33 @@ export interface Column {
   sortable?: boolean
   class?: string
   formatter?: (value: any, row: any) => string
+  /**
+   * Stacked cells (console theme): columns drawn as lines of this column's cell, in column order. Each part keeps its
+   * own cell slot (`cell-<key>`), header slot (`header-<key>`) and sort control; the header lists them under this
+   * column's label. Without the console theme, or from `stackBelow` up, the parts are columns of their own again.
+   * Build these columns with stackColumns() (columnStack.ts).
+   */
+  stack?: StackPart[]
+  /** 'lines' (default): one line per part; 'inline': the parts share one line (a row of chips) */
+  stackLayout?: 'lines' | 'inline'
+  /** a line label for this column's own content, which is then drawn as the first labelled line of the cell */
+  cellLabel?: string
+  /** viewport width (px) from which the parts are columns of their own; unset = always stacked */
+  stackBelow?: number
+  /** the column itself is hidden by the column settings: its cell holds only the lines of its stacked parts */
+  hostHidden?: boolean
+  /** position in the flat column list (set by stackColumns): the parts drawn as columns take upstream's order back */
+  order?: number
+}
+
+export interface StackPart {
+  key: string
+  label: string
+  sortable?: boolean
+  class?: string
+  formatter?: (value: any, row: any) => string
+  /** a label in front of the part's line: a text, or true for the part's own column label */
+  cellLabel?: string | true
+  /** position in the flat column list (see Column.order) */
+  order?: number
 }
diff --git a/frontend/src/components/user/UserErrorRequestsTable.vue b/frontend/src/components/user/UserErrorRequestsTable.vue
index 0d2fa1316327..2b09db264703 100644
--- a/frontend/src/components/user/UserErrorRequestsTable.vue
+++ b/frontend/src/components/user/UserErrorRequestsTable.vue
@@ -15,7 +15,7 @@
         @rowClick="(row) => openDetail(row.id)"
       >
         <template #cell-model="{ row }">
-          <span v-if="row.model" class="text-sm font-medium text-gray-900 dark:text-white">{{ row.model }}</span>
+          <span v-if="row.model" class="text-sm font-medium text-gray-900 dark:text-white"><template v-for="(part, j) in modelParts(row.model)" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template></span>
           <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
         </template>
 
@@ -130,6 +130,8 @@ import UserErrorDetailModal from '@/components/user/UserErrorDetailModal.vue'
 import IpGeoCell from '@/components/common/IpGeoCell.vue'
 import IpGeoBatchToolbar from '@/components/common/IpGeoBatchToolbar.vue'
 import { formatDateTime } from '@/utils/format'
+import { modelWrapParts } from '@/utils/softWrap'
+import { flatThemeActive } from '@/utils/flatTheme'
 import {
   mapErrorSortKey,
   numericRequestTypeKind,
@@ -139,6 +141,13 @@ import {
 } from '@/utils/errorBadges'
 import type { UserErrorRequest } from '@/types'
 import type { Column } from '@/components/common/types'
+import { stackColumns, type ColumnStackSpec } from '@/components/common/columnStack'
+
+// Console theme: a model id breaks only between the parts of modelWrapParts (after a slash; an outlier part also after
+// its hyphens), each part drawn whole (tables.css, data-ui="model-part"); without the theme it is one plain part, as
+// upstream draws it.
+const modelParts = (value: unknown): string[] =>
+  flatThemeActive.value ? modelWrapParts(value) : [value == null ? '' : String(value)]
 
 const props = defineProps<{
   rows: UserErrorRequest[]
@@ -180,11 +189,17 @@ const allColumns = computed<Column[]>(() => [
   { key: 'user_agent', label: t('usage.userAgent') },
 ])
 
-const columns = computed<Column[]>(() =>
-  props.visibleColumnKeys
-    ? allColumns.value.filter((c) => props.visibleColumnKeys!.includes(c.key))
-    : allColumns.value
-)
+// Below 1400px (console theme) related columns share a cell: the endpoint under the model, the type, platform and
+// category beside the group on one chip line. From 1400px up (and without the theme) DataTable draws them as columns.
+const ERROR_COLUMN_STACKS: Record<string, ColumnStackSpec> = {
+  model: { below: 1400, parts: ['endpoint'] },
+  group: { below: 1400, layout: 'inline', parts: ['type', 'platform', 'category'] },
+}
+
+const columns = computed<Column[]>(() => {
+  const visibleKeys = props.visibleColumnKeys
+  return stackColumns(allColumns.value, ERROR_COLUMN_STACKS, (key) => !visibleKeys || visibleKeys.includes(key))
+})
 
 function requestTypeBadge(row: UserErrorRequest): { label: string; className: string } | null {
   const kind = numericRequestTypeKind(row.request_type, row.stream)
diff --git a/frontend/src/i18n/locales/en/admin/accounts.ts b/frontend/src/i18n/locales/en/admin/accounts.ts
index 6e4f923e21e7..67a2bb3dbf7c 100644
--- a/frontend/src/i18n/locales/en/admin/accounts.ts
+++ b/frontend/src/i18n/locales/en/admin/accounts.ts
@@ -420,6 +420,10 @@ export default {accounts: {
         lastUsed: 'Last Used',
         createdAt: 'Created',
         expiresAt: 'Expires At',
+        // line labels of the stacked time cell (the full names are in its header)
+        lastUsedShort: 'Last',
+        createdAtShort: 'Created',
+        expiresAtShort: 'Expires',
         actions: 'Actions'
       },
       schedulerScore: {
diff --git a/frontend/src/i18n/locales/en/common.ts b/frontend/src/i18n/locales/en/common.ts
index afbe82cdc383..4e7010a60df0 100644
--- a/frontend/src/i18n/locales/en/common.ts
+++ b/frontend/src/i18n/locales/en/common.ts
@@ -40,6 +40,9 @@ export default {
     all: 'All',
     none: 'None',
     selectAll: 'Select all',
+    sortByColumn: 'Sort by {column}',
+    sortByColumnAscending: 'Sort by {column}, currently ascending',
+    sortByColumnDescending: 'Sort by {column}, currently descending',
     noData: 'No data',
     expand: 'Expand',
     collapse: 'Collapse',
diff --git a/frontend/src/i18n/locales/zh/admin/accounts.ts b/frontend/src/i18n/locales/zh/admin/accounts.ts
index bc438c6abf68..463d2d610e72 100644
--- a/frontend/src/i18n/locales/zh/admin/accounts.ts
+++ b/frontend/src/i18n/locales/zh/admin/accounts.ts
@@ -260,6 +260,10 @@ export default {accounts: {
         lastUsed: '最近使用',
         createdAt: '创建时间',
         expiresAt: '过期时间',
+        // line labels of the stacked time cell (the full names are in its header)
+        lastUsedShort: '最近',
+        createdAtShort: '创建',
+        expiresAtShort: '过期',
         actions: '操作'
       },
       schedulerScore: {
diff --git a/frontend/src/i18n/locales/zh/common.ts b/frontend/src/i18n/locales/zh/common.ts
index a62d9e1337c2..9566d32ded6d 100644
--- a/frontend/src/i18n/locales/zh/common.ts
+++ b/frontend/src/i18n/locales/zh/common.ts
@@ -40,6 +40,9 @@ export default {
     all: '全部',
     none: '无',
     selectAll: '全选',
+    sortByColumn: '按{column}排序',
+    sortByColumnAscending: '按{column}排序，当前升序',
+    sortByColumnDescending: '按{column}排序，当前降序',
     noData: '暂无数据',
     expand: '展开',
     collapse: '收起',
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 90dbacb863ef..ffead2f92c56 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -21,6 +21,7 @@ import './styles/console/pages/users-groups-proxies-keys.css'
 import './styles/console/pages/settings-ops-public.css'
 import './styles/console/pages/ops-channels.css'
 import './styles/console/pages/user.css'
+import './styles/console/tables.css'
 import { applyFlatTheme } from '@/utils/flatTheme'
 
 function initIOSViewportZoomFix() {
diff --git a/frontend/src/styles/console/behaviour.css b/frontend/src/styles/console/behaviour.css
index fe44adf2ff45..7004996f8010 100644
--- a/frontend/src/styles/console/behaviour.css
+++ b/frontend/src/styles/console/behaviour.css
@@ -90,6 +90,7 @@ html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="expiry"] >
 
 /* B1.5 账号管理「过期时间」 (「2026-10-25 08:00」): a line may break after a hyphen, so min-content would split the
    date; a width that holds the date keeps it whole and moves the time to line two. */
+html.flat-theme .table-wrapper[data-table="accounts"] [data-ui="cell-line"][data-line="expires_at"] > [data-ui="cell-line-value"] > div > span:first-child,
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="expires_at"] > div > span:first-child {
   display: inline-block;
   max-width: 10ch;
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index 9cb71a7b1d71..0e6e7496be00 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -265,7 +265,9 @@ html.flat-theme .table-wrapper > table[data-ui~="data-table"]:is(table) :is(th,
 
 /* Figures in Geist Mono (REF §8.7: numeric cells Mono 12 / 13, tabular): the columns every table names the same way
    for a count, an amount, a price, a rate, an id or a duration. Text in the same cell (a unit, a 「充值」 button) takes
-   MiSans / Geist through the mono stack's fallbacks. Alignment stays the column's. */
+   MiSans / Geist through the mono stack's fallbacks. Alignment stays the column's. The same columns drawn as lines of a
+   stacked cell (tables.css) keep it. */
+html.flat-theme .table-wrapper > table > tbody.table-body > tr > td [data-ui="cell-line"]:is([data-line="id"], [data-line="user_id"], [data-line="group_id"], [data-line="requests"], [data-line="tokens"], [data-line="total_tokens"], [data-line="input_tokens"], [data-line="output_tokens"], [data-line="cache_tokens"], [data-line="cost"], [data-line="actual_cost"], [data-line="balance"], [data-line="balance_after"], [data-line="amount"], [data-line="pay_amount"], [data-line="order_amount"], [data-line="price"], [data-line="rebate_amount"], [data-line="total_rebate"], [data-line="bonus_amount"], [data-line="concurrency"], [data-line="current_concurrency"], [data-line="priority"], [data-line="rate_multiplier"], [data-line="sort_order"], [data-line="latency_ms"], [data-line="status_code"], [data-line="account_count"], [data-line="group_count"], [data-line="validity_days"]) > [data-ui="cell-line-value"],
 html.flat-theme .table-wrapper > table > tbody.table-body > tr > td:is([data-column="id"], [data-column="user_id"], [data-column="group_id"], [data-column="requests"], [data-column="tokens"], [data-column="total_tokens"], [data-column="input_tokens"], [data-column="output_tokens"], [data-column="cache_tokens"], [data-column="cost"], [data-column="actual_cost"], [data-column="balance"], [data-column="balance_after"], [data-column="amount"], [data-column="pay_amount"], [data-column="order_amount"], [data-column="price"], [data-column="rebate_amount"], [data-column="total_rebate"], [data-column="bonus_amount"], [data-column="concurrency"], [data-column="current_concurrency"], [data-column="priority"], [data-column="rate_multiplier"], [data-column="sort_order"], [data-column="latency_ms"], [data-column="status_code"], [data-column="account_count"], [data-column="group_count"], [data-column="validity_days"]) {
   font-family: var(--ui-font-mono);
   font-size: 12.5px;
diff --git a/frontend/src/styles/console/pages/accounts.css b/frontend/src/styles/console/pages/accounts.css
index 3eb1dc6c1ea5..9518a3060db3 100644
--- a/frontend/src/styles/console/pages/accounts.css
+++ b/frontend/src/styles/console/pages/accounts.css
@@ -425,14 +425,14 @@ html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="n
   max-width: clamp(12rem, calc(100vw - 1086px), 16rem);
 }
 
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div:where(:not([data-ui="cell-lines"])) {
   flex-direction: row;
   align-items: baseline;
   gap: 8px;
   width: 100%;
 }
 
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > :first-child {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div:where(:not([data-ui="cell-lines"])) > :first-child {
   flex: 0 1 auto;
   min-width: 0;
   font-weight: 600;
@@ -462,7 +462,7 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > d
    after it keep their place): an account whose chips need more (OAuth with plan and privacy, a subscription expiry)
    moves the compact-mode line, then the later chip groups, to a further line. An API-key account (chips 115 +
    compact line 88) stays on one line at either cap. */
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div:where(:not([data-ui="cell-lines"])) {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
@@ -478,7 +478,7 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_t
   row-gap: 4px;
 }
 
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div > div:last-child {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div:where(:not([data-ui="cell-lines"])) > div:last-child {
   white-space: nowrap;
 }
 
@@ -493,23 +493,23 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] d
 }
 
 /* Classification / route: the two labelled values on one line; the labels are mono labels. */
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:where(:not([data-ui="cell-lines"])) {
   display: flex;
   align-items: center;
   gap: 12px;
   max-width: 34rem;
 }
 
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div > * {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:where(:not([data-ui="cell-lines"])) > * {
   margin-top: 0;
 }
 
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div > div:first-child {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:where(:not([data-ui="cell-lines"])) > div:first-child {
   flex: none;
   flex-wrap: nowrap;
 }
 
-html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div > div:last-child {
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:where(:not([data-ui="cell-lines"])) > div:last-child {
   min-width: 0;
   max-width: 18rem;
 }
@@ -522,6 +522,7 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_r
 }
 
 /* Routing groups: up to four badges and 「+N」 (its popover lists all) on one line. */
+html.flat-theme .table-wrapper[data-table="accounts"] [data-ui="cell-line"][data-line="groups"] > [data-ui="cell-line-value"] > div,
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="groups"] > div {
   max-width: none;
 }
@@ -533,18 +534,21 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="groups"] >
 
 /* Capacity, proxy, today's stats: their stacked parts side by side (the expiry cell keeps its approved stack:
    the two-line date, then the expired / auto-pause badges). */
+html.flat-theme .table-wrapper[data-table="accounts"] [data-ui="cell-line"][data-line="capacity"] > [data-ui="cell-line-value"] > div,
 html.flat-theme .table-wrapper[data-table="accounts"] td:is([data-column="capacity"], [data-column="proxy"]) > div {
   flex-direction: row;
   align-items: center;
   gap: 8px;
 }
 
+html.flat-theme .table-wrapper[data-table="accounts"] [data-ui="cell-line"][data-line="today_stats"] > [data-ui="cell-line-value"] > div > div,
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="today_stats"] > div > div {
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
+html.flat-theme .table-wrapper[data-table="accounts"] [data-ui="cell-line"][data-line="today_stats"] > [data-ui="cell-line-value"] > div > div > *,
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="today_stats"] > div > div > * {
   margin-top: 0;
 }
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
index c49ebe4131c0..8ff6fb3c1fc5 100644
--- a/frontend/src/styles/console/pages/dashboard-usage.css
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -399,7 +399,7 @@ html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="user-usage"] .
 /* Texture of the cells (REF §8.7 /logs request table: the model 13/500 ink, ids and paths Geist Mono): the requested
    model at the row's 13px (the mapping chain under it stays 12px muted), the user id after the e-mail and the endpoint
    paths in Geist Mono; the 「入站 / 上游」 labels stay sans. Same on the error lists of both pages. */
-html.flat-theme .table-wrapper[data-table="usage"] td[data-column="model"] :is(span, div)[class~="font-medium"][class~="text-gray-900"] {
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="model"] > :where(:not([data-ui="cell-lines"])) :is(span, div)[class~="font-medium"][class~="text-gray-900"] {
   font-size: 13px;
   line-height: 19.5px;
 }
@@ -409,6 +409,7 @@ html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"]
   font-size: 12px;
 }
 
+html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"] .table-wrapper, [data-ui="user-usage"] .table-wrapper) [data-ui="cell-line"][data-line="endpoint"] div > span[class~="ml-1"],
 html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"] .table-wrapper, [data-ui="user-usage"] .table-wrapper) td[data-column="endpoint"] div > span[class~="ml-1"] {
   font-family: var(--ui-font-mono);
   font-size: 11.5px;
diff --git a/frontend/src/styles/console/pages/users-groups-proxies-keys.css b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
index 2d1fc954c0e9..22b33ff0fcb2 100644
--- a/frontend/src/styles/console/pages/users-groups-proxies-keys.css
+++ b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
@@ -426,6 +426,7 @@ html.flat-theme [data-ui~="proxies-page"] td[data-column="auth"] span[class~="fo
 /* Accounts using the proxy: the reference's prompt chip (REF §8.7 /logs: a chip button, Geist Mono on the subtle fill,
    radius 4, 2 / 6 inset, ink on hover); the zero count is the same chip, not a button. The count is a figure, not a
    status: no accent. */
+html.flat-theme [data-ui~="proxies-page"] [data-ui="cell-line"][data-line="account_count"] > [data-ui="cell-line-value"] > :is(button, span)[class~="inline-flex"],
 html.flat-theme [data-ui~="proxies-page"] td[data-column="account_count"] > :is(button, span)[class~="inline-flex"] {
   padding: 2px 6px;
   border-radius: var(--ui-radius-sm);
@@ -440,10 +441,12 @@ html.flat-theme [data-ui~="proxies-page"] td[data-column="account_count"] > :is(
   transition: color var(--ui-duration) var(--ui-ease), background-color var(--ui-duration) var(--ui-ease);
 }
 
+html.flat-theme [data-ui~="proxies-page"] [data-ui="cell-line"][data-line="account_count"] > [data-ui="cell-line-value"] > span[class~="inline-flex"],
 html.flat-theme [data-ui~="proxies-page"] td[data-column="account_count"] > span[class~="inline-flex"] {
   color: rgb(var(--ui-muted));
 }
 
+html.flat-theme [data-ui~="proxies-page"] [data-ui="cell-line"][data-line="account_count"] > [data-ui="cell-line-value"] > button[class~="inline-flex"]:hover,
 html.flat-theme [data-ui~="proxies-page"] td[data-column="account_count"] > button[class~="inline-flex"]:hover {
   background-color: rgb(var(--ui-hover));
   color: rgb(var(--ui-ink));
@@ -468,6 +471,7 @@ html.flat-theme [data-ui~="proxies-page"] td[data-column="latency"] > div > div
 }
 
 /* Expiry and created: 12px, the date ink-soft, 「剩余 N 天」 muted unless it is a warning / danger chip. */
+html.flat-theme [data-ui~="proxies-page"] [data-ui="cell-line"][data-line="created_at"] > [data-ui="cell-line-value"] > span,
 html.flat-theme [data-ui~="proxies-page"] td[data-column="expiry"] > div > span:first-child,
 html.flat-theme [data-ui~="proxies-page"] td[data-column="created_at"] > span {
   color: rgb(var(--ui-ink-soft));
diff --git a/frontend/src/styles/console/tables.css b/frontend/src/styles/console/tables.css
new file mode 100644
index 000000000000..deba664ae34c
--- /dev/null
+++ b/frontend/src/styles/console/tables.css
@@ -0,0 +1,870 @@
+/* Console theme · tables: the table layout that keeps rows readable without sideways scrolling (owner decision
+ * 2026-09-30, option B of the ui-tune table-width round: rows may grow taller, nothing is hidden, no column or value is
+ * cut, the Experiential Labs look of type, radii, colours and headers is unchanged).
+ *
+ * Plain CSS after the page files; every selector starts with html.flat-theme (theme off = upstream, and DataTable only
+ * stacks cells while the theme is on). Layout only: the colours are the other files' (the few colour values here are
+ * roles already used for the same element elsewhere: the platform chip's divider, the header's hover ink).
+ *
+ * Stacked cells (DataTable, Column.stack; components/common/columnStack.ts): related columns become lines of one cell,
+ * each part keeping its own cell slot, header label, sort control and help tip. Hooks (static, from the column
+ * definitions; the whole set is present only while a table is stacked):
+ *   th[data-stack] > div > div[data-ui="th-subs"][data-inline]    the parts' header labels, under the host's label
+ *     div[data-ui="th-sub"][data-line="<key>"][data-sep][data-sort]   one per part; a sortable part (data-sort = its
+ *       button[data-ui="th-sub-sort"]                        order) sorts on a click and has its own 11px sort button
+ *   td[data-stack] > div[data-ui="cell-lines"][data-inline][data-host-line]    the lines, under the host's content
+ *     div[data-ui="cell-line"][data-line="<key>"]
+ *       span[data-ui="cell-line-label"]                       the part's column label (where a line needs one)
+ *       div[data-ui="cell-line-value"]                        the part's own cell slot, unchanged
+ *   span[data-ui="model-part"]   a model id's part (UsageTable, OpsErrorLogTable, UserErrorRequestsTable; split after
+ *                                a slash, an outlier part over 32 characters also after its hyphens; theme only);
+ *                                account names and e-mails carry <wbr> at word joins (AccountsView, theme only)
+ * Where tables stack: 账号管理 and the 运维监控 error dialog (at most 1240px wide) always; 使用记录（管理）and
+ * 错误请求（管理）below 1800px; 使用记录（用户）, 错误请求（用户）and IP管理 below 1400px (stackBelow in each view's column
+ * definitions). Above that width a table is the flat table of section 4. Theme rules keyed on a merged column
+ * (td[data-column="K"]) carry over to its line: where the line looks exactly as the column did, the column's own rule
+ * also names the line (data.css, behaviour.css, accounts.css, dashboard-usage.css, users-groups-proxies-keys.css);
+ * where the line lays out differently, the line's rule is here (section 3). Host-cell rules of the form `> div` skip
+ * the lines container (:where(:not(cell-lines))).
+ *
+ * Performance: no :has(), no sibling combinator, no :nth-child(of); the hooks never change at runtime. */
+
+/* ================================================================== 1 · the stack hooks (every stacked table) */
+
+/* The lines of a stacked cell, under the host's own content. The container holds off what a host cell sets for its
+   own content (data.css draws 优先级 in Geist Mono 12.5), so each line looks as its own column did. */
+html.flat-theme .table-wrapper td[data-stack] > div[data-ui="cell-lines"] {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  gap: 5px;
+  width: auto;
+  max-width: none;
+  margin-top: 6px;
+  font-family: var(--ui-font);
+  font-size: 13px;
+  font-weight: 400;
+  font-variant-numeric: normal;
+  line-height: 19.5px;
+}
+
+/* nothing above the lines: the host's content is their first (labelled) line, or the host column is hidden */
+html.flat-theme .table-wrapper td[data-stack] > div[data-ui="cell-lines"][data-host-line] {
+  margin-top: 0;
+}
+
+html.flat-theme .table-wrapper td[data-stack] > div[data-ui="cell-lines"] > div[data-ui="cell-line"] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 6px;
+  row-gap: 1px;
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+  font-weight: 400;
+}
+
+/* chips of the same kind share one line (分组 · 类型 · 计费, 位置 · 账号数) */
+html.flat-theme .table-wrapper td[data-stack] > div[data-ui="cell-lines"][data-inline] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+html.flat-theme .table-wrapper div[data-ui="cell-line"] > div[data-ui="cell-line-value"] {
+  min-width: 0;
+  max-width: 100%;
+}
+
+/* the line label: the console's mono label, as 管理分类 / 请求路由 already are in the accounts table */
+html.flat-theme .table-wrapper div[data-ui="cell-line"] > span[data-ui="cell-line-label"] {
+  flex: none;
+  font: var(--ui-label-font);
+  letter-spacing: var(--ui-label-tracking);
+  line-height: 18px;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: rgb(var(--ui-muted));
+}
+
+/* Header: the host's label, then one line per stacked part in cell order; a sortable part keeps its own sort box and
+   sorts by its own key; the 上游声明倍率 help mark comes with its label. The accounts header may take several lines
+   (the other stacked tables' headers do so in section 4). */
+html.flat-theme .table-wrapper[data-table="accounts"] .table-header .sticky-header-cell {
+  white-space: normal;
+  word-break: keep-all;
+  line-height: 15px;
+  vertical-align: bottom;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] .table-header .sticky-header-cell > div {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[data-stack] > div > div[data-ui="th-subs"] {
+  display: flex;
+  flex-basis: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: 2px;
+  margin-left: 0;
+  cursor: auto;
+}
+
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[data-stack] > div > div[data-ui="th-subs"][data-inline] {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-subs"][data-inline] > div[data-ui="th-sub"][data-sep]::before {
+  content: '·';
+  margin: 0 5px 0 4px;
+}
+
+/* (a sortable part reads as the header's label; its sort button is the 11px arrow box beside it) */
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"] {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 2px 4px;
+  text-align: left;
+  text-transform: inherit;
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"][data-sort] {
+  cursor: pointer;
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"][data-sort]:hover {
+  color: rgb(var(--ui-ink-soft));
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"] > button[data-ui="th-sub-sort"] {
+  display: inline-flex;
+  width: 11px;
+  height: 11px;
+  flex: 0 0 11px;
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"] > button[data-ui="th-sub-sort"] > svg {
+  display: none;
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"]:is([data-sort="ascending"], [data-sort="descending"]) > button[data-ui="th-sub-sort"]::before {
+  content: '';
+  width: 11px;
+  height: 11px;
+  background-color: currentColor;
+  -webkit-mask: var(--ui-sort-arrow) center / 11px 11px no-repeat;
+  mask: var(--ui-sort-arrow) center / 11px 11px no-repeat;
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"][data-sort="ascending"] {
+  --ui-sort-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"][data-sort="descending"] {
+  --ui-sort-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='m19 12-7 7-7-7'/%3E%3C/svg%3E");
+}
+
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"] > [data-ui="help-tooltip"] {
+  margin-left: 0;
+}
+
+/* ================================================================== 2 · 账号管理 (table view): 9 columns
+   名称 + 账号ID (+ 备注) · 平台/类型 + 容量 · 状态 + 调度 · 管理分类/请求路由 + 路由分组 (+ 代理) · 用量 (+ 今日统计) ·
+   优先级 (+ 调度权值 + 账号倍率) + 上游声明倍率 · 最近使用 + 创建时间 + 过期时间 · 操作. The five default-hidden columns,
+   switched on, become lines of the cell named in brackets (none adds a column). */
+
+html.flat-theme .table-wrapper[data-table="accounts"] {
+  --ui-table-cell-x: 8px;
+  --ui-table-edge-x: 14px;
+  --ui-table-select-w: 36px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] > table[data-ui~="data-table"]:is(table) {
+  min-width: 0;
+  width: 100%;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] > table > tbody.table-body > tr > td {
+  white-space: normal;
+  overflow-wrap: break-word;
+  vertical-align: top;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] > table > tbody.table-body > tr > td :is(.badge, [class~="rounded-md"][class~="px-1.5"], [class~="rounded"][class~="px-1.5"], [data-ui="group-badge"], [data-ui="platform-hue"] > span, [data-ui="platform-badge"] > div > span, [class~="font-mono"]) {
+  white-space: nowrap;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] > table > tbody.table-body > tr > td[data-column="select"] > * {
+  margin-top: 1px;
+}
+
+/* ---- 名称 / 邮箱 / #ID (/ 备注): the name (600) over its e-mail, both complete; the template puts <wbr> before the @
+   and inside a long local part (NightingaleGiovanna7598 -> Nightingale · Giovanna · 7598), so an address breaks at a
+   word, never inside one */
+html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="name"] {
+  width: auto;
+  min-width: 9rem;
+  max-width: none;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div:not([data-ui="cell-lines"]) {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1px;
+  width: auto;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div:not([data-ui="cell-lines"]) > :is(span, [data-ui="help-tooltip"]),
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div:not([data-ui="cell-lines"]) > [data-ui="help-tooltip"] > a {
+  flex: none;
+  max-width: 100%;
+  min-width: 0;
+  overflow: visible;
+  white-space: normal;
+  text-overflow: clip;
+  overflow-wrap: break-word;
+}
+
+/* a name that links to its site keeps its dotted underline on every line it wraps to */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div:not([data-ui="cell-lines"]) > [data-ui="help-tooltip"] {
+  display: block;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div:not([data-ui="cell-lines"]) > [data-ui="help-tooltip"] > a {
+  display: inline;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div[data-ui="cell-lines"] {
+  gap: 1px;
+  margin-top: 2px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] div[data-line="notes"] > div[data-ui="cell-line-value"] > span {
+  max-width: none;
+  overflow: visible;
+  white-space: normal;
+  text-overflow: clip;
+}
+
+/* ---- 平台/类型 / 容量: the identity chips (the joined platform | type chip on one line when it fits), the compact-mode
+   line, the capacity chip */
+html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="platform_type"] {
+  min-width: 8.5rem;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div:not([data-ui="cell-lines"]) {
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: 5px;
+  width: auto;
+  max-width: none;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] [data-ui="platform-badge"] {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] > div:not([data-ui="cell-lines"]) > div:last-child {
+  white-space: normal;
+}
+
+/* ---- 状态 / 调度: the badge, its countdown (「自动恢复」 whole), the 429 / model / error marks, then the switch */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] > div:not([data-ui="cell-lines"]),
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] > div:not([data-ui="cell-lines"]) > div[class~="flex"][class~="items-center"] {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] div:is([class~="columns-2"], [class~="columns-3"]) {
+  columns: 1;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] div[class~="flex-col"][class~="items-center"] {
+  align-items: flex-start;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] div[class~="flex-col"][class~="items-center"] > span:not([class~="badge"]) {
+  max-width: 6.5rem;
+  text-align: left;
+  word-break: keep-all;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="status"] > div[data-ui="cell-lines"] {
+  margin-top: 8px;
+  line-height: 0;
+}
+
+/* ---- 管理分类 / 请求路由 / 路由分组 (/ 代理): labelled lines, the mono label in a 46px gutter, the value beside it (a value
+   that wraps keeps its indent); the group badges flow and show their whole names */
+html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="taxonomy_route"] {
+  min-width: 10rem;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 5px;
+  max-width: none;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) > div,
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div[data-ui="cell-lines"] > div[data-ui="cell-line"] {
+  margin-top: 0;
+  padding-left: 52px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) > div:first-child {
+  flex: none;
+  flex-wrap: wrap;
+  row-gap: 3px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) > div[class~="truncate"],
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) > div:first-child > span[class~="truncate"] {
+  max-width: 100%;
+  min-width: 0;
+  overflow: visible;
+  white-space: normal;
+  text-overflow: clip;
+  word-break: keep-all;
+  overflow-wrap: break-word;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) > div > span[class~="uppercase"][class~="text-[10px]"],
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div[data-ui="cell-lines"] > div[data-ui="cell-line"] > span[data-ui="cell-line-label"] {
+  display: inline-block;
+  flex: none;
+  width: 46px;
+  margin-left: -52px;
+  margin-right: 6px;
+  line-height: 18px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) > div > span[class~="uppercase"][class~="text-[10px]"] {
+  white-space: nowrap;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div[data-ui="cell-lines"] > div[data-ui="cell-line"] {
+  flex-wrap: nowrap;
+  column-gap: 0;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div[data-ui="cell-lines"] > div[data-ui="cell-line"] > div[data-ui="cell-line-value"] {
+  flex: 1 1 auto;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] [data-line="groups"] [data-ui="group-badge"] {
+  max-width: 100%;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] [data-line="groups"] [data-ui="group-badge"] > span[class~="truncate"] {
+  overflow: visible;
+  text-overflow: clip;
+}
+
+/* ---- 用量 (/ 今日统计): at least 11rem (upstream reserves 15rem); tickets and notes wrap, the bars are 4rem, a reset time
+   wraps under its bar; today's stats (switched on) under a label, two figures a line */
+html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="usage"] {
+  min-width: 11rem;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] > div:not([data-ui="cell-lines"]) {
+  min-width: 0;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-usage-variant="list"] [class~="max-w-[15rem]"] {
+  max-width: none;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-density="list"] > div:last-child {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] [data-density="list"] > div:last-child > div[class~="h-1.5"] {
+  width: 4rem;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] span[class~="truncate"] {
+  overflow: visible;
+  white-space: normal;
+  text-overflow: clip;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] div[data-line="today_stats"] {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] div[data-line="today_stats"] > div[data-ui="cell-line-value"] > div > div {
+  flex-wrap: wrap;
+  column-gap: 10px;
+  row-gap: 1px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="usage"] div[data-line="today_stats"] > div[data-ui="cell-line-value"] > div > div > div {
+  white-space: nowrap;
+}
+
+/* ---- 优先级 / 调度权值 / 账号倍率 / 上游声明倍率: labelled lines (the value beside its label, or under it when the column is
+   too narrow for both) */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="priority"] div[data-line="upstream_billing_rate"] > div[data-ui="cell-line-value"] > div[class~="min-w-[7rem]"] {
+  flex-wrap: wrap;
+  height: auto;
+  min-height: 20px;
+  min-width: 0;
+  margin-block: -2px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="priority"] div[data-line="scheduler_score"] > div[data-ui="cell-line-value"] > div {
+  min-width: 0;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="priority"] div[data-line="scheduler_score"] > div[data-ui="cell-line-value"] > div > div {
+  white-space: nowrap;
+}
+
+/* ---- 最近 / 创建 / 过期: short line labels under the header's full names; the column keeps a date beside its label */
+html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="last_used_at"] {
+  min-width: 7.75rem;
+}
+
+/* ---- 操作: the three icon buttons stack (28px each; every row is taller than the stack), the column is 50px */
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] > div {
+  flex-direction: column;
+  gap: 2px;
+  margin-top: -3px;
+}
+
+html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="actions"] button[class~="flex-col"] {
+  margin-block: 0;
+}
+
+/* ---- below 1400px (1280 x 800): the joined platform | type chip stacks its parts, the taxonomy labels move over their
+   values, the flexible columns start from smaller floors */
+@media (max-width: 1399.98px) {
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] [data-ui="platform-badge"] > div[data-ui~="platform-hue"] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] [data-ui="platform-badge"] > div[data-ui~="platform-hue"] > span:last-child {
+    border-left: 0;
+    border-top: 1px solid rgb(var(--pf-line, var(--ui-line)));
+  }
+
+  /* the plan / privacy chips (the chip group without the platform-hue hook) wrap */
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="platform_type"] [data-ui="platform-badge"] > div[class~="inline-flex"]:not([data-ui]) {
+    flex-wrap: wrap;
+    flex-shrink: 1;
+    row-gap: 4px;
+  }
+
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) > div,
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div[data-ui="cell-lines"] > div[data-ui="cell-line"] {
+    padding-left: 0;
+  }
+
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div[data-ui="cell-lines"] > div[data-ui="cell-line"] {
+    flex-direction: column;
+  }
+
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div:not([data-ui="cell-lines"]) > div > span[class~="uppercase"][class~="text-[10px]"],
+  html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="taxonomy_route"] > div[data-ui="cell-lines"] > div[data-ui="cell-line"] > span[data-ui="cell-line-label"] {
+    display: block;
+    width: auto;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="platform_type"] { min-width: 6rem; }
+  html.flat-theme .table-wrapper[data-table="accounts"] :is(th, td)[data-column="name"] { min-width: 8rem; }
+  html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="taxonomy_route"] { min-width: 7rem; }
+  html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="usage"] { min-width: 9.5rem; }
+  html.flat-theme .table-wrapper[data-table="accounts"] th[data-column="last_used_at"] { min-width: 7rem; }
+}
+
+/* ================================================================== 3 · lines whose layout differs from their column's
+   (the columns' own rules name the lines where they look the same: data.css figures, behaviour.css B1.5,
+   accounts.css groups / capacity / today's stats, dashboard-usage.css endpoint paths, users-groups-proxies-keys.css
+   the account-count chip and the created time) */
+
+/* behaviour.css B1.4: the created time as date / time, a block here so the line's label sits by the date */
+html.flat-theme .table-wrapper div[data-ui="cell-line"][data-line="created_at"] > div[data-ui="cell-line-value"] > span {
+  display: block;
+  width: min-content;
+  white-space: normal;
+}
+
+/* accounts.css: the routing-group badges wrap inside their line (the column kept them on one line) */
+html.flat-theme .table-wrapper[data-table="accounts"] div[data-ui="cell-line"][data-line="groups"] > div[data-ui="cell-line-value"] > div > div:first-child {
+  flex-wrap: wrap;
+  max-height: none;
+}
+
+/* accounts.css: the proxy's name, expiry and fallback one under another (the column put them side by side) */
+html.flat-theme .table-wrapper[data-table="accounts"] div[data-ui="cell-line"][data-line="proxy"] > div[data-ui="cell-line-value"] > div {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 2px;
+}
+
+/* ================================================================== 4 · 使用记录 (管理 + 用户), the error lists (使用记录「错误请求」,
+   运维监控 请求错误 / 上游错误, 用户「错误请求」) and IP管理, as flat tables (the width from which they no longer stack, and
+   their layout in general).
+   The recipe: the table fills its wrapper and may be narrower than its one-line content; cells wrap ONLY where text
+   has a natural break (a space, a CJK sentence, after a / or a hyphen of a long path or name); an e-mail, a model
+   name, a key name, an IP, a figure, a chip is never cut inside (overflow-wrap: break-word only rescues a single
+   word that is wider than its capped box, i.e. an outlier). Insets 5px (10 at the table edges); rows read from the
+   top; the header may take two lines, each sortable column keeps its 11px sort box (data.css: sorting never shifts a
+   column). */
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], .table-wrapper[data-table="proxies"], [data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) {
+  --ui-table-cell-x: 5px;
+  --ui-table-edge-x: 10px;
+}
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], .table-wrapper[data-table="proxies"], [data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) > table[data-ui~="data-table"]:is(table) {
+  min-width: 0;
+  width: 100%;
+}
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], .table-wrapper[data-table="proxies"], [data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) > table > tbody.table-body > tr > td {
+  white-space: normal;
+  overflow-wrap: break-word;
+  vertical-align: top;
+}
+
+/* atoms: chips, badges, figures and IPs stay whole */
+html.flat-theme :is(.table-wrapper[data-table="usage"], .table-wrapper[data-table="proxies"], [data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) > table > tbody.table-body > tr > td :is(.badge, [data-ui~="category-chip"], [data-ui="group-badge"], [data-ui="platform-chip"], [class~="rounded"]:is([class~="px-1"], [class~="px-1.5"], [class~="px-2"]), [class~="rounded-md"]:is([class~="px-1.5"], [class~="px-2"]), [class~="tabular-nums"]) {
+  white-space: nowrap;
+}
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], .table-wrapper[data-table="proxies"], [data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) .table-header .sticky-header-cell {
+  white-space: normal;
+  word-break: keep-all;
+  line-height: 15px;
+  vertical-align: bottom;
+}
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], .table-wrapper[data-table="proxies"], [data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) .table-header .sticky-header-cell > div {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+/* ---- 4.1 · 使用记录 (管理 and 用户) */
+
+/* the user e-mail over its #id */
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="user"] > div > span:last-child {
+  display: block;
+  margin-left: 0;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="user"] > div > button {
+  text-align: left;
+}
+
+/* key and account names wrap at their spaces / hyphens / slashes; an e-mail stays whole (an outlier over 13rem breaks) */
+html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="api_key"], [data-column="account"]) > span {
+  display: inline-block;
+  max-width: 13rem;
+}
+
+/* the model name reads whole: the column is at least as wide as a usual model id (claude-opus-5-5); the
+   upstream-mismatch note wraps as a sentence */
+html.flat-theme .table-wrapper[data-table="usage"] th[data-column="model"] {
+  min-width: 7.5rem;
+}
+
+/* every model id (the usage records and both error lists draw it in parts, split after a slash: anthropic/ |
+   claude-opus-5.5) is never broken inside a part; only an outlier part over 32 characters, which could push the table
+   sideways, is drawn in pieces that break after its hyphens (softWrap.ts modelWrapParts) */
+html.flat-theme .table-wrapper span[data-ui="model-part"] {
+  white-space: nowrap;
+}
+
+/* 「计费 / 模式」 two by two (the chip under it is two characters) */
+html.flat-theme .table-wrapper[data-table="usage"] .table-header .sticky-header-cell[data-column="billing_mode"] > div > span:first-child {
+  max-width: 2.4em;
+  word-break: normal;
+}
+
+/* upstream marks the model chain break-all (it never wrapped before): here the chain wraps between its parts only;
+   the 「↳ 上游响应:」 label is one piece and the model id may start on the next line */
+html.flat-theme :is(.table-wrapper[data-table="usage"], :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"]))) td[data-column="model"] [class~="break-all"] {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
+html.flat-theme :is(.table-wrapper[data-table="usage"], :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"]))) td[data-column="model"] [class~="break-all"] > span:is([class~="mr-1"], [class~="mr-0.5"]) {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+/* endpoint paths: upstream's break-all cut a path anywhere; a path now wraps after its slashes, and moves whole under
+   its 「入站:」 label when it does not fit beside it */
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="endpoint"] > div {
+  max-width: none;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="endpoint"] div[class~="break-all"] {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="endpoint"] div[class~="break-all"] > span[class~="ml-1"] {
+  display: inline-block;
+}
+
+/* token in / out and cache figures: two per line, each figure whole */
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] > div,
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] div[class~="space-y-1"] > div[class~="flex"] {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] div[class~="inline-flex"],
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="cost"] :is(span, div[class~="text-orange-500"]) {
+  white-space: nowrap;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="cost"] > div > div[class~="flex"] {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+
+/* latency: where the table is short of room (管理 below 1800px, 用户 below 1400px) each label goes over its figure
+   (首字 / 3.10s / 总耗时 / 4.94s) beside the colour bar */
+@media (max-width: 1799.98px) {
+  html.flat-theme [data-ui="admin-usage"] .table-wrapper[data-table="usage"] td[data-column="latency"] div[class~="grid"] {
+    grid-template-columns: max-content;
+    row-gap: 0;
+  }
+}
+
+@media (max-width: 1399.98px) {
+  html.flat-theme [data-ui="user-usage"] .table-wrapper[data-table="usage"] td[data-column="latency"] div[class~="grid"] {
+    grid-template-columns: max-content;
+    row-gap: 0;
+  }
+}
+
+/* the IP whole, its 「获取地区」 under it */
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="ip_address"] span[class~="font-mono"] {
+  white-space: nowrap;
+}
+
+/* ---- 4.2 · the error lists (OpsErrorLogTable, UserErrorRequestsTable) */
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td[data-column="user"] > div > span:last-child {
+  display: block;
+  margin-left: 0;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td:is([data-column="api_key"], [data-column="key_name"], [data-column="account"]) :is(span, button, div):not([data-ui~="category-chip"]) {
+  max-width: 13rem;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) th[data-column="model"] {
+  min-width: 8rem;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td[data-column="endpoint"] > div {
+  max-width: none;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td[data-column="endpoint"] div[class~="break-all"] {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td[data-column="endpoint"] div[class~="break-all"] > span[class~="ml-1"] {
+  display: inline-block;
+}
+
+/* the message and the User-Agent: no 280px cap, no ellipsis; they wrap as sentences (behaviour.css B1.12 wraps them
+   anywhere; here a word stays whole) */
+html.flat-theme :is([data-ui~="ops-error-list"], [data-ui~="usage-records"], [data-ui="user-usage"])[data-ui]:not(uipad):not(uipad) .table-wrapper:not([data-table="usage"]) td:is([data-column="message"], [data-column="user_agent"]) > span[class][class][class] {
+  max-width: none;
+  overflow: visible;
+  white-space: normal;
+  text-overflow: clip;
+  overflow-wrap: break-word;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) th[data-column="message"] {
+  min-width: 9rem;
+}
+
+/* an error category is a short phrase (上游错误, 服务暂时不可用): it stays on one line */
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td[data-column="category"] > span {
+  word-break: keep-all;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td[data-column="status"] > div {
+  flex-wrap: wrap;
+  row-gap: 3px;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td[data-column="created_at"] > span {
+  display: inline-block;
+  width: min-content;
+  white-space: normal;
+}
+
+html.flat-theme :is([data-ui~="usage-records"] .table-wrapper:not([data-table="usage"]), [data-ui~="ops-error-list"] .table-wrapper, [data-ui="user-usage"] .table-wrapper:not([data-table="usage"])) td:is([data-column="client_ip"], [data-column="ip_address"]) :is(span, div)[class~="font-mono"] {
+  white-space: nowrap;
+}
+
+/* ---- 4.3 · IP管理: the address whole (its copy button under it), the latency badge over its quality line, the four row
+   actions two by two; the location wraps at its 「·」, a place name stays whole */
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="auth"] > div > div > span {
+  white-space: normal;
+  overflow-wrap: break-word;
+}
+
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="latency"] div[class~="items-center"] {
+  flex-wrap: wrap;
+  row-gap: 3px;
+}
+
+html.flat-theme .table-wrapper[data-table="proxies"] th[data-column="location"] {
+  min-width: 6.5rem;
+}
+
+html.flat-theme .table-wrapper[data-table="proxies"] td[data-column="actions"] > div {
+  display: grid;
+  grid-template-columns: repeat(2, 28px);
+  gap: 2px;
+}
+
+/* ================================================================== 5 · the tables of section 4 while stacked (the
+   lines only exist below each table's width, stackBelow):
+   使用记录（管理）: 用户 + API 密钥 + 账户 · 模型 (+ 推理强度) + 端点 · 分组 + 类型 + 计费模式
+   使用记录（用户）: 模型 + 推理强度 + 端点 · 分组 + 类型 + 计费模式
+   错误请求（管理 / 运维监控）: 用户 + API 密钥 + 账号 · 平台 + 模型 + 端点 · 分组 + 类型 + 错误分类
+   错误请求（用户）: 模型 + 端点 · 分组 + 类型 + 平台 + 错误分类
+   IP管理: 地理位置 + 账号数 · 有效期 + 创建时间
+   (after section 4: a stacked host's floor outranks the flat column's) */
+
+html.flat-theme .table-wrapper th[data-stack]:is([data-column="user"], [data-column="platform"]) {
+  min-width: 8.5rem;
+}
+
+/* the model cell keeps 「↳ 上游响应:anthropic/」 on one line and the model id whole on the next */
+html.flat-theme [data-ui="admin-usage"] .table-wrapper[data-table="usage"] th[data-stack][data-column="model"] {
+  min-width: 9.25rem;
+}
+
+html.flat-theme [data-ui="user-usage"] .table-wrapper th[data-stack][data-column="model"] {
+  min-width: 8.5rem;
+}
+
+html.flat-theme .table-wrapper th[data-stack][data-column="group"] {
+  min-width: 6rem;
+}
+
+/* a key / account line: the name wraps at its own breaks, an e-mail stays whole */
+html.flat-theme .table-wrapper div[data-ui="cell-line"]:is([data-line="api_key"], [data-line="account"]) > div[data-ui="cell-line-value"] :is(span, button, div) {
+  max-width: 13rem;
+}
+
+html.flat-theme .table-wrapper div[data-ui="cell-line"][data-line="endpoint"] > div[data-ui="cell-line-value"] {
+  flex: 1 1 100%;
+}
+
+html.flat-theme .table-wrapper div[data-ui="cell-line"][data-line="endpoint"] div[class~="break-all"] {
+  word-break: normal;
+  overflow-wrap: break-word;
+}
+
+html.flat-theme .table-wrapper div[data-ui="cell-line"][data-line="endpoint"] div[class~="break-all"] > span[class~="ml-1"] {
+  display: inline-block;
+}
+
+html.flat-theme .table-wrapper div[data-ui="cell-line"][data-line="model"] > div[data-ui="cell-line-value"] :is(span, div) {
+  overflow-wrap: break-word;
+}
+
+html.flat-theme .table-wrapper[data-table="proxies"] div[data-ui="cell-line"][data-line="created_at"] {
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+/* ================================================================== 6 · below 1400px: the tables that fit at 1440 but not at
+   1280 (用户管理, 分组管理, API 密钥, 操作日志, 渠道管理): the same recipe, lighter (8px insets, 12 at the edges; cells may
+   wrap at word boundaries; chips, badges and figures stay whole; the row actions wrap three a row). Mono text is NOT an
+   atom here: behaviour.css B1.12 wraps 操作日志's action and method + path, and that stays so. API 密钥 needs about 1437px
+   on one line, so its recipe reaches up to 1440px. From there up (the others from 1400px) these tables are unchanged. */
+@media (max-width: 1399.98px) {
+  html.flat-theme :is(.table-wrapper:is([data-table="users"], [data-table="groups"]), [data-ui~="audit-page"] .table-wrapper, [data-ui~="channels-page"] .table-wrapper) {
+    --ui-table-cell-x: 8px;
+    --ui-table-edge-x: 12px;
+  }
+
+  html.flat-theme :is(.table-wrapper:is([data-table="users"], [data-table="groups"]), [data-ui~="audit-page"] .table-wrapper, [data-ui~="channels-page"] .table-wrapper) > table[data-ui~="data-table"]:is(table) {
+    min-width: 0;
+    width: 100%;
+  }
+
+  html.flat-theme :is(.table-wrapper:is([data-table="users"], [data-table="groups"]), [data-ui~="audit-page"] .table-wrapper, [data-ui~="channels-page"] .table-wrapper) > table > tbody.table-body > tr > td {
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  html.flat-theme :is(.table-wrapper:is([data-table="users"], [data-table="groups"]), [data-ui~="audit-page"] .table-wrapper, [data-ui~="channels-page"] .table-wrapper) > table > tbody.table-body > tr > td :is(.badge, [data-ui~="category-chip"], [data-ui="group-badge"], [data-ui="platform-chip"], [class~="rounded"]:is([class~="px-1"], [class~="px-1.5"], [class~="px-2"]), [class~="rounded-md"]:is([class~="px-1.5"], [class~="px-2"]), [class~="rounded-full"][class~="px-2"], [class~="tabular-nums"]) {
+    white-space: nowrap;
+  }
+
+  html.flat-theme :is(.table-wrapper:is([data-table="users"], [data-table="groups"]), [data-ui~="audit-page"] .table-wrapper, [data-ui~="channels-page"] .table-wrapper) td[data-column="actions"] > div {
+    flex-wrap: wrap;
+    max-width: 100px;
+    row-gap: 2px;
+  }
+}
+
+@media (max-width: 1439.98px) {
+  html.flat-theme .table-wrapper[data-table="keys"] {
+    --ui-table-cell-x: 8px;
+    --ui-table-edge-x: 12px;
+  }
+
+  html.flat-theme .table-wrapper[data-table="keys"] > table[data-ui~="data-table"]:is(table) {
+    min-width: 0;
+    width: 100%;
+  }
+
+  html.flat-theme .table-wrapper[data-table="keys"] > table > tbody.table-body > tr > td {
+    white-space: normal;
+    overflow-wrap: break-word;
+  }
+
+  html.flat-theme .table-wrapper[data-table="keys"] > table > tbody.table-body > tr > td :is(.badge, [data-ui~="category-chip"], [data-ui="group-badge"], [data-ui="platform-chip"], [class~="rounded"]:is([class~="px-1"], [class~="px-1.5"], [class~="px-2"]), [class~="rounded-md"]:is([class~="px-1.5"], [class~="px-2"]), [class~="rounded-full"][class~="px-2"], [class~="tabular-nums"]) {
+    white-space: nowrap;
+  }
+
+  html.flat-theme .table-wrapper[data-table="keys"] td[data-column="actions"] > div {
+    flex-wrap: wrap;
+    max-width: 100px;
+    row-gap: 2px;
+  }
+
+  html.flat-theme .table-wrapper[data-table="keys"] td[data-column="usage"] :is(span, div),
+  html.flat-theme .table-wrapper[data-table="keys"] td[data-column="key"] code {
+    white-space: nowrap;
+  }
+}
diff --git a/frontend/src/utils/softWrap.ts b/frontend/src/utils/softWrap.ts
new file mode 100644
index 000000000000..7dc2508b99c0
--- /dev/null
+++ b/frontend/src/utils/softWrap.ts
@@ -0,0 +1,77 @@
+// Where a long value in a narrow table cell may break (the template puts a <wbr> between the parts). Joined back,
+// the parts are the text unchanged; an empty or missing value has no parts.
+
+const isLower = (c: string | undefined) => c !== undefined && c >= 'a' && c <= 'z'
+const isUpper = (c: string | undefined) => c !== undefined && c >= 'A' && c <= 'Z'
+const isDigit = (c: string | undefined) => c !== undefined && c >= '0' && c <= '9'
+
+/**
+ * An account name or e-mail breaks at a word, never inside one: before the @, where a lower-case letter meets a
+ * capital (NightingaleGiovanna -> Nightingale | Giovanna) and where a letter meets a run of three or more digits
+ * (Giovanna7598 -> Giovanna | 7598).
+ */
+export function nameWrapParts(value: unknown): string[] {
+  const text = value == null ? '' : String(value)
+  if (!text) return []
+  const parts: string[] = []
+  let start = 0
+  for (let i = 1; i < text.length; i++) {
+    const prev = text[i - 1]
+    const ch = text[i]
+    const digitRun = isDigit(ch) && isDigit(text[i + 1]) && isDigit(text[i + 2])
+    if (ch === '@' || (isLower(prev) && isUpper(ch)) || ((isLower(prev) || isUpper(prev)) && digitRun)) {
+      parts.push(text.slice(start, i))
+      start = i
+    }
+  }
+  parts.push(text.slice(start))
+  return parts
+}
+
+/** The longest model-id part drawn whole; a usual id (claude-sonnet-4-5-20250929) is far shorter. */
+const MODEL_PART_WHOLE_MAX = 32
+
+const isLetter = (c: string | undefined) => isLower(c) || isUpper(c)
+
+/**
+ * A model id breaks only after a slash (anthropic/ | claude-opus-4-5); each part is drawn whole. An outlier part longer
+ * than 32 characters may also break after a hyphen or underscore that a letter follows, so a version or a date stays
+ * with its word (gemini-2.5- | flash- | preview- | native- | audio- | dialog-2026); a piece still longer than that is
+ * cut into even pieces. Such an id wraps instead of pushing its table sideways.
+ */
+export function modelWrapParts(value: unknown): string[] {
+  const text = value == null ? '' : String(value)
+  if (!text) return []
+  const parts: string[] = []
+  let start = 0
+  for (let i = 0; i < text.length; i++) {
+    if (text[i] === '/' && i + 1 < text.length) {
+      pushModelPart(parts, text.slice(start, i + 1))
+      start = i + 1
+    }
+  }
+  pushModelPart(parts, text.slice(start))
+  return parts
+}
+
+function pushModelPart(parts: string[], part: string) {
+  if (part.length <= MODEL_PART_WHOLE_MAX) {
+    parts.push(part)
+    return
+  }
+  let start = 0
+  for (let i = 1; i < part.length; i++) {
+    const prev = part[i - 1]
+    if ((prev === '-' || prev === '_') && isLetter(part[i])) {
+      pushModelPiece(parts, part.slice(start, i))
+      start = i
+    }
+  }
+  pushModelPiece(parts, part.slice(start))
+}
+
+function pushModelPiece(parts: string[], piece: string) {
+  const count = Math.ceil(piece.length / MODEL_PART_WHOLE_MAX)
+  const size = Math.ceil(piece.length / count)
+  for (let i = 0; i < piece.length; i += size) parts.push(piece.slice(i, i + size))
+}
diff --git a/frontend/src/views/admin/AccountsView.vue b/frontend/src/views/admin/AccountsView.vue
index 608bbbe43fac..47643a172c23 100644
--- a/frontend/src/views/admin/AccountsView.vue
+++ b/frontend/src/views/admin/AccountsView.vue
@@ -315,17 +315,17 @@
                     :title="String(value)"
                     @click.stop
                   >
-                    {{ value }}
+                    <template v-for="(part, i) in nameParts(value)" :key="i"><wbr v-if="i" />{{ part }}</template>
                   </a>
                 </template>
               </HelpTooltip>
-              <span v-else :title="String(value)" class="block max-w-full truncate font-medium text-gray-900 dark:text-white">{{ value }}</span>
+              <span v-else :title="String(value)" class="block max-w-full truncate font-medium text-gray-900 dark:text-white"><template v-for="(part, i) in nameParts(value)" :key="i"><wbr v-if="i" />{{ part }}</template></span>
               <span
                 v-if="accountDisplayEmail(row)"
                 class="max-w-full truncate text-xs text-gray-500 dark:text-gray-400"
                 :title="accountDisplayEmail(row) + (row.parent_chatgpt_account_id ? ' · ' + row.parent_chatgpt_account_id : '')"
               >
-                {{ accountDisplayEmail(row) }}
+                <template v-for="(part, i) in nameParts(accountDisplayEmail(row))" :key="i"><wbr v-if="i" />{{ part }}</template>
               </span>
             </div>
           </template>
@@ -716,12 +716,14 @@ import TotpStepUpDialog from '@/components/auth/TotpStepUpDialog.vue'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
+import { stackColumns, type ColumnStackSpec } from '@/components/common/columnStack'
 import HelpTooltip from '@/components/common/HelpTooltip.vue'
 import Pagination from '@/components/common/Pagination.vue'
 import ConfirmDialog from '@/components/common/ConfirmDialog.vue'
 import BaseDialog from '@/components/common/BaseDialog.vue'
 import Toggle from '@/components/common/Toggle.vue'
 import { CreateAccountModal, EditAccountModal, BulkEditAccountModal, SyncFromCrsModal, TempUnschedStatusModal } from '@/components/account'
+import { nameWrapParts } from '@/utils/softWrap'
 import AccountTableActions from '@/components/admin/account/AccountTableActions.vue'
 import AccountBulkActionsBar from '@/components/admin/account/AccountBulkActionsBar.vue'
 // Console theme (ui-el D6): a two-row toolbar with the classification menu and a bulk menu in it; the bulk bar
@@ -2138,6 +2140,11 @@ function accountDisplayEmail(row: any): string {
   return row.extra?.email_address || row.extra?.email || row.credentials?.email || row.parent_email || ''
 }
 
+// Console theme: a name or e-mail in parts with a <wbr> between them (breaks at a word, never inside one); without the
+// theme it is one text, as upstream draws it.
+const nameParts = (value: unknown): string[] =>
+  flatThemeActive.value ? nameWrapParts(value) : [value == null ? '' : String(value)]
+
 const accountRouteSummary = (account: Account) => {
   const groups = accountGroupsForRow(account).map(group => group.name).filter(Boolean)
   const proxy = account.proxy?.name || t('admin.accounts.directConnection')
@@ -2194,10 +2201,36 @@ const toggleableColumns = computed(() =>
   allColumns.value.filter(col => col.key !== 'select' && col.key !== 'name' && col.key !== 'actions')
 )
 
+// The table's columns (console theme: related columns are lines of one cell, so a row reads without sideways
+// scrolling; DataTable draws them as columns of their own without the theme). The five default-hidden columns join
+// the cell nearest in meaning. Hiding a column in the settings removes its line; a hidden host keeps its parts' lines.
+const accountColumnStacks = computed<Record<string, ColumnStackSpec>>(() => ({
+  name: { parts: ['id', { key: 'notes', cellLabel: true }] },
+  platform_type: { parts: ['capacity'] },
+  status: { parts: ['schedulable'] },
+  taxonomy_route: { parts: [{ key: 'groups', cellLabel: true }, { key: 'proxy', cellLabel: true }] },
+  usage: { parts: [{ key: 'today_stats', cellLabel: true }] },
+  priority: {
+    cellLabel: true,
+    parts: [
+      { key: 'scheduler_score', cellLabel: true },
+      { key: 'rate_multiplier', cellLabel: true },
+      { key: 'upstream_billing_rate', cellLabel: true }
+    ]
+  },
+  last_used_at: {
+    cellLabel: t('admin.accounts.columns.lastUsedShort'),
+    parts: [
+      { key: 'created_at', cellLabel: t('admin.accounts.columns.createdAtShort') },
+      { key: 'expires_at', cellLabel: t('admin.accounts.columns.expiresAtShort') }
+    ]
+  }
+}))
+
 // Filtered columns based on visibility
 const cols = computed(() =>
-  allColumns.value.filter(col =>
-    col.key === 'select' || col.key === 'name' || col.key === 'actions' || !hiddenColumns.has(col.key)
+  stackColumns(allColumns.value, accountColumnStacks.value, key =>
+    key === 'select' || key === 'name' || key === 'actions' || !hiddenColumns.has(key)
   )
 )
 
diff --git a/frontend/src/views/admin/ProxiesView.vue b/frontend/src/views/admin/ProxiesView.vue
index b3ba5d409d40..58cc845b30af 100644
--- a/frontend/src/views/admin/ProxiesView.vue
+++ b/frontend/src/views/admin/ProxiesView.vue
@@ -993,6 +993,7 @@ import { useAppStore } from '@/stores/app'
 import { adminAPI } from '@/api/admin'
 import type { Proxy, ProxyAccountSummary, ProxyProtocol, ProxyQualityCheckResult } from '@/types'
 import type { Column } from '@/components/common/types'
+import { stackColumns, type ColumnStackSpec } from '@/components/common/columnStack'
 import AppLayout from '@/components/layout/AppLayout.vue'
 import TablePageLayout from '@/components/layout/TablePageLayout.vue'
 import DataTable from '@/components/common/DataTable.vue'
@@ -1016,7 +1017,14 @@ const { t } = useI18n()
 const appStore = useAppStore()
 const { copyToClipboard } = useClipboard()
 
-const columns = computed<Column[]>(() => [
+// Below 1400px (console theme) the account count sits beside the location and the created time under the expiry, so
+// the table fits at 1280 without sideways scrolling; from 1400px up (and without the theme) they are columns.
+const PROXY_COLUMN_STACKS: Record<string, ColumnStackSpec> = {
+  location: { below: 1400, layout: 'inline', parts: ['account_count'] },
+  expiry: { below: 1400, parts: [{ key: 'created_at', cellLabel: true }] }
+}
+
+const columns = computed<Column[]>(() => stackColumns([
   { key: 'select', label: '', sortable: false },
   { key: 'name', label: t('admin.proxies.columns.name'), sortable: true },
   { key: 'protocol', label: t('admin.proxies.columns.protocol'), sortable: true },
@@ -1029,7 +1037,7 @@ const columns = computed<Column[]>(() => [
   { key: 'created_at', label: t('admin.proxies.columns.createdAt'), sortable: true },
   { key: 'status', label: t('admin.proxies.columns.status'), sortable: true },
   { key: 'actions', label: t('admin.proxies.columns.actions'), sortable: false }
-])
+], PROXY_COLUMN_STACKS))
 
 // Filter options
 const protocolOptions = computed(() => [
diff --git a/frontend/src/views/admin/UsageView.vue b/frontend/src/views/admin/UsageView.vue
index ba3ac6e9f9a0..8cd76bb0ab74 100644
--- a/frontend/src/views/admin/UsageView.vue
+++ b/frontend/src/views/admin/UsageView.vue
@@ -195,6 +195,7 @@ import { resolveUsageRequestType, requestTypeToLegacyStream } from '@/utils/usag
 import AppLayout from '@/components/layout/AppLayout.vue'; import Pagination from '@/components/common/Pagination.vue'; import Select from '@/components/common/Select.vue'; import DateRangePicker from '@/components/common/DateRangePicker.vue'
 import UsageStatsCards from '@/components/admin/usage/UsageStatsCards.vue'; import UsageFilters from '@/components/admin/usage/UsageFilters.vue'
 import UsageTable from '@/components/admin/usage/UsageTable.vue'; import UsageExportProgress from '@/components/admin/usage/UsageExportProgress.vue'
+import { stackColumns, type ColumnStackSpec } from '@/components/common/columnStack'
 import UserTokenRanking from '@/components/admin/usage/UserTokenRanking.vue'
 import UsageCleanupDialog from '@/components/admin/usage/UsageCleanupDialog.vue'
 import UserBalanceHistoryModal from '@/components/admin/user/UserBalanceHistoryModal.vue'
@@ -663,9 +664,18 @@ const toggleableColumns = computed(() =>
   allColumns.value.filter(col => !ALWAYS_VISIBLE.includes(col.key))
 )
 
+// Below 1800px (console theme) related columns share a cell, so a record reads without sideways scrolling: the key and
+// account under the user, reasoning effort and endpoint under the model, the request type and billing mode beside the
+// group on one chip line. From 1800px up (and without the theme) DataTable draws them as columns of their own.
+const USAGE_COLUMN_STACKS: Record<string, ColumnStackSpec> = {
+  user: { below: 1800, parts: [{ key: 'api_key', cellLabel: true }, { key: 'account', cellLabel: true }] },
+  model: { below: 1800, parts: [{ key: 'reasoning_effort', cellLabel: true }, 'endpoint'] },
+  group: { below: 1800, layout: 'inline', parts: ['stream', 'billing_mode'] }
+}
+
 const visibleColumns = computed(() =>
-  allColumns.value.filter(col =>
-    ALWAYS_VISIBLE.includes(col.key) || !hiddenColumns.has(col.key)
+  stackColumns(allColumns.value, USAGE_COLUMN_STACKS, key =>
+    ALWAYS_VISIBLE.includes(key) || !hiddenColumns.has(key)
   )
 )
 
diff --git a/frontend/src/views/admin/__tests__/AccountsView.bulkEdit.spec.ts b/frontend/src/views/admin/__tests__/AccountsView.bulkEdit.spec.ts
index e790db694b3c..40f74740c05c 100644
--- a/frontend/src/views/admin/__tests__/AccountsView.bulkEdit.spec.ts
+++ b/frontend/src/views/admin/__tests__/AccountsView.bulkEdit.spec.ts
@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
 
 import AccountsView from '../AccountsView.vue'
+import { flattenStackedColumns } from '@/components/common/columnStack'
 
 vi.mock('@/stores/accountJobs', () => ({
   useAccountJobsStore: () => ({ track: vi.fn(), reviewDuplicates: vi.fn() })
@@ -85,11 +86,13 @@ vi.mock('vue-i18n', async () => {
   }
 })
 
+// the view passes stacked columns (a host carries its parts); read them as the flat upstream list DataTable draws
 const DataTableStub = {
   props: ['columns', 'data'],
+  methods: { flat: flattenStackedColumns },
   template: `
     <div data-test="data-table">
-      <span v-for="column in columns" :key="column.key" data-test="column-key">{{ column.key }}</span>
+      <span v-for="column in flat(columns)" :key="column.key" data-test="column-key">{{ column.key }}</span>
       <div v-for="row in data" :key="row.id">
         <div data-test="select-row"><slot name="cell-select" :row="row" /></div>
         <slot name="cell-created_at" :value="row.created_at" :row="row" />
diff --git a/frontend/src/views/admin/__tests__/AccountsView.console.spec.ts b/frontend/src/views/admin/__tests__/AccountsView.console.spec.ts
index 44f4196fc078..001854418a4b 100644
--- a/frontend/src/views/admin/__tests__/AccountsView.console.spec.ts
+++ b/frontend/src/views/admin/__tests__/AccountsView.console.spec.ts
@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
 import { createMemoryHistory, createRouter } from 'vue-router'
 import AccountsView from '../AccountsView.vue'
+import { flattenStackedColumns } from '@/components/common/columnStack'
 import modelDisplayContract from '../../../../../backend/internal/service/testdata/account_available_models_contract.json'
 
 const {
@@ -127,16 +128,19 @@ const ViewModeStub = {
   `
 }
 
+// the view passes stacked columns (a host carries its parts): data-columns is the flat upstream list DataTable draws
+// as columns, data-hosts the stacked cells of the console theme
 const DataTableStub = {
   props: ['data', 'columns'],
   emits: ['row-click'],
   methods: {
     columnClass(key: string) {
       return this.columns.find((column: { key: string }) => column.key === key)?.class || ''
-    }
+    },
+    flat: flattenStackedColumns
   },
   template: `
-    <div data-test="view-table" :data-columns="columns.map(column => column.key).join(',')" :data-name-class="columnClass('name')">
+    <div data-test="view-table" :data-columns="flat(columns).map(column => column.key).join(',')" :data-hosts="columns.map(column => column.key).join(',')" :data-name-class="columnClass('name')">
       <div v-for="row in data" :key="row.id">
         <button data-test="open-row" @click="$emit('row-click', row)">{{ row.name }}</button>
         <slot name="cell-select" :row="row" />
@@ -321,6 +325,11 @@ describe('admin AccountsView Cockpit console', () => {
       'select,name,id,platform_type,capacity,status,schedulable,taxonomy_route,groups,usage,priority,' +
         'upstream_billing_rate,last_used_at,created_at,expires_at,actions'
     )
+    // console theme: related columns are lines of one cell (名称 + 账号ID, 平台/类型 + 容量, 状态 + 调度, 管理分类/请求路由 +
+    // 路由分组, 优先级 + 上游声明倍率, 最近使用 + 创建时间 + 过期时间)
+    expect(wrapper.get('[data-test="view-table"]').attributes('data-hosts')).toBe(
+      'select,name,platform_type,status,taxonomy_route,usage,priority,last_used_at,actions'
+    )
   })
 
   it('shows every tag of an account in the classification cell', async () => {
diff --git a/frontend/src/views/admin/__tests__/AccountsView.priorityColumn.spec.ts b/frontend/src/views/admin/__tests__/AccountsView.priorityColumn.spec.ts
index 92563840ef02..ab07e88afed0 100644
--- a/frontend/src/views/admin/__tests__/AccountsView.priorityColumn.spec.ts
+++ b/frontend/src/views/admin/__tests__/AccountsView.priorityColumn.spec.ts
@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
 
 import AccountsView from '../AccountsView.vue'
+import type { Column } from '@/components/common/types'
 
 const { listAccounts } = vi.hoisted(() => ({
   listAccounts: vi.fn()
@@ -154,7 +155,13 @@ describe('admin AccountsView priority column preferences', () => {
     const wrapper = mountView()
     await flushPromises()
 
-    expect(wrapper.find('[data-column="priority"]').exists()).toBe(false)
+    // Stacked cells: the priority column also carries the scheduler-score, account-rate and declared-rate lines, so
+    // hiding priority removes only its own line (and its sort); the column stays while those parts are visible.
+    const columns = wrapper.getComponent(DataTableStub).props('columns') as Column[]
+    const priority = columns.find(column => column.key === 'priority')
+    expect(priority).toMatchObject({ hostHidden: true, sortable: false })
+    expect(priority?.stack?.map(part => part.key)).toEqual(['scheduler_score', 'rate_multiplier', 'upstream_billing_rate'])
+    expect(wrapper.get('[data-column="priority"]').text()).toBe('fixed')
     expect(JSON.parse(localStorage.getItem('account-hidden-columns') || '[]')).toEqual([
       'priority',
       'today_stats'
diff --git a/frontend/src/views/admin/__tests__/AccountsView.usageWindowsHint.spec.ts b/frontend/src/views/admin/__tests__/AccountsView.usageWindowsHint.spec.ts
index 603dab1a8169..8a87b813aaa7 100644
--- a/frontend/src/views/admin/__tests__/AccountsView.usageWindowsHint.spec.ts
+++ b/frontend/src/views/admin/__tests__/AccountsView.usageWindowsHint.spec.ts
@@ -3,6 +3,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { flushPromises, mount } from '@vue/test-utils'
 
 import AccountsView from '../AccountsView.vue'
+import type { Column } from '@/components/common/types'
 
 vi.mock('@/stores/accountJobs', () => ({
   useAccountJobsStore: () => ({ track: vi.fn(), reviewDuplicates: vi.fn() })
@@ -70,12 +71,13 @@ vi.mock('vue-i18n', async () => {
   }
 })
 
-// Render the per-column header slots so we can assert the usage-window header hint.
+// Render the per-column header slots so we can assert the usage-window header hint (a stacked column's parts have
+// header slots of their own, as in DataTable).
 const DataTableStub = {
   props: ['columns', 'data'],
   template: `
     <div data-test="data-table">
-      <template v-for="column in columns" :key="column.key">
+      <template v-for="column in columns.flatMap((c) => [c, ...(c.stack || [])])" :key="column.key">
         <div v-if="column.key === 'usage'" data-test="usage-header">
           <slot :name="'header-' + column.key" :column="column" />
         </div>
@@ -209,8 +211,10 @@ describe('admin AccountsView usage windows hint', () => {
     expect(wrapper.findAll('[data-test="usage-windows-hint"]').some(node =>
       node.text() === 'admin.accounts.upstreamBilling.trustWarning'
     )).toBe(true)
-    const columns = wrapper.getComponent(DataTableStub).props('columns') as Array<{ key: string; sortable: boolean }>
-    expect(columns.find(column => column.key === 'upstream_billing_rate')?.sortable).toBe(true)
+    // the declared rate is a sortable line of the priority column (stacked cells)
+    const columns = wrapper.getComponent(DataTableStub).props('columns') as Column[]
+    const priority = columns.find(column => column.key === 'priority')
+    expect(priority?.stack?.find(part => part.key === 'upstream_billing_rate')?.sortable).toBe(true)
   })
 
   it('shows account multipliers with enough precision to match declared rates', async () => {
diff --git a/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue b/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
index 0c26b3473415..625321eb2ba1 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
@@ -46,10 +46,10 @@
 
         <template #cell-model="{ row }">
           <div v-if="hasModelMapping(row)" class="space-y-0.5 text-xs">
-            <div class="break-all font-medium text-gray-900 dark:text-white">{{ row.requested_model }}</div>
-            <div class="break-all text-gray-500 dark:text-gray-400"><span class="mr-0.5">↳</span>{{ row.upstream_model }}</div>
+            <div class="break-all font-medium text-gray-900 dark:text-white"><template v-for="(part, j) in modelParts(row.requested_model)" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template></div>
+            <div class="break-all text-gray-500 dark:text-gray-400"><span class="mr-0.5">↳</span><template v-for="(part, j) in modelParts(row.upstream_model)" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template></div>
           </div>
-          <span v-else-if="displayModel(row)" class="text-sm font-medium text-gray-900 dark:text-white">{{ displayModel(row) }}</span>
+          <span v-else-if="displayModel(row)" class="text-sm font-medium text-gray-900 dark:text-white"><template v-for="(part, j) in modelParts(displayModel(row))" :key="j"><wbr v-if="j" /><span data-ui="model-part">{{ part }}</span></template></span>
           <span v-else class="text-sm text-gray-400 dark:text-gray-500">-</span>
         </template>
 
@@ -189,10 +189,19 @@ import IpGeoCell from '@/components/common/IpGeoCell.vue'
 import IpGeoBatchToolbar from '@/components/common/IpGeoBatchToolbar.vue'
 import type { OpsErrorLog } from '@/api/admin/ops'
 import type { Column } from '@/components/common/types'
+import { stackColumns, type ColumnStackSpec } from '@/components/common/columnStack'
 import { getSeverityClass, formatDateTime } from '../utils/opsFormatters'
 import { mapErrorCategory } from '@/utils/errorCategory'
+import { modelWrapParts } from '@/utils/softWrap'
+import { flatThemeActive } from '@/utils/flatTheme'
 import { mapErrorSortKey, statusCodeBadgeClass } from '@/utils/errorBadges'
 
+// Console theme: a model id breaks only between the parts of modelWrapParts (after a slash; an outlier part also after
+// its hyphens), each part drawn whole (tables.css, data-ui="model-part"); without the theme it is one plain part, as
+// upstream draws it.
+const modelParts = (value: unknown): string[] =>
+  flatThemeActive.value ? modelWrapParts(value) : [value == null ? '' : String(value)]
+
 const { t } = useI18n()
 
 // 列序对齐管理端用量明细:身份(用户→Key→账号)→ 请求形态(平台→模型→端点→分组→类型)
@@ -215,18 +224,31 @@ const allColumns = computed<Column[]>(() => [
   { key: 'actions', label: t('admin.ops.errorLog.action') },
 ])
 
+// Below 1800px (console theme) related columns share a cell, so an error reads without sideways scrolling: the key and
+// account under the user, model and endpoint under the platform, the type and category beside the group on one chip
+// line. From 1800px up (and without the theme) DataTable draws them as columns of their own. The 运维监控 dialog
+// (summaryFirst) is at most 1240px wide at any viewport, narrower than the page's table where it still stacks, so it
+// stacks at every width.
+const errorColumnStacks = computed<Record<string, ColumnStackSpec>>(() => {
+  const below = props.summaryFirst ? undefined : 1800
+  return {
+    user: { below, parts: [{ key: 'api_key', cellLabel: true }, { key: 'account', cellLabel: true }] },
+    platform: { below, parts: ['model', 'endpoint'] },
+    group: { below, layout: 'inline', parts: ['type', 'category'] },
+  }
+})
+
 // 传入 visibleColumnKeys 时按其过滤(列设置);未传则全量(Ops 弹窗等使用方)
 const columns = computed<Column[]>(() => {
-  const visibleColumns = props.visibleColumnKeys
-    ? allColumns.value.filter((c) => props.visibleColumnKeys!.includes(c.key))
+  const ordered = props.summaryFirst
+    ? [
+        ...allColumns.value.filter((c) => c.key === 'created_at'),
+        ...allColumns.value.filter((c) => c.key === 'message'),
+        ...allColumns.value.filter((c) => c.key !== 'created_at' && c.key !== 'message'),
+      ]
     : allColumns.value
-  if (!props.summaryFirst) return visibleColumns
-
-  return [
-    ...visibleColumns.filter((c) => c.key === 'created_at'),
-    ...visibleColumns.filter((c) => c.key === 'message'),
-    ...visibleColumns.filter((c) => c.key !== 'created_at' && c.key !== 'message'),
-  ]
+  const visibleKeys = props.visibleColumnKeys
+  return stackColumns(ordered, errorColumnStacks.value, (key) => !visibleKeys || visibleKeys.includes(key))
 })
 
 function isUpstreamRow(log: OpsErrorLog): boolean {
diff --git a/frontend/src/views/user/UsageView.vue b/frontend/src/views/user/UsageView.vue
index 8329806f9059..e9482f9fc05d 100644
--- a/frontend/src/views/user/UsageView.vue
+++ b/frontend/src/views/user/UsageView.vue
@@ -253,6 +253,7 @@ import type {
   UserErrorRequest,
 } from '@/types'
 import type { Column } from '@/components/common/types'
+import { stackColumns, type ColumnStackSpec } from '@/components/common/columnStack'
 import { COMMON_ERROR_STATUS_CODES } from '@/utils/errorBadges'
 
 const { t } = useI18n()
@@ -732,8 +733,15 @@ const allColumns = computed<Column[]>(() => [
 
 const hiddenColumns = reactive<Set<string>>(new Set())
 const toggleableColumns = computed(() => allColumns.value.filter((col) => !ALWAYS_VISIBLE.includes(col.key)))
+// Below 1400px (console theme) related columns share a cell: reasoning effort and endpoint under the model, the request
+// type and billing mode beside the group on one chip line. From 1400px up (and without the theme) DataTable draws them
+// as columns of their own.
+const USAGE_COLUMN_STACKS: Record<string, ColumnStackSpec> = {
+  model: { below: 1400, parts: [{ key: 'reasoning_effort', cellLabel: true }, 'endpoint'] },
+  group: { below: 1400, layout: 'inline', parts: ['stream', 'billing_mode'] },
+}
 const visibleColumns = computed(() =>
-  allColumns.value.filter((col) => ALWAYS_VISIBLE.includes(col.key) || !hiddenColumns.has(col.key))
+  stackColumns(allColumns.value, USAGE_COLUMN_STACKS, (key) => ALWAYS_VISIBLE.includes(key) || !hiddenColumns.has(key))
 )
 const isColumnVisible = (key: string) => !hiddenColumns.has(key)
 const toggleColumn = (key: string) => {

From 54c703c4c12f3ced0c35d38d74846a468a2cdc24 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Thu, 1 Oct 2026 02:01:30 +0800
Subject: [PATCH 2/5] style(ui): palette C for the console theme

Implements the owner-approved palette C (preview of 2026-09-30) in the
console theme styles; templates and scripts are unchanged and every rule
stays under html.flat-theme, so theme off still renders upstream.

- tokens: zinc neutrals in light, layered graphite in dark (canvas
  #1a1a1d, surface #212125), zinc text greys and dark-* family, dark
  identity and accent soft fills recomputed for the new surface, chart
  series 1 blue; fill roles (--ui-solid*, --ui-on-solid, --ui-track,
  --ui-thumb*, --ui-choice-edge) replace the ink fills and the unused
  --ui-on-ink override is dropped
- the rules that painted rgb(var(--ui-ink)) fills read the roles: a
  primary action is solid green, a segmented control is a grey track with
  a raised pill, chosen options and the current page take the accent tint
  and edge, marks take the accent
- style.css recipes: .btn-primary, .tabs / .tab-active, .switch-active;
  calmer weights (buttons, tabs, filter pills, field labels 500, table
  headers 400, KPI values 500)
- usage records: model and billed cost in ink, token figures and names in
  the soft ink, token glyphs in their upstream hues
- dark tables: text-white reads the ink instead of pure white
- selected rows: in dark, secondary text takes the soft ink and danger
  text red-300 (4.70 and 4.88:1 on the hovered selected fill; the muted
  grey and #f69898 fell to 4.31 and 4.35), stacked cell-line labels
  included; in light the hovered selected fill mixes 3 % ink instead of
  4 %, so red, amber and green text keep 4.5:1 (4.45-4.48 before)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/style.css                        |  69 ++--
 frontend/src/styles/console/controls.css      | 114 +++---
 frontend/src/styles/console/data.css          | 105 +++--
 frontend/src/styles/console/overlays.css      |  44 ++-
 .../src/styles/console/pages/accounts.css     |  69 ++--
 .../styles/console/pages/dashboard-usage.css  |  61 ++-
 .../src/styles/console/pages/ops-channels.css |  67 ++--
 .../console/pages/settings-ops-public.css     | 118 +++---
 frontend/src/styles/console/pages/user.css    |  26 +-
 .../pages/users-groups-proxies-keys.css       |  57 +--
 frontend/src/styles/console/shell.css         |  15 +-
 frontend/src/styles/console/tokens.css        | 358 ++++++++++--------
 12 files changed, 660 insertions(+), 443 deletions(-)

diff --git a/frontend/src/style.css b/frontend/src/style.css
index 7f3669863fbb..2fa3d130ce24 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -811,9 +811,10 @@
 @layer components {
   /* ---------------------------------------------------------------- buttons
    * The reference Button (REF-CONSOLE §8.3): our .btn is its `sm` size (30px,
-   * 12px inset, 13px / 600, radius 6, gap 8). No shadow, no press scale,
-   * disabled at .55. Default (.btn-secondary) and primary have no hover
-   * state (measured); ghost and destructive fade in 150ms. */
+   * 12px inset, 13px, radius 6, gap 8) at 500 (palette C: controls and values
+   * at 500). No shadow, no press scale, disabled at .55. Default
+   * (.btn-secondary) has no hover state (measured); primary deepens, ghost and
+   * destructive fade in 150ms. */
   :where(.flat-theme) .btn {
     gap: 0.5rem;
     min-height: var(--ui-control-h);
@@ -822,7 +823,7 @@
     padding: 0.265625rem 0.75rem;
     font-size: 0.8125rem;
     line-height: 1.21875rem;
-    font-weight: 600;
+    font-weight: 500;
     letter-spacing: normal;
     transition-property: color, background-color, border-color, opacity;
     transition-duration: var(--ui-duration);
@@ -842,19 +843,26 @@
     opacity: 0.55;
   }
 
-  /* primary = ink with on-ink text (near-white with ink text in dark) */
+  /* primary = the solid role (tokens.css --ui-solid: the text-safe accent with
+     white text; a deeper step on hover; the dark theme's lighter 1px edge) */
   :where(.flat-theme) .btn-primary,
   :where(.flat-theme) .btn-primary:is(.dark *),
   :where(.flat-theme) .btn-primary:hover,
   :where(.flat-theme) .btn-primary:hover:is(.dark *) {
-    --theme-on-fill: var(--ui-on-ink);
-    border-color: rgb(var(--ui-ink));
-    background-color: rgb(var(--ui-ink));
+    --theme-on-fill: var(--ui-on-solid);
+    border-color: rgb(var(--ui-solid-edge));
+    background-color: rgb(var(--ui-solid));
     background-image: none;
-    color: rgb(var(--ui-on-ink));
+    color: rgb(var(--ui-on-solid));
     box-shadow: none;
   }
 
+  :where(.flat-theme) .btn-primary:hover:not(:disabled),
+  :where(.flat-theme) .btn-primary:hover:not(:disabled):is(.dark *) {
+    border-color: rgb(var(--ui-solid-edge-hover));
+    background-color: rgb(var(--ui-solid-hover));
+  }
+
   /* default = surface, the control outline, ink text */
   :where(.flat-theme) .btn-secondary,
   :where(.flat-theme) .btn-secondary:is(.dark *),
@@ -1063,13 +1071,14 @@
   }
 
   /* the field label is the reference's mono label (the sign-in field label:
-     Geist Mono 10/15, 600, 0.12em, uppercase; 11/16 in the Chinese interface) */
+     Geist Mono 10/15, 0.12em, uppercase; 11/16 in the Chinese interface) at
+     500 (palette C: labels calm down; 11px CJK stays readable at 500) */
   :where(.flat-theme) .input-label {
     margin-bottom: 0.5rem;
     font-family: var(--ui-font-mono);
     font-size: var(--ui-label-size);
     line-height: var(--ui-label-leading);
-    font-weight: 600;
+    font-weight: 500;
     letter-spacing: var(--ui-label-tracking);
     text-transform: uppercase;
     color: rgb(var(--ui-label));
@@ -1098,21 +1107,23 @@
   }
 
   /* ---------------------------------------------------------------- tabs
-   * .tabs / .tab are the reference's segmented control (SlidingTabs, §8.5):
-   * a 1px structural frame on the surface, radius 8, 2px inset; segments
-   * 14px / 6px, 12.5px / 600, muted, ink on hover; the current one is ink
-   * with on-ink text, fading in 200ms (upstream has no thumb to slide). */
+   * .tabs / .tab are the reference's segmented control (SlidingTabs, §8.5)
+   * in palette C: a grey track (its 1px frame the track colour), radius 8,
+   * 2px inset; segments 14px / 6px, 12.5px / 500, muted, ink on hover; the
+   * current one is the raised pill (--ui-thumb, a soft shadow and a 1px
+   * inset ring) with its label ink at 600, fading in 200ms (upstream has no
+   * thumb to slide). */
   :where(.flat-theme) .tabs {
     gap: 0;
-    border: 1px solid rgb(var(--ui-line));
+    border: 1px solid rgb(var(--ui-track));
     border-radius: var(--ui-radius-lg);
-    background-color: rgb(var(--ui-surface));
+    background-color: rgb(var(--ui-track));
     padding: 2px;
   }
 
   :where(.flat-theme) .tabs:is(.dark *) {
-    border-color: rgb(var(--ui-line));
-    background-color: rgb(var(--ui-surface));
+    border-color: rgb(var(--ui-track));
+    background-color: rgb(var(--ui-track));
   }
 
   :where(.flat-theme) .tab {
@@ -1120,7 +1131,7 @@
     padding: 0.375rem 0.875rem;
     font-size: 0.78125rem;
     line-height: 1.171875rem;
-    font-weight: 600;
+    font-weight: 500;
     color: rgb(var(--ui-muted));
     transition-property: color, background-color;
     transition-duration: var(--ui-duration-slide);
@@ -1140,14 +1151,16 @@
   :where(.flat-theme) .tab-active:is(.dark *),
   :where(.flat-theme) .tab-active:hover,
   :where(.flat-theme) .tab-active:hover:is(.dark *) {
-    background-color: rgb(var(--ui-ink));
-    color: rgb(var(--ui-on-ink));
-    box-shadow: none;
+    background-color: rgb(var(--ui-thumb));
+    color: rgb(var(--ui-ink));
+    font-weight: 600;
+    box-shadow: var(--ui-thumb-shadow);
   }
 
   /* ---------------------------------------------------------------- switch
-   * The reference settings Toggle: 34 x 20, a 16px knob 2px in. On = ink.
-   * Off = the 3:1 form-control line (the reference's ink at 20 % is 1.6:1). */
+   * The reference settings Toggle: 34 x 20, a 16px knob 2px in. On = the
+   * accent (palette C, like the Toggle switches in controls.css). Off = the
+   * 3:1 form-control line (the reference's ink at 20 % is 1.6:1). */
   :where(.flat-theme) .switch {
     height: 1.25rem;
     width: 2.125rem;
@@ -1161,7 +1174,7 @@
 
   :where(.flat-theme) .switch-active,
   :where(.flat-theme) .switch-active:is(.dark *) {
-    background-color: rgb(var(--ui-ink));
+    background-color: rgb(var(--ui-primary));
   }
 
   :where(.flat-theme) .switch-thumb {
@@ -1183,8 +1196,8 @@
   }
 
   /* ---------------------------------------------------------------- card
-   * (for the data agent) In dark the card is the reference's surface
-   * (#1a1a1a on the #0f0f0f canvas) with its structural line (white 14 %),
+   * (for the data agent) In dark the card is the surface (palette C's
+   * #212125 on the #1a1a1d canvas) with its structural line (#3a3a41),
    * not upstream's dark-800 / dark-700 at 50 %; the light values already
    * come from the tokens. */
   :where(.flat-theme) .card:is(.dark *) {
diff --git a/frontend/src/styles/console/controls.css b/frontend/src/styles/console/controls.css
index a3c040836ea0..35ae05d3e8c2 100644
--- a/frontend/src/styles/console/controls.css
+++ b/frontend/src/styles/console/controls.css
@@ -34,8 +34,9 @@ html.flat-theme {
      surface); an ink track made a column of switches the heaviest thing on a table page */
   --ctl-switch-on: var(--ui-primary);
   --ctl-knob: var(--ui-surface);
-  /* segmented control: frame, inset, segment metrics (REF-CONSOLE §8.5) */
-  --ctl-seg-frame: var(--ui-line);
+  /* segmented control: the frame's 1px edge (palette C: the track colour, so the frame reads as one grey track),
+     inset, segment metrics (REF-CONSOLE §8.5) */
+  --ctl-seg-frame: var(--ui-track);
   --ctl-seg-inset: 2px;
   --ctl-seg-pad-y: 0.375rem;
   --ctl-seg-pad-x: 0.875rem;
@@ -172,7 +173,7 @@ html.flat-theme label.block.font-medium:is(.text-sm, .text-xs):is(.mb-1, .mb-1\.
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   line-height: var(--ui-label-leading);
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
   color: rgb(var(--ui-label));
@@ -181,9 +182,9 @@ html.flat-theme label.block.font-medium:is(.text-sm, .text-xs):is(.mb-1, .mb-1\.
 /* ================================================================== 4 · select and date-range triggers */
 
 /* 4.1 Select.vue's trigger is the reference's house-select (REF-CONSOLE §8.4): 34px, 10px in (9px before the
-   chevron), 13px / 600 ink, radius 6, the control outline; the focus line on hover and while open; an accent edge on
-   keyboard focus; the 12px chevron. The doubled class outranks the scoped rules and their dark: forms
-   (.dark .select-trigger[data-v]:hover is 0,4,0). */
+   chevron), 13px / 500 ink (palette C: values at 500), radius 6, the control outline; the focus line on hover and
+   while open; an accent edge on keyboard focus; the 12px chevron. The doubled class outranks the scoped rules and
+   their dark: forms (.dark .select-trigger[data-v]:hover is 0,4,0). */
 html.flat-theme .select-trigger.select-trigger {
   gap: 0.375rem;
   border-radius: var(--ui-radius-md);
@@ -192,7 +193,7 @@ html.flat-theme .select-trigger.select-trigger {
   padding: 0.390625rem 0.5625rem 0.390625rem 0.625rem;
   font-size: 0.8125rem;
   line-height: 1.21875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: rgb(var(--ui-ink));
   box-shadow: none;
   transition-property: color, border-color, box-shadow;
@@ -247,7 +248,7 @@ html.flat-theme .select-trigger :is(.select-icon, .select-clear) > svg {
   height: 0.75rem;
 }
 
-/* 4.2 DateRangePicker's trigger: the same field (a 14px calendar glyph, the value at 600, the 12px chevron). */
+/* 4.2 DateRangePicker's trigger: the same field (a 14px calendar glyph, the value at 500, the 12px chevron). */
 html.flat-theme .date-picker-trigger.date-picker-trigger {
   gap: 0.375rem;
   border-radius: var(--ui-radius-md);
@@ -281,7 +282,7 @@ html.flat-theme .date-picker-trigger.date-picker-trigger:focus-visible {
 }
 
 html.flat-theme .date-picker-trigger .date-picker-value {
-  font-weight: 600;
+  font-weight: 500;
 }
 
 html.flat-theme .date-picker-trigger :is(.date-picker-icon, .date-picker-chevron) {
@@ -300,8 +301,8 @@ html.flat-theme .date-picker-trigger .date-picker-chevron > svg {
 }
 
 /* 4.3 Inside the picker (the panel itself is overlays.css'): presets as quiet 30px choices, the current one on the
-   accent tint (the reference's selected filter); mono field labels; 30px date fields; the apply button is the ink
-   primary. */
+   accent tint (the reference's selected filter); mono field labels; 30px date fields; the apply button is the solid
+   primary (tokens.css --ui-solid: the accent fill, a deeper step on hover). */
 html.flat-theme .date-picker-preset.date-picker-preset {
   border-radius: var(--ui-radius-md);
   padding: 0.3125rem 0.625rem;
@@ -330,7 +331,7 @@ html.flat-theme .date-picker-label.date-picker-label {
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
   line-height: var(--ui-label-leading);
-  font-weight: 600;
+  font-weight: 500;
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
   color: rgb(var(--ui-label));
@@ -357,14 +358,19 @@ html.flat-theme .date-picker-input.date-picker-input:focus {
 html.flat-theme .date-picker-apply.date-picker-apply,
 html.flat-theme .date-picker-apply.date-picker-apply:hover {
   min-height: var(--ui-control-h);
-  border: 1px solid rgb(var(--ui-ink));
+  border: 1px solid rgb(var(--ui-solid-edge));
   border-radius: var(--ui-radius-md);
-  background-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-solid));
   padding: 0.265625rem 0.75rem;
   font-size: 0.8125rem;
   line-height: 1.21875rem;
   font-weight: 600;
-  color: rgb(var(--ui-on-ink));
+  color: rgb(var(--ui-on-solid));
+}
+
+html.flat-theme .date-picker-apply.date-picker-apply:hover:not(:disabled) {
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background-color: rgb(var(--ui-solid-hover));
 }
 
 /* 4.3b Native date and time fields (date, datetime-local, time, month, week) keep the control heights: Chromium pads
@@ -536,10 +542,12 @@ html.flat-theme input:is([type="checkbox"], [type="radio"]):focus-visible {
 
 /* 7.1 Segmented controls built from utilities (upstream's pattern: a gray-100 / gray-50 box with a 4px or 2px inset
    whose children are all buttons, the current one bg-white with a shadow) become the reference's SlidingTabs
-   (REF-CONSOLE §8.5): a 1px structural frame on the surface, radius 8, a 2px inset, no gaps; segments 14 x 6px,
-   12.5px / 600, muted, ink on hover; the current segment is ink with on-ink text (near-white with ink text in dark),
-   fading in 200ms (upstream has no thumb to slide). The platform hues of the account dialogs' segments go with it
-   (monochrome identity, D3). data-ui="seg" opts a fork component into the same look.
+   (REF-CONSOLE §8.5) in palette C: a grey track (its 1px frame the track colour), radius 8, a 2px inset, no gaps;
+   segments 14 x 6px, 12.5px / 500, muted, ink on hover; the current segment is the raised pill (tokens.css
+   --ui-thumb: the surface, a soft shadow and a 1px inset ring that marks it at >= 3:1 on the track; a lighter
+   graphite in dark), its label ink at 600, fading in 200ms (upstream has no thumb to slide). The platform hues of
+   the account dialogs' segments go with it (monochrome identity, D3). data-ui="seg" opts a fork component into the
+   same look.
    Perf pass: the utility-built boxes (a gray-100 / gray-50 box with a 4px or 2px inset whose children are all buttons,
    no data-ui of their own) are hooked [data-ui~="seg-box"] in their templates (19 boxes) instead of being found by a
    "children are all buttons" test; the repeated [data-ui] and :not(uipad) keep the original 0,4,3 of that compound
@@ -549,7 +557,7 @@ html.flat-theme [data-ui~="seg"] {
   gap: 0;
   border: 1px solid rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
   padding: var(--ctl-seg-inset);
   box-shadow: none;
 }
@@ -562,7 +570,7 @@ html.flat-theme [data-ui~="seg"] > button {
   padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
   font-size: 0.78125rem;
   line-height: 1.171875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: rgb(var(--ui-muted));
   box-shadow: none;
   transition-property: color, background-color;
@@ -577,8 +585,10 @@ html.flat-theme [data-ui~="seg"] > button:hover {
 
 html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad) > button:is(.bg-white, [aria-pressed="true"], [aria-checked="true"], [aria-selected="true"]),
 html.flat-theme [data-ui~="seg"] > button:is([aria-pressed="true"], [aria-checked="true"], [aria-selected="true"], [data-active]:not([data-active="false"])) {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not(uipad):not(uipad) > button svg,
@@ -607,8 +617,8 @@ html.flat-theme :is(div, nav)[data-ui~="seg-box"][data-ui][data-ui][data-ui]:not
 /* BEGIN S platform segments */
 /* 7.1a The account dialog's platform choice (owner decision 2 and the .11 approval "platform icons keep their brand
    colours"): an unchosen segment draws its platform glyph in the platform's identity colour (tokens.css identity
-   hues: >= 4.5:1 on the surface, so >= 3:1 as a glyph, both themes); the chosen segment stays the ink thumb with an
-   on-ink glyph (7.1). The ten segments are known by their place (CreateAccountModal's two rows, the first one marked
+   hues: >= 4.5:1 on the surface, so >= 3:1 as a glyph, both themes); the chosen segment is the pill with an ink
+   glyph (7.1). The ten segments are known by their place (CreateAccountModal's two rows, the first one marked
    data-tour="account-form-platform"); labels stay muted. (wave 2, reported by the accounts agent) */
 html.flat-theme [data-tour="account-form-platform"] > button:nth-child(1) { --ctl-seg-glyph: var(--ui-id-orange); }
 html.flat-theme [data-tour="account-form-platform"] > button:nth-child(2) { --ctl-seg-glyph: var(--ui-id-green); }
@@ -649,7 +659,7 @@ html.flat-theme .settings-tabs.settings-tabs {
   gap: 0;
   border: 1px solid rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
   padding: var(--ctl-seg-inset);
 }
 
@@ -665,7 +675,7 @@ html.flat-theme .settings-tab.settings-tab {
   padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
   font-size: 0.78125rem;
   line-height: 1.171875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: rgb(var(--ui-muted));
   box-shadow: none;
   transition-property: color, background-color;
@@ -683,8 +693,10 @@ html.flat-theme .settings-tab.settings-tab:hover {
 }
 
 html.flat-theme .settings-tab.settings-tab.settings-tab-active {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 html.flat-theme .settings-tab .settings-tab-icon.settings-tab-icon {
@@ -710,16 +722,22 @@ html.flat-theme .settings-tab .settings-tab-label.settings-tab-label {
   line-height: inherit;
 }
 
+/* the .tabs recipe's current tab (style.css, 0,1,0) keeps its pill under a click's focus: its ring is the boundary
+   that marks it, and section 1 clears a focused tab's shadow (0,3,2) */
+html.flat-theme .tab.tab-active:is(:focus, :focus-visible) {
+  box-shadow: var(--ui-thumb-shadow);
+}
+
 /* 7.3 Underline tabs (使用记录's detail tabs, the channel dialog's tabs) take the reference's CodeTabs underline
    (REF-CONSOLE §8.15): a 2px accent rule under the current tab, its text ink; the others muted, ink on hover, no
-   rule; 8 x 10px like its tabs, 12.5px / 600, 14px glyphs. Platform hues on the channel tabs go (monochrome
+   rule; 8 x 10px like its tabs, 12.5px / 500, 14px glyphs. Platform hues on the channel tabs go (monochrome
    identity, D3). */
 html.flat-theme :is([data-testid="usage-detail-tab"], .channel-tab.channel-tab) {
   gap: 0.375rem;
   padding: 0.5rem 0.625rem;
   font-size: 0.78125rem;
   line-height: 1.171875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: rgb(var(--ui-muted));
   transition-property: color, border-color;
   transition-duration: var(--ui-duration);
@@ -754,8 +772,8 @@ html.flat-theme :is([data-testid="usage-detail-tab"], .channel-tab.channel-tab)
 /* 8.1 Option cards (the account dialogs' type / method choices: a rounded-lg border-2 p-3 text-left button led by an
    h-8 w-8 glyph tile) take the reference's dialog option card (REF-CONSOLE §8.11): radius 8, the structural line, the
    grouped fill at 60 %, the control outline on hover; a 28px tile with a 1px line and ink at 3 %. The chosen card is
-   drawn like the segmented thumb: an ink edge 2px wide on the surface, its tile ink with on-ink glyph (upstream's
-   per-platform hues go: monochrome identity, D3).
+   marked by the accent (palette C): an accent edge 2px wide on the surface, its tile the accent with an on-accent
+   glyph (upstream's per-platform hues go: monochrome identity, D3).
    Perf pass: the cards are hooked (data-ui="option-card", CreateAccountModal.vue and EditAccountModal.vue: the 23
    buttons of that shape), so no has-test on a bare button decides whether a card is a card. The repeated [data-ui]
    and :not(uipad) keep each rule's original specificity (0,8,3 / 0,10,3 / 0,9,3 / 0,9,4 / 0,10,4 / 0,9,5 / 0,10,5 /
@@ -777,9 +795,9 @@ html.flat-theme button[data-ui~="option-card"].border-gray-200[data-ui][data-ui]
 }
 
 html.flat-theme button[data-ui~="option-card"]:not(.border-gray-200)[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) {
-  border-color: rgb(var(--ui-ink));
+  border-color: rgb(var(--ui-primary));
   background-color: rgb(var(--ui-surface));
-  box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-primary));
 }
 
 html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) > div:first-child {
@@ -792,9 +810,9 @@ html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-u
 }
 
 html.flat-theme button[data-ui~="option-card"]:not(.border-gray-200)[data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) > div:first-child {
-  border-color: rgb(var(--ui-ink));
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border-color: rgb(var(--ui-primary));
+  background-color: rgb(var(--ui-primary));
+  color: rgb(var(--ui-on-primary));
 }
 
 html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:not(uipad) > div:first-child svg {
@@ -816,7 +834,7 @@ html.flat-theme button[data-ui~="option-card"][data-ui][data-ui][data-ui][data-u
 }
 
 /* 8.2 Filter pills (data-ui="filter-pill"; the reference's FilterMenu trigger, REF-CONSOLE §8.6): 30px, 10px in, gap 6,
-   radius 6, the control outline on the surface, 12.5px / 600 ink-soft, ink on hover, a 12px chevron. With a
+   radius 6, the control outline on the surface, 12.5px / 500 ink-soft, ink on hover, a 12px chevron. With a
    data-ui="filter-count" badge inside it is active: the accent at 40 % as its edge, the accent tint, accent text and a
    Geist Mono 10.5px count. (Perf pass, kept has-test: the badge is rendered only while a filter value is selected,
    so the pill's own look depends on runtime content; the test sits in the subject compound of the hooked pill with a
@@ -833,7 +851,7 @@ html.flat-theme [data-ui~="filter-pill"] {
   padding: 0 0.625rem;
   font-size: 0.78125rem;
   line-height: 1.171875rem;
-  font-weight: 600;
+  font-weight: 500;
   color: rgb(var(--ui-ink-soft));
   box-shadow: none;
   transition-property: color, background-color, border-color;
@@ -885,17 +903,17 @@ html.flat-theme :is(a, button)[class*="underline"] {
 /* ================================================================== 10 · utility-built buttons (wave 2) */
 
 /* 10.1 A solid accent button built from utilities (bg-primary-500 / -600 / -700 with white text: the chosen segment
-   of a hand-made choice, a save / add / apply button) is the reference's primary: ink with on-ink text (near-white
-   with ink text in dark), like .btn-primary and the segmented thumb (REF §8.3, §8.5). Switches (no white text),
-   checkbox squares and check badges (spans), steppers (divs) and the .btn recipe are not buttons of this kind; the
-   public pages keep their own rules. Kept at 0,3,1 (the page files refine; the account forms' 9.6 agrees).
+   of a hand-made choice, a save / add / apply button) is the solid primary like .btn-primary (tokens.css --ui-solid:
+   the text-safe accent with white text; the dark theme's lighter edge). Switches (no white text), checkbox squares
+   and check badges (spans), steppers (divs) and the .btn recipe are not buttons of this kind; the public pages keep
+   their own rules. Kept at 0,3,1 (the page files refine; the account forms' 9.6 agrees).
    (wave 2, reported by the accounts agent) */
 html.flat-theme :where(:is(button, a):is(.bg-primary-500, .bg-primary-600, .bg-primary-700).text-white:not(.btn):not(:is([data-ui="home"], [data-ui="key-usage"], [data-ui="legal"], [data-ui="not-found"], [data-ui="auth-layout"], [data-testid="compact-home"], #overlay-root > div.z-\[140\]) *))[class][class] {
-  --theme-on-fill: var(--ui-on-ink);
-  border-color: rgb(var(--ui-ink));
-  background-color: rgb(var(--ui-ink));
+  --theme-on-fill: var(--ui-on-solid);
+  border-color: rgb(var(--ui-solid-edge));
+  background-color: rgb(var(--ui-solid));
   background-image: none;
-  color: rgb(var(--ui-on-ink));
+  color: rgb(var(--ui-on-solid));
   box-shadow: none;
 }
 
diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index 9cb71a7b1d71..406f9a411110 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -72,6 +72,10 @@ html.flat-theme {
   --ui-dot-warn: 217 119 6;
   --ui-dot-bad: 220 60 60;
   --ui-dot-idle: 163 163 163;
+  /* A selected row under the pointer (section 1): its accent tint darkened by 3 % of the ink, so status text in the
+     row keeps 4.5:1 there (red #c83737 4.53, amber #b05109 4.57, success #1b7d3e 4.54; the 4 % step left them at
+     4.45-4.48). */
+  --ui-row-pick-hover: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 3%);
   /* the bulk bar floats only where its owner places it over content */
   --ui-bulk-bar-shadow: none;
   /* Table header labels (wave 2, the management agent's decision): the muted grey instead of the label grey, so a
@@ -113,9 +117,11 @@ html.flat-theme:lang(zh) {
 
 html.flat-theme.dark {
   --ui-table-head: var(--ui-label);
-  /* danger text on the dark selected fill: the danger red 70 % toward ink (#f69898), 5.24:1 on the selected fill and
-     4.70 on its hover (#f87171 is 4.03 / 3.62; the 75 % mix, 4.98, falls to 4.47 on the hover) */
-  --ui-selected-danger: 246 152 152;
+  /* danger text on the dark selected fill (#39433f, hover #404946): Tailwind red-300 #fca5a5, 5.40:1 on the
+     selected fill and 4.88 on its hover (#f87171 is 3.71 / 3.35; the pre-C #f69898 falls to 4.35 on the hover) */
+  --ui-selected-danger: 252 165 165;
+  /* the dark selected row under the pointer lightens by 4 % of the ink (#404946) */
+  --ui-row-pick-hover: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
   --ui-badge-success: var(--ui-success);
   --ui-badge-danger: var(--ui-danger);
   --ui-badge-warning: var(--ui-warning);
@@ -123,7 +129,8 @@ html.flat-theme.dark {
   --ui-badge-muted: var(--ui-muted);
   --ui-scroll-thumb: 122 122 122;
   --ui-scroll-thumb-hover: 156 156 156;
-  /* the reference's dark fills are the colour at 42 % over the surface */
+  /* the reference's dark fills: the colour at 42 % over its surface #1a1a1a (kept as they are on palette C's
+     #212125; the bars carry no text) */
   --ui-uptime-good: 46 108 69;
   --ui-uptime-good-ink: 134 239 172;
   --ui-uptime-warn: 120 95 30;
@@ -134,8 +141,9 @@ html.flat-theme.dark {
   --ui-dot-warn: 251 191 36;
   --ui-dot-bad: 248 113 113;
   --ui-dot-idle: 140 140 140;
-  /* the reference's dark series where they hold 3:1 on #1a1a1a; blue and red are lighter (#1f5bbc 2.72, #be1e10
-     2.80), violet is the reference's dark pink (#91338c 2.53) */
+  /* the reference's dark series where they hold 3:1 on the surface (all twelve do on palette C's #212125, the
+     lowest 3.59); blue and red are lighter (the reference's #1f5bbc and #be1e10 are 2.72 and 2.80 even on its
+     #1a1a1a), violet is the reference's dark pink (#91338c 2.53 there) */
   --ui-chart-trend-1: #3975d8;
   --ui-chart-trend-2: #44af27;
   --ui-chart-trend-3: #9e7528;
@@ -159,6 +167,14 @@ html.flat-theme .table-wrapper > table[data-ui~="data-table"]:is(table) {
   line-height: 19.5px;
 }
 
+/* Dark: upstream writes table text as text-gray-900 dark:text-white; the gray is the ink, but text-white reads
+   --theme-on-fill (255 255 255), so figures, key and account names were pure #ffffff at 500-600 (17.4:1, a glare on
+   the graphite). Inside tables white text is the ink (palette C); a solid fill still sets its own --theme-on-fill
+   (tailwind.config.js onPrimaryFill, the .btn-primary recipe, controls.css 10.1). */
+html.flat-theme.dark .table-wrapper {
+  --theme-on-fill: var(--ui-ink);
+}
+
 /* the line between header and body is drawn by the sticky header cells (inset shadow), so it stays under the
    header while the body scrolls; the collapsed border of the first body row is dropped */
 html.flat-theme .table-wrapper > table > tbody.table-body {
@@ -167,8 +183,9 @@ html.flat-theme .table-wrapper > table > tbody.table-body {
   background-color: rgb(var(--ui-surface));
 }
 
-/* Header: 40px, the mono label (REF §8.7: Geist Mono 10/15, .12em, uppercase, 500, ink-faint -> --ui-label),
-   surface fill, 1px structural line underneath. th sits on the 13px / 19.5px strut, as the reference's does. */
+/* Header: 40px, the mono label (REF §8.7: Geist Mono 10/15, .12em, uppercase, ink-faint -> --ui-label) at 400
+   (palette C: the labels calm down; the reference's 500), surface fill, 1px structural line underneath. th sits on
+   the 13px / 19.5px strut, as the reference's does. */
 html.flat-theme .table-wrapper .table-header .sticky-header-cell {
   padding: var(--ui-table-cell-y) var(--ui-table-cell-x);
   border-bottom-width: 0;
@@ -177,7 +194,7 @@ html.flat-theme .table-wrapper .table-header .sticky-header-cell {
   color: rgb(var(--ui-table-head));
   font-family: var(--ui-font-mono);
   font-size: var(--ui-label-size);
-  font-weight: 500;
+  font-weight: 400;
   line-height: 19.5px;
   letter-spacing: var(--ui-label-tracking);
   text-transform: uppercase;
@@ -299,23 +316,26 @@ html.flat-theme .table-wrapper .table-body > tr[data-row-id]:is(:hover, :focus-w
 
 /* Selected rows (DataTable's own selection column, which gives the row bg-primary-50/40, or a checked box in a page's
    own `select` column): the accent's soft fill, which the reference uses for every selected or active fill; hover
-   keeps it and darkens a step. The row tests its own select cell (subject-position :has(), static markup only) and
-   hands its fill to its sticky cells as --ui-row-pick-fill (registered below as a non-inherited property that only
-   .sticky-col inherits explicitly), so no rule needs a relational selector on a row to reach its cells. */
+   keeps it a step further from the surface (--ui-row-pick-hover, section 0). The row tests its own select cell
+   (subject-position :has(), static markup only) and hands its fill to its sticky cells as --ui-row-pick-fill
+   (registered below as a non-inherited property that only .sticky-col inherits explicitly), so no rule needs a
+   relational selector on a row to reach its cells. */
 html.flat-theme .table-wrapper .table-body > tr:where([data-row-id]):is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)) {
   --ui-row-pick-fill: rgb(var(--ui-primary-soft));
   background-color: rgb(var(--ui-primary-soft));
 }
 
 html.flat-theme .table-wrapper .table-body > tr:where([data-row-id]):is([class~="bg-primary-50/40"], :has(> td[data-column="select"] input[type="checkbox"]:checked)):hover {
-  --ui-row-pick-fill: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
-  background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
+  --ui-row-pick-fill: var(--ui-row-pick-hover);
+  background-color: var(--ui-row-pick-hover);
 }
 
-/* On the dark selected fill (#333e36) upstream's secondary greys fall short (text-gray-400 / dark:text-dark-500
-   #919191 3.54:1, text-gray-500 / dark:text-dark-400 #9c9c9c 4.06:1): in a selected row they take the muted grey
-   (#b3b3b3, 5.39:1; 5.1 on the selected hover). Light is unchanged. Every selectable table. (wave 2, reported by
-   the management and user-side agents)
+/* On the dark selected fill (#39433f; #404946 under the pointer) upstream's secondary greys fall short
+   (dark:text-dark-500 #a0a0a9 3.95:1 / 3.57 on the hover, dark:text-dark-400 #a3a3ac 4.10 / 3.70, text-gray-500
+   #b0b0b9 4.76 / 4.31): in a selected row they take the soft ink (#b8b8c0, 5.20:1; 4.70 on the selected hover).
+   Light is unchanged. Every selectable table. (wave 2, reported by the management and user-side agents; palette C:
+   the muted grey the rule used to take fell to 4.31 on the hover.) The labels of stacked cell lines
+   (data-ui="cell-line-label", DataTable; the tables track draws them in the muted grey) are secondary text too.
    DataTable's own selection is the row's class; a page's own select column makes the row publish --ui-row-picked
    (dark theme only, so a light-theme selection never restyles the row's cells), which its cells read through a
    style query (Chromium 111+, Safari 18+). Firefox has no style queries: it keeps the pre-pass selector in the
@@ -324,25 +344,26 @@ html.flat-theme.dark .table-wrapper .table-body > tr:where([data-row-id]):has(>
   --ui-row-picked: 1;
 }
 
-html.flat-theme.dark .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class][class]:is(tr):is(tr) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
-  color: rgb(var(--ui-muted));
+html.flat-theme.dark .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class][class]:is(tr):is(tr) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"], [data-ui="cell-line-label"]) {
+  color: rgb(var(--ui-ink-soft));
 }
 
 @container style(--ui-row-picked: 1) {
-  html.flat-theme.dark .table-wrapper .table-body > tr[data-row-id][data-row-id][data-row-id]:is(tr):is(tr) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
-    color: rgb(var(--ui-muted));
+  html.flat-theme.dark .table-wrapper .table-body > tr[data-row-id][data-row-id][data-row-id]:is(tr):is(tr) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"], [data-ui="cell-line-label"]) {
+    color: rgb(var(--ui-ink-soft));
   }
 }
 
 @supports (-moz-appearance: none) {
-  html.flat-theme.dark .table-wrapper .table-body > tr:has(> td[data-column="select"] input[type="checkbox"]:checked) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"]) {
-    color: rgb(var(--ui-muted));
+  html.flat-theme.dark .table-wrapper .table-body > tr:has(> td[data-column="select"] input[type="checkbox"]:checked) :is([class~="text-gray-400"], [class~="text-gray-500"], [class~="dark:text-dark-400"], [class~="dark:text-dark-500"], [data-ui="cell-line-label"]) {
+    color: rgb(var(--ui-ink-soft));
   }
 }
 
-/* and the danger red of a failure note in a selected row (the accounts usage tickets' 「…检查失败」): #f87171 is 4.03:1 on
-   the selected fill; the lighter red keeps it a failure and readable (batch 7, reported by the accounts agent).
-   Amber (6.68) and the light theme's red (4.79) hold as they are. */
+/* and the danger red of a failure note in a selected row (the accounts usage tickets' 「…检查失败」): #f87171 is 3.71:1 on
+   the selected fill; the lighter red (--ui-selected-danger) keeps it a failure and readable (batch 7, reported by the
+   accounts agent). Amber (6.14, 5.55 on the hover) holds as it is; the light theme's red is 4.79 on its selected
+   fill and 4.53 on its hover (--ui-row-pick-hover). */
 html.flat-theme.dark .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class][class]:is(tr):is(tr) :is([class~="text-red-500"], [class~="text-red-600"], [class~="dark:text-red-400"]) {
   color: rgb(var(--ui-selected-danger));
 }
@@ -383,7 +404,7 @@ html.flat-theme .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class
 }
 
 html.flat-theme .table-wrapper .table-body > tr[class~="bg-primary-50/40"][class][class]:is(tr):is(tr):hover > .sticky-col {
-  background-color: color-mix(in srgb, rgb(var(--ui-primary-soft)) 100%, rgb(var(--ui-ink)) 4%);
+  background-color: var(--ui-row-pick-hover);
 }
 
 html.flat-theme .table-wrapper.is-scrollable .sticky-col-left::after,
@@ -657,7 +678,7 @@ html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text
   box-shadow: inset 0 -1px 0 rgb(var(--ui-line));
   color: rgb(var(--ui-muted));
   font-size: 10px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 15px;
   letter-spacing: 0.025em;
   text-transform: uppercase;
@@ -793,8 +814,10 @@ html.flat-theme [class~="max-h-48"][class~="overflow-auto"] > table[class~="text
 /* ================================================================== 4 · pagination */
 
 /* The reference ends a list with a 1px line and a quiet row (REF §8.7); our pagination keeps its controls in that
-   language: 12px muted counts with mono figures, page buttons 30px ghost with mono numbers, the current page as the
-   ink thumb of a segmented control (REF §8.5), arrows as 28px icon buttons. */
+   language: 12px muted counts with mono figures, page buttons 30px ghost with mono numbers, the current page the
+   accent tint with accent figures at 600 and a 1px inset accent ring (palette C: the tint alone is 1.05:1 and the
+   accent figures about as light as the grey ones, so the ring marks the page at >= 3:1), arrows as 28px icon
+   buttons. */
 html.flat-theme [data-ui="pagination"] {
   gap: 12px;
   min-height: 44px;
@@ -857,8 +880,10 @@ html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button:not
 
 html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button[aria-current="page"],
 html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button[aria-current="page"]:hover {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
+  font-weight: 600;
+  box-shadow: inset 0 0 0 1px var(--ui-choice-edge);
 }
 
 html.flat-theme [data-ui="pagination"] nav[aria-label="Pagination"] > button:disabled {
@@ -1447,10 +1472,10 @@ html.flat-theme .model-icon-fallback {
 
 /* Upstream's KPI tiles (admin and user dashboards, usage records, orders: a .card.p-4 in a grid whose first content
    is a coloured icon tile) take the reference's StatTile (REF §8.13): 1px structural line, 6px radius, surface,
-   8 / 12 inset, the mono label, the value 15/600 tabular ink, the detail 11px muted, 76px; no icon tile; 10px
-   apart. The grids and tiles are marked (static data-ui="kpi-grid" / "kpi-tile"; "kpi-value" on the RPM value row);
-   the repeated [data-ui] / [class] and :is(div) keep the weight of the pre-pass selectors, which found them by
-   their icon tile. */
+   8 / 12 inset, the mono label, the value 15/500 tabular ink (palette C), the detail 11px muted, 76px; no icon
+   tile; 10px apart. The grids and tiles are marked (static data-ui="kpi-grid" / "kpi-tile"; "kpi-value" on the RPM
+   value row); the repeated [data-ui] / [class] and :is(div) keep the weight of the pre-pass selectors, which found
+   them by their icon tile. */
 html.flat-theme [class~="grid"][data-ui~="kpi-grid"][data-ui][data-ui][data-ui][data-ui][data-ui][data-ui]:is(div) {
   gap: 10px;
 }
@@ -1506,7 +1531,7 @@ html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="roun
 html.flat-theme [class~="grid"] > [class~="card"][class~="p-4"] div[class~="rounded-lg"][class~="p-2"]:first-child + div p[class~="text-xl"] {
   color: rgb(var(--ui-kpi-accent));
   font-size: 15px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 22.5px;
   font-variant-numeric: tabular-nums;
 }
@@ -1690,14 +1715,14 @@ html.flat-theme .stat-trend-down {
 /* ================================================================== 8 · progress and uptime bars */
 
 /* Bars (quota windows, capacity, progress): the reference's capsule track on the subtle fill (REF §8.14 usage bar,
-   §8.7 uptime), no gradient; the fill keeps its status colour. */
+   §8.7 uptime), no gradient; the fill keeps its status colour; the recipe's bar is the accent (palette C marks). */
 html.flat-theme .progress,
 html.flat-theme div[class~="rounded-full"]:is([class~="h-1"], [class~="h-1.5"], [class~="h-2"]):is([class~="bg-gray-200"], [class~="bg-gray-100"]):not([class~="animate-pulse"]) {
   background-color: rgb(var(--ui-subtle));
 }
 
 html.flat-theme .progress-bar {
-  background: rgb(var(--ui-ink));
+  background: rgb(var(--ui-primary));
 }
 
 /* ================================================================== 9 · empty and loading states */
diff --git a/frontend/src/styles/console/overlays.css b/frontend/src/styles/console/overlays.css
index fdff22bca473..009cbf6ceef6 100644
--- a/frontend/src/styles/console/overlays.css
+++ b/frontend/src/styles/console/overlays.css
@@ -503,6 +503,13 @@ html.flat-theme.dark :is(div, span).text-white:is(.bg-gray-900, .bg-gray-800):is
   --theme-text-primary-700: 182 247 200;
 }
 
+/* a grouped box inside such a tip (the 专属分组 tip's example: upstream's gray-800 box on its dark tip) is the grouped
+   fill of the light tip (palette C sweep: on the near-black box its ink-soft text read 1.9:1 and the accent label
+   2.8:1; on the grouped fill 7.0:1 / 4.8:1) */
+html.flat-theme div.text-white.bg-gray-900.p-3 > div[class~="rounded"][class~="bg-gray-800"] {
+  background-color: rgb(var(--ui-subtle));
+}
+
 /* 2.2 Insets: the bubble's 6/10 for one-line tips, the breakdown's 8/12 for paragraphs and cards (p-3 boxes). */
 html.flat-theme :is(div, span).text-white:is(.bg-gray-900, .bg-gray-800):is(.absolute, .fixed):not(button, a) {
   padding: 6px 10px;
@@ -764,9 +771,9 @@ html.flat-theme .modal-footer > div.flex:only-child:is(.pt-2, .pt-3, .pt-4) {
 }
 
 /* 3.6 The confirm dialog: message 13/21 ink-soft; its two utility buttons restated as the .btn recipes (controls'
-   values: 30px, 0 12px, 13/19.5 600, radius 6, 1px edge; cancel = default, confirm = primary ink, a danger confirm
-   = destructive). Perf pass: the message box is hooked ([data-ui="confirm-body"], ConfirmDialog.vue), so no has-test
-   on .modal-content asks whether the dialog holds the confirm button; the `div` keeps the original 0,5,3. */
+   values: 30px, 0 12px, 13/19.5 600, radius 6, 1px edge; cancel = default, confirm = the solid primary, a danger
+   confirm = destructive). Perf pass: the message box is hooked ([data-ui="confirm-body"], ConfirmDialog.vue), so no
+   has-test on .modal-content asks whether the dialog holds the confirm button; the `div` keeps the original 0,5,3. */
 html.flat-theme .modal-content .modal-body > div[data-ui~="confirm-body"] > p:first-child {
   font-size: 13px;
   line-height: 21px;
@@ -800,9 +807,15 @@ html.flat-theme.dark [data-ui="confirm-cancel"]:hover {
 html.flat-theme [data-ui="confirm-ok"],
 html.flat-theme [data-ui="confirm-ok"]:hover,
 html.flat-theme.dark [data-ui="confirm-ok"]:hover {
-  border-color: rgb(var(--ui-ink));
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border-color: rgb(var(--ui-solid-edge));
+  background-color: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
+}
+
+html.flat-theme [data-ui="confirm-ok"]:hover,
+html.flat-theme.dark [data-ui="confirm-ok"]:hover {
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background-color: rgb(var(--ui-solid-hover));
 }
 
 html.flat-theme [data-ui="confirm-ok"].bg-red-600,
@@ -1405,7 +1418,8 @@ html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popu
   padding-left: 0;
 }
 
-/* footer: the dialog footer (12/18, structural line, no tint); close = default button, "mark read" = primary ink */
+/* footer: the dialog footer (12/18, structural line, no tint); close = default button, "mark read" = the solid
+   primary */
 html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child {
   padding: var(--ui-dialog-foot-y) var(--ui-dialog-x);
   border-top: 1px solid rgb(var(--ui-line));
@@ -1448,9 +1462,9 @@ html.flat-theme.dark :is([data-ui="announcement-detail"], [data-ui="announcement
 
 html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:is(.bg-gradient-to-r),
 html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button:is(.bg-gradient-to-r):hover {
-  border-color: rgb(var(--ui-ink));
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border-color: rgb(var(--ui-solid-edge));
+  background: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
 }
 
 html.flat-theme :is([data-ui="announcement-detail"], [data-ui="announcement-popup"]) > div:last-child button svg {
@@ -1646,8 +1660,8 @@ html.flat-theme .markdown-body img {
 
 /* 7.1 The popover is a panel: surface, 1px line, radius 8, overlay shadow (the sign-in panel's frame, derived); title
    17/600 tight ink; text the docs paragraph (13.5/1.625 muted); footer the dialog footer (12/18, structural line, no
-   tint); progress and key hints in Geist Mono; next = primary ink, back = default, skip = ghost; close = 28px ghost.
-   The page dims with the dialog scrim; the highlighted element carries the reference's accent ring (34%). */
+   tint); progress and key hints in Geist Mono; next = the solid primary, back = default, skip = ghost; close = 28px
+   ghost. The page dims with the dialog scrim; the highlighted element carries the reference's accent ring (34%). */
 html.flat-theme .driver-popover.theme-tour-popover {
   border: 1px solid rgb(var(--ui-line)) !important;
   border-radius: var(--ui-radius-lg) !important;
@@ -1752,9 +1766,9 @@ html.flat-theme .theme-tour-popover .driver-popover-footer :is(.driver-popover-n
 html.flat-theme.dark .theme-tour-popover .driver-popover-footer :is(.driver-popover-next-btn, .driver-popover-done-btn),
 html.flat-theme .theme-tour-popover .driver-popover-footer :is(.driver-popover-next-btn, .driver-popover-done-btn):hover,
 html.flat-theme.dark .theme-tour-popover .driver-popover-footer :is(.driver-popover-next-btn, .driver-popover-done-btn):hover {
-  border-color: rgb(var(--ui-ink)) !important;
-  background-color: rgb(var(--ui-ink)) !important;
-  color: rgb(var(--ui-on-ink)) !important;
+  border-color: rgb(var(--ui-solid-edge)) !important;
+  background-color: rgb(var(--ui-solid)) !important;
+  color: rgb(var(--ui-on-solid)) !important;
 }
 
 html.flat-theme .theme-tour-popover .driver-popover-footer :is(button:not(.driver-popover-next-btn, .driver-popover-done-btn, .driver-popover-prev-btn)),
diff --git a/frontend/src/styles/console/pages/accounts.css b/frontend/src/styles/console/pages/accounts.css
index 3eb1dc6c1ea5..9d83a924bb2b 100644
--- a/frontend/src/styles/console/pages/accounts.css
+++ b/frontend/src/styles/console/pages/accounts.css
@@ -238,10 +238,10 @@ html.flat-theme [data-ui="account-folder-empty"] {
 
 /* ================================================================== 3 · view switcher (row 1) */
 
-/* The reference's SlidingTabs (REF §8.5): the structural line on the surface, radius 8, a 2px inset; an ink thumb
-   (near-white in dark) slides 200ms ease-out to the chosen segment, whose glyph turns on-ink; the others are muted,
-   ink on hover. The segments are the fork's icon buttons (title and aria-label name them): 34 x 30.75, a 14px glyph;
-   the frame is the reference's 36.75px. */
+/* The reference's SlidingTabs (REF §8.5) in palette C: the grey track, radius 8, a 2px inset; the raised pill
+   (tokens.css --ui-thumb: a soft shadow and a 1px inset ring) slides 200ms ease-out to the chosen segment, whose glyph
+   is the ink; the others are muted, ink on hover. The segments are the fork's icon buttons (title and aria-label name
+   them): 34 x 30.75, a 14px glyph; the frame is the reference's 36.75px. */
 html.flat-theme [data-ui="account-view-switcher"] {
   position: relative;
   isolation: isolate;
@@ -249,7 +249,7 @@ html.flat-theme [data-ui="account-view-switcher"] {
   height: auto;
   border: 1px solid rgb(var(--ctl-seg-frame, var(--ui-line)));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
   padding: var(--ctl-seg-inset, 2px);
 }
 
@@ -262,7 +262,8 @@ html.flat-theme [data-ui="account-view-switcher"]::before {
   left: var(--ctl-seg-inset, 2px);
   width: var(--accounts-seg-w);
   border-radius: var(--ui-radius-md);
-  background-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-thumb));
+  box-shadow: var(--ui-thumb-shadow);
   transition: transform var(--ui-duration-slide) var(--ui-ease-out);
 }
 
@@ -296,7 +297,7 @@ html.flat-theme [data-ui="account-view-switcher"] > button:hover {
 html.flat-theme [data-ui="account-view-switcher"] > button[aria-pressed="true"],
 html.flat-theme [data-ui="account-view-switcher"] > button[aria-pressed="true"]:hover {
   background-color: transparent;
-  color: rgb(var(--ui-on-ink));
+  color: rgb(var(--ui-ink));
   box-shadow: none;
 }
 
@@ -435,7 +436,7 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > d
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > :first-child {
   flex: 0 1 auto;
   min-width: 0;
-  font-weight: 600;
+  font-weight: 500;
 }
 
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > span + span {
@@ -448,13 +449,13 @@ html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > d
 
 /* Integration review: a name that links to the account's homepage sits in HelpTooltip's root, which keeps its own
    ml-1 (the template's -ml-1 loses to it) and whose link carries font-medium: the linked and the plain names start on
-   the same edge at the same 600 weight. The dotted underline (the link's cue) stays. */
+   the same edge at the same 500 weight (palette C: 600 -> 500). The dotted underline (the link's cue) stays. */
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > [data-ui="help-tooltip"]:first-child {
   margin-left: 0;
 }
 
 html.flat-theme .table-wrapper[data-table="accounts"] td[data-column="name"] > div > [data-ui="help-tooltip"]:first-child > a {
-  font-weight: 600;
+  font-weight: 500;
 }
 
 /* Platform / type: the identity chips (in their platform colours, data.css 6.1; nothing here recolours them) and the
@@ -1028,8 +1029,8 @@ html.flat-theme [data-ui="account-stats"] > div[class~="grid"] > div[class~="car
 
 /* 9.4 OAuth authorisation (the create dialog's second step, re-authorisation): upstream's blue panel is the
    reference's grouped panel: the subtle fill inside the structural line, a neutral icon square, ink titles and
-   ink-soft text, the numbered steps on surface cards with ink discs, a count as a neutral chip, links in the link
-   colour. The amber notice and the red error keep their status colours. */
+   ink-soft text, the numbered steps on surface cards with accent discs (palette C marks), a count as a neutral chip,
+   links in the link colour. The amber notice and the red error keep their status colours. */
 html.flat-theme [data-ui="account-oauth-flow"] {
   border-color: rgb(var(--ui-line));
   border-radius: var(--ui-radius-lg);
@@ -1083,8 +1084,8 @@ html.flat-theme [data-ui="account-oauth-flow"] div[class~="border-blue-300"] {
 }
 
 html.flat-theme [data-ui="account-oauth-flow"] div[class~="rounded-full"][class~="bg-blue-600"] {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-primary));
+  color: rgb(var(--ui-on-primary));
 }
 
 html.flat-theme [data-ui="account-oauth-flow"] span[class~="rounded-full"][class~="bg-blue-500"] {
@@ -1108,14 +1109,14 @@ html.flat-theme [data-ui="account-create-steps"] div[class~="h-0.5"] {
 
 /* 9.6 Choices inside the account forms (create, edit, bulk edit); upstream's accent and purple tints go.
    - A two-way switch whose choices are labels only (the model whitelist / mapping, the bulk form's RPM strategy) is the
-     reference's segmented control (REF §8.5, controls.css 7.1: the structural frame on the surface, radius 8, the 2px
-     inset; segments 14 x 6 at 12.5 / 600, muted, ink on hover, the chosen one ink), like the same switch in the other
-     dialogs (the announcement's 「所有用户 / 按条件」). Final review V1-15.
+     reference's segmented control (REF §8.5, controls.css 7.1: the grey track, radius 8, the 2px inset; segments
+     14 x 6 at 12.5 / 500, muted, ink on hover, the chosen one the raised pill at 600), like the same switch in the
+     other dialogs (the announcement's 「所有用户 / 按条件」). Final review V1-15.
    - A pair whose choices carry a description line (the create and edit forms' RPM strategy) is an option card like the
-     account type cards above it (controls.css 8.1): the grouped fill inside the structural line, the chosen one an ink
-     edge 2px wide on the surface.
-   - The user-message limit's three modes are a segmented choice at the reference's 30px: the chosen one ink (REF §8.5;
-     controls.css 10.1 draws it), the others the secondary button. */
+     account type cards above it (controls.css 8.1): the grouped fill inside the structural line, the chosen one an
+     accent edge 2px wide on the surface.
+   - The user-message limit's three modes are a segmented choice at the reference's 30px: the chosen one the solid
+     primary (REF §8.5; controls.css 10.1 draws it), the others the secondary button. */
 html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) div[class~="flex"][class~="gap-2"]:has(> button[class~="flex-1"][class~="rounded-lg"]):not(:has(> button div[class~="text-[10px]"])) {
   width: fit-content;
   max-width: 100%;
@@ -1123,7 +1124,7 @@ html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account
   padding: var(--ctl-seg-inset);
   border: 1px solid rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
 }
 
 html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"]):not(:has(div[class~="text-[10px]"])) {
@@ -1135,7 +1136,7 @@ html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account
   padding: var(--ctl-seg-pad-y) var(--ctl-seg-pad-x);
   font-size: 0.78125rem;
   line-height: 1.171875rem;
-  font-weight: 600;
+  font-weight: 500;
   white-space: nowrap;
   color: rgb(var(--ui-muted));
   transition-property: color, background-color;
@@ -1148,8 +1149,10 @@ html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account
 }
 
 html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]):not(:has(div[class~="text-[10px]"])) {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-gray-100"], [class~="bg-primary-100"], [class~="bg-purple-100"]):not(:has(div[class~="text-[10px]"])) > svg {
@@ -1177,7 +1180,7 @@ html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account
 
 html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account-form) button[class~="flex-1"][class~="rounded-lg"]:is([class~="bg-primary-100"], [class~="bg-purple-100"]):has(div[class~="text-[10px]"]) {
   background-color: rgb(var(--ui-surface));
-  box-shadow: inset 0 0 0 2px rgb(var(--ui-ink));
+  box-shadow: inset 0 0 0 2px rgb(var(--ui-primary));
   color: rgb(var(--ui-ink));
 }
 
@@ -1288,8 +1291,8 @@ html.flat-theme :is(#create-account-form, #edit-account-form, #bulk-edit-account
 /* 9.12 The edit dialog's Codex image-generation panel (OpenAI accounts): the sky box (its inset sits on the children,
    so data.css 11's callout rule does not reach it) is the same neutral callout: the structural line, the subtle
    ground, no shadow; its tile the neutral square, its text ink-soft; the mode strip the surface; the chosen mode an
-   option card (the ink edge 2px wide, controls.css 8.1) with an ink check disc instead of the mode's hue. The badge
-   beside the title keeps its status colour (enabled / disabled / blocked). */
+   option card (the accent edge 2px wide, controls.css 8.1) with an accent check disc instead of the mode's hue. The
+   badge beside the title keeps its status colour (enabled / disabled / blocked). */
 html.flat-theme #edit-account-form div[class~="overflow-hidden"][class~="rounded-lg"][class~="bg-sky-50/60"] {
   border-color: rgb(var(--ui-line));
   background-color: rgb(var(--ui-subtle));
@@ -1322,9 +1325,9 @@ html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child b
 }
 
 html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child button:not([class~="border-transparent"]) {
-  border-color: rgb(var(--ui-ink));
+  border-color: rgb(var(--ui-primary));
   background-color: rgb(var(--ui-surface));
-  box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-primary));
   color: rgb(var(--ui-ink));
 }
 
@@ -1333,9 +1336,9 @@ html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child b
 }
 
 html.flat-theme #edit-account-form div[class~="bg-sky-50/60"] > div:last-child button > span[class~="rounded-full"]:not([class~="border-gray-300"]) {
-  border-color: rgb(var(--ui-ink));
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border-color: rgb(var(--ui-primary));
+  background-color: rgb(var(--ui-primary));
+  color: rgb(var(--ui-on-primary));
 }
 
 /* ================================================================== 8 · phones */
diff --git a/frontend/src/styles/console/pages/dashboard-usage.css b/frontend/src/styles/console/pages/dashboard-usage.css
index c49ebe4131c0..b3c5a14fa107 100644
--- a/frontend/src/styles/console/pages/dashboard-usage.css
+++ b/frontend/src/styles/console/pages/dashboard-usage.css
@@ -415,15 +415,64 @@ html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"]
   color: rgb(var(--ui-ink-soft));
 }
 
-/* Figures: token counts, cache and image tokens, the billed cost are ink (their glyphs say which is which); the glyphs
-   themselves the faint grey; the account's billed cost muted. */
-html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] :is([class~="text-sky-600"], [class~="text-amber-600"], [class~="text-fuchsia-600"], [class~="text-pink-600"]),
+/* Hierarchy by colour and weight instead of more black (palette C): the requested model and the billed cost are the
+   row's ink (500); every token figure (input, output, cache, image) ink-soft; the key, account and reasoning names
+   ink-soft 400; the endpoint's 「入站 / 上游」 labels 400; times and IPs tabular figures. The token glyphs get upstream's
+   hues back as identity-safe text colours (input emerald, output violet, cache read sky, cache write amber, image
+   fuchsia / pink, indigo), so the figures stay neutral and the colour says which figure is which; the account's billed
+   cost stays muted. The key, account, reasoning and endpoint rules also name their lines of a stacked cell
+   ([data-ui="cell-line"][data-line], the table-width track's stacked layout), as that track does for the rules it
+   carries over. */
+html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="api_key"], [data-column="account"], [data-column="reasoning_effort"]) span[class~="text-gray-900"],
+html.flat-theme .table-wrapper[data-table="usage"] [data-ui="cell-line"]:is([data-line="api_key"], [data-line="account"], [data-line="reasoning_effort"]) > [data-ui="cell-line-value"] span[class~="text-gray-900"] {
+  color: rgb(var(--ui-ink-soft));
+  font-weight: 400;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] span[class~="font-medium"][class~="text-gray-900"],
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] :is([class~="text-sky-600"], [class~="text-amber-600"], [class~="text-fuchsia-600"], [class~="text-pink-600"]) {
+  color: rgb(var(--ui-ink-soft));
+}
+
 html.flat-theme .table-wrapper[data-table="usage"] td[data-column="cost"] span[class~="text-green-600"] {
   color: rgb(var(--ui-ink));
 }
 
-html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg:is([class~="text-emerald-500"], [class~="text-violet-500"], [class~="text-sky-500"], [class~="text-amber-500"], [class~="text-fuchsia-500"], [class~="text-pink-500"], [class~="text-indigo-500"]) {
-  color: rgb(var(--ui-faint));
+html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"] .table-wrapper, [data-ui="user-usage"] .table-wrapper) td[data-column="endpoint"] div > span[class~="font-medium"],
+html.flat-theme :is(.table-wrapper[data-table="usage"], [data-ui="admin-usage"] .table-wrapper, [data-ui="user-usage"] .table-wrapper) [data-ui="cell-line"][data-line="endpoint"] div > span[class~="font-medium"] {
+  font-weight: 400;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td:is([data-column="created_at"], [data-column="ip_address"]) span {
+  font-variant-numeric: tabular-nums;
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg[class~="text-emerald-500"] {
+  color: rgb(var(--ui-id-emerald));
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg[class~="text-violet-500"] {
+  color: rgb(var(--ui-id-violet));
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg[class~="text-sky-500"] {
+  color: rgb(var(--ui-id-sky));
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg[class~="text-amber-500"] {
+  color: rgb(var(--ui-id-amber));
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg[class~="text-fuchsia-500"] {
+  color: rgb(var(--ui-id-fuchsia));
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg[class~="text-pink-500"] {
+  color: rgb(var(--ui-id-pink));
+}
+
+html.flat-theme .table-wrapper[data-table="usage"] td[data-column="tokens"] svg[class~="text-indigo-500"] {
+  color: rgb(var(--ui-id-indigo));
 }
 
 html.flat-theme .table-wrapper[data-table="usage"] td[data-column="cost"] div[class~="text-orange-500"] {
@@ -792,6 +841,8 @@ html.flat-theme [data-ui="user-usage"] > div[class~="border-b"]:not(uipad[data-u
   border-bottom-color: rgb(var(--ui-focus));
   background-color: transparent;
   color: rgb(var(--ui-ink));
+  font-weight: 500;
+  box-shadow: none;
 }
 
 /* The pagination under the records card is the card's footer (as data.css joins them on the table pages): the card
diff --git a/frontend/src/styles/console/pages/ops-channels.css b/frontend/src/styles/console/pages/ops-channels.css
index e69f9ba36c42..c281d53086d8 100644
--- a/frontend/src/styles/console/pages/ops-channels.css
+++ b/frontend/src/styles/console/pages/ops-channels.css
@@ -382,7 +382,7 @@ html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where(
   padding: var(--ctl-seg-inset);
   border: 1px solid rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
 }
 
 html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button {
@@ -392,7 +392,7 @@ html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where(
   color: rgb(var(--ui-muted));
   font-family: var(--ui-font);
   font-size: 0.78125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.171875rem;
   white-space: nowrap;
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
@@ -403,8 +403,10 @@ html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where(
 }
 
 html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:first-child > div:last-child > button[class~="bg-blue-500"] {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 html.flat-theme div[data-ui~="ops-dashboard"] > div[class~="rounded-3xl"]:where([data-ui~="ops-header"]) > div[class~="grid"] > div:first-child > div > div:last-child > div:last-child span[class~="font-black"] {
@@ -2099,7 +2101,7 @@ html.flat-theme [data-ui~="ops-jobs"] > div > div[class~="bg-rose-50"] {
 }
 
 /* 4.9 custom range: the fields 34px with the form-control line (radius 6, accent edge on focus); cancel = the default
-   button, confirm = the ink primary button (REF §8.3) */
+   button, confirm = the solid primary button (REF §8.3; palette C) */
 html.flat-theme [data-ui~="ops-custom-range"] input[type="datetime-local"] {
   min-height: var(--ui-select-h);
   padding: 6px 10px;
@@ -2130,9 +2132,9 @@ html.flat-theme [data-ui~="ops-custom-range"] > div:last-child > button {
 }
 
 html.flat-theme [data-ui~="ops-custom-range"] > div:last-child > button[class~="bg-blue-500"] {
-  border-color: rgb(var(--ui-ink));
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border-color: rgb(var(--ui-solid-edge));
+  background-color: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
 }
 
 html.flat-theme [data-ui~="ops-custom-range"] > div:last-child > button:focus-visible {
@@ -2719,8 +2721,8 @@ html.flat-theme [data-ui~="affiliate-page"] .table-wrapper td[data-column="order
 
 /* 5.7 渠道监控's dialogs (MonitorFormDialog: #channel-monitor-form; MonitorTemplateManagerDialog): the choice buttons
    (check mode, API mode, provider) are the reference's dialog option cards (REF §8.11: radius 8, the structural line, the
-   grouped fill at 60 %, the control outline on hover); the chosen one is drawn like the segmented thumb's edge (2px ink,
-   as controls.css' option cards); a provider's logo keeps its platform colour (identity, data-ui="platform-text"), the
+   grouped fill at 60 %, the control outline on hover); the chosen one carries the accent edge 2px wide (palette C, as
+   controls.css' option cards); a provider's logo keeps its platform colour (identity, data-ui="platform-text"), the
    labels are ink. The OpenAI API-mode group is a grouped panel, not an info box. */
 html.flat-theme #channel-monitor-form button[aria-pressed],
 html.flat-theme .modal-content div[class~="grid"] > button[data-ui~="platform-text"][class~="border-2"] {
@@ -2740,9 +2742,9 @@ html.flat-theme .modal-content div[class~="grid"] > button[data-ui~="platform-te
 
 html.flat-theme #channel-monitor-form button[aria-pressed="true"],
 html.flat-theme .modal-content div[class~="grid"] > button[data-ui~="platform-text"][class~="border-2"]:not([aria-pressed]):not([class~="bg-white"]) {
-  border-color: rgb(var(--ui-ink));
+  border-color: rgb(var(--ui-primary));
   background-color: rgb(var(--ui-surface));
-  box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-primary));
 }
 
 html.flat-theme #channel-monitor-form button[aria-pressed] > span:first-child {
@@ -3516,14 +3518,14 @@ html.flat-theme [data-ui~="payment-dashboard"] div[class~="grid"][class~="gap-6"
   gap: var(--ui-shell-gap, 12px);
 }
 
-/* the 7 / 30 / 90-day choice: the reference's segmented control (controls.css 7.1's frame and segment metrics; the
-   current segment the ink thumb); the head row's only bordered box, its buttons a constant list */
+/* the 7 / 30 / 90-day choice: the reference's segmented control (controls.css 7.1's track and segment metrics; the
+   current segment the raised pill); the head row's only bordered box, its buttons a constant list */
 html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"]:not(uipad) {
   gap: 0;
   padding: var(--ctl-seg-inset);
   border-color: rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
 }
 
 html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"] > button {
@@ -3531,7 +3533,7 @@ html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rou
   border-radius: var(--ui-radius-md);
   color: rgb(var(--ui-muted));
   font-size: 0.78125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.171875rem;
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
@@ -3542,8 +3544,10 @@ html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rou
 }
 
 html.flat-theme [data-ui~="payment-dashboard"] > div:first-child div[class~="rounded-lg"][class~="border"] > button[class~="bg-primary-600"] {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 html.flat-theme [data-ui~="payment-dashboard"] > div:first-child > div {
@@ -3855,7 +3859,7 @@ html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-list"]
 
 html.flat-theme [data-ui~="risk-page"] [data-test="pre-block-api-key-load-list"] div[class~="bg-sky-500"],
 html.flat-theme [data-ui~="risk-page"] .card div[class~="h-2"] > div[class~="bg-primary-500"] {
-  background-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-primary));
 }
 
 html.flat-theme [data-ui~="risk-page"] .card div[class~="rounded-lg"][class~="border"][class~="p-4"] {
@@ -3899,9 +3903,9 @@ html.flat-theme [data-ui~="risk-settings"] > div:first-child {
   width: max-content;
   max-width: 100%;
   padding: 2px;
-  border: 1px solid rgb(var(--ui-line));
+  border: 1px solid rgb(var(--ui-track));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
 }
 
 html.flat-theme [data-ui~="risk-settings"] > div:first-child > button {
@@ -3909,7 +3913,7 @@ html.flat-theme [data-ui~="risk-settings"] > div:first-child > button {
   border-radius: var(--ui-radius-md);
   color: rgb(var(--ui-muted));
   font-size: 12.5px;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 18.75px;
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
@@ -3920,8 +3924,10 @@ html.flat-theme [data-ui~="risk-settings"] > div:first-child > button:hover {
 }
 
 html.flat-theme [data-ui~="risk-settings"] > div:first-child > button[class~="bg-primary-50"] {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 html.flat-theme [data-ui~="risk-settings"] div:is([class~="rounded-lg"], [class~="rounded-xl"])[class~="border"][class~="border-gray-100"] {
@@ -3967,12 +3973,13 @@ html.flat-theme [data-ui~="risk-settings"] div[class~="border-dashed"][class~="m
   color: rgb(var(--ui-muted));
 }
 
-/* 8.1 风控中心 settings: the API-key write mode is a segmented control (controls.css 7.1's frame and segment metrics;
-   「增量添加」 the ink thumb, 「覆盖保存」 keeps the warning fill: it replaces the saved keys) */
+/* 8.1 风控中心 settings: the API-key write mode is a segmented control (controls.css 7.1's track and segment metrics;
+   「增量添加」 the raised pill, 「覆盖保存」 keeps the warning fill: it replaces the saved keys) */
 html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"]:not(uipad) {
   padding: var(--ctl-seg-inset);
   border: 1px solid rgb(var(--ctl-seg-frame));
   border-radius: var(--ui-radius-lg);
+  background-color: rgb(var(--ui-track));
   box-shadow: none;
 }
 
@@ -3981,13 +3988,15 @@ html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rou
   border-radius: var(--ui-radius-md);
   box-shadow: none;
   font-size: 0.78125rem;
-  font-weight: 600;
+  font-weight: 500;
   line-height: 1.171875rem;
 }
 
 html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"] > button[class~="bg-primary-500"] {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 html.flat-theme [data-ui~="risk-settings"] div[class~="inline-flex"][class~="rounded-lg"][class~="bg-white"][class~="p-1"] > button:not([class~="bg-primary-500"]):not([class~="bg-amber-500"]) {
diff --git a/frontend/src/styles/console/pages/settings-ops-public.css b/frontend/src/styles/console/pages/settings-ops-public.css
index cd68fbf2b257..b00cb860e171 100644
--- a/frontend/src/styles/console/pages/settings-ops-public.css
+++ b/frontend/src/styles/console/pages/settings-ops-public.css
@@ -88,8 +88,8 @@ html.flat-theme [data-ui="auth-column"] {
   padding: 0 24px;
 }
 
-/* brand: a 44px ink tile (radius 12) with the site logo, then the site name as a mono wordmark; the site subtitle
-   sits under them as a mono caption */
+/* brand: a 44px accent tile (radius 12; palette C marks) with the site logo, then the site name as a mono wordmark;
+   the site subtitle sits under them as a mono caption */
 html.flat-theme [data-ui="auth-column"] > div[class~="mb-8"] {
   display: flex;
   flex-wrap: wrap;
@@ -105,7 +105,7 @@ html.flat-theme [data-ui="auth-column"] > div[class~="mb-8"] > div {
   height: 44px;
   margin: 0;
   border-radius: var(--ui-radius-xl);
-  background-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-primary));
   box-shadow: none;
 }
 
@@ -347,8 +347,8 @@ html.flat-theme [data-ui="auth-column"] input#code.input {
 }
 
 /* ------------------------------------------------------------------ auth · buttons */
-/* primary: the reference's 50px ink pill (hover ink 85 %, disabled 50 %); its leading glyph is dropped, the loading
-   spinner stays */
+/* primary: the reference's 50px pill in the solid role (palette C: the accent with white text, the deeper step on
+   hover, disabled 50 %); its leading glyph is dropped, the loading spinner stays */
 html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary {
   display: flex;
   width: 100%;
@@ -357,8 +357,8 @@ html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary {
   gap: 8px;
   border: 1px solid transparent;
   border-radius: 9999px;
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
   font: 600 14px/20px var(--ui-font);
   letter-spacing: -0.025em;
   box-shadow: none;
@@ -367,7 +367,7 @@ html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary {
 }
 
 html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary:hover:not(:disabled) {
-  background: rgb(var(--ui-ink) / 0.85);
+  background: rgb(var(--ui-solid-hover));
 }
 
 html.flat-theme [data-ui="auth-column"] :is(button, a).btn.btn-primary:disabled {
@@ -925,13 +925,14 @@ html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div
 }
 
 html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:last-child button:last-child {
-  border: 1px solid rgb(var(--ui-ink));
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border: 1px solid rgb(var(--ui-solid-edge));
+  background: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
 }
 
 html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] > div > div:last-child button:last-child:hover {
-  background: rgb(var(--ui-ink) / 0.85);
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background: rgb(var(--ui-solid-hover));
 }
 
 html.flat-theme body > :where(#overlay-root) > div[class~="z-[140]"] :is(a, button):focus-visible {
@@ -1041,7 +1042,7 @@ html.flat-theme :is([data-ui="home"], [data-ui="key-usage"]) > header > nav > di
   font-size: 12.5px;
 }
 
-/* sign in / console: the console's small ink button (30px, radius 6, 13 / 600) */
+/* sign in / console: the console's small solid primary (30px, radius 6, 13 / 600; palette C) */
 html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"],
 html.flat-theme [data-ui="legal"] > header > div > a[class~="bg-primary-600"] {
   display: inline-flex;
@@ -1050,10 +1051,10 @@ html.flat-theme [data-ui="legal"] > header > div > a[class~="bg-primary-600"] {
   margin-left: 6px;
   padding: 0 12px;
   gap: 8px;
-  border: 1px solid rgb(var(--ui-ink));
+  border: 1px solid rgb(var(--ui-solid-edge));
   border-radius: var(--ui-radius-md);
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
   font: 600 13px/19.5px var(--ui-font);
   box-shadow: none;
   transition: background-color var(--ui-duration) var(--ui-ease);
@@ -1061,29 +1062,30 @@ html.flat-theme [data-ui="legal"] > header > div > a[class~="bg-primary-600"] {
 
 html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"]:hover,
 html.flat-theme [data-ui="legal"] > header > div > a[class~="bg-primary-600"]:hover {
-  background: rgb(var(--ui-ink) / 0.85);
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background: rgb(var(--ui-solid-hover));
 }
 
 html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"] > span:not([class~="rounded-full"]) {
   font-size: 13px;
   line-height: 19.5px;
   font-weight: 600;
-  color: rgb(var(--ui-on-ink));
+  color: rgb(var(--ui-on-solid));
 }
 
-/* the signed-in initial: a quiet disc on the ink button */
+/* the signed-in initial: a quiet disc on the solid button */
 html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"] > span[class~="rounded-full"] {
   width: 18px;
   height: 18px;
-  background: rgb(var(--ui-on-ink) / 0.18);
-  color: rgb(var(--ui-on-ink));
+  background: rgb(var(--ui-on-solid) / 0.18);
+  color: rgb(var(--ui-on-solid));
   font: 600 10px/18px var(--ui-font-mono);
 }
 
 html.flat-theme [data-ui="home"] > header > nav > div:last-child > a[class~="bg-gray-900"] > svg {
   width: 12px;
   height: 12px;
-  color: rgb(var(--ui-on-ink) / 0.7);
+  color: rgb(var(--ui-on-solid) / 0.7);
 }
 
 html.flat-theme :is([data-ui="home"], [data-ui="legal"], [data-ui="key-usage"], [data-ui="not-found"]) :is(a, button):focus-visible {
@@ -1192,10 +1194,10 @@ html.flat-theme [data-ui="home"] > main > div > div:first-child .btn.btn-primary
   height: 44px;
   padding: 0 20px;
   gap: 10px;
-  border: 1px solid rgb(var(--ui-ink));
+  border: 1px solid rgb(var(--ui-solid-edge));
   border-radius: var(--ui-radius-md);
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
   font: 600 14px/20px var(--ui-font);
   box-shadow: none;
   transform: none;
@@ -1203,7 +1205,8 @@ html.flat-theme [data-ui="home"] > main > div > div:first-child .btn.btn-primary
 }
 
 html.flat-theme [data-ui="home"] > main > div > div:first-child .btn.btn-primary:hover {
-  background: rgb(var(--ui-ink) / 0.85);
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background: rgb(var(--ui-solid-hover));
 }
 
 html.flat-theme [data-ui="home"] > main > div > div:first-child .btn.btn-primary svg {
@@ -1600,10 +1603,10 @@ html.flat-theme [data-testid="compact-home"] :is(header a[class~="bg-gray-900"],
   min-height: 0;
   height: 30px;
   padding: 0 12px;
-  border: 1px solid rgb(var(--ui-ink));
+  border: 1px solid rgb(var(--ui-solid-edge));
   border-radius: var(--ui-radius-md);
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
   font: 600 13px/19.5px var(--ui-font);
   transition: background-color var(--ui-duration) var(--ui-ease);
 }
@@ -1617,7 +1620,8 @@ html.flat-theme [data-testid="compact-home"] main a[class~="bg-primary-600"] {
 }
 
 html.flat-theme [data-testid="compact-home"] :is(header a[class~="bg-gray-900"], main a[class~="bg-primary-600"]):hover {
-  background: rgb(var(--ui-ink) / 0.85);
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background: rgb(var(--ui-solid-hover));
 }
 
 html.flat-theme [data-testid="compact-home"] > main > div > img {
@@ -1930,13 +1934,14 @@ html.flat-theme [data-ui="not-found"] .btn.btn-secondary:hover {
 }
 
 html.flat-theme [data-ui="not-found"] .btn.btn-primary {
-  border: 1px solid rgb(var(--ui-ink));
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border: 1px solid rgb(var(--ui-solid-edge));
+  background: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
 }
 
 html.flat-theme [data-ui="not-found"] .btn.btn-primary:hover {
-  background: rgb(var(--ui-ink) / 0.85);
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background: rgb(var(--ui-solid-hover));
 }
 
 html.flat-theme [data-ui="not-found"] .btn svg {
@@ -1963,8 +1968,9 @@ html.flat-theme [data-ui="not-found"] > div[class~="z-10"] > p:last-child a {
 }
 
 /* ------------------------------------------------------------------ key usage */
-/* the console's language on a public page: a centred 40 / 500 title, one 42px field with its ink button, KPI-style
-   cards (hairline, radius 8, mono labels), hairline tables with mono numbers; ring strokes in the ink */
+/* the console's language on a public page: a centred 40 / 500 title, one 42px field with its solid button, KPI-style
+   cards (hairline, radius 8, mono labels), hairline tables with mono numbers; ring strokes in the accent (palette C
+   marks) */
 html.flat-theme [data-ui="key-usage"] > main {
   padding: clamp(56px, 9vh, 96px) var(--pub-gutter) clamp(72px, 10vh, 112px);
 }
@@ -2039,22 +2045,23 @@ html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-chil
   height: 16px;
 }
 
-/* 查询: the console's ink button at the field's height */
+/* 查询: the console's solid primary at the field's height */
 html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > button {
   height: 42px;
   padding: 0 18px;
   gap: 8px;
-  border: 1px solid rgb(var(--ui-ink));
+  border: 1px solid rgb(var(--ui-solid-edge));
   border-radius: var(--ui-radius-md);
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background: rgb(var(--ui-solid));
+  color: rgb(var(--ui-on-solid));
   font: 600 14px/20px var(--ui-font);
   transform: none;
   transition: background-color var(--ui-duration) var(--ui-ease), opacity var(--ui-duration) var(--ui-ease);
 }
 
 html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > button:hover:not(:disabled) {
-  background: rgb(var(--ui-ink) / 0.85);
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background: rgb(var(--ui-solid-hover));
 }
 
 html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div:first-child > button:disabled {
@@ -2072,7 +2079,8 @@ html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > p {
   color: rgb(var(--ui-muted));
 }
 
-/* the range picker after a query: a mono label, 28px range buttons (the current one in the ink) */
+/* the range picker after a query: a mono label, 28px range buttons (the current one a chosen option: the accent
+   tint, accent text and the accent edge, palette C) */
 html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] > div {
   gap: 6px;
 }
@@ -2102,9 +2110,9 @@ html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt
 }
 
 html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] button[class~="bg-primary-500"] {
-  border-color: rgb(var(--ui-ink));
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border-color: var(--ui-choice-edge);
+  background: rgb(var(--ui-primary-soft));
+  color: var(--ui-link);
 }
 
 html.flat-theme [data-ui="key-usage"] > main > div:nth-child(2) > div[class~="mt-4"] input.input-ring {
@@ -2187,8 +2195,8 @@ html.flat-theme [data-ui="key-usage"] main div[class~="rounded-2xl"][class~="p-8
   color: rgb(var(--ui-faint));
 }
 
-/* rings: the track in the grouped fill, the progress in the ink (the ring colours were decoration: each ring has
-   its title); the figures in the ring in mono */
+/* rings: the track in the grouped fill, the progress in the accent (palette C marks; the ring colours were
+   decoration: each ring has its title); the figures in the ring in mono */
 html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] > circle:first-child {
   stroke: rgb(var(--ui-subtle));
 }
@@ -2198,7 +2206,7 @@ html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] > circle {
 }
 
 html.flat-theme [data-ui="key-usage"] main svg[class~="w-44"] > circle.progress-ring {
-  stroke: rgb(var(--ui-ink));
+  stroke: rgb(var(--ui-primary));
 }
 
 /* the figures inside take the ring colour of their family inline (rgb(var(--theme-text-<family>-600))): the family
@@ -2295,19 +2303,19 @@ html.flat-theme [data-ui="key-usage"] main div[class~="gap-px"] > div > div:last
   color: rgb(var(--ui-ink));
 }
 
-/* the 7 / 30 / 90-day switch: the console's segmented control (hairline frame, ink thumb) */
+/* the 7 / 30 / 90-day switch: the console's segmented control (the grey track, the raised pill) */
 html.flat-theme [data-ui="key-usage"] main div[class~="inline-flex"][class~="rounded-lg"][class~="p-0.5"] {
   padding: 2px;
-  border: 1px solid rgb(var(--ui-line));
+  border: 1px solid rgb(var(--ui-track));
   border-radius: var(--ui-radius-lg);
-  background: rgb(var(--ui-surface));
+  background: rgb(var(--ui-track));
 }
 
 html.flat-theme [data-ui="key-usage"] main div[class~="inline-flex"][class~="rounded-lg"][class~="p-0.5"] > button {
   padding: 5px 12px;
   border-radius: var(--ui-radius-md);
   color: rgb(var(--ui-muted));
-  font: 600 12.5px/18px var(--ui-font);
+  font: 500 12.5px/18px var(--ui-font);
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
 
@@ -2317,8 +2325,10 @@ html.flat-theme [data-ui="key-usage"] main div[class~="inline-flex"][class~="rou
 }
 
 html.flat-theme [data-ui="key-usage"] main div[class~="inline-flex"][class~="rounded-lg"][class~="p-0.5"] > button[class~="bg-primary-500"] {
-  background: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 /* tables: mono labels in the head, 12.5px mono cells, hairline rows */
diff --git a/frontend/src/styles/console/pages/user.css b/frontend/src/styles/console/pages/user.css
index 1da08a0439c8..f668173f921a 100644
--- a/frontend/src/styles/console/pages/user.css
+++ b/frontend/src/styles/console/pages/user.css
@@ -190,8 +190,8 @@ html.flat-theme div[class~="fixed"][class~="z-[100000020]"] > div[class~="border
 }
 
 /* 2.3 Create / edit dialog (#key-form). Provider choice: the reference's dialog option card (REF §8.11: 8px, the
-   structural line, the grouped fill at 60 %, the control outline on hover); the chosen card gets the console's ink
-   edge (2px, like the segmented thumb and the account dialogs' option cards) and an ink check. The provider tiles are
+   structural line, the grouped fill at 60 %, the control outline on hover); the chosen card gets the accent edge (2px,
+   like the account dialogs' option cards; palette C) and an accent check. The provider tiles are
    platform identity (decision 2, data.css platform-chip): the reference's 24px logo square, 4px, 1px line. */
 html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > input[type="radio"] + span {
   gap: 8px;
@@ -210,9 +210,9 @@ html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label:hover >
 }
 
 html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > input[type="radio"]:checked + span {
-  border-color: rgb(var(--ui-ink));
+  border-color: rgb(var(--ui-primary));
   background-color: rgb(var(--ui-surface));
-  box-shadow: inset 0 0 0 1px rgb(var(--ui-ink));
+  box-shadow: inset 0 0 0 1px rgb(var(--ui-primary));
 }
 
 html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > input[type="radio"]:focus-visible + span {
@@ -237,8 +237,8 @@ html.flat-theme #key-form fieldset[data-tour="key-form-provider"] [data-ui~="pla
 html.flat-theme #key-form fieldset[data-tour="key-form-provider"] label > span[class~="absolute"][class~="rounded-full"] {
   top: 6px;
   right: 6px;
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-primary));
+  color: rgb(var(--ui-on-primary));
 }
 
 html.flat-theme #key-form fieldset[data-tour="key-form-provider"] > p {
@@ -1451,11 +1451,11 @@ html.flat-theme [data-ui="model-plaza"] > header > div > div:first-child > span[
 html.flat-theme [data-ui="model-plaza"] > header > div > a {
   height: 30px;
   padding: 0 12px;
-  border: 1px solid rgb(var(--ui-ink));
+  border: 1px solid rgb(var(--ui-solid-edge));
   border-radius: var(--ui-radius-md);
-  background-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-solid));
   background-image: none;
-  color: rgb(var(--ui-on-ink));
+  color: rgb(var(--ui-on-solid));
   font-size: 13px;
   font-weight: 600;
   line-height: 19.5px;
@@ -1464,7 +1464,8 @@ html.flat-theme [data-ui="model-plaza"] > header > div > a {
 }
 
 html.flat-theme [data-ui="model-plaza"] > header > div > a:hover {
-  background-color: rgb(var(--ui-ink) / 0.85);
+  border-color: rgb(var(--ui-solid-edge-hover));
+  background-color: rgb(var(--ui-solid-hover));
   box-shadow: none;
 }
 
@@ -1568,7 +1569,8 @@ html.flat-theme [data-ui="user-redeem"] svg[class~="animate-spin"][class~="text-
    a percentage and a bar, gone once covered). It is a state, but the state of a running job, not of a channel: the
    reference's status chip gives "running" the neutral tone (surface-subtle, ink-faint; colour is kept for outcomes:
    passed, failed, rate-limited, complete). So it takes the console's neutral callout ground, the title ink, the note
-   ink-soft, the percentage Mono, and an ink bar on the structural line; the channels' own health keeps its colours.
+   ink-soft, the percentage Mono, and an accent bar on the structural line (palette C marks); the channels' own health
+   keeps its colours.
    (The coordinator asked this file to decide; the page's other rules are the ops and channels agent's.) */
 html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"] {
   border-bottom-color: rgb(var(--ui-line));
@@ -1595,7 +1597,7 @@ html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"
 }
 
 html.flat-theme [data-ui="monitor-v2"] div[role="status"][class~="bg-blue-50/90"] div[role="progressbar"] > div {
-  background-color: rgb(var(--ui-ink));
+  background-color: rgb(var(--ui-primary));
 }
 
 /* 7.8 My orders keeps its table outside TablePageLayout, so the console's rule for an empty table wider than its card
diff --git a/frontend/src/styles/console/pages/users-groups-proxies-keys.css b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
index 2d1fc954c0e9..c8cb779a9db9 100644
--- a/frontend/src/styles/console/pages/users-groups-proxies-keys.css
+++ b/frontend/src/styles/console/pages/users-groups-proxies-keys.css
@@ -1529,16 +1529,17 @@ html.flat-theme [data-ui="proxy-create-tabs"] > div:first-child > button:focus-v
   outline-offset: -2px;
 }
 
-/* 12.2 Expiry presets (7 / 30 / 90 / 180 days): one control, the reference's segmented choice (REF §8.5: the structural
-   frame, 2px inset, 12.5 / 600 segments, the matching preset the ink thumb), as its 24 hours / 7 days / 30 days. */
+/* 12.2 Expiry presets (7 / 30 / 90 / 180 days): one control, the reference's segmented choice (REF §8.5 in palette C:
+   the grey track, 2px inset, 12.5 / 500 segments, the matching preset the raised pill at 600), as its 24 hours /
+   7 days / 30 days. The pill keeps the segment's transparent 1px edge (its fill and ring sit inside it). */
 html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"]:not(uipad[data-uipad]) {
   display: inline-flex;
   gap: 0;
   margin-bottom: 8px;
   padding: 2px;
-  border: 1px solid rgb(var(--ui-line));
+  border: 1px solid rgb(var(--ui-track));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
 }
 
 html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"] > button.btn-sm {
@@ -1550,7 +1551,7 @@ html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][cla
   color: rgb(var(--ui-muted));
   font-size: 12.5px;
   line-height: 18.75px;
-  font-weight: 600;
+  font-weight: 500;
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
 
@@ -1561,9 +1562,12 @@ html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][cla
 
 html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"] > button.btn-sm.btn-primary,
 html.flat-theme :is(#create-proxy-form, #edit-proxy-form) div[class~="mb-2"][class~="flex-wrap"] > button.btn-sm.btn-primary:hover {
-  border-color: rgb(var(--ui-ink));
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border-color: transparent;
+  background-color: rgb(var(--ui-thumb));
+  background-clip: padding-box;
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 /* 12.3 Quick add's parse result and the quality report's summary: neutral cards (1px line, the grouped fill), the report's
@@ -1657,15 +1661,16 @@ html.flat-theme [data-ui="subscription-guide-title"] ~ div div[class~="overflow-
   color: rgb(var(--ui-ink));
 }
 
-/* 13.3 Generate codes: the code-expiry choices are one control, the reference's segmented choice (the structural frame,
-   2px inset, 12.5 / 600 segments, the chosen one the ink thumb) instead of accent-tinted boxes. The frame is the grid of
-   the generate form (hook redeem-generate-form, RedeemView); the pad keeps the former button test's weight (0,8,3). */
+/* 13.3 Generate codes: the code-expiry choices are one control, the reference's segmented choice (palette C: the grey
+   track, 2px inset, 12.5 / 500 segments, the chosen one the raised pill at 600, inside its transparent 1px edge)
+   instead of accent-tinted boxes. The frame is the grid of the generate form (hook redeem-generate-form, RedeemView);
+   the pad keeps the former button test's weight (0,8,3). */
 html.flat-theme form[data-ui="redeem-generate-form"] > :where(div) > div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"]:not([data-uipad][data-uipad][data-uipad]) {
   gap: 0;
   padding: 2px;
-  border: 1px solid rgb(var(--ui-line));
+  border: 1px solid rgb(var(--ui-track));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
 }
 
 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"] {
@@ -1676,7 +1681,7 @@ html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"
   color: rgb(var(--ui-muted));
   font-size: 12.5px;
   line-height: 18.75px;
-  font-weight: 600;
+  font-weight: 500;
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
 
@@ -1686,9 +1691,12 @@ html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"
 }
 
 html.flat-theme div[class~="grid"][class~="grid-cols-2"][class~="sm:grid-cols-5"] > button[class~="rounded-lg"][class~="border"][class~="px-3"][class~="py-2"][class~="border-primary-500"] {
-  border-color: rgb(var(--ui-ink));
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  border-color: transparent;
+  background-color: rgb(var(--ui-thumb));
+  background-clip: padding-box;
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-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"]:focus-visible {
@@ -1778,7 +1786,8 @@ html.flat-theme div > [data-ui="redeem-result-body"] + div:last-child {
 
 /* 13.5 Announcement targeting: the card is the reference's option card (1px line, radius 8, the grouped fill at 60 %); 「所有
    用户 / 按条件」 is an either / or, drawn as the reference's segmented choice (the radios stay in the page for keyboards and
-   screen readers, visually hidden; the chosen label is the ink thumb; keyboard focus rings the segment); the condition
+   screen readers, visually hidden; the chosen label is the raised pill on the grey track, palette C; keyboard focus
+   rings the segment); the condition
    groups are cards on the surface without shadow; 「OR」 / 「AND」 counts in Geist Mono. */
 html.flat-theme [data-ui="announcement-targeting"] {
   padding: 14px;
@@ -1803,9 +1812,9 @@ html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-
   display: inline-flex;
   gap: 0;
   padding: 2px;
-  border: 1px solid rgb(var(--ui-line));
+  border: 1px solid rgb(var(--ui-track));
   border-radius: var(--ui-radius-lg);
-  background-color: rgb(var(--ui-surface));
+  background-color: rgb(var(--ui-track));
 }
 
 html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:not(uipad[data-uipad]) {
@@ -1816,7 +1825,7 @@ html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-
   color: rgb(var(--ui-muted));
   font-size: 12.5px;
   line-height: 18.75px;
-  font-weight: 600;
+  font-weight: 500;
   cursor: pointer;
   transition: color var(--ui-duration-slide) var(--ui-ease-out), background-color var(--ui-duration-slide) var(--ui-ease-out);
 }
@@ -1826,8 +1835,10 @@ html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-
 }
 
 html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label:where([data-ui~="targeting-option"]):has(> input[type="radio"]:checked) {
-  background-color: rgb(var(--ui-ink));
-  color: rgb(var(--ui-on-ink));
+  background-color: rgb(var(--ui-thumb));
+  color: rgb(var(--ui-ink));
+  font-weight: 600;
+  box-shadow: var(--ui-thumb-shadow);
 }
 
 html.flat-theme [data-ui="announcement-targeting"] > div:first-child > div:last-child > label > input[type="radio"] {
diff --git a/frontend/src/styles/console/shell.css b/frontend/src/styles/console/shell.css
index 017a6c3719ed..af90f0a683cc 100644
--- a/frontend/src/styles/console/shell.css
+++ b/frontend/src/styles/console/shell.css
@@ -33,16 +33,17 @@ html.flat-theme {
   --ui-shell-header-h: calc(var(--ui-shell-pad-y) + var(--ui-shell-row));
   --ui-shell-pad-top: var(--ui-shell-gap);
   --ui-shell-pad-bottom: var(--ui-shell-pad-y);
-  /* Sidebar text and icons are ink at an alpha (REF §8.1: text 50 %, icons 30 %). On the canvas, the hover fill and
-     the active tint the reference's 3.68:1 / 2.03:1 need 58 % (4.69-4.83:1) and 46 % (3.18-3.24:1); REF §13's 56 % /
-     44 % pass on the canvas only (shell_calc.py). Dark: the reference's 50 % passes, icons need 36 % (3.08:1). */
-  --ui-shell-nav-fg: 0.58;
-  --ui-shell-nav-icon: 0.46;
+  /* Sidebar text and icons are ink at an alpha (REF §8.1: text 50 %, icons 30 %). With palette C's softer ink the
+     alphas rise so the nav keeps its greys: 66 % text (4.98-5.21:1 on the canvas, the hover fill and the active
+     tint) and 50 % icons (3.11-3.19:1). Dark (graphite): 56 % text (4.55:1 on hover, 5.27:1 on the canvas), 40 %
+     icons (3.07-3.34:1). */
+  --ui-shell-nav-fg: 0.66;
+  --ui-shell-nav-icon: 0.5;
 }
 
 html.flat-theme.dark {
-  --ui-shell-nav-fg: 0.5;
-  --ui-shell-nav-icon: 0.36;
+  --ui-shell-nav-fg: 0.56;
+  --ui-shell-nav-icon: 0.4;
 }
 
 /* --ui-header-h (tokens.css) is the sticky header keyboard focus must clear (behaviour.css B3.4): nothing sticks on
diff --git a/frontend/src/styles/console/tokens.css b/frontend/src/styles/console/tokens.css
index 99e958411688..b2f83dff17d7 100644
--- a/frontend/src/styles/console/tokens.css
+++ b/frontend/src/styles/console/tokens.css
@@ -12,7 +12,9 @@
  *
  * Formats: colours consumed through rgb(var(--x) / <alpha>) are RGB channels ("r g b"); --ui-link is a colour;
  * shadows, fonts, sizes and motion are full values. The reference draws dark lines, hovers and soft fills as
- * white or colour at an alpha; here they are composited over the dark surface (#1a1a1a), where they are drawn. */
+ * white or colour at an alpha; here they are opaque: palette C's graphite steps for the lines and hovers, the accent
+ * and identity soft fills composited over the surface they sit on (#212125), the status soft fills and the uptime
+ * bars as composited over the reference's surface (#1a1a1a). */
 
 /* ------------------------------------------------------------------ fonts */
 /* Geist 1.800 and Geist Mono 1.700 (npm `geist` 1.7.2, SIL OFL 1.1: assets/fonts/geist/OFL.txt), variable
@@ -65,46 +67,65 @@
 }
 
 /* ------------------------------------------------------------------ roles (light) */
+/* Palette C (owner approval 2026-09-30; artifacts/tmp/ui-tune/palette/PREVIEW.md): the neutrals are shadcn's zinc
+   (a faint cool tint) instead of pure grey, the ink is softened off black, colour carries meaning (the accent does
+   the selecting, the data keeps its hues), and the fills that were ink read the fill roles below. */
 :root.flat-theme {
   /* surfaces: canvas = page and sidebar (--background), surface = cards, tables, controls, menus, dialogs;
      subtle = grouped fills and chips; sunk = wells; raised = popovers (the reference draws them on surface) */
   --ui-canvas: 250 250 250;
   --ui-surface: 255 255 255;
-  --ui-subtle: 245 245 245;
-  --ui-sunk: 247 247 247;
+  --ui-subtle: 244 244 245;
+  --ui-sunk: 247 247 248;
   --ui-raised: 255 255 255;
-  --ui-hover: 239 239 239;
-  --ui-active: 241 241 241;
+  --ui-hover: 239 239 241;
+  --ui-active: 238 238 241;
   /* Two line tiers. --ui-line: every structural line (card edges, row separators, the sidebar edge, toolbar
      rules). --ui-line-strong: the reference's control outline (buttons, filter pills, tooltips), which a label
      identifies anyway. --ui-control-line: the outline of form controls (inputs, selects, date fields,
-     checkboxes); the reference's #e0e0e0 is 1.32:1, #8e8e8e is the nearest grey at >= 3:1 on the surface, the
-     canvas and the grouped fill (REF-CONSOLE §13 gives #949494 for white, #919191 for the canvas).
-     --ui-line-focus: the reference's hover / focus outline of native selects. */
-  --ui-line: 237 237 237;
-  --ui-line-strong: 224 224 224;
-  --ui-line-focus: 189 189 189;
-  --ui-control-line: 142 142 142;
-  /* Text. ink-soft = ink at 66 % (values, filter pills, tooltip descriptions), composited over white.
-     muted (#737373) and muted-2 (#a3a3a3, placeholders and captions: --ui-faint) read 4.35:1 / 2.31:1 on the
-     grouped fill and 4.12:1 / 2.19:1 on hover; #6c6c6c is the nearest grey at >= 4.5:1 on every neutral fill.
-     --ui-label is the mono label's grey (ink-faint #8a8a8a, 3.45:1): #737373 holds 4.5:1 on the surfaces labels
-     sit on (white 4.74, canvas 4.54, the group-row tint #f9f9f9 4.50; REF-CONSOLE §13). */
-  --ui-ink: 10 10 10;
-  --ui-ink-soft: 93 93 93;
-  --ui-on-ink: 255 255 255;
-  --ui-muted: 108 108 108;
-  --ui-faint: 108 108 108;
-  --ui-label: 115 115 115;
+     checkboxes): #8c8c94 holds >= 3:1 on the surface, the canvas and the grouped fill (the reference's #e0e0e0 is
+     1.32:1). --ui-line-focus: the reference's hover / focus outline of native selects. */
+  --ui-line: 232 232 235;
+  --ui-line-strong: 220 220 224;
+  --ui-line-focus: 185 185 192;
+  --ui-control-line: 140 140 148;
+  /* Text (zinc). ink #1f1f23 (16.4:1 on white; #0a0a0a read black and heavy in dense rows); ink-soft #52525b
+     (values, filter pills, tooltip descriptions, secondary figures); muted and faint (placeholders, captions)
+     #66666e: these hold >= 4.5:1 on every neutral fill (surface, canvas, the grouped fill, hover). --ui-label, the
+     mono label's grey, #6e6e76 holds it on the fills labels sit on (surface 5.05, canvas 4.84, grouped 4.60). */
+  --ui-ink: 31 31 35;
+  --ui-ink-soft: 82 82 91;
+  --ui-muted: 102 102 110;
+  --ui-faint: 102 102 110;
+  --ui-label: 110 110 118;
   /* Accent (the green #168a49 carries white at 4.41:1). The fill is #168848 (white 4.52:1, REF-CONSOLE §13);
-     accent text and links are #147c42, the nearest at >= 4.5:1 on every neutral fill and on the soft fill.
-     Primary actions and the segmented thumb are ink with --ui-on-ink, not the accent (REF-CONSOLE §8.3, §8.5). */
+     accent text and links are #147c42, the nearest at >= 4.5:1 on every neutral fill and on the soft fill. */
   --ui-primary: 22 136 72;
   --ui-primary-hover: 20 124 66;
   --ui-primary-soft: 234 250 240;
   --ui-on-primary: 255 255 255;
   --ui-link: #147c42;
   --ui-focus: 22 136 72;
+  /* Fill roles (palette C: none of them is the ink any more).
+     solid: a primary action (.btn-primary and every hand-made primary): the text-safe accent with white text
+       (5.26:1), a deeper step on hover (6.69:1); its edge is the fill (the dark theme lifts it a step and keeps it
+       on hover).
+     track / thumb: a segmented control is a grey track whose current segment is a raised pill (the surface, a soft
+       shadow and a 1px inset ring #83838b: 3.30:1 on the track, 3.76:1 on the pill, so the ring marks the state),
+       its label the ink at 600.
+     choice edge: a chosen option that stands on its own and the current page are the accent tint
+       (--ui-primary-soft) with accent text (--ui-link) and this 1px accent edge / ring (5.26:1 on the surface; the
+       tint alone is 1.05:1). Marks (a chosen card's tile and edge, progress bars, radio and step dots, switches)
+       are the accent (--ui-primary). */
+  --ui-solid: 20 124 66;
+  --ui-solid-hover: 16 106 56;
+  --ui-solid-edge: 20 124 66;
+  --ui-solid-edge-hover: 16 106 56;
+  --ui-on-solid: 255 255 255;
+  --ui-track: 240 240 242;
+  --ui-thumb: 255 255 255;
+  --ui-thumb-shadow: 0 1px 2px rgb(24 24 27 / 0.08), inset 0 0 0 1px #83838b;
+  --ui-choice-edge: rgb(20 124 66);
   /* Status colours (text-safe). success #22a050 (3.38:1), danger #dc3c3c (4.42:1) and warning #b45309 (4.37:1
      on hover) move to the nearest value at >= 4.5:1 on every neutral fill; info and purple already pass.
      The soft fills are the reference's. */
@@ -171,36 +192,47 @@
 }
 
 /* ------------------------------------------------------------------ roles (dark) */
+/* Palette C: layered graphite lifted off black (Linear's ground): canvas #1a1a1d (L* 9.4, was #0f0f0f at 4.3),
+   surface #212125 (L* 12.9, was 9.3), grouped #29292e, hover #2f2f35, a faint cool tint; zinc text greys. */
 :root.flat-theme.dark {
-  --ui-canvas: 15 15 15;
-  --ui-surface: 26 26 26;
-  --ui-subtle: 35 35 35;
-  --ui-sunk: 20 20 20;
-  --ui-raised: 26 26 26;
-  /* white at 7 / 11 % */
-  --ui-hover: 42 42 42;
-  --ui-active: 51 51 51;
-  /* white at 14 / 24 / 42 %; the form-control line is the nearest grey at >= 3:1 on the canvas, the surface and
-     the grouped fill (white 24 % is 2.19:1; REF-CONSOLE §13 gives white 33-34 %) */
-  --ui-line: 58 58 58;
-  --ui-line-strong: 81 81 81;
-  --ui-line-focus: 122 122 122;
-  --ui-control-line: 109 109 109;
-  --ui-ink: 242 242 242;
-  --ui-ink-soft: 169 169 169;
-  --ui-on-ink: 10 10 10;
-  --ui-muted: 179 179 179;
-  /* muted-2 #8c8c8c reads 4.27:1 on hover; #919191 is the nearest at >= 4.5:1 */
-  --ui-faint: 145 145 145;
-  --ui-label: 156 156 156;
-  /* the mint accent with ink on it; soft = mint at 16 % */
+  --ui-canvas: 26 26 29;
+  --ui-surface: 33 33 37;
+  --ui-subtle: 41 41 46;
+  --ui-sunk: 29 29 32;
+  --ui-raised: 37 37 41;
+  --ui-hover: 47 47 53;
+  --ui-active: 54 54 60;
+  /* the form-control line holds >= 3:1 on the canvas, the surface, the grouped fill and hover */
+  --ui-line: 58 58 65;
+  --ui-line-strong: 74 74 82;
+  --ui-line-focus: 110 110 120;
+  --ui-control-line: 128 128 138;
+  --ui-ink: 232 232 236;
+  --ui-ink-soft: 184 184 192;
+  --ui-muted: 176 176 185;
+  /* faint and the label hold >= 4.5:1 on the canvas, the surface, the grouped fill and hover */
+  --ui-faint: 160 160 169;
+  --ui-label: 163 163 172;
+  /* the mint accent with ink on it; soft = mint at 16 % over the surface */
   --ui-primary: 182 247 200;
   --ui-primary-hover: 166 225 183;
-  --ui-primary-soft: 51 62 54;
+  --ui-primary-soft: 57 67 63;
   --ui-on-primary: 10 10 10;
   --ui-link: #b6f7c8;
   --ui-focus: 182 247 200;
-  /* status colours; soft = the colour at 18 % */
+  /* fill roles: the primary action is a deep green (white 4.96:1) with a lighter 1px green edge (Radix-style),
+     the pill a lighter graphite with a 1px inset ring #7f7f88 (3.65:1 on the track), the choice edge / page ring
+     mint at 55 % (3.76:1 on the tint, 4.92:1 on the surface) */
+  --ui-solid: 29 128 73;
+  --ui-solid-hover: 26 115 65;
+  --ui-solid-edge: 47 160 94;
+  --ui-solid-edge-hover: 47 160 94;
+  --ui-on-solid: 255 255 255;
+  --ui-track: 41 41 46;
+  --ui-thumb: 60 60 67;
+  --ui-thumb-shadow: 0 1px 2px rgb(0 0 0 / 0.45), inset 0 0 0 1px #7f7f88;
+  --ui-choice-edge: rgb(182 247 200 / 0.55);
+  /* status colours; soft = the colour at 18 % over the reference's surface #1a1a1a (kept on palette C's #212125) */
   --ui-success: 74 222 128;
   --ui-success-soft: 35 61 44;
   --ui-danger: 248 113 113;
@@ -211,7 +243,8 @@
   --ui-info-soft: 48 57 67;
   --ui-purple: 196 181 253;
   --ui-purple-soft: 57 54 67;
-  --ui-shadow-popover: 0 6px 20px rgb(0 0 0 / 0.55);
+  /* a popover lifts off the graphite by its shadow and a faint white hairline */
+  --ui-shadow-popover: 0 8px 24px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.04);
   --ui-shadow-overlay: 0 18px 50px rgb(0 0 0 / 0.65);
   --ui-scrim: 0 0 0 / 0.6;
 }
@@ -220,34 +253,34 @@
 /* gray / slate / zinc / neutral / stone / accent share the gray variables (tailwind.config.js); each shade has
    a fill, a line and a text role. The dark-* family is upstream's dark-mode palette. */
 :root.flat-theme {
-  /* the reference's grey ladder at the light end, Tailwind neutral in between, ink at 950 */
+  /* Tailwind zinc (palette C) with the roles' fills and lines at the light end */
   --theme-color-gray-50: 250 250 250;
-  --theme-color-gray-100: 245 245 245;
-  --theme-color-gray-200: 237 237 237;
-  --theme-color-gray-300: 224 224 224;
-  --theme-color-gray-400: 163 163 163;
-  --theme-color-gray-500: 115 115 115;
-  --theme-color-gray-600: 82 82 82;
-  --theme-color-gray-700: 64 64 64;
-  --theme-color-gray-800: 38 38 38;
-  --theme-color-gray-900: 23 23 23;
-  --theme-color-gray-950: 10 10 10;
+  --theme-color-gray-100: 244 244 245;
+  --theme-color-gray-200: 232 232 235;
+  --theme-color-gray-300: 220 220 224;
+  --theme-color-gray-400: 161 161 170;
+  --theme-color-gray-500: 113 113 122;
+  --theme-color-gray-600: 82 82 91;
+  --theme-color-gray-700: 63 63 70;
+  --theme-color-gray-800: 39 39 42;
+  --theme-color-gray-900: 24 24 27;
+  --theme-color-gray-950: 9 9 11;
   /* borders: upstream's card (100) and default (200) borders are the structural line, 300 the control outline,
      400 the focus outline */
-  --theme-line-gray-100: 237 237 237;
-  --theme-line-gray-200: 237 237 237;
-  --theme-line-gray-300: 224 224 224;
-  --theme-line-gray-400: 189 189 189;
+  --theme-line-gray-100: 232 232 235;
+  --theme-line-gray-200: 232 232 235;
+  --theme-line-gray-300: 220 220 224;
+  --theme-line-gray-400: 185 185 192;
   /* text: every shade upstream uses for secondary text meets 4.5:1 on the neutral fills; 300 stays the
-     reference's decorative muted-2 (upstream's own use: dividers, idle sort arrows) */
-  --theme-text-gray-300: 163 163 163;
-  --theme-text-gray-400: 108 108 108;
-  --theme-text-gray-500: 105 105 105; /* >= 4.5:1 on gray-200 fills (4.68) */
-  --theme-text-gray-600: 82 82 82;
-  --theme-text-gray-700: 64 64 64;
-  --theme-text-gray-800: 38 38 38;
-  --theme-text-gray-900: 10 10 10;
-  --theme-text-gray-950: 10 10 10;
+     reference's decorative muted-2 (upstream's own use: dividers, idle sort arrows); 900 / 950 are the ink */
+  --theme-text-gray-300: 161 161 170;
+  --theme-text-gray-400: 102 102 110;
+  --theme-text-gray-500: 99 99 107; /* >= 4.5:1 on gray-200 fills (4.87) */
+  --theme-text-gray-600: 91 91 99;
+  --theme-text-gray-700: 63 63 70;
+  --theme-text-gray-800: 39 39 42;
+  --theme-text-gray-900: 31 31 35;
+  --theme-text-gray-950: 31 31 35;
 
   /* dark-*: 950 canvas, 900 well, 800 surface, 700 grouped fill; the light end is text on dark */
   --theme-color-dark-50: 242 242 242;
@@ -278,23 +311,46 @@
 }
 
 /* Dark mode: upstream pairs the light text shades (100-500) with dark:, and the plain 600-900 shades appear
-   where a template has no dark variant, so every text shade is a readable light grey; lines are the white
-   alphas composited over the surface. */
+   where a template has no dark variant, so every text shade is a readable light grey (zinc: 400 is ink-soft, 500
+   and 600 muted, >= 4.5:1 on the dark-600 fill); lines follow the graphite surfaces. Upstream's dark-* family
+   follows the surfaces too: 950 canvas, 900 well, 800 surface, 700 grouped fill. */
 :root.flat-theme.dark {
-  --theme-text-gray-600: 179 179 179;
-  --theme-text-gray-700: 212 212 212;
-  --theme-text-gray-800: 229 229 229;
-  --theme-text-gray-900: 242 242 242;
-  --theme-text-gray-950: 242 242 242;
-  --theme-line-gray-100: 42 42 42;
-  --theme-line-gray-200: 58 58 58;
-  --theme-line-gray-300: 81 81 81;
-  --theme-line-gray-400: 122 122 122;
+  --theme-text-gray-100: 232 232 236;
+  --theme-text-gray-200: 221 221 226;
+  --theme-text-gray-300: 204 204 210;
+  --theme-text-gray-400: 184 184 192;
+  --theme-text-gray-500: 176 176 185;
+  --theme-text-gray-600: 176 176 185;
+  --theme-text-gray-700: 204 204 210;
+  --theme-text-gray-800: 221 221 226;
+  --theme-text-gray-900: 232 232 236;
+  --theme-text-gray-950: 232 232 236;
+  --theme-line-gray-100: 47 47 53;
+  --theme-line-gray-200: 58 58 65;
+  --theme-line-gray-300: 74 74 82;
+  --theme-line-gray-400: 110 110 120;
+  --theme-color-dark-950: 26 26 29;
+  --theme-color-dark-900: 29 29 32;
+  --theme-color-dark-800: 33 33 37;
+  --theme-color-dark-700: 41 41 46;
+  --theme-color-dark-600: 63 63 70;
+  --theme-line-dark-950: 33 33 37;
+  --theme-line-dark-900: 41 41 46;
+  --theme-line-dark-800: 47 47 53;
+  --theme-line-dark-700: 58 58 65;
+  --theme-line-dark-600: 74 74 82;
+  --theme-line-dark-500: 104 104 114;
+  --theme-line-dark-400: 128 128 138;
+  --theme-text-dark-100: 232 232 236;
+  --theme-text-dark-200: 214 214 219;
+  --theme-text-dark-300: 184 184 192;
+  --theme-text-dark-400: 163 163 172;
+  --theme-text-dark-500: 160 160 169;
+  --theme-text-dark-600: 128 128 138;
 }
 
-/* Secondary text on a dark surface: the whole dark theme and, in the light theme, the boxes that stay dark
-   there too (terminal output, dark tooltips, code panes), which the templates mark `theme-dark-surface`. */
-:root.flat-theme.dark,
+/* Secondary text in the light theme's boxes that stay dark (terminal output, dark tooltips, code panes), which the
+   templates mark `theme-dark-surface`; in the dark theme those boxes keep the same greys. */
 :root.flat-theme .theme-dark-surface {
   --theme-text-gray-100: 242 242 242;
   --theme-text-gray-200: 229 229 229;
@@ -407,13 +463,13 @@
   --theme-text-indigo-600: var(--theme-text-info-600);
 }
 
-/* Dark mode: the accent fills are mint with ink on them (--theme-on-fill), its tints are mint over the surface
-   (8 / 16 / 24 / 32 %); the deep 800-950 shades stay (upstream's dark: tints use them at low opacity). */
+/* Dark mode: the accent fills are mint with ink on them (--theme-on-fill), its tints are mint over the graphite
+   surface (8 / 16 / 24 / 32 %); the deep 800-950 shades stay (upstream's dark: tints use them at low opacity). */
 :root.flat-theme.dark {
-  --theme-color-primary-50: 38 43 40;
-  --theme-color-primary-100: 51 62 54;
-  --theme-color-primary-200: 63 79 68;
-  --theme-color-primary-300: 76 97 82;
+  --theme-color-primary-50: 45 50 50;
+  --theme-color-primary-100: 57 67 63;
+  --theme-color-primary-200: 69 84 76;
+  --theme-color-primary-300: 81 101 89;
   --theme-color-primary-400: 204 249 216;
   --theme-color-primary-500: 182 247 200;
   --theme-color-primary-600: 166 225 183;
@@ -555,47 +611,47 @@
 
 :root.flat-theme.dark {
   --ui-id-orange: 253 186 116;
-  --ui-id-orange-soft: 57 38 25;
-  --ui-id-orange-line: 115 62 24;
+  --ui-id-orange-soft: 63 44 35;
+  --ui-id-orange-line: 119 66 31;
   --ui-id-amber: 252 211 77;
-  --ui-id-amber-soft: 57 44 24;
-  --ui-id-amber-line: 114 79 20;
+  --ui-id-amber-soft: 63 50 33;
+  --ui-id-amber-line: 118 83 27;
   --ui-id-emerald: 110 231 183;
-  --ui-id-emerald-soft: 25 48 40;
-  --ui-id-emerald-line: 22 90 67;
+  --ui-id-emerald-soft: 31 54 50;
+  --ui-id-emerald-line: 26 94 74;
   --ui-id-green: 134 239 172;
-  --ui-id-green-soft: 27 50 36;
-  --ui-id-green-line: 29 94 53;
+  --ui-id-green-soft: 33 56 45;
+  --ui-id-green-line: 33 99 60;
   --ui-id-teal: 94 234 212;
-  --ui-id-teal-soft: 25 48 46;
-  --ui-id-teal-line: 24 89 82;
+  --ui-id-teal-soft: 31 54 55;
+  --ui-id-teal-line: 28 93 89;
   --ui-id-cyan: 103 232 249;
-  --ui-id-cyan-soft: 23 48 52;
-  --ui-id-cyan-line: 18 88 100;
+  --ui-id-cyan-soft: 29 54 62;
+  --ui-id-cyan-line: 22 93 107;
   --ui-id-sky: 125 211 252;
-  --ui-id-sky-soft: 24 45 55;
-  --ui-id-sky-line: 21 82 109;
+  --ui-id-sky-soft: 30 51 64;
+  --ui-id-sky-line: 25 86 115;
   --ui-id-blue: 147 197 253;
-  --ui-id-blue-soft: 31 41 57;
-  --ui-id-blue-line: 39 68 114;
+  --ui-id-blue-soft: 37 47 66;
+  --ui-id-blue-line: 43 72 121;
   --ui-id-indigo: 165 180 252;
-  --ui-id-indigo-soft: 36 37 56;
-  --ui-id-indigo-line: 55 56 112;
+  --ui-id-indigo-soft: 42 43 66;
+  --ui-id-indigo-line: 59 61 119;
   --ui-id-violet: 196 181 253;
-  --ui-id-violet-soft: 42 35 57;
-  --ui-id-violet-line: 71 52 114;
+  --ui-id-violet-soft: 48 41 66;
+  --ui-id-violet-line: 75 57 121;
   --ui-id-purple: 216 180 254;
-  --ui-id-purple-soft: 46 34 57;
-  --ui-id-purple-line: 83 50 114;
+  --ui-id-purple-soft: 52 40 66;
+  --ui-id-purple-line: 87 54 121;
   --ui-id-fuchsia: 240 171 252;
-  --ui-id-fuchsia-soft: 53 32 56;
-  --ui-id-fuchsia-line: 102 44 111;
+  --ui-id-fuchsia-soft: 59 38 65;
+  --ui-id-fuchsia-line: 107 48 118;
   --ui-id-pink: 249 168 212;
-  --ui-id-pink-soft: 55 32 44;
-  --ui-id-pink-line: 110 44 77;
+  --ui-id-pink-soft: 61 38 53;
+  --ui-id-pink-line: 114 49 83;
   --ui-id-rose: 253 164 175;
-  --ui-id-rose-soft: 57 31 36;
-  --ui-id-rose-line: 113 41 53;
+  --ui-id-rose-soft: 63 37 45;
+  --ui-id-rose-line: 117 45 60;
   --ui-id-zinc: 212 212 216;
   --ui-id-zinc-soft: 39 39 42;
   --ui-id-zinc-line: 82 82 91;
@@ -682,25 +738,26 @@
 
 /* ------------------------------------------------------------------ charts and scrollbars */
 /* Read by composables/usePresentationColors.ts (REF-CONSOLE §8.14): grid = the structural line, axis text =
-   muted; categorical series 1-12 (#rrggbb, consumers append a hex alpha) = the usage-by-model bar (ink, accent,
-   indigo, amber, cyan) followed by the usage series; "other" = #9ca3af; status marks for charts drawn with
-   upstream hue literals. The distribution charts list every value in a table beside the chart, so the series
-   are not the only carrier of the data. */
+   muted; categorical series 1-12 (#rrggbb, consumers append a hex alpha) = the reference's usage blue, the accent,
+   amber, indigo, cyan, pink (palette C: series 1 was the ink, and the leading slice of a distribution is usually
+   most of it, so every donut was a black ring; hue neighbours differ), followed by the usage series; "other" =
+   #9ca3af; status marks for charts drawn with upstream hue literals. The distribution charts list every value in
+   a table beside the chart, so the series are not the only carrier of the data. */
 :root.flat-theme {
-  --theme-chart-text: #5d5d5d;
-  --theme-chart-grid: #ededed;
-  --theme-chart-axis: #6c6c6c;
-  --theme-chart-axis-grid: #f5f5f5;
+  --theme-chart-text: #52525b;
+  --theme-chart-grid: #e8e8eb;
+  --theme-chart-axis: #66666e;
+  --theme-chart-axis-grid: #f4f4f5;
   --theme-chart-tooltip: #ffffff;
-  --theme-chart-title: #0a0a0a;
-  --theme-chart-body: #6c6c6c;
+  --theme-chart-title: #1f1f23;
+  --theme-chart-body: #66666e;
   --theme-chart-gray: #9ca3af;
-  --theme-chart-series-1: #0a0a0a;
+  --theme-chart-series-1: #3975d8;
   --theme-chart-series-2: #168848;
-  --theme-chart-series-3: #6366f1;
-  --theme-chart-series-4: #d97706;
+  --theme-chart-series-3: #d97706;
+  --theme-chart-series-4: #6366f1;
   --theme-chart-series-5: #0891b2;
-  --theme-chart-series-6: #3975d8;
+  --theme-chart-series-6: #db2777;
   --theme-chart-series-7: #62cc49;
   --theme-chart-series-8: #c32517;
   --theme-chart-series-9: #e481fb;
@@ -712,21 +769,24 @@
   --theme-chart-warning: #d97706;
   --theme-chart-danger: #dc3c3c;
   --theme-chart-purple: #7850c8;
-  --theme-scrollbar-thumb: #d4d4d4;
-  --theme-scrollbar-hover: #a3a3a3;
+  --theme-scrollbar-thumb: #d4d4d8;
+  --theme-scrollbar-hover: #a1a1aa;
 }
 
 :root.flat-theme.dark {
-  --theme-chart-text: #a9a9a9;
-  --theme-chart-grid: #3a3a3a;
-  --theme-chart-axis: #b3b3b3;
-  --theme-chart-axis-grid: #232323;
-  --theme-chart-tooltip: #1a1a1a;
-  --theme-chart-title: #f2f2f2;
-  --theme-chart-body: #b3b3b3;
-  --theme-chart-series-1: #f2f2f2;
+  --theme-chart-text: #b8b8c0;
+  --theme-chart-grid: #3a3a41;
+  --theme-chart-axis: #b0b0b9;
+  --theme-chart-axis-grid: #29292e;
+  --theme-chart-tooltip: #252529;
+  --theme-chart-title: #e8e8ec;
+  --theme-chart-body: #b0b0b9;
+  --theme-chart-series-1: #6d9eeb;
   --theme-chart-series-2: #b6f7c8;
-  --theme-chart-series-6: #1f5bbc;
+  --theme-chart-series-3: #d98a1c;
+  --theme-chart-series-4: #7c83f2;
+  --theme-chart-series-5: #1aa3c2;
+  --theme-chart-series-6: #e0569a;
   --theme-chart-series-7: #44af27;
   --theme-chart-series-8: #be1e10;
   --theme-chart-series-9: #c664dc;
@@ -737,8 +797,8 @@
   --theme-chart-warning: #fbbf24;
   --theme-chart-danger: #f87171;
   --theme-chart-purple: #c4b5fd;
-  --theme-scrollbar-thumb: #3d3d3d;
-  --theme-scrollbar-hover: #5c5c5c;
+  --theme-scrollbar-thumb: #45454d;
+  --theme-scrollbar-hover: #62626c;
 }
 
 /* ------------------------------------------------------------------ keyframes */

From 7abe4c9af22bfa9b9d07ef09e421e48fcf477810 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Thu, 1 Oct 2026 02:17:12 +0800
Subject: [PATCH 3/5] fix(i18n): escape @ in the proxy copy-format label

vue-i18n reads a bare @ as the start of a linked message, so the
"username:password@host:port" label failed to compile
(localesMessageCompile spec, which CI does not run). Use the literal {'@'}.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/i18n/locales/en/admin/resources.ts | 2 +-
 frontend/src/i18n/locales/zh/admin/resources.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/i18n/locales/en/admin/resources.ts b/frontend/src/i18n/locales/en/admin/resources.ts
index 7f1b48ff0201..11be0bc7f983 100644
--- a/frontend/src/i18n/locales/en/admin/resources.ts
+++ b/frontend/src/i18n/locales/en/admin/resources.ts
@@ -77,7 +77,7 @@ export default {
       copyFormats: 'Choose a copy format',
       copyFormatStandard: 'Standard format',
       copyFormatHostPortUserPass: 'host:port:username:password',
-      copyFormatUserPassHost: 'username:password@host:port',
+      copyFormatUserPassHost: "username:password{'@'}host:port",
       copyFormatHostPort: 'host:port',
       urlCopied: 'Proxy URL copied',
       searchProxies: 'Search proxies...',
diff --git a/frontend/src/i18n/locales/zh/admin/resources.ts b/frontend/src/i18n/locales/zh/admin/resources.ts
index 52f2200a364a..6d004017b643 100644
--- a/frontend/src/i18n/locales/zh/admin/resources.ts
+++ b/frontend/src/i18n/locales/zh/admin/resources.ts
@@ -111,7 +111,7 @@ export default {
       copyFormats: '选择复制格式',
       copyFormatStandard: '标准格式',
       copyFormatHostPortUserPass: '主机:端口:用户名:密码',
-      copyFormatUserPassHost: '用户名:密码@主机:端口',
+      copyFormatUserPassHost: "用户名:密码{'@'}主机:端口",
       copyFormatHostPort: '主机:端口',
       urlCopied: '代理 URL 已复制',
       allProtocols: '全部协议',

From 1434e6d68574c6fcb1b99fef88844b3dce80d096 Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Thu, 1 Oct 2026 03:37:29 +0800
Subject: [PATCH 4/5] style(ui): stacked headers darken only the hovered label;
 no empty sort box line

Hovering a part label darkened the host label too (the whole-cell hover
rule), so it was unclear which column a click sorts; an unsorted part kept an
empty 11px sort box that wrapped onto a line of its own in narrow headers.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/src/styles/console/data.css   | 6 ++++++
 frontend/src/styles/console/tables.css | 9 +++++++++
 2 files changed, 15 insertions(+)

diff --git a/frontend/src/styles/console/data.css b/frontend/src/styles/console/data.css
index 204eb87ae569..00f4141f50e8 100644
--- a/frontend/src/styles/console/data.css
+++ b/frontend/src/styles/console/data.css
@@ -215,6 +215,12 @@ html.flat-theme .table-wrapper .table-header .sticky-header-cell:last-child {
    to, its .mono-label overrides it) */
 html.flat-theme .table-wrapper .table-header .sticky-header-cell[aria-sort]:hover {
   background-color: rgb(var(--ui-surface));
+}
+
+/* a stacked header (tables.css) darkens only the label under the pointer, so it is clear which column a click sorts:
+   the host's own label here, each part's label in tables.css */
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[aria-sort]:not([data-stack]):hover,
+html.flat-theme .table-wrapper .table-header .sticky-header-cell[aria-sort][data-stack] > div > :not([data-ui="th-subs"]):hover {
   color: rgb(var(--ui-ink-soft));
 }
 
diff --git a/frontend/src/styles/console/tables.css b/frontend/src/styles/console/tables.css
index deba664ae34c..0d22fe13ed37 100644
--- a/frontend/src/styles/console/tables.css
+++ b/frontend/src/styles/console/tables.css
@@ -157,6 +157,15 @@ html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"] > button[data
   display: none;
 }
 
+/* an unsorted part draws no arrow, so its button takes no width (it wrapped onto a line of its own in narrow headers);
+   it keeps its box while it has keyboard focus so the focus ring stays visible */
+html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"]:not([data-sort="ascending"], [data-sort="descending"]) > button[data-ui="th-sub-sort"]:not(:focus-visible) {
+  width: 0;
+  flex-basis: 0;
+  margin-left: -4px;
+  overflow: hidden;
+}
+
 html.flat-theme .table-wrapper .table-header div[data-ui="th-sub"]:is([data-sort="ascending"], [data-sort="descending"]) > button[data-ui="th-sub-sort"]::before {
   content: '';
   width: 11px;

From 14789877c3880c53412c126cf19dbc65b5797f1c Mon Sep 17 00:00:00 2001
From: Codex <codex@example.com>
Date: Thu, 1 Oct 2026 09:17:12 +0800
Subject: [PATCH 5/5] chore(deps): axios 1.20.0 for seven high advisories
 published 2026-09-30

GHSA-c29m-xwm3-cm6r, -mghh-pgcx-3jjj, -x97p-jq2g-jp4f, -3pq3-5fj3-cg6v,
-542g-h47m-68v8, -m8m8-qj5v-23w3 and -r4gj-5m52-g5wh affect axios < 1.20.0
and fail the frontend-security audit gate for every branch. 1.20.0 keeps the
same dependency set (form-data ^4.0.6 is already locked at 4.0.6).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 frontend/package.json   |  2 +-
 frontend/pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 62e0c59bac9b..1e99e85206c9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,7 +21,7 @@
     "@stripe/stripe-js": "^9.0.1",
     "@tanstack/vue-virtual": "^3.13.23",
     "@vueuse/core": "^10.7.0",
-    "axios": "^1.18.0",
+    "axios": "^1.20.0",
     "chart.js": "^4.4.1",
     "dompurify": "^3.4.14",
     "driver.js": "^1.4.0",
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
index 6498b0ecd364..fd9a5b034956 100644
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
@@ -30,8 +30,8 @@ importers:
         specifier: ^10.7.0
         version: 10.11.1(vue@3.5.26(typescript@5.6.3))
       axios:
-        specifier: ^1.18.0
-        version: 1.18.1
+        specifier: ^1.20.0
+        version: 1.20.0
       chart.js:
         specifier: ^4.4.1
         version: 4.5.1
@@ -1861,8 +1861,8 @@ packages:
     peerDependencies:
       postcss: '>=8.5.18'
 
-  axios@1.18.1:
-    resolution: {integrity: sha512-3nTvFlvpn9Zu/RkHUqtc7/+al4UpRW5az71ap5zccp6e8RAYEzhMTecX8Dz1wWDYrPpUoB1HAQEGEAEvUr7S9g==}
+  axios@1.20.0:
+    resolution: {integrity: sha512-r8aOh8j9cGKpgQAqpzrUHnSIc6a59Y3Xf/cv8sy1DrHCkZHzQGEuoq1tARk6qSyDdtQGSDgpb9kFlruzPvrgwg==}
 
   babel-plugin-macros@3.1.0:
     resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
@@ -6491,7 +6491,7 @@ snapshots:
       postcss: 8.5.23
       postcss-value-parser: 4.2.0
 
-  axios@1.18.1:
+  axios@1.20.0:
     dependencies:
       follow-redirects: 1.16.0
       form-data: 4.0.6