--- a/src/styles.css
+++ b/src/styles.css
@@ -55,17 +55,19 @@
 }
 
 .legend button {
-  border: 1px solid var(--border);
+  border: 2px solid var(--border);
   background: #fff;
   color: var(--text);
   border-radius: 999px;
-  padding: 4px 10px;
+  padding: 4px 12px;
   cursor: pointer;
   font-size: 0.85rem;
+  font-weight: 500;
+  transition: opacity 0.15s, background 0.15s, color 0.15s;
 }
 
-.legend button.is-muted {
-  opacity: 0.45;
+.legend button:hover {
+  opacity: 0.8;
 }
 
 .chart-container {
@@ -86,13 +88,29 @@
   background: var(--tooltip-bg);
   color: var(--tooltip-text);
   border-radius: 8px;
-  padding: 8px 10px;
-  font-size: 0.8rem;
-  line-height: 1.3;
+  padding: 8px 12px;
+  font-size: 0.85rem;
+  line-height: 1.5;
   visibility: hidden;
-  transform: translate(-50%, calc(-100% - 8px));
+  opacity: 0;
   white-space: nowrap;
   z-index: 10;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: opacity 0.15s;
+}
+
+.tooltip.visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.tooltip .swatch {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 2px;
+  margin-right: 4px;
+  vertical-align: middle;
 }
 
 .axis-label {