/* core/hud.css — 量化终端 HUD 组件（视频科技风 × 苹果级排版）
   复用全局 token（--bg/--panel/--line/--accent/--up/--down），
   新增：滚动行情带 / 粒子球 / K线 / HUD面板 / LIVE徽标 / 网格底纹 / 数字辉光。
   仅使用独立类名，不与 style.css 既有 .panel/.card 冲突。 */

/* 顶栏常驻吸顶（加载本样式表后全局生效） */
.top{ position:sticky; top:0; z-index:60; }

/* ---------- 滚动行情带（视频标志性元素） ---------- */
.hud-ticker{
  position:relative; overflow:hidden;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair);
  background:linear-gradient(180deg, var(--panel2, #121b27), var(--panel, #0d141e));
  height:36px; display:flex; align-items:center;
}
.hud-ticker .track{ display:flex; white-space:nowrap; will-change:transform;
  animation:hud-scroll 52s linear infinite; }
.hud-ticker:hover .track{ animation-play-state:paused; }
@keyframes hud-scroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hud-ticker .ti{ display:inline-flex; align-items:center; gap:8px; padding:0 18px;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  border-right:1px solid var(--hair, rgba(125,165,215,.085)); }
.hud-ticker .ti .sym{ color:var(--accent); letter-spacing:.04em; font-weight:600; }
.hud-ticker .ti b{ color:var(--txt); font-weight:600; font-variant-numeric:tabular-nums; }
.hud-ticker .ti .up{ color:var(--up); } .hud-ticker .ti .dn{ color:var(--down); }
.hud-ticker .ti .dim{ color:var(--faint); }

/* ---------- HUD 面板（◆ 标记 + 网格底纹） ---------- */
.hud-panel{
  position:relative; border:1px solid var(--line); border-radius:14px;
  /* 【20260928】白叠加→深蓝黑渐变面板：panel2→panel 纵向渐变 + 冷蓝内顶高光 + 落影，
     与 style.css .panel 同一套层次语言（用户反馈信号台只有纯黑平底）。 */
  background:linear-gradient(180deg, var(--panel2, #121b27), var(--panel, #0d141e));
  box-shadow:inset 0 1px 0 rgba(125,165,215,.07), 0 12px 34px -22px rgba(0,0,0,.65);
  padding:14px 16px; overflow:hidden;
}
.hud-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(125,165,215,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(125,165,215,.05) 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 0%, #000 28%, transparent 78%);
          mask-image:radial-gradient(120% 120% at 50% 0%, #000 28%, transparent 78%);
}
.hud-panel > *{ position:relative; }
.hud-panel .h{ display:flex; align-items:center; justify-content:space-between;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  margin-bottom:12px; }
.hud-panel .h .mk{ color:var(--accent); margin-right:8px; }
.hud-kpi{ font-family:var(--mono); font-size:30px; font-weight:700; letter-spacing:-.02em;
  color:#fff; text-shadow:0 0 20px rgba(var(--accent-rgb),.32); font-variant-numeric:tabular-nums;
  line-height:1.1; }
.hud-kpi.accent{ color:var(--accent); }
.hud-sub{ color:var(--faint); font-size:12px; margin-top:6px; }
.hud-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-family:var(--mono); font-size:12px; padding:5px 0; border-bottom:1px dashed rgba(125,165,215,.10); }
.hud-row:last-child{ border-bottom:none; }
.hud-row .k{ color:var(--faint); } .hud-row .v{ color:var(--txt); font-variant-numeric:tabular-nums; }

/* ---------- LIVE 徽标 ---------- */
.live-pill{ display:inline-flex; align-items:center; gap:7px; font-size:10px; font-weight:700;
  letter-spacing:.14em; color:var(--up); border:1px solid rgba(var(--accent-rgb),.4);
  background:rgba(var(--accent-rgb),.08); padding:3px 10px; border-radius:999px; }
.live-pill .d{ width:6px; height:6px; border-radius:50%; background:var(--up);
  box-shadow:0 0 8px var(--up); animation:livepulse 1.6s infinite; }

/* ---------- 粒子球 / K线 容器 ---------- */
.hud-sphere{ position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none; }
.hud-sphere canvas{ width:100%; height:100%; display:block; }
.hud-kline{ width:100%; display:block; }

/* ---------- 通用网格底纹背景（可贴到任意区块） ---------- */
.grid-bg{ position:relative; }
.grid-bg::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.4;
  background-image:linear-gradient(rgba(125,165,215,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(125,165,215,.05) 1px, transparent 1px);
  background-size:26px 26px; -webkit-mask-image:radial-gradient(100% 100% at 50% 0%, #000, transparent 80%);
          mask-image:radial-gradient(100% 100% at 50% 0%, #000, transparent 80%); }

/* ---------- 响应式 ---------- */
@media (max-width:680px){
  .hud-kpi{ font-size:24px; }
  .hud-ticker{ height:32px; }
}