.color-picker-trigger{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:32px;padding:5px 9px;background:#fff;border:1px solid #dce6eb;border-radius:6px;font-size:10px;white-space:nowrap;color:#526b79;flex:none}
.color-picker-trigger>i{display:block;flex:none;width:19px;height:19px;border-radius:4px;border:1px solid #17394d22}
.color-picker-trigger>svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.5}
.color-picker-trigger:hover{border-color:#189ed0;background:#f5fbfe}
.metal-options{flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}
.metal-options .color-picker-trigger{margin-left:1px}
.color-swatches{flex-wrap:wrap}
.color-swatches .color-picker-trigger{width:auto;height:32px;border:1px solid #dce6eb;border-radius:6px;padding:5px 9px;box-shadow:none;background:#fff}
.color-picker-dialog{width:min(384px,94vw);max-height:94dvh;overflow:auto}
.color-picker-eyebrow{margin:0 0 4px;color:#80949f;font-size:10px;font-weight:500}
.color-picker-content{padding:20px 24px 18px}
.color-plane{position:relative;width:100%;height:216px;border-radius:8px;touch-action:none;cursor:crosshair;outline-offset:4px;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent)}
.color-plane-cursor{position:absolute;display:block;width:17px;height:17px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #12273588,0 1px 5px #0007;transform:translate(-50%,-50%);pointer-events:none}
.color-hue-label{display:flex;align-items:center;gap:12px;margin:19px 0 10px;font-size:11px;color:#6d8491}
input.color-hue[type=range]{height:12px;margin:0;border-radius:8px;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
input.color-hue[type=range]::-webkit-slider-thumb{width:17px;height:20px;border:2px solid #fff;border-radius:5px;background:transparent;box-shadow:0 0 0 1px #18344466}
input.color-hue[type=range]::-moz-range-thumb{width:13px;height:16px;border:2px solid #fff;border-radius:5px;background:transparent;box-shadow:0 0 0 1px #18344466}
.color-picker-hint{font-size:10px;line-height:1.7;color:#8096a2;margin:10px 0 16px}
.color-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:17px}
.color-preview{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:0;background:transparent;border:none;font-size:11px;color:#6c8592;min-width:0}
button.color-preview:hover{background:transparent;color:#189ed0}
.color-preview i{display:block;width:49px;height:35px;border:1px solid #1b38551a;border-radius:6px}
.picker-palette{display:flex;justify-content:space-between;gap:7px}
.picker-palette button{flex:none;width:28px;height:28px;border:2px solid #fff;box-shadow:0 0 0 1px #dbe5eb;border-radius:50%;padding:0}
.picker-palette button[aria-pressed=true]{box-shadow:0 0 0 2px #189ed0}
@media(max-height:650px){.color-plane{height:160px}.color-picker-content{padding-top:15px;padding-bottom:14px}.color-picker-dialog .dialog-heading{padding-top:13px;padding-bottom:13px}}