/* Custom styles and animations */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #6366f1;
    --primary-hover: #4f46e5;
    --tiktok-color: #fe2c55;
    --fb-color: #1877f2;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Background mesh gradients */
.bg-mesh-dark {
    background-color: #0b0f19;
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(254, 44, 85, 0.12) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(24, 119, 242, 0.12) 0px, transparent 50%);
}

.bg-mesh-light {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, rgba(99, 102, 241, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(254, 44, 85, 0.06) 0px, transparent 50%),
        radial-gradient(at 50% 100%, rgba(24, 119, 242, 0.06) 0px, transparent 50%);
}

/* Glassmorphism Card */
.glass-card {
    background: rgba(17, 24, 39, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card-light {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

/* Glowing border effect */
.glow-focus:focus-within {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4), 0 0 25px rgba(99, 102, 241, 0.2);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5);
}

/* Shimmer Animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.animate-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.8s infinite;
}

/* Pulse Glow */
@keyframes pulse-glow {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.03); }
}

.animate-glow {
    animation: pulse-glow 4s ease-in-out infinite;
}