.sidebar {
  width: 220px;
  background: #f8fafc;
  border-right: 1px solid #e5e7eb;
  padding-top: 40px;
  box-shadow: 2px 0 10px rgba(100,140,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.tree-menu {
  list-style: none;
  padding: 0 0;
  margin: 0;
}

.tree-menu > li {
  margin-bottom: 18px;
}

.tree-menu .toggle,
.tree-menu .submenu li span {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-weight: 500;
  font-size: 1.08rem;
  padding: 8px 18px 8px 22px;
  border-radius: 8px;
  color: #495366;
  transition: background 0.18s, color 0.18s;
  position: relative;
  margin-bottom: 2px;
  user-select: none;
}

.tree-menu .toggle::before,
.tree-menu .submenu li span::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  margin-right: 4px;
}

.tree-menu .toggle.expanded,
.tree-menu .submenu li span.active {
  background: linear-gradient(90deg, #e5eaff 0%, #f5f8ff 100%);
  color: #5b75ff;
}
.tree-menu .toggle.expanded::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="orange" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h1.172a2 2 0 001.414-.586l.828-.828A2 2 0 018.828 2h2.344a2 2 0 011.414.586l.828.828A2 2 0 0014.828 4H16a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>');
}
.tree-menu .toggle:not(.expanded)::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="gray" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6a2 2 0 012-2h12a2 2 0 012 2v8a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/></svg>');
}
.tree-menu .submenu li span::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="%23b0bbd2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5"/></svg>');
}
.tree-menu .submenu li span.active::before {
  background-image: url('data:image/svg+xml;utf8,<svg fill="#5b75ff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="10" cy="10" r="5"/></svg>');
}

.tree-menu .toggle:hover,
.tree-menu .submenu li span:hover {
  background: #e5eaff;
  color: #3451ff;
}

.tree-menu .submenu {
  list-style: none;
  padding-left: 16px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(.67,.25,.36,1), opacity 0.25s;
}

.tree-menu .submenu.open {
  display: block;
  max-height: 500px; /* 足够大即可，撑开动画 */
  opacity: 1;
  transition: max-height 0.35s cubic-bezier(.67,.25,.36,1), opacity 0.25s;
  animation: fadeIn .3s;
}

@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}

@media (max-width: 900px) {
  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #eee;
    box-shadow: none;
    padding-top: 16px;
  }
}