.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* 本台的历史变量名 → token 的<b>别名</b>。这是唯一允许的映射层：
     页面其余部分照旧用旧名，但<b>值只有一个来源</b>（design/tokens.css）。
     两个管理台是同一类东西 ⇒ 同一个主题（theme-console）。 */

  *{box-sizing:border-box}
  body{margin:0;font:14px/1.6 -apple-system,"PingFang SC",system-ui,sans-serif;background:var(--bg);color:var(--fg)}
  .wrap{max-width:1120px;margin:0 auto;padding:20px}
  /* ── 左导航 + 右内容（#43 · 2026-09-26）─────────────────────────────
     **与创作台同一套骨架**：导航固定在左，内容占满剩余。业主定盘：
     「运营后台、管理后台的信息架构都参考创作台的信息架构，左侧导航，右侧内容」。
     做法是**纯 CSS**：`#app` 变两列 grid，`.nav` 跨满所有行 ⇒ 不必挪任何 DOM
     （`#app` 的直接子元素是 `.nav` + 各 tab 面板，用 grid 列定位即可，不用包一层容器）。
     ⚠️ 只改**布局**，不改导航的**切法**（4 项的判据仍然是"改变的是我们的条件 vs 客户的东西"）。 */
  #app.shell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:start}
  #app.shell > .nav{grid-column:1;grid-row:1/-1;position:sticky;top:20px;flex-direction:column;
    gap:2px;margin-bottom:0;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px}
  #app.shell > :not(.nav){grid-column:2;min-width:0}
  #app.shell .nav button{text-align:left;justify-content:flex-start;width:100%;border-radius:8px;padding:8px 12px}
  @media (max-width:820px){#app.shell{grid-template-columns:1fr}
    #app.shell > .nav{grid-column:1;grid-row:auto;position:static;flex-direction:row;flex-wrap:wrap}
    #app.shell > :not(.nav){grid-column:1}}
  .brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
  .brand b{font-size:16px;letter-spacing:.5px}.brand .brand-ic{width:22px;height:22px;display:block;flex:none}
  .tag{font-size:11px;padding:2px 8px;border:1px solid var(--line);border-radius:99px;color:var(--dim)}
  .tag.ops{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
  h3{margin:0 0 10px;font-size:13px;color:var(--dim);font-weight:600;letter-spacing:.4px}
  input,button,select{font:inherit;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
  input{width:100%}
  button{cursor:pointer;background:var(--card)}
  button:hover, button:focus-visible{border-color:var(--acc)}
  button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  button.mini{padding:4px 10px;font-size:12px;border-radius:7px}
  table{width:100%;border-collapse:collapse;font-size:13px}
  th,td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--line)}
  th{color:var(--dim);font-weight:600;font-size:12px}
  tbody tr:last-child td{border-bottom:none}
  .muted{color:var(--dim)}
  .err{color:var(--bad);font-size:13px;min-height:16px}
  .pill{font-size:11px;padding:1px 8px;border-radius:99px;border:1px solid var(--line)}
  .pill.on{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
  .pill.off{color:var(--bad);border-color:var(--danger-line);background:var(--danger-bg)}
  .nav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
  .nav button{font-size:12px;padding:4px 12px;border-radius:99px;color:var(--dim)}
  /* 时间段选择的**选中态**（2026-09-19 由 C10 查出）。
     `.cur` 此前**只在 .nav 里定义**，而「近 7/30/90 天」这组按钮不在 .nav 里
     ⇒ 选中的那个和没选的长得一模一样，用户看不出自己选的是哪个。 */
  .mini.range.cur{border-color:var(--accent);color:var(--accent);background:var(--accent-bg)}

  /* `.row` 此前没有定义，样式全靠各处的内联 style —— 内联只能管一处，
     同一个语义散在多个标签里就会各自漂移。收成一条公共规则。 */
  .row{display:flex;gap:10px;align-items:center}

  .nav button.cur{color:var(--accent);border-color:var(--accent-line);background:var(--accent-bg)}
  .nav span{font-size:12px;color:var(--dim);border:1px dashed var(--line);border-radius:99px;padding:4px 12px}
  .hide{display:none}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  @media(max-width:760px){.grid2{grid-template-columns:1fr}}
  /* 模型卡 */
  .mcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .mhead{display:flex;align-items:baseline;gap:10px;padding:12px 16px;background:var(--panel2);border-bottom:1px solid var(--line);flex-wrap:wrap}
  .mhead .nm{font-size:15px;font-weight:600}
  .mhead .meta{font-size:12px;color:var(--dim)}
  .mhead .raw{font-size:11px;color:var(--muted);margin-left:auto}
  .num{font-variant-numeric:tabular-nums}
  .cost{color:var(--fg)}
  .sell{color:var(--gold)}
  .pay{color:var(--dim);font-size:12px}
  .ov{display:flex;gap:26px;flex-wrap:wrap;align-items:center}
  .ov .k{font-size:11px;color:var(--dim);letter-spacing:.4px}
  .ov .v{font-size:20px;font-variant-numeric:tabular-nums}
  .ov .v small{font-size:12px;color:var(--dim);font-weight:400}
  .toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
  .toolbar input{max-width:280px}
  .toolbar select{max-width:170px}
  .editor{display:flex;gap:6px;align-items:center}
  .editor input{width:110px;padding:4px 8px}
  .hint{font-size:12px;color:var(--dim)}

  /* 定价表：一张表看完，不再一个模型一张卡（见 render() 的注释） */
  .ptablewrap { overflow-x: auto; }
  .ptable { width: 100%; border-collapse: collapse; table-layout: fixed; }
  /* 列宽：让整表在 ~1000px 内排完，不必横滚（此前 7 列没定宽 ⇒ 最后一列被切） */
  .ptable th:nth-child(1), .ptable td:nth-child(1) { width: 210px; }
  .ptable th:nth-child(2), .ptable td:nth-child(2) { width: 150px; }
  .ptable th:nth-child(3), .ptable td:nth-child(3) { width: 175px; }
  .ptable th:nth-child(4), .ptable td:nth-child(4) { width: 115px; }
  .ptable th:nth-child(5), .ptable td:nth-child(5) { width: 105px; }
  .ptable th:nth-child(6), .ptable td:nth-child(6) { width: 80px; }
  .ptable th:nth-child(7), .ptable td:nth-child(7) { width: 92px; }
  /* 动宾式按钮不该被压成竖排（"改厂商价" 曾竖成 "改/厂"） */
  .ptable .mini { white-space: nowrap; }

  /* 37 行 ⇒ 37 个同样的按钮排成一列 = 纯噪音（一眼看过去像表格的纹理）。
     默认不显示，**指到那一行才出现** —— 供给页要读的是"价比"，不是"能点什么"。
     ⚠️ 必须同时保 `:focus-within`：只做 hover 等于**把键盘用户挡在门外**
        （Tab 到按钮时那一行也算"里面"，按钮随即显形）。 */
  .ptable tbody tr .mini { opacity: 0; transition: opacity .12s; }
  .ptable tbody tr:hover .mini,
  .ptable tbody tr:focus-within .mini { opacity: 1; }
  .ptable th { text-align: left; }
  .ptable .pmod { vertical-align: top; }
  .ptable .pmod .nm { display: block; font-weight: var(--fw-medium); }
  .ptable .pmod .raw {
    display: block; margin-top: 2px;
    font-family: var(--font-mono); font-size: 11px;
    color: var(--muted);
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 同一模型的行组之间：一条更粗的线分隔，比重复模型名更省视线 */
  .ptable tr.pgroup > td { border-top: 2px solid var(--line-strong); }
  .secEdit { display: inline-flex; gap: 6px; align-items: center; }
  .secEdit input { width: 260px; }
  .mini.danger { border-color: var(--danger); color: var(--danger); }
  /* ⚠️ 别名映射**必须放在 .theme-console 上**，不能放 :root。
     CSS 自定义属性在**声明它的元素**上完成替换 ⇒ 放在 :root 会把 --card 的值
     定格在 :root（亮色那一版），下游 .theme-console 的覆写传不进来，于是卡片永远是白的。
     （2026-09-19 运营后台实测：:root 上的 --panel 解析成了亮色那一版的 --card，
       而 body 上的 --card 已经是暗色版 ⇒ 卡片永远白） */

  .theme-console{--panel:var(--card); --panel2:var(--chip);
    --fg:var(--ink); --dim:var(--muted);
    --acc:var(--accent); --bad:var(--danger); --gold:var(--warn); --ok:var(--ok);}

/* 外观三档（与创作台的「我」菜单同一套词与形：浅色 / 深色 / 跟随系统）。
   在两个 tag 与「退出」之间，是"这个页面自己的属性"，不抢内容的视线。 */
.scheme-seg{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.scheme-seg button{font:inherit;font-size:11px;line-height:1;padding:5px 10px;background:transparent;border:0;color:var(--dim);cursor:pointer}
.scheme-seg button:hover{color:var(--fg)}
.scheme-seg button.on{background:var(--panel2);color:var(--fg)}
.scheme-seg button+button{border-left:1px solid var(--line)}
/* ⚠️ 新栈挂载点样式 —— **唯一一条被复制到各面的 CSS**。
 *
 * 旧页面是「手写静态 HTML」：HTML 里直接就是 <body><div class="wrap">…。
 * 新栈（React）需要一个挂载点 ⇒ HTML 里多一层 <div id="root">。
 * `display: contents` 让这层**不参与布局**（盒子被"拆掉"，子元素直接落在 body 的布局里）——
 * 于是 body 的 flex 与 .wrap 的定位与升级前**逐像素一致**。
 *
 * 不用它会发生什么：多出来的那层成为 body 布局的子项 ⇒ 整页位置偏移。
 * （这个坑在创作台与运营台**都**踩过：多一层 #root 让整页竖着堆成一列。）
 *
 * ★ 2026-09-27（施工项 #19）：本文件是**权威副本**，正本在 `frontend/shared/root.css`，
 *   各面下的副本由 `scripts/sync_shared.sh` 派生。**不要在各面下直接改**——改了会被 --check 判漂移。
 *   （此前两个副本的注释已经各说各的 ⇒ 那正是"下一次漂移就在规则本身"的前兆。）
 */
#root { display: contents }