feat: shift pages to bottom toolbar on mobile

web/assets/css/dashboard.css

@@ -112,6 +112,41 @@ body {
   opacity: 1;
 }
 
+/* ── Bottom nav (mobile) ── */
+.bottom-nav {
+  display: none;
+  position: fixed;
+  bottom: 0; left: 0; right: 0;
+  background: var(--bg-surface);
+  border-top: 1px solid var(--border);
+  z-index: 1040;
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.bottom-nav a {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.2rem;
+  padding: 0.55rem 0.25rem;
+  color: var(--text-muted);
+  text-decoration: none;
+  font-size: 0.68rem;
+  min-width: 0;
+  transition: color 0.15s;
+}
+
+.bottom-nav a i {
+  font-size: 1.15rem;
+}
+
+.bottom-nav a.active,
+.bottom-nav a:hover {
+  color: var(--accent);
+}
+
 /* ── Top bar (mobile) ── */
 .topbar {
   display: none;
@@ -408,13 +443,14 @@ body {
 
 /* ── Responsive ── */
 @media (max-width: 767.98px) {
-  .sidebar { display: none; }
-  .topbar  { display: flex; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
-  .main    {
+  .sidebar     { display: none; }
+  .bottom-nav  { display: flex; }
+  .topbar      { display: flex; padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
+  .main        {
     margin-left: 0;
     padding-top:    1rem;
     padding-left:   max(1rem, env(safe-area-inset-left));
     padding-right:  max(1rem, env(safe-area-inset-right));
-    padding-bottom: max(2rem, env(safe-area-inset-bottom));
+    padding-bottom: calc(4rem + max(0.5rem, env(safe-area-inset-bottom)));
   }
 }