#appShell .sidebar {
  background:
    linear-gradient(180deg, rgba(8,15,31,.98), rgba(14,24,44,.98)),
    radial-gradient(circle at top left, rgba(37,99,235,.18), transparent 28%);
  color: #f8fafc;
}

#appShell .sidebar .brand-name,
#appShell .sidebar .brand-sub,
#appShell .sidebar .nav-section-label {
  color: rgba(248,250,252,.82);
}

#appShell .sidebar .nav-item,
#appShell .sidebar .nav-subitem {
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#appShell .sidebar .nav-item {
  color: rgba(15,23,42,.96);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(226,232,240,.92));
}

#appShell .sidebar .nav-item:nth-of-type(1) { background: linear-gradient(135deg, rgba(219,234,254,.98), rgba(191,219,254,.92)); }
#appShell .sidebar .nav-item:nth-of-type(2) { background: linear-gradient(135deg, rgba(236,253,245,.98), rgba(187,247,208,.86)); }
#appShell .sidebar .nav-item:nth-of-type(4) { background: linear-gradient(135deg, rgba(255,237,213,.98), rgba(253,186,116,.90)); }
#appShell .sidebar .nav-item:nth-of-type(5) { background: linear-gradient(135deg, rgba(237,233,254,.98), rgba(196,181,253,.88)); }
#appShell .sidebar .nav-item:nth-of-type(6) { background: linear-gradient(135deg, rgba(240,249,255,.98), rgba(186,230,253,.90)); }
#appShell .sidebar .nav-item:nth-of-type(7) { background: linear-gradient(135deg, rgba(254,249,195,.98), rgba(250,204,21,.76)); }
#appShell .sidebar .nav-item:nth-of-type(8) { background: linear-gradient(135deg, rgba(248,250,252,.98), rgba(226,232,240,.92)); }

#appShell .sidebar .nav-item:hover,
#appShell .sidebar .nav-item.active {
  color: #0f172a;
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 10px 22px rgba(15,23,42,.12);
}

#appShell .sidebar .nav-item.active {
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(241,245,249,.96));
}

#appShell .sidebar .nav-item-featured {
  color: #fff;
  background: linear-gradient(135deg, rgba(29,78,216,.96), rgba(8,145,178,.94));
  border-color: rgba(125,211,252,.34);
}

#appShell .sidebar .nav-item-toggle {
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(226,232,240,.90));
  color: #0f172a;
}

#appShell .sidebar .nav-item-toggle::after {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  right: 12px;
  background: rgba(15,23,42,.10);
  color: #0f172a;
  opacity: 1;
}

#appShell .sidebar .nav-group[open] > .nav-item-toggle::after {
  background: rgba(37,99,235,.14);
  color: #1d4ed8;
}

#appShell .sidebar .nav-subitems { padding-left: 10px; }
#appShell .sidebar .nav-subitem {
  color: #e2e8f0;
  background: rgba(15,23,42,.42);
}
#appShell .sidebar .nav-subitem:hover,
#appShell .sidebar .nav-subitem.active {
  color: #fff;
  background: rgba(37,99,235,.22);
  border-color: rgba(125,211,252,.26);
}
#appShell .sidebar .nav-subitem small {
  color: #cbd5e1;
  background: rgba(15,23,42,.32);
}
#appShell .sidebar .nav-subitem[data-tone="ready"] small { color: #dcfce7; background: rgba(22,101,52,.56); }
#appShell .sidebar .nav-subitem[data-tone="attention"] small { color: #fef3c7; background: rgba(146,64,14,.48); }
#appShell .sidebar .nav-subitem[data-tone="danger"] small { color: #fee2e2; background: rgba(153,27,27,.48); }
#appShell .sidebar .nav-subitem[data-tone="locked"] {
  color: rgba(226,232,240,.76);
  background: rgba(71,85,105,.28);
  border-color: rgba(148,163,184,.18);
}