/* Athlevate — base styles. Tailwind via CDN in layout.ejs handles utility classes. */

/* Custom gradient for hero */
.hero-gradient {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0f172a 100%);
}

/* Card hover lift */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Progress bar animation */
@keyframes progress-fill {
  from { width: 0; }
  to { width: var(--target-width); }
}
.progress-bar { animation: progress-fill 0.8s ease-out forwards; }

/* Upload drop zone */
.drop-zone {
  border: 2px dashed #3b82f6;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.drop-zone.dragover {
  border-color: #60a5fa;
  background-color: rgba(59, 130, 246, 0.05);
}

/* Highlight card confidence badge */
.confidence-high { background: #dcfce7; color: #166534; }
.confidence-med  { background: #fef9c3; color: #854d0e; }
.confidence-low  { background: #fee2e2; color: #991b1b; }

/* Spinner */
.spinner {
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Stat pill */
.stat-pill {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #3b82f6;
}