fix: compact mobile bottom navigation

app/static/css/app.css

@@ -717,11 +717,15 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
 
   .bottom-nav {
     position: fixed;
-    inset: auto 12px 12px 12px;
+    left: max(8px, env(safe-area-inset-left));
+    right: max(8px, env(safe-area-inset-right));
+    bottom: calc(8px + env(safe-area-inset-bottom));
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 8px;
     padding: 10px;
+    max-width: 540px;
+    margin: 0 auto;
     background: var(--panel);
     border: 1px solid var(--line);
     border-radius: 24px;
@@ -733,10 +737,18 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
     display: grid;
     justify-items: center;
     gap: 6px;
+    min-width: 0;
     text-align: center;
-    font-size: 0.82rem;
+    font-size: 0.76rem;
+    line-height: 1.1;
     padding: 10px 6px;
     border-radius: 16px;
+    overflow-wrap: anywhere;
+  }
+
+  .bottom-nav a span {
+    display: inline-block;
+    max-width: 100%;
   }
 
   .mobile-theme-toggle {
@@ -784,6 +796,27 @@ h2 { font-size: 1.2rem; margin-bottom: 0; }
   }
 }
 
+@media (max-width: 560px) {
+  .content {
+    padding: 18px 14px 104px;
+  }
+
+  .bottom-nav {
+    gap: 4px;
+    padding: 8px;
+    border-radius: 20px;
+  }
+
+  .bottom-nav a {
+    font-size: 0.68rem;
+    padding: 8px 4px;
+  }
+
+  .bottom-nav a span {
+    display: none;
+  }
+}
+
 .planning-hero-strong {
   padding-bottom: 6px;
 }