/* 左侧分类栏（上下滚动） */
.ed-cats{
  flex:0 0 auto;width:68px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  padding:10px 0 16px;background:#faf9f6;border-right:1px solid var(--line-2);
}
.ed-cats::-webkit-scrollbar{display:none;}
.ed-cats button{
  position:relative;display:block;width:100%;padding:9px 4px;
  font-size:11.5px;letter-spacing:.04em;color:var(--muted);text-align:center;transition:.2s;
}
.ed-cats button.on{color:var(--gold-dark);font-weight:600;}
.ed-cats button.on::before{
  content:'';position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:3px;height:15px;border-radius:2px;background:linear-gradient(180deg,#d7b878,#b08d4a);
}

/* R53：隔断的细分（「隔断」右边的小箭头 + 展开出来的子项）
   箭头是纯 CSS 画的 V：一个只有右、下两条边的方块转 45° 就是尖朝下；
   展开时再转 180°，就成了尖朝上（站长说的「拉起来」）。 */
.ed-cats button .cat-caret{
  display:inline-block;width:5px;height:5px;margin-left:4px;vertical-align:1px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg);transition:transform .18s;
}
.ed-cats button.open .cat-caret{transform:rotate(-135deg);}

.ed-cats button.cat-sub{
  padding:6px 4px 6px 13px;font-size:10.5px;letter-spacing:.02em;color:#a9a49b;
}
.ed-cats button.cat-sub.on{color:var(--gold-dark);font-weight:600;}
.ed-cats button.cat-sub.on::before{
  content:'';position:absolute;left:5px;top:50%;transform:translateY(-50%);
  width:2px;height:11px;border-radius:2px;background:#d7b878;
}