.fp-non-profit-ngo-otp-code-input-ui {
  /* Layout Variables */
  --fp-container-width: 100%;
  --fp-max-width: 500px;
  --fp-aspect-ratio: 1 / 1;

  /* Semantic Color Variables - Slate Blueprint */
  --fp-primary-color: #FFFFFF;       
  --fp-secondary-color: #F1F5F9;     
  --fp-text-color: #334155;          
  --fp-muted-color: #94A3B8;         
  --fp-soft-color: #E2E8F0;          
  --fp-background-color: transparent;

  --fp-accent-color: #64748B;        
  --fp-info-color: #3B82F6;          
  --fp-warning-color: #F59E0B;       
  --fp-danger-color: #EF4444;        

  width: var(--fp-container-width);
  max-width: var(--fp-max-width);
  margin: 0 auto;
  background: var(--fp-background-color);
  font-family: 'Courier New', Courier, monospace;
  position: relative;
}

/* Main Stage */
.fp-non-profit-ngo-otp-code-input-ui-stage {
  aspect-ratio: var(--fp-aspect-ratio);
  width: 100%;
  background-color: var(--fp-primary-color);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid var(--fp-soft-color);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(51, 65, 85, 0.05);
  box-sizing: border-box;
  padding: 24px;
}

/* Blueprint Grid Background */
.fp-non-profit-ngo-otp-code-input-ui-grid {
  position: absolute;
  inset: 0;
  background-size: 24px 24px;
  background-image: 
    linear-gradient(to right, var(--fp-secondary-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fp-secondary-color) 1px, transparent 1px);
  z-index: 0;
}

/* Layer 2: Rotational Technical Ring */
.fp-non-profit-ngo-otp-code-input-ui-ring {
  position: absolute;
  width: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 1px dashed var(--fp-muted-color);
  opacity: 0.3;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  animation: fp-non-profit-ngo-otp-code-input-ui-spin 30s linear infinite;
  pointer-events: none;
}

.fp-non-profit-ngo-otp-code-input-ui-ring::before,
.fp-non-profit-ngo-otp-code-input-ui-ring::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: var(--fp-accent-color);
  border-radius: 50%;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
}
.fp-non-profit-ngo-otp-code-input-ui-ring::after {
  top: auto;
  bottom: -4px;
}

/* Layer 1: Base Breathing Panel */
.fp-non-profit-ngo-otp-code-input-ui-panel {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--fp-soft-color);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(51, 65, 85, 0.08);
  animation: fp-non-profit-ngo-otp-code-input-ui-breathe 4s ease-in-out infinite alternate;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Header */
.fp-non-profit-ngo-otp-code-input-ui-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px dashed var(--fp-soft-color);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

.fp-non-profit-ngo-otp-code-input-ui-title-wrap {
  display: flex;
  flex-direction: column;
}

.fp-non-profit-ngo-otp-code-input-ui-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--fp-text-color);
  letter-spacing: 0.5px;
  margin: 0 0 4px 0;
}

.fp-non-profit-ngo-otp-code-input-ui-subtitle {
  font-size: 10px;
  color: var(--fp-muted-color);
  margin: 0;
}

.fp-non-profit-ngo-otp-code-input-ui-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  background-color: var(--fp-secondary-color);
  color: var(--fp-accent-color);
  border-radius: 4px;
  border: 1px solid var(--fp-soft-color);
}

/* Canvas Area */
.fp-non-profit-ngo-otp-code-input-ui-canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
}

.fp-non-profit-ngo-otp-code-input-ui-svg {
  width: 80%;
  height: 80%;
  max-width: 200px;
  max-height: 200px;
  overflow: visible;
}

.fp-non-profit-ngo-otp-code-input-ui-svg path {
  fill: none;
  stroke: var(--fp-accent-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.2s ease, fill 0.5s ease;
}

/* Layer 3: Reactive Spike State */
.fp-non-profit-ngo-otp-code-input-ui-panel.is-spiking {
  border-color: var(--fp-info-color);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.15);
}
.fp-non-profit-ngo-otp-code-input-ui-panel.is-spiking .fp-non-profit-ngo-otp-code-input-ui-svg path {
  stroke: var(--fp-info-color);
  filter: drop-shadow(0 0 2px var(--fp-info-color));
}

/* Completed State */
.fp-non-profit-ngo-otp-code-input-ui-panel.is-completed .fp-non-profit-ngo-otp-code-input-ui-svg path {
  fill: rgba(100, 116, 139, 0.1); 
}

/* Footer / Progress */
.fp-non-profit-ngo-otp-code-input-ui-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fp-non-profit-ngo-otp-code-input-ui-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
}

.fp-non-profit-ngo-otp-code-input-ui-speed {
  color: var(--fp-muted-color);
}

.fp-non-profit-ngo-otp-code-input-ui-speed-val {
  color: var(--fp-text-color);
}

.fp-non-profit-ngo-otp-code-input-ui-pct {
  color: var(--fp-accent-color);
  font-size: 14px;
}

.fp-non-profit-ngo-otp-code-input-ui-track {
  width: 100%;
  height: 4px;
  background-color: var(--fp-soft-color);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.fp-non-profit-ngo-otp-code-input-ui-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background-color: var(--fp-accent-color);
  border-radius: 2px;
  transition: width 0.1s linear, background-color 0.3s ease;
}

.fp-non-profit-ngo-otp-code-input-ui-panel.is-spiking .fp-non-profit-ngo-otp-code-input-ui-fill {
  background-color: var(--fp-info-color);
}

/* Animations */
@keyframes fp-non-profit-ngo-otp-code-input-ui-breathe {
  0% { transform: scale(0.99); }
  100% { transform: scale(1.01); }
}

@keyframes fp-non-profit-ngo-otp-code-input-ui-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive */
@media (max-width: 480px) {
  .fp-non-profit-ngo-otp-code-input-ui-stage { padding: 16px; }
  .fp-non-profit-ngo-otp-code-input-ui-panel { padding: 16px; }
}

document.querySelectorAll('.fp-non-profit-ngo-otp-code-input-ui').forEach(root => {
  const panel = root.querySelector('#fp-non-profit-ngo-otp-code-input-ui-panel');
  const paths = root.querySelectorAll('#fp-non-profit-ngo-otp-code-input-ui-paths path');
  const speedEl = root.querySelector('#fp-non-profit-ngo-otp-code-input-ui-speed');
  const pctEl = root.querySelector('#fp-non-profit-ngo-otp-code-input-ui-pct');
  const fillEl = root.querySelector('#fp-non-profit-ngo-otp-code-input-ui-fill');
  const statusEl = root.querySelector('#fp-non-profit-ngo-otp-code-input-ui-status');

  let reqId;
  let isVisible = true;
  let lastTime = 0;
  
  let progress = 0;
  let isDownloading = true;
  let holdTimer = 0;
  let speedFluctuationTimer = 0;
  let currentSpeed = 5;

  const pathLengths = [];
  paths.forEach((p, index) => {
    const len = p.getTotalLength();
    pathLengths.push(len);
    p.style.strokeDasharray = len;
    p.style.strokeDashoffset = len;
  });

  function resetUI() {
    progress = 0;
    isDownloading = true;
    if (panel) {
        panel.classList.remove('is-completed');
        panel.classList.remove('is-spiking');
    }
    if (statusEl) statusEl.textContent = 'SYNCING';
    if (pctEl) pctEl.textContent = '0%';
    if (fillEl) fillEl.style.width = '0%';
    paths.forEach((p, index) => {
      p.style.strokeDashoffset = pathLengths[index];
    });
  }

  function animate(time) {
    if (!lastTime) lastTime = time;
    const dt = time - lastTime;
    lastTime = time;

    if (isDownloading) {
      speedFluctuationTimer += dt;
      if (speedFluctuationTimer > 500) {
        speedFluctuationTimer = 0;
        currentSpeed = 2 + Math.random() * 18;
        
        if (speedEl) speedEl.textContent = `${currentSpeed.toFixed(1)} MB/s`;

        if (currentSpeed > 15 && panel) {
          panel.classList.add('is-spiking');
        } else if (panel) {
          panel.classList.remove('is-spiking');
        }
      }

      progress += (dt * currentSpeed * 0.005);
      
      if (progress >= 100) {
        progress = 100;
        isDownloading = false;
        holdTimer = 3000; 
        
        if (panel) {
            panel.classList.remove('is-spiking');
            panel.classList.add('is-completed');
        }
        if (statusEl) statusEl.textContent = 'DOWNLOADED';
        if (speedEl) speedEl.textContent = '0.0 MB/s';
      }

      if (pctEl) pctEl.textContent = `${Math.floor(progress)}%`;
      if (fillEl) fillEl.style.width = `${progress}%`;

      const normalizedProgress = progress / 100;
      paths.forEach((p, index) => {
        const len = pathLengths[index];
        p.style.strokeDashoffset = len - (len * normalizedProgress);
      });

    } else {
      holdTimer -= dt;
      if (holdTimer <= 0) {
        resetUI();
      }
    }

    if (isVisible) {
      reqId = requestAnimationFrame(animate);
    }
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      isVisible = entry.isIntersecting;
      if (isVisible) {
        lastTime = performance.now();
        if (!reqId) reqId = requestAnimationFrame(animate);
      } else {
        if (reqId) {
          cancelAnimationFrame(reqId);
          reqId = null;
        }
      }
    });
  });
  observer.observe(root);

  const handleVisibilityChange = () => {
    if (document.visibilityState === "hidden") {
      isVisible = false;
      if (reqId) {
        cancelAnimationFrame(reqId);
        reqId = null;
      }
    } else {
      isVisible = true;
      lastTime = performance.now();
      if (!reqId) reqId = requestAnimationFrame(animate);
    }
  };
  document.addEventListener("visibilitychange", handleVisibilityChange);

  const cleanupInterval = setInterval(() => {
    if (!document.body.contains(root)) {
      if (reqId) cancelAnimationFrame(reqId);
      observer.disconnect();
      document.removeEventListener("visibilitychange", handleVisibilityChange);
      clearInterval(cleanupInterval);
    }
  }, 1000);

  resetUI();
});