.webp-converter-wrapper {background: var(--white-color);border: 1px solid #ddd;padding: 20px;border-radius: 6px;box-shadow: 0 2px 8px rgba(0,0,0,0.05);}
.upload-area {text-align: center;padding: 60px 25px;border: 2px dashed var(--primary-color);border-radius: 6px;margin-bottom: 20px;background-color: #f8faff;}
.upload-area.dragover { background-color: #eaf1ff; }.note { font-size: 0.9rem; color: var(--primary-color); }
.file-list { margin-top: 20px; }
.file-item {border: 1px solid #eee;padding: 10px 15px;border-radius: 5px;margin-bottom: 12px;background: #fff;}
.file-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px;}
.file-info { display: flex; align-items: center; gap: 10px; }
.file-info img { width: 40px; height: 40px; object-fit: cover; border-radius: 4px; }
.file-name { font-size: 0.95rem; color: var(--primary-color); }
.file-actions button {margin-left: 6px; font-size: 0.8rem; padding: 6px 10px;border-radius: 4px; cursor: pointer;}
.file-actions .convert-btn { background: var(--primary-color); color: #fff; }
.file-actions .download-btn { background: var(--secondary-color); color: var(--theme-black); }
.file-actions .remove-btn { background: #ff4d4d; color: #fff; }
.progress-bar {width: 100%; height: 16px;background: #eee; border-radius: 7px;overflow: hidden; margin: 12px 0;}
.progress-fill {height: 100%; width: 0%;background: var(--primary-color);transition: width 0.4s ease, background 0.4s ease;}
.progress-fill.done {background: #28a745;}
.progress-wrapper { margin-top: 20px; }
#progressText {margin-top: 8px;font-size: 1rem;font-weight: 500;color: var(--primary-color);}
@media (max-width: 676px){
.button-style1 {padding: 10px 18px;font-size: 0.9rem;width: auto;}
.file-name {display: none;}
.button-group {display: flex;gap: 10px;align-items: start;flex-wrap: wrap;}
}