/* =============================================================
   Tailwind 兼容层（静态版）
   -------------------------------------------------------------
   背景：layouts.h5 原先通过 https://cdn.tailwindcss.com 引入 Tailwind Play CDN，
   它会在浏览器里运行时编译 CSS，造成白屏闪烁（FOUC）并拖慢首屏，
   官方也明确声明不可用于生产环境。

   本文件把项目中「实际使用到」的 Tailwind 工具类固化成静态 CSS，
   从而可以在保留原有 class 写法的前提下移除 CDN。

   覆盖范围：resources/views/h5 中使用 layouts.h5 且仍用到 Tailwind 类的页面
   （cards / order-detail / exams / poster / history / search）。

   维护说明：新增页面若使用了本文件未覆盖的 Tailwind 类，请在此补充；
   更推荐的做法是使用 h5.css 的 hx- 语义类。
   ============================================================= */

/* ====== 布局 ====== */
.block{display:block;}
.flex{display:flex;}
.grid{display:grid;}
.hidden{display:none;}
.fixed{position:fixed;}
.flex-1{flex:1 1 0%;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}

/* ====== 定位 ====== */
.top-0{top:0;}
.right-0{right:0;}
.bottom-0{bottom:0;}
.left-0{left:0;}
.z-40{z-index:40;}

/* ====== 间距 ====== */
.gap-2{gap:8px;}
.gap-3{gap:12px;}

.p-2{padding:8px;}
.p-3{padding:12px;}
.p-4{padding:16px;}
.px-2{padding-left:8px;padding-right:8px;}
.px-3{padding-left:12px;padding-right:12px;}
.px-4{padding-left:16px;padding-right:16px;}
.py-1{padding-top:4px;padding-bottom:4px;}
.py-2{padding-top:8px;padding-bottom:8px;}
.py-3{padding-top:12px;padding-bottom:12px;}
.py-4{padding-top:16px;padding-bottom:16px;}
.py-10{padding-top:40px;padding-bottom:40px;}
.pt-16{padding-top:64px;}
.pb-20{padding-bottom:80px;}
.pb-24{padding-bottom:96px;}

.mt-1{margin-top:4px;}
.mt-2{margin-top:8px;}
.mt-14{margin-top:56px;}
.mb-1{margin-bottom:4px;}
.mb-2{margin-bottom:8px;}
.mb-3{margin-bottom:12px;}
.mb-4{margin-bottom:16px;}
.mb-6{margin-bottom:24px;}
.ml-3{margin-left:12px;}
.ml-auto{margin-left:auto;}
.mr-1{margin-right:4px;}
.mr-3{margin-right:12px;}
.mr-4{margin-right:16px;}
.mx-auto{margin-left:auto;margin-right:auto;}

/* 子元素间距 */
.space-y-2>*+*{margin-top:8px;}
.space-y-3>*+*{margin-top:12px;}
.space-y-4>*+*{margin-top:16px;}
.space-x-2>*+*{margin-left:8px;}

/* ====== 尺寸 ====== */
.w-5{width:20px;}
.w-8{width:32px;}
.w-16{width:64px;}
.w-20{width:80px;}
.w-full{width:100%;}
.h-8{height:32px;}
.h-16{height:64px;}
.h-20{height:80px;}
.h-28{height:112px;}
.h-32{height:128px;}
.min-w-0{min-width:0;}
.max-w-xs{max-width:320px;}
.max-w-sm{max-width:384px;}

/* ====== 字体 ====== */
.text-xs{font-size:12px;line-height:16px;}
.text-sm{font-size:14px;line-height:20px;}
.text-lg{font-size:18px;line-height:28px;}
.text-xl{font-size:20px;line-height:28px;}
.text-2xl{font-size:24px;line-height:32px;}
.text-4xl{font-size:36px;line-height:40px;}
.font-medium{font-weight:500;}
.text-center{text-align:center;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ====== 文字颜色 ====== */
.text-white{color:#fff;}
.text-gray-400{color:#9ca3af;}
.text-gray-500{color:#6b7280;}
.text-gray-600{color:#4b5563;}
.text-gray-800{color:#1f2937;}
.text-blue-500{color:#3b82f6;}
.text-blue-600{color:#2563eb;}
.text-green-500{color:#22c55e;}
.text-green-600{color:#16a34a;}
.text-orange-500{color:#f97316;}
.text-red-500{color:#ef4444;}
.text-primary{color:var(--hx-primary);}

/* ====== 背景 ====== */
.bg-white{background-color:#fff;}
.bg-gray-100{background-color:#f3f4f6;}
.bg-blue-100{background-color:#dbeafe;}
.bg-green-100{background-color:#dcfce7;}
.bg-primary{background-color:var(--hx-primary);}

/* 渐变：支持 from / via / to，未设置 via 时退化为 from→to 两段渐变 */
.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-from,transparent),var(--tw-via,var(--tw-to,transparent)),var(--tw-to,transparent));}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-from,transparent),var(--tw-via,var(--tw-to,transparent)),var(--tw-to,transparent));}
.via-purple-600{--tw-via:#9333ea;}
.from-primary{--tw-from:var(--hx-primary);}
.to-secondary{--tw-to:#a855f7;}
.from-gray-400{--tw-from:#9ca3af;}
.to-gray-500{--tw-to:#6b7280;}

/* ====== 边框 ====== */
.border{border-width:1px;border-style:solid;border-color:#e5e7eb;}
.border-2{border-width:2px;}
.border-b{border-bottom-width:1px;border-bottom-style:solid;}
.border-t{border-top-width:1px;border-top-style:solid;}
.border-l{border-left-width:1px;border-left-style:solid;}
.border-b-2{border-bottom-width:2px;}
.border-t-transparent{border-top-color:transparent;}
.border-gray-100{border-color:#f3f4f6;}
.border-gray-200{border-color:#e5e7eb;}
.border-gray-300{border-color:#d1d5db;}
.border-white{border-color:#fff;}
.border-primary{border-color:var(--hx-primary);}

/* ====== 圆角 ====== */
.rounded-sm{border-radius:2px;}
.rounded-lg{border-radius:8px;}
.rounded-full{border-radius:9999px;}

/* ====== 效果 ====== */
.shadow-sm{box-shadow:0 1px 2px 0 rgb(0 0 0 / .05);}
.shadow-lg{box-shadow:0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);}
.transition-colors{transition:color .15s, background-color .15s, border-color .15s;}
.opacity-60{opacity:.6;}
.overflow-hidden{overflow:hidden;}
.object-cover{object-fit:cover;}
.cursor-pointer{cursor:pointer;}

/* ====== 焦点态 ====== */
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}
.focus\:ring-1:focus{box-shadow:0 0 0 1px var(--tw-ring, rgba(99,102,241,.5));}
.focus\:ring-2:focus{box-shadow:0 0 0 2px var(--tw-ring, rgba(99,102,241,.5));}
.focus\:ring-primary:focus{--tw-ring:var(--hx-primary);}
.focus\:ring-blue-400:focus{--tw-ring:#60a5fa;}

/* ====== 动画 ====== */
@keyframes hx-spin{to{transform:rotate(360deg);}}
.animate-spin{animation:hx-spin 1s linear infinite;}

/* =============================================================
   JS 动态生成的类（toast / loading / dialog / 选项卡）
   -------------------------------------------------------------
   这些类不出现在 class="..." 属性里，而是在 JS 中通过
   `el.className = '...'` 或 `classList.add('...')` 赋值，
   静态扫描 class 属性会漏掉，因此单独列出。
   缺了它们会导致：提示框错位到左上角、遮罩不铺满、选项卡高亮异常。
   ============================================================= */
.inset-0{top:0;right:0;bottom:0;left:0;}
.bottom-20{bottom:80px;}

.bg-black\/50{background-color:rgb(0 0 0 / .5);}
.bg-black\/70{background-color:rgb(0 0 0 / .7);}
.bg-gray-800{background-color:#1f2937;}

.top-1\/2{top:50%;}
.left-1\/2{left:50%;}
/* 两者通常同时出现，用 CSS 变量组合，避免后写的 transform 覆盖前者 */
.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0));}
.-translate-y-1\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x,0),var(--tw-translate-y,0));}

.px-6{padding-left:24px;padding-right:24px;}
.z-50{z-index:50;}
.border-transparent{border-color:transparent;}
.whitespace-nowrap{white-space:nowrap;}
.flex-shrink-0{flex-shrink:0;}

/* ====== teacher-detail 迁移补充 ====== */
.absolute{position:absolute;}
.w-10{width:40px;}
.h-10{height:40px;}
.ml-2{margin-left:8px;}
.mr-2{margin-right:8px;}
.mr-1\.5{margin-right:6px;}
.mt-3{margin-top:12px;}
.-mx-4{margin-left:-16px;margin-right:-16px;}
.pt-3{padding-top:12px;}
.py-2\.5{padding-top:10px;padding-bottom:10px;}
.py-8{padding-top:32px;padding-bottom:32px;}
.py-12{padding-top:48px;padding-bottom:48px;}
.rounded-md{border-radius:6px;}
.rounded-xl{border-radius:12px;}
.border-4{border-width:4px;}
.bg-gray-50{background-color:#f9fafb;}
.text-3xl{font-size:30px;line-height:36px;}
.text-base{font-size:16px;line-height:24px;}
.text-gray-300{color:#d1d5db;}
.text-red-400{color:#f87171;}
.text-yellow-400{color:#facc15;}
.text-right{text-align:right;}
.leading-relaxed{line-height:1.625;}
.whitespace-pre-line{white-space:pre-line;}
.font-sans{font-family:inherit;}
.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);}
.shadow-2xl{box-shadow:0 25px 50px -12px rgb(0 0 0 / .25);}
.transition-transform{transition:transform .15s;}
.from-red-400{--tw-from:#f87171;}
.to-pink-500{--tw-to:#ec4899;}

/* 状态/结构伪类 */
.hover\:bg-gray-50:hover{background-color:#f9fafb;}
.hover\:text-gray-600:hover{color:#4b5563;}
.active\:bg-gray-100:active{background-color:#f3f4f6;}
.active\:scale-95:active{transform:scale(.95);}
.last\:border-0:last-child{border-width:0;}

/* =============================================================
   distribution（分销中心）迁移补充
   ============================================================= */
.relative{position:relative;}
.align-top{vertical-align:top;}
.z-10{z-index:10;}

.gap-4{gap:16px;}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}

.w-12{width:48px;}
.w-14{width:56px;}
.w-48{width:192px;}
.w-64{width:256px;}
.h-5{height:20px;}
.h-12{height:48px;}
.h-14{height:56px;}
.h-48{height:192px;}
.h-64{height:256px;}
.min-h-screen{min-height:100vh;}

.mx-4{margin-left:16px;margin-right:16px;}
.ml-1{margin-left:4px;}
.mt-0\.5{margin-top:2px;}
.mt-4{margin-top:16px;}
.mt-6{margin-top:24px;}
.-bottom-1{bottom:-4px;}
.-right-1{right:-4px;}
.left-1\/4{left:25%;}
.right-1\/4{right:25%;}

.p-5{padding:20px;}
.p-6{padding:24px;}
.p-8{padding:32px;}
.pt-4{padding-top:16px;}
.pb-8{padding-bottom:32px;}
.py-0\.5{padding-top:2px;padding-bottom:2px;}

.font-bold{font-weight:700;}
.font-semibold{font-weight:600;}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.text-left{text-align:left;}
.text-8xl{font-size:96px;line-height:1;}
.text-\[10px\]{font-size:10px;line-height:14px;}
.tracking-tight{letter-spacing:-.025em;}
.tracking-wider{letter-spacing:.05em;}

.rounded-2xl{border-radius:16px;}
.rounded-3xl{border-radius:24px;}
.border-slate-900{border-color:#0f172a;}

.opacity-10{opacity:.1;}
.opacity-30{opacity:.3;}
.blur-3xl{filter:blur(64px);}
.backdrop-blur-sm{backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}

/* 文字颜色 */
.text-amber-400{color:#fbbf24;}
.text-blue-400{color:#60a5fa;}
.text-cyan-400{color:#22d3ee;}
.text-emerald-400{color:#34d399;}
.text-indigo-400{color:#818cf8;}
.text-purple-400{color:#c084fc;}
.text-rose-400{color:#fb7185;}
.text-teal-400{color:#2dd4bf;}
.text-violet-400{color:#a78bfa;}
.text-white\/60{color:rgb(255 255 255 / .6);}
.text-white\/70{color:rgb(255 255 255 / .7);}

/* 背景（含透明度写法） */
.bg-emerald-500{background-color:#10b981;}
.bg-amber-500\/25{background-color:rgb(245 158 11 / .25);}
.bg-black\/80{background-color:rgb(0 0 0 / .8);}
.bg-blue-500\/20{background-color:rgb(59 130 246 / .2);}
.bg-cyan-400\/20{background-color:rgb(34 211 238 / .2);}
.bg-cyan-500\/20{background-color:rgb(6 182 212 / .2);}
.bg-emerald-500\/20{background-color:rgb(16 185 129 / .2);}
.bg-indigo-500\/20{background-color:rgb(99 102 241 / .2);}
.bg-purple-500\/20{background-color:rgb(168 85 247 / .2);}
.bg-rose-500\/20{background-color:rgb(244 63 94 / .2);}
.bg-teal-500\/20{background-color:rgb(20 184 166 / .2);}
.bg-violet-500\/20{background-color:rgb(139 92 246 / .2);}
.bg-white\/5{background-color:rgb(255 255 255 / .05);}
.bg-white\/20{background-color:rgb(255 255 255 / .2);}
.bg-amber-500\/20{background-color:rgb(245 158 11 / .2);}

/* 渐变起止色 */
.from-amber-500\/15{--tw-from:rgb(245 158 11 / .15);}
.from-amber-500\/20{--tw-from:rgb(245 158 11 / .2);}
.from-cyan-500{--tw-from:#06b6d4;}
.from-cyan-500\/20{--tw-from:rgb(6 182 212 / .2);}
.from-indigo-500{--tw-from:#6366f1;}
.from-indigo-500\/20{--tw-from:rgb(99 102 241 / .2);}
.from-indigo-600{--tw-from:#4f46e5;}
.to-blue-500\/20{--tw-to:rgb(59 130 246 / .2);}
.to-blue-600{--tw-to:#2563eb;}
.to-cyan-500{--tw-to:#06b6d4;}
.to-orange-500\/15{--tw-to:rgb(249 115 22 / .15);}
.to-orange-500\/20{--tw-to:rgb(249 115 22 / .2);}
.to-purple-500\/20{--tw-to:rgb(168 85 247 / .2);}
.to-purple-600{--tw-to:#9333ea;}

/* 边框（含透明度） */
.border-amber-500\/30{border-color:rgb(245 158 11 / .3);}
.border-cyan-500\/30{border-color:rgb(6 182 212 / .3);}
.border-indigo-500\/30{border-color:rgb(99 102 241 / .3);}
.border-indigo-500\/50{border-color:rgb(99 102 241 / .5);}

/* 悬浮态 */
.hover\:bg-white\/5:hover{background-color:rgb(255 255 255 / .05);}
.hover\:bg-white\/10:hover{background-color:rgb(255 255 255 / .1);}
.hover\:text-indigo-300:hover{color:#a5b4fc;}