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

   body {
       font-family: 'Plus Jakarta Sans', 'Inter', 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-link {
       transition: all 0.2s ease;
       position: relative;
   }

   .sidebar-link::before {
       content: '';
       position: absolute;
       left: 0;
       top: 50%;
       transform: translateY(-50%);
       width: 3px;
       height: 0;
       background: linear-gradient(135deg, #3b8bff, #1e6af5);
       border-radius: 0 4px 4px 0;
       transition: height 0.2s ease;
   }

   .sidebar-link:hover::before,
   .sidebar-link.active::before {
       height: 60%;
   }

   .sidebar-link.active {
       background: linear-gradient(135deg, rgba(59, 139, 255, 0.1), rgba(30, 106, 245, 0.05));
       color: #3b8bff;
   }

   .dark .sidebar-link.active {
       background: linear-gradient(135deg, rgba(59, 139, 255, 0.15), rgba(30, 106, 245, 0.08));
   }

   .kpi-card {
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       overflow: hidden;
       position: relative;
   }

   .kpi-card:hover {
       transform: translateY(-4px);
       box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
   }

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

   .notification-badge {
       position: absolute;
       top: -4px;
       right: -4px;
       width: 18px;
       height: 18px;
       background: linear-gradient(135deg, #ef4444, #dc2626);
       border-radius: 50%;
       font-size: 10px;
       display: flex;
       align-items: center;
       justify-content: center;
       color: white;
       font-weight: 700;
       border: 2px solid white;
   }

   .dark .notification-badge {
       border-color: #1e293b;
   }

   .status-dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
   }

   .status-online {
       background: #22c55e;
       box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
   }

   .status-away {
       background: #f59e0b;
       box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
   }

   .status-offline {
       background: #94a3b8;
   }

   .progress-bar {
       height: 6px;
       border-radius: 3px;
       overflow: hidden;
       background: #e2e8f0;
   }

   .dark .progress-bar {
       background: #334155;
   }

   .progress-fill {
       height: 100%;
       border-radius: 3px;
       transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .modal-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.5);
       backdrop-filter: blur(4px);
       z-index: 100;
       display: none;
       align-items: center;
       justify-content: center;
       padding: 1rem;
   }

   .modal-overlay.active {
       display: flex;
   }

   .toast-container {
       position: fixed;
       top: 1rem;
       right: 1rem;
       z-index: 200;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }

   .sidebar-section-title {
       font-size: 0.65rem;
       font-weight: 700;
       letter-spacing: 0.1em;
       text-transform: uppercase;
       padding: 0.75rem 1.25rem 0.35rem;
   }

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

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

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   @keyframes slideInRight {
       from {
           opacity: 0;
           transform: translateX(20px);
       }

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

   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-10px);
       }

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

   @keyframes scaleIn {
       from {
           opacity: 0;
           transform: scale(0.95);
       }

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

   .animate-fade-in-up {
       animation: fadeInUp 0.5s ease forwards;
   }

   .animate-fade-in {
       animation: fadeIn 0.3s ease forwards;
   }

   .animate-slide-in-right {
       animation: slideInRight 0.4s ease forwards;
   }

   .animate-slide-down {
       animation: slideDown 0.3s ease forwards;
   }

   .animate-scale-in {
       animation: scaleIn 0.2s ease forwards;
   }

   .dropdown-menu {
       display: none;
   }

   .dropdown-menu.active {
       display: block;
   }

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

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

   .analytics-tab {
       transition: all 0.2s ease;
       cursor: pointer;
   }

   .analytics-tab.active {
       background: linear-gradient(135deg, #3b8bff, #1e6af5);
       color: white;
       box-shadow: 0 4px 12px rgba(59, 139, 255, 0.3);
   }

   .heatmap-cell {
       transition: all 0.2s ease;
       cursor: pointer;
       border-radius: 4px;
   }

   .heatmap-cell:hover {
       transform: scale(1.15);
       z-index: 10;
   }

   .metric-ring {
       transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   }

   input[type="search"]::-webkit-search-cancel-button {
       display: none;
   }