*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#1e1e1e;color:#ccc;overflow:hidden;height:100vh}#app{display:flex;flex-direction:column;height:100vh}#toolbar{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#2d2d2d;border-bottom:1px solid #444;flex-wrap:wrap;min-height:40px}#toolbar button{padding:4px 10px;background:#3c3c3c;border:1px solid #555;color:#ddd;border-radius:3px;cursor:pointer;font-size:13px}#toolbar button:hover:not(:disabled){background:#505050}#toolbar button:disabled{opacity:.4;cursor:default}#toolbar label{display:flex;align-items:center;gap:4px;font-size:13px}#toolbar select,#toolbar input[type=number]{background:#3c3c3c;border:1px solid #555;color:#ddd;padding:2px 6px;border-radius:3px;font-size:13px}#toolbar select{max-width:200px}#toolbar input[type=number]{width:60px}.size-label input[type=number]{width:50px}.size-label select{width:auto;min-width:40px;margin-left:4px}.speed-label{position:relative}.lang-label{display:flex;align-items:center;gap:4px;font-size:12px}.lang-label select{background:#3c3c3c;color:#ccc;border:1px solid #555;border-radius:3px;padding:2px 4px;font-size:12px}#speed-preset-btn{padding:2px 6px;font-size:12px;min-width:unset}.preset-menu{position:absolute;top:100%;left:0;margin-top:4px;background:#3c3c3c;border:1px solid #555;border-radius:4px;padding:4px 0;z-index:100;min-width:120px;box-shadow:0 4px 12px #00000080}.preset-menu.hidden{display:none}.preset-menu button{display:block;width:100%;text-align:left;padding:4px 12px;background:none;border:none;color:#ddd;font-size:13px;cursor:pointer;white-space:nowrap}.preset-menu button:hover{background:#505050}.preset-menu button.active{color:#4fc3f7}.toolbar-label{font-size:13px;color:#999;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.toolbar-sep{width:1px;height:20px;background:#555}.btn-panel-toggle.active{background:#0e639c;border-color:#17b}#frame-slider{width:120px;cursor:pointer;accent-color:#007acc}#frame-display{font-variant-numeric:tabular-nums;min-width:60px;display:inline-block;font-size:13px}.frame-range-label{display:flex;align-items:center;gap:3px;font-size:13px}.frame-range-label input[type=number]{width:50px;background:#3c3c3c;border:1px solid #555;color:#ddd;padding:2px 4px;border-radius:3px;font-size:12px;text-align:center}.frame-range-label input:disabled{opacity:.4}#main-content{flex:1;display:flex;overflow:hidden}.filter-panel{width:220px;min-width:120px;max-width:500px;display:flex;flex-direction:column;background:#2d2d2d;overflow:hidden;flex-shrink:0}.filter-panel.hidden{width:0;min-width:0;border:none;overflow:hidden}#panel-images{border-right:1px solid #444}#panel-sprites{border-left:1px solid #444}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;background:#333;border-bottom:1px solid #444;font-size:13px;font-weight:600;flex-shrink:0}.panel-btns{display:flex;gap:4px}.panel-btns button{padding:2px 8px;background:#3c3c3c;border:1px solid #555;color:#ddd;border-radius:3px;cursor:pointer;font-size:11px}.panel-btns button:hover{background:#505050}.panel-filter-row{padding:4px 8px;border-bottom:1px solid #444;flex-shrink:0}.panel-filter-row input{width:100%;background:#3c3c3c;border:1px solid #555;color:#ddd;padding:3px 6px;border-radius:3px;font-size:12px}.panel-filter-row input::placeholder{color:#777}.panel-filter-row input.regex-error{border-color:#e44;background:#3a2020}.resize-handle{width:5px;cursor:col-resize;background:transparent;flex-shrink:0;position:relative;z-index:10}.resize-handle:hover,.resize-handle.dragging{background:#007acc}.filter-list{flex:1;overflow-y:auto;list-style:none;padding:2px 0}.filter-list li{display:flex;align-items:center;gap:6px;padding:3px 8px;font-size:12px;cursor:default;white-space:nowrap;overflow:hidden}.filter-list li.regex-hidden{display:none}.filter-list li:hover{background:#383838}.filter-list li.active-sprite{background:#0e4880}.filter-list .item-label{flex:1;overflow:hidden;text-overflow:ellipsis}.filter-list .item-size{color:#888;font-size:11px;flex-shrink:0}.filter-list .btn-activate{padding:1px 6px;background:#3c3c3c;border:1px solid #555;color:#aaa;border-radius:3px;cursor:pointer;font-size:11px;flex-shrink:0}.filter-list .btn-activate:hover{background:#0e639c;color:#fff}.filter-list .item-thumb{width:32px;height:32px;object-fit:contain;flex-shrink:0;image-rendering:pixelated;background:#1e1e1e;border:1px solid #444;border-radius:2px}#stage-container{flex:1;overflow:hidden;position:relative;background:#252525;background-image:linear-gradient(45deg,#2a2a2a 25%,transparent 25%),linear-gradient(-45deg,#2a2a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#2a2a2a 75%),linear-gradient(-45deg,transparent 75%,#2a2a2a 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;cursor:grab}#stage-container:active{cursor:grabbing}#stage{display:block;width:100%;height:100%}#stage-container.drag-over{outline:3px dashed #007acc;outline-offset:-3px;background-color:#007acc14}#drop-hint{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;-webkit-user-select:none;user-select:none}#drop-hint.hidden{display:none}.drop-hint-icon{font-size:64px;margin-bottom:16px;opacity:.5}.drop-hint-text{font-size:18px;color:#ffffff80;margin-bottom:6px}.drop-hint-sub{font-size:13px;color:#ffffff4d}#statusbar{display:flex;justify-content:space-between;align-items:center;padding:4px 12px;background:#007acc;font-size:12px;color:#fff}#status-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#zoom-display{font-variant-numeric:tabular-nums;margin-left:16px;flex-shrink:0}#author-link{margin-left:16px;flex-shrink:0;color:#ffffffb3;text-decoration:none;font-size:11px}#author-link:hover{color:#fff;text-decoration:underline}#anim-size-display,#coord-display{font-variant-numeric:tabular-nums;margin-left:16px;flex-shrink:0;opacity:.85}.filter-list::-webkit-scrollbar{width:6px}.filter-list::-webkit-scrollbar-track{background:transparent}.filter-list::-webkit-scrollbar-thumb{background:#555;border-radius:3px}.filter-list::-webkit-scrollbar-thumb:hover{background:#777}.export-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000}.export-overlay.hidden{display:none}.export-dialog{background:#2d2d2d;border:1px solid #555;border-radius:8px;padding:24px 32px;min-width:320px;text-align:center;box-shadow:0 8px 32px #00000080}.export-title{font-size:16px;font-weight:700;margin-bottom:16px;color:#eee}.export-dialog progress{width:100%;height:8px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:4px;overflow:hidden;background:#444}.export-dialog progress::-webkit-progress-bar{background:#444;border-radius:4px}.export-dialog progress::-webkit-progress-value{background:#007acc;border-radius:4px}#export-status{margin:12px 0;font-size:13px;color:#aaa}#export-cancel{padding:6px 20px;background:#555;border:1px solid #666;color:#ddd;border-radius:4px;cursor:pointer;font-size:13px}#export-cancel:hover{background:#c53030;border-color:#e53e3e;color:#fff}