.sweats-color-picker{position:fixed;z-index:10000;width:252px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow:auto;box-sizing:border-box;padding:12px;border:1px solid #414147;border-radius:12px;background:#242426;color:#f7f7f8;box-shadow:0 18px 48px #0009;font:12px Arial,sans-serif}
.sweats-color-picker[hidden]{display:none}
.sweats-picker-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px}
.sweats-picker-close{border:0;background:transparent;color:#c8c8ce;font-size:20px;line-height:1;padding:0 4px;cursor:pointer}
.sweats-picker-close:hover{color:#fff}
.sweats-picker-square{position:relative;height:158px;border-radius:7px;background:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,hsl(var(--picker-hue),100%,50%));touch-action:none;cursor:crosshair}
.sweats-picker-thumb{position:absolute;width:12px;height:12px;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #171719;pointer-events:none}
.sweats-color-picker input.sweats-picker-hue{display:block;width:100%;height:15px;margin:12px 0;appearance:none;-webkit-appearance:none;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)!important;border:0;border-radius:99px;cursor:pointer}
.sweats-picker-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:3px solid #fff;border-radius:50%;background:#242426;box-shadow:0 0 0 1px #888;cursor:pointer}
.sweats-picker-color-row{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 7px;border:1px solid #505056;border-radius:7px;background:#303033;box-sizing:border-box}
.sweats-picker-swatch{width:25px;height:25px;flex:none;border:1px solid #777;border-radius:5px}
.sweats-color-picker input.sweats-picker-hex{flex:1;min-width:0;width:100%;height:27px;min-height:27px;padding:0;border:0;outline:0;background:transparent;color:#fff;font:700 12px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0;text-transform:uppercase}
.sweats-picker-eyedropper{flex:none;width:27px;height:27px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;font-size:23px;line-height:1;cursor:pointer}
.sweats-picker-eyedropper:hover{background:#ffffff22}
.sweats-picker-recent-wrap{margin-top:11px}
.sweats-picker-recent-wrap>span{display:block;margin-bottom:7px;color:#bfc0c6;font-size:10px;font-weight:700}
.sweats-picker-recent{display:flex;flex-wrap:wrap;gap:6px}
.sweats-picker-recent button{width:25px;height:25px;padding:0;border:1px solid #ffffff55;border-radius:6px;background:var(--recent-color);cursor:pointer}
.sweats-picker-recent button:hover{outline:2px solid currentColor;outline-offset:2px}
.sweats-picker-error{color:#ffb1bd;font-size:10px;margin:6px 0 0}
.sweats-color-picker.sweats-picker-light{border-color:#dce2e9;background:#fff;color:#172033;box-shadow:0 18px 48px #11182738}
.sweats-picker-light .sweats-picker-close{color:#58657a}
.sweats-picker-light .sweats-picker-close:hover{color:#172033}
.sweats-picker-light .sweats-picker-color-row{border-color:#d4dce5;background:#f8fafc}
.sweats-picker-light input.sweats-picker-hex{color:#172033}
.sweats-picker-light .sweats-picker-recent-wrap>span{color:#58657a}
.sweats-picker-light .sweats-picker-recent button{border-color:#0003}
.sweats-picker-light .sweats-picker-error{color:#b60025}