/* ============================================================================
 * lx-hero-v2.css  ·  v1070  ·  🅱️-2 Hero 世界级重构 · 单一权威层
 * ----------------------------------------------------------------------------
 * 为什么存在（审计实证）：
 *   hero 当前被三处规则层叠争抢 —— theme.css:1604-1623（桌面 88px 圆头像）、
 *   typo-refined.css:166-315（另套桌面/平板/移动规则）、lx-home-picks.css
 *   （v1008 移动端 + v1068 CLS 占位）。同一选择器被重复定义、圆 vs 方、蓝 vs 中性
 *   互相打架，且桌面头像仅 88px 圆 → 存在感极弱（P1 侦查实锤）。
 *   → 结论：参照 dock-geometry 权威层模式，本文件是 hero 几何/排版的单一真源，最后加载。
 *
 * 设计纪律（禁欲极简 · 纯色细线 · 大留白 · 中国红涨绿跌）：
 *   1. 头像：桌面竖版 648/794 比例圆角矩形（非圆），强存在感；移动端保留竖版 + 环形光晕 + 呼吸微动（纯 CSS）。
 *   2. 配色：kicker 用中性 muted（剔除 theme.css 的 brand-blue），标题/副文用 text-primary/secondary；涨跌沿用红/绿。
 *   3. 层级：kicker（小/疏字距）→ title（大/粗）→ sub（中/次级）→ indices 芯片 → picks；大留白。
 *   4. 活体 canvas：桌面叠 #lx-hero-canvas（JS 注入 LivingPortrait），静态 webp 作 preload fallback。
 *   5. 不替换原图素材，只升级呈现。
 *   6. 不动 lx-home-picks.css 的 v1068 CLS :has() 占位（本层绝不重定义 #main-content::before）。
 * ========================================================================= */
:root { --lx-hero-ar: 648 / 794; }

/* ---------------------------------------------------------------------------
 * 桌面（≥1024）：竖版大头像 + 清晰层级
 * ------------------------------------------------------------------------ */
#lx-daily-hero {
  position: relative;
  display: block !important; /* 🅱️-2 CLS 根治：首帧即占位显现（置于 active #tab-dashboard 内，非 dashboard 视图由 tab 自身 display:none 隐藏，零回归） */
  padding: 28px 28px 26px !important;
  margin: 0 0 18px 0 !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.008)) !important;
  border: 1px solid var(--line-faint, rgba(255,255,255,0.08)) !important;
  overflow: hidden !important;
  /* 🅱️-2 CLS 根治（实测定高）：hero 内部 .lx-dh-picks 芯片晚于首帧填充 → hero 由 507px(占位) 长到 762px(真实)。
     直接预留 LATE 实测满高 762px，首帧即占满，picks/indices/title 任一晚填都零位移。 */
  min-height: 762px !important;
}
#lx-daily-hero .lx-dh-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 32px !important;
  position: relative !important;
  z-index: 1 !important;
}
#lx-daily-hero .lx-dh-avatar {
  position: relative !important;
  width: 208px !important;
  height: calc(208px / 0.81612) !important;   /* ≈255px，严格 648/794 */
  flex: 0 0 208px !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: var(--surface-deep, #0c1220) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.38) !important;
}
#lx-daily-hero .lx-dh-full-img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  object-fit: cover !important; object-position: 50% 0% !important;
  display: block !important;
}
#lx-hero-canvas {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  display: block !important; z-index: 2 !important;
  opacity: 0; transition: opacity .6s ease !important;
}
#lx-hero-canvas.is-live { opacity: 1 !important; }
#lx-daily-hero .lx-dh-body { flex: 1 1 auto !important; min-width: 0 !important; }
#lx-daily-hero .lx-dh-kicker {
  font-size: 12px !important; font-weight: 600 !important; letter-spacing: 2.5px !important;
  color: var(--text-muted, #7c8db0) !important; text-transform: none !important; margin: 0 !important;
}
#lx-daily-hero .lx-dh-title {
  font-size: 28px !important; font-weight: 700 !important; line-height: 1.28 !important;
  letter-spacing: -0.01em !important; color: var(--text-primary, #f6f9fd) !important;
  margin: 10px 0 0 !important; text-wrap: balance !important;
}
#lx-daily-hero .lx-dh-sub {
  font-size: 14px !important; line-height: 1.65 !important; color: var(--text-secondary, #dae4f1) !important;
  margin: 10px 0 0 !important; max-width: 660px !important;
}
#lx-daily-hero .lx-dh-indices {
  display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 16px !important;
}
#lx-daily-hero .lx-dh-chip {
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  font-size: 13px !important; padding: 6px 12px !important; border-radius: 12px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: var(--text-secondary, #dae4f1) !important;
}
#lx-daily-hero .lx-dh-chip b { font-weight: 700 !important; font-variant-numeric: tabular-nums !important; }
#lx-daily-hero .lx-dh-chip.up b { color: var(--up, #e5484d) !important; }
#lx-daily-hero .lx-dh-chip.down b { color: var(--down, #2e9e6b) !important; }
#lx-daily-hero .lx-dh-picks {
  margin-top: 16px !important;
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 8px !important;
  /* 🅱️-2 CLS 根治：picks 芯片晚填（97px→245px 实测）预留满高，消除 hero 内增长位移 */
  min-height: 245px !important;
}
#lx-daily-hero .lx-dh-picks-label { font-size: 12px !important; letter-spacing: 1px !important; color: var(--text-muted, #7c8db0) !important; margin: 0 0 6px !important; grid-column: 1 / -1 !important; }
#lx-daily-hero .lx-dh-pick {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  padding: 8px 12px !important; border-radius: 12px !important;
  background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
}
#lx-daily-hero .lx-dh-pick-name { font-size: 14px !important; font-weight: 600 !important; color: var(--text-primary, #f6f9fd) !important; }
#lx-daily-hero .lx-dh-pick-pct { font-size: 14px !important; font-weight: 600 !important; font-variant-numeric: tabular-nums !important; }
#lx-daily-hero .lx-dh-pick-pct.up { color: var(--up, #e5484d) !important; }
#lx-daily-hero .lx-dh-pick-pct.down { color: var(--down, #2e9e6b) !important; }

/* ---------------------------------------------------------------------------
 * 平板（768–1023）：头像略收，保持竖版比例
 * ------------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023px) {
  #lx-daily-hero .lx-dh-avatar {
    width: 168px !important; height: calc(168px / 0.81612) !important; flex-basis: 168px !important;
  }
  #lx-daily-hero .lx-dh-title { font-size: 24px !important; }
  #lx-daily-hero .lx-dh-inner { gap: 24px !important; }
}

/* ---------------------------------------------------------------------------
 * 移动端（≤767）：纵向布局 + 环形光晕 + 呼吸微动（纯 CSS，不引活体 canvas）
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  #lx-daily-hero {
    padding: 20px 16px 18px !important;
    border-radius: 16px !important;
    text-align: center !important;
    min-height: 476px !important;
  }
  #lx-daily-hero .lx-dh-inner {
    flex-direction: column !important; align-items: center !important; gap: 14px !important;
  }
  #lx-daily-hero .lx-dh-avatar {
    width: 150px !important; height: calc(150px / 0.81612) !important; flex: none !important;
    border-radius: 16px !important;
    /* 环形光晕：中性柔光环（禁欲极简·非品牌蓝·非重投影） */
    box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 0 38px rgba(120,160,230,0.18), 0 12px 34px rgba(0,0,0,0.40) !important;
    animation: lxHeroBreathe 6s ease-in-out infinite !important;
    will-change: transform !important;
  }
  #lx-daily-hero .lx-dh-body { width: 100% !important; }
  #lx-daily-hero .lx-dh-title { font-size: 21px !important; line-height: 1.32 !important; }
  #lx-daily-hero .lx-dh-sub { margin-left: auto !important; margin-right: auto !important; }
  #lx-daily-hero .lx-dh-indices {
    display: grid !important; grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important; margin-top: 14px !important; flex-wrap: unset !important; overflow: visible !important;
  }
  #lx-daily-hero .lx-dh-chip {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    width: auto !important; flex: none !important; padding: 8px 12px !important;
  }
  #lx-daily-hero .lx-dh-picks { display: none !important; } /* 移动端精选进下方面板（沿用既有策略） */
}
@keyframes lxHeroBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.018); }
}
@media (prefers-reduced-motion: reduce) {
  #lx-daily-hero .lx-dh-avatar { animation: none !important; }
}