.csm { --csm-bg:#fff; --csm-br:#e9ecef; --csm-txt:#222; --csm-muted:#6c757d; --csm-accent:#0177bc; --csm-radius:16px; }
.csm{background:var(--csm-bg); border:1px solid var(--csm-br); border-radius:var(--csm-radius); padding:10px}
.csm__list, .csm__sub{list-style:none; margin:0; padding:0}
.csm__item{border-bottom:1px dashed var(--csm-br)}
.csm__item:last-child{border-bottom:0}
.csm__row{display:flex; align-items:center; gap:8px; justify-content:space-between}
.csm__link{display:block; padding:12px 10px; color:var(--csm-txt); text-decoration:none; font-weight:500}
.csm__link:hover{color:var(--csm-accent)}
.csm__toggle{appearance:none; background:#f5f7f9; border:1px solid var(--csm-br); border-radius:10px; width:32px; height:32px; display:inline-grid; place-items:center; cursor:pointer}
.csm__icon{width:18px; height:18px; transition:transform .25s ease}
.csm__item[aria-expanded="true"]>.csm__row .csm__icon{transform:rotate(180deg)}
.csm__sub{display:none; padding-left:8px}
.csm__item[aria-expanded="true"]>ul{display:block}
.csm__sub .csm__link{padding:10px 10px 10px 18px; font-weight:400}
.csm__item.is-current>.csm__row .csm__link{color:var(--csm-accent)}
.csm--empty{color:var(--csm-muted)}
@media (min-width:991.98px){ .csm{padding:12px} }