/* ============================================================
   style.css — 全站共用基础样式（设计 token + 通用组件）
   页面专属样式请写在各自 <style> 内；以下类名由本文件独占，
   页面里不要重复定义：.bg-deco .nav .logo .btn .tags .state .skeleton .fab
   ============================================================ */

:root {
  --a1: #a78bfa;                 /* 主紫 */
  --a2: #f472b6;                 /* 主粉 */
  --a3: #22d3ee;                 /* 点缀青 */
  --bg: #0a0613;                 /* 深紫黑背景 */
  --card: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.10);
  --text: #fff;
  --muted: rgba(255, 255, 255, 0.5);
  --radius: 20px;
  --wrap: 1120px;
  --ease: cubic-bezier(.2, .9, .3, 1.2);
  --grad: linear-gradient(135deg, var(--a1), var(--a2));
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  background: var(--bg);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
img { max-width: 100%; }

/* ---------- 背景光斑 ---------- */
.bg-deco { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.bg-deco::before, .bg-deco::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(110px);
}
.bg-deco::before { width: 620px; height: 620px; top: -220px; left: -160px; background: rgba(167, 139, 250, 0.18); }
.bg-deco::after  { width: 520px; height: 520px; bottom: -220px; right: -120px; background: rgba(244, 114, 182, 0.14); }

/* ---------- 顶部导航（纯色半透明，不用 backdrop-filter，遵守性能红线） ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 6, 19, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .05em; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--grad); display: grid; place-items: center; font-size: 17px;
  box-shadow: 0 6px 18px rgba(167, 139, 250, 0.4);
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 11px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05); color: #fff;
  font-size: 13px; cursor: pointer; text-decoration: none;
  font-family: inherit; transition: all .2s; position: relative;
}
.btn:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(167, 139, 250, 0.4); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--grad); border: none; font-weight: 700; box-shadow: 0 10px 24px rgba(167, 139, 250, 0.35); }
.btn.primary:hover { opacity: .92; }
.btn.danger { color: #fca5a5; border-color: rgba(252, 165, 165, 0.3); }
.btn.danger:hover { background: rgba(252, 165, 165, 0.12); border-color: rgba(252, 165, 165, 0.55); }
.btn.small { padding: 6px 12px; font-size: 12px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- 标签 ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span {
  padding: 4px 12px; font-size: 12px; border-radius: 999px;
  color: #e5d9ff; background: rgba(139, 92, 246, 0.16);
  border: 1px solid rgba(167, 139, 250, 0.32);
}

/* ---------- 空 / 错误状态 ---------- */
.state { max-width: 480px; margin: 120px auto; text-align: center; padding: 0 20px; }
.state h1 { font-size: 26px; margin: 0 0 12px; }
.state p { color: var(--muted); margin: 0 0 26px; }

/* ---------- 骨架屏 ---------- */
.skeleton {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.05); border-radius: 14px;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: translateX(-100%); animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* ---------- 返回顶部 ---------- */
.fab {
  position: fixed; right: 18px; bottom: 22px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(20, 11, 38, 0.9); color: #fff; cursor: pointer;
  display: grid; place-items: center; font-size: 18px;
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .25s, transform .25s;
}
.fab.show { opacity: 1; pointer-events: auto; transform: none; }
.fab:active { transform: scale(.94); }

/* ---------- 站点页脚（index / ranking / profile 三页共用） ---------- */
.site-footer {
  margin-top: 34px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}
.site-footer-inner {
  max-width: 720px; margin: 0 auto; padding: 26px 20px 34px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 18px;
}
.site-footer-brand {
  margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.72);
}
.site-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.site-footer-links a {
  font-size: 12.5px; color: var(--muted); text-decoration: none;
  transition: color .2s;
}
.site-footer-links a:hover { color: var(--text); }
.site-footer-note {
  flex: 1 1 100%; margin: 2px 0 0; font-size: 11.5px; line-height: 1.8;
  color: rgba(255, 255, 255, 0.38);
}

/* ---------- 无障碍 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 尊重减弱动效偏好（性能红线） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 移动端细节（本站在手机上访问为主） ---------- */
html { -webkit-text-size-adjust: 100%; }

@media (max-width: 640px) {
  /* iOS Safari：聚焦字号 <16px 的输入框会自动放大整个页面，
     这里统一提到 16px，避免搜索框/登录框/留言框一点就跳大 */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select { font-size: 16px !important; }

  /* 小号按钮放大到更舒服的触摸目标（导航/分享/发送等） */
  .btn.small { min-height: 34px; padding: 8px 14px; }
}

/* ============================================================
   漫展相关共享组件（首页卡片认领标记 / 活动详情页组件）
   仅使用既有 token 与品牌色（--a1 紫 / --a2 粉 / --a3 青），不引入新色值
   ============================================================ */

/* ---------- 已认领标记（首页卡片正面，极小、可访问） ---------- */
.claimed-badge {
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-left: 6px;
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  font-size: 10px; font-weight: 800; line-height: 1;
  color: var(--bg); background: var(--a3);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .35);
}

/* ---------- 活动页小胶囊（展厅 / 摊位 / Day） ---------- */
.ev-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; white-space: nowrap;
  color: #a5f3fc; background: rgba(34, 211, 238, .12);
  border: 1px solid rgba(34, 211, 238, .28);
}

/* ---------- 参展者网格 + 卡片 ---------- */
.ev-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.ev-card {
  display: flex; flex-direction: column; overflow: hidden;
  text-decoration: none; color: inherit;
  border-radius: var(--radius); background: var(--card); border: 1px solid var(--border);
  transition: transform .22s var(--ease), border-color .22s, box-shadow .22s;
}
.ev-card:hover { transform: translateY(-4px); border-color: rgba(167, 139, 250, .55); box-shadow: 0 18px 38px rgba(0, 0, 0, .5); }
.ev-card:active { transform: scale(.985); }
.ev-card-img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  background: var(--bg);
}
.ev-card-body { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 12px; }
.ev-card-name {
  margin: 0; font-size: 14.5px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-card-title {
  margin: 0; font-size: 11.5px; color: var(--a1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 4px 0 0; }

/* ============================================================
   「霓虹流光」共享视觉层（追加区，配套 public/neon.js）
   只新增 token / 新类 / 新关键帧，绝不覆盖上面的既有类与关键帧。
   性能红线：动画只走 transform 与 opacity；全站唯一 blur 在 .bg-deco i（60px）；
             不使用 backdrop-filter；极光 3 个、粒子每层 ≤14、纸屑 ≤30；
             prefers-reduced-motion: reduce 时全部关闭。
   ============================================================ */

:root {
  --neon-tab-h: 60px;     /* 移动端底部 Tab 栏高度（body 留白 / 提示条定位共用） */
  --neon-gold: #fcd34d;   /* 金色粒子（neonDust / 纸屑用） */
}

/* ---------- 1. 极光背景：由 neon.js 注入 <i class="aurora-1|2|3"> ---------- */
.bg-deco i {
  position: absolute; border-radius: 50%;
  filter: blur(60px); opacity: .5;      /* 全站唯一允许的 blur，且保持克制 */
  will-change: transform;
}
.bg-deco .aurora-1,
.bg-deco .aurora-2,
.bg-deco .aurora-3 {
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.bg-deco .aurora-1 {
  width: 66vmax; height: 66vmax; top: -18vmax; left: -22vmax;
  background: rgba(167, 139, 250, .42);   /* v2 加料：.30 → .42 */
  animation-name: neonAuroraA; animation-duration: 26s; animation-delay: -6s;
}
.bg-deco .aurora-2 {
  width: 60vmax; height: 60vmax; top: 16vmax; right: -26vmax;
  background: rgba(244, 114, 182, .34);   /* v2 加料：.24 → .34 */
  animation-name: neonAuroraB; animation-duration: 22s; animation-delay: -10s;
}
.bg-deco .aurora-3 {
  width: 70vmax; height: 70vmax; bottom: -26vmax; left: 4vmax;
  background: rgba(34, 211, 238, .26);    /* v2 加料：.18 → .26 */
  animation-name: neonAuroraC; animation-duration: 30s; animation-delay: -16s;
}

/* ---------- 2. 底部 Tab 栏（仅 ≤640px 显示；z-index 90 高于 .pf-likebar 的 80） ---------- */
.neon-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; align-items: stretch;
  background: rgba(10, 6, 19, .96);        /* 纯色半透明：按性能红线不用 backdrop-filter */
  backdrop-filter: none;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 640px) { .neon-tabbar { display: flex; } }

.neon-tab {
  flex: 1 1 0; min-width: 0; height: var(--neon-tab-h);
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  color: var(--muted); font-family: inherit; font-size: 11px; line-height: 1;
  text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s, opacity .2s;   /* 只过渡 transform / opacity */
}
.neon-tab svg { width: 22px; height: 22px; display: block; }
.neon-tab::after {                          /* 选中指示：渐变短横 */
  content: ''; position: absolute; top: 5px; left: 50%;
  width: 18px; height: 3px; margin-left: -9px; border-radius: 999px;
  background: var(--grad); opacity: 0; transform: scaleX(.3);
  transition: opacity .2s, transform .2s var(--ease);
}
.neon-tab.is-active { color: #fff; }
.neon-tab.is-active::after { opacity: 1; transform: none; }
.neon-tab:active { transform: scale(.94); }

/* ---------- 3. 挂载底栏后的 body（桌面端无底栏，不留白） ---------- */
body.neon-has-tab { scroll-padding-bottom: calc(var(--neon-tab-h) + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 640px) {
  body.neon-has-tab { padding-bottom: calc(var(--neon-tab-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 4. 一次性扫光：元素加 .neon-sweep，再加 .is-sweep 触发 ---------- */
.neon-sweep { position: relative; overflow: hidden; }
.neon-sweep::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 35%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.neon-sweep.is-sweep::after { animation: neonSweep .9s var(--ease) 1; }

/* ---------- 5. 水波（NeonRipple 注入；宿主元素需 position:relative） ---------- */
.neon-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
  transform: translate(-50%, -50%) scale(0);
  animation: neonRipple .6s ease-out forwards;
}

/* ---------- 6. 漂浮粒子（NeonParticles 注入，默认落在 .bg-deco 内） ---------- */
.neon-dust {
  position: absolute; bottom: -20px; left: var(--x, 50%);
  width: var(--s, 6px); height: var(--s, 6px); border-radius: 50%;
  background: var(--c, var(--a1));
  opacity: 0; pointer-events: none;
  animation: neonDustFloat var(--d, 16s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
/* .bg-deco 内的 <i> 默认吃 60px 极光模糊；粒子要清晰圆点，这里单独覆盖 */
.bg-deco i.neon-dust { filter: none; opacity: 0; }

/* ---------- 7. 辉光脉冲（无 box-shadow：靠伪元素透明度，避免重绘） ---------- */
.neon-glow { position: relative; }
.neon-glow::after {
  content: ''; position: absolute; inset: -8px; border-radius: inherit;
  background: radial-gradient(circle, rgba(167, 139, 250, .5), rgba(167, 139, 250, 0) 70%);
  opacity: 0; pointer-events: none;
  animation: neonGlowPulse 2.4s ease-in-out infinite;
}

/* ---------- 8. 心跳 / 入场（一次性工具类） ---------- */
.neon-heartbeat { animation: neonHeartbeat .9s var(--ease) 1; }
.neon-rise { animation: neonRise .5s var(--ease) both; }

/* ---------- 9. 底部轻提示（NeonToast 创建 .neon-toast） ---------- */
.neon-toast {
  position: fixed; left: 50%; z-index: 130;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  max-width: min(86vw, 420px);
  padding: 10px 16px; border-radius: 999px;
  background: rgba(20, 11, 38, .96); border: 1px solid rgba(167, 139, 250, .42);
  color: #fff; font-size: 13px; line-height: 1.5; text-align: center;
  opacity: 0; pointer-events: none;
  transform: translate3d(-50%, 10px, 0);
  transition: opacity .22s, transform .22s var(--ease);
}
.neon-toast.is-on { opacity: 1; transform: translate3d(-50%, 0, 0); }
@media (max-width: 640px) {
  body.neon-has-tab .neon-toast { bottom: calc(var(--neon-tab-h) + 18px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 10. 纸屑画布（NeonConfetti 创建 / 销毁） ---------- */
.neon-confetti {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 120;
}

/* ---------- 11. 关键帧（全部只动 transform / opacity） ---------- */
@keyframes neonAuroraA {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
  100% { transform: translate3d(9%, 7%, 0) scale(1.14); }
}
@keyframes neonAuroraB {
  0%   { transform: translate3d(6%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(-8%, -6%, 0) scale(1); }
}
@keyframes neonAuroraC {
  0%   { transform: translate3d(-5%, 6%, 0) scale(1.06); }
  100% { transform: translate3d(7%, -7%, 0) scale(1); }
}
@keyframes neonSweep {
  to { transform: translateX(230%) skewX(-18deg); }
}
@keyframes neonHeartbeat {
  0%   { transform: scale(1);    opacity: 1; }
  20%  { transform: scale(1.18); opacity: 1; }
  42%  { transform: scale(1);    opacity: .86; }
  62%  { transform: scale(1.10); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes neonRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes neonDust {
  0%   { transform: translate3d(0, -8vh, 0) scale(.6); opacity: 0; }
  12%  { opacity: .9; }
  100% { transform: translate3d(var(--dx, 0px), 96vh, 0) scale(1); opacity: 0; }
}
@keyframes neonDustFloat {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .7; }
  80%  { opacity: .35; }
  100% { transform: translate3d(var(--dx, 0px), -104vh, 0); opacity: 0; }
}
@keyframes neonRipple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: .5; }
  100% { transform: translate(-50%, -50%) scale(2.6); opacity: 0; }
}
@keyframes neonGlowPulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: .85; }
}

/* ---------- 12. 跨文档 View Transitions（不支持的浏览器自动忽略） ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease both vtOut; }
::view-transition-new(root) { animation: .28s var(--ease) both vtIn; }
@keyframes vtOut { to   { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(8px); } }

/* ---------- 13. 减弱动效：本节新增的动画 / 过渡全部关闭 ---------- */
@media (prefers-reduced-motion: reduce) {
  /* 极光直接不显示：既不跑动画也不占 GPU */
  .bg-deco .aurora-1, .bg-deco .aurora-2, .bg-deco .aurora-3 { display: none; }
  .bg-deco i, .bg-deco i.neon-dust, .neon-dust, .neon-ripple,
  .neon-sweep::after, .neon-sweep.is-sweep::after,
  .neon-heartbeat, .neon-rise, .neon-glow::after { animation: none !important; }
  .neon-tab, .neon-tab::after, .neon-toast { transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}

/* ============================================================
   「霓虹流光」v2 —— 一眼就炸的常驻霓虹（追加区二，配套 neon.js）
   追加式升级：v1 的类 / 关键帧一个不删、不改名（仅按要求把三层极光的
   不透明度调亮，见上方 aurora-1|2|3），v2 全部内容写在本节内。
   性能红线（与 v1 一致，且更严）：
     · 动画只走 transform / opacity；box-shadow / text-shadow 一律是
       静态值，不参与逐帧动画（绘制一次即被浏览器缓存，不重绘）。
     · 不用 backdrop-filter，不新增 filter 动画，不放大既有 blur 面积。
     · 旋转流光边（.neon-orbit）只给少量元素：首页卡片 hover / active / 翻面、
       排行榜冠军、显式加类处 —— 长列表不会同时跑上百条流光。
     · prefers-reduced-motion: reduce 时本节所有动画关闭，静态霓虹描边保留。
   ============================================================ */

:root {
  /* 常驻霓虹描边 / 外发光（静态值，默认态就有） */
  --neon-line: rgba(167, 139, 250, .40);      /* 描边线 */
  --neon-ring: rgba(167, 139, 250, .12);      /* 0 0 0 1px 细环 */
  --neon-outer: rgba(167, 139, 250, .16);     /* 外发光 */
  --neon-panel-bg: #0d0718;                   /* 流光边内侧底色（与 --bg 同族、略亮） */
  --neon-orbit-w: 1.5px;                      /* 流光边宽度 */
  /* 旋转流光：品牌三色，首尾同色 → 转起来无接缝 */
  --neon-orbit: conic-gradient(from 0deg, #a78bfa, #f472b6, #22d3ee, #a78bfa);
}

/* ---------- A. 背景网格（静态、极淡）：1px 网格铺满视口 ----------
   说明：.bg-deco::before / ::after 已被 v1 的两个模糊光斑占用（110px blur 会把
   网格整片抹平），所以网格挂在 .bg-deco 本体上，位于光斑与粒子之下。 */
.bg-deco {
  background-image:
    repeating-linear-gradient(0deg, rgba(167, 139, 250, .035) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(34, 211, 238, .028) 0 1px, transparent 1px 64px);
}

/* ---------- B. 极光第 4 层：大尺度线性渐变光带（20–36s 缓慢平移 + 微旋转） ----------
   元素由页面静态写入 <i class="aurora-4">（neon.js 只注入 1–3，本层补位）；
   blur / 圆角 / 透明度沿用 .bg-deco i 的既有规则，这里只给尺寸与动画。 */
.bg-deco .aurora-4 {
  width: 150vmax; height: 42vmax; top: 20vmax; left: -34vmax;
  background: linear-gradient(100deg,
    rgba(167, 139, 250, 0) 0%,
    rgba(167, 139, 250, .26) 26%,
    rgba(34, 211, 238, .22) 56%,
    rgba(244, 114, 182, .18) 78%,
    rgba(244, 114, 182, 0) 100%);
  animation: neonAuroraD 32s ease-in-out infinite alternate;
}
@keyframes neonAuroraD {
  0%   { transform: translate3d(-5%, 3%, 0) rotate(-5deg) scale(1); }
  100% { transform: translate3d(7%, -6%, 0) rotate(6deg) scale(1.14); }
}

/* ---------- C. 常驻霓虹描边 + 外发光（默认态就有，不再只在 hover） ----------
   选择器带上一层父级（.card / .face-back / .podium / .rank-list）是为了稳压
   各页面内联 <style> 里同名的单类规则（.face / .stat / .podium-card / .rank-row）。
   注意：统计块限定在 .face-back 内，避免波及 admin.html 的同名 .stat。 */
.card .face,
.ev-card,
.face-back .stat,
.podium .podium-card,
.rank-list .rank-row {
  border-color: var(--neon-line);
  box-shadow: 0 0 0 1px var(--neon-ring), 0 12px 34px var(--neon-outer);
}

/* 通用霓虹面板：显式加 .neon-panel 即可获得同一套描边 + 外发光 */
.neon-panel {
  position: relative;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--neon-line);
  box-shadow: 0 0 0 1px var(--neon-ring), 0 12px 34px var(--neon-outer);
}

/* ---------- D. 旋转流光边 .neon-orbit ----------
   结构：::before 铺满 conic-gradient 并 6s 匀速旋转（只动 transform），
        ::after 用元素底色 inset 1.5px 盖住内部 → 只剩 1.5px 的流光边。
   用法一：元素直接加 .neon-orbit（常驻，仅限少量元素，如排行榜冠军）。
   用法二：首页卡片由下面的 :hover / :active / .is-flipped 选择器临时点亮（纯 CSS）。 */
.neon-orbit {
  position: relative;
  isolation: isolate;    /* 把负 z-index 伪元素锁在元素内部（否则会跑到卡片背景之后） */
  overflow: hidden;      /* 裁掉旋转时越界的流光 */
}
.neon-orbit::before,
.card:hover .face::before,
.card:active .face::before,
.card.is-flipped .face::before {
  content: ''; position: absolute; z-index: -2;
  inset: -70%;                      /* 四边各外扩 70% → 240% 尺寸且与元素同心，旋转时始终盖满 */
  background: var(--neon-orbit);
  animation: neonOrbit 6s linear infinite;
  pointer-events: none;
}
.neon-orbit::after,
.card:hover .face::after,
.card:active .face::after,
.card.is-flipped .face::after {
  content: ''; position: absolute; z-index: -1;
  inset: var(--neon-orbit-w, 1.5px);
  border-radius: inherit;
  background: var(--neon-orbit-inner, var(--neon-panel-bg));   /* 页面可覆写内侧底色 */
  pointer-events: none;
}
@keyframes neonOrbit { to { transform: rotate(1turn); } }

/* 首页卡片：hover / 按压 / 翻面时点亮流光边（.face 自带 overflow:hidden + 圆角）
   正面原本是 static，这里给定位参照；z-index:0 让它自成层叠上下文，
   把负 z-index 的伪元素锁在脸内部（不用 isolation:isolate，避免干扰 3D 翻面） */
.card:hover .face-front,
.card:active .face-front,
.card.is-flipped .face-front {
  position: relative;
  z-index: 0;
}

/* ---------- E. 发光文字 / 发光数字（静态 text-shadow，不参与动画） ---------- */
.neon-glow-text {
  text-shadow: 0 0 18px rgba(167, 139, 250, .55), 0 0 42px rgba(244, 114, 182, .28);
}
.neon-num {
  text-shadow: 0 0 16px rgba(167, 139, 250, .6), 0 0 34px rgba(34, 211, 238, .35);
}

/* ---------- F. 底部 Tab 选中项：发光胶囊底 + 图标光晕 ----------
   用 ::before 画胶囊（径向渐变即图标光晕），只脉冲 opacity；
   ::after 仍是 v1 的渐变短横，选中态文字加静态光晕。 */
.neon-tab.is-active::before {
  content: ''; position: absolute; z-index: -1;
  left: 50%; top: 4px; bottom: 4px; width: 76px; max-width: 84%;
  transform: translateX(-50%);
  border-radius: 16px;
  background:
    radial-gradient(58% 62% at 50% 32%, rgba(167, 139, 250, .48), rgba(167, 139, 250, 0) 72%),
    linear-gradient(180deg, rgba(167, 139, 250, .20), rgba(244, 114, 182, .10));
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .24), 0 8px 22px rgba(167, 139, 250, .22);
  animation: neonTabGlow 2.8s ease-in-out infinite;
}
@keyframes neonTabGlow {
  0%, 100% { opacity: .72; }
  50%      { opacity: 1; }
}
.neon-tab.is-active span { text-shadow: 0 0 14px rgba(167, 139, 250, .55); }

/* ---------- G. 减弱动效：v2 新增动画全部关闭，静态霓虹描边 / 阴影保留 ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-deco .aurora-4 { display: none; }
  .neon-orbit::before,
  .card:hover .face::before, .card:active .face::before, .card.is-flipped .face::before,
  .neon-tab.is-active::before { animation: none !important; }
  .neon-tab.is-active::before { opacity: .92; }
}

/* ============================================================
   弱网体验 · 图片渐显占位（追加区三，配套各页面 JS 的 initImageFade）
   目标：弱网下不出现「白块 → 突然弹出」。图片就绪后淡入；加载失败 / 减弱动效时
        直接显示柔和品牌渐变底，绝不永久透明。
   实现：只过渡 opacity（GPU 合成）；渐变只用既有品牌色（--a1 紫 / --a2 粉）；
        不新增 filter / backdrop-filter，不生成缩略图（轻量版 blur-up）。
   用法：给 <img> 加 .img-fade，加载完成 / 失败时由页面 JS 补 .is-loaded。
   ============================================================ */

.img-fade {
  opacity: 0;                       /* 未就绪：先隐藏图片内容，避免半截图/突然弹出 */
  transition: opacity .45s ease;    /* 就绪后淡入（只动 opacity） */
}
.img-fade.is-loaded { opacity: 1; }

/* 渐变底：.face-img / .evx-img / .ev-card-img / .pf-avatar 等在各页面内联 <style>
   里用 background 简写写了 var(--bg) / #140b26 等，层叠位置比本文件更靠后。
   这里用重复类名把特异性提到 (0,2,0)，只压过 background-image 这一条长属性：
   页面简写里的 background-color 仍然生效，渐变半透明地叠在它上面；
   object-fit / aspect-ratio / height:auto / border-radius 等一律保持页面原样。 */
.img-fade.img-fade {
  background-image: linear-gradient(135deg, rgba(167, 139, 250, .16), rgba(244, 114, 182, .10));
}

/* 减弱动效：不淡入 —— 图片（连同上面的渐变底）直接可见 */
@media (prefers-reduced-motion: reduce) {
  .img-fade { transition: none; opacity: 1; }
}