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}.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}.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}.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:auto}.crop-stage{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;border:1px solid var(--border);border-radius:8px;overflow:auto;text-align:center}.share-card{max-width:560px}.share-row{display:flex;gap:8px;margin-top:12px}.share-row input{flex:1;min-width:0;font-size:12px;color:var(--muted);direction:ltr}.share-row button{flex-shrink: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}}