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

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

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

        ::-webkit-scrollbar-thumb {
            background: #CBD5E1;
            border-radius: 99px;
        }

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

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

        .sidebar-link {
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .sidebar-link:hover {
            transform: translateX(6px);
        }

        .sidebar-link.active {
            background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
        }

        .dark .sidebar-link.active {
            background: linear-gradient(135deg, #312E81 0%, #3730A3 100%);
        }

        .glass {
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }

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

        .card-hover:hover {
            transform: translateY(-6px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
        }

        .dark .card-hover:hover {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .gradient-primary {
            background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A78BFA 100%);
        }

        .gradient-success {
            background: linear-gradient(135deg, #10B981 0%, #34D399 100%);
        }

        .gradient-danger {
            background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
        }

        .gradient-warning {
            background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
        }

        .gradient-info {
            background: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
        }

        .gradient-pink {
            background: linear-gradient(135deg, #EC4899 0%, #F472B6 100%);
        }

        .gradient-cyan {
            background: linear-gradient(135deg, #06B6D4 0%, #22D3EE 100%);
        }

        .gradient-orange {
            background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
        }

        .gradient-teal {
            background: linear-gradient(135deg, #14B8A6 0%, #2DD4BF 100%);
        }

        .gradient-rose {
            background: linear-gradient(135deg, #F43F5E 0%, #FB7185 100%);
        }

        .progress-bar {
            transition: width 1.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal-overlay {
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .modal-content {
            transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

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

        .skeleton {
            background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
            background-size: 200% 100%;
            animation: sk 1.5s infinite;
        }

        .dark .skeleton {
            background: linear-gradient(90deg, #1E293B 25%, #334155 50%, #1E293B 75%);
            background-size: 200% 100%;
        }

        @keyframes sk {
            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }
        }

        @keyframes pulse-ring {
            0% {
                transform: scale(0.8);
                opacity: 1;
            }

            100% {
                transform: scale(2.5);
                opacity: 0;
            }
        }

        .notification-badge::after {
            content: '';
            position: absolute;
            top: -1px;
            right: -1px;
            width: 10px;
            height: 10px;
            background: #EF4444;
            border-radius: 50%;
            border: 2px solid white;
            animation: pulse-ring 2s infinite;
        }

        .dark .notification-badge::after {
            border-color: #0B1120;
        }

        .sidebar-mobile {
            transform: translateX(-100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

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

        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transform: scale(0);
            animation: rp 0.6s linear;
            pointer-events: none;
        }

        @keyframes rp {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        .timeline-line {
            position: absolute;
            left: 16px;
            top: 40px;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, #6366F1, #8B5CF6, #A78BFA, transparent);
        }

        .glow-primary {
            box-shadow: 0 0 25px rgba(99, 102, 241, 0.35);
        }

        .submenu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .submenu.open {
            max-height: 600px;
        }

        .heatmap-cell {
            transition: all 0.2s ease;
        }

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

        .metric-ring {
            transition: stroke-dashoffset 1.8s cubic-bezier(0.4, 0, 0.2, 1);
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .float-anim {
            animation: float 3s ease-in-out infinite;
        }

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

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

        .count-anim {
            animation: countUp 0.5s ease-out;
        }

        .sparkline-mini {
            filter: drop-shadow(0 1px 2px rgba(99, 102, 241, 0.3));
        }