.global-dynamic-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(31, 143, 138, 0.09), transparent 34%),
        linear-gradient(245deg, rgba(233, 95, 70, 0.08), transparent 36%),
        linear-gradient(180deg, rgba(214, 155, 31, 0.08), transparent 48%),
        var(--bg-body);
}

.circuit-flow-layer,
.star-layer,
.nebula-glow {
    position: absolute;
    inset: 0;
}

.circuit-flow-layer {
    inset: -25%;
    background-image:
        linear-gradient(rgba(31, 143, 138, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 255, 0.1) 1px, transparent 1px),
        linear-gradient(135deg, transparent 0 48%, rgba(233, 95, 70, 0.12) 49% 50%, transparent 51% 100%);
    background-size: 42px 42px, 42px 42px, 140px 140px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0.18));
}

.circuit-flow-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(31, 143, 138, 0.18), transparent),
        linear-gradient(180deg, transparent, rgba(214, 155, 31, 0.12), transparent);
    background-size: 280px 100%, 100% 240px;
    animation: signal-scan 14s linear infinite;
}

.circuit-flow-layer::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(31, 143, 138, 0.36) 0 3px, transparent 4px),
        radial-gradient(circle at 34% 46%, rgba(124, 92, 255, 0.28) 0 3px, transparent 4px),
        radial-gradient(circle at 62% 28%, rgba(214, 155, 31, 0.32) 0 3px, transparent 4px),
        radial-gradient(circle at 78% 64%, rgba(233, 95, 70, 0.26) 0 3px, transparent 4px),
        linear-gradient(90deg, transparent 0 22%, rgba(31, 143, 138, 0.16) 23% 24%, transparent 25% 100%),
        linear-gradient(180deg, transparent 0 54%, rgba(124, 92, 255, 0.14) 55% 56%, transparent 57% 100%);
    background-size: 260px 220px, 320px 260px, 360px 240px, 300px 280px, 260px 260px, 300px 300px;
    animation: circuit-pulse 6.5s ease-in-out infinite alternate;
}

.star-layer {
    position: absolute;
    inset: -12%;
    display: none;
}

.layer-1 {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.95) 0 1px, transparent 1.6px),
        radial-gradient(circle, rgba(155, 131, 255, 0.72) 0 1px, transparent 1.8px);
    background-size: 92px 92px, 148px 148px;
    background-position: 8px 14px, 46px 70px;
    animation: star-drift-slow 92s linear infinite;
}

.layer-2 {
    background-image:
        radial-gradient(circle, rgba(36, 198, 184, 0.82) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(241, 183, 66, 0.62) 0 1px, transparent 1.8px);
    background-size: 138px 138px, 210px 210px;
    background-position: 70px 20px, 18px 98px;
    opacity: 0.72;
    animation: star-drift-mid 64s linear infinite;
}

.layer-3 {
    background-image:
        radial-gradient(circle, rgba(255,255,255,0.8) 0 1px, transparent 1.7px),
        radial-gradient(circle, rgba(255, 115, 95, 0.62) 0 1px, transparent 1.8px);
    background-size: 64px 64px, 176px 176px;
    background-position: 32px 22px, 108px 44px;
    opacity: 0.44;
    animation: star-twinkle 5.5s ease-in-out infinite alternate;
}

.nebula-glow {
    display: none;
}

[data-theme="dark"] .global-dynamic-bg {
    background:
        linear-gradient(180deg, #040812 0%, #08111f 50%, #0d101a 100%),
        var(--bg-body);
}

[data-theme="dark"] .circuit-flow-layer {
    display: none;
}

[data-theme="dark"] .star-layer,
[data-theme="dark"] .nebula-glow {
    display: block;
}

[data-theme="dark"] .nebula-glow {
    background:
        linear-gradient(115deg, rgba(36, 198, 184, 0.16), transparent 28%),
        linear-gradient(245deg, rgba(155, 131, 255, 0.16), transparent 30%),
        linear-gradient(180deg, transparent 0 56%, rgba(255, 115, 95, 0.1) 100%);
    opacity: 0.72;
}

@keyframes signal-scan {
    0% { background-position: -280px 0, 0 -240px; }
    100% { background-position: 280px 0, 0 240px; }
}

@keyframes circuit-pulse {
    0% {
        opacity: 0.34;
        transform: translate3d(0, 0, 0);
        filter: saturate(0.9);
    }
    100% {
        opacity: 0.78;
        transform: translate3d(28px, -18px, 0);
        filter: saturate(1.25);
    }
}

@keyframes star-drift-slow {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-92px, 46px, 0); }
}

@keyframes star-drift-mid {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(138px, -69px, 0); }
}

@keyframes star-twinkle {
    0% { opacity: 0.28; }
    100% { opacity: 0.62; }
}