/* ══════════════════════════════════════════════════════════════
   ClaudeMeme · 共享样式
   - 全局: LIVE 实时徽章 (移动 + 桌面通吃)
   - @media ≥1024px: design token / 字号 / header / tab 菜单 / 卡片
   三个页面 (index / alpha-breakout / opportunities) 共用
   ══════════════════════════════════════════════════════════════ */

/* ── LIVE 实时徽章 (全局, 三页 header 统一) ── */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(16,185,129,0.25);
  border-radius: 9999px;
  background: rgba(16,185,129,0.12);
  color: #047857;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}
.live-badge .live-dot {
  width: 6px; height: 6px;
  border-radius: 9999px;
  background: #10b981;
  box-shadow: 0 0 6px rgba(22,163,74,0.5);
  animation: live-pulse 2s ease-in-out infinite;
}
.live-badge.is-down {
  background: rgba(220,38,38,0.10);
  border-color: rgba(220,38,38,0.25);
  color: #b91c1c;
}
.live-badge.is-down .live-dot {
  background: #dc2626;
  box-shadow: 0 0 6px rgba(220,38,38,0.5);
  animation: none;
}
@keyframes live-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}

@media (min-width: 1024px) {
  :root {
    --bg:      #faf7f2;
    --bg-2:    #fffdf9;
    --bg-3:    #f3eee5;
    --bg-hover:#faf7f2;
    --line:    #e8e0d0;
    --line-2:  #d4c8b3;
    --text:    #3a2f1f;
    --text-2:  #7a6a55;
    --text-3:  #a89a82;
    --gold:    #c2410c;
    --gold-ink:#9a3412;
    --ok:      #10b981;
    --bad:     #f43f5e;
  }

  html { font-size: 19px; }
  body {
    background: var(--bg) !important;
    background-image: none !important;
    color: var(--text);
    padding-bottom: 0 !important;
    font-family: 'Inter', 'PingFang SC', sans-serif;
  }

  /* 字号阶梯 */
  .text-\[9px\]  { font-size: 13px !important; }
  .text-\[10px\] { font-size: 14px !important; }
  .text-\[11px\] { font-size: 15px !important; }
  .text-xs       { font-size: 14px !important; }
  .text-sm       { font-size: 15px !important; }
  .text-base     { font-size: 17px !important; }
  .text-lg       { font-size: 20px !important; }
  .text-xl       { font-size: 22px !important; }
  .text-2xl      { font-size: 26px !important; }

  /* ── Header ── */
  header.sticky {
    background: rgba(255,255,255,0.85) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(180%) blur(12px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(12px) !important;
  }
  header > div {
    max-width: 100% !important;
    margin: 0 !important;
    height: 52px !important;
    padding: 0 24px !important;
  }
  header .font-headline {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: var(--text) !important;
    letter-spacing: -0.01em !important;
    text-transform: none;
  }
  header img.w-7 {
    width: 22px !important; height: 22px !important;
    border-radius: 6px !important;
    border: none !important;
  }
  header .bg-ok-soft {
    background: rgba(16,185,129,0.12) !important;
    padding: 3px 10px !important;
    display: inline-flex !important; align-items: center; gap: 6px;
    border: 1px solid rgba(16,185,129,0.25) !important;
    border-radius: 9999px !important;
    color: #047857 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
  }
  header .bg-ok-soft::before {
    content: ''; width: 6px; height: 6px; border-radius: 9999px;
    background: #10b981;
    box-shadow: 0 0 6px rgba(22,163,74,0.5);
    animation: dk-pulse 2s ease-in-out infinite;
  }
  @keyframes dk-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.4; }
  }
  header .material-symbols-outlined { color: var(--text-2) !important; }
  header .material-symbols-outlined:hover { color: var(--text) !important; }

  /* ── 顶栏 tab 菜单 ── */
  #top-nav { gap: 4px !important; }
  #top-nav a[data-nav] {
    padding: 6px 14px !important;
    font-size: 14px !important;
    color: var(--text-2) !important;
    border-radius: 8px !important;
    transition: background 0.12s, color 0.12s;
  }
  #top-nav a[data-nav]:hover {
    background: var(--bg-3) !important;
    color: var(--text) !important;
  }
  #top-nav a[data-nav].text-brand {
    background: var(--bg-3) !important;
    color: var(--gold) !important;
  }

  /* ── Main 通用容器宽度 ── */
  main.max-w-md {
    max-width: 1440px !important;
    padding: 24px !important;
    margin: 0 auto !important;
  }

  /* 全局文字色回收 */
  .text-ink      { color: var(--text) !important; }
  .text-ink-sub  { color: var(--text-2) !important; }
  .text-ink-mute { color: var(--text-3) !important; }
  .text-brand    { color: var(--gold) !important; }

  /* skel / 骨架 */
  .skel {
    background: linear-gradient(90deg, var(--bg-3) 25%, var(--line) 50%, var(--bg-3) 75%) !important;
    background-size: 200% 100% !important;
  }

  /* 底栏 nav 隐藏 (PC 用顶栏菜单) */
  nav.fixed.bottom-0 { display: none !important; }

  /* 滚动条 */
  ::-webkit-scrollbar { width: 8px; height: 8px; background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 4px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

  /* 卡片基本款 */
  .card, .card-hard {
    background: var(--bg-2) !important;
    border-color: var(--line) !important;
  }
}