.fp-b2c-subscription-box-upgrade-sync-ui {
    /* Layout System */
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    /* Color System - Tangerine Pop (85% Neutral Base) */
    --fp-primary-color: #FDFBF7;    
    --fp-secondary-color: #EFE9E1;  
    --fp-muted-color: #1A1A1A;      
    --fp-soft-color: #F7F0E8;       
    --fp-background-color: transparent;

    /* Signal Colors */
    --fp-info-color: #FF8C42;       
    --fp-warning-color: #FFA45B;    
    --fp-danger-color: #E67E22;     
    --fp-accent-color: #FF7043;     

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    background-color: var(--fp-background-color);
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.fp-b2c-subscription-box-upgrade-sync-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    background: var(--fp-primary-color);
    border: 1px solid var(--fp-secondary-color);
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.03);
}

.fp-b2c-subscription-box-upgrade-sync-ui-content {
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    animation: fp-b2c-subscription-box-upgrade-sync-ui-breathe 4s ease-in-out infinite;
}

.fp-b2c-subscription-box-upgrade-sync-ui-box-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fp-b2c-subscription-box-upgrade-sync-ui-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--fp-secondary-color);
    border-radius: 40px;
    animation: fp-b2c-subscription-box-upgrade-sync-ui-rotate 12s linear infinite;
}

.fp-b2c-subscription-box-upgrade-sync-ui-box-icon {
    width: 80px;
    height: 80px;
    background: var(--fp-accent-color);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fp-primary-color);
    box-shadow: 0 10px 25px rgba(255, 112, 67, 0.3);
    z-index: 2;
}

.fp-b2c-subscription-box-upgrade-sync-ui-box-icon svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fp-b2c-subscription-box-upgrade-sync-ui-title {
    color: var(--fp-muted-color);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.02em;
}

.fp-b2c-subscription-box-upgrade-sync-ui-badge {
    background: var(--fp-soft-color);
    color: var(--fp-accent-color);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.fp-b2c-subscription-box-upgrade-sync-ui-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

@keyframes fp-b2c-subscription-box-upgrade-sync-ui-breathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes fp-b2c-subscription-box-upgrade-sync-ui-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 400px) {
    .fp-b2c-subscription-box-upgrade-sync-ui-title { font-size: 1.1rem; }
    .fp-b2c-subscription-box-upgrade-sync-ui-box-wrapper { width: 110px; height: 110px; }
    .fp-b2c-subscription-box-upgrade-sync-ui-box-icon { width: 64px; height: 64px; }
}

(function() {
    document.querySelectorAll('.fp-b2c-subscription-box-upgrade-sync-ui').forEach(root => {
        const canvas = root.querySelector('.fp-b2c-subscription-box-upgrade-sync-ui-canvas');
        const ctx = canvas.getContext('2d');
        let width, height, particles = [];
        let animationFrameId;

        const colors = ['#FF8C42', '#FFA45B', '#E67E22', '#FF7043'];

        function fp_init_canvas_() {
            width = canvas.width = root.querySelector('.fp-b2c-subscription-box-upgrade-sync-ui-stage').offsetWidth;
            height = canvas.height = root.querySelector('.fp-b2c-subscription-box-upgrade-sync-ui-stage').offsetHeight;
        }

        class fp_particle_ {
            constructor() {
                this.reset();
            }
            reset() {
                this.x = width / 2;
                this.y = height / 2;
                const angle = Math.random() * Math.PI * 2;
                const force = Math.random() * 5 + 2;
                this.vx = Math.cos(angle) * force;
                this.vy = Math.sin(angle) * force;
                this.size = Math.random() * 4 + 2;
                this.color = colors[Math.floor(Math.random() * colors.length)];
                this.life = 1;
                this.decay = Math.random() * 0.02 + 0.01;
                this.gravity = 0.08;
            }
            update() {
                this.x += this.vx;
                this.y += this.vy;
                this.vy += this.gravity;
                this.life -= this.decay;
                if (this.life <= 0) this.reset();
            }
            draw() {
                ctx.globalAlpha = this.life;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                if (this.size > 4) {
                    ctx.rect(this.x, this.y, this.size, this.size);
                } else {
                    ctx.arc(this.x, this.y, this.size / 2, 0, Math.PI * 2);
                }
                ctx.fill();
            }
        }

        function fp_setup_particles_() {
            particles = Array.from({ length: 35 }, () => new fp_particle_());
        }

        function fp_animate_() {
            if (document.visibilityState === "hidden") {
                animationFrameId = requestAnimationFrame(fp_animate_);
                return;
            }

            ctx.clearRect(0, 0, width, height);
            particles.forEach(p => {
                p.update();
                p.draw();
            });
            animationFrameId = requestAnimationFrame(fp_animate_);
        }

        fp_init_canvas_();
        fp_setup_particles_();
        fp_animate_();

        window.addEventListener('resize', fp_init_canvas_);

        const observer = new MutationObserver(() => {
            if (!document.body.contains(root)) {
                cancelAnimationFrame(animationFrameId);
                window.removeEventListener('resize', fp_init_canvas_);
                observer.disconnect();
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    });
})();