dashboard/inventory styling, fixed contact layout with new branding, consolidated all inline styles to main.scss

src/pages/404.astro

@@ -19,7 +19,7 @@ const pokemon = pokedexList.find(p => p["#"] === randomNumber);
 const pokemonName = pokemon?.Name || "Unknown Pokémon";
 ---
 <Layout title="404 - Page Not Found">
-    <div class="container-fluid container-sm mt-4" slot="page">
+    <div class="container-fluid container-sm mt-5" slot="page">
     <div class="row mb-4">
         <div class="col-12 col-md-6">
             <h1 class="mb-4">404 - Page Not Found</h1>
@@ -79,32 +79,6 @@ const pokemonName = pokemon?.Name || "Unknown Pokémon";
     <Footer slot="footer" />
 </Layout>
 
-<style>
-  .pokemon-transition {
-    transition: opacity 0.4s ease;
-  }
-
-  .pokemon-clickable {
-    cursor: pointer;
-  }
-
-  .pokemon-clickable:focus-visible {
-    outline: 3px solid #ffc107;
-    outline-offset: 4px;
-    border-radius: 4px;
-  }
-
-  @keyframes pokemon-pulse {
-    0%, 100% { filter: brightness(0) drop-shadow(0 0 6px var(--bs-info-border-subtle)); }
-    50%       { filter: brightness(0) drop-shadow(0 0 18px var(--bs-info)); }
-  }
-
-  .masked-image {
-    filter: brightness(0);
-    animation: pokemon-pulse 2s ease-in-out infinite;
-  }
-</style>
-
 <script>
   const img = document.querySelector('.masked-image') as HTMLImageElement | null;
   const nameEl = document.querySelector('#pokemon-name');