/* Background checkerboard pattern */
.bg-gradient {
  background-color: #f3f3f3;
  background-image:
    linear-gradient(45deg, #ededed 25%, transparent 25%),
    linear-gradient(-45deg, #ededed 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ededed 75%),
    linear-gradient(-45deg, transparent 75%, #ededed 75%);
  background-size: 50px 50px;
  background-position: 0 0, 0 25px, 25px -25px, -25px 0;
}

/* Card shadow */
.shadow-card {
  box-shadow: 0 4px 24px rgba(34, 158, 217, 0.1), 0 1px 4px rgba(0, 0, 0, 0.04);
}

/* Checkerboard pattern for transparency */
.checkerboard {
  background-image:
    linear-gradient(45deg, #dde5ed 25%, transparent 25%),
    linear-gradient(-45deg, #dde5ed 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #dde5ed 75%),
    linear-gradient(-45deg, transparent 75%, #dde5ed 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-color: #ffffff;
}

/* Indeterminate progress bar */
.progress-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(34, 158, 217, 0.15);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  width: 40%;
  height: 100%;
  background: #229ED9;
  border-radius: 3px;
  animation: slide 1.2s ease-in-out infinite;
}

@keyframes slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Pulsing dot for queue state */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #229ED9;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

/* Drag-over state */
.dropzone.drag-over {
  border-color: #229ED9;
  background: rgba(34, 158, 217, 0.05);
}

/* Result grid: stacked on mobile, side-by-side on wider screens */
.result-grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .result-grid {
    grid-template-columns: 1fr 1fr;
  }
}