/* ============================================================
   Tailwind 工具类本地等价 CSS
   生成自 video.html / feedback.html 实际用到的工具类
   用于替代 cdn.tailwindcss.com（运行时编译，生产环境慢）
   1rem = 16px（与 Tailwind 默认一致）
   ============================================================ */

/* ---------- 自定义主题色（原 tailwind.config theme.extend.colors） ---------- */
.bg-cream { background-color: #F7F4EE; }
.text-neutral { color: #333333; }
.bg-navy { background-color: #0A2342; }
.text-navy { color: #0A2342; }
.bg-burgundy { background-color: #782830; }

/* ---------- 内置颜色 ---------- */
.bg-white { background-color: #fff; }
.bg-gray-200 { background-color: #e5e7eb; }
.text-white { color: #fff; }
.text-gray-500 { color: #6b7280; }
.border-gray-300 { border-color: #d1d5db; }

/* 任意值颜色（bg-[#f3efe6]、bg-white/80） */
.bg-\[\#f3efe6\] { background-color: #f3efe6; }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }

/* ---------- 字体族（原 theme.extend.fontFamily） ---------- */
.font-sans { font-family: 'Inter', 'Helvetica', 'Arial', sans-serif; }
.font-serif { font-family: Georgia, 'Times New Roman', serif; }

/* ---------- 字号 ---------- */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }

/* 任意值字号（text-[clamp(...)]） */
.text-\[clamp\(1\.6rem\,2\.5vw\,2rem\)\] { font-size: clamp(1.6rem, 2.5vw, 2rem); }
.text-\[clamp\(1\.3rem\,2vw\,1\.6rem\)\] { font-size: clamp(1.3rem, 2vw, 1.6rem); }

/* ---------- 显示 / 块级 ---------- */
.block { display: block; }
.flex { display: flex; }
.grid { display: grid; }

/* ---------- flex 布局 ---------- */
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.items-center { align-items: center; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* ---------- grid 布局 ---------- */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- 子元素间距（space-y-* / divide-*） ---------- */
.space-y-4 > * + * { margin-top: 1rem; }
.divide-x > * + * { border-left-width: 1px; }
.divide-gray-300 > * + * { border-left-color: #d1d5db; }

/* ---------- 最大宽度 ---------- */
.max-w-7xl { max-width: 80rem; }   /* 1280px */
.max-w-2xl { max-width: 42rem; }   /* 672px */
.max-w-xl  { max-width: 36rem; }   /* 576px */

/* ---------- 水平/垂直外边距 ---------- */
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mt-16 { margin-top: 4rem; }

/* ---------- 水平/垂直内边距 ---------- */
.p-8 { padding: 2rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.py-2.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.pb-0 { padding-bottom: 0; }
.pb-6 { padding-bottom: 1.5rem; }
.pb-14 { padding-bottom: 3.5rem; }
.pt-2 { padding-top: 0.5rem; }
.pt-4 { padding-top: 1rem; }
.pl-0.5 { padding-left: 0.125rem; }

/* ---------- 宽度 / 高度 ---------- */
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.h-16 { height: 4rem; }
.h-36 { height: 9rem; }
.h-44 { height: 11rem; }
.h-\[1px\] { height: 1px; }

/* ---------- 定位 ---------- */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }

/* ---------- 溢出 / 圆角 / 对象适配 ---------- */
.overflow-hidden { overflow: hidden; }
.rounded-full { border-radius: 9999px; }
.rounded-sm { border-radius: 0.125rem; }
.object-contain { object-fit: contain; }

/* ---------- 边框 ---------- */
.border { border-width: 1px; }

/* ---------- 指针事件 / 透明度 / 过渡 ---------- */
.pointer-events-none { pointer-events: none; }
.opacity-80 { opacity: 0.8; }
.hover\:opacity-90:hover { opacity: 0.9; }
.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; }

/* ---------- 文本对齐 ---------- */
.text-center { text-align: center; }

/* ---------- 自定义工具类（原 feedback.html @layer utilities） ---------- */
.text-balance { text-wrap: balance; }

/* ============================================================
   响应式断点：md:  (≥768px)
   ============================================================ */
@media (min-width: 768px) {
    .md\:px-8  { padding-left: 2rem; padding-right: 2rem; }
    .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
    .md\:pb-10 { padding-bottom: 2.5rem; }
    .md\:pt-5  { padding-top: 1.25rem; }
    .md\:mt-0  { margin-top: 0; }
    .md\:h-24  { height: 6rem; }
    .md\:flex-row { flex-direction: row; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}