*{box-sizing:border-box;margin:0;padding:0}body{background:#f5f4f0;max-width:1000px;margin:0 auto;padding:20px;font-family:system-ui,sans-serif}.card{background:#fff;border:1px solid #ddd;border-radius:8px;margin-bottom:20px;padding:20px}h2{margin-bottom:8px;font-size:20px;font-weight:500}.subtitle{color:#666;margin-bottom:20px;font-size:13px}.drop-zone{text-align:center;cursor:pointer;border:2px dashed #999;border-radius:8px;padding:40px;transition:background .2s}.drop-zone:hover{background:#f9f9f9}.drop-zone.over{background:#e8f4ff;border-color:#3498db}#file-input{display:none}.status-text{color:#666;min-height:18px;margin-top:8px;font-size:13px}.progress-bar{background:#e0e0e0;border-radius:2px;height:4px;margin-top:8px;display:none;overflow:hidden}.progress-bar.active{display:block}.progress-fill{background:#3498db;border-radius:2px;width:0%;height:100%;transition:width .2s}.viewer-wrap{background:#2a2a2a;border:2px solid #3498db;border-radius:8px;width:100%;height:400px;margin:20px 0;display:none;position:relative;overflow:hidden}.viewer-wrap.active{display:block}.viewer-canvas{cursor:grab;width:100%;height:100%;display:block}.viewer-canvas:active{cursor:grabbing}.viewer-hint{color:#ffffff80;pointer-events:none;text-align:right;font-size:11px;line-height:1.4;position:absolute;bottom:10px;right:10px}.controls{flex-wrap:wrap;align-items:flex-end;gap:12px;display:flex}.field{flex-direction:column;flex:1;gap:4px;min-width:120px;display:flex}label{color:#666;text-transform:uppercase;font-size:12px;font-weight:500}input[type=number],select{border:1px solid #ccc;border-radius:4px;height:36px;padding:0 10px;font-size:14px}button{cursor:pointer;white-space:nowrap;border:none;border-radius:4px;height:36px;padding:0 20px;font-size:14px;transition:background .2s}button:disabled{color:#fff;cursor:not-allowed;background:#bdc3c7}.btn-primary{color:#fff;background:#3498db}.btn-primary:hover:not(:disabled){background:#2980b9}.btn-secondary{color:#333;background:#fff;border:1px solid #ccc}.btn-secondary:hover{background:#f5f5f5}.stats{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin-bottom:20px;display:grid}.stat{background:#f5f4f0;border-radius:6px;padding:12px}.stat-label{color:#666;text-transform:uppercase;margin-bottom:4px;font-size:11px}.stat-val{font-size:20px;font-weight:500}.slice-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;max-height:400px;margin-top:15px;display:grid;overflow-y:auto}.slice-card{cursor:pointer;border:1px solid #ddd;border-radius:6px;padding:8px;transition:all .2s}.slice-card:hover{background:#f9f9f9;border-color:#3498db}.slice-card svg{width:100%;height:100px;display:block}.slice-name{color:#666;text-align:center;margin-top:4px;font-size:11px}.hidden{display:none}.button-row{gap:10px;margin-top:20px;display:flex}