added firebase & changed main tab color, uyear stand out

src/lib/layout/Layout.svelte

@@ -2,11 +2,13 @@
   import TopBar from './TopBar.svelte';
   import Footer from './Footer.svelte';
 
-  let { screen, onNavigate, children } = $props();
+  let { screen, onNavigate, hideTopBar = false, children } = $props();
 </script>
 
-<div class="layout">
-  <TopBar {screen} {onNavigate} />
+<div class="layout" class:no-topbar={hideTopBar}>
+  {#if !hideTopBar}
+    <TopBar {screen} {onNavigate} />
+  {/if}
   <main class="main">
     {@render children()}
   </main>
@@ -21,6 +23,9 @@
     grid-template-rows: auto 1fr auto;
     overflow: hidden;
   }
+  .layout.no-topbar {
+    grid-template-rows: 1fr auto;
+  }
 
   .main {
     overflow: hidden;

src/lib/layout/TopBar.svelte

@@ -58,8 +58,8 @@
   }
   .nav-btn:hover { color: var(--text-h); }
   .nav-btn.active {
-    background: var(--bg);
-    color: var(--text-h);
-    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+    background: #7c3aed;
+    color: #fff;
+    box-shadow: 0 1px 4px rgba(124,58,237,0.25);
   }
 </style>