/* ============================================================
   Zulfanoon BGRemover — Site Styles
   ============================================================ */

#upload-zone:hover, #upload-zone-resize:hover, #upload-zone-convert:hover, #upload-zone-compress:hover {
  border-color: #8b5cf6 !important;
  background: color-mix(in srgb, #8b5cf6 5%, var(--c-surface)) !important;
}

#preview-box {
  background-image:
    linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(-45deg, #e5e7eb 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e5e7eb 75%),
    linear-gradient(-45deg, transparent 75%, #e5e7eb 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.animate-spin {
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

input[type="range"] {
  height: 6px;
  border-radius: 3px;
  -webkit-appearance: none;
  background: var(--c-border);
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8b5cf6;
  border: 2px solid #fff;
  cursor: pointer;
}

@media (max-width: 640px) {
  #preview-box { min-height: 200px; }
  #result-img { max-height: 300px; }
}