feat: graph header on gain panel

src/components/Button/Button.css

@@ -2,23 +2,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-
   box-sizing: border-box;
 
   min-height: var(--card-control-height);
-
   padding: 0 var(--space-4);
 
   border: var(--border-width) solid transparent;
   border-radius: var(--radius-sm);
 
   font-family: var(--font-ui);
-  font-size: var(--font-md);
+  font-size: 13px;
   font-weight: var(--font-weight-medium);
 
   cursor: pointer;
-
-  font-size: 13px;
 }
 
 .btn:disabled {
@@ -26,27 +22,49 @@
   cursor: not-allowed;
 }
 
+/* ------------------------------------------------------------------ */
+/* Variants                                                           */
+/* ------------------------------------------------------------------ */
+
 .btn-primary {
   background: var(--accent-brand);
   color: var(--bg-void);
 }
 
+/* Ghost + Toggle */
 .btn-ghost,
-.btn-toggle,
-.btn-outline {
+.btn-toggle {
   background: transparent;
   border-color: var(--border-hairline);
   color: var(--text-muted);
 }
 
+/* Outline */
+.btn-outline {
+  background: transparent;
+  border-color: var(--accent-brand);
+  color: #fff;
+}
+
+/* ------------------------------------------------------------------ */
+/* Hover                                                              */
+/* ------------------------------------------------------------------ */
+
 .btn-ghost:hover:not(:disabled),
-.btn-toggle:hover:not(:disabled),
-.btn-outline:hover:not(:disabled) {
+.btn-toggle:hover:not(:disabled) {
   background: var(--bg-raised);
   color: var(--text-primary);
 }
 
-/* Active toggle states */
+.btn-outline:hover:not(:disabled) {
+  border-color: var(--accent-brand);
+  color: var(--text-muted);
+}
+
+/* ------------------------------------------------------------------ */
+/* Active toggle states                                                */
+/* ------------------------------------------------------------------ */
+
 .btn-toggle.active-info {
   background: var(--accent-brand);
   border-color: var(--accent-brand);
@@ -65,7 +83,10 @@
   color: var(--bg-void);
 }
 
-/* Optional: active state hover */
+/* ------------------------------------------------------------------ */
+/* Active toggle hover                                                 */
+/* ------------------------------------------------------------------ */
+
 .btn-toggle.active-info:hover:not(:disabled) {
   background: var(--accent-brand);
   border-color: var(--accent-brand);