Refactor carpeater info button for improved styling and accessibility

Author: MrAlders0n

index.html

@@ -178,8 +178,8 @@ <h2 class="text-sm font-medium text-slate-300 uppercase tracking-wide">Settings<
             <label for="carpeaterFilterEnabled" class="text-sm text-slate-300 cursor-pointer select-none">Ignore ID:</label>
             <input type="text" id="carpeaterIdInput" maxlength="2" placeholder="00" disabled
                    class="w-14 px-2 py-1 text-sm bg-slate-700 text-white border border-slate-600 rounded focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 focus:outline-none uppercase font-mono disabled:opacity-50 disabled:cursor-not-allowed">
-            <button id="carpeaterInfoLink" class="w-6 h-6 flex-shrink-0 flex items-center justify-center rounded-full bg-slate-700/50 border border-slate-600 text-sky-400 hover:bg-sky-900/30 hover:border-sky-500 hover:text-sky-300 transition-all" aria-label="Carpeater filter information">
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <button id="carpeaterInfoLink" class="flex-shrink-0 text-sky-400 hover:text-sky-300 transition-colors p-1" aria-label="Carpeater filter information">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
               </svg>
             </button>