.image-to-base64-container{max-width:800px;margin:0 auto;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#333}.image-to-base64-container h1{text-align:center;color:#2c3e50;margin-bottom:30px}.image-to-base64-container .drop-area{border:2px dashed #3498db;border-radius:8px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background-color:#f8f9fa;margin-bottom:20px}.image-to-base64-container .drop-area.dragging{background-color:#e8f4fc;border-color:#2980b9}.image-to-base64-container .drop-area .upload-icon{font-size:48px;margin-bottom:15px;display:block}.image-to-base64-container .drop-area .formats-info{font-size:.9em;color:#7f8c8d;margin-top:10px}.image-to-base64-container .drop-area .converting-message{display:flex;flex-direction:column;align-items:center;justify-content:center}.image-to-base64-container .drop-area .converting-message .spinner{border-radius:50%;border:4px solid rgba(0,0,0,.1);border-top-color:#3498db;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.image-to-base64-container .error-message{color:#e74c3c;background-color:#fadbd8;padding:10px 15px;border-radius:4px;margin-bottom:20px;text-align:center}.image-to-base64-container .conversion-options{background-color:#f8f9fa;border-radius:8px;padding:20px;margin-bottom:20px}.image-to-base64-container .conversion-options h3{margin-top:0;color:#2c3e50;border-bottom:1px solid #ddd;padding-bottom:10px}.image-to-base64-container .conversion-options .options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}.image-to-base64-container .conversion-options .option-group{margin-bottom:15px}.image-to-base64-container .conversion-options .option-group label{display:block;margin-bottom:8px;font-weight:500}.image-to-base64-container .conversion-options .option-group input[type=range],.image-to-base64-container .conversion-options .option-group select{width:100%}.image-to-base64-container .conversion-options .option-group select{padding:8px 12px;border-radius:4px;border:1px solid #ddd;background-color:#fff}.image-to-base64-container .conversion-options .option-group input[type=range]{-webkit-appearance:none;height:8px;background:#ddd;border-radius:4px;outline:none}.image-to-base64-container .conversion-options .option-group input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#3498db;cursor:pointer}.image-to-base64-container .conversion-options .option-group input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#3498db;cursor:pointer}.image-to-base64-container .results-section h3{color:#2c3e50;border-bottom:1px solid #ddd;padding-bottom:10px}.image-to-base64-container .results-section .file-info{background-color:#f8f9fa;padding:10px 15px;border-radius:4px;margin-bottom:15px}.image-to-base64-container .results-section .file-info p{margin:0}.image-to-base64-container .results-section .preview-container{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px}.image-to-base64-container .results-section .preview-container .image-preview{flex:1;min-width:250px;border:1px solid #ddd;border-radius:4px;overflow:hidden;background-color:#f8f9fa;display:flex;align-items:center;justify-content:center;padding:10px}.image-to-base64-container .results-section .preview-container .image-preview img{max-width:100%;max-height:300px;object-fit:contain}.image-to-base64-container .results-section .preview-container .base64-actions{flex:1;min-width:200px;display:flex;flex-direction:column;gap:10px;justify-content:center}.image-to-base64-container .results-section .preview-container .base64-actions .action-button{padding:10px 15px;background-color:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:16px;transition:background-color .3s}.image-to-base64-container .results-section .preview-container .base64-actions .action-button:hover{background-color:#2980b9}.image-to-base64-container .results-section .preview-container .base64-actions .action-button:disabled{background-color:#95a5a6;cursor:not-allowed}.image-to-base64-container .results-section .base64-preview label{display:block;margin-bottom:8px;font-weight:500}.image-to-base64-container .results-section .base64-preview textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:4px;font-family:monospace;resize:vertical;min-height:100px}@media(max-width:600px){.image-to-base64-container{padding:15px}.image-to-base64-container .options-grid{grid-template-columns:1fr!important}.image-to-base64-container .preview-container{flex-direction:column}}