:root {
            --neon-red: #ff0000;
            --dark-bg: #050505;
            --card-bg: #0d0d0d;
            --grid-color: rgba(255, 0, 0, 0.05);
        }

        body {
            background-color: var(--dark-bg);
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            overflow-x: hidden;
        }

        /* Grade de fundo */
        body::before {
            content: "";
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image: 
                linear-gradient(var(--grid-color) 1px, transparent 1px),
                linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
            background-size: 50px 50px;
            z-index: -1;
            animation: gridMove 10s linear infinite;
        }
        @keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 50px; } }

        .main-container {
            max-width: 1200px;
            width: 90%;
            margin: 40px 0;
            text-align: center;
            z-index: 1;
        }

        .protocol-header {
            background: linear-gradient(180deg, #1a0000 0%, #000 100%);
            border: 1px solid #330000;
            padding: 30px;
            border-radius: 15px;
            margin-bottom: 40px;
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.2);
        }

        h1 { color: var(--neon-red); margin: 0; text-shadow: 0 0 15px rgba(255,0,0,0.6); letter-spacing: 2px; }

        .grid-prevenção {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 25px;
        }

        .card-prevenção {
            background: var(--card-bg);
            padding: 25px;
            border-radius: 15px;
            border: 1px solid #1a1a1a;
            text-align: left;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .card-prevenção:hover {
            border-color: var(--neon-red);
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.3);
            transform: translateY(-10px);
        }

        .bit-stream {
            font-family: 'Courier New', monospace;
            font-size: 11px;
            height: 50px;
            overflow: hidden;
            margin: 15px 0;
            padding: 5px;
            background: rgba(0,0,0,0.3);
            border-radius: 5px;
            opacity: 0.6;
        }

        .bit-line { display: block; white-space: nowrap; letter-spacing: 1px; line-height: 10px; }
        .icon-card { font-size: 35px; color: var(--neon-red); margin-bottom: 15px; filter: drop-shadow(0 0 5px var(--neon-red)); }
        
        .tag-status {
            font-size: 10px; padding: 5px 10px; border-radius: 4px;
            text-transform: uppercase; font-weight: bold; margin-bottom: 10px; align-self: flex-start;
        }
        .active { background: rgba(0, 255, 0, 0.15); color: #0f0; }
        .warning { background: rgba(255, 255, 0, 0.15); color: #ff0; }
        .critical { background: rgba(255, 0, 0, 0.2); color: #f00; animation: pulse 1.5s infinite; }

        h3 { margin: 10px 0; font-size: 20px; color: #fff; }
        .card-description { color: #aaa; font-size: 14px; line-height: 1.5; flex-grow: 1; }

        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

        .data-monitor {
            background: #000; border: 1px solid #220000; border-radius: 15px;
            padding: 25px; margin-top: 40px; box-shadow: 0 0 20px rgba(255,0,0,0.1);
        }
        
        canvas { 
            width: 100%; height: 150px; border-bottom: 1px solid #1a1a1a;
            filter: drop-shadow(0 0 10px #ff0000);
        }

        .btn-voltar {
            display: inline-block; margin: 50px 0; padding: 15px 40px;
            border: 2px solid var(--neon-red); color: #fff; text-decoration: none;
            font-weight: 800; border-radius: 8px; transition: 0.4s;
            text-transform: uppercase; letter-spacing: 2px;
        }
        .btn-voltar:hover { background: var(--neon-red); color: #000; box-shadow: 0 0 30px var(--neon-red); }
    /* Efeito Glitch Avançado */
/* Container do Título para controle do Scanner */
.glitch-wrapper {
    position: relative;
    display: inline-block;
    padding: 10px;
}

/* O Título Principal */
.protocol-header h1 {
    font-size: 2.8rem;
    font-weight: 900;
    text-transform: uppercase;
    position: relative;
    color: var(--neon-red);
    letter-spacing: 4px;
    z-index: 1;
    /* Brilho base */
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
    animation: glitch-skew 4s infinite linear alternate-reverse;
}

/* Camadas de Glitch (Cores Fantasmas) */
.protocol-header h1::before,
.protocol-header h1::after {
    content: "PROTOCOLO DE PREVENÇÃO CORE AI";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

/* Camada Azul/Ciano que vaza para a esquerda */
.protocol-header h1::before {
    color: #0ff;
    z-index: -1;
    animation: glitch-anim 0.3s infinite linear alternate-reverse;
}

/* Camada Magenta que vaza para a direita */
.protocol-header h1::after {
    color: #f0f;
    z-index: -2;
    animation: glitch-anim2 0.3s infinite linear alternate-reverse;
}

/* Linha de Scanner que percorre o texto */
.scanline {
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    box-shadow: 0 0 15px var(--neon-red), 0 0 5px #fff;
    animation: scanMove 4s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}

/* Animações de Distorção */
@keyframes glitch-anim {
    0% { clip: rect(10px, 9999px, 40px, 0); transform: translate(-2px, -1px); }
    50% { clip: rect(60px, 9999px, 80px, 0); transform: translate(2px, 1px); }
    100% { clip: rect(20px, 9999px, 50px, 0); transform: translate(-1px, 0); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(50px, 9999px, 90px, 0); transform: translate(2px, 1px); }
    50% { clip: rect(10px, 9999px, 30px, 0); transform: translate(-2px, -1px); }
    100% { clip: rect(70px, 9999px, 100px, 0); transform: translate(1px, 0); }
}

@keyframes scanMove {
    0% { top: 0%; }
    100% { top: 100%; }
}

@keyframes glitch-skew {
    0% { transform: skew(0deg); }
    20% { transform: skew(1deg); }
    21% { transform: skew(-3deg); }
    22% { transform: skew(0deg); }
    100% { transform: skew(0deg); }
}

.protocol-header h1 {
    font-size: 2.5rem;
    position: relative;
    color: var(--neon-red);
    text-transform: uppercase;
    animation: glitch-skew 1s infinite linear alternate-reverse;
}

/* Camadas de cores para o efeito de distorção */
.protocol-header h1::before,
.protocol-header h1::after {
    content: "PROTOCOLO DE PREVENÇÃO CORE AI";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}

.protocol-header h1::before {
    color: #0ff; /* Azul Ciano para contraste */
    z-index: -1;
    animation: glitch-anim 0.3s infinite linear alternate-reverse;
}

.protocol-header h1::after {
    color: #0011ff; /* Magenta para contraste */
    z-index: -2;
    animation: glitch-anim2 0.3s infinite linear alternate-reverse;
}

/* Animação de Varredura (Laser Scan) */
.scanline {
    width: 100%;
    height: 3px;
    background: rgba(255, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    box-shadow: 0 0 15px var(--neon-red);
    animation: scanMove 3s linear infinite;
    pointer-events: none;
}

/* Keyframes */
@keyframes glitch-anim {
    0% { clip: rect(30px, 9999px, 10px, 0); transform: skew(0.5deg); }
    100% { clip: rect(85px, 9999px, 100px, 0); transform: skew(0.5deg); }
}

@keyframes glitch-anim2 {
    0% { clip: rect(10px, 9999px, 85px, 0); transform: skew(-0.5deg); }
    100% { clip: rect(100px, 9999px, 30px, 0); transform: skew(-0.5deg); }
}

@keyframes scanMove {
    0% { top: 0%; }
    100% { top: 100%; }
}

.emergency-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(20, 0, 0, 0.95);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    border: 5px solid var(--neon-red);
    animation: flash-red 0.5s infinite alternate;
}

.emergency-content {
    text-align: center;
    color: #fff;
    padding: 40px;
    border: 2px solid #fff;
    background: #000;
    box-shadow: 0 0 50px #ff0000;
}

.emergency-icon { font-size: 80px; color: var(--neon-red); margin-bottom: 20px; }

.loading-bar { width: 100%; height: 10px; background: #222; margin: 20px 0; border-radius: 5px; overflow: hidden; }
.loading-progress { width: 0%; height: 100%; background: var(--neon-red); animation: load-emergency 3s forwards; }

.emergency-overlay button {
    background: transparent; border: 2px solid #fff; color: #fff;
    padding: 10px 30px; cursor: pointer; font-weight: bold; transition: 0.3s;
}
.emergency-overlay button:hover { background: #fff; color: #f00; }

@keyframes flash-red { from { box-shadow: inset 0 0 100px #f00; } to { box-shadow: inset 0 0 20px #500; } }
@keyframes load-emergency { to { width: 100%; } }