/*!
 * BlockTicker — Unified Design Tokens & Component Library
 * v119.28.31 · Loaded LAST so it wins cascade conflicts
 *
 * One canonical source of truth for colors, typography, spacing, radii, shadows.
 * Plus reusable component classes (.bt-card, .bt-stat, .bt-badge, .bt-hero,
 * .bt-section, .bt-tile, .bt-grid, .bt-empty) so future visual work composes
 * components instead of writing one-off CSS.
 *
 * Sections:
 *   §1  Design tokens (CSS custom properties)
 *   §2  Typography & base
 *   §3  Hero / page header (.bt-hero)
 *   §4  Section frame (.bt-section)
 *   §5  Card surface (.bt-card)
 *   §6  Stat / Big number (.bt-stat)
 *   §7  Badge / pill (.bt-badge)
 *   §8  Tile / feature card (.bt-tile)
 *   §9  Grid layouts (.bt-grid)
 *   §10 Empty state (.bt-empty)
 *   §11 Page-specific polish (desk-brief, signals, tables, footer)
 *   §12 Utilities (.bt-mt-*, .bt-text-bull, .bt-num)
 */

/* ============================================================================
   §1  DESIGN TOKENS — applied at body level so every component inherits them
   ============================================================================ */

body.bt-site-takeover,
body.bt-asset-page,
body.fxlm-asset-page {
  /* — Background ramp (6 steps, dark first) — */
  --bt-bg-page:        #0A0B0D;       /* page background */
  --bt-bg-elev-1:      #11141A;       /* card / surface 1 */
  --bt-bg-elev-2:      #161A22;       /* card hover / surface 2 */
  --bt-bg-elev-3:      #1C212B;       /* surface 3 (sticky headers, popovers) */
  --bt-bg-elev-4:      #232934;       /* surface 4 (active row, focus state) */
  --bt-bg-elev-5:      #2B313E;       /* surface 5 (dropdown, dialog) */

  /* — Text ramp (6 steps, brightest first) — */
  --bt-text-1:         #F8FAFC;       /* primary text (headlines) */
  --bt-text-2:         #E2E8F0;       /* high-contrast UI */
  --bt-text-3:         #CBD5E1;       /* body text */
  --bt-text-4:         #94A3B8;       /* secondary / labels */
  --bt-text-5:         #64748B;       /* tertiary / disclaimers */
  --bt-text-6:         #475569;       /* quietest / dividers in text */

  /* — Borders & dividers — */
  --bt-border-1:       rgba(255,255,255,0.06);   /* hairline */
  --bt-border-2:       rgba(255,255,255,0.10);   /* card border */
  --bt-border-3:       rgba(255,255,255,0.16);   /* elevated card border */
  --bt-divider:        rgba(255,255,255,0.05);   /* row separator */

  /* — Brand & semantic colors — */
  --bt-accent:         #00FF66;       /* brand green */
  --bt-accent-hover:   #22FF7E;       /* brand hover */
  --bt-accent-soft:    rgba(0,255,102,0.10);
  --bt-accent-glow:    rgba(0,255,102,0.20);

  --bt-bull:           #22D38F;       /* bullish / up / gain */
  --bt-bull-soft:      rgba(34,211,143,0.12);

  --bt-bear:           #EF4444;       /* bearish / down / loss */
  --bt-bear-soft:      rgba(239,68,68,0.12);

  --bt-warn:           #F59E0B;       /* warn / caution */
  --bt-warn-soft:      rgba(245,158,11,0.12);

  --bt-info:           #3B82F6;       /* info / blue */
  --bt-info-soft:      rgba(59,130,246,0.12);

  --bt-neutral:        #94A3B8;       /* neutral signal */
  --bt-neutral-soft:   rgba(148,163,184,0.10);

  /* — Source-attribution colors (for news/signal pills) — */
  --bt-src-fxstreet:   #F97316;
  --bt-src-dailyfx:    #06B6D4;
  --bt-src-forexlive:  #8B5CF6;
  --bt-src-coindesk:   #22D38F;
  --bt-src-cointelegraph: #FBBF24;
  --bt-src-decrypt:    #EC4899;
  --bt-src-block:      #3B82F6;
  --bt-src-default:    #64748B;

  /* — Typography stacks — */
  --bt-font-display:   'Space Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bt-font-ui:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --bt-font-mono:      'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* — Type scale — */
  --bt-fs-eyebrow:     11px;
  --bt-fs-meta:        12px;
  --bt-fs-caption:     13px;
  --bt-fs-body:        15px;
  --bt-fs-body-lg:     17px;
  --bt-fs-title:       20px;
  --bt-fs-h3:          22px;
  --bt-fs-h2:          26px;
  --bt-fs-h1:          34px;
  --bt-fs-display:     clamp(28px, 4.2vw, 44px);
  --bt-fs-hero:        clamp(40px, 6.4vw, 56px);

  /* — Line heights — */
  --bt-lh-tight:       1.2;
  --bt-lh-snug:        1.35;
  --bt-lh-normal:      1.5;
  --bt-lh-relaxed:     1.65;
  --bt-lh-loose:       1.8;

  /* — Spacing scale — */
  --bt-sp-1:           4px;
  --bt-sp-2:           8px;
  --bt-sp-3:           12px;
  --bt-sp-4:           16px;
  --bt-sp-5:           20px;
  --bt-sp-6:           24px;
  --bt-sp-7:           32px;
  --bt-sp-8:           40px;
  --bt-sp-9:           48px;
  --bt-sp-10:          64px;

  /* — Radii — */
  --bt-radius-sm:      6px;
  --bt-radius-md:      10px;
  --bt-radius-lg:      14px;
  --bt-radius-xl:      20px;
  --bt-radius-full:    999px;

  /* — Shadows — */
  --bt-shadow-sm:      0 1px 2px rgba(0,0,0,0.20);
  --bt-shadow-md:      0 4px 12px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.14);
  --bt-shadow-lg:      0 12px 32px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.16);
  --bt-shadow-glow:    0 0 0 1px var(--bt-accent), 0 0 24px var(--bt-accent-glow);

  /* — Transitions — */
  --bt-trans-fast:     120ms cubic-bezier(.4,0,.2,1);
  --bt-trans-base:     180ms cubic-bezier(.4,0,.2,1);
  --bt-trans-slow:     280ms cubic-bezier(.4,0,.2,1);

  /* — Container widths — */
  --bt-w-narrow:       720px;
  --bt-w-content:      1100px;
  --bt-w-wide:         1280px;
  --bt-w-page:         1440px;
}

/* ============================================================================
   §2  TYPOGRAPHY & BASE — global enforcement on takeover/asset bodies
   ============================================================================ */

body.bt-site-takeover,
body.bt-asset-page,
body.fxlm-asset-page {
  font-family: var(--bt-font-ui);
  background: var(--bt-bg-page);
  color: var(--bt-text-3);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  text-rendering: optimizeLegibility;
}

body.bt-site-takeover h1,
body.bt-site-takeover h2,
body.bt-site-takeover h3,
body.bt-site-takeover h4,
body.bt-asset-page h1,
body.bt-asset-page h2,
body.bt-asset-page h3,
body.bt-asset-page h4,
body.fxlm-asset-page h1,
body.fxlm-asset-page h2,
body.fxlm-asset-page h3,
body.fxlm-asset-page h4 {
  font-family: var(--bt-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bt-text-1);
  line-height: var(--bt-lh-tight);
}

/* Numbers are always tabular + slashed-zero for column alignment */
body.bt-site-takeover [data-cell="price"],
body.bt-site-takeover [data-cell="chg"],
body.bt-site-takeover [data-cell="vol"],
body.bt-site-takeover [data-cell="mc"],
body.bt-site-takeover .frame__price,
body.bt-site-takeover .frame__chg,
body.bt-site-takeover .frame__vol,
body.bt-site-takeover .frame__mc,
body.bt-site-takeover .fxlm-gl-price,
body.bt-site-takeover .fxlm-gl-chg,
body.bt-site-takeover .fxlm-cft-price,
body.bt-site-takeover .fxlm-cft-chg,
body.bt-site-takeover .fxlm-cft-vol,
body.bt-site-takeover .fxlm-cft-mc,
body.bt-asset-page .price,
body.bt-asset-page .chg,
body.fxlm-asset-page .price,
body.fxlm-asset-page .chg {
  font-feature-settings: 'tnum' 1, 'zero' 1;
  font-variant-numeric: tabular-nums slashed-zero;
}

/* ============================================================================
   §3  HERO — page-level header for dashboard pages
   ============================================================================ */

.bt-hero {
  margin: var(--bt-sp-7) 0 var(--bt-sp-8);
  padding: var(--bt-sp-6) 0 var(--bt-sp-7);
  border-bottom: 1px solid var(--bt-border-1);
}

.bt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-2);
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bt-accent);
  margin-bottom: var(--bt-sp-3);
}

.bt-hero__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--bt-accent);
}

.bt-hero__title {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: var(--bt-lh-tight);
  color: var(--bt-text-1);
  margin: 0 0 var(--bt-sp-3);
}

.bt-hero__lede {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-body-lg);
  font-weight: 400;
  line-height: var(--bt-lh-relaxed);
  color: var(--bt-text-3);
  margin: 0;
  max-width: 68ch;
}

.bt-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bt-sp-7);
  margin-top: var(--bt-sp-6);
  padding-top: var(--bt-sp-5);
  border-top: 1px solid var(--bt-border-1);
}

@media (max-width: 768px) {
  .bt-hero__stats { gap: var(--bt-sp-5); }
}

/* ============================================================================
   §4  SECTION — numbered section frame for grouping content
   ============================================================================ */

.bt-section {
  margin: var(--bt-sp-8) 0;
}

.bt-section__head {
  display: flex;
  align-items: baseline;
  gap: var(--bt-sp-3);
  margin-bottom: var(--bt-sp-5);
  padding-bottom: var(--bt-sp-3);
  border-bottom: 1px solid var(--bt-border-1);
  flex-wrap: wrap;
}

.bt-section__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  padding: 0 var(--bt-sp-2);
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-radius: var(--bt-radius-sm);
  font-family: var(--bt-font-mono);
  font-size: var(--bt-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.bt-section__title {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bt-text-1);
  margin: 0;
  flex: 1 1 auto;
}

.bt-section__meta {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-meta);
  font-weight: 500;
  color: var(--bt-text-4);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-2);
}

.bt-section__meta--live::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bt-accent);
  box-shadow: 0 0 0 4px var(--bt-accent-soft);
  animation: btPulseDot 2s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes btPulseDot {
  0%, 100% { box-shadow: 0 0 0 4px var(--bt-accent-soft); }
  50%      { box-shadow: 0 0 0 6px rgba(0,255,102,0.04); }
}

.bt-section__body {
  position: relative;
}

.bt-section__lede {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-body);
  line-height: var(--bt-lh-relaxed);
  color: var(--bt-text-3);
  max-width: 68ch;
  margin: 0 0 var(--bt-sp-5);
}

/* ============================================================================
   §5  CARD — surface for any content block
   ============================================================================ */

.bt-card {
  position: relative;
  background: var(--bt-bg-elev-1);
  border: 1px solid var(--bt-border-2);
  border-radius: var(--bt-radius-lg);
  padding: var(--bt-sp-6);
  transition: border-color var(--bt-trans-base), background var(--bt-trans-base), transform var(--bt-trans-base);
}

.bt-card--compact {
  padding: var(--bt-sp-4);
  border-radius: var(--bt-radius-md);
}

.bt-card--hover {
  cursor: pointer;
}

.bt-card--hover:hover {
  border-color: var(--bt-border-3);
  background: var(--bt-bg-elev-2);
  transform: translateY(-1px);
}

.bt-card--accent {
  border-color: var(--bt-accent-soft);
}

.bt-card--accent::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--bt-radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, var(--bt-accent-soft), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.bt-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bt-sp-3);
  margin-bottom: var(--bt-sp-4);
  padding-bottom: var(--bt-sp-3);
  border-bottom: 1px solid var(--bt-border-1);
}

.bt-card__title {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-title);
  font-weight: 600;
  color: var(--bt-text-1);
  margin: 0;
}

.bt-card__meta {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-meta);
  color: var(--bt-text-4);
}

.bt-card__body {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-body);
  line-height: var(--bt-lh-relaxed);
  color: var(--bt-text-3);
}

.bt-card__body p { margin: 0 0 var(--bt-sp-3); }
.bt-card__body p:last-child { margin-bottom: 0; }

.bt-card__foot {
  margin-top: var(--bt-sp-4);
  padding-top: var(--bt-sp-3);
  border-top: 1px solid var(--bt-border-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bt-sp-3);
}

/* ============================================================================
   §6  STAT — big-number display with label
   ============================================================================ */

.bt-stat {
  display: flex;
  flex-direction: column;
  gap: var(--bt-sp-1);
}

.bt-stat__label {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bt-text-5);
  margin: 0;
}

.bt-stat__value {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-h2);
  font-weight: 600;
  line-height: var(--bt-lh-tight);
  color: var(--bt-text-1);
  margin: 0;
  font-variant-numeric: tabular-nums slashed-zero;
}

.bt-stat__value--lg {
  font-size: var(--bt-fs-display);
  letter-spacing: -0.02em;
}

.bt-stat__value--bull { color: var(--bt-bull); }
.bt-stat__value--bear { color: var(--bt-bear); }
.bt-stat__value--warn { color: var(--bt-warn); }

.bt-stat__sub {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-meta);
  font-weight: 500;
  color: var(--bt-text-4);
  margin: 0;
  font-variant-numeric: tabular-nums slashed-zero;
}

.bt-stat__sub--bull { color: var(--bt-bull); }
.bt-stat__sub--bear { color: var(--bt-bear); }

/* ============================================================================
   §7  BADGE — small pill label
   ============================================================================ */

.bt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-1);
  padding: 3px var(--bt-sp-2);
  background: var(--bt-bg-elev-3);
  color: var(--bt-text-3);
  border: 1px solid var(--bt-border-2);
  border-radius: var(--bt-radius-sm);
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;
}

.bt-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.bt-badge--accent {
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-color: transparent;
}

.bt-badge--bull {
  background: var(--bt-bull-soft);
  color: var(--bt-bull);
  border-color: transparent;
}

.bt-badge--bear {
  background: var(--bt-bear-soft);
  color: var(--bt-bear);
  border-color: transparent;
}

.bt-badge--warn {
  background: var(--bt-warn-soft);
  color: var(--bt-warn);
  border-color: transparent;
}

.bt-badge--info {
  background: var(--bt-info-soft);
  color: var(--bt-info);
  border-color: transparent;
}

.bt-badge--neutral {
  background: var(--bt-neutral-soft);
  color: var(--bt-neutral);
  border-color: transparent;
}

/* ============================================================================
   §8  TILE — feature/tool card with icon, title, desc, arrow
   ============================================================================ */

.bt-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bt-sp-3);
  padding: var(--bt-sp-6);
  background: var(--bt-bg-elev-1);
  border: 1px solid var(--bt-border-2);
  border-radius: var(--bt-radius-lg);
  text-decoration: none;
  transition: border-color var(--bt-trans-base), background var(--bt-trans-base), transform var(--bt-trans-base), box-shadow var(--bt-trans-base);
  overflow: hidden;
  isolation: isolate;
}

.bt-tile::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at top right, var(--bt-accent-soft), transparent 60%);
  opacity: 0;
  transition: opacity var(--bt-trans-base);
  pointer-events: none;
  z-index: 0;
}

.bt-tile:hover {
  border-color: var(--bt-border-3);
  background: var(--bt-bg-elev-2);
  transform: translateY(-2px);
  box-shadow: var(--bt-shadow-md);
}

.bt-tile:hover::before {
  opacity: 1;
}

.bt-tile__icon {
  position: relative;
  z-index: 1;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-radius: var(--bt-radius-md);
  font-size: 22px;
  font-weight: 600;
  font-family: var(--bt-font-display);
  flex-shrink: 0;
}

.bt-tile__title {
  position: relative;
  z-index: 1;
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-title);
  font-weight: 600;
  color: var(--bt-text-1);
  margin: 0;
  letter-spacing: -0.01em;
}

.bt-tile__desc {
  position: relative;
  z-index: 1;
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-caption);
  font-weight: 400;
  line-height: var(--bt-lh-relaxed);
  color: var(--bt-text-4);
  margin: 0;
  flex: 1 1 auto;
}

.bt-tile__arrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-2);
  margin-top: var(--bt-sp-3);
  padding-top: var(--bt-sp-3);
  border-top: 1px solid var(--bt-border-1);
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bt-accent);
  transition: gap var(--bt-trans-base);
}

.bt-tile__arrow::after {
  content: '→';
  font-size: 14px;
  font-weight: 400;
  transition: transform var(--bt-trans-base);
}

.bt-tile:hover .bt-tile__arrow {
  gap: var(--bt-sp-3);
}

.bt-tile:hover .bt-tile__arrow::after {
  transform: translateX(2px);
}

/* ============================================================================
   §9  GRID — responsive grid layouts
   ============================================================================ */

.bt-grid {
  display: grid;
  gap: var(--bt-sp-5);
  grid-template-columns: 1fr;
}

.bt-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.bt-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.bt-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.bt-grid--2-fixed {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .bt-grid--2-fixed {
    grid-template-columns: repeat(2, 1fr);
  }
}

.bt-grid--3-fixed {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .bt-grid--3-fixed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .bt-grid--3-fixed {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bt-grid--sidebar {
  grid-template-columns: 1fr;
}

@media (min-width: 1100px) {
  .bt-grid--sidebar {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--bt-sp-7);
  }
}

/* ============================================================================
   §10  EMPTY STATE — for lists/feeds with no content yet
   ============================================================================ */

.bt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--bt-sp-9) var(--bt-sp-5);
  background: var(--bt-bg-elev-1);
  border: 1px dashed var(--bt-border-2);
  border-radius: var(--bt-radius-lg);
}

.bt-empty__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bt-bg-elev-3);
  color: var(--bt-text-5);
  font-size: 26px;
  margin-bottom: var(--bt-sp-4);
}

.bt-empty__title {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-title);
  font-weight: 600;
  color: var(--bt-text-2);
  margin: 0 0 var(--bt-sp-2);
}

.bt-empty__desc {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-caption);
  color: var(--bt-text-4);
  margin: 0 0 var(--bt-sp-5);
  max-width: 48ch;
  line-height: var(--bt-lh-relaxed);
}

.bt-empty__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-2);
  padding: var(--bt-sp-3) var(--bt-sp-5);
  background: var(--bt-accent);
  color: #000;
  border-radius: var(--bt-radius-md);
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-caption);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--bt-trans-fast), transform var(--bt-trans-fast);
}

.bt-empty__cta:hover {
  background: var(--bt-accent-hover);
  transform: translateY(-1px);
}

/* ============================================================================
   §11  PAGE-SPECIFIC POLISH
   ============================================================================ */

/* — Desk-brief: align with token system — */
body.bt-site-takeover .bt-brief__sec,
body.bt-asset-page  .bt-brief__sec {
  margin: var(--bt-sp-8) 0;
  padding-top: var(--bt-sp-5);
  border-top: 1px solid var(--bt-border-1);
}

body.bt-site-takeover .bt-brief__sec-head,
body.bt-asset-page  .bt-brief__sec-head {
  display: flex;
  align-items: center;
  gap: var(--bt-sp-3);
  margin-bottom: var(--bt-sp-4);
  flex-wrap: wrap;
}

body.bt-site-takeover .bt-brief__sec-num,
body.bt-asset-page  .bt-brief__sec-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 22px;
  padding: 0 var(--bt-sp-2);
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-radius: var(--bt-radius-sm);
  font-family: var(--bt-font-mono);
  font-size: var(--bt-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.04em;
}

body.bt-site-takeover .bt-brief__sec-h,
body.bt-asset-page  .bt-brief__sec-h {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-h2);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bt-text-1);
  margin: 0;
  flex: 1 1 auto;
  line-height: var(--bt-lh-tight);
}

body.bt-site-takeover .bt-brief__sec-tag,
body.bt-asset-page  .bt-brief__sec-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px var(--bt-sp-2);
  background: var(--bt-bg-elev-3);
  color: var(--bt-text-4);
  border-radius: var(--bt-radius-sm);
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.bt-site-takeover .bt-brief__lede,
body.bt-asset-page  .bt-brief__lede {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-body);
  line-height: var(--bt-lh-relaxed);
  color: var(--bt-text-3);
  max-width: 68ch;
  margin: 0 0 var(--bt-sp-5);
}

body.bt-site-takeover .bt-brief__chart-wrap,
body.bt-asset-page  .bt-brief__chart-wrap {
  background: var(--bt-bg-elev-1);
  border: 1px solid var(--bt-border-2);
  border-radius: var(--bt-radius-lg);
  padding: var(--bt-sp-4);
  margin: var(--bt-sp-5) 0;
  overflow: hidden;
}

body.bt-site-takeover .bt-brief__levels,
body.bt-asset-page  .bt-brief__levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: var(--bt-sp-3);
  margin: var(--bt-sp-4) 0;
}

body.bt-site-takeover .bt-brief__level-cell,
body.bt-asset-page  .bt-brief__level-cell {
  background: var(--bt-bg-elev-1);
  border: 1px solid var(--bt-border-1);
  border-radius: var(--bt-radius-md);
  padding: var(--bt-sp-3) var(--bt-sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--bt-sp-1);
}

body.bt-site-takeover .bt-brief__level-cell .label,
body.bt-asset-page  .bt-brief__level-cell .label {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bt-text-5);
}

body.bt-site-takeover .bt-brief__level-cell .value,
body.bt-asset-page  .bt-brief__level-cell .value {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-title);
  font-weight: 600;
  color: var(--bt-text-1);
  font-variant-numeric: tabular-nums slashed-zero;
}

body.bt-site-takeover .bt-brief__level-cell.bull .value { color: var(--bt-bull); }
body.bt-site-takeover .bt-brief__level-cell.bear .value { color: var(--bt-bear); }

/* — Intelligence brief panel — */
body.bt-site-takeover .bt-ibrief,
body.bt-asset-page  .bt-ibrief {
  background: var(--bt-bg-elev-1);
  border: 1px solid var(--bt-border-2);
  border-radius: var(--bt-radius-lg);
  padding: var(--bt-sp-6);
}

body.bt-site-takeover .bt-ibrief__head,
body.bt-asset-page  .bt-ibrief__head {
  display: flex;
  align-items: center;
  gap: var(--bt-sp-3);
  margin-bottom: var(--bt-sp-5);
  padding-bottom: var(--bt-sp-3);
  border-bottom: 1px solid var(--bt-border-1);
}

body.bt-site-takeover .bt-ibrief__title,
body.bt-asset-page  .bt-ibrief__title {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-title);
  font-weight: 600;
  color: var(--bt-text-1);
  margin: 0;
}

body.bt-site-takeover .bt-ibrief p,
body.bt-asset-page  .bt-ibrief p {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-caption);
  line-height: var(--bt-lh-relaxed);
  color: var(--bt-text-3);
  margin: 0 0 var(--bt-sp-3);
}

/* — Forex & Commodities tables: token-driven — */
body.bt-site-takeover .fxlm-forex-table,
body.bt-site-takeover .fxlm-commodities-table {
  width: 100%;
  background: var(--bt-bg-elev-1);
  border: 1px solid var(--bt-border-2);
  border-radius: var(--bt-radius-lg);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-family: var(--bt-font-ui);
}

body.bt-site-takeover .fxlm-forex-table thead,
body.bt-site-takeover .fxlm-commodities-table thead {
  background: var(--bt-bg-elev-2);
}

body.bt-site-takeover .fxlm-forex-table thead th,
body.bt-site-takeover .fxlm-commodities-table thead th {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bt-text-4);
  text-align: left;
  padding: var(--bt-sp-3) var(--bt-sp-4);
  border-bottom: 1px solid var(--bt-border-1);
}

body.bt-site-takeover .fxlm-forex-table tbody td,
body.bt-site-takeover .fxlm-commodities-table tbody td {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-caption);
  color: var(--bt-text-2);
  padding: var(--bt-sp-3) var(--bt-sp-4);
  border-bottom: 1px solid var(--bt-divider);
  font-variant-numeric: tabular-nums slashed-zero;
}

body.bt-site-takeover .fxlm-forex-table tbody tr:hover td,
body.bt-site-takeover .fxlm-commodities-table tbody tr:hover td {
  background: var(--bt-bg-elev-2);
}

body.bt-site-takeover .fxlm-forex-table tbody tr:last-child td,
body.bt-site-takeover .fxlm-commodities-table tbody tr:last-child td {
  border-bottom: none;
}

/* Up/down semantic colors on table cells */
body.bt-site-takeover .fxlm-forex-table .up,
body.bt-site-takeover .fxlm-forex-table .pos,
body.bt-site-takeover .fxlm-commodities-table .up,
body.bt-site-takeover .fxlm-commodities-table .pos { color: var(--bt-bull); }

body.bt-site-takeover .fxlm-forex-table .down,
body.bt-site-takeover .fxlm-forex-table .neg,
body.bt-site-takeover .fxlm-commodities-table .down,
body.bt-site-takeover .fxlm-commodities-table .neg { color: var(--bt-bear); }

/* — Footer final polish: cap older .foot__* rules with token colors — */
body.bt-site-takeover .foot,
body.bt-asset-page  .foot,
body.fxlm-asset-page .foot {
  background: var(--bt-bg-page);
  border-top: 1px solid var(--bt-border-1);
  padding: var(--bt-sp-9) 0 var(--bt-sp-5);
  font-family: var(--bt-font-ui);
}

body.bt-site-takeover .foot h4,
body.bt-site-takeover .foot__col-title,
body.bt-asset-page  .foot h4,
body.bt-asset-page  .foot__col-title,
body.fxlm-asset-page .foot h4,
body.fxlm-asset-page .foot__col-title {
  font-family: var(--bt-font-ui) !important;
  font-size: var(--bt-fs-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--bt-text-1) !important;
  margin: 0 0 var(--bt-sp-3) !important;
}

body.bt-site-takeover .foot a,
body.bt-site-takeover .foot__link,
body.bt-asset-page  .foot a,
body.bt-asset-page  .foot__link,
body.fxlm-asset-page .foot a,
body.fxlm-asset-page .foot__link {
  font-family: var(--bt-font-ui) !important;
  font-size: var(--bt-fs-caption) !important;
  font-weight: 400 !important;
  color: var(--bt-text-4) !important;
  text-decoration: none !important;
  transition: color var(--bt-trans-fast);
  letter-spacing: 0 !important;
}

body.bt-site-takeover .foot a:hover,
body.bt-site-takeover .foot__link:hover,
body.bt-asset-page  .foot a:hover,
body.bt-asset-page  .foot__link:hover,
body.fxlm-asset-page .foot a:hover,
body.fxlm-asset-page .foot__link:hover {
  color: var(--bt-text-1) !important;
  text-decoration: none !important;
}

body.bt-site-takeover .foot__bottom,
body.bt-site-takeover .foot__legal,
body.bt-asset-page  .foot__bottom,
body.bt-asset-page  .foot__legal,
body.fxlm-asset-page .foot__bottom,
body.fxlm-asset-page .foot__legal {
  color: var(--bt-text-5) !important;
  font-size: var(--bt-fs-meta) !important;
  border-top: 1px solid var(--bt-border-1) !important;
  padding-top: var(--bt-sp-5) !important;
  margin-top: var(--bt-sp-7) !important;
}

/* — Trading signals page: 2-column layout (feed + sidebar) — */
.bt-signals-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bt-sp-5);
}

@media (min-width: 1100px) {
  .bt-signals-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--bt-sp-7);
  }
}

.bt-signals-layout__feed {
  min-width: 0;
}

.bt-signals-layout__side {
  display: flex;
  flex-direction: column;
  gap: var(--bt-sp-4);
}

@media (min-width: 1100px) {
  .bt-signals-layout__side {
    position: sticky;
    top: var(--bt-sp-7);
    align-self: start;
  }
}

.bt-side-card {
  background: var(--bt-bg-elev-1);
  border: 1px solid var(--bt-border-2);
  border-radius: var(--bt-radius-lg);
  padding: var(--bt-sp-5);
}

.bt-side-card__title {
  font-family: var(--bt-font-display);
  font-size: var(--bt-fs-caption);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bt-text-4);
  margin: 0 0 var(--bt-sp-3);
  padding-bottom: var(--bt-sp-3);
  border-bottom: 1px solid var(--bt-border-1);
}

.bt-side-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--bt-sp-2);
}

.bt-side-card li {
  display: flex;
  align-items: center;
  gap: var(--bt-sp-2);
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-caption);
  color: var(--bt-text-2);
}

.bt-side-card li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bt-accent);
  flex-shrink: 0;
}

.bt-side-card p {
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-meta);
  line-height: var(--bt-lh-relaxed);
  color: var(--bt-text-4);
  margin: 0 0 var(--bt-sp-2);
}

.bt-side-card p:last-child { margin-bottom: 0; }

.bt-side-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-2);
  padding: var(--bt-sp-2) var(--bt-sp-3);
  margin-top: var(--bt-sp-3);
  background: var(--bt-accent-soft);
  color: var(--bt-accent);
  border-radius: var(--bt-radius-sm);
  font-family: var(--bt-font-ui);
  font-size: var(--bt-fs-meta);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background var(--bt-trans-fast);
}

.bt-side-card__cta:hover {
  background: var(--bt-accent-glow);
  text-decoration: none;
}

/* ============================================================================
   §12  UTILITIES — token-driven inline overrides
   ============================================================================ */

.bt-mt-1 { margin-top: var(--bt-sp-1) !important; }
.bt-mt-2 { margin-top: var(--bt-sp-2) !important; }
.bt-mt-3 { margin-top: var(--bt-sp-3) !important; }
.bt-mt-4 { margin-top: var(--bt-sp-4) !important; }
.bt-mt-5 { margin-top: var(--bt-sp-5) !important; }
.bt-mt-6 { margin-top: var(--bt-sp-6) !important; }
.bt-mt-7 { margin-top: var(--bt-sp-7) !important; }
.bt-mt-8 { margin-top: var(--bt-sp-8) !important; }

.bt-mb-1 { margin-bottom: var(--bt-sp-1) !important; }
.bt-mb-2 { margin-bottom: var(--bt-sp-2) !important; }
.bt-mb-3 { margin-bottom: var(--bt-sp-3) !important; }
.bt-mb-4 { margin-bottom: var(--bt-sp-4) !important; }
.bt-mb-5 { margin-bottom: var(--bt-sp-5) !important; }
.bt-mb-6 { margin-bottom: var(--bt-sp-6) !important; }
.bt-mb-7 { margin-bottom: var(--bt-sp-7) !important; }
.bt-mb-8 { margin-bottom: var(--bt-sp-8) !important; }

.bt-text-1     { color: var(--bt-text-1) !important; }
.bt-text-2     { color: var(--bt-text-2) !important; }
.bt-text-3     { color: var(--bt-text-3) !important; }
.bt-text-mute  { color: var(--bt-text-4) !important; }
.bt-text-bull  { color: var(--bt-bull) !important; }
.bt-text-bear  { color: var(--bt-bear) !important; }
.bt-text-warn  { color: var(--bt-warn) !important; }

.bt-num {
  font-family: var(--bt-font-ui);
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.bt-display {
  font-family: var(--bt-font-display) !important;
}

.bt-mono {
  font-family: var(--bt-font-mono) !important;
}

/* — Small-screen tightening — */
@media (max-width: 768px) {
  .bt-section { margin: var(--bt-sp-7) 0; }
  .bt-hero { margin: var(--bt-sp-5) 0 var(--bt-sp-6); }
  .bt-hero__title { font-size: clamp(24px, 7vw, 32px); }
  .bt-card { padding: var(--bt-sp-4); }
  .bt-tile { padding: var(--bt-sp-4); }
  .bt-section__title { font-size: var(--bt-fs-title); }
  .bt-stat__value { font-size: var(--bt-fs-title); }
}

/* ============================================================================
   END
   ============================================================================ */