.color-editor-panel{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:20px;align-items:start;margin-top:20px}.native-color-picker{display:grid;gap:10px;align-content:start;color:var(--muted-color);font-size:13px;font-weight:600}.native-color-picker .react-colorful{width:100%;min-height:196px;height:196px;padding:6px;border-radius:8px;border:1px solid var(--border-color);background:var(--card-bg);box-sizing:border-box}.native-color-picker .react-colorful__saturation{border-radius:6px 6px 0 0}.native-color-picker .react-colorful__alpha,.native-color-picker .react-colorful__hue{height:16px;border-radius:999px;margin-top:10px}.native-color-picker .react-colorful__pointer{width:14px;height:14px}.color-slider-panel{display:grid;gap:12px;padding:18px 20px;border:1px solid var(--border-color);border-radius:8px;background:var(--bg-light)}.color-slider-title{color:var(--secondary-color);font-size:14px;font-weight:700}.color-slider-row{display:grid;grid-template-columns:64px minmax(120px,1fr) 88px;gap:12px;align-items:center}.color-slider-row span{color:var(--muted-color);font-size:13px;font-weight:600}.color-slider-row input[type=range]{width:100%;padding:0;border:0;background:rgba(0,0,0,0);accent-color:var(--primary-color)}.color-slider-row input[type=range]:focus{box-shadow:none}.color-slider-row input[type=number]{width:88px;text-align:center}.color-values-panel{display:grid;gap:12px;margin-top:20px;padding:18px 20px;border:1px solid var(--border-color);border-radius:8px;background:var(--card-bg)}.color-format-row{display:grid;grid-template-columns:72px minmax(0,1fr) 74px;gap:10px;align-items:center;min-width:0}.color-format-label{color:var(--muted-color);font-size:13px;font-weight:700}.color-format-input{min-width:0;width:100%;font-family:Monaco,Courier New,monospace}@media(max-width:860px){.color-editor-panel{grid-template-columns:1fr}.native-color-picker .react-colorful{min-height:160px;height:160px}}@media(max-width:560px){.color-slider-panel,.color-values-panel{padding:14px}.color-format-row{grid-template-columns:1fr 74px}.color-format-label{grid-column:1/-1}.color-slider-row{grid-template-columns:48px minmax(0,1fr) 74px;gap:8px}.color-slider-row input[type=number]{width:74px;padding-left:6px;padding-right:6px}}