@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap);*{box-sizing:border-box;margin:0;padding:0}:root{--primary-color:#00c4cc;--primary-hover:#00a8ae;--secondary-color:#8b3dff;--secondary-hover:#7d2ae8;--accent-color:#f7b500;--text-primary:#333;--text-secondary:#666;--text-light:#8c9196;--border-color:#e6e8eb;--background-light:#f8f9fa;--background-medium:#f0f2f5;--shadow-sm:0 1px 3px #0000000d;--shadow-md:0 2px 6px #00000014;--shadow-lg:0 4px 12px #0000001a;--radius-sm:4px;--radius-md:8px;--radius-lg:12px}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#333;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:14px;line-height:1.5;margin:0;overflow:hidden}button{cursor:pointer;outline:none}button,input,select,textarea{font-family:inherit}::-webkit-scrollbar{height:8px;width:8px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:#d0d4d9;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#b0b4b9}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{background-color:#fff;color:#333;flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;height:100vh;width:100%}.App,.main-container{display:flex;overflow:hidden}.main-container{background-color:#f8f9fa;flex:1 1;position:relative}.topbar{background-color:#fff;border-bottom:1px solid #e6e8eb;box-shadow:0 1px 3px #0000000d;height:64px;justify-content:space-between;padding:0 16px;z-index:100}.topbar,.topbar-center,.topbar-left,.topbar-right{align-items:center;display:flex}.topbar-left{width:240px}.topbar-center{flex:1 1;justify-content:center}.topbar-right{justify-content:flex-end;width:240px}.logo{align-items:center;color:#00c4cc;display:flex;font-size:22px;font-weight:700;letter-spacing:-.5px}.logo:before{background-color:#00c4cc;border-radius:6px;content:"";display:inline-block;height:24px;margin-right:8px;width:24px}.file-name{border-radius:4px;color:#333;font-size:16px;font-weight:500;padding:6px 12px;transition:background-color .2s}.file-name:hover{background-color:#f8f9fa;cursor:pointer}.share-button{align-items:center;background-color:#8b3dff;border:none;border-radius:4px;color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:6px;padding:10px 20px;transition:all .2s}.share-button:hover{background-color:#7d2ae8;box-shadow:0 2px 4px #0000001a}.share-button:before{content:"↗";font-size:16px}.left-menu{background-color:#fff;border-right:1px solid #e6e8eb;box-shadow:1px 0 3px #00000008;padding:16px 0;width:72px;z-index:90}.left-menu,.menu-item{align-items:center;display:flex;flex-direction:column}.menu-item{cursor:pointer;margin-bottom:16px;padding:8px 0;position:relative;transition:all .2s;width:100%}.menu-item:hover{background-color:#f8f9fa}.menu-item:hover .menu-icon{box-shadow:0 4px 8px #0000001a;transform:translateY(-2px)}.menu-item:active .menu-icon{box-shadow:0 2px 4px #0000001a;transform:translateY(0)}.menu-icon{align-items:center;background-color:#fff;border-radius:12px;box-shadow:0 2px 6px #00000014;color:#333;display:flex;font-size:20px;height:40px;justify-content:center;margin-bottom:6px;position:relative;transition:all .2s;width:40px}.menu-item:first-child .menu-icon{background-color:#f2fbfc;color:#00c4cc;font-weight:700}.menu-item:nth-child(2) .menu-icon{background-color:#f9f4ff;color:#8b3dff}.menu-item:nth-child(3) .menu-icon{background-color:#fff8e6;color:#f7b500}.menu-label{color:#666;font-size:11px;font-weight:500;letter-spacing:-.2px}.canvas-container{background-color:#f8f9fa;display:flex;flex:1 1;flex-direction:column;overflow:hidden}.canvas-tools{background-color:#fff;border-bottom:1px solid #e6e8eb;box-shadow:0 1px 3px #0000000d;height:48px;justify-content:space-between;padding:0 20px}.canvas-tools,.zoom-controls{align-items:center;display:flex}.zoom-controls{color:#333;font-size:14px;gap:8px}.layer-button,.zoom-controls span{font-weight:500}.layer-button{align-items:center;background-color:#fff;border:1px solid #e6e8eb;border-radius:4px;color:#333;cursor:pointer;display:flex;font-size:14px;gap:6px;padding:6px 12px;transition:all .2s}.layer-button:hover{background-color:#f8f9fa;border-color:#d0d4d9}.canvas-area{align-items:center;background-color:#f0f2f5;background-image:linear-gradient(45deg,#eaedf0 25%,#0000 0,#0000 75%,#eaedf0 0,#eaedf0),linear-gradient(45deg,#eaedf0 25%,#0000 0,#0000 75%,#eaedf0 0,#eaedf0);background-position:0 0,10px 10px;background-size:20px 20px;display:flex;flex:1 1;justify-content:center;overflow:auto;padding:40px}.canvas{background-color:#fff;border-radius:2px;box-shadow:0 2px 12px #0000001a;height:600px;overflow:hidden;position:relative;width:800px}.canvas-element{border:1px solid #0000;cursor:pointer;position:absolute;transition:box-shadow .2s,transform .2s}.canvas-element.selected{border:2px solid #00c4cc;box-shadow:0 0 0 2px #00c4cc4d}.canvas-element.locked{position:relative}.canvas-element.locked:after{background-color:#fffc;border-radius:3px;color:#8b3dff;content:"🔒";font-size:14px;padding:2px;pointer-events:none;position:absolute;right:5px;top:5px}.text-element{left:100px;min-height:40px;min-width:100px;padding:8px;top:100px}.text-content{color:#333;font-family:Arial,sans-serif;font-size:18px}.shape-element{align-items:center;display:flex;height:100px;justify-content:center;left:300px;top:200px;width:100px}.shape{height:100%;width:100%}.shape.rectangle{background-color:#00c4cc;border-radius:4px}.shape.circle{background-color:#7d2ae8;border-radius:50%}.shape.square{background-color:#f7b500}.image-element{align-items:center;background-color:#f0f2f5;display:flex;height:100px;justify-content:center;left:500px;overflow:hidden;top:350px;width:150px}.image-placeholder{color:#8c9196;font-size:14px;font-weight:500;text-align:center}.popup-overlay{align-items:center;background-color:#00000080;bottom:0;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;z-index:1000}.popup-container{background-color:#fff;border-radius:8px;box-shadow:0 4px 20px #00000026;display:flex;flex-direction:column;max-height:90vh;max-width:90%;overflow-y:auto;width:380px}.popup-header{align-items:center;border-bottom:1px solid #f0f0f0;display:flex;justify-content:space-between;padding:16px 20px}.popup-header h3{color:#333;font-size:18px;font-weight:600;margin:0}.close-button{background:none;border:none;color:#666;cursor:pointer;font-size:24px;line-height:1;padding:0}.close-button:hover{color:#333}.popup-content{flex:1 1;padding:20px}.property-group{margin-bottom:16px}.property-group label{color:#333;display:block;font-size:14px;font-weight:500;margin-bottom:6px}.property-row{display:flex;gap:12px}.half-width{flex:1 1}input[type=number],input[type=text],select,textarea{background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;color:#333;font-size:14px;padding:8px 12px;width:100%}input[type=number]:focus,input[type=text]:focus,select:focus,textarea:focus{border-color:#00c4cc;box-shadow:0 0 0 2px #00c4cc33;outline:none}.text-content-input{min-height:80px;resize:vertical}.color-picker{border:1px solid #e0e0e0;border-radius:4px;cursor:pointer;height:36px;padding:2px;width:100%}.text-style-buttons{display:flex;gap:8px}.style-button{align-items:center;background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;color:#333;cursor:pointer;display:flex;font-size:14px;font-weight:700;height:36px;justify-content:center;transition:all .2s;width:36px}.style-button:hover{background-color:#f5f5f5}.style-button.active{background-color:#00c4cc;border-color:#00c4cc;color:#fff}.image-source-container{align-items:center;display:flex;flex-wrap:wrap;gap:8px}.image-upload-input{display:none}.image-upload-label{background-color:#00c4cc;border-radius:4px;color:#fff;cursor:pointer;display:inline-block;font-size:14px;padding:8px 16px;transition:background-color .3s}.image-upload-label:hover{background-color:#00a8ae}.file-name{color:#666;font-size:14px;margin-left:8px}input[type=range]{-webkit-appearance:none;background:#e0e0e0;border-radius:3px;height:6px;outline:none;width:100%}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#00c4cc;border-radius:50%;cursor:pointer;height:18px;width:18px}.opacity-value{color:#666;font-weight:400}.popup-footer{border-top:1px solid #f0f0f0;display:flex;gap:3px;justify-content:flex-end;padding:16px 20px}.apply-button{background-color:#00c4cc;border:none;border-radius:4px;color:#fff;cursor:pointer;font-size:14px;font-weight:500;padding:8px 20px;transition:background-color .3s}.apply-button:hover{background-color:#00a8ae}.layer-panel{background-color:#fff;border-left:1px solid #e6e8eb;box-shadow:-1px 0 3px #00000008;display:flex;flex-direction:column;height:100%;width:250px;z-index:90}.layer-panel-header{align-items:center;border-bottom:1px solid #e6e8eb;display:flex;justify-content:space-between;padding:16px}.layer-panel-header h3{color:#333;font-size:16px;font-weight:600;margin:0}.layer-count{background-color:#f0f2f5;border-radius:10px;color:#666;font-size:12px;padding:2px 8px}.layer-list{flex:1 1;overflow-y:auto;padding:8px}.layer-item{align-items:center;background-color:#f8f9fa;border:1px solid #0000;border-radius:4px;display:flex;justify-content:space-between;margin-bottom:6px;padding:10px;transition:all .2s}.layer-item:hover{background-color:#f0f2f5}.layer-item.selected{background-color:#00c4cc0d;border-color:#00c4cc}.layer-info{align-items:center;display:flex;gap:8px}.layer-name{color:#333;font-size:14px}.layer-actions{align-items:center;display:flex;gap:4px}.layer-actions button{align-items:center;background:none;border:none;border-radius:4px;color:#666;cursor:pointer;display:flex;font-size:14px;height:28px;justify-content:center;transition:all .2s;width:28px}.layer-actions button:hover{background-color:#e6e8eb;color:#333}.layer-actions button:disabled{cursor:not-allowed;opacity:.3}.lock-toggle,.visibility-toggle{align-items:center;background:none;border:none;border-radius:4px;cursor:pointer;display:flex;font-size:16px;height:28px;justify-content:center;transition:all .2s;width:28px}.lock-toggle:hover,.visibility-toggle:hover{background-color:#e6e8eb}.visibility-toggle.hidden{opacity:.5}.lock-toggle.locked{color:#8b3dff}.delete-layer:hover{background-color:#ffebee;color:#f44336}.no-layers-message{color:#666;font-style:italic;padding:20px;text-align:center}.layer-panel-footer{background-color:#f8f9fa;border-top:1px solid #e6e8eb;padding:12px 16px}.layer-panel-hint{color:#666;font-size:12px;text-align:center}
/*# sourceMappingURL=main.4c010dcc.css.map*/