:root{--iob-primary:var(--main-primary);--iob-text:#1e293b;--iob-text-muted:#64748b;--iob-bg:#fff;--iob-bg-secondary:#f8fafc;--iob-border:#e2e8f0;--iob-border-hover:#cbd5e1;--iob-canvas-bg:#1e293b;--iob-panel-bg:#fff;--iob-radius:var(--main-radius);--iob-radius-lg:var(--main-radius-lg)}._iob-container{flex-direction:column;min-height:500px;display:flex}._iob-editor{min-height:500px}._iob-layout{border-style:solid;border-width:1px;border-color:var(--iob-border);border-radius:var(--iob-radius-lg);gap:0;min-height:500px;display:flex;overflow:hidden}@media (max-width:768px){._iob-container{padding-left:1rem;padding-right:1rem}._iob-layout{flex-direction:column}}._iob-upload{border-style:dashed;border-width:2px;border-color:var(--iob-border);border-radius:var(--iob-radius-lg);background:var(--iob-bg);cursor:pointer;justify-content:center;align-items:center;min-height:350px;transition:border-color .2s;display:flex}._iob-upload:hover{border-color:var(--iob-primary)}._iob-upload.dragover{border-color:var(--iob-primary);background:#6366f10a}._iob-upload-inner{text-align:center;padding:var(--main-space-8)}._iob-upload-icon{color:var(--iob-text-muted);margin-bottom:var(--main-space-4);opacity:.5}._iob-upload-text{font-size:var(--main-text-base);color:var(--iob-text);margin-bottom:var(--main-space-1);font-weight:500}._iob-upload-hint{font-size:var(--main-text-sm);color:var(--iob-text-muted);margin-bottom:var(--main-space-2)}._iob-upload-formats{font-size:var(--main-text-xs);color:var(--iob-text-muted);opacity:.7}._iob-panel{background:var(--iob-panel-bg);border-right-style:solid;border-right-width:1px;border-right-color:var(--iob-border);flex-direction:column;width:300px;min-width:300px;max-height:80vh;display:flex;overflow-y:auto}._iob-section{padding:var(--main-space-3);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--iob-border)}._iob-output-section{border-bottom-width:0}._iob-section-header{margin-bottom:var(--main-space-2);justify-content:space-between;align-items:center;display:flex}._iob-section-title{font-size:var(--main-text-xs);color:var(--iob-text);font-weight:600}._iob-btn-icon{border-radius:var(--iob-radius);width:28px;height:28px;color:var(--iob-text-muted);cursor:pointer;background:0 0;border-width:0;justify-content:center;align-items:center;display:inline-flex}._iob-btn-icon:hover{background:var(--iob-bg-secondary);color:var(--iob-text)}._iob-thumb{align-items:center;gap:var(--main-space-2);background:var(--iob-bg-secondary);border-radius:var(--iob-radius);padding:6px;display:flex}._iob-thumb img{object-fit:cover;border-radius:4px;width:40px;height:40px}._iob-thumb-name{font-size:var(--main-text-xs);color:var(--iob-text-muted);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}._iob-overlay-upload{border-style:dashed;border-width:2px;border-color:var(--iob-border);border-radius:var(--iob-radius);cursor:pointer;transition:border-color .2s;overflow:hidden}._iob-overlay-upload:hover{border-color:var(--iob-primary)}._iob-overlay-upload.dragover{border-color:var(--iob-primary);background:#6366f10a}._iob-overlay-placeholder{padding:var(--main-space-3);color:var(--iob-text-muted);font-size:var(--main-text-sm);justify-content:center;align-items:center;gap:8px;display:flex}._iob-swap-section{justify-content:center;align-items:center;display:flex}._iob-swap-btn{border-style:solid;border-width:1px;border-color:var(--iob-border);border-radius:var(--iob-radius);color:var(--iob-text-muted);font-size:var(--main-text-xs);cursor:pointer;background:0 0;align-items:center;gap:6px;padding:6px 14px;display:flex}._iob-swap-btn:hover{background:var(--iob-bg-secondary);color:var(--iob-text)}._iob-label{font-size:var(--main-text-xs);color:var(--iob-text-muted);margin-bottom:4px;font-weight:500;display:block}._iob-select{border-style:solid;border-width:1px;border-color:var(--iob-border);border-radius:var(--iob-radius);font-size:var(--main-text-sm);color:var(--iob-text);background:var(--iob-bg);cursor:pointer;width:100%;padding:6px 10px}._iob-slider-row{align-items:center;gap:var(--main-space-2);display:flex}._iob-slider{accent-color:var(--iob-primary);flex:1}._iob-slider-value{font-size:var(--main-text-xs);color:var(--iob-text-muted);font-family:var(--main-font-mono);text-align:right;min-width:36px}._iob-control-row{gap:var(--main-space-2);align-items:flex-end;display:flex}._iob-control-group{flex-direction:column;gap:4px;display:flex}._iob-flex-1{flex:1}._iob-scale-presets{margin-top:var(--main-space-2);gap:4px;display:flex}._iob-preset-btn{border-style:solid;border-width:1px;border-color:var(--iob-border);border-radius:var(--iob-radius);color:var(--iob-text-muted);font-size:11px;font-family:var(--main-font-mono);cursor:pointer;text-align:center;background:0 0;flex:1;padding:4px 6px}._iob-preset-btn:hover{background:var(--iob-bg-secondary)}._iob-preset-btn.active{color:var(--iob-primary);border-color:var(--iob-primary);background:#6366f11a}._iob-position-grid{margin-top:var(--main-space-1);grid-template-columns:repeat(3,1fr);gap:4px;display:grid}._iob-pos-btn{aspect-ratio:1;border-style:solid;border-width:1px;border-color:var(--iob-border);background:var(--iob-bg-secondary);cursor:pointer;border-radius:4px;width:100%;max-width:36px;transition:background .15s}._iob-pos-btn:hover{border-color:var(--iob-border-hover);background:#6366f114}._iob-pos-btn.active{border-color:var(--iob-primary);box-shadow:inset 0 0 0 2px var(--iob-primary);background:#6366f126}._iob-drag-hint{margin-top:var(--main-space-2);color:var(--iob-text-muted);opacity:.7;align-items:center;gap:6px;font-size:11px;display:flex}._iob-download-btn{border-radius:var(--iob-radius);width:100%;font-size:var(--main-text-sm);cursor:pointer;white-space:nowrap;margin-top:var(--main-space-2);background:var(--iob-primary);color:#fff;border-width:0;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-weight:500;display:flex;box-shadow:0 2px 8px #6366f140}._iob-download-btn:hover{opacity:.9}@media (max-width:768px){._iob-panel{border-bottom-style:solid;border-bottom-width:1px;border-right-width:0;border-bottom-color:var(--iob-border);width:100%;min-width:0;max-height:none}}._iob-preview-area{background:var(--iob-canvas-bg);flex-direction:column;flex:1;min-height:400px;display:flex}._iob-preview-wrapper{padding:var(--main-space-4);flex:1;justify-content:center;align-items:center;display:flex;overflow:hidden}#_iob-canvas{object-fit:contain;cursor:move;touch-action:none;border-radius:2px;max-width:100%;max-height:60vh;box-shadow:0 4px 24px #0000004d}#_iob-canvas._iob-dragging{cursor:grabbing}._iob-preview-info{padding:var(--main-space-2);color:#ffffffb3;font-size:var(--main-text-xs);font-family:var(--main-font-mono);background:#0000004d;justify-content:center;align-items:center;display:flex}@media (max-width:768px){._iob-preview-area{min-height:300px}#_iob-canvas{max-height:50vh}}