{# Review Pending Settings Changes - shows old (red) -> new (green) #}
<div id="review-changes-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[105] p-4">
    <div class="modal-backdrop review-changes-backdrop fixed inset-0 bg-black/60 modal-transition"></div>
    <div class="modal-content glass-modal modal-radius-xl shadow-3xl w-full max-w-2xl max-h-[85vh] border border-white/10 modal-content-transition relative flex flex-col overflow-hidden">
        <div class="p-8 pb-4 flex-shrink-0 flex items-center justify-between bg-white/[0.02] border-b border-white/5">
            <div class="flex items-center gap-3">
                <div class="p-2.5 bg-amber-500/10 rounded-xl border border-amber-500/20">
                    <i data-lucide="git-diff" class="h-6 w-6 text-amber-400"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-white">Review Changes</h3>
                    <p class="text-xs text-zinc-500 mt-1 uppercase tracking-widest font-black">Pending settings to apply</p>
                </div>
            </div>
            <button type="button" class="review-changes-close p-3 bg-white/[0.03] hover:bg-red-500/20 border border-white/5 hover:border-red-500/30 rounded-2xl text-zinc-500 hover:text-red-400 transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>
        <div id="review-changes-list" class="flex-1 overflow-y-auto px-8 py-4 space-y-3 custom-scrollbar">
            <!-- Populated by JS -->
        </div>
        <div class="p-8 pt-4 flex-shrink-0 flex justify-end gap-3 border-t border-white/5">
            <button type="button" class="review-changes-close glass-button no-hover-lift px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white">Close</button>
            <button type="button" id="review-changes-apply-btn" class="glass-button px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-emerald-500 hover:bg-emerald-500/10">
                <i data-lucide="check" class="h-4 w-4 inline mr-2"></i> Apply All
            </button>
        </div>
    </div>
</div>