/**
 * PhotoXED Upload Flow Styles
 * Dedicated file for the create album + multi-photo upload experience.
 */

.px-upload-area {
  border: 2px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  text-align: center;
  background: rgba(255,255,255,0.02);
  transition: all var(--dur) var(--ease);
  margin: var(--sp-4) 0;
}

.px-upload-area.dragover {
  border-color: var(--accent);
  background: rgba(167, 139, 250, 0.08);
}

.px-upload-area input[type="file"] {
  display: none;
}

.px-upload-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.px-upload-preview img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
}

.px-upload-progress {
  height: 6px;
  background: var(--glass-border);
  border-radius: 999px;
  overflow: hidden;
  margin: var(--sp-4) 0;
}

.px-upload-progress-bar {
  height: 100%;
  background: linear-gradient(to right, var(--accent), #a78bfa);
  width: 0%;
  transition: width 200ms linear;
}

.px-tier-banner {
  background: var(--bg-glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  margin-bottom: var(--sp-4);
}

.px-tier-banner.warning {
  border-color: var(--warning);
}

.px-upload-warn {
  background: rgba(255, 193, 7, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.35);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-size: 12px;
  line-height: 1.45;
  color: var(--tx2);
  margin-bottom: var(--sp-4);
}

.px-upload-warn strong {
  color: var(--tx);
}

.px-upload-batch {
  font-size: 13px;
  font-weight: 600;
  color: var(--tx2);
  margin: var(--sp-2) 0 var(--sp-3);
}

.px-upload-batch.over-limit {
  color: #f87171;
}