restyle scatter control: narrow input, green button, grouped border

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

popup/popup.css

@@ -445,26 +445,37 @@ button:hover {
   background-color: #ccc;
 }
 
-.scatter-count-input {
-  width: 48px;
-  padding: 8px 4px;
-  border: 1px solid #ccc;
+.scatter-control {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid #aaa;
   border-radius: 4px;
+  overflow: hidden;
+}
+
+.scatter-count-input {
+  width: 36px;
+  padding: 8px 2px;
+  border: none;
+  border-right: 1px solid #aaa;
   font-size: 14px;
   text-align: center;
+  outline: none;
+  box-sizing: border-box;
 }
 
 .scatter-btn {
-  background-color: #4285f4;
+  background-color: #388e3c;
   color: white;
   padding: 8px 12px;
-  border-radius: 4px;
+  border: none;
   font-size: 14px;
   font-weight: 500;
 }
 
 .scatter-btn:hover:not(:disabled) {
-  background-color: #3367d6;
+  background-color: #2e7d32;
+  cursor: pointer;
 }
 
 .scatter-btn:disabled {

popup/popup.html

@@ -383,13 +383,15 @@
           x-bind="addCurrentPageButton"
           x-text="addCurrentPageButtonText"
         ></button>
-        <input
-          class="scatter-count-input"
-          type="number"
-          min="2"
-          x-bind="scatterCountInput"
-        />
-        <button class="scatter-btn" x-bind="scatterButton">Scatter</button>
+        <div class="scatter-control">
+          <input
+            class="scatter-count-input"
+            type="number"
+            min="2"
+            x-bind="scatterCountInput"
+          />
+          <button class="scatter-btn" x-bind="scatterButton">Scatter</button>
+        </div>
       </div>
 
       <!-- Individual playlist view -->