/* ── TechSol WebP Optimizer Tool Styles ── */
#techsol-webp-app * { box-sizing: border-box !important; font-family: 'Rubik', sans-serif !important; }

#techsol-webp-app {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 20px !important;
}

/* Upload Area */
.tsw-upload-area {
  border: 2.5px dashed #CBD5E1 !important;
  border-radius: 18px !important;
  padding: 50px 30px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  background: linear-gradient(135deg, #fafbff 0%, #fef7f0 100%) !important;
  margin-bottom: 20px !important;
}
.tsw-upload-area:hover,
.tsw-upload-area.tsw-drag-over {
  border-color: #F97316 !important;
  background: linear-gradient(135deg, #fff7ed 0%, #fdf4ff 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px rgba(249,115,22,0.15) !important;
}
.tsw-upload-area h3 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0F172A !important;
  margin: 0 0 8px 0 !important;
}
.tsw-upload-area p {
  font-size: 0.88rem !important;
  color: #64748B !important;
  margin: 0 0 18px 0 !important;
}

/* Upload Icon */
.tsw-upload-icon {
  width: 72px !important;
  height: 72px !important;
  margin: 0 auto 18px !important;
  background: linear-gradient(135deg, #F97316 0%, #C026D3 100%) !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 2rem !important;
  box-shadow: 0 8px 24px rgba(249,115,22,0.3) !important;
}

/* Quality Selector */
.tsw-quality-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  flex-wrap: wrap !important;
}
.tsw-quality-wrap label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #334155 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}
#tsw-quality {
  appearance: none !important;
  background: #F8FAFC !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 10px !important;
  padding: 8px 32px 8px 12px !important;
  font-family: 'Rubik', sans-serif !important;
  font-size: 0.9rem !important;
  color: #0F172A !important;
  cursor: pointer !important;
  outline: none !important;
}
#tsw-quality:focus { border-color: #F97316 !important; }

/* Results */
#tsw-results {
  display: none !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 10px !important;
}
#tsw-results[style*="block"] { display: flex !important; }

.tsw-result-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 14px 18px !important;
  border-radius: 14px !important;
  border: 1.5px solid #E2E8F0 !important;
  background: #F8FAFC !important;
  flex-wrap: wrap !important;
  animation: tswFadeIn 0.3s ease !important;
}
@keyframes tswFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.tsw-result-item.tsw-converting {
  border-color: rgba(249,115,22,0.3) !important;
  background: linear-gradient(135deg, #fff7ed, #fdf4ff) !important;
}
.tsw-result-item.tsw-done {
  border-color: #86EFAC !important;
  background: #F0FDF4 !important;
}
.tsw-result-item.tsw-error {
  border-color: #FCA5A5 !important;
  background: #FEF2F2 !important;
}

.tsw-item-info { flex: 1 !important; min-width: 0 !important; }
.tsw-fname {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: #0F172A !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 3px !important;
}
.tsw-fsize, .tsw-savings {
  font-size: 0.78rem !important;
  color: #64748B !important;
  display: block !important;
}
.tsw-status {
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #F97316 !important;
  flex-shrink: 0 !important;
}

/* Download Button */
.tsw-dl-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  background: linear-gradient(135deg, #F97316 0%, #C026D3 100%) !important;
  color: white !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 15px rgba(249,115,22,0.35) !important;
  transition: all 0.2s !important;
  font-family: 'Rubik', sans-serif !important;
}
.tsw-dl-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(249,115,22,0.5) !important;
  color: white !important;
  text-decoration: none !important;
}

@media (max-width: 600px) {
  .tsw-result-item { flex-direction: column !important; align-items: flex-start !important; }
  .tsw-dl-btn { width: 100% !important; justify-content: center !important; }
}