/* ============================================================
   BG Remover — Upload Interface
   ============================================================ */

.upload-section {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
}

.upload-panel {
  max-width: 920px;
  margin: 0 auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: clamp(20px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard);
}

.upload-panel.is-dragover {
  box-shadow: 0 0 0 3px var(--color-yellow), var(--shadow-md);
  border-color: var(--color-yellow);
}

/* Dropzone */
.upload-dropzone {
  display: block;
  width: 100%;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 56px) clamp(20px, 4vw, 40px);
  background: var(--bg-subtle);
  text-align: center;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
  cursor: pointer;
}

.upload-dropzone:hover,
.upload-dropzone:focus-visible {
  border-color: var(--color-yellow-strong);
  background: color-mix(in srgb, var(--color-yellow) 6%, var(--bg-subtle));
  outline: none;
}

.upload-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.upload-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--fg-primary);
  margin-bottom: var(--space-2);
}

.upload-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

.upload-hint {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.upload-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.upload-privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  margin-top: var(--space-3);
}

.upload-privacy svg {
  color: var(--color-success);
}

/* Preview */
.upload-preview {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  background: var(--bg-subtle);
}

.upload-preview-media {
  width: 160px;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
}

.upload-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.upload-preview-meta {
  min-width: 0;
}

.preview-filename {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.preview-details {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.upload-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Status */
.upload-status {
  max-width: 920px;
  margin: var(--space-6) auto 0;
}

.progress-block {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.progress-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--fg-primary);
}

.progress-detail {
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  text-align: right;
}

.progress-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@media (max-width: 720px) {
  .upload-preview {
    grid-template-columns: 1fr;
    text-align: left;
  }
  .upload-preview-media {
    width: 100%;
    height: 220px;
  }
  .upload-preview-actions {
    justify-content: flex-start;
  }
}