/* ============================================================
   侧栏导航壳 · 独立样式（ns- 前缀，不污染 app.html 既有样式）
   仅补充 app.html 里 .sb-* 基础样式没有覆盖到的部分：
     ① 分组标题的分隔线与呼吸感
     ② 会员入口的灰/彩两态（非会员灰、会员金）
   基础的 .sb-nav-item / .sb-icon / .sb-label / .sb-desc 继续复用主文件样式，
   保证与系统整体观感完全一致。
   ============================================================ */

/* ---------- 分组标题：加一条淡分隔线，层次更清晰 ---------- */
#sbNav .ns-group{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted, #6b7280);
  letter-spacing: .5px;
  padding: 12px 8px 5px;
}
#sbNav .ns-group::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, #e3e8ef);
}
#sbNav .ns-group.ns-group-first{ padding-top: 4px; }
/* 折叠态：只留一条短分隔线，不显示文字 */
.sidebar.collapsed #sbNav .ns-group{ padding: 10px 6px 6px; }
.sidebar.collapsed #sbNav .ns-group .ns-group-t{ display: none; }
.sidebar.collapsed #sbNav .ns-group::after{ flex: 1 1 auto; }

/* ---------- 导航项：统一节奏（间距/圆角与主文件一致，只收紧竖向节奏） ---------- */
#sbNav .sb-nav-item{ margin-bottom: 2px; padding: 10px 11px; font-size: 14px; }
#sbNav .sb-nav-item .sb-desc{ font-size: 11.5px; }
#sbNav .sb-nav-item .sb-text{ flex: 1 1 auto; min-width: 0; }
#sbNav .sb-nav-item .sb-label{ display: block; }

/* ---------- 会员入口：非会员灰、会员金 ---------- */
#sbNav .ns-vip .sb-badge{
  background: #eef1f5;
  color: #9aa3af;
  transition: background .18s ease, color .18s ease;
}
#sbNav .ns-vip .sb-icon svg{
  stroke: #9aa3af;
  fill: none;
  transition: stroke .18s ease, fill .18s ease;
}
#sbNav .ns-vip.ns-on .sb-badge{
  background: linear-gradient(135deg, #fde68a, #f59e0b);
  color: #7c2d12;
  box-shadow: 0 1px 3px rgba(245, 158, 11, .35);
}
#sbNav .ns-vip.ns-on .sb-icon svg{
  stroke: #f59e0b;
  fill: #fcd34d;
}
/* 选中态优先级最高：图标与角标都转白，避免蓝底上出现灰/金 */
#sbNav .sb-nav-item.active .sb-icon svg{ stroke: #fff !important; fill: none !important; }
#sbNav .ns-vip.active .sb-badge{
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: none !important;
}

/* ---------- 折叠态下角标不占位 ---------- */
.sidebar.collapsed #sbNav .sb-nav-item .sb-badge{ display: none; }

/* ---------- 移动端抽屉：始终展示完整文案与角标 ---------- */
@media (max-width: 820px){
  .app-shell > .sidebar #sbNav .ns-group{ padding: 12px 8px 5px; }
  .app-shell > .sidebar #sbNav .ns-group .ns-group-t{ display: inline !important; }
  .app-shell > .sidebar #sbNav .sb-nav-item .sb-badge{ display: inline-block !important; }
}