@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Reset and base styles */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
body { line-height: 1.5; font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

/* Utility classes for the modern design */
.bg-zinc-50 { background-color: rgb(250 250 250); }
.bg-zinc-900 { background-color: rgb(24 24 27); }
.bg-white { background-color: rgb(255 255 255); }
.bg-blue-50 { background-color: rgb(239 246 255); }
.bg-blue-100 { background-color: rgb(219 234 254); }
.bg-blue-600 { background-color: rgb(37 99 235); }
.bg-blue-500 { background-color: rgb(59 130 246); }
.bg-red-500 { background-color: rgb(239 68 68); }
.bg-green-50 { background-color: rgb(240 253 244); }
.bg-green-600 { background-color: rgb(22 163 74); }
.bg-red-50 { background-color: rgb(254 242 242); }
.bg-red-600 { background-color: rgb(220 38 38); }
.bg-red-700 { background-color: rgb(185 28 28); }
.bg-zinc-200 { background-color: rgb(228 228 231); }
.bg-zinc-400 { background-color: rgb(161 161 170); }
.bg-zinc-50 { background-color: rgb(250 250 250); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.from-blue-500 { --tw-gradient-from: rgb(59 130 246); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0)); }
.from-blue-400 { --tw-gradient-from: rgb(96 165 250); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(96, 165, 250, 0)); }
.to-blue-600 { --tw-gradient-to: rgb(37 99 235); }

.text-white { color: rgb(255 255 255); }
.text-zinc-900 { color: rgb(24 24 27); }
.text-zinc-800 { color: rgb(39 39 42); }
.text-zinc-700 { color: rgb(63 63 70); }
.text-zinc-600 { color: rgb(82 82 91); }
.text-zinc-500 { color: rgb(113 113 122); }
.text-green-800 { color: rgb(22 101 52); }
.text-red-800 { color: rgb(153 27 27); }
.text-blue-600 { color: rgb(37 99 235); }
.text-blue-700 { color: rgb(29 78 216); }
.text-green-700 { color: rgb(21 128 61); }
.text-success { color: rgb(22 163 74); }
.text-danger { color: rgb(220 38 38); }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }

.font-sans, .font-inter { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", monospace; }

.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-4 { padding: 1rem; }
.p-3 { padding: 0.75rem; }
.p-2 { padding: 0.5rem; }
.p-0 { padding: 0; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.pb-16 { padding-bottom: 4rem; }
.pb-20 { padding-bottom: 5rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.pl-4 { padding-left: 1rem; }
.pr-4 { padding-right: 1rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mt-8 { margin-top: 2rem; }
.mt-6 { margin-bottom: 1.5rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-4 { margin-top: 1rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-1 { margin-top: 0.25rem; }
.ml-2 { margin-left: 0.5rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.gap-6 { gap: 1.5rem; }
.gap-5 { gap: 1.25rem; }
.gap-4 { gap: 1rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.text-center { text-align: center; }
.place-items-center { place-items: center; }
.place-content-center { place-content: center; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.flex-wrap { flex-wrap: wrap; }

.w-full { width: 100%; }
.w-8 { width: 2rem; }
.w-10 { width: 2.5rem; }
.w-16 { width: 4rem; }
.w-0 { width: 0; }
.w-9 { width: 2.25rem; }
.h-8 { height: 2rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }
.h-1 { height: 0.25rem; }
.h-2 { height: 0.5rem; }
.h-0\.5 { height: 0.125rem; }
.h-9 { height: 2.25rem; }
.h-4 { width: 1rem; height: 1rem; }
.w-5 { width: 1.25rem; }
.h-5 { height: 1.25rem; }
.size-5 { width: 1.25rem; height: 1.25rem; }
.size-2 { width: 0.5rem; height: 0.5rem; }

.rounded-xl { border-radius: 0.75rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-md { border-radius: 0.375rem; }
.rounded-full { border-radius: 9999px; }

.border { border-width: 1px; }
.border-t { border-top-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-2 { border-width: 2px; }
.border-dashed { border-style: dashed; }
.border-zinc-300 { border-color: rgb(212 212 216); }
.border-zinc-200 { border-color: rgb(228 228 231); }
.border-blue-600 { border-color: rgb(37 99 235); }
.border-blue-200 { border-color: rgb(191 219 254); }
.border-blue-300 { border-color: rgb(147 197 253); }
.border-blue-400 { border-color: rgb(96 165 250); }
.border-green-200 { border-color: rgb(187 247 208); }
.border-red-200 { border-color: rgb(254 202 202); }
.border-red-400 { border-color: rgb(248 113 113); }
.ring-1 { box-shadow: 0 0 0 1px var(--tw-ring-color); }
.ring-black\/5 { --tw-ring-color: rgba(0, 0, 0, 0.05); }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.tracking-wide { letter-spacing: 0.025em; }
.tracking-tight { letter-spacing: -0.01em; }
.no-underline { text-decoration: none; }
.opacity-75 { opacity: 0.75; }
.result-link { color: #2563eb; text-decoration: underline; }

.relative { position: relative; }
.absolute { position: absolute; }
.sticky { position: sticky; }
.fixed { position: fixed; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }
.-z-10 { z-index: -10; }

/* Spacing utilities not previously defined */
.pt-24 { padding-top: 6rem; }
.mt-auto { margin-top: auto; }

.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.hover\:bg-blue-500:hover { background-color: rgb(59 130 246); }
.hover\:bg-red-700:hover { background-color: rgb(185 28 28); }
.hover\:bg-zinc-50:hover { background-color: rgb(250 250 250); }
.hover\:border-zinc-400:hover { border-color: rgb(161 161 170); }
.hover\:border-zinc-600:hover { border-color: rgb(82 82 91); }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04); }
.hover\:-translate-y-0\.5:hover { transform: translateY(-0.125rem); }
.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
.hover\:from-blue-400:hover { --tw-gradient-from: rgb(96 165 250); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(96, 165, 250, 0)); }
.hover\:to-blue-500:hover { --tw-gradient-to: rgb(59 130 246); }
.hover\:text-zinc-900:hover { color: rgb(24 24 27); }
.hover\:border-blue-300:hover { border-color: rgb(147 197 253); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }

.divide-y > * + * { border-top-width: 1px; }
.divide-zinc-200 > * + * { border-color: rgb(228 228 231); }

.backdrop-blur { backdrop-filter: blur(8px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bg-white\/70 { background-color: rgba(255, 255, 255, 0.7); }
.bg-zinc-50\/95 { background-color: rgba(250, 250, 250, 0.95); }

/* Focus-visible ring helpers (approximate Tailwind behavior) */
.focus-visible\:outline-none:focus-visible { outline: none; }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px rgba(37,99,235,1); }
.focus-visible\:ring-blue-600:focus-visible { box-shadow: 0 0 0 2px rgba(37,99,235,1); }
.focus-visible\:ring-offset-2:focus-visible { outline-offset: 2px; }


/* Modal styles (enhanced from dialog-demo.html) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.show {
  opacity: 1;
  visibility: visible;
}
.modal-content {
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
  border: 1px solid rgba(148, 163, 184, 0.25);
}
.modal-overlay.show .modal-content {
  transform: translateY(0) scale(1);
}

/* Redesigned modal card layout */
.modal-card {
  padding: clamp(2rem, 5vw, 2.75rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 24px 60px -20px rgba(15, 23, 42, 0.25);
}

.modal-card--success {
  gap: 1.5rem;
  text-align: center;
}

.modal-card--success .modal-card__button {
  margin-top: 0.5rem;
}

.modal-card__header {
  text-align: center;
  display: grid;
  gap: 0.75rem;
}

.modal-card__title {
  margin: 0;
  font-size: clamp(1.75rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: #0f172a;
}

.modal-card__subtitle {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #475569;
}

.modal-card__subtitle span {
  color: #0f172a;
  font-weight: 600;
}

.modal-card__form {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
}

.modal-card__fields {
  display: grid;
  gap: 1rem;
}

.modal-card__label {
  display: grid;
  gap: 0.45rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: #1f2937;
}

.modal-card__input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  background: #f8fafc;
  color: #0f172a;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.modal-card__input:focus {
  outline: none;
  border-color: rgba(37, 99, 235, 0.65);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.modal-card__textarea {
  min-height: 140px;
  resize: vertical;
}

.modal-card__error {
  font-size: 0.8rem;
  font-weight: 500;
  color: #dc2626;
}

.modal-card__input--error {
  border-color: #dc2626;
  background: #fef2f2;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

.modal-card__banner {
  display: none;
  border-radius: 14px;
  padding: 0.75rem 1rem;
  background: rgba(254, 202, 202, 0.45);
  color: #b91c1c;
  font-size: 0.9rem;
  font-weight: 500;
}

.modal-card__banner:not(.hidden) {
  display: block;
}

.modal-card__actions {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
}

.modal-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  width: 100%;
}

.modal-card__button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.24);
}

.modal-card__button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none;
}

.modal-card__link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  text-decoration: underline;
  text-align: center;
}

.modal-card__link:hover {
  color: #1d4ed8;
}

.modal-card__state {
  text-align: center;
  display: grid;
  gap: 1rem;
}

.modal-card__icon {
  width: 72px;
  height: 72px;
  border-radius: 24px;
  margin: 0 auto 0.5rem;
  background: rgba(37, 99, 235, 0.12);
  display: grid;
  place-items: center;
  color: #2563eb;
}

.modal-card__icon svg {
  width: 32px;
  height: 32px;
}

@media (min-width: 640px) {
  .modal-card__actions {
    grid-template-columns: 1fr;
  }
}

/* Form input enhancements (from dialog-demo.html) */
.form-input {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid rgb(209 213 219);
  padding: 0.75rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  background: white;
}
.form-input:focus {
  outline: none;
  border-color: rgb(59 130 246);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.form-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Prose styles for content */
.prose-like h2 { font-weight: 700; font-size: 1.25rem; line-height: 1.75rem; margin: 1rem 0 .5rem; }
.prose-like h3 { font-weight: 600; font-size: 1.125rem; line-height: 1.75rem; margin: .75rem 0 .25rem; }
.prose-like p { margin: .5rem 0; }
.prose-like ul { list-style: disc; padding-left: 1.25rem; margin: .5rem 0; }
.prose-like table { width: 100%; border-collapse: collapse; font-size: .875rem; margin: .75rem 0; }
.prose-like th,.prose-like td { border: 1px solid rgb(228 228 231); padding: .5rem; }
.prose-like thead th { background: rgb(244 244 245); text-align: left; }

/* Print styles for better PDF generation */
@media print {
  body { -webkit-print-color-adjust: exact; color-adjust: exact; }
  .prose-like { page-break-inside: avoid; }
  .prose-like h1, .prose-like h2, .prose-like h3 { page-break-after: avoid; }
  .prose-like table { page-break-inside: auto; }
  .prose-like tr { page-break-inside: avoid; page-break-after: auto; }
  .prose-like thead { display: table-header-group; }
  .prose-like tfoot { display: table-footer-group; }
}

/* Responsive breakpoints */
@media (min-width: 640px) {
  .sm\:p-10 { padding: 2.5rem; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}