* {
        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)
    }

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

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

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

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

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

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

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

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

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

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

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

    .g-task {
        background: linear-gradient(135deg, #10B981, #06B6D4, #3B82F6)
    }

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

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

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

    .dark .sidebar-link.active {
        background: linear-gradient(135deg, #022c22, #064e3b)
    }

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

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

    /* Modal */
    .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
    }

    /* Loader */
    .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
    }

    /* Task cards */
    .task-card {
        transition: all .25s cubic-bezier(.4, 0, .2, 1)
    }

    .task-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .1)
    }

    .dark .task-card:hover {
        box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .4)
    }

    .task-card.dragging {
        opacity: .4;
        transform: rotate(1.5deg) scale(.97)
    }

    .task-card.drag-over-top::before {
        content: '';
        position: absolute;
        top: -2px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #10B981, #3B82F6);
        border-radius: 99px
    }

    .task-card.drag-over-bottom::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #10B981, #3B82F6);
        border-radius: 99px
    }

    /* Table rows */
    .trow {
        transition: background .15s
    }

    .trow:hover {
        background: rgba(16, 185, 129, .04)
    }

    .dark .trow:hover {
        background: rgba(16, 185, 129, .08)
    }

    /* Checkbox custom */
    .task-check {
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 2px solid #CBD5E1;
        cursor: pointer;
        transition: all .2s;
        flex-shrink: 0;
        position: relative
    }

    .dark .task-check {
        border-color: #475569
    }

    .task-check:checked {
        border-color: #10B981;
        background: #10B981
    }

    .task-check:checked::after {
        content: '✓';
        position: absolute;
        top: -1px;
        left: 2px;
        font-size: 11px;
        font-weight: 900;
        color: white
    }

    .task-check:hover {
        border-color: #10B981;
        transform: scale(1.1)
    }

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

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

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

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

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

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

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

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

    /* Status */
    .s-todo {
        background: #EFF6FF;
        color: #1D4ED8
    }

    .s-progress {
        background: #EDE9FE;
        color: #7C3AED
    }

    .s-review {
        background: #FFF7ED;
        color: #C2410C
    }

    .s-done {
        background: #ECFDF5;
        color: #065F46
    }

    .s-blocked {
        background: #FEE2E2;
        color: #DC2626
    }

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

    .dark .s-progress {
        background: rgba(124, 58, 237, .15);
        color: #A78BFA
    }

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

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

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

    /* View toggle */
    .vbtn {
        transition: all .2s;
        border-radius: 10px;
        padding: 7px
    }

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

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

    /* Kanban */
    .kb-col {
        transition: background .2s
    }

    .kb-col.drag-over {
        background: rgba(16, 185, 129, .06);
        border-radius: 16px;
        outline: 2px dashed #10B981
    }

    .dark .kb-col.drag-over {
        background: rgba(16, 185, 129, .1)
    }

    /* Progress ring */
    .prog-ring {
        transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1)
    }

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

    /* Focus input */
    .inp {
        padding: 10px 14px;
        border-radius: 12px;
        border: 1.5px solid #E5E7EB;
        background: #F8FAFC;
        font-size: 13px;
        outline: none;
        transition: border .2s, box-shadow .2s;
        width: 100%
    }

    .inp:focus {
        border-color: #10B981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, .12)
    }

    .dark .inp {
        background: #1E293B;
        border-color: #334155;
        color: #F1F5F9
    }

    .dark .inp:focus {
        border-color: #10B981
    }

    /* Tags */
    .tag {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 2px 8px;
        border-radius: 99px;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
        transition: opacity .2s
    }

    .tag:hover {
        opacity: .8
    }

    /* Subtask */
    .subtask-item {
        transition: background .15s
    }

    .subtask-item:hover {
        background: rgba(16, 185, 129, .04)
    }

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

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

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

    @keyframes popIn {
        from {
            opacity: 0;
            transform: scale(.94)
        }

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

    .pop-in {
        animation: popIn .28s cubic-bezier(.4, 0, .2, 1) forwards
    }

    /* Timer */
    @keyframes timerPulse {

        0%,
        100% {
            opacity: 1
        }

        50% {
            opacity: .5
        }
    }

    .timer-active {
        animation: timerPulse 1s ease-in-out infinite
    }

    /* Streak fire */
    @keyframes fireFlicker {

        0%,
        100% {
            transform: scale(1) rotate(-3deg)
        }

        50% {
            transform: scale(1.1) rotate(3deg)
        }
    }

    .fire {
        animation: fireFlicker .8s ease-in-out infinite
    }

    /* Completion animation */
    @keyframes checkPop {
        0% {
            transform: scale(0)
        }

        60% {
            transform: scale(1.3)
        }

        100% {
            transform: scale(1)
        }
    }

    .check-pop {
        animation: checkPop .3s cubic-bezier(.4, 0, .2, 1)
    }

    /* Overdue pulse */
    @keyframes overduePulse {

        0%,
        100% {
            box-shadow: 0 0 0 0 rgba(239, 68, 68, .4)
        }

        70% {
            box-shadow: 0 0 0 6px rgba(239, 68, 68, 0)
        }
    }

    .overdue-pulse {
        animation: overduePulse 2s infinite
    }