* {
            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, #EEF2FF, #E0E7FF)
        }

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

        .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-orange {
            background: linear-gradient(135deg, #F97316, #FB923C)
        }

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

        .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
        }

        .table-row {
            transition: all .2s ease
        }

        .table-row:hover {
            background: rgba(6, 182, 212, .04)
        }

        .dark .table-row:hover {
            background: rgba(6, 182, 212, .08)
        }

        .order-step {
            transition: all .3s ease
        }

        .order-step.active-step .step-dot {
            transform: scale(1.3);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, .2)
        }

        .kanban-col {
            min-height: 200px
        }

        .kanban-card {
            transition: all .25s ease;
            cursor: grab
        }

        .kanban-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px -5px rgba(0, 0, 0, .1)
        }

        .dark .kanban-card:hover {
            box-shadow: 0 8px 25px -5px rgba(0, 0, 0, .3)
        }

        .timeline-dot {
            transition: transform .2s ease
        }

        .timeline-dot:hover {
            transform: scale(1.4)
        }