fix: flatten codex account order shell

Author: linhay

docs-linhay/spaces/20260511-codex-account-list-tab/README.md

@@ -100,6 +100,7 @@
 14. 后端新增 `ProbeCodexAccountRouting`：使用 relay API key 向 sidecar `/v1/chat/completions` 发送最小测试请求，通过请求前后 `auth-files` 与 `api-key-usage` 的 recent request 差量识别命中的 auth-file、codex-api-key 或 openai-compatible provider。
 15. OAuth/auth-file 账号详情的模型区域已从只读兼容模型改为可编辑模型映射：加载时合并 `GetAuthFileModels` 与 `ListOAuthModelAliases(provider)`，保存时调用 `UpdateOAuthModelAliases` 写回 `oauth-model-alias`；该配置按 provider/channel 生效，同一 `codex` OAuth 通道共享映射。
 16. 路由策略调试区按 Gemini 评审方案重构为“控制台 + 内联策略编辑”：默认先展示测试模型、测试按钮、候选顺序和最近路由命中；点击 `编辑策略` 后不再渲染第二套账号清单，而是在既有请求顺序账号行内直接显示默认/允许/排除与策略上移/下移控件；账号列表行同步显示 `路由 NN`、`跳过` 和策略模式，避免重复账号列表打断配置路径。
+17. 请求顺序 section 去掉外层重卡阴影，改为 `bg-surface` 承载、`bg-main` 标题/消息带和内层账号卡的层级组合，减少“卡中卡”观感，但不改账号行本身的卡片交互与排序逻辑。
 
 ## 验证记录
 1. `npm run typecheck`

frontend/src/features/codex/codexAccountList.test.mjs

@@ -581,6 +581,27 @@ test('Codex account order cards reuse the account attribution card and keep cust
   assert.match(source, /CodexAccountSpecialActionBar/);
 });
 
+test('Codex account order section uses a lighter shell instead of a nested card shell', async () => {
+  const source = await readFile(new URL('./components/CodexAccountOrderSection.tsx', import.meta.url), 'utf8');
+
+  assert.match(
+    source,
+    /CODEX_ACCOUNT_ORDER_SECTION_SHELL_CLASS =\n  'overflow-hidden border-2 border-\[var\(--border-color\)\] bg-\[var\(--bg-surface\)\]';/,
+  );
+  assert.match(
+    source,
+    /CODEX_ACCOUNT_ORDER_SECTION_HEADER_CLASS = 'border-b-2 border-\[var\(--border-color\)\] bg-\[var\(--bg-main\)\] xl:flex xl:items-stretch';/,
+  );
+  assert.match(
+    source,
+    /CODEX_ACCOUNT_ORDER_SECTION_MESSAGE_CLASS =\n  'border-b-2 border-\[var\(--border-color\)\] bg-\[var\(--bg-main\)\] px-5 py-3 font-mono text-\[length:var\(--font-size-ui-sm\)\] font-black uppercase tracking-wide text-\[var\(--text-primary\)\]';/,
+  );
+  assert.doesNotMatch(
+    source,
+    /<section className="border-\[3px\] border-\[var\(--border-color\)\] bg-\[var\(--bg-main\)\] shadow-\[8px_8px_0_var\(--shadow-color\)\]">/,
+  );
+});
+
 test('Codex account order row exposes direct top and bottom reorder actions', async () => {
   const source = await readFile(new URL('./components/CodexAccountOrderRow.tsx', import.meta.url), 'utf8');
 

frontend/src/features/codex/components/CodexAccountOrderSection.tsx

@@ -30,6 +30,12 @@ function EmptyState({ children }: { children: string }) {
   );
 }
 
+const CODEX_ACCOUNT_ORDER_SECTION_SHELL_CLASS =
+  'overflow-hidden border-2 border-[var(--border-color)] bg-[var(--bg-surface)]';
+const CODEX_ACCOUNT_ORDER_SECTION_HEADER_CLASS = 'border-b-2 border-[var(--border-color)] bg-[var(--bg-main)] xl:flex xl:items-stretch';
+const CODEX_ACCOUNT_ORDER_SECTION_MESSAGE_CLASS =
+  'border-b-2 border-[var(--border-color)] bg-[var(--bg-main)] px-5 py-3 font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-wide text-[var(--text-primary)]';
+
 export function CodexAccountOrderSection({
   title,
   hint,
@@ -220,8 +226,8 @@ export function CodexAccountOrderSection({
   }
 
   return (
-    <section className="border-[3px] border-[var(--border-color)] bg-[var(--bg-main)] shadow-[8px_8px_0_var(--shadow-color)]">
-      <header className="border-b-[3px] border-[var(--border-color)] bg-[var(--bg-surface)] xl:flex xl:items-stretch">
+    <section className={CODEX_ACCOUNT_ORDER_SECTION_SHELL_CLASS}>
+      <header className={CODEX_ACCOUNT_ORDER_SECTION_HEADER_CLASS}>
         <div className="px-5 py-4 xl:min-w-0 xl:flex-1">
           <h2 className="text-xl font-black uppercase leading-none tracking-normal text-[var(--text-primary)]">
             {title}
@@ -322,7 +328,7 @@ export function CodexAccountOrderSection({
       </header>
 
       {message ? (
-        <div className="border-b-2 border-[var(--border-color)] bg-[var(--bg-main)] px-5 py-3 font-mono text-[length:var(--font-size-ui-sm)] font-black uppercase tracking-wide text-[var(--text-primary)]">
+        <div className={CODEX_ACCOUNT_ORDER_SECTION_MESSAGE_CLASS}>
           {message}
         </div>
       ) : null}