/* ==========================================================================
   14280 · 子页统一视觉层「黄金战术 HUD」  arena-pages.css
   --------------------------------------------------------------------------
   覆盖页面：dashboard / players / profile / signup
   定位：14280-theme.css 之后的最后一层。职责有两个——
     ① 把 legacy「ZAP 荧光粉」体系（style.css / players 内联 / personal-dashboard）
        统一重映射到首页的黑曜石 + 冠军金口径；
     ② 给子页补上与首页一致的战术 HUD 质感（底色氛围 / 顶栏 / 页头金色流光 /
        卡片 / 表格 / 表单 / 按钮 / 动效）。
   铁律：只做覆盖，不改站点基线文件；回滚 = 移除本文件引用。
   版本：20261007-pages-hud-1
   ========================================================================== */

/* ---------- ⓪ 调色板 ---------- */
:root {
  --av-void: #050505;
  --av-void-2: #080909;
  --av-surface: #0e100e;
  --av-surface-2: #161814;
  --av-ivory: #f2efe8;
  --av-gold: #d7b56d;
  --av-gold-bright: #e2c47e;
  --av-gold-deep: #b9944c;
  --av-cyan: #86e7dd;
  --av-hair: rgba(215, 181, 109, .24);
  --av-hair-soft: rgba(215, 181, 109, .12);
  --av-glass: rgba(9, 10, 9, .72);
}

/* ---------- ① 令牌重映射：整套 ZAP 粉 → 冠军金 ---------- */
:root {
  --zap-black: #050505 !important;
  --zap-pink: #d7b56d !important;
  --zap-bright: #e2c47e !important;
  --zap-magenta: #b9944c !important;
  --zap-white: #f2efe8 !important;
  --zap-pink-35: rgba(215, 181, 109, .35) !important;
  --zap-pink-14: rgba(215, 181, 109, .14) !important;
  --zap-pink-06: rgba(215, 181, 109, .06) !important;
  --zap-bright-55: rgba(226, 196, 126, .55) !important;
  --zap-bright-22: rgba(226, 196, 126, .22) !important;
  --zap-bright-08: rgba(226, 196, 126, .08) !important;
  --zap-white-10: rgba(242, 239, 232, .10) !important;
  --zap-white-06: rgba(242, 239, 232, .06) !important;
  --zap-white-04: rgba(242, 239, 232, .04) !important;
  --zap-cyan: #86e7dd !important;
  --txt-1: #f2efe8 !important;
  --txt-2: rgba(242, 239, 232, .74) !important;
  --txt-3: rgba(242, 239, 232, .46) !important;
  /* dashboard 私有令牌（仅 personal-dashboard.css 使用） */
  --bg: #050505 !important;
  --panel: #0e100e !important;
  --line: rgba(215, 181, 109, .18) !important;
  --gold: #d7b56d !important;
  --cyan: #86e7dd !important;
  --text: #f2efe8 !important;
  --muted: rgba(242, 239, 232, .52) !important;
}

/* ---------- ② 底色氛围：黑曜石 + 金色穹光（灭掉 ZAP 地图底图） ---------- */
html, body { background-color: var(--av-void) !important; color: var(--av-ivory) !important; }

body {
  background-image:
    radial-gradient(120% 62% at 50% -12%, rgba(215, 181, 109, .14), transparent 60%),
    radial-gradient(58% 42% at 90% 4%, rgba(134, 231, 221, .05), transparent 72%),
    radial-gradient(80% 50% at 6% 102%, rgba(215, 181, 109, .05), transparent 70%),
    linear-gradient(180deg, #0a0b0a 0%, #060707 42%, #050505 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

/* 上暗下压的观感层（替换站点 ZAP 地图云纹） */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: linear-gradient(180deg,
    transparent 0,
    rgba(5, 5, 5, .30) 46%,
    rgba(5, 5, 5, .70) 100%) !important;
}

/* 战术网格 + 暗角（HUD 底纹） */
body::after {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .8 !important;
  background:
    repeating-linear-gradient(0deg, rgba(215, 181, 109, .030) 0 1px, transparent 1px 68px),
    repeating-linear-gradient(90deg, rgba(215, 181, 109, .030) 0 1px, transparent 1px 68px),
    radial-gradient(130% 96% at 50% 34%, transparent 42%, rgba(0, 0, 0, .58) 100%) !important;
}

/* ---------- ③ 顶栏 / 导航 ---------- */
.topbar {
  background: linear-gradient(180deg, rgba(5, 5, 5, .94), rgba(5, 5, 5, .76)) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) !important;
  backdrop-filter: blur(16px) saturate(1.15) !important;
  border-bottom: 1px solid var(--av-hair) !important;
  box-shadow: 0 14px 40px -24px rgba(0, 0, 0, .95) !important;
}
.topbar.scrolled, .topbar.av-scrolled {
  background: linear-gradient(180deg, rgba(5, 5, 5, .97), rgba(5, 5, 5, .90)) !important;
  border-bottom-color: rgba(215, 181, 109, .34) !important;
  box-shadow: 0 18px 48px -24px rgba(0, 0, 0, 1) !important;
}

.navbar {
  background: rgba(9, 10, 9, .70) !important;
  border: 1px solid var(--av-hair-soft) !important;
  box-shadow: inset 0 1px 0 rgba(242, 239, 232, .06), 0 12px 30px -18px rgba(0, 0, 0, .9) !important;
}
.navbar a, .navbar button { color: rgba(242, 239, 232, .62) !important; }
.navbar a:hover, .navbar button:hover { color: #fff !important; background: rgba(215, 181, 109, .12) !important; }
.navbar a.active, .navbar button.active {
  color: #17130a !important;
  background: linear-gradient(135deg, #e2c47e, #b9944c) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 8px 22px -10px rgba(215, 181, 109, .70) !important;
}

/* dashboard 顶栏（.nav-links / .brand / .read-only） */
.dashboard-shell .topbar { border-bottom-color: var(--av-hair) !important; }
.dashboard-shell .nav-links { color: rgba(242, 239, 232, .58) !important; }
.dashboard-shell .nav-links a:hover { color: var(--av-gold-bright) !important; }
.dashboard-shell .nav-links [aria-current] { color: var(--av-gold) !important; }
.dashboard-shell .brand { color: rgba(242, 239, 232, .8) !important; }
.dashboard-shell .brand b { color: var(--av-gold) !important; }
.dashboard-shell .brand-mark {
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 9px rgba(224, 176, 86, .5)) !important;
}

/* ---------- ④ 子页页头：金色流光标题 + 穹光 ---------- */
.page-hero { position: relative !important; text-align: center !important; padding: 54px 0 28px !important; }
.page-hero::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 2px !important;
  transform: translateX(-50%) !important;
  width: min(780px, 94%) !important;
  height: 200px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: radial-gradient(58% 100% at 50% 42%, rgba(215, 181, 109, .18), transparent 70%) !important;
  filter: blur(8px) !important;
}
.page-hero > * { position: relative !important; z-index: 1 !important; }

.page-hero .crumb { color: rgba(215, 181, 109, .80) !important; letter-spacing: .34em !important; }
.page-hero .crumb::before,
.page-hero .crumb::after {
  height: 1px !important;
  width: 58px !important;
  background: linear-gradient(90deg, transparent, rgba(215, 181, 109, .62)) !important;
}
.page-hero .crumb::after { background: linear-gradient(90deg, rgba(215, 181, 109, .62), transparent) !important; }
.page-hero .sub { color: rgba(242, 239, 232, .40) !important; letter-spacing: .22em !important; }

/* 金色流光标题（覆盖 style.css / players 内联的粉色 gradient + 粉色 text-shadow） */
html body .shimmer-text {
  background: linear-gradient(105deg,
    #b9944c 0%, #e2c47e 20%, #fff7dd 40%, #fffdf6 50%,
    #e2c47e 60%, #d7b56d 78%, #b9944c 100%) !important;
  background-size: 260% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: avPageGoldSweep 4.2s linear infinite !important;
  text-shadow: none !important;
  filter: drop-shadow(0 3px 22px rgba(215, 181, 109, .42)) !important;
}
@keyframes avPageGoldSweep {
  0% { background-position: 260% center; }
  100% { background-position: -60% center; }
}
html body .shimmer-soft {
  color: #fff !important;
  text-shadow: 0 0 14px rgba(215, 181, 109, .70), 0 0 34px rgba(215, 181, 109, .40) !important;
}
html body .page-hero h1 { color: #fff !important; }

/* ---------- ⑤ 卡片 / 面板：黑曜石玻璃 + 金色描边 ---------- */
.page-card, .panel, .card3d, .week-card, .kpi, .metric-card,
.filter-panel, .registration-context, .availability-slot, .su-panel,
.auth-tabs, .methodology {
  position: relative !important;
  border: 1px solid var(--av-hair) !important;
  background:
    linear-gradient(160deg, rgba(22, 24, 21, .86), rgba(8, 9, 9, .92)) !important;
  box-shadow:
    inset 0 1px 0 rgba(242, 239, 232, .06),
    0 24px 60px -34px rgba(0, 0, 0, .95) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
}
/* 金色顶部发丝线（HUD 签名） */
.page-card::before, .panel::before, .metric-card::before, .filter-panel::before, .kpi::before {
  content: '' !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  top: 0 !important;
  height: 1px !important;
  pointer-events: none !important;
  background: linear-gradient(90deg, transparent, rgba(215, 181, 109, .55), transparent) !important;
  opacity: .65 !important;
}
.card3d:hover, .week-card:hover {
  border-color: rgba(215, 181, 109, .40) !important;
  box-shadow:
    inset 0 1px 0 rgba(242, 239, 232, .10),
    0 32px 66px -30px rgba(215, 181, 109, .30),
    0 6px 18px rgba(0, 0, 0, .7) !important;
}
.panel-head { background: linear-gradient(180deg, rgba(215, 181, 109, .07), transparent) !important; border-bottom-color: var(--av-hair-soft) !important; }
.panel-head h3 { color: var(--av-ivory) !important; }

/* ---------- ⑥ 分区标题 .sec-head ---------- */
.sec-head .no { color: var(--av-gold) !important; text-shadow: 0 0 16px rgba(215, 181, 109, .45) !important; }
.sec-head h2 { color: var(--av-ivory) !important; text-shadow: 0 1px 0 rgba(0, 0, 0, .6) !important; }
.sec-head .sub { color: rgba(242, 239, 232, .38) !important; }
.sec-head .rule { background: linear-gradient(90deg, rgba(215, 181, 109, .45), transparent) !important; }

/* ---------- ⑦ 表格：金线 + 条纹 + 悬停 ---------- */
table th {
  color: rgba(215, 181, 109, .85) !important;
  background: rgba(215, 181, 109, .07) !important;
  border-bottom: 1px solid var(--av-hair) !important;
}
table td { border-bottom: 1px solid rgba(242, 239, 232, .06) !important; }
tbody tr:nth-child(even) { background: rgba(242, 239, 232, .018) !important; }
tbody tr:hover, .player-row:hover, .pstat-table tr:hover td { background: rgba(215, 181, 109, .075) !important; }
.rank-1, .rating-hi { color: var(--av-gold-bright) !important; text-shadow: 0 0 18px rgba(215, 181, 109, .50) !important; }
.dashboard-shell th button { color: rgba(215, 181, 109, .78) !important; }
.dashboard-shell th[aria-sort=ascending] button,
.dashboard-shell th[aria-sort=descending] button { color: var(--av-gold) !important; }
.dashboard-shell .player-link { color: #f0d9a8 !important; }
.dashboard-shell .player-link:hover { color: var(--av-gold) !important; }

/* ---------- ⑧ 表单 / 输入 / 按钮 ---------- */
input, select, textarea {
  background: rgba(6, 7, 6, .92) !important;
  color: var(--av-ivory) !important;
  border: 1px solid rgba(215, 181, 109, .24) !important;
}
input::placeholder, textarea::placeholder { color: rgba(242, 239, 232, .30) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--av-gold) !important;
  box-shadow: 0 0 0 3px rgba(215, 181, 109, .16) !important;
  outline: none !important;
}
button, .button, .btn { border-color: rgba(215, 181, 109, .30) !important; }
button:hover { border-color: var(--av-gold) !important; }

/* 主行动按钮统一金色渐变（真正的 CTA） */
.nav-cta, .sf-submit, .gold-button, .su-submit,
button.primary, .btn-primary {
  color: #16120a !important;
  background: linear-gradient(135deg, #e2c47e, #b9944c) !important;
  border-color: rgba(226, 196, 126, .55) !important;
  box-shadow: 0 10px 28px -12px rgba(215, 181, 109, .70), inset 0 1px 0 rgba(255, 255, 255, .40) !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* 选中态 Tab：暗底 + 金边 + 金字（大尺寸 Tab 不做实金块，否则一片金压屏） */
.auth-tab.active, .su-tab.active,
.tabs button.on, .champ-tabs button.on {
  color: #fff6dd !important;
  background: linear-gradient(135deg, rgba(226, 196, 126, .24), rgba(185, 148, 76, .12)) !important;
  border-color: rgba(226, 196, 126, .70) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 26px -14px rgba(215, 181, 109, .65) !important;
  font-weight: 700 !important;
}
.nav-cta:hover, .sf-submit:hover, .gold-button:hover, .su-submit:hover {
  background: linear-gradient(135deg, #f0d79a, #c9a45c) !important;
  color: #16120a !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 38px -14px rgba(215, 181, 109, .85) !important;
}

/* ---------- ⑨ 标签 / 3D 徽记 ---------- */
.tag3d {
  background: linear-gradient(180deg, rgba(215, 181, 109, .18), rgba(215, 181, 109, .05)) !important;
  border-color: rgba(215, 181, 109, .45) !important;
  border-bottom-color: rgba(215, 181, 109, .22) !important;
  color: var(--av-ivory) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20), 0 3px 10px -2px rgba(0, 0, 0, .7) !important;
}
.tag3d.pink {
  background: linear-gradient(180deg, rgba(226, 196, 126, .28), rgba(215, 181, 109, .10)) !important;
  border-color: rgba(226, 196, 126, .55) !important;
  border-bottom-color: rgba(185, 148, 76, .70) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), 0 3px 12px -2px rgba(215, 181, 109, .48) !important;
}
.chip3d {
  background: linear-gradient(180deg, rgba(226, 196, 126, .22), rgba(185, 148, 76, .12)) !important;
  border-color: rgba(226, 196, 126, .40) !important;
  border-bottom-color: rgba(185, 148, 76, .60) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 6px -1px rgba(215, 181, 109, .40) !important;
}
.back-link:hover { color: #fff !important; border-color: var(--av-hair) !important; box-shadow: 0 0 18px rgba(215, 181, 109, .28) !important; }

/* ---------- ⑩ 左下角登录挂件 / 弹窗 ---------- */
.ca-login-btn {
  background: rgba(5, 6, 5, .90) !important;
  border-color: var(--av-hair) !important;
  color: var(--av-ivory) !important;
}
.ca-login-btn:hover { border-color: var(--av-gold) !important; box-shadow: 0 12px 34px -10px rgba(215, 181, 109, .55) !important; }
.ca-login-btn .ca-ico { filter: drop-shadow(0 0 6px rgba(215, 181, 109, .55)) !important; }
.ca-card { background: rgba(6, 7, 6, .94) !important; border-color: var(--av-hair) !important; }
.modal {
  background: linear-gradient(170deg, rgba(226, 196, 126, .07), rgba(6, 7, 6, .95) 40%), #060706 !important;
  border-color: var(--av-hair) !important;
  box-shadow: inset 0 1px 0 rgba(242, 239, 232, .10), 0 40px 90px -30px rgba(0, 0, 0, .85) !important;
}
.modal-close:hover { color: #16120a !important; border-color: var(--av-gold) !important; background: var(--av-gold) !important; box-shadow: 0 6px 20px rgba(215, 181, 109, .45) !important; }
.dm-score-line .t.win { color: var(--av-gold-bright) !important; text-shadow: 0 0 20px rgba(215, 181, 109, .45) !important; }

/* ---------- ⑪ dashboard 专属 ---------- */
.dashboard-shell .hero h1 { color: var(--av-ivory) !important; }
.dashboard-shell .hero h1 span {
  background: linear-gradient(105deg, #b9944c, #e2c47e 28%, #fff7dd 50%, #e2c47e 72%, #b9944c 100%) !important;
  background-size: 220% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 18px rgba(215, 181, 109, .38)) !important;
}
.dashboard-shell .hero-emblem { border-left-color: rgba(215, 181, 109, .35) !important; color: var(--av-gold) !important; }
.dashboard-shell .hero-emblem span { text-shadow: 0 0 34px rgba(215, 181, 109, .35) !important; }
.dashboard-shell .hero-emblem small { color: rgba(215, 181, 109, .62) !important; }
.dashboard-shell .eyebrow, .dashboard-shell .section-kicker { color: var(--av-gold) !important; }
.dashboard-shell .filter-heading > span:last-child { color: rgba(242, 239, 232, .48) !important; }
.metric-card .metric-value { color: var(--av-ivory) !important; }
.metric-card.featured .metric-value,
.metric-card.cyan .metric-value { color: var(--av-gold-bright) !important; text-shadow: 0 0 26px rgba(215, 181, 109, .38) !important; }
.metric-card .metric-label { color: rgba(242, 239, 232, .72) !important; }
.metric-card .metric-note { color: rgba(242, 239, 232, .46) !important; }
.dashboard-shell .panel-tag { color: var(--av-gold) !important; border-color: rgba(215, 181, 109, .35) !important; background: rgba(215, 181, 109, .08) !important; }
.dashboard-shell .cyan-tag { color: var(--av-cyan) !important; border-color: rgba(134, 231, 221, .35) !important; background: rgba(134, 231, 221, .07) !important; }
.dashboard-shell .bar-track { background: rgba(242, 239, 232, .08) !important; }
.dashboard-shell .bar-fill { background: linear-gradient(90deg, #a88146, #edc47c) !important; }
.dashboard-shell .map-row:nth-child(even) .bar-fill { background: linear-gradient(90deg, #3f8f88, #86e7dd) !important; }
.dashboard-shell .rating-row { background: rgba(215, 181, 109, .05) !important; border-color: rgba(215, 181, 109, .14) !important; }
.dashboard-shell .rating-row strong { color: var(--av-cyan) !important; }
.dashboard-shell .status-strip { color: rgba(242, 239, 232, .52) !important; }
.dashboard-shell footer { border-top-color: var(--av-hair-soft) !important; color: rgba(242, 239, 232, .40) !important; }
.dashboard-shell dialog { border-color: var(--av-hair) !important; }
.dashboard-shell button { background: rgba(20, 22, 20, .92) !important; border-color: rgba(215, 181, 109, .26) !important; color: var(--av-ivory) !important; }
.dashboard-shell .skip-link { background: var(--av-gold) !important; color: #111 !important; }

/* ---------- ⑫ players 专属 ---------- */
.badge-updated b { color: var(--av-gold) !important; }
.badge-demo { color: var(--av-gold-bright) !important; border-color: rgba(215, 181, 109, .45) !important; }

/* ---------- ⑬ 页脚 ---------- */
.foot, .page-card ~ .foot { border-top-color: var(--av-hair-soft) !important; color: rgba(242, 239, 232, .40) !important; }
.foot a { color: rgba(242, 239, 232, .70) !important; }
.foot a:hover { color: var(--av-gold-bright) !important; }

/* ---------- ⑭ 动效层（JS 挂类） ---------- */
.av-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 0;
  z-index: 1200; pointer-events: none;
  background: linear-gradient(90deg, rgba(226, 196, 126, .2), #e2c47e 60%, #fff7dd);
  box-shadow: 0 0 14px rgba(215, 181, 109, .8);
  transition: width .09s linear;
}
.av-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.av-reveal.av-in { opacity: 1; transform: none; }

/* ---------- ⑯ 补充覆盖：signup 报名流程 / 弹窗关闭 / 挑战卡 ---------- */
.modal-close {
  background: rgba(215, 181, 109, .12) !important;
  border-color: rgba(215, 181, 109, .30) !important;
  color: var(--av-ivory) !important;
}
/* 报名引导条（原粉色扫光） */
.signup-wayfinder {
  border-color: var(--av-hair) !important;
  background: rgba(215, 181, 109, .07) !important;
  box-shadow: inset 3px 0 0 var(--av-gold), 0 0 24px rgba(215, 181, 109, .14) !important;
}
.signup-wayfinder::before {
  background: linear-gradient(90deg, transparent, rgba(134, 231, 221, .08), rgba(255, 255, 255, .52), rgba(226, 196, 126, .22), transparent) !important;
}
.signup-wayfinder::after {
  border-left-color: rgba(134, 231, 221, .35) !important;
  border-right-color: rgba(215, 181, 109, .42) !important;
}
.signup-wayfinder__track span { color: #fff7e6 !important; text-shadow: 0 0 12px rgba(215, 181, 109, .55) !important; }
.signup-wayfinder__track strong { color: var(--av-cyan) !important; }
/* 挑战擂主卡 */
.ch-curr {
  border-color: var(--av-hair) !important;
  background: linear-gradient(135deg, rgba(215, 181, 109, .09), rgba(134, 231, 221, .04)) !important;
}
/* 三档报名 tab：统一到 青 / 亮金 / 金 三色（避开 .active 的金底，用 :not(.active) 兜住） */
.su-tab[data-tab="team"]:not(.active) { color: var(--av-cyan) !important; border-color: rgba(134, 231, 221, .36) !important; background: rgba(134, 231, 221, .06) !important; }
.su-tab[data-tab="solo"]:not(.active) { color: var(--av-gold-bright) !important; border-color: rgba(226, 196, 126, .42) !important; background: rgba(215, 181, 109, .07) !important; }
.su-tab[data-tab="challenge"]:not(.active) { color: var(--av-gold) !important; border-color: rgba(215, 181, 109, .42) !important; background: rgba(215, 181, 109, .06) !important; }
.su-tab.active::before { background: var(--av-gold-bright) !important; box-shadow: 0 0 14px rgba(226, 196, 126, .8) !important; }
.su-tab:not(.active)::before { box-shadow: 0 0 12px currentColor !important; }

/* ---------- ⑮ 无障碍 / 降级 / 响应 ---------- */
@media (prefers-reduced-motion: reduce) {
  html body .shimmer-text { animation: none !important; }
  .av-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .av-progress { display: none !important; }
}
@media (max-width: 760px) {
  body { background-attachment: scroll !important; }
  .page-hero { padding: 36px 0 20px !important; }
  .page-hero::before { height: 150px !important; }
  body::after { opacity: .5 !important; }
}