Clickable home page stat cards; clean up nav; add buttons on list pages; move export/import to home

static/style.css

@@ -144,6 +144,11 @@
     .badge-retired   { background: var(--badge-retired-bg);   color: var(--badge-retired-text); }
     .badge-warning   { background: var(--badge-warning-bg);   color: var(--badge-warning-text); }
 
+    /* Clickable stat cards on home page */
+    .stat-link { display: block; flex: 1; min-width: 120px; text-decoration: none; }
+    .stat-link:hover { text-decoration: none; }
+    .stat-link:hover .card { box-shadow: 0 2px 8px rgba(0,0,0,.18); }
+
     /* Buttons */
     .btn { display: inline-block; padding: 0.4rem 0.9rem; border-radius: 4px; border: none; cursor: pointer; font-size: 0.875rem; font-family: inherit; text-decoration: none; }
     .btn:hover { text-decoration: none; }
@@ -300,4 +305,53 @@
       .form-actions { flex-direction: column; align-items: stretch; }
       .form-actions .btn,
       .form-actions button { width: 100%; text-align: center; }
+
+      /* ── Mobile: html bg matches nav so status bar area has no color gap ── */
+      html { background: #1e40af; }
+
+      /* ── Mobile: title-bar nav fills behind status bar, links hidden ── */
+      nav:not(.bottom-nav) {
+        padding-top: calc(0.4rem + env(safe-area-inset-top));
+        padding-bottom: 0.4rem;
+        justify-content: center;
+      }
+      nav:not(.bottom-nav) a:not(.brand) { display: none; }
+      nav:not(.bottom-nav) .brand { margin-right: 0; font-size: 0.95rem; }
+      body { padding-bottom: 4.5rem; }
+
+      .bottom-nav {
+        position: fixed;
+        bottom: 0; left: 0; right: 0;
+        display: flex;
+        background: #1e40af;
+        border-top: 1px solid #1d4ed8;
+        z-index: 100;
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+      .bottom-nav-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem 0.25rem 0.4rem;
+        color: #bfdbfe;
+        text-decoration: none;
+        font-size: 0.65rem;
+        gap: 0.2rem;
+        -webkit-tap-highlight-color: transparent;
+      }
+      .bottom-nav-item.active { color: #fff; }
+      .bottom-nav-item svg { display: block; }
+    }
+
+    /* ── Desktop: hide bottom nav ── */
+    @media (min-width: 641px) {
+      .bottom-nav { display: none; }
+    }
+
+    /* ── Dark mode: bottom nav + html background ── */
+    @media (prefers-color-scheme: dark) and (max-width: 640px) {
+      html { background: #0c1a3b; }
+      .bottom-nav { background: #0c1a3b; border-top-color: #1e3a8a; }
     }