:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-container{display:flex;flex-direction:column;height:100vh}.app-content{display:flex;flex:1;overflow:hidden}.main-content{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#f0f4f8;width:100%;height:100%}.container{position:relative;width:80%;height:70vh;min-height:400px;border:3px dashed #4a90e2;background-color:#fff;overflow:hidden;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;box-shadow:0 4px 8px #0000001a;border-radius:8px}.container:before{content:"Canvas - Drop pieces here";position:absolute;top:10px;left:10px;color:#4a90e2;font-weight:700;font-size:14px;z-index:10;background-color:#ffffffb3;padding:2px 6px;border-radius:3px}.container img{display:block;max-width:100%;max-height:100%;width:auto;height:auto}.piece-container{position:absolute;top:0;left:0;cursor:move}.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:12px;padding:12px 0;margin-top:10px}.palette-item{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border:2px solid #d1e7ff;border-radius:8px;cursor:grab;transition:all .2s ease;background-color:#fff;box-shadow:0 2px 4px #0000001a}.palette-item:hover{border-color:#3498db;background-color:#e3f2fd;transform:translateY(-2px);box-shadow:0 4px 8px #00000026;cursor:grab}.palette-item:active{cursor:grabbing}.toolbar{display:flex;gap:10px;align-items:center;padding:12px;background-color:#e9ecef;border-bottom:2px solid #dee2e6;box-shadow:0 2px 4px #0000001a;min-height:60px}.toolbar button{padding:10px 16px;background-color:#3498db;color:#fff;border:none;border-radius:5px;cursor:pointer;font-size:14px;transition:background-color .2s;box-shadow:0 2px 4px #0003}.toolbar button:hover:not(:disabled){background-color:#2980b9}.toolbar button:disabled{background-color:#95a5a6;cursor:not-allowed}.dragging{opacity:.8;transform:scale(1.05);box-shadow:0 6px 12px #0003;cursor:grabbing!important}.container.drag-over{border:3px solid #27ae60;background-color:#f8fff8}.svg-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:#f8f9fa;border:1px dashed #ccc;color:#6c757d;font-size:10px;text-align:center;word-break:break-word}