body {
    background: linear-gradient(-45deg, #e2e8f0, #f1f5f9, #e0f2fe, #dbeafe);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

html.dark body {
    background: linear-gradient(-45deg, #0f172a, #131b31, #0b1120, #1e293b);
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

:root {
    --circuit-stroke-color: rgba(203, 213, 225, 0.9);
}

html.dark {
    --circuit-stroke-color: rgba(34, 211, 238, 0.2);
}

    html.dark .access-denied-card {
        --circuit-stroke-color: rgba(239, 68, 68, 0.2);
    }

.circuit-stroke {
    stroke: var(--circuit-stroke-color);
}

@keyframes icon-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px rgba(239, 68, 68, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
    }
}

.animate-icon-pulse {
    animation: icon-pulse 2s infinite;
}