Enhance Carpeater Info Modal styling for improved visibility and user experience

Author: MrAlders0n

index.html

@@ -416,8 +416,8 @@ <h3 style="font-size: 1.125rem; font-weight: 500; color: #e2e8f0;">Override Auto
   </div>
 
   <!-- Carpeater Info Modal -->
-  <div id="carpeaterModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" style="display: none;">
-    <div class="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700">
+  <div id="carpeaterModal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); align-items: center; justify-content: center; z-index: 9999; padding: 1rem;">
+    <div class="bg-slate-800 rounded-lg shadow-xl max-w-md w-full border border-slate-700" style="background-color: #1e293b; border-radius: 0.5rem; max-width: 28rem; width: 100%; border: 1px solid #334155; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);">
       <div class="p-6">
         <div class="flex justify-between items-start mb-4">
           <h3 class="text-lg font-semibold text-slate-200">What is a Carpeater?</h3>