* {
     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);
 }

 .upload-zone {
     transition: all 0.2s ease;
 }

 .upload-zone:hover {
     border-color: #6366f1;
     background-color: rgba(99, 102, 241, 0.03);
 }

 .dark .upload-zone:hover {
     background-color: rgba(99, 102, 241, 0.1);
 }