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

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

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

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

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

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

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

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

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

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

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

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

    .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-violet {
        background: linear-gradient(135deg, #7C3AED, #A78BFA)
    }

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

    .gradient-proj {
        background: linear-gradient(135deg, #7C3AED, #6366F1, #3B82F6)
    }

    .gradient-slate {
        background: linear-gradient(135deg, #475569, #64748B)
    }

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

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

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

    .dark .sidebar-link.active {
        background: linear-gradient(135deg, #2E1065, #3B0764)
    }

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

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

    .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) !important;
        opacity: 1 !important
    }

    .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 float {

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

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

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

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

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

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

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

    /* Project cards */
    .proj-card {
        transition: all .35s cubic-bezier(.4, 0, .2, 1);
        cursor: pointer
    }

    .proj-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .12)
    }

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

    /* Progress bar */
    .prog-bar {
        transition: width 1.5s cubic-bezier(.4, 0, .2, 1)
    }

    /* Kanban */
    .kanban-col {
        min-height: 200px
    }

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

    .kanban-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .12)
    }

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

    .kanban-card:active {
        cursor: grabbing;
        transform: scale(.98);
        opacity: .8
    }

    .kanban-card.dragging {
        opacity: .4;
        transform: rotate(2deg)
    }

    .kanban-col.drag-over {
        background: rgba(99, 102, 241, .06);
        border-radius: 16px;
        outline: 2px dashed #6366F1
    }

    .dark .kanban-col.drag-over {
        background: rgba(99, 102, 241, .1)
    }

    /* Task list */
    .task-row {
        transition: all .2s ease
    }

    .task-row:hover {
        background: rgba(124, 58, 237, .04)
    }

    .dark .task-row:hover {
        background: rgba(124, 58, 237, .08)
    }

    /* Gantt */
    .gantt-bar {
        border-radius: 6px;
        transition: all .3s ease;
        cursor: pointer
    }

    .gantt-bar:hover {
        filter: brightness(.9);
        transform: scaleY(1.05)
    }

    .gantt-row:hover .gantt-label {
        color: #7C3AED
    }

    /* Priority badges */
    .badge-urgent {
        background: #FEE2E2;
        color: #DC2626
    }

    .badge-high {
        background: #FFEDD5;
        color: #C2410C
    }

    .badge-medium {
        background: #FEF9C3;
        color: #A16207
    }

    .badge-low {
        background: #DCFCE7;
        color: #15803D
    }

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

    .dark .badge-high {
        background: rgba(249, 115, 22, .15);
        color: #FB923C
    }

    .dark .badge-medium {
        background: rgba(234, 179, 8, .15);
        color: #FDE047
    }

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

    /* Status */
    .status-active {
        background: #EDE9FE;
        color: #7C3AED
    }

    .status-on-track {
        background: #DCFCE7;
        color: #15803D
    }

    .status-at-risk {
        background: #FFEDD5;
        color: #C2410C
    }

    .status-delayed {
        background: #FEE2E2;
        color: #DC2626
    }

    .status-completed {
        background: #F1F5F9;
        color: #475569
    }

    .status-planning {
        background: #EFF6FF;
        color: #1D4ED8
    }

    .dark .status-active {
        background: rgba(124, 58, 237, .2);
        color: #A78BFA
    }

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

    .dark .status-at-risk {
        background: rgba(249, 115, 22, .15);
        color: #FB923C
    }

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

    .dark .status-completed {
        background: rgba(71, 85, 105, .2);
        color: #94A3B8
    }

    .dark .status-planning {
        background: rgba(59, 130, 246, .15);
        color: #60A5FA
    }

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

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

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

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

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

    /* View toggle */
    .vbtn {
        transition: all .2s
    }

    .vbtn.active {
        background: white;
        color: #7C3AED;
        box-shadow: 0 2px 8px rgba(0, 0, 0, .08)
    }

    .dark .vbtn.active {
        background: #1E293B;
        color: #A78BFA
    }

    /* Tabs */
    .tab-btn {
        transition: all .2s;
        border-bottom: 2px solid transparent
    }

    .tab-btn.active {
        color: #7C3AED;
        border-bottom-color: #7C3AED
    }

    .dark .tab-btn.active {
        color: #A78BFA;
        border-bottom-color: #A78BFA
    }

    /* Team avatar stack */
    .avatar-stack .av {
        margin-left: -8px;
        border: 2px solid white;
        transition: transform .2s
    }

    .dark .avatar-stack .av {
        border-color: #1E293B
    }

    .avatar-stack:hover .av {
        transform: none
    }

    .avatar-stack .av:hover {
        transform: translateY(-4px);
        z-index: 10
    }

    /* Gantt grid */
    .gantt-grid-line {
        border-right: 1px dashed rgba(0, 0, 0, .07)
    }

    .dark .gantt-grid-line {
        border-right-color: rgba(255, 255, 255, .07)
    }

    /* Milestone diamond */
    .milestone {
        width: 12px;
        height: 12px;
        background: #7C3AED;
        transform: rotate(45deg);
        border-radius: 2px;
        cursor: pointer;
        transition: transform .2s
    }

    .milestone:hover {
        transform: rotate(45deg) scale(1.3)
    }

    /* Color dot */
    .color-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        flex-shrink: 0
    }

    input[type='range']::-webkit-slider-thumb {
        background: #7C3AED
    }

    input[type='range'] {
        accent-color: #7C3AED
    }