/* CoachAndTrack — Progress Tracking Styles */

/* Sign-in banner */
#cat-signin-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: rgba(249,115,22,0.08);
  border: 1px solid rgba(249,115,22,0.25);
  border-radius: 12px;
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
  animation: cat-fade-in 0.3s ease;
}

/* Last session display */
.cat-last-session {
  font-size: 0.85rem;
  color: #64748B;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid #2A2A3E;
  border-radius: 8px;
  margin: 0.75rem 0;
}
.cat-last-session strong { color: #94A3B8; }

/* Performance inputs */
.cat-input-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin: 0.75rem 0;
}
@media (max-width: 420px) {
  .cat-input-row { grid-template-columns: repeat(2, 1fr); }
}
.cat-input-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cat-input-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #64748B;
}
.cat-input {
  width: 100%;
  background: #1A1A2E;
  border: 1px solid #2A2A3E;
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  color: #F3F4F6;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s;
  -moz-appearance: textfield;
}
.cat-input::-webkit-outer-spin-button,
.cat-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cat-input:focus { border-color: #F97316; }
.cat-input::placeholder { color: #64748B; font-weight: 400; }

/* PR badge */
.cat-pr-badge {
  display: none;
  align-items: center;
  gap: 0.4rem;
  background: rgba(234,179,8,0.1);
  border: 1px solid rgba(234,179,8,0.3);
  color: #EAB308;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  margin: 0.5rem 0;
}
.cat-pr-new {
  animation: cat-pr-pulse 0.5s ease-out;
  background: rgba(234,179,8,0.18);
}

@keyframes cat-pr-pulse {
  0%   { transform: scale(1);    opacity: 0; }
  60%  { transform: scale(1.03); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes cat-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}