Allow for logos to be used as instance names

launcher/src/pages/Home.svelte

@@ -4,7 +4,7 @@
   import ServerStatus from '../components/ServerStatus.svelte';
   import NewsFeed from '../components/NewsFeed.svelte';
   import Console from '../components/Console.svelte';
-  import { activeAccount, app, instances, selectedInstance } from '../lib/store.svelte';
+  import { abs, activeAccount, app, instances, selectedInstance } from '../lib/store.svelte';
   import { loaderName, shortLoaderVersion } from '../lib/format';
   import { openUrl } from '../lib/tauri';
 
@@ -26,7 +26,13 @@
           <span class="chip">{loaderName[inst.loader]} {shortLoaderVersion(inst.mc_version, inst.loader_version)}</span>
           {#if inst.file_count}<span class="chip"><Package size={12} /> {inst.file_count} mods & files</span>{/if}
         </div>
-        <h1>{inst.name}</h1>
+        {#if inst.logo_url}
+          <div class="logo-wrap">
+            <img class="inst-logo" src={abs(inst.logo_url)} alt={inst.name} />
+          </div>
+        {:else}
+          <h1>{inst.name}</h1>
+        {/if}
         <p class="desc">{inst.description || b.tagline}</p>
       </section>
 
@@ -67,6 +73,8 @@
   .greet { font-size: 0.88rem; }
   .greet strong { color: var(--text); font-weight: 560; }
   .chips { display: flex; gap: 0.45rem; flex-wrap: wrap; }
+  .logo-wrap { max-width: 100%; display: flex; align-items: flex-end; min-height: 3rem; margin: 0.25rem 0; }
+  .inst-logo { max-height: clamp(3.8rem, 8vw, 6.2rem); max-width: min(100%, 30rem); object-fit: contain; object-position: left bottom; filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5)); }
   h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; }
   .desc { font-size: 0.95rem; line-height: 1.6; color: var(--muted); max-width: 32rem; }
   .actions { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 0.8rem; animation: fade 0.3s ease both; }