/* ==================================================================
   FLUX 鎴樻湳鍏ㄦ伅妯℃澘 鈥斺€?Ftheme.css
   2026 Bento 缃戞牸 + 鐜荤拑鎷熺墿 + 鎴樻湳 HUD 璁捐璁′绯荤粺
   瀛椾綋锛歄rbitron锛堝睍绀猴級/ Chakra Petch锛堟鏂囷級/ Noto Sans SC锛堜腑鏂囷級/ JetBrains Mono锛堜唬鐮侊級
   閰嶈壊锛氭繁绌哄叏鎭簳 + 闇撹櫣闈?+ 鎴樻湳鐞ョ弨 + 绾鍏?
   鏆楄壊浼樺厛锛屽畬鏁翠寒鑹查€傞厤锛屽叏鏂偣鑷€傚簲
   ================================================================== */
/* Google Fonts 移至 flux/header.php 异步加载，消除 @import 渲染阻塞 */

/* ============ 1. FLUX 璁捐浠ょ墝 ============ */
.tpl-flux2 {
  --flux-void:    #070B14;
  --flux-surface: #0E1422;
  --flux-elev:    #131B2E;
  --flux-line:    rgba(148, 163, 184, .14);
  --flux-line-2:  rgba(148, 163, 184, .26);
  --flux-cyan:    #22D3EE;
  --flux-cyan-2:  #0891B2;
  --flux-amber:   #FB923C;
  --flux-amber-2: #F97316;
  --flux-violet:  #8B5CF6;
  --flux-emerald: #34D399;
  --flux-rose:    #FB7185;
  --flux-text:    #E6EDF6;
  --flux-text-2:  #8B97AD;
  --flux-text-3:  #5E6B85;
  --flux-glass:   rgba(19, 27, 46, .55);
  --flux-glass-2: rgba(14, 20, 34, .72);
  --flux-radius:  18px;

  /* 瑕嗙洊鍏ㄥ眬浠ょ墝锛堟繁鑹蹭紭鍏堬細榛樿鍗虫繁绌猴級 */
  --color-primary: #22D3EE;
  --color-primary-hover: #0891B2;
  --color-primary-light: #67E8F9;
  --color-primary-soft: rgba(34, 211, 238, .14);
  --color-accent: #FB923C;
  --color-accent-hover: #F97316;
  --color-accent-light: #FDBA74;
  --color-accent-soft: rgba(251, 146, 60, .14);
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #FB7185;
  --color-info: #38BDF8;

  --color-bg-tactical: #070B14;
  --color-bg-tactical-2: #0E1422;
  --color-bg-page: #070B14;
  --color-bg-card: #0E1422;
  --color-bg-input: #0A0F1A;
  --color-bg-hover: #131B2E;

  --color-border: rgba(148, 163, 184, .14);
  --color-border-hover: rgba(148, 163, 184, .28);
  --color-border-strong: rgba(148, 163, 184, .42);

  --color-text: #E6EDF6;
  --color-text-muted: #8B97AD;
  --color-text-placeholder: #5E6B85;
  --color-text-inverse: #070B14;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  --shadow-focus: 0 0 0 3px rgba(34, 211, 238, .32);
  --shadow-focus-accent: 0 0 0 3px rgba(251, 146, 60, .3);

  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 26px;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

/* 浜壊妯″紡锛氭煍鍏夌幓鐠冿紙淇濇寔 FLUX 璇█锛屽簳鑹茶浆娴咃級 */
.tpl-flux2:not(.dark):not(.theme-dark) {
  --flux-void:    #F4F6FB;
  --flux-surface: #FFFFFF;
  --flux-elev:    #FFFFFF;
  --flux-line:    rgba(15, 23, 42, .10);
  --flux-line-2:  rgba(15, 23, 42, .18);
  --flux-text:    #0B1220;
  --flux-text-2:  #475569;
  --flux-text-3:  #64748B;
  --flux-glass:   rgba(255, 255, 255, .72);
  --flux-glass-2: rgba(255, 255, 255, .86);

  --color-bg-page: #F4F6FB;
  --color-bg-card: #FFFFFF;
  --color-bg-input: #FFFFFF;
  --color-bg-hover: #EEF2F8;
  --color-border: rgba(15, 23, 42, .10);
  --color-border-hover: rgba(15, 23, 42, .20);
  --color-border-strong: rgba(15, 23, 42, .35);
  --color-text: #0B1220;
  --color-text-muted: #475569;
  --color-text-placeholder: #64748B;
  --color-text-inverse: #FFFFFF;

  --color-primary: #0891B2;
  --color-primary-light: #06B6D4;
  --color-accent: #EA580C;
  --color-accent-light: #F97316;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, .10);
  --shadow-lg: 0 20px 50px rgba(15, 23, 42, .14);
  --shadow-focus: 0 0 0 3px rgba(8, 145, 178, .2);
}
/* 鍏煎锛歞ark 绫绘寕鍦?html锛宐ody 涓?.tpl-flux2 鏃朵粛闇€鍖归厤娣辫壊 */
html.dark .tpl-flux2 { /* 娣辫壊浠ょ墝宸插湪 .tpl-flux2 榛樿涓瀹?*/ }

/* ============ 2. 鍩虹鎺掔増涓庤儗鏅?============ */
.tpl-flux2 body,
.tpl-flux2 {
  background: var(--flux-void);
  color: var(--flux-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tpl-flux2 body {
  background-image:
    radial-gradient(110% 80% at 85% -10%, rgba(34, 211, 238, .10), transparent 55%),
    radial-gradient(90% 70% at 10% 0%, rgba(139, 92, 246, .08), transparent 50%);
  background-attachment: fixed;
}
.tpl-flux2 h1, .tpl-flux2 h2, .tpl-flux2 h3, .tpl-flux2 h4 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  font-weight: 800;
}
.tpl-flux2 h1 { font-weight: 900; letter-spacing: -.02em; }
.tpl-flux2 code, .tpl-flux2 pre, .tpl-flux2 .font-mono { font-family: var(--font-mono); }
.tpl-flux2 ::selection { background: rgba(34, 211, 238, .28); color: #fff; }

/* ============ 3. 鍏ㄦ伅鑳屾櫙灞?============ */
.tpl-flux2 .flux-grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(34, 211, 238, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 80%);
}
.tpl-flux2 .flux-aurora {
  position: fixed; z-index: 0; pointer-events: none; filter: blur(70px); border-radius: 50%;
  animation: none;
  will-change: transform;
}
.tpl-flux2 .flux-aurora--cyan   { width: 42vw; height: 42vw; top: -12vw; left: -8vw; background: rgba(34, 211, 238, .20); }
.tpl-flux2 .flux-aurora--amber  { width: 38vw; height: 38vw; top: 50vh; right: -10vw; background: rgba(251, 146, 60, .16); animation-delay: -6s; }
.tpl-flux2 .flux-aurora--violet { width: 30vw; height: 30vw; top: 30vh; left: 55vw; background: rgba(139, 92, 246, .14); animation-delay: -11s; }
.tpl-flux2 .flux-vignette { position: fixed; inset: 0; z-index: 0; pointer-events: none; box-shadow: inset 0 0 200px 40px rgba(0, 0, 0, .55); }
.tpl-flux2:not(.dark):not(.theme-dark) .flux-vignette { box-shadow: inset 0 0 180px 30px rgba(15, 23, 42, .06); }
50%{ transform: translate(4vw,-3vh) scale(1.12); } }

/* 鍐呭灞傛彁鍒拌儗鏅箣涓?*/
.tpl-flux2 header { position: relative; z-index: 30; }
.tpl-flux2 main, .tpl-flux2 footer { position: relative; z-index: 1; }

/* ============ 4. 鐜荤拑鎷熺墿瀵艰埅鏍?============ */
.tpl-flux2 header,
.tpl-flux2 header > div:first-child {
  background: transparent !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid transparent !important;
}
.tpl-flux2 header { box-shadow: none; }
/* Hero 从顶部开始：负 margin 拉到 header 下方 */
.tpl-flux2 #hero-section {
  margin-top: -3.5rem !important;
  padding-top: 3.5rem !important;
}
@media (min-width: 1024px) {
  .tpl-flux2 #hero-section {
    margin-top: -4rem !important;
    padding-top: 4rem !important;
  }
}
/* 登录/注册页面：auth-page 从顶部开始 */
.tpl-flux2 .auth-page {
  margin-top: -3.5rem !important;
  padding-top: 3.5rem !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
}
@media (min-width: 1024px) {
  .tpl-flux2 .auth-page {
    margin-top: -4rem !important;
    padding-top: 4rem !important;
  }
}
.tpl-flux2 header a { color: var(--flux-text); }
.tpl-flux2 header .text-gray-700,
.tpl-flux2 header .text-gray-600,
.tpl-flux2 header .text-slate-600 { color: var(--flux-text-2) !important; }
.tpl-flux2 header .text-teal-500,
.tpl-flux2 header .text-cyan-600 { color: var(--flux-cyan) !important; }
.tpl-flux2 header [class*="bg-white"][class*="rounded"],
.tpl-flux2 header [class*="bg-gray-100"][class*="rounded"],
.tpl-flux2 header [class*="bg-gray-50"][class*="rounded"] {
  background: var(--flux-glass-2) !important;
  border: 1px solid var(--flux-line) !important;
}
.tpl-flux2 header button[class*="bg"],
.tpl-flux2 header a[class*="bg"][class*="rounded"] {
  border: 1px solid var(--flux-line) !important;
}

/* ============ 5. 鐜荤拑鍗＄墖 / HUD 鍙栨櫙妗?============ */
.tpl-flux2 .glass-card {
  background: var(--flux-glass) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--flux-line-2) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.tpl-flux2 .flux-hud { position: relative; }
.tpl-flux2 .flux-corners { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.tpl-flux2 .flux-corners .fc {
  position: absolute; width: 14px; height: 14px; border: 2px solid var(--flux-cyan); opacity: .55;
}
.tpl-flux2 .flux-corners .fc.tl { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.tpl-flux2 .flux-corners .fc.tr { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.tpl-flux2 .flux-corners .fc.bl { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.tpl-flux2 .flux-corners .fc.br { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

/* 閫氱敤鍗＄墖锛氱櫧搴?鐏板簳鍦嗚 鈫?鐜荤拑鍖栵紙瑕嗙洊榛樿纭紪鐮?Tailwind锛?*/
.tpl-flux2 main .bg-white,
.tpl-flux2 main [class*="bg-\\[1e293b\\]"],
.tpl-flux2 main [class*="bg-\\[\\#1e293b\\]"] {
  background: var(--flux-glass) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  border-color: var(--flux-line-2) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.tpl-flux2 main .bg-gray-50,
.tpl-flux2 main .bg-gray-100 { background: transparent !important; }
.tpl-flux2 main .bg-gray-900,
.tpl-flux2 main [class*="bg-\\[0f172a\\]"] { background: var(--flux-glass-2) !important; border-color: var(--flux-line-2) !important; }

/* 鍗＄墖鎮仠 */
.tpl-flux2 main [class*="rounded-2xl"]:hover,
.tpl-flux2 main [class*="rounded-xl"]:hover {
  border-color: rgba(34, 211, 238, .5) !important;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .5) !important;
}

/* ============ 6. Hero Bento 甯冨眬锛圕SS grid 閲嶆帓锛?============ */
.tpl-flux2 #hero-section {
  background: transparent !important;
  border-bottom: 1px solid var(--flux-line);
  padding-top: 0;
}
.tpl-flux2 #hero-section .tactical-grid { opacity: .25 !important; }
/* 棣栭〉锛欱ento 宸﹀榻愬竷灞€ */
.tpl-flux2.page-home #hero-section .mx-auto { text-align: left; }
.tpl-flux2.page-home #hero-section .mx-auto > * { justify-self: start; }
.tpl-flux2.page-home #hero-section .mx-auto .inline-flex { margin-left: 0; }

@media (min-width: 1024px) {
  .tpl-flux2.page-home #hero-section .mx-auto {
    display: grid;
    grid-template-columns: 1.25fr .85fr;
    grid-template-rows: auto auto auto auto auto;
    align-items: start;
    column-gap: 3.5rem;
    row-gap: 1.1rem;
    padding-top: 4rem;
  }
  .tpl-flux2.page-home #hero-section .mx-auto > *:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .tpl-flux2.page-home #hero-section .mx-auto > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tpl-flux2.page-home #hero-section .mx-auto > *:nth-child(3) { grid-column: 1; grid-row: 3; }
  .tpl-flux2.page-home #hero-section .mx-auto > *:nth-child(4) { grid-column: 1; grid-row: 4; }
  .tpl-flux2.page-home #hero-section .mx-auto > *:nth-child(5) { grid-column: 1; grid-row: 5; }
  .tpl-flux2.page-home #hero-section .mx-auto > *:nth-child(6) { grid-column: 2; grid-row: 2 / span 4; align-self: center; width: 100%; }
  .tpl-flux2.page-home #hero-section .mx-auto > *:nth-child(6) .grid { grid-template-columns: 1fr !important; gap: .85rem !important; }
}

/* 首页 hero 移动端/平板居中排版（桌面 ≥1024px 保持 grid 两列左对齐） */
@media (max-width: 1023.98px) {
  .tpl-flux2.page-home #hero-section .mx-auto { text-align: center; }
  .tpl-flux2.page-home #hero-section .mx-auto > * { justify-self: center; }
  .tpl-flux2.page-home #hero-section .mx-auto .inline-flex { margin-left: auto; margin-right: auto; }
  .tpl-flux2.page-home #hero-section .mx-auto .flex { justify-content: center; }
}

/* 闈為椤碉細hero 灞呬腑鏄剧ず */
.tpl-flux2:not(.page-home) #hero-section .mx-auto { text-align: center; max-width: 52rem !important; margin-left: auto; margin-right: auto; }
.tpl-flux2:not(.page-home) #hero-section .mx-auto > * { justify-self: center; }
.tpl-flux2:not(.page-home) #hero-section .mx-auto .inline-flex { margin-left: auto; margin-right: auto; }
.tpl-flux2:not(.page-home) #hero-section .mx-auto .flex { justify-content: center; }

/* weapons 鍜?player 椤甸潰锛歨ero 閾烘弧锛屼笉灞呬腑 */
.tpl-flux2.page-weapons #hero-section .mx-auto,
.tpl-flux2.page-player #hero-section .mx-auto { text-align: left; max-width: 80rem !important; margin-left: auto; margin-right: auto; }
.tpl-flux2.page-weapons #hero-section .mx-auto > *,
.tpl-flux2.page-player #hero-section .mx-auto > * { justify-self: stretch; }
.tpl-flux2.page-weapons #hero-section .mx-auto .inline-flex,
.tpl-flux2.page-player #hero-section .mx-auto .inline-flex { margin-left: 0; margin-right: 0; }
.tpl-flux2.page-weapons #hero-section .mx-auto .flex,
.tpl-flux2.page-player #hero-section .mx-auto .flex { justify-content: flex-start; }
.tpl-flux2.page-player #hero-section > .w-full { max-width: 72rem !important; margin-left: auto; margin-right: auto; }

/* Hero 鏂囨 */
.tpl-flux2 #hero-section h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
  line-height: 1.05 !important;
}
.tpl-flux2 #hero-section h1 [class*="bg-clip-text"] {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-violet) 55%, var(--flux-amber)) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}
.tpl-flux2 #hero-section [class*="bg-orange-500/10"],
.tpl-flux2 #hero-section [class*="bg-amber-400/10"] {
  background: rgba(34, 211, 238, .10) !important; border-color: rgba(34, 211, 238, .35) !important;
}
.dark .tpl-flux2 #hero-section [class*="text-orange-800"],
.dark .tpl-flux2 #hero-section [class*="text-amber-200"] { color: var(--flux-cyan) !important; }
.tpl-flux2 #hero-section [class~="bg-orange-500"],
.tpl-flux2 #hero-section [class~="bg-amber-400"] { background: var(--flux-cyan) !important; }

/* Hero CTA */
.tpl-flux2 #hero-section [class*="from-orange-600"] {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-cyan-2)) !important;
  color: #04141a !important; box-shadow: 0 12px 30px rgba(34, 211, 238, .35) !important;
}
.tpl-flux2 #hero-section [class*="from-orange-600"]:hover { box-shadow: 0 16px 40px rgba(34, 211, 238, .5) !important; }
.tpl-flux2 #hero-section [class*="bg-sky-500/10"],
.tpl-flux2 #hero-section [class*="bg-sky-400/10"] {
  background: rgba(139, 92, 246, .12) !important; border-color: rgba(139, 92, 246, .4) !important;
}
.dark .tpl-flux2 #hero-section [class*="bg-sky-500/10"],
.dark .tpl-flux2 #hero-section [class*="bg-sky-400/10"] { color: var(--flux-violet) !important; }
.dark .tpl-flux2 #hero-section [class*="text-sky-700"],
.dark .tpl-flux2 #hero-section [class*="text-sky-200"] { color: var(--flux-violet) !important; }

/* Hero 鏂囧瓧瀵规瘮搴︿繚闅滐細cyan 瀹炶壊鑳屾櫙鐢ㄦ繁鑹叉枃瀛楋紝text-white 淇濇寔鐧借壊 */
.dark .tpl-flux2 #hero-section [class*="text-white"] { color: #fff !important; }
.tpl-flux2 #hero-section [class*="bg-orange-500"][class*="text-white"],
.tpl-flux2 #hero-section [class*="bg-amber-400"][class*="text-white"] { color: #04141a !important; }
.tpl-flux2 #hero-section [class*="bg-[#0A8580]"][class*="text-white"] { color: var(--flux-text) !important; }
.tpl-flux2:not(.dark):not(.theme-dark) #hero-section [class*="text-gray-300"],
.tpl-flux2:not(.dark):not(.theme-dark) #hero-section [class*="text-gray-400"] { color: var(--flux-text-2) !important; }

/* Hero 缁熻鐡︾墖 鈫?鐜荤拑 Bento */
.tpl-flux2 #hero-section [class*="grid-cols-3"] > div {
  background: var(--flux-glass) !important;
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--flux-line-2) !important; border-radius: var(--flux-radius) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .04);
  position: relative; overflow: hidden;
}
.tpl-flux2 #hero-section [class*="grid-cols-3"] > div::before {
  content: ''; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background: linear-gradient(135deg, rgba(34, 211, 238, .08), transparent 50%);
}
.tpl-flux2 #hero-section [class*="grid-cols-3"] > div [class*="text-\\[\\#FF7A22\\]"],
.tpl-flux2 #hero-section [class*="grid-cols-3"] > div [class*="text-\\[\\#FF9A52\\]"] {
  color: var(--flux-cyan) !important; font-family: var(--font-display) !important; font-weight: 900;
  text-shadow: 0 0 24px rgba(34, 211, 238, .4);
}
.tpl-flux2 #hero-section [class*="grid-cols-3"] > div [class*="text-\\[\\#4F5664\\]"],
.tpl-flux2 #hero-section [class*="grid-cols-3"] > div [class*="text-\\[\\#9DA1AC\\]"]"] { color: var(--flux-text-2) !important; }

/* ============ 7. 鍏ㄥ眬鑹插僵鍚屽寲锛堥粯璁ゆā鏉跨‖缂栫爜 Tailwind 鈫?FLUX 璋冭壊鏉匡級 ============ */
.tpl-flux2 main [class*="text-teal-500"] { color: var(--flux-cyan) !important; }
.tpl-flux2 main [class*="text-teal-600"] { color: var(--flux-cyan-2) !important; }
.tpl-flux2 main [class*="text-teal-400"] { color: var(--flux-cyan) !important; }
.tpl-flux2 main [class*="text-orange-500"],
.tpl-flux2 main [class*="text-orange-600"] { color: var(--flux-amber) !important; }
.tpl-flux2 main [class*="text-amber-400"],
.tpl-flux2 main [class*="text-amber-300"] { color: var(--flux-amber) !important; }
.tpl-flux2 main [class*="text-sky-500"],
.tpl-flux2 main [class*="text-sky-700"] { color: var(--flux-violet) !important; }
.tpl-flux2 main [class*="text-sky-200"] { color: var(--flux-violet) !important; }
.tpl-flux2 main [class*="text-slate-900"],
.tpl-flux2 main [class*="text-gray-900"] { color: var(--flux-text) !important; }
.tpl-flux2 main [class*="text-slate-600"],
.tpl-flux2 main [class*="text-slate-500"],
.tpl-flux2 main [class*="text-gray-500"] { color: var(--flux-text-2) !important; }
.tpl-flux2 main [class*="text-gray-400"] { color: var(--flux-text-3) !important; }
.tpl-flux2 main svg.absolute[class*="text-gray-400"],
.tpl-flux2 main span.absolute[class*="text-gray-400"] { color: var(--flux-text) !important; }
@supports selector(:has(*)) {
  .tpl-flux2 main .relative:has(input) > svg[class*="text-gray-400"] { color: var(--flux-text) !important; }
}
.tpl-flux2 main [class*="text-white"] { color: var(--flux-text) !important; }

/* 娓愬彉鏂囧瓧鍚屽寲 */
.tpl-flux2 main [class*="from-orange-500"][class*="bg-clip-text"],
.tpl-flux2 main [class*="from-amber-300"][class*="bg-clip-text"] {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-violet)) !important;
  -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important;
}

/* 绔犺妭鏍囬瑁呴グ鏉?*/
.tpl-flux2 main h2 [class*="from-teal-400"],
.tpl-flux2 main h2 [class*="to-cyan-500"] { background: linear-gradient(var(--flux-cyan), var(--flux-violet)) !important; }
.tpl-flux2 main h2 [class*="text-teal-500"],
.tpl-flux2 main h2 [class*="text-orange-500"] { color: var(--flux-cyan) !important; }

/* 涓绘搷浣滄寜閽?*/
.tpl-flux2 main [class*="from-orange-600"][class*="to-amber-600"],
.tpl-flux2 main [class*="from-amber-400"][class*="to-orange-400"] {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-cyan-2)) !important;
  color: #04141a !important; box-shadow: 0 10px 26px rgba(34, 211, 238, .32) !important;
}
.tpl-flux2 main [class*="bg-teal-500"]:not([class*="bg-teal-500/"]),
.tpl-flux2 main [class*="bg-cyan-500"]:not([class*="bg-cyan-500/"]) { background: var(--flux-cyan) !important; color: #04141a !important; }
.tpl-flux2 main [class*="bg-orange-500"]:not([class*="bg-orange-500/"]):not([class*="bg-clip"]) { background: var(--flux-amber) !important; color: #1a0d00 !important; }

/* 杞簳寰界珷 */
.tpl-flux2 main [class*="bg-orange-100"],
.tpl-flux2 main [class*="bg-orange-900\/30"] { background: rgba(251, 146, 60, .14) !important; color: var(--flux-amber) !important; }
.tpl-flux2 main [class*="bg-teal-100"],
.tpl-flux2 main [class*="bg-cyan-100"] { background: rgba(34, 211, 238, .14) !important; color: var(--flux-cyan) !important; }

/* 杈规鍚屽寲 */
.tpl-flux2 main [class*="border-gray-200"],
.tpl-flux2 main [class*="border-gray-300"] { border-color: var(--flux-line) !important; }
.tpl-flux2 main [class*="border-\\[\\#E9E9EB\\]"] { border-color: var(--flux-line) !important; }
.tpl-flux2 main [class*="border-\\[\\#2D3340\\]"] { border-color: var(--flux-line) !important; }
.tpl-flux2 main [class*="border-\\[\\#475569\\]"] { border-color: var(--flux-line-2) !important; }
.tpl-flux2 main [class*="border-\\[\\#334155\\]"] { border-color: var(--flux-line) !important; }
.tpl-flux2 main [class*="border-gray-800"] { border-color: var(--flux-line) !important; }
.tpl-flux2 main .border-dashed { border-color: var(--flux-line-2) !important; }

/* 鍒嗛殧绾?*/
.tpl-flux2 main [class*="border-t"][class*="border-gray-100"] { border-color: var(--flux-line) !important; }
.tpl-flux2 main [class*="border-t"][class*="border-\\[\\#334155\\]"] { border-color: var(--flux-line) !important; }

/* ============ 8. 琛ㄥ崟鎺т欢 ============ */
.tpl-flux2 input, .tpl-flux2 textarea, .tpl-flux2 select, .tpl-flux2 .form-select {
  background-color: var(--flux-glass-2) !important;
  border-color: var(--flux-line-2) !important;
  color: var(--flux-text) !important;
}
.tpl-flux2 input:focus, .tpl-flux2 textarea:focus, .tpl-flux2 select:focus, .tpl-flux2 .form-select:focus {
  border-color: var(--flux-cyan) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .25) !important;
}
.tpl-flux2 input::placeholder, .tpl-flux2 textarea::placeholder { color: var(--flux-text-3) !important; }

/* ============ 9. 姣忔棩瀵嗙爜妯″潡 鈫?FLUX 鍏ㄦ伅 ============ */
.tpl-flux2 .daily-password-shell {
  background: var(--flux-glass) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--flux-line) !important; border-radius: 20px !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  overflow: hidden;
}
.tpl-flux2 .daily-password-shell::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(120deg, rgba(34, 211, 238, .08), transparent 40%, rgba(139, 92, 246, .06));
}
.tpl-flux2 .daily-password-heading-icon {
  background: rgba(34, 211, 238, .14) !important; border-color: rgba(34, 211, 238, .4) !important;
  color: var(--flux-cyan) !important; box-shadow: 0 0 18px rgba(34, 211, 238, .25) !important;
}
.tpl-flux2 .daily-password-title { color: var(--flux-text) !important; font-family: var(--font-display) !important; }
.tpl-flux2 .daily-password-date, .tpl-flux2 .daily-password-meta { color: var(--flux-text-2) !important; }
.tpl-flux2 .daily-password-state { background: var(--flux-glass-2) !important; border-color: var(--flux-line) !important; color: var(--flux-text-2) !important; }
.tpl-flux2 .daily-password-state-dot { background: var(--flux-cyan) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, .2) !important; }
.tpl-flux2 .daily-password-state.is-stale .daily-password-state-dot { background: var(--flux-amber) !important; box-shadow: 0 0 0 3px rgba(251, 146, 60, .2) !important; }
.tpl-flux2 .daily-password-grid { background: var(--flux-line) !important; border-color: var(--flux-line) !important; }
.tpl-flux2 .daily-password-item { background: var(--flux-surface) !important; }
.tpl-flux2 .daily-password-item:hover { background: var(--flux-elev) !important; box-shadow: inset 0 3px 0 var(--daily-accent), 0 8px 20px rgba(0, 0, 0, .35) !important; }
.tpl-flux2 .daily-password-name { color: var(--flux-text-2) !important; }
.tpl-flux2 .daily-password-code { color: var(--flux-text) !important; font-family: var(--font-mono) !important; text-shadow: 0 0 18px rgba(34, 211, 238, .3); }
.tpl-flux2 .daily-password-copy { background: var(--flux-cyan) !important; color: #04141a !important; box-shadow: 0 4px 14px rgba(34, 211, 238, .4) !important; }
.tpl-flux2 .daily-password-copy:hover { background: var(--flux-cyan-2) !important; box-shadow: 0 6px 18px rgba(34, 211, 238, .55) !important; }
.tpl-flux2 .daily-password-empty { border-color: var(--flux-line) !important; color: var(--flux-text-2) !important; }

/* ============ 10. 妯″紡鏍囩 / 鎺掕姒?/ 鐜╁鍗?============ */
.tpl-flux2 .mode-tab { border-radius: 12px !important; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease; }
.tpl-flux2 .aurora-btn-primary {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-cyan-2)) !important;
  color: #04141a !important; box-shadow: 0 6px 18px rgba(34, 211, 238, .3) !important; border: none !important;
}
.tpl-flux2 .aurora-btn-ghost { background: var(--flux-glass-2) !important; color: var(--flux-text-2) !important; border: 1px solid var(--flux-line) !important; }
.tpl-flux2 .aurora-btn-ghost:hover { color: var(--flux-cyan) !important; border-color: var(--flux-line-2) !important; }
.tpl-flux2 #platform-tabs { flex-wrap: wrap; }
.tpl-flux2 #mode-tabs { flex-wrap: nowrap; }

/* ============ 10b. 缁熶竴鎵€鏈夋寜閽€変腑/鏈€変腑鏁堟灉锛堜笌棣栭〉鎺掕姒滀竴鑷达級 ============ */
/* 閫変腑鐘舵€侊細orange/teal 娓愬彉 + text-white 鈫?aurora-btn-primary 鏁堟灉 */
.tpl-flux2 main button[class*="from-orange-500"][class*="text-white"],
.tpl-flux2 main a[class*="from-orange-500"][class*="text-white"],
.tpl-flux2 main button[class*="from-amber-400"][class*="text-white"],
.tpl-flux2 main a[class*="from-amber-400"][class*="text-white"],
.tpl-flux2 main button[class*="from-teal-500"][class*="text-white"],
.tpl-flux2 main a[class*="from-teal-500"][class*="text-white"],
.tpl-flux2 main button[class*="bg-teal-500"][class*="text-white"],
.tpl-flux2 main a[class*="bg-teal-500"][class*="text-white"],
.tpl-flux2 main .market-pc-btn.is-active,
.tpl-flux2 main .lib-tab-active {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-cyan-2)) !important;
  color: #04141a !important;
  box-shadow: 0 6px 18px rgba(34, 211, 238, .3) !important;
  border: none !important;
  transform: scale(1.02);
}
.tpl-flux2 main button[class*="from-orange-500"][class*="text-white"]:hover,
.tpl-flux2 main a[class*="from-orange-500"][class*="text-white"]:hover,
.tpl-flux2 main button[class*="from-teal-500"][class*="text-white"]:hover,
.tpl-flux2 main a[class*="from-teal-500"][class*="text-white"]:hover,
.tpl-flux2 main button[class*="bg-teal-500"][class*="text-white"]:hover,
.tpl-flux2 main .market-pc-btn.is-active:hover,
.tpl-flux2 main .lib-tab-active:hover {
  box-shadow: 0 8px 24px rgba(34, 211, 238, .45) !important;
}

/* 鏈€変腑鐘舵€侊細bg-white/70 + text-slate-600銆乥g-gray-100 + text-gray-600 绛?鈫?aurora-btn-ghost 鏁堟灉 */
.tpl-flux2 main button[class*="bg-white/70"][class*="text-slate-600"],
.tpl-flux2 main a[class*="bg-white/70"][class*="text-slate-600"],
.tpl-flux2 main button[class*="bg-white/70"][class*="text-slate-700"],
.tpl-flux2 main a[class*="bg-white/70"][class*="text-slate-700"],
.tpl-flux2 main button.cat-tab[class*="bg-gray-100"],
.tpl-flux2 main a.cat-tab[class*="bg-gray-100"],
.tpl-flux2 main .lib-tab-inactive,
.tpl-flux2 main .market-pc-btn:not(.is-active) {
  background: var(--flux-glass-2) !important;
  color: var(--flux-text-2) !important;
  border: 1px solid var(--flux-line) !important;
  box-shadow: none !important;
  transform: none;
}
.tpl-flux2 main button[class*="bg-white/70"][class*="text-slate-600"]:hover,
.tpl-flux2 main a[class*="bg-white/70"][class*="text-slate-600"]:hover,
.tpl-flux2 main button[class*="bg-white/70"][class*="text-slate-700"]:hover,
.tpl-flux2 main a[class*="bg-white/70"][class*="text-slate-700"]:hover,
.tpl-flux2 main button.cat-tab[class*="bg-gray-100"]:hover,
.tpl-flux2 main a.cat-tab[class*="bg-gray-100"]:hover,
.tpl-flux2 main .lib-tab-inactive:hover,
.tpl-flux2 main .market-pc-btn:not(.is-active):hover {
  color: var(--flux-cyan) !important;
  border-color: var(--flux-line-2) !important;
  background: var(--flux-glass) !important;
}

/* community 鍒嗙被/鎺掑簭鏈€変腑鎸夐挳 */
.tpl-flux2 main a[class*="bg-white"][class*="text-gray-600"][class*="border-gray-200"],
.tpl-flux2 main a[class*="text-gray-500"][class*="hover:text-gray-700"] {
  background: var(--flux-glass-2) !important;
  color: var(--flux-text-2) !important;
  border: 1px solid var(--flux-line) !important;
}
.tpl-flux2 main a[class*="bg-white"][class*="text-gray-600"][class*="border-gray-200"]:hover,
.tpl-flux2 main a[class*="text-gray-500"][class*="hover:text-gray-700"]:hover {
  color: var(--flux-cyan) !important;
  border-color: var(--flux-line-2) !important;
}

/* ============ 10c. rankings.php / updates.php 鎸夐挳缁熶竴鏁堟灉 ============
   閫変腑锛歝yan 娓愬彉 + 娣辫壊鏂囧瓧 + 鍙戝厜  |  鏈€変腑锛氱幓鐠冨崐閫忔槑 + 鐏拌摑鏂囧瓧 + 缁嗙嚎
   瑕嗙洊鍒濆 HTML 涓?JS 鍔ㄦ€佸垏鎹袱濂?class 浣撶郴 */
.tpl-flux2 .rank-type-tab,
.tpl-flux2 .rank-mode-tab,
.tpl-flux2 .rank-cat-tab,
.tpl-flux2 .update-cat-tag {
  transition: background-color .2s ease !important, border-color .2s ease !important, box-shadow .2s ease !important, color .2s ease !important, transform .2s ease !important;
}

/* 閫変腑鎬侊細orange 娓愬彉 / teal-cyan 娓愬彉 / JS active(bg-white+text-gray-900) */
/* 娣诲姞 #hero-section 鎻愰珮鐗瑰紓鎬э紝纭繚瑕嗙洊鍩虹鏈€変腑鏍峰紡 */
.tpl-flux2 #hero-section .rank-type-tab[class*="from-orange-500"],
.tpl-flux2 #hero-section .rank-type-tab[class*="text-gray-900"],
.tpl-flux2 #hero-section .rank-mode-tab[class*="from-orange-500"],
.tpl-flux2 #hero-section .rank-mode-tab[class*="text-gray-900"],
.tpl-flux2 #hero-section .rank-cat-tab[class*="from-orange-500"],
.tpl-flux2 #hero-section .rank-cat-tab[class*="from-teal-500"],
.tpl-flux2 #hero-section .update-cat-tag[class*="from-orange-500"] {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-cyan-2)) !important;
  color: #04141a !important;
  box-shadow: 0 6px 18px rgba(34, 211, 238, .3) !important;
  border: none !important;
  transform: scale(1.02);
}
.tpl-flux2 #hero-section .rank-type-tab[class*="from-orange-500"]:hover,
.tpl-flux2 #hero-section .rank-type-tab[class*="text-gray-900"]:hover,
.tpl-flux2 #hero-section .rank-mode-tab[class*="from-orange-500"]:hover,
.tpl-flux2 #hero-section .rank-mode-tab[class*="text-gray-900"]:hover,
.tpl-flux2 #hero-section .rank-cat-tab[class*="from-orange-500"]:hover,
.tpl-flux2 #hero-section .rank-cat-tab[class*="from-teal-500"]:hover,
.tpl-flux2 #hero-section .update-cat-tag[class*="from-orange-500"]:hover {
  box-shadow: 0 8px 24px rgba(34, 211, 238, .45) !important;
}

/* 鏈€変腑鎬侊細涓嶅惈閫変腑鏍囧織 鈫?鐜荤拑鍗婇€忔槑 */
.tpl-flux2 .rank-type-tab:not([class*="from-orange-500"]):not([class*="text-gray-900"]),
.tpl-flux2 .rank-mode-tab:not([class*="from-orange-500"]):not([class*="text-gray-900"]),
.tpl-flux2 .rank-cat-tab:not([class*="from-orange-500"]):not([class*="from-teal-500"]),
.tpl-flux2 .update-cat-tag:not([class*="from-orange-500"]) {
  background: var(--flux-glass-2) !important;
  color: var(--flux-text-2) !important;
  border: 1px solid var(--flux-line) !important;
  box-shadow: none !important;
  transform: none;
}
.tpl-flux2 .rank-type-tab:not([class*="from-orange-500"]):not([class*="text-gray-900"]):hover,
.tpl-flux2 .rank-mode-tab:not([class*="from-orange-500"]):not([class*="text-gray-900"]):hover,
.tpl-flux2 .rank-cat-tab:not([class*="from-orange-500"]):not([class*="from-teal-500"]):hover,
.tpl-flux2 .update-cat-tag:not([class*="from-orange-500"]):hover {
  color: var(--flux-cyan) !important;
  border-color: var(--flux-line-2) !important;
  background: var(--flux-glass) !important;
}

/* 濂栫墝 */
.tpl-flux2 .rank-medal-gold { background: linear-gradient(135deg, #FCD34D, #F59E0B) !important; }
.tpl-flux2 .rank-medal-silver { background: linear-gradient(135deg, #E5E7EB, #9CA3AF) !important; }
.tpl-flux2 .rank-medal-bronze { background: linear-gradient(135deg, #FCD9B6, #D97706) !important; }

/* ============ 11. 婊氬姩鍏ュ満鍔ㄧ敾锛堝畨鍏細榛樿鍙锛屼粎杩囨浮澧炲己锛?============ */
.tpl-flux2 .flux-reveal { transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.tpl-flux2 .flux-reveal-in { opacity: 1; transform: none; }

/* ============ 12. 椤佃剼 ============ */
.tpl-flux2 footer { background: var(--flux-surface) !important; border-top: 1px solid var(--flux-line) !important; }
.tpl-flux2 footer .text-white { color: var(--flux-text) !important; }
.tpl-flux2 footer .text-gray-300,
.tpl-flux2 footer .text-gray-400 { color: var(--flux-text-2) !important; }
.tpl-flux2 footer [class*="bg-gray-800"],
.tpl-flux2 footer [class*="bg-gray-700"] { background: var(--flux-glass) !important; border: 1px solid var(--flux-line) !important; }
.tpl-flux2 footer a[class*="hover:text-teal-400"]:hover { color: var(--flux-cyan) !important; }
.tpl-flux2 footer [class*="hover:bg-teal-500"]:hover { background: var(--flux-cyan) !important; color: #04141a !important; }

/* ============ 13. 婊氬姩鏉?============ */
.tpl-flux2 ::-webkit-scrollbar { width: 10px; height: 10px; }
.tpl-flux2 ::-webkit-scrollbar-track { background: transparent; }
.tpl-flux2 ::-webkit-scrollbar-thumb { background: rgba(34, 211, 238, .25); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
.tpl-flux2 ::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, .45); background-clip: padding-box; }

/* ============ 14. 鍝嶅簲寮忓井璋?============ */
@media (max-width: 639.98px) {
  .tpl-flux2 #hero-section .mx-auto { padding-top: 1.5rem; }
  .tpl-flux2 #hero-section h1 { font-size: 2.1rem !important; }
  .tpl-flux2 .flux-aurora { filter: blur(30px); animation-duration: 24s; }
  .tpl-flux2 main [class*="rounded-2xl"]:hover { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .5) !important; border-color: rgba(34, 211, 238, .5) !important; }
}

@media (max-width: 639.98px) {
  @supports selector(:has(*)) {
    .tpl-flux2 main .bg-white:has(#mineModeFilter) {
      display: grid !important;
      grid-template-columns: 1fr 1fr;
      gap: 0.6rem;
    }
    .tpl-flux2 main .bg-white:has(#mineModeFilter) > .flex-1,
    .tpl-flux2 main .bg-white:has(#mineModeFilter) > .text-xs { grid-column: 1 / -1; }
    .tpl-flux2 main .bg-white:has(#mineModeFilter) > select { width: 100% !important; }
  }
  .tpl-flux2 main .bg-white select { max-width: 100%; }
}

/* ============ 14b. FLUX 移动端性能优化（<768px） ============ */
/* 不删效果，仅降级：降低 blur/saturate/blend/vignette 开销，保留视觉近似 */
@media (max-width: 767.98px) {
  /* aurora 进一步降模糊半径，减少 GPU 合成开销 */
  .tpl-flux2 .flux-aurora { filter: blur(28px); }
  /* fixed 背景在 iOS 移动端触发频繁重绘，改 scroll */
  .tpl-flux2 body { background-attachment: scroll; }
  /* glass-card 降 blur 14→6px、saturate 130→108%，保留毛玻璃质感 */
  .tpl-flux2 .glass-card {
    -webkit-backdrop-filter: blur(6px) saturate(108%);
    backdrop-filter: blur(6px) saturate(108%);
    -webkit-backdrop-filter: blur(6px) saturate(108%);
  }
  /* 通用白底卡片同降 */
  .tpl-flux2 main .bg-white,
  .tpl-flux2 main [class*="bg-\\[1e293b\\]"],
  .tpl-flux2 main [class*="bg-\\[\\#1e293b\\]"] {
    -webkit-backdrop-filter: blur(6px) saturate(108%);
    backdrop-filter: blur(6px) saturate(108%);
    -webkit-backdrop-filter: blur(6px) saturate(108%);
  }
  /* 登录悬浮卡降 blur */
  -webkit-backdrop-filter: blur(8px);
  .tpl-flux2 .float-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);   will-change: transform;}
  /* 扫描线移除 mix-blend-mode（全屏混合模式移动端极耗 GPU），保留视觉用低 opacity */
  /* vignette 降 inset 阴影扩散范围 */
  .tpl-flux2 .flux-vignette { box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, .4); }
  .tpl-flux2:not(.dark):not(.theme-dark) .flux-vignette { box-shadow: inset 0 0 100px 16px rgba(15, 23, 42, .04); }
  /* 入场动画缩短 .6→.3s */
  .tpl-flux2 .flux-reveal { transition: opacity .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1); }
  /* 卡片 hover box-shadow 降级（移动端无真正 hover，减少合成层重建） */
  .tpl-flux2 main [class*="rounded-2xl"]:hover,
  .tpl-flux2 main [class*="rounded-xl"]:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .03) !important;
  }
  /* 选中按钮 transform 去掉（避免移动端点击时额外合成） */
  .tpl-flux2 main button[class*="from-orange-500"][class*="text-white"],
  .tpl-flux2 main a[class*="from-orange-500"][class*="text-white"],
  .tpl-flux2 main button[class*="from-amber-400"][class*="text-white"],
  .tpl-flux2 main a[class*="from-amber-400"][class*="text-white"],
  .tpl-flux2 main button[class*="from-teal-500"][class*="text-white"],
  .tpl-flux2 main a[class*="from-teal-500"][class*="text-white"],
  .tpl-flux2 main button[class*="bg-teal-500"][class*="text-white"],
  .tpl-flux2 main a[class*="bg-teal-500"][class*="text-white"],
  .tpl-flux2 main .market-pc-btn.is-active,
  .tpl-flux2 main .lib-tab-active { transform: none; }
  /* Tailwind 装饰光晕 blur-3xl/blur-2xl 降模糊半径（64px→20px / 40px→14px），保留光晕质感 */
  .tpl-flux2 .blur-3xl { filter: blur(20px); }
  .tpl-flux2 .blur-2xl { filter: blur(14px); }
  .tpl-flux2 .blur-xl { filter: blur(10px); }
  /* Tailwind backdrop-blur 系列降级（xl:24→6 / md:12→6 / sm:4→4） */
  .tpl-flux2 .backdrop-blur-xl,
  .tpl-flux2 .backdrop-blur-2xl { backdrop-filter: blur(6px) saturate(108%); -webkit-backdrop-filter: blur(6px) saturate(108%); }
  .tpl-flux2 .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  /* content-visibility: 跳过屏幕外渲染，大幅减少武器库/改枪码页初始合成开销 */
  .tpl-flux2 #weaponStrip { content-visibility: auto; contain-intrinsic-size: auto 60vh; }
  .tpl-flux2 main .grid.lg\:grid-cols-3 { content-visibility: auto; contain-intrinsic-size: auto 800px; }
  /* 14c. 排行榜/主播网格单独关闭 content-visibility（方案B）：
     避免 .grid.lg\:grid-cols-3 的隐式 paint 包含裁掉排名徽章突出卡片左上角的 7px */
  .tpl-flux2 main .mode-panel .grid.lg\:grid-cols-3,
  .tpl-flux2 #players-grid .grid.lg\:grid-cols-3 { content-visibility: visible; }
  /* 14d. 移动端改枪码/主播卡片去重投影、弱化描边，保留轻玻璃质感（方案A） */
  .tpl-flux2 main .mode-panel .grid > div,
  .tpl-flux2 #players-grid .grid > div {
    box-shadow: none !important;
    border-color: var(--flux-line-2) !important;
  }
}
@media (min-width: 1280px) {
  .tpl-flux2 #hero-section .mx-auto { max-width: 80rem !important; }

}

/* ============ 15. weapons.php 鐗规畩鏍峰紡淇 ============ */
/* 纭繚鐜舰鍥炬暟鍊煎眳涓?*/
body.tpl-flux2 .gauge-value,
.tpl-flux2 .gauge-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* 纭繚姝﹀櫒澶村儚鏂囧瓧灞呬腑 */
body.tpl-flux2 #hero-section .w-20.h-20,
body.tpl-flux2 #hero-section .w-10.h-10,
body.tpl-flux2 .weapon-card-link .w-8.h-8,
.tpl-flux2 #hero-section .w-20.h-20,
.tpl-flux2 #hero-section .w-10.h-10,
.tpl-flux2 .weapon-card-link .w-8.h-8 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}


/* ============ 17. 深色背景容器内白色图标/文字对比度修复（亮色模式） ============
   背景：第 2046-2066 行全局规则将白色→#0B1220，导致深色背景上的白色图标/文字
   对比度不足（#8844DD 上 3.39:1、#0A8580 上 3.99:1、#7338CC 上 2.74:1 等 < 4.5:1）。
   此处对未被 flux 重新着色的深色背景容器，恢复其内部及自身的白色为 #ffffff。
   覆盖页面：about（核心功能图标/步骤数字/founder 头像/CTA）、register/login（悬浮卡片图标）、
   weapons（查看按钮/狙击步枪渐变）、player、rankings 等。
   注：仅亮色模式生效，深色模式不受影响。 */
/* 17.1 深色背景容器内的 text-white 文字恢复白色（后代 + 自身） */
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] .text-white,
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"][class*="text-white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] .text-white,
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"][class*="text-white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] .text-white,
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"][class*="text-white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] .text-white,
.tpl-flux2:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"][class*="text-white"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] .text-white,
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"][class*="text-white"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"] .text-white,
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"][class*="text-white"] {
  color: #ffffff !important;
}

/* 17.2 深色背景容器内的 svg[stroke="white"] 恢复白色描边 */
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] svg[stroke="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] svg[stroke="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] svg[stroke="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] svg[stroke="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] svg[stroke="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"] svg[stroke="white"] {
  stroke: #ffffff !important;
}

/* 17.3 深色背景容器内的 svg[stroke="#fff"] 恢复白色描边 */
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] svg[stroke="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] svg[stroke="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] svg[stroke="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] svg[stroke="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] svg[stroke="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"] svg[stroke="#fff"] {
  stroke: #ffffff !important;
}

/* 17.4 深色背景容器内的 svg[fill="white"] / svg[fill="#fff"] 恢复白色填充 */
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] svg[fill="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] svg[fill="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] svg[fill="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] svg[fill="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] svg[fill="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"] svg[fill="white"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] svg[fill="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] svg[fill="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] svg[fill="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] svg[fill="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] svg[fill="#fff"],
.tpl-flux2:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"] svg[fill="#fff"] {
  fill: #ffffff !important;
}

/* ============ 18. 操作按钮夜间模式适配（深色背景 + 白字） ============
   需求：复制按钮等操作按钮日间黑字、夜间白字。
   日间模式已由 flux 重新着色规则处理（亮青色背景 + #04141a 深色文字）。
   夜间模式此处覆盖：深青色背景（#0E7490→#155E75）+ 白色文字，
   白色在 #0E7490 上对比度 4.65:1、#155E75 上 6.69:1，均达 WCAG AA。 */
.dark .tpl-flux2 main button[class*="from-orange-500"][class*="text-white"],
.dark .tpl-flux2 main a[class*="from-orange-500"][class*="text-white"],
.dark .tpl-flux2 main button[class*="from-amber-400"][class*="text-white"],
.dark .tpl-flux2 main a[class*="from-amber-400"][class*="text-white"],
.dark .tpl-flux2 main button[class*="from-teal-500"][class*="text-white"],
.dark .tpl-flux2 main a[class*="from-teal-500"][class*="text-white"],
.dark .tpl-flux2 main button[class*="bg-teal-500"][class*="text-white"],
.dark .tpl-flux2 main a[class*="bg-teal-500"][class*="text-white"],
.dark .tpl-flux2 main .market-pc-btn.is-active,
.dark .tpl-flux2 main .lib-tab-active,
.dark .tpl-flux2 main [class*="from-orange-600"][class*="to-amber-600"],
.dark .tpl-flux2 main [class*="from-amber-400"][class*="to-orange-400"],
.dark .tpl-flux2 main [class*="bg-teal-500"]:not([class*="bg-teal-500/"]),
.dark .tpl-flux2 main [class*="bg-cyan-500"]:not([class*="bg-cyan-500/"]),
.dark .tpl-flux2 .aurora-btn-primary,
.dark .tpl-flux2 .daily-password-copy,
.dark .tpl-flux2 #hero-section [class*="from-orange-600"],
.dark .tpl-flux2 #hero-section [class*="bg-orange-500"][class*="text-white"],
.dark .tpl-flux2 #hero-section [class*="bg-amber-400"][class*="text-white"],
.dark .tpl-flux2 #hero-section .rank-type-tab[class*="from-orange-500"],
.dark .tpl-flux2 #hero-section .rank-type-tab[class*="text-gray-900"],
.dark .tpl-flux2 #hero-section .rank-mode-tab[class*="from-orange-500"],
.dark .tpl-flux2 #hero-section .rank-mode-tab[class*="text-gray-900"],
.dark .tpl-flux2 #hero-section .rank-cat-tab[class*="from-orange-500"],
.dark .tpl-flux2 #hero-section .rank-cat-tab[class*="from-teal-500"],
.dark .tpl-flux2 #hero-section .update-cat-tag[class*="from-orange-500"] {
  background: linear-gradient(110deg, #0E7490, #155E75) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(14, 116, 144, .4) !important;
}
.dark .tpl-flux2 main button[class*="from-orange-500"][class*="text-white"]:hover,
.dark .tpl-flux2 main a[class*="from-orange-500"][class*="text-white"]:hover,
.dark .tpl-flux2 main button[class*="from-teal-500"][class*="text-white"]:hover,
.dark .tpl-flux2 main a[class*="from-teal-500"][class*="text-white"]:hover,
.dark .tpl-flux2 main button[class*="bg-teal-500"][class*="text-white"]:hover,
.dark .tpl-flux2 .aurora-btn-primary:hover,
.dark .tpl-flux2 .daily-password-copy:hover {
  background: linear-gradient(110deg, #155E75, #164E63) !important;
  box-shadow: 0 8px 24px rgba(14, 116, 144, .55) !important;
}

/* ============ 19. 图标日间黑色/夜间白色（用户需求） ============
    19.1 AI配装表单图标（svg_icon 生成的 currentColor 图标）：
        日间 var(--flux-text)=#0B1220（黑色），夜间 var(--flux-text)=#E6EDF6（近白色）。
    19.2 about.php 核心功能图标（w-12 h-12 渐变容器内的 stroke="white" 图标）：
        日间：渐变背景→浅色 tint，图标 stroke→对应深色；
        夜间：保持深色渐变（默认），图标 stroke="white"（默认属性保留）。 */

/* 19.1 AI配装表单内所有 currentColor 图标 → 日间黑色 / 夜间白色 */
.tpl-flux2 #aiLoadoutForm svg[stroke="currentColor"] {
  stroke: var(--flux-text) !important;
}

/* 19.2 about.php 核心功能图标容器（w-12 h-12，仅 about.php 使用这些渐变） */
/* 日间模式：teal 渐变 → 浅 teal 背景 + 深 teal 图标 */
.tpl-flux2:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#0FA39C]"] {
  background: #E6F7F6 !important;
}
.tpl-flux2:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#0FA39C]"] svg[stroke="white"] {
  stroke: #0A8580 !important;
}
/* 日间模式：orange 渐变 → 浅 orange 背景 + 深 orange 图标 */
.tpl-flux2:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#E56A18]"] {
  background: #FFF4E6 !important;
}
.tpl-flux2:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#E56A18]"] svg[stroke="white"] {
  stroke: #C95A10 !important;
}
/* 日间模式：violet 渐变 → 浅 violet 背景 + 深 violet 图标 */
.tpl-flux2:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#8844DD]"] {
  background: #F3EEFF !important;
}
.tpl-flux2:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#8844DD]"] svg[stroke="white"] {
  stroke: #7338CC !important;
}

/* 19.3 about.php 步骤数字（w-16 h-16 渐变容器内 text-white）→ 日间浅色背景+深色文字 */
.tpl-flux2:not(.dark):not(.theme-dark) .w-16.h-16[class*="from-[#0FA39C]"] {
  background: #E6F7F6 !important;
}
.tpl-flux2:not(.dark):not(.theme-dark) .w-16.h-16[class*="from-[#0FA39C]"] .text-white {
  color: #0A8580 !important;
}
.tpl-flux2:not(.dark):not(.theme-dark) .w-16.h-16[class*="from-[#E56A18]"] {
  background: #FFF4E6 !important;
}
.tpl-flux2:not(.dark):not(.theme-dark) .w-16.h-16[class*="from-[#E56A18]"] .text-white {
  color: #C95A10 !important;
}

/* 19.4 about.php 创始人头像（w-20 h-20 渐变容器，text-white 在容器自身）→ 日间浅色背景+深色文字 */
.tpl-flux2:not(.dark):not(.theme-dark) .w-20.h-20[class*="from-[#E56A18]"] {
  background: #FFF4E6 !important;
}
.tpl-flux2:not(.dark):not(.theme-dark) .w-20.h-20[class*="from-[#E56A18]"][class*="text-white"] {
  color: #C95A10 !important;
}

/* 19.5 about.php CTA 按钮（a 标签 from-[#E56A18] text-white）→ 日间浅色背景+深色文字 */
.tpl-flux2:not(.dark):not(.theme-dark) main a[class*="from-[#E56A18]"][class*="text-white"] {
  background: #FFF4E6 !important;
  color: #C95A10 !important;
  border: 1px solid #C95A10 !important;
}
.tpl-flux2:not(.dark):not(.theme-dark) main a[class*="from-[#E56A18]"][class*="text-white"]:hover {
  background: #FFE8D0 !important;
}

/* ============ 20. 页面顶部Hero背景一体化修复 ============
   问题：header有半透明白色背景(bg-white/80 + backdrop-blur)，hero背景从header下面开始，
        导致页面最顶部露出header背景色，与hero渐变背景不一致。
   修复：顶部导航模式下让header透明，hero/登录页背景向上延伸覆盖整个顶部，内容避开header。 */

/* 20.1 顶部导航模式（非侧边栏）：header透明化 */
.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* 20.2 Hero区域padding-top增加，为透明header留出空间（内容不被header遮挡） */
.tpl-flux2:not(.nav-desktop-sidebar-drawer) #hero-section {
  padding-top: 4.5rem !important; /* 移动端 h-14=56px + 间距 */
}
@media (min-width: 1024px) {
  .tpl-flux2:not(.nav-desktop-sidebar-drawer) #hero-section {
    padding-top: 5rem !important; /* 桌面端 lg:h-16=64px + 间距 */
  }
}

/* 20.3 登录/注册页面：auth-page 不再减去header高度，背景从顶部开始 */
.tpl-flux2:not(.nav-desktop-sidebar-drawer) .auth-page {
  min-height: 100vh !important;
  padding-top: 4rem !important;
}
@media (min-width: 1024px) {
  .tpl-flux2:not(.nav-desktop-sidebar-drawer) .auth-page {
    padding-top: 4.5rem !important;
  }
}

/* 20.4 确保透明header内的文字/图标在hero渐变背景上清晰可见 */
.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .site-brand-name {
  color: #0B1220 !important;
  text-shadow: 0 1px 3px rgba(255,255,255,.4);
}
.dark.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .site-brand-name,
.tpl-flux2.dark:not(.nav-desktop-sidebar-drawer) .site-header .site-brand-name {
  color: #E6EDF6 !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* 20.5 header内导航链接在透明背景上的对比度 */
.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item {
  color: #334155 !important;
}
.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item:hover {
  background: rgba(255,255,255,.6) !important;
}
.dark.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item,
.tpl-flux2.dark:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item {
  color: #CBD5E1 !important;
}
.dark.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item:hover,
.tpl-flux2.dark:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item:hover {
  background: rgba(15,23,42,.5) !important;
}

/* 20.6 header内按钮在透明背景上的可见性 */
.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .header-action-link {
  color: #475569 !important;
}
.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle {
  color: #475569 !important;
  background: rgba(255,255,255,.5) !important;
}
.dark.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .header-action-link,
.tpl-flux2.dark:not(.nav-desktop-sidebar-drawer) .site-header .header-action-link,
.dark.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle,
.tpl-flux2.dark:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle {
  color: #94A3B8 !important;
}
.dark.tpl-flux2:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle,
.tpl-flux2.dark:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle {
  background: rgba(15,23,42,.4) !important;
}

/* ============ 21. FLUX 首页 hero M7 步枪点阵（Canvas，JS 在 footer.php 注入） ============ */
.tpl-flux2.page-home #hero-section { position: relative; }
.tpl-flux2.page-home #hero-section > .flux-m7-canvas {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

/* ============ 22. FLUX 登录/注册页面配色 ============ */
.tpl-flux2 .auth-page {
  --tpl-accent: var(--flux-cyan);
  --tpl-accent-2: var(--flux-violet);
  background: transparent !important;
}
.tpl-flux2 .auth-left {
  background: transparent !important;
}
.tpl-flux2 .auth-left::before {
  background: radial-gradient(circle at 30% 20%, rgba(34,211,238,.10) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(139,92,246,.08) 0%, transparent 40%) !important;
}
.tpl-flux2 .auth-right {
  background: var(--flux-glass) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-left: 1px solid var(--flux-line) !important;
}
.tpl-flux2 .brand-badge { color: var(--flux-text) !important; }
.tpl-flux2 .brand-badge h2 { color: var(--flux-text) !important; text-shadow: 0 1px 4px rgba(34,211,238,.15) !important; }
.tpl-flux2 .brand-badge p { color: var(--flux-text-2) !important; }
.tpl-flux2 .brand-badge .logo-box {
  background: rgba(34,211,238,.1) !important;
  color: var(--flux-cyan) !important;
  box-shadow: 0 8px 24px rgba(34,211,238,.15) !important;
}
.tpl-flux2 .float-card {
  background: var(--flux-glass) !important;
  -webkit-backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
  border: 1px solid var(--flux-line) !important;
}
.tpl-flux2 .code-window {
  background: var(--flux-void) !important;
  color: var(--flux-text) !important;
  border: 1px solid var(--flux-line) !important;
}
.tpl-flux2 .code-window .tok-key { color: var(--flux-violet) !important; }
.tpl-flux2 .code-window .tok-str { color: var(--flux-emerald) !important; }
.tpl-flux2 .code-window .tok-num { color: var(--flux-amber) !important; }
.tpl-flux2 .code-window .tok-com { color: var(--flux-text-3) !important; }
.tpl-flux2 .weapon-card {
  background: var(--flux-elev) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
  border: 1px solid var(--flux-line) !important;
}
.tpl-flux2 .weapon-card .w-name { color: var(--flux-text) !important; }
.tpl-flux2 .weapon-card .w-spec { color: var(--flux-text-2) !important; }
.tpl-flux2 .weapon-card .w-bar { background: var(--flux-line) !important; }
.tpl-flux2 .auth-title { color: var(--flux-text) !important; }
.tpl-flux2 .auth-copy { color: var(--flux-text-2) !important; }
.tpl-flux2 .input-group {
  background: var(--flux-void) !important;
  border-color: var(--flux-line-2) !important;
}
.tpl-flux2 .input-group:hover {
  border-color: var(--flux-cyan) !important;
  background: var(--flux-surface) !important;
}
.tpl-flux2 .input-group:focus-within {
  border-color: var(--flux-cyan) !important;
  background: var(--flux-surface) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.15) !important;
}
.tpl-flux2 .input-group .input-prefix { color: var(--flux-text-2) !important; }
.tpl-flux2 .input-group .input-prefix .sep { background: var(--flux-line) !important; }
.tpl-flux2 .input-group input { color: var(--flux-text) !important; }
.tpl-flux2 .input-group input::placeholder { color: var(--flux-text-3) !important; }
.tpl-flux2 .captcha-refresh {
  background: var(--flux-elev) !important;
  border-color: var(--flux-line-2) !important;
}
.tpl-flux2 .email-code-btn {
  background: var(--flux-cyan) !important;
  color: var(--flux-void) !important;
}
.tpl-flux2 .email-code-btn:hover { background: var(--flux-cyan-2) !important; }
.tpl-flux2 .main-btn {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-violet)) !important;
  color: #04141a !important;
  box-shadow: 0 4px 16px rgba(34,211,238,.3) !important;
}
.tpl-flux2 .main-btn:hover {
  background: linear-gradient(110deg, var(--flux-cyan-2), var(--flux-violet)) !important;
  box-shadow: 0 6px 20px rgba(34,211,238,.4) !important;
}
.tpl-flux2 .alt-login { color: var(--flux-text-2) !important; }
.tpl-flux2 .alt-login a { color: var(--flux-cyan) !important; }
.tpl-flux2 .alt-login a:hover { color: var(--flux-cyan-2) !important; }
.tpl-flux2 .auth-legal { color: var(--flux-text-3) !important; }
.tpl-flux2 .password-hint { color: var(--flux-text-3) !important; }
.tpl-flux2 .notice-warn {
  background: rgba(251,191,36,.1) !important;
  border-color: rgba(251,191,36,.3) !important;
  color: var(--flux-amber) !important;
}
.tpl-flux2 .notice-error {
  background: rgba(251,113,133,.1) !important;
  border-color: rgba(251,113,133,.3) !important;
  color: var(--flux-rose) !important;
}
.tpl-flux2 .notice-success {
  background: rgba(52,211,153,.1) !important;
  border-color: rgba(52,211,153,.3) !important;
  color: var(--flux-emerald) !important;
}

/* ============ 23. FLUX 找回密码页面透明背景 ============ */
.tpl-flux2 .account-auth-page {
  background: transparent !important;
}
.tpl-flux2 .account-auth-box {
  background: var(--flux-glass) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--flux-line) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35) !important;
}
.tpl-flux2 .account-field label { color: var(--flux-text-2) !important; }
.tpl-flux2 .account-field input {
  background: var(--flux-void) !important;
  border: 1px solid var(--flux-line-2) !important;
  border-radius: 8px !important;
  color: var(--flux-text) !important;
}
.tpl-flux2 .account-field input:focus {
  outline: none !important;
  border-color: var(--flux-cyan) !important;
  box-shadow: 0 0 0 3px rgba(34,211,238,.15) !important;
}
.tpl-flux2 .account-field input::placeholder { color: var(--flux-text-3) !important; }
.tpl-flux2 .code-send {
  background: var(--flux-cyan) !important;
  color: var(--flux-void) !important;
  border: 0 !important;
}
.tpl-flux2 .code-send:hover { background: var(--flux-cyan-2) !important; }
.tpl-flux2 .account-submit {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-violet)) !important;
  color: #04141a !important;
  box-shadow: 0 4px 16px rgba(34,211,238,.3) !important;
}
.tpl-flux2 .account-submit:hover {
  box-shadow: 0 6px 20px rgba(34,211,238,.4) !important;
}
.tpl-flux2 .account-auth-box .text-gray-900,
.tpl-flux2 .account-auth-box .text-gray-100 { color: var(--flux-text) !important; }
.tpl-flux2 .account-auth-box .text-gray-500,
.tpl-flux2 .account-auth-box .text-gray-400 { color: var(--flux-text-2) !important; }
.tpl-flux2 .account-auth-box .text-teal-600 { color: var(--flux-cyan) !important; }
.tpl-flux2 .account-auth-box .bg-red-50 {
  background: rgba(251,113,133,.12) !important;
  border-color: rgba(251,113,133,.3) !important;
  color: var(--flux-rose) !important;
}

/* ============ 24. Hero 标题逐字交错弹出入场动画（仅首次加载，无光标闪烁） ============
 * 仅作用于 #hero-section h1 内的 .hero-char；
 * 副标题/正文不包含 .hero-char，故不受影响。
 * 初始：opacity:0 + translateY(24px) scale(0.94)
 * 结束：opacity:1 + translateY(0) scale(1)
 * 缓动：cubic-bezier(0.22, 1, 0.36, 1) 弹性上浮轻微回弹
 * 时长 520ms，逐字延迟由 inline style animation-delay 控制（间隔 95ms，从左到右）
 * animation 默认 iteration-count:1 + forwards，播放 1 次后保持终态，滚动返回不重播。
 */
.tpl-flux2 #hero-section h1 .hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px) scale(0.94);
  animation: fluxHeroCharIn 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, opacity;
}
/* 渐变段字符（前缀标题）：per-char gradient，与 flux h1 渐变一致 */
.tpl-flux2 #hero-section h1 .hero-char--grad {
  background: linear-gradient(110deg, var(--flux-cyan), var(--flux-violet) 55%, var(--flux-amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* 纯色段字符（主标题）：继承 h1 文本色 */
.tpl-flux2 #hero-section h1 .hero-char--plain {
  color: inherit;
}
@keyframes fluxHeroCharIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* 尊重用户减少动效偏好：直接显示终态，不播放动画 */
@media (prefers-reduced-motion: reduce) {
  .tpl-flux2 #hero-section h1 .hero-char {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ============ 25. 首页内容板块滚动入场（一次性，ease-out 0.6s） ============
 * 仅作用于首页 Hero 之后的 section。JS 在元素上添加 .scroll-reveal（初始态），
 * 当板块进入视口约 25% 时添加 .is-visible 触发过渡；unobserve 保证只播放一次，无退场。
 * 初始：translateY(50px) opacity:0 → 终态：translateY(0) opacity:1，ease-out 0.6s。
 * 无 JS 时元素不加 .scroll-reveal，保持默认可见，作为降级。
 */
body.tpl-flux2.page-home #hero-section ~ section.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .6s ease-out, transform .6s ease-out;
  will-change: opacity, transform;
}
body.tpl-flux2.page-home #hero-section ~ section.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.tpl-flux2.page-home #hero-section ~ section.scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============ 响应式与性能优化层（自动追加） ============ */
/* svh 单位降级 */
@supports not (height: 100svh) {
  .min-h-screen, [class*="min-h-screen"] { min-height: 100vh; }
  .min-h-screen, [class*="min-h-screen"] { min-height: 100dvh; }
}
/* content-visibility：长列表屏外渲染优化 */
@supports (content-visibility: auto) {
  .loadout-grid, .weapon-grid, .market-grid, [class*="grid-cols"]:not([class*="grid-cols-1"]) {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
  }
}
/* 移动端 backdrop-filter 完全禁用（<768px）：真实手机 GPU 有限，滚动时持续重算模糊是卡顿主因 */
@media (max-width: 767.98px) {
  .site-header, [class*="backdrop-blur"], .glass-card, .glass-card-light, .glass-card-strong {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* header 改用不透明背景 */
  .tpl-flux2 .site-header { background: #ffffff !important; }
  .dark .tpl-flux2 .site-header { background: #0f172a !important; }
  /* 禁用 background-attachment: fixed：移动端每帧重绘背景极其耗性能 */
  .tpl-flux2 body { background-attachment: scroll !important; }
  /* 移除全局 transition：避免滚动时 GPU 合成层堆积 */
  .tpl-flux2 img, .tpl-flux2 a:not(.market-card):not(.ammo-card):not(.fish-card):not(.crafting-card):not(.loadout-card) { transition: none !important; }
}
/* 响应式字号与间距 */
@media (max-width: 639.98px) {
  h1 { font-size: clamp(1.5rem, 5vw, 2rem) !important; }
  h2 { font-size: clamp(1.25rem, 4vw, 1.5rem) !important; }
  main [class*="text-4xl"], main [class*="text-5xl"] { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  main [class*="text-3xl"] { font-size: clamp(1.25rem, 5vw, 1.75rem) !important; }
  /* 卡片间距收紧 */
  main [class*="gap-6"], main [class*="gap-8"] { gap: 1rem !important; }
  /* 装饰性固定宽度元素自适应 */
  [style*="width:200px"], [style*="width: 200px"],
  [style*="width:180px"], [style*="width: 180px"],
  [style*="width:190px"], [style*="width: 190px"] {
    max-width: 100% !important;
  }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  main [class*="gap-8"] { gap: 1.5rem !important; }
}
/* profile-grid 移动端单列 */
@media (max-width: 639.98px) {
  .profile-grid { grid-template-columns: 1fr !important; }
  .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
/* prefers-reduced-motion 无障碍 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ 26. 补充：网格卡片 hover 上浮 + market-detail 面板归一化 ============
 * 全局规则（第 243-263 行）已统一处理基底投影和 hover 阴影/边框。
 * 此处仅补充：
 *   1) loadout 卡片缺少局部 hover transform，补上 translateY(-4px) 对齐 crafting
 *   2) market-detail 的 .flux-glass 面板不用 Tailwind bg-white，单独归一化投影
 *   3) 移动端进一步弱化投影 */

/* loadout 卡片 hover 上浮（market/ammo/fishing 各自页面 <style> 已有 translateY） */
.tpl-flux2 main .loadout-grid > .bg-white:hover,
.tpl-flux2 main .market-card:hover,
.tpl-flux2 main .ammo-card:hover,
.tpl-flux2 main .fish-card:hover {
  transform: translateY(-4px);
}

/* market-detail 详情面板：基底投影与网格卡片一致 */
.tpl-flux2 main .flux-glass {
  box-shadow: 0 4px 18px rgba(0, 0, 0, .10), inset 0 1px 0 rgba(255, 255, 255, .04) !important;
  border-color: var(--flux-line-2) !important;
}
.tpl-flux2 main .flux-glass:hover {
  border-color: rgba(34, 211, 238, .5) !important;
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .5) !important;
}

/* 移动端（<768px）：进一步弱化投影 */
@media (max-width: 767.98px) {
  .tpl-flux2 main .loadout-grid > .bg-white,
  .tpl-flux2 main .market-card,
  .tpl-flux2 main .ammo-card,
  .tpl-flux2 main .fish-card,
  .tpl-flux2 main .flux-glass {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08) !important;
  }
}


/* ============ 27. about.php card normalization ============ */
body.page-about .tpl-flux2 main .bg-white {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04) !important;
  border-color: rgba(15, 23, 42, .08) !important;
}
body.page-about .tpl-flux2 main .bg-white:hover {
  border-color: rgba(255, 122, 34, .3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
}
body.dark.page-about .tpl-flux2 main .bg-white,
body.page-about.dark .tpl-flux2 main .bg-white {
  border-color: rgba(148, 163, 184, .12) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
}
body.dark.page-about .tpl-flux2 main .bg-white:hover,
body.page-about.dark .tpl-flux2 main .bg-white:hover {
  border-color: rgba(255, 154, 82, .3) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
}

/* weapons.php CTA button */
.weapon-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-image: linear-gradient(to right, #0891B2, #0E7490);
  color: #fff;
  font-weight: 600;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(6, 95, 110, 0.3);
  transition: all 0.2s;
  font-size: 0.875rem;
  text-decoration: none;
}
.weapon-cta-btn:hover {
  background-image: linear-gradient(to right, #0E7490, #155E75);
  box-shadow: 0 20px 25px -5px rgba(6, 95, 110, 0.4);
  color: #fff;
}
html.dark .weapon-cta-btn,
body.dark .weapon-cta-btn {
  background-image: linear-gradient(to right, #22D3EE, #06B6D4);
  color: #04141A;
  box-shadow: 0 10px 15px -3px rgba(34, 211, 238, 0.3);
}
html.dark .weapon-cta-btn:hover,
body.dark .weapon-cta-btn:hover {
  background-image: linear-gradient(to right, #06B6D4, #0891B2);
  color: #04141A;
  box-shadow: 0 20px 25px -5px rgba(34, 211, 238, 0.35);
}

/* ============ 23. 全局性能优化 ============ */

/* 长页面卡片跳过离屏渲染（content-visibility）- 大幅提升滚动流畅度 */
.tpl-flux2 .glass-card,
.tpl-flux2 .loadout-card,
.tpl-flux2 .market-card,
.tpl-flux2 .community-post-card,
.tpl-flux2 .player-card,
.tpl-flux2 .rankings-item,
.tpl-flux2 .fish-card,
.tpl-flux2 .crafting-card,
.tpl-flux2 .ammo-row,
.tpl-flux2 [class*="card"][class*="rounded-"] {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

/* 卡片布局隔离，减少重排范围 */
.tpl-flux2 .glass-card,
.tpl-flux2 .loadout-card,
.tpl-flux2 .market-card,
.tpl-flux2 [class*="card"][class*="rounded-"] {
  contain: layout paint;
}

/* 动画元素只走合成层（transform/opacity），避免重排 */
.tpl-flux2 .flux-tilt,
.tpl-flux2 .card-hover-lift,
.tpl-flux2 button,
.tpl-flux2 a {
  will-change: transform;
}
/* 不要在 hover 上常驻 will-change，只在过渡时声明 */
.tpl-flux2 .flux-tilt,
.tpl-flux2 .card-hover-lift {
  will-change: auto;
}
.tpl-flux2 .flux-tilt:hover,
.tpl-flux2 .card-hover-lift:hover {
  will-change: transform;
}

/* 图片默认硬件加速解码 */
.tpl-flux2 img {
  content-visibility: auto;
}

/* 减少移动端 300ms 点击延迟 */
.tpl-flux2, .tpl-flux2 * {
  touch-action: manipulation;
}

/* 优化滚动条样式 */
.tpl-flux2 ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.tpl-flux2 ::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.3);
  border-radius: 3px;
}
.tpl-flux2 ::-webkit-scrollbar-track {
  background: transparent;
}

/* 减少动画（尊重系统偏好） */
@media (prefers-reduced-motion: reduce) {
  .tpl-flux2 *,
  .tpl-flux2 *::before,
  .tpl-flux2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 输入框和按钮点击时不出现灰色闪屏 */
.tpl-flux2, .tpl-flux2 a, .tpl-flux2 button, .tpl-flux2 [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

/* 提升文字渲染性能 */
.tpl-flux2 {
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

/* ============ 性能优化：渲染层提升 ============ */

/* 离屏内容跳过渲染（大幅减少长页面渲染时间） */
.tpl-flux2 .glass-card,
.tpl-flux2 [class*="rounded-2xl"][class*="bg-white"],
.tpl-flux2 [class*="rounded-2xl"][class*="bg-["],
.tpl-flux2 .crafting-card,
.tpl-flux2 .ammo-card,
.tpl-flux2 .fish-card,
.tpl-flux2 .market-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

/* 固定导航栏 GPU 合成层，避免滚动重绘 */
.tpl-flux2 .site-header,
.tpl-flux2 #mobileMenu,
.tpl-flux2 #mobileMenuOverlay {
  transform: translateZ(0);
  will-change: transform;
}

/* 卡片 hover 提升合成层 */
.tpl-flux2 .glass-card,
.tpl-flux2 [class*="rounded-2xl"] {
  will-change: transform;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 滚动平滑 */
.tpl-flux2 {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* 移动端 100dvh 适配 */
.tpl-flux2 .hero-section,
.tpl-flux2 #hero-section {
  min-height: auto;
}

/* 减少动画在低端设备上的开销 */
@media (prefers-reduced-motion: reduce) {
  .tpl-flux2 *,
  .tpl-flux2 *::before,
  .tpl-flux2 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 图片懒加载占位 */
.tpl-flux2 img {
  content-visibility: auto;
}

/* 避免 iOS 点击高亮 */
.tpl-flux2 * {
  -webkit-tap-highlight-color: transparent;
}

/* 文字渲染优化 */
.tpl-flux2 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* 移动端导航栏固定定位优化 */
@media (max-width: 768px) {
  .tpl-flux2 .site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* 为固定头部预留空间 */
  .tpl-flux2 body {
    padding-top: 0;
  }
}

/* 页面切换淡入效果 */
.tpl-flux2 main,
.tpl-flux2 #app {
  animation: pageFadeIn 0.25s ease-out;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 按钮点击反馈 */
.tpl-flux2 button,
.tpl-flux2 a[role="button"] {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ============ 页面切换平滑过渡 ============ */

/* 页面加载淡入 */
html.js-loaded body {
  animation: pageLoadIn 0.3s ease-out;
}
@keyframes pageLoadIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 导航点击淡出 */
html.is-navigating body {
  animation: pageNavOut 0.2s ease-in forwards;
}
@keyframes pageNavOut {
  from { opacity: 1; }
  to { opacity: 0.85; }
}

/* View Transitions API（Chrome/Edge 支持时更丝滑） */
@view-transition {
  navigation: auto;
  types: {
    slide: { navigation: auto; },
  }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  html.js-loaded body,
  html.is-navigating body {
    animation: none;
  }
}

/* 排行榜卡片：允许排名徽章溢出显示 */
.tpl-flux2 .hot-card {
  content-visibility: visible !important;
  contain: layout style !important;
  overflow: visible !important;
}