.toolbar{display:flex;align-items:center;gap:0;background:#252525;border-bottom:1px solid #333;height:44px;padding:0 8px;overflow:hidden;flex-shrink:0;-webkit-user-select:none;user-select:none}.toolbar-section{display:flex;align-items:center;gap:4px;padding:0 8px}.toolbar-section+.toolbar-section{border-left:1px solid #383838}.toolbar-brand{flex-shrink:0}.brand-name{font-size:13px;font-weight:600;color:silver;letter-spacing:.02em}.toolbar-tools{flex:1;flex-wrap:nowrap;overflow:hidden}.tool-btn{padding:4px 10px;border-radius:4px;font-size:12px;color:#aaa;background:transparent;border:1px solid transparent;transition:background .1s,color .1s;white-space:nowrap}.tool-btn:hover{background:#333;color:#e0e0e0}.tool-btn.active{background:#3b82f6;color:#fff;border-color:transparent}.toolbar-canvas-size{flex-shrink:0;gap:6px}.toolbar-canvas-size label{font-size:11px;color:#888}.toolbar-canvas-size input[type=number]{width:60px;background:#1e1e1e;border:1px solid #404040;border-radius:4px;color:#e0e0e0;padding:3px 6px;font-size:12px}.toolbar-canvas-size input[type=color]{width:28px;height:24px;padding:2px;border-radius:4px;border:1px solid #404040;background:#1e1e1e;cursor:pointer}.toolbar-actions{flex-shrink:0;gap:6px}.action-btn{padding:4px 12px;border-radius:4px;font-size:12px;color:#ccc;background:#333;border:1px solid #444;transition:background .1s}.action-btn:hover:not(:disabled){background:#444;color:#fff}.action-btn:disabled{opacity:.4;cursor:default}.action-btn--primary{background:#2563eb;color:#fff;border-color:#2563eb}.action-btn--primary:hover:not(:disabled){background:#1d4ed8}.canvas-element{position:absolute;cursor:move;-webkit-user-select:none;user-select:none}.canvas-element.no-pointer{cursor:crosshair;pointer-events:none}.canvas-element.locked{cursor:default}.selection-border{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px solid #3b82f6;pointer-events:none;box-sizing:border-box}.lock-indicator{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;border:2px dashed #f59e0b;pointer-events:none;box-sizing:border-box}.resize-handle{position:absolute;width:8px;height:8px;background:#fff;border:2px solid #3b82f6;border-radius:1px;box-sizing:border-box;z-index:10000}.resize-handle--nw{top:-4px;left:-4px;cursor:nw-resize}.resize-handle--n{top:-4px;left:calc(50% - 4px);cursor:n-resize}.resize-handle--ne{top:-4px;right:-4px;cursor:ne-resize}.resize-handle--e{top:calc(50% - 4px);right:-4px;cursor:e-resize}.resize-handle--se{bottom:-4px;right:-4px;cursor:se-resize}.resize-handle--s{bottom:-4px;left:calc(50% - 4px);cursor:s-resize}.resize-handle--sw{bottom:-4px;left:-4px;cursor:sw-resize}.resize-handle--w{top:calc(50% - 4px);left:-4px;cursor:w-resize}.canvas-wrapper{flex:1;overflow:auto;background:#3a3a3a;display:flex;align-items:flex-start;justify-content:flex-start;padding:40px}.canvas{position:relative;flex-shrink:0;box-shadow:0 4px 32px #00000080}.canvas.cursor-select{cursor:default}.canvas.cursor-crosshair{cursor:crosshair}.draw-preview{position:absolute;border:1px dashed #3b82f6;background:#3b82f614;pointer-events:none;box-sizing:border-box}.layers-panel{width:220px;flex-shrink:0;background:#1e1e1e;border-right:1px solid #333;display:flex;flex-direction:column;overflow:hidden}.panel-header{padding:8px 12px;font-size:11px;font-weight:600;color:#888;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid #2a2a2a;flex-shrink:0}.layers-list{flex:1;overflow-y:auto;overflow-x:hidden}.layer-item{display:flex;align-items:center;gap:4px;padding:5px 8px;cursor:pointer;border-bottom:1px solid #252525;transition:background .1s;position:relative}.layer-item:hover{background:#2a2a2a}.layer-item.selected{background:#1d3557}.layer-item.dragging{opacity:.4}.layer-item.drag-over{border-top:2px solid #3b82f6}.layer-drag-handle{color:#555;cursor:grab;font-size:12px;flex-shrink:0;line-height:1}.layer-drag-handle:active{cursor:grabbing}.layer-type-badge{font-size:9px;font-weight:600;color:#666;background:#2d2d2d;border-radius:3px;padding:1px 4px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em;min-width:24px;text-align:center}.layer-name{flex:1;font-size:12px;color:#ccc;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.layer-rename-input{flex:1;background:#111;border:1px solid #3b82f6;border-radius:3px;color:#fff;padding:2px 4px;font-size:12px;outline:none}.layer-actions{display:flex;gap:2px;flex-shrink:0}.layer-icon-btn{padding:1px 3px;border-radius:3px;font-size:11px;color:#555;background:transparent;transition:color .1s;line-height:1}.layer-icon-btn:hover{color:#aaa}.layer-icon-btn.inactive{color:#444}.layer-icon-btn.active-lock{color:#f59e0b}.layers-empty{padding:20px 12px;font-size:12px;color:#555;text-align:center;line-height:1.6}.properties-panel{width:220px;flex-shrink:0;background:#1e1e1e;border-left:1px solid #333;display:flex;flex-direction:column;overflow:hidden}.props-body{flex:1;overflow-y:auto;padding-bottom:24px}.props-empty{padding:20px 12px;font-size:12px;color:#555;text-align:center;line-height:1.6}.prop-section-title{padding:8px 12px 4px;font-size:10px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.06em;border-top:1px solid #2a2a2a;margin-top:4px}.prop-section-title:first-child{border-top:none;margin-top:0}.prop-row{display:flex;align-items:center;gap:6px;padding:3px 12px}.prop-row-group{display:flex;flex-wrap:wrap;padding:0 8px}.prop-row--half{width:50%;padding:3px 4px}.prop-label{font-size:11px;color:#777;width:44px;flex-shrink:0;white-space:nowrap}.prop-row--half .prop-label{width:32px}.prop-control{flex:1;min-width:0}.prop-input{background:#2a2a2a;border:1px solid #3a3a3a;border-radius:4px;color:#e0e0e0;padding:3px 6px;font-size:12px;width:100%;outline:none;transition:border-color .1s}.prop-input:focus{border-color:#3b82f6}.prop-input--number,.prop-input--text{width:100%}.prop-input--hex{width:80px}.prop-select{background:#2a2a2a;border:1px solid #3a3a3a;border-radius:4px;color:#e0e0e0;padding:3px 6px;font-size:12px;width:100%;outline:none;cursor:pointer}.prop-select:focus{border-color:#3b82f6}.prop-textarea{background:#2a2a2a;border:1px solid #3a3a3a;border-radius:4px;color:#e0e0e0;padding:6px 8px;font-size:12px;width:100%;outline:none;resize:vertical;font-family:inherit;line-height:1.4;margin:0 12px;width:calc(100% - 24px);display:block}.prop-textarea:focus{border-color:#3b82f6}.color-input-wrap{display:flex;align-items:center;gap:6px}.prop-color{width:28px;height:24px;padding:2px;border-radius:4px;border:1px solid #3a3a3a;background:#2a2a2a;cursor:pointer;flex-shrink:0}.opacity-row{display:flex;align-items:center;gap:8px}.prop-range{flex:1;height:4px;accent-color:#3b82f6}.opacity-val{font-size:11px;color:#888;width:32px;text-align:right;flex-shrink:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:9999}.modal{background:#1e1e1e;border:1px solid #383838;border-radius:8px;width:700px;max-width:calc(100vw - 40px);max-height:calc(100vh - 80px);display:flex;flex-direction:column;box-shadow:0 20px 60px #0009}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid #2a2a2a;font-size:14px;font-weight:600;color:#e0e0e0}.modal-close{color:#666;font-size:14px;padding:4px 8px;border-radius:4px}.modal-close:hover{color:#ccc;background:#2a2a2a}.modal-body{flex:1;padding:16px 20px;display:flex;flex-direction:column;gap:12px;overflow:hidden}.modal-hint{font-size:12px;color:#888;line-height:1.5}.modal-textarea{flex:1;background:#111;border:1px solid #333;border-radius:6px;color:#b0c0d0;padding:12px;font-size:11px;font-family:Fira Code,Cascadia Code,Consolas,monospace;line-height:1.5;resize:none;outline:none}.modal-textarea:focus{border-color:#3b82f6}.modal-error{font-size:12px;color:#ef4444}.modal-footer{display:flex;gap:8px;justify-content:flex-end;padding:12px 20px;border-top:1px solid #2a2a2a}.modal-btn{padding:6px 16px;border-radius:5px;font-size:13px;background:#2a2a2a;color:#ccc;border:1px solid #444;transition:background .1s}.modal-btn:hover{background:#333;color:#fff}.modal-btn--primary{background:#2563eb;color:#fff;border-color:#2563eb}.modal-btn--primary:hover{background:#1d4ed8}.app{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:#1a1a1a}.app-body{display:flex;flex:1;overflow:hidden}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;color:#e0e0e0;background:#1a1a1a}input,select,textarea,button{font-family:inherit;font-size:inherit}button{cursor:pointer;border:none;background:none;color:inherit}