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

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

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

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

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

        .sidebar-link {
            transition: all .25s cubic-bezier(.4, 0, .2, 1)
        }

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

        .sidebar-link.active {
            background: linear-gradient(135deg, #FFF7ED, #FFEDD5)
        }

        .dark .sidebar-link.active {
            background: linear-gradient(135deg, #431407, #7C2D12)
        }

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

        .card-hover {
            transition: all .4s cubic-bezier(.4, 0, .2, 1)
        }

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

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

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

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

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

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

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

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

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

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

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

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

        .gradient-violet {
            background: linear-gradient(135deg, #7C3AED, #A78BFA)
        }

        .gradient-amber {
            background: linear-gradient(135deg, #D97706, #FCD34D)
        }

        .progress-bar {
            transition: width 1.8s cubic-bezier(.4, 0, .2, 1)
        }

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

        .modal-content {
            transition: all .45s cubic-bezier(.4, 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(.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 .4s cubic-bezier(.4, 0, .2, 1)
        }

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

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

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

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

        @keyframes float {

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

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

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

        .tab-btn {
            transition: all .25s ease
        }

        .tab-btn.active {
            background: white;
            color: #F97316;
            box-shadow: 0 4px 12px rgba(0, 0, 0, .08)
        }

        .dark .tab-btn.active {
            background: #1E293B;
            color: #FB923C
        }

        .toast {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 20px;
            border-radius: 16px;
            background: white;
            box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .18);
            font-size: 14px;
            font-weight: 600;
            color: #1E293B;
            transform: translateY(100px);
            opacity: 0;
            transition: all .4s cubic-bezier(.4, 0, .2, 1);
            min-width: 280px
        }

        .dark .toast {
            background: #1E293B;
            color: #F1F5F9;
            box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .5)
        }

        .toast.show {
            transform: translateY(0);
            opacity: 1
        }

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

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

        .count-anim {
            animation: countUp .5s ease forwards
        }

        .report-card {
            transition: all .35s cubic-bezier(.4, 0, .2, 1)
        }

        .report-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .1)
        }

        .dark .report-card:hover {
            box-shadow: 0 20px 40px -8px rgba(0, 0, 0, .4)
        }

        .kpi-ring {
            transform: rotate(-90deg);
            transform-origin: center
        }

        @keyframes spin-in {
            from {
                stroke-dashoffset: 283
            }
        }

        .table-row {
            transition: background .2s
        }

        .table-row:hover {
            background: rgba(249, 115, 22, .04)
        }

        .dark .table-row:hover {
            background: rgba(249, 115, 22, .08)
        }

        .chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 10px;
            border-radius: 99px;
            font-size: 11px;
            font-weight: 700
        }

        .chip-up {
            background: #D1FAE5;
            color: #065F46
        }

        .chip-down {
            background: #FEE2E2;
            color: #991B1B
        }

        .dark .chip-up {
            background: rgba(16, 185, 129, .15);
            color: #34D399
        }

        .dark .chip-down {
            background: rgba(239, 68, 68, .15);
            color: #F87171
        }

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

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

        .slide-up {
            animation: slideUp .4s ease forwards
        }

        .sparkline-bar {
            transition: height .8s cubic-bezier(.4, 0, .2, 1)
        }