.guardrails-graph-container {
    margin: 2rem auto;
    padding: 1.5rem;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    max-width: 100%;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.guardrails-graph-container:hover {
    border-color: rgba(77, 232, 194, 0.25);
    box-shadow: 0 0 30px rgba(77, 232, 194, 0.06);
}

.guardrails-graph {
    width: 100%;
    height: auto;
    display: block;
}

.guardrails-graph text {
    user-select: none;
    pointer-events: none;
}

.graph-label {
    fill: var(--article-text);
    font-family: 'Open Sans', sans-serif;
    font-size: 11px;
    font-weight: 600;
}

.graph-title {
    fill: var(--gradient-dark-blue);
    font-family: 'Orbitron', sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

@keyframes shield-pulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(30, 75, 156, 0.2));
    }

    50% {
        transform: scale(1.03);
        filter: drop-shadow(0 0 8px rgba(30, 75, 156, 0.4));
    }

    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(30, 75, 156, 0.2));
    }
}

.animate-shield {
    transform-origin: center;
    animation: shield-pulse 4s infinite ease-in-out;
}