<div class="rounded-lg border border-warning-200 dark:border-warning-700 bg-warning-50 dark:bg-warning-900/10 p-4">
    <div class="flex items-start gap-2">
        <svg class="w-5 h-5 text-warning-600 dark:text-warning-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
        <div class="flex-1">
            <div class="text-sm font-medium text-warning-800 dark:text-warning-200 mb-2">
                发现无效变量
            </div>
            <div class="text-sm text-warning-700 dark:text-warning-300">
                以下变量未在系统中定义，可能无法正确替换：
            </div>
            <ul class="mt-2 space-y-1">
                @foreach($invalidVariables as $variable)
                    <li class="text-sm text-warning-700 dark:text-warning-300">
                        <code class="px-1.5 py-0.5 bg-warning-100 dark:bg-warning-900/30 rounded font-mono">
                            {{'{'}}{{ $variable }}{{'}'}}
                        </code>
                    </li>
                @endforeach
            </ul>
            <div class="mt-3 text-xs text-warning-600 dark:text-warning-400">
                💡 提示：请检查变量名称是否正确，或参考右侧的"变量参考"面板查看所有可用变量。
            </div>
        </div>
    </div>
</div>
