.sidebar {
  width: 230px;
  background: var(--white);
  border-right: 1px solid var(--gray100);
  display: flex;
  flex-direction: column;
  padding: 24px 0;
  flex-shrink: 0;
  overflow: auto;
  .sidebar-header {
    padding: 0 20px 28px;
  }

  .logo {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 4px;
  }

  .logo span {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dark);
  }

  .logo span:last-child {
    color: var(--coral);
  }

  .sidebar-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .sidebar-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    margin: 0 10px;
    border-radius: 10px;
    cursor: pointer;
    background: transparent;
    transition: all 0.15s ease;
    text-decoration: none;
    color: var(--gray600);
    font-size: 14px;
    font-weight: 500;
  }
  .sidebar-nav a:hover {
    background: var(--gray50);
  }

  /* 激活高亮（JSX 原版 UI） */
  .sidebar-nav a.active {
    background: var(--coralMuted) !important;
    color: var(--coral) !important;
    font-weight: 650;
  }
  .sidebar-nav a.active .icon {
    stroke: var(--coral);
  }

  .nav-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .nav-content .icon {
    stroke: var(--gray400);
    transition: all 0.15s ease;
  }

  /* 子菜单缩进 */
  .sidebar-nav ul ul {
    padding: 6px 0 6px 20px;
  }
  .sidebar-nav ul ul a {
    padding: 9px 20px;
    font-size: 13px;
    border-radius: 8px;
  }
  .sidebar-nav ul ul a:hover {
    background: var(--gray50);
  }

  /* 显示箭头 + 颜色 + 布局 */
  .sidebar-nav a .chevron {
    display: block !important;
    stroke: var(--gray300) !important;
    transition: transform 0.2s ease;
  }
  /* 展开时箭头旋转 */
  .sidebar-nav a[aria-expanded="true"] .chevron {
    transform: rotate(90deg);
  }


  /* 侧边栏用户 */
  .sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--gray100);
    margin-top: 8px;
  }

  .user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-weight: 700;
    color: var(--white);
  }

  .avatar-sm {
    width: 34px;
    height: 34px;
    background: var(--coralMuted);
    color: var(--coral);
    font-size: 13px;
  }

  .avatar-lg {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, var(--coral), var(--coralLight));
    font-size: 14px;
    cursor: pointer;
  }

  .user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--dark);
  }

  .user-role {
    font-size: 11px;
    color: var(--gray500);
  }

  .sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 20px;
    margin: 0 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition);
  }

  .nav-item:hover {
    background: var(--gray50);
  }

  .nav-item.active {
    background: var(--coralMuted);
  }

  .nav-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav-item span {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray700);
  }

  .nav-item.active span {
    font-weight: 650;
    color: var(--coral);
  }

  .icon {
    stroke: var(--gray500);
    transition: var(--transition);
  }

  .nav-item.active .icon {
    stroke: var(--coral);
  }

  .chevron {
    stroke: var(--gray300);
  }
}