body { font-family: 'Public Sans', sans-serif; }

/* Login screen */
#loginScreen {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FAFAFA;
}

#loginScreen .login-card {
  text-align: center;
  padding: 3rem 2rem;
}

#loginScreen .strava-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #FC4C02;
  color: white;
  font-weight: 700;
  font-size: 0.875rem;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  transition: background 0.2s;
}

#loginScreen .strava-btn:hover {
  background: #E04400;
}

#loginScreen .error-msg {
  color: #DC2626;
  font-size: 0.875rem;
  margin-top: 1rem;
}

/* Heatmap tooltip */
.heatmap-cell { position: relative; cursor: default; }
.heatmap-cell:hover .heatmap-tip {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
.heatmap-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1E293B; color: white; font-size: 11px; padding: 4px 8px;
  border-radius: 4px; white-space: nowrap; opacity: 0;
  transition: opacity 0.15s, transform 0.15s; pointer-events: none; z-index: 30;
}

/* Run card expand */
.run-detail { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.run-card.open .run-detail { max-height: 800px; }
.run-card .expand-icon { transition: transform 0.25s ease; }
.run-card.open .expand-icon { transform: rotate(180deg); }

/* Route card collapse */
.route-table-wrap { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.route-card.open .route-table-wrap { max-height: 600px; }

/* Sync spinner */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Subtle entrance animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.5s ease both; }
.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.1s; }
.fade-up-3 { animation-delay: 0.15s; }
.fade-up-4 { animation-delay: 0.2s; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }

/* PR badge */
.pr-badge {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 6px; border-radius: 4px;
  background: #FFF4EE; color: #FC4C02; line-height: 1;
}