.image-color-picker{background:#fff;border-radius:1rem;padding:2rem;box-shadow:var(--shadow);word-break:break-all;overflow:hidden}.image-color-picker .canvas-wrapper{width:100%;height:30rem;max-width:100%;overflow:hidden;position:relative;cursor:crosshair}.image-color-picker .canvas-wrapper canvas{display:block;transform-origin:0 0}.image-color-panel{padding:1rem;background:var(--bg-light);border-radius:.5rem}.image-color-panel .color-view{width:100%;height:7.5rem;border-radius:.375rem;margin-bottom:.75rem}.image-color-panel .color-item{margin:1rem 0;display:flex;align-items:center;gap:.5rem}.image-color-panel .color-item label{display:block;margin-bottom:.25rem;font-size:.8rem;color:#aaa;width:3rem}.image-color-panel .color-item-input{flex:1}.image-color-panel .color-item input{width:100%;background:#fff;color:var(--text-light);border:.0625rem solid var(--primary-color);padding:.375rem .5rem;font-size:.8rem;cursor:pointer}.image-color-panel .color-item input:focus{outline:0!important}.image-color-panel .copy-btn{white-space:nowrap;padding:.375rem .625rem;background:var(--primary-color);color:#fff;border:0;font-size:.75rem;cursor:pointer}.image-color-panel .color-tip{margin-top:1rem}.image-color-panel .color-tip p{color:#999;font-size:.75rem;margin-bottom:.5rem;display:list-item;list-style-type:disc;margin-left:1rem}.image-color-panel .color-tip p:last-child{margin-bottom:0}.image-color-panel .color-reset-btn{padding:.5rem 1rem;background:var(--primary-color);color:#fff;text-align:center;font-size:.875rem;cursor:pointer;margin-top:1rem}