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

/* ============ 1. FLUX 璁捐浠ょ墝 ============ */
.tpl-flux {
  --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: "Chakra Petch", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-display: "Orbitron", "Chakra Petch", "Noto Sans SC", sans-serif;
}

/* 浜壊妯″紡锛氭煍鍏夌幓鐠冿紙淇濇寔 FLUX 璇█锛屽簳鑹茶浆娴咃級 */
.tpl-flux: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-flux 鏃朵粛闇€鍖归厤娣辫壊 */
html.dark .tpl-flux { /* 娣辫壊浠ょ墝宸插湪 .tpl-flux 榛樿涓瀹?*/ }

/* ============ 2. 鍩虹鎺掔増涓庤儗鏅?============ */
.tpl-flux body,
.tpl-flux {
  background: var(--flux-void);
  color: var(--flux-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.tpl-flux 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-flux h1, .tpl-flux h2, .tpl-flux h3, .tpl-flux h4 {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  font-weight: 800;
}
.tpl-flux h1 { font-weight: 900; letter-spacing: -.02em; }
.tpl-flux code, .tpl-flux pre, .tpl-flux .font-mono { font-family: var(--font-mono); }
.tpl-flux ::selection { background: rgba(34, 211, 238, .28); color: #fff; }

/* ============ 3. 鍏ㄦ伅鑳屾櫙灞?============ */
.tpl-flux .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-flux .flux-aurora {
  position: fixed; z-index: 0; pointer-events: none; filter: blur(70px); border-radius: 50%;
  animation: flux-float 18s ease-in-out infinite;
  will-change: transform;
}
.tpl-flux .flux-aurora--cyan   { width: 42vw; height: 42vw; top: -12vw; left: -8vw; background: rgba(34, 211, 238, .20); }
.tpl-flux .flux-aurora--amber  { width: 38vw; height: 38vw; top: 50vh; right: -10vw; background: rgba(251, 146, 60, .16); animation-delay: -6s; }
.tpl-flux .flux-aurora--violet { width: 30vw; height: 30vw; top: 30vh; left: 55vw; background: rgba(139, 92, 246, .14); animation-delay: -11s; }
.tpl-flux .flux-scanline {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(34, 211, 238, .022) 3px, rgba(34, 211, 238, .022) 4px);
  mix-blend-mode: screen;
}
.tpl-flux .flux-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.tpl-flux .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-flux:not(.dark):not(.theme-dark) .flux-vignette { box-shadow: inset 0 0 180px 30px rgba(15, 23, 42, .06); }
.tpl-flux:not(.dark):not(.theme-dark) .flux-scanline { opacity: .25; }
@keyframes flux-float { 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(4vw,-3vh) scale(1.12); } }

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

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

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

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

/* 鍗＄墖鎮仠 */
.tpl-flux main [class*="rounded-2xl"]:hover,
.tpl-flux main [class*="rounded-xl"]:hover {
  border-color: var(--flux-line-2) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42), 0 0 0 1px rgba(34, 211, 238, .14), inset 0 1px 0 rgba(255, 255, 255, .05);
}

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

@media (min-width: 1024px) {
  .tpl-flux.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-flux.page-home #hero-section .mx-auto > *:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .tpl-flux.page-home #hero-section .mx-auto > *:nth-child(2) { grid-column: 1; grid-row: 2; }
  .tpl-flux.page-home #hero-section .mx-auto > *:nth-child(3) { grid-column: 1; grid-row: 3; }
  .tpl-flux.page-home #hero-section .mx-auto > *:nth-child(4) { grid-column: 1; grid-row: 4; }
  .tpl-flux.page-home #hero-section .mx-auto > *:nth-child(5) { grid-column: 1; grid-row: 5; }
  .tpl-flux.page-home #hero-section .mx-auto > *:nth-child(6) { grid-column: 2; grid-row: 2 / span 4; align-self: center; width: 100%; }
  .tpl-flux.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-flux.page-home #hero-section .mx-auto { text-align: center; }
  .tpl-flux.page-home #hero-section .mx-auto > * { justify-self: center; }
  .tpl-flux.page-home #hero-section .mx-auto .inline-flex { margin-left: auto; margin-right: auto; }
  .tpl-flux.page-home #hero-section .mx-auto .flex { justify-content: center; }
}

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

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

/* Hero 鏂囨 */
.tpl-flux #hero-section h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem) !important;
  line-height: 1.05 !important;
}
.tpl-flux #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-flux #hero-section [class*="bg-orange-500/10"],
.tpl-flux #hero-section [class*="bg-amber-400/10"] {
  background: rgba(34, 211, 238, .10) !important; border-color: rgba(34, 211, 238, .35) !important;
}
.dark .tpl-flux #hero-section [class*="text-orange-800"],
.dark .tpl-flux #hero-section [class*="text-amber-200"] { color: var(--flux-cyan) !important; }
.tpl-flux #hero-section [class~="bg-orange-500"],
.tpl-flux #hero-section [class~="bg-amber-400"] { background: var(--flux-cyan) !important; }

/* Hero CTA */
.tpl-flux #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-flux #hero-section [class*="from-orange-600"]:hover { box-shadow: 0 16px 40px rgba(34, 211, 238, .5) !important; }
.tpl-flux #hero-section [class*="bg-sky-500/10"],
.tpl-flux #hero-section [class*="bg-sky-400/10"] {
  background: rgba(139, 92, 246, .12) !important; border-color: rgba(139, 92, 246, .4) !important;
}
.dark .tpl-flux #hero-section [class*="bg-sky-500/10"],
.dark .tpl-flux #hero-section [class*="bg-sky-400/10"] { color: var(--flux-violet) !important; }
.dark .tpl-flux #hero-section [class*="text-sky-700"],
.dark .tpl-flux #hero-section [class*="text-sky-200"] { color: var(--flux-violet) !important; }

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

/* Hero 缁熻鐡︾墖 鈫?鐜荤拑 Bento */
.tpl-flux #hero-section [class*="grid-cols-3"] > div {
  background: var(--flux-glass) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--flux-line) !important; border-radius: var(--flux-radius) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .04);
  position: relative; overflow: hidden;
}
.tpl-flux #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-flux #hero-section [class*="grid-cols-3"] > div [class*="text-\\[\\#FF7A22\\]"],
.tpl-flux #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-flux #hero-section [class*="grid-cols-3"] > div [class*="text-\\[\\#4F5664\\]"],
.tpl-flux #hero-section [class*="grid-cols-3"] > div [class*="text-\\[\\#9DA1AC\\]"]"] { color: var(--flux-text-2) !important; }

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

/* 娓愬彉鏂囧瓧鍚屽寲 */
.tpl-flux main [class*="from-orange-500"][class*="bg-clip-text"],
.tpl-flux 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-flux main h2 [class*="from-teal-400"],
.tpl-flux main h2 [class*="to-cyan-500"] { background: linear-gradient(var(--flux-cyan), var(--flux-violet)) !important; }
.tpl-flux main h2 [class*="text-teal-500"],
.tpl-flux main h2 [class*="text-orange-500"] { color: var(--flux-cyan) !important; }

/* 涓绘搷浣滄寜閽?*/
.tpl-flux main [class*="from-orange-600"][class*="to-amber-600"],
.tpl-flux 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-flux main [class*="bg-teal-500"]:not([class*="bg-teal-500/"]),
.tpl-flux main [class*="bg-cyan-500"]:not([class*="bg-cyan-500/"]) { background: var(--flux-cyan) !important; color: #04141a !important; }
.tpl-flux main [class*="bg-orange-500"]:not([class*="bg-orange-500/"]):not([class*="bg-clip"]) { background: var(--flux-amber) !important; color: #1a0d00 !important; }

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

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

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

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

/* ============ 9. 姣忔棩瀵嗙爜妯″潡 鈫?FLUX 鍏ㄦ伅 ============ */
.tpl-flux .daily-password-shell {
  background: var(--flux-glass) !important;
  backdrop-filter: blur(16px) saturate(130%); -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-flux .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-flux .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-flux .daily-password-title { color: var(--flux-text) !important; font-family: var(--font-display) !important; }
.tpl-flux .daily-password-date, .tpl-flux .daily-password-meta { color: var(--flux-text-2) !important; }
.tpl-flux .daily-password-state { background: var(--flux-glass-2) !important; border-color: var(--flux-line) !important; color: var(--flux-text-2) !important; }
.tpl-flux .daily-password-state-dot { background: var(--flux-cyan) !important; box-shadow: 0 0 0 3px rgba(34, 211, 238, .2) !important; }
.tpl-flux .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-flux .daily-password-grid { background: var(--flux-line) !important; border-color: var(--flux-line) !important; }
.tpl-flux .daily-password-item { background: var(--flux-surface) !important; }
.tpl-flux .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-flux .daily-password-name { color: var(--flux-text-2) !important; }
.tpl-flux .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-flux .daily-password-copy { background: var(--flux-cyan) !important; color: #04141a !important; box-shadow: 0 4px 14px rgba(34, 211, 238, .4) !important; }
.tpl-flux .daily-password-copy:hover { background: var(--flux-cyan-2) !important; box-shadow: 0 6px 18px rgba(34, 211, 238, .55) !important; }
.tpl-flux .daily-password-empty { border-color: var(--flux-line) !important; color: var(--flux-text-2) !important; }

/* ============ 10. 妯″紡鏍囩 / 鎺掕姒?/ 鐜╁鍗?============ */
.tpl-flux .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-flux .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-flux .aurora-btn-ghost { background: var(--flux-glass-2) !important; color: var(--flux-text-2) !important; border: 1px solid var(--flux-line) !important; }
.tpl-flux .aurora-btn-ghost:hover { color: var(--flux-cyan) !important; border-color: var(--flux-line-2) !important; }
.tpl-flux #platform-tabs { flex-wrap: wrap; }
.tpl-flux #mode-tabs { flex-wrap: nowrap; }

/* ============ 10b. 缁熶竴鎵€鏈夋寜閽€変腑/鏈€変腑鏁堟灉锛堜笌棣栭〉鎺掕姒滀竴鑷达級 ============ */
/* 閫変腑鐘舵€侊細orange/teal 娓愬彉 + text-white 鈫?aurora-btn-primary 鏁堟灉 */
.tpl-flux main button[class*="from-orange-500"][class*="text-white"],
.tpl-flux main a[class*="from-orange-500"][class*="text-white"],
.tpl-flux main button[class*="from-amber-400"][class*="text-white"],
.tpl-flux main a[class*="from-amber-400"][class*="text-white"],
.tpl-flux main button[class*="from-teal-500"][class*="text-white"],
.tpl-flux main a[class*="from-teal-500"][class*="text-white"],
.tpl-flux main button[class*="bg-teal-500"][class*="text-white"],
.tpl-flux main a[class*="bg-teal-500"][class*="text-white"],
.tpl-flux main .market-pc-btn.is-active,
.tpl-flux 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-flux main button[class*="from-orange-500"][class*="text-white"]:hover,
.tpl-flux main a[class*="from-orange-500"][class*="text-white"]:hover,
.tpl-flux main button[class*="from-teal-500"][class*="text-white"]:hover,
.tpl-flux main a[class*="from-teal-500"][class*="text-white"]:hover,
.tpl-flux main button[class*="bg-teal-500"][class*="text-white"]:hover,
.tpl-flux main .market-pc-btn.is-active:hover,
.tpl-flux 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-flux main button[class*="bg-white/70"][class*="text-slate-600"],
.tpl-flux main a[class*="bg-white/70"][class*="text-slate-600"],
.tpl-flux main button[class*="bg-white/70"][class*="text-slate-700"],
.tpl-flux main a[class*="bg-white/70"][class*="text-slate-700"],
.tpl-flux main button.cat-tab[class*="bg-gray-100"],
.tpl-flux main a.cat-tab[class*="bg-gray-100"],
.tpl-flux main .lib-tab-inactive,
.tpl-flux 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-flux main button[class*="bg-white/70"][class*="text-slate-600"]:hover,
.tpl-flux main a[class*="bg-white/70"][class*="text-slate-600"]:hover,
.tpl-flux main button[class*="bg-white/70"][class*="text-slate-700"]:hover,
.tpl-flux main a[class*="bg-white/70"][class*="text-slate-700"]:hover,
.tpl-flux main button.cat-tab[class*="bg-gray-100"]:hover,
.tpl-flux main a.cat-tab[class*="bg-gray-100"]:hover,
.tpl-flux main .lib-tab-inactive:hover,
.tpl-flux 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-flux main a[class*="bg-white"][class*="text-gray-600"][class*="border-gray-200"],
.tpl-flux 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-flux main a[class*="bg-white"][class*="text-gray-600"][class*="border-gray-200"]:hover,
.tpl-flux 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-flux .rank-type-tab,
.tpl-flux .rank-mode-tab,
.tpl-flux .rank-cat-tab,
.tpl-flux .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-flux #hero-section .rank-type-tab[class*="from-orange-500"],
.tpl-flux #hero-section .rank-type-tab[class*="text-gray-900"],
.tpl-flux #hero-section .rank-mode-tab[class*="from-orange-500"],
.tpl-flux #hero-section .rank-mode-tab[class*="text-gray-900"],
.tpl-flux #hero-section .rank-cat-tab[class*="from-orange-500"],
.tpl-flux #hero-section .rank-cat-tab[class*="from-teal-500"],
.tpl-flux #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-flux #hero-section .rank-type-tab[class*="from-orange-500"]:hover,
.tpl-flux #hero-section .rank-type-tab[class*="text-gray-900"]:hover,
.tpl-flux #hero-section .rank-mode-tab[class*="from-orange-500"]:hover,
.tpl-flux #hero-section .rank-mode-tab[class*="text-gray-900"]:hover,
.tpl-flux #hero-section .rank-cat-tab[class*="from-orange-500"]:hover,
.tpl-flux #hero-section .rank-cat-tab[class*="from-teal-500"]:hover,
.tpl-flux #hero-section .update-cat-tag[class*="from-orange-500"]:hover {
  box-shadow: 0 8px 24px rgba(34, 211, 238, .45) !important;
}

/* 鏈€変腑鎬侊細涓嶅惈閫変腑鏍囧織 鈫?鐜荤拑鍗婇€忔槑 */
.tpl-flux .rank-type-tab:not([class*="from-orange-500"]):not([class*="text-gray-900"]),
.tpl-flux .rank-mode-tab:not([class*="from-orange-500"]):not([class*="text-gray-900"]),
.tpl-flux .rank-cat-tab:not([class*="from-orange-500"]):not([class*="from-teal-500"]),
.tpl-flux .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-flux .rank-type-tab:not([class*="from-orange-500"]):not([class*="text-gray-900"]):hover,
.tpl-flux .rank-mode-tab:not([class*="from-orange-500"]):not([class*="text-gray-900"]):hover,
.tpl-flux .rank-cat-tab:not([class*="from-orange-500"]):not([class*="from-teal-500"]):hover,
.tpl-flux .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-flux .rank-medal-gold { background: linear-gradient(135deg, #FCD34D, #F59E0B) !important; }
.tpl-flux .rank-medal-silver { background: linear-gradient(135deg, #E5E7EB, #9CA3AF) !important; }
.tpl-flux .rank-medal-bronze { background: linear-gradient(135deg, #FCD9B6, #D97706) !important; }

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

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

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

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

/* ============ 14b. FLUX 移动端性能优化（<768px） ============ */
/* 不删效果，仅降级：降低 blur/saturate/blend/vignette 开销，保留视觉近似 */
@media (max-width: 767.98px) {
  /* aurora 进一步降模糊半径，减少 GPU 合成开销 */
  .tpl-flux .flux-aurora { filter: blur(28px); }
  /* fixed 背景在 iOS 移动端触发频繁重绘，改 scroll */
  .tpl-flux body { background-attachment: scroll; }
  /* glass-card 降 blur 14→6px、saturate 130→108%，保留毛玻璃质感 */
  .tpl-flux .glass-card {
    backdrop-filter: blur(6px) saturate(108%);
    -webkit-backdrop-filter: blur(6px) saturate(108%);
  }
  /* 通用白底卡片同降 */
  .tpl-flux main .bg-white,
  .tpl-flux main [class*="bg-\\[1e293b\\]"],
  .tpl-flux main [class*="bg-\\[\\#1e293b\\]"] {
    backdrop-filter: blur(6px) saturate(108%);
    -webkit-backdrop-filter: blur(6px) saturate(108%);
  }
  /* 登录悬浮卡降 blur */
  .tpl-flux .float-card { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  /* 扫描线移除 mix-blend-mode（全屏混合模式移动端极耗 GPU），保留视觉用低 opacity */
  .tpl-flux .flux-scanline { mix-blend-mode: normal; opacity: .15; }
  /* vignette 降 inset 阴影扩散范围 */
  .tpl-flux .flux-vignette { box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, .4); }
  .tpl-flux:not(.dark):not(.theme-dark) .flux-vignette { box-shadow: inset 0 0 100px 16px rgba(15, 23, 42, .04); }
  /* 入场动画缩短 .6→.3s */
  .tpl-flux .flux-reveal { transition: opacity .3s cubic-bezier(.2,.7,.2,1), transform .3s cubic-bezier(.2,.7,.2,1); }
  /* 卡片 hover box-shadow 降级（移动端无真正 hover，减少合成层重建） */
  .tpl-flux main [class*="rounded-2xl"]:hover,
  .tpl-flux 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-flux main button[class*="from-orange-500"][class*="text-white"],
  .tpl-flux main a[class*="from-orange-500"][class*="text-white"],
  .tpl-flux main button[class*="from-amber-400"][class*="text-white"],
  .tpl-flux main a[class*="from-amber-400"][class*="text-white"],
  .tpl-flux main button[class*="from-teal-500"][class*="text-white"],
  .tpl-flux main a[class*="from-teal-500"][class*="text-white"],
  .tpl-flux main button[class*="bg-teal-500"][class*="text-white"],
  .tpl-flux main a[class*="bg-teal-500"][class*="text-white"],
  .tpl-flux main .market-pc-btn.is-active,
  .tpl-flux main .lib-tab-active { transform: none; }
  /* Tailwind 装饰光晕 blur-3xl/blur-2xl 降模糊半径（64px→20px / 40px→14px），保留光晕质感 */
  .tpl-flux .blur-3xl { filter: blur(20px); }
  .tpl-flux .blur-2xl { filter: blur(14px); }
  .tpl-flux .blur-xl { filter: blur(10px); }
  /* Tailwind backdrop-blur 系列降级（xl:24→6 / md:12→6 / sm:4→4） */
  .tpl-flux .backdrop-blur-xl,
  .tpl-flux .backdrop-blur-2xl { backdrop-filter: blur(6px) saturate(108%); -webkit-backdrop-filter: blur(6px) saturate(108%); }
  .tpl-flux .backdrop-blur-md { backdrop-filter: blur(6px) saturate(108%); -webkit-backdrop-filter: blur(6px) saturate(108%); }
  .tpl-flux .backdrop-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  .tpl-flux .backdrop-blur { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
  /* content-visibility: 跳过屏幕外渲染，大幅减少武器库/改枪码页初始合成开销 */
  .tpl-flux #weaponStrip { content-visibility: auto; contain-intrinsic-size: auto 60vh; }
  .tpl-flux main .grid.lg\:grid-cols-3 { content-visibility: auto; contain-intrinsic-size: auto 800px; }
}
@media (min-width: 1280px) {
  .tpl-flux #hero-section .mx-auto { max-width: 80rem !important; }

}

/* ============ 15. weapons.php 鐗规畩鏍峰紡淇 ============ */
/* 纭繚鐜舰鍥炬暟鍊煎眳涓?*/
body.tpl-flux .gauge-value,
.tpl-flux .gauge-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
/* 纭繚姝﹀櫒澶村儚鏂囧瓧灞呬腑 */
body.tpl-flux #hero-section .w-20.h-20,
body.tpl-flux #hero-section .w-10.h-10,
body.tpl-flux .weapon-card-link .w-8.h-8,
.tpl-flux #hero-section .w-20.h-20,
.tpl-flux #hero-section .w-10.h-10,
.tpl-flux .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-flux:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] .text-white,
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"][class*="text-white"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] .text-white,
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"][class*="text-white"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] .text-white,
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"][class*="text-white"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] .text-white,
.tpl-flux:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"][class*="text-white"],
.tpl-flux:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] .text-white,
.tpl-flux:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"][class*="text-white"],
.tpl-flux:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"] .text-white,
.tpl-flux:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"][class*="text-white"] {
  color: #ffffff !important;
}

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

/* 17.3 深色背景容器内的 svg[stroke="#fff"] 恢复白色描边 */
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] svg[stroke="#fff"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] svg[stroke="#fff"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] svg[stroke="#fff"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] svg[stroke="#fff"],
.tpl-flux:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] svg[stroke="#fff"],
.tpl-flux: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-flux:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] svg[fill="white"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] svg[fill="white"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] svg[fill="white"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] svg[fill="white"],
.tpl-flux:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] svg[fill="white"],
.tpl-flux:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8b5cf6"] svg[fill="white"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#0FA39C]"] svg[fill="#fff"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#E56A18]"] svg[fill="#fff"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="from-[#8844DD]"] svg[fill="#fff"],
.tpl-flux:not(.dark):not(.theme-dark) [class*="bg-[#0A8580]"] svg[fill="#fff"],
.tpl-flux:not(.dark):not(.theme-dark) [style*="linear-gradient(135deg,#8844DD,#7338CC"] svg[fill="#fff"],
.tpl-flux: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-flux main button[class*="from-orange-500"][class*="text-white"],
.dark .tpl-flux main a[class*="from-orange-500"][class*="text-white"],
.dark .tpl-flux main button[class*="from-amber-400"][class*="text-white"],
.dark .tpl-flux main a[class*="from-amber-400"][class*="text-white"],
.dark .tpl-flux main button[class*="from-teal-500"][class*="text-white"],
.dark .tpl-flux main a[class*="from-teal-500"][class*="text-white"],
.dark .tpl-flux main button[class*="bg-teal-500"][class*="text-white"],
.dark .tpl-flux main a[class*="bg-teal-500"][class*="text-white"],
.dark .tpl-flux main .market-pc-btn.is-active,
.dark .tpl-flux main .lib-tab-active,
.dark .tpl-flux main [class*="from-orange-600"][class*="to-amber-600"],
.dark .tpl-flux main [class*="from-amber-400"][class*="to-orange-400"],
.dark .tpl-flux main [class*="bg-teal-500"]:not([class*="bg-teal-500/"]),
.dark .tpl-flux main [class*="bg-cyan-500"]:not([class*="bg-cyan-500/"]),
.dark .tpl-flux .aurora-btn-primary,
.dark .tpl-flux .daily-password-copy,
.dark .tpl-flux #hero-section [class*="from-orange-600"],
.dark .tpl-flux #hero-section [class*="bg-orange-500"][class*="text-white"],
.dark .tpl-flux #hero-section [class*="bg-amber-400"][class*="text-white"],
.dark .tpl-flux #hero-section .rank-type-tab[class*="from-orange-500"],
.dark .tpl-flux #hero-section .rank-type-tab[class*="text-gray-900"],
.dark .tpl-flux #hero-section .rank-mode-tab[class*="from-orange-500"],
.dark .tpl-flux #hero-section .rank-mode-tab[class*="text-gray-900"],
.dark .tpl-flux #hero-section .rank-cat-tab[class*="from-orange-500"],
.dark .tpl-flux #hero-section .rank-cat-tab[class*="from-teal-500"],
.dark .tpl-flux #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-flux main button[class*="from-orange-500"][class*="text-white"]:hover,
.dark .tpl-flux main a[class*="from-orange-500"][class*="text-white"]:hover,
.dark .tpl-flux main button[class*="from-teal-500"][class*="text-white"]:hover,
.dark .tpl-flux main a[class*="from-teal-500"][class*="text-white"]:hover,
.dark .tpl-flux main button[class*="bg-teal-500"][class*="text-white"]:hover,
.dark .tpl-flux .aurora-btn-primary:hover,
.dark .tpl-flux .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-flux #aiLoadoutForm svg[stroke="currentColor"] {
  stroke: var(--flux-text) !important;
}

/* 19.2 about.php 核心功能图标容器（w-12 h-12，仅 about.php 使用这些渐变） */
/* 日间模式：teal 渐变 → 浅 teal 背景 + 深 teal 图标 */
.tpl-flux:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#0FA39C]"] {
  background: #E6F7F6 !important;
}
.tpl-flux:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#0FA39C]"] svg[stroke="white"] {
  stroke: #0A8580 !important;
}
/* 日间模式：orange 渐变 → 浅 orange 背景 + 深 orange 图标 */
.tpl-flux:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#E56A18]"] {
  background: #FFF4E6 !important;
}
.tpl-flux:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#E56A18]"] svg[stroke="white"] {
  stroke: #C95A10 !important;
}
/* 日间模式：violet 渐变 → 浅 violet 背景 + 深 violet 图标 */
.tpl-flux:not(.dark):not(.theme-dark) .w-12.h-12[class*="from-[#8844DD]"] {
  background: #F3EEFF !important;
}
.tpl-flux: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-flux:not(.dark):not(.theme-dark) .w-16.h-16[class*="from-[#0FA39C]"] {
  background: #E6F7F6 !important;
}
.tpl-flux:not(.dark):not(.theme-dark) .w-16.h-16[class*="from-[#0FA39C]"] .text-white {
  color: #0A8580 !important;
}
.tpl-flux:not(.dark):not(.theme-dark) .w-16.h-16[class*="from-[#E56A18]"] {
  background: #FFF4E6 !important;
}
.tpl-flux: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-flux:not(.dark):not(.theme-dark) .w-20.h-20[class*="from-[#E56A18]"] {
  background: #FFF4E6 !important;
}
.tpl-flux: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-flux: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-flux: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-flux:not(.nav-desktop-sidebar-drawer) .site-header {
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

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

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

/* 20.4 确保透明header内的文字/图标在hero渐变背景上清晰可见 */
.tpl-flux: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-flux:not(.nav-desktop-sidebar-drawer) .site-header .site-brand-name,
.tpl-flux.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-flux:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item {
  color: #334155 !important;
}
.tpl-flux:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item:hover {
  background: rgba(255,255,255,.6) !important;
}
.dark.tpl-flux:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item,
.tpl-flux.dark:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item {
  color: #CBD5E1 !important;
}
.dark.tpl-flux:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item:hover,
.tpl-flux.dark:not(.nav-desktop-sidebar-drawer) .site-header .nav-link-item:hover {
  background: rgba(15,23,42,.5) !important;
}

/* 20.6 header内按钮在透明背景上的可见性 */
.tpl-flux:not(.nav-desktop-sidebar-drawer) .site-header .header-action-link {
  color: #475569 !important;
}
.tpl-flux:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle {
  color: #475569 !important;
  background: rgba(255,255,255,.5) !important;
}
.dark.tpl-flux:not(.nav-desktop-sidebar-drawer) .site-header .header-action-link,
.tpl-flux.dark:not(.nav-desktop-sidebar-drawer) .site-header .header-action-link,
.dark.tpl-flux:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle,
.tpl-flux.dark:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle {
  color: #94A3B8 !important;
}
.dark.tpl-flux:not(.nav-desktop-sidebar-drawer) .site-header .header-theme-toggle,
.tpl-flux.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-flux.page-home #hero-section { position: relative; }
.tpl-flux.page-home #hero-section > .flux-m7-canvas {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}

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