/* ============================================================================
   侧栏选中态 · 全站唯一实现（2026-11-09）
   ----------------------------------------------------------------------------
   为什么单独一份：同一个左侧栏在全站有两套 DOM ——
     · 会员工作台壳 /u/*        →「.sb .nav a」
     · 会员/代理/推广/协作壳     →「.sidebar .nav-item」
   过去两套壳各写各的选中样式（app.css / theme.css / m-beautify.css /
   u.css / ui-unify.css 共五处），改一处另一处照旧 → 反复修不好；
   点不同菜单还会跳到另一套壳 → 整页底色与选中色跟着变。
   现在收口到本文件：两份壳都加载它，老层里的同类规则全部删除。

   规则（用户 11-09 定）：选中 / hover 只变「文字 + 图标」颜色，
   不铺整行底色、不画左侧竖条、不加边框阴影。白天 / 夜晚完全一致。

   作用范围：.sb .nav a（/u/* 壳）、.sidebar .nav-item（/agent /index
   /promoter /collab 壳）。后台 admin/layout.html 不加载本文件，不受影响。
   ========================================================================== */

:root{
  /* 侧栏选中色：与全站品牌主色同源，白天 #FF4400 / 夜间 #FF6A3D。
     2026-11-09 20:07 回滚：19:56 曾误改为 #FF8C5A / #FFA472，
     用户确认从未要求换色，恢复原色值。不得再擅自改。 */
  --nav-on:#FF4400;
}
html[data-theme="dark"]{
  --nav-on:#FF6A3D;
}

/* ── 侧栏底色：两壳统一到全站 --side 口径 ── */
.sb,
.sidebar{
  background:var(--side);
}

/* ── 主区底色：两壳统一 ──
   m 壳的 html[data-canvas="dark"] 写死 #0E0F11，u 壳没有这一层，
   于是同一套侧栏点不同菜单，整页底色会跳一档（#0E0F11 vs #0E1520）。
   这里把两壳的主区画布统一到全站 --bg 口径。 */
html[data-theme="dark"] .content,
html[data-theme="dark"] .wrap{
  background:var(--bg);
}
/* 白天：m 壳主区是纯白卡片底，u 壳是 #FAFAFB，同样统一到 --bg */
html[data-theme="light"] .content,
html[data-theme="light"] .wrap{
  background:var(--bg);
}

/* ── 基础态：清掉可能来自老层的通栏底色 / 描边 / 阴影 ── */
.sb .nav a,
.sidebar .nav-item{
  background:transparent!important;
  border:0!important;
  outline:none!important;
  box-shadow:none!important;
}

/* ── hover：只变文字色 ── */
.sb .nav a:hover,
.sidebar .nav-item:hover{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--nav-on)!important;
}

/* ── 选中态：只变文字色 + 字重，不撑满、无竖条 ── */
.sb .nav a.on,
.sidebar .nav-item.on{
  background:transparent!important;
  border:0!important;
  outline:none!important;
  box-shadow:none!important;
  color:var(--nav-on)!important;
  font-weight:600;
}
/* 图标同步变色（.ic = 会员壳图标类，svg = u 壳图标元素） */
.sb .nav a.on svg,
.sidebar .nav-item.on .ic,
.sidebar .nav-item.on svg{
  color:var(--nav-on)!important;
  stroke:currentColor;
}
/* 左侧竖条（m-beautify 的 ::before）一律不画 */
.sb .nav a.on::before,
.sidebar .nav-item.on::before,
.sidebar .nav-item.sf-hit::before{
  display:none!important;
}
/* 2026-11-09 19:56：.sf-hit 点击反馈态已整体废弃（随 side-feedback.js 一起移除），
   点击后不再给元素加类，页面里不再插入 .sf-mask / .sf-bar，视觉上零变化。 */

/* ============================================================================
   侧栏几何统一（2026-11-09 20:12）——「整个栏目往上窜」的真正根因
   ----------------------------------------------------------------------------
   实测（1440×900，无头 Edge，读 getBoundingClientRect）：
     /u/* 壳     首项 top=64  行高 36  第二组首项 569   nav top=56  padding-top 8
     /agent/* 壳 首项 top=84  行高 34  第二组首项 574   nav top=68  padding-top 4
   两套壳差 20px。而「我的首页/我的订单」在 /u/* 壳，「签约订单/收益账户/
   渠道推广」在 /agent/* 壳 —— 一点菜单就换壳，侧栏整体上跳 20px，再点回来
   又跳回来。这就是用户反复说的「点个按钮整个栏目位置都移动了」。

   基准取 /agent/* 壳（页面数量多、用户主路径）：首项 84、行高 34、第二组 574。
   u 壳靠下面三条把 64→84、36→34、569→574 全部拉平。
   净效果：跨壳点击，侧栏每一项的纵坐标差 0px。
   ========================================================================== */
/* u 壳：nav 顶 56 + padding 28 = 首项 84；行高 34 */
.sb .nav{padding:28px 0 12px!important}
.sb .nav a{height:34px!important}
/* u 壳分组标题：13 项 ×34 走完落在 526，加 48 正好到 574，与 m 壳对齐 */
.sb .nav .grp{margin:10px 0 0!important;padding:15px 20px 6px!important;line-height:17px!important}

/* ── 横向同样要对齐（2026-11-09 20:17 / 20:21 修正方向）──
   两壳连宽度都不一样，这就是「点一下整体左移」的根因：
     /u/* 壳     侧栏 240 宽，图标 x=20，文字 x=43
     /agent/* 壳 侧栏 300 宽，图标 x=30，文字 x=57
   20:19 曾把 /u/* 拉到 300，结果窄窗口下侧栏把内容区挤窄 → 用户报「向右撑开」。
   方向改为以 240 为准：/u/* 保持原宽不动，把 /agent/* 从 300 收到 240。
   240 是用户一直看到的宽度，窄屏也不吃内容区。

   20:29 修正：20:21 那版用 `width:240px!important` 硬盖宽度，
   把 side-collapse.js 的折叠（[data-side=fold] → 56px）和拖拽调宽
   （改 --side-w 变量）一起压死了 → 用户报「伸缩按钮没了、收不起来」。
   改为只调默认值：width 仍读 --side-w，折叠仍走 data-side，两者都活。 */
.sidebar{width:var(--side-w,240px)}
[data-side="fold"] .sidebar{width:56px}
/* /u/* 壳没有折叠 UI，直接跟同一个变量，保证两壳宽度永远同值 */
.sb{width:var(--side-w,240px)!important;flex:0 0 var(--side-w,240px)!important}
/* m 壳左边距同步收到 20：nav-sub-body 原本自带 20，改由 nav-item 统一给 */
.sidebar .nav-sub-body{padding-left:0!important}
.sidebar .nav-item{padding-left:20px!important;gap:7px!important}

/* ── 分组之间的横线：m 壳有、u 壳没有（2026-11-09 20:29 用户截图指出）──
   m 壳靠 `.nav-sub + .nav-sub{border-top}` 画线，u 壳的分组标题是 `.grp`，
   没有任何分隔线。这里给 u 壳的 .grp 补同一条线，两壳视觉一致。 */
.sb .nav .grp{border-top:1px solid var(--line)!important}

/* ── 滚动条槽常驻（2026-11-09 20:26）──
   实测 8 个页面：只有 /knowledge 有 15px 滚动条（可滚 441px），其余 7 页可滚 0。
   从无滚动条的页面跳到有滚动条的页面，内容区横向缩 15px，读起来就是「点一下蹦了」。
   这里让滚动条槽永远预留（不画滚动条），所有页面 clientWidth 恒定。 */
html{scrollbar-gutter:stable}

/* ============================================================================
   侧栏伸缩手柄 · 全站唯一实现（2026-11-09 20:45 用户指名要求）
   ----------------------------------------------------------------------------
   用户原话：「这个竖线左右拖拽按钮，你给我加上。换个好看的按钮也行。
               不要特效，点击平顺收起，左右拖拽。」
   过去的问题：.rz-grip 常态 opacity:0，只有鼠标正好压到 9px 宽的边线才浮现
   → 用户根本找不到「按钮」，截图里只剩一条光秃秃的竖线。

   现在：贴着竖线内侧一枚 12×30 竖胶囊，常显；形状跟站点组件一致（圆角 + 1px
   描边 + 极淡投影），无缩放 / 无呼吸 / 无位移，只保留宽度过渡（收放才平顺）。
   行为：单击 = 收起 / 展开；按住左右拖 = 调宽；双击 = 恢复 240。
   两套壳共用：.sb（/u/*）与 .sidebar（/index /agent /promoter /collab）。
   注意：两壳侧栏都是 overflow 裁剪容器，手柄必须放在内侧，right:-Npx 会被裁掉。
   ========================================================================== */
.sb,
.sidebar{position:relative}
.sb{transition:width .18s ease;flex:0 0 auto}
html.no-anim .sb{transition:none}

.sb .side-resizer,
.sidebar .side-resizer{
  position:absolute!important;
  top:0!important;right:0!important;
  width:14px!important;height:100%!important;
  background:transparent!important;border:0!important;
  cursor:col-resize;z-index:60;
}
.sb .side-resizer:hover,
.sidebar .side-resizer:hover,
.sb .side-resizer.on,
.sidebar .side-resizer.on{background:transparent!important;border-left-color:transparent!important}

.sb .rz-grip,
.sidebar .rz-grip{
  position:absolute;top:50%;right:1px;
  transform:translateY(-50%)!important;
  display:flex;align-items:center;justify-content:center;
  width:14px;height:34px;border-radius:7px;
  background:var(--card,#fff);
  border:1px solid var(--line-strong,var(--line));
  color:var(--g3,#8F959E);
  opacity:1;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  cursor:pointer;
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.sb .rz-grip svg,
.sidebar .rz-grip svg{display:block;transition:none}

.sb .side-resizer:hover .rz-grip,
.sidebar .side-resizer:hover .rz-grip{
  transform:translateY(-50%)!important;
  color:var(--nav-on);
  border-color:var(--nav-on);
  opacity:1;
}
.sb .side-resizer.on .rz-grip,
.sidebar .side-resizer.on .rz-grip{
  background:var(--nav-on);
  border-color:var(--nav-on);
  color:#fff;
}

html[data-theme="dark"] .sb .rz-grip,
html[data-theme="dark"] .sidebar .rz-grip{
  background:#232528;border-color:#3A3D42;color:#8E949B;
}
html[data-theme="dark"] .sb .side-resizer:hover .rz-grip,
html[data-theme="dark"] .sidebar .side-resizer:hover .rz-grip{color:#fff;border-color:#5A5F66}

/* 折叠态：手柄仍贴在右侧竖线，箭头翻向「展开」，不压住窄栏里的 org / 头像 */
[data-side="fold"] .sb .rz-grip,
[data-side="fold"] .sidebar .rz-grip{
  right:1px!important;left:auto!important;margin-left:0!important;opacity:1;
}
[data-side="fold"] .sb .rz-grip svg,
[data-side="fold"] .sidebar .rz-grip svg{transform:rotate(180deg)}

/* ── /u/* 壳折叠态：56px 图标条（该壳原来没有折叠样式，手柄点了没收起）── */
[data-side="fold"] .sb{width:56px!important;flex:0 0 56px!important}
[data-side="fold"] .sb .sid{padding:0;justify-content:center}
[data-side="fold"] .sb .nav .grp{display:none!important;margin:0!important;padding:0!important;border-top:0!important}
[data-side="fold"] .sb .nav a{
  font-size:0!important;gap:0!important;padding:0!important;
  justify-content:center;border-left-width:0;height:36px!important;
}
[data-side="fold"] .sb .nav a svg{width:17px!important;height:17px!important;flex:0 0 17px;margin:0}
[data-side="fold"] .sb .nav a em{display:none!important}