/* assets/css/particles-bg.css */
.particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

body {
    position: relative;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%) !important;
    transition: background-image 0.5s ease;
}

body.dark-mode {
    background-image: none !important;
    background-color: #0d0d0d !important;
}

.particles-container canvas {
    width: 100%;
    height: 100%;
}

/* Translucent overrides to let particles show through */
.category-hero,
.prompt-detail-wrapper,
.categories-section,
.browse-section,
main.container,
.cat-hero {
    background: transparent !important;
}

.prompt-card,
.category-card-3d {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

body.dark-mode .prompt-card,
body.dark-mode .category-card-3d {
    background: rgba(30, 30, 30, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.prompt-textarea-container {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(10px);
}

body.dark-mode .prompt-textarea-container {
    background: rgba(10, 10, 10, 0.6) !important;
}