:root{
--conversor-webp-progress-bg:#f8f9fa;
--conversor-webp-progress-border:#e1e5e9;
--conversor-webp-progress-text:#6c757d;
--conversor-webp-bar-bg:#e1e5e9;
}
[data-theme="dark"]{
--conversor-webp-progress-bg:#495057;
--conversor-webp-progress-border:#5a6268;
--conversor-webp-progress-text:#adb5bd;
--conversor-webp-bar-bg:#5a6268;
}
.conversor-webp-container{max-width:960px;margin:0 auto;background:var(--white);border-radius:var(--border-radius-lg);box-shadow:var(--box-shadow);padding:var(--spacing-xl);position:relative;overflow:hidden;}
[data-theme="dark"] .conversor-webp-container{background:var(--white);}
.tool-upload-area{border:2px dashed var(--light-gray);border-radius:var(--border-radius-md);padding:var(--spacing-lg);background:var(--off-white);transition:all var(--transition-fast);cursor:pointer;}
[data-theme="dark"] .tool-upload-area{border-color:var(--light-gray);background:var(--off-white);}
.tool-upload-area:hover,.tool-upload-area.dragover{border-color:var(--primary-green);background:var(--white);}
[data-theme="dark"] .tool-upload-area:hover,[data-theme="dark"] .tool-upload-area.dragover{border-color:var(--primary-green);background:var(--off-white);}
.tool-upload-container{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);text-align:center;}
.tool-upload-smallprint{font-size:.75rem;color:var(--medium-gray);}
.tool-file-input{display:none;}
.tool-controls{margin-top:var(--spacing-lg);}
.advanced-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;background:var(--light-gray);color:var(--dark-gray);border:none;border-radius:var(--border-radius-md);padding:var(--spacing-md) var(--spacing-lg);font-weight:600;cursor:pointer;transition:all var(--transition-fast);}
[data-theme="dark"] .advanced-toggle{background:var(--light-gray);color:var(--dark-gray);}
.advanced-toggle:hover{background:var(--off-white);box-shadow:var(--box-shadow-sm);}
[data-theme="dark"] .advanced-toggle:hover{background:var(--light-gray);box-shadow:var(--box-shadow-sm);}
.advanced-toggle-icon{width:18px;height:18px;position:relative;}
.advanced-toggle-icon::before,.advanced-toggle-icon::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:currentColor;transition:transform var(--transition-fast);}
.advanced-toggle-icon::before{transform:translate(-50%,-50%);}
.advanced-toggle-icon::after{transform:translate(-50%,-50%) rotate(90deg);}
.advanced-toggle[aria-expanded="true"] .advanced-toggle-icon::after{transform:translate(-50%,-50%) rotate(0deg);}
.advanced-options{margin-top:var(--spacing-md);border:1px solid var(--light-gray);border-radius:var(--border-radius-md);padding:var(--spacing-lg);background:var(--off-white);animation:fadeInUp .4s ease;}
[data-theme="dark"] .advanced-options{border-color:var(--light-gray);background:var(--off-white);}
.advanced-options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--spacing-lg);}
.advanced-field{display:flex;flex-direction:column;gap:var(--spacing-xs);}
.advanced-field label{font-weight:600;color:var(--dark-gray);}
.advanced-field select,.advanced-field input[type="number"],.advanced-field input[type="range"]{width:100%;padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--light-gray);border-radius:var(--border-radius-sm);background:var(--white);}
[data-theme="dark"] .advanced-field select,[data-theme="dark"] .advanced-field input[type="number"],[data-theme="dark"] .advanced-field input[type="range"]{border-color:var(--light-gray);background:var(--white);color:var(--dark-gray);}
.advanced-field input[type="range"]{padding:0;}
.checkbox-field{justify-content:flex-end;}
.checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);font-weight:500;color:var(--dark-gray);}
.checkbox-label input{width:18px;height:18px;}
.advanced-helper-text{font-size:.75rem;color:var(--medium-gray);}
.manual-quality.disabled{opacity:0.6;}
.manual-quality.disabled input[type="range"]{cursor:not-allowed;}
.conversor-webp-progresso{display:none;background:#f8f9fa;border-radius:12px;padding:1.5rem;border:1px solid #e1e5e9;margin:var(--spacing-lg) 0;}
[data-theme="dark"] .conversor-webp-progresso{background:var(--conversor-webp-progress-bg);border-color:var(--conversor-webp-progress-border);}
.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:0.9rem;color:#6c757d;}
[data-theme="dark"] .progress-info{color:var(--conversor-webp-progress-text);}
#progressText{font-weight:600;}
#progressPercent{color:var(--primary-green);font-weight:600;}
.conversor-webp-barra-container{width:100%;height:8px;background:#e1e5e9;border-radius:4px;overflow:hidden;}
[data-theme="dark"] .conversor-webp-barra-container{background:var(--conversor-webp-bar-bg);}
.conversor-webp-barra{height:100%;width:0%;background:linear-gradient(90deg,var(--primary-green),#28a745);transition:width 0.3s ease;border-radius:4px;position:relative;}
.conversor-webp-barra::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:shimmer 2s infinite;}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
.preview-section{margin-top:var(--spacing-xl);display:none;animation:fadeInUp .5s ease;}
.preview-section.show{display:block;}
.conversion-summary{margin-bottom:var(--spacing-lg);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius-md);background:var(--off-white);color:var(--dark-gray);font-size:.95rem;line-height:1.6;}
[data-theme="dark"] .conversion-summary{background:var(--off-white);color:var(--dark-gray);}
.conversion-summary strong{color:var(--primary-green);}
.conversion-results{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--spacing-lg);}
.result-card{background:var(--off-white);border-radius:var(--border-radius-md);box-shadow:var(--box-shadow-sm);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md);}
[data-theme="dark"] .result-card{background:var(--off-white);}
.result-card-header{display:flex;flex-direction:column;gap:var(--spacing-xs);}
.result-title{font-size:1rem;font-weight:600;color:var(--dark-gray);word-break:break-word;}
.result-meta{font-size:.8rem;color:var(--medium-gray);line-height:1.4;}
.result-visual{position:relative;border-radius:var(--border-radius-md);overflow:hidden;background:var(--white);border:1px solid var(--light-gray);}
[data-theme="dark"] .result-visual{background:var(--white);border-color:var(--light-gray);}
.result-visual img{display:block;width:100%;height:auto;}
.diff-viewer{position:relative;}
.diff-viewer img{display:block;width:100%;height:auto;}
.diff-base{filter:none;}
.diff-overlay{position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;clip-path:inset(0 50% 0 0);transition:clip-path .2s ease;}
.diff-overlay img{width:100%;height:auto;display:block;}
.diff-handle{margin-top:var(--spacing-sm);}
.diff-handle input{width:100%;}
.diff-labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--medium-gray);margin-top:var(--spacing-xs);}
.result-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);}
.result-actions .download-btn{flex:1;justify-content:center;}
.result-actions .secondary{background:var(--white);color:var(--primary-green);border:1px solid var(--primary-green);}
[data-theme="dark"] .result-actions .secondary{background:var(--white);color:var(--primary-green);border-color:var(--primary-green);}
.result-actions .secondary:hover{background:var(--primary-green);color:var(--white);}
.download-section{margin-top:var(--spacing-xl);display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:center;align-items:center;background:var(--light-gray);padding:var(--spacing-lg);border-radius:var(--border-radius-md);}
[data-theme="dark"] .download-section{background:var(--light-gray);}
.download-btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);background:var(--primary-green);color:var(--white);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius-md);text-decoration:none;font-weight:500;transition:all var(--transition-fast);border:none;cursor:pointer;}
.download-btn:hover{background:var(--dark-green);transform:translateY(-2px);color:var(--white);}
.download-btn.disabled,.download-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;background:var(--medium-gray);}
.download-btn.secondary{background:var(--white);color:var(--primary-green);border:1px solid var(--primary-green);}
[data-theme="dark"] .download-btn.secondary{background:var(--white);color:var(--primary-green);border-color:var(--primary-green);}
.download-btn.secondary:hover{background:var(--primary-green);color:var(--white);}
.download-btn.downloading{background:var(--medium-gray);cursor:not-allowed;transform:none;color:var(--white);}
.download-btn.downloading:hover{background:var(--medium-gray);transform:none;color:var(--white);}
#linkDownloadWebp{color:var(--white);}
#linkDownloadWebp:hover{color:var(--white);}
.download-spinner{width:18px;height:18px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:downloadSpin 1s linear infinite;}
.reset-btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);background:var(--medium-gray);color:var(--white);padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--border-radius-md);text-decoration:none;font-weight:500;transition:all var(--transition-fast);border:none;cursor:pointer;}
.reset-btn:hover{background:var(--dark-gray);transform:translateY(-2px);color:var(--white);}
@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
@keyframes downloadSpin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}
@media (max-width:1024px){
.conversor-webp-container{padding:var(--spacing-lg);}
.conversion-results{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
.conversion-results{grid-template-columns:1fr;}
.download-section{flex-direction:column;}
.download-btn,.reset-btn{width:100%;justify-content:center;}
.advanced-options-grid{grid-template-columns:1fr;}
}