#testArea {
    cursor: crosshair;
    position: relative;
    overflow: hidden;
}

#testArea::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(59, 130, 246, 0.05) 0%, 
        rgba(37, 99, 235, 0.1) 50%,
        rgba(29, 78, 216, 0.05) 100%
    );
    pointer-events: none;
}

.dark #testArea::before {
    background: linear-gradient(45deg, 
        rgba(59, 130, 246, 0.2) 0%, 
        rgba(37, 99, 235, 0.25) 50%,
        rgba(29, 78, 216, 0.2) 100%
    );
}

/* Add magical blue gradients */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, rgba(239, 246, 255, 0.8), rgba(219, 234, 254, 0.8));
}

.bg-gradient-to-r {
    background-image: linear-gradient(to right, rgba(239, 246, 255, 0.9), rgba(219, 234, 254, 0.9));
}

/* Enhanced hover effects */
.shadow:hover {
    background-image: linear-gradient(to bottom right, rgba(219, 234, 254, 0.9), rgba(191, 219, 254, 0.9));
    transition: all 0.3s ease;
}