.color-picker-container{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}.color-option{width:30px;height:30px;border-radius:50%;cursor:pointer;transition:all .2s ease;position:relative}.color-option:hover{transform:scale(1.1);box-shadow:0 2px 5px rgba(0,0,0,.2)}.color-option.selected{box-shadow:0 0 0 2px #fff,0 0 0 4px #333}.dark .color-option.selected{box-shadow:0 0 0 2px #333,0 0 0 4px #fff}.custom-color-input{margin-top:10px;display:flex;align-items:center}.custom-color-input input[type=color]{width:40px;height:40px;border:none;border-radius:8px;background:0 0;cursor:pointer;padding:0}.custom-color-input input[type=text]{margin-left:10px;width:100px;padding:6px 10px;border:1px solid #ddd;border-radius:4px;font-size:14px}.dark .custom-color-input input[type=text]{background-color:#374151;border-color:#4b5563;color:#f9fafb}.color-preview{display:inline-block;width:24px;height:24px;border-radius:50%;margin-right:8px;vertical-align:middle}