* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
}

.font-jakarta {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #475569;
}

.sidebar-link {
    transition: all 0.2s ease;
}

.sidebar-link:hover {
    background: rgba(59, 130, 246, 0.08);
}

.sidebar-link.active {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
    border-right: 3px solid #3b82f6;
}

.dark .sidebar-link:hover {
    background: rgba(59, 130, 246, 0.15);
}

.dark .sidebar-link.active {
    background: rgba(59, 130, 246, 0.2);
}

.card-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.12);
}

.dark .card-hover:hover {
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4);
}

.fade-in {
    animation: fadeIn 0.4s ease forwards;
}

.slide-up {
    animation: slideUp 0.4s ease forwards;
}

.scale-in {
    animation: scaleIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95)
    }

    to {
        opacity: 1;
        transform: scale(1)
    }
}

@media(prefers-reduced-motion:reduce) {

    .fade-in,
    .slide-up,
    .scale-in {
        animation: none
    }
}

.overlay {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px)
}

.pulse-dot {
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {

    0%,
    100% {
        opacity: 1
    }

    50% {
        opacity: 0.4
    }
}

.glass-effect {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}