/* ============================================================
   银序 SILVERA · 后台外壳层（admin-shell.css）
   ------------------------------------------------------------
   后台三个页面（商品管理 / 素材库 / 页面编辑器）以前**各抄一份** :root，
   连 --bg 都和品牌令牌对不上（后台 #F7F6F3、品牌 #FAFAF8）——
   同一套系统两套底色，换季调色要改四个地方。

   这一层之后：
     · 色板、字体、圆角全部取自 design/tokens.css（与前台、与线上站同一套）
     · 后台只补「前台没有的东西」：面板底、状态色、外壳尺寸、顶栏与模块导航
     · 页面自己的 <style> 只留本页独有三栏宽度（--left / --right）

   顶栏样式用 .top .top__logo 这种两级选择器：
   比页面里的单级 .top__logo 高一级，不管加载顺序都能盖住旧规则，
   不用去三个页面里逐个改字号字距。
   ============================================================ */

:root{
  /* ---- 后台补的三个状态色（品牌令牌里没有，前台不用） ---- */
  --panel:var(--surface);
  --ok:#3A6B4D;
  --warn:#8A5F1E;

  /* ---- 后台专用文字色（v0.6.15 起；2026-10-14 上提）-------------------------
     ⚠️ 这里原来**覆盖**了品牌令牌的 --muted / --faint 两档，理由是
        「后台要长时间读数据，前台是短句浏览，两者要求不一样」。
        老板 2026-10-14 说「前端看不清，把字体颜色加深」⇒ 那个理由不成立
        （前台那些说明文字、规格副行不是短句浏览）。
     ⇒ 那两档已经**加深并上提到 design/tokens.css**（唯一出处），这里不再覆盖：
        同一件事写两处，早晚只改一处 —— 而两处都不报错。
     三级层次仍是（白卡实测）：主文字 18.88 / 次级 7.50 / 弱化 5.13，
     原来那两行是 18.88 / 5.35 / **2.83**（弱化那一级等于「看不清」）。 ---- */
  /* 信息色只在后台用（徽章 / 提示那一档），所以它留在这里 */
  --info-fg:#5F5F5A;    /* 白卡 6.42:1（原来借用品牌令牌 --accent-deep = 4.11:1） */

  /* ---- 外壳尺寸（页面可在本页 :root 里覆盖 --left / --right） ---- */
  --topbar:56px;
  --left:280px;
  --right:400px;
  --r:3px;
  --fs:13px;
  --shadow:0 2px 10px rgba(0,0,0,.06);
}

/* ---- 字体：与前台同一族（Noto Sans SC + Sora） ----
   用 html body（两级）而不是 body：页面自己的 body{font:...} 简写会带一套
   系统字体（-apple-system…），单级选择器压不住它。
   这里只换字族，页面定的字号与行高照旧。 */
html body{font-family:var(--font-sans);font-weight:400;-webkit-font-smoothing:antialiased;}

/* ---- 字号地板：把 <small> 拉回 12px（v0.6.15）---------------------------------
   浏览器给 <small> 的默认是 `font-size:smaller`（≈0.83em）——
   父级 12px 时它只有 **10px**。而后台里 <small> 装的是
   「建议写清品类 + 材质 + 场景 + 光照」这类**要读的提示**，
   还有「跟随模板」「每行一条，自动轮播」这种必须看懂的说明 ——
   它不是脚注。实测（真实浏览器）：素材库 2 处、编辑器 10 处都是 10px。
   ⚠️ 之前只改了显式的 font-size，漏了 `<small>` 这条**隐式**的缩小 ——
      「逐条改显式值」这种做法天然看不见浏览器默认值，所以这里补一条地板规则。 */
small{font-size:12px}

/* ---- 顶栏：白底 + 细线，与前台 .nav 同一语言 ---- */
.top .top__logo{
  font-family:'Sora',sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:.22em;
  color:var(--ink);
}
.top .top__name{font-size:13px;color:var(--muted);letter-spacing:.02em}
.top .top__name b{color:var(--ink);font-weight:500;font-family:'Sora',sans-serif}
/* 第 15 章 · v0.15.0：顶栏右边那一格从「身份下拉」变成**只读的身份显示**。
   它承的是 .top__name 那套写法（同字号、同颜色层级），所以不是新样式，
   而是同一个「顶栏里的一段文字」——字号与对比度都走同一条线，
   可读性体检（check_readability）量的就是它。 */
.top .top__role b{color:var(--ink);font-weight:500;font-family:'Sora',sans-serif}

/* ---- 模块导航：工作台是总入口，其它模块一眼可达 ---- */
/* ⚠️ 顶栏是「一行放不下」的地方 —— 2026-09-28 第二轮复查实测出来的：
   15 个菜单项 + 页内那几个按钮，在 1440 宽的屏上**超出视口 85~693px**，
   于是整页多出一条横向滚动，而右侧那一排（退出登录 / 新建 / 重置演示数据）
   被推到屏幕外 —— 要用得先横向拖一下（老板报的「窗口超出」是同一族）。
   修法：**只让导航这一段变弹**（可压缩 + 自己滚），其余一律不压：
     · `.topnav { min-width:0; overflow-x:auto }` —— 放不下时它自己滚，菜单项一个不丢；
     · `.top` 上那几个 `flex:0 0 auto` —— 品牌名、身份、按钮永不被压走样。
   为什么不是「让整条顶栏滚」：那样右侧的「退出登录 / 重置演示数据」还是得先拖才够得着，
   而它们是这一屏最不该被藏起来的东西。
   为什么不留 `overflow:hidden` 了事：藏起来的菜单项没有任何提示，
   等于把「菜单有 15 项」这件事对窄屏用户瞒掉。

   ⚠️⚠️ **第 40 章推翻上面那条修法（2026-10-01，老板第二次报同一处）**：
   上一版靠「菜单自己横向滚」补救，实测（1440 宽）**菜单只分到 487px、内容要 888px** ⇒
   「客户（客户 / 私域 / 门店）」「底层（看板 / 对账 / 设置）」「店铺前台」**整组被挤出屏幕**，
   而**纵向滚动条不存在**（上面写了 `overflow-y:hidden`），**横向那条滚动条在真机上又看不见**
   ⇒ 老板的原话是「客户这一级下的几个菜单，还是没有向下的滚动条」——
   他的体感就是**菜单消失了**。横向滚这条路的失败点在于：**它要求用户先知道那里有东西**。
   ⇒ 改成**换行**：放不下就折到第二行，**菜单项一个都不丢、也不需要任何滚动**
   （1920 宽下内容 925 == 可视 925，本来就不需要滚；只有窄屏才需要第二行）。
   代价与配套（必须一起改，否则换行后底部会被裁）：
     · `.top` 高度改为**自适应**（原来写死 `height:var(--topbar)`）；
     · `body` 改成**纵向弹性列**、`.main` 用 `flex:1` 吃掉剩下的高度
       （原来靠 `height:calc(100vh - var(--topbar))` 算 —— 顶栏一旦变高，这个算法就偏了）。
   为什么用 `body > .` 提高一级：本文件在 admin-ui.css **之前**加载，同级选择器会输给它。 */
.top{min-width:0}
.top__logo,.top__sep,.top__name,.top__role,.top > .btn{flex:0 0 auto}
/* ★ 第 82 章（2026-10-18）：列间距 16 → 13。
   第 17 项「账号」加进来之后，1280 宽屏上顶栏放不下（实测 store.html 上「底层」
   那一段被挡在右边界外 6px，内容 235 > 可见 229）。
   ⚠️ 只收**列间距**，不动字号：字号一改，所有后台页的字都会变小。
   ⚠️ 也别改成「让它横向滚」—— 那正是老板说的「够不着」：看不见的菜单项
      等于不存在（他不知道往右还有东西）。 */
.topnav{display:flex;align-items:center;gap:16px 16px;margin-left:20px;
  min-width:0;flex-wrap:wrap;overflow:visible}

/* ---- 顶栏高度自适应（第 40 章）------------------------------------
   顶栏的菜单会换行 ⇒ 它可能比 --topbar 高 ⇒ 页面高度必须跟着算。
   改成「body 一条纵向弹性列 + 顶栏占它需要的高度 + .main 吃掉剩下的」，
   这样顶栏几行都不会把底部内容顶出屏幕（原来 `calc(100vh - 56px)` 在顶栏变高后
   会让 .main 高出屏幕 —— 表现是列表最后几行被裁掉，又是一次「够不着」）。
   ⚠️ `body > .` 是必须的：两张样式表里都有 `.top`/`.main`，同级会输给后加载的 admin-ui.css。 */
body{display:flex;flex-direction:column;height:100vh}
body > .top{height:auto;min-height:var(--topbar);flex:0 0 auto}
body > .main{height:auto;flex:1;min-height:0}
.topnav a{
  position:relative;font-size:13px;color:var(--muted);padding:4px 0;
  transition:color .2s;white-space:nowrap;
}
.topnav a:hover{color:var(--ink)}
.topnav a.on{color:var(--ink);font-weight:500}
.topnav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--ink)}
.topnav .home{font-family:'Sora',sans-serif;letter-spacing:.12em;font-size:12px}

/* ---- 一级菜单的四个分类分段（第 07 章 · v0.7.0）-------------------------------
   设计文档第 07 章：「13 个一级菜单，按岗位分四类：卖货 / 履约 / 客户 / 底层」。
   分组数据在 permissions.js（`MENU_GROUPS` + 每项的 group），
   这里只负责画出来 —— 段的顺序、组名、哪一项归哪一组，样式层一个字都不写。

   组名是 **<span> 不是 <a>**：自检里有一条「#topnav 里的链接数必须等于
   navItems() 的长度」—— 组名做成链接，那条断言就会开始把标题也数进去。 */
.topnav__grp{display:flex;align-items:center;gap:16px}
/* ★ 第 82 章（2026-10-18）：组间留白 16 → 12。
   为什么动它：菜单加了第 17 项「账号」之后，**1280 宽屏上顶栏放不下**了
   （实测 products.html / store.html 上「底层」那一段被挡在右边界外 2~10px，
   而菜单还得横向滚才能看全 —— 那就是「够不着」）。
   为什么挑这一处收：组与组之间本来就有一条 `border-left` 竖线做分隔，
   16px 的留白是**双份视觉间隔**（线 + 留白），收到 12px 几乎看不出来；
   而它一次省下 4 组 × 4px = 16px，正好够。**没有动字号、没有动项间距** ——
   那两样一改，所有后台页的字都会变小/变挤。 */
.topnav__grp + .topnav__grp{padding-left:12px;border-left:1px solid var(--line)}
.topnav__g{
  font-size:12px;color:var(--faint);letter-spacing:.04em;
  /* 组名是给「扫一眼找模块」用的路标，不是装饰：12px / 5.13:1 都过可读性体检 */
}
.topnav__grp:first-of-type .topnav__g{display:none}  /* 第一段紧跟在「工作台」后面，组名省掉更干净 */

@media (max-width:900px){
  .topnav{gap:12px;margin-left:12px}
  .topnav a{font-size:12px}
}

/* ============================================================
   工作台首页（admin/index.html）专用件
   ------------------------------------------------------------
   只有首页用得到，不放进外壳的通用部分。
   ============================================================ */
.work{max-width:1180px;margin:0 auto;padding:32px 24px 72px}
.work-head{display:flex;align-items:flex-end;gap:16px;margin-bottom:28px}
.work-head h1{font-family:'Sora',sans-serif;font-size:26px;font-weight:400;letter-spacing:.02em;margin:0}
.work-head .sub{font-size:12px;color:var(--muted)}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.kpi__i{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.kpi__n{font-family:'Sora',sans-serif;font-size:28px;font-weight:600;line-height:1.2;
  font-variant-numeric:tabular-nums}
.kpi__l{font-size:12px;color:var(--muted);margin-top:6px}
.kpi__h{font-size:12px;color:var(--faint);margin-top:4px;line-height:1.6}
@media (max-width:900px){.kpi{grid-template-columns:repeat(2,1fr)}}

.sec-t{font-family:'Sora',sans-serif;font-size:12px;letter-spacing:.16em;color:var(--faint);
  text-transform:uppercase;margin:0 0 12px}
.entries{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:34px}
/* 待办栏下面那句「这份清单有多可靠」（第 49 章）。
   ⚠️ `.entries` 自带 margin-bottom:34px，这里用负的上边距把它拉回来 ——
      否则那句小字会飘得离清单很远，看着像在说下一栏的事。 */
.todos-why{margin:-20px 0 34px;display:block}
/* 工作台「已建模块」里的分组小标题（第 44 章）：与左侧导航那四个分组呼应。
   ⚠️ 必须横跨整行（`grid-column:1/-1`）—— `.entries` 是三列网格，
      少了这一条它会占掉一格，把后面所有卡片挤歪。 */
.grp-t{grid-column:1 / -1;font-size:12px;letter-spacing:.12em;color:var(--muted);
  margin:6px 0 -4px;padding-left:2px}
.grp-t:first-child{margin-top:0}
.entry{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;transition:border-color .2s,transform .2s}
.entry:hover{border-color:var(--ink);transform:translateY(-2px)}
.entry__t{font-size:15px;font-weight:500;margin-bottom:6px}
.entry__t small{font-family:'Sora',sans-serif;font-size:12px;letter-spacing:.1em;color:var(--faint);
  margin-left:8px;font-weight:400}
.entry__d{font-size:12px;color:var(--muted);line-height:1.7}
.entry--todo{background:var(--wash)}
.entry--todo:hover{border-color:var(--line);transform:none;cursor:default}
.entry--todo .entry__t{color:var(--faint)}
@media (max-width:900px){.entries{grid-template-columns:1fr}}

.note{font-size:12px;color:var(--muted);line-height:1.9;background:var(--wash);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.note b{color:var(--ink);font-weight:500}
.note ul{margin:8px 0 0;padding-left:18px}
.note li{margin-bottom:4px}

/* ---- 页面闸门（第 05 章 · v0.5.16） ------------------------------------
   顶栏那份菜单按权限矩阵过滤，这一层是配套的那把门 —— 只过滤不锁门，
   等于把入口藏起来而门还开着，比不做更坏（会让人以为已经拦住了）。

   ⚠️ **拦截本身不靠这条 CSS。** 真正干活的是 JS 里那段「把整块主区搬走存起来」
   （失败关闭：DOM 真的不在文档里了）。`.is-gated` 只是给换页那一刻留个钩子，
   顺带把搬走后剩下的空白收一收 —— 千万不要以为藏起来就等于拦住了。 */
.is-gated{min-height:60vh}
.is-gated > :not(.deny){display:none}
.deny{max-width:660px;margin:9vh auto;padding:0 24px}
.deny__t{font-size:15px;font-weight:500;margin-bottom:12px}
.deny__p{font-size:13px;color:var(--muted);line-height:1.9;margin:0 0 18px}
.deny__p b{color:var(--ink);font-weight:500}
.deny__f{font-size:12px;color:var(--faint);line-height:1.9;margin:0;
  border-top:1px solid var(--line);padding-top:14px}
.deny__f b{color:var(--muted);font-weight:500}

/* ============================================================
   界面版本切换牌（第 42 章新增）
   ------------------------------------------------------------
   ⚠️ 它**不属于任何一版界面**（原版与新版都装），所以样式写在这一张表里，
      而不是 `design/ui-v2.css`（那一份整个挂在 `html[data-ui="v2"]` 下面）。

   ⚠️⚠️ 为什么放在**右下角固定**、而不是顶栏里（实测踩出来的）：
      第一版把它当普通按钮加在顶栏右端 —— 1440 宽下没问题，
      可 1280 宽下顶栏本来就要折行，多这一个控件**又多折了一行**：
      products 页顶栏从 207px 变成 281px，而顶栏吃掉的 74px 直接让列表
      **从「看得见 3 行」掉到 2 行** ⇒ 原版那一趟「一块表看得见几行」当场报红 8 项。
      ⇒ 固定定位的圆牌**不占任何布局高度**，两版的版面都回到一个像素不动。
   ============================================================ */
#uiVersionBtn{
  position:fixed;right:12px;bottom:12px;z-index:80;
  min-height:32px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  font-size:12px;box-shadow:var(--shadow);
}
#uiVersionBtn:hover{color:var(--ink);border-color:var(--accent)}