<!-- ============================================================== -->
<!-- AURA STANDARD USER DASHBOARD // BLOCK USER MODAL (NEO-BRUTALIST) -->
<!-- ============================================================== -->
<div id="blockUserModal" class="fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 hidden">
  <div class="bg-white border-4 border-black p-6 sm:p-8 max-w-lg w-full shadow-[10px_10px_0px_0px_#FF6B6B] relative">
    
    <!-- Close Button -->
    <button onclick="closeBlockModal()" class="absolute top-4 right-4 bg-hotred text-white border-2 border-black w-8 h-8 font-black text-sm hover:bg-black shadow-[2px_2px_0px_0px_#000]">
      ✕
    </button>

    <!-- Modal Header -->
    <div class="flex items-center gap-3 border-b-4 border-black pb-3 mb-4">
      <div class="w-10 h-10 bg-hotred text-white border-2 border-black flex items-center justify-center font-black text-lg">
        ⛔
      </div>
      <div>
        <span class="bg-black text-white text-[10px] font-black uppercase px-2 py-0.5">
          ZERO-TOLERANCE SAFETY
        </span>
        <h3 class="text-xl font-black uppercase tracking-tight">
          BLOCK & TERMINATE SESSION
        </h3>
      </div>
    </div>

    <!-- Body -->
    <p class="text-xs font-bold text-gray-800 mb-3">
      You are about to block <strong class="text-black bg-vividyellow px-1" id="blockTargetName">aura0102</strong>. 
      They will be immediately disconnected and prevented from matching with you again.
    </p>

    <!-- Form -->
    <form onsubmit="handleBlockSubmit(event)" class="space-y-4">
      <div>
        <label class="block font-black text-xs uppercase mb-1 tracking-wider">
          REASON FOR BLOCKING (Optional but Recommended)
        </label>
        <textarea 
          id="blockReasonInput" 
          rows="3" 
          placeholder="e.g. Inappropriate language, spamming links, harassment..."
          class="w-full bg-[#FFFDF5] border-4 border-black rounded-none p-3 font-bold text-xs text-black placeholder:text-gray-500 focus:bg-[#FFD93D] focus:outline-none focus-visible:bg-[#FFD93D] focus-visible:outline-none transition-colors shadow-[4px_4px_0px_0px_#000]"
        ></textarea>
        <span class="text-[10px] font-bold text-gray-600 block mt-1">
          * This reason is confidentially logged to the Disciplinary Command Center for audit.
        </span>
      </div>

      <!-- Action Buttons -->
      <div class="flex gap-2 pt-2">
        <button 
          type="submit" 
          class="flex-1 bg-hotred hover:bg-black text-white border-4 border-black p-3 font-black text-xs uppercase tracking-wider shadow-[4px_4px_0px_0px_#000] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all cursor-pointer"
        >
          CONFIRM PERMANENT BLOCK ⛔
        </button>
        <button 
          type="button" 
          onclick="closeBlockModal()" 
          class="bg-cream hover:bg-gray-200 text-black border-4 border-black px-4 py-3 font-black text-xs uppercase tracking-wider shadow-[4px_4px_0px_0px_#000] active:translate-x-[2px] active:translate-y-[2px] active:shadow-none transition-all cursor-pointer"
        >
          CANCEL
        </button>
      </div>
    </form>
  </div>
</div>