feat(web): set up React app shell with routing and layout

Adds react-router-dom with routes for ship list, dashboard, and rules pages.
Includes TopBar with navigation and mobile-first dark theme CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/index.css

@@ -88,3 +88,92 @@ a {
 a:hover {
   text-decoration: underline;
 }
+
+/* Top Bar */
+.top-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-sm) 0;
+  margin-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.top-bar-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.top-bar-title {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+
+.top-bar-back {
+  background: none;
+  color: var(--color-primary);
+  font-size: 1.2rem;
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.top-bar-right {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.top-bar-link {
+  background: var(--color-accent);
+  color: var(--color-text);
+  font-size: 0.85rem;
+  padding: var(--spacing-xs) var(--spacing-sm);
+}
+
+.top-bar-link:hover {
+  background: var(--color-surface-hover);
+}
+
+/* Page Container */
+.page-container {
+  padding-bottom: var(--spacing-xl);
+}
+
+/* Buttons */
+.btn-primary {
+  background: var(--color-primary);
+  color: #fff;
+}
+
+.btn-primary:hover {
+  background: var(--color-primary-hover);
+}
+
+.btn-danger {
+  background: var(--color-danger);
+  color: #fff;
+}
+
+.btn-danger:hover {
+  background: #d32f2f;
+}
+
+.btn-secondary {
+  background: var(--color-accent);
+  color: var(--color-text);
+}
+
+.btn-secondary:hover {
+  background: var(--color-surface-hover);
+}
+
+.btn-icon {
+  background: none;
+  padding: var(--spacing-xs);
+  font-size: 1.2rem;
+  line-height: 1;
+  color: var(--color-text-muted);
+}
+
+.btn-icon:hover {
+  color: var(--color-text);
+}