*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Arial,Helvetica,sans-serif;line-height:1.5;font-weight:400;color:#333;font-size:1em}body{margin:0;height:auto}#app{width:80%;margin:0 auto;padding:2rem}.container-fix{display:flex}.container{height:auto;width:49%;position:sticky;top:0}.canvas{height:auto}.formcontainer{width:49%;flex:1}.x-axis line,.y-axis line{stroke:#cdcdcd}.x-axis-small line,.y-axis-small line{stroke:#cdcdcd}button{cursor:pointer}input[type=text],select,button{padding:5px;background-color:#f5f5f5;border:1px solid #ddd;border-radius:3px}button.active,button.selected{background-color:#2e3a5f;color:#fff;border-color:#2e3a5f}button:hover{color:#82be24;border-color:#82be24}.delete-btn button{padding-left:0;padding-right:0;width:9%;transition:background-color .2s,color .2s;color:#c43c3c}.delete-btn button:hover{border-color:#c43c3c}input[type=range]{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:6px;background:#ddd;border-radius:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;cursor:pointer}input[type=range]:disabled{opacity:.5;cursor:not-allowed}.formcontainer{background-color:#f5f5f5;border:1px solid #ddd;border-radius:3px;padding:16px;margin-top:20px}.preview-button{margin-bottom:50px}.tabs{display:flex;background-color:#2e3a5f;border-top-left-radius:3px;border-top-right-radius:3px;overflow:hidden}.tabs button{flex:1;text-align:center;padding:12px 0;color:#fff;font-weight:700;background-color:transparent;transition:background-color .3s ease;border:none;border-radius:3px 3px 0 0/3px 3px 0px 0px}.tabs button:hover{background-color:#435580}.tabs button.active{background-color:#fff;color:#2e3a5f;border-top:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid transparent;z-index:1;position:relative}.tab-content{padding:16px;background-color:#fff;border:1px solid #ddd;border-top:none;border-bottom-left-radius:3px;border-bottom-right-radius:3px;min-height:150px}.error-message{color:#ff4d4d;margin-top:4px}.tabinputs{margin-bottom:10px;width:100%}.tabinputs label{display:inline-block;margin-bottom:4px}.dotted-divider{border-top:1px dotted #2e3a5f;margin:16px 0;width:100%}.tabinputs input[type=text]{width:100%;box-shadow:inset 0 1px 3px #0000001a;transition:border-color .3s}.tabinputs input[type=text]:focus{outline:none;border-color:#82be24;background-color:#fff}.select-fontsize{width:25%;margin-right:5%}.select-fontfamily{width:70%}.tabinputs button{padding-left:0;padding-right:0;width:9%;margin-bottom:10px;margin-right:1%;transition:background-color .2s,color .2s}#categorySelect{width:100%}.gallery{display:flex;flex-wrap:wrap;gap:10px}.gallery-item img{width:80px;height:80px;cursor:pointer}.upload-area{border:2px dashed #cccccc;padding:20px;text-align:center;margin-top:10px;transition:background-color .2s}.upload-area.dragging{background-color:#e0e7ff;border-color:#336}.upload-label{cursor:pointer}#tabinputs-drop-progress{display:none}.tabinputs-input-range{display:flex;align-items:center}.tabinputs-input-range span{margin-left:8px}.frame-header{margin-bottom:20px;text-align:center}.frame-tabs{display:flex;flex-direction:column;margin-bottom:10px}.frame-tab{display:flex;align-items:center;justify-content:space-between;padding:8px;cursor:pointer;border:1px solid #ddd;background-color:#f5f5f5;transition:background-color .3s}.frame-tab.active{background-color:#e0e7ff;border-color:#336}.frame-tab button{background:none;border:none;color:#c43c3c}.add-frame-btn{background-color:#2e3a5f;color:#fff;padding:10px 20px;border-radius:3px;font-weight:700;cursor:pointer;border:none;width:100%}.frame-title{display:flex;justify-content:space-between;align-items:center;margin-top:20px}.delete-frame-btn{background:none;border:none;color:#c43c3c;cursor:pointer}.frame-config{margin-top:10px}.config-label,.config-item{margin-bottom:10px}.config-item label{display:block;margin-bottom:5px}.pattern-selector{margin-top:10px}.pattern-options button{padding-left:0;padding-right:0;width:24%;margin-bottom:10px;margin-right:1%;transition:background-color .2s,color .2s}.section{margin-bottom:20px}.section-title{margin-bottom:5px}.selected-color{margin-left:5px;text-transform:uppercase}.color-options{display:flex;gap:8px}.color-option{width:30px;height:30px;border-radius:3px;border:3px solid transparent;cursor:pointer;display:flex;justify-content:center;align-items:center}.color-option.selected{border-color:#82be24}.color-option img{width:60%}.color-black{background-color:#000}.color-blue{background-color:#00f}.color-red{background-color:red}.color-green{background-color:green}.color-violet{background-color:purple}