.cp-wrap{display:inline-block;flex-shrink:0}.cp-btn{width:32px;height:32px;border:1.5px solid rgba(0,0,0,.15);border-radius:7px;cursor:pointer;padding:0;transition:box-shadow .15s,transform .1s}.cp-btn:hover{box-shadow:0 0 0 3px #3b82f633;transform:scale(1.05)}.cp-popup{position:fixed;z-index:9999;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:14px;box-shadow:0 12px 40px #00000026,0 2px 8px #00000014;padding:12px;width:262px}.cp-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}.cp-swatch{aspect-ratio:1;border:1px solid rgba(0,0,0,.1);border-radius:4px;cursor:pointer;padding:0;transition:transform .1s,box-shadow .1s}.cp-swatch:hover{transform:scale(1.2);z-index:1;box-shadow:0 2px 6px #0003}.cp-swatch.selected{outline:2.5px solid #3B82F6;outline-offset:1px}.cp-section-label{display:flex;align-items:center;gap:8px;margin:10px 0 8px;font-size:10.5px;font-weight:600;color:#b0b8c4;letter-spacing:.06em;text-transform:uppercase}.cp-section-label:before,.cp-section-label:after{content:"";flex:1;height:1px;background:#efefef}.cp-canvas-wrap{display:flex;justify-content:center;margin:0;border-radius:8px;overflow:hidden}.cp-canvas{display:block;width:190px;height:190px;cursor:crosshair}.cp-bottom{display:flex;align-items:center;gap:8px;margin-top:10px}.cp-preview{display:block;width:30px;height:30px;border-radius:7px;border:1.5px solid rgba(0,0,0,.12);flex-shrink:0}.cp-hex-input{flex:1;border:1.5px solid #E5E7EB;border-radius:7px;padding:6px 10px;font-size:13px;font-family:SF Mono,Fira Mono,Consolas,monospace;outline:none;color:#374151;transition:border-color .15s;background:#f9fafb}.cp-hex-input:focus{border-color:#3b82f6;background:#fff}.cp-hex-input.invalid{border-color:#f87171;background:#fff5f5}