    <div class="mb-6 flex justify-between items-center">
        <div>
            <h1 class="text-2xl font-bold dark:text-white flex items-center gap-2">
                <span>⚖️</span> Accountability Audit
            </h1>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Permanent record of Trinity operations</p>
        </div>
        <div>
            <select name="type" 
                    hx-get="/admin/audit/feed" 
                    hx-target="#audit-feed"
                    class="bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 text-sm">
                <option value="">All Actions</option>
                <option value="extend_grace_period">Grace Period Extensions</option>
                <option value="manual_payment_override">Manual Payments</option>
                <option value="server_sync">Forced Syncs</option>
                <option value="whitelist_toggle">Whitelist Toggles</option>
            </select>
        </div>
    </div>

    <div class="bg-white dark:bg-darkcard rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm overflow-hidden">
        <div id="audit-feed" hx-get="/admin/audit/feed" hx-trigger="load">
            <div class="p-8 text-center text-gray-500 animate-pulse">Loading secure audit logs...</div>
        </div>
    </div>
