.file-picker__button{padding:12px 24px;font-size:16px;font-weight:600;background-color:#646cff;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s ease}.file-picker__button:hover:not(:disabled){background-color:#535bf2}.file-picker__button:disabled{background-color:#9ca3af;cursor:not-allowed}.image-palette{background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:16px;flex:1;overflow-y:auto;display:flex;flex-direction:column}.image-palette__header h3{margin:0 0 16px;font-size:18px;font-weight:600}.image-palette__error{text-align:center;padding:40px 20px}.image-palette__error h3{color:#ef4444;margin-bottom:8px}.image-palette__error p{color:#9ca3af;margin:0}.image-palette__loading{text-align:center;padding:40px 20px}.image-palette__progress{width:100%;height:6px;background-color:#ffffff1a;border-radius:3px;overflow:hidden;margin-bottom:16px}.image-palette__progress-bar{height:100%;background-color:#646cff;transition:width .3s ease;border-radius:3px}.image-palette__loading p{color:#9ca3af;margin:0}.image-palette__empty{text-align:center;padding:40px 20px}.image-palette__empty p{color:#9ca3af;margin:0}.image-palette__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;flex:1;overflow-y:auto}.image-palette__item{background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;padding:8px;transition:transform .2s ease,box-shadow .2s ease;cursor:grab}.image-palette__item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0003}.image-palette__item:active{cursor:grabbing}.image-palette__thumbnail{width:100%;height:80px;display:flex;align-items:center;justify-content:center;background-color:#ffffff0d;border-radius:4px;overflow:hidden;margin-bottom:8px}.image-palette__thumbnail img{max-width:100%;max-height:100%;object-fit:contain;-webkit-user-select:none;user-select:none}.image-palette__info{font-size:12px}.image-palette__filename{font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.image-palette__dimensions{color:#9ca3af;margin-bottom:2px}.image-palette__size{color:#6b7280}.canvas-container{position:relative;background-color:#f8f9fa;border:2px solid #dee2e6;border-radius:8px;overflow:hidden;cursor:crosshair;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.canvas-container:hover{border-color:#adb5bd}.canvas-container.dragging{border-color:#007bff;background-color:#e7f3ff}.canvas{display:block;max-width:100%;max-height:100%;border-radius:4px;box-shadow:0 2px 8px #0000001a;cursor:grab}.canvas:active{cursor:grabbing}.canvas.dragging-image{cursor:move}.canvas.panning{cursor:grabbing}.canvas-instructions{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background-color:#000c;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;pointer-events:none;z-index:10;text-align:center}.canvas-instructions p{margin:0;opacity:.9}.canvas-container[data-drag-active=true]{border-color:#007bff;border-width:3px;background-color:#007bff0d}.canvas-container[data-drag-active=true]:after{content:"Drop image here";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#007bffe6;color:#fff;padding:12px 24px;border-radius:8px;font-weight:500;font-size:16px;pointer-events:none;z-index:20}.canvas-container.loading{opacity:.7}.canvas-container.loading:before{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid #dee2e6;border-top-color:#007bff;border-radius:50%;animation:spin 1s linear infinite;z-index:15}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.canvas-instructions{font-size:11px;padding:6px 12px}.canvas-instructions p{font-size:10px}}.export-panel{background:#f8f9fa;border:1px solid #dee2e6;border-radius:8px;padding:20px;box-shadow:0 2px 4px #0000001a;flex-shrink:0}.export-panel h3{margin:0 0 16px;color:#343a40;font-size:18px;font-weight:600}.export-settings{margin-bottom:16px}.setting-group{display:flex;align-items:center;margin-bottom:12px}.setting-group label{min-width:80px;font-weight:500;color:#495057;margin-right:12px}.setting-group input,.setting-group select{flex:1;max-width:200px;padding:6px 10px;border:1px solid #ced4da;border-radius:4px;font-size:14px}.setting-group input:focus,.setting-group select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 2px #007bff40}.setting-group input:disabled,.setting-group select:disabled{background-color:#e9ecef;opacity:.65;cursor:not-allowed}.export-info{background:#e7f3ff;border:1px solid #b8daff;border-radius:4px;padding:12px;margin-bottom:16px}.export-info p{margin:0 0 4px;font-size:14px;color:#0c5460}.export-info p:last-child{margin-bottom:0}.export-info .warning{color:#856404;font-weight:500}.export-progress{margin-bottom:16px}.progress-bar{width:100%;height:8px;background-color:#e9ecef;border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background-color:#007bff;border-radius:4px;transition:width .3s ease}.export-progress p{margin:0;font-size:14px;color:#495057;text-align:center}.export-error{background:#f8d7da;border:1px solid #f5c6cb;border-radius:4px;padding:12px;margin-bottom:16px}.export-error p{margin:0;color:#721c24;font-size:14px}.export-buttons{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap}.export-button{padding:10px 16px;border:1px solid #ced4da;border-radius:4px;background:#fff;color:#495057;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;min-width:100px}.export-button:hover{background:#e9ecef;border-color:#adb5bd}.export-button.primary{background:#007bff;color:#fff;border-color:#007bff}.export-button.primary:hover{background:#0056b3;border-color:#0056b3}.export-button:disabled{background:#e9ecef;color:#6c757d;border-color:#dee2e6;cursor:not-allowed}.export-button.primary:disabled{background:#6c757d;border-color:#6c757d}.export-help{border-top:1px solid #dee2e6;padding-top:16px}.export-help h4{margin:0 0 12px;font-size:14px;font-weight:600;color:#495057}.export-help ul{margin:0;padding-left:20px;font-size:13px;color:#6c757d;line-height:1.5}.export-help li{margin-bottom:4px}.export-help li strong{color:#495057}.export-help li:last-child{margin-bottom:0}@media (max-width: 768px){.export-panel{padding:16px}.setting-group{flex-direction:column;align-items:flex-start}.setting-group label{min-width:auto;margin-right:0;margin-bottom:4px}.setting-group input,.setting-group select{max-width:100%;width:100%}.export-buttons{flex-direction:column}.export-button{width:100%;min-width:auto}}#root{width:100%;padding:1rem}.App{width:100%;height:calc(100vh - 2rem);display:flex;flex-direction:column}.App-header{background-color:#282c34;padding:12px 20px;color:#fff;border-radius:8px;margin-bottom:24px}.App-header-content{width:100%;border-collapse:collapse}.App-header-title{text-align:left;vertical-align:middle;padding-right:20px}.title-container{display:flex;align-items:center;justify-content:space-between;gap:16px}.title-text{flex:1}.install-button{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;box-shadow:0 2px 4px #0003}.install-button:hover{background:linear-gradient(135deg,#45a049,#3d8b40);transform:translateY(-1px);box-shadow:0 4px 8px #0000004d}.install-button:active{transform:translateY(0);box-shadow:0 2px 4px #0003}.header-canvas-info{text-align:center;vertical-align:middle;padding:8px 20px;background-color:#ffffff1a;border-radius:6px;font-size:12px;line-height:1.4;font-family:Monaco,Menlo,Ubuntu Mono,monospace;color:#fff;border:1px solid rgba(255,255,255,.2)}.App-header-controls{text-align:right;vertical-align:middle;padding-left:20px;display:flex;gap:12px;justify-content:flex-end}.App-header-controls button,.App-header-controls .file-picker__button{min-width:140px;flex:0 0 auto}.App-header-title h1{margin:0 0 4px;font-size:1.5rem;font-weight:600}.App-header-title p{margin:0;opacity:.8;font-size:1rem;font-weight:700}.header-canvas-info div{white-space:nowrap}.header-size-row,.header-grid-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:4px}.header-label{margin-right:2px;opacity:.9}.header-num-input{width:5.525rem;padding:4px 6px;font-size:12px;font-family:inherit;border:1px solid rgba(255,255,255,.35);border-radius:4px;background:#00000040;color:inherit;box-sizing:border-box}.header-num-input:focus{outline:none;border-color:#64b4ffcc}.header-grid-input{width:4.875rem}.header-size-sep{opacity:.75;padding:0 2px}.header-size-unit{opacity:.85;font-size:11px}.header-snap-label{display:inline-flex;align-items:center;gap:6px;margin-right:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.header-snap-label input{cursor:pointer}.App-main{display:flex;flex-direction:column;gap:24px;flex:1;overflow:hidden}.App-clear-button{padding:12px 24px;font-size:16px;font-weight:600;background-color:#ef4444;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s ease}.App-clear-button:hover:not(:disabled){background-color:#dc2626}.App-clear-button:disabled{background-color:#6b7280;cursor:not-allowed}.App-import-csv-input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.App-export-button{padding:12px 24px;font-size:16px;font-weight:600;background-color:#10b981;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background-color .3s ease}.App-export-button:hover:not(:disabled){background-color:#059669}.App-export-button:disabled{background-color:#6b7280;cursor:not-allowed}.App-content{display:grid;grid-template-columns:350px 1fr;gap:24px;height:100%;overflow:hidden;box-sizing:border-box}.App-sidebar{height:100%;overflow-y:auto;display:flex;flex-direction:column;box-sizing:border-box;gap:16px}.App-canvas-area{background-color:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;height:100%;position:relative;width:100%;overflow:hidden;box-sizing:border-box}.App-canvas-placeholder{color:#9ca3af}.App-canvas-placeholder p{margin:8px 0}@media (max-width: 768px){.App-content{grid-template-columns:1fr;gap:16px}.App-header-content,.App-header-content tr{display:block}.App-header-content td{display:block;text-align:center!important;padding:8px 0!important}.App-header-controls{display:flex;justify-content:center;gap:8px}.App-header-controls button,.App-header-controls .file-picker__button{min-width:120px;font-size:14px;padding:10px 16px}.header-canvas-info{font-size:11px;padding:6px 12px}}.export-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;box-sizing:border-box}.export-modal-content{background:#fff;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;position:relative}.export-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 0;border-bottom:1px solid #e5e7eb;margin-bottom:0}.export-modal-header h3{margin:0;color:#111827;font-size:20px;font-weight:600}.export-modal-close{background:none;border:none;font-size:24px;color:#6b7280;cursor:pointer;padding:4px;line-height:1;border-radius:4px;transition:all .2s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.export-modal-close:hover{background-color:#f3f4f6;color:#374151}.export-modal-content .export-panel{background:transparent;border:none;box-shadow:none;padding:0 20px 20px;margin:0}.export-modal-content .export-panel h3{display:none}@media (max-width: 768px){.export-modal-overlay{padding:10px}.export-modal-content{max-height:95vh}.export-modal-header{padding:16px 16px 0}.export-modal-content .export-panel{padding:0 16px 16px}}: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}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;color:inherit;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}