Redesign UI with dark cockpit color and typography tokens

Replaces the light generic theme with a dark palette grounded in the
app's own subject matter (bike computer telemetry): electric-lime
accent, tabular monospace numerals for stats/timestamps, hairline
card borders instead of shadows, and visible focus rings. Every
template already shares the same classes, so no markup changes were
needed.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/web/static/style.css

@@ -1,23 +1,24 @@
 :root {
-    --bg: #f4f5f9;
-    --surface: #ffffff;
-    --border: #e3e6ee;
-    --text: #1c2130;
-    --text-muted: #6b7185;
-    --primary: #4c5fd5;
-    --primary-hover: #3d4dc0;
-    --danger: #d64550;
-    --danger-bg: #fdeceb;
-    --success: #1f9d63;
-    --success-bg: #e7f7ee;
-    --warning: #b8860b;
-    --warning-bg: #fdf3d9;
-    --neutral: #6b7185;
-    --neutral-bg: #eef0f5;
-    --info: #2f7ec2;
-    --info-bg: #e8f2fb;
+    --bg: #12151a;
+    --surface: #1a1f27;
+    --surface-raised: #232935;
+    --border: #2a3038;
+    --text: #e7eaf0;
+    --text-muted: #8b93a3;
+    --accent: #c8ff4d;
+    --danger: #ff5f6d;
+    --danger-bg: rgba(255, 95, 109, 0.16);
+    --success: #c8ff4d;
+    --success-bg: rgba(200, 255, 77, 0.16);
+    --warning: #ffb454;
+    --warning-bg: rgba(255, 180, 84, 0.16);
+    --neutral: #8b93a3;
+    --neutral-bg: rgba(139, 147, 163, 0.16);
+    --info: #5fd4ff;
+    --info-bg: rgba(95, 212, 255, 0.16);
     --radius: 10px;
-    --shadow: 0 1px 2px rgba(28, 33, 48, 0.06), 0 1px 8px rgba(28, 33, 48, 0.04);
+    --shadow: none;
+    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
 }
 
 * {
@@ -33,7 +34,7 @@ body {
 }
 
 a {
-    color: var(--primary);
+    color: var(--info);
     text-decoration: none;
 }
 
@@ -41,6 +42,14 @@ a:hover {
     text-decoration: underline;
 }
 
+a:focus-visible,
+button:focus-visible,
+.btn:focus-visible,
+input:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
+
 .topbar {
     background: var(--surface);
     border-bottom: 1px solid var(--border);
@@ -77,37 +86,26 @@ a:hover {
     font-size: 0.9rem;
 }
 
-.sync-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    padding: 0.3rem 0.7rem;
-    border-radius: 999px;
-    background: var(--info-bg);
-    color: var(--info);
-    font-size: 0.78rem;
-    font-weight: 600;
-    white-space: nowrap;
-}
-
-.sync-status time {
-    font-weight: 700;
-}
-
 .container {
     max-width: 960px;
     margin: 0 auto;
     padding: 2rem 1.5rem 4rem;
 }
 
+h1, h2 {
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
 h1 {
-    font-size: 1.5rem;
+    font-size: 1.4rem;
     margin: 0 0 1.25rem;
 }
 
 h2 {
-    font-size: 1.1rem;
+    font-size: 1rem;
     margin: 2rem 0 0.75rem;
+    color: var(--text-muted);
 }
 
 .page-actions {
@@ -125,6 +123,24 @@ h2 {
     box-shadow: var(--shadow);
     padding: 1.25rem 1.4rem;
     margin-bottom: 1rem;
+    animation: card-in 150ms ease-out;
+}
+
+@keyframes card-in {
+    from {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .card {
+        animation: none;
+    }
 }
 
 .user-list {
@@ -235,18 +251,18 @@ h2 {
 
 button, .btn {
     font: inherit;
-    background: var(--primary);
-    color: #fff;
+    background: var(--accent);
+    color: var(--bg);
     border: none;
     border-radius: 8px;
     padding: 0.45rem 0.9rem;
     cursor: pointer;
     font-size: 0.85rem;
-    font-weight: 500;
+    font-weight: 600;
 }
 
 button:hover, .btn:hover {
-    background: var(--primary-hover);
+    filter: brightness(0.88);
     text-decoration: none;
 }
 
@@ -257,7 +273,8 @@ button.secondary, .btn.secondary {
 }
 
 button.secondary:hover, .btn.secondary:hover {
-    background: var(--bg);
+    background: var(--surface-raised);
+    filter: none;
 }
 
 table {
@@ -280,6 +297,11 @@ table th {
     letter-spacing: 0.03em;
 }
 
+table td {
+    font-family: var(--mono);
+    font-variant-numeric: tabular-nums;
+}
+
 table tr:last-child td {
     border-bottom: none;
 }
@@ -298,6 +320,8 @@ dl.info-grid dt {
 
 dl.info-grid dd {
     margin: 0;
+    font-family: var(--mono);
+    font-variant-numeric: tabular-nums;
 }
 
 .error {
@@ -342,12 +366,17 @@ form.stacked-form input[type="text"],
 form.stacked-form input[type="password"],
 form.stacked-form input[type="email"] {
     font: inherit;
+    color: var(--text);
     padding: 0.5rem 0.65rem;
     border: 1px solid var(--border);
     border-radius: 8px;
     background: var(--surface);
 }
 
+form.stacked-form input[type="checkbox"] {
+    accent-color: var(--accent);
+}
+
 form.stacked-form button {
     margin-top: 1rem;
     align-self: flex-start;
@@ -356,3 +385,33 @@ form.stacked-form button {
 .inline-form {
     display: inline;
 }
+
+.sync-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    padding: 0.35rem 0.8rem;
+    border-radius: 999px;
+    background: var(--surface-raised);
+    border: 1px solid var(--border);
+    color: var(--text-muted);
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    white-space: nowrap;
+}
+
+.sync-status .next-sync {
+    font-family: var(--mono);
+    font-variant-numeric: tabular-nums;
+    font-weight: 700;
+    font-size: 0.85rem;
+    letter-spacing: 0.02em;
+    color: var(--accent);
+    text-transform: none;
+}
+
+.sync-status .next-sync::before {
+    content: "\25b8 ";
+}