.upload-wrapper {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
}
.file-box {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}
.upload-btn {
  background: #1f2937;
  color: white;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
.upload-btn:hover {
  background: #374151;
}
#fileName {
  color: #6b7280;
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.progress-area {
  display: flex;
  align-items: center;
  gap: 10px;
}
.progress-bar {
  flex: 1;
  height: 8px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: #3b82f6;
  transition: width 0.2s;
}
.progress-text {
  font-size: 0.85rem;
  font-weight: 600;
  color: #3b82f6;
}

const fileInput = document.getElementById("uploadFile");
const fileName = document.getElementById("fileName");
const progressArea = document.getElementById("progressArea");
const fill = document.getElementById("fill");
const text = document.getElementById("text");

fileInput.addEventListener("change", (e) => {
  const file = e.target.files[0];
  if (file) {
    fileName.innerText = file.name;
    uploadFile(file);
  }
});

function uploadFile(file) {
  progressArea.style.display = "flex";
  let progress = 0;
  
  // Simulate upload
  const interval = setInterval(() => {
    progress += 5;
    if (progress > 100) {
      clearInterval(interval);
      text.innerText = "Done";
      fill.style.backgroundColor = "#10b981";
    } else {
      fill.style.width = `${progress}%`;
      text.innerText = `${progress}%`;
    }
  }, 100);
}