.spr-page{position:fixed;top:var(--navbar-h, 46px);bottom:0;display:flex;flex-direction:column;padding:var(--space-6) var(--page-margin) 0;box-sizing:border-box;width:min(100%,1500px);left:50%;transform:translate(-50%)}.spr-title{flex-shrink:0;margin-bottom:var(--space-4)}.spr-body{display:flex;gap:var(--space-6);flex:1;min-height:0;overflow:hidden}.spr-sidebar{width:220px;flex-shrink:0;overflow-y:auto;padding-bottom:var(--space-6);scrollbar-width:thin;scrollbar-color:var(--line) transparent}.spr-sidebar::-webkit-scrollbar{width:4px}.spr-sidebar::-webkit-scrollbar-track{background:transparent}.spr-sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--radius)}.spr-sidebar::-webkit-scrollbar-thumb:hover{background:var(--ink-dim)}.spr-main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}.spr-tree-item,.spr-tree-parent{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + var(--depth, 0) * var(--space-4));font-size:var(--text-base);color:var(--ink-dim);border-radius:var(--radius);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none}.spr-tree-item:hover,.spr-tree-parent:hover{background:var(--panel);color:var(--ink)}.spr-tree-item.is-active,.spr-tree-parent.is-active{background:var(--panel);color:var(--ink);font-weight:500}.spr-tree-arrow{font-size:var(--text-sm);display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin:calc(-1 * var(--space-1)) 0 calc(-1 * var(--space-1)) calc(-1 * var(--space-1));border-radius:var(--radius);flex-shrink:0;transition:transform var(--t-fast)}.spr-tree-arrow:hover{background:var(--line)}.spr-tree-group.is-expanded>.spr-tree-parent .spr-tree-arrow{transform:rotate(90deg)}.spr-tree-children{padding-left:0}.spr-tree-item{padding-left:calc(var(--space-3) + var(--depth, 0) * var(--space-4) + 20px + var(--space-2))}.spr-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);height:64px;flex-shrink:0;overflow:hidden}.spr-breadcrumb{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--space-0);font-size:var(--text-base);color:var(--ink-dim);overflow:hidden;min-width:0}.spr-bc-item{color:var(--ink-dim);cursor:pointer;padding:var(--space-0) var(--space-1);border-radius:var(--radius);white-space:nowrap}.spr-bc-item:hover{color:var(--ink);background:var(--panel)}.spr-bc-item.is-current{color:var(--ink);font-weight:500;cursor:default}.spr-bc-item.is-current:hover{background:none}.spr-bc-sep{color:var(--ink-dim);padding:0 1px;flex-shrink:0}.spr-download-btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);background:transparent;border:var(--border) solid var(--line);border-radius:var(--radius);font-family:inherit;font-size:var(--text-base);color:var(--ink-dim);text-decoration:none;flex-shrink:0;white-space:nowrap;transition:border-color var(--t-fast),color var(--t-fast)}.spr-download-btn:hover{border-color:var(--ink-dim);color:var(--ink)}.spr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:var(--space-2);align-content:start;overflow-y:auto;flex:1;min-height:0;padding-bottom:var(--space-6);scrollbar-width:thin;scrollbar-color:var(--line) transparent}.spr-sprite-item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-2) var(--space-1);background:transparent;border:var(--border) solid var(--line);border-radius:var(--radius);cursor:default;transition:border-color var(--t-fast)}.spr-sprite-item:hover{border-color:var(--ink-dim)}.spr-sprite-img{width:160px;height:160px;object-fit:contain;image-rendering:pixelated}.spr-sprite-label{font-size:var(--text-sm);color:var(--ink-dim);text-align:center;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.spr-follower-dirs{display:flex;gap:var(--space-1)}.spr-follower-img{width:96px;height:84px;image-rendering:pixelated}.spr-follower-label{max-width:400px}.spr-grid:has(.spr-follower-dirs){grid-template-columns:repeat(auto-fill,minmax(min(420px,100%),1fr))}.spr-sprite-item,.spr-follower-cell{position:relative}.spr-follower-cell{display:block}.spr-dl{position:absolute;top:var(--space-1);right:var(--space-1);display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:var(--panel);border:var(--border) solid var(--line);border-radius:var(--radius);color:var(--ink-dim);cursor:pointer;opacity:0;transition:opacity var(--t-fast),color var(--t-fast),border-color var(--t-fast)}.spr-dl:hover{color:var(--ink);border-color:var(--ink-dim)}.spr-sprite-item:hover>.spr-dl,.spr-follower-cell:hover>.spr-dl,.spr-dl:focus-visible{opacity:1}.spr-sprite-item:has(.spr-follower-cell:hover)>.spr-dl-all{opacity:0;pointer-events:none}@media(hover:none){.spr-dl{opacity:1}.spr-follower-cell .spr-dl{display:none}}.spr-folder-item{display:flex;align-items:center;min-height:56px;padding:var(--space-3) var(--space-4);background:transparent;border:var(--border) solid var(--line);border-radius:var(--radius);font-family:inherit;font-size:var(--text-base);font-weight:500;color:var(--ink);text-align:left;cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}.spr-folder-item:hover{border-color:var(--ink-dim);background:var(--panel)}.spr-empty{grid-column:1 / -1}.spr-empty{color:var(--ink-dim);font-size:var(--text-base);padding:var(--space-4) 0}
