.fp-web3-crypto-malware-detection-ui {
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  --fp-primary-color: #fafafa;
  --fp-secondary-color: #e4e4e7;
  --fp-muted-color: #71717a;
  --fp-soft-color: #ffffff;
  --fp-background-color: transparent;

  --fp-info-color: #09090b;
  --fp-warning-color: #67e8f9;
  --fp-danger-color: #06b6d4;
  --fp-accent-color: #00ffff;

  all: unset;
  display: block;
  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  box-sizing: border-box;
  color: var(--fp-info-color);
}

.fp-web3-crypto-malware-detection-ui * {
  box-sizing: border-box;
}

.fp-web3-crypto-malware-detection-ui-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--fp-aspect-ratio);
  background: var(--fp-primary-color);
  border: 1px solid var(--fp-secondary-color);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(9, 9, 11, 0.03);
}

.fp-web3-crypto-malware-detection-ui-mesh {
  position: absolute;
  inset: -20%;
  background-image: 
    linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: fp-web3-crypto-malware-detection-ui-breathe 8s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
}

.fp-web3-crypto-malware-detection-ui-holo-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(0, 255, 255, 0.05), transparent 50%),
              radial-gradient(circle at bottom left, rgba(6, 182, 212, 0.05), transparent 50%);
  z-index: 2;
  pointer-events: none;
}

.fp-web3-crypto-malware-detection-ui-scanner {
  position: absolute;
  width: 130%;
  height: 130%;
  border-radius: 50%;
  border: 1px dashed rgba(6, 182, 212, 0.15);
  animation: fp-web3-crypto-malware-detection-ui-spin 40s linear infinite;
  z-index: 3;
  pointer-events: none;
}

.fp-web3-crypto-malware-detection-ui-scanner::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 20px;
  height: 20px;
  background: var(--fp-accent-color);
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.5;
}

.fp-web3-crypto-malware-detection-ui-core {
  position: relative;
  z-index: 10;
  width: 80%;
  height: 75%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--fp-secondary-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  overflow: hidden;
}

.fp-web3-crypto-malware-detection-ui-header {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--fp-secondary-color);
  background: rgba(255, 255, 255, 0.5);
}

.fp-web3-crypto-malware-detection-ui-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fp-info-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fp-web3-crypto-malware-detection-ui-title-icon {
  width: 12px;
  height: 12px;
  background: var(--fp-accent-color);
  box-shadow: 0 0 10px var(--fp-accent-color);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.fp-web3-crypto-malware-detection-ui-status {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--fp-danger-color);
  display: flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fp-web3-crypto-malware-detection-ui-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fp-accent-color);
  box-shadow: 0 0 8px var(--fp-accent-color);
  animation: fp-web3-crypto-malware-detection-ui-blink 1.5s ease-in-out infinite alternate;
}

.fp-web3-crypto-malware-detection-ui-display {
  flex: 1;
  position: relative;
  background: var(--fp-soft-color);
  overflow: hidden;
}

.fp-web3-crypto-malware-detection-ui-canvas-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fp-web3-crypto-malware-detection-ui-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.fp-web3-crypto-malware-detection-ui-glitch-fx {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 255, 255, 0.1) 50%, transparent 50%);
  background-size: 100% 4px;
  pointer-events: none;
  opacity: 0.3;
  z-index: 5;
}

.fp-web3-crypto-malware-detection-ui-footer {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--fp-secondary-color);
  background: rgba(255, 255, 255, 0.5);
}

.fp-web3-crypto-malware-detection-ui-stat-label {
  font-size: 0.7rem;
  color: var(--fp-muted-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  display: block;
}

.fp-web3-crypto-malware-detection-ui-stat-value {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--fp-info-color);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: -0.02em;
}

.fp-web3-crypto-malware-detection-ui-stat-highlight {
  color: var(--fp-danger-color);
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.3);
}

@keyframes fp-web3-crypto-malware-detection-ui-breathe {
  0% { transform: scale(1); opacity: 0.4; }
  100% { transform: scale(1.05); opacity: 0.8; }
}

@keyframes fp-web3-crypto-malware-detection-ui-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes fp-web3-crypto-malware-detection-ui-blink {
  0% { opacity: 0.3; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

@media (max-width: 480px) {
  .fp-web3-crypto-malware-detection-ui-core {
    width: 90%;
    height: 85%;
  }
  .fp-web3-crypto-malware-detection-ui-stat-value {
    font-size: 1.25rem;
  }
}

document.querySelectorAll('.fp-web3-crypto-malware-detection-ui').forEach(root => {
  const canvas = root.querySelector('.fp-web3-crypto-malware-detection-ui-canvas');
  const counterEl = root.querySelector('.fp-web3-crypto-malware-detection-ui-counter');
  if (!canvas || !counterEl) return;

  const ctx = canvas.getContext('2d');
  let animationFrameId;
  let isVisible = true;

  let time = 0;
  let glitchIntensity = 0;
  let blockedCount = 1024;
  
  const streams = [];
  const threats = [];
  
  const colors = {
    cyanBright: '#00ffff',
    cyanMid: '#06b6d4',
    textDark: '#09090b',
    muted: '#d4d4d8'
  };

  const resizeCanvas = () => {
    const rect = canvas.parentElement.getBoundingClientRect();
    if (!rect.width) return;
    canvas.width = rect.width * window.devicePixelRatio;
    canvas.height = rect.height * window.devicePixelRatio;
    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
    initStreams(rect.width);
  };

  const initStreams = (width) => {
    streams.length = 0;
    const columns = Math.floor(width / 20);
    for (let i = 0; i < columns; i++) {
      streams.push({
        x: i * 20 + 10,
        y: Math.random() * -500,
        speed: 1 + Math.random() * 2,
        length: 5 + Math.floor(Math.random() * 10)
      });
    }
  };

  const drawCanvas = () => {
    if (!isVisible) return;
    time += 0.05;

    const width = canvas.width / window.devicePixelRatio;
    const height = canvas.height / window.devicePixelRatio;
    const shieldY = height * 0.75;

    ctx.clearRect(0, 0, width, height);
    ctx.save();

    if (glitchIntensity > 0) {
      const offsetX = (Math.random() - 0.5) * glitchIntensity;
      const offsetY = (Math.random() - 0.5) * (glitchIntensity / 2);
      ctx.translate(offsetX, offsetY);
      glitchIntensity *= 0.85;
      if (glitchIntensity < 0.5) glitchIntensity = 0;
    }

    ctx.font = '10px monospace';
    ctx.textAlign = 'center';
    
    streams.forEach(stream => {
      stream.y += stream.speed;
      if (stream.y > shieldY) {
        stream.y = Math.random() * -100;
      }

      for (let i = 0; i < stream.length; i++) {
        const charY = stream.y - (i * 12);
        if (charY > 0 && charY <= shieldY) {
          const alpha = 1 - (i / stream.length);
          ctx.fillStyle = i === 0 ? colors.cyanMid : `rgba(212, 212, 216, ${alpha})`;
          ctx.fillText(Math.random() > 0.5 ? '1' : '0', stream.x, charY);
        }
      }
    });

    if (Math.random() < 0.02 && threats.length < 2) {
      threats.push({
        x: streams[Math.floor(Math.random() * streams.length)].x,
        y: -20,
        speed: 3 + Math.random() * 2,
        char: 'X'
      });
    }

    for (let i = threats.length - 1; i >= 0; i--) {
      const t = threats[i];
      t.y += t.speed;

      ctx.fillStyle = colors.textDark;
      ctx.font = 'bold 14px monospace';
      ctx.fillText(t.char, t.x, t.y);

      if (t.y >= shieldY - 10) {
        threats.splice(i, 1);
        glitchIntensity = 15;
        blockedCount++;
        counterEl.innerText = blockedCount.toLocaleString();
      }
    }

    const shieldGlow = glitchIntensity > 0 ? 20 : 5 + Math.sin(time * 2) * 2;
    
    ctx.beginPath();
    ctx.moveTo(0, shieldY);
    if (glitchIntensity > 0) {
       for (let x = 0; x < width; x += 20) {
         ctx.lineTo(x, shieldY + (Math.random() - 0.5) * glitchIntensity);
       }
    } else {
       ctx.lineTo(width, shieldY);
    }
    
    ctx.strokeStyle = colors.cyanBright;
    ctx.lineWidth = glitchIntensity > 0 ? 3 : 2;
    ctx.shadowBlur = shieldGlow;
    ctx.shadowColor = colors.cyanBright;
    ctx.stroke();
    ctx.shadowBlur = 0;

    ctx.fillStyle = `rgba(0, 255, 255, ${glitchIntensity > 0 ? 0.1 : 0.02})`;
    ctx.fillRect(0, shieldY, width, height - shieldY);

    ctx.restore();

    if (glitchIntensity > 5) {
      ctx.globalCompositeOperation = 'screen';
      ctx.fillStyle = 'rgba(255,0,0,0.1)';
      ctx.fillRect(-glitchIntensity, 0, width, height);
      ctx.fillStyle = 'rgba(0,255,255,0.1)';
      ctx.fillRect(glitchIntensity, 0, width, height);
      ctx.globalCompositeOperation = 'source-over';
    }

    animationFrameId = requestAnimationFrame(drawCanvas);
  };

  const handleVisibilityChange = () => {
    isVisible = document.visibilityState === 'visible';
    if (isVisible) {
      drawCanvas();
    } else {
      cancelAnimationFrame(animationFrameId);
    }
  };

  const observer = new MutationObserver(() => {
    if (!document.body.contains(root)) {
      cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      observer.disconnect();
    }
  });

  window.addEventListener('resize', resizeCanvas);
  document.addEventListener('visibilitychange', handleVisibilityChange);
  observer.observe(document.body, { childList: true, subtree: true });

  resizeCanvas();
  drawCanvas();
});