.toolbar{justify-content:space-between;margin-bottom:1rem;display:flex}.toolbar-btn{cursor:pointer;border:none;border-radius:4px;padding:.5rem 1rem;font-size:1rem;transition:background-color .2s}.toolbar-btn.primary{background-color:var(--primary-color);color:var(--text-on-primary)}.toolbar-btn.primary:hover{background-color:var(--primary-light)}.toolbar-btn.danger{background-color:var(--danger-color);color:var(--text-on-danger)}.toolbar-btn.danger:hover{background-color:var(--danger-light)}.image-base64-container{width:100%}.conversion-content{gap:1rem;height:calc(100vh - 320px);min-height:300px;display:flex;overflow:hidden}.image-preview-panel,.conversion-panel,.base64-result-panel{border:1px solid var(--border-color);background-color:var(--bg-secondary);border-radius:6px;flex-direction:column;min-width:0;min-height:0;padding:1rem;display:flex;overflow:hidden}.image-preview-panel h3,.conversion-panel h3,.base64-result-panel h3{flex-shrink:0;margin:0 0 .75rem}.image-preview-panel{flex:1}.image-preview-panel img{object-fit:contain;border-radius:4px;max-width:100%;max-height:100%}.image-preview-container{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;overflow:auto}.placeholder-text{text-align:center;min-height:0;color:var(--text-light);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.conversion-panel{text-align:center;flex:none;width:min(200px,18%);min-width:140px}.process-btn{background-color:var(--primary-color);width:100%;color:var(--text-on-primary);cursor:pointer;border:none;border-radius:4px;margin-bottom:15px;padding:.5rem;font-size:1rem;transition:background-color .2s}.process-btn:hover{background-color:var(--primary-light)}.process-btn:disabled{background-color:var(--disabled-color);cursor:not-allowed}.conversion-form label{color:var(--text-primary);align-items:center;margin-top:.5rem;font-size:.9rem;display:flex}.conversion-form input[type=checkbox]{margin-right:.5rem}.base64-result-panel{flex:1}.base64-result-panel .cm-editor-host{border:1px solid var(--border-color);background:var(--input-bg);border-radius:4px;flex-direction:column;flex:1;width:100%;min-height:0;margin-bottom:.75rem;display:flex;overflow:hidden}.cm-editor-host--fill{height:100%}.cm-editor-host--fill .CodeMirror{font-family:JetBrains Mono,Courier New,monospace;font-size:.9rem;line-height:1.5;height:100%!important}.cm-editor-host--fill .CodeMirror-scroll{min-height:0;overflow:auto!important}.action-btn{background-color:var(--primary-color);color:var(--text-on-primary);cursor:pointer;border:none;border-radius:4px;flex-shrink:0;margin-top:0;padding:.5rem;font-size:1rem;transition:background-color .2s}.action-btn:hover{background-color:var(--primary-light)}.action-btn:disabled{background-color:var(--disabled-color);cursor:not-allowed}@media (width<=768px){.conversion-content{flex-direction:column;height:auto;min-height:0;overflow:visible}.conversion-panel{width:100%;min-width:0}.base64-result-panel .cm-editor-host{min-height:240px;max-height:50vh}.image-preview-panel{min-height:200px;max-height:40vh}}.visually-hidden[data-v-9e54e8c7]{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}