.rail{
  width:var(--rail-w);flex-shrink:0;display:flex;flex-direction:column;gap:4px;
  padding:14px 10px;background:var(--rail-bg);border-right:1px solid var(--rail-border);
  transition:width .16s ease;
}
.rail[data-collapsed="true"]{width:var(--rail-w-collapsed)}

.rail .brand{
  display:flex;align-items:center;gap:8px;
  padding:0 6px 10px;font-weight:800;font-size:13px;color:#fff;
  letter-spacing:-.2px;
}
.rail .badge{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:8px;background:var(--primary);
  color:#fff;font-size:11px;font-weight:800;letter-spacing:-.3px;
}
.rail .word{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.rail .rail-toggle{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:24px;height:24px;margin-left:auto;padding:0;border:0;border-radius:6px;
  background:none;color:var(--rail-text-muted);font:600 13px/1 inherit;cursor:pointer;
}
.rail .rail-toggle:hover{background:var(--rail-hover);color:#fff}

.rail button,.rail a{
  display:flex;align-items:center;gap:8px;padding:9px 10px;border:0;border-radius:var(--radius);
  background:none;color:var(--rail-text);font:600 13px/1.2 inherit;text-align:left;
  text-decoration:none;cursor:pointer;white-space:nowrap;
}
.rail button:hover,.rail a:hover{background:var(--rail-hover);color:#fff}
.rail button[aria-current="true"]{background:var(--primary);color:#fff}
.rail .ico{font-size:15px;line-height:1;flex-shrink:0}
.rail hr{width:100%;margin:8px 0;border:0;border-top:1px solid var(--rail-divider)}
.rail .ext{font-size:10px;color:var(--rail-text-muted);margin-left:auto}

.rail[data-collapsed="true"] .word,
.rail[data-collapsed="true"] .lbl,
.rail[data-collapsed="true"] .ext{display:none}
.rail[data-collapsed="true"] .brand{flex-wrap:wrap;justify-content:center;padding:0 0 10px}
.rail[data-collapsed="true"] .rail-toggle{flex-basis:100%;margin-left:0;margin-top:6px}
.rail[data-collapsed="true"] button,
.rail[data-collapsed="true"] a{justify-content:center;padding:9px 0}

@media (max-width:760px){
  .rail,.rail[data-collapsed="true"]{
    width:auto;flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--rail-border);
  }
  .rail .brand,.rail hr,.rail .rail-toggle{display:none}
  .rail button,.rail a{white-space:nowrap}
  .rail[data-collapsed="true"] .lbl,
  .rail[data-collapsed="true"] .ext{display:inline}
}