/* T261005-06 2026-10-05 品牌改名破缓存对齐：本文件含 T261004-01 改名后的品牌字样，引用版本对齐为 style.css?v=8.6 */
/* ================================================================
   AXIOM · style.css v4.0.0 — 单源化合并产物（保序拼接）
   来源（按加载顺序）:
     1. style.css (v3.0.3 基础 @layer tokens/components/utilities/overrides)
     2. design-upgrade-v2.css (帝国史诗 v2.0 · 无 @layer)
     3. theme-v3.css (黯金纪元 v3.1 · theme-v3-* 层)
     4. tokens-axiom-v4.css (AXIOM v4 令牌 · tokens-axiom 层)
     5. global-override.css (全局覆盖 · axiom-overrides 层)
   合并原则: 文件顺序 = 层序 = 视觉不变。原文件备份于 css/legacy/
   ================================================================ */

/* ============================================
   歌舞伎町 (KABUKICHO) - Main Stylesheet
   Design System: 帝国史诗 · 暗金纪元 v2.0
   Engine: OKLCH + color-mix + @layer
   ============================================ */

/* ===== @layer 分层架构 ===== */
@layer tokens, components, utilities, overrides;

/* ============================================
   @layer tokens — 设计令牌（单一事实来源）
   修改 --hue-gold 即可全局换色
   ============================================ */
@layer tokens {
  :root {
    /* ===== 品牌主色相（改这里=全局换色） ===== */
    --hue-gold: 80.4;
    --hue-purple: 290;
    --neutral-hue: 260;

    /* ===== 金色系（OKLCH 感知均匀） ===== */
    --gold-base-l: 78.5%;
    --gold-base-c: 0.208;
    --gold: oklch(var(--gold-base-l) var(--gold-base-c) var(--hue-gold));
    --gold-light: oklch(88% 0.16 85);
    --gold-dark: oklch(62% 0.22 72);
    --gold-muted: oklch(70% 0.10 75);
    --gold-rose: oklch(75% 0.18 65);

    /* 金色色阶 (color-mix 自动派生) */
    --gold-50:  color-mix(in oklch, var(--gold), white 90%);
    --gold-100: color-mix(in oklch, var(--gold), white 80%);
    --gold-200: color-mix(in oklch, var(--gold), white 60%);
    --gold-300: color-mix(in oklch, var(--gold), white 40%);
    --gold-400: color-mix(in oklch, var(--gold), white 20%);
    --gold-500: var(--gold);
    --gold-600: color-mix(in oklch, var(--gold), black 20%);
    --gold-700: color-mix(in oklch, var(--gold), black 40%);
    --gold-800: color-mix(in oklch, var(--gold), black 60%);
    --gold-900: color-mix(in oklch, var(--gold), black 80%);

    /* ===== 紫色系 ===== */
    --purple: oklch(55% 0.22 var(--hue-purple));
    --purple-light: oklch(70% 0.18 295);
    --purple-dark: oklch(35% 0.20 285);
    --purple-muted: oklch(65% 0.06 280);

    --purple-50:  color-mix(in oklch, var(--purple), white 90%);
    --purple-100: color-mix(in oklch, var(--purple), white 80%);
    --purple-200: color-mix(in oklch, var(--purple), white 60%);
    --purple-300: color-mix(in oklch, var(--purple), white 40%);
    --purple-400: color-mix(in oklch, var(--purple), white 20%);
    --purple-500: var(--purple);
    --purple-600: color-mix(in oklch, var(--purple), black 20%);
    --purple-700: color-mix(in oklch, var(--purple), black 40%);
    --purple-800: color-mix(in oklch, var(--purple), black 60%);
    --purple-900: color-mix(in oklch, var(--purple), black 80%);

    /* ===== 中性灰（微紫调，避免死灰） ===== */
    --neutral-0:   oklch(100% 0 0);
    --neutral-50:  oklch(96% 0.008 var(--neutral-hue));
    --neutral-100: oklch(92% 0.01 var(--neutral-hue));
    --neutral-200: oklch(83% 0.012 var(--neutral-hue));
    --neutral-300: oklch(74% 0.014 var(--neutral-hue));
    --neutral-400: oklch(65% 0.015 var(--neutral-hue));
    --neutral-500: oklch(56% 0.016 var(--neutral-hue));
    --neutral-600: oklch(46% 0.016 var(--neutral-hue));
    --neutral-700: oklch(36% 0.015 var(--neutral-hue));
    --neutral-800: oklch(24% 0.014 var(--neutral-hue));
    --neutral-900: oklch(14% 0.015 var(--neutral-hue));
    --neutral-950: oklch(8% 0.02 var(--neutral-hue));

    /* ===== 语义化功能色 ===== */
    --color-success-base: oklch(72% 0.18 145);
    --color-success-soft: oklch(85% 0.10 145 / 0.15);
    --color-success-strong: oklch(55% 0.22 140);
    --color-warning-base: oklch(80% 0.18 70);
    --color-warning-soft: oklch(90% 0.12 70 / 0.12);
    --color-error-base: oklch(62% 0.22 25);
    --color-error-strong: oklch(45% 0.26 20);
    --color-info-base: oklch(70% 0.15 250);
    --color-red-orange: oklch(62% 0.22 25);
    --color-ice-blue: oklch(75% 0.15 230);

    /* ===== 背景层级（3D 空间感） ===== */
    --bg-app: var(--neutral-950);
    --bg-surface-1: var(--neutral-900);
    --bg-surface-2: var(--neutral-800);
    --bg-surface-3: oklch(22% 0.03 var(--hue-purple));

    /* 毛玻璃（紫调半透） */
    --bg-glass-default: oklch(30% 0.04 var(--hue-purple) / 0.25);
    --bg-glass-hover: oklch(40% 0.06 var(--hue-purple) / 0.35);
    --bg-glass-border: oklch(70% 0.06 var(--hue-purple) / 0.15);

    /* 输入框 */
    --input-bg: oklch(18% 0.02 var(--hue-purple) / 0.6);
    --input-border: oklch(50% 0.04 var(--hue-purple) / 0.4);
    --input-border-focus: var(--gold-400);
    --input-ring: oklch(78.5% 0.208 var(--hue-gold) / 0.3);

    /* ===== 文本层级 ===== */
    --text-headline: oklch(98% 0.002 var(--neutral-hue));
    --text-body: oklch(88% 0.01 var(--neutral-hue));
    --text-subtle: oklch(70% 0.015 var(--neutral-hue));
    --text-disabled: oklch(50% 0.01 var(--neutral-hue));
    --text-on-gold: var(--neutral-950);
    --text-on-glass: var(--neutral-50);
    --text-gold: var(--gold);
    --text-rose: var(--gold-rose);

    /* ===== 交互状态令牌 ===== */
    --btn-gold-bg: var(--gold);
    --btn-gold-hover: oklch(88% 0.22 var(--hue-gold));
    --btn-gold-active: oklch(72% 0.26 var(--hue-gold));
    --btn-gold-disabled: oklch(60% 0.08 var(--hue-gold));
    --btn-gold-text: var(--neutral-950);
    --btn-gold-text-disabled: var(--neutral-600);

    --btn-glass-bg: var(--bg-glass-default);
    --btn-glass-hover: var(--bg-glass-hover);
    --btn-glass-border: var(--bg-glass-border);
    --btn-glass-text: var(--text-body);

    --state-focus-ring: var(--gold);
    --state-disabled-opacity: 0.4;
    --state-disabled-grayscale: 0.6;

    /* ===== 排版体系 ===== */
    --font-sans-sc: 'Noto Sans SC', '思源黑体', 'Source Han Sans SC',
                    'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-display: 'Cinzel Decorative', 'Georgia', serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-heading: 'Cinzel Decorative', 'Georgia', serif;
    --font-body: var(--font-sans-sc);

    /* 字号层级 */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;
    --text-4xl:  2.5rem;
    --text-5xl:  3.5rem;
    --text-6xl:  5rem;

    --leading-tight: 1.1;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    /* ===== 阴影系统 ===== */
    --shadow-glass:
      inset 0 1px 0 oklch(100% 0 0 / 0.05),
      inset 0 -1px 0 oklch(0% 0 0 / 0.3),
      0 12px 40px oklch(0% 0 0 / 0.25);
    --shadow-glow-gold: 0 0 40px 10px oklch(85% 0.25 var(--hue-gold) / 0.3);
    --shadow-heavy: 0 20px 60px oklch(0% 0 0 / 0.4);

    /* ===== 动画曲线 ===== */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ===== 旧变量向后兼容映射（旧代码零修改即可用新系统） ===== */
:root {
    --bg-primary: var(--bg-app);
    --bg-surface: var(--bg-surface-2);
    --bg-surface-hover: var(--bg-surface-3);
    --bg-card: var(--bg-surface-2);
    --bg-input: var(--input-bg);
    --bg-nav: oklch(8% 0.02 var(--neutral-hue) / 0.92);
    --bg-footer: var(--neutral-900);
    --bg-dropdown: var(--bg-surface-2);
    --bg-modal-overlay: oklch(0% 0 0 / 0.75);

    --text-primary: var(--text-body);
    --text-secondary: var(--text-subtle);
    --text-muted: var(--text-disabled);
    --text-gold: var(--gold);
    --text-gold-light: var(--gold-light);
    --text-white: var(--text-headline);

    --gold: oklch(var(--gold-base-l) var(--gold-base-c) var(--hue-gold));
    --gold-dark: var(--gold-700);
    --gold-light: var(--gold-200);
    --gold-gradient: linear-gradient(135deg, var(--gold-200), var(--gold-600));

    --border-color: var(--neutral-700);
    --border-gold: oklch(78.5% 0.208 var(--hue-gold) / 0.3);
    --border-gold-strong: oklch(78.5% 0.208 var(--hue-gold) / 0.6);
    --divider: var(--neutral-700);

    --btn-primary-bg: var(--btn-gold-bg);
    --btn-primary-text: var(--btn-gold-text);
    --btn-primary-hover: var(--btn-gold-hover);
    --btn-secondary-border: var(--gold);
    --btn-secondary-text: var(--gold);
    --btn-secondary-hover-bg: oklch(78.5% 0.208 var(--hue-gold) / 0.1);
    --btn-danger-bg: var(--color-error-base);
    --btn-danger-hover: var(--color-error-strong);

    --status-online: var(--color-success-base);
    --status-maintenance: var(--color-warning-base);
    --status-offline: var(--color-error-base);

    --font-body: var(--font-sans-sc);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50px;

    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.3);
    --shadow-md: 0 4px 12px oklch(0% 0 0 / 0.4);
    --shadow-lg: 0 8px 32px oklch(0% 0 0 / 0.5);
    --shadow-gold: 0 4px 20px oklch(78.5% 0.208 var(--hue-gold) / 0.2);
    --shadow-glow: 0 0 20px oklch(78.5% 0.208 var(--hue-gold) / 0.15);

    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.35s ease;

    --nav-height: 70px;
    --container-max: 1200px;
    --font-size-xs: var(--text-xs);
    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-lg: var(--text-lg);
    --font-size-xl: var(--text-xl);
    --font-size-2xl: var(--text-2xl);
    --font-size-3xl: var(--text-3xl);
    --font-size-4xl: var(--text-4xl);
}

/* ===== oklch 浏览器降级（老浏览器回退到 hex） ===== */
@supports not (color: oklch(0% 0 0)) {
  :root {
    /* 金/紫色系 */
    --gold: #F5B342;
    --gold-light: #FAD98B;
    --gold-dark: #C4882A;
    --gold-400: #E8A93A;
    --hue-gold: 50;
    --purple: #7A4B9A;
    --hue-purple: 270;
    --color-red-orange: #FF4500;
    --color-ice-blue: #4FC3F7;

    /* 中性色 */
    --neutral-950: #09090B;
    --neutral-900: #141418;
    --neutral-800: #1E1E24;
    --neutral-50: #F5F5F7;
    --neutral-hue: 260;

    /* 背景层级 */
    --bg-app: #0A0B0D;
    --bg-primary: #0A0B0D;
    --bg-surface-1: #141418;
    --bg-surface-2: #1E1E24;
    --bg-surface-3: #1A1620;
    --bg-surface: #1E1E24;
    --bg-card: #1E1E24;
    --bg-footer: #141418;
    --bg-nav: rgba(10, 11, 13, 0.92);
    --bg-dropdown: #1E1E24;
    --bg-modal-overlay: rgba(0, 0, 0, 0.75);

    /* 毛玻璃 */
    --bg-glass-default: rgba(30, 25, 45, 0.6);
    --bg-glass-hover: rgba(50, 40, 70, 0.7);
    --bg-glass-border: rgba(245, 179, 66, 0.15);

    /* 输入框 */
    --input-bg: rgba(20, 15, 35, 0.6);
    --input-border: rgba(100, 80, 140, 0.4);
    --input-border-focus: #E8A93A;
    --input-ring: rgba(245, 179, 66, 0.3);

    /* 文本层级 */
    --text-headline: #FAFAFA;
    --text-primary: #F0F0F0;
    --text-body: #D0D0D8;
    --text-secondary: #A0A0A8;
    --text-subtle: #787880;
    --text-disabled: #555560;
    --text-on-gold: #09090B;
    --text-on-glass: #F5F5F7;
    --text-gold: #F5B342;
    --text-muted: #888;

    /* 边框 */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-gold: rgba(245, 179, 66, 0.3);

    /* 功能色 */
    --color-error-base: #E5484D;
    --color-error-strong: #B42318;
    --color-info-base: #2E90FA;
    --color-success: #32D583;

    /* 阴影 */
    --shadow-gold: 0 0 20px rgba(245, 179, 66, 0.3);
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
}

/* ============================================
   1. RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #0A0B0D;
    background-color: var(--bg-primary);
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: #0A0B0D;
    background-color: var(--bg-primary);
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

a {
    color: var(--gold);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover {
    color: var(--gold-light);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul, ol {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-white);
    line-height: 1.3;
    font-weight: 700;
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }

p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* ============================================
   2. LAYOUT & CONTAINER
   ============================================ */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.main-content {
    min-height: calc(100vh - var(--nav-height) - 250px);
    padding-top: var(--nav-height);
}

/* ============================================
   3. TYPOGRAPHY HELPERS
   ============================================ */
.gold {
    color: var(--gold);
}

.text-center {
    text-align: center;
}

.text-gold {
    color: var(--gold);
}

.text-muted {
    color: var(--text-muted);
}

/* ============================================
   4. NAVIGATION
   ============================================ */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--bg-nav);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(245, 179, 66, 0.1);
    height: var(--nav-height);
    transition: background var(--transition-normal);
}

.navbar.scrolled {
    background: rgba(10, 11, 13, 0.98);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-logo:hover {
    color: inherit;
}

.nav-logo-icon {
    position: relative;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    transition: filter 0.6s ease;
    filter: drop-shadow(0 0 12px rgba(245, 179, 66, 0.18));
    transform-origin: center center;
}
.nav-logo:hover .nav-logo-icon {
    animation: mangoSpin 6s linear infinite;
    filter: drop-shadow(0 0 28px rgba(245, 179, 66, 0.45));
}
.nav-logo-icon svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.nav-logo-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.nav-logo-main {
    font-family: 'Playfair Display', var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    background: linear-gradient(145deg, #F2D68A 0%, #D4A847 40%, #B8893A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-logo-sub {
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
    transform: translate(4px, 3px);
}
.nav-logo-sub span {
    color: var(--gold-dark);
    font-weight: 500;
}

@keyframes mangoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes mangoPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.nav-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-primary);
    padding: 8px;
    background: none;
    border: none;
    user-select: none;
    z-index: 1001;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.nav-menu > li {
    position: relative;
}

.nav-menu > li > a {
    display: block;
    padding: 8px 16px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    letter-spacing: 0.5px;
    text-decoration: none;
}

.nav-menu > li > a:hover {
    color: var(--text-white);
    background: rgba(245, 179, 66, 0.08);
}

.nav-menu > li > a.active {
    color: var(--gold);
    background: rgba(245, 179, 66, 0.1);
}

/* T260926-02 2026-09-26 导航「短标签」基态：默认隐藏简称 span（仅 769-1024px 平板区间启用，见 responsive-pro.css） */
.nav-mini { display: none; }

.nav-menu > li > a.btn-nav-solid {
    background: var(--gold-gradient);
    color: var(--btn-primary-text);
    font-weight: 600;
    padding: 8px 20px;
    border-radius: var(--radius-round);
    margin-left: 8px;
}
.nav-menu > li > a.btn-nav-solid:hover {
    box-shadow: var(--shadow-glow);
    transform: translateY(-1px);
}

/* T260926-03 2026-09-26 导航次级按钮（描边金胶囊「注册」）：主胶囊改由「登录」承担（.btn-nav-solid），
   两级按钮「同形不同重」—— 实心=主操作、描边=次操作；文字/描边走 --gold 令牌，亮色（羊皮纸）自动转深铜金。
   背景：首页 hero 已有「立即注册」大按钮，导航再给实心胶囊属重复强调；而回访玩家高频的「登录」原仅纯文字。 */
.nav-menu > li > a.btn-nav-ghost {
    background: transparent;
    color: var(--gold, #f5b342);
    border: 1px solid rgba(245, 179, 66, 0.45);
    font-weight: 600;
    padding: 8px 20px;
    border-radius: var(--radius-round);
    margin-left: 8px;
    box-shadow: none;
}
.nav-menu > li > a.btn-nav-ghost:hover {
    background: rgba(245, 179, 66, 0.1);
    border-color: rgba(245, 179, 66, 0.8);
    box-shadow: 0 0 14px rgba(245, 179, 66, 0.22);
    transform: translateY(-1px);
}

/* ----- Dropdown Menu ----- */
.nav-dropdown {
    position: relative;
}

.nav-dropdown > a {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--bg-dropdown);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 0;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.nav-dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
    text-decoration: none;
}

.dropdown-menu a:hover {
    color: var(--text-white);
    background: rgba(245, 179, 66, 0.08);
}

.dropdown-divider {
    height: 1px;
    background: var(--divider);
    margin: 4px 0;
}

/* ============================================
   5. FOOTER
   ============================================ */
.footer {
    background: var(--bg-footer);
    border-top: 1px solid var(--border-color);
    padding: 60px 0 30px;
    margin-top: auto;
}

.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

.footer-brand h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 12px;
    letter-spacing: 2px;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.footer-links h4 {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 16px;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
    text-decoration: none;
}
.footer-links a:hover {
    color: var(--gold);
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.footer-bottom .fb-copy {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin-bottom: 0;
    flex: 0 0 auto;
}

/* ========== v11.1 公测倒计时 · 极简发光流 ========== */
.fb-phase {
    display: inline-flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-top: 7px;
}
.fb-label {
    font-size: 0.46rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: var(--gold);
    opacity: 0.55;
    font-family: var(--font-sans, 'DM Sans', 'Noto Sans SC', sans-serif);
    white-space: nowrap;
    text-shadow: none;
}
.fb-nums {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: nowrap;
    white-space: nowrap;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.fb-num {
    display: inline-flex;
    align-items: baseline;
    position: relative;
}
.fb-dig {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 2px rgba(212,160,41,0.6),
        0 0 6px rgba(212,160,41,0.35),
        0 0 14px rgba(212,160,41,0.18);
    font-variant-numeric: tabular-nums;
}
.fb-sup {
    font-size: 0.32rem;
    font-weight: 600;
    color: var(--text-muted);
    line-height: 1;
    margin-left: 1px;
    margin-bottom: 2px;
    letter-spacing: 0.3px;
    opacity: 0.6;
    text-shadow: none;
}
.fb-sep {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--gold);
    opacity: 0.55;
    line-height: 1;
    padding: 0 2px;
    animation: fbColonBlink 1s step-end infinite;
    text-shadow: 0 0 4px rgba(212,160,41,0.3);
}
@keyframes fbColonBlink {
    0%, 50%   { opacity: 0.55; text-shadow: 0 0 4px rgba(212,160,41,0.3); }
    51%, 100% { opacity: 0.15; text-shadow: none; }
}
.fb-phase.is-finished .fb-nums { display: none; }
.fb-phase.is-finished::after {
    content: '公测已开启';
    font-size: 0.58rem;
    color: var(--gold);
    font-weight: 600;
}
/* 响应式：窄屏紧凑化 */
@media (max-width: 640px) {
    .fb-label { display: none; }
    .fb-dig { font-size: 0.62rem; }
    .fb-sup { font-size: 0.28rem; }
    .fb-sep { font-size: 0.52rem; padding: 0 1px; }
    .fb-phase { gap: 2px; }
    .footer-bottom { flex-direction: column; gap: 6px; }
}

.footer-server-time {
    flex: 0 0 auto;
}

.news-list {
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.news-list ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.news-list li {
    border-bottom: 1px solid var(--border-color);
    transition: background var(--transition-fast);
}
.news-list li:last-child {
    border-bottom: none;
}
.news-list li:hover {
    background: var(--bg-surface-hover);
}

.news-list .news {
    display: grid;
    grid-template-columns: 80px 1fr 100px;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    text-decoration: none;
    color: inherit;
}

/* ============================================
   7. PAGE HEADER (Account Pages)
   ============================================ */
.account-page {
    padding: 40px 0;
    min-height: calc(100vh - var(--nav-height) - 250px);
}

.in-page {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px 20px 0;
}

.account-page .in-page {
    padding-top: 0;
}

.page-top {
    margin-bottom: 30px;
}

.page-top h1 {
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-white);
    position: relative;
    padding-bottom: 12px;
}
.page-top h1::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--gold-gradient);
    border-radius: 2px;
}

/* ----- Page Title / Subtitle ----- */
.page-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-4xl);
    color: var(--text-white);
    text-align: center;
    margin-bottom: 8px;
}

.page-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-lg);
    margin-bottom: 40px;
}

/* ============================================
   9. PAGE BOX / CONTENT
   ============================================ */
.page-content {
    padding-top: 40px;
    margin-bottom: 40px;
}

.page-view {
    padding: 40px 20px 0;
    max-width: var(--container-max);
    margin: 0 auto;
}

.page-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.page-box-content {
    padding: 24px;
}

/* ============================================
   10. TABLES
   ============================================ */
.page-table-04 {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.page-table-04 thead {
    background: rgba(245, 179, 66, 0.05);
}

.page-table-04 th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--gold);
    border-bottom: 2px solid var(--border-gold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-table-04 td {
    padding: 12px 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.page-table-04 tbody tr {
    transition: background var(--transition-fast);
}

.page-table-04 tbody tr:hover {
    background: rgba(245, 179, 66, 0.03);
}

.page-table-04 tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================
   11. BUTTONS
   ============================================ */
/* Base button (must come before variants) */
.btn,
.page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}

/* Primary / Gold */
.page-btn,
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #F5B342 0%, #E08A2A 100%);
    color: #0A0B0D;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: var(--radius-round);
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-glow);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}
.page-btn:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #E08A2A 0%, #c98a2e 100%);
    color: #0A0B0D;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 179, 66, 0.4);
}
.page-btn:active,
.btn-primary:active {
    transform: translateY(0);
}

/* Secondary / Outline */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    background: transparent;
    color: var(--text-primary);
    font-weight: 500;
    font-size: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-round);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Danger */
.btn-danger {
    background: var(--btn-danger-bg);
    color: #fff;
    border: none;
}
.btn-danger:hover {
    background: var(--btn-danger-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

/* Disabled */
.page-btn:disabled,
.page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Button sizes */
.btn-sm {
    padding: 8px 18px;
    font-size: 13px;
}

.btn-xs {
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500;
    border-radius: 6px;
}

.btn-lg {
    padding: 16px 36px;
    font-size: 16px;
}

/* 表格操作按钮组：强制同行不换行 */
.action-btns {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.action-btns .page-btn {
    flex-shrink: 0;
}
.action-btns-cell {
    width: 120px;
    min-width: 100px;
}

/* ============================================
   12. FORMS
   ============================================ */
.input-field,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    padding: 14px 18px;
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    outline: none;
}

.input-field:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="datetime-local"]:focus,
select:focus,
textarea:focus {
    border-color: var(--border-gold-strong);
    box-shadow: 0 0 0 3px rgba(245, 179, 66, 0.1);
}

.input-field::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted);
}

select,
.input-field[type="select"] {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    cursor: pointer;
}

select option {
    background: var(--bg-surface);
    color: var(--text-primary);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* Checkbox / Radio */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--gold);
    margin-right: 6px;
}

#ca-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

#ca-check a {
    color: var(--gold);
    text-decoration: underline;
}

/* ============================================
   14. ALERTS (Success / Danger)
   ============================================ */
.alert-danger {
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #f8a5a5;
    font-size: var(--font-size-sm);
}

.alert-danger .info {
    display: block;
}

.alert-success {
    background: rgba(40, 167, 69, 0.1);
    border: 1px solid rgba(40, 167, 69, 0.3);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 16px;
    color: #a5d6a7;
    font-size: var(--font-size-sm);
}

.download-box {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all var(--transition-normal);
}
.download-box:hover {
    border-color: var(--border-gold);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.download-box img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.download-box span {
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
}

/* ============================================
   16. DONATE / RECHARGE PAGE
   ============================================ */
.donate .page-box-content {
    padding: 24px;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   18. RANKING TABS
   ============================================ */
.ranking-page {
    padding: 40px 20px 0;
    max-width: var(--container-max);
    margin: 0 auto;
}

.ranking-container {
    width: 100%;
}

.ranking-header {
    margin-bottom: 24px;
}

.ranking-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-white);
}

.ranking-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 4px;
    border: 1px solid var(--border-color);
}

.ranking-tab {
    flex: 1;
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}
.ranking-tab:hover {
    color: var(--text-white);
    background: rgba(245, 179, 66, 0.05);
}
.ranking-tab.active {
    color: var(--gold);
    background: rgba(245, 179, 66, 0.1);
    font-weight: 600;
}

.ranking-content {
    display: none;
}
.ranking-content.active {
    display: block;
}

/* ============================================
   19. ADMIN TABS
   ============================================ */
.admin-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 4px;
    border: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.admin-tab {
    padding: 10px 20px;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.admin-tab:hover {
    color: var(--text-white);
    background: rgba(245, 179, 66, 0.05);
}
.admin-tab.active {
    color: var(--gold);
    background: rgba(245, 179, 66, 0.1);
    font-weight: 600;
}

.admin-content {
    display: none;
}
.admin-content.active {
    display: block;
}

/* ============================================
   20. FAQ ACCORDION
   ============================================ */
.faq-item {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}
.faq-item:hover {
    border-color: var(--border-gold);
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}
.faq-question:hover {
    background: rgba(245, 179, 66, 0.03);
}

/* v35.3 2026-09-20 FAQ「NEW」新增标记（首页与客服页共用；标记由 getFAQs() 的 IsNew 统一判定，满 7 天自动消失） */
.faq-question-text {
    flex: 1;
    line-height: 1.5;
}
.faq-new {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 8px;
    padding: 1px 7px 2px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    flex-shrink: 0;
    color: var(--gold-400);
    background: oklch(78.5% 0.208 var(--hue-gold) / 0.12);
    border: 1px solid oklch(78.5% 0.208 var(--hue-gold) / 0.35);
}

.faq-arrow {
    font-size: var(--font-size-sm);
    color: var(--gold);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    margin-left: 12px;
}
.faq-arrow.open {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 0 20px 16px;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
    border-top: 1px solid var(--border-color);
    margin-top: 0;
    padding-top: 16px;
}

@keyframes pulse-yellow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================
   22. BADGES
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    border-radius: var(--radius-round);
    line-height: 1.2;
    white-space: nowrap;
}

.badge-gold {
    background: var(--gold-gradient);
    color: var(--btn-primary-text);
}

.badge-danger {
    background: var(--btn-danger-bg);
    color: #fff;
}

.badge-success {
    background: var(--status-online);
    color: #fff;
}

.badge-info {
    background: #17a2b8;
    color: #fff;
}

.badge-warning {
    background: var(--status-maintenance);
    color: #1a1a1a;
}

/* First Recharge Badge */
.badge-first-recharge {
    background: var(--gold-gradient);
    color: var(--btn-primary-text);
    padding: 6px 14px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    border-radius: var(--radius-round);
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 12px rgba(245, 179, 66, 0.3);
    animation: badge-glow 2s ease-in-out infinite;
}

@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 12px rgba(245, 179, 66, 0.3); }
    50% { box-shadow: 0 0 24px rgba(245, 179, 66, 0.6); }
}

/* ============================================
   23. PAGINATION
   ============================================ */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    padding: 16px 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.pagination a:hover {
    color: var(--gold);
    border-color: var(--border-gold);
    background: rgba(245, 179, 66, 0.05);
}

.pagination .active {
    color: var(--btn-primary-text);
    background: var(--gold-gradient);
    border-color: var(--gold);
    font-weight: 600;
}

.pagination .disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   25. TOAST / NOTIFICATION
   ============================================ */
.toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 360px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: toastSlideIn 0.3s ease;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    backdrop-filter: blur(8px);
}

.toast.toast-success {
    border-left: 4px solid var(--status-online);
}

.toast.toast-error {
    border-left: 4px solid var(--status-offline);
}

.toast.toast-warning {
    border-left: 4px solid var(--status-maintenance);
}

.toast.toast-info {
    border-left: 4px solid var(--gold);
}

.toast-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0 4px;
    line-height: 1;
}
.toast-close:hover {
    color: var(--text-primary);
}

@keyframes toastSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastSlideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(40px);
    }
}

/* ============================================
   26. METHOD CARDS (Payment)
   ============================================ */
.method-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-normal);
    text-align: center;
}

.method-card:hover {
    border-color: var(--border-gold);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.method-card.selected {
    border-color: var(--gold);
    background: rgba(245, 179, 66, 0.05);
    box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.2);
}

.method-card-icon {
    font-size: 2rem;
    line-height: 1;
}

.method-card-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================
   27. PLAN CARDS (Recharge)
   ============================================ */
.plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.plan-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    text-align: center;
    transition: all var(--transition-normal);
    overflow: hidden;
}
.plan-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: linear-gradient(to bottom, rgba(245, 179, 66, 0.18) 0%, rgba(245, 179, 66, 0.08) 40%, transparent 100%);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}
.plan-card:hover {
    border-color: var(--border-gold);
    box-shadow: var(--shadow-glow);
    transform: translateY(-4px);
}
.plan-card:hover::before {
    opacity: 1;
}

.plan-card.featured {
    border-color: var(--gold);
    box-shadow: 0 0 30px rgba(245, 179, 66, 0.15);
}
.plan-card.featured::before {
    opacity: 1;
}

.plan-card-amount {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
}

.plan-card-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 16px;
}

.plan-card-price {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-white);
    margin-bottom: 8px;
}

.plan-card-bonus {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(245, 179, 66, 0.1);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-round);
    font-size: var(--font-size-xs);
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 20px;
}

.plan-card .page-btn {
    width: 100%;
}

/* ============================================
   AUTH, ACCOUNT, LANDING PAGE & UTILITY STYLES
   ============================================ */

/* Auth Container */
/* v24.2 2026-09-12 去掉 min-height:100vh（原会把页脚整块推到首屏之外、并在页脚前留出纯黑接缝），
   改为「视口 − 导航 − 页脚(355) − 页脚上外边距(60)」作为最小高度：空间够时卡片居中，页脚上提到首屏内。 */
.auth-container {
    position: relative;
    min-height: calc(100vh - var(--nav-height) - 415px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 24px 48px;
    overflow: hidden;
    /* v24.2 2026-09-12 两层极淡径向光替代原先 3% 单层渐变，打破纯黑空洞；末端自然透明，不会与页脚形成色缝 */
    background:
        radial-gradient(1100px 560px at 50% -6%, rgba(245, 179, 66, 0.11), transparent 62%),
        radial-gradient(820px 460px at 8% 112%, rgba(124, 92, 214, 0.07), transparent 62%);
}
/* v24.2 2026-09-12 织造细网格纹理（径向遮罩淡出，无硬边） */
.auth-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 44%, #000 0%, transparent 76%);
    mask-image: radial-gradient(ellipse 72% 62% at 50% 44%, #000 0%, transparent 76%);
}
.auth-container > .auth-card {
    position: relative;
    z-index: 2;
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header h1 {
    font-family: var(--font-heading);
    font-size: 28px;
    margin-bottom: 8px;
}

.auth-header p {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 0;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-block {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 8px;
}

.auth-links {
    text-align: center;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-link {
    color: var(--text-secondary);
    font-size: 14px;
    transition: color var(--transition-fast);
}

.auth-link:hover {
    color: var(--gold);
}

/* Forgot password link */
/* v24.2 2026-09-12 移除「忘记密码」的红色 danger 覆盖：与同层辅助链接统一为中性灰，避免同页两种语义色 */

/* Gender button group */
.gender-btn-group {
    display: flex;
    gap: 12px;
}

.gender-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* v24.2 2026-09-12 固定 44px 高、边框 2px→1px：与输入框/下拉框统一基线（原 padding 撑到 50px） */
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-input);
    user-select: none;
    font-family: var(--font-body);
}

.gender-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.gender-btn.active {
    border-color: var(--gold);
    background: rgba(245, 179, 66, 0.1);
    color: var(--gold);
}

/* Birthday group */
.birthday-group {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

/* Checkbox */
.form-checkbox {
    flex-direction: row;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
}

.checkbox-label a {
    color: var(--gold);
}

/* Account page */
.account-page {
    padding: 40px 0;
    min-height: calc(100vh - 70px - 250px);
}

.account-menu a.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
    background: rgba(245, 179, 66, 0.08);
}

/* Hero Section */
.hero-section {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 8vw, 6rem);
    font-weight: 900;
    letter-spacing: 8px;
    margin-bottom: 16px;
    line-height: 1.1;
}

.hero-title .gold {
    color: var(--gold);
    text-shadow: 0 0 30px rgba(245, 179, 66, 0.3);
}

.hero-subtitle {
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--text-secondary);
    font-weight: 300;
    letter-spacing: 4px;
    margin-bottom: 40px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

/* Features Section */
.features-section {
    padding: 100px 0;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 60px;
    letter-spacing: 4px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.feature-card {
    text-align: center;
    padding: 40px 24px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}

.feature-card:hover {
    border-color: rgba(245, 179, 66, 0.3);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.feature-title {
    font-size: 20px;
    margin-bottom: 12px;
    font-weight: 600;
}

.feature-desc {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* FAQ Section */
.faq-section {
    padding: 80px 0;
}

.faq-list {
    max-width: 800px;
    margin: 0 auto 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.faq-footer {
    text-align: center;
    margin-top: 32px;
}

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.download-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all var(--transition-normal);
}

.download-card:hover {
    border-color: rgba(245, 179, 66, 0.3);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

/* ============================================
   28. RESPONSIVE DESIGN
   ============================================ */

/* Tablet */
@media (max-width: 992px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }

    .plan-cards {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
    }

    .nav-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100vh;
        background: var(--bg-nav);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        flex-direction: column;
        padding: 80px 20px 20px;
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
        z-index: 1000;
        overflow-y: auto;
        gap: 0;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-menu > li {
        width: 100%;
    }

    .nav-menu > li > a {
        padding: 14px 16px;
        border-radius: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .nav-menu > li > a.btn-nav-solid,
    .nav-menu > li > a.btn-nav-ghost {
        margin-left: 0;
        margin-top: 8px;
        border-radius: var(--radius-md);
        text-align: center;
    }

    /* Mobile dropdown becomes expandable section */
    .nav-dropdown {
        position: static;
    }

    .dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 0;
        padding: 0;
        opacity: 1;
        transform: none;
    }

    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }

    .dropdown-menu a {
        padding: 12px 24px;
        font-size: var(--font-size-sm);
    }

    .hero-section {
        min-height: 70vh;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-brand h3 {
        font-size: 1.25rem;
    }

    .page-top h1 {
        font-size: 1.5rem;
    }

    .page-table-04 {
        font-size: var(--font-size-xs);
    }
    .page-table-04 th,
    .page-table-04 td {
        padding: 10px 12px;
    }

    .news-list .news {
        grid-template-columns: 70px 1fr 80px;
        padding: 12px 16px;
    }

    .plan-cards {
        grid-template-columns: 1fr;
    }

    .method-cards {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    .in-page, .main-page, .ranking-page, .support-page, .page-view {
        padding: 24px 16px 0;
    }

    .page-content {
        padding-top: 24px;
    }

    .ranking-tabs {
        flex-direction: column;
        gap: 2px;
    }

    .admin-tabs {
        flex-direction: column;
        gap: 2px;
    }

    h1 { font-size: var(--font-size-3xl); }
    h2 { font-size: var(--font-size-2xl); }
}

/* Small Mobile */
@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .page-box-content {
        padding: 16px;
    }

    .news-list .news {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

.font-bold { font-weight: 700; }

.w-full { width: 100%; }

/* ============================================
   30. SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ============================================
   31. SELECTION
   ============================================ */
::selection {
    background: rgba(245, 179, 66, 0.3);
    color: var(--text-white);
}

/* ============================================
   32. ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ============================================
   33. MANUAL RECHARGE PAGE
   ============================================ */

/* Recharge Section Divider */
.recharge-section {
    padding: 24px 0;
}
.recharge-section:first-child {
    padding-top: 0;
}
.recharge-section + .recharge-section {
    border-top: 1px solid var(--border-color);
}

.recharge-section-label {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-white);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recharge-section-icon {
    font-size: 1.25rem;
}

/* Manual Steps Indicator */
.manual-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    padding: 0 20px;
}

.manual-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.manual-step-number {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-muted);
    transition: all var(--transition-normal);
}

.manual-step.active .manual-step-number {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(245, 179, 66, 0.1);
    box-shadow: 0 0 12px rgba(245, 179, 66, 0.2);
}

.manual-step.completed .manual-step-number {
    border-color: var(--status-online);
    background: var(--status-online);
    color: #fff;
}

.manual-step-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.manual-step.active .manual-step-label {
    color: var(--gold);
}

.manual-step.completed .manual-step-label {
    color: var(--status-online);
}

.manual-step-line {
    flex: 1;
    height: 2px;
    background: var(--border-color);
    margin: 0 12px;
    margin-bottom: 28px;
    transition: background var(--transition-normal);
    max-width: 80px;
}

.manual-step-line.active {
    background: var(--gold);
}

/* Character Select */
.char-select-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.char-select-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
}

.char-select-item:hover {
    border-color: var(--border-gold);
    background: rgba(245, 179, 66, 0.03);
}

.char-select-item.selected {
    border-color: var(--gold);
    background: rgba(245, 179, 66, 0.08);
    box-shadow: 0 0 0 2px rgba(245, 179, 66, 0.15);
}

.char-select-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-white);
}

.char-select-info {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Manual Type Toggle — polished */
.manual-type-toggle {
    display: flex;
    gap: 12px;
}

.manual-type-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 16px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-input);
    transition: all 0.25s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.manual-type-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(245, 179, 66, 0.08), transparent 60%);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.manual-type-btn .manual-type-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.25s ease;
}

.manual-type-btn .manual-type-label {
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.manual-type-btn .manual-type-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    font-weight: 400;
    transition: color 0.25s ease;
}

.manual-type-btn:hover {
    border-color: rgba(245, 179, 66, 0.4);
    color: var(--text-white);
    background: rgba(245, 179, 66, 0.04);
    transform: translateY(-1px);
}

.manual-type-btn:hover::before {
    opacity: 1;
}

.manual-type-btn:hover .manual-type-icon {
    transform: scale(1.1);
}

.manual-type-btn:hover .manual-type-desc {
    color: var(--text-secondary);
}

.manual-type-btn.active {
    border-color: var(--gold);
    background: rgba(245, 179, 66, 0.08);
    color: var(--gold);
    box-shadow: 0 0 18px rgba(245, 179, 66, 0.12), inset 0 0 24px rgba(245, 179, 66, 0.04);
}

.manual-type-btn.active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(245, 179, 66, 0.15), transparent 60%);
}

.manual-type-btn.active .manual-type-icon {
    transform: scale(1.1);
}

.manual-type-btn.active .manual-type-desc {
    color: var(--gold);
}

/* Live Amount Preview Card */
.manual-amount-preview {
    background: linear-gradient(135deg, rgba(245, 179, 66, 0.06), rgba(20, 20, 42, 0.6));
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: all 0.25s ease;
}

.manual-amount-preview.has-value {
    border-color: rgba(245, 179, 66, 0.5);
    background: linear-gradient(135deg, rgba(245, 179, 66, 0.1), rgba(20, 20, 42, 0.5));
}

.manual-amount-preview-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-weight: 500;
}

.manual-amount-preview-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
    transition: color 0.25s ease;
}

.manual-amount-preview.has-value .manual-amount-preview-value {
    color: var(--gold);
}

.manual-amount-preview-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-align: right;
    line-height: 1.5;
}

/* Amount input wrapper */
.manual-amount-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.manual-amount-wrapper .currency-prefix {
    position: absolute;
    left: 16px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-muted);
    pointer-events: none;
    z-index: 1;
    transition: color 0.25s ease;
}

.manual-amount-wrapper input {
    padding-left: 44px !important;
}

.manual-amount-wrapper input:focus + .currency-prefix,
.manual-amount-wrapper:focus-within .currency-prefix {
    color: var(--gold);
}

/* Fraction row */
.manual-fraction-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.manual-fraction-row .manual-fraction-input {
    width: 180px;
    max-width: 100%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1px;
}

.manual-random-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, rgba(245, 179, 66, 0.1), rgba(245, 179, 66, 0.04));
    border: 1px solid rgba(245, 179, 66, 0.25);
    border-radius: var(--radius-md);
    color: var(--gold);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    user-select: none;
}

.manual-random-btn:hover {
    background: rgba(245, 179, 66, 0.18);
    border-color: var(--gold);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 179, 66, 0.15);
}

.manual-random-btn:active {
    transform: translateY(0);
    background: rgba(245, 179, 66, 0.22);
}

/* Order Summary */
.manual-order-summary {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    margin-bottom: 24px;
}

.manual-order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.manual-order-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.manual-order-value {
    font-size: var(--font-size-sm);
    color: var(--text-white);
    font-weight: 500;
}

/* QR Display */
.qr-display {
    text-align: center;
    margin-bottom: 24px;
}

.qr-image-container {
    display: inline-block;
    width: 220px;
    height: 220px;
    background: var(--bg-surface-2);
    padding: 8px;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-gold);
    box-shadow: var(--shadow-gold);
}

.qr-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-lg) - 4px);
    display: block;
}

/* v29.9 2026-09-14 收款码「渲染二维码」画布（后台预览 / 充值页步骤3 共用）
   ⚠️ 宽高必须 !important：inc/qrcode.min.js 会把 canvas 的 width/height 写成内联样式（原生 280px），
      类选择器压不过内联样式；票面小票里的 .axr-seal canvas 优先级更高，会按印章框尺寸覆盖 */
.qr-render-canvas {
    display: block;
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto;
    border-radius: calc(var(--radius-lg) - 4px);
    background: #fff;
}

.qr-nickname {
    margin-top: 12px;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.qr-placeholder {
    width: 200px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-input);
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    gap: 8px;
}

.qr-placeholder-icon {
    font-size: 2.5rem;
}

.qr-placeholder-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.qr-placeholder-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Payment Notice */
.manual-payment-notice {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: rgba(245, 179, 66, 0.05);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}

.notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    line-height: 1.2;
}

.notice-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Responsive: Manual Steps */
@media (max-width: 768px) {
    .manual-steps {
        padding: 0 8px;
    }
    .manual-step-line {
        max-width: 40px;
        margin: 0 6px;
    }
    .manual-step-number {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-base);
    }
    .manual-step-label {
        font-size: 10px;
    }
    .char-select-list {
        grid-template-columns: 1fr;
    }
    .manual-type-toggle {
        flex-direction: column;
    }
    .manual-amount-preview {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .manual-amount-preview-value {
        font-size: 1.25rem;
    }
    .manual-fraction-row {
        flex-direction: column;
        align-items: stretch;
    }
    .manual-fraction-row .manual-fraction-input {
        width: 100%;
    }
    .manual-random-btn {
        justify-content: center;
    }
}

/* ============================================
   34. HERO CANVAS PARTICLE SYSTEM (v2.0)
   暗黑奇幻史诗 - 全屏 Canvas 粒子背景
   ============================================ */

/* Hero Container */
.hero-container {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #0A0B0D;
}

.hero-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to top, #0A0B0D 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Canvas Particle Layer */
.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Degraded fallback: CSS gradient when JS fails */
    background:
        radial-gradient(ellipse at 30% 20%, rgba(108, 52, 131, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(245, 179, 66, 0.08) 0%, transparent 50%),
        #0A0B0D;
}

/* Content Overlay */
.hero-content-wrapper {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: 0 24px;
    animation: heroFadeIn 1s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Title - Metallic Gold Gradient + Breathing Glow */
.hero-title {
    font-family: 'Cinzel Decorative', 'Georgia', serif;
    font-size: clamp(2.5rem, 8vw, 6.5rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1.1;
    margin-bottom: 20px;
    user-select: none;
}

.hero-title .text-glow {
    display: block;
    color: #FFFFFF;
    text-shadow:
        0 0 40px rgba(245, 179, 66, 0.4),
        0 0 80px rgba(245, 179, 66, 0.2),
        0 2px 4px rgba(0, 0, 0, 0.5);
    animation: titleGlow 3s ease-in-out infinite;
}

.hero-title .text-gold {
    display: block;
    /* v39.10 2026-10-02 用户要求：去掉 TOKYO 闪烁光效果（原 goldPulse 3s 无限动画），并加大与霓虹灯的垂直间距 */
    margin-top: 0.22em;
    background: linear-gradient(135deg, #F5B342 0%, #E08A2A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(245, 179, 66, 0.4));
}

/* ============================================================
   v39.9 2026-10-02 霓虹招牌标题（用户审核拍板：双色霓虹交替 + 提灯 + 竖排小字，7s 慢节奏）
   ============================================================ */
.hero-title .neon-sign {
    position: relative;
    display: inline-grid;
    grid-template-areas: "neon";
    justify-items: center;
    animation: neonWholeFlicker 7s linear infinite;
}

.hero-title .neon-sign .neon-line {
    grid-area: neon;
    white-space: nowrap;
    font-weight: 900;
    will-change: opacity;
}

/* KABUKICHO —— 青蓝霓虹灯管 */
.hero-title .neon-sign .neon-line-latin {
    color: #EAFBFF;
    animation: neonSignLatin 7s linear infinite;
    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 8px #00E5FF,
        0 0 16px #00E5FF,
        0 0 32px #0088FF,
        0 0 64px rgba(0, 136, 255, 0.6);
}

/* かぶきちょう —— 粉红霓虹灯管（明朝体字栈保证日文假名风格协调） */
.hero-title .neon-sign .neon-line-kana {
    color: #FFF0F8;
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', 'Microsoft YaHei', serif;
    animation: neonSignKana 7s linear infinite;
    text-shadow:
        0 0 2px #fff,
        0 0 4px #fff,
        0 0 8px #FF6EC7,
        0 0 16px #FF2E97,
        0 0 32px #D6006E,
        0 0 64px rgba(214, 0, 110, 0.6);
}

/* 提灯（SVG）—— 左侧垂直居中，暖红光晕 */
.hero-title .neon-lantern {
    position: absolute;
    left: -1.15em;
    top: 50%;
    transform: translateY(-55%);
    width: 0.52em;
    filter: drop-shadow(0 0 6px rgba(255, 90, 40, 0.65)) drop-shadow(0 0 18px rgba(255, 60, 20, 0.35));
    animation: lanternSway 4.5s ease-in-out infinite;
    transform-origin: 50% 6%;
}

/* 竖排小字「歌舞伎町」—— 右侧垂直居中，绯红金辉光 */
.hero-title .neon-vertical {
    position: absolute;
    right: -1.15em;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif JP', 'Microsoft YaHei', serif;
    font-size: 0.18em;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: #FFE3C4;
    text-shadow:
        0 0 2px #fff,
        0 0 6px #FF8A3C,
        0 0 14px #E83A2E;
}

/* —— 霓虹动画关键帧（7s 周期）—— */

/* KABUKICHO：0% 点亮（带启动闪烁），40% 保持，46% 渐隐熄灭 */
@keyframes neonSignLatin {
    0%   { opacity: 0; }
    1%   { opacity: 0.35; }
    2%   { opacity: 1; }
    3%   { opacity: 0.55; }
    4%   { opacity: 1; }
    5%   { opacity: 0.8; }
    6%   { opacity: 1; }
    40%  { opacity: 1; }
    46%  { opacity: 0; }
    100% { opacity: 0; }
}

/* かぶきちょう：46% 点亮（带启动闪烁），88% 保持，94% 渐隐熄灭 */
@keyframes neonSignKana {
    0%   { opacity: 0; }
    46%  { opacity: 0; }
    47%  { opacity: 0.35; }
    48%  { opacity: 1; }
    49%  { opacity: 0.55; }
    50%  { opacity: 1; }
    51%  { opacity: 0.8; }
    52%  { opacity: 1; }
    88%  { opacity: 1; }
    94%  { opacity: 0; }
    100% { opacity: 0; }
}

/* 整体轻微霓虹管闪烁（低亮度波动，不眩晕） */
@keyframes neonWholeFlicker {
    0%, 88%, 100% { filter: brightness(1); }
    90%           { filter: brightness(1.12); }
    91%           { filter: brightness(0.9); }
    92%           { filter: brightness(1.08); }
}

/* 提灯轻摆 */
@keyframes lanternSway {
    0%, 100% { transform: translateY(-55%) rotate(-2deg); }
    50%      { transform: translateY(-55%) rotate(2deg); }
}

/* ============================================================
   v39.9 霓虹标题 END
   ============================================================ */

/* Subtitle */
.hero-subtitle {
    font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
    font-size: clamp(1rem, 2.5vw, 1.35rem);
    color: #9090A0;
    font-weight: 300;
    letter-spacing: 0.25em;
    margin-bottom: 48px;
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

/* CTA Buttons */
.hero-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 56px;
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

/* Primary Button - Particle Burst Effect */
.btn-glow {
    position: relative;
    overflow: hidden;
}

.btn-glow::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50px;
    background: linear-gradient(135deg, #F5B342 0%, #E08A2A 100%);
    opacity: 0;
    transition: opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
    filter: blur(8px);
}

.btn-glow:hover::before {
    opacity: 0.6;
    animation: btnParticleBurst 0.6s ease-out;
}

/* v32.9 2026-09-18 让脉冲光球可点击直达服务器状态页 —— <a> 包裹层样式 */
.server-status-3d-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    border-radius: 100px;
    transition: filter 0.25s ease, transform 0.25s ease;
}
.server-status-3d-link:hover {
    filter: brightness(1.15);
    transform: translateY(-1px);
}

/* Server Status 3D Pulse Orb */
.server-status-3d {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

.server-status-3d .pulse-ring {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #28A745;
    position: relative;
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.6);
}

.server-status-3d .pulse-ring::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid #28A745;
    animation: pulseRing 2s ease-out infinite;
}

.server-status-3d .pulse-ring::after {
    content: '';
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px solid rgba(40, 167, 69, 0.3);
    animation: pulseRing 2s ease-out 0.6s infinite;
}

.server-status-3d .status-text {
    font-size: 0.875rem;
    color: #9090A0;
    font-weight: 500;
    letter-spacing: 0.05em;
}

.server-status-3d .online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #28A745;
    margin-right: 4px;
    vertical-align: middle;
    animation: dotPulse 1.5s ease-in-out infinite;
}

.server-status-3d .offline-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #DC3545;
    margin-right: 4px;
    vertical-align: middle;
}

/* ===== v8.0 状态三色：维护（黄）===== */
.server-status-3d .maintenance-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F5B342;
    margin-right: 4px;
    vertical-align: middle;
    animation: dotPulse 1.5s ease-in-out infinite;
}

.server-status-3d.is-maintenance .pulse-ring {
    background: #F5B342;
    box-shadow: 0 0 12px rgba(245, 179, 66, 0.6);
}

.server-status-3d.is-maintenance .pulse-ring::before {
    border-color: #F5B342;
}

.server-status-3d.is-maintenance .pulse-ring::after {
    border-color: rgba(245, 179, 66, 0.3);
}

/* ===== v8.0 状态三色：离线（红）===== */
.server-status-3d.is-offline .pulse-ring {
    background: #DC3545;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.6);
}

.server-status-3d.is-offline .pulse-ring::before {
    border-color: #DC3545;
}

.server-status-3d.is-offline .pulse-ring::after {
    border-color: rgba(220, 53, 69, 0.3);
}

/* ===== v8.0 服务器维护计划卡片（hero 区底部，精致玻璃质感）===== */
/* v8.2: 与服务器状态拉开距离 + 时间/说明行缩至 65% + 新增翻页倒计时 */
.maintenance-plan-card {
    /* v39.6 2026-10-01 块级定宽卡片必须显式水平 auto 外边距才能在 900px wrapper 内居中
       （按钮组靠 flex justify-content、状态球靠 inline-flex+text-align，此卡片是唯一漏网的块级定宽元素） */
    margin: 56px auto 0;
    width: 100%;
    max-width: 520px;
    padding: 18px 28px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(18, 18, 26, 0.78), rgba(18, 18, 26, 0.42));
    border: 1px solid rgba(245, 179, 66, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    text-align: center;
    animation: mpFadeIn 0.9s ease both;
}

.maintenance-plan-card .mp-badge {
    font-size: 0.625rem;
    letter-spacing: 0.35em;
    color: rgba(245, 179, 66, 0.75);
    font-weight: 600;
    margin-bottom: 8px;
}

.maintenance-plan-card .mp-title {
    font-size: 0.95rem;
    color: #F5B342;
    font-weight: 600;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.maintenance-plan-card .mp-icon {
    margin-right: 6px;
}

/* 翻页倒计时（flip clock） */
.mp-flip {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 6px;
    margin: 12px 0 14px;
}

.mp-flip .mpf-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mp-flip .mpf-card {
    position: relative;
    min-width: 44px;
    height: 52px;
    padding: 0 6px;
    border-radius: 7px;
    background: linear-gradient(180deg, #23242e 0%, #171821 49%, #0e0f15 51%, #1b1c26 100%);
    border: 1px solid rgba(245, 179, 66, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 1.45rem;
    font-weight: 700;
    color: #F5B342;
    text-shadow: 0 0 12px rgba(245, 179, 66, 0.35);
    overflow: hidden;
    perspective: 240px;
}

/* 卡片中缝（翻页钟分割线） */
.mp-flip .mpf-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 数字翻动动画（值变化时由 JS 加 .flip 触发） */
.mp-flip .mpf-card.flip .mpf-num {
    animation: mpfFlip 0.45s ease both;
}

@keyframes mpfFlip {
    0%   { transform: rotateX(0deg); }
    45%  { transform: rotateX(-90deg); opacity: 0.4; }
    55%  { transform: rotateX(90deg); opacity: 0.4; }
    100% { transform: rotateX(0deg); opacity: 1; }
}

.mp-flip .mpf-label {
    font-size: 0.55rem;
    letter-spacing: 0.2em;
    color: #9090A0;
}

.mp-flip .mpf-sep {
    font-size: 1.1rem;
    color: rgba(245, 179, 66, 0.5);
    line-height: 52px;
    padding-bottom: 14px;
}

/* 倒计时结束后隐藏 */
.mp-flip.mpf-done { display: none; }

.maintenance-plan-card .mp-time {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 0.553rem;   /* v8.2: 0.85rem × 65% */
    color: #FFFFFF;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.maintenance-plan-card .mp-desc {
    font-size: 0.468rem;   /* v8.2: 0.72rem × 65% */
    color: #9090A0;
    line-height: 1.6;
}

@keyframes mpFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Static Particles (CSS fallback, no JS) */
.static-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.static-particles::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(245, 179, 66, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatA 8s ease-in-out infinite;
}

.static-particles::after {
    content: '';
    position: absolute;
    bottom: 20%;
    right: 15%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(108, 52, 131, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    animation: floatB 10s ease-in-out infinite;
}

@keyframes floatA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.1); }
    66% { transform: translate(-20px, 10px) scale(0.9); }
}

@keyframes floatB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-25px, 15px) scale(1.15); }
    66% { transform: translate(20px, -10px) scale(0.85); }
}

/* Hero Keyframes */
@keyframes heroFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes titleGlow {
    0%, 100% {
        text-shadow: 0 0 40px rgba(245, 179, 66, 0.4), 0 0 80px rgba(245, 179, 66, 0.2);
    }
    50% {
        text-shadow: 0 0 60px rgba(245, 179, 66, 0.6), 0 0 120px rgba(245, 179, 66, 0.3), 0 0 180px rgba(108, 52, 131, 0.2);
    }
}

@keyframes goldPulse {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(245, 179, 66, 0.4)); }
    50% { filter: drop-shadow(0 0 40px rgba(245, 179, 66, 0.7)) drop-shadow(0 0 80px rgba(245, 179, 66, 0.3)); }
}

@keyframes pulseRing {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.5); opacity: 0; }
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes btnParticleBurst {
    0% { transform: scale(0.9); opacity: 0; }
    30% { opacity: 0.6; }
    100% { transform: scale(1.4); opacity: 0; }
}

.chart-container.loaded::before {
    display: none;
}

.tx-chart-container {
    width: 100%;
    height: 350px;
    margin: 24px 0;
    background: #12131A;
    border: 1px solid #2A2A3E;
    border-radius: 16px;
    overflow: hidden;
}

.chart-toggle-btn.active {
    color: #F5B342;
    border-color: #F5B342;
    background: rgba(245, 179, 66, 0.1);
}

/* ============================================
   36. ACCESSIBILITY ENHANCEMENTS (v2.0)
   ============================================ */

/* Skip to Content Link */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 99999;
    padding: 12px 24px;
    background: #F5B342;
    color: #0A0B0D;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px;
    text-decoration: none;
    transition: top 0.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.skip-to-content:focus {
    top: 16px;
}

/* Focus Visible - Gold Glow */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #F5B342;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(245, 179, 66, 0.25);
    border-radius: 4px;
}

/* Colorblind Compatible: Income/Expense Icons */
.tx-income::before {
    content: '\2191 ';
    color: #2ECC71;
    font-weight: 700;
}

.tx-expense::before {
    content: '\2193 ';
    color: #E74C3C;
    font-weight: 700;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High Contrast Mode */
@media (forced-colors: active) {
    .hero-title .text-gold {
        forced-color-adjust: none;
    }
}

/* Count-up Animation */
.count-up {
    display: inline-block;
    transition: none;
}

/* Responsive - Hero */
@media (max-width: 768px) {
    .hero-container {
        min-height: 80vh;
    }

    .hero-title {
        letter-spacing: 0.04em;
    }

    /* v39.9 霓虹标题响应式：小屏隐藏竖排小字、提灯缩小贴近标题 */
    .hero-title .neon-lantern {
        left: -0.9em;
        width: 0.42em;
    }

    .hero-title .neon-vertical {
        display: none;
    }

    .hero-title .neon-line-kana {
        letter-spacing: 0.02em;
    }

    .hero-subtitle {
        letter-spacing: 0.15em;
        margin-bottom: 32px;
    }

    .hero-actions {
        gap: 12px;
        margin-bottom: 36px;
    }

    .tx-chart-container {
        height: 250px;
    }
}

/* ============================================================
   Axiom 升级包 - 纯 CSS 视觉与交互增强
   ============================================================ */

/* 1. 全面毛玻璃卡片升级 */
.page-box, .auth-card, .plan-card {
    background: rgba(18, 19, 26, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: visible !important; /* 修复后台截断问题 */
}
.page-box:hover, .auth-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 179, 66, 0.2);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.8), 0 0 20px rgba(245, 179, 66, 0.05);
}

/* 2. 内容容器横向滚动（修复手机端后台右侧不可见） */
.page-box-content {
    padding: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 3. 强制表格最小宽度（防挤压换行） */
/* v32.3 2026-09-17 响应式: 760px → 560px，由 responsive-pro.css 在 ≤1024px 时覆盖为 min-width:0 */
.page-table-04 {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    min-width: 560px;
}

/* 4. 排行榜金币横向进度条 */
.bar-container {
    position: relative;
    height: 24px;
    background: rgba(255,255,255,0.05);
    border-radius: 50px;
    overflow: hidden;
    width: 100%;
    min-width: 120px;
}
.bar-fill {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50px;
    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar-value {
    position: relative;
    z-index: 1;
    line-height: 24px;
    padding: 0 12px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* 5. 前三名纯 CSS 文字渐变 */
.rank-1::before, .rank-2::before, .rank-3::before {
    display: inline-block;
    font-weight: 900;
    background: linear-gradient(135deg, #F5B342, #d4942f);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    content: '#';
}
.rank-2::before { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); }
.rank-3::before { background: linear-gradient(135deg, #cd7f32, #b87333); }

/* 6. 移动端页脚布局优化 */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 20px 24px;
    }
    .footer-brand {
        grid-column: 1 / -1;
        border-bottom: 1px solid var(--border-color);
        padding-bottom: 16px;
        margin-bottom: 8px;
        text-align: left;
    }
    .footer-brand p {
        text-align: left;
        max-width: 100% !important;
    }
    .footer-links {
        text-align: left;
    }
    .footer-links h4 {
        text-align: left;
    }
    .footer-links ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .footer-links li {
        margin-bottom: 0;
    }
}

/* 7. Axiom 制作人信件卡片 */
.studio-message-section {
    padding: 80px 0;
    background: radial-gradient(ellipse at center, rgba(108, 52, 131, 0.05) 0%, transparent 70%);
}
.studio-message-card {
    max-width: 800px;
    margin: 0 auto;
    background: rgba(18, 19, 26, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 48px 40px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
}
.studio-badge {
    display: inline-block;
    padding: 4px 16px;
    background: rgba(245, 179, 66, 0.1);
    border: 1px solid rgba(245, 179, 66, 0.3);
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #F5B342;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
}
.studio-title {
    font-family: 'Cinzel Decorative', 'Georgia', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 24px;
    letter-spacing: 0.04em;
}
.studio-desc {
    font-size: 1rem;
    color: #9090A0;
    line-height: 1.8;
    margin-bottom: 0;
}

/* v15.4 2026-09-07 缩小与 FAQ 间距：底部 padding 归零，间距由 FAQ 顶部 80px 构成首页标准距离 */
/* v15.2 2026-09-07 编年史区块容器（独立于时间轴内部类） */
/* 8. Axiom 编年史时间线 */
.chronicle-section {
    padding: 60px 0 0;
    background: var(--bg-primary);
}

/* v15.2 2026-09-07 编年史时间轴（竖线 + 双列左右交替 + 竖线流光动画） */
/* ===== Axiom 编年史 · 时间轴 ===== */
.chrono-timeline {
    max-width: 820px;
    margin: 0 auto;
    position: relative;
    padding: 8px 0 60px;
}
/* v15.4 2026-09-07 竖线升级：3px 渐变金线 + 内外发光；flowing 时整体亮度呼吸（能量传导） */
/* 中间竖线 */
.chrono-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 90px;
    width: 3px;
    background: linear-gradient(180deg, transparent 0%, rgba(245,179,66,.2) 6%, rgba(245,179,66,.55) 50%, rgba(245,179,66,.2) 94%, transparent 100%);
    box-shadow: 0 0 14px rgba(245,179,66,.12), inset 0 0 6px rgba(245,179,66,.12);
    transform: translateX(-50%);
}
.chrono-timeline.chrono-flowing::before {
    animation: chronoLinePulse 2.4s ease-in-out 1;
}
@keyframes chronoLinePulse {
    0%   { filter: brightness(1);    opacity: .85; }
    35%  { filter: brightness(1.55); opacity: 1; }
    70%  { filter: brightness(1.7);  opacity: 1; }
    100% { filter: brightness(1);    opacity: .85; }
}
/* v15.4 2026-09-07 流光点升级：白核→金光晕核心点 + 4 层辉光；上升动画带 scaleY 能量脉动（彗尾感） */
/* 竖线流光点（常驻竖线上，触发时从下往上走一次） */
.chrono-timeline::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, #ffffff 0%, #ffe9a8 28%, #ffd700 58%, rgba(255,190,0,.25) 80%, transparent 100%);
    box-shadow:
        0 0 8px rgba(255,215,0,.95),
        0 0 20px rgba(255,215,0,.6),
        0 0 42px rgba(255,200,0,.32),
        0 0 72px rgba(255,190,0,.16);
    transform: translate(-50%, 0);
    opacity: .75;
    pointer-events: none;
    z-index: 3;
}
/* 滚动到视口 → 金点从底部走到顶部，播完自动回到竖线常驻状态 */
.chrono-timeline.chrono-flowing::after {
    animation: chronoComet 2.4s cubic-bezier(.4, 0, .2, 1) 1;
}
@keyframes chronoComet {
    0%   { transform: translate(-50%, 100%) scale(1, .35); opacity: 0; }
    10%  { transform: translate(-50%, 90%)  scale(1, 1.45); opacity: 1; }
    28%  { transform: translate(-50%, 70%)  scale(1, 1.1);  opacity: 1; }
    48%  { transform: translate(-50%, 48%)  scale(1, .95);  opacity: .95; }
    68%  { transform: translate(-50%, 26%)  scale(1, 1.2);  opacity: .95; }
    86%  { transform: translate(-50%, 6%)   scale(1, 1.45); opacity: .9; }
    100% { transform: translate(-50%, -14%) scale(1, .35);  opacity: 0; }
}
/* v15.4 2026-09-07 能量波经过时记录圆点依次点亮脉冲（底部→顶部延迟递增） */
.chrono-timeline.chrono-flowing .chrono-dot {
    animation: chronoDotPulse .35s ease-out;
}
.chrono-timeline.chrono-flowing .chrono-item:nth-child(1) .chrono-dot { animation-delay: 2.05s; }
.chrono-timeline.chrono-flowing .chrono-item:nth-child(2) .chrono-dot { animation-delay: 1.7s; }
.chrono-timeline.chrono-flowing .chrono-item:nth-child(3) .chrono-dot { animation-delay: 1.35s; }
.chrono-timeline.chrono-flowing .chrono-item:nth-child(4) .chrono-dot { animation-delay: 1.0s; }
.chrono-timeline.chrono-flowing .chrono-item:nth-child(5) .chrono-dot { animation-delay: .65s; }
@keyframes chronoDotPulse {
    0%   { transform: scale(1);    box-shadow: 0 0 6px rgba(245,179,66,.5); }
    50%  { transform: scale(1.55); box-shadow: 0 0 18px rgba(255,215,0,.95), 0 0 30px rgba(255,215,0,.5); }
    100% { transform: scale(1);    box-shadow: 0 0 6px rgba(245,179,66,.5); }
}
.chrono-item {
    position: relative;
    width: 50%;
    padding: 0 40px 32px;
    box-sizing: border-box;
}
.chrono-item.chrono-left  { left: 0;   text-align: right; }
.chrono-item.chrono-right { left: 50%; text-align: left; }

/* 圆点 */
.chrono-dot {
    position: absolute;
    top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #F5B342;
    border: 2px solid #0A0B0D;
    z-index: 2;
    box-shadow: 0 0 6px rgba(245,179,66,.5);
}
.chrono-left  .chrono-dot { right: -6px; }   /* 50%线往右点 */
.chrono-right .chrono-dot { left: -6px; }    /* 50%线往左点 */
.chrono-dot.is-first {
    background: #FFD700;
    box-shadow: 0 0 12px rgba(255,215,0,.8);
    width: 14px; height: 14px;
}
.chrono-left  .chrono-dot.is-first { right: -7px; }
.chrono-right .chrono-dot.is-first { left: -7px; }

/* 卡片 */
.chrono-card {
    position: relative;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(25,25,28,.92) 0%, rgba(14,14,16,.98) 100%);
    border: 1px solid rgba(245,179,66,.15);
    box-shadow: 0 2px 10px rgba(0,0,0,.4);
}

/* 内容文字 */
.chrono-time {
    color: var(--text-muted); font-size: .72rem;
    letter-spacing: .06em; margin-bottom: 4px;
}
.chrono-title {
    color: var(--text-primary); font-size: .92rem; font-weight: 500;
    line-height: 1.5;
}
/* 仅最新 2 条记录的角色名有微微闪烁 + 微放大效果 */
.chrono-item.is-latest .chrono-title .char-name {
    display: inline-block;
    animation: chronoCharSoft 3s ease-in-out infinite;
}
@keyframes chronoCharSoft {
    0%, 100% { transform: scale(1);    opacity: 1; }
    30%      { transform: scale(1.04); opacity: .85; }
    60%      { transform: scale(1.02); opacity: 1; }
}
/* v15.3 2026-09-07 编年史角色名/BOSS名配色：英雄金、首杀亮金、BOSS 冷白银灰 */
.chrono-name {
    padding: 0 2px;
    border-radius: 3px;
}
.chrono-hero {
    color: #F5B342;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(245, 179, 66, 0.35);
}
.chrono-hero.chrono-first {
    color: #FFD700;
    text-shadow:
        0 0 8px rgba(255, 215, 0, 0.55),
        0 0 2px rgba(255, 215, 0, 0.9);
}
.chrono-boss {
    color: #c0c0d0;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(192, 192, 208, 0.25);
}
.chrono-first-tag { color: #F5B342; }
.chrono-reward {
    color: var(--text-muted); font-size: .82rem;
    margin-top: 4px;
}
.chrono-reward.is-first { color: #F5B342; }

/* 底部链接 */
.chrono-footer {
    text-align: center;
    margin-top: 26px;
}
.chrono-footer a {
    color: var(--text-muted);
    font-size: .8rem;
    text-decoration: none;
    transition: color .2s;
}
.chrono-footer a:hover { color: #F5B342; }

/* 响应式：窄屏改成单列 */
@media (max-width: 640px) {
    .chrono-item { width: 100%; padding: 0 32px 24px; }
    .chrono-item.chrono-right { left: 0; text-align: left; }
    .chrono-timeline::before { left: 16px; }
    .chrono-item .chrono-dot { left: 10px !important; right: auto !important; }
    .chrono-item .chrono-card { padding-left: 28px; }
}

/* 9. 招募进度条 */
.recruit-progress {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
}
.recruit-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6C3483, #F5B342);
    border-radius: 4px;
    transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 9b. 个人信息页双列布局 */
.profile-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* 9c. 招募奖励阶梯网格 */
.recruit-tier-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.recruit-tier-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition: all 0.25s ease;
}

.recruit-tier-card .tier-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.recruit-tier-card .tier-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.recruit-tier-card .tier-reward {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.recruit-tier-card .tier-progress {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.recruit-tier-card .tier-status {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Tier states */
.recruit-tier-card.tier-pending {
    border-color: rgba(245, 179, 66, 0.5);
    background: rgba(245, 179, 66, 0.06);
    box-shadow: 0 0 16px rgba(245, 179, 66, 0.1);
}

.recruit-tier-card.tier-pending .tier-reward {
    color: var(--gold);
}

.recruit-tier-card.tier-claimed {
    border-color: rgba(40, 167, 69, 0.3);
    background: rgba(40, 167, 69, 0.04);
    opacity: 0.8;
}

.recruit-tier-card.tier-claimed .tier-reward {
    color: #28a745;
}

.recruit-tier-card.tier-completed {
    border-color: rgba(40, 167, 69, 0.2);
}

.recruit-tier-card.tier-locked {
    opacity: 0.5;
}

.recruit-claim-btn {
    width: 100%;
    padding: 8px 0;
    background: linear-gradient(135deg, #F5B342, #d4942f);
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.recruit-claim-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245, 179, 66, 0.3);
}

/* 10. 名人堂空状态 */
.hall-of-fame-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-lg);
}

.hall-of-fame-empty .hof-empty-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.6;
}

.hall-of-fame-empty .hof-empty-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.hall-of-fame-empty .hof-empty-desc {
    font-size: 0.8rem;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.5;
}
.hof-cat-boss       { background: rgba(239, 68, 68, 0.15); color: #f87171; }
.hof-cat-level      { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.hof-cat-skill      { background: rgba(96, 165, 250, 0.15); color: #60a5fa; }
.hof-cat-gold       { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.hof-cat-season     { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.hof-cat-contribute { background: rgba(244, 114, 182, 0.15); color: #f472b6; }
.hof-cat-record     { background: rgba(251, 146, 60, 0.15); color: #fb923c; }

/* 名人堂行高亮 */
.ranking-table tbody tr.hof-row-level  { border-left: 3px solid transparent; }
.ranking-table tbody tr.hof-row-level:hover { border-left-color: #4ade80; }
.ranking-table tbody tr.hof-row-boss   { border-left: 3px solid transparent; }
.ranking-table tbody tr.hof-row-boss:hover  { border-left-color: #f87171; }
.ranking-table tbody tr.hof-row-skill  { border-left: 3px solid transparent; }
.ranking-table tbody tr.hof-row-skill:hover { border-left-color: #60a5fa; }
.ranking-table tbody tr.hof-row-gold   { border-left: 3px solid transparent; }
.ranking-table tbody tr.hof-row-gold:hover  { border-left-color: #fbbf24; }

/* 入榜规则 */
.hof-rules {
    margin-top: 28px;
    padding: 24px 28px;
    background: rgba(245,179,66,0.04);
    border: 1px solid rgba(245,179,66,0.12);
    border-radius: var(--radius-md);
    text-align: left;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.hof-rules-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #F5B342;
    margin-bottom: 14px;
    font-family: var(--font-heading);
}

.hof-rules-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}

.hof-rules-list li {
    font-size: 0.8rem;
    color: var(--text-secondary);
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.hof-rules-list li::before {
    content: '✦';
    position: absolute;
    left: 0;
    top: 6px;
    color: #F5B342;
    font-size: 0.6rem;
}

.hof-rules-list li strong {
    color: #e0e0e0;
    font-weight: 600;
}

.hof-rules-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
    text-align: center;
}

/* ============================================================
   名人堂专属视觉增强
   ============================================================ */

/* 名人堂 Tab 高亮 */
.ranking-tab[data-tab="7"] {
    color: #F5B342;
    font-weight: 700;
}
.ranking-tab[data-tab="7"].active {
    background: linear-gradient(135deg, rgba(245, 179, 66, 0.15), rgba(245, 179, 66, 0.05));
    box-shadow: 0 0 12px rgba(245, 179, 66, 0.15);
}

/* 名人堂表格容器：金边 + 顶部光带 + 暗角 */
#ranking-7 .ranking-table-wrap {
    background: linear-gradient(180deg, rgba(245, 179, 66, 0.05) 0%, var(--bg-surface) 80px);
    border: 1px solid rgba(245, 179, 66, 0.18);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
}
#ranking-7 .ranking-table-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #F5B342 30%, #d4942f 70%, transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}

/* 表头强化 */
#ranking-7 .ranking-table thead {
    background: rgba(245, 179, 66, 0.08);
}
#ranking-7 .ranking-table th {
    color: #F5B342;
    border-bottom: 2px solid rgba(245, 179, 66, 0.25);
    letter-spacing: 0.8px;
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* 行动画：依次淡入上浮 */
@keyframes hofFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
#ranking-7 .ranking-table tbody tr {
    animation: hofFadeIn 0.45s ease-out both;
}
/* 名人堂行底部边框：使用 td 底部边框确保连续不中断 */
#ranking-7 .ranking-table tbody td {
    border-bottom: 1px solid rgba(245, 179, 66, 0.1);
}
#ranking-7 .ranking-table tbody tr:last-child td {
    border-bottom: none;
}
#ranking-7 .ranking-table tbody tr:nth-child(1)  { animation-delay: 0.04s; }
#ranking-7 .ranking-table tbody tr:nth-child(2)  { animation-delay: 0.08s; }
#ranking-7 .ranking-table tbody tr:nth-child(3)  { animation-delay: 0.12s; }
#ranking-7 .ranking-table tbody tr:nth-child(4)  { animation-delay: 0.16s; }
#ranking-7 .ranking-table tbody tr:nth-child(5)  { animation-delay: 0.20s; }
#ranking-7 .ranking-table tbody tr:nth-child(6)  { animation-delay: 0.24s; }
#ranking-7 .ranking-table tbody tr:nth-child(7)  { animation-delay: 0.28s; }
#ranking-7 .ranking-table tbody tr:nth-child(8)  { animation-delay: 0.32s; }
#ranking-7 .ranking-table tbody tr:nth-child(9)  { animation-delay: 0.36s; }
#ranking-7 .ranking-table tbody tr:nth-child(10) { animation-delay: 0.40s; }

/* 分类行：默认带色边，hover 更明显 */
#ranking-7 .ranking-table tbody tr.hof-row-level  { border-left: 3px solid rgba(74,  222, 128, 0.35); }
#ranking-7 .ranking-table tbody tr.hof-row-boss   { border-left: 3px solid rgba(248, 113, 113, 0.35); }
#ranking-7 .ranking-table tbody tr.hof-row-skill  { border-left: 3px solid rgba(96,  165, 250, 0.35); }
#ranking-7 .ranking-table tbody tr.hof-row-gold   { border-left: 3px solid rgba(251, 191, 36,  0.35); }
#ranking-7 .ranking-table tbody tr.hof-row-level:hover  { border-left-color: #4ade80; background: rgba(74,  222, 128, 0.05); }
#ranking-7 .ranking-table tbody tr.hof-row-boss:hover   { border-left-color: #f87171; background: rgba(248, 113, 113, 0.05); }
#ranking-7 .ranking-table tbody tr.hof-row-skill:hover  { border-left-color: #60a5fa; background: rgba(96,  165, 250, 0.05); }
#ranking-7 .ranking-table tbody tr.hof-row-gold:hover   { border-left-color: #fbbf24; background: rgba(251, 191, 36,  0.05); }
#ranking-7 .hof-cat-boss       { background: rgba(239, 68,  68,  0.18); color: #f87171; box-shadow: 0 2px 8px rgba(239, 68, 68, 0.12); }
#ranking-7 .hof-cat-level      { background: rgba(34,  197, 94,  0.18); color: #4ade80; box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12); }
#ranking-7 .hof-cat-skill      { background: rgba(96,  165, 250, 0.18); color: #60a5fa; box-shadow: 0 2px 8px rgba(96, 165, 250, 0.12); }
#ranking-7 .hof-cat-gold       { background: rgba(251, 191, 36,  0.18); color: #fbbf24; box-shadow: 0 2px 8px rgba(251, 191, 36, 0.12); }
#ranking-7 .hof-cat-season     { background: rgba(168, 85,  247, 0.18); color: #c084fc; box-shadow: 0 2px 8px rgba(168, 85, 247, 0.12); }
#ranking-7 .hof-cat-contribute { background: rgba(244, 114, 182, 0.18); color: #f472b6; box-shadow: 0 2px 8px rgba(244, 114, 182, 0.12); }
#ranking-7 .hof-cat-record     { background: rgba(251, 146, 60,  0.18); color: #fb923c; box-shadow: 0 2px 8px rgba(251, 146, 60, 0.12); }

/* 名人堂空状态强化 */
#ranking-7 .hall-of-fame-empty {
    background: radial-gradient(ellipse at center, rgba(245, 179, 66, 0.05) 0%, transparent 70%);
    border: 1px dashed rgba(245, 179, 66, 0.18);
}
#ranking-7 .hof-empty-icon {
    filter: drop-shadow(0 0 12px rgba(245, 179, 66, 0.25));
    animation: hofTrophyPulse 2.5s ease-in-out infinite;
}
@keyframes hofTrophyPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.08); opacity: 0.9; }
}

/* 前三名序号在名人堂里更突出 */
#ranking-7 .rank-num.rank-1 {
    box-shadow: 0 0 12px rgba(245, 179, 66, 0.35);
}
#ranking-7 .rank-num.rank-2 {
    box-shadow: 0 0 10px rgba(192, 192, 192, 0.25);
}
#ranking-7 .rank-num.rank-3 {
    box-shadow: 0 0 10px rgba(205, 127, 50, 0.25);
}

/* 授予日期样式 */
#ranking-7 .ranking-table td:last-child {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.75rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
}

/* 移动端名人堂优化 */
@media (max-width: 768px) {
    #ranking-7 .ranking-table-wrap {
        border-radius: var(--radius-md);
    }
    #ranking-7 .ranking-table th,
    #ranking-7 .ranking-table td {
        padding: 10px 12px;
    }
}

/* ===== 种族分布可视化 ===== */
.race-distribution {
    margin-top: 40px;
    padding: 32px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.race-dist-header {
    text-align: center;
    margin-bottom: 28px;
}

.race-dist-header h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 6px 0;
}

.race-dist-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}

.race-dist-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: center;
}

.race-dist-chart-wrap {
    display: flex;
    justify-content: center;
}

.race-doughnut {
    position: relative;
    width: 220px;
    height: 220px;
}

.race-doughnut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.rdc-total {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    font-family: 'DM Sans', sans-serif;
}

.rdc-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.race-dist-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.race-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    transition: border-color 0.2s;
}

.race-info-card:hover {
    border-color: rgba(255,255,255,0.12);
}

.ric-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.race-info-card.china .ric-icon {
    background: rgba(93,173,226,0.12);
}

.race-info-card.europe .ric-icon {
    background: rgba(245,179,66,0.12);
}

.ric-body {
    flex: 1;
    min-width: 0;
}

.ric-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2px;
}

.ric-count {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.ric-bar {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.ric-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1.5s ease;
}

.ric-pct {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .race-dist-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .race-doughnut {
        width: 180px;
        height: 180px;
    }
    .race-distribution {
        padding: 24px 16px;
    }
    .hof-rules {
        padding: 20px 16px;
    }
}

/* 11. 首页版本更新卡片 */
.home-version-section {
    padding: 40px 20px 60px;
    max-width: var(--container-max);
    margin: 0 auto;
}

.version-card {
    max-width: 720px;
    margin: 0 auto;
    background: rgba(245,179,66,0.04);
    border: 1px solid rgba(245,179,66,0.12);
    border-radius: 12px;
    padding: 24px 28px;
    transition: border-color 0.3s ease;
}

.version-card:hover {
    border-color: rgba(245,179,66,0.25);
}

.version-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.version-card-tag {
    color: var(--gold);
    font-family: monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    font-weight: 700;
}

.version-card-title {
    color: var(--gold);
    font-family: monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
}

/* T260926-01 2026-09-26 版本卡头部「更多」小标签（跳转 /news.php?type=patch 完整版本更新板块）
   位置＝卡片头部右端（margin-left:auto）；配色与新闻卡「分享」标签同族（金框 + 淡金渐变底），
   文字色走 var(--gold) ⇒ 亮色模式下自动随令牌转「深古铜金」保持 AA。 */
.version-card-more {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--gold, #f5b342);
    border: 1px solid rgba(245, 179, 66, 0.4);
    background: linear-gradient(135deg, rgba(245, 179, 66, 0.12), rgba(245, 179, 66, 0.03));
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.25s ease;
}
.version-card-more:hover {
    box-shadow: 0 0 14px rgba(245, 179, 66, 0.35);
    transform: translateY(-1px);
}
.version-card-more-ic {
    font-size: 0.72rem;
    line-height: 1;
}

.version-card-body {
    padding: 0;
}

.version-card-update-title {
    font-weight: 700;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 8px;
}

.version-card-update-text {
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.7;
    margin-bottom: 12px;
}

.version-card-update-date {
    color: var(--text-muted);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.version-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
}

.version-card-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.version-card-brand {
    font-family: monospace;
    letter-spacing: 2px;
    color: var(--gold);
}

/* ============================================
   20. 通知铃铛系统
   ============================================ */
.nav-notification {
    position: relative;
    margin-left: 12px;
}

.bell-btn {
    background: none;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.bell-btn:hover {
    background: rgba(245,179,66,0.1);
    border-color: rgba(245,179,66,0.3);
}

.bell-icon {
    font-size: 1.1rem;
}

.bell-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #f87171;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* v31.2 2026-09-15 铃铛徽标「有未读就振动 + 红色闪烁」——
   由 inc/footer.php 在未读数 > 0 时挂 .is-alert、归零时摘掉；
   本文件末尾 @layer theme-v3 里的金色渐变属于分层样式，按级联层规则输给这里的未分层规则，
   故未读徽标仍为红色（与用户要求一致）。 */
.bell-badge.is-alert {
    animation: bellShake 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite,
               bellBlinkRed 1.5s ease-in-out infinite;
    will-change: transform, box-shadow;
}

/* 管理员紫铃铛：同样的振动 + 紫色闪烁 */
.bell-badge-admin.is-alert {
    animation: bellShake 1.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite,
               bellBlinkPurple 1.5s ease-in-out infinite;
}

@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* 振动：一轮内左右摇摆数次后归位（1.5s 一轮，与闪烁同周期） */
@keyframes bellShake {
    0%, 46%, 100% { transform: rotate(0deg) scale(1); }
    4%   { transform: rotate(-16deg) scale(1.10); }
    9%   { transform: rotate(13deg) scale(1.10); }
    14%  { transform: rotate(-11deg) scale(1.08); }
    19%  { transform: rotate(9deg) scale(1.08); }
    24%  { transform: rotate(-6deg) scale(1.06); }
    30%  { transform: rotate(4deg) scale(1.05); }
    36%  { transform: rotate(0deg) scale(1.04); }
}

/* 红色闪烁：底色由深红呼吸到亮红 + 外发光 */
@keyframes bellBlinkRed {
    0%, 100% { background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
    50%      { background: #ff8080; box-shadow: 0 0 12px 3px rgba(255, 59, 59, 0.75); }
}

/* 紫色闪烁：管理员铃铛 */
@keyframes bellBlinkPurple {
    0%, 100% { background: #a78bfa; box-shadow: 0 0 0 0 rgba(157, 122, 255, 0); }
    50%      { background: #c9b8ff; box-shadow: 0 0 12px 3px rgba(157, 122, 255, 0.8); }
}

/* 无障碍：跟随系统「减少动态效果」时停掉振动与闪烁（保留红色静态提醒） */
@media (prefers-reduced-motion: reduce) {
    .bell-badge.is-alert,
    .bell-badge-admin.is-alert {
        animation: none;
    }
    .bell-badge.is-alert { background: #ff3b3b; }
    .bell-badge-admin.is-alert { background: #a78bfa; }
}

.notification-panel {
    position: absolute;
    top: 100%;
    right: 0;
    width: 380px;
    max-height: 520px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
    z-index: 1000;
    overflow: hidden;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
}

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
}

.notification-title {
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.mark-all-read {
    background: none;
    border: none;
    color: var(--gold);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.2s;
}

.mark-all-read:hover {
    background: rgba(245,179,66,0.1);
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
    position: relative;
}

.notif-item:hover {
    background: rgba(255,255,255,0.03);
}

.notif-item.unread {
    background: rgba(245,179,66,0.04);
}

.notif-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.notif-body {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px;
}

.notif-item.unread .notif-title {
    color: var(--gold);
}

.notif-content {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.notif-time {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.notif-dot {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.notification-empty {
    padding: 32px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.notification-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 12px 18px;
    text-align: center;
    flex-shrink: 0;
}

.notif-all-link {
    color: var(--gold);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-block;
    padding: 6px 12px;
    border-radius: 4px;
    line-height: 1.5;
}

.notif-all-link:hover {
    color: #fff;
    background: rgba(245,179,66,0.1);
}

/* 管理员紫色铃铛 */
.bell-btn-admin {
    border-color: rgba(157, 122, 255, 0.3);
}

.bell-btn-admin:hover {
    background: rgba(157, 122, 255, 0.1);
    border-color: rgba(157, 122, 255, 0.5);
}

.bell-badge-admin {
    background: #9d7aff;
}

/* 移动端通知面板适配 */
@media (max-width: 768px) {
    .nav-notification {
        margin-left: 8px;
    }
    .notification-panel {
        position: fixed;
        top: 56px;
        right: 10px;
        left: auto;
        width: min(360px, calc(100vw - 20px));
        max-height: 75vh;
        margin-top: 0;
    }
}

@media (max-width: 480px) {
    .notification-panel {
        top: 52px;
        right: 8px;
        width: calc(100vw - 16px);
        max-height: 80vh;
    }
}

/* 消息页面 */
.messages-page {
    max-width: 800px;
    margin: 0 auto;
}

.message-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}

.message-item:hover {
    background: rgba(255,255,255,0.03);
}

.message-item.unread {
    background: rgba(245,179,66,0.04);
}

.message-item.unread:hover {
    background: rgba(245,179,66,0.08);
}

.message-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 2px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
}

.message-body {
    flex: 1;
    min-width: 0;
}

.message-title {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 600;
    margin-bottom: 4px;
}

.message-item.unread .message-title {
    color: var(--gold);
}

.message-content {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 4px;
}

.message-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.message-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
}

.message-dot {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

/* ============================================
   21. 管理员边框流光
   ============================================ */
.admin-glow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 9998;
    border: 3px solid transparent;
}

.admin-glow.glow-purple {
    border-color: transparent;
    animation: glowBorderPurple 5s ease forwards;
}

@keyframes glowBorderPurple {
    0% {
        border-color: rgba(107, 70, 193, 0.8);
        box-shadow: inset 0 0 30px rgba(107, 70, 193, 0.3), 0 0 30px rgba(168, 85, 247, 0.3);
    }
    50% {
        border-color: rgba(168, 85, 247, 0.8);
        box-shadow: inset 0 0 50px rgba(168, 85, 247, 0.4), 0 0 50px rgba(107, 70, 193, 0.4);
    }
    100% {
        border-color: transparent;
        box-shadow: none;
    }
}

.admin-glow.glow-gold {
    border-color: #f87171;
    animation: glowBorderGold 2s ease infinite;
    box-shadow: inset 0 0 40px rgba(248, 113, 113, 0.2), 0 0 40px rgba(245, 179, 66, 0.2);
}

.admin-glow.glow-green {
    border-color: #4ade80;
    animation: glowBorderGreen 2s ease infinite;
    box-shadow: inset 0 0 40px rgba(74, 222, 128, 0.15), 0 0 40px rgba(74, 222, 128, 0.15);
}

@keyframes glowBorderGreen {
    0% {
        border-color: #4ade80;
        box-shadow: inset 0 0 40px rgba(74, 222, 128, 0.15), 0 0 40px rgba(74, 222, 128, 0.15);
    }
    50% {
        border-color: #22c55e;
        box-shadow: inset 0 0 60px rgba(34, 197, 94, 0.2), 0 0 60px rgba(74, 222, 128, 0.15);
    }
    100% {
        border-color: #4ade80;
        box-shadow: inset 0 0 40px rgba(74, 222, 128, 0.15), 0 0 40px rgba(74, 222, 128, 0.15);
    }
}

@keyframes glowBorderGold {
    0% {
        border-color: #f87171;
        box-shadow: inset 0 0 40px rgba(248, 113, 113, 0.2), 0 0 40px rgba(245, 179, 66, 0.2);
    }
    33% {
        border-color: #F5B342;
        box-shadow: inset 0 0 60px rgba(245, 179, 66, 0.3), 0 0 60px rgba(248, 113, 113, 0.2);
    }
    66% {
        border-color: #f87171;
        box-shadow: inset 0 0 40px rgba(248, 113, 113, 0.2), 0 0 40px rgba(245, 179, 66, 0.2);
    }
    100% {
        border-color: #f87171;
        box-shadow: inset 0 0 40px rgba(248, 113, 113, 0.2), 0 0 40px rgba(245, 179, 66, 0.2);
    }
}

/* ============================================
   22. 仪表盘统计卡片
   ============================================ */
.dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dashboard-stat-card:hover {
    border-color: rgba(245,179,66,0.3);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.dsc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.dsc-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.2;
}
.dsc-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.dashboard-alert {
    flex: 1;
    min-width: 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s;
}
.dashboard-alert:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .studio-message-card {
        padding: 32px 24px;
    }
    .studio-title {
        font-size: 1.5rem;
    }

    /* 仪表盘图表响应式 */
    .dashboard-chart-row {
        grid-template-columns: 1fr !important;
    }

    /* 招募双列 → 单列 */
    .profile-grid-2col {
        grid-template-columns: 1fr;
    }

    /* 排行榜响应式 */
    .ranking-tabs {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        padding: 4px;
    }
    .ranking-tab {
        flex: 0 0 auto;
        padding: 8px 14px;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    .ranking-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* v32.3 2026-09-17 响应式: 移动端表格交给外层 overflow-x 处理，min-width 移除 */
    .ranking-table {
        min-width: 0;
        font-size: 0.75rem;
    }
    .ranking-table th,
    .ranking-table td {
        padding: 8px 10px;
    }
    .ranking-header h1 {
        font-size: 1.35rem;
    }
    .ranking-page {
        padding: 24px 0;
    }
    .ranking-container {
        padding: 0 12px;
    }
    .rank-num {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    .mysterious-name {
        font-size: 0.8rem;
    }
    .mysterious-icon {
        width: 16px;
        height: 16px;
    }
}

@media (max-width: 480px) {
    .ranking-table {
        min-width: 480px;
        font-size: 0.7rem;
    }
    .ranking-table th,
    .ranking-table td {
        padding: 6px 8px;
    }
    .ranking-tab {
        padding: 6px 10px;
        font-size: 0.72rem;
    }
    .ranking-header h1 {
        font-size: 1.2rem;
    }
    .guild-name {
        font-size: 0.7rem;
    }
    .race-badge {
        font-size: 0.65rem;
        padding: 1px 6px;
    }
}

    /* 招募阶梯 5列 → 可滚动 */
    .recruit-tier-grid {
        grid-template-columns: repeat(5, minmax(100px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    .recruit-tier-card {
        min-width: 100px;
    }

    .hall-of-fame-empty {
        padding: 32px 16px;
    }
}
/* ============================================
   40. BRAND LOGOS (Mango + AXIOM)
   ============================================ */

/* ----- AXIOM Footer Logo ----- */
.footer-brand-logo {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: default;
}
.footer-brand-logo:hover .footer-axiom-emblem {
    transform: scale(1.06);
    filter: drop-shadow(0 0 40px rgba(245, 179, 66, 0.32));
}

.footer-axiom-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
}

.footer-axiom-main {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 1.7rem;
    letter-spacing: 3px;
    background: linear-gradient(155deg, #F2D68A 0%, #D4A847 35%, #C49A3E 65%, #B8893A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    line-height: 1;
}
.footer-axiom-main::after {
    content: '\Max Rockill';
    font-size: 0.4rem;
    font-weight: 400;
    color: var(--text-muted);
    -webkit-text-fill-color: var(--text-muted);
    background: none;
    margin-left: 3px;
    vertical-align: super;
    letter-spacing: 0;
}

.footer-axiom-sub {
    font-family: var(--font-body);
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}
.footer-axiom-sub span {
    color: var(--gold-dark);
    font-weight: 500;
    letter-spacing: 1px;
}

/* ----- Mango pulse dot animation (logo icon) ----- */
.mango-pulse-dot {
    animation: mangoPulse 2.8s ease-in-out infinite;
}
.mango-pulse-dot-delay {
    animation-delay: 1.4s;
}

/* ----- Logo responsive adjustments ----- */
@media (max-width: 768px) {
    .nav-logo-icon {
        width: 36px;
        height: 36px;
    }
    .nav-logo-main {
        font-size: 1.2rem;
    }
    .nav-logo-sub {
        font-size: 0.5rem;
        letter-spacing: 1.5px;
    }
    .footer-axiom-main {
        font-size: 1.45rem;
    }
    .footer-axiom-sub {
        font-size: 0.5rem;
    }
}

@media (max-width: 480px) {
    .nav-logo {
        gap: 8px;
    }
    .nav-logo-icon {
        width: 32px;
        height: 32px;
    }
    .nav-logo-main {
        font-size: 1.1rem;
        letter-spacing: 1px;
    }
    .nav-logo-sub {
        display: none;
    }
}

/* ============================================
   MMORPG 世界级升级 — 视觉微交互系统
   ============================================ */

/* ----- 1. 导航栏滚动收缩增强 ----- */
.navbar {
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                box-shadow 0.3s ease,
                border-color 0.3s ease;
}

.navbar.scrolled {
    height: 56px;
    background: rgba(8, 9, 11, 0.98);
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    border-bottom-color: rgba(245, 179, 66, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6),
                0 1px 0 rgba(245, 179, 66, 0.1);
}

.navbar.scrolled .nav-logo-icon {
    width: 34px;
    height: 34px;
    filter: drop-shadow(0 0 16px rgba(245, 179, 66, 0.5));
    transition: width 0.3s ease, height 0.3s ease, filter 0.3s ease;
}

.navbar.scrolled .nav-logo-main {
    font-size: 1.2rem;
    transition: font-size 0.3s ease;
}

/* Logo 金色描边光晕增强 */
.nav-logo-icon {
    transition: width 0.3s ease, height 0.3s ease, filter 0.6s ease;
    filter: drop-shadow(0 0 12px rgba(245, 179, 66, 0.25))
            drop-shadow(0 0 24px rgba(245, 179, 66, 0.1));
}

.nav-logo:hover .nav-logo-icon {
    filter: drop-shadow(0 0 20px rgba(245, 179, 66, 0.6))
            drop-shadow(0 0 40px rgba(245, 179, 66, 0.3));
}

/* ----- 2. 导航链接悬浮下滑线动画 ----- */
.nav-menu > li > a {
    position: relative;
    overflow: hidden;
}

.nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 2px;
    opacity: 0.8;
}

.nav-menu > li > a:hover::after,
.nav-menu > li > a.active::after {
    width: 60%;
}

/* ----- 3. 用户头像 ----- */
.nav-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #F5B342 0%, #d4942f 50%, #B8893A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(245, 179, 66, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(245, 179, 66, 0.5);
    user-select: none;
    letter-spacing: 0.5px;
}

.nav-user-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 20px rgba(245, 179, 66, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border-color: var(--gold-light);
}

.navbar.scrolled .nav-user-avatar {
    width: 32px;
    height: 32px;
    font-size: 0.75rem;
    transition: all 0.3s ease;
}

/* ----- 4. 下拉菜单卡片化（毛玻璃） ----- */
.dropdown-menu {
    min-width: 240px;
    background: rgba(26, 26, 46, 0.85);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(245, 179, 66, 0.15);
    border-radius: var(--radius-lg);
    padding: 12px 0;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6),
                0 0 0 1px rgba(245, 179, 66, 0.05);
}

/* 下拉菜单头部欢迎区 */
.dropdown-header {
    padding: 16px 20px 14px;
    border-bottom: 1px solid rgba(245, 179, 66, 0.1);
    margin-bottom: 8px;
}

.dropdown-welcome {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}

.dropdown-username {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    font-family: var(--font-heading);
    background: linear-gradient(135deg, #F2D68A, #D4A847);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    font-size: 0.85rem;
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.dropdown-menu a .menu-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.dropdown-menu a:hover {
    background: rgba(245, 179, 66, 0.1);
    color: var(--text-white);
    transform: translateX(4px);
}

.dropdown-menu a:hover .menu-icon {
    filter: drop-shadow(0 0 4px rgba(245, 179, 66, 0.6));
}

/* 渐变透明分割线 */
.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(245, 179, 66, 0.2) 50%,
        transparent 100%);
    margin: 8px 16px;
    border: none;
}

/* ----- 5. 管理员侧边栏系统 ----- */
.admin-layout {
    display: flex;
    min-height: calc(100vh - var(--nav-height) - 250px);
    gap: 24px;
    padding: 24px 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 0;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: sticky;
    top: calc(var(--nav-height) + 16px);
    max-height: calc(100vh - var(--nav-height) - 32px);
    overflow-y: auto;
}

.admin-sidebar.collapsed {
    width: 72px;
}

.admin-sidebar.collapsed .sidebar-group-title,
.admin-sidebar.collapsed .sidebar-label {
    opacity: 0;
    pointer-events: none;
}

.admin-sidebar.collapsed .sidebar-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.admin-sidebar.collapsed .sidebar-item .sidebar-icon {
    margin-right: 0;
}

/* 折叠按钮 */
.sidebar-toggle {
    position: absolute;
    top: 8px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bg-surface);
    border: 1px solid var(--border-gold);
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
}

.sidebar-toggle:hover {
    background: rgba(245, 179, 66, 0.1);
    transform: scale(1.1);
}

/* 侧边栏分组 */
.sidebar-group {
    margin-bottom: 8px;
}

.sidebar-group-title {
    padding: 12px 20px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-item .sidebar-icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    margin-right: 4px;
}

.sidebar-item .sidebar-label {
    transition: opacity 0.2s ease;
}

/* 扫光悬停效果 */
.sidebar-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(245, 179, 66, 0.08),
        transparent);
    transition: left 0.5s ease;
    pointer-events: none;
}

.sidebar-item:hover::before {
    left: 100%;
}

.sidebar-item:hover {
    color: var(--text-white);
    background: rgba(245, 179, 66, 0.05);
}

/* 激活状态：左侧金色发光边框 */
.sidebar-item.active {
    color: var(--gold);
    background: rgba(245, 179, 66, 0.08);
    border-left-color: var(--gold);
    box-shadow: inset 3px 0 12px -4px rgba(245, 179, 66, 0.4);
}

.sidebar-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 8px var(--gold), 0 0 16px rgba(245, 179, 66, 0.5);
    margin-left: -6px;
}

.admin-main-content {
    flex: 1;
    min-width: 0;
}

/* 桌面端：隐藏顶栏 tabs，使用侧边栏 */
@media (min-width: 901px) {
    .admin-layout .admin-tabs {
        display: none;
    }
}

/* 响应式：移动端隐藏侧边栏，使用顶栏 tabs */
@media (max-width: 900px) {
    .admin-layout {
        flex-direction: column;
        padding: 16px;
    }
    .admin-sidebar {
        display: none;
    }
    .admin-main-content {
        width: 100%;
    }
}

/* ----- 6. Toast 通知系统 ----- */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.toast {
    min-width: 280px;
    max-width: 380px;
    padding: 14px 18px;
    background: rgba(26, 26, 46, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: var(--text-primary);
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transform: translateX(120%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.hide {
    transform: translateX(120%);
    opacity: 0;
}

.toast-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    line-height: 1.4;
}

.toast-content {
    flex: 1;
    line-height: 1.5;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.toast-close:hover {
    color: var(--text-white);
}

/* Toast 类型 */
.toast-success {
    border-color: rgba(40, 167, 69, 0.4);
}
.toast-success .toast-icon {
    color: #28a745;
}
.toast-success::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #28a745;
    box-shadow: 0 0 12px rgba(40, 167, 69, 0.5);
}

.toast-error {
    border-color: rgba(220, 53, 69, 0.4);
}
.toast-error .toast-icon {
    color: #dc3545;
}
.toast-error::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #dc3545;
    box-shadow: 0 0 12px rgba(220, 53, 69, 0.5);
}

.toast-warning {
    border-color: rgba(255, 193, 7, 0.4);
}
.toast-warning .toast-icon {
    color: #ffc107;
}
.toast-warning::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: #ffc107;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.5);
}

.toast-info {
    border-color: rgba(245, 179, 66, 0.4);
}
.toast-info .toast-icon {
    color: var(--gold);
}
.toast-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: var(--gold);
    box-shadow: 0 0 12px rgba(245, 179, 66, 0.5);
}

/* ----- 7. 输入框实时校验 ----- */
.form-field {
    position: relative;
}

.form-validation-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    z-index: 2;
}

.form-field.valid .form-validation-icon {
    opacity: 1;
    color: #28a745;
}

.form-field.invalid .form-validation-icon {
    opacity: 1;
    color: #dc3545;
    animation: validationShake 0.4s ease;
}

@keyframes validationShake {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    20% { transform: translateY(-50%) translateX(-4px); }
    40% { transform: translateY(-50%) translateX(4px); }
    60% { transform: translateY(-50%) translateX(-3px); }
    80% { transform: translateY(-50%) translateX(3px); }
}

.form-field.valid input,
.form-field.valid select,
.form-field.valid textarea {
    border-color: rgba(40, 167, 69, 0.5);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.08);
}

.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea {
    border-color: rgba(220, 53, 69, 0.5);
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.08);
}

/* 输入框抖动 */
.form-field.shake input {
    animation: inputShake 0.4s ease;
}

@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* ----- 8. 模态框弹性入场动画 ----- */
@keyframes modalSpringIn {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    60% {
        opacity: 1;
        transform: scale(1.02) translateY(-2px);
    }
    80% {
        transform: scale(0.99) translateY(1px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 模态框关闭动画 */
.modal.closing .modal-content {
    animation: modalSpringOut 0.25s ease forwards;
}

@keyframes modalSpringOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

/* ----- 9. 特色卡片 3D 倾斜 ----- */
.feature-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
}

.feature-card .feature-icon {
    transform: translateZ(30px);
    transition: transform 0.3s ease;
}

.feature-card .feature-title {
    transform: translateZ(20px);
}

.feature-card .feature-desc {
    transform: translateZ(10px);
}

/* 3D 卡片光效 */
.feature-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(245, 179, 66, 0.12) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.feature-card:hover::after {
    opacity: 1;
}

/* ----- 10. 下载进度条 ----- */
.download-progress-container {
    margin-top: 12px;
    display: none;
}

.download-progress-container.active {
    display: block;
}

.download-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--bg-input);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.download-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #F5B342, #ffcc66, #F5B342);
    background-size: 200% 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s ease;
    animation: progressShine 2s linear infinite;
    position: relative;
}

@keyframes progressShine {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.download-progress-text {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.download-progress-status {
    color: var(--gold);
    font-weight: 500;
}

.download-box.downloading .btn-primary {
    pointer-events: none;
    opacity: 0.7;
}

@keyframes dividerPulse {
    0%, 100% { left: -30%; }
    50% { left: 100%; }
}

.footer-server-time {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.footer-server-time .time-value {
    color: var(--gold);
    font-weight: 500;
    text-shadow: 0 0 10px rgba(245, 179, 66, 0.3);
}

/* ----- 12. 数字滚动增强 ----- */
.count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* 数字卡片样式 */
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    transition: all var(--transition-normal);
}

.stat-card:hover {
    border-color: var(--border-gold);
    box-shadow: var(--shadow-glow);
    transform: translateY(-2px);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    font-family: var(--font-heading);
    background: linear-gradient(135deg, #F2D68A, #D4A847);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranking-stats .stat-card {
    padding: 20px 16px;
}

.ranking-stats .stat-value {
    font-size: 1.75rem;
}

.ranking-stats .stat-label {
    font-size: 0.75rem;
    margin-top: 6px;
}

/* ----- 14. 无障碍适配 - 减少动效 ----- */
@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;
    }

    .navbar {
        transition: none;
    }

    .nav-logo:hover .nav-logo-icon {
        animation: none;
    }

    .feature-card {
        transform: none !important;
    }

    .mango-pulse-dot {
        animation: none;
    }

    .download-progress-fill {
        animation: none;
    }

    .toast {
        transition: opacity 0.1s ease;
    }

    @keyframes modalFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

/* ----- 15. 滚动条美化 ----- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: rgba(245, 179, 66, 0.2);
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 179, 66, 0.4);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 179, 66, 0.2) var(--bg-primary);
}

/* ----- 16. 选中文字样式 ----- */
::selection {
    background: rgba(245, 179, 66, 0.3);
    color: var(--text-white);
}

/* 确保 hero content 在粒子之上 */
.hero-content-wrapper {
    position: relative;
    z-index: 2;
}

/* ============================================================
   Auth 卡片卷轴奢华升级
   ============================================================ */

/* 桌面端加宽 */
@media (min-width: 769px) {
    .auth-card {
        max-width: 520px;
        padding: 48px 52px;
    }
}

/* auth-card 卷轴奢华框体 */
.auth-card {
    position: relative;
    overflow: visible;
}
.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 179, 66, 0.55), transparent);
    pointer-events: none;
    z-index: 3;
}
.auth-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 179, 66, 0.3), transparent);
    pointer-events: none;
    z-index: 3;
}

/* 四角卷轴角饰（卡片内嵌，精致装裱感）
   v24.2 2026-09-12 原「28px + 内联 SVG + transform 镜像」的定义已整体移除，
   改为文件末尾「四角金饰 · 精修版」纯 CSS 块（双层描边 / 锥形遮罩 / 刻面宝石 / 四角独立定义）。
   注意：此处原来的 `.auth-corner.tr/.bl/.br { transform: scaleX(-1)… }` 必须一并删除 ——
   新的四角是各自独立声明描边与遮罩方向的，遗留 transform 会把 tr/bl/br 再镜像一次，
   导致描边与锥形光晕翻到错误的一侧（v23.8 修复的正是这个 bug）。 */

/* auth-header 装饰分隔 */
.auth-header {
    position: relative;
}
.auth-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    margin-bottom: 14px;
}
.auth-divider-line {
    flex: 1;
    max-width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 179, 66, 0.35), transparent);
    position: relative;
}
.auth-divider-line.right {
    background: linear-gradient(90deg, rgba(245, 179, 66, 0.35), transparent);
}
.auth-divider-dot {
    width: 6px;
    height: 6px;
    background: #F5B342;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(245, 179, 66, 0.6);
    flex-shrink: 0;
}

/* v24.2 2026-09-12 去掉「白→金」渐变文字（模板感来源），改为实心高对比标题 + 极轻金色辉光 */
.auth-header h1 {
    color: var(--text-white, #F8FAFC);
    letter-spacing: 0.02em;
    text-shadow: 0 0 22px rgba(245, 179, 66, 0.16);
}

/* ============================================================
   种族分布卡片 - 奢华阵营风升级
   ============================================================ */
.race-info-card {
    position: relative;
    padding: 18px 22px;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.race-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 14px;
    pointer-events: none;
    z-index: 0;
}
.race-info-card > * {
    position: relative;
    z-index: 1;
}

/* 大唐 - 冰蓝紫金阵营 */
.race-info-card.china {
    background: linear-gradient(135deg, rgba(106, 142, 173, 0.12) 0%, rgba(18, 19, 26, 0.6) 50%, rgba(80, 110, 160, 0.08) 100%);
    border: 1px solid rgba(107, 142, 173, 0.25);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.race-info-card.china::before {
    background: radial-gradient(circle at 85% 20%, rgba(93, 173, 226, 0.12) 0%, transparent 55%);
}
.race-info-card.china:hover {
    border-color: rgba(107, 142, 173, 0.5);
    transform: translateY(-2px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(93, 173, 226, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 罗马 - 金红帝国阵营 */
.race-info-card.europe {
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.12) 0%, rgba(18, 19, 26, 0.6) 50%, rgba(245, 179, 66, 0.06) 100%);
    border: 1px solid rgba(245, 179, 66, 0.25);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.race-info-card.europe::before {
    background: radial-gradient(circle at 85% 20%, rgba(245, 179, 66, 0.12) 0%, transparent 55%);
}
.race-info-card.europe:hover {
    border-color: rgba(245, 179, 66, 0.5);
    transform: translateY(-2px);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 24px rgba(245, 179, 66, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 图标徽章升级 */
.ric-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    position: relative;
}
.ric-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.race-info-card.china .ric-icon {
    background: linear-gradient(135deg, rgba(93, 173, 226, 0.2), rgba(93, 173, 226, 0.05));
    box-shadow:
        0 0 16px rgba(93, 173, 226, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.race-info-card.china:hover .ric-icon::after {
    opacity: 1;
    box-shadow: 0 0 20px rgba(93, 173, 226, 0.3);
}
.race-info-card.europe .ric-icon {
    background: linear-gradient(135deg, rgba(245, 179, 66, 0.2), rgba(245, 179, 66, 0.05));
    box-shadow:
        0 0 16px rgba(245, 179, 66, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.race-info-card.europe:hover .ric-icon::after {
    opacity: 1;
    box-shadow: 0 0 20px rgba(245, 179, 66, 0.3);
}
.ric-icon img {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    width: 30px !important;
    height: 30px !important;
}

/* 名字与数量 */
.ric-name {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
}
.race-info-card.china .ric-name {
    background: linear-gradient(135deg, #fff, #6B8EAD);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.race-info-card.europe .ric-name {
    background: linear-gradient(135deg, #fff, #F5B342);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ric-count {
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 8px;
}

/* 进度条升级 - 发光渐变 */
.ric-bar {
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ric-bar-fill {
    height: 100%;
    border-radius: 4px;
    position: relative;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.race-info-card.china .ric-bar-fill {
    background: linear-gradient(90deg, #4a6b8a, #6B8EAD, #8fb3d4);
    box-shadow: 0 0 8px rgba(107, 142, 173, 0.4);
}
.race-info-card.europe .ric-bar-fill {
    background: linear-gradient(90deg, #b8860b, #F5B342, #ffd480);
    box-shadow: 0 0 8px rgba(245, 179, 66, 0.4);
}
.ric-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
    border-radius: 4px 4px 0 0;
}

/* 百分比数字 */
.ric-pct {
    font-size: 0.78rem;
    font-weight: 700;
}
.race-info-card.china .ric-pct {
    color: #8fb3d4;
}
.race-info-card.europe .ric-pct {
    color: #ffd480;
}

/* ============================================================
   名人堂 - 奢华升级
   ============================================================ */
/* 表格撑满宽度，与 tabs 对齐 */
#ranking-7 .ranking-table {
    width: 100%;
    table-layout: fixed;
}
#ranking-7 .ranking-table thead th:first-child { width: 60px; }
#ranking-7 .ranking-table thead th:nth-child(2) { width: auto; }
#ranking-7 .ranking-table thead th:nth-child(3) { width: 110px; }
#ranking-7 .ranking-table thead th:nth-child(4) { width: 130px; }

/* 名人堂行 - 加大高度，更有仪式感 */
#ranking-7 .ranking-table tbody tr {
    height: 68px;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#ranking-7 .ranking-table tbody tr:hover {
    transform: translateX(4px);
}

/* 排名数字 - 前三名特殊 */
#ranking-7 .ranking-table .rank-num.rank-1 {
    background: linear-gradient(135deg, #F5B342, #ffd480);
    color: #1a1a2e;
    box-shadow: 0 0 16px rgba(245, 179, 66, 0.4);
    font-weight: 800;
}
#ranking-7 .ranking-table .rank-num.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #1a1a2e;
    box-shadow: 0 0 12px rgba(192, 192, 192, 0.3);
    font-weight: 700;
}
#ranking-7 .ranking-table .rank-num.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #daa06d);
    color: #1a1a2e;
    box-shadow: 0 0 12px rgba(205, 127, 50, 0.3);
    font-weight: 700;
}
#ranking-7 .hof-cat-boss {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.08));
    color: #f87171;
    border-color: rgba(248, 113, 113, 0.3);
}
#ranking-7 .hof-cat-level {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.08));
    color: #4ade80;
    border-color: rgba(74, 222, 128, 0.3);
}
#ranking-7 .hof-cat-skill {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.08));
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.3);
}
#ranking-7 .hof-cat-gold {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.08));
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.1);
}
#ranking-7 .hof-cat-season {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(168, 85, 247, 0.08));
    color: #c084fc;
    border-color: rgba(192, 132, 252, 0.3);
}
#ranking-7 .hof-cat-contribute {
    background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(244, 114, 182, 0.08));
    color: #f472b6;
    border-color: rgba(244, 114, 182, 0.3);
}
#ranking-7 .hof-cat-record {
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(251, 146, 60, 0.08));
    color: #fb923c;
    border-color: rgba(251, 146, 60, 0.3);
}

/* 日期列 - 更精致 */
#ranking-7 .ranking-table tbody td:last-child {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

/* 空状态升级 */
#ranking-7 .hall-of-fame-empty {
    background: linear-gradient(135deg, rgba(245,179,66,0.04) 0%, rgba(18,19,26,0.6) 100%);
    border: 1px solid rgba(245,179,66,0.12);
    border-radius: 16px;
    padding: 60px 40px;
}


/* ============================================================
   名人堂 - 三项修复：宽度对齐 / 分类居中 / 日期右对齐
   ============================================================ */
/* 表格容器左右内边距，与 tabs 对齐 */
#ranking-7 .ranking-table-wrap {
    padding-left: 20px !important;
    padding-right: 20px !important;
    width: auto !important;
}
#ranking-7 table.ranking-table {
    width: 100% !important;
}

/* 分类列（第3列）居中对齐 */
#ranking-7 .ranking-table thead th:nth-child(3),
#ranking-7 .ranking-table tbody td:nth-child(3) {
    text-align: center !important;
}

/* 日期列（第4列）右对齐 */
#ranking-7 .ranking-table thead th:nth-child(4),
#ranking-7 .ranking-table tbody td:nth-child(4) {
    text-align: right !important;
    padding-right: 16px !important;
}

/* ============================================================
   名人堂 - 荣耀殿堂（奢华卡片版）
   ============================================================ */

/* 名人堂标题区 */
.hof-header {
    text-align: center;
    margin-bottom: 32px;
    padding: 32px 0 16px;
}
.hof-header-inner {
    max-width: 600px;
    margin: 0 auto;
}
.hof-title-section {
    margin-bottom: 20px;
}
.hof-title-icon {
    font-size: 2.8rem;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 20px rgba(245, 179, 66, 0.4));
    animation: hof-crown-float 3s ease-in-out infinite;
}
@keyframes hof-crown-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.hof-main-title {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #F5B342 50%, #fff 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 8px;
    margin: 0 0 6px;
    animation: hof-title-shine 4s ease-in-out infinite;
}
@keyframes hof-title-shine {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.hof-sub-title {
    font-size: 0.85rem;
    color: var(--text-muted);
    letter-spacing: 4px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 500;
}
.hof-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}
.hof-divider-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 179, 66, 0.5), transparent);
}
.hof-divider-ornament {
    color: #F5B342;
    font-size: 0.9rem;
    filter: drop-shadow(0 0 6px rgba(245, 179, 66, 0.6));
}
.hof-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.7;
    opacity: 0.8;
}

/* 卡片容器 */
.hof-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 成就卡片 */
.hof-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 28px 20px 24px;
    background: linear-gradient(135deg, rgba(20, 22, 30, 0.85) 0%, rgba(15, 16, 22, 0.9) 100%);
    border: 1px solid rgba(245, 179, 66, 0.15);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(8px);
}
.hof-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 179, 66, 0.4) 50%, transparent 100%);
}
.hof-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 100%;
    background: radial-gradient(ellipse at right center, rgba(245, 179, 66, 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.hof-card:hover {
    transform: translateY(-3px) translateX(2px);
    border-color: rgba(245, 179, 66, 0.4);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 0 30px rgba(245, 179, 66, 0.08);
}
.hof-card-corner.tl { top: 6px; left: 6px; }
.hof-card-corner.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.hof-card-corner.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.hof-card-corner.br { bottom: 6px; right: 6px; transform: scale(-1); }

/* 排名编号 */
.hof-card-rank {
    width: 40px;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}
.hof-rank-num.rank-1 {
    background: linear-gradient(135deg, #F5B342, #ffd480);
    color: #1a1a2e;
    border: none;
    box-shadow: 0 0 16px rgba(245, 179, 66, 0.5);
    font-size: 0.9rem;
}
.hof-rank-num.rank-2 {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #1a1a2e;
    border: none;
    box-shadow: 0 0 12px rgba(192, 192, 192, 0.3);
}
.hof-rank-num.rank-3 {
    background: linear-gradient(135deg, #cd7f32, #daa06d);
    color: #1a1a2e;
    border: none;
    box-shadow: 0 0 12px rgba(205, 127, 50, 0.3);
}
.hof-card:hover .hof-medal-ring {
    border-color: rgba(245, 179, 66, 0.5);
    box-shadow:
        0 0 28px rgba(245, 179, 66, 0.25),
        inset 0 0 20px rgba(245, 179, 66, 0.1);
}
.hof-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    line-height: 1.3;
    font-family: var(--font-heading);
    letter-spacing: 0.5px;
}
.hof-card-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.5px;
}

/* 分类主题色 - 卡片左边框颜色区分 */
.hof-card-level {
    border-left: 3px solid rgba(74, 222, 128, 0.4);
}
.hof-card-level:hover {
    border-left-color: #4ade80;
}
.hof-card-level .hof-medal-ring {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.18), rgba(74, 222, 128, 0.04));
    border-color: rgba(74, 222, 128, 0.3);
    box-shadow: 0 0 20px rgba(74, 222, 128, 0.12);
}

.hof-card-boss {
    border-left: 3px solid rgba(248, 113, 113, 0.4);
}
.hof-card-boss:hover {
    border-left-color: #f87171;
}
.hof-card-boss .hof-medal-ring {
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.18), rgba(248, 113, 113, 0.04));
    border-color: rgba(248, 113, 113, 0.3);
    box-shadow: 0 0 20px rgba(248, 113, 113, 0.12);
}

.hof-card-skill {
    border-left: 3px solid rgba(96, 165, 250, 0.4);
}
.hof-card-skill:hover {
    border-left-color: #60a5fa;
}
.hof-card-skill .hof-medal-ring {
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(96, 165, 250, 0.04));
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 0 20px rgba(96, 165, 250, 0.12);
}

.hof-card-gold {
    border-left: 3px solid rgba(251, 191, 36, 0.5);
}
.hof-card-gold:hover {
    border-left-color: #fbbf24;
}
.hof-card-gold .hof-medal-ring {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05));
    border-color: rgba(251, 191, 36, 0.35);
    box-shadow: 0 0 24px rgba(251, 191, 36, 0.15);
}

.hof-card-season {
    border-left: 3px solid rgba(192, 132, 252, 0.4);
}
.hof-card-season:hover {
    border-left-color: #c084fc;
}
.hof-card-season .hof-medal-ring {
    background: linear-gradient(135deg, rgba(192, 132, 252, 0.18), rgba(192, 132, 252, 0.04));
    border-color: rgba(192, 132, 252, 0.3);
    box-shadow: 0 0 20px rgba(192, 132, 252, 0.12);
}

.hof-card-contribute {
    border-left: 3px solid rgba(244, 114, 182, 0.4);
}
.hof-card-contribute:hover {
    border-left-color: #f472b6;
}

.hof-card-record {
    border-left: 3px solid rgba(251, 146, 60, 0.4);
}
.hof-card-record:hover {
    border-left-color: #fb923c;
}

/* 前三名卡片特殊强化 */
.hof-card:has(.hof-rank-num.rank-1) {
    background: linear-gradient(135deg, rgba(40, 35, 20, 0.9) 0%, rgba(20, 22, 30, 0.95) 100%);
    border-color: rgba(245, 179, 66, 0.35);
}
.hof-card:has(.hof-rank-num.rank-1) .hof-card-title {
    background: linear-gradient(135deg, #fff, #F5B342);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 响应式 */
@media (max-width: 768px) {
    .hof-main-title {
        font-size: 1.6rem;
        letter-spacing: 4px;
    }
    .hof-card {
        padding: 16px 18px;
        gap: 14px;
    }
    .hof-card-rank {
        width: 32px;
    }
    .hof-card-title {
        font-size: 0.95rem;
    }
    .hof-card-date {
        font-size: 0.72rem;
    }
}
@media (max-width: 480px) {
    .hof-card {
        flex-wrap: wrap;
    }
}

/* ============================================================
   名人堂 v2 - 纪录保持者 + 稀有度 + 历史丰碑
   ============================================================ */

/* 当前纪录保持者 */
.hof-records-wrap {
    margin-bottom: 40px;
    text-align: center;
}
.hof-records-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.hof-records-icon {
    font-size: 1.4rem;
    filter: drop-shadow(0 0 10px rgba(245, 179, 66, 0.5));
}
.hof-records-label {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 3px;
}
.hof-records-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    opacity: 0.6;
    text-transform: uppercase;
}

.hof-records-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.hof-record-card {
    position: relative;
    padding: 28px 20px 20px;
    background: linear-gradient(180deg, rgba(30, 28, 22, 0.9) 0%, rgba(18, 19, 26, 0.95) 100%);
    border: 1px solid rgba(245, 179, 66, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(8px);
}
.hof-record-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(245, 179, 66, 0.6) 50%, transparent 100%);
}
.hof-record-card:hover {
    transform: translateY(-5px);
    border-color: rgba(245, 179, 66, 0.5);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 40px rgba(245, 179, 66, 0.1);
}
@keyframes record-glow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

.hof-record-category {
    font-size: 0.78rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.hof-record-value {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff, #F5B342);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.hof-record-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #F5B342;
    text-shadow: 0 0 12px rgba(245, 179, 66, 0.25);
    letter-spacing: 0.5px;
}

/* 纪录卡主题色 */
.hof-record-card.record-level::before {
    background: linear-gradient(90deg, transparent 0%, rgba(74, 222, 128, 0.7) 50%, transparent 100%);
}
.hof-record-card.record-level .hof-record-value {
    background: linear-gradient(135deg, #fff, #4ade80);
    -webkit-background-clip: text;
    background-clip: text;
}
.hof-record-card.record-level .hof-record-crown-glow {
    background: radial-gradient(circle, rgba(74, 222, 128, 0.2) 0%, transparent 70%);
}
.hof-record-card.record-level:hover {
    border-color: rgba(74, 222, 128, 0.4);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 40px rgba(74, 222, 128, 0.1);
}

.hof-record-card.record-gold::before {
    background: linear-gradient(90deg, transparent 0%, rgba(251, 191, 36, 0.8) 50%, transparent 100%);
}
.hof-record-card.record-gold .hof-record-value {
    background: linear-gradient(135deg, #fff, #fbbf24);
    -webkit-background-clip: text;
    background-clip: text;
}
.hof-record-card.record-gold .hof-record-crown-glow {
    background: radial-gradient(circle, rgba(251, 191, 36, 0.25) 0%, transparent 70%);
}
.hof-record-card.record-gold:hover {
    border-color: rgba(251, 191, 36, 0.5);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 40px rgba(251, 191, 36, 0.12);
}

.hof-record-card.record-power::before {
    background: linear-gradient(90deg, transparent 0%, rgba(192, 132, 252, 0.7) 50%, transparent 100%);
}
.hof-record-card.record-power .hof-record-value {
    background: linear-gradient(135deg, #fff, #c084fc);
    -webkit-background-clip: text;
    background-clip: text;
}
.hof-record-card.record-power .hof-record-crown-glow {
    background: radial-gradient(circle, rgba(192, 132, 252, 0.2) 0%, transparent 70%);
}
.hof-record-card.record-power:hover {
    border-color: rgba(192, 132, 252, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 40px rgba(192, 132, 252, 0.1);
}

/* 历史丰碑分隔标题 */
.hof-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 40px 0 20px;
}
.hof-section-line {
    flex: 1;
    max-width: 200px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 179, 66, 0.3), transparent);
}
.hof-section-text {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 4px;
    white-space: nowrap;
}

/* 稀有度 - 卡片边框和光晕增强 */
.hof-card.rarity-5 {
    border-color: rgba(245, 179, 66, 0.35);
    background: linear-gradient(135deg, rgba(40, 35, 20, 0.85) 0%, rgba(15, 16, 22, 0.9) 100%);
}
.hof-card.rarity-5::before {
    background: linear-gradient(90deg, transparent 0%, rgba(245, 179, 66, 0.6) 50%, transparent 100%);
    height: 2px;
}
.hof-card.rarity-5 .hof-medal-ring {
    border-color: rgba(245, 179, 66, 0.5);
    box-shadow: 0 0 24px rgba(245, 179, 66, 0.2);
}

.hof-card.rarity-4 {
    border-color: rgba(192, 132, 252, 0.25);
}
.hof-card.rarity-4::before {
    background: linear-gradient(90deg, transparent 0%, rgba(192, 132, 252, 0.45) 50%, transparent 100%);
    height: 2px;
}

.hof-card.rarity-3 {
    border-color: rgba(96, 165, 250, 0.2);
}
.hof-card.rarity-3::before {
    background: linear-gradient(90deg, transparent 0%, rgba(96, 165, 250, 0.4) 50%, transparent 100%);
}

.hof-card.rarity-2 {
    border-color: rgba(74, 222, 128, 0.15);
}

.hof-card.rarity-1 {
    border-color: rgba(255, 255, 255, 0.08);
    opacity: 0.85;
}

/* 响应式 - 纪录保持者 */
@media (max-width: 768px) {
    .hof-records-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
        gap: 14px;
    }
    .hof-record-card {
        padding: 20px 16px 16px;
    }
    .hof-record-value {
        font-size: 1.2rem;
    }
    .hof-section-text {
        font-size: 0.85rem;
        letter-spacing: 2px;
    }
}

/* ============================================================
   充值中心视觉升级 · 黯金纪元 · 世界级游戏商城质感
   ============================================================
   升级范围：余额区域 / 支付方式卡片 / 充值套餐卡片 / 充值按钮
   设计语言：多层阴影 · 内发光 · 边框渐变 · 金铢微光 · 光泽扫过
   ============================================================ */

/* ===== 1. 余额区域升级 ===== */
.page-box.reveal-up:first-of-type .page-box-content > div > div:first-child div[style*="font-size: var(--font-size-3xl)"],
.page-box:first-of-type [data-count] {
    /* 金色渐变文字 + 发光效果 */
    background: linear-gradient(
        135deg,
        oklch(92% 0.14 var(--hue-gold)) 0%,
        oklch(82% 0.20 var(--hue-gold)) 25%,
        var(--gold) 50%,
        oklch(68% 0.22 var(--hue-gold)) 75%,
        oklch(78% 0.18 var(--hue-gold)) 100%
    ) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 0 12px oklch(78.5% 0.208 var(--hue-gold) / 0.4));
    animation: gold-shimmer 4s ease-in-out infinite alternate;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    font-family: var(--font-heading), 'Georgia', serif;
}

@keyframes gold-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* 银铢余额 - 冷银色对比 */
.page-box:first-of-type [data-count] + div,
.page-box:first-of-type div[style*="color: var(--text-white)"] {
    background: linear-gradient(
        135deg,
        oklch(96% 0.008 230) 0%,
        oklch(86% 0.01 230) 50%,
        oklch(76% 0.012 230) 100%
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
}

/* 余额标签区域优化 */
.page-box:first-of-type .page-box-content > div {
    padding: 8px 0;
}

/* 金铢图标升级 */
.page-box:first-of-type img[alt="金铢"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
    filter: drop-shadow(0 0 6px rgba(245, 179, 66, 0.6))
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    animation: icon-pulse 3s ease-in-out infinite;
}

/* 银铢图标升级 */
.page-box:first-of-type img[alt="银铢"] {
    width: 20px !important;
    height: 20px !important;
    margin-right: 6px !important;
    filter: drop-shadow(0 0 4px rgba(200, 210, 220, 0.5))
            drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

@keyframes icon-pulse {
    0%, 100% { 
        filter: drop-shadow(0 0 6px rgba(245, 179, 66, 0.6))
                drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    }
    50% { 
        filter: drop-shadow(0 0 10px rgba(245, 179, 66, 0.8))
                drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
    }
}

/* ===== 2. 支付方式卡片升级 ===== */
.method-cards {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
}

.method-card {
    position: relative !important;
    padding: 24px 16px !important;
    gap: 12px !important;
    background: var(--method-card-bg, rgba(25, 25, 30, 0.6)) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* 去除顶部微光，保持简洁 */
.method-card::before {
    display: none !important;
}

/* 去除金色光泽扫过 */
.method-card::after {
    display: none !important;
}

/* 悬停效果：简洁的轻微上浮 + 边框变亮 + 背景微亮 */
.method-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    background: var(--method-card-bg-hover, rgba(35, 35, 42, 0.7)) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3) !important;
}

/* 选中状态：简洁的蓝色/品牌色边框，不用金色游戏风 */
.method-card.selected {
    border-color: rgba(245, 179, 66, 0.5) !important;
    background: var(--method-card-bg-selected, rgba(30, 28, 22, 0.7)) !important;
    box-shadow: 
        0 0 0 1px rgba(245, 179, 66, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* 选中态也去掉流动光效 */
.method-card.selected::before {
    display: none !important;
}

/* 支付方式图标 */
.method-card-icon {
    font-size: 2.25rem !important;
    line-height: 1 !important;
    transition: transform 0.25s ease;
}

.method-card:hover .method-card-icon {
    transform: scale(1.05);
}

.method-card.selected .method-card-icon {
    filter: none;
}

/* 支付方式名称 */
.method-card-name {
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.01em;
    transition: color 0.25s ease;
}

.method-card:hover .method-card-name {
    color: var(--text-primary) !important;
}

.method-card.selected .method-card-name {
    color: var(--gold) !important;
    font-weight: 600 !important;
    text-shadow: none;
}

/* ===== 3. 充值套餐卡片升级 ===== */
.plan-cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 36px !important;
}

.plan-card {
    position: relative !important;
    background: linear-gradient(
        180deg,
        rgba(30, 30, 38, 0.95) 0%,
        rgba(20, 20, 28, 0.98) 60%,
        rgba(16, 16, 22, 1) 100%
    ) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 36px 28px 28px !important;
    text-align: center !important;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    overflow: hidden !important;
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.5),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    cursor: pointer !important;
}

/* 卡片顶部金色光晕 + 金边（合并到 ::before 多层背景） */
.plan-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 140px !important;
    background: 
        /* 顶部金边 */
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(245, 179, 66, 0.3) 30%,
            rgba(245, 179, 66, 0.6) 50%,
            rgba(245, 179, 66, 0.3) 70%,
            transparent 100%
        ) top / 100% 2px no-repeat,
        /* 顶部光晕 */
        radial-gradient(
            ellipse 60% 100% at 50% 0%,
            oklch(78.5% 0.208 var(--hue-gold) / 0.18) 0%,
            oklch(78.5% 0.208 var(--hue-gold) / 0.08) 40%,
            transparent 70%
        ) center top / 100% 100% no-repeat !important;
    opacity: 0.6 !important;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    pointer-events: none !important;
}

/* 光泽扫过效果（使用 ::after） */
.plan-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 55% !important;
    height: 100% !important;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(245, 179, 66, 0.04) 35%,
        rgba(255, 255, 255, 0.08) 48%,
        rgba(245, 179, 66, 0.08) 50%,
        rgba(255, 255, 255, 0.08) 52%,
        rgba(245, 179, 66, 0.04) 65%,
        transparent 100%
    ) !important;
    transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

/* 悬停状态 */
.plan-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(245, 179, 66, 0.4) !important;
    box-shadow: 
        0 20px 48px rgba(0, 0, 0, 0.7),
        0 0 40px rgba(245, 179, 66, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.plan-card:hover::before {
    opacity: 1 !important;
    height: 160px !important;
    background: 
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(245, 179, 66, 0.6) 20%,
            oklch(92% 0.14 var(--hue-gold)) 50%,
            rgba(245, 179, 66, 0.6) 80%,
            transparent 100%
        ) top / 100% 3px no-repeat,
        radial-gradient(
            ellipse 70% 100% at 50% 0%,
            oklch(78.5% 0.208 var(--hue-gold) / 0.25) 0%,
            oklch(78.5% 0.208 var(--hue-gold) / 0.12) 45%,
            transparent 75%
        ) center top / 100% 100% no-repeat !important;
    filter: drop-shadow(0 0 12px rgba(245, 179, 66, 0.3));
}

.plan-card:hover::after {
    left: 150% !important;
}

/* 选中/推荐状态 */
.plan-card.featured {
    border-color: var(--gold) !important;
    background: linear-gradient(
        180deg,
        rgba(40, 35, 20, 0.7) 0%,
        rgba(28, 24, 14, 0.85) 50%,
        rgba(20, 18, 12, 0.95) 100%
    ) !important;
    box-shadow: 
        0 0 0 3px rgba(245, 179, 66, 0.15),
        0 16px 48px rgba(0, 0, 0, 0.6),
        0 0 50px rgba(245, 179, 66, 0.18),
        inset 0 0 30px rgba(245, 179, 66, 0.04) !important;
    transform: translateY(-4px) scale(1.02) !important;
}

.plan-card.featured::before {
    opacity: 1 !important;
    height: 180px !important;
    background: 
        linear-gradient(
            90deg,
            transparent 0%,
            var(--gold) 15%,
            oklch(92% 0.14 var(--hue-gold)) 35%,
            var(--gold) 50%,
            oklch(92% 0.14 var(--hue-gold)) 65%,
            var(--gold) 85%,
            transparent 100%
        ) top / 200% 3px no-repeat,
        radial-gradient(
            ellipse 75% 100% at 50% 0%,
            oklch(78.5% 0.208 var(--hue-gold) / 0.28) 0%,
            oklch(78.5% 0.208 var(--hue-gold) / 0.15) 45%,
            transparent 75%
        ) center top / 100% 100% no-repeat !important;
    filter: drop-shadow(0 0 20px rgba(245, 179, 66, 0.4));
    animation: 
        featured-glow 3s ease-in-out infinite alternate,
        gold-border-flow 2.5s linear infinite !important;
}

@keyframes featured-glow {
    0% { opacity: 0.85; }
    100% { opacity: 1; }
}

@keyframes gold-border-flow {
    0% { background-position: -200% 0, center top; }
    100% { background-position: 200% 0, center top; }
}

.plan-card.featured::after {
    animation: featured-shine 4s ease-in-out infinite !important;
}

@keyframes featured-shine {
    0%, 60% { left: -100%; }
    75%, 100% { left: 150%; }
}

/* 金铢大数字 - 游戏级质感 */
.plan-card-amount {
    position: relative !important;
    font-family: var(--font-heading), 'Georgia', 'Times New Roman', serif !important;
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    margin-bottom: 10px !important;
    z-index: 1 !important;
    background: linear-gradient(
        135deg,
        oklch(94% 0.12 var(--hue-gold)) 0%,
        oklch(88% 0.18 var(--hue-gold)) 15%,
        var(--gold) 35%,
        oklch(72% 0.22 var(--hue-gold)) 55%,
        var(--gold) 75%,
        oklch(86% 0.16 var(--hue-gold)) 100%
    ) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))
            drop-shadow(0 0 18px oklch(78.5% 0.208 var(--hue-gold) / 0.35)) !important;
    animation: amount-shimmer 5s ease-in-out infinite alternate !important;
    letter-spacing: -0.02em;
}

@keyframes amount-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.plan-card:hover .plan-card-amount,
.plan-card.featured .plan-card-amount {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4))
            drop-shadow(0 0 25px oklch(78.5% 0.208 var(--hue-gold) / 0.5)) !important;
}

/* 金铢标签 */
.plan-card-label {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.45) !important;
    margin-bottom: 20px !important;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
}

/* 价格数字 - 更有冲击力 */
.plan-card-price {
    position: relative !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--text-white) !important;
    margin-bottom: 12px !important;
    font-family: var(--font-heading), 'Georgia', serif;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.plan-card-price::before {
    content: '';
    display: block;
    width: 40px;
    height: 1px;
    margin: 0 auto 14px;
    background: linear-gradient(90deg, transparent, rgba(245, 179, 66, 0.4), transparent);
}

/* Bonus 胶囊标签 - 更有质感 */
.plan-card-bonus {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 6px 16px !important;
    background: linear-gradient(
        135deg,
        rgba(245, 179, 66, 0.12) 0%,
        rgba(245, 179, 66, 0.06) 100%
    ) !important;
    border: 1px solid rgba(245, 179, 66, 0.35) !important;
    border-radius: 50px !important;
    font-size: 0.75rem !important;
    color: var(--gold) !important;
    font-weight: 700 !important;
    margin-bottom: 24px !important;
    letter-spacing: 0.05em;
    box-shadow: 
        0 0 12px rgba(245, 179, 66, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
}

.plan-card-bonus::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    animation: bonus-shine 3s ease-in-out infinite;
}

@keyframes bonus-shine {
    0%, 70% { left: -100%; }
    85%, 100% { left: 150%; }
}

/* 首充徽章升级 */
.badge-first-recharge {
    position: relative !important;
    background: linear-gradient(
        135deg,
        oklch(88% 0.18 var(--hue-gold)) 0%,
        var(--gold) 30%,
        oklch(68% 0.22 var(--hue-gold)) 70%,
        var(--gold) 100%
    ) !important;
    background-size: 200% 200% !important;
    color: var(--neutral-950) !important;
    padding: 8px 18px !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    box-shadow: 
        0 0 20px rgba(245, 179, 66, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    animation: badge-glow 2.5s ease-in-out infinite,
               badge-shimmer 4s ease-in-out infinite alternate !important;
    z-index: 2;
    font-family: var(--font-body), sans-serif;
}

@keyframes badge-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

@keyframes badge-glow {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(245, 179, 66, 0.4),
            0 4px 12px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    50% { 
        box-shadow: 
            0 0 32px rgba(245, 179, 66, 0.6),
            0 6px 20px rgba(0, 0, 0, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
}

/* 套餐卡片中的首充徽章位置调整 */
.plan-card .badge-first-recharge {
    top: 16px !important;
    right: 16px !important;
    position: absolute !important;
}

/* ===== 4. 立即充值按钮升级 ===== */
.recharge-section .page-btn,
.page-box form .page-btn {
    position: relative !important;
    min-width: 240px !important;
    padding: 16px 48px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    background: linear-gradient(
        135deg,
        oklch(88% 0.18 var(--hue-gold)) 0%,
        var(--gold) 25%,
        oklch(72% 0.22 var(--hue-gold)) 50%,
        var(--gold) 75%,
        oklch(82% 0.20 var(--hue-gold)) 100%
    ) !important;
    background-size: 200% 200% !important;
    color: #0A0B0D !important;
    border: none !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    box-shadow: 
        0 4px 16px rgba(245, 179, 66, 0.3),
        0 0 24px rgba(245, 179, 66, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
    letter-spacing: 0.05em;
    overflow: hidden !important;
    animation: btn-shimmer 4s ease-in-out infinite alternate;
}

@keyframes btn-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.recharge-section .page-btn::before,
.page-box form .page-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.25) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border-radius: 50px 50px 0 0;
    pointer-events: none;
}

/* 按钮光泽扫过 */
.recharge-section .page-btn::after,
.page-box form .page-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 45%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(255, 255, 255, 0.3) 55%,
        transparent 100%
    );
    transition: left 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.recharge-section .page-btn:hover,
.page-box form .page-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 
        0 8px 28px rgba(245, 179, 66, 0.45),
        0 0 40px rgba(245, 179, 66, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}

.recharge-section .page-btn:hover::after,
.page-box form .page-btn:hover::after {
    left: 150%;
}

.recharge-section .page-btn:active,
.page-box form .page-btn:active {
    transform: translateY(-1px) scale(1.01) !important;
    box-shadow: 
        0 4px 16px rgba(245, 179, 66, 0.35),
        0 0 24px rgba(245, 179, 66, 0.2),
        inset 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ===== 5. 充值区域标题优化 ===== */
.recharge-section-label {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: var(--text-white) !important;
    margin-bottom: 20px !important;
    font-family: var(--font-heading), 'Georgia', serif;
    letter-spacing: 0.03em;
}

.recharge-section-label::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: linear-gradient(180deg, var(--gold), transparent);
    margin-right: 12px;
    vertical-align: middle;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(245, 179, 66, 0.5);
}

/* ===== 6. 页面标题升级 ===== */
.page-title {
    font-family: var(--font-heading), 'Georgia', serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
}

.page-subtitle {
    opacity: 0.7;
}

/* ===== 7. 响应式适配 ===== */
@media (max-width: 992px) {
    .plan-cards {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 18px !important;
    }
    
    .plan-card {
        padding: 28px 20px 22px !important;
    }
    
    .plan-card-amount {
        font-size: 2.25rem !important;
    }
    
    .plan-card-price {
        font-size: 1.75rem !important;
    }
    
    .method-cards {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 14px !important;
    }
    
    .method-card {
        padding: 22px 16px !important;
    }
    
    .method-card-icon {
        font-size: 2rem !important;
    }
}

@media (max-width: 768px) {
    .plan-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
        margin-bottom: 28px !important;
    }
    
    .plan-card {
        padding: 24px 16px 18px !important;
        border-radius: 16px !important;
    }
    
    .plan-card-amount {
        font-size: 1.75rem !important;
    }
    
    .plan-card-price {
        font-size: 1.5rem !important;
    }
    
    .plan-card-label {
        font-size: 0.7rem !important;
        margin-bottom: 14px !important;
    }
    
    .plan-card-bonus {
        padding: 4px 10px !important;
        font-size: 0.65rem !important;
        margin-bottom: 18px !important;
    }
    
    .plan-card.featured {
        transform: translateY(-2px) !important;
    }
    
    .plan-card:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }
    
    .method-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        margin-bottom: 24px !important;
    }
    
    .method-card {
        padding: 18px 12px !important;
        gap: 10px !important;
    }
    
    .method-card-icon {
        font-size: 1.75rem !important;
    }
    
    .method-card-name {
        font-size: 0.8rem !important;
    }
    
    .recharge-section .page-btn,
    .page-box form .page-btn {
        min-width: 200px !important;
        padding: 14px 36px !important;
        font-size: 0.95rem !important;
    }
    
    .badge-first-recharge {
        padding: 6px 14px !important;
        font-size: 0.65rem !important;
        letter-spacing: 1px !important;
    }
    
    .plan-card .badge-first-recharge {
        top: 12px !important;
        right: 12px !important;
    }
}

@media (max-width: 480px) {
    .plan-cards {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    
    .plan-card {
        padding: 28px 24px 20px !important;
    }
    
    .plan-card-amount {
        font-size: 2.5rem !important;
    }
    
    .plan-card-price {
        font-size: 1.75rem !important;
    }
    
    .method-cards {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .recharge-section .page-btn,
    .page-box form .page-btn {
        width: 100% !important;
        min-width: unset !important;
    }
}

/* ===== 8. 减少动效偏好（无障碍） ===== */
@media (prefers-reduced-motion: reduce) {
    .plan-card-amount,
    .page-box:first-of-type [data-count],
    .badge-first-recharge,
    .recharge-section .page-btn,
    .page-box form .page-btn,
    .page-box:first-of-type img[alt="金铢"] {
        animation: none !important;
    }
    
    .plan-card.featured::after,
    .method-card.selected::before {
        animation: none !important;
    }
    
    .plan-card-bonus::before {
        animation: none !important;
    }
    
    .plan-card,
    .method-card,
    .recharge-section .page-btn,
    .page-box form .page-btn {
        transition: all 0.15s ease !important;
    }
}

/* ============ [v4.0.0 合并段 2/5] design-upgrade-v2.css ============ */
/* ============================================
   帝国史诗 v2.0 — 组件级视觉升级
   ============================================ */

/* ---- 玻璃卡片菲涅尔效应 + 微肌理 ---- */
.glass-card,
.page-box,
.dashboard-stat-card,
.feature-card {
    position: relative;
    isolation: isolate;
}

.glass-card::before,
.page-box::before,
.dashboard-stat-card::before,
.feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        ellipse at 30% 20%,
        oklch(100% 0 0 / 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

.glass-card::after,
.page-box::after,
.dashboard-stat-card::after,
.feature-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image:
        radial-gradient(
            circle at 20% 30%,
            oklch(100% 0 0 / 0.03) 0%,
            transparent 50%
        ),
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 2px,
            oklch(100% 0 0 / 0.01) 2px,
            oklch(100% 0 0 / 0.01) 3px
        );
    pointer-events: none;
    z-index: 1;
}

/* 卡片内容层级 */
.glass-card > *,
.page-box > *,
.dashboard-stat-card > *,
.feature-card > * {
    position: relative;
    z-index: 2;
}

/* ---- Hero 标题金属对冲渐变 + 流光 ---- */
.hero-title,
.hero-galaxy h1,
.hero-container h1 {
    background: linear-gradient(
        135deg,
        var(--gold-200) 0%,
        var(--gold-400) 25%,
        var(--gold-500) 45%,
        var(--purple-300) 70%,
        var(--purple-400) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: metallic-flow 8s ease-in-out infinite alternate;
    filter: drop-shadow(0 20px 60px oklch(78.5% 0.25 var(--hue-gold) / 0.2));
}

@keyframes metallic-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Hero 紫色环境光 */
.hero-galaxy::before,
.hero-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 70% 30%,
        oklch(50% 0.20 var(--hue-purple) / 0.20) 0%,
        oklch(30% 0.10 var(--hue-purple) / 0.05) 50%,
        transparent 80%
    );
    pointer-events: none;
    z-index: 0;
}

/* ---- 金色按钮流光扫过 ---- */
.btn-primary,
.btn-gold,
button[type="submit"],
.page-btn.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.25s var(--ease-spring);
}

.btn-primary::before,
.btn-gold::before,
button[type="submit"]::before,
.page-btn.btn-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        oklch(100% 0 0 / 0.15) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.btn-primary:hover::before,
.btn-gold:hover::before,
button[type="submit"]:hover::before,
.page-btn.btn-primary:hover::before {
    transform: translateX(100%);
}

.btn-primary:hover,
.btn-gold:hover,
.page-btn.btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 40px 10px oklch(85% 0.25 var(--hue-gold) / 0.3);
}

.btn-primary:active,
.btn-gold:active,
.page-btn.btn-primary:active {
    transform: translateY(0px) scale(0.97);
}

/* ---- 金色脉冲辉光 ---- */
@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 30px 5px oklch(78.5% 0.208 var(--hue-gold) / 0.2);
    }
    50% {
        box-shadow: 0 0 60px 25px oklch(85% 0.25 var(--hue-gold) / 0.4);
    }
    100% {
        box-shadow: 0 0 30px 5px oklch(78.5% 0.208 var(--hue-gold) / 0.2);
    }
}

/* ---- 丝绸流光质感 ---- */
@keyframes fluid-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* ---- 导航链接下划线增强 ---- */
.navbar a.nav-link::after {
    box-shadow: 0 0 10px oklch(78.5% 0.208 var(--hue-gold) / 0.5);
}

@keyframes divider-pulse {
    0% { left: -30%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* ---- 特色卡片悬停金色辉光 ---- */
.feature-card:hover {
    border-color: var(--gold-400);
    box-shadow:
        0 0 40px 10px oklch(85% 0.25 var(--hue-gold) / 0.2),
        0 24px 80px oklch(0% 0 0 / 0.3);
}

/* ---- 滚动条金色美化增强 ---- */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-400), var(--gold-600));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
    box-shadow: 0 0 10px oklch(78.5% 0.208 var(--hue-gold) / 0.4);
}

/* ---- 选中文本金色 ---- */
::selection {
    background: oklch(78.5% 0.208 var(--hue-gold) / 0.3);
    color: var(--text-headline);
}

/* ---- 聚焦环统一 ---- */
*:focus-visible {
    outline: 2px solid var(--state-focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ---- 亮模式支持 ---- */
.light-mode {
    --bg-app: var(--neutral-50);
    --bg-surface-1: var(--neutral-100);
    --bg-surface-2: var(--neutral-200);
    --bg-surface-3: oklch(88% 0.02 var(--hue-purple));

    --text-headline: var(--neutral-950);
    --text-body: var(--neutral-800);
    --text-subtle: var(--neutral-500);
    --text-on-gold: var(--neutral-50);

    --bg-glass-default: oklch(98% 0.02 var(--hue-gold) / 0.55);
    --bg-glass-hover: oklch(100% 0 0 / 0.75);
    --bg-glass-border: oklch(80% 0.04 var(--hue-gold) / 0.20);

    --gold: oklch(72% 0.15 var(--hue-gold));
    --gold-400: oklch(70% 0.14 var(--hue-gold));
    --gold-light: oklch(82% 0.12 var(--hue-gold));

    --btn-gold-bg: oklch(72% 0.15 var(--hue-gold));
    --btn-gold-hover: oklch(78% 0.16 var(--hue-gold));
    --btn-gold-active: oklch(65% 0.18 var(--hue-gold));
    --btn-gold-text: var(--neutral-50);

    --input-bg: oklch(96% 0.01 var(--neutral-hue));
    --input-border: oklch(80% 0.02 var(--neutral-hue));

    --shadow-heavy: 0 20px 60px oklch(0% 0 0 / 0.06);
}

/* ---- 主题切换按钮 ---- */
.theme-toggle {
    width: 56px;
    height: 30px;
    background: var(--neutral-700);
    border-radius: 30px;
    position: relative;
    cursor: pointer;
    transition: background 0.4s ease;
    border: 1px solid var(--bg-glass-border);
    flex-shrink: 0;
}

.theme-toggle.active {
    background: var(--gold-600);
    box-shadow: 0 0 20px oklch(78.5% 0.208 var(--hue-gold) / 0.3);
}

.theme-toggle .knob {
    width: 24px;
    height: 24px;
    background: var(--neutral-100);
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 0.4s var(--ease-spring);
    box-shadow: 0 2px 12px oklch(0% 0 0 / 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.theme-toggle.active .knob {
    left: 28px;
    background: var(--neutral-0);
    box-shadow: 0 0 20px oklch(100% 0 0 / 0.4);
}

/* ---- 页脚服务器时间（右下角小字体） ---- */
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.footer-server-time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-disabled);
    letter-spacing: 0.03em;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.footer-server-time:hover {
    opacity: 1;
}

.footer-server-time .time-value {
    white-space: nowrap;
}

.footer-server-time .st-date {
    color: var(--text-disabled);
    font-weight: 400;
}

.footer-server-time .st-time {
    color: var(--gold-muted);
    font-weight: 500;
    letter-spacing: 0.05em;
}

.footer-server-time .st-tz {
    font-size: 0.6rem;
    color: var(--text-disabled);
    padding: 1px 4px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .footer-bottom {
        justify-content: center;
        text-align: center;
    }
    .footer-server-time {
        width: 100%;
        text-align: center;
    }
}

/* ---- 扫码支付区域 ---- */
.scanpay-section {
    position: relative;
    overflow: hidden;
}
.scanpay-section::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(
        circle,
        oklch(78.5% 0.208 var(--hue-gold) / 0.08) 0%,
        transparent 70%
    );
    pointer-events: none;
}
.pay-icon-wechat,
.scanpay-title-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px oklch(70% 0.2 145 / 0.3));
}
.scanpay-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    background: oklch(0% 0 0 / 0.2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.scanpay-method {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}
.scanpay-method:hover {
    transform: translateY(-2px);
    border-color: var(--gold-400);
}
.spm-icon,
.spm-icon-img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: block;
}
.scanpay-method:nth-child(1) .spm-icon,
.scanpay-method:nth-child(1) .spm-icon-img {
    filter: drop-shadow(0 0 8px oklch(70% 0.2 145 / 0.35));
}
.scanpay-method:nth-child(3) .spm-icon.alipay,
.scanpay-method:nth-child(3) .spm-icon-img {
    filter: drop-shadow(0 0 8px oklch(65% 0.2 250 / 0.35));
}
.scanpay-method span {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-body);
}
.scanpay-divider {
    font-size: 1.2rem;
    color: var(--text-disabled);
    font-weight: 300;
}

/* ---- 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    .hero-title,
    .hero-galaxy h1,
    .hero-container h1 {
        animation: none;
    }

    @keyframes metallic-flow {
        0%, 100% { background-position: 0% 50%; }
    }
}

/* ============================================
   支付方式图标升级 (simpleicons CDN)
   ============================================ */
.method-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all var(--transition-normal, 0.3s ease);
}

.method-card-icon img {
    width: 32px;
    height: 32px;
    display: block;
}

.method-icon-wechat {
    background: rgba(7, 193, 96, 0.08);
    border-color: rgba(7, 193, 96, 0.2);
}

.method-icon-alipay {
    background: rgba(22, 119, 255, 0.08);
    border-color: rgba(22, 119, 255, 0.2);
}

.method-card.selected .method-icon-wechat {
    background: rgba(7, 193, 96, 0.15);
    border-color: rgba(7, 193, 96, 0.4);
    box-shadow: 0 0 20px rgba(7, 193, 96, 0.15);
}

.method-card.selected .method-icon-alipay {
    background: rgba(22, 119, 255, 0.15);
    border-color: rgba(22, 119, 255, 0.4);
    box-shadow: 0 0 20px rgba(22, 119, 255, 0.15);
}

.method-card-desc {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-muted, #888);
    margin-top: -8px;
    letter-spacing: 0.5px;
}

/* 二维码占位区图标 */
.qr-placeholder-icon {
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    margin-bottom: 20px;
}

.qr-placeholder-icon img {
    width: 56px;
    height: 56px;
    display: block;
}

.qr-icon-wechat {
    background: rgba(7, 193, 96, 0.1);
    border: 2px dashed rgba(7, 193, 96, 0.3);
}

.qr-icon-alipay {
    background: rgba(22, 119, 255, 0.1);
    border: 2px dashed rgba(22, 119, 255, 0.3);
}

/* ============ [v4.0.0 合并段 3/5] theme-v3.css ============ */
/* ============================================================
   歌舞伎町 (KABUKICHO) — Theme v3.1「黯金纪元」
   ============================================================
   主题覆盖层：在 v2 基础上替换沉郁史诗调色板
   设计语言：深空极黑 + 古铜金 + 深靛紫 + 冷灰中层
   风格基准：暗黑破坏神 IV / 艾尔登法环 / 沉郁史诗感
   核心升级：低饱和高级色 · 克制发光 · 冷灰过渡 · 金属反光质感
   ============================================================
   使用方式：在 style.css 和 design-upgrade-v2.css 之后引入
   <link rel="stylesheet" href="/css/theme-v3.css">
   ============================================================ */

@layer theme-v3-tokens, theme-v3-components, theme-v3-overrides;

/* ============================================================
   @layer theme-v3-tokens — 沉郁史诗调色板（覆盖 v2 令牌）
   ============================================================ */
@layer theme-v3-tokens {
  :root {
    /* ===== 品牌主色相（沉郁史诗 · 古铜金 + 深靛紫）===== */
    --hue-gold: 56;       /* 古铜金 — 偏红棕调，非亮黄 */
    --hue-purple: 266;    /* 深靛紫 — 偏蓝靛调，非艳紫 */
    --hue-teal: 188;      /* 深青色 — 冷色平衡，增加克制感 */
    --neutral-hue: 230;   /* 冷灰调 — 微蓝紫，避免死灰也避免艳紫 */

    /* ===== 金色系 · 古铜金（低饱和 · 沉郁高级感）===== */
    --gold-base-l: 65%;
    --gold-base-c: 0.16;
    --gold: oklch(var(--gold-base-l) var(--gold-base-c) var(--hue-gold));   /* 主金 — 古铜色 */
    --gold-light: oklch(80% 0.10 60);
    --gold-dark: oklch(49% 0.14 52);
    --gold-muted: oklch(57% 0.155 54);
    --gold-rose: oklch(58% 0.12 55);

    /* 金色色阶（沉郁版 · 显式定义确保低饱和）*/
    --gold-50:  oklch(94% 0.025 65);
    --gold-100: oklch(88% 0.06 62);
    --gold-200: oklch(80% 0.10 60);
    --gold-300: oklch(72% 0.14 58);
    --gold-400: oklch(65% 0.16 56);
    --gold-500: oklch(57% 0.155 54);
    --gold-600: oklch(49% 0.14 52);
    --gold-700: oklch(41% 0.12 50);
    --gold-800: oklch(33% 0.09 48);
    --gold-900: oklch(25% 0.06 45);

    /* ===== 紫色系 · 深靛紫（低饱和 · 紫罗兰调）===== */
    --purple: oklch(47% 0.17 264);
    --purple-light: oklch(64% 0.16 268);
    --purple-dark: oklch(33% 0.12 260);
    --purple-muted: oklch(55% 0.08 265);

    --purple-50:  oklch(92% 0.03 275);
    --purple-100: oklch(84% 0.07 272);
    --purple-200: oklch(74% 0.12 270);
    --purple-300: oklch(64% 0.16 268);
    --purple-400: oklch(55% 0.18 266);
    --purple-500: oklch(47% 0.17 264);
    --purple-600: oklch(40% 0.15 262);
    --purple-700: oklch(33% 0.12 260);
    --purple-800: oklch(26% 0.09 258);
    --purple-900: oklch(19% 0.06 255);

    /* ===== 深青色系 · 冷色平衡（新增 v3）===== */
    --teal-50:  oklch(94% 0.03 195);
    --teal-100: oklch(86% 0.06 192);
    --teal-200: oklch(76% 0.10 190);
    --teal-300: oklch(66% 0.13 188);
    --teal-400: oklch(56% 0.14 186);
    --teal-500: oklch(48% 0.13 184);
    --teal-600: oklch(40% 0.11 182);
    --teal-700: oklch(33% 0.09 180);
    --teal-800: oklch(26% 0.07 178);
    --teal-900: oklch(19% 0.05 176);

    /* ===== 金属质感色阶（沉郁版）===== */
    --metal-iron:     oklch(36% 0.008 230);
    --metal-bronze:   oklch(58% 0.12 55);
    --metal-silver:   oklch(72% 0.008 230);
    --metal-gold:     var(--gold-400);
    --metal-platinum: oklch(82% 0.008 220);
    --metal-obsidian: oklch(20% 0.01 240);

    /* ===== 语义化功能色（沉郁化）===== */
    --color-success-base: oklch(55% 0.13 150);
    --color-success-soft: oklch(66% 0.08 150 / 0.15);
    --color-success-strong: oklch(42% 0.14 148);
    --color-warning-base: oklch(62% 0.14 62);
    --color-warning-soft: oklch(72% 0.09 65 / 0.12);
    --color-error-base: oklch(48% 0.14 28);
    --color-error-strong: oklch(35% 0.15 25);
    --color-info-base: oklch(55% 0.12 240);
    --color-red-orange: oklch(48% 0.14 28);
    --color-ice-blue: oklch(62% 0.10 230);

    /* ===== 背景层级（沉郁深空）===== */
    --bg-app: oklch(10% 0.012 240);
    --bg-surface-1: oklch(14% 0.014 235);
    --bg-surface-2: oklch(20% 0.018 230);
    --bg-surface-3: oklch(26% 0.022 250);

    /* 毛玻璃（冷调半透，克制）*/
    --bg-glass-default: oklch(28% 0.02 230 / 0.4);
    --bg-glass-hover: oklch(34% 0.03 235 / 0.5);
    --bg-glass-border: oklch(50% 0.04 230 / 0.2);

    /* 输入框（沉郁）*/
    --input-bg: oklch(16% 0.015 230 / 0.7);
    --input-border: oklch(38% 0.025 230 / 0.5);
    --input-border-focus: var(--gold-500);
    --input-ring: oklch(57% 0.155 54 / 0.25);

    /* ===== 文本层级 ===== */
    --text-headline: oklch(94% 0.008 230);
    --text-body: oklch(82% 0.012 230);
    --text-subtle: oklch(62% 0.014 230);
    --text-disabled: oklch(45% 0.01 230);
    --text-on-gold: oklch(15% 0.02 50);
    --text-on-glass: var(--neutral-50);
    --text-gold: var(--gold-300);
    --text-rose: var(--gold-500);

    /* ===== 发光效果（克制版）===== */
    --glow-gold-sm: 0 0 8px oklch(57% 0.155 54 / 0.25);
    --glow-gold-md: 0 0 16px oklch(57% 0.155 54 / 0.2);
    --glow-gold-lg: 0 0 32px oklch(57% 0.155 54 / 0.15);
    --glow-purple-sm: 0 0 8px oklch(47% 0.17 264 / 0.2);
    --glow-purple-md: 0 0 16px oklch(47% 0.17 264 / 0.15);

    /* ===== 按钮交互令牌（沉郁版）===== */
    --btn-gold-bg: var(--gold-500);
    --btn-gold-hover: var(--gold-400);
    --btn-gold-active: var(--gold-600);
    --btn-gold-disabled: oklch(45% 0.08 55);
    --btn-gold-text: oklch(15% 0.02 50);
    --btn-gold-text-disabled: var(--neutral-600);

    --btn-glass-bg: var(--bg-glass-default);
  }
}

/* ============================================================
   @layer theme-v3-components — 组件级视觉升级
   ============================================================ */
@layer theme-v3-components {

  /* ===== 导航栏（沉郁毛玻璃）===== */
  .navbar {
    background: oklch(14% 0.014 235 / 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid oklch(40% 0.03 230 / 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .navbar.scrolled {
    background: oklch(12% 0.012 235 / 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid oklch(50% 0.04 55 / 0.15);
    box-shadow: 0 4px 30px oklch(0% 0 0 / 0.4);
  }

  /* Logo 金色调整为古铜金 */
  .nav-logo-icon svg path[stroke*="navMangoBase"],
  .nav-logo-icon svg stop[stop-color="#F2D68A"] { stop-color: #D4A55A; }
  .nav-logo-icon svg stop[stop-color="#D4A847"] { stop-color: #B8860B; }
  .nav-logo-icon svg stop[stop-color="#B8893A"] { stop-color: #8B6914; }

  .nav-logo-main {
    background: linear-gradient(135deg, var(--gold-200), var(--gold-400), var(--gold-500));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* 导航菜单项 */
  .nav-menu a {
    color: var(--text-subtle);
    transition: color 0.3s ease;
    position: relative;
  }

  .nav-menu a:hover {
    color: var(--gold-300);
  }

  .nav-menu a.active {
    color: var(--gold-300);
  }

  .nav-menu a.active::after {
    background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
    opacity: 0.6;
  }

  /* 注册按钮（古铜金）*/
  .btn-nav-solid {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--btn-gold-text);
    border: 1px solid oklch(57% 0.155 54 / 0.4);
    box-shadow: var(--glow-gold-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-nav-solid:hover {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    box-shadow: var(--glow-gold-md);
    transform: translateY(-1px);
  }

  /* 用户下拉菜单 */
  .dropdown-menu {
    background: oklch(18% 0.02 230 / 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--bg-glass-border);
    box-shadow: 0 20px 60px oklch(0% 0 0 / 0.5);
  }

  .dropdown-menu a:hover {
    background: oklch(57% 0.155 54 / 0.1);
    color: var(--gold-300);
  }

  .dropdown-divider {
    border-color: oklch(40% 0.03 230 / 0.3);
  }

  /* ===== 玻璃卡片（沉郁克制版）===== */
  .glass-card,
  .page-box,
  .dashboard-stat-card,
  .feature-card {
    background: oklch(22% 0.02 230 / 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid oklch(45% 0.035 230 / 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .glass-card:hover,
  .page-box:hover,
  .dashboard-stat-card:hover,
  .feature-card:hover {
    border-color: oklch(57% 0.155 54 / 0.25);
    box-shadow: 0 8px 40px oklch(0% 0 0 / 0.3),
                0 0 20px oklch(57% 0.155 54 / 0.08);
    transform: translateY(-2px);
  }

  /* 菲涅尔光（克制版）*/
  .glass-card::before,
  .page-box::before,
  .dashboard-stat-card::before,
  .feature-card::before {
    background: radial-gradient(
        ellipse at 30% 15%,
        oklch(100% 0 0 / 0.05) 0%,
        transparent 55%
    );
  }

  /* ===== Hero 金属文字（沉郁古铜版）===== */
  .hero-title,
  .hero-galaxy h1,
  .hero-container h1 {
    background: linear-gradient(
        135deg,
        var(--gold-200) 0%,
        var(--gold-400) 25%,
        var(--gold-500) 45%,
        var(--gold-600) 55%,
        var(--purple-400) 80%,
        var(--purple-500) 100%
    );
    filter: drop-shadow(0 15px 40px oklch(57% 0.155 54 / 0.15));
    animation-duration: 10s;
  }

  /* Hero 紫色环境光（克制）*/
  .hero-galaxy::before,
  .hero-container::before {
    background: radial-gradient(
        circle at 70% 30%,
        oklch(47% 0.17 264 / 0.12) 0%,
        oklch(28% 0.08 260 / 0.04) 50%,
        transparent 75%
    );
  }

  /* ===== 按钮系统（沉郁古铜）===== */
  .btn-primary,
  .btn-gold,
  button.primary {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--btn-gold-text);
    border: 1px solid oklch(57% 0.155 54 / 0.4);
    box-shadow: var(--glow-gold-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-primary:hover,
  .btn-gold:hover,
  button.primary:hover {
    background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
    box-shadow: var(--glow-gold-md);
    transform: translateY(-1px);
  }

  .btn-secondary,
  .btn-purple {
    background: linear-gradient(135deg, var(--purple-500), var(--purple-700));
    border: 1px solid oklch(47% 0.17 264 / 0.4);
    box-shadow: var(--glow-purple-sm);
  }

  .btn-secondary:hover,
  .btn-purple:hover {
    background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
    box-shadow: var(--glow-purple-md);
  }

  /* ===== 表单输入（沉郁版）===== */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea,
  .form-input,
  .input-field {
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-body);
    transition: all 0.3s ease;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  select:focus,
  textarea:focus,
  .form-input:focus,
  .input-field:focus {
    border-color: var(--gold-500);
    box-shadow: 0 0 0 3px oklch(57% 0.155 54 / 0.15),
                var(--glow-gold-sm);
    outline: none;
  }

  /* ===== 徽章（沉郁色）===== */
  .badge-gold {
    background: oklch(57% 0.155 54 / 0.15);
    color: var(--gold-300);
    border: 1px solid oklch(57% 0.155 54 / 0.3);
  }

  .badge-success {
    background: oklch(55% 0.13 150 / 0.15);
    color: oklch(72% 0.12 150);
    border: 1px solid oklch(55% 0.13 150 / 0.3);
  }

  .badge-danger {
    background: oklch(48% 0.14 28 / 0.15);
    color: oklch(68% 0.12 30);
    border: 1px solid oklch(48% 0.14 28 / 0.3);
  }

  /* ===== 表格（沉郁版）===== */
  table.data-table,
  .table thead th {
    border-bottom: 1px solid oklch(40% 0.03 230 / 0.3);
  }

  table.data-table tbody tr,
  .table tbody tr {
    border-bottom: 1px solid oklch(30% 0.02 230 / 0.3);
  }

  table.data-table tbody tr:hover,
  .table tbody tr:hover {
    background: oklch(57% 0.155 54 / 0.04);
  }

  @keyframes metallic-shimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
  }

  /* ===== 页脚（沉郁版）===== */
  .footer {
    background: oklch(12% 0.012 235 / 0.9);
    border-top: 1px solid oklch(40% 0.03 230 / 0.2);
  }

  .footer-links a:hover {
    color: var(--gold-300);
  }

  .footer-bottom {
    border-color: oklch(35% 0.025 230 / 0.3);
  }

  /* ===== 通知铃铛 ===== */
  .bell-badge {
    background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
    color: var(--btn-gold-text);
    box-shadow: var(--glow-gold-sm);
  }

  .bell-badge-admin {
    background: linear-gradient(135deg, var(--purple-400), var(--purple-600));
    box-shadow: var(--glow-purple-sm);
  }

  .notification-panel {
    background: oklch(18% 0.02 230 / 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--bg-glass-border);
    box-shadow: 0 20px 60px oklch(0% 0 0 / 0.5);
  }

  .notif-item:hover {
    background: oklch(57% 0.155 54 / 0.06);
  }

  .notif-item.unread {
    background: oklch(57% 0.155 54 / 0.04);
  }

  .notif-dot {
    background: var(--gold-400);
    box-shadow: 0 0 6px oklch(57% 0.155 54 / 0.5);
  }
}

/* ============================================================
   @layer theme-v3-overrides — 滚动揭示动画 & 响应式
   ============================================================ */
@layer theme-v3-overrides {

  /* ===== 滚动揭示动画（与 shared.js 配合）===== */
  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
  }

  .reveal-up {
    transform: translateY(40px);
  }

  .reveal-left {
    transform: translateX(-40px);
  }

  .reveal-right {
    transform: translateX(40px);
  }

  .reveal-visible {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* 延迟类 */
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
  .reveal-delay-5 { transition-delay: 0.5s; }
  .reveal-delay-6 { transition-delay: 0.6s; }
  /* v34.5 2026-09-20 首页游戏特色扩到 8 卡，补 7/8 号渐显延迟 */
  .reveal-delay-7 { transition-delay: 0.7s; }
  .reveal-delay-8 { transition-delay: 0.8s; }

  /* ===== 减少动效偏好 ===== */
  @media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-up,
    .reveal-left,
    .reveal-right {
      opacity: 1;
      transform: none;
      transition: none;
    }

    .text-metallic,
    .metallic-text,
    .hero-title,
    .hero-galaxy h1,
    .hero-container h1 {
      animation: none;
    }
  }

  /* ===== 焦点可见 ===== */
  *:focus-visible {
    outline: 2px solid var(--gold-400);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px oklch(57% 0.155 54 / 0.15);
    border-radius: 4px;
  }

  /* ===== 移动端菜单按钮 ===== */
  .nav-toggle {
    background: oklch(30% 0.02 230 / 0.6);
    border: 1px solid oklch(50% 0.04 230 / 0.2);
    color: var(--text-body);
    transition: all 0.3s ease;
  }

  .nav-toggle:hover {
    background: oklch(40% 0.03 230 / 0.7);
    border-color: oklch(57% 0.155 54 / 0.3);
    color: var(--gold-300);
  }

  /* ===== 响应式微调 ===== */
  @media (max-width: 768px) {
    .nav-menu {
      background: oklch(16% 0.015 235 / 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid oklch(40% 0.03 230 / 0.2);
    }

    .nav-menu a {
      border-bottom: 1px solid oklch(30% 0.02 230 / 0.3);
    }
  }
}

/* ============ [v4.0.0 合并段 4/5] tokens-axiom-v4.css ============ */
/* ================================================================
   AXIOM · Dark Gold Era — Design Tokens v4.0
   ================================================================
   Brand: AXIOM · KABUKICHO
   Design Philosophy: OLED Pure Black + Luxurious Dark Gold + Apple Precision
   Engine: OKLCH + color-mix + CSS @layer
   Reference: Apple HIG spacing grid, Diablo IV aesthetic sensibility
   ================================================================
   Usage: Load BEFORE style.css for token override precedence
   <link rel="stylesheet" href="/css/tokens-axiom-v4.css">
   ================================================================ */

@layer tokens-axiom {

  :root {
    /* ============================================================
       BRAND IDENTITY
       ============================================================ */
    --axiom-brand-name: "AXIOM";
    --axiom-brand-name-cn: "歌舞伎町";

    /* ============================================================
       COLOR SYSTEM — OLED Pure Black Base
       ============================================================ */

    /* ---- Core Black (OLED True Black) ---- */
    --axiom-black: #050505;
    --axiom-black-soft: #0a0a0c;
    --axiom-black-elevated: #0f0f12;
    --axiom-black-sunken: #030304;

    /* ---- Dark Gold Palette (Low Saturation · Copper-Red Tone) ----
       Primary gold: oklch(78% 0.18 85) — luxurious, not garish
       Uses mix-blend-mode: screen for self-luminous physical quality */
    --axiom-gold: oklch(78% 0.18 85);
    --axiom-gold-hex: #D4A55A; /* Fallback for contrast calculations */

    /* Gold scale (perceptually uniform via OKLCH) */
    --axiom-gold-50:  oklch(94% 0.05 85);
    --axiom-gold-100: oklch(88% 0.10 85);
    --axiom-gold-200: oklch(83% 0.14 85);
    --axiom-gold-300: oklch(78% 0.18 85);   /* primary */
    --axiom-gold-400: oklch(72% 0.20 80);
    --axiom-gold-500: oklch(65% 0.19 75);
    --axiom-gold-600: oklch(55% 0.17 70);
    --axiom-gold-700: oklch(45% 0.14 65);
    --axiom-gold-800: oklch(35% 0.10 60);
    --axiom-gold-900: oklch(25% 0.07 55);

    /* Gold glow variants (atmospheric, for large areas) */
    --axiom-glow-xs: oklch(78% 0.18 85 / 0.08);
    --axiom-glow-sm: oklch(78% 0.18 85 / 0.15);
    --axiom-glow-md: oklch(78% 0.18 85 / 0.25);
    --axiom-glow-lg: oklch(78% 0.18 85 / 0.35);
    --axiom-glow-xl: oklch(78% 0.18 85 / 0.50);

    /* ---- Neutral Grays (Cool, Apple-inspired) ----
       Hue 260: slight blue-violet, avoids flat dead gray */
    --axiom-gray-hue: 260;

    --axiom-gray-50:  oklch(96% 0.006 260);
    --axiom-gray-100: oklch(92% 0.008 260);
    --axiom-gray-200: oklch(84% 0.010 260);
    --axiom-gray-300: oklch(74% 0.012 260);
    --axiom-gray-400: oklch(62% 0.012 260);
    --axiom-gray-500: oklch(52% 0.013 260);
    --axiom-gray-600: oklch(42% 0.013 260);
    --axiom-gray-700: oklch(32% 0.012 260);
    --axiom-gray-800: oklch(22% 0.012 260);
    --axiom-gray-900: oklch(14% 0.013 260);
    --axiom-gray-950: oklch(8% 0.015 260);

    /* ---- Semantic Functional Colors ---- */
    --axiom-success: oklch(70% 0.16 145);
    --axiom-success-soft: oklch(70% 0.16 145 / 0.12);
    --axiom-warning: oklch(78% 0.16 70);
    --axiom-warning-soft: oklch(78% 0.16 70 / 0.12);
    --axiom-error: oklch(60% 0.20 25);
    --axiom-error-soft: oklch(60% 0.20 25 / 0.12);
    --axiom-info: oklch(68% 0.15 245);
    --axiom-info-soft: oklch(68% 0.15 245 / 0.12);

    /* ============================================================
       BACKGROUND LAYER SYSTEM (3D Spatial Hierarchy)
       ============================================================ */
    --bg-app: var(--axiom-black);
    --bg-surface-0: var(--axiom-black-sunken);
    --bg-surface-1: var(--axiom-black-soft);
    --bg-surface-2: var(--axiom-black-elevated);
    --bg-surface-3: oklch(16% 0.015 260);

    /* Glass morphism (very subtle, Apple-style restraint) */
    --axiom-glass-bg: rgba(255, 255, 255, 0.02);
    --axiom-glass-bg-hover: rgba(255, 255, 255, 0.04);
    --axiom-glass-border: rgba(255, 255, 255, 0.04);
    --axiom-glass-border-hover: rgba(255, 255, 255, 0.08);
    --axiom-glass-blur: blur(20px) saturate(180%);

    /* Gold-accented glass (for premium cards) */
    --axiom-gold-glass-bg: oklch(78% 0.18 85 / 0.03);
    --axiom-gold-glass-border: oklch(78% 0.18 85 / 0.08);
    --axiom-gold-glass-border-hover: oklch(78% 0.18 85 / 0.18);

    /* ============================================================
       TYPOGRAPHY SYSTEM (Apple Precision + Luxurious Display)
       ============================================================ */

    /* Font stacks */
    --font-ui: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont,
               'SF Pro Display', 'Segoe UI', sans-serif;
    --font-body: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont,
                 'SF Pro Text', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace;
    --font-display: 'Cinzel Decorative', 'Georgia', 'Times New Roman', serif;
    --font-cn: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;

    /* Type scale — Apple-inspired 1.250 (Major Third) ratio */
    --text-xs:    0.75rem;   /* 12px */
    --text-sm:    0.875rem;  /* 14px */
    --text-base:  1rem;      /* 16px */
    --text-lg:    1.125rem;  /* 18px */
    --text-xl:    1.25rem;   /* 20px */
    --text-2xl:   1.5rem;    /* 24px */
    --text-3xl:   1.875rem;  /* 30px */
    --text-4xl:   2.25rem;   /* 36px */
    --text-5xl:   3rem;      /* 48px */
    --text-6xl:   3.75rem;   /* 60px */
    --text-7xl:   4.5rem;    /* 72px */

    /* Line heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;  /* Apple standard body text */
    --leading-loose: 2;

    /* Letter spacing */
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* Font weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    --font-black: 900;

    /* ============================================================
       SPACING SYSTEM (8px Grid · Apple HIG Standard)
       ============================================================ */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;   /* Standard page-box padding */
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ============================================================
       BORDER RADIUS (Apple-inspired soft corners)
       ============================================================ */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ============================================================
       SHADOW SYSTEM (Layered, Apple-style subtlety)
       ============================================================ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-2xl: 0 24px 80px rgba(0, 0, 0, 0.8);

    /* Gold glow shadows (atmospheric, use sparingly) */
    --shadow-gold-sm: 0 0 16px oklch(78% 0.18 85 / 0.15);
    --shadow-gold-md: 0 0 32px oklch(78% 0.18 85 / 0.2);
    --shadow-gold-lg: 0 0 60px oklch(78% 0.18 85 / 0.25);
    --shadow-gold-xl: 0 0 100px oklch(78% 0.18 85 / 0.3);

    /* ============================================================
       INPUT & FORM TOKENS
       ============================================================ */
    --input-height: 44px;     /* Apple HIG minimum tap target */
    --input-height-sm: 36px;
    --input-height-lg: 52px;
    --input-bg: rgba(255, 255, 255, 0.02);
    --input-bg-hover: rgba(255, 255, 255, 0.04);
    --input-bg-focus: rgba(255, 255, 255, 0.06);
    --input-border: rgba(255, 255, 255, 0.06);
    --input-border-hover: rgba(255, 255, 255, 0.1);
    --input-border-focus: var(--axiom-gold);
    --input-ring: oklch(78% 0.18 85 / 0.2);
    --input-ring-size: 4px;
    --input-radius: var(--radius-md);
    --input-padding-x: var(--space-4);
    --input-text: var(--axiom-gray-100);
    --input-placeholder: var(--axiom-gray-500);

    /* ============================================================
       BUTTON TOKENS
       ============================================================ */
    --btn-height: 44px;
    --btn-height-sm: 36px;
    --btn-height-lg: 52px;
    --btn-padding-x: var(--space-5);
    --btn-radius: var(--radius-md);
    --btn-font-weight: var(--font-medium);

    /* Primary (Gold Gradient) */
    --btn-primary-bg: linear-gradient(
      135deg,
      var(--axiom-gold-200) 0%,
      var(--axiom-gold-400) 50%,
      var(--axiom-gold-500) 100%
    );
    --btn-primary-bg-hover: linear-gradient(
      135deg,
      var(--axiom-gold-100) 0%,
      var(--axiom-gold-300) 50%,
      var(--axiom-gold-400) 100%
    );
    --btn-primary-text: var(--axiom-black);
    --btn-primary-shadow: 0 4px 20px oklch(78% 0.18 85 / 0.25);
    --btn-primary-shadow-hover: 0 8px 32px oklch(78% 0.18 85 / 0.35);

    /* Glass (Transparent) */
    --btn-glass-bg: var(--axiom-glass-bg);
    --btn-glass-bg-hover: var(--axiom-glass-bg-hover);
    --btn-glass-border: var(--axiom-glass-border);
    --btn-glass-border-hover: var(--axiom-gold-glass-border-hover);
    --btn-glass-text: var(--axiom-gray-100);
    --btn-glass-text-hover: var(--axiom-gold-100);

    /* ============================================================
       ACCESSIBILITY TOKENS (Stark / WCAG 2.1 AA)
       ============================================================ */
    --focus-ring-color: var(--axiom-gold-hex);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring-glow: 0 0 0 4px rgba(212, 165, 90, 0.2);

    /* Minimum touch target — Apple HIG 44pt */
    --touch-target-min: 44px;

    /* ============================================================
       MOTION & ANIMATION TOKENS
       ============================================================ */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0.0, 0, 0.2, 1);
    --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

    --duration-fast: 150ms;
    --duration-normal: 250ms;
    --duration-slow: 400ms;
    --duration-slower: 600ms;
    --duration-slowest: 800ms;

    /* ============================================================
       Z-INDEX LAYER SYSTEM
       ============================================================ */
    --z-base: 0;
    --z-card: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-nav: 300;
    --z-modal: 400;
    --z-toast: 500;
    --z-tooltip: 600;

    /* ============================================================
       NOISE TEXTURE (OLED Matte Quality)
       ============================================================ */
    --noise-opacity: 0.004;  /* 0.4% — hardware-grade non-glow texture */
    --noise-scale: 200px;

    /* ============================================================
       CONTAINER WIDTHS
       ============================================================ */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1200px;
    --container-2xl: 1400px;
    --container-max: var(--container-xl);
  }

  /* ============================================================
     DARK MODE (Default — AXIOM is dark-first)
     ============================================================ */
  @media (prefers-color-scheme: dark) {
    :root {
      /* Dark mode is the default; overrides if light mode exists */
    }
  }

  /* ============================================================
     4K PERFORMANCE DEGRADATION
     Beyond 2560px, replace heavy filter:blur with radial-gradient
     ============================================================ */
  @media (min-width: 2560px) {
    :root {
      /* 4K: Replace blur-based glows with gradient simulations */
      --use-gradient-glow: 1;
    }
  }

  /* ============================================================
     REDUCED MOTION
     ============================================================ */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-normal: 0ms;
      --duration-slow: 0ms;
      --duration-slower: 0ms;
      --duration-slowest: 0ms;
    }
  }
}

/* ================================================================
   @layer tokens-axiom — END
   ================================================================ */

/* ============ [v4.0.0 合并段 5/5] global-override.css ============ */
/* ================================================================
   AXIOM · Dark Gold Era — Global Override v4.0
   ================================================================
   Layer: overrides (highest specificity in @layer chain)
   Scope: All PHP pages — component-level visual upgrade
   Requires: tokens-axiom-v4.css loaded first
   ================================================================
   Rules of Engagement:
   1. ZERO PHP modifications — all overrides via CSS
   2. ZERO HTML class removal — only append or override
   3. Mobile-first — all new styles include @media (max-width: 768px)
   4. Graceful degradation — @supports not for modern features
   ================================================================ */

@layer axiom-overrides {

  /* ==============================================================
     GLOBAL BASE — OLED Pure Black + Noise Texture
     ============================================================== */

  html,
  body {
    background-color: var(--shell-bg, var(--axiom-black, #050505)) !important;
    color: var(--axiom-gray-100, oklch(92% 0.008 260));
    font-family: var(--font-body, 'DM Sans', 'Inter', sans-serif);
    line-height: var(--leading-relaxed, 1.6);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ---- Global Noise Texture (0.4% · OLED matte quality) ---- */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: var(--noise-opacity, 0.004);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    mix-blend-mode: overlay;
  }

  /* Ensure all content sits above noise but below z-index extremes */
  .main-content,
  .navbar,
  .footer {
    position: relative;
    z-index: 1;
  }

  /* ==============================================================
     HEADER / NAVIGATION — AXIOM Branding
     ============================================================== */

  /* Nav bar background — OLED black glass（令牌优先，亮色主题覆写 --nav-bg） */
  .navbar {
    background: var(--nav-bg, rgba(5, 5, 5, 0.45)) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  }

  /* 滚动后轻微加深，保持可读性但同样透明 */
  .navbar.scrolled {
    background: var(--nav-bg-scrolled, rgba(5, 5, 5, 0.6)) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  }

  /* Logo text — replace "歌舞伎町" with AXIOM via CSS content trick
     We override the text display while keeping PHP intact */
  .nav-logo-text {
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .nav-logo-main {
    font-family: var(--font-display, 'Cinzel Decorative', serif);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    line-height: 1.2;
    background: linear-gradient(
      135deg,
      var(--axiom-gold-200, oklch(83% 0.14 85)) 0%,
      var(--axiom-gold-400, oklch(72% 0.20 80)) 50%,
      var(--axiom-gold-500, oklch(65% 0.19 75)) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px oklch(78% 0.18 85 / 0.3));
  }

  .nav-logo-sub {
    font-size: 0.65rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--axiom-gray-500, oklch(52% 0.013 260));
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-weight: 500;
  }

  .nav-logo-sub span {
    color: var(--axiom-gold-600, oklch(55% 0.17 70));
    margin: 0 4px;
  }

  /* Nav active indicator — bottom gold line (Apple-style precision) */
  .nav-menu > li > a {
    position: relative;
    color: var(--axiom-gray-200, oklch(84% 0.010 260));
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    transition: color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  }

  .nav-menu > li > a:hover {
    color: var(--axiom-gold-200, oklch(83% 0.14 85));
  }

  .nav-menu > li > a.active {
    color: var(--axiom-gold, #D4A55A);
  }

  .nav-menu > li > a.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--axiom-gold, #D4A55A);
    border-radius: 1px;
    box-shadow: 0 0 8px oklch(78% 0.18 85 / 0.5);
  }

  /* Register button — gold gradient with sweep effect */
  .nav-menu > li > a.btn-nav-solid {
    background: linear-gradient(
      135deg,
      var(--axiom-gold-200, oklch(83% 0.14 85)) 0%,
      var(--axiom-gold-400, oklch(72% 0.20 80)) 100%
    ) !important;
    color: var(--axiom-black, #050505) !important;
    font-weight: 600;
    border: none;
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .nav-menu > li > a.btn-nav-solid::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 100%
    );
    transition: left 0.6s var(--ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1));
    z-index: -1;
  }

  .nav-menu > li > a.btn-nav-solid:hover::before {
    left: 100%;
  }

  .nav-menu > li > a.btn-nav-solid:hover {
    box-shadow: 0 4px 24px oklch(78% 0.18 85 / 0.35);
    transform: translateY(-1px);
  }

  /* ==============================================================
     PAGE BOX — Glass Card with Gold Atmosphere
     ============================================================== */

  .page-box {
    background: var(--page-box-bg, rgba(10, 10, 12, 0.5)) !important;
    border: 1px solid oklch(78% 0.18 85 / 0.08) !important;
    border-radius: var(--radius-xl, 20px) !important;
    padding: var(--space-6, 24px) !important;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    transition:
      border-color var(--duration-normal, 250ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      box-shadow var(--duration-normal, 250ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      transform var(--duration-normal, 250ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }

  /* Gold atmospheric glow on hover — NOT a harsh border change */
  .page-box::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 80%;
    height: 80%;
    background: radial-gradient(
      ellipse at center,
      oklch(78% 0.18 85 / 0.12) 0%,
      transparent 70%
    );
    opacity: 0;
    transition:
      opacity var(--duration-slow, 400ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      transform var(--duration-slow, 400ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    pointer-events: none;
    z-index: -1;
    filter: blur(40px);
  }

  .page-box:hover {
    border-color: oklch(78% 0.18 85 / 0.18) !important;
    transform: translateY(-2px);
    box-shadow: 0 20px 80px oklch(78% 0.18 85 / 0.12) !important;
  }

  .page-box:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .page-box-content {
    position: relative;
    z-index: 2;
  }

  /* ---- Page Box inner text refinement ---- */
  .page-box h2,
  .page-box h3,
  .page-box .box-title {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-weight: 600;
    color: var(--axiom-gray-50, oklch(96% 0.006 260));
    letter-spacing: -0.01em;
  }

  .page-box p,
  .page-box .box-desc {
    color: var(--axiom-gray-300, oklch(74% 0.012 260));
    line-height: var(--leading-relaxed, 1.6);
  }

  /* ==============================================================
     BUTTONS — Prime (Gold) + Glass Variants
     ============================================================== */

  /* ---- Gold Primary Button ---- */
  .page-btn,
  .btn-primary,
  .btn-prime {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    height: var(--btn-height, 44px);
    padding: 0 var(--btn-padding-x, 20px);
    background: linear-gradient(
      135deg,
      var(--axiom-gold-200, oklch(83% 0.14 85)) 0%,
      var(--axiom-gold-400, oklch(72% 0.20 80)) 50%,
      var(--axiom-gold-500, oklch(65% 0.19 75)) 100%
    );
    color: var(--axiom-black, #050505);
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    border-radius: var(--btn-radius, 12px);
    cursor: pointer;
    transition:
      transform var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      box-shadow var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      filter var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    box-shadow: 0 4px 20px oklch(78% 0.18 85 / 0.2);
    overflow: hidden;
    isolation: isolate;
  }

  .page-btn::before,
  .btn-primary::before,
  .btn-prime::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    transition: left 0.7s var(--ease-emphasized, cubic-bezier(0.2, 0.8, 0.2, 1));
    z-index: -1;
  }

  .page-btn:hover,
  .btn-primary:hover,
  .btn-prime:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px oklch(78% 0.18 85 / 0.35);
    filter: brightness(1.08);
  }

  .page-btn:hover::before,
  .btn-primary:hover::before,
  .btn-prime:hover::before {
    left: 100%;
  }

  .page-btn:active,
  .btn-primary:active,
  .btn-prime:active {
    transform: translateY(0);
    filter: brightness(0.95);
  }

  /* ---- Glass Secondary Button ---- */
  .btn-secondary,
  .btn-glass {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    height: var(--btn-height, 44px);
    padding: 0 var(--btn-padding-x, 20px);
    background: var(--axiom-glass-bg, rgba(255, 255, 255, 0.02));
    color: var(--axiom-gray-100, oklch(92% 0.008 260));
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-weight: 500;
    font-size: 0.95rem;
    border: 1px solid var(--axiom-glass-border, rgba(255, 255, 255, 0.04));
    border-radius: var(--btn-radius, 12px);
    cursor: pointer;
    transition:
      border-color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      background-color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      transform var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .btn-secondary:hover,
  .btn-glass:hover {
    border-color: oklch(78% 0.18 85 / 0.3);
    background: var(--axiom-glass-bg-hover, rgba(255, 255, 255, 0.04));
    color: var(--axiom-gold-100, oklch(88% 0.10 85));
    transform: translateY(-1px);
  }

  /* ---- Button size variants ---- */
  .btn-sm {
    height: var(--btn-height-sm, 36px);
    padding: 0 var(--space-4, 16px);
    font-size: 0.85rem;
    border-radius: var(--radius-sm, 8px);
  }

  .btn-lg {
    height: var(--btn-height-lg, 52px);
    padding: 0 var(--space-6, 24px);
    font-size: 1rem;
    border-radius: var(--radius-lg, 16px);
  }

  .btn-block {
    width: 100%;
  }

  /* ==============================================================
     FORM INPUTS — Gold Focus Rings
     ============================================================== */

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  select,
  textarea {
    background: var(--input-bg, rgba(255, 255, 255, 0.02)) !important;
    border: 1px solid var(--input-border, rgba(255, 255, 255, 0.06)) !important;
    border-radius: var(--input-radius, 12px) !important;
    color: var(--input-text, var(--axiom-gray-100)) !important;
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 0.95rem;
    padding: 0 var(--input-padding-x, 16px);
    height: var(--input-height, 44px);
    transition:
      border-color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      box-shadow var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      background-color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }

  textarea {
    height: auto;
    padding: var(--space-3, 12px) var(--input-padding-x, 16px);
    resize: vertical;
  }

  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="password"]:hover,
  input[type="number"]:hover,
  input[type="tel"]:hover,
  input[type="url"]:hover,
  input[type="search"]:hover,
  input[type="date"]:hover,
  select:hover,
  textarea:hover {
    background: var(--input-bg-hover, rgba(255, 255, 255, 0.04)) !important;
    border-color: var(--input-border-hover, rgba(255, 255, 255, 0.1)) !important;
  }

  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  input[type="tel"]:focus,
  input[type="url"]:focus,
  input[type="search"]:focus,
  input[type="date"]:focus,
  select:focus,
  textarea:focus {
    outline: none;
    background: var(--input-bg-focus, rgba(255, 255, 255, 0.06)) !important;
    border-color: var(--input-border-focus, var(--axiom-gold)) !important;
    box-shadow: var(--focus-ring-glow, 0 0 0 4px rgba(212, 165, 90, 0.2));
  }

  input::placeholder,
  textarea::placeholder {
    color: var(--input-placeholder, var(--axiom-gray-500));
    font-weight: 400;
  }

  /* ---- Select dropdown arrow ---- */
  select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23D4A55A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px !important;
    cursor: pointer;
  }

  /* ==============================================================
     TABLES — Dark Gold Style
     ============================================================== */

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-ui, 'DM Sans', sans-serif);
  }

  thead th {
    background: rgba(255, 255, 255, 0.02);
    color: var(--axiom-gray-400, oklch(62% 0.012 260));
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid oklch(78% 0.18 85 / 0.08);
  }

  tbody td {
    padding: var(--space-4, 16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--axiom-gray-200, oklch(84% 0.010 260));
    font-size: 0.9rem;
    vertical-align: middle;
  }

  tbody tr {
    transition: background-color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  }

  tbody tr:hover {
    background: oklch(78% 0.18 85 / 0.03);
  }

  tbody tr:last-child td {
    border-bottom: none;
  }

  /* ==============================================================
     FOOTER — AXIOM Brand + Gold Sweep Line
     ============================================================== */

  .footer {
    background: linear-gradient(
      180deg,
      var(--axiom-black, #050505) 0%,
      #030304 100%
    );
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    position: relative;
    overflow: hidden;
  }

  /* Gold sweep separator line */
  .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      oklch(78% 0.18 85 / 0.3) 20%,
      oklch(78% 0.18 85 / 0.6) 50%,
      oklch(78% 0.18 85 / 0.3) 80%,
      transparent 100%
    );
  }

  /* Animated gold sweep light */
  .footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent 0%,
      oklch(78% 0.18 85 / 0.8) 50%,
      transparent 100%
    );
    animation: footer-sweep 4s ease-in-out infinite;
    filter: blur(2px);
  }

  @keyframes footer-sweep {
    0% { left: -30%; }
    100% { left: 100%; }
  }

  /* Footer brand — AXIOM display font */
  .footer-brand-logo,
  .footer-axiom-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .footer-axiom-main {
    font-family: var(--font-display, 'Cinzel Decorative', serif);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    background: linear-gradient(
      135deg,
      var(--axiom-gold-100, oklch(88% 0.10 85)) 0%,
      var(--axiom-gold-300, oklch(78% 0.18 85)) 50%,
      var(--axiom-gold-500, oklch(65% 0.19 75)) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 30px oklch(78% 0.18 85 / 0.3));
  }

  .footer-axiom-sub {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--axiom-gray-500, oklch(52% 0.013 260));
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-weight: 500;
  }

  .footer-axiom-sub span {
    color: var(--axiom-gold-500, oklch(65% 0.19 75));
  }

  /* Footer links */
  .footer-links h4 {
    font-family: var(--font-ui, 'DM Sans', sans-serif);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--axiom-gray-200, oklch(84% 0.010 260));
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: var(--space-4, 16px);
  }

  .footer-links a {
    color: var(--axiom-gray-400, oklch(62% 0.012 260));
    font-size: 0.875rem;
    transition: color var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  }

  .footer-links a:hover {
    color: var(--axiom-gold-200, oklch(83% 0.14 85));
  }

  /* Footer bottom — copyright with tiny Chinese */
  .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: var(--space-4, 16px);
    font-size: 0.65rem;
    color: var(--axiom-gray-600, oklch(42% 0.013 260));
    font-family: var(--font-ui, 'DM Sans', sans-serif);
  }

  .footer-bottom p {
    margin: 0;
  }

  /* ==============================================================
     ACCESSIBILITY — Stark Compliance
     ============================================================== */

  /* Focus-visible gold ring with outer glow */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #D4A55A);
    outline-offset: var(--focus-ring-offset, 2px);
    box-shadow: var(--focus-ring-glow, 0 0 0 4px rgba(212, 165, 90, 0.2));
    border-radius: var(--radius-sm, 8px);
  }

  /* Skip to content link */
  .skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-4, 16px);
    background: var(--axiom-gold, #D4A55A);
    color: var(--axiom-black, #050505);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-weight: 600;
    font-size: 0.875rem;
    border-radius: 0 0 var(--radius-md, 12px) var(--radius-md, 12px);
    z-index: 10000;
    transition: top var(--duration-fast, 150ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
  }

  .skip-to-content:focus {
    top: 0;
  }

  /* ==============================================================
     SCROLL-DRIVEN ANIMATIONS (with JS fallback)
     v7.0 修复：移除 scroll-driven animation 接管 .reveal-up 的增强块。
     原块在 Chrome 115+（支持 animation-timeline）下用 view() 时间线
     驱动透明度：CSS 动画优先级高于 JS 添加的揭示类，导致超高元素
     （TOP100 排行榜、招募阶梯卡片等）在页面顶部进度不足而卡在
     半透明中间态（雾蒙蒙），低进度元素甚至完全透明；
     且 Firefox/Safari 无此特性时 .reveal-up 永久 opacity:0。
     现统一走 IntersectionObserver + transition 路径（app.js 添加
     .reveal-visible），与 theme-v3-overrides 层的揭示规则一致。
     ============================================================== */

  /* Reveal-on-scroll via IntersectionObserver class */
  .reveal-up,
  .reveal-fade {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity var(--duration-slower, 600ms) var(--ease-decelerate, cubic-bezier(0.0, 0, 0.2, 1)),
      transform var(--duration-slower, 600ms) var(--ease-decelerate, cubic-bezier(0.0, 0, 0.2, 1));
  }

  .reveal-up.reveal-visible,
  .reveal-fade.reveal-visible,
  .reveal-up.is-visible,
  .reveal-fade.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @keyframes chart-spin {
    to { transform: rotate(360deg); }
  }

  /* ==============================================================
     RESPONSIVE — Mobile First (390pt baseline)
     ============================================================== */

  @media (max-width: 768px) {
    /* Page box — reduced padding on mobile */
    .page-box {
      padding: var(--space-4, 16px) !important;
      border-radius: var(--radius-lg, 16px) !important;
    }

    /* Button — ensure ≥ 44pt touch target */
    .page-btn,
    .btn-primary,
    .btn-secondary,
    .btn-glass {
      min-height: 44px;
      min-width: 44px;
    }

    /* Input — 44pt minimum height */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
      min-height: 44px;
      font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Nav — mobile adjustments */
    .nav-logo-main {
      font-size: 1.1rem;
      letter-spacing: 0.1em;
    }

    .nav-logo-sub {
      display: none;
    }

    /* Footer — stack vertically */
    .footer-content {
      gap: var(--space-6, 24px);
    }

    .footer-axiom-main {
      font-size: 1.4rem;
    }

    thead th,
    tbody td {
      padding: var(--space-3, 12px) var(--space-3, 12px);
      font-size: 0.85rem;
    }
  }

  /* Small phones (320px — older devices) */
  @media (max-width: 380px) {
    .page-box {
      padding: var(--space-3, 12px) !important;
    }

    .footer-axiom-main {
      font-size: 1.2rem;
      letter-spacing: 0.15em;
    }
  }

  /* ==============================================================
     4K PERFORMANCE — Replace filter:blur with radial-gradient
     ============================================================== */

  @media (min-width: 2560px) {
    /* Replace blur-based glow with gradient simulation for GPU efficiency */
    .page-box::before,
    .hof-record-card::after,
    .stat-hero-card::after {
      filter: none !important;
      background: radial-gradient(
        ellipse at center,
        oklch(78% 0.18 85 / 0.08) 0%,
        oklch(78% 0.18 85 / 0.04) 40%,
        transparent 70%
      ) !important;
    }

    /* Reduce shadow intensity on 4K (shadows are GPU-heavy at scale) */
    .page-box:hover {
      box-shadow: 0 20px 60px oklch(78% 0.18 85 / 0.08) !important;
    }

    .navbar {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      background: var(--nav-bg-scrolled, rgba(5, 5, 5, 0.6)) !important;
    }
  }

  /* ==============================================================
     REDUCED MOTION PREFERENCE
     ============================================================== */

  @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;
    }

    .footer::after {
      display: none;
    }
  }

  /* ==============================================================
     UTILITY CLASSES
     ============================================================== */

  .text-gold {
    color: var(--axiom-gold, #D4A55A);
  }

  .text-muted {
    color: var(--axiom-gray-500, oklch(52% 0.013 260));
  }

  .container {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 var(--space-4, 16px);
  }

} /* @layer axiom-overrides END */

/* ================================================================
   AXIOM v4.0.0 · 阶段2 组件增强层 — 世界级微交互
   层序: 本层最后声明 = 同优先级下最后生效（增强语义）
   内容: 涟漪 / iOS防缩放 / 骨架屏 / Alert统一 / 卡片补强 / reduced-motion
   ================================================================ */
@layer axiom-v4-enhancements {

  /* ─── 1. 按钮点击涟漪（配合 app.js 的 Ripple 注入） ─── */
  .btn-primary,
  .btn-secondary,
  .btn-gold,
  .page-btn,
  button[type="submit"],
  .btn-nav-solid,
  .btn-nav-ghost {
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }

  .ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: axiom-ripple 650ms var(--ease-decelerate, ease-out) forwards;
    pointer-events: none;
    z-index: 1;
  }
  @keyframes axiom-ripple {
    to { transform: scale(4); opacity: 0; }
  }

  /* ─── 2. iOS 防自动缩放（16px 下限）+ 移动端触控目标 44px ─── */
  input,
  select,
  textarea {
    font-size: 16px !important; /* iOS Safari: <16px 触发聚焦自动缩放 */
  }

  @media (hover: none) and (pointer: coarse), (max-width: 767px) {
    .btn-primary,
    .btn-secondary,
    .btn-gold,
    .page-btn,
    button,
    [role="button"],
    a.btn-primary,
    a.btn-secondary {
      min-height: 44px; /* Apple HIG / WCAG 2.5.5 触控目标 */
    }
  }

  /* ─── 3. 骨架屏（加载占位） ─── */
  @keyframes axiom-skeleton-shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
  }
  .skeleton,
  .skeleton-text,
  .skeleton-card {
    position: relative;
    overflow: hidden;
    background: oklch(60% 0.02 260 / 0.10);
    border-radius: var(--radius-sm, 8px);
    background-image: linear-gradient(
      90deg,
      oklch(60% 0.02 260 / 0.10) 40%,
      oklch(78% 0.18 85 / 0.07) 60%,
      oklch(60% 0.02 260 / 0.10) 80%
    );
    background-size: 200px 100%;
    background-repeat: no-repeat;
    animation: axiom-skeleton-shimmer 1.6s linear infinite;
  }
  .skeleton-text { height: 14px; width: 80%; }
  .skeleton-card { height: 120px; border-radius: var(--radius-lg, 16px); }
  .skeleton-row td { height: 44px; }
  .skeleton-row td > * { display: block; margin: 6px auto; }

  /* ─── 4. Alert 统一（补齐 warning/info + 统一图标与结构） ─── */
  .alert-danger,
  .alert-success,
  .alert-warning,
  .alert-info {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid;
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.6;
  }
  .alert-danger::before,
  .alert-success::before,
  .alert-warning::before,
  .alert-info::before {
    flex-shrink: 0;
    font-size: 1.1em;
    line-height: 1.4;
  }
  .alert-danger::before { content: '✕'; color: #ffb4ab; }
  .alert-success::before { content: '✓'; color: #81d4a8; }
  .alert-warning::before { content: '⚠'; color: #ffd54f; }
  .alert-info::before    { content: 'ℹ'; color: #90caf9; }

  .alert-warning {
    background: rgba(255, 193, 7, 0.10);
    border-color: rgba(255, 193, 7, 0.35);
    color: #ffd54f; /* on rgba(255,193,7,.1)+dark ≈ 10:1 ✓ */
  }
  .alert-info {
    background: rgba(33, 150, 243, 0.10);
    border-color: rgba(33, 150, 243, 0.35);
    color: #90caf9; /* ≈ 7:1 ✓ */
  }

  /* ─── 5. 卡片交互补强（键盘可达 + 触控反馈） ─── */
  .feature-card {
    transition: transform var(--transition-normal, 0.25s) var(--ease-spring, cubic-bezier(0.34,1.56,0.64,1)),
                box-shadow var(--transition-normal, 0.25s) ease,
                border-color var(--transition-fast, 0.15s) ease;
  }
  .feature-card:focus-within {
    outline: 2px solid var(--axiom-gold-hex, #D4A55A);
    outline-offset: 3px;
    border-radius: var(--radius-lg, 16px);
  }
  @media (hover: none) and (pointer: coarse) {
    .feature-card:active { transform: scale(0.98); }
    .feature-card:hover { transform: none; }
  }

  /* ─── 6. 减少动效：全局关闭增强动画 ─── */
  @media (prefers-reduced-motion: reduce) {
    .ripple { display: none; }
    .btn-primary::before,
    .btn-gold::before,
    button[type="submit"]::before,
    .page-btn.btn-primary::before {
      display: none;
    }
    .skeleton,
    .skeleton-text,
    .skeleton-card { animation: none; }
    .feature-card { transition: none; }
  }
}

/* ================================================================
   AXIOM v4.0.0 · 阶段2 补丁 — 输入聚焦环强化 + 占位符对比度
   ================================================================ */
@layer axiom-v4-enhancements {
  input:focus,
  select:focus,
  textarea:focus,
  .input-field:focus {
    border-color: var(--border-gold-strong, #F5B342);
    box-shadow: 0 0 0 3px oklch(78% 0.18 85 / 0.25); /* 原 10% 太淡 → 25% */
  }

  /* 占位符：原 text-muted(2.74:1) 提升到 AA 安全线之上 */
  .input-field::placeholder,
  input::placeholder,
  textarea::placeholder {
    color: oklch(70% 0.02 260); /* ≈ 5.3:1 on #0A0B0D ✓ */
  }
}

/* ================================================================
   AXIOM v4.0.0 · 阶段4 无障碍修复 — 亮色模式金色令牌（对比度达标）
   问题: 原 light-mode 下 --gold oklch(72% .15 56) 仅 2.39:1（文本 FAIL）
   修复: 亮色模式整体下调金色阶到「深古铜金」，文本/按钮全过 AA
   验证: 主金 6.28:1 ✓ | 文本金 6.77:1 ✓ | 按钮黑字 5.18:1 ✓
   注意: 本块为无层规则，位于文件末尾 → 同优先级下胜过更早的无层 light-mode 块
   ================================================================ */
.light-mode {
  /* 金色主令牌（文本/图标/边框通用） */
  --gold: oklch(48% 0.12 55);
  --gold-light: oklch(52% 0.13 56);
  --gold-dark: oklch(40% 0.11 53);
  --gold-muted: oklch(56% 0.10 56);
  --gold-rose: oklch(50% 0.11 50);

  /* 金色色阶（亮色模式·深古铜金） */
  --gold-50:  oklch(90% 0.05 58);
  --gold-100: oklch(82% 0.08 58);
  --gold-200: oklch(72% 0.11 58);
  --gold-300: oklch(60% 0.13 57);   /* 大文本/渐变亮端（≈3.8:1 大文本 ✓） */
  --gold-400: oklch(53% 0.13 56);
  --gold-500: oklch(46% 0.12 55);   /* 渐变暗端 6.28:1 ✓ */
  --gold-600: oklch(40% 0.11 53);
  --gold-700: oklch(34% 0.10 50);
  --gold-800: oklch(28% 0.09 48);
  --gold-900: oklch(22% 0.07 45);

  /* 金色文本（专用令牌） */
  --text-gold: oklch(46% 0.12 55);       /* 6.77:1 ✓ */
  --text-gold-light: oklch(52% 0.13 56); /* ≈5.6:1 ✓ */
  --text-on-gold: #0A0B0D;

  /* 按钮（亮色模式下：中金底 + 黑字，苹果式高级感） */
  --btn-gold-bg: oklch(62% 0.14 58);
  --btn-gold-hover: oklch(66% 0.14 58);
  --btn-gold-active: oklch(58% 0.13 58);
  --btn-gold-text: #0A0B0D;              /* 5.18:1 ✓ */
  --btn-gold-shadow: 0 4px 20px oklch(48% 0.12 55 / 0.25);
  --btn-gold-shadow-hover: 0 8px 28px oklch(48% 0.12 55 / 0.35);

  /* 金色边框/发光（UI 组件 ≥3:1 要求下安全） */
  --border-gold: oklch(48% 0.12 55 / 0.45);
  --border-gold-strong: oklch(45% 0.12 54 / 0.65);
  --shadow-gold: 0 4px 20px oklch(48% 0.12 55 / 0.18);
  --shadow-glow: 0 0 24px oklch(48% 0.12 55 / 0.14);
}

/* ================================================================
   AXIOM v4.0.0 · 阶段4 无障碍 — 导航下拉键盘可达
   配合 app.js initNavDropdown()：.open 类 + :focus-within 展开
   ================================================================ */
.nav-dropdown.open .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
@media (max-width: 767px) {
  .nav-dropdown.open .dropdown-menu,
  .nav-dropdown:focus-within .dropdown-menu {
    display: block;
  }
}

/* ================================================================
   AXIOM v4.0.0 · 阶段5 移动端视口 — dvh 渐进增强 + iOS 安全区
   ================================================================ */
/* 动态视口：移动端地址栏伸缩不再裁切（不支持 dvh 时自动回退 100vh） */
@supports (min-height: 100dvh) {
  body,
  .section-1,
  .auth-container,
  .hero-container,
  .home-view {
    min-height: 100dvh;
  }
}
@supports (height: 100dvh) {
  .hero-section { height: 100dvh; }
}

/* iOS 安全区（刘海/底部横条） */
@supports (padding: max(0px)) {
  .container,
  .nav-container {
    padding-left: max(var(--container-pad, 20px), env(safe-area-inset-left));
    padding-right: max(var(--container-pad, 20px), env(safe-area-inset-right));
  }
  .footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
  .main-content {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ================================================================
   AXIOM v6.7 修复 — 表单控件固定高度 × 垂直 padding 叠加导致文字被裁切
   现象: select（注册页出生日期 年/月/日）文字下半部分被裁切；
         文本输入框文字上下也有轻微裁切。
   根因: theme-v3-overrides 层内的 padding: 0 16px 被上方非层规则
         （FORMS 段 padding: 14px 18px）覆盖，而层内 height: 44px 生效，
         内容区仅剩 44 - 28(垂直padding) - 2(边框) = 14px，小于 16px 字号。
   修复: 以文件末尾非层规则统一为「固定高度 + 仅水平 padding」。
         注意: 注册页 select 带 class="input-field"，基础规则 .input-field
         （特异度 0,1,0）压过 select 标签选择器（0,0,1），故必须同时用
         .input-field:not(textarea) 提高覆盖范围；textarea 保持排除。
         select 的 padding-right: 40px !important（层内，下拉箭头占位）
         按重要性级联规则仍然生效，不受本规则影响。
   ================================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
select,
select.input-field,
.input-field:not(textarea) {
    height: 44px;
    padding: 0 var(--input-padding-x, 16px);
    box-sizing: border-box;
}

textarea,
textarea.input-field {
    height: auto;
    padding: 12px 16px;
}

/* ================================================================
   v24.2 2026-09-12 Auth 页（登录 / 注册）共用组件升级
   —— 密码明文切换 / 字段级错误态 / 下拉框与复选框主题化 / 按钮质感收敛
   位置说明: 置于文件末尾的非层规则（页面级 CSS 之前即生效），
             可压过上面历史规则；同时避免 @layer 内规则被无层 reset 反超的旧坑。
   ================================================================ */

/* ==============================================================
   v24.2 2026-09-12 登录/注册卡片四角金饰 · 精修版（纯 CSS，取代原 4 份内联 SVG）
   奢华角标的 6 个手法：
     ① 双层描边：外层主描边 + 内缩 3.5px 的发丝线 → 「框中有框」的纵深
     ② 锥形收尾：以角顶点为圆心做 radial mask，两臂自顶点向外渐隐到 0（非整段等亮）
     ③ 刻面宝石：底面金属渐变 + 左上高光面 + 右下暗面 → 读作「切割过的金珠」而非圆点
     ④ 顶点点睛：旋转 45° 的菱形 + 0.5px 亮环（高光边）
     ⑤ 克制柔光：只做聚焦不做霓虹；6s 极缓呼吸，prefers-reduced-motion 下关闭
     ⑥ **不做 transform 镜像**：四角各自声明「哪两条边发光 + 圆角 + 遮罩圆心 + 宝石位置」。
        若用 scaleX(-1) 镜像，宝石的受光方向会跟着翻转，左右角光向相反 ——
        这正是角饰「看着不够精致」最常见的原因。四角独立定义后，光源恒定来自左上。
   ============================================================== */
.auth-corner {
    --cnr-size: 40px;
    /* v26.5 2026-09-12 角饰贴角（用户要求「正好贴到角上去」）：内缩 7px → 4px。
       几何依据：卡片圆角实测 R = 16px，圆角弧在 45° 方向距卡片外沿最近处 ≈ 0.293×16 ≈ 4.7px，
       故描边落在距外沿 5px（= 内缩 4px + 1px 边框）即为「贴着圆角弧」的极限，再往里就会戳出卡片轮廓。
       ⚠️ 宝石不能压在顶点上：它比顶点更往外伸，压在顶点必然跨出圆角弧。故把宝石缩到 7px
       并沿对角线内移 2px —— 其外尖落在距外沿 5.55px（> 4.69px），仍在弧内约 1.2px。 */
    --cnr-inset: 4px;
    --cnr-gem: 7px;
    --cnr-gem-offset: 2px;
    position: absolute;
    width: var(--cnr-size);
    height: var(--cnr-size);
    pointer-events: none;
    z-index: 3;
    border-style: solid;
    border-color: #EBC072;
    border-width: 0;
    /* ② 锥形收尾：圆心锚在各自的角顶点（--cnr-x/--cnr-y 由四角规则给出） */
    -webkit-mask-image: radial-gradient(circle at var(--cnr-x) var(--cnr-y), #000 0%, #000 15%, rgba(0, 0, 0, 0.45) 42%, transparent 76%);
    mask-image: radial-gradient(circle at var(--cnr-x) var(--cnr-y), #000 0%, #000 15%, rgba(0, 0, 0, 0.45) 42%, transparent 76%);
}
/* ① 内层发丝线 */
.auth-corner::before {
    content: '';
    position: absolute;
    width: calc(var(--cnr-size) - 7px);
    height: calc(var(--cnr-size) - 7px);
    border-style: solid;
    border-color: rgba(245, 203, 122, 0.62);
    border-width: 0;
    -webkit-mask-image: radial-gradient(circle at var(--cnr-x) var(--cnr-y), #000 0%, #000 11%, rgba(0, 0, 0, 0.4) 38%, transparent 62%);
    mask-image: radial-gradient(circle at var(--cnr-x) var(--cnr-y), #000 0%, #000 11%, rgba(0, 0, 0, 0.4) 38%, transparent 62%);
}
/* ③④⑤ 顶点刻面宝石（尺寸由 --cnr-gem 控制：桌面 7px / 窄屏 6px） */
.auth-corner::after {
    content: '';
    position: absolute;
    width: var(--cnr-gem);
    height: var(--cnr-gem);
    border-radius: 1.5px;
    transform: rotate(45deg);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 40%),
        linear-gradient(315deg, rgba(58, 38, 8, 0.45) 0%, rgba(58, 38, 8, 0) 44%),
        linear-gradient(135deg, #F7D992 0%, #DDAB4F 48%, #B5842F 100%);
    box-shadow:
        0 0 0 0.5px rgba(255, 240, 200, 0.6),
        0 0 6px 1px rgba(245, 179, 66, 0.4),
        0 0 16px 3px rgba(245, 179, 66, 0.14);
    animation: axCornerGem 6s ease-in-out infinite;
}
@keyframes axCornerGem {
    0%, 100% {
        box-shadow:
            0 0 0 0.5px rgba(255, 240, 200, 0.6),
            0 0 6px 1px rgba(245, 179, 66, 0.4),
            0 0 16px 3px rgba(245, 179, 66, 0.14);
    }
    50% {
        box-shadow:
            0 0 0 0.5px rgba(255, 248, 226, 0.85),
            0 0 9px 2px rgba(245, 179, 66, 0.55),
            0 0 22px 6px rgba(245, 179, 66, 0.22);
    }
}
@media (prefers-reduced-motion: reduce) {
    .auth-corner::after {
        animation: none;
    }
}
/* ⑥ 四角独立定义（无 transform）：哪两条边发光 + 圆角 + 遮罩圆心 + 宝石贴角方向 */
.auth-corner.tl { top: var(--cnr-inset); left: var(--cnr-inset); --cnr-x: 0%; --cnr-y: 0%; border-top-width: 1.25px; border-left-width: 1.25px; border-top-left-radius: 10px; }
.auth-corner.tr { top: var(--cnr-inset); right: var(--cnr-inset); --cnr-x: 100%; --cnr-y: 0%; border-top-width: 1.25px; border-right-width: 1.25px; border-top-right-radius: 10px; }
.auth-corner.bl { bottom: var(--cnr-inset); left: var(--cnr-inset); --cnr-x: 0%; --cnr-y: 100%; border-bottom-width: 1.25px; border-left-width: 1.25px; border-bottom-left-radius: 10px; }
.auth-corner.br { bottom: var(--cnr-inset); right: var(--cnr-inset); --cnr-x: 100%; --cnr-y: 100%; border-bottom-width: 1.25px; border-right-width: 1.25px; border-bottom-right-radius: 10px; }
.auth-corner.tl::before { top: 3.5px; left: 3.5px; border-top-width: 0.8px; border-left-width: 0.8px; border-top-left-radius: 7px; }
.auth-corner.tr::before { top: 3.5px; right: 3.5px; border-top-width: 0.8px; border-right-width: 0.8px; border-top-right-radius: 7px; }
.auth-corner.bl::before { bottom: 3.5px; left: 3.5px; border-bottom-width: 0.8px; border-left-width: 0.8px; border-bottom-left-radius: 7px; }
.auth-corner.br::before { bottom: 3.5px; right: 3.5px; border-bottom-width: 0.8px; border-right-width: 0.8px; border-bottom-right-radius: 7px; }
.auth-corner.tl::after { top: var(--cnr-gem-offset); left: var(--cnr-gem-offset); }
.auth-corner.tr::after { top: var(--cnr-gem-offset); right: var(--cnr-gem-offset); }
.auth-corner.bl::after { bottom: var(--cnr-gem-offset); left: var(--cnr-gem-offset); }
.auth-corner.br::after { bottom: var(--cnr-gem-offset); right: var(--cnr-gem-offset); }
/* 小屏收紧，避免与卡片内容抢位（同样的 4px 内缩；宝石缩到 6px 并再内移一点以留在弧内） */
@media (max-width: 480px) {
    .auth-corner { --cnr-size: 32px; --cnr-inset: 4px; --cnr-gem: 6px; --cnr-gem-offset: 2.5px; }
}

/* ---- 页脚留白修正（必须在文件末尾才生效）----
   根因: 上方 `@supports (min-height: 100dvh)` 里有一条 `.auth-container{min-height:100dvh}`，
        与本文件第 1764 行的 v23.8 规则同特异度但位置更靠后，会把 min-height 顶回整屏高，
        导致页脚再次被推到首屏之外并留下黑色空带。此处以更靠后的同特异度规则压回。 */
.auth-container {
    min-height: calc(100vh - var(--nav-height) - 415px);
}
@supports (min-height: 100dvh) {
    .auth-container {
        min-height: calc(100dvh - var(--nav-height) - 415px);
    }
}

/* ---- 密码明文切换（登录页 + 注册页共用）---- */
.pw-wrap {
    position: relative;
}
.pw-wrap .input-field {
    padding-right: 48px;
}
.pw-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--text-muted, #8A8F98);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.18s ease;
}
.pw-toggle:hover {
    color: var(--gold, #F5B342);
}
.pw-toggle svg {
    width: 19px;
    height: 19px;
}
.pw-toggle .pw-eye-off {
    display: none;
}
.pw-toggle.is-on .pw-eye {
    display: none;
}
.pw-toggle.is-on .pw-eye-off {
    display: block;
}
.pw-toggle:focus-visible {
    outline: 2px solid rgba(245, 179, 66, 0.5);
    outline-offset: -4px;
    border-radius: 8px;
}

/* ---- 字段级错误态 / 下拉箭头 的 !important 覆盖 ----
   为什么必须写进 @layer overrides：
     基础控件规则在 `@layer axiom-overrides` 内用了 `border: … !important` 与
     `background: … !important`（style.css L9462-9463）。按 CSS 层叠层规范，
     !important 声明的层序是**反转**的，且**层外 !important 优先级最低**，
     因此放在文件末尾的「无层 !important」依然会输给层内 !important（与特异性无关）。
     `overrides` 层在第 19 行就已声明（早于 axiom-overrides），对 !important 而言更早的层优先，
     所以把覆盖规则放进这个层才能真正压住基础控件规则。 */
@layer overrides {
    .form-group.has-error .input-field,
    .form-group.has-error select {
        border-color: rgba(248, 113, 113, 0.72) !important;
    }
    .form-group.has-error .input-field:focus,
    .form-group.has-error select:focus {
        border-color: rgba(248, 113, 113, 0.9) !important;
    }
    /* 下拉框金色 chevron（去掉系统默认箭头后由背景图充当） */
    .auth-card select.input-field {
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23D4A55A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 16px center !important;
        background-size: 12px 8px !important;
    }
}

/* 错误态光晕（box-shadow 未被基础规则占用，普通声明即可生效） */
.form-group.has-error .input-field,
.form-group.has-error select {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}
.form-group.has-error .input-field:focus,
.form-group.has-error select:focus {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2);
}
.form-group.has-error .gender-btn {
    border-color: rgba(248, 113, 113, 0.5);
    color: #f8a5a5;
}
.form-group.has-error .checkbox-label {
    color: #f8a5a5;
}
.field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #f8a5a5;
}
.field-error:empty {
    display: none;
}
.field-error::before {
    content: '⚠';
    flex-shrink: 0;
    font-size: 0.82rem;
    color: #f87171;
}

/* ---- 下拉框主题化：去掉系统默认箭头，换金色 chevron（与既有 padding-right:40px 占位配套）----
   注意: 基础控件规则 `background: var(--input-bg) !important`（style.css L9462）是带 !important 的
        简写，会把 background-image/repeat/position/size 一并强制为初值，故此处四条都必须带 !important。 */
.auth-card select.input-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23D4A55A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 12px 8px !important;
    padding-right: 40px;
}

/* ---- 复选框主题化（原为 13×13 原生白框，深色卡片上极突兀）---- */
.checkbox-label {
    min-height: 44px;
    padding: 6px 0;
}
.checkbox-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin: 0;
    display: inline-grid;
    place-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    background: var(--bg-input, rgba(255, 255, 255, 0.03));
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.checkbox-label input[type="checkbox"]::before {
    content: '';
    width: 12px;
    height: 12px;
    transform: scale(0);
    background: #0A0B0D;
    clip-path: polygon(14% 46%, 0 62%, 39% 100%, 100% 20%, 85% 6%, 38% 68%);
    transition: transform 0.16s ease;
}
.checkbox-label input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #F5B342 0%, #E08A2A 100%);
    border-color: transparent;
}
.checkbox-label input[type="checkbox"]:checked::before {
    transform: scale(1);
}
.checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(245, 179, 66, 0.5);
    outline-offset: 2px;
}

/* ---- 按钮质感收敛：保留 hover 流光扫过，但收敛 40px 巨大金色辉光与 scale 弹跳 ----
   注: 原 `::before` 200%×200% 高光在静止态已 translateX(-100%) 移出按钮外（不可见），
       仅 hover 时扫过，属正常高级效果，故保留，不做禁用。 */
.auth-form .btn-primary {
    box-shadow: 0 6px 18px rgba(224, 138, 42, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.auth-form .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(224, 138, 42, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.auth-form .btn-primary:active {
    transform: translateY(0);
}

/* ================================================================
   T260925-02 · 2026-09-25 · style.css v7.9 — 亮色主题（皇室羊皮纸）补全层
   ----------------------------------------------------------------
   问题：亮色模式原先只覆盖 v2 令牌（--bg-app / --bg-surface-* / --text-* / --gold*），
         而全站外壳由 v4 令牌 + !important 规则绘制 → 「深黑外壳 + 一堆浅色卡片」割裂
         （真机症状：首页 8 个 .feature-card 全白、输入框近白底近白字）。
   做法：本块置于文件末尾，且【不放入任何 @layer】。未分层的普通声明在级联中
         优先于所有 @layer 内的普通声明，故可一次覆写 v2/v3/v4 三套令牌，
         既不必提升选择器特化，也不与分层 !important 冲突。
         （分层 !important 仍需「令牌间接」解决，见 html/body、.navbar、.page-box 三处
           已改为 var(--shell-bg|--nav-bg|--nav-bg-scrolled|--page-box-bg, 原字面值)。）
   ⚠️ --axiom-black 刻意保持不变：它同时被用作「金底上的文字色」（L9309/L9439/L9825），
      改动会导致金底白字。深底令牌改由 --axiom-black-soft/-elevated/-sunken 承接。
   ⚠️ 首页 Hero 刻意保持深色：它是全屏影片式序幕，深底浅字最稳；
      正文区转羊皮纸，形成「夜色序幕 + 羊皮纸正文」的层次。
   ================================================================ */
.light-mode {
    /* ---- 外壳与玻璃层（v4 令牌化后的 !important 消费点） ---- */
    --shell-bg: oklch(95.5% 0.018 88);
    --nav-bg: oklch(97% 0.016 88 / 0.72);
    --nav-bg-scrolled: oklch(97% 0.016 88 / 0.9);
    --page-box-bg: oklch(97.5% 0.014 88 / 0.78);

    /* ---- 深底令牌 → 羊皮纸层级（承接原 --axiom-black 系） ---- */
    --axiom-black-soft: oklch(93% 0.022 86);
    --axiom-black-elevated: oklch(97% 0.014 88);
    --axiom-black-sunken: oklch(90.5% 0.028 84);

    /* ---- 背景层级（v2 旧映射 + v4 空间层级） ---- */
    --bg-app: oklch(95.5% 0.018 88);
    --bg-primary: oklch(95.5% 0.018 88);
    --bg-surface-0: oklch(90.5% 0.028 84);
    --bg-surface-1: oklch(93.5% 0.02 86);
    --bg-surface-2: oklch(97% 0.014 88);
    --bg-surface-3: oklch(94.5% 0.02 86);
    --bg-surface-hover: oklch(94.5% 0.02 86);
    --bg-card: oklch(97% 0.014 88);
    --bg-dropdown: oklch(97.5% 0.012 88);
    --bg-input: oklch(98.5% 0.01 88 / 0.85);
    --bg-nav: oklch(97% 0.016 88 / 0.9);
    --bg-footer: oklch(92% 0.024 84);
    --bg-modal-overlay: oklch(28% 0.02 60 / 0.55);

    /* ---- 毛玻璃（羊皮纸上的浅色玻璃） ---- */
    --bg-glass-default: oklch(100% 0.01 88 / 0.5);
    --bg-glass-hover: oklch(100% 0 0 / 0.72);
    --bg-glass-border: oklch(62% 0.05 78 / 0.22);
    --axiom-glass-bg: oklch(100% 0.01 88 / 0.45);
    --axiom-glass-bg-hover: oklch(100% 0 0 / 0.68);
    --axiom-glass-border: oklch(62% 0.05 78 / 0.22);
    --axiom-glass-border-hover: oklch(55% 0.07 76 / 0.34);

    /* ---- 描边 / 分隔线（深色下是白透明，亮色下必须是墨透明） ---- */
    --border-color: oklch(80% 0.03 80);
    --divider: oklch(82% 0.028 80);

    /* ---- 文本层级：深墨（羊皮纸上的墨水） ---- */
    --text-headline: oklch(20% 0.02 62);
    --text-body: oklch(30% 0.018 62);
    --text-subtle: oklch(45% 0.017 64);
    --text-disabled: oklch(60% 0.015 66);
    --text-white: oklch(20% 0.02 62);
    --text-on-glass: oklch(20% 0.02 62);

    /* ---- v4 冷灰阶整体翻转（仅被 color: 消费，无 background 消费，可安全反转） ---- */
    --axiom-gray-50:  oklch(20% 0.02 62);
    --axiom-gray-100: oklch(26% 0.018 62);
    --axiom-gray-200: oklch(33% 0.018 62);
    --axiom-gray-300: oklch(41% 0.017 62);
    --axiom-gray-400: oklch(49% 0.016 64);
    --axiom-gray-500: oklch(56% 0.015 66);
    --axiom-gray-600: oklch(63% 0.014 68);
    --axiom-gray-700: oklch(71% 0.013 70);
    --axiom-gray-800: oklch(80% 0.012 72);
    --axiom-gray-900: oklch(88% 0.02 84);
    --axiom-gray-950: oklch(93% 0.022 86);

    /* ---- 输入 / 表单（原先只在 v2 覆盖，v4 的 --input-text 仍指向近白灰 → 白底白字） ---- */
    --input-bg: oklch(98.5% 0.01 88 / 0.85);
    --input-bg-hover: oklch(99% 0.008 88);
    --input-bg-focus: oklch(99.5% 0.006 88);
    --input-border: oklch(78% 0.03 78 / 0.7);
    --input-border-hover: oklch(68% 0.05 76 / 0.8);
    --input-ring: oklch(48% 0.12 55 / 0.22);
    --input-text: oklch(24% 0.018 62);
    --input-placeholder: oklch(58% 0.016 66);

    /* ---- 阴影：羊皮纸上用暖调淡影，避免深色主题的重黑投影 ---- */
    --shadow-glass:
        inset 0 1px 0 oklch(100% 0 0 / 0.6),
        inset 0 -1px 0 oklch(60% 0.03 80 / 0.15),
        0 12px 40px oklch(45% 0.03 76 / 0.12);
    --shadow-heavy: 0 20px 60px oklch(40% 0.03 74 / 0.18);
}

/* ---- 页脚：@layer 内用 --axiom-black 画深色渐变，亮色下必须整条替换 ---- */
.light-mode .footer {
    background: linear-gradient(
        180deg,
        oklch(92% 0.024 84) 0%,
        oklch(88% 0.03 82) 100%
    );
    border-top-color: oklch(72% 0.05 76 / 0.5);
}

/* ---- 亮色下仍保持深色底的「高级卡片」，在容器上把文本令牌局部翻回浅色 ----
   充值方案卡 .plan-cards 与支付方式卡 .method-cards 的设计底就是深色
   （.plan-card 深色渐变 !important、.method-card rgba(25,25,30,.6)），
   若不在此局部回翻，容器内的 --text-headline/--text-white/--axiom-gray-* 会变成
   深墨色 → 深底深字不可读。自定义属性按元素局部生效，故此块不影响容器之外。 */
.light-mode .plan-cards,
.light-mode .method-cards {
    --text-headline: oklch(97% 0.008 88);
    --text-body: oklch(92% 0.01 88);
    --text-subtle: oklch(79% 0.012 88);
    --text-disabled: oklch(63% 0.012 88);
    --text-white: oklch(97% 0.008 88);
    --axiom-gray-50:  oklch(97% 0.006 88);
    --axiom-gray-100: oklch(93% 0.008 88);
    --axiom-gray-200: oklch(89% 0.01 88);
    --axiom-gray-300: oklch(83% 0.01 88);
    --axiom-gray-400: oklch(75% 0.012 88);
    --axiom-gray-500: oklch(67% 0.012 88);
    --axiom-gray-600: oklch(59% 0.012 88);
}

/* ============================================================
   T261013-05 2026-10-13 首屏（Hero）h1 金色底纹缺陷修复 + 提灯定位参照系修正
   ------------------------------------------------------------
   ① 金色底纹 —— 「霓虹灭不掉」的根因
      本文件 8012-8029（保序合并的 design-upgrade-v2 / global-override 层）对
      `.hero-title / .hero-galaxy h1 / .hero-container h1` 设了
      `background: 金→紫渐变 + background-clip: text`。
      该层底纹是按 h1 内**全部文字的轮廓**绘制的，而 v39.9 的双色霓虹是靠
      `.neon-line-*` 的 opacity 动画交替 —— **子元素的 opacity 遮不住父元素这层底纹**，
      于是每盏灯"熄灭"后都留下一具金色字形，7s 双色交替形同失效
      （实测：粉灯 opacity=0 时，画面上金色「かぶきちょう」依然存在）。
      修法：只清掉 h1 自身这层底纹；`.text-gold`(TOKYO) 自带渐变，不受影响。
           选择器 `.hero-container .hero-title`(0,2,0) 压过 `.hero-container h1`(0,1,1)。
   ② 提灯 / 竖排小字定位参照系
      `.neon-lantern`(3036-3045) 与 `.neon-vertical`(3048-3064) 是 absolute，
      但 `.hero-title` 为 static ⇒ 包含块回退到 `.hero-content-wrapper`。
      桌面端容器 854 / 标题 806 相差不大（看着对纯属巧合）；手机端容器左边界仅
      24px，提灯实测 x=-12.6（390 视口）**约 70% 被裁到屏外**。
      修法：让 h1 自身成为"贴合文字"的定位参照系（修复后实测 x=11..29，屏内）。
   回滚：删除下方整块即可（无其它选择器引用这几个声明，零副作用）。
   ============================================================ */
.hero-container .hero-title {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: inherit;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}