feat(ux): Sprint 3 mobile nav, sync conflicts, and resilience

Improve mobile bottom navigation, accessible dialogs and cards, explicit
sync conflict resolution, i18n error messages, encrypted draft autosave,
and persistent storage hints for offline data safety.

Co-authored-by: Cursor <cursoragent@cursor.com>

client/src/App.css

@@ -1799,6 +1799,22 @@ html.scheme-dark .themed-select-option.is-selected {
   gap: 24px;
 }
 
+.logbook-card-select {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
 .logbook-card {
   background: var(--app-surface-alt);
   backdrop-filter: var(--app-backdrop);
@@ -1809,18 +1825,61 @@ html.scheme-dark .themed-select-option.is-selected {
   display: flex;
   align-items: flex-start;
   gap: 16px;
-  cursor: pointer;
   position: relative;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.logbook-card:hover {
+.logbook-card:hover,
+.logbook-card:focus-within {
   transform: translateY(-2px);
   border-color: var(--app-border);
   box-shadow: var(--app-card-shadow);
   background: var(--app-surface-hover);
 }
 
+.sync-conflict-banner {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+  margin: 0 0 16px;
+  padding: 16px;
+  border-radius: var(--app-radius-card);
+  border: 1px solid var(--app-warning-border, #f59e0b);
+  background: var(--app-warning-bg, rgba(245, 158, 11, 0.12));
+  color: var(--app-text);
+}
+
+.sync-conflict-banner__body p {
+  margin: 4px 0 12px;
+  font-size: 14px;
+  color: var(--app-text-muted);
+}
+
+.sync-conflict-banner__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.storage-persist-hint {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 16px;
+  padding: 12px 16px;
+  border-radius: var(--app-radius-card);
+}
+
+.storage-persist-hint p {
+  margin: 0;
+  flex: 1;
+  min-width: 200px;
+  font-size: 14px;
+  color: var(--app-text-muted);
+}
+
 .logbook-card--shared {
   border-left: 3px solid #38bdf8;
 }
@@ -2130,9 +2189,65 @@ html.scheme-dark .themed-select-option.is-selected {
   align-items: start;
 }
 
+.app-bottom-nav {
+  display: none;
+}
+
 @media (max-width: 768px) {
   .app-body {
     grid-template-columns: minmax(0, 1fr);
+    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
+  }
+
+  .app-sidebar {
+    display: none;
+  }
+
+  .app-bottom-nav {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    justify-content: space-around;
+    align-items: stretch;
+    gap: 4px;
+    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
+    background: var(--app-surface-alt);
+    backdrop-filter: var(--app-backdrop);
+    border-top: 1px solid var(--app-border-subtle);
+    box-sizing: border-box;
+  }
+
+  .bottom-nav-btn {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 6px 4px;
+    border: none;
+    border-radius: 8px;
+    background: transparent;
+    color: var(--app-text-muted);
+    font-size: 10px;
+    font-weight: 500;
+    cursor: pointer;
+  }
+
+  .bottom-nav-btn span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .bottom-nav-btn.active {
+    background: var(--app-sidebar-active-bg);
+    color: var(--app-sidebar-active-text);
   }
 }