*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:#e0e0e0;overflow:hidden;height:100vh;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}#root,.app{display:flex;flex-direction:column;height:100vh}.toolbar{background:#e0e0e0;padding:8px;display:flex;gap:8px;align-items:center;border-bottom:2px solid #c0c0c0;flex-shrink:0;z-index:100;flex-wrap:wrap}.tool-btn{padding:6px 12px;background:#fff;border:2px solid #c0c0c0;border-radius:3px;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:4px}.tool-btn:hover{background:#f5f5f5}.tool-btn.active{background:#e5f3ff;border-color:#4a90d9}.tool-btn:disabled{opacity:.5;cursor:not-allowed}.separator{width:2px;height:30px;background:silver;margin:0 4px;flex-shrink:0}.color-picker-container{display:flex;align-items:center;gap:4px}.color-swatch{width:24px;height:24px;border:2px solid #999;cursor:pointer;border-radius:2px}.color-swatch:hover{border-color:#333}.color-swatch.selected{border-color:#4a90d9;box-shadow:0 0 0 2px #4a90d966}input[type=color]{width:30px;height:30px;border:2px solid #999;cursor:pointer;padding:0;background:none}input[type=range]{width:80px}.size-display{min-width:24px;text-align:center;font-size:13px}.canvas-container{flex:1;display:flex;justify-content:center;align-items:center;padding:10px;background:#e0e0e0;overflow:hidden;position:relative}.canvas-wrapper{position:relative;background:#fff;box-shadow:0 2px 8px #00000026;width:100%;height:100%}.canvas-wrapper canvas{display:block;position:absolute;top:0;left:0;touch-action:none}.canvas-wrapper .base-canvas{position:relative;z-index:1}.canvas-wrapper .preview-canvas{position:absolute;top:0;left:0;z-index:2;pointer-events:none}.status-bar{background:silver;padding:4px 8px;font-size:12px;border-top:2px solid #c0c0c0;flex-shrink:0;text-align:center}