html,body,#root{height:100%;margin:0}*{box-sizing:border-box}:root{--bg: #f5f6f8;--panel: #ffffff;--border: #e4e7ec;--text: #1a1d21;--muted: #6b7280;--accent: #2563eb;--accent-hover: #1d4ed8;--danger: #dc2626}body{font-family:-apple-system,PingFang SC,Microsoft YaHei,Segoe UI,sans-serif;color:var(--text);background:var(--bg)}input[type=number],input[type=text],select{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#fff;color:var(--text);outline:none}input[type=number]:focus,select:focus{border-color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent)}button{font-family:inherit;cursor:pointer;border:none;border-radius:6px;font-size:13px;padding:7px 14px;background:var(--accent);color:#fff;transition:background .15s}button:hover{background:var(--accent-hover)}button:disabled{background:#c4cbd6;cursor:not-allowed}button.ghost{background:#fff;color:var(--text);border:1px solid var(--border)}button.ghost:hover{background:#f3f4f6}.topbar{height:52px;display:flex;align-items:center;gap:12px;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--border)}.topbar h1{font-size:15px;margin:0;font-weight:600}.topbar .spacer{flex:1}.layout{display:flex;height:calc(100% - 52px)}.panel{width:320px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--border);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:14px}.viewer-host{flex:1;min-width:0;min-height:300px;background:radial-gradient(circle at 50% 35%,#fff,#e8ecf1 70%,#d7dce3);position:relative}.viewer-host canvas{display:block;touch-action:none}.viewer-ov{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);pointer-events:none}.viewer-ov .ov-yaw{font-variant-numeric:tabular-nums}.viewer-ov button{pointer-events:auto;background:#ffffffd1}.section{margin-bottom:18px}.section h2{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 8px}.field{display:flex;align-items:center;gap:8px;margin-bottom:8px}.field label{font-size:13px;width:56px;flex-shrink:0}.field-row{display:flex;gap:8px}.field-row .field{flex:1;margin-bottom:0}.hint{font-size:12px;color:var(--muted);line-height:1.5}.section .hint{margin:6px 0 0}.dim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dim-grid.two{grid-template-columns:repeat(2,1fr)}.dim-grid .dim label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}.dim-grid .dim input{width:100%}.seg{display:flex;background:#eef1f5;border-radius:8px;padding:3px;gap:2px;width:100%}.seg button{flex:1;background:transparent;color:var(--muted);padding:5px 0;font-size:12px;border-radius:6px}.seg button:hover{background:transparent;color:var(--text)}.seg button.active{background:#fff;color:var(--accent);font-weight:600;box-shadow:0 1px 3px #0000001f}.mode-seg{margin-bottom:10px}.toggle-row{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:6px}.switch{position:relative;width:34px;height:20px;flex-shrink:0;display:inline-block}.switch input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;margin:0;cursor:pointer;z-index:1}.switch .track{position:absolute;top:0;right:0;bottom:0;left:0;background:#cbd5e1;border-radius:999px;transition:background .15s;pointer-events:none}.switch .track:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;background:#fff;border-radius:50%;box-shadow:0 1px 2px #00000040;transition:left .15s}.switch input:checked+.track{background:var(--accent)}.switch input:checked+.track:after{left:16px}.btn-row{display:flex;gap:8px;margin-top:10px}.btn-row button{flex-shrink:0}.dropzone{border:1.5px dashed #c3cad4;border-radius:10px;padding:12px 10px;text-align:center;color:var(--muted);font-size:13px;cursor:pointer;transition:border-color .15s,background .15s}.dropzone:hover,.dropzone.over{border-color:var(--accent);background:#eff4ff}.dropzone img{max-width:100%;max-height:64px;border-radius:6px}.dropzone.empty{padding:20px 10px;display:flex;flex-direction:column;align-items:center;gap:4px}.dropzone.empty:hover .dz-icon{color:var(--accent)}.dz-icon{color:#9aa4b2;transition:color .15s}.thumb-row{display:flex;gap:6px;margin-top:10px}.xfm-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:3px;margin-top:4px}.xfm-tools button{padding:3px 5px;line-height:1;color:var(--muted)}.xfm-tools button:hover{color:var(--accent);border-color:var(--accent)}.xfm-state{font-size:11px;color:var(--accent);flex-basis:100%;text-align:center}.thumb{flex:1;min-width:0;border:1px solid var(--border);border-radius:8px;padding:4px;text-align:center}.thumb img{max-width:100%;height:40px;object-fit:contain}.thumb .name{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.thumb-empty{height:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px dashed #d5dae1;border-radius:6px;color:#a5aeb9;font-size:10px}.slot-list{display:flex;flex-direction:column;gap:8px}.slot{display:flex;gap:10px;align-items:center}.slot-thumb{width:64px;height:48px;border:1.5px dashed #c3cad4;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;flex-shrink:0;background:#fafbfc}.slot-thumb:hover{border-color:var(--accent);background:#eff4ff}.slot-thumb img{max-width:100%;max-height:100%;object-fit:contain}.slot-thumb.empty{flex-direction:column;gap:1px;color:#98a2af}.slot-thumb.empty:hover{color:var(--accent)}.slot-thumb .st-cap{font-size:10px}.slot-info{flex:1;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13px}.slot-actions{display:flex;gap:6px;flex-shrink:0}button.mini{padding:4px 10px;font-size:12px}button.mini.danger{color:var(--danger)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f12188c;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px}.modal-card{background:#fff;border-radius:12px;padding:18px;max-width:960px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 12px 48px #00000040}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.modal-head h3{margin:0 0 4px;font-size:15px}.modal-head p{margin:0}.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}.region-tabs{display:flex;gap:8px;align-items:center;margin:14px 0 10px}.region-tabs .tab{background:#f1f3f6;color:var(--text);padding:5px 14px;font-size:13px}.region-tabs .tab.active{color:#fff}.reset-btn{margin-left:10px}.cropper-card{display:flex;flex-direction:column;height:min(92vh,880px);overflow:hidden}.zoom-group{display:flex;align-items:center;gap:6px;margin-left:auto}.pan-hint{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}.zoom-label{font-size:12px;color:var(--muted);min-width:42px;text-align:center}.crop-stage{flex:1;min-height:0;overflow:hidden;border:1px solid var(--border);border-radius:8px}.crop-scroll{width:100%;height:100%;overflow:auto;display:flex;cursor:grab;background:linear-gradient(45deg,#eef1f4 25%,transparent 25%,transparent 75%,#eef1f4 75%),linear-gradient(45deg,#eef1f4 25%,transparent 25%,transparent 75%,#eef1f4 75%);background-size:16px 16px;background-position:0 0,8px 8px}.crop-scroll:active{cursor:grabbing}.crop-scroll>canvas{display:block;margin:auto;cursor:crosshair}.crop-scroll>canvas.panning{cursor:grab}.crop-scroll>canvas.panning:active{cursor:grabbing}.warn-slot{height:58px;margin-top:10px;overflow:hidden}.warn-slot .warn-banner{margin-top:0}.warn-banner{margin-top:10px;background:#fef3c7;border:1px solid #fcd34d;color:#92400e;border-radius:8px;padding:8px 12px;font-size:12px;display:flex;flex-direction:column;gap:4px}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%);background:#1a1d21;color:#fff;padding:9px 18px;border-radius:8px;font-size:13px;z-index:200}@media (max-width: 760px){.layout{flex-direction:column-reverse}.panel{width:100%;border-right:none;border-top:1px solid var(--border);max-height:46vh}.viewer-host{min-height:40vh}}