* {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Inter', sans-serif;
       overflow-x: hidden;
   }

   .font-jakarta {
       font-family: 'Plus Jakarta Sans', sans-serif;
   }

   ::-webkit-scrollbar {
       width: 6px;
       height: 6px;
   }

   ::-webkit-scrollbar-track {
       background: transparent;
   }

   ::-webkit-scrollbar-thumb {
       background: #4a4a5a;
       border-radius: 3px;
   }

   .light ::-webkit-scrollbar-thumb {
       background: #c0c0c0;
   }

   .sidebar-scroll::-webkit-scrollbar {
       width: 4px;
   }

   .sidebar-scroll::-webkit-scrollbar-thumb {
       background: rgba(255, 255, 255, 0.1);
       border-radius: 2px;
   }

   .sidebar {
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .sidebar-overlay {
       transition: opacity 0.3s ease;
   }

   .dropdown-enter {
       animation: dropdownIn 0.2s ease forwards;
   }

   @keyframes dropdownIn {
       from {
           opacity: 0;
           transform: translateY(-8px) scale(0.96);
       }

       to {
           opacity: 1;
           transform: translateY(0) scale(1);
       }
   }

   .theme-transition,
   .theme-transition * {
       transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
   }

   .nav-item {
       transition: all 0.2s ease;
       position: relative;
   }

   .nav-item.active {
       background: rgba(139, 92, 246, 0.12);
   }

   .nav-item.active::before {
       content: '';
       position: absolute;
       left: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 3px;
       height: 60%;
       background: linear-gradient(to bottom, #8B5CF6, #06B6D4);
       border-radius: 0 3px 3px 0;
   }

   .light .nav-item.active {
       background: rgba(139, 92, 246, 0.08);
   }

   .notif-badge {
       position: absolute;
       top: -2px;
       right: -2px;
       width: 18px;
       height: 18px;
       background: #EF4444;
       border-radius: 50%;
       font-size: 10px;
       font-weight: 700;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       border: 2px solid;
   }

   .dark .notif-badge {
       border-color: #0f0f1a;
   }

   .light .notif-badge {
       border-color: #ffffff;
   }

   @media (max-width: 640px) {

       .notif-panel,
       .profile-panel,
       .quick-panel,
       .search-panel {
           position: fixed !important;
           top: 70px !important;
           left: 12px !important;
           right: 12px !important;
           width: auto !important;
           max-width: calc(100vw - 24px) !important;
           z-index: 100 !important;
       }

       .profile-btn-img {
           min-width: 32px !important;
           flex-shrink: 0 !important;
       }
   }

   /* Profile Tabs */
   .profile-tab-btn {
       position: relative;
       transition: all 0.3s ease;
   }

   .profile-tab-btn.active {
       color: #8B5CF6;
       font-weight: 600;
   }

   .profile-tab-btn.active::after {
       content: '';
       position: absolute;
       bottom: -1px;
       left: 0;
       width: 100%;
       height: 2px;
       background: #8B5CF6;
       border-radius: 2px 2px 0 0;
   }

   .pulse-dot {
       animation: pulse 2s infinite;
   }

   @keyframes pulse {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.5;
       }
   }