*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #111113;--surface: #1c1c1f;--border: #2e2e32;--accent: #6c63ff;--accent-dim: #3d3880;--text: #e8e8ec;--muted: #6b6b75;--library-w: 220px;--compare-w: 180px;--header-h: 72px;--slider-w: 4px;--handle-size: 40px;--radius: 8px}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,sans-serif;font-size:13px}#app{display:flex;flex-direction:column;height:100vh}#header{height:var(--header-h);flex-shrink:0;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;background:var(--surface)}.obj-dropzone{display:flex;align-items:center;gap:10px;flex:1;height:52px;border:1.5px dashed var(--border);border-radius:var(--radius);padding:0 20px;cursor:pointer;transition:border-color .15s,background .15s;-webkit-user-select:none;user-select:none}.obj-dropzone:hover,.obj-dropzone.drag-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.obj-dropzone .drop-icon{font-size:20px;opacity:.6}.obj-dropzone .drop-label{color:var(--muted);flex:1}.obj-filename{font-size:12px;color:var(--muted);font-family:monospace}.obj-filename.loaded{color:#7cfc8a}.obj-filename.error{color:#ff6b6b}.annotation-toggle{display:flex;align-items:center;justify-content:center;width:38px;height:38px;margin-left:10px;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--muted);cursor:pointer;transition:background .12s,color .12s,border-color .12s}.annotation-toggle svg{width:18px;height:18px;pointer-events:none}.annotation-toggle:hover{background:var(--border);color:var(--text)}.annotation-toggle.active{background:#f59e0b22;border-color:#f59e0b;color:#f59e0b}.view-mode-group{display:flex;gap:2px;margin-left:12px;flex-shrink:0;background:var(--bg);border:1px solid var(--border);border-radius:calc(var(--radius) + 2px);padding:3px}.mode-btn{display:flex;align-items:center;justify-content:center;width:36px;height:30px;border:none;border-radius:var(--radius);background:transparent;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.05em;cursor:pointer;transition:background .12s,color .12s}.mode-btn svg{width:16px;height:16px;pointer-events:none}.mode-btn:hover{background:var(--border);color:var(--text)}.mode-btn.active{background:var(--accent);color:#fff}#main{display:flex;flex:1;overflow:hidden}.panel-title{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}#library-panel{width:var(--library-w);flex-shrink:0;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 8px;border-bottom:1px solid var(--border);flex-shrink:0}#add-set-btn{font-size:11px;padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius);background:transparent;color:var(--accent);cursor:pointer;transition:background .12s,border-color .12s}#add-set-btn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:var(--accent)}#library-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:8px}.library-card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:8px;display:flex;flex-direction:column;gap:6px;position:relative}.card-header{display:flex;align-items:center;gap:4px}.card-name{flex:1;background:transparent;border:none;border-bottom:1px solid transparent;color:var(--text);font-size:12px;font-weight:600;padding:1px 2px;outline:none;transition:border-color .12s}.card-name:focus{border-bottom-color:var(--accent)}.card-delete{width:18px;height:18px;border:none;border-radius:4px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s,color .12s}.card-delete:hover{background:#ff505033;color:#ff6b6b}.card-slots{display:flex;flex-direction:column;gap:3px}.card-slot-row{display:flex;align-items:center;gap:5px;padding:4px 6px;border:1px dashed var(--border);border-radius:5px;cursor:pointer;transition:border-color .12s,background .12s;position:relative;min-height:30px}.card-slot-row:hover,.card-slot-row.drag-over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}.card-slot-row.loaded{border-color:var(--accent-dim)}.card-slot-row.error{border-color:#ff6b6b}.card-slot-icon{font-size:13px;flex-shrink:0}.card-slot-label{font-size:11px;font-weight:500;flex:1}.card-slot-status{font-size:10px;color:var(--muted);font-family:monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60px}.card-slot-remove{width:16px;height:16px;border:none;border-radius:50%;background:transparent;color:var(--muted);font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;transition:opacity .12s,background .12s;flex-shrink:0}.card-slot-row:hover .card-slot-remove{opacity:1}.card-slot-remove:hover{background:#ff505033;color:#ff6b6b}.card-add-texture{width:100%;padding:5px;border:1px dashed var(--border);border-radius:5px;background:transparent;color:var(--muted);font-size:11px;cursor:pointer;transition:border-color .12s,color .12s}.card-add-texture:hover{border-color:var(--accent);color:var(--accent)}.card-actions{display:flex;gap:4px}.card-actions button{flex:1;padding:4px 0;border-radius:5px;border:1px solid var(--border);background:transparent;color:var(--muted);font-size:11px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}.card-actions button:hover{background:var(--border);color:var(--text)}.card-set-a{color:#a8e4ff!important;border-color:#a8e4ff44!important}.card-set-a:hover{background:#a8e4ff18!important}.card-set-b{color:#ffcba8!important;border-color:#ffcba844!important}.card-set-b:hover{background:#ffcba818!important}.slot-picker{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:3px;display:flex;flex-direction:column;gap:1px;box-shadow:0 6px 20px #00000080;margin-top:2px}.picker-option{display:flex;align-items:center;gap:7px;padding:6px 8px;border:none;border-radius:calc(var(--radius) - 2px);background:transparent;color:var(--text);font-size:11px;text-align:left;cursor:pointer;transition:background .1s}.picker-option:hover{background:color-mix(in srgb,var(--accent) 15%,transparent)}.slot-error{font-size:10px;color:#ff6b6b}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.error{animation:shake .3s ease}#canvas-container{flex:1;position:relative;overflow:hidden}#viewer-canvas{display:block;width:100%;height:100%}#empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none}.empty-icon{font-size:48px;opacity:.15}#empty-state p{color:var(--muted);font-size:14px}#slider-line{position:absolute;top:0;bottom:0;width:var(--slider-w);background:var(--accent);transform:translate(-50%);pointer-events:none;box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}#slider-handle{position:absolute;top:50%;width:var(--handle-size);height:var(--handle-size);transform:translate(-50%,-50%);background:var(--accent);border-radius:50%;cursor:ew-resize;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 16px #00000080;transition:background .15s,transform .1s;z-index:10}#slider-handle:hover{background:color-mix(in srgb,var(--accent) 80%,white);transform:translate(-50%,-50%) scale(1.1)}#slider-handle:active{transform:translate(-50%,-50%) scale(.95)}#slider-handle svg{width:18px;height:18px;color:#fff;pointer-events:none}.side-label{position:absolute;top:12px;font-size:11px;font-weight:700;letter-spacing:.12em;padding:3px 8px;border-radius:4px;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none;-webkit-user-select:none;user-select:none}#label-a{left:0;text-align:right;padding-right:12px;color:#a8e4ff}#label-b{right:12px;color:#ffcba8}.annotations-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.annotation{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:4px}.annotation-dot{width:10px;height:10px;border-radius:50%;background:#f59e0b;border:2px solid #fff;box-shadow:0 0 6px #0009;flex-shrink:0;z-index:1}.annotation-bubble{display:flex;align-items:center;gap:5px;background:#0f0f12e6;border:1px solid #f59e0b55;border-radius:6px;padding:4px 8px;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 12px #00000080;transform:translateY(-18px)}.annotation-label{font-size:11px;font-weight:500;color:var(--text)}.annotation-delete{width:14px;height:14px;border:none;border-radius:3px;background:transparent;color:var(--muted);font-size:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;transition:color .12s}.annotation-delete:hover{color:#ff6b6b}#compare-panel{width:var(--compare-w);flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;gap:0;padding:10px 10px 8px}#compare-panel .panel-title{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}.compare-slot{display:flex;align-items:center;gap:8px;padding:10px 8px;border:1px solid var(--border);border-radius:var(--radius);transition:border-color .15s}.compare-slot.assigned{border-color:var(--accent-dim)}.compare-slot-badge{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}#compare-a .compare-slot-badge{background:#a8e4ff22;color:#a8e4ff}#compare-b .compare-slot-badge{background:#ffcba822;color:#ffcba8}.compare-slot-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.compare-slot-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-slot-hint{font-size:10px;color:var(--muted)}.compare-clear-btn{width:18px;height:18px;border:none;border-radius:4px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s,color .12s}.compare-clear-btn:hover{background:#ff505033;color:#ff6b6b}.compare-divider{height:8px}