.sidebar .nav .nav-icon { display: grid; flex: 0 0 20px; width: 20px; height: 20px; place-items: center; }
.sidebar .nav a { color: #555; }
.sidebar .nav a:hover, .sidebar .nav a.active { color: #000; }
.sidebar .nav .nav-icon .ui-icon,
.collapse-button .ui-icon,
.dialog-header .icon-button .ui-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.sidebar .collapse-button, .dialog-header .icon-button {
  display: grid;
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #fff;
  color: #333;
  cursor: pointer;
}
.sidebar .collapse-button:hover, .dialog-header .icon-button:hover { background: #f5f5f5; border-color: #bfbfbf; color: #000; }
.sidebar .collapse-button:focus-visible, .dialog-header .icon-button:focus-visible { outline: 2px solid #333; outline-offset: 3px; }
.sidebar-collapsed .sidebar .collapse-button { transform: none; }
.collapse-button .ui-icon { transition: transform 180ms ease; }
.sidebar-collapsed .collapse-button .ui-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .collapse-button .ui-icon { transition: none; } }