#panelContent {
    animation: tab-fade-in 0.25s var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  }
  
  @keyframes tab-fade-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  #panelContent > .card,
  #panelContent > section.card {
    animation: card-in 0.3s var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
  }
  
  #panelContent > .card:nth-child(2),
  #panelContent > section.card:nth-child(2) { animation-delay: 0.03s; }
  #panelContent > .card:nth-child(3),
  #panelContent > section.card:nth-child(3) { animation-delay: 0.06s; }
  #panelContent > .card:nth-child(4),
  #panelContent > section.card:nth-child(4) { animation-delay: 0.09s; }
  #panelContent > .card:nth-child(5),
  #panelContent > section.card:nth-child(5) { animation-delay: 0.12s; }
  #panelContent > .card:nth-child(n+6),
  #panelContent > section.card:nth-child(n+6) { animation-delay: 0.15s; }
  
  @keyframes card-in {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .nav-item {
    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  }
  
  .nav-item.active {
    position: relative;
  }
  
  .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--primary);
    border-radius: 0 3px 3px 0;
    animation: active-bar-in 0.2s var(--ease);
  }
  
  @keyframes active-bar-in {
    from {
      transform: translateY(-50%) scaleY(0);
      opacity: 0;
    }
    to {
      transform: translateY(-50%) scaleY(1);
      opacity: 1;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    #panelContent,
    #panelContent > .card,
    #panelContent > section.card,
    .nav-item,
    .nav-item.active::before {
      animation: none !important;
      transition: none !important;
    }
  }