/* Grid Pattern Background with Gradient - Default (Homepage) */
body {
    background-color: #000000 !important;
    background-image: 
        /* Grid pattern - subtle green */
        linear-gradient(rgba(34, 197, 94, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.03) 1px, transparent 1px),
        /* Gradient overlay */
        radial-gradient(ellipse at top, rgba(34, 197, 94, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(239, 68, 68, 0.05) 0%, transparent 50%) !important;
    background-size: 
        50px 50px,  /* Grid size */
        50px 50px,  /* Grid size */
        100% 100%,   /* Gradient size */
        100% 100% !important;   /* Gradient size */
    background-position: 0 0, 0 0, 0 0, 0 0 !important;
    position: relative;
}

/* Executor theme - Blue/Cyan */
body.theme-executor {
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at top, rgba(6, 182, 212, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(59, 130, 246, 0.05) 0%, transparent 50%) !important;
}

/* Robux theme - Green */
body.theme-robux {
    background-image: 
        linear-gradient(rgba(34, 197, 94, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at top, rgba(34, 197, 94, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(251, 191, 36, 0.05) 0%, transparent 50%) !important;
}

/* Scripts theme - Red/Purple */
body.theme-scripts {
    background-image: 
        linear-gradient(rgba(239, 68, 68, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 68, 68, 0.03) 1px, transparent 1px),
        radial-gradient(ellipse at top, rgba(168, 85, 247, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(239, 68, 68, 0.05) 0%, transparent 50%) !important;
}

/* Optional: Add animated grid lines for extra effect */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(34, 197, 94, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.02) 1px, transparent 1px);
    background-size: 100px 100px;
    pointer-events: none;
    z-index: 0;
}

body.theme-executor::before {
    background-image: 
        linear-gradient(rgba(59, 130, 246, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(59, 130, 246, 0.02) 1px, transparent 1px);
}

body.theme-robux::before {
    background-image: 
        linear-gradient(rgba(34, 197, 94, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.02) 1px, transparent 1px);
}

body.theme-scripts::before {
    background-image: 
        linear-gradient(rgba(239, 68, 68, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(239, 68, 68, 0.02) 1px, transparent 1px);
}

/* Ensure content is above the background */
body > * {
    position: relative;
    z-index: 1;
}