fix: minor UI adjustments

src/components/piano-roll/PianoRoll.css

@@ -610,9 +610,9 @@
   position: absolute;
   left: 0;
   right: 0;
-  background-color: rgba(123, 104, 238, 0.15);
-  border-top: 1px solid rgba(123, 104, 238, 0.3);
-  border-bottom: 1px solid rgba(123, 104, 238, 0.3);
+  background-color: rgba(135, 206, 250, 0.15);
+  border-top: 1px solid rgba(135, 206, 250, 0.3);
+  border-bottom: 1px solid rgba(135, 206, 250, 0.3);
   pointer-events: none;
   z-index: 1;
   transition: opacity 0.1s ease;
@@ -622,9 +622,9 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  background-color: rgba(123, 104, 238, 0.1);
-  border-left: 1px solid rgba(123, 104, 238, 0.25);
-  border-right: 1px solid rgba(123, 104, 238, 0.25);
+  background-color: rgba(135, 206, 250, 0.1);
+  border-left: 1px solid rgba(135, 206, 250, 0.25);
+  border-right: 1px solid rgba(135, 206, 250, 0.25);
   pointer-events: none;
   z-index: 1;
   transition: opacity 0.1s ease;

src/util/scaleUtil.test.ts

@@ -385,6 +385,8 @@ describe('scaleUtil', () => {
       const result = generatePianoGridBackground('ionian', 'C major');
       expect(result).toContain('linear-gradient');
       expect(typeof result).toBe('string');
+      expect(result).toContain('#282828');
+      expect(result).toContain('#303030');
     });
 
     it('should generate different backgrounds for different modes', () => {

src/util/scaleUtil.ts

@@ -320,19 +320,18 @@ export const generatePianoGridBackground = (
     const rowBottomMinusOne = `calc(var(--region-piano-key-height) * ${index + 1} - 1px)`;
     const rowBottom = `calc(var(--region-piano-key-height) * ${index + 1})`;
 
-    // For scale notes: highlight the full row with a semi-transparent blue background
-    // For non-scale notes: use transparent background with just the separator line
+    // Match the event list palette while preserving scale-aware row distinction.
     if (isInScale) {
       return `
-        rgba(90, 123, 154, 0.15) ${rowTop},
-        rgba(90, 123, 154, 0.15) ${rowBottomMinusOne},
+        #282828 ${rowTop},
+        #282828 ${rowBottomMinusOne},
         #3a3a3a ${rowBottomMinusOne},
         #3a3a3a ${rowBottom}
       `.trim();
     } else {
       return `
-        transparent ${rowTop},
-        transparent ${rowBottomMinusOne},
+        #303030 ${rowTop},
+        #303030 ${rowBottomMinusOne},
         #3a3a3a ${rowBottomMinusOne},
         #3a3a3a ${rowBottom}
       `.trim();