.grid-split-wrapper{max-width:1400px}.upload-area{border:2px dashed var(--brand);border-radius:12px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:all .3s ease;background:rgba(var(--brand-rgb),.05);min-height:400px;display:flex;flex-direction:column;justify-content:center;align-items:center}.upload-area:hover{background:rgba(var(--brand-rgb),.1);border-color:var(--brand-strong)}.upload-area i{color:var(--brand);margin-bottom:1rem}.canvas-container{background:var(--bi-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 12px #00000014;min-height:400px}.preview-image{max-width:100%;max-height:300px;border-radius:8px;box-shadow:0 2px 8px #0000001a}.split-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:400px;margin:0 auto;background:var(--bi-border);padding:4px;border-radius:8px}.split-grid.grid-2x2{grid-template-columns:repeat(2,1fr)}.split-grid.grid-4x4{grid-template-columns:repeat(4,1fr)}.split-item{aspect-ratio:1;background:var(--bi-surface);border-radius:4px;overflow:hidden;cursor:pointer;transition:transform .2s ease;position:relative}.split-item:hover{transform:scale(1.05);box-shadow:0 4px 12px #00000026;z-index:1}.split-item img{width:100%;height:100%;object-fit:cover}.split-item .index-badge{position:absolute;top:4px;left:4px;background:rgba(var(--brand-rgb),.9);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}.split-item .download-btn{position:absolute;bottom:4px;right:4px;width:28px;height:28px;background:#28a745e6;color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s ease;font-size:12px}.split-item:hover .download-btn{opacity:1}.control-sidebar{background:var(--bi-surface);border-radius:12px;padding:1.5rem;box-shadow:0 2px 12px #00000014}.control-sidebar h6{color:#2d3436;font-weight:600;border-bottom:2px solid var(--bi-border);padding-bottom:.75rem}@media (max-width: 991px){.canvas-container{min-height:300px}.split-grid{max-width:300px}}@media (max-width: 576px){.upload-area{padding:2rem 1rem;min-height:250px}.split-grid{max-width:250px;gap:2px;padding:2px}}html[data-theme=dark] .control-sidebar h6{color:var(--bi-text)}html[data-theme=dark] .canvas-container,html[data-theme=dark] .control-sidebar{box-shadow:none;border:1px solid var(--bi-border)}
