/* Custom HSV color picker — same picker on desktop and Android.
   Android's native <input type="color"> opens a full-screen system HSV dialog
   that does not match the desktop experience; this overlay replaces it. */
.harf-color-picker {
  position: fixed;
  z-index: 3000;
  width: 264px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px;
  background: #1b1c18;
  box-shadow: 0 20px 70px rgba(0,0,0,.65);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.harf-color-picker[hidden] { display: none; }
.harf-cp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.harf-cp-title { font-size: 10px; letter-spacing: .14em; color: #9e9c92; text-transform: uppercase; }
.harf-cp-close { background: none; border: none; color: #9e9c92; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 3px; }
.harf-cp-close:hover { color: #fff; }
.harf-cp-sv { display: block; width: 100%; height: 168px; border-radius: 8px; cursor: crosshair; touch-action: none; }
.harf-cp-hue { display: block; width: 100%; height: 18px; margin-top: 10px; border-radius: 8px; cursor: ew-resize; touch-action: none; }
.harf-cp-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.harf-cp-hex { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 7px; background: #141512; color: #eee; }
.harf-cp-hex span { color: #9e9c92; font-size: 13px; }
.harf-cp-hex input { width: 100%; min-width: 0; background: none; border: none; outline: none; color: #eee; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; }
.harf-cp-done { padding: 8px 14px; border: 1px solid rgba(200,169,106,.45); border-radius: 7px; background: #29251b; color: #dfc78e; font-size: 12px; cursor: pointer; }
.harf-cp-done:active { background: #3a3223; }