.fp-elearning-face-id-verification-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* Blueprint Denim Casual Palette */
    --fp-primary-color: #ffffff;
    --fp-secondary-color: #f4f7f9;
    --fp-muted-color: #5a6673;
    --fp-soft-color: #e0e8f0;
    --fp-background-color: transparent;

    --fp-info-color: #7b9ab8;
    --fp-warning-color: #5c7e9e;
    --fp-danger-color: #2b4054;
    --fp-accent-color: #3b6085;
    /* Denim Blue */

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    background-color: var(--fp-background-color);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.fp-elearning-face-id-verification-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border-radius: 16px;
    border: 1px solid var(--fp-soft-color);
    box-shadow: 
        0 10px 30px rgba(59, 96, 133, 0.08),
        inset 0 0 60px rgba(224, 232, 240, 0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Technical Blueprint Grid Layer */
.fp-elearning-face-id-verification-ui-grid {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, var(--fp-soft-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--fp-soft-color) 1px, transparent 1px);
    background-size: 24px 24px;
    opacity: 0.6;
    z-index: 1;
}

/* Secondary larger grid for architectural feel */
.fp-elearning-face-id-verification-ui-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(to right, rgba(92, 126, 158, 0.15) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(92, 126, 158, 0.15) 1px, transparent 1px);
    background-size: 96px 96px;
}

/* Matrix Code Layer */
.fp-elearning-face-id-verification-ui-matrix-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    mask-image: radial-gradient(circle at center, black 20%, transparent 65%);
    -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 65%);
}

.fp-elearning-face-id-verification-ui-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Scanner Area */
.fp-elearning-face-id-verification-ui-scanner {
    position: relative;
    width: 60%;
    height: 60%;
    max-width: 300px;
    max-height: 300px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layer 1: Base Breathing Frame */
.fp-elearning-face-id-verification-ui-frame {
    position: absolute;
    inset: 0;
    border: 1px dashed var(--fp-info-color);
    border-radius: 24px;
    animation: fp-elearning-face-id-verification-ui-breathe 4s infinite ease-in-out;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Corner Brackets for Scanner */
.fp-elearning-face-id-verification-ui-corner {
    position: absolute;
    width: 24px;
    height: 24px;
    border-color: var(--fp-accent-color);
    border-style: solid;
    border-width: 0;
}
.fp-elearning-face-id-verification-ui-corner-tl { top: -2px; left: -2px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 24px; }
.fp-elearning-face-id-verification-ui-corner-tr { top: -2px; right: -2px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 24px; }
.fp-elearning-face-id-verification-ui-corner-bl { bottom: -2px; left: -2px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 24px; }
.fp-elearning-face-id-verification-ui-corner-br { bottom: -2px; right: -2px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 24px; }

/* Layer 2: Rotational Target */
.fp-elearning-face-id-verification-ui-reticle {
    position: absolute;
    width: 120%;
    height: 120%;
    border: 1px solid rgba(123, 154, 184, 0.2);
    border-radius: 50%;
    border-top-color: var(--fp-accent-color);
    border-bottom-color: var(--fp-accent-color);
    animation: fp-elearning-face-id-verification-ui-spin 12s infinite linear;
    opacity: 0.5;
}

.fp-elearning-face-id-verification-ui-reticle-inner {
    position: absolute;
    width: 90%;
    height: 90%;
    border: 1px dashed rgba(123, 154, 184, 0.4);
    border-radius: 50%;
    animation: fp-elearning-face-id-verification-ui-spin 8s infinite linear reverse;
}

/* Face Wireframe SVG */
.fp-elearning-face-id-verification-ui-face-svg {
    position: relative;
    width: 70%;
    height: 80%;
    z-index: 4;
    transition: filter 0.2s ease;
}

/* Scanning Line */
.fp-elearning-face-id-verification-ui-scanline {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 90%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--fp-accent-color), transparent);
    box-shadow: 0 0 8px var(--fp-accent-color);
    z-index: 5;
    animation: fp-elearning-face-id-verification-ui-scan 3s infinite ease-in-out;
    opacity: 0.8;
}

/* HUD Overlay */
.fp-elearning-face-id-verification-ui-hud {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    z-index: 10;
}

.fp-elearning-face-id-verification-ui-status-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fp-elearning-face-id-verification-ui-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--fp-info-color);
    text-transform: uppercase;
}

.fp-elearning-face-id-verification-ui-status {
    font-size: 12px;
    font-weight: 600;
    color: var(--fp-accent-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

.fp-elearning-face-id-verification-ui-dot {
    width: 6px;
    height: 6px;
    background-color: var(--fp-accent-color);
    border-radius: 50%;
    animation: fp-elearning-face-id-verification-ui-blink 1.5s infinite;
}

.fp-elearning-face-id-verification-ui-logs {
    font-size: 10px;
    color: var(--fp-muted-color);
    text-align: right;
    opacity: 0.8;
}

.fp-elearning-face-id-verification-ui-log-line {
    margin-top: 2px;
    transition: color 0.2s;
}

/* Keyframes */
@keyframes fp-elearning-face-id-verification-ui-breathe {
    0%, 100% { box-shadow: inset 0 0 10px rgba(92, 126, 158, 0.1); border-color: rgba(123, 154, 184, 0.3); }
    50% { box-shadow: inset 0 0 20px rgba(92, 126, 158, 0.3); border-color: rgba(123, 154, 184, 0.8); }
}

@keyframes fp-elearning-face-id-verification-ui-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes fp-elearning-face-id-verification-ui-scan {
    0%, 100% { top: 10%; opacity: 0; }
    10% { opacity: 0.8; }
    50% { top: 85%; opacity: 1; }
    90% { opacity: 0.8; }
}

@keyframes fp-elearning-face-id-verification-ui-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Responsive restructuring */
@media (max-width: 480px) {
    .fp-elearning-face-id-verification-ui-hud {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        bottom: 16px;
    }
    .fp-elearning-face-id-verification-ui-logs {
        text-align: center;
    }
    .fp-elearning-face-id-verification-ui-scanner {
        width: 50%;
        height: 50%;
        margin-bottom: 30px;
    }
}

(function() {
    // Diubah agar menargetkan elemen secara langsung karena script dipisahkan
    const root = document.querySelector('.fp-elearning-face-id-verification-ui');
    if (!root) return;

    const canvas = root.querySelector('.fp-elearning-face-id-verification-ui-canvas');
    const ctx = canvas.getContext('2d');
    const faceSvg = root.querySelector('.fp-elearning-face-id-verification-ui-face-svg');
    const dynamicLog = root.querySelector('.fp-elearning-face-id-verification-ui-dynamic-log');
    
    let width, height;
    let animationId;
    let lastMatrixTime = 0;
    let spikeTimer = 0;
    const chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ{}[]<>/\\';
    const fontSize = 10;
    let columns = [];
    let drops = [];
    
    const computedStyle = getComputedStyle(root);
    const accentColor = computedStyle.getPropertyValue('--fp-accent-color').trim() || '#3b6085';
    const primaryColor = computedStyle.getPropertyValue('--fp-primary-color').trim() || '#ffffff';
    
    function resizeCanvas() {
        const parent = canvas.parentElement;
        width = canvas.width = parent.clientWidth;
        height = canvas.height = parent.clientHeight;
        columns = Math.floor(width / fontSize);
        drops = [];
        for(let x = 0; x < columns; x++) {
            drops[x] = Math.random() * -100; // staggered start
        }
    }

    const resizeObserver = new ResizeObserver(() => {
        resizeCanvas();
    });
    resizeObserver.observe(root.querySelector('.fp-elearning-face-id-verification-ui-stage'));

    function animate(timestamp) {
        if (document.visibilityState === 'hidden') {
            lastMatrixTime = timestamp;
            animationId = requestAnimationFrame(animate);
            return;
        }

        const dt = timestamp - lastMatrixTime;
        // Matrix Layer Update (~20fps for tech feel)
        if (dt > 50) {
            lastMatrixTime = timestamp;
            // Fade out previous frame
            ctx.fillStyle = primaryColor === '#ffffff' ?
            'rgba(255, 255, 255, 0.15)' : 'rgba(255, 255, 255, 0.15)'; // Fallback if variable complex
            // Direct RGB fallback for white background fade
            ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
            ctx.fillRect(0, 0, width, height);

            ctx.font = fontSize + 'px monospace';
            for(let i = 0; i < drops.length; i++) {
                const text = chars.charAt(Math.floor(Math.random() * chars.length));
                // Sparse matrix effect
                if(Math.random() > 0.8) {
                    ctx.fillStyle = accentColor;
                    ctx.globalAlpha = Math.random() * 0.5 + 0.1;
                    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                }

                if(drops[i] * fontSize > height && Math.random() > 0.95) {
                    drops[i] = 0;
                }
                drops[i]++;
            }
            ctx.globalAlpha = 1.0;
        }

        // Layer 3: Reactive Spike
        spikeTimer += dt;
        if (spikeTimer > 2500) {
            spikeTimer = 0;
            // Visual Spike
            faceSvg.style.filter = `drop-shadow(0 0 6px ${accentColor})`;
            dynamicLog.style.color = accentColor;
            
            const matchPercent = (85 + Math.random() * 14).toFixed(1);
            dynamicLog.textContent = `MATCH: ${matchPercent}% VERIFIED`;
            setTimeout(() => {
                if(faceSvg) {
                    faceSvg.style.filter = 'none';
                    dynamicLog.style.color = 'inherit';
                    dynamicLog.textContent = 'MATCH: COMPUTING...';
                }
            }, 400);
        }

        animationId = requestAnimationFrame(animate);
    }

    // Initialization
    resizeCanvas();
    lastMatrixTime = performance.now();
    animationId = requestAnimationFrame(animate);

    // Cleanup
    const domObserver = new MutationObserver(() => {
        if (!document.body.contains(root)) {
            cancelAnimationFrame(animationId);
            resizeObserver.disconnect();
            domObserver.disconnect();
        }
    });
    domObserver.observe(document.body, { childList: true, subtree: true });
})();