:root{--black: #000000;--surface: #0a0a0a;--elevated: #111111;--border: #1e1e1e;--border-hover: #333333;--text: #e0e0e0;--text-mid: #888888;--text-muted: #555555;--accent: #ffffff;--accent-dim: #aaaaaa;--accent-subtle:#666666;--state-normal: #555555;--state-hsplit: #3d7a7a;--state-vsplit: #7a3d3d;--state-rotate: #6a4d7a;--state-locked: #444444;--state-sep: #333333;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 20px;--sp-6: 24px;--sp-8: 32px;--sp-10: 40px;--sp-12: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--font-body: "DM Sans", system-ui, -apple-system, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background:var(--black);color:var(--text);min-height:100vh;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{display:grid;grid-template-columns:360px 1fr;min-height:100vh}.col-left{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-5);border-right:1px solid var(--border);height:100vh;position:sticky;top:0;overflow-y:auto}.col-right{display:flex;flex-direction:column;gap:var(--sp-6);padding:var(--sp-8);min-height:100vh}header{padding-bottom:var(--sp-4);border-bottom:1px solid var(--border)}.logo-wrapper{display:flex;align-items:center;gap:var(--sp-3)}.logo-icon{width:36px;height:36px;background:var(--accent);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--black);flex-shrink:0}h1{font-size:1.15rem;font-weight:700;letter-spacing:-.03em;color:var(--accent);line-height:1.2}.tagline{color:var(--text-muted);font-size:.75rem;margin-top:2px;letter-spacing:.01em}.status-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.tech-pill{display:inline-flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border);padding:4px 8px;border-radius:100px;font-size:.65rem;font-family:var(--font-mono);color:var(--text-muted);letter-spacing:.02em}.tech-pill .dot{width:6px;height:6px;border-radius:50%}.dot.loading{background:var(--text-muted);animation:pulse 1.2s ease infinite}.dot.ready{background:var(--accent);animation:none}.dot.error{background:var(--text-mid);animation:none}@keyframes pulse{0%,to{opacity:1}50%{opacity:.2}}.drop-zone{position:relative;border:1px dashed var(--border-hover);border-radius:var(--radius-lg);padding:var(--sp-6) var(--sp-5);text-align:center;cursor:pointer;transition:border-color .2s,background .2s;background:var(--surface)}.drop-zone:hover{border-color:var(--accent-subtle);background:var(--elevated)}.drop-zone.drag-over{border-color:var(--accent-dim);border-style:solid;background:var(--elevated)}.drop-zone.has-file{border-color:var(--accent-dim);border-style:solid}.drop-icon{color:var(--text-muted);margin-bottom:var(--sp-2)}.drop-title{font-size:.9rem;font-weight:600;color:var(--text)}.drop-hint{color:var(--text-muted);font-size:.8rem;margin-top:var(--sp-1)}.file-badge{display:inline-flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-3);padding:var(--sp-2) var(--sp-3);background:var(--elevated);border:1px solid var(--border-hover);border-radius:var(--radius-md)}.file-badge .check-icon{color:var(--accent);font-size:.85rem}.file-badge .name{font-family:var(--font-mono);font-size:.78rem;color:var(--text)}.file-badge .size{font-size:.72rem;color:var(--text-muted)}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.card-header{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);font-weight:600;font-size:.78rem;color:var(--text-mid);text-transform:uppercase;letter-spacing:.06em;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-3)}.card-body{padding:var(--sp-4)}.placeholder-card{flex:1;display:flex}.placeholder-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4);color:var(--text-muted);font-size:.85rem}.settings-body{display:flex;flex-direction:column;gap:var(--sp-4)}.setting{display:flex;flex-direction:column;gap:var(--sp-2)}.settings-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}.settings-pair .pill{flex:none}.setting-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:500;white-space:nowrap}.pills{display:flex;gap:var(--sp-1);flex-wrap:nowrap}.pill{padding:5px 10px;background:var(--elevated);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.72rem;font-family:var(--font-mono);color:var(--text-muted);cursor:pointer;transition:all .15s ease;line-height:1;flex:1;text-align:center;min-width:0}.pill:hover{border-color:var(--border-hover);color:var(--text);background:var(--border)}.pill.active{background:var(--accent);border-color:var(--accent);color:var(--black);font-weight:600}.picker-count{font-size:.72rem;color:var(--text-muted);font-weight:400;text-transform:none;letter-spacing:0}.legend{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.legend-item{font-size:.68rem;color:var(--text-muted);padding:4px 8px}.legend-sep{color:var(--accent-subtle)}.legend-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.68rem;font-family:var(--font-body);font-weight:500;color:var(--text-muted);cursor:pointer;transition:all .15s ease}.legend-btn:hover{background:var(--elevated);border-color:var(--border-hover);color:var(--text)}.legend-btn[data-mode=normal] .sq{background:var(--state-normal)}.legend-btn[data-mode=hsplit] .sq{background:var(--state-hsplit)}.legend-btn[data-mode=vsplit] .sq{background:var(--state-vsplit)}.legend-btn[data-mode=rotate] .sq{background:var(--state-rotate)}.legend-btn[data-mode=hsplit]:hover{border-color:var(--state-hsplit);color:var(--state-hsplit)}.legend-btn[data-mode=vsplit]:hover{border-color:var(--state-vsplit);color:var(--state-vsplit)}.legend-btn[data-mode=rotate]:hover{border-color:var(--state-rotate);color:var(--state-rotate)}.legend-btn:hover .sq{opacity:.8}.legend-btn .sq{width:8px;height:8px;border-radius:2px}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:var(--sp-2);max-height:calc(100vh - 220px);overflow-y:auto;padding:2px}.image-grid::-webkit-scrollbar{width:4px}.image-grid::-webkit-scrollbar-track{background:transparent}.image-grid::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:2px}.img-item{position:relative;aspect-ratio:1;background:var(--elevated);border:2px solid var(--border);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:border-color .15s,transform .15s}.img-item:hover{transform:scale(1.04);z-index:10}.img-item img{width:100%;height:100%;object-fit:contain;background:#fff;transition:transform .2s ease}.img-item .badge{position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:.5rem;font-weight:700;color:#fff}.img-item .name{position:absolute;bottom:0;left:0;right:0;padding:2px 4px;background:#000000d9;font-size:.48rem;font-family:var(--font-mono);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-muted)}.img-item.s0{border-color:var(--state-normal)}.img-item.s0 .badge{background:var(--state-normal)}.img-item.s1{border-color:var(--state-hsplit)}.img-item.s1 .badge{background:var(--state-hsplit)}.img-item.s2{border-color:var(--state-vsplit)}.img-item.s2 .badge{background:var(--state-vsplit)}.img-item.s3{border-color:var(--state-rotate)}.img-item.s3 .badge{background:var(--state-rotate)}.img-item.locked{border-color:var(--state-locked);opacity:.5;cursor:default}.img-item.locked .badge{background:var(--state-locked)}.img-item.sep{border-color:var(--state-sep);opacity:.5;cursor:default}.img-item.sep .badge{background:var(--state-sep)}.split-lines{position:absolute;inset:0;pointer-events:none;z-index:5}.split-line{position:absolute;top:0;bottom:0;width:3px;transform:translate(-50%);border-radius:1px}.split-line.split-h{background:linear-gradient(180deg,#4a9e9e,#3d7a7a);box-shadow:0 0 4px #00000080,0 0 2px #3d7a7a99}.split-line.split-v{background:linear-gradient(180deg,#9e4a4a,#7a3d3d);box-shadow:0 0 4px #00000080,0 0 2px #7a3d3d99}[data-rot=cw] .img-item.s1:hover img,[data-rot=cw] .img-item.s3:hover img{transform:rotate(90deg) scale(.72)}[data-rot=ccw] .img-item.s1:hover img,[data-rot=ccw] .img-item.s3:hover img{transform:rotate(-90deg) scale(.72)}.img-item.s3:after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:var(--state-rotate);opacity:0;pointer-events:none;z-index:5;transition:opacity .15s;background:#0000004d}[data-rot=cw] .img-item.s3:after{content:"↻"}[data-rot=ccw] .img-item.s3:after{content:"↺"}.img-item.s3:hover:after{opacity:1}.actions{margin-top:auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);border:none;border-radius:var(--radius-md);font-size:.82rem;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all .15s ease;width:100%;letter-spacing:.01em}.btn-primary{background:var(--accent);color:var(--black)}.btn-primary:hover{background:var(--accent-dim)}.btn-primary:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed}.progress-header{display:flex;justify-content:space-between;margin-bottom:var(--sp-2);font-size:.78rem;color:var(--text-mid)}.progress-value{font-family:var(--font-mono);color:var(--accent);font-size:.78rem}.progress-bar{height:3px;background:var(--elevated);border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--accent);width:0%;transition:width .3s ease;border-radius:2px}.log{margin-top:var(--sp-3);max-height:180px;overflow-y:auto;background:var(--black);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);font-family:var(--font-mono);font-size:.65rem;line-height:1.7;color:var(--text-muted)}.log::-webkit-scrollbar{width:4px}.log::-webkit-scrollbar-track{background:transparent}.log::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:2px}.log-entry{display:flex;gap:6px;align-items:baseline}.log-entry.success{color:#70b880}.log-entry.error{color:#b87070}.log-entry.warning{color:#b8a070}.log-ts{color:var(--text-muted);font-size:.6rem;min-width:44px;flex-shrink:0;opacity:.6}.log-tag{font-size:.58rem;font-weight:600;padding:1px 5px;border-radius:2px;text-transform:uppercase;min-width:48px;text-align:center;flex-shrink:0;display:inline-block}.log-tag.convert{background:#ffffff0f;color:var(--text-mid)}.log-tag.split{background:#3d7a7a26;color:#5aadad}.log-tag.fix{background:#70b8801f;color:#70b880}.log-tag.skip{background:#ffffff0a;color:var(--text-muted)}.log-tag.info{background:#648cc81f;color:#7a9ec8}.log-tag.error{background:#b870701f;color:#b87070}.log-tag.done{background:#70b8801f;color:#70b880}.log-msg{flex:1;min-width:0}.log-msg strong{color:var(--text);font-weight:600}.log-detail{color:var(--text-muted);font-size:.6rem}.log-saved{color:#70b880}.log-summary{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);margin-top:var(--sp-2);overflow:hidden}.log-summary-title{padding:6px 10px;font-weight:600;font-size:.65rem;border-bottom:1px solid var(--border);color:var(--text);text-transform:uppercase;letter-spacing:.04em}.log-summary-table{width:100%;font-size:.62rem;border-collapse:collapse}.log-summary-table td{padding:4px 10px;border-bottom:1px solid var(--border)}.log-summary-table tr:last-child td{border-bottom:none}.log-summary-table td:first-child{color:var(--text-muted)}.log-summary-table td:last-child{color:var(--text);font-weight:500;text-align:right}.log-summary-table .saved{color:#70b880}.log-summary-table .increased{color:#b8a070}.results-bar{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4)!important}.results-stats{display:flex;align-items:center;gap:var(--sp-4);flex:1;min-width:0}.stat-inline{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}.stat-val{font-size:.95rem;font-weight:700;font-family:var(--font-mono);color:var(--text);white-space:nowrap}.stat-inline.highlight .stat-val,.stat-value.green,.stat-value.highlight{color:var(--accent)}.stat-lbl{font-size:.6rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.stat-arrow{color:var(--text-muted);font-size:.85rem;flex-shrink:0}.btn-download{display:inline-flex;align-items:center;justify-content:center;padding:var(--sp-3) var(--sp-5);border:none;border-radius:var(--radius-md);font-size:.78rem;font-weight:600;font-family:var(--font-body);cursor:pointer;transition:all .15s ease;background:var(--accent);color:var(--black);white-space:nowrap;flex-shrink:0;letter-spacing:.01em;width:auto}.btn-download:hover{background:var(--accent-dim)}footer{padding-top:var(--sp-4);border-top:1px solid var(--border);color:var(--text-muted);font-size:.68rem;letter-spacing:.02em}.hidden{display:none!important}.col-left::-webkit-scrollbar{width:4px}.col-left::-webkit-scrollbar-track{background:transparent}.col-left::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}@media (max-width: 820px){.app{grid-template-columns:1fr 1fr}.col-left{padding:var(--sp-4);height:auto;position:static;border-right:1px solid var(--border)}.col-right{padding:var(--sp-4)}.settings-pair{grid-template-columns:1fr}.results-bar{flex-direction:column;gap:var(--sp-3)}.results-stats{justify-content:center}.btn-download{width:100%}}@media (max-width: 600px){.app{grid-template-columns:1fr}.col-left{height:auto;position:static;border-right:none;border-bottom:1px solid var(--border)}}