:root {
  --bg-1: #f7fafc;
  --bg-2: #e8eef9;
  --accent: #0f766e;
  --accent-soft: #ccfbf1;
  --card-border: #dce4ef;
}

body {
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 12% 14%, rgba(20, 184, 166, 0.11), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(59, 130, 246, 0.11), transparent 28%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
}

.job-selected { outline: 2px solid #0f766e; }
.stage-chip-active { background: #0f766e; color: #ffffff; border-color: #0f766e; }

.job-card {
  border: 1px solid var(--card-border);
  transition: transform .22s ease, opacity .22s ease, box-shadow .22s ease, border-color .22s ease;
  animation: cardIn .26s ease both;
}

.job-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08); }

.choice-approved {
  transform: translateX(24px) scale(0.98);
  opacity: 0;
  border-color: #0f766e;
  box-shadow: 0 12px 24px rgba(15, 118, 110, 0.2);
}

.choice-skipped {
  transform: translateX(-24px) scale(0.98);
  opacity: 0;
  border-color: #64748b;
  box-shadow: 0 12px 24px rgba(100, 116, 139, 0.2);
}

.choice-applied {
  transform: translateY(-16px) scale(0.98);
  opacity: 0;
  border-color: #047857;
  box-shadow: 0 12px 24px rgba(4, 120, 87, 0.2);
}

.pulse-notice { animation: pulseNotice .45s ease; }

.undo-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  min-width: 260px;
  max-width: 360px;
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform .2s ease, opacity .2s ease;
}

.undo-toast-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseNotice {
  0% { transform: scale(0.98); opacity: 0.6; }
  100% { transform: scale(1); opacity: 1; }
}