.fp-law-firm-password-strength-analyzer-ui {
    --fp-container-width: 100%;
    --fp-max-width: 500px;
    --fp-aspect-ratio: 1 / 1;

    --fp-primary-color: #ffffff;
    --fp-secondary-color: #f1f5f9;
    --fp-muted-color: #334155;
    --fp-soft-color: #e2e8f0;
    --fp-background-color: transparent;

    --fp-info-color: #64748b;
    --fp-warning-color: #94a3b8;
    --fp-danger-color: #475569;
    --fp-accent-color: #4b6a9b;

    width: var(--fp-container-width);
    max-width: var(--fp-max-width);
    margin: 0 auto;
    background-color: var(--fp-background-color);
    box-sizing: border-box;
    overflow: hidden;
}

.fp-law-firm-password-strength-analyzer-ui-stage {
    width: 100%;
    aspect-ratio: var(--fp-aspect-ratio);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: var(--fp-primary-color);
    border: 1px solid var(--fp-soft-color);
    overflow: hidden;
}

.fp-law-firm-password-strength-analyzer-ui-blueprint {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(var(--fp-secondary-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--fp-secondary-color) 1px, transparent 1px);
    background-size: 20px 20px;
    animation: fp-law-firm-password-strength-analyzer-ui-breathe 8s ease-in-out infinite;
    z-index: 1;
}

.fp-law-firm-password-strength-analyzer-ui-scanner {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 1px solid var(--fp-soft-color);
    border-radius: 50%;
    z-index: 2;
}

.fp-law-firm-password-strength-analyzer-ui-scanner::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--fp-accent-color);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--fp-accent-color);
    animation: fp-law-firm-password-strength-analyzer-ui-rotate 4s linear infinite;
}

.fp-law-firm-password-strength-analyzer-ui-content {
    position: relative;
    z-index: 10;
    width: 85%;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid var(--fp-muted-color);
    box-shadow: 4px 4px 0px var(--fp-soft-color);
    text-align: left;
}

.fp-law-firm-password-strength-analyzer-ui-header {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--fp-info-color);
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--fp-soft-color);
    padding-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
}

.fp-law-firm-password-strength-analyzer-ui-input-box {
    position: relative;
    margin-bottom: 1.5rem;
}

.fp-law-firm-password-strength-analyzer-ui-input {
    width: 100%;
    background: var(--fp-secondary-color);
    border: 1px solid var(--fp-soft-color);
    padding: 0.75rem;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    color: var(--fp-muted-color);
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.3s ease;
}

.fp-law-firm-password-strength-analyzer-ui-scramble-text {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--fp-accent-color);
    height: 1.2rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
}

.fp-law-firm-password-strength-analyzer-ui-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.fp-law-firm-password-strength-analyzer-ui-metric {
    border-left: 2px solid var(--fp-soft-color);
    padding-left: 0.5rem;
}

.fp-law-firm-password-strength-analyzer-ui-label {
    display: block;
    font-size: 0.65rem;
    color: var(--fp-warning-color);
    text-transform: uppercase;
}

.fp-law-firm-password-strength-analyzer-ui-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--fp-muted-color);
}

.fp-law-firm-password-strength-analyzer-ui-spike {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--fp-accent-color);
    transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes fp-law-firm-password-strength-analyzer-ui-breathe {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.03); opacity: 0.8; }
}

@keyframes fp-law-firm-password-strength-analyzer-ui-rotate {
    from { transform: translateX(-50%) rotate(0deg) translateY(-40%); }
    to { transform: translateX(-50%) rotate(360deg) translateY(-40%); }
}

@media (max-width: 400px) {
    .fp-law-firm-password-strength-analyzer-ui-content { padding: 1rem; }
    .fp-law-firm-password-strength-analyzer-ui-metrics { grid-template-columns: 1fr; }
}

document.querySelectorAll('.fp-law-firm-password-strength-analyzer-ui').forEach(root => {
    const input = root.querySelector('.fp-law-firm-password-strength-analyzer-ui-input');
    const scrambleDisplay = root.querySelector('.fp-law-firm-password-strength-analyzer-ui-scramble-text');
    const spike = root.querySelector('.fp-law-firm-password-strength-analyzer-ui-spike');
    const strengthVal = root.querySelector('.fp-metric-strength');
    const entropyVal = root.querySelector('.fp-metric-entropy');

    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+{}[]";
    let animationFrame;
    let lastUpdate = 0;

    const strengthMap = [
        { label: "NULL", width: "0%" },
        { label: "VULNERABLE", width: "25%" },
        { label: "SUB-STANDARD", width: "50%" },
        { label: "JUDICIAL GRADE", width: "75%" },
        { label: "SECURE BLUEPRINT", width: "100%" }
    ];

    function calculateStrength(pwd) {
        let score = 0;
        if (pwd.length > 6) score++;
        if (pwd.length > 10) score++;
        if (/[A-Z]/.test(pwd) && /[0-9]/.test(pwd)) score++;
        if (/[^A-Za-z0-9]/.test(pwd)) score++;
        return score;
    }

    function scrambleEffect() {
        let text = "";
        for(let i = 0; i < 24; i++) {
            text += chars[Math.floor(Math.random() * chars.length)];
        }
        scrambleDisplay.innerText = text;
    }

    function updateLoop(timestamp) {
        if (document.visibilityState === "hidden") {
            animationFrame = requestAnimationFrame(updateLoop);
            return;
        }

        if (timestamp - lastUpdate > 80) {
            scrambleEffect();
            lastUpdate = timestamp;
        }

        animationFrame = requestAnimationFrame(updateLoop);
    }

    input.addEventListener('input', (e) => {
        const val = e.target.value;
        const score = val.length === 0 ? 0 : calculateStrength(val);
        const data = strengthMap[score];

        strengthVal.innerText = data.label;
        spike.style.width = data.width;
        
        const entropy = val.length * 4.2; 
        entropyVal.innerText = entropy.toFixed(2);
    });

    animationFrame = requestAnimationFrame(updateLoop);

    const observer = new MutationObserver(() => {
        if (!document.body.contains(root)) {
            cancelAnimationFrame(animationFrame);
            observer.disconnect();
        }
    });
    observer.observe(document.body, { childList: true, subtree: true });
});