/* ================================================================
 * 国内浏览器兼容兜底层（legacy-compat.css）
 *
 * 重要：此文件独立于 globals.css 引入，且不能用 @import "tailwindcss"
 * 包裹 —— Tailwind v4 的 PostCSS 插件会进行 tree-shaking 删除"未使用"规则。
 * 独立文件让 Next.js 原样输出，不被任何插件处理。
 *
 * 兼容性：百度手机浏览器（Chromium 70-80 内核）等
 * - 不识别 CSS Color Level 4：8位hex (#fff9)、color-mix()、lab()
 * - 不识别 @supports 条件中的某些特性检测
 * - 不识别 @property CSS 变量定义
 * - 这些规则会被浏览器解析器跳过
 * - 我们直接给出兼容写法
 * ================================================================ */

/* ===== 强制初始化所有 Tailwind CSS 变量（百度浏览器不识别 @supports 包裹的变量） ===== */
*, *::before, *::after {
  --tw-rotate-x: initial;
  --tw-rotate-y: initial;
  --tw-rotate-z: initial;
  --tw-skew-x: initial;
  --tw-skew-y: initial;
  --tw-space-y-reverse: 0;
  --tw-border-style: solid;
  --tw-gradient-position: initial;
  --tw-gradient-from: transparent;
  --tw-gradient-via: transparent;
  --tw-gradient-to: transparent;
  --tw-gradient-stops: initial;
  --tw-gradient-via-stops: initial;
  --tw-gradient-from-position: 0%;
  --tw-gradient-via-position: 50%;
  --tw-gradient-to-position: 100%;
  --tw-leading: initial;
  --tw-font-weight: initial;
  --tw-tracking: initial;
  --tw-shadow: 0 0 transparent;
  --tw-shadow-color: initial;
  --tw-shadow-alpha: 100%;
  --tw-inset-shadow: 0 0 transparent;
  --tw-inset-shadow-color: initial;
  --tw-inset-shadow-alpha: 100%;
  --tw-ring-color: initial;
  --tw-ring-shadow: 0 0 transparent;
  --tw-inset-ring-color: initial;
  --tw-inset-ring-shadow: 0 0 transparent;
  --tw-ring-inset: initial;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-shadow: 0 0 transparent;
  --tw-blur: initial;
  --tw-brightness: initial;
  --tw-contrast: initial;
  --tw-grayscale: initial;
  --tw-hue-rotate: initial;
  --tw-invert: initial;
  --tw-opacity: initial;
  --tw-saturate: initial;
  --tw-sepia: initial;
  --tw-drop-shadow: initial;
  --tw-drop-shadow-color: initial;
  --tw-drop-shadow-alpha: 100%;
  --tw-drop-shadow-size: initial;
  --tw-backdrop-blur: initial;
  --tw-backdrop-brightness: initial;
  --tw-backdrop-contrast: initial;
  --tw-backdrop-grayscale: initial;
  --tw-backdrop-hue-rotate: initial;
  --tw-backdrop-invert: initial;
  --tw-backdrop-opacity: initial;
  --tw-backdrop-saturate: initial;
  --tw-backdrop-sepia: initial;
  --tw-duration: initial;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scale-z: 1;
}

/* ===== 基础布局修复（百度浏览器 flex/grid 问题） ===== */
.flex { display: -webkit-box; display: -webkit-flex; display: flex; }
.flex-col { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; }
.flex-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.items-center { -webkit-box-align: center; -webkit-align-items: center; align-items: center; }
.items-start { -webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start; }
.justify-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; }
.justify-center { -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; }
.justify-end { -webkit-box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }
.justify-start { -webkit-box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; }
.flex-1 { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.flex-shrink-0, .shrink-0 { -webkit-flex-shrink: 0; flex-shrink: 0; }

.grid { display: -ms-grid; display: grid; }
.grid-cols-2 { -ms-grid-columns: 1fr 1fr; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ===== 品牌色背景（hex 写法，兼容）===== */
.bg-brand-900  { background-color: #0f1923; }
.bg-brand-800  { background-color: #1a365d; }
.bg-brand-700  { background-color: #2a4a7f; }
.bg-brand-600  { background-color: #3b5fa0; }
.bg-brand-400  { background-color: #6b8fd4; }
.bg-brand-200  { background-color: #b8cef0; }
.bg-brand-100  { background-color: #e8f4fd; }
.bg-brand-50   { background-color: #f5f9ff; }
.bg-gold       { background-color: #c9a84c; }
.bg-gold-light { background-color: #f5ecd7; }
.bg-gold-dark  { background-color: #a8882f; }
.bg-white      { background-color: #ffffff; }
.bg-black      { background-color: #000000; }
.bg-transparent { background-color: transparent; }

/* ===== 背景透明度（rgba 兼容写法）===== */
.bg-white\/5  { background-color: rgba(255,255,255,0.05); }
.bg-white\/10 { background-color: rgba(255,255,255,0.10); }
.bg-white\/15 { background-color: rgba(255,255,255,0.15); }
.bg-white\/20 { background-color: rgba(255,255,255,0.20); }
.bg-white\/30 { background-color: rgba(255,255,255,0.30); }
.bg-white\/50 { background-color: rgba(255,255,255,0.50); }
.bg-white\/60 { background-color: rgba(255,255,255,0.60); }
.bg-white\/70 { background-color: rgba(255,255,255,0.70); }
.bg-white\/80 { background-color: rgba(255,255,255,0.80); }
.bg-white\/90 { background-color: rgba(255,255,255,0.90); }
.bg-white\/95 { background-color: rgba(255,255,255,0.95); }
.bg-gold\/5   { background-color: rgba(201,168,76,0.05); }
.bg-gold\/10  { background-color: rgba(201,168,76,0.10); }
.bg-gold\/20  { background-color: rgba(201,168,76,0.20); }
.bg-gold\/30  { background-color: rgba(201,168,76,0.30); }
.bg-brand-900\/80 { background-color: rgba(15,25,35,0.80); }
.bg-brand-900\/95 { background-color: rgba(15,25,35,0.95); }
.bg-black\/30 { background-color: rgba(0,0,0,0.30); }
.bg-black\/50 { background-color: rgba(0,0,0,0.50); }
.bg-black\/60 { background-color: rgba(0,0,0,0.60); }
.bg-black\/70 { background-color: rgba(0,0,0,0.70); }
.bg-black\/80 { background-color: rgba(0,0,0,0.80); }

/* ===== 文字色 ===== */
.text-white       { color: #ffffff; }
.text-gold        { color: #c9a84c; }
.text-gold-light  { color: #f5ecd7; }
.text-brand-900   { color: #0f1923; }
.text-brand-800   { color: #1a365d; }
.text-brand-700   { color: #2a4a7f; }
.text-brand-600   { color: #3b5fa0; }
.text-brand-400   { color: #6b8fd4; }
.text-brand-200   { color: #b8cef0; }
.text-brand-100   { color: #e8f4fd; }
.text-gray-700    { color: #364153; }
.text-white\/60   { color: rgba(255,255,255,0.60); }
.text-white\/70   { color: rgba(255,255,255,0.70); }
.text-white\/80   { color: rgba(255,255,255,0.80); }
.text-white\/90   { color: rgba(255,255,255,0.90); }
.text-gold\/20    { color: rgba(201,168,76,0.20); }
.text-gold\/30    { color: rgba(201,168,76,0.30); }

/* ===== 边框色 ===== */
.border-brand-100 { border-color: #e8f4fd; }
.border-brand-200 { border-color: #b8cef0; }
.border-brand-700 { border-color: #2a4a7f; }
.border-brand-900 { border-color: #0f1923; }
.border-gold      { border-color: #c9a84c; }
.border-white     { border-color: #ffffff; }
.border-white\/10 { border-color: rgba(255,255,255,0.10); }
.border-white\/20 { border-color: rgba(255,255,255,0.20); }
.border-white\/30 { border-color: rgba(255,255,255,0.30); }
.border-gray-100  { border-color: #f3f4f6; }

/* ===== 阴影 ===== */
.shadow-gold\/30      { -webkit-box-shadow: 0 10px 15px -3px rgba(201,168,76,0.30); box-shadow: 0 10px 15px -3px rgba(201,168,76,0.30); }
.shadow-gold\/40      { -webkit-box-shadow: 0 20px 25px -5px rgba(201,168,76,0.40); box-shadow: 0 20px 25px -5px rgba(201,168,76,0.40); }
.shadow-brand-800\/5  { -webkit-box-shadow: 0 10px 15px -3px rgba(26,54,93,0.05); box-shadow: 0 10px 15px -3px rgba(26,54,93,0.05); }
.shadow-brand-800\/20 { -webkit-box-shadow: 0 10px 15px -3px rgba(26,54,93,0.20); box-shadow: 0 10px 15px -3px rgba(26,54,93,0.20); }
.shadow-brand-900\/20 { -webkit-box-shadow: 0 10px 15px -3px rgba(15,25,35,0.20); box-shadow: 0 10px 15px -3px rgba(15,25,35,0.20); }
.ring-gold\/20        { -webkit-box-shadow: 0 0 0 2px rgba(201,168,76,0.20); box-shadow: 0 0 0 2px rgba(201,168,76,0.20); }
.shadow-sm             { -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }
.shadow-md             { -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10); }
.shadow-lg             { -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10); }
.shadow-xl             { -webkit-box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10); }

/* ===== 渐变（百度 WebView 不解析 var()，直接给 hex）===== */
.bg-gradient-to-br { background-image: -webkit-linear-gradient(top left, #0f1923, #2a4a7f); background-image: linear-gradient(to bottom right, #0f1923, #2a4a7f); }
.from-brand-900    { background-color: #0f1923; }
.via-brand-800     { background-color: #1a365d; }
.to-brand-700      { background-color: #2a4a7f; }

/* ===== backdrop-blur（百度 WebView 仅识别 -webkit- 前缀）===== */
.backdrop-blur    { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.backdrop-blur-sm { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.backdrop-blur-lg { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.backdrop-blur-xl { -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }

/* ===== 圆角 ===== */
.rounded-lg   { border-radius: 0.5rem; }
.rounded-xl   { border-radius: 0.75rem; }
.rounded-2xl  { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* ===== 间距 ===== */
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }

/* ===== 尺寸 ===== */
.h-6 { height: 1.5rem; }
.h-9 { height: 2.25rem; }
.h-16 { height: 4rem; }
.w-6 { width: 1.5rem; }
.w-full { width: 100%; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* ===== 定位 ===== */
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.z-10 { z-index: 10; }
.z-50 { z-index: 50; }

/* ===== hover 效果 ===== */
.hover\:text-gold:hover   { color: #c9a84c; }
.hover\:bg-gold:hover     { background-color: #c9a84c; }
.hover\:bg-white:hover    { background-color: #ffffff; }
.hover\:bg-white\/10:hover { background-color: rgba(255,255,255,0.10); }
.hover\:shadow-md:hover   { -webkit-box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10); box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10); }
.hover\:shadow-lg:hover   { -webkit-box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10); }
.hover\:shadow-xl:hover   { -webkit-box-shadow: 0 20px 15px -5px rgba(0,0,0,0.10); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10); }
.hover\:scale-105:hover   { -webkit-transform: scale(1.05); transform: scale(1.05); }

/* ===== 过渡动画 ===== */
.transition-all { -webkit-transition: all 0.15s ease; transition: all 0.15s ease; }
.transition-colors { -webkit-transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }

/* ===== 强制用 hex 颜色覆盖 Tailwind v4 默认生成的 lab() 函数变量 ===== */
:root, :host {
  --color-brand-900: #0f1923;
  --color-brand-800: #1a365d;
  --color-brand-700: #2a4a7f;
  --color-brand-600: #3b5fa0;
  --color-brand-400: #6b8fd4;
  --color-brand-200: #b8cef0;
  --color-brand-100: #e8f4fd;
  --color-brand-50: #f5f9ff;
  --color-gold: #c9a84c;
  --color-gold-light: #f5ecd7;
  --color-gold-dark: #a8882f;
  --color-white: #ffffff;
  --color-black: #000000;
}

/* ===== 响应式 ===== */
@media (max-width: 767px) {
  .hidden-mobile { display: none; }
  .text-5xl { font-size: 2.25rem !important; }
  .text-3xl { font-size: 1.875rem !important; }
  .py-20   { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-24   { padding-top: 4rem !important; padding-bottom: 4rem !important; }
}
@media (min-width: 768px) {
  .md\:grid-cols-2 { -ms-grid-columns: 1fr 1fr; grid-template-columns: repeat(2, 1fr) !important; }
  .md\:grid-cols-3 { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr) !important; }
  .md\:grid-cols-4 { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: repeat(4, 1fr) !important; }
  .md\:text-5xl    { font-size: 3rem !important; }
  .md\:text-6xl    { font-size: 3.75rem !important; }
  .md\:flex        { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; }
  .md\:inline-block { display: inline-block !important; }
  .md\:hidden { display: none !important; }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-3 { -ms-grid-columns: 1fr 1fr 1fr; grid-template-columns: repeat(3, 1fr) !important; }
  .lg\:grid-cols-4 { -ms-grid-columns: 1fr 1fr 1fr 1fr; grid-template-columns: repeat(4, 1fr) !important; }
  .lg\:grid-cols-5 { -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr; grid-template-columns: repeat(5, 1fr) !important; }
  .lg\:flex        { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; }
}