/**
 * 兼容原 Next.js 文章 HTML 中的 Tailwind 工具类
 */

/* Layout */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-x-4 { column-gap: 1rem; }
.gap-y-1 { row-gap: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }

/* Grid */
.grid { display: grid; }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gap-2 { gap: .5rem; }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:table-cell { display: table-cell !important; }
}

/* Sizing */
.w-full { width: 100%; }
.w-16 { width: 4rem; }
.h-16 { height: 4rem; }
.w-fit { width: fit-content; }
.min-w-0 { min-width: 0; }

/* Spacing */
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
.mt-0\.5 { margin-top: .125rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.ml-4 { margin-left: 1rem; }
.ml-auto { margin-left: auto; }

/* Typography */
.text-xs { font-size: .75rem; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.leading-relaxed { line-height: 1.625; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.whitespace-nowrap { white-space: nowrap; }

/* Text colors */
.text-gray-200, .dark\:text-gray-200 { color: #1f2937; }
.text-gray-300, .dark\:text-gray-300 { color: #374151; }
.text-gray-400, .dark\:text-gray-400 { color: #4b5563; }
.text-gray-500, .dark\:text-gray-500 { color: #6b7280; }
.text-gray-600, .dark\:text-gray-600 { color: #4b5563; }
.text-gray-700, .dark\:text-gray-700 { color: #374151; }
.text-gray-800, .dark\:text-gray-800 { color: #1f2937; }
.text-amber-300, .dark\:text-amber-300 { color: #b45309; }
.text-amber-600, .dark\:text-amber-600 { color: #d97706; }
.text-amber-700, .dark\:text-amber-700 { color: #b45309; }
.text-amber-800, .dark\:text-amber-800 { color: #92400e; }
.text-yellow-700, .dark\:text-yellow-300 { color: #a16207; }
.text-green-700, .dark\:text-green-300, .dark\:text-green-400 { color: #15803d; }
.text-blue-600, .dark\:text-blue-400 { color: #2563eb; }
.text-blue-700, .dark\:text-blue-300 { color: #1d4ed8; }
.text-red-500, .dark\:text-red-400 { color: #ef4444; }
.text-red-600, .dark\:text-red-400 { color: #dc2626; }
.text-red-700, .dark\:text-red-300 { color: #b91c1c; }
.text-pink-700, .dark\:text-pink-300 { color: #be185d; }
.text-purple-700, .dark\:text-purple-300 { color: #7e22ce; }
.text-yellow-600 { color: #ca8a04; }

/* Backgrounds */
.bg-white, .dark\:bg-gray-900, .dark\:bg-gray-800\/50 { background-color: #fff; }
.bg-gray-50, .dark\:bg-gray-800\/50 { background-color: #f9fafb; }
.bg-gray-100 { background-color: #f3f4f6; }
.bg-amber-50, .dark\:bg-amber-900\/20, .dark\:bg-amber-950\/20 { background-color: #fffbeb; }
.bg-amber-100, .dark\:bg-amber-900\/30 { background-color: #fef3c7; }
.bg-yellow-50, .dark\:bg-yellow-900\/20 { background-color: #fefce8; }
.bg-green-50, .dark\:bg-green-900\/20 { background-color: #f0fdf4; }
.bg-blue-50, .dark\:bg-blue-900\/20 { background-color: #eff6ff; }
.bg-red-50, .dark\:bg-red-900\/20, .dark\:bg-red-900\/30 { background-color: #fef2f2; }
.bg-red-100 { background-color: #fee2e2; }
.bg-red-500 { background-color: #ef4444; color: #fff; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from, #fffbeb), var(--tw-gradient-to, #ffedd5)); }
.from-amber-50 { --tw-gradient-from: #fffbeb; }
.to-orange-50 { --tw-gradient-to: #ffedd5; }
.from-red-50 { --tw-gradient-from: #fef2f2; }
.to-amber-50 { --tw-gradient-to: #fffbeb; }
.from-amber-400 { --tw-gradient-from: #fbbf24; }
.to-red-500 { --tw-gradient-to: #ef4444; }
.bg-gradient-to-br.from-amber-400.to-red-500,
.bg-gradient-to-br.from-amber-400.to-red-500 {
  background-image: linear-gradient(to bottom right, #fbbf24, #ef4444);
}
.h-16.w-16.bg-gradient-to-br.from-amber-400.to-red-500,
.flex.h-16.w-16.items-center.justify-center.rounded-full.bg-gradient-to-br.from-amber-400.to-red-500 {
  background-image: linear-gradient(to bottom right, #fbbf24, #ef4444);
}

/* Borders */
.border { border-width: 1px; border-style: solid; }
.border-2 { border-width: 2px; border-style: solid; }
.border-transparent { border-color: transparent; }
.border-amber-100, .dark\:border-amber-900\/30, .dark\:border-amber-900\/20 { border-color: #fde68a; }
.border-amber-200, .dark\:border-amber-800 { border-color: #fcd34d; }
.border-amber-300, .dark\:border-amber-700 { border-color: #fcd34d; }
.border-gray-100, .dark\:border-gray-800 { border-color: #f3f4f6; }
.border-gray-200, .dark\:border-gray-700 { border-color: #e5e7eb; }
.border-blue-200, .dark\:border-blue-700 { border-color: #bfdbfe; }
.border-red-100, .dark\:border-red-900\/20 { border-color: #fecaca; }
.border-red-200, .dark\:border-red-800 { border-color: #fecaca; }
.border-yellow-100, .dark\:border-yellow-900\/20 { border-color: #fef08a; }
.border-pink-100, .dark\:border-pink-900\/20 { border-color: #fbcfe8; }
.border-purple-100, .dark\:border-purple-900\/20 { border-color: #e9d5ff; }
.border-green-200, .dark\:border-green-800 { border-color: #bbf7d0; }

/* Radius & shadow */
.rounded { border-radius: .25rem; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-full { border-radius: 9999px; }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }

/* Display */
.hidden { display: none; }
.overflow-hidden { overflow: hidden; }

/* Table */
table.w-full { width: 100%; border-collapse: collapse; }
.divide-y > * + * { border-top: 1px solid #fef3c7; }
.divide-amber-50 > * + * { border-top-color: #fffbeb; }

/* Hover */
.hover\:bg-amber-50\/50:hover,
.dark\:hover\:bg-amber-900\/10:hover { background-color: rgba(255, 251, 235, 0.8); }
.hover\:border-amber-300:hover { border-color: #fcd34d; }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); }
.group:hover .group-hover\:text-amber-700 { color: #b45309; }

/* Lists */
.list-inside { list-style-position: inside; }
.list-disc { list-style-type: disc; }
.list-decimal { list-style-type: decimal; }

/* Card slot (shadcn remnants in HTML) */
.text-card-foreground { color: #1f2937; }

/* Prose area grid inside article */
.prose .grid { display: grid; gap: 1rem; }
@media (min-width: 640px) {
  .prose .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Author / trust cards */
.ui-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: .75rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: 1px solid #fde68a;
  background: #fff;
  color: #1f2937;
  margin-bottom: 2rem;
}
.ui-card-body { padding: 1.25rem; }
.ui-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
}
.ui-badge-amber { background: #fef3c7; color: #b45309; border-color: transparent; }
.ui-badge-blue { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.ui-badge-outline { border: 1px solid #e5e7eb; background: transparent; }