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
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/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/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/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: '全部协议',
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/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/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/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..00f4141f50e8 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;
@@ -198,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));
 }
 
@@ -265,7 +288,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;
@@ -299,23 +324,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 +352,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 +412,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 +686,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 +822,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 +888,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 +1480,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 +1539,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 +1723,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..90514a177ab3 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;
 }
 
@@ -425,17 +426,17 @@ 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;
+  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
@@ -462,7 +463,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 +479,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 +494,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 +523,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 +535,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;
 }
@@ -1028,8 +1033,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 +1088,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 +1113,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 +1128,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 +1140,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 +1153,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 +1184,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 +1295,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 +1329,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 +1340,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..40c2eba962b1 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,21 +409,71 @@ 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;
   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 +842,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..ff6422f1d681 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));
@@ -1529,16 +1533,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 +1555,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 +1566,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 +1665,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 +1685,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 +1695,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 +1790,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 +1816,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 +1829,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 +1839,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/tables.css b/frontend/src/styles/console/tables.css
new file mode 100644
index 000000000000..0d22fe13ed37
--- /dev/null
+++ b/frontend/src/styles/console/tables.css
@@ -0,0 +1,879 @@
+/* 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;
+}
+
+/* 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;
+  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/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 */
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) => {