:root{--iob-primary:var(--main-primary);--iob-primary-rgb:var(--main-primary-rgb);--iob-text:var(--main-text);--iob-text-muted:var(--main-text-muted);--iob-bg:var(--main-bg-primary);--iob-bg-secondary:var(--main-bg-secondary);--iob-border:var(--main-border);--iob-border-hover:var(--main-border-dark);--iob-canvas-bg:var(--main-gray-800);--iob-panel-bg:var(--main-bg-primary);--iob-info-bg:#0000004d;--iob-info-text:#ffffffb3;--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{min-height:0;padding-left:.75rem;padding-right:.75rem}._iob-editor{min-height:0}._iob-layout{border-radius:var(--iob-radius);flex-direction:column;min-height:0}}@media (max-width:480px){._iob-container{padding-left:.5rem;padding-right:.5rem}}._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;-webkit-tap-highlight-color:transparent;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:rgba(var(--iob-primary-rgb), .04)}._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}@media (max-width:768px){._iob-upload{min-height:260px}._iob-upload-inner{padding:var(--main-space-4)}._iob-upload-icon svg{width:40px;height:40px}._iob-upload-text{font-size:var(--main-text-sm)}._iob-upload-hint{font-size:var(--main-text-xs)}}@media (max-width:480px){._iob-upload{min-height:220px}}._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;-webkit-tap-highlight-color:transparent;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;flex-shrink:0;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;-webkit-tap-highlight-color:transparent;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:rgba(var(--iob-primary-rgb), .04)}._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;-webkit-tap-highlight-color:transparent;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;-webkit-tap-highlight-color:transparent;background:0 0;flex:1;padding:4px 6px}._iob-preset-btn:hover{background:var(--iob-bg-secondary)}._iob-preset-btn.active{background:rgba(var(--iob-primary-rgb), .1);color:var(--iob-primary);border-color:var(--iob-primary)}._iob-position-grid{margin-top:var(--main-space-1);grid-template-columns:repeat(3,1fr);gap:4px;max-width:140px;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;-webkit-tap-highlight-color:transparent;border-radius:4px;width:100%;transition:background .15s}._iob-pos-btn:hover{background:rgba(var(--iob-primary-rgb), .08);border-color:var(--iob-border-hover)}._iob-pos-btn.active{background:rgba(var(--iob-primary-rgb), .15);border-color:var(--iob-primary);box-shadow:inset 0 0 0 2px var(--iob-primary)}._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:var(--main-bg-primary);box-shadow:0 2px 8px rgba(var(--iob-primary-rgb), .25);-webkit-tap-highlight-color:transparent;border-width:0;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-weight:500;display:flex}._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-section{padding:var(--main-space-3)}._iob-btn-icon{width:36px;height:36px}._iob-btn-icon svg{width:16px;height:16px}._iob-thumb{padding:8px}._iob-thumb img{width:44px;height:44px}._iob-thumb-name{font-size:var(--main-text-sm)}._iob-overlay-placeholder{padding:var(--main-space-4);font-size:var(--main-text-sm);min-height:56px}._iob-swap-btn{font-size:var(--main-text-sm);min-height:40px;padding:10px 16px}._iob-select{min-height:44px;padding:10px 12px;font-size:16px}._iob-slider{height:28px}._iob-slider-value{font-size:var(--main-text-sm);min-width:44px}._iob-preset-btn{min-height:40px;padding:10px 6px;font-size:12px}._iob-position-grid{gap:6px;max-width:200px;margin-left:auto;margin-right:auto}._iob-drag-hint{font-size:var(--main-text-xs);text-align:center;justify-content:center}._iob-control-row{align-items:stretch;gap:var(--main-space-3);flex-direction:column}._iob-download-btn{font-size:var(--main-text-base);min-height:48px;margin-top:var(--main-space-3);padding:14px 16px}}._iob-preview-area{background:var(--iob-canvas-bg);flex-direction:column;flex:1;min-width:0;min-height:400px;display:flex}._iob-preview-wrapper{padding:var(--main-space-4);touch-action:none;flex:1;justify-content:center;align-items:center;min-width:0;display:flex;overflow:hidden}#_iob-canvas{object-fit:contain;cursor:move;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;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);background:var(--iob-info-bg);color:var(--iob-info-text);font-size:var(--main-text-xs);font-family:var(--main-font-mono);text-align:center;word-break:break-word;justify-content:center;align-items:center;display:flex}@media (max-width:768px){._iob-preview-area{min-height:320px}._iob-preview-wrapper{padding:var(--main-space-3);min-height:280px}#_iob-canvas{max-height:55vh}}@media (max-width:480px){._iob-preview-area{min-height:260px}._iob-preview-wrapper{padding:var(--main-space-2);min-height:240px}#_iob-canvas{max-height:50vh}}