Style nav links as buttons across all three pages

Replace plain text/opacity links with bordered pill buttons that fill
with accent color on hover — consistent across main app, conditions,
and dashboard headers.

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

app/public/conditions.html

@@ -74,15 +74,23 @@ html, body {
   display: inline-flex;
   align-items: center;
   gap: 0.2rem;
-  font-size: 0.8rem;
+  font-size: 0.78rem;
   font-weight: 600;
   letter-spacing: 0.04em;
-  color: var(--accent);
+  color: var(--muted);
   text-decoration: none;
   white-space: nowrap;
-  transition: opacity .15s;
+  padding: 0.32rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  transition: background .15s, border-color .15s, color .15s;
+}
+.hdr-back:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
 }
-.hdr-back:hover { opacity: .75; }
 .hdr-sep {
   color: var(--border);
   font-size: 0.8rem;
@@ -134,13 +142,20 @@ html, body {
 .hdr-dash-link {
   font-size: 0.78rem;
   font-weight: 600;
-  color: var(--accent);
+  color: var(--muted);
   text-decoration: none;
   white-space: nowrap;
-  opacity: .85;
+  padding: 0.32rem 0.75rem;
-  transition: opacity .15s;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  transition: background .15s, border-color .15s, color .15s;
+}
+.hdr-dash-link:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
 }
-.hdr-dash-link:hover { opacity: 1; }
 
 /* ── Hero ────────────────────────────────────────────────── */
 .hero {

app/public/dashboard.html

@@ -29,7 +29,22 @@ a { color: var(--cool); text-decoration: none; }
 .header .meta { font-size: 0.8rem; color: var(--ink-light); }
 .header-right { display: flex; align-items: center; gap: 1rem; font-size: 0.85rem; }
 .station-name { color: var(--cool); font-weight: 600; }
-.logout { color: var(--accent); }
+.logout {
+  color: var(--ink-light);
+  text-decoration: none;
+  font-size: 0.78rem;
+  font-weight: 600;
+  padding: 0.32rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: transparent;
+  transition: background .15s, border-color .15s, color .15s;
+}
+.logout:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+}
 
 /* ── Wrapper ── */
 .page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

app/public/style.css

@@ -117,17 +117,21 @@ a:hover { text-decoration: underline; }
 .station-link {
   font-size: 0.78rem;
   font-weight: 600;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--card-sub);
   text-decoration: none;
-  opacity: .85;
+  padding: 0.35rem 0.85rem;
-  padding: 0.2rem 0.5rem;
   border: 1px solid var(--border);
-  border-radius: 5px;
+  border-radius: 8px;
-  transition: opacity .15s, background .15s;
+  background: transparent;
+  transition: background .15s, border-color .15s, color .15s;
+}
+.station-link:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
 }
-.station-link:hover { opacity: 1; background: var(--card-bg-soft); }
 
 .settings-nav-links {
   display: flex;