refactor: improve mobile layout, sticky footer, and UI spacing

src/components/Footer.vue

@@ -4,7 +4,7 @@ const version = __APP_VERSION__;
 </script>
 
 <template>
-  <footer class="app-footer unselectable">
+  <footer class="app-footer glass-panel unselectable">
     <div class="footer-content">
       <p>&copy; {{ currentYear }} Tools App. v{{ version }}</p>
     </div>
@@ -14,13 +14,18 @@ const version = __APP_VERSION__;
 <style scoped>
 .app-footer {
   width: 100%;
-  padding: 1rem;
-  background-color: #242424;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 0.5rem;
+  /* Background handled by glass-panel */
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: auto; /* Push to bottom in flex container */
+  z-index: 10;
+  height: 30px;
 }
 
 .footer-content {
@@ -31,7 +36,7 @@ const version = __APP_VERSION__;
 
 p {
   font-size: 0.9rem;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--text-muted);
   margin: 0;
   font-family: monospace;
 }

src/components/Sidebar.vue

@@ -17,20 +17,42 @@ defineProps({
 
 <style scoped>
 .sidebar {
-  width: 0;
+  /* Mobile First Styles */
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 250px;
   background-color: var(--panel-bg);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   overflow-x: hidden;
-  transition: width 0.3s ease;
+  transition: transform 0.3s ease;
   border-right: 1px solid var(--panel-border);
-  flex-shrink: 0;
-  height: 100%;
+  z-index: 1000;
   box-shadow: var(--panel-shadow);
+  transform: translateX(-100%);
 }
 
 .sidebar.is-open {
-  width: 250px;
+  transform: translateX(0);
+}
+
+@media (min-width: 768px) {
+  .sidebar {
+    position: static;
+    transform: none;
+    width: 0;
+    height: auto;
+    transition: width 0.3s ease;
+    z-index: auto;
+    box-shadow: none; /* Shadow handled by panel logic or not needed inline */
+  }
+
+  .sidebar.is-open {
+    width: 250px;
+    transform: none;
+  }
 }
 
 .sidebar-nav {
@@ -38,11 +60,19 @@ defineProps({
   display: flex;
   flex-direction: column;
   width: 250px; /* Fixed width for content */
+  min-width: 250px;
+  padding-top: 1rem; /* Add some top padding for mobile aesthetic */
+}
+
+@media (min-width: 768px) {
+  .sidebar-nav {
+    padding-top: 0;
+  }
 }
 
 .nav-item {
   display: block;
-  padding: 0.5rem;
+  padding: 0.75rem 1rem;
   color: var(--text-secondary);
   text-decoration: none;
   transition: background-color 0.2s, color 0.2s;