.color-picker-workspace .color-picker-stage { cursor: crosshair; touch-action: none; }
.color-picker-workspace:not([data-ready]) .color-picker-stage { cursor: default; }
.color-picker-stage img { pointer-events: none; user-select: none; }
.color-picker-workspace .color-picker-sample { height: 74px; margin: 18px 0 14px; border: 2px solid #303039; border-radius: 6px; background: conic-gradient(#202026 25%, #111115 0 50%, #202026 0 75%, #111115 0) 0 0 / 16px 16px; overflow: hidden; }
.color-picker-sample > div { width: 100%; height: 100%; }
.color-picker-workspace .color-picker-field { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin: 7px 0; }
.color-picker-field label { color: #c4c2cb; }
.color-picker-workspace .color-picker-field input { width: 100%; min-width: 0; height: 36px; padding: 6px 8px; }
.tool-page .color-picker-workspace .color-picker-field button { min-height: 36px; padding: 6px 10px; }
.color-picker-field button:disabled { opacity: .46; cursor: default; }
.color-picker-position { display: flex; justify-content: space-between; margin: 14px 0; color: #bdbbc8; }
.color-magnifier { position: absolute; z-index: 3; width: 136px; height: 136px; overflow: hidden; border: 2px solid #aab8ff; border-radius: 6px; background: #08080b; box-shadow: 0 5px 18px #000b; pointer-events: none; }
.color-magnifier canvas { display: block; width: 132px; height: 132px; image-rendering: pixelated; background: conic-gradient(#292930 25%, #16161a 0 50%, #292930 0 75%, #16161a 0) 0 0 / 24px 24px; }
.color-magnifier span { position: absolute; top: 60px; left: 60px; width: 12px; height: 12px; border: 1px solid #fff; outline: 1px solid #000; }