html { scroll-behavior: smooth; }
body {
  font-family: "Inter", system-ui, sans-serif;
  color: #1A1A2E;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Buttons (plain CSS, not @apply — Play CDN doesn't process @apply externally) */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 6px; background: #0052CC; color: #fff;
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  box-shadow: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  transition: background 0.15s ease;
}
.btn-primary:hover { background: #0042A3; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 6px; border: 1px solid #0052CC; color: #0052CC; background: #fff;
  padding: 12px 20px; font-size: 14px; font-weight: 600;
  transition: background 0.15s ease;
}
.btn-secondary:hover { background: #E6EEFA; }

/* Form controls */
.input {
  width: 100%; border-radius: 6px; border: 1px solid #cbd5e1;
  background: #fff; padding: 10px 12px; font-size: 14px; color: #1A1A2E;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus { outline: none; border-color: #0052CC; box-shadow: 0 0 0 3px #CCDDF5; }
.label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: #1A1A2E; }

/* Card */
.card {
  border-radius: 10px; background: #fff;
  box-shadow: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  transition: box-shadow 0.15s ease;
}
.card:hover { box-shadow: 0 8px 24px rgba(16,24,40,0.10), 0 4px 8px rgba(16,24,40,0.04); }

/* Line clamp helpers */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Mobile nav drawer */
#mobile-nav { transition: max-height 0.25s ease; overflow: hidden; max-height: 0; }
#mobile-nav.open { max-height: 400px; }

/* Tailwind text-balance polyfill (graceful) */
.text-balance { text-wrap: balance; }