.fp-biotech-gene-data-upload-matrix-ui {
    /* ━━━━━━━━━━━━━━━━━━
       LAYOUT & SIZING SYSTEM
       ━━━━━━━━━━━━━━━━━━ */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* ━━━━━━━━━━━━━━━━━━
       COLOR SYSTEM (Ice Blue Blueprint)
       ━━━━━━━━━━━━━━━━━━ */
    --fp-primary-color: #FFFFFF; /* Putih Salju (Background) */
    --fp-secondary-color: #EBF2F9; /* Blueprint Grid Lines */
    --fp-muted-color: #8DA3B8; /* Muted tech details */
    --fp-soft-color: #0A1930; /* Biru Navy (Text & Heavy Elements) */
    --fp-background-color: transparent;

    --fp-info-color: #89CFF0; /* Biru Es Pucat (Ice Blue) */
    --fp-warning-color: #89CFF0;
    --fp-danger-color: #89CFF0;
    --fp-accent-color: #89CFF0; /* Primary Accent / Glow */

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    position: relative;
    box-sizing: border-box;
    background-color: var(--fp-background-color);
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
}

.fp-biotech-gene-data-upload-matrix-ui * {
    box-sizing: border-box;
}

/* ━━━━━━━━━━━━━━━━━━
   MAIN STAGE & LAYER 1 (BREATHING)
   ━━━━━━━━━━━━━━━━━━ */
.fp-biotech-gene-data-upload-matrix-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background-color: var(--fp-primary-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--fp-secondary-color);
    box-shadow: inset 0 0 40px rgba(10, 25, 48, 0.02);
    /* Layer 1: Subtle Base Breathing */
    animation: fp-biotech-gene-data-upload-matrix-ui-breathe 4s ease-in-out infinite alternate;
}

@keyframes fp-biotech-gene-data-upload-matrix-ui-breathe {
    0% { box-shadow: inset 0 0 20px rgba(137, 207, 240, 0.05); border-color: var(--fp-secondary-color); }
    100% { box-shadow: inset 0 0 60px rgba(137, 207, 240, 0.15); border-color: rgba(137, 207, 240, 0.3); }
}

/* Blueprint Technical Grid Background */
.fp-biotech-gene-data-upload-matrix-ui-grid {
    position: absolute;
    inset: 0;
    background-size: 40px 40px;
    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;
}

.fp-biotech-gene-data-upload-matrix-ui-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background-size: 10px 10px;
    background-image: 
        linear-gradient(to right, var(--fp-secondary-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--fp-secondary-color) 1px, transparent 1px);
    opacity: 0.3;
}

/* ━━━━━━━━━━━━━━━━━━
   CANVAS & UI OVERLAYS
   ━━━━━━━━━━━━━━━━━━ */
.fp-biotech-gene-data-upload-matrix-ui-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.fp-biotech-gene-data-upload-matrix-ui-header {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--fp-soft-color);
    font-weight: 700;
    letter-spacing: 0.1em;
    z-index: 3;
    border-bottom: 1px dashed var(--fp-muted-color);
    padding-bottom: 4px;
}

.fp-biotech-gene-data-upload-matrix-ui-footer {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-size: 0.65rem;
    color: var(--fp-muted-color);
    z-index: 3;
    text-transform: uppercase;
}

.fp-biotech-gene-data-upload-matrix-ui-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid var(--fp-soft-color);
    z-index: 3;
}
.fp-biotech-gene-data-upload-matrix-ui-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.fp-biotech-gene-data-upload-matrix-ui-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.fp-biotech-gene-data-upload-matrix-ui-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.fp-biotech-gene-data-upload-matrix-ui-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

/* ━━━━━━━━━━━━━━━━━━
   LAYER 2: ROTATIONAL MOTION
   ━━━━━━━━━━━━━━━━━━ */
.fp-biotech-gene-data-upload-matrix-ui-core {
    position: relative;
    z-index: 2;
    width: 160px;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--fp-primary-color);
    border-radius: 50%;
    border: 1px solid var(--fp-secondary-color);
    box-shadow: 0 4px 16px rgba(10, 25, 48, 0.05);
    transition: all 0.2s ease;
}

.fp-biotech-gene-data-upload-matrix-ui-ring-1 {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px dashed var(--fp-muted-color);
    opacity: 0.6;
    animation: fp-biotech-gene-data-upload-matrix-ui-spin 12s linear infinite;
}

.fp-biotech-gene-data-upload-matrix-ui-ring-2 {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 1px dotted var(--fp-accent-color);
    animation: fp-biotech-gene-data-upload-matrix-ui-spin-reverse 18s linear infinite;
}

@keyframes fp-biotech-gene-data-upload-matrix-ui-spin {
    100% { transform: rotate(360deg); }
}

@keyframes fp-biotech-gene-data-upload-matrix-ui-spin-reverse {
    100% { transform: rotate(-360deg); }
}

.fp-biotech-gene-data-upload-matrix-ui-value {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--fp-soft-color);
    line-height: 1;
    margin-bottom: 4px;
    transition: color 0.2s ease;
}

.fp-biotech-gene-data-upload-matrix-ui-label {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--fp-accent-color);
    letter-spacing: 0.2em;
}

/* ━━━━━━━━━━━━━━━━━━
   LAYER 3: REACTIVE SPIKE
   ━━━━━━━━━━━━━━━━━━ */
.fp-biotech-gene-data-upload-matrix-ui-spike .fp-biotech-gene-data-upload-matrix-ui-core {
    border-color: var(--fp-accent-color);
    box-shadow: 0 0 30px rgba(137, 207, 240, 0.4);
    transform: scale(1.05);
}

.fp-biotech-gene-data-upload-matrix-ui-spike .fp-biotech-gene-data-upload-matrix-ui-value {
    color: var(--fp-accent-color);
    text-shadow: 0 0 10px rgba(137, 207, 240, 0.5);
    font-weight: 700;
}

.fp-biotech-gene-data-upload-matrix-ui-spike .fp-biotech-gene-data-upload-matrix-ui-ring-1 {
    border-color: var(--fp-accent-color);
    border-style: solid;
}

/* Responsive */
@media (max-width: 480px) {
    .fp-biotech-gene-data-upload-matrix-ui-core { width: 120px; height: 120px; }
    .fp-biotech-gene-data-upload-matrix-ui-value { font-size: 1.8rem; }
    .fp-biotech-gene-data-upload-matrix-ui-header { font-size: 0.65rem; }
}

(function() {
    const instances = document.querySelectorAll('.fp-biotech-gene-data-upload-matrix-ui');

    instances.forEach(root => {
        if (root.dataset.fpInitialized) return;
        root.dataset.fpInitialized = 'true';

        const canvas = root.querySelector('.fp-biotech-gene-data-upload-matrix-ui-canvas');
        const coreWrapper = root.querySelector('.fp-biotech-gene-data-upload-matrix-ui-stage');
        const percentEl = root.querySelector('.fp-biotech-gene-data-upload-matrix-ui-value');
        if (!canvas || !coreWrapper || !percentEl) return;

        const ctx = canvas.getContext('2d', { alpha: true });

        let width, height, dpr;
        let rafId;
        let isVisible = true;
        let time = 0;
        let progress = 0;
        let cells = [];
        const cols = 20;
        const rows = 20;

        // Fetch CSS Accent Color for Canvas
        const styles = getComputedStyle(root);
        const accentHex = styles.getPropertyValue('--fp-accent-color').trim() || '#89CFF0';
        const mutedHex = styles.getPropertyValue('--fp-muted-color').trim() || '#8DA3B8';

        // Convert Hex to RGB for canvas opacity manipulation
        const hexToRgb = (hex) => {
            let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
            return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : '137, 207, 240';
        };
        const rgbAccent = hexToRgb(accentHex);
        const rgbMuted = hexToRgb(mutedHex);

        function resize() {
            width = canvas.offsetWidth;
            height = canvas.offsetHeight;
            dpr = window.devicePixelRatio || 1;
            canvas.width = width * dpr;
            canvas.height = height * dpr;
            ctx.scale(dpr, dpr);
            initMatrix();
        }

        function initMatrix() {
            cells = [];
            const cellW = width / cols;
            const cellH = height / rows;
            for (let i = 0; i < cols; i++) {
                for (let j = 0; j < rows; j++) {
                    cells.push({
                        x: i * cellW,
                        y: j * cellH,
                        w: cellW,
                        h: cellH,
                        col: i,
                        row: j,
                        opacity: 0.05,
                        char: Math.random() > 0.5 ? 'A' : (Math.random() > 0.5 ? 'T' : (Math.random() > 0.5 ? 'C' : 'G'))
                    });
                }
            }
        }

        window.addEventListener('resize', resize);
        resize();

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => isVisible = entry.isIntersecting);
        }, { threshold: 0.1 });
        observer.observe(root);

        function fp_biotech_gene_data_upload_matrix_ui_render() {
            if (!document.body.contains(root)) {
                window.removeEventListener('resize', resize);
                observer.disconnect();
                cancelAnimationFrame(rafId);
                return;
            }

            if (document.visibilityState === 'hidden' || !isVisible) {
                rafId = requestAnimationFrame(fp_biotech_gene_data_upload_matrix_ui_render);
                return;
            }

            ctx.clearRect(0, 0, width, height);
            time += 1;

            // Progress Simulator
            progress += 0.05;
            if (progress > 100) progress = 0;
            percentEl.textContent = Math.floor(progress) + '%';

            // Light Sweep Logic
            const sweepX = (time * 3) % width;
            const sweepWidth = width * 0.15;

            // Layer 3 Reactive Spike Trigger
            let isSpike = false;
            if (Math.random() < 0.005) {
                isSpike = true;
                coreWrapper.classList.add('fp-biotech-gene-data-upload-matrix-ui-spike');
                setTimeout(() => {
                    if(coreWrapper) coreWrapper.classList.remove('fp-biotech-gene-data-upload-matrix-ui-spike');
                }, 300);
            }

            const randomSpikeRow = isSpike ? Math.floor(Math.random() * rows) : -1;

            ctx.font = '8px monospace';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';

            cells.forEach(cell => {
                // Check intersection with sweep
                if (cell.x < sweepX && cell.x > sweepX - sweepWidth) {
                    cell.opacity = 0.8;
                    // Randomly change DNA character on sweep
                    if(Math.random() < 0.1) cell.char = ['A','T','C','G'][Math.floor(Math.random()*4)];
                } else {
                    // Fade out
                    cell.opacity *= 0.92;
                }

                // Force spike on specific row
                if (cell.row === randomSpikeRow) {
                    cell.opacity = 1;
                }

                // Draw Base Cell (Muted)
                const baseOp = Math.max(0.05, cell.opacity * 0.2);
                ctx.fillStyle = `rgba(${rgbMuted}, ${baseOp})`;
                ctx.fillRect(cell.x + 1, cell.y + 1, cell.w - 2, cell.h - 2);

                // Draw Active Cell / Text
                if (cell.opacity > 0.1) {
                    ctx.fillStyle = `rgba(${rgbAccent}, ${cell.opacity})`;
                    ctx.shadowBlur = cell.opacity * 10;
                    ctx.shadowColor = accentHex;
                    ctx.fillText(cell.char, cell.x + cell.w / 2, cell.y + cell.h / 2);
                    ctx.shadowBlur = 0; // reset
                }
            });

            // Draw the vertical scanner line
            ctx.beginPath();
            ctx.moveTo(sweepX, 0);
            ctx.lineTo(sweepX, height);
            ctx.strokeStyle = `rgba(${rgbAccent}, 0.8)`;
            ctx.lineWidth = 2;
            ctx.shadowBlur = 15;
            ctx.shadowColor = accentHex;
            ctx.stroke();
            ctx.shadowBlur = 0;

            rafId = requestAnimationFrame(fp_biotech_gene_data_upload_matrix_ui_render);
        }

        rafId = requestAnimationFrame(fp_biotech_gene_data_upload_matrix_ui_render);
    });
})();