.app[data-astro-cid-tuyev2x7]{display:flex;margin-top:70px;margin-bottom:70px;height:calc(100vh - 140px)}.panel-left[data-astro-cid-tuyev2x7]{width:300px;min-width:300px;background:#111;border-right:1px solid #1a1a1a;display:flex;flex-direction:column;overflow-y:auto}.viewport[data-astro-cid-tuyev2x7]{flex:1;position:relative;background:#0d0d0d;display:flex;align-items:center;justify-content:center;overflow:hidden;min-width:0;min-height:0}.image-container[data-astro-cid-tuyev2x7]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}#preview-image[data-astro-cid-tuyev2x7]{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 0 20px #000c}.converter-layout[data-astro-cid-tuyev2x7]{display:flex;flex-direction:row;width:100%;height:calc(100dvh - 80px)}@media(max-width:768px){.app[data-astro-cid-tuyev2x7]{flex-direction:column;height:auto;min-height:100dvh;margin-top:0;margin-bottom:0}.panel-left[data-astro-cid-tuyev2x7]{width:100%;min-width:0;border-right:none;border-bottom:1px solid #1a1a1a}.viewport[data-astro-cid-tuyev2x7]{width:100%;height:50dvh;flex:none}}.section[data-astro-cid-tuyev2x7]{padding:12px;border-bottom:1px solid #1a1a1a}.section-title[data-astro-cid-tuyev2x7]{color:#0f8;font-size:11px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.dropzone[data-astro-cid-tuyev2x7]{border:2px dashed #333;border-radius:4px;padding:24px 12px;text-align:center;cursor:pointer;transition:border-color .2s}.dropzone[data-astro-cid-tuyev2x7]:hover,.dropzone[data-astro-cid-tuyev2x7].drag-over{border-color:#0f8}.dropzone-icon[data-astro-cid-tuyev2x7]{font-size:32px;margin-bottom:8px}.dropzone-text[data-astro-cid-tuyev2x7]{font-size:11px;color:#666}.info-row[data-astro-cid-tuyev2x7]{display:flex;justify-content:space-between;padding:3px 0;font-size:12px}.info-label[data-astro-cid-tuyev2x7]{color:#666}.info-value[data-astro-cid-tuyev2x7]{color:#ddd;text-align:right}.info-value[data-astro-cid-tuyev2x7].highlight{color:#0f8}.setting-row[data-astro-cid-tuyev2x7]{margin-bottom:12px}.setting-row[data-astro-cid-tuyev2x7] label[data-astro-cid-tuyev2x7]{display:block;font-size:10px;color:#aaa;margin-bottom:4px}.setting-row[data-astro-cid-tuyev2x7] input[data-astro-cid-tuyev2x7][type=range]{width:100%;accent-color:#00ff88}.btn[data-astro-cid-tuyev2x7]{display:block;width:100%;padding:10px;border:1px solid #333;background:transparent;color:silver;font-family:inherit;font-size:12px;cursor:pointer;text-align:center;transition:all .2s}.btn[data-astro-cid-tuyev2x7]:hover,.btn-primary[data-astro-cid-tuyev2x7]{border-color:#0f8;color:#0f8}.btn-primary[data-astro-cid-tuyev2x7]:hover{background:#00ff8815}.btn[data-astro-cid-tuyev2x7]:disabled{opacity:.3;cursor:not-allowed}.btn[data-astro-cid-tuyev2x7]+.btn[data-astro-cid-tuyev2x7]{margin-top:6px}.size-compare[data-astro-cid-tuyev2x7]{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:13px}.size-original[data-astro-cid-tuyev2x7]{color:#666;text-decoration:line-through}.size-arrow[data-astro-cid-tuyev2x7]{color:#0f8}.size-compressed[data-astro-cid-tuyev2x7]{color:#0f8;font-weight:700}.size-ratio[data-astro-cid-tuyev2x7]{color:#f80;font-size:11px}.header[data-astro-cid-tuyev2x7]{padding:8px 12px;background:#0a0a0a;border-bottom:1px solid #1a1a1a;display:flex;align-items:center;gap:8px}.header-title[data-astro-cid-tuyev2x7]{color:#0f8;font-size:13px;font-weight:700}.header-sub[data-astro-cid-tuyev2x7]{color:#444;font-size:10px}.viewport-empty[data-astro-cid-tuyev2x7]{position:absolute;color:#333;font-size:13px}.progress-overlay[data-astro-cid-tuyev2x7]{position:absolute;inset:0;background:#000000bf;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s}.progress-overlay[data-astro-cid-tuyev2x7].active{opacity:1;pointer-events:auto}.progress-text[data-astro-cid-tuyev2x7]{color:#0f8;font-size:12px}.spinner[data-astro-cid-tuyev2x7]{width:28px;height:28px;border:3px solid #333;border-top-color:#0f8;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}