.image-display{flex:1;min-width:300px;max-width:100%;display:flex;flex-direction:column}.image-display .image-title{margin:0 0 16px;font-size:18px;font-weight:600;color:#333;text-align:center}.image-display .image-frame{position:relative;background:#fff;border-radius:8px;padding:20px;box-shadow:0 4px 6px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.1),inset 0 0 0 1px rgba(255,255,255,.05);border:1px solid #e5e7eb;flex:1}.image-display .image-frame:before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(45deg,#f3f4f6,#e5e7eb);border-radius:10px;z-index:-1}.image-display .image-frame .loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;z-index:10}.image-display .image-frame .loading-overlay .spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top-color:#41907c;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}.image-display .image-frame .loading-overlay p{margin:0;color:#666;font-size:14px}.image-display .image-frame .image-content{width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:4px}.image-display .image-frame .image-content canvas,.image-display .image-frame .image-content img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}.image-display .image-frame .image-content canvas{width:auto!important;height:auto!important;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}.image-display .image-frame .image-content .image-placeholder{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#999;pointer-events:none;z-index:1}.image-display .image-frame .image-content .image-placeholder .placeholder-icon{font-size:48px;margin-bottom:12px;opacity:.5}.image-display .image-frame .image-content .image-placeholder .placeholder-text{font-size:14px;opacity:.7}.image-display .image-frame .image-content canvas:not([width]),.image-display .image-frame .image-content canvas[width="0"],.image-display .image-frame .image-content img:not([src]),.image-display .image-frame .image-content img[src=""]{opacity:0}.image-display .image-frame .image-content canvas[width]:not([width="0"])+.image-placeholder,.image-display .image-frame .image-content img[src]:not([src=""])+.image-placeholder{display:none}.image-display .image-output-container{margin-top:16px;padding-top:16px;border-top:1px solid #e5e7eb}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media screen and (max-width:768px){.image-display{min-width:100%}.image-display .image-frame{padding:16px;min-height:200px}}