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

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

   h1,
   h2,
   h3,
   h4,
   h5,
   h6 {
       font-family: 'Plus Jakarta Sans', sans-serif;
   }

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

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

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

   .dark ::-webkit-scrollbar-thumb {
       background: #475569;
   }

   ::-webkit-scrollbar-thumb:hover {
       background: #94a3b8;
   }

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

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

   .dropdown-enter {
       animation: dropdownEnter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .modal-enter {
       animation: modalEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .toast-enter {
       animation: toastEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   }

   .toast-exit {
       animation: toastExit 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
   }

   .fade-in {
       animation: fadeIn 0.5s ease-out;
   }

   .slide-up {
       animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
   }

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

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

   @keyframes modalEnter {
       from {
           opacity: 0;
           transform: scale(0.95) translateY(10px);
       }

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

   @keyframes toastEnter {
       from {
           opacity: 0;
           transform: translateX(100%);
       }

       to {
           opacity: 1;
           transform: translateX(0);
       }
   }

   @keyframes toastExit {
       from {
           opacity: 1;
           transform: translateX(0);
       }

       to {
           opacity: 0;
           transform: translateX(100%);
       }
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   @keyframes slideUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

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

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

   .nav-item:hover {
       background: rgba(99, 102, 241, 0.08);
   }

   .nav-item.active {
       background: rgba(99, 102, 241, 0.12);
       color: #6366f1;
   }

   .dark .nav-item:hover {
       background: rgba(99, 102, 241, 0.15);
   }

   .dark .nav-item.active {
       background: rgba(99, 102, 241, 0.2);
   }

   .nav-item.active::before {
       content: '';
       position: absolute;
       left: 0;
       top: 8px;
       bottom: 8px;
       width: 3px;
       background: #6366f1;
       border-radius: 0 3px 3px 0;
   }

   .card-hover {
       transition: all 0.3s ease;
   }

   .card-hover:hover {
       transform: translateY(-2px);
       box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.1);
   }

   .dark .card-hover:hover {
       box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.4);
   }

   .kpi-icon {
       transition: transform 0.3s ease;
   }

   .card-hover:hover .kpi-icon {
       transform: scale(1.1);
   }

   .status-badge {
       font-size: 0.7rem;
       padding: 0.25rem 0.6rem;
       border-radius: 9999px;
       font-weight: 600;
       letter-spacing: 0.025em;
       white-space: nowrap;
       display: inline-flex;
       align-items: center;
       gap: 0.25rem;
   }

   .table-container {
       overflow-x: auto;
       -webkit-overflow-scrolling: touch;
   }

   .table-container::-webkit-scrollbar {
       height: 6px;
   }

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

   @keyframes pulse {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.5;
       }
   }

   @media (max-width: 1024px) {
       .sidebar-desktop {
           transform: translateX(-100%);
       }

       .sidebar-open .sidebar-desktop {
           transform: translateX(0);
       }
   }

   .btn-primary {
       background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
       transition: all 0.2s ease;
   }

   .btn-primary:hover {
       transform: translateY(-1px);
       box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
   }

   .font-mono {
       font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   }