.splitter{gap:var(--space-6);margin-top:var(--space-8);flex-direction:column;display:flex}.splitter .dropzone{align-items:center;gap:var(--space-2);padding:var(--space-12) var(--space-6);border:1.5px dashed var(--border-strong);border-radius:var(--radius-lg);background:var(--surface);color:var(--text-2);cursor:pointer;text-align:center;transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);flex-direction:column;display:flex}.splitter .dropzone:hover,.splitter .dropzone.dragging{border-color:var(--accent);background:var(--accent-soft)}.splitter .dropzone svg{color:var(--accent)}.splitter .dropzone strong{color:var(--text)}.splitter .dropzone span{font-size:var(--text-sm)}.splitter .opening{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-8);color:var(--text-2);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);display:flex}.splitter .spinner{border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:var(--radius-full);width:16px;height:16px;animation:.8s linear infinite splitter-spin}@keyframes splitter-spin{to{transform:rotate(1turn)}}.splitter .error-box{align-items:flex-start;gap:var(--space-4);padding:var(--space-6);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--danger-soft);flex-direction:column;display:flex}.splitter .error-box p{color:var(--danger);font-size:var(--text-sm);max-width:60ch}.splitter .file-row{align-items:center;gap:var(--space-3);display:flex}.splitter .file-name{text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:550;overflow:hidden}.splitter .dims{font-size:var(--text-sm);color:var(--text-3);flex-shrink:0}.splitter .file-row .btn{flex-shrink:0;margin-left:auto}.splitter .mode-tabs{gap:var(--space-1);padding:var(--space-1);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-2);width:fit-content;display:inline-flex}.splitter .tab{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);color:var(--text-2);font-size:var(--text-sm);cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);background:0 0;border:none;font-weight:550}.splitter .tab:hover{color:var(--text)}.splitter .tab.active{background:var(--surface);color:var(--accent);box-shadow:0 1px 2px #10141c14}.splitter .mode-panel{gap:var(--space-4);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);flex-direction:column;display:flex}.splitter .stepper-row{gap:var(--space-4);flex-wrap:wrap;display:flex}.splitter .field{gap:var(--space-2);font-size:var(--text-sm);color:var(--text-2);flex-direction:column;display:flex}.splitter .field select,.splitter .field input[type=number]{padding:var(--space-2) var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);width:110px}.splitter .field.quality{flex:1;width:auto;min-width:220px;max-width:360px}.splitter .field.quality>span{justify-content:space-between;display:flex}.splitter input[type=range]{accent-color:var(--accent)}.splitter .presets{gap:var(--space-2);flex-direction:column;display:flex}.splitter .presets-label{font-size:var(--text-xs);color:var(--text-3)}.splitter .chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.splitter .chip{padding:var(--space-1) var(--space-3);border:1px solid var(--border-strong);border-radius:var(--radius-full);background:var(--surface);color:var(--text-2);font-size:var(--text-xs);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);font-weight:550}.splitter .chip:hover{border-color:var(--text-3)}.splitter .chip.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.splitter .preview{gap:var(--space-3);flex-direction:column;display:flex}.splitter .preview h2,.splitter .output-panel h2,.splitter .results-head h2{font-size:var(--text-base);font-weight:600}.splitter .preview-stage{padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:repeating-conic-gradient(#e9e9ec 0% 25%,#fff 0% 50%) 0 0/20px 20px;justify-content:center;display:flex}.splitter .preview-stage canvas{border-radius:var(--radius-sm);max-width:100%;max-height:480px}.splitter .caption{font-size:var(--text-sm);color:var(--text-2)}.splitter .output-panel{gap:var(--space-4);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);flex-direction:column;display:flex}.splitter .output-row{align-items:flex-end;gap:var(--space-6);flex-wrap:wrap;display:flex}.splitter .output-panel .field select{width:auto;min-width:160px}.splitter .hint{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text-2);font-size:var(--text-sm)}.splitter .split-btn{align-self:flex-start}.splitter .note.error{color:var(--danger);font-size:var(--text-sm)}.splitter .results{gap:var(--space-4);flex-direction:column;display:flex}.splitter .results-head{justify-content:space-between;align-items:center;gap:var(--space-4);display:flex}.splitter .grid-results{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(140px,1fr));display:grid}.splitter .piece{gap:var(--space-2);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);flex-direction:column;display:flex}.splitter .piece-thumb{aspect-ratio:1;border-radius:var(--radius-sm);background:repeating-conic-gradient(#e9e9ec 0% 25%,#fff 0% 50%) 0 0/12px 12px;justify-content:center;align-items:center;display:flex;overflow:hidden}.splitter .piece-thumb img{object-fit:contain;max-width:100%;max-height:100%}.splitter .piece-name{text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs);color:var(--text-3);overflow:hidden}.splitter .piece .btn-sm{padding:var(--space-1) var(--space-3);font-size:var(--text-xs)}@media (width<=639px){.splitter .file-row{flex-wrap:wrap}.splitter .file-row .btn{margin-left:0}}