.color-tabs{margin:12px 0 22px}
.color-grid,.color-spectrum{width:100%;aspect-ratio:1.2;height:auto}
.color-grid{display:grid;grid-template-columns:repeat(12,1fr);border-radius:9px;overflow:hidden}
.color-grid button{padding:0;border:0;min-width:0;position:relative}
.color-grid button.selected:after{content:'';position:absolute;inset:1px;border:2px solid #fff;border-radius:3px;box-shadow:0 0 1px #000}
.color-opacity{margin-top:22px}
.color-opacity>label{display:block;text-transform:uppercase;color:#b0b0b6;margin-bottom:12px;font-size:13px;font-weight:600;letter-spacing:.4px}
.color-opacity>div{display:flex;align-items:center;gap:15px}
.color-opacity input{--selected-color:#fff;background:linear-gradient(to right,transparent,var(--selected-color)),repeating-conic-gradient(#aaa 0 25%,#333 0 50%) 0/18px 18px;height:28px;margin:0;border:0;border-radius:20px;min-width:0;flex:1}
.color-opacity output{width:65px;padding:9px 2px;text-align:center;background:#1c1c20;border-radius:10px;font-size:16px}
.color-picker input[type=range]::-webkit-slider-thumb{width:30px;height:30px;border:3px solid #fff;background:transparent;box-shadow:0 0 2px #000;border-radius:50%}
.color-picker input[type=range]::-moz-range-thumb{width:25px;height:25px;border:3px solid #fff;background:transparent;border-radius:50%}
.color-saved{display:flex;align-items:flex-start;gap:18px;padding-top:22px;margin-top:22px;border-top:1px solid #ffffff18}
.color-current{position:relative;width:64px;height:64px;min-width:0;border:0;border-radius:12px;flex-shrink:0;padding:0;overflow:hidden;background:repeating-conic-gradient(#aaa 0 25%,#333 0 50%) 0/10px 10px;display:grid;place-items:center}
.color-current-swatch{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.color-current svg{position:relative;width:28px;height:28px;pointer-events:none;filter:drop-shadow(0 0 1px #0008)}
.color-swatches{display:flex;flex-wrap:wrap;gap:8px;flex:1;min-width:0}
.saved-color{width:30px;height:30px;border-radius:7px;padding:0;overflow:hidden;background:repeating-conic-gradient(#aaa 0 25%,#333 0 50%) 0/10px 10px}
.saved-color span{display:block;width:100%;height:100%}
.color-spectrum{position:relative;border-radius:10px;touch-action:none}
.color-spectrum canvas{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:10px;cursor:crosshair;touch-action:none}
.spectrum-cursor{position:absolute;width:26px;height:26px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 2px #000;transform:translate(-50%,-50%);pointer-events:none}
.color-sampling .canvas-wrap{cursor:crosshair}
.color-sampler-loupe{position:fixed;z-index:90;width:112px;height:112px;box-sizing:border-box;border:8px solid #fff;border-radius:50%;background:#000;overflow:hidden;pointer-events:none;box-shadow:0 2px 4px #0006,0 8px 24px #0005}
.color-sampler-loupe canvas{display:block;width:100%;height:100%;border-radius:50%;outline:1px solid #fffc;outline-offset:-1px;image-rendering:pixelated}
.color-sampler-focus{position:absolute;left:50%;top:50%;width:12px;height:12px;transform:translate(-50%,-50%);border:2px solid #fff;box-shadow:0 0 0 1px #0009,inset 0 0 0 1px #0009}
.color-sampler-point{position:fixed;z-index:89;width:11px;height:11px;transform:translate(-50%,-50%);border:1px solid #fff;box-shadow:0 0 0 1px #0008;pointer-events:none}

.color-grid button:focus-visible{outline-offset:-3px;z-index:1}