refactor: add color picker styles and area color dot to enhance UI

client/src/components/MiningAreasPanel.css

@@ -446,3 +446,62 @@
     text-align: left;
   }
 }
+
+/* Color picker row */
+.color-picker-row {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+
+.color-input {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 2px solid #1a1a1a;
+  background: none;
+  cursor: pointer;
+  border-radius: 0;
+}
+
+.color-input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.color-input::-webkit-color-swatch {
+  border: none;
+}
+
+.color-swatch {
+  width: 24px;
+  height: 24px;
+  border: 2px solid #1a1a1a;
+  cursor: pointer;
+  padding: 0;
+  transition: transform 0.1s;
+}
+
+.color-swatch:hover {
+  transform: scale(1.2);
+}
+
+.color-swatch.active {
+  border-color: #ffff55;
+  box-shadow: 0 0 4px #ffff55;
+  transform: scale(1.15);
+}
+
+/* Color dot in area card */
+.area-title-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.area-color-dot {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #1a1a1a;
+  flex-shrink: 0;
+}