.sharepic-generator{margin:0;padding:20px}.sharepic-generator .template-selector{display:flex;flex-wrap:wrap;gap:10px;margin:0 auto 20px;width:fit-content}.sharepic-generator .template-selector .template-preview{box-shadow:0 2px 10px rgba(0,0,0,.1);width:150px;height:100px;object-fit:cover;border:1px solid transparent;border-radius:5px;transition:border-color .3s , transform .3s;opacity:.7;cursor:pointer}.sharepic-generator .template-selector .template-preview:hover{border-color:#4078fc;transform:scale(1.05);opacity:.8}.sharepic-generator .template-selector .template-preview.selected{border-color:#4078fc;box-shadow:0 0 10px rgba(0,123,255,.5);opacity:.9}.sharepic-generator .template-container{margin:0 auto;background-color:#fff;border:1px solid #ccc;border-radius:5px;padding:20px;box-sizing:border-box;box-shadow:0 2px 10px rgba(0,0,0,.1);display:flex;flex-direction:row;width:fit-content;min-width:200px;max-width:min(1000px,100%);gap:20px;transition:opacity .3s;animation:templates-container-fade-in 1s}@keyframes templates-container-fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}.sharepic-generator .fields .input-field{margin-bottom:15px;flex:1}.sharepic-generator .fields .input-field label{display:block;margin-bottom:5px;font-weight:bold}.sharepic-generator .fields .input-field .text{width:300px;min-width:100%;padding:10px;border:1px solid #ccc;border-radius:5px;box-sizing:border-box;font-size:14px;transition:border-color .3s , box-shadow .3s}.sharepic-generator .fields .input-field .text{resize:vertical}.sharepic-generator .fields .input-field .text:hover{border-color:#4078fc}.sharepic-generator .fields .input-field .text:focus{border-color:#4078fc;outline:none;box-shadow:0 0 5px rgba(0,123,255,.5)}.sharepic-generator .result{width:fit-content;max-width:100%}.sharepic-generator .result canvas{max-width:100%;width:400px;height:auto;display:block;margin:0 auto;border:1px solid #ccc;border-radius:5px;transition:border-color 1s , box-shadow 1s}.sharepic-generator .result canvas.update{transition:border-color .2s , filter .2s , box-shadow .2s;box-shadow:0 0 5px rgba(0,123,255,.5);border-color:#4078fc}.sharepic-generator .result button{display:block;padding:10px 20px;background-color:#4078fc;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:16px;transition:opacity .1s;box-shadow:0 2px 5px rgba(0,0,0,.2);margin-top:10px}.sharepic-generator .result button:hover{opacity:.8}@media (max-width:768px){.sharepic-generator .template-container{padding:20px;flex-direction:column}}@media (max-width:500px){.sharepic-generator .template-selector .template-preview{width:130px;height:80px}}