.no-scrollbar::-webkit-scrollbar {
            display: none;
        }

        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }


.alert {
    padding: 20px !important;
    background-color: #f44336 !important;
    color: white !important;
    opacity: 1 !important;
    transition: opacity 0.6s !important;
    margin-bottom: 15px !important;
    position: relative !important;
}

/* Subtle card 3D tilt shadow helper */
.card-tilt-shadow {
    box-shadow: 0 10px 30px rgba(0,0,0,0.08), 0 6px 12px rgba(0,0,0,0.06);
    transition: box-shadow 250ms ease;
}
.card-tilt-shadow:hover {
    box-shadow: 0 20px 50px rgba(0,0,0,0.12), 0 8px 18px rgba(0,0,0,0.08);
}

/* Skeleton shimmer */
.skeleton {
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg, rgba(0,0,0,0.06) 25%, rgba(0,0,0,0.12) 37%, rgba(0,0,0,0.06) 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* Paint blob effect */
.paint-blob {
    position: absolute;
    border-radius: 50% 40% 60% 50% / 40% 60% 50% 50%;
    filter: blur(8px);
    opacity: 0.35;
}
.paint-blob--1 { background: radial-gradient(circle at 30% 30%, #ec4899, transparent 60%); } /* pink-500 */
.paint-blob--2 { background: radial-gradient(circle at 70% 60%, #4f46e5, transparent 60%); } /* indigo-600 */
.paint-blob--3 { background: radial-gradient(circle at 40% 70%, #eab308, transparent 60%); } /* yellow-500 */

/* Floating animation */
.float-y {
    animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Gradient border utility */
.gradient-border {
    position: relative;
}
.gradient-border::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(236,72,153,0.6), rgba(139,92,246,0.6), rgba(37,99,235,0.6), rgba(16,163,74,0.6), rgba(234,179,8,0.6), rgba(239,68,68,0.6), rgba(79,70,229,0.6), rgba(244,63,94,0.6));
    z-index: 0;
}
.gradient-border > * {
    position: relative;
    z-index: 1;
}

/* Animated gradient text */
.text-gradient-animate {
    background: linear-gradient(90deg, #ec4899, #8b5cf6, #2563eb, #16a34a, #eab308, #ef4444, #4f46e5, #f43f5e, #ec4899);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradientShift 6s ease infinite;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Parallax utility */
.parallax-container { position: relative; overflow: hidden; }
.parallax-layer { position: absolute; will-change: transform; }
.alert.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}
.close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    background-color: transparent !important;
    border: none !important;
    
    font-size: 20px !important;
    cursor: pointer !important;
}

/* Ensure the page has a spacer so fixed bottom nav doesn't cover content */
.mobile-bottom-spacer {
        width: 100%;
        pointer-events: none;
}

/* Improve hit area for fixed mobile controls */
#mobile-back-button button, .fixed-bottom-action {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
}

/* Make bottom nav responsive and respect safe-area insets */
@media (max-width: 768px) {
    .fixed.bottom-0.left-0.right-0 {
        padding-bottom: env(safe-area-inset-bottom, 12px);
    }
}