diff --git a/app/public/dashboard.html b/app/public/dashboard.html
index fdf1104..dcc61fd 100644
--- a/app/public/dashboard.html
+++ b/app/public/dashboard.html
@@ -67,10 +67,54 @@ a { color: var(--cool); text-decoration: none; }
 /* ── Range selector ── */
 .range-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
 .range-bar span { font-size: 0.82rem; color: var(--ink-light); margin-right: 0.25rem; }
-.range-btn { padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 0.82rem; cursor: pointer; transition: background 0.15s; }
-.range-btn.active, .range-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
-.refresh-btn { margin-left: auto; padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--ink-light); font-family: var(--mono); font-size: 0.82rem; cursor: pointer; }
-.refresh-btn:hover { border-color: var(--cool); color: var(--cool); }
+.range-btn {
+  padding: 0.3rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: color-mix(in srgb, white 5%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  cursor: pointer;
+  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);
+}
+.range-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
+.range-btn:hover {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #fff;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
+}
+.range-btn:active { transform: scale(0.95); box-shadow: none; }
+.refresh-btn {
+  margin-left: auto;
+  padding: 0.3rem 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: color-mix(in srgb, white 5%, transparent);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  color: var(--ink-light);
+  font-family: var(--mono);
+  font-size: 0.82rem;
+  cursor: pointer;
+  transition: 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);
+}
+.refresh-btn:hover {
+  border-color: var(--cool);
+  color: var(--cool);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cool) 20%, transparent);
+}
+.refresh-btn:active { transform: scale(0.95); box-shadow: none; }
 
 /* ── Chart grid ── */
 .charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@@ -105,8 +149,25 @@ a { color: var(--cool); text-decoration: none; }
 .settings-body input { width: 100%; padding: 0.5rem 0.75rem; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font-size: 0.9rem; font-family: var(--mono); }
 .settings-body input:focus { outline: 2px solid var(--accent); }
 .settings-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
-.settings-body button { padding: 0.45rem 1.2rem; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-family: var(--mono); font-size: 0.9rem; cursor: pointer; font-weight: 600; }
-.settings-body button:hover { opacity: 0.88; }
+.settings-body button {
+  padding: 0.45rem 1.2rem;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-family: var(--mono);
+  font-size: 0.9rem;
+  cursor: pointer;
+  font-weight: 600;
+  transition: opacity .18s cubic-bezier(.2,0,0,1),
+              box-shadow .18s cubic-bezier(.2,0,0,1),
+              transform .1s cubic-bezier(.2,0,0,1);
+}
+.settings-body button:hover {
+  opacity: 0.88;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
+}
+.settings-body button:active { transform: scale(0.95); box-shadow: none; }
 .save-msg { font-size: 0.85rem; color: var(--cool); }
 .save-msg.err { color: var(--accent); }
 .keys-status { font-size: 0.85rem; margin-bottom: 0.25rem; }