/* ═══════════════════════════════════════════════════════════════
   COLOR PICKER (HSV) - matches C++ colorpicker.cpp exactly
   ═══════════════════════════════════════════════════════════════ */
#cp-popup {
  position: fixed;
  width: 204px; /* 180 + 12*2 */
  background: var(--bc);
  border-radius: 10px;
  z-index: 1000;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-sizing: border-box;
  user-select: none;
}
#cp-popup::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 30px;
  background: var(--bp);
  border-radius: 10px 10px 0 0;
  z-index: -1;
}
#cp-popup::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: 10px;
  background: rgba(255,255,255,0.018);
  pointer-events: none;
  z-index: -1;
}

.cp-sv-area {
  width: 180px;
  height: 180px;
  position: relative;
  border-radius: 4px;
  cursor: crosshair;
  background-color: #ff0000; /* updated by JS */
  background-image: 
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, transparent);
  margin-bottom: 8px;
}
.cp-sv-cursor {
  position: absolute;
  width: 13px; height: 13px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.3);
  z-index: 2;
}
.cp-sv-cursor-inner {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
}

.cp-hue-area {
  width: 180px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  position: relative;
  cursor: ew-resize;
  margin-bottom: 8px;
}
.cp-hue-cursor {
  position: absolute;
  width: 13px; height: 13px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.4);
  z-index: 2;
}
.cp-hue-cursor-inner {
  position: absolute;
  inset: 1px;
  border-radius: 50%;
}

.cp-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  height: 16px;
  align-items: center;
}
.cp-preset-color {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1px solid rgba(80,83,92,1);
  cursor: pointer;
  box-sizing: border-box;
}
.cp-preset-color:hover {
  border-color: var(--ac);
}
.cp-preset-add {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #0d1018;
  border: 1px solid #2a3346;
  position: relative;
  cursor: pointer;
}
.cp-preset-add::before, .cp-preset-add::after {
  content: ''; position: absolute; background: #667089;
}
.cp-preset-add::before { top: 7px; left: 4px; right: 4px; height: 1.5px; }
.cp-preset-add::after { left: 7px; top: 4px; bottom: 4px; width: 1.5px; }
.cp-preset-add:hover { background: #1a2231; border-color: var(--ac); }
.cp-preset-add:hover::before, .cp-preset-add:hover::after { background: var(--ac); }

.cp-alpha-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}
.cp-alpha-label {
  font-family: var(--fb);
  font-size: 12px;
  color: #7a8296;
  width: 34px;
}
.cp-alpha-area {
  flex: 1;
  height: 6px;
  background: #172233;
  border-radius: 3px;
  position: relative;
  cursor: ew-resize;
}
.cp-alpha-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--ac);
  border-radius: 3px;
}
.cp-alpha-cursor {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #0d1018;
  border: 1.2px solid var(--ac);
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cp-buttons {
  display: flex;
  gap: 8px;
}
.cp-btn {
  flex: 1;
  height: 26px;
  background: #111520;
  border: 1px solid #2a3346;
  border-radius: 5px;
  color: #7a8296;
  font-family: var(--fb);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s;
}
.cp-btn:hover {
  background: rgba(78,201,123,0.16);
  border-color: var(--ac);
  color: var(--ac);
}

/* Delete Preset Context Menu */
#cp-ctx {
  position: fixed;
  width: 90px;
  height: 28px;
  background: var(--bc);
  border-radius: 6px;
  z-index: 1010;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ac);
  font-family: var(--fm);
  font-size: 12px;
  transition: background .1s;
}
#cp-ctx::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 8px;
  background: var(--bp);
  border-radius: 6px 6px 0 0;
  z-index: -1;
}
#cp-ctx:hover { background: rgba(78,201,123,0.12); }