.container {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 28px 20px 60px !important;
}

/* ===== HEADER ===== */
.tool-header {
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  border-radius: 20px !important;
  padding: 44px 40px !important;
  text-align: center !important;
  margin-bottom: 28px !important;
  box-shadow: 0 8px 32px rgba(180, 23, 158, 0.25) !important;
}

.tool-title {
  font-size: clamp(30px, 5vw, 48px) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
  line-height: 1.2 !important;
}

.subtitle {
  max-width: 750px !important;
  margin: 0 auto !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

/* ===== TIMELINE ===== */
.timeline {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 28px !important;
  flex-wrap: nowrap !important;
}

.timeline-step {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  background: #ffffff !important;
  border: 2px solid #e9d6ef !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-family: inherit !important;
  min-width: 90px !important;
  flex-shrink: 0 !important;
}

.timeline-step:hover:not(.locked):not(:disabled) {
  border-color: #FB0E76 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(180, 23, 158, 0.15) !important;
}

.timeline-step:focus-visible {
  outline: 3px solid #FB0E76 !important;
  outline-offset: 2px !important;
}

.timeline-step.active {
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 6px 18px rgba(180, 23, 158, 0.3) !important;
}

.timeline-step.completed {
  background: #f3e8f7 !important;
  border-color: #d4a7e0 !important;
}

.timeline-step.locked {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  background: #f0f0f0 !important;
  border-color: #e0e0e0 !important;
}

.step-number {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: #ede0f0 !important;
  color: #910694 !important;
  transition: all 0.3s ease !important;
}

.timeline-step.active .step-number {
  background: #ffffff !important;
  color: #910694 !important;
}

.timeline-step.completed .step-number {
  background: #910694 !important;
  color: #ffffff !important;
}

.timeline-step.locked .step-number {
  background: #dcdcdc !important;
  color: #999999 !important;
}

.step-icon {
  font-size: 16px !important;
  line-height: 1 !important;
}

.timeline-step.active .step-icon,
.timeline-step.completed .step-icon {
  color: #910694 !important;
}

.timeline-step.active .step-icon {
  color: #ffffff !important;
}

.timeline-step.locked .step-icon {
  color: #aaaaaa !important;
}

.step-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4a3a4e !important;
}

.timeline-step.active .step-name {
  color: #ffffff !important;
}

.timeline-step.completed .step-name {
  color: #6a3a70 !important;
}

.timeline-step.locked .step-name {
  color: #999999 !important;
}

.timeline-connector {
  flex: 1 !important;
  height: 3px !important;
  background: #e9d6ef !important;
  min-width: 20px !important;
  max-width: 60px !important;
  border-radius: 2px !important;
  margin: 0 4px !important;
}

/* ===== CARD ===== */
.card {
  background: #ffffff !important;
  border: 1px solid #f0d7eb !important;
  border-radius: 20px !important;
  padding: 30px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07) !important;
}

.phase {
  animation: fadeInUp 0.4s ease !important;
}

.phase.hidden {
  display: none !important;
}

@keyframes fadeInUp {
  from {
    opacity: 0 !important;
    transform: translateY(12px) !important;
  }
  to {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ===== DROP ZONE ===== */
.drop-zone {
  background: linear-gradient(219deg, rgba(251, 14, 118, 0.19) 0%, rgba(145, 6, 148, 0) 100%) !important;
  border: 3px dashed #f755f5 !important;
  border-radius: 20px !important;
  padding: 60px 20px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: 0.3s !important;
}

.drop-zone:hover,
.drop-zone:focus-visible {
  background: linear-gradient(219deg, rgba(251, 14, 118, 0.28) 0%, rgba(145, 6, 148, 0.05) 100%) !important;
  border-color: #FB0E76 !important;
  outline: none !important;
}

.drop-zone.drag-over {
  background: linear-gradient(219deg, rgba(251, 14, 118, 0.35) 0%, rgba(145, 6, 148, 0.1) 100%) !important;
  border-color: #910694 !important;
  transform: scale(1.01) !important;
}

.drop-icon {
  font-size: 52px !important;
  color: #910694 !important;
  margin-bottom: 16px !important;
}

.drop-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #2a1a2e !important;
  margin-bottom: 8px !important;
}

.drop-text {
  font-size: 15px !important;
  color: #6a5a6e !important;
  margin-bottom: 8px !important;
}

.drop-formats {
  font-size: 13px !important;
  color: #910694 !important;
  font-weight: 600 !important;
  margin-bottom: 24px !important;
  letter-spacing: 0.5px !important;
}

/* ===== BUTTONS ===== */
.btn {
  border: none !important;
  padding: 14px 28px !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: 0.3s !important;
  font-family: inherit !important;
}

.btn-primary {
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
}

.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(180, 23, 158, 0.25) !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(180, 23, 158, 0.2) !important;
}

.btn-secondary {
  background: #ffffff !important;
  color: #910694 !important;
  border: 2px solid #e9d6ef !important;
}

.btn-secondary:hover {
  background: #f7f2f9 !important;
  border-color: #d4a7e0 !important;
  transform: translateY(-2px) !important;
}

.btn:focus-visible {
  outline: 3px solid #FB0E76 !important;
  outline-offset: 2px !important;
}

.btn:disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* ===== ERROR MESSAGE ===== */
.error-message {
  margin-top: 16px !important;
  padding: 14px 20px !important;
  background: #fff0f3 !important;
  border: 1px solid #f7b3c4 !important;
  border-radius: 12px !important;
  color: #c01040 !important;
  font-size: 14px !important;
  text-align: center !important;
}

/* ===== FILE INFO ===== */
.file-info {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #faf5fb !important;
  border: 1px solid #f0d7eb !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
}

.file-icon {
  font-size: 32px !important;
  flex-shrink: 0 !important;
}

.file-details {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  flex: 1 !important;
  min-width: 120px !important;
}

.file-name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2a1a2e !important;
  word-break: break-all !important;
}

.file-size {
  font-size: 13px !important;
  color: #8a7a8e !important;
}

.file-arrow {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #910694 !important;
  background: #f3e8f7 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  letter-spacing: 0.5px !important;
}

.btn-remove {
  background: none !important;
  border: none !important;
  color: #c01040 !important;
  font-size: 20px !important;
  cursor: pointer !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  transition: background 0.2s !important;
  flex-shrink: 0 !important;
}

.btn-remove:hover {
  background: #fff0f3 !important;
}

/* ===== SETTINGS ===== */
.section-heading {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #2a1a2e !important;
  margin-bottom: 16px !important;
}

.settings-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

.setting-card {
  background: #ffffff !important;
  border: 1px solid #f1d4ed !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}

.setting-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #2a1a2e !important;
  margin-bottom: 10px !important;
}

.setting-desc {
  font-size: 12px !important;
  color: #8a7a8e !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

.text-input,
.select-input {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid #e0d0e4 !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  color: #2a1a2e !important;
  background: #ffffff !important;
  transition: border-color 0.2s !important;
}

.text-input:focus,
.select-input:focus {
  outline: none !important;
  border-color: #FB0E76 !important;
  box-shadow: 0 0 0 3px rgba(251, 14, 118, 0.12) !important;
}

.select-input {
  cursor: pointer !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23910694' d='M6 8L0 0h12z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}

/* ===== TOGGLE BUTTONS ===== */
.toggle-group {
  display: flex !important;
  gap: 8px !important;
  margin-bottom: 0 !important;
}

.toggle-btn {
  flex: 1 !important;
  padding: 10px 16px !important;
  border: 2px solid #e0d0e4 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #6a5a6e !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.25s !important;
  font-family: inherit !important;
}

.toggle-btn:hover {
  border-color: #d4a7e0 !important;
}

.toggle-btn.active {
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

.toggle-btn:focus-visible {
  outline: 3px solid #FB0E76 !important;
  outline-offset: 2px !important;
}

/* ===== RANGE SLIDER ===== */
.quality-value {
  color: #910694 !important;
  font-weight: 700 !important;
}

.range-input {
  width: 100% !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  height: 8px !important;
  border-radius: 4px !important;
  background: #f1d4ed !important;
  outline: none !important;
  margin-top: 4px !important;
}

.range-input::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  cursor: pointer !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(180, 23, 158, 0.3) !important;
}

.range-input::-moz-range-thumb {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  cursor: pointer !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(180, 23, 158, 0.3) !important;
}

.range-input:focus-visible {
  box-shadow: 0 0 0 3px rgba(251, 14, 118, 0.2) !important;
}

/* ===== ACTION ROW ===== */
.action-row {
  display: flex !important;
  gap: 12px !important;
  margin-top: 24px !important;
  flex-wrap: wrap !important;
}

/* ===== PROCESSING ===== */
.processing-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #2a1a2e !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

.progress-bar {
  width: 100% !important;
  height: 14px !important;
  background: #f1d4ed !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}

.progress-fill {
  height: 100% !important;
  width: 0% !important;
  background: linear-gradient(219deg, #FB0E76 0%, #910694 100%) !important;
  border-radius: 8px !important;
  transition: width 0.4s ease !important;
}

.progress-percent {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #910694 !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

.progress-status {
  font-size: 14px !important;
  color: #6a5a6e !important;
  text-align: center !important;
}

/* ===== SUCCESS / DOWNLOAD ===== */
.success-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #f0f9f4 !important;
  border: 1px solid #c5e8d1 !important;
  border-radius: 14px !important;
  padding: 18px 24px !important;
  margin-bottom: 24px !important;
}

.success-icon {
  font-size: 24px !important;
  color: #2e9e5e !important;
  font-weight: 700 !important;
}

.success-text {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #2e7e4e !important;
}

.result-info {
  background: #faf5fb !important;
  border: 1px solid #f0d7eb !important;
  border-radius: 14px !important;
  padding: 20px 24px !important;
  margin-bottom: 8px !important;
}

.result-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #f5e8f5 !important;
  gap: 12px !important;
}

.result-row:last-child {
  border-bottom: none !important;
}

.result-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #6a5a6e !important;
  flex-shrink: 0 !important;
}

.result-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #2a1a2e !important;
  text-align: right !important;
  word-break: break-all !important;
}

/* ===== ERROR STATE ===== */
.error-banner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  background: #fff0f3 !important;
  border: 1px solid #f7b3c4 !important;
  border-radius: 14px !important;
  padding: 18px 24px !important;
  margin-bottom: 20px !important;
}

.error-icon {
  font-size: 24px !important;
  color: #c01040 !important;
}

.error-text {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #c01040 !important;
}

.error-detail {
  font-size: 14px !important;
  color: #6a5a6e !important;
  text-align: center !important;
  margin-bottom: 8px !important;
  line-height: 1.6 !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .container {
    padding: 20px 14px 50px !important;
  }

  .tool-header {
    padding: 32px 22px !important;
    border-radius: 16px !important;
  }

  .subtitle {
    font-size: 14px !important;
  }

  .timeline-step {
    min-width: 64px !important;
    padding: 10px 8px !important;
  }

  .step-name {
    font-size: 11px !important;
  }

  .step-number {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
  }

  .timeline-connector {
    max-width: 24px !important;
    min-width: 10px !important;
  }

  .card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }

  .drop-zone {
    padding: 40px 16px !important;
  }

  .drop-icon {
    font-size: 42px !important;
  }

  .drop-title {
    font-size: 17px !important;
  }

  .settings-grid {
    grid-template-columns: 1fr !important;
  }

  .action-row .btn {
    width: 100% !important;
  }

  .file-info {
    padding: 14px 16px !important;
  }

  .file-arrow {
    width: 100% !important;
    text-align: center !important;
  }
}

@media (max-width: 480px) {
  .timeline {
    gap: 0 !important;
  }

  .timeline-step {
    min-width: 56px !important;
    padding: 8px 4px !important;
  }

  .step-name {
    font-size: 10px !important;
  }

  .step-icon {
    font-size: 13px !important;
  }

  .timeline-connector {
    max-width: 14px !important;
    min-width: 6px !important;
  }

  .tool-header {
    padding: 26px 18px !important;
  }

  .result-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }

  .result-value {
    text-align: left !important;
  }
}