/* ═══════════════════════════════════════════════════════════════════
   DJ Fortune v10 — Crystal-Glass Metallic Design System
   DOCTRINE: Cards = accent-tinted glass. ZERO outer shadow. Inner glow only.
             Nunito rounded font. NO white/navy backgrounds EVER.
   ═══════════════════════════════════════════════════════════════════ */

/* ══ NUCLEAR DARK — kills all Bootstrap/browser white bg ═══════════ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  background-color: #000000 !important;
  color: #E5E4E2 !important;
  font-family: 'Nunito','Noto Sans TC',sans-serif !important;
  font-weight: 700 !important;
}

.container,.container-fluid,.row,.col,[class*="col-"],
.card,.card-body,.card-header,.modal-content,.modal-body,
.dropdown-menu,.form-control,.form-select,
.input-group,.input-group-text {
  background-color: transparent !important;
  color: #E5E4E2 !important;
  border-color: rgba(255,255,255,0.15) !important;
}

/* Plotly dark modebar */
.modebar,.modebar-container,.modebar-group { background: transparent !important; }
.modebar-btn path { fill: rgba(255,255,255,0.5) !important; }

/* Scrollbars */
::-webkit-scrollbar            { width:6px; height:6px; }
::-webkit-scrollbar-track      { background:rgba(255,255,255,0.04); }
::-webkit-scrollbar-thumb      { background:rgba(255,255,255,0.18);border-radius:3px; }
::-webkit-scrollbar-thumb:hover{ background:rgba(212,175,55,0.35); }

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&family=Noto+Sans+TC:wght@500;700;900&family=JetBrains+Mono:wght@500;600;700&display=swap');

/* ══ VARIABLES ═══════════════════════════════════════════════════════ */
:root {
  /* ── Pure backgrounds */
  --bg-void:     #000000;               /* pure black night background */
  --bg-root:     #000000;               /* pure black background */

  /* ── Card backgrounds — glassmorphism */
  --bg-card-base:  rgba(255, 255, 255, 0.03);  
  --bg-card-2:     rgba(255, 255, 255, 0.05);  
  --bg-card-3:     rgba(255, 255, 255, 0.02);  
  --bg-card-gold:  rgba(255, 255, 255, 0.04);  
  --bg-card-plat:  rgba(255, 255, 255, 0.04);  
  --bg-card-neon:  rgba(255, 255, 255, 0.04);  
  --bg-card-tiff:  rgba(255, 255, 255, 0.04);  
  --bg-card-herm:  rgba(255, 255, 255, 0.04);  
  /* Legacy alias */
  --bg-card:       var(--bg-card-base);
  --bg-neon:       var(--bg-card-neon);

  /* ── Accent palette — metallic & vibrant */
  --gold:        #D4AF37;               /* metallic gold */
  --gold-hi:     #fced70;               /* gold highlight shimmer */
  --gold-lo:     #3a2c00;               /* gold shadow */
  --platinum:    #E5E4E2;               /* platinum / metallic silver */
  --plat-hi:     #FFFFFF;               /* platinum highlight */
  --plat-lo:     #1F2937;               /* platinum shadow */
  --neon:        #39FF14;               /* emerald green / neon */
  --tiffany:     #0ABAB5;               /* Tiffany blue */
  --hermes:      #E14401;               /* Hermes orange */

  /* ── Semantic (mapped from accents) */
  --emerald:     #39FF14;
  --rose:        #e14401;
  --amber:       #d97706;
  --cyan:        #0ABAB5;
  --purple:      #7c3aed;

  /* ── Text — high contrast always */
  --text:        #E5E4E2;               /* bright platinum text */
  --text-2:      #B0B0C0;               /* secondary light gray text */
  --text-3:      #8A8A9A;               /* muted text */
  --text-inv:    #1A1208;               /* dark text on bright buttons */

  /* ── Borders — glass edges */
  --border:      rgba(255,255,255,0.15);
  --border-2:    rgba(255,255,255,0.25);
  --border-gold: rgba(212,175,55,0.35);
  --border-plat: rgba(229,228,226,0.25);
  --border-neon: rgba(57,255,20,0.30);
  --border-tiff: rgba(10,186,181,0.28);
  --border-herm: rgba(225,68,1,0.35); 
  
  /* i18n variables */
  --display-zh: inline;
  --display-en: none;

  /* ══ MATERIAL PHYSICS — inset only, ZERO outer shadow ══════════════
     Metallic:     angled studio light → top bright · sides mid · bottom dark
     Crystal Glass: raised plate → top bright reflection · bottom faint depth
     ══════════════════════════════════════════════════════════════════ */

  /* METALLIC GOLD — 24k polished gold: stark white highlight → amber → deep shadow */
  --iglow-gold:
    inset 0  1px 0   rgba(255,255,255,0.95),  /* TOP    — glaring white specular reflection */
    inset 0  1px 0   rgba(255,215,0,0.85),    /* TOP+1  — solid gold body             */
    inset 0 -1px 0   rgba(100, 30,  0,0.95),  /* BOTTOM — deep brown/orange shadow    */
    inset  1px 0 0   rgba(255,140,  0,0.60),  /* LEFT   — vibrant amber side          */
    inset -1px 0 0   rgba(255,140,  0,0.60),  /* RIGHT  — vibrant amber side          */
    inset 0  0  48px rgba(255,140,  0,0.25);  /* INNER  — rich gold ambient glow      */

  /* METALLIC PLATINUM — brushed platinum: pure white highlight → cool dark gray */
  --iglow-plat:
    inset 0  1px 0   rgba(255,255,255,0.98),  /* TOP    — blistering white edge       */
    inset 0  1px 0   rgba(200,210,220,0.80),  /* TOP+1  — cool silver body            */
    inset 0 -1px 0   rgba( 10, 15, 25,0.95),  /* BOTTOM — near pitch-black depth      */
    inset  1px 0 0   rgba(150,160,180,0.50),  /* LEFT   — steel side                  */
    inset -1px 0 0   rgba(150,160,180,0.50),  /* RIGHT  — steel side                  */
    inset 0  0  36px rgba(100,110,130,0.15);  /* INNER  — cool metallic ambient       */

  /* CRYSTAL GLASS — thick glossy transparent edge, extreme smoothness */
  --iglow-glass:
    inset 0  1px 0   rgba(255,255,255,0.95),  /* TOP    — sharp crisp reflection      */
    inset 0 -1px 0   rgba(  0,  0,  0,0.60),  /* BOTTOM — heavy glass base shadow     */
    inset  1px 0 0   rgba(255,255,255,0.30),  /* LEFT   — side bounce light           */
    inset -1px 0 0   rgba(255,255,255,0.30),  /* RIGHT  — side bounce light           */
    inset 0 0 10px rgba(255,255,255,0.05);  /* INNER  — strong glass frosted depth  */

  /* NEON GREEN — cool neon tube light from inside */
  --iglow-neon:
    inset 0  1px 0   rgba(57,255,20, 0.45),
    inset 0 -1px 0   rgba(0,  80,  0, 0.35),
    inset 0 0 10px rgba(255,255,255,0.02);

  /* TIFFANY BLUE — polished enamel light */
  --iglow-tiff:
    inset 0  1px 0   rgba(10,186,181,0.50),
    inset 0 -1px 0   rgba(0,  60, 58, 0.35),
    inset 0 0 10px rgba(255,255,255,0.02);

  /* HERMES ORANGE — warm lacquer reflection */
  --iglow-herm:
    inset 0  1px 0   rgba(255,140, 40,0.50),
    inset 0 -1px 0   rgba(100, 30,  0,0.35),
    inset 0 0 10px rgba(255,255,255,0.02);

  /* ── Fonts (all rounded) */
  --font:        'Nunito', 'Noto Sans TC', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;

  /* ── Spacing */
  --px:    48px;
  --py:    40px;
  --cp:    24px;
  --cp-sm: 16px;
  --gap:   20px;
  --gap-lg:44px;
  --r:     16px;     /* rounded corners — generous */
  --r-sm:  10px;
  --r-xs:   6px;

  /* ── Chart colors */
  --ema144:  #D4AF37;
  --ema169:  #8B6914;
  --vol-up:  rgba(34,197,94,0.55);
  --vol-dn:  rgba(239,68,68,0.55);
}



/* ══ RESET ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}
body {
  font-family: var(--font);
  background: var(--bg-root);
  color: var(--text);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }


/* ══ TYPOGRAPHY HIERARCHY ═════════════════════════════════════════════
   ┌─────────────────────────────────────────────────────────────────┐
   │ LEVEL 1 — PAGE TITLE    ≥ 44px  ALL CAPS   900  Nunito         │
   │ LEVEL 2 — SECTION TITLE ≥ 36px  ALL CAPS   900  Nunito         │
   │ LEVEL 3 — CARD SUBTITLE ≥ 28px  Title Case 800  Nunito         │
   │ LEVEL 4 — CARD LABEL      18px  ALL CAPS   700  Nunito         │
   │ LEVEL 5 — BODY            12px  Normal      700  Nunito         │
   │ DATA    — NUMBERS        varies             700+ JetBrains Mono │
   └─────────────────────────────────────────────────────────────────┘
   Rules:
   · Titles    → text-transform: uppercase
   · Subtitles → text-transform: capitalize  (Cap Lead)
   · ALL levels → font-family: Nunito (rounded)
   · ALL levels → font-weight: bold (700+)
   · Data numbers → JetBrains Mono only
   ════════════════════════════════════════════════════════════════════ */

/* ── LEVEL 1: Page Title — 44px minimum, ALL CAPS ───────────────── */
h1, .djf-title {
  font-family: var(--font) !important;
  font-size:   44px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 2px;
  line-height:  1.05;
  color: var(--text);
  margin: 0;
}

/* ── LEVEL 2: Section Title — 36px, ALL CAPS ────────────────────── */
h2, .djf-section-title {
  font-family: var(--font) !important;
  font-size:   36px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px;
  line-height:  1.1;
  color: var(--text);
  margin: 0;
}

/* ── LEVEL 3: Card Subtitle — 28px, Title Case bold ─────────────── */
h3, .djf-subtitle {
  font-family: var(--font) !important;
  font-size:   28px !important;
  font-weight: 800 !important;
  text-transform: capitalize !important;
  letter-spacing: 0.5px;
  line-height:  1.2;
  color: var(--text);
  margin: 0;
}

/* ── LEVEL 4: Card Label — 18px, ALL CAPS ───────────────────────── */
h4, .djf-card-title {
  font-family:    var(--font) !important;
  font-size:      18px !important;
  font-weight:    800 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px;
  line-height:    1.3;
  color: var(--text);
  margin: 0;
}

/* ── LEVEL 5: Body — 12px, Normal ───────────────────────────────── */
.djf-body, p {
  font-family: var(--font);
  font-size:   12px;
  font-weight: 700;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* ── Label / Tag — 10px, ALL CAPS, mono ─────────────────────────── */
.djf-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color:          var(--text-3);
}

/* ── Data Numbers — JetBrains Mono ──────────────────────────────── */
.djf-data-hero   { font-size: 52px; font-weight: 900; font-family: var(--font-mono); line-height: 1;   letter-spacing: -2px; }
.djf-data-large  { font-size: 36px; font-weight: 900; font-family: var(--font-mono); line-height: 1;   letter-spacing: -1px; }
.djf-data-medium { font-size: 24px; font-weight: 800; font-family: var(--font-mono); line-height: 1.1; }
.djf-data-small  { font-size: 14px; font-weight: 700; font-family: var(--font-mono); }

/* ── Section Header Row — icon + title + right badge ────────────── */
.djf-section-hdr {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: var(--gap);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-2);  /* internal row separator only */
}
.djf-section-sub {
  font-size:      10px;
  font-weight:    700;
  font-family:    var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color:          var(--text-3);
  margin-left:    auto;
}

/* ══ CRYSTAL GLASS CARDS ══════════════════════════════════════════════
   Doctrine:
   • All 4 borders equal width (1px) — never highlight one side
   • Smoothly elevated from background via inner highlight
   • NO outer box-shadow, NO drop-shadow
   • Rounded corners (--r = 16px)
   • Backdrop blur for glass depth
   ════════════════════════════════════════════════════════════════════ */

/* Base glass card — warm-amber tint (gold family), never pure black */
/* ══ CRYSTAL GLASS BASE CARD ══════════════════════════════════════════
   Raised glass plate sitting above the dark background.
   - Near-transparent background so the void shows through
   - backdrop-filter creates the frosted glass depth
   - Top-edge bright: simulates light hitting raised glass
   - Bottom-edge dark: inner depth without casting external shadow
   - ZERO outer box-shadow (no shadow on the background beneath)
   ═══════════════════════════════════════════════════════════════════ */
.djf-card {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--r);
  padding: var(--cp);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
  transition: all 0.25s ease;
}
.djf-card:hover {
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 12px 40px 0 rgba(0,0,0,0.5);
  transform: translateY(-2px);
}

/* ── 黑色琉璃 Black Crystal Glass ── */
.djf-card-black-glass {
  background: linear-gradient(145deg, rgba(20,20,20,0.85) 0%, rgba(5,5,5,0.95) 50%, rgba(0,0,0,1) 100%);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.15) !important; /* Force equal width borders */
  border-radius: var(--r);
  padding: var(--cp);
  box-shadow: 0 16px 40px rgba(0,0,0,0.9), inset 0 2px 10px rgba(255,255,255,0.08);
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.djf-card-black-glass:hover {
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,1), inset 0 2px 12px rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

/* ── Platinum Button ── */
.platinum-btn {
  background: linear-gradient(135deg, #e2e8f0 0%, #ffffff 50%, #94a3b8 100%);
  color: #1a1a24 !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid #ffffff;
  border-radius: 8px;
  padding: 8px 16px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,1), inset 0 -2px 4px rgba(0,0,0,0.2), 0 4px 6px rgba(0,0,0,0.5);
  transition: all 0.2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.platinum-btn:hover {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #cbd5e1 100%);
  box-shadow: inset 0 2px 4px rgba(255,255,255,1), inset 0 -2px 4px rgba(0,0,0,0.1), 0 6px 12px rgba(0,0,0,0.6);
  transform: translateY(-1px);
}
.platinum-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.5);
}

/* ══ METALLIC GOLD CARD ════════════════════════════════════════════════
   Warm amber base + angled studio light simulation.
   Think: polished 24k gold plate under warm gallery lighting.
   Top bright stripe → mid-tone sides → dark base shadow — all inset.
   ═══════════════════════════════════════════════════════════════════ */
.djf-card-gold {
  background: rgba(212,175,55,0.08);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: var(--r);
  padding: var(--cp);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
  transition: all 0.25s ease;
}
.djf-card-gold:hover {
  border: 1px solid rgba(212,175,55,0.6);
  box-shadow: 0 12px 40px 0 rgba(212,175,55,0.15);
  transform: translateY(-2px);
}

/* ══ METALLIC PLATINUM CARD ════════════════════════════════════════════
   Cool silver base + cool diffused light on brushed platinum.
   Think: Apple MacBook anodized aluminium in studio light.
   ═══════════════════════════════════════════════════════════════════ */
.djf-card-plat {
  background: rgba(220,220,225,0.08);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(220,220,225,0.3);
  border-radius: var(--r);
  padding: var(--cp);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
  transition: all 0.25s ease;
}
.djf-card-plat:hover {
  border: 1px solid rgba(220,220,225,0.6);
  box-shadow: 0 12px 40px 0 rgba(220,220,225,0.15);
  transform: translateY(-2px);
}

/* ── Neon — deep forest glass */
.djf-card-neon {
  background: rgba(57,255,20,0.05);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(57,255,20,0.2);
  border-radius: var(--r);
  padding: var(--cp);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
  transition: all 0.25s ease;
}
.djf-card-neon:hover {
  border: 1px solid rgba(57,255,20,0.4);
  box-shadow: 0 12px 40px 0 rgba(57,255,20,0.1);
  transform: translateY(-2px);
}

/* ── Tiffany — deep teal glass */
.djf-card-tiff {
  background: rgba(10,186,181,0.05);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(10,186,181,0.2);
  border-radius: var(--r);
  padding: var(--cp);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
  transition: all 0.25s ease;
}
.djf-card-tiff:hover {
  border: 1px solid rgba(10,186,181,0.4);
  box-shadow: 0 12px 40px 0 rgba(10,186,181,0.1);
  transform: translateY(-2px);
}

/* ── Hermes — deep rust glass */
.djf-card-herm {
  background: rgba(243,112,33,0.05);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid rgba(243,112,33,0.2);
  border-radius: var(--r);
  padding: var(--cp);
  box-shadow: 0 8px 32px 0 rgba(0,0,0,0.37);
  transition: all 0.25s ease;
}
.djf-card-herm:hover {
  border: 1px solid rgba(243,112,33,0.4);
  box-shadow: 0 12px 40px 0 rgba(243,112,33,0.1);
  transform: translateY(-2px);
}

/* ══ METALLIC TEXT ════════════════════════════════════════════════════ */

.text-gold {
  background: linear-gradient(175deg,
    #FFFDE7  0%,
    #FFE566 10%,
    #D4AF37 25%,
    #8B6914 45%,
    #5C4208 55%,
    #D4AF37 70%,
    #FFE566 85%,
    #FFFDE7 95%,
    #D4AF37 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 100% 300%;
  animation: gold-shimmer 6s ease-in-out infinite;
}

.text-platinum {
  background: linear-gradient(175deg,
    #FFFFFF  0%,
    #F0F0F8  8%,
    #C8CAD8 22%,
    #909090 40%,
    #606070 55%,
    #C8CAD8 72%,
    #F0F0F8 88%,
    #FFFFFF 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-neon    { color: var(--neon);    font-weight: 900; }
.text-tiffany { color: var(--tiffany); font-weight: 800; }
.text-hermes  { color: var(--hermes);  font-weight: 800; }
.text-emerald { color: var(--emerald); font-weight: 700; }
.text-rose    { color: var(--rose);    font-weight: 700; }
.text-amber   { color: var(--amber);   font-weight: 700; }
.text-muted   { color: var(--text-3);  font-weight: 700; }

/* ══ HERO METALLIC HEADLINE ══════════════════════════════════════════ */
.hero-title-gold {
  font-family: var(--font);
  font-size: 72px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -1px;
  background: linear-gradient(135deg,
    #9A7B1A  0%,
    #D4AF37 20%,
    #F5E27A 40%,
    #D4AF37 55%,
    #F0D060 70%,
    #9A7B1A 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: metallic-shift 6s ease-in-out infinite;
  line-height: 1.05;
}
@keyframes metallic-shift {
  0%,100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ══ PAGE LAYOUT ══════════════════════════════════════════════════════ */
.djf-page-wrap {
  padding: 0 var(--px) 64px;
  max-width: 1700px;
  margin: 0 auto;
}
.djf-page-section { margin-bottom: var(--gap-lg); }
.djf-page-section:last-child { margin-bottom: 0; }

/* Split layouts */
.split-65-35 { display: grid; grid-template-columns: 65fr 35fr; gap: var(--gap); align-items: start; }
.split-42-58 { display: grid; grid-template-columns: 42fr 58fr; gap: var(--gap); align-items: start; }
.split-50-50 { display: grid; grid-template-columns: 1fr 1fr;   gap: var(--gap); align-items: start; }
@media (max-width: 1200px) {
  .split-65-35, .split-42-58, .split-50-50 { grid-template-columns: 1fr; }
}

/* Grid systems */
.djf-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.djf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.djf-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.djf-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.djf-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); }

@media (max-width: 1200px) {
  .djf-grid-5, .djf-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .djf-grid-4               { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .djf-grid-3, .djf-grid-4, .djf-grid-5, .djf-grid-6 { grid-template-columns: 1fr; }
  .djf-grid-2               { grid-template-columns: 1fr; }
}

/* ══ NAVIGATION BAR ══════════════════════════════════════════════════ */
.djf-navbar {
  min-height: 64px;
  background: rgba(8,8,8,0.96);
  backdrop-filter: blur(24px) saturate(120%);
  -webkit-backdrop-filter: blur(24px) saturate(120%);
  border-bottom: 1px solid var(--border-2);
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  position: sticky;
  top: 0;
  z-index: 1000;
  /* inner top highlight only — simulates glass surface */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

.djf-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  color: var(--text-3);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.djf-nav-link:hover {
  border-color: var(--border-2);
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.djf-nav-link.active {
  border-color: var(--border-gold);
  color: var(--gold);
  background: rgba(212,175,55,0.06);
  box-shadow: none;
}

/* ══ HERO SECTION ════════════════════════════════════════════════════ */
.hero-section {
  text-align: center;
  padding: 80px var(--px) 60px;
  background: radial-gradient(ellipse 60% 40% at 50% 0%,
    rgba(212,175,55,0.05) 0%, transparent 70%);
  border-bottom: 1px solid var(--border-2);
}

/* ══ KPI STAT TILES ══════════════════════════════════════════════════ */
/* KPI tile — warm amber tint (never pure black) */
.kpi-tile {
  background: var(--bg-card-base);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border-2);
  border-radius: var(--r);
  padding: 20px 24px;
  box-shadow: none;
  transition: border-color 0.2s ease;
  flex: 1;
  min-width: 0;
}
.kpi-tile:hover { border-color: rgba(255,255,255,0.22); }

.kpi-tile-label {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin-bottom: 10px;
}
.kpi-tile-value {
  font-size: 32px;
  font-weight: 900;
  font-family: var(--font-mono);
  line-height: 1;
}

/* ══ WATCHLIST TABLE ══════════════════════════════════════════════════ */
.djf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.djf-table thead th {
  padding: 0 16px 12px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-2);
}
.djf-table tbody tr {
  transition: background 0.15s ease;
}
.djf-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.djf-table tbody td {
  padding: 13px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  vertical-align: middle;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.djf-table tbody tr:last-child td { border-bottom: none; }

/* Confidence mini bar */
.conf-bar-wrap { min-width: 80px; }
.conf-bar {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.05);
  margin-bottom: 3px; overflow: hidden;
}
.conf-bar-fill { height: 100%; border-radius: 2px; }
.conf-pct { font-size: 10px; font-family: var(--font-mono); font-weight: 700; }

/* ══ SIGNAL / STATUS BADGES ══════════════════════════════════════════ */
.djf-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  font-family: var(--font);
  letter-spacing: 0.3px;
  border: 1px solid;
}

.badge-gold    { background: rgba(212,175,55,0.12); border-color: var(--border-gold); color: var(--gold); }
.badge-plat    { background: rgba(232,232,232,0.08); border-color: var(--border-plat); color: var(--platinum); }
.badge-neon    { background: rgba(57,255,20,0.10);  border-color: var(--border-neon); color: var(--neon); }
.badge-tiff    { background: rgba(10,186,181,0.10); border-color: var(--border-tiff); color: var(--tiffany); }
.badge-herm    { background: rgba(255,102,0,0.10);  border-color: var(--border-herm); color: var(--hermes); }
.badge-emerald { background: rgba(34,197,94,0.10);  border-color: rgba(34,197,94,0.35);  color: var(--emerald); }
.badge-rose    { background: rgba(239,68,68,0.10);  border-color: rgba(239,68,68,0.35);  color: var(--rose); }
.badge-amber   { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.35); color: var(--amber); }
.badge-silver  { background: rgba(180,180,180,0.08); border-color: rgba(180,180,180,0.25); color: var(--platinum); }
.badge-purple  { background: rgba(168,85,247,0.10); border-color: rgba(168,85,247,0.35); color: var(--purple); }

/* Status pill with live dot */
.djf-status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 14px; border-radius: 20px;
  font-size: 11px; font-weight: 800;
  font-family: var(--font-mono); border: 1px solid;
}
.djf-status-pill .dot {
  width: 7px; height: 7px; border-radius: 50%;
  animation: pulse-dot 2.5s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.75); }
}

/* LIVE dot */
@keyframes pulse-live {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ══ GATE HEXAGONS ════════════════════════════════════════════════════ */
.gate-hex {
  clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.gate-hex:hover { transform: scale(1.08); }

/* ══ NEWS CARDS ═══════════════════════════════════════════════════════ */
.news-card {
  background: var(--bg-card-base);      /* warm amber tint — never pure black */
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--border-2);    /* uniform 1px all 4 sides */
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 12px;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.18s ease, transform 0.18s ease;
  position: relative;
}
.news-card:last-child { margin-bottom: 0; }
.news-card::before {
  /* Accent strip as inner-top accent bar, not border override */
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  opacity: 0.6;
  transition: opacity 0.18s ease;
}
.news-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); }
.news-card:hover::before { opacity: 1; }

.news-card.selected {
  border-color: var(--border-gold);
  box-shadow: none;
}
.news-card.selected::before { background: var(--gold); opacity: 1; }

.news-bull::before { background: var(--emerald); }
.news-bear::before { background: var(--rose); }
.news-neut::before { background: var(--amber); }

.news-card-headline {
  font-size: 14px; font-weight: 800;
  color: var(--text); line-height: 1.5;
  margin-bottom: 7px;
}
.news-card-summary {
  font-size: 12px; font-weight: 700;
  color: var(--text-2);
  line-height: 1.65; margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card-footer {
  display: flex; align-items: center; gap: 14px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px; font-family: var(--font-mono); font-weight: 700;
}

.news-scroll-panel {
  max-height: 720px; overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,175,55,0.2) transparent;
}
.news-scroll-panel::-webkit-scrollbar { width: 4px; }
.news-scroll-panel::-webkit-scrollbar-track { background: transparent; }
.news-scroll-panel::-webkit-scrollbar-thumb {
  background: rgba(212,175,55,0.2); border-radius: 2px;
}

/* ══ AI ANALYSIS BOX (purple = LLM) ════════════════════════════════ */
.ai-analysis-box {
  background: rgba(40, 20, 55, 0.60);          /* deep purple tint — never black */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(168,85,247,0.28);     /* uniform 1px */
  border-radius: var(--r-sm);
  padding: 18px 20px;
  box-shadow: inset 0 0 28px rgba(168,85,247,0.08), inset 0 1px 0 rgba(168,85,247,0.18);
  margin-bottom: 18px;
}
.ai-label {
  font-size: 10px; font-weight: 800;
  color: var(--purple);
  text-transform: uppercase; letter-spacing: 0.8px;
  font-family: var(--font-mono);
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid rgba(168,85,247,0.30);
  border-radius: 4px;
  background: rgba(168,85,247,0.08);
  margin-bottom: 10px;
}
.ai-analysis-text {
  font-size: 12px; font-weight: 700;
  color: var(--text-2);
  line-height: 1.75; font-style: italic;
}

/* ══ TRANSFER ENTROPY TABLE ══════════════════════════════════════════ */
.te-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.te-table th {
  padding: 8px 12px;
  font-size: 10px; font-family: var(--font-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-3); text-align: left;
  border-bottom: 1px solid var(--border-2);
}
.te-table td {
  padding: 10px 12px;
  font-size: 12px; font-weight: 700;
  font-family: var(--font-mono); color: var(--text);
  border-bottom: 1px solid var(--border);
}
.te-table tr:last-child td { border-bottom: none; }

/* ══ CAUSAL TIMELINE ═════════════════════════════════════════════════ */
.causal-timeline {
  display: flex; align-items: center; justify-content: center;
  padding: 32px 0;
}
.causal-node {
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  flex: 1; max-width: 160px;
}
.causal-node-circle {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  border: 1px solid;
  backdrop-filter: blur(8px);
  transition: transform 0.2s ease;
}
.causal-node-circle:hover { transform: scale(1.1); }
.causal-node-label {
  font-size: 11px; font-weight: 800; font-family: var(--font);
  color: var(--text-2); text-align: center; line-height: 1.4;
}
.causal-arrow {
  font-size: 20px; color: var(--text-3);
  animation: flow-right 1.8s ease-in-out infinite;
  flex-shrink: 0; padding: 0 6px;
  margin-bottom: 24px;
}
@keyframes flow-right {
  0%,100% { transform: translateX(0);  opacity: 0.35; }
  50%      { transform: translateX(4px); opacity: 1; }
}

/* ══ TRADING PAGE ════════════════════════════════════════════════════ */
.trading-controls {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 48px;
  background: rgba(8,8,8,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-2);
  position: sticky; top: 64px; z-index: 200;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.4);
}
.timeframe-btn {
  padding: 6px 16px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 800; font-family: var(--font-mono);
  border: 1px solid var(--border-2);
  background: transparent; color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
}
.timeframe-btn:hover { border-color: var(--border-gold); color: var(--gold); }
.timeframe-btn.active {
  background: rgba(212,175,55,0.08);
  border-color: var(--border-gold);
  color: var(--gold);
  box-shadow: none;
}

/* Proposal card */
.proposal-card {
  background: var(--bg-card-gold);       /* dark amber — never pure black */
  backdrop-filter: blur(28px) saturate(170%);
  -webkit-backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid var(--border-gold);  /* uniform 1px all 4 sides */
  border-radius: var(--r);
  padding: var(--cp);
  box-shadow: none;
  display: flex; flex-direction: column; gap: 18px;
  height: 100%;
}

.proposal-action-badge {
  display: flex; align-items: center; justify-content: center;
  padding: 12px 28px; border-radius: var(--r-sm);
  font-size: 26px; font-weight: 900; font-family: var(--font);
  letter-spacing: 2px; text-transform: uppercase;
  width: 100%; border: 1px solid;
}
.action-long  {
  background: rgba(34,197,94,0.10);
  border-color: rgba(34,197,94,0.40);
  color: var(--emerald);
  box-shadow: inset 0 0 24px rgba(34,197,94,0.08);
}
.action-short {
  background: rgba(239,68,68,0.10);
  border-color: rgba(239,68,68,0.40);
  color: var(--rose);
  box-shadow: inset 0 0 24px rgba(239,68,68,0.08);
}

.proposal-detail-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.proposal-detail-row:last-child { border-bottom: none; }
.proposal-detail-label {
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-3);
}
.proposal-detail-val {
  font-size: 16px; font-weight: 900; font-family: var(--font-mono);
}
.conf-progress-bar {
  height: 5px; border-radius: 3px;
  background: rgba(255,255,255,0.05);
  overflow: hidden; margin-top: 6px;
}
.conf-progress-fill {
  height: 100%; border-radius: 3px;
  transition: width 1s ease;
}

/* Kill switch */
.kill-switch-active {
  border-color: rgba(239,68,68,0.50) !important;
  box-shadow: inset 0 0 24px rgba(239,68,68,0.10) !important;
  animation: ks-pulse 1.4s ease-in-out infinite;
}
@keyframes ks-pulse {
  0%,100% { border-color: rgba(239,68,68,0.30); }
  50%      { border-color: rgba(239,68,68,0.65); }
}

/* Chip / smart money rows */
.chip-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.chip-row:last-child { border-bottom: none; }
.chip-bar-bg { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.05); overflow: hidden; }
.chip-bar-fill { height: 100%; border-radius: 2px; }
.chip-label { font-size: 11px; font-weight: 700; color: var(--text-3); width: 48px; font-family: var(--font-mono); }
.chip-value { font-size: 12px; font-weight: 800; font-family: var(--font-mono); width: 80px; text-align: right; }

/* Risk meter */
.risk-meter-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.risk-meter-row:last-child { border-bottom: none; }
.risk-label { font-size: 12px; font-weight: 700; color: var(--text-2); font-family: var(--font); }
.risk-value { font-size: 13px; font-weight: 800; font-family: var(--font-mono); }

/* ══ BENEISH GRID (Page 4) ═══════════════════════════════════════════ */
.beneish-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
@media (max-width: 1200px) { .beneish-grid { grid-template-columns: repeat(2, 1fr); } }

/* Each Beneish tile — deep forest tint, uniform neon border */
.beneish-tile {
  background: var(--bg-card-neon);       /* deep forest tint — never pure black */
  border: 1px solid var(--border-neon);  /* uniform 1px all 4 sides */
  border-radius: var(--r);
  padding: 20px;
  box-shadow: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.beneish-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(57,255,20,0.55);
}
.beneish-tile-code {
  font-size: 10px; font-weight: 900; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 1px;
  color: var(--neon); margin-bottom: 5px;
}
.beneish-tile-name {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  font-family: var(--font); margin-bottom: 12px; line-height: 1.4;
}
.beneish-tile-value {
  font-size: 28px; font-weight: 900; font-family: var(--font-mono);
  color: var(--neon); line-height: 1; margin-bottom: 8px;
}
.beneish-tile-badge {
  font-size: 10px; font-weight: 800; font-family: var(--font-mono);
  letter-spacing: 0.5px; padding: 3px 10px; border-radius: 20px;
  display: inline-block; border: 1px solid;
}
.beneish-pass { background: rgba(57,255,20,0.10); color: var(--neon); border-color: var(--border-neon); }
.beneish-warn { background: rgba(245,158,11,0.10); color: var(--amber); border-color: rgba(245,158,11,0.3); }
.beneish-fail { background: rgba(239,68,68,0.10); color: var(--rose); border-color: rgba(239,68,68,0.3); }

/* ══ HEALTH SCORE (Page 4) ═══════════════════════════════════════════ */
.health-kpi-item {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-card-neon);      /* deep forest tint */
  border: 1px solid var(--border-neon); /* uniform 1px */
  border-radius: var(--r-sm);
  padding: 16px 20px;
  box-shadow: none;
}
.health-kpi-label {
  font-size: 10px; font-weight: 700; font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-3);
}
.health-kpi-value {
  font-size: 22px; font-weight: 900; font-family: var(--font-mono);
  color: var(--neon);
}
.health-kpi-status {
  font-size: 10px; font-weight: 800; font-family: var(--font-mono);
  letter-spacing: 0.5px; color: var(--neon);
}

/* ══ CORRELATION TABLE ══════════════════════════════════════════════ */
.corr-table { width: 100%; border-collapse: separate; border-spacing: 4px; }
.corr-table th {
  padding: 8px 12px; font-size: 10px; font-family: var(--font-mono);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-3); text-align: center;
}
.corr-table td {
  padding: 11px 12px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 800; font-family: var(--font-mono);
  text-align: center; transition: transform 0.15s ease;
  border: 1px solid;
}
.corr-table td:hover { transform: scale(1.04); }
.corr-pos-strong { background: rgba(57,255,20,0.14);  color: var(--neon);    border-color: rgba(57,255,20,0.30); }
.corr-pos-mid    { background: rgba(57,255,20,0.06);  color: rgba(57,255,20,0.7); border-color: rgba(57,255,20,0.15); }
.corr-neutral    { background: rgba(255,255,255,0.03); color: var(--text-3); border-color: var(--border); }
.corr-neg-mid    { background: rgba(239,68,68,0.06);  color: rgba(239,68,68,0.7); border-color: rgba(239,68,68,0.15); }
.corr-neg-strong { background: rgba(239,68,68,0.14);  color: var(--rose);    border-color: rgba(239,68,68,0.30); }

/* Cross-check table */
.crosscheck-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.crosscheck-table th {
  padding: 10px 16px; font-size: 10px; font-family: var(--font-mono);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-3); border-bottom: 1px solid var(--border-2); text-align: left;
}
.crosscheck-table td {
  padding: 12px 16px; font-size: 12px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border); vertical-align: middle;
}
.crosscheck-table tr:last-child td { border-bottom: none; }
.crosscheck-table tr:hover td { background: rgba(212,175,55,0.02); }

/* ══ 3D CAUSAL IFRAME ════════════════════════════════════════════════ */
.causal-3d-container {
  width: 100%;
  border-radius: var(--r);
  border: 1px solid var(--border-gold);
  overflow: hidden;
  background: var(--bg-card-gold);      /* dark amber — never pure black */
  box-shadow: none;        /* inner only */
}
.causal-3d-container iframe { display: block; border: none; }

/* ══ PROGRESS BARS ═══════════════════════════════════════════════════ */
.djf-progress    { height: 4px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.djf-progress-lg { height: 7px; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; }
.djf-progress-fill { height: 100%; border-radius: inherit; transition: width 0.8s cubic-bezier(0.4,0,0.2,1); }

/* ══ DROPDOWN DARK OVERRIDE — kills ALL Dash Dropdown white ══════════ */
.djf-dropdown,
.djf-dropdown .Select-control { border: none !important; box-shadow: none !important; background: transparent !important; }
.djf-dropdown .Select,
.dash-dropdown,
button.dash-dropdown,
.dash-dropdown-focus-target,
input.dash-dropdown-focus-target {
  background: var(--bg-card-gold) !important;
  background-color: var(--bg-card-gold) !important;
  border: 1px solid var(--border-gold) !important;
  color: var(--text) !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--font) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  outline: none !important;
}
.djf-dropdown .Select-placeholder { color: var(--text-3) !important; font-weight: 700 !important; }
.djf-dropdown .Select-menu-outer {
  background: var(--bg-card-gold) !important;
  border: 1px solid var(--border-gold) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: none !important;
}
.djf-dropdown .Select-option {
  background: transparent !important;
  color: var(--text-2) !important;
  font-weight: 700 !important;
}
.djf-dropdown .Select-option.is-focused,
.djf-dropdown .Select-option.is-selected {
  background: rgba(212,175,55,0.15) !important;
  color: var(--text) !important;
}
.djf-dropdown .Select-value-label  { color: var(--text) !important; font-weight: 800 !important; }
.djf-dropdown .Select-arrow        { border-top-color: var(--gold) !important; }
.djf-dropdown .Select-input > input { background: transparent !important; color: var(--text) !important; }

/* ══ SCROLLBAR ═══════════════════════════════════════════════════════ */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,0.25); }

/* ══ DASH DEBUG MENU DARK OVERRIDE ══════════════════════════════════ */
#react-entry-point,
#react-entry-point > div,
.dash-debug-menu__popup,
.dash-debug-menu__content,
.dash-debug-menu__outer,
#_dash-global-error-container > div,
._dash-error-card {
  background-color: transparent !important;
  border-color: rgba(212,175,55,0.25) !important;
  color: #f1f5f9 !important;
}


/* ══ PLOTLY TRANSPARENT ══════════════════════════════════════════════ */
.js-plotly-plot .plotly .main-svg { background: transparent !important; }
.js-plotly-plot .plotly .bg       { fill: transparent !important; }

/* ══ SKELETON ════════════════════════════════════════════════════════ */
.djf-skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.8s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ══ MISC UTILITIES ══════════════════════════════════════════════════ */
.dash-interval        { display: none !important; }
.Select-clear-zone    { display: none !important; }
.djf-section          { margin-bottom: var(--gap-lg); }
.djf-section-sm       { margin-bottom: var(--gap); }
.djf-divider          { height: 1px; background: var(--border-2); margin: var(--gap-lg) 0; }

/* Gate flow animation */
.gate-arrow-v {
  text-align: center; color: var(--text-3);
  font-size: 18px; padding: 5px 0; padding-left: 28px;
  animation: flow-down 2.5s ease-in-out infinite;
}
@keyframes flow-down {
  0%,100% { transform: translateY(0); opacity: 0.35; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ── Architecture cards — each has its own accent-tinted background */
.arch-card {
  background: var(--bg-card-base);      /* warm amber — never pure black */
  backdrop-filter: blur(24px) saturate(155%);
  -webkit-backdrop-filter: blur(24px) saturate(155%);
  border: 1px solid var(--border-2);    /* uniform 1px all 4 sides */
  border-radius: var(--r);
  padding: 28px 24px;
  box-shadow: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.arch-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.22); }
/* Each variant: unique tinted bg + matching border + inner glow */
.arch-card-gold { background: var(--bg-card-gold); border-color: var(--border-gold); box-shadow: none; }
.arch-card-plat { background: var(--bg-card-plat); border-color: var(--border-plat); box-shadow: none; }
.arch-card-neon { background: var(--bg-card-neon); border-color: var(--border-neon); box-shadow: none; }
.arch-card-tiff { background: var(--bg-card-tiff); border-color: var(--border-tiff); box-shadow: none; }
.arch-card-herm { background: var(--bg-card-herm); border-color: var(--border-herm); box-shadow: none; }

/* ══ DASH dcc.Tabs — UNIFORM BORDER OVERRIDE ═══════════════════════
   Dash renders tabs with a bottom-border indicator by default.
   ALL card/tab frames must have EQUAL 1px borders on all 4 sides.
   ════════════════════════════════════════════════════════════════ */

/* Tab container strip — no underline strip */
.dash-tabs, .dash-tab-container,
[class*="tabs--"] { border: none !important; }

/* Individual tab pill — uniform border */
.dash-tab,
.tab, .tab--selected {
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;  /* same as others */
  border-radius: 10px !important;
  background: var(--bg-card-base) !important;
  color: var(--text-2) !important;
  font-family: var(--font) !important;
  font-weight: 800 !important;
  padding: 8px 18px !important;
  margin-right: 6px !important;
  transition: all 0.2s ease !important;
}
.tab--selected,
.dash-tab--selected {
  border: 1px solid var(--border-gold) !important;
  background: var(--bg-card-gold) !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}
.dash-tab:hover, .tab:hover {
  border-color: rgba(212,175,55,0.30) !important;
  color: var(--text) !important;
  background: var(--bg-card-gold) !important;
}

/* Timeframe RadioItems selected label */
.djf-radio-selected {
  border: 1px solid var(--border-gold) !important;
  background: var(--bg-card-gold) !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}

/* ══ DJ EQUALIZER KEYFRAMES ══════════════════════════════════════════
   The heartbeat of DJ Fortune — 5 bars, 5 rhythms.
   ════════════════════════════════════════════════════════════════════ */
@keyframes eq-bar1 {
  0%, 100% { transform: scaleY(0.30); opacity: 0.60; }
  50%       { transform: scaleY(1.00); opacity: 1.00; }
}
@keyframes eq-bar2 {
  0%, 100% { transform: scaleY(0.55); opacity: 0.70; }
  35%       { transform: scaleY(1.00); opacity: 1.00; }
  70%       { transform: scaleY(0.40); opacity: 0.65; }
}
@keyframes eq-bar3 {
  0%, 100% { transform: scaleY(0.75); opacity: 0.75; }
  45%       { transform: scaleY(0.25); opacity: 0.50; }
  80%       { transform: scaleY(1.00); opacity: 1.00; }
}
@keyframes pulse-live {
  0%, 100% { transform: scale(1.0); opacity: 1.0; }
  50%       { transform: scale(1.6); opacity: 0.2; }
}
@keyframes luxury-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes gold-shimmer {
  0%   { background-position: 0% 0%;   }
  40%  { background-position: 0% 60%;  }
  60%  { background-position: 0% 80%;  }
  100% { background-position: 0% 0%;   }
}

/* ══ LUXURY ADDITIONS ════════════════════════════════════════════════
   DJ Fortune — For the elite only. Every pixel with intention.
   ════════════════════════════════════════════════════════════════════ */

/* Page entry animation */
.djf-page-enter {
  animation: luxury-fade-up 0.45s cubic-bezier(0.4,0,0.2,1) both;
}

/* Metallic gold gradient text — hero wordmark (canonical, see base definition above) */
/* Overridden at line 437 — no duplicate needed here */

/* Metallic platinum gradient text (canonical, see base definition above) */
/* Overridden at line 450 — no duplicate needed here */

/* Luxury stat tile number */
.djf-stat-value {
  font-family:    var(--font-mono);
  font-size:      36px;
  font-weight:    900;
  line-height:    1;
  letter-spacing: -1px;
}
.djf-stat-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--text-3);
  margin-top:     6px;
}

/* Luxury badge / pill */
.djf-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            4px;
  padding:        3px 10px;
  border-radius:  20px;
  font-size:      10px;
  font-weight:    800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  font-family:    var(--font-mono);
  border:         1px solid currentColor;
}
.djf-badge-gold { color: var(--gold);     background: rgba(212,175,55,0.10); border-color: rgba(212,175,55,0.35); }
.djf-badge-plat { color: var(--platinum); background: rgba(232,232,232,0.07); border-color: rgba(232,232,232,0.25); }
.djf-badge-neon { color: var(--neon);     background: rgba(57,255,20,0.06);  border-color: rgba(57,255,20,0.30); }
.djf-badge-tiff { color: var(--tiffany);  background: rgba(10,186,181,0.06); border-color: rgba(10,186,181,0.28); }
.djf-badge-herm { color: var(--hermes);   background: rgba(255,102,0,0.06);  border-color: rgba(255,102,0,0.28); }

/* Thin confidence bar — elegant signal strength */
.djf-conf-bar  { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 6px; }
.djf-conf-fill { height: 100%; border-radius: inherit; transition: width 1.2s cubic-bezier(0.4,0,0.2,1); }

/* Luxury gold hairline divider */
.djf-divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border-gold) 50%, transparent 100%);
  margin: var(--gap-lg) 0;
}

/* Hover lift — ultra-subtle raise, ZERO outward shadow cast */
.djf-card-gold:hover,
.djf-card-plat:hover,
.djf-card-neon:hover,
.djf-card-tiff:hover,
.djf-card-herm:hover,
.djf-card:hover {
  transform: translateY(-2px);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

/* ══ LUXURY MICRO-DETAILS ═════════════════════════════════════════════
   DJ Fortune DJF-07 — Master The Rhythm. Control The Fortune.
   For the elite only. Every pixel with intention.
   ═══════════════════════════════════════════════════════════════════ */

/* Gold shimmer keyframe (canonical definition) */
@keyframes gold-shimmer {
  0%   { background-position: 0% 0%;   }
  40%  { background-position: 0% 60%;  }
  60%  { background-position: 0% 80%;  }
  100% { background-position: 0% 0%;   }
}
/* .text-gold and .text-platinum are canonically defined above — no override here */

/* Luxury stat tile — data value with unit */
.djf-stat-value {
  font-family: var(--font-mono);
  font-size:   36px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -1px;
}
.djf-stat-unit {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  opacity: 0.55;
  margin-left: 4px;
  vertical-align: super;
}
.djf-stat-label {
  font-family:    var(--font-mono);
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color:          var(--text-3);
  margin-top:     6px;
}

/* Luxury badge / pill — overrides generic .djf-badge with mono font */
.djf-badge-gold   { color: var(--gold);     background: rgba(212,175,55,0.10);  border-color: rgba(212,175,55,0.35); }
.djf-badge-plat   { color: var(--platinum); background: rgba(232,232,232,0.08); border-color: rgba(232,232,232,0.25); }
.djf-badge-neon   { color: var(--neon);     background: rgba(57,255,20,0.06);   border-color: rgba(57,255,20,0.30); }
.djf-badge-tiff   { color: var(--tiffany);  background: rgba(10,186,181,0.06);  border-color: rgba(10,186,181,0.28); }
.djf-badge-herm   { color: var(--hermes);   background: rgba(255,102,0,0.06);   border-color: rgba(255,102,0,0.28); }

/* Confidence bar — thin, elegant */
.djf-conf-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: 6px;
}
.djf-conf-fill {
  height: 100%;
  border-radius: inherit;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Luxury divider — hairline with gold gradient center */
.djf-divider-luxury {
  position: relative;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border-gold) 50%, transparent 100%);
  margin: var(--gap-lg) 0;
}

/* Hover lift for cards — ultra-subtle raise, NO outer shadow cast */
.djf-card-gold:hover,
.djf-card-plat:hover,
.djf-card-neon:hover,
.djf-card-tiff:hover,
.djf-card-herm:hover {
  transform: translateY(-2px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
}

/* Page entry animation */
@keyframes luxury-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.djf-page-enter {
  animation: luxury-fade-up 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── DJ Equalizer Bars — Brand Identity ─────────────────────────── */
/* Pulsing vertical bars like a gold audio equalizer / CDJ-3000 VU meter */
.djf-eq-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 16px;
  opacity: 0.55;
  margin-left: 8px;
  vertical-align: middle;
}
.djf-eq-bar {
  width: 3px;
  border-radius: 1px;
  background: var(--gold);
  animation: eq-pulse 1.4s ease-in-out infinite;
}
.djf-eq-bar:nth-child(1) { height: 6px;  animation-delay: 0s; }
.djf-eq-bar:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.djf-eq-bar:nth-child(3) { height: 9px;  animation-delay: 0.30s; }
.djf-eq-bar:nth-child(4) { height: 16px; animation-delay: 0.10s; }
.djf-eq-bar:nth-child(5) { height: 7px;  animation-delay: 0.25s; }
@keyframes eq-pulse {
  0%, 100% { transform: scaleY(0.40); opacity: 0.45; }
  50%       { transform: scaleY(1.00); opacity: 1.00; }
}
/* Hide Dash debug toolbar — prevents element collision */
#_dash-debug-menu__outer,
.dash-debug-menu,
[class*="dash-debug"],
._dash-loading { display: none !important; }


/* ══ ENGLISH MODE ═════════════════════════════════════════════════════ */
/* Chinese-only text: hidden when data-lang="en" */
[data-lang="en"] .djf-zh { display: none !important; }
/* English-only text: shown only when data-lang="en" */
.djf-en { display: none; }
[data-lang="en"] .djf-en { display: inline !important; }
/* Navigation items in English mode */
[data-lang="en"] [data-nav-zh] { display: none; }


/* ══ i18n Toggles ════════════════════════════════════════════════════ */
html[lang="zh"] .lang-en { display: none !important; }
html[lang="zh"] .lang-zh { display: inline !important; }

html[lang="en"] .lang-zh { display: none !important; }
html[lang="en"] .lang-en { display: inline !important; }

/* Enforce flex if the parent container uses flex */
html[lang="zh"] .lang-zh.flex-i18n { display: flex !important; }
html[lang="en"] .lang-en.flex-i18n { display: flex !important; }

/* ══════════════════════════════════════════════════════════════════════════
   DJF V8.5: THICK 3D TRAPEZOIDAL MATERIALS (AS PER USER IMAGE SPEC)
   Rules enforced:
   - NO outer drop shadows (only inset glow/shadow for volume)
   - Consistent border thickness
   - Trapezoidal side profile (heavy inset bottom shadow, bright inset top)
   - Banned colors removed. Only Platinum, Gold, Neon, Tiffany, Hermes.
══════════════════════════════════════════════════════════════════════════ */

/* ── 1. PLATINUM & GOLD METAL BUTTONS ── */
.djf-metal-btn {
    border-radius: 8px;
    padding: 8px 32px !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    transition: all 0.1s ease;
    /* Massive 3D trapezoid metal look — NO outer drop shadow */
    box-shadow: 
        inset 0 10px 14px -6px rgba(255, 255, 255, 0.95), 
        inset 0 -10px 14px -6px rgba(0, 0, 0, 0.7),    
        inset 10px 0 14px -6px rgba(255, 255, 255, 0.6), 
        inset -10px 0 14px -6px rgba(0, 0, 0, 0.6);      
    border: 1px solid rgba(255,255,255,0.4);
    cursor: pointer;
}
.djf-metal-btn:active {
    transform: translateY(4px);
    box-shadow: 
        inset 0 6px 10px -3px rgba(0, 0, 0, 0.8), 
        inset 0 -6px 10px -3px rgba(255, 255, 255, 0.4);
}

.djf-btn-platinum {
    background: linear-gradient(145deg, #f8fafc 0%, #cbd5e1 45%, #64748b 100%);
    color: #0f172a !important;
    text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
.djf-btn-gold {
    background: linear-gradient(145deg, #FFE566 0%, #D4AF37 45%, #8B6914 100%);
    color: #1a1a1a !important;
    text-shadow: 0 1px 1px rgba(255,255,255,0.5);
}

/* ── 2. THICK VOLUMETRIC GLASS CARDS ── */
.djf-glass-card {
    border-radius: 40px; /* Extreme smooth corners */
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    box-shadow: 
        inset 1px 1px 2px rgba(255, 255, 255, 0.1),
        inset -1px -1px 2px rgba(0, 0, 0, 0.5),
        0 8px 32px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 32px;
    box-sizing: border-box;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}
/* MOBILE VS DESKTOP TOGGLE */
@media screen and (min-width: 1025px) {
    .djf-desktop-only { display: block; }
    .djf-mobile-only { display: none; }
}
@media screen and (max-width: 1024px) {
    .djf-desktop-only { display: none !important; }
    .djf-mobile-only { display: block !important; }
}

/* Ultra transparent backgrounds to let the blur carry the color */
.djf-glass-hermes {
    background: linear-gradient(160deg, rgba(243, 112, 33, 0.3) 0%, rgba(180, 50, 0, 0.5) 100%);
}

.djf-glass-neon {
    background: linear-gradient(160deg, rgba(57, 255, 20, 0.25) 0%, rgba(10, 120, 5, 0.4) 100%);
}

.djf-glass-tiffany {
    background: linear-gradient(160deg, rgba(10, 186, 181, 0.3) 0%, rgba(2, 90, 90, 0.45) 100%);
}
@keyframes loadProgress { 0% { width: 0%; } 100% { width: 100%; } }

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN: TABLET & MOBILE MODES
   Uses !important to override inline Python/Dash styling dynamically.
══════════════════════════════════════════════════════════════════════════ */

/* ── TABLET MODE (< 1024px) ── */
@media screen and (max-width: 1024px) {
    /* Navbar compression */
    #djf-navbar {
        grid-template-columns: 1fr !important;
        height: auto !important;
        padding: 24px 20px !important;
        row-gap: 24px !important;
        justify-items: center !important;
    }
    #djf-navbar > a { justify-self: center !important; }
    #djf-navbar > div {
        justify-self: center !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }

    /* Wrap flex rows safely */
    div[style*="display: flex"][style*="flex-direction: row"],
    div[style*="display: flex"][style*="flexDirection: row"],
    div[style*="display: flex"]:not([style*="column"]) {
        flex-wrap: wrap !important;
    }
}

/* ── MOBILE MODE (< 768px) ── */
@media screen and (max-width: 768px) {
    body { padding: 10px !important; }

    /* Force all structural flex/grids into stacked columns */
    div[style*="display: flex"]:not(.djf-chart-header):not(#trading-timeframe):not(.keep-row-mobile),
    .djf-glass-card > div[style*="display: flex"]:not(.djf-chart-header):not(#trading-timeframe):not(.keep-row-mobile) {
        flex-direction: column !important;
        align-items: stretch !important;
        height: auto !important;
    }
    
    div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }

    /* Fix extreme side paddings */
    .djf-glass-card {
        padding: 20px !important;
        border-radius: 24px !important;
    }

    /* Resize Graphs */
    .js-plotly-plot, .plotly, .plot-container, #trading-chart,
    [id*="-chart"] {
        height: 450px !important;
        min-height: 400px !important;
        width: 100% !important;
    }

    /* Shrink Mega Typography */
    h1, .page-title, [style*="fontSize: 32px"], [style*="fontSize: 28px"] {
        font-size: 22px !important;
        text-align: center !important;
        letter-spacing: 0 !important;
    }

    /* Expand UI controls */
    .djf-metal-btn {
        width: 100% !important;
        text-align: center !important;
        padding: 10px 24px !important;
        font-size: 14px !important;
        margin-bottom: 8px !important;
    }

    .djf-chart-header .djf-metal-btn {
        width: auto !important;
        padding: 4px 8px !important;
        font-size: 10px !important;
        margin-bottom: 0 !important;
        flex: 0 1 auto !important;
    }

    #trading-timeframe label {
        width: auto !important;
        flex: 1 1 auto !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #chart-mode-toggle {
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        margin-bottom: 0 !important;
        white-space: nowrap !important;
    }

    #trading-timeframe label span {
        white-space: nowrap !important;
    }

    #trading-timeframe {
        flex-wrap: wrap !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .djf-dropdown, .Select, .Select-control {
        width: 100% !important;
        min-width: unset !important;
    }
    
    /* Center the branding */
    #nav-logo-img {
        margin: 0 auto 12px auto !important;
        display: block !important;
    }
    
    /* Make metrics stack nicely */
    [style*="minWidth"] {
        min-width: unset !important;
    }
}


/* ── OVERRIDE DARK READER ARTIFACTS ── */
.djf-metal-btn span,
.djf-metal-btn img {
    background-color: transparent !important;
}

/* ==========================================================================
   APP-DRIVEN ARCHITECTURE (TRADEOFF SWITCHES)
   ========================================================================== */
.mobile-only { display: none !important; }
.desktop-only { display: block !important; }

@media screen and (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }

    /* Absolute Width Lockdown & Single-Column Override */
    * {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
    
    .djf-main-content, .djf-card, .grid-container, table, 
    .dashboard-flex-row-parent, .djf-responsive-row, .flex-row-desktop {
        width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important; /* Force vertical stack */
    }
    
    .djf-responsive-row > div, .dashboard-flex-row-parent > div, .flex-row-desktop > div {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .keep-row-mobile {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .djf-card, .djf-glass-card, [data-testid="mobile-regime-card"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Text Wrap Fix for Overflowing Paragraphs */
    .djf-card p, .djf-glass-card p, .djf-subtitle, .djf-card span {
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    h2, h3, .djf-subtitle, .djf-card-title {
        font-size: 14px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
    }

    #chart-mode-toggle {
        position: relative !important;
        top: 0 !important;
        right: 0 !important;
        margin-bottom: 12px !important;
    }

    /* Fix timeframe and radio buttons on mobile to not span 100% */
    .djf-responsive-row > div.dash-radioitems,
    #trading-timeframe {
        flex-direction: row !important;
    }

    .dash-radioitems label.djf-metal-btn,
    #trading-timeframe label.djf-metal-btn {
        width: auto !important;
        margin-bottom: 8px !important;
        flex: 1 1 auto;
        text-align: center;
    }

    /* Enlarge emojis/icons on mobile for better visibility */
    .djf-metal-btn img[src*="emoji"], .app-header img[src*="emoji"] {
        height: 22px !important;
        width: auto !important;
    }
    
    .mobile-bottom-nav img[src*="emoji"] {
        height: 28px !important;
        width: auto !important;
    }

    /* Root UI Canvas */
    body, html {
        background-color: var(--djf-bg-dark, #0d0e12);
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
        overflow-x: hidden;
    }
    
    .djf-page-wrapper {
        padding: 16px 12px !important;
    }

    /* Fixed Top App Bar */
    .app-header {
        position: fixed;
        top: 0; left: 0; right: 0; height: 80px;
        background-color: rgba(13, 14, 18, 0.9);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid #1f222e;
        display: flex; justify-content: space-between; align-items: center;
        padding: 0 16px; z-index: 2000;
    }
    .app-logo-fluid { height: 44px; width: auto; }

    /* The Main App Body Scroll Container */
    .app-scroller {
        position: absolute;
        top: 56px;
        left: 0; right: 0;
        /* Padding bottom buffer zone formula */
        padding: 14px 14px calc(76px + env(safe-area-inset-bottom, 16px)) 14px !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* Butter-smooth iOS momentum scroll */
    }

    /* Table Container Sandbox */
    .table-responsive-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Modern Card Layout */
    .app-card {
        background: var(--djf-card-bg, #161820);
        border-radius: 16px;
        padding: 16px;
        margin-bottom: 14px;
        border: 1px solid #202330;
    }
    .card-label-muted {
        font-size: 11px; font-weight: 600; color: #696e85;
        letter-spacing: 0.05em; display: block; margin-bottom: 12px;
    }

    /* Tappable Segment Grid */
    .app-segment-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .app-segment-grid label {
        background: #1f222f; padding: 14px; border-radius: 12px;
        text-align: center; font-size: 13px; font-weight: 500;
        border: 1px solid transparent; transition: background 0.2s;
    }
    .app-segment-grid input[type="radio"]:checked + label {
        border-color: var(--djf-brand-cyan, #00f2fe) !important;
        background: rgba(0, 242, 254, 0.08) !important;
        color: var(--djf-brand-cyan, #00f2fe);
    }

    /* Dynamic Padding Hotspots (No fixed heights) */
    .btn-padding-hotspot {
        padding: 8px 12px !important;
        height: auto !important;
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }

    /* Native App Horizontal Scroll Ribbon */
    .app-swipe-container {
        margin: 4px -14px 14px -14px;
        padding: 0 14px;
        overflow-x: auto; white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .app-swipe-container::-webkit-scrollbar { display: none; }
    .app-swipe-ribbon label {
        display: inline-flex; align-items: center; justify-content: center;
        padding: 10px 20px; margin-right: 8px; background: var(--djf-card-bg, #161820);
        border-radius: 20px; font-size: 13px; border: 1px solid #202330;
    }

    /* Mobile Chart Scaling */
    .chart-card-fluid { padding: 8px !important; }
    #trading-chart, #gnn-heatmap, .js-plotly-plot { 
        height: 400px !important; 
        width: 100% !important; 
    }

    /* Ultra-Premium Glassmorphic Navigation Bar */
    .app-bottom-tabbar {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        background: rgba(22, 24, 32, 0.94);
        backdrop-filter: blur(20px);
        border-top: 1px solid #202330;
        display: flex; justify-content: space-around;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 2000;
    }
    .tab-item {
        background: none; border: none; color: #696e85;
        font-size: 11px; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 4px; width: 25%;
    }
    .tab-item.active { color: var(--djf-brand-cyan, #00f2fe); font-weight: 600; }
}


/* --- MOBILE BOTTOM SHEET (NEWS) --- */
.djf-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85vh;
    background: rgba(15, 15, 20, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-top: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.8);
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    padding: 24px;
    padding-bottom: 100px;
}
.djf-bottom-sheet.open {
    transform: translateY(0);
}
.bottom-sheet-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.bottom-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}


/* --- HEATMAP SCROLL ANCHOR --- */
.djf-heatmap-container {
    position: relative;
}
.djf-heatmap-scroll-hint {
    position: absolute;
    top: 8px;
    right: 16px;
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    animation: pulse-hint 2s infinite;
    pointer-events: none;
    z-index: 10;
}
@keyframes pulse-hint {
    0% { opacity: 0.3; transform: translateX(0); }
    50% { opacity: 0.8; transform: translateX(3px); }
    100% { opacity: 0.3; transform: translateX(0); }
}