body,html,#root{margin:0;padding:0;width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:#f0f2f5;color:#333}.app-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;transition:background-color .3s ease;overflow:hidden}.app-container.can-pan{cursor:grab}.app-container.panning{cursor:grabbing}.app-container.panning,.app-container.panning *{cursor:grabbing!important}.app-container.tool-pen{cursor:crosshair}.canvas{position:absolute;top:0;left:0;width:100%;height:100%;will-change:transform}.drop-zone{border:3px dashed #ccc;border-radius:20px;padding:40px;text-align:center;color:#aaa;transition:all .3s ease;-webkit-user-select:none;user-select:none;position:relative;z-index:1}.drop-zone p{margin-top:8px;font-size:1.2em}.app-container.dragging-over .drop-zone{border-color:#4a90e2;color:#4a90e2}.app-container.dragging-over .drop-overlay{opacity:1;pointer-events:all}.drop-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#4a90e2cc;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1000}.drop-overlay p{color:#fff;font-size:2em;font-weight:700;border:3px dashed white;padding:20px 40px;border-radius:10px}h1{font-size:2em;text-align:center}.transformable-container{position:absolute;cursor:grab;width:300px;height:300px;-webkit-user-select:none;user-select:none;will-change:transform;background-color:transparent}.transformable-container:active{cursor:grabbing}.layer-content-wrapper{width:100%;height:100%;border:2px solid transparent;transition:border-color .2s,box-shadow .2s;box-shadow:0 0 #4a90e200;z-index:1;position:relative;background-color:#fff}.layer-content-wrapper>*{width:100%;height:100%;display:block;object-fit:contain;pointer-events:none;background-color:transparent}.transformable-container.interacting .layer-content-wrapper iframe{pointer-events:none}.transformable-container .layer-content-wrapper iframe{border:none;pointer-events:auto}.transformable-container.active .layer-content-wrapper{border-color:#4a90e2;box-shadow:0 0 0 2px #4a90e280}.handle{position:absolute;width:20px;height:20px;background-color:#fff;border:2px solid #4a90e2;border-radius:50%;box-shadow:0 2px 4px #0003;opacity:0;transition:opacity .2s;z-index:2}.transformable-container.active .handle{opacity:1}.handle.rotate{top:-30px;left:50%;transform:translate(-50%);cursor:alias}.handle.resize{bottom:-10px;right:-10px;cursor:nwse-resize}.text-container-wrapper{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:10px;box-sizing:border-box;overflow:hidden}.text-content,.text-edit-area{width:100%;height:100%;background-color:transparent;border:none;outline:none;margin:0;padding:0;overflow-y:auto}.text-edit-area{resize:none}.transformable-container.editing{cursor:text}.transformable-container.editing .handle{display:none}.transformable-container.editing .layer-content-wrapper{border-color:#4a90e2!important;box-shadow:0 0 0 2px #4a90e280!important}.path-content-wrapper{position:relative;width:100%;height:100%}.path-renderer{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible!important}.path-renderer path{vector-effect:non-scaling-stroke}.path-editor-overlay{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible!important;pointer-events:none;z-index:10}.anchor-point,.handle-control{pointer-events:all;cursor:move}.anchor-point{fill:#fff;stroke:#4a90e2;stroke-width:2px}.anchor-point.selected{fill:#4a90e2}.handle-control{fill:#fff;stroke:#e53e3e;stroke-width:1px}.handle-line{stroke:#e53e3e;stroke-width:1px;stroke-dasharray:2 2}.drawing-preview-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.drawing-preview-overlay path{fill:none;stroke:#4a90e2;stroke-width:2px;vector-effect:non-scaling-stroke}.layers-panel{position:absolute;width:220px;max-height:500px;background-color:#ffffffe6;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:2000;overflow-y:auto;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column}.layers-panel h3{margin:0;padding:10px 15px;font-size:16px;border-bottom:1px solid #eee;position:sticky;top:0;background-color:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);cursor:move}.layers-list{padding:5px}.layer-item{padding:8px 10px;border-radius:4px;cursor:pointer;transition:background-color .15s ease;position:relative}.layer-item.active{background-color:#e9f2fd}.layer-item:hover:not(.active){background-color:#f1f3f5}.drop-indicator{position:absolute;left:0;right:0;height:2px;background-color:#4a90e2;z-index:1;pointer-events:none}.drop-indicator.top{top:-1px}.drop-indicator.bottom{bottom:-1px}.layer-item-header{display:flex;align-items:center;gap:8px}.delete-layer-btn{background:none;border:none;cursor:pointer;font-size:16px;padding:0;margin-left:auto;color:#868e96;display:none;width:24px;height:24px;border-radius:4px;transition:color .2s,background-color .2s}.layer-item.active .delete-layer-btn,.layer-item:hover .delete-layer-btn{display:flex;align-items:center;justify-content:center}.delete-layer-btn:hover{color:#e53e3e;background-color:#fbe9e7}.collapse-toggle{background:none;border:none;cursor:pointer;font-size:12px;margin-right:4px;padding:0 4px;color:#555;line-height:1}.layer-item img{width:40px;height:40px;object-fit:cover;border-radius:3px;border:1px solid #ccc;background-color:#f8f9fa;flex-shrink:0}.layer-preview-placeholder{width:40px;height:40px;object-fit:cover;border-radius:3px;border:1px solid #ccc;display:flex;align-items:center;justify-content:center;background-color:#e9ecef;font-weight:700;color:#868e96;text-align:center;font-size:24px;font-family:serif;flex-shrink:0}.layer-preview-placeholder.group-preview{font-family:sans-serif;font-size:20px;background-color:#ddebf8}.layer-preview-placeholder.shape-preview{font-family:sans-serif;font-size:20px;background-color:#e6e1f8}.layer-preview-placeholder.path-preview{background-color:#e0f2f1;color:#00796b;padding:5px}.layer-item-header span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-grow:1}.layer-controls{margin-top:10px;padding-top:10px;border-top:1px solid #e9ecef}.control-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.control-row:last-child{margin-bottom:0}.control-row label{font-size:12px;color:#333;margin-right:10px;white-space:nowrap}.control-row input[type=range]{flex-grow:1;width:100px}.control-row select{flex-grow:1;width:100px;padding:3px 5px;border-radius:4px;border:1px solid #ccc;font-size:11px;background-color:#fff}.control-row.text-content-control small{width:100%;text-align:center;color:#555;padding:5px 0}.control-row input[type=number]{width:50px;padding:3px 5px;border-radius:4px;border:1px solid #ccc}.control-row input[type=color]{width:24px;height:24px;padding:0;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer}.control-row.button-group{justify-content:flex-end;gap:5px}.button-group button{padding:5px;border:1px solid #ccc;background-color:#fff;border-radius:4px;cursor:pointer;font-size:11px;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.button-group button.active{background-color:#4a90e2;color:#fff;border-color:#4a90e2}.history-toolbar{position:absolute;top:20px;left:20px;z-index:2000;background-color:#ffffffe6;padding:8px;border-radius:8px;box-shadow:0 4px 12px #0000001a;display:flex;gap:8px;align-items:center}.history-toolbar button{padding:8px;font-size:14px;border:1px solid #ccc;background-color:#fff;border-radius:6px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s;display:flex;align-items:center;justify-content:center;width:38px;height:38px;color:#333}.history-toolbar button.active{background-color:#4a90e2;color:#fff;border-color:#4a90e2}.history-toolbar button svg{width:20px;height:20px}.history-toolbar button:hover:not(:disabled){background-color:#f0f2f5;border-color:#bbb}.history-toolbar button.active:hover:not(:disabled){background-color:#357abd;border-color:#357abd}.history-toolbar button:disabled{opacity:.5;cursor:not-allowed;background-color:#f8f9fa}.history-toolbar button.share-button{min-width:38px;width:auto;padding:8px 12px}.toolbar-button-container{position:relative}.toolbar-separator{width:1px;height:24px;background-color:#ddd;margin:0 4px}.shape-picker{position:absolute;top:calc(100% + 5px);left:0;background-color:#fff;border-radius:6px;box-shadow:0 2px 8px #00000026;padding:5px;display:flex;gap:5px;z-index:2001}.shape-picker button{width:32px;height:32px;padding:4px;color:#555}.shape-picker button svg{width:100%;height:100%}.zoom-indicator{position:absolute;bottom:20px;left:20px;background-color:#ffffffe6;border-radius:8px;box-shadow:0 4px 12px #0000001a;font-size:14px;z-index:2000;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;text-align:center;display:flex;align-items:center;gap:4px;padding:4px}.zoom-indicator span{min-width:50px;padding:4px 8px;border-radius:6px;transition:background-color .2s;cursor:pointer}.zoom-indicator span:hover{background-color:#f0f2f5}.zoom-indicator button{background:none;border:none;cursor:pointer;font-size:20px;font-weight:700;line-height:1;width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background-color .2s;color:#333;padding-bottom:2px}.zoom-indicator button:hover{background-color:#e9ecef}