:root {
    --aurora-bg-start: #040b1a;
    --aurora-bg-end: #0c223f;
    --aurora-grid-color: rgba(255, 255, 255, 0.04);
    --aurora-orb-primary: rgba(37, 99, 235, 0.28);
    --aurora-orb-accent: rgba(14, 165, 233, 0.22);
}

body.aurora-bg {
    min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, rgba(37, 99, 235, 0.15), transparent 45%),
        radial-gradient(circle at 80% 0%, rgba(14, 165, 233, 0.1), transparent 50%),
        linear-gradient(135deg, var(--aurora-bg-start), var(--aurora-bg-end)) !important;
    position: relative;
    overflow-x: hidden !important;
    color: var(--text-primary) !important;
}

.aurora-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.aurora-layer__orb {
    position: absolute;
    width: clamp(240px, 30vw, 420px);
    height: clamp(240px, 30vw, 420px);
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.9;
    mix-blend-mode: screen;
}

.aurora-layer__orb.orb-primary {
    top: 5%;
    left: 10%;
    background: var(--aurora-orb-primary);
}

.aurora-layer__orb.orb-accent {
    bottom: -5%;
    right: -5%;
    background: var(--aurora-orb-accent);
}

.aurora-layer__grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, var(--aurora-grid-color) 1px, transparent 1px),
        linear-gradient(var(--aurora-grid-color) 1px, transparent 1px);
    background-size: 140px 140px;
    mask-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.4), transparent 70%);
}

main,
nav,
footer,
header,
.container,
.container-fluid,
.alert {
    position: relative;
    z-index: 1;
}