.custom-picker-container{background:#fff;border:1px solid #eaeaea;border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.05);max-width:900px;padding:32px;position:relative;width:100%}.custom-picker-layout{display:grid;gap:24px;grid-template-areas:"comparison" "picker" "formats";grid-template-columns:1fr}.picker-left{grid-area:picker}.picker-left,.picker-right{display:flex;flex-direction:column;min-width:0}.picker-right{grid-area:formats}.picker-right input{color:#3b93b3;font-size:1.1rem}.picker-board{aspect-ratio:1/1;background:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,red);border-radius:8px;cursor:crosshair;position:relative;touch-action:none;width:100%}.picker-pointer{border:2px solid #fff;border-radius:50%;box-shadow:0 0 4px rgba(0,0,0,.4);height:16px;pointer-events:none;position:absolute;transform:translate(-50%,-50%);width:16px}.picker-controls{gap:16px;margin-top:20px}.picker-controls,.slider-group{display:flex;flex-direction:column}.slider-group{gap:8px}.slider-label{color:#6c757d;font-weight:600}.slider-track{border-radius:7px;cursor:pointer;height:14px;position:relative;touch-action:none;width:100%}.hue-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.alpha-track{background-color:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px}.alpha-gradient{border-radius:7px;bottom:0;left:0;position:absolute;right:0;top:0}.slider-thumb{background:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.3);height:18px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:18px}.color-comparison{display:flex;gap:12px;grid-area:comparison}.compare-block{align-items:center;display:flex;flex:1;flex-direction:column;gap:8px}.prev-color-block{cursor:pointer;transition:transform .1s}.prev-color-block:hover{transform:scale(1.02)}.color-preview{background-image:linear-gradient(45deg,#ccc 25%,transparent 0),linear-gradient(-45deg,#ccc 25%,transparent 0),linear-gradient(45deg,transparent 75%,#ccc 0),linear-gradient(-45deg,transparent 75%,#ccc 0);background-position:0 0,0 5px,5px -5px,-5px 0;background-size:10px 10px;border:1px solid #eee;border-radius:8px;height:40px;position:relative;width:100%}.color-preview:after{background-color:var(--preview-color,#fff);border-radius:inherit;content:"";inset:0;position:absolute}.compare-label{color:#495057;font-size:.95rem}.format-list{display:flex;flex-direction:column;gap:12px}.format-item label{color:#6c757d;display:block;font-size:.95rem;font-weight:600;margin-bottom:4px}@media (max-width:767px){.custom-picker-container{padding:16px}.custom-picker-layout{row-gap:16px}.format-item label{font-size:.9rem}.format-list{gap:8px}}@media (min-width:768px) and (max-width:1023px){.custom-picker-container{padding:24px}}@media (min-width:768px){.custom-picker-layout{column-gap:30px;grid-template-areas:"picker comparison" "picker formats";grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;row-gap:24px}.color-preview{height:60px}}