:root {
  color-scheme: light;
}

body {
  background-color: #f9fafb;
  color: #111827;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.pill {
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  padding: 0.2rem 0.85rem;
  background: #f8fafc;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 9999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 150ms ease, color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.btn-primary {
  background: #2563eb;
  color: #fff;
  box-shadow: 0 10px 15px -10px rgba(37, 99, 235, 0.8);
}

.btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #eef2ff;
  color: #3730a3;
  box-shadow: 0 8px 18px -12px rgba(79, 70, 229, 0.8);
}

.btn-secondary:hover {
  background: #e0e7ff;
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

.btn-ghost:hover {
  background: #f8fafc;
}

.card-details {
  border-radius: 0.9rem;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 1rem;
}