#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: var(--gradient-primary);
    background-image: 
        radial-gradient(at 0% 0%, var(--gradient-spot-1) 0, transparent 50%),
        radial-gradient(at 98% 1%, var(--gradient-spot-2) 0, transparent 50%),
        radial-gradient(at 0% 100%, var(--gradient-spot-3) 0, transparent 50%),
        radial-gradient(at 98% 98%, var(--gradient-spot-4) 0, transparent 50%),
        var(--gradient-overlay);
}

#particles-js::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--grid-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
}

.navbar,
.connection-panel,
.status-panel,
.metrics-panel,
.indices-panel,
.modal-content {
    backdrop-filter: blur(6px);
    background: var(--card-background) !important;
    border: 1px solid var(--border-color);
} 