/* The shared picker opens from the same + control as the native picker. */
#eyedropper-preview { position:fixed; z-index:101; pointer-events:none; display:flex; padding:5px; border:1px solid #a5cee5; border-radius:9px; background:#fafdff; box-shadow:0 3px 12px #183b6833; }
#eyedropper-preview[hidden] { display:none; }
.eyedropper-preview-swatch { width:28px; height:28px; border:2px solid white; border-radius:6px; box-shadow:0 0 0 1px #b5c8df; background:var(--preview-color); }
.palette-row { flex-wrap:wrap; }
.palette-row .color-tools { width:100%; min-width:0; }
.palette-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.palette-heading .control-caption { margin:0; }
.current-color { display:flex; align-items:center; gap:6px; flex:none; font-size:10px; color:#526d84; }
.current-color-swatch { width:28px; height:16px; border:2px solid white; border-radius:5px; box-shadow:0 0 0 1px #b5c8df; background:var(--current-color,#24334b); }
.color-picker { --chosen-color:#24334b; --hue-color:#0066ff; }
.common-color-picker { display:flex; flex-direction:column; align-items:center; gap:8px; }
#color-popover { position:fixed; z-index:100; width:196px; max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); overflow:auto; padding:10px; border:1px solid #a5cee5; border-radius:12px; background:#fafdff; box-shadow:0 5px 20px #183b6833; color:var(--ink); }
#color-popover:focus { outline:none; }
.color-popover-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.color-popover-head h2 { margin:0; font-size:13px; }
.close-color-picker { width:28px; height:28px; padding:0; border-radius:50%; font-size:20px; color:#526d84; background:#eaf5fc; }
.color-wheel { position:relative; width:128px; height:128px; flex:none; }
.hue-ring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(from 90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00); touch-action:none; cursor:crosshair; }
.hue-ring::before { content:""; position:absolute; inset:14%; border-radius:50%; background:#f7fbff; box-shadow:inset 0 0 0 1px #172d4a20; }
.color-square { position:absolute; width:48%; height:48%; top:26%; left:26%; background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent),var(--hue-color); cursor:crosshair; touch-action:none; }
.hue-marker,.sv-marker { position:absolute; width:12px; height:12px; border:2px solid white; border-radius:50%; box-shadow:0 0 0 1px #24334b,0 1px 3px #0008; transform:translate(-50%,-50%); pointer-events:none; }
.color-adjustments { width:100%; min-width:0; }
.color-readout { display:flex; align-items:center; justify-content:center; gap:8px; }
.selected-color { width:22px; height:22px; flex:none; border:2px solid white; border-radius:6px; box-shadow:0 0 0 1px #b5c8df; background:var(--chosen-color); }
.color-readout label { min-width:0; font-size:10px; color:#526d84; }
#color-hex { display:block; width:100%; min-width:0; max-width:105px; padding:3px 4px; border:1px solid #b5c8df; border-radius:5px; background:white; color:#24334b; font:12px monospace; }
#color-hex[aria-invalid=true] { border-color:#b5304c; }
.color-adjustments input:focus-visible,.hue-ring:focus-visible,.color-square:focus-visible { outline:2px solid #008fda; outline-offset:3px; }
.color-picker[aria-disabled=true] { opacity:.6; }
.color-picker[aria-disabled=true] :is(.hue-ring,.color-square) { cursor:default; pointer-events:none; }
.palette-row .color-options { justify-content:flex-start; }
.palette-row .palette { flex:1; flex-wrap:wrap; justify-content:space-between; gap:5px; }
.color-options > .custom-color { flex:none; }
#open-color-picker { padding:0; line-height:1; }
#open-color-picker svg { display:block; width:18px; height:18px; fill:none; stroke:#638caf; stroke-width:1.4; stroke-linecap:butt; pointer-events:none; }
.palette-row .width-label { width:100%; max-width:none; flex:auto; border-left:0; border-top:1px dashed #d6e3ef; padding:8px 0 0; display:flex; align-items:center; gap:12px; }
.palette-row .width-label .control-caption { margin:0; white-space:nowrap; }
.palette-row .width-control { width:100%; }
.opacity-label { display:flex; align-items:center; gap:6px; width:100%; margin-top:8px; border-top:1px solid #d6e3ef; padding-top:6px; }
.opacity-label .control-caption { margin:0; white-space:nowrap; }
.opacity-control { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.opacity-control input { flex:1; min-width:0; height:25px; margin:0; accent-color:#139acb; }
.opacity-control output { width:36px; text-align:right; font-size:11px; }
.picker-setting-note { font-size:12px; }
.native-color-picker:focus-within { outline:2px solid #008fda; outline-offset:2px; }
.color-picker .native-color-picker { width:100%; height:40px; border-radius:8px; }
.color-picker .native-color-picker span { font-size:13px; }
.color-picker-setting { display:block; margin:18px 0; font-size:14px; font-weight:700; }
.color-picker-setting select { display:block; width:100%; margin-top:8px; padding:10px; border:1px solid #b5c8df; border-radius:8px; background:white; color:#24334b; font:inherit; }
@media (max-width:420px) {
  .color-readout label { font-size:9px; }
  #color-hex { font-size:11px; }
}
@media (max-width:360px) {
  .palette-row .palette { gap:4px; }
}