src/lib/components/BranchPanel.svelte

@@ -695,7 +695,7 @@
       <div class="bp-scroll" bind:this={scrollElement} role="tree" aria-label={t("branches.listLabel")}>
         <div class="bp-group">
           <button
-            class="bp-group-head"
+            class="bp-group-head local"
             type="button"
             onclick={() => { if (!filtering) localOpen = !localOpen; }}
             aria-expanded={showLocal}
@@ -717,7 +717,7 @@
 
         <div class="bp-group">
           <button
-            class="bp-group-head"
+            class="bp-group-head remote"
             type="button"
             onclick={() => { if (!filtering) remoteOpen = !remoteOpen; }}
             aria-expanded={showRemote}
@@ -932,7 +932,8 @@
     border: 0;
     border-bottom: 1px solid var(--color-border-subtle);
     border-radius: 0;
-    background: var(--color-surface);
+    background: color-mix(in srgb, var(--group-accent) 7%, var(--color-surface));
+    box-shadow: inset 2px 0 color-mix(in srgb, var(--group-accent) 55%, transparent);
     backdrop-filter: blur(12px);
     color: var(--color-ink-faint);
     font-size: 10px;
@@ -941,7 +942,10 @@
     text-align: left;
     text-transform: uppercase;
   }
-  .bp-group-head:hover:not(:disabled) { color: var(--color-ink-muted); background: var(--color-surface); }
+  .bp-group-head.local { --group-accent: var(--color-info); }
+  .bp-group-head.remote { --group-accent: var(--color-accent); }
+  .bp-group-head { color: color-mix(in srgb, var(--group-accent) 65%, var(--color-ink-muted)); }
+  .bp-group-head:hover:not(:disabled) { color: var(--group-accent); background: color-mix(in srgb, var(--group-accent) 12%, var(--color-surface)); }
   .bp-group-count {
     color: var(--color-ink-faint);
     font-size: 10px;