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

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

   .font-jakarta {
       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;
   }

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

   .sidebar-scroll::-webkit-scrollbar-thumb {
       background: rgba(148, 163, 184, 0.3);
       border-radius: 2px;
   }

   .glass {
       background: rgba(255, 255, 255, 0.7);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
   }

   .dark .glass {
       background: rgba(15, 23, 42, 0.7);
   }

   .glass-card {
       background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(12px);
       -webkit-backdrop-filter: blur(12px);
       border: 1px solid rgba(226, 232, 240, 0.8);
   }

   .dark .glass-card {
       background: rgba(30, 41, 59, 0.8);
       border: 1px solid rgba(51, 65, 85, 0.6);
   }

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

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

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   @keyframes slideInLeft {
       from {
           transform: translateX(-100%);
       }

       to {
           transform: translateX(0);
       }
   }

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

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

   @keyframes pulse-soft {

       0%,
       100% {
           opacity: 1;
       }

       50% {
           opacity: 0.7;
       }
   }

   .animate-fadeInUp {
       animation: fadeInUp 0.5s ease-out forwards;
   }

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

   .stagger-1 {
       animation-delay: 0.05s;
   }

   .stagger-2 {
       animation-delay: 0.1s;
   }

   .stagger-3 {
       animation-delay: 0.15s;
   }

   .stagger-4 {
       animation-delay: 0.2s;
   }

   .stagger-5 {
       animation-delay: 0.25s;
   }

   .stagger-6 {
       animation-delay: 0.3s;
   }

   .stagger-7 {
       animation-delay: 0.35s;
   }

   .stagger-8 {
       animation-delay: 0.4s;
   }

   .hover-lift {
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }

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

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

   .gradient-text {
       background: linear-gradient(135deg, #6366f1, #8b5cf6, #a78bfa);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }

   .nav-active {
       background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
       border-right: 3px solid #6366f1;
       color: #6366f1;
   }

   .dark .nav-active {
       background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.12));
       color: #818cf8;
       border-color: #818cf8;
   }

   .notification-dot {
       position: absolute;
       top: -2px;
       right: -2px;
       width: 10px;
       height: 10px;
       background: #ef4444;
       border-radius: 50%;
       border: 2px solid white;
       animation: pulse-soft 2s infinite;
   }

   .dark .notification-dot {
       border-color: #0f172a;
   }

   .dropdown-enter {
       opacity: 0;
       transform: translateY(-8px) scale(0.96);
       transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       pointer-events: none;
   }

   .dropdown-enter.active {
       opacity: 1;
       transform: translateY(0) scale(1);
       pointer-events: auto;
   }

   .sidebar-overlay {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.5);
       z-index: 40;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.3s ease;
   }

   .sidebar-overlay.active {
       opacity: 1;
       pointer-events: auto;
   }

   .kpi-gradient-1 {
       background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
   }

   .kpi-gradient-2 {
       background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
   }

   .kpi-gradient-3 {
       background: linear-gradient(135deg, #10b981 0%, #059669 100%);
   }

   .kpi-gradient-4 {
       background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
   }

   .kpi-gradient-5 {
       background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
   }

   .kpi-gradient-6 {
       background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
   }

   .chart-container {
       position: relative;
       width: 100%;
       min-height: 280px;
   }

   @media (max-width: 640px) {
       .chart-container {
           min-height: 220px;
       }
   }

   .table-row-hover {
       transition: background 0.15s ease;
   }

   .table-row-hover:hover {
       background: rgba(99, 102, 241, 0.04);
   }

   .dark .table-row-hover:hover {
       background: rgba(99, 102, 241, 0.08);
   }

   .badge-success {
       background: #ecfdf5;
       color: #059669;
   }

   .dark .badge-success {
       background: rgba(16, 185, 129, 0.15);
       color: #34d399;
   }

   .badge-warning {
       background: #fffbeb;
       color: #d97706;
   }

   .dark .badge-warning {
       background: rgba(245, 158, 11, 0.15);
       color: #fbbf24;
   }

   .badge-danger {
       background: #fef2f2;
       color: #dc2626;
   }

   .dark .badge-danger {
       background: rgba(239, 68, 68, 0.15);
       color: #f87171;
   }

   .badge-info {
       background: #eff6ff;
       color: #2563eb;
   }

   .dark .badge-info {
       background: rgba(59, 130, 246, 0.15);
       color: #60a5fa;
   }

   .badge-purple {
       background: #f5f3ff;
       color: #7c3aed;
   }

   .dark .badge-purple {
       background: rgba(124, 58, 237, 0.15);
       color: #a78bfa;
   }

   .modal-backdrop {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.6);
       backdrop-filter: blur(4px);
       z-index: 100;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.3s ease;
       padding: 16px;
   }

   .modal-backdrop.active {
       opacity: 1;
       pointer-events: auto;
   }

   .modal-content {
       background: white;
       border-radius: 16px;
       padding: 24px;
       max-width: 520px;
       width: 100%;
       max-height: calc(100vh - 32px);
       overflow-y: auto;
       transform: scale(0.95) translateY(10px);
       transition: transform 0.3s ease;
   }

   .modal-backdrop.active .modal-content {
       transform: scale(1) translateY(0);
   }

   .dark .modal-content {
       background: #1e293b;
   }

   /* Analytics-specific Styles */
   .metric-ring {
       width: 80px;
       height: 80px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .heatmap-cell {
       width: 100%;
       aspect-ratio: 1;
       border-radius: 4px;
       transition: all 0.2s ease;
       cursor: pointer;
   }

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

   .insight-card {
       transition: all 0.3s ease;
       cursor: pointer;
   }

   .insight-card:hover {
       background: rgba(99, 102, 241, 0.06);
   }

   .dark .insight-card:hover {
       background: rgba(99, 102, 241, 0.1);
   }

   .stat-comparison {
       display: flex;
       align-items: center;
       gap: 4px;
       font-size: 12px;
       font-weight: 600;
   }

   .live-indicator {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: #10b981;
       animation: pulse-soft 1.5s infinite;
   }