.color-picker-wrapper{position:relative}.color-picker-label{color:#4b5563;margin-bottom:.25rem;font-size:.75rem;display:block}.color-picker-preview-container{align-items:center;gap:.5rem;display:flex}.color-picker-preview{cursor:pointer;border:2px solid #d1d5db;border-radius:.375rem;width:2.5rem;height:2.5rem;transition:border-color .2s}.color-picker-preview:hover{border-color:#9ca3af}.color-picker-hex-display{color:#6b7280;font-family:monospace;font-size:.75rem}.color-picker-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.color-picker-modal{background:#fff;border-radius:.5rem;width:320px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.color-picker-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:1rem;display:flex}.color-picker-header h3{color:#111827;margin:0;font-size:1rem;font-weight:600}.color-picker-close{cursor:pointer;color:#6b7280;background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;transition:background-color .2s,color .2s;display:flex}.color-picker-close:hover{color:#111827;background-color:#f3f4f6}.color-picker-content{flex-direction:column;gap:1rem;padding:1rem;display:flex}.color-picker-current{justify-content:center;display:flex}.color-picker-current-preview{border:2px solid #e5e7eb;border-radius:.375rem;width:100%;height:3rem}.color-picker-sv-picker{cursor:crosshair;border:1px solid #d1d5db;border-radius:.375rem;width:100%;height:150px;position:relative}.color-picker-sv-cursor{pointer-events:none;border:2px solid #fff;border-radius:50%;width:16px;height:16px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003}.color-picker-slider-group{flex-direction:column;gap:.5rem;display:flex}.color-picker-slider-group label{color:#4b5563;font-size:.75rem;font-weight:500}.color-picker-hue-slider{appearance:none;cursor:pointer;background:linear-gradient(90deg,red 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red 100%);border:1px solid #d1d5db;border-radius:5px;outline:none;width:100%;height:10px}.color-picker-hue-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #d1d5db;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.color-picker-hue-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #d1d5db;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.color-picker-alpha-slider-wrapper{background:repeating-conic-gradient(#ccc 0% 25%,#fff 0% 50%) 0/10px 10px;border-radius:5px;padding:1px;position:relative}.color-picker-alpha-slider{appearance:none;cursor:pointer;border:1px solid #d1d5db;border-radius:5px;outline:none;width:100%;height:10px}.color-picker-alpha-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #d1d5db;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.color-picker-alpha-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #d1d5db;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.color-picker-value-input{flex-direction:column;gap:.5rem;display:flex}.color-picker-value-header{justify-content:space-between;align-items:center;display:flex}.color-picker-value-header label{color:#4b5563;font-size:.75rem;font-weight:500}.color-picker-toggle{color:#fff;cursor:pointer;background:#3b82f6;border:none;border-radius:.375rem;padding:.25rem .75rem;font-size:.75rem;font-weight:500;transition:background-color .2s}.color-picker-toggle:hover{background:#2563eb}.color-picker-toggle:active{background:#1d4ed8}.color-picker-value-input input{border:1px solid #d1d5db;border-radius:.375rem;width:100%;padding:.5rem;font-family:monospace;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.color-picker-value-input input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.color-picker-palette-section{flex-direction:column;gap:.5rem;display:flex}.color-picker-palette-section>label{color:#4b5563;font-size:.75rem;font-weight:500}.color-picker-palette{grid-template-columns:repeat(7,1fr);gap:.5rem;display:grid}.color-picker-palette-item{aspect-ratio:1;cursor:pointer;background:0 0;border:2px solid #e5e7eb;border-radius:.25rem;width:100%;padding:0;transition:transform .2s,border-color .2s,box-shadow .2s}.color-picker-palette-item:hover{border-color:#9ca3af;transform:scale(1.1);box-shadow:0 2px 4px #0000001a}.color-picker-palette-item:active{transform:scale(.95)}
.gradient-picker-wrapper{position:relative}.gradient-picker-label{color:#4b5563;margin-bottom:.25rem;font-size:.75rem;display:block}.gradient-picker-preview-container{align-items:center;gap:.5rem;display:flex}.gradient-picker-preview{cursor:pointer;border:2px solid #d1d5db;border-radius:.375rem;width:2.5rem;height:2.5rem;transition:border-color .2s}.gradient-picker-preview:hover{border-color:#9ca3af}.gradient-picker-type-display{color:#6b7280;font-family:sans-serif;font-size:.75rem}.gradient-picker-overlay{z-index:1000;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.gradient-picker-modal{background:#fff;border-radius:.5rem;width:360px;max-width:90vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.gradient-picker-header{border-bottom:1px solid #e5e7eb;justify-content:space-between;align-items:center;padding:1rem;display:flex}.gradient-picker-header h3{color:#111827;margin:0;font-size:1rem;font-weight:600}.gradient-picker-close{cursor:pointer;color:#6b7280;background:0 0;border:none;border-radius:.25rem;justify-content:center;align-items:center;width:2rem;height:2rem;padding:0;font-size:1.5rem;transition:background-color .2s,color .2s;display:flex}.gradient-picker-close:hover{color:#111827;background-color:#f3f4f6}.gradient-picker-content{flex-direction:column;gap:1rem;padding:1rem;display:flex}.gradient-picker-current{justify-content:center;display:flex}.gradient-picker-current-preview{border:2px solid #e5e7eb;border-radius:.375rem;width:100%;height:4rem}.gradient-picker-type-selector{flex-direction:column;gap:.5rem;display:flex}.gradient-picker-type-selector label{color:#4b5563;font-size:.75rem;font-weight:500}.gradient-picker-type-buttons{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.gradient-picker-type-buttons button{cursor:pointer;color:#6b7280;background:#fff;border:2px solid #d1d5db;border-radius:.375rem;padding:.5rem;font-size:.875rem;font-weight:500;transition:all .2s}.gradient-picker-type-buttons button:hover{background:#f9fafb;border-color:#9ca3af}.gradient-picker-type-buttons button.active{color:#3b82f6;background:#eff6ff;border-color:#3b82f6}.gradient-picker-slider-group{flex-direction:column;gap:.5rem;display:flex}.gradient-picker-slider-group label{color:#4b5563;font-size:.75rem;font-weight:500}.gradient-picker-angle-slider{appearance:none;cursor:pointer;background:linear-gradient(90deg,#3b82f6 0%,#8b5cf6 25%,#ec4899 50%,#f59e0b 75%,#3b82f6 100%);border:1px solid #d1d5db;border-radius:5px;outline:none;width:100%;height:10px}.gradient-picker-angle-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #d1d5db;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.gradient-picker-angle-slider::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #d1d5db;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.gradient-picker-stops-section{flex-direction:column;gap:.75rem;display:flex}.gradient-picker-stops-header{justify-content:space-between;align-items:center;display:flex}.gradient-picker-stops-header label{color:#4b5563;font-size:.75rem;font-weight:500}.gradient-picker-add-stop{color:#fff;cursor:pointer;background:#10b981;border:none;border-radius:.375rem;padding:.375rem .75rem;font-size:.75rem;font-weight:500;transition:background-color .2s}.gradient-picker-add-stop:hover{background:#059669}.gradient-picker-stops-bar{cursor:pointer;border:2px solid #e5e7eb;border-radius:.375rem;width:100%;height:2rem;position:relative}.gradient-picker-stop-marker{cursor:pointer;background:#6b7280;border:2px solid #fff;border-radius:50%;width:16px;height:16px;margin-top:-8px;transition:transform .2s,box-shadow .2s;position:absolute;top:50%;transform:translate(-50%);box-shadow:0 0 0 1px #0000004d,0 2px 4px #0003}.gradient-picker-stop-marker:hover{transform:translate(-50%)scale(1.2);box-shadow:0 0 0 2px #3b82f680,0 2px 8px #0000004d}.gradient-picker-stop-marker.selected{border-color:#3b82f6;transform:translate(-50%)scale(1.3);box-shadow:0 0 0 2px #3b82f6,0 2px 8px #3b82f666}.gradient-picker-stop-editor{background:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;flex-direction:column;gap:.75rem;padding:.75rem;display:flex}.gradient-picker-stop-info{justify-content:space-between;align-items:center;display:flex}.gradient-picker-stop-info label{color:#4b5563;font-size:.75rem;font-weight:600}.gradient-picker-remove-stop{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:.25rem;padding:.25rem .625rem;font-size:.75rem;font-weight:500;transition:background-color .2s}.gradient-picker-remove-stop:hover{background:#dc2626}.gradient-picker-color-input{flex-direction:column;gap:.5rem;display:flex}.gradient-picker-color-input label{color:#4b5563;font-size:.75rem;font-weight:500}.gradient-picker-color-input input[type=color]{cursor:pointer;border:2px solid #d1d5db;border-radius:.375rem;width:100%;height:40px;transition:border-color .2s}.gradient-picker-color-input input[type=color]:hover{border-color:#9ca3af}.gradient-picker-color-input input[type=text]{border:1px solid #d1d5db;border-radius:.375rem;width:100%;padding:.5rem;font-family:monospace;font-size:.875rem;transition:border-color .2s,box-shadow .2s}.gradient-picker-color-input input[type=text]:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px #3b82f61a}.gradient-picker-slider-group input[type=range]{appearance:none;cursor:pointer;background:#d1d5db;border:1px solid #d1d5db;border-radius:5px;outline:none;width:100%;height:10px}.gradient-picker-slider-group input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border:2px solid #3b82f6;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}.gradient-picker-slider-group input[type=range]::-moz-range-thumb{cursor:pointer;background:#fff;border:2px solid #3b82f6;border-radius:50%;width:18px;height:18px;box-shadow:0 2px 4px #0003}