/* ============================================================
   === 默认模板配色系统 v2 ===
   品牌主色：活力橙 #FF7A22（射击游戏热血感）
   辅助色：青蓝 #16B8B0（统一全部次级操作�?
   标签紫：#8844DD（主�?职业选手�?
   中性色：严格灰度层级，保障可读�?
   页脚�?1A1A22 冷黑�?+ #E2E4E8 浅文�?
   日间/夜间双模式，对比度均 �?4.5:1
   ============================================================ */

/* ---- 字体导入（Space Grotesk 标题 + DM Sans 正文�?---- */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   设计 Token（日�?:root�?
   ============================================================ */
:root {
  /* 品牌主色 - 活力�?*/
  --brand-primary: #FF7A22;
  --brand-primary-hover: #E56A18;
  --brand-primary-soft: #FFF1E8;
  --brand-primary-glow: rgba(255, 122, 34, 0.35);

  /* 辅助�?- 青蓝（统一全部次级操作�?*/
  --brand-accent: #16B8B0;
  --brand-accent-hover: #0FA39C;
  --brand-accent-soft: #E6F7F6;
  --brand-accent-glow: rgba(22, 184, 176, 0.30);

  /* 标签�?- 主播/职业选手 */
  --tag-purple: #8844DD;
  --tag-purple-bg: #F0E7FF;

  /* 中性色 - 背景 */
  --bg-page: #FFF9F2;
  --bg-page-grad-top: #FFF3E4;
  --bg-card: #FFFFFF;
  --bg-hover: #FFF3E8;
  --bg-muted: #F7F3ED;

  /* 中性色 - 文字层级 */
  --text-heading: #141A26;
  --text-title: #2D3340;
  --text-body: #4F5664;
  --text-muted: #7A818C;
  --text-on-primary: #FFFFFF;

  /* 边框 & 分割�?*/
  --border-card: #E9E9EB;
  --border-divider: #E2E4E8;
  --border-strong: #D1D3D8;

  /* 页脚 - 冷黑 */
  --bg-footer: #1A1A22;
  --text-footer: #E2E4E8;
  --text-footer-muted: #9CA0AA;

  /* 奖牌�?*/
  --medal-gold: #FF7A22;
  --medal-silver: #B8B8B8;
  --medal-bronze: #A67038;
  --medal-rest: #9CA0AA;

  /* 阴影 */
  --shadow-sm: 0 2px 12px rgba(60, 40, 20, 0.06);
  --shadow-md: 0 4px 20px rgba(60, 40, 20, 0.08);
  --shadow-lg: 0 8px 30px rgba(60, 40, 20, 0.12);
  --radius: 12px;

  /* 兼容旧变量名 */
  --mi-accent: #FF7A22;
  --mi-accent-soft: #FFB088;
  --mi-accent-warm: #FF7A22;
  --mi-tech: #16B8B0;
  --mi-accent-glow: rgba(255, 122, 34, 0.30);
  --mi-tech-glow: rgba(22, 184, 176, 0.25);
  --mi-grad-warm: linear-gradient(135deg, #FFB088 0%, #FF7A22 50%, #E56A18 100%);

  --bg-hero: #FFF9F2;
  --text-primary: #141A26;
  --text-secondary: #4F5664;
  --border-primary: #E9E9EB;
  --button-bg: #FF7A22;
  --button-bg-hover: #E56A18;
  --accent: #16B8B0;

  --font-heading: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

/* ============================================================
   夜间模式 Token（深冷黑沉浸�?
   ============================================================ */
[data-theme="dark"],
html.dark {
  --brand-primary: #FF9A52;
  --brand-primary-hover: #FFB074;
  --brand-primary-soft: rgba(255, 122, 34, 0.16);
  --brand-primary-glow: rgba(255, 154, 82, 0.45);

  --brand-accent: #2DD4D0;
  --brand-accent-hover: #4DE3DF;
  --brand-accent-soft: rgba(22, 184, 176, 0.16);
  --brand-accent-glow: rgba(45, 212, 208, 0.40);

  --tag-purple: #B888F0;
  --tag-purple-bg: rgba(136, 68, 221, 0.18);

  --bg-page: #0F1419;
  --bg-page-grad-top: #1A1F2A;
  --bg-card: #1A1F2A;
  --bg-hover: #232936;
  --bg-muted: #161B24;

  --text-heading: #F2F4F8;
  --text-title: #E2E4E8;
  --text-body: #C5C8D0;
  --text-muted: #9DA1AC;
  --text-on-primary: #0F1419;

  --border-card: #2D3340;
  --border-divider: #232936;
  --border-strong: #3D4452;

  --bg-footer: #0A0D12;
  --text-footer: #E2E4E8;
  --text-footer-muted: #6E7280;

  --medal-gold: #FF9A52;
  --medal-silver: #9CA0AA;
  --medal-bronze: #C89060;
  --medal-rest: #6E7280;

  --shadow-sm: 0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.50);

  --mi-accent: #FF9A52;
  --mi-accent-soft: #FFB088;
  --mi-accent-warm: #FF9A52;
  --mi-tech: #2DD4D0;
  --mi-accent-glow: rgba(255, 154, 82, 0.45);
  --mi-tech-glow: rgba(45, 212, 208, 0.40);
  --mi-grad-warm: linear-gradient(135deg, #FFB088 0%, #FF9A52 50%, #FF7A22 100%);

  --bg-hero: #0F1419;
  --text-primary: #F2F4F8;
  --text-secondary: #C5C8D0;
  --border-primary: #2D3340;
  --button-bg: #FF9A52;
  --button-bg-hover: #FFB074;
  --accent: #2DD4D0;
}

/* ============================================================
   星空背景画布 + 装饰光晕（弱化，不抢卡片焦点�?
   ============================================================ */
.mi-starfield {
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  opacity: 0.5;
}
.mi-aurora-blob {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.30;
  pointer-events: none;
  z-index: -9;
}
.mi-aurora-blob--1 { width: 420px; height: 420px; background: var(--brand-primary-glow); top: -120px; right: -80px; }
.mi-aurora-blob--2 { width: 340px; height: 340px; background: var(--brand-accent-glow); bottom: 10%; left: -100px; }
[data-theme="dark"] .mi-aurora-blob, html.dark .mi-aurora-blob { opacity: 0.22; }

/* ============================================================
   全局背景：极淡米黄，只在顶部做柔和渐变点缀
   ============================================================ */
body {
  background: var(--bg-page) !important;
  color: var(--text-body);
  font-family: var(--font-body);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* ============================================================
   Tailwind 颜色类统一覆盖（核心）
   teal/cyan/emerald/sky �?青蓝 #16B8B0
   orange/amber/yellow �?活力�?#FF7A22
   ============================================================ */

/* ---- 主色（橙系）背景 ---- */
.bg-orange-50, .bg-amber-50 { background-color: var(--brand-primary-soft) !important; }
.bg-orange-100, .bg-amber-100 { background-color: var(--brand-primary-soft) !important; }
.bg-orange-500\/10, .bg-amber-500\/10 { background-color: rgba(255, 122, 34, 0.10) !important; }
.bg-orange-500\/15, .bg-amber-500\/15 { background-color: rgba(255, 122, 34, 0.15) !important; }
.bg-orange-500\/20, .bg-amber-500\/20 { background-color: rgba(255, 122, 34, 0.20) !important; }
.bg-orange-500\/25, .bg-amber-500\/25 { background-color: rgba(255, 122, 34, 0.25) !important; }
.bg-orange-400\/20, .bg-amber-400\/20 { background-color: rgba(255, 122, 34, 0.20) !important; }
.bg-orange-400\/30, .bg-amber-400\/30 { background-color: rgba(255, 122, 34, 0.30) !important; }
.bg-orange-200\/60, .bg-amber-200\/60 { background-color: rgba(255, 122, 34, 0.18) !important; }
.bg-orange-300\/60, .bg-amber-300\/60 { background-color: rgba(255, 122, 34, 0.25) !important; }
.bg-orange-500 { background-color: var(--brand-primary) !important; }
.bg-orange-600 { background-color: var(--brand-primary-hover) !important; }
.bg-amber-500 { background-color: var(--brand-primary) !important; }
.bg-amber-600 { background-color: var(--brand-primary-hover) !important; }
.bg-yellow-400 { background-color: var(--medal-gold) !important; }
.bg-yellow-500 { background-color: var(--medal-gold) !important; }

/* ---- 主色（橙系）文字 ---- */
.text-orange-400 { color: var(--brand-primary) !important; }
.text-orange-500 { color: var(--brand-primary) !important; }
.text-orange-600 { color: var(--brand-primary-hover) !important; }
.text-orange-700 { color: var(--brand-primary-hover) !important; }
.text-orange-800 { color: #B84A0E !important; }
.text-amber-300 { color: var(--brand-primary) !important; }
.text-amber-400 { color: var(--brand-primary) !important; }
.text-amber-500 { color: var(--brand-primary) !important; }
.text-amber-600 { color: var(--brand-primary-hover) !important; }
.text-amber-700 { color: var(--brand-primary-hover) !important; }
.text-amber-800 { color: #B84A0E !important; }

/* ---- 主色（橙系）边框 ---- */
.border-orange-200 { border-color: rgba(255, 122, 34, 0.25) !important; }
.border-orange-300 { border-color: rgba(255, 122, 34, 0.35) !important; }
.border-orange-400 { border-color: var(--brand-primary) !important; }
.border-orange-500 { border-color: var(--brand-primary) !important; }
.border-amber-200 { border-color: rgba(255, 122, 34, 0.25) !important; }
.border-amber-300 { border-color: rgba(255, 122, 34, 0.35) !important; }
.border-amber-400 { border-color: var(--brand-primary) !important; }
.border-amber-500 { border-color: var(--brand-primary) !important; }
.border-orange-200\/60 { border-color: rgba(255, 122, 34, 0.20) !important; }
.border-orange-400\/30 { border-color: rgba(255, 122, 34, 0.30) !important; }
.border-orange-400\/50 { border-color: rgba(255, 122, 34, 0.45) !important; }
.border-amber-400\/20 { border-color: rgba(255, 122, 34, 0.22) !important; }
.border-amber-400\/30 { border-color: rgba(255, 122, 34, 0.30) !important; }
.border-amber-400\/25 { border-color: rgba(255, 122, 34, 0.25) !important; }
.border-amber-500\/60 { border-color: rgba(255, 122, 34, 0.50) !important; }

/* ---- 主色渐变 ---- */
.from-orange-500 { --tw-gradient-from: var(--brand-primary) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-orange-600 { --tw-gradient-from: var(--brand-primary-hover) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-amber-500 { --tw-gradient-from: var(--brand-primary) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-amber-600 { --tw-gradient-from: var(--brand-primary-hover) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-amber-500 { --tw-gradient-to: var(--brand-primary) var(--tw-gradient-to-position); }
.to-amber-600 { --tw-gradient-to: var(--brand-primary-hover) var(--tw-gradient-to-position); }
.to-orange-600 { --tw-gradient-to: var(--brand-primary-hover) var(--tw-gradient-to-position); }
.via-amber-500 { --tw-gradient-stops: var(--tw-gradient-from), var(--brand-primary) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.from-amber-300 { --tw-gradient-from: var(--brand-primary) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-amber-400 { --tw-gradient-to: var(--brand-primary) var(--tw-gradient-to-position); }
.via-orange-300 { --tw-gradient-stops: var(--tw-gradient-from), var(--brand-primary) var(--tw-gradient-via-position), var(--tw-gradient-to); }

/* ---- 辅助色（青蓝系）背景：teal/cyan/emerald/sky 全部统一 ---- */
.bg-teal-50, .bg-cyan-50, .bg-emerald-50, .bg-sky-50 { background-color: var(--brand-accent-soft) !important; }
.bg-teal-100, .bg-cyan-100, .bg-emerald-100, .bg-sky-100 { background-color: var(--brand-accent-soft) !important; }
.bg-teal-500\/10, .bg-cyan-500\/10, .bg-sky-500\/10 { background-color: rgba(22, 184, 176, 0.10) !important; }
.bg-teal-500\/20, .bg-cyan-500\/20, .bg-sky-500\/20 { background-color: rgba(22, 184, 176, 0.20) !important; }
.bg-sky-500\/12, .bg-sky-500\/10 { background-color: rgba(22, 184, 176, 0.12) !important; }
.bg-sky-500\/15 { background-color: rgba(22, 184, 176, 0.15) !important; }
.bg-sky-200\/60 { background-color: rgba(22, 184, 176, 0.18) !important; }
.bg-teal-900\/20, .bg-cyan-900\/20, .bg-sky-900\/20 { background-color: rgba(22, 184, 176, 0.20) !important; }
.bg-teal-900\/30, .bg-cyan-900\/30, .bg-sky-900\/30 { background-color: rgba(22, 184, 176, 0.30) !important; }
.bg-teal-900\/40, .bg-cyan-900\/40 { background-color: rgba(22, 184, 176, 0.40) !important; }
.bg-teal-500, .bg-cyan-500, .bg-emerald-500, .bg-sky-500 { background-color: var(--brand-accent) !important; }
.bg-teal-600, .bg-cyan-600, .bg-emerald-600, .bg-sky-600 { background-color: var(--brand-accent-hover) !important; }

/* ---- 辅助色（青蓝系）文字 ---- */
.text-teal-300, .text-cyan-300, .text-sky-300 { color: var(--brand-accent) !important; }
.text-teal-400, .text-cyan-400, .text-sky-400 { color: var(--brand-accent) !important; }
.text-teal-500, .text-cyan-500, .text-sky-500 { color: var(--brand-accent) !important; }
.text-teal-600, .text-cyan-600, .text-sky-600 { color: var(--brand-accent-hover) !important; }
.text-teal-700, .text-cyan-700, .text-sky-700 { color: var(--brand-accent-hover) !important; }

/* ---- 辅助色（青蓝系）边框 ---- */
.border-teal-200, .border-cyan-200, .border-sky-200 { border-color: rgba(22, 184, 176, 0.25) !important; }
.border-teal-300, .border-cyan-300, .border-sky-300 { border-color: rgba(22, 184, 176, 0.35) !important; }
.border-teal-400, .border-cyan-400, .border-sky-400 { border-color: var(--brand-accent) !important; }
.border-teal-500, .border-cyan-500, .border-sky-500 { border-color: var(--brand-accent) !important; }
.border-teal-800, .border-cyan-800, .border-sky-800 { border-color: rgba(22, 184, 176, 0.30) !important; }
.border-sky-400\/40, .border-sky-400\/60 { border-color: rgba(22, 184, 176, 0.40) !important; }
.border-sky-200\/60 { border-color: rgba(22, 184, 176, 0.22) !important; }
.border-sky-400\/20 { border-color: rgba(22, 184, 176, 0.22) !important; }

/* ---- 辅助色渐�?---- */
.from-teal-400, .from-teal-500 { --tw-gradient-from: var(--brand-accent) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-teal-600 { --tw-gradient-from: var(--brand-accent-hover) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-cyan-500, .from-cyan-600 { --tw-gradient-from: var(--brand-accent) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-sky-500 { --tw-gradient-from: var(--brand-accent) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-teal-500, .to-cyan-500 { --tw-gradient-to: var(--brand-accent) var(--tw-gradient-to-position); }
.to-teal-600, .to-cyan-600 { --tw-gradient-to: var(--brand-accent-hover) var(--tw-gradient-to-position); }
.to-cyan-300, .to-sky-300 { --tw-gradient-to: var(--brand-accent) var(--tw-gradient-to-position); }
.from-teal-100, .from-cyan-100 { --tw-gradient-from: var(--brand-accent-soft) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-100 { --tw-gradient-to: var(--brand-accent-soft) var(--tw-gradient-to-position); }
.from-teal-900\/30, .from-cyan-900\/30 { --tw-gradient-from: rgba(22, 184, 176, 0.30) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-cyan-900\/30 { --tw-gradient-to: rgba(22, 184, 176, 0.30) var(--tw-gradient-to-position); }

/* ---- 辅助�?focus ring ---- */
.focus\:ring-teal-400:focus, .focus\:ring-cyan-400:focus, .focus\:ring-sky-400:focus { --tw-ring-color: var(--brand-accent) !important; }
.focus\:border-teal-400:focus, .focus\:border-cyan-400:focus, .focus\:border-sky-400:focus { border-color: var(--brand-accent) !important; }
.focus\:ring-orange-400:focus, .focus\:ring-amber-400:focus { --tw-ring-color: var(--brand-primary) !important; }
.focus\:border-orange-400:focus, .focus\:border-amber-400:focus { border-color: var(--brand-primary) !important; }

/* ---- hover �?---- */
.hover\:text-teal-500:hover, .hover\:text-teal-600:hover, .hover\:text-cyan-500:hover, .hover\:text-cyan-600:hover, .hover\:text-sky-500:hover, .hover\:text-sky-600:hover { color: var(--brand-accent) !important; }
.hover\:text-orange-500:hover, .hover\:text-orange-600:hover, .hover\:text-amber-500:hover, .hover\:text-amber-600:hover { color: var(--brand-primary) !important; }
.hover\:bg-teal-500:hover, .hover\:bg-cyan-500:hover { background-color: var(--brand-accent) !important; }
.hover\:from-teal-500:hover, .hover\:from-teal-600:hover { --tw-gradient-from: var(--brand-accent) var(--tw-gradient-from-position); }
.hover\:to-teal-500:hover, .hover\:to-cyan-500:hover, .hover\:to-teal-600:hover, .hover\:to-cyan-600:hover { --tw-gradient-to: var(--brand-accent) var(--tw-gradient-to-position); }
.hover\:from-orange-500:hover, .hover\:from-orange-600:hover { --tw-gradient-from: var(--brand-primary) var(--tw-gradient-from-position); }
.hover\:to-amber-500:hover, .hover\:to-amber-600:hover { --tw-gradient-to: var(--brand-primary) var(--tw-gradient-to-position); }
.hover\:border-teal-200:hover, .hover\:border-teal-300:hover, .hover\:border-teal-400:hover { border-color: var(--brand-accent) !important; }
.hover\:border-orange-300:hover, .hover\:border-orange-400:hover { border-color: var(--brand-primary) !important; }
.hover\:bg-teal-50:hover, .hover\:bg-teal-100:hover { background-color: var(--brand-accent-soft) !important; }
.hover\:bg-orange-500\/10:hover, .hover\:bg-amber-500\/10:hover { background-color: rgba(255, 122, 34, 0.10) !important; }
.hover\:bg-teal-500\/10:hover { background-color: rgba(22, 184, 176, 0.15) !important; }
.hover\:bg-sky-500\/20:hover { background-color: rgba(22, 184, 176, 0.20) !important; }
.hover\:border-sky-400\/60:hover { border-color: var(--brand-accent) !important; }

/* ---- 紫色标签（主�?职业选手�?--- */
.bg-purple-50, .bg-purple-100 { background-color: var(--tag-purple-bg) !important; }
.bg-purple-900\/30 { background-color: rgba(136, 68, 221, 0.30) !important; }
.text-purple-500, .text-purple-600, .text-purple-700 { color: var(--tag-purple) !important; }
.border-purple-200, .border-purple-300 { border-color: rgba(136, 68, 221, 0.30) !important; }

/* ---- 蓝色统一为青蓝（页面�?blue-100 用于玩家标签�?--- */
.bg-blue-50, .bg-blue-100 { background-color: var(--brand-accent-soft) !important; }
.bg-blue-900\/20, .bg-blue-900\/30 { background-color: rgba(22, 184, 176, 0.25) !important; }
.text-blue-500, .text-blue-600, .text-blue-700 { color: var(--brand-accent) !important; }
.border-blue-200, .border-blue-300 { border-color: rgba(22, 184, 176, 0.25) !important; }
.hover\:text-blue-600:hover { color: var(--brand-accent) !important; }
.hover\:bg-blue-100:hover { background-color: var(--brand-accent-soft) !important; }
.hover\:border-blue-300:hover { border-color: var(--brand-accent) !important; }

/* ---- indigo 统一为青蓝（tab-bar count badge�?--- */
.bg-indigo-500\/10 { background-color: rgba(22, 184, 176, 0.12) !important; }
.text-indigo-600 { color: var(--brand-accent) !important; }

/* ---- 绿色（价格标签、成功状态）统一为青蓝系 ---- */
.bg-green-50, .bg-green-100 { background-color: var(--brand-accent-soft) !important; }
.bg-green-900\/30 { background-color: rgba(22, 184, 176, 0.25) !important; }
.text-green-500, .text-green-600, .text-green-700 { color: var(--brand-accent) !important; }
.border-green-200, .border-green-300 { border-color: rgba(22, 184, 176, 0.25) !important; }
.from-green-400, .from-emerald-500 { --tw-gradient-from: var(--brand-accent) var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-emerald-500 { --tw-gradient-to: var(--brand-accent) var(--tw-gradient-to-position); }

/* ---- 中性灰阶统一（解决浅灰字看不清）---- */
.text-slate-900 { color: var(--text-heading) !important; }
.text-slate-800 { color: var(--text-heading) !important; }
.text-slate-700 { color: var(--text-title) !important; }
.text-slate-600 { color: var(--text-body) !important; }
.text-slate-500 { color: var(--text-muted) !important; }
.text-slate-400 { color: var(--text-muted) !important; }
.text-gray-900 { color: var(--text-heading) !important; }
.text-gray-800 { color: var(--text-heading) !important; }
.text-gray-700 { color: var(--text-title) !important; }
.text-gray-600 { color: var(--text-body) !important; }
.text-gray-500 { color: var(--text-body) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-300 { color: var(--text-muted) !important; }

/* ---- 卡片统一白底 + 统一浅灰边框 ---- */
.bg-white { background-color: var(--bg-card) !important; }
.bg-gray-50 { background-color: var(--bg-muted) !important; }
.bg-gray-100 { background-color: var(--bg-muted) !important; }
.border-gray-200, .border-gray-300 { border-color: var(--border-card) !important; }
.border-slate-200, .border-slate-300 { border-color: var(--border-card) !important; }
.border-gray-100 { border-color: var(--border-divider) !important; }

/* ---- 卡片 hover 边框统一 ---- */
.hover\:border-teal-200:hover, .hover\:border-teal-300:hover, .hover\:border-teal-700:hover, .hover\:border-teal-800:hover { border-color: var(--brand-accent) !important; }
.hover\:border-orange-300:hover, .hover\:border-orange-700:hover { border-color: var(--brand-primary) !important; }

/* ---- 阴影统一 ---- */
.shadow-orange-500\/25 { --tw-shadow-color: rgba(255, 122, 34, 0.25); }
.shadow-orange-500\/40 { --tw-shadow-color: rgba(255, 122, 34, 0.40); }
.shadow-teal-500\/25 { --tw-shadow-color: rgba(22, 184, 176, 0.25); }
.shadow-teal-500\/40 { --tw-shadow-color: rgba(22, 184, 176, 0.40); }
.shadow-amber-400\/30 { --tw-shadow-color: rgba(255, 122, 34, 0.30); }

/* ============================================================
   夜间模式覆盖
   ============================================================ */
[data-theme="dark"] body, html.dark body {
  background: var(--bg-page) !important;
  color: var(--text-body);
}

/* 夜间：卡片深色玻璃�?*/
[data-theme="dark"] .bg-white, html.dark .bg-white { background-color: var(--bg-card) !important; }
[data-theme="dark"] .bg-gray-50, html.dark .bg-gray-50 { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .bg-gray-100, html.dark .bg-gray-100 { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .bg-gray-900, html.dark .bg-gray-900 { background-color: var(--bg-card) !important; }
[data-theme="dark"] .bg-gray-800, html.dark .bg-gray-800 { background-color: var(--bg-muted) !important; }
[data-theme="dark"] .bg-slate-900, html.dark .bg-slate-900 { background-color: var(--bg-card) !important; }
[data-theme="dark"] .bg-slate-800, html.dark .bg-slate-800 { background-color: var(--bg-muted) !important; }

/* 夜间：半透明玻璃 */
[data-theme="dark"] .bg-white\/70, html.dark .bg-white\/70 { background-color: rgba(26, 31, 42, 0.72) !important; }
[data-theme="dark"] .bg-white\/80, html.dark .bg-white\/80 { background-color: rgba(26, 31, 42, 0.80) !important; }
[data-theme="dark"] .bg-white\/60, html.dark .bg-white\/60 { background-color: rgba(26, 31, 42, 0.65) !important; }
[data-theme="dark"] .bg-slate-900\/70, html.dark .bg-slate-900\/70 { background-color: rgba(15, 20, 25, 0.72) !important; }
[data-theme="dark"] .bg-slate-900\/60, html.dark .bg-slate-900\/60 { background-color: rgba(15, 20, 25, 0.68) !important; }
[data-theme="dark"] .bg-gray-900\/70, html.dark .bg-gray-900\/70 { background-color: rgba(15, 20, 25, 0.72) !important; }
[data-theme="dark"] .bg-gray-900\/60, html.dark .bg-gray-900\/60 { background-color: rgba(15, 20, 25, 0.68) !important; }
[data-theme="dark"] .bg-gray-800\/60, html.dark .bg-gray-800\/60 { background-color: rgba(26, 31, 42, 0.60) !important; }
[data-theme="dark"] .bg-gray-800\/50, html.dark .bg-gray-800\/50 { background-color: rgba(26, 31, 42, 0.50) !important; }

/* 夜间：文字色 */
[data-theme="dark"] .text-slate-900, html.dark .text-slate-900,
[data-theme="dark"] .text-slate-800, html.dark .text-slate-800,
[data-theme="dark"] .text-gray-900, html.dark .text-gray-900,
[data-theme="dark"] .text-gray-800, html.dark .text-gray-800,
[data-theme="dark"] .text-white, html.dark .text-white { color: var(--text-heading) !important; }
[data-theme="dark"] .text-slate-700, html.dark .text-slate-700,
[data-theme="dark"] .text-gray-700, html.dark .text-gray-700 { color: var(--text-title) !important; }
[data-theme="dark"] .text-slate-600, html.dark .text-slate-600,
[data-theme="dark"] .text-slate-500, html.dark .text-slate-500,
[data-theme="dark"] .text-gray-600, html.dark .text-gray-600,
[data-theme="dark"] .text-gray-500, html.dark .text-gray-500 { color: var(--text-body) !important; }
[data-theme="dark"] .text-slate-400, html.dark .text-slate-400,
[data-theme="dark"] .text-gray-400, html.dark .text-gray-400,
[data-theme="dark"] .text-gray-300, html.dark .text-gray-300 { color: var(--text-muted) !important; }

/* 夜间：边�?*/
[data-theme="dark"] .border-gray-200, html.dark .border-gray-200,
[data-theme="dark"] .border-gray-300, html.dark .border-gray-300,
[data-theme="dark"] .border-gray-700, html.dark .border-gray-700,
[data-theme="dark"] .border-gray-800, html.dark .border-gray-800,
[data-theme="dark"] .border-slate-700, html.dark .border-slate-700,
[data-theme="dark"] .border-slate-800, html.dark .border-slate-800 { border-color: var(--border-card) !important; }
[data-theme="dark"] .border-gray-100, html.dark .border-gray-100 { border-color: var(--border-divider) !important; }

/* 夜间：表�?*/
[data-theme="dark"] input, html.dark input,
[data-theme="dark"] select, html.dark select,
[data-theme="dark"] textarea, html.dark textarea {
  background-color: var(--bg-card) !important;
  color: var(--text-body) !important;
  border-color: var(--border-card) !important;
}
[data-theme="dark"] input:focus, html.dark input:focus,
[data-theme="dark"] select:focus, html.dark select:focus,
[data-theme="dark"] textarea:focus, html.dark textarea:focus {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 2px rgba(255, 122, 34, 0.30) !important;
}

/* 夜间：硬编码深色背景翻转 */
[data-theme="dark"] .bg-\[\#0f172a\], html.dark .bg-\[\#0f172a\],
[data-theme="dark"] .bg-\[\#111827\], html.dark .bg-\[\#111827\],
[data-theme="dark"] .bg-\[\#1e293b\], html.dark .bg-\[\#1e293b\] { background-color: var(--bg-card) !important; }
[data-theme="dark"] .border-\[\#334155\], html.dark .border-\[\#334155\],
[data-theme="dark"] .border-\[\#475569\], html.dark .border-\[\#475569\] { border-color: var(--border-card) !important; }

/* ============================================================
   页脚：冷黑底 #1A1A22 + 浅文�?#E2E4E8
   ============================================================ */
footer {
  background: var(--bg-footer) !important;
  border-top: 1px solid #2D2D38 !important;
  color: var(--text-footer) !important;
}
footer a, footer span, footer p { color: var(--text-footer) !important; }
footer h3, footer h4 { color: var(--text-footer) !important; }
footer a:hover { color: var(--brand-accent) !important; }
footer .text-gray-900, footer .text-gray-800, footer .text-gray-700,
footer .text-gray-600, footer .text-gray-500 { color: var(--text-footer) !important; }
footer .text-gray-400, footer .text-gray-300 { color: var(--text-footer-muted) !important; }
footer .bg-gray-100, footer .bg-gray-200 { background: #2D2D38 !important; }
footer .bg-gray-100:hover, footer .bg-gray-200:hover { background: #3D3D48 !important; }
footer .border-gray-200, footer .border-gray-100, footer .border-gray-300 { border-color: #3D3D48 !important; }
footer .hover\:text-teal-500:hover, footer .hover\:text-cyan-500:hover { color: var(--brand-accent) !important; }
footer .hover\:bg-teal-500:hover, footer .hover\:bg-cyan-500:hover {
  background: var(--brand-accent) !important;
  color: #FFFFFF !important;
}
footer svg { color: inherit !important; }

/* 夜间页脚 */
[data-theme="dark"] footer, html.dark footer {
  background: var(--bg-footer) !important;
  border-color: #2D2D38 !important;
}

/* ============================================================
   内容�?section 背景透明（透出星空 + 光晕�?
   hero 保持原样，其�?section 透明
   ============================================================ */
section:not(:first-of-type) {
  background: transparent !important;
  background-image: none !important;
}

/* 内容区文字翻�?*/
section:not(:first-of-type) .text-white { color: var(--text-heading) !important; }
section:not(:first-of-type) .text-gray-100,
section:not(:first-of-type) .text-gray-200,
section:not(:first-of-type) .text-gray-300 { color: var(--text-title) !important; }
section:not(:first-of-type) .text-slate-100,
section:not(:first-of-type) .text-slate-200,
section:not(:first-of-type) .text-slate-300 { color: var(--text-title) !important; }

/* 夜间内容区文�?*/
[data-theme="dark"] section:not(:first-of-type) .text-white, html.dark section:not(:first-of-type) .text-white { color: var(--text-heading) !important; }

/* ============================================================
   排行榜奖牌统一（删除杂色图标底色）
   ============================================================ */
.rank-medal-gold { background: linear-gradient(135deg, #FF9A52, var(--medal-gold)) !important; color: #FFFFFF !important; }
.rank-medal-silver { background: linear-gradient(135deg, #D0D0D4, var(--medal-silver)) !important; color: #FFFFFF !important; }
.rank-medal-bronze { background: linear-gradient(135deg, #C89060, var(--medal-bronze)) !important; color: #FFFFFF !important; }
.rank-medal-rest { background: var(--bg-card) !important; color: var(--text-muted) !important; }

/* ============================================================
   aurora-btn-primary / aurora-btn-ghost 统一
   ============================================================ */
.aurora-btn-primary {
  background: var(--brand-primary) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(255, 122, 34, 0.30) !important;
}
.aurora-btn-primary:hover {
  background: var(--brand-primary-hover) !important;
}
.aurora-btn-ghost {
  background: var(--bg-card) !important;
  color: var(--text-body) !important;
  border-color: var(--border-card) !important;
}
.aurora-btn-ghost:hover {
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}

/* === END 默认模板配色系统 v2 === */


/* ===============================================
   Arbitrary color value classes (generated)
   Pre-built tailwind.css doesn't include these
   =============================================== */
.bg-\[\#0A8580\] { background-color: #0A8580 !important; }
.bg-\[\#16B8B0\] { background-color: #16B8B0 !important; }
.bg-\[\#16B8B0\]\/10 { background-color: rgba(22,184,176,0.1) !important; }
.bg-\[\#16B8B0\]\/8 { background-color: rgba(22,184,176,0.08) !important; }
.bg-\[\#8844DD\]\/10 { background-color: rgba(136,68,221,0.1) !important; }
.bg-\[\#E6F7F6\] { background-color: #E6F7F6 !important; }
.bg-\[\#F0E7FF\] { background-color: #F0E7FF !important; }
.bg-\[\#FF7A22\]\/10 { background-color: rgba(255,122,34,0.1) !important; }
.bg-\[\#FF7A22\]\/8 { background-color: rgba(255,122,34,0.08) !important; }
.bg-\[\#FFF1E8\] { background-color: #FFF1E8 !important; }
.border-\[\#16B8B0\]\/20 { border-color: rgba(22,184,176,0.2) !important; }
.border-\[\#16B8B0\]\/30 { border-color: rgba(22,184,176,0.3) !important; }
.border-\[\#16B8B0\]\/50 { border-color: rgba(22,184,176,0.5) !important; }
.border-\[\#16B8B0\]\/80 { border-color: rgba(22,184,176,0.8) !important; }
.border-\[\#8844DD\]\/30 { border-color: rgba(136,68,221,0.3) !important; }
.border-\[\#E9E9EB\] { border-color: #E9E9EB !important; }
.border-\[\#FF7A22\]\/50 { border-color: rgba(255,122,34,0.5) !important; }
.dark .dark\:bg-\[\#1e293b\] { background-color: #1e293b !important; }
.dark .dark\:bg-\[\#8844DD\]\/20 { background-color: rgba(136,68,221,0.2) !important; }
.dark .dark\:border-\[\#2D3340\] { border-color: #2D3340 !important; }
.dark .dark\:border-\[\#334155\] { border-color: #334155 !important; }
.dark .dark\:border-\[\#334155\]\/50 { border-color: rgba(51,65,85,0.5) !important; }
.dark .dark\:border-\[\#475569\] { border-color: #475569 !important; }
.dark .dark\:from-\[\#0F1419\] { --tw-gradient-from: #0F1419 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .dark\:from-\[\#1A1F2A\] { --tw-gradient-from: #1A1F2A var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.dark .dark\:text-\[\#2DD4D0\] { color: #2DD4D0 !important; }
.dark .dark\:text-\[\#9CA0AA\] { color: #9CA0AA !important; }
.dark .dark\:text-\[\#9DA1AC\] { color: #9DA1AC !important; }
.dark .dark\:text-\[\#B888F0\] { color: #B888F0 !important; }
.dark .dark\:text-\[\#C89060\] { color: #C89060 !important; }
.dark .dark\:text-\[\#FF9A52\] { color: #FF9A52 !important; }
.dark .dark\:to-\[\#0F1419\] { --tw-gradient-to: #0F1419 var(--tw-gradient-to-position); }
.dark .dark\:via-\[\#0F1419\] { --tw-gradient-via: #0F1419 var(--tw-gradient-via-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.from-\[\#0FA39C\] { --tw-gradient-from: #0FA39C var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#16B8B0\] { --tw-gradient-from: #16B8B0 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#8844DD\] { --tw-gradient-from: #8844DD var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#C89060\] { --tw-gradient-from: #C89060 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#D0D0D4\] { --tw-gradient-from: #D0D0D4 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#E56A18\] { --tw-gradient-from: #E56A18 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#FF7A22\] { --tw-gradient-from: #FF7A22 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#FF9A52\] { --tw-gradient-from: #FF9A52 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#FFF3E4\] { --tw-gradient-from: #FFF3E4 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-\[\#FFF9F2\] { --tw-gradient-from: #FFF9F2 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.hover\:bg-\[\#086B68\]:hover { background-color: #086B68 !important; }
.hover\:bg-\[\#16B8B0\]\/15:hover { background-color: rgba(22,184,176,0.15) !important; }
.hover\:border-\[\#16B8B0\]\/50:hover { border-color: rgba(22,184,176,0.5) !important; }
.hover\:border-\[\#8844DD\]\/50:hover { border-color: rgba(136,68,221,0.5) !important; }
.hover\:border-\[\#FF7A22\]\/40:hover { border-color: rgba(255,122,34,0.4) !important; }
.hover\:border-\[\#FF7A22\]\/50:hover { border-color: rgba(255,122,34,0.5) !important; }
.hover\:from-\[\#C95A10\]:hover { --tw-gradient-from: #C95A10 var(--tw-gradient-from-position); --tw-gradient-to: transparent var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.hover\:text-\[\#0FA39C\]:hover { color: #0FA39C !important; }
.hover\:to-\[\#B85010\]:hover { --tw-gradient-to: #B85010 var(--tw-gradient-to-position); }
.ring-\[\#FFF1E8\] { --tw-ring-color: #FFF1E8 !important; }
.shadow-\[\#16B8B0\]\/30 { --tw-shadow-color: rgba(22,184,176,0.3); }
.shadow-\[\#FF7A22\]\/25 { --tw-shadow-color: rgba(255,122,34,0.25); }
.shadow-\[\#FF7A22\]\/30 { --tw-shadow-color: rgba(255,122,34,0.3); }
.text-\[\#0FA39C\] { color: #0FA39C !important; }
.text-\[\#141A26\] { color: #141A26 !important; }
.text-\[\#16B8B0\] { color: #16B8B0 !important; }
.text-\[\#2D3340\] { color: #2D3340 !important; }
.text-\[\#4F5664\] { color: #4F5664 !important; }
.text-\[\#7A818C\] { color: #7A818C !important; }
.text-\[\#8844DD\] { color: #8844DD !important; }
.text-\[\#A67038\] { color: #A67038 !important; }
.text-\[\#FF7A22\] { color: #FF7A22 !important; }
.text-\[\#FF7A22\]\/30 { color: rgba(255,122,34,0.3) !important; }
.to-\[\#0A8580\] { --tw-gradient-to: #0A8580 var(--tw-gradient-to-position); }
.to-\[\#0FA39C\] { --tw-gradient-to: #0FA39C var(--tw-gradient-to-position); }
.to-\[\#16B8B0\] { --tw-gradient-to: #16B8B0 var(--tw-gradient-to-position); }
.to-\[\#7338CC\] { --tw-gradient-to: #7338CC var(--tw-gradient-to-position); }
.to-\[\#A67038\] { --tw-gradient-to: #A67038 var(--tw-gradient-to-position); }
.to-\[\#B8B8B8\] { --tw-gradient-to: #B8B8B8 var(--tw-gradient-to-position); }
.to-\[\#C95A10\] { --tw-gradient-to: #C95A10 var(--tw-gradient-to-position); }
.to-\[\#FF7A22\] { --tw-gradient-to: #FF7A22 var(--tw-gradient-to-position); }
.to-\[\#FFF9F2\] { --tw-gradient-to: #FFF9F2 var(--tw-gradient-to-position); }
.via-\[\#16B8B0\] { --tw-gradient-via: #16B8B0 var(--tw-gradient-via-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.via-\[\#FF7A22\] { --tw-gradient-via: #FF7A22 var(--tw-gradient-via-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
.via-\[\#FFF9F2\] { --tw-gradient-via: #FFF9F2 var(--tw-gradient-via-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to); }
/* Dark mode overrides for arbitrary text colors */
[data-theme="dark"] .text-\[\#141A26\], html.dark .text-\[\#141A26\] { color: var(--text-heading) !important; }
[data-theme="dark"] .text-\[\#2D3340\], html.dark .text-\[\#2D3340\] { color: var(--text-title) !important; }
[data-theme="dark"] .text-\[\#4F5664\], html.dark .text-\[\#4F5664\] { color: var(--text-body) !important; }
[data-theme="dark"] .text-\[\#7A818C\], html.dark .text-\[\#7A818C\] { color: var(--text-muted) !important; }
/* End generated arbitrary color classes */