fix(ags-v3): audit fixes — portable brain path, reactive volume, SCSS dedup

- brain.ts: BRAIN_ROOT résolu via $BRAIN_ROOT env / ~/.config/brain-path / fallback ~/Dev/Brain
- Volume.tsx: bindings volume + mute séparés et réactifs
- style.scss: importe _bar.scss et _heartbeat.scss via @use, supprime 199 lignes dupliquées

ags-v3/styles/_bar.scss

@@ -1,7 +1,6 @@
 @use "palette" as *;
 
 // Layer 1 — Ghost bar (hover reveal)
-// GTK CSS alpha() must be unquoted strings to pass through SCSS compiler
 
 window.Bar {
   background: transparent;
@@ -24,10 +23,18 @@ window.Bar {
   .module {
     padding: 0 8px;
     color: $text;
+  }
 
-    &:hover {
-      color: $lilac;
-    }
+  .prompt-name {
+    color: $magenta;
+    font-size: 14px;
+    padding: 0 0 0 10px;
+  }
+
+  .prompt-cursor {
+    color: $lilac;
+    font-size: 14px;
+    font-weight: 900;
   }
 
   .separator {
@@ -44,8 +51,6 @@ window.Bar {
     font-size: 14px;
     letter-spacing: 0.04em;
     padding: 0 10px;
-
-    &:hover { color: $lilac; }
   }
 
   .date {
@@ -55,7 +60,7 @@ window.Bar {
     padding: 0 10px 0 2px;
   }
 
-  // ── system ──
+  // ── system stats ──
   .cpu { color: $lavande; }
   .ram { color: $magenta; }
   .temp {
@@ -73,39 +78,93 @@ window.Bar {
   .network {
     color: $lavande;
     font-size: 12px;
+    padding: 0 8px;
     &.disconnected { color: $danger; }
   }
 
   // ── volume ──
-  .volume {
-    color: $magenta;
-    &.muted { color: rgba(255, 77, 166, 0.30); }
+  button.volume,
+  button.muted {
+    background: transparent;
+    border: none;
+    padding: 0 8px;
+    min-width: 0;
+    min-height: 0;
+
+    label { color: $magenta; }
+    &.muted label { color: rgba(255, 77, 166, 0.30); }
+    &:hover label { color: $lilac; }
   }
 
   // ── battery ──
   .battery {
     color: $magenta;
+    padding: 0 8px;
     &.charging { color: $mitsuri; }
     &.low { color: $danger; }
     &.warning { color: $champagne; }
   }
 
   // ── media ──
-  .media {
-    color: $lilac;
-    font-size: 12px;
-    font-weight: normal;
-    padding: 0 10px;
+  .media-module {
+    padding: 0 4px;
+  }
 
-    &.paused {
+  .media {
+    padding: 0 4px;
+
+    &.paused .media-text {
       color: rgba(201, 160, 255, 0.50);  // $lilac @ 0.50
       font-style: italic;
     }
   }
 
+  .media-text {
+    color: $lilac;
+    font-size: 12px;
+    font-weight: normal;
+    padding: 0 6px;
+  }
+
+  .media-prev,
+  .media-play,
+  .media-next {
+    background: transparent;
+    border: none;
+    padding: 0 3px;
+    min-width: 0;
+    min-height: 0;
+
+    label { color: $lilac; font-size: 13px; }
+    &:hover label { color: $magenta; }
+  }
+
   // ── systray ──
   .systray {
-    padding: 0 6px;
+    padding: 0 4px;
+  }
+
+  .systray-item {
+    background: transparent;
+    border: none;
+    padding: 0 3px;
+    min-width: 0;
+    min-height: 0;
+
+    &:hover {
+      background: rgba(201, 160, 255, 0.12);
+      border-radius: $radius-sm;
+    }
+  }
+
+  // ── hover effects ──
+  .module:hover,
+  .clock:hover,
+  .cpu:hover,
+  .ram:hover,
+  .network:hover,
+  .battery:hover {
+    color: $lilac;
   }
 
   // ── workspaces ──