/* ===========================
    App 主容器 — 深蓝黑主题 + 氛围光
=========================== */
#app {
  max-width: 480px; margin:0 auto;
  background: #0B1426;
  min-height: 100vh; position: relative; overflow-x: hidden;
  box-shadow: -4px 0 40px rgba(0,0,0,0.4), 4px 0 40px rgba(0,0,0,0.4), 0 0 80px rgba(0,0,0,0.3);
}

/* 氛围光 — 静态渐变 */
#app::before {
  content: '';
  position: fixed; top: -20%; left: -30%; width: 80vw; height: 60vh;
  background: radial-gradient(ellipse, rgba(0,230,138,0.05) 0%, transparent 70%);
  pointer-events: none; z-index: var(--z-base);
}
#app::after {
  content: '';
  position: fixed; bottom: -10%; right: -30%; width: 70vw; height: 50vh;
  background: radial-gradient(ellipse, rgba(59,130,246,0.04) 0%, transparent 70%);
  pointer-events: none; z-index: var(--z-base);
}

/* Tab 页面容器 */
.tab-page { display: none; padding-bottom: 90px; will-change: opacity, transform; }
.tab-page.active { display: block; animation: pageSlideIn 0.3s cubic-bezier(.22,.68,0,1) forwards; }
/* 首页内容留出固定导航空间 */
#pageHome { padding-top: 62px; }
/* 赛事页内容留出固定标签空间 */
#pageEvents { padding-top: 46px; }
/* 记录页内容留出固定标签空间（两行筛选） */
#pageRecords { padding-top: 92px; }
@keyframes pageSlideIn {
  from { opacity:0; transform: translateY(12px); }
  to { opacity:1; transform: translateY(0); }
}

/* ===========================
   顶部导航 — 深色毛玻璃
=========================== */
.top-nav {
  position: fixed; top:0; left:50%; transform: translateX(-50%);
  width: 100%; max-width: 480px; z-index: var(--z-sticky);
  background: rgba(11,20,38,0.92);
  backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  padding: 14px 20px; display: flex; align-items: center; justify-content: space-between;
  border-bottom:1px solid rgba(255,255,255,0.06);
  box-sizing: border-box;
}
.top-nav .app-name {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 800; color: var(--text-main);
  display: flex; align-items: center; gap: 10px;
  letter-spacing: -0.3px;
}
.top-nav .app-name svg { width: 28px; height: 28px; }
.top-nav .balance-area { display: flex; align-items: center; gap: 12px; }
.balance-amount { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 800; color: var(--text-main); letter-spacing: -0.5px; }
.btn-recharge {
  background: rgba(255,255,255,0.08);
  color: var(--text-main); border:1.5px solid rgba(255,255,255,0.12); border-radius: 50%;
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-md); cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 3px 12px rgba(0,0,0,0.3);
}
.btn-recharge:active { transform: scale(0.88); }

/* 未登录 — 登录 + 注册按钮 */
.top-nav .auth-area { display: flex; align-items: center; gap: 8px; }
.btn-login {
  background: rgba(255,255,255,0.06);
  color: var(--text-main); border:1.5px solid rgba(255,255,255,0.12);
  border-radius: 20px; padding: 6px 18px; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-login:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}
.btn-login:active { transform: scale(0.92); opacity: 0.85; }
.btn-register {
  background: linear-gradient(135deg, var(--primary) 0%, #00C485 100%);
  color: #fff; border: none;
  border-radius: 20px; padding: 6px 18px; font-size: var(--fs-sm); font-weight: 700;
  cursor: pointer; transition: all 0.25s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 12px rgba(0,230,138,0.3), 0 2px 8px rgba(0,0,0,0.3);
  -webkit-tap-highlight-color: transparent;
}
.btn-register:hover { box-shadow: 0 4px 20px rgba(0,230,138,0.4), 0 2px 8px rgba(0,0,0,0.3); }
.btn-register:active { transform: scale(0.92); }

/* 已登录 — 用户名问候 */
.user-greeting {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-muted);
  max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===========================
   底部导航 — 深色毛玻璃
=========================== */
.bottom-nav {
  position: fixed; bottom:0; left:50%; transform: translateX(-50%);
  width: 100%; max-width: 480px;
  background: rgba(11,20,38,0.92);
  backdrop-filter: saturate(180%) blur(24px); -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top:1px solid rgba(255,255,255,0.06);
  display: flex; z-index: var(--z-bottom-nav);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}
.nav-item {
  flex:1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 0 12px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: all 0.25s cubic-bezier(.4,0,.2,1); color: var(--text-light); font-size: var(--fs-xs); gap: 3px; position: relative;
  font-weight: 500;
}
.nav-item i { font-size: var(--icon-xl); transition: all 0.25s cubic-bezier(.4,0,.2,1); }
.nav-item.active { color: var(--text-main); font-weight: 700; }
.nav-item.active i { transform: translateY(-2px); color: var(--primary); }
.nav-item.active::after {
  content: ''; position: absolute; top:0; left:30%; right:30%; height: 3px;
  background: var(--primary);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(0,230,138,0.3);
  animation: navIndicatorIn 0.3s cubic-bezier(.22,.68,0,1);
}
@keyframes navIndicatorIn {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}