Add press effect, glow, arrow slide, easing, and backdrop blur to nav buttons

- :active scale(0.95) press feel on all nav buttons
- box-shadow glow ring on hover (accent @ 20% opacity)
- cubic-bezier(.2,0,0,1) iOS-style snap easing on all transitions
- backdrop-filter: blur(10px) frosted glass base on all buttons
- Dashboard → arrow wraps in <span class="arr"> and slides 2px right on hover

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

app/public/conditions.html

@@ -83,14 +83,22 @@ html, body {
   padding: 0.32rem 0.75rem;
   border: 1px solid var(--border);
   border-radius: 8px;
-  background: transparent;
+  background: color-mix(in srgb, white 5%, transparent);
-  transition: background .15s, border-color .15s, color .15s;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: background .18s cubic-bezier(.2,0,0,1),
+              border-color .18s cubic-bezier(.2,0,0,1),
+              color .18s cubic-bezier(.2,0,0,1),
+              box-shadow .18s cubic-bezier(.2,0,0,1),
+              transform .1s cubic-bezier(.2,0,0,1);
 }
 .hdr-back:hover {
   background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
   color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
 }
+.hdr-back:active { transform: scale(0.95); box-shadow: none; }
 .hdr-sep {
   color: var(--border);
   font-size: 0.8rem;
@@ -148,14 +156,27 @@ html, body {
   padding: 0.32rem 0.75rem;
   border: 1px solid var(--border);
   border-radius: 8px;
-  background: transparent;
+  background: color-mix(in srgb, white 5%, transparent);
-  transition: background .15s, border-color .15s, color .15s;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: background .18s cubic-bezier(.2,0,0,1),
+              border-color .18s cubic-bezier(.2,0,0,1),
+              color .18s cubic-bezier(.2,0,0,1),
+              box-shadow .18s cubic-bezier(.2,0,0,1),
+              transform .1s cubic-bezier(.2,0,0,1);
 }
 .hdr-dash-link:hover {
   background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
   color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
 }
+.hdr-dash-link:active { transform: scale(0.95); box-shadow: none; }
+.hdr-dash-link .arr {
+  display: inline-block;
+  transition: transform .18s cubic-bezier(.2,0,0,1);
+}
+.hdr-dash-link:hover .arr { transform: translateX(2px); }
 
 /* ── Hero ────────────────────────────────────────────────── */
 .hero {
@@ -372,7 +393,7 @@ canvas { display: block; }
   </div>
   <div class="hdr-live"><span class="live-dot"></span>Live</div>
   <div class="hdr-right">
-    <a href="/dashboard" class="hdr-dash-link">Dashboard →</a>
+    <a href="/dashboard" class="hdr-dash-link">Dashboard <span class="arr">→</span></a>
     <div class="hdr-time" id="hdrTime"></div>
   </div>
 </header>

app/public/dashboard.html

@@ -37,14 +37,22 @@ a { color: var(--cool); text-decoration: none; }
   padding: 0.32rem 0.75rem;
   border: 1px solid var(--border);
   border-radius: 8px;
-  background: transparent;
+  background: color-mix(in srgb, white 5%, transparent);
-  transition: background .15s, border-color .15s, color .15s;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: background .18s cubic-bezier(.2,0,0,1),
+              border-color .18s cubic-bezier(.2,0,0,1),
+              color .18s cubic-bezier(.2,0,0,1),
+              box-shadow .18s cubic-bezier(.2,0,0,1),
+              transform .1s cubic-bezier(.2,0,0,1);
 }
 .logout:hover {
   background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
   color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
 }
+.logout:active { transform: scale(0.95); box-shadow: none; }
 
 /* ── Wrapper ── */
 .page { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }

app/public/style.css

@@ -124,14 +124,22 @@ a:hover { text-decoration: underline; }
   padding: 0.35rem 0.85rem;
   border: 1px solid var(--border);
   border-radius: 8px;
-  background: transparent;
+  background: color-mix(in srgb, white 5%, transparent);
-  transition: background .15s, border-color .15s, color .15s;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  transition: background .18s cubic-bezier(.2,0,0,1),
+              border-color .18s cubic-bezier(.2,0,0,1),
+              color .18s cubic-bezier(.2,0,0,1),
+              box-shadow .18s cubic-bezier(.2,0,0,1),
+              transform .1s cubic-bezier(.2,0,0,1);
 }
 .station-link:hover {
   background: color-mix(in srgb, var(--accent) 18%, transparent);
   border-color: var(--accent);
   color: var(--accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
 }
+.station-link:active { transform: scale(0.95); box-shadow: none; }
 
 .settings-nav-links {
   display: flex;