Info page: show the app version, two-column layout on wide screens

An About panel shows the installed version (from Tauri at runtime, since
release builds stamp it at build time; dev builds are labelled as such).
On wide screens the page splits into panels in two columns — card
database, library stats and libraries on the left; sync and about on the
right — while narrow screens keep the single-column order. The sync panel
is now headed "Sync" and the Info page's summary "Library stats".

Closes #22

src/styles.css

@@ -805,11 +805,51 @@ input[type="checkbox"] {
 
 /* Mobile's Info tab — card-database management, which lives in the topbar
    instead on desktop (see INFO_TAB in App.tsx). */
-.info-panel {
+/* Info page: a column of panels on narrow screens, two columns on wide ones.
+   Below the breakpoint the two `.info-col` wrappers dissolve (display:
+   contents) so `order` can interleave their panels into the reading order
+   the single column always had: card data, libraries, sync, summary, about. */
+.info-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+}
+.info-col {
+  display: contents;
+}
+.info-section {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
-  max-width: 480px;
+  min-width: 0;
+}
+.info-db { order: 1; }
+.info-libraries { order: 2; }
+.info-sync { order: 3; }
+.info-summary { order: 4; }
+.info-about { order: 5; }
+@media (min-width: 900px) {
+  .info-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    align-items: start;
+    max-width: 1200px;
+  }
+  .info-col {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    min-width: 0;
+  }
+}
+.info-about-row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+.info-version {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
 }
 /* Top-bar sync state; opens the Info tab. Quiet when all is well, so it
    only draws the eye when something needs attention. */