/* ══════════════════════════════════════════════════════════════════════════
   AEON — DESKTOP SHELL v3
   • Deep black / dark-charcoal GFT-style background
   • Sidebar spans full height, houses AEON brand at top
   • Topbar spans content column only (col 2)
   • Proxy strip is sticky header — no gap above it
   • All !important overrides to beat style.css
   ══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

@media (min-width: 1024px) {

  :root {
    --pt-reserve-h: 180px;   /* space reserved at the bottom of the Monitor
                                 tray for the sticky Liq Feed drawer — JS
                                 keeps this in sync with the drawer's actual
                                 collapsed/expanded height (proxy-tray init
                                 script, near toggleLiqDrawer/toggleProxyTray) */
    --sliq-notch-clip: none; /* puzzle-piece cutout in the Liq Feed drawer's
                                 top edge, matching the Monitor tray tongue's
                                 live position — JS-computed, see _ptSyncNotch() */
    --bg:        #03060B;   /* page background — deep obsidian */
    --surface:   linear-gradient(145deg,#0D131C 0%,#090E15 55%,#070B11 100%); /* card surfaces */
    --surface2:  #101722;   /* hover/inner */
    --surface3:  #0C1119;   /* deepest inset */
    --sidebar-bg:#050910;   /* sidebar */
    --cyan:      #6ea8f7;
    --cyan-dim:  rgba(110,168,247,0.06);
    --cyan-mid:  rgba(110,168,247,0.12);
    --cyan-glow: rgba(110,168,247,0.16);
    --green:     #10B981;
    --g-dim:     rgba(16,185,129,0.06);
    --g-glow:    rgba(16,185,129,0.14);
    --red:       #F43F5E;
    --r-dim:     rgba(244,63,94,0.06);
    --r-glow:    rgba(244,63,94,0.14);
    --amber:     #F59E0B;
    --blue:      #2563EB;
    --text:      #F1F5F9;
    --text2:     #94A3B8;
    --text3:     #64748B;
    --text4:     #475569;
    --border:    #111923;
    --border2:   #18212D;
    --border3:   rgba(255,255,255,0.16);
    --rail-w:    20vh;
    --topbar-h:  52px;
    --strip-h:   34px;
    --font:  'Inter', -apple-system, sans-serif;
    --mono:  'JetBrains Mono', monospace;
    --hdr:   'Inter', sans-serif;
    --r:   6px;
    --rl: 10px;

    /* ── AEON brand accent — purple/blue, reserved for logo + active controls ── */
    --aeon-purple: #7C3AED;
    --aeon-violet: #8B5CF6;
    --aeon-blue:   #2563EB;
    --aeon-glow:   rgba(124,58,237,0.25);
    --aeon-gradient: linear-gradient(135deg,#6D28D9,#8B5CF6,#2563EB);

    /* ── card gradient tiers ── */
    --card-primary: linear-gradient(145deg,#0D131C 0%,#090E15 55%,#070B11 100%);
    --card-hero:
      radial-gradient(circle at 15% 5%, rgba(40,104,180,.22), transparent 42%),
      linear-gradient(145deg,#0D141E 0%,#080D15 60%,#060A10 100%);
    --card-feed:  linear-gradient(135deg,#0C121A 0%,#080D14 100%);
    --card-lower: linear-gradient(145deg,#0C1119 0%,#080D14 100%);
  }

  *, *::before, *::after { box-sizing: border-box; }

  /* BODY — pure black so rounded corners are visible */
  body {
    background: #03060B !important;
    background-image: none !important;
    font-family: var(--font) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    min-height: unset !important;
    overflow: hidden !important;
  }
  body::before { display: none !important; }

  /* APP SHELL — pure black background so gaps between grid children show as black separator lines */
  .app {
    max-width: none !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: var(--rail-w) 1fr !important;
    grid-template-rows: var(--topbar-h) 1fr !important;
    /* Gap of 1px between grid children — the black app bg shows through as separator lines */
    gap: 1px !important;
    height: 100vh !important;
    overflow: hidden !important;
    position: fixed !important;
    inset: 0 !important;
    /* Pure black — shows between grid children as separation lines */
    background: #03060B !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* ── TOPBAR — col 2, row 1 ── */
  .topbar {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 !important;
    margin: 0 7px 0 7px !important;
    height: var(--topbar-h) !important;
    min-height: var(--topbar-h) !important;
    max-height: var(--topbar-h) !important;
    background: var(--sidebar-bg) !important;
    border: none !important;
    border-radius: 6px 6px 0 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    z-index: 200 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,0.055) !important;
  }

  /* Hide legacy brand block — lives in sidebar */
  .topbar > div:first-child { display: none !important; }
  .topbar .brand-name { display: none !important; }
  .topbar .brand-sub  { display: none !important; }
  .topbar .brand-ver  { display: none !important; }

  /* ── ctrl-row: full-width flex, left cluster + spacer + right groups ── */
  .topbar .ctrl-row {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
    height: var(--topbar-h) !important;
    position: relative !important;
  }
  /* Track texture — sits on the ctrl-row strip itself, behind the F&G bar,
     ticker, and pills that float on top of it. Adjust url() to the real
     path for trackbg.png if it lives somewhere other than alongside
     app.html. */
  .topbar .ctrl-row::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  .topbar .ctrl-row > * { flex-shrink: 0 !important; position: relative !important; z-index: 1 !important; }
  /* Spacer must grow to push right-side items to the far right */
  .topbar .ctrl-row > .topbar-spacer { flex: 1 1 auto !important; }
  /* Restore F&G to fixed-width (no longer needs to fill) */
  .topbar .ctrl-row > .topbar-fg { flex-grow: 1 !important; flex-shrink: 1 !important; }

  /* Hide legacy STATUS/ASSET/TIMEFRAME/MODE column labels (the old column-header divs) —
     scoped to direct children of ctrl-row that aren't our new named classes */
  .topbar .ctrl-row > div:not(.topbar-context):not(.topbar-spacer):not(.topbar-tf-group):not(.topbar-utils):not(.topbar-user-chip):not(.arkham-ticker):not(.topbar-statstrip) > div:first-child { display: none !important; }

  /* Hide asset seg (#coinSeg) and mode seg (#modeSeg) entirely —
     both controls live in the sidebar nav rail */
  .topbar #coinSeg { display: none !important; }
  .topbar #modeSeg { display: none !important; }

  /* Hide legacy account btn, username label, logout btn from ctrl-row —
     replaced by the new user chip */
  .topbar #topbarAccountBtn  { display: none !important; }
  .topbar #topbarUsername    { display: none !important; }
  /* Username text stays hidden — avatar initials only */
  .topbar #logoutTopbarBtn   { display: none !important; }

  /* ── LEFT CONTEXT CLUSTER — status badge + pair/mode badge ── */
  .topbar-context {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0px 0px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
  }
  .topbar-context-sep {
    width: 1px !important;
    height: 26px !important;
    background: var(--border) !important;
    flex-shrink: 0 !important;
  }

  /* ── PAIR BADGE — flat two-tone: outer dark matches the inactive
     timeframe track (#131824), inner panel matches the active timeframe
     pill's flat rendered fill (#27282a). No texture, no border. ── */
  .topbar-pair {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    height: 90% !important;
    padding: 3px 7px 3px 3px !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: #0d111d63 !important;
    box-shadow: 0 3px 7px rgba(0,0,0,0.5) !important;
  }
  /* recessed inner panel — content sits engraved inside this */
  .topbar-pair::before {
    content: '' !important;
    position: absolute !important;
    top: 2.5px !important; left: 2.5px !important; right: 2.5px !important; bottom: 2.5px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.018) !important;
    z-index: 0 !important;
  }
  .topbar-pair > * {
    position: relative !important;
    z-index: 1 !important;
  }
  /* Icon container — hidden visually but kept in DOM for JS compatibility */
  .topbar-pair-icon {
    display: none !important;
  }

  .topbar-pair-dot,
  #dot {
    display: none !important;
  }
  .topbar-pair-text {
    font-family: var(--mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    color: #e8eaec !important;
    opacity: 0.92 !important;
    text-shadow: 0 0 5px rgba(255,255,255,0.15) !important;
    white-space: nowrap !important;
    padding: 0 5px !important;
  }
  .topbar-pair-sep {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    color: var(--text3) !important;
  }
  .topbar-pair-mode {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    color: #745fee !important;
    opacity: 0.65 !important;
    white-space: nowrap !important;
    background: #101828 !important;
    height: 33px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    border-radius: 6px !important;
  }

  /* Hide the now-unused status badge and its separator */
  .topbar-status      { display: none !important; }
  .topbar-context-sep { display: none !important; }
  /* #dot is inside .topbar-pair as the live proxy/connection dot — visible and pulsing */
  /* Legacy pill — still hidden */
  .topbar .ctrl-row .pill { display: none !important; }


  /* ══════════════════════════════════════════════════
     TOPBAR — DIFFERENTIAL CAPSULE STYLING
     Each group is a distinct instrument-panel readout:
     unique tint, inset depth, border character.
  ══════════════════════════════════════════════════ */

  /* Strip out the flat left-border dividers — capsules define their own edges */
  .topbar-exchanges,
  .topbar-fg,
  .topbar-tf-group,
  .topbar-utils,
  .topbar-user-chip {
    border-left: none !important;
  }

  /* ── EXCHANGES — cool blue-grey feed status cluster ── */
  .topbar-exchanges {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
    position: relative !important;
  }
  /* Subtle separator lines between exchange context and F&G */
  .topbar-exchanges::after {
    content: '' !important;
    position: absolute !important;
    right: 0 !important;
    top: 20% !important;
    height: 60% !important;
    width: 1px !important;
    background: var(--border) !important;
  }
  .topbar-exchanges .pc-exc-pill {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 8.5px !important;
    font-family: var(--mono) !important;
    letter-spacing: 0.05em !important;
    color: rgba(90,101,118,0.7) !important;
    padding: 3px 7px !important;
    border-radius: 3px !important;
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    transition: color 0.15s, background 0.15s !important;
  }
  /* Connected state — JS sets a class or inline colour on the dot */
  .topbar-exchanges .pc-exc-pill:has(.pc-exc-dot[style*="00d"]),
  .topbar-exchanges .pc-exc-pill:has(.pc-exc-dot[style*="green"]) {
    color: rgba(155,170,192,0.75) !important;
  }
  .topbar-exchanges .pc-exc-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    background: rgba(90,101,118,0.5) !important;
  }

  /* ── TOPBAR LAYOUT REORDER ──
     Order: [context] [exchanges] [spacer grows] [F&G] [TF] [utils] [user]
     Spacer fills the middle; F&G, TF, utils, user are all pushed to far right.
  ── */
  .topbar-spacer {
    display: none !important;
    flex: 0 !important;
    width: 0 !important;
    order: 3 !important;
  }
  .topbar-context      { order: 1 !important; }
  .topbar-exchanges    { order: 2 !important; }
  .topbar-fg           { order: 4 !important; margin-left: 0 !important; flex: 1 1 auto !important; }
  .topbar-tf-group     { order: 5 !important; }
  .topbar-utils        { order: 6 !important; }
  .topbar-user-chip    { order: 7 !important; }

  /* ── F&G — amber sentiment instrument, fills remaining space ── */
  .topbar-fg {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 16px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    flex: 1 1 auto !important;
    margin: 0 2px !important;
    position: relative !important;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.025) 0%,
      transparent 100%) !important;
    border-top: 1px solid rgb(255 255 255 / 0%) !important;
    border-bottom: 1px solid rgb(255 255 255 / 0%) !important;
    box-shadow: none !important;
  }
  /* thin separator lines each side */
  .topbar-fg::before,
  .topbar-fg::after {
    content: '' !important;
    position: absolute !important;
    top: 20% !important;
    height: 60% !important;
    width: 1px !important;
    background: var(--border2) !important;
  }
  .topbar-fg::before { left: 0 !important; }
  .topbar-fg::after  { right: 0 !important; }

  .topbar-fg .fg-lbl {
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    letter-spacing: 0.16em !important;
    color: var(--text3) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .topbar-fg .fg-track {
    flex: 1 1 auto !important;
    min-width: 80px !important;
    height: 20px !important;
    border-radius: 5px !important;
    background:
      repeating-linear-gradient(90deg,
        rgba(4,5,6,0.92) 0px, rgba(4,5,6,0.92) 2px,
        transparent 2px, transparent 10px),
      linear-gradient(90deg,
        var(--red) 0%,
        var(--amber) 50%,
        var(--cyan) 100%) !important;
    opacity: .55 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.7) !important;
    position: relative !important;
  }
  /* ── Northern Sky theme: F&G bar goes monochrome blue, building from a
     faint low-opacity blue up to a deep vibrant blue at the greed end,
     instead of the default red→amber→cyan fear/greed spectrum. ── */
  #swingMode.fg-theme-northern-sky .topbar-fg .fg-track,
  body.fg-theme-northern-sky .topbar-fg .fg-track {
    background:
      repeating-linear-gradient(90deg,
        rgba(4,5,6,0.92) 0px, rgba(4,5,6,0.92) 2px,
        transparent 2px, transparent 10px),
      linear-gradient(90deg,
        rgba(59,130,246,0.10) 0%,
        rgba(59,130,246,0.45) 45%,
        #1d4ed8 75%,
        #0b2f7a 100%) !important;
  }
  .topbar-fg .fg-thumb {
    position: absolute !important;
    top: 2px !important;
    bottom: 2px !important;
    transform: translateX(-50%) !important;
    width: 8px !important;
    height: auto !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #f3ead0, var(--amber)) !important;
    border: 1px solid rgba(255,255,255,.55) !important;
    box-shadow: 0 0 6px 1px rgba(217,164,65,.35) !important;
    opacity: 1 !important;
  }
  .topbar-fg .fg-num {
    font-family: var(--mono) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--amber) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    letter-spacing: -0.02em !important;
    flex-shrink: 0 !important;
    text-shadow: none !important;
  }
  .topbar-fg .fg-name {
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    font-weight: 500 !important;
    color: var(--text3) !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── TIMEFRAME GROUP — cyan control capsule ── */
  .topbar-tf-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 0 12px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
    position: relative !important;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.025) 0%,
      transparent 100%) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: 1px solid rgba(255,255,255,0.02) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.03),
      inset 0 -1px 0 rgba(0,0,0,0.12) !important;
  }
  .topbar-tf-group::before,
  .topbar-tf-group::after {
    content: '' !important;
    position: absolute !important;
    top: 20% !important;
    height: 60% !important;
    width: 1px !important;
    background: rgba(255,255,255,0.08) !important;
  }
  .topbar-tf-group::before { left: 0 !important; }
  .topbar-tf-group::after  { right: 0 !important; }

  .topbar-tf-label {
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    letter-spacing: 0.2em !important;
    color: rgba(255,255,255,0.28) !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
  }
  .topbar #tfSeg.seg {
    height: 30px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(0,0,0,0.25) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 2px !important;
    gap: 2px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.35) !important;
  }
  .topbar #tfSeg .sb {
    height: 100% !important;
    padding: 0 10px !important;
    font-family: var(--mono) !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    color: rgba(255,255,255,0.4) !important;
    border: none !important;
    border-radius: 4px !important;
    background: none !important;
    text-shadow: none !important;
    display: flex !important;
    align-items: center !important;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s !important;
  }
  .topbar #tfSeg .sb.on {
    color: #eef2f6 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.06)) !important;
    text-shadow: none !important;
    box-shadow:
      0 1px 2px rgba(0,0,0,0.3),
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 0 0 1px rgba(255,255,255,0.05) !important;
  }
  .topbar #tfSeg .sb:hover:not(.on) {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.65) !important;
  }

  /* ── HIDE the proxy strip entirely ── */
  .proxy-card { display: none !important; }



  /* ── UTILITY ICON CLUSTER — individual floating icon squares ── */
  .topbar-utils {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 10px !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    margin: 0 2px !important;
    position: relative !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 100%) !important;
  }

  /* Each icon button — individual floating tile */
  .topbar-utils button:not(.wallet-hdr-btn) {
    width: 26px !important;
    height: 26px !important;
    border-radius: 5px !important;
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    color: var(--text3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.15) !important;
  }
  .topbar-utils button:not(.wallet-hdr-btn):hover {
    background: rgba(59,130,246,0.06) !important;
    border-color: rgba(59,130,246,0.2) !important;
    color: var(--cyan) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.05),
      0 0 8px rgba(59,130,246,0.07) !important;
  }
  /* API key btn — removed, functionality now lives in the unified
     settings gear panel (#settingsDd). Rule intentionally deleted. */

  /* ── USER CHIP — retired as a visible element (account access now
     lives in the unified settings gear panel). Kept in the DOM only
     so _topbarShowUser() JS still has somewhere to write username data
     without erroring, matching the existing #topbarAccountBtn /
     #logoutTopbarBtn "hidden legacy" convention already in this file. ── */
  .topbar-user-chip {
    display: none !important;
  }
  .topbar-user-name {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.06em !important;
    color: rgba(59,130,246,0.5) !important;
    white-space: nowrap !important;
    max-width: 72px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .topbar-user-chevron {
    display: none !important;
  }

  /* Legacy .pill wrapper (old status pill) — hidden, replaced by .topbar-status */
  .topbar .ctrl-row .pill { display: none !important; }

  /* SIDEBAR — col 1, full height — spans both grid rows */
  .aeon-nav-rail {
    grid-column: 1 !important;
    grid-row: 1 / -1 !important;
    width: var(--rail-w) !important;
    height: 100% !important;
    background: var(--sidebar-bg) !important;
    /* No border needed — app gap:1px black shows as separator on right side */
    border: none !important;
    /* Left + top + bottom corners rounded — visible against pure black body */
    border-radius: 10px 0 0 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 6px 6px !important;
    gap: 0 !important;
    z-index: 300 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    /* Right edge separation line via box-shadow (doesn't affect layout) */
    box-shadow: 1px 0 0 rgba(255,255,255,0.055) !important;
  }

  /* Sidebar brand (GFT-style) */
  .aeon-nav-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 3px 0 4px !important;
    height: 45px !important;
    min-height: 45px !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    background: rgba(255,255,255,0.018) !important;
    border-radius: 8px !important;
    margin: 4px 0 4px 0 !important;
    width: 100% !important;
    transition: background 0.15s !important;
  }
  .aeon-nav-brand:hover { background: rgba(255,255,255,0.025) !important; }
  .aeon-nav-brand-logo {
    position: relative !important;
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #131824 !important;
    border-radius: 9px !important;
    box-sizing: border-box !important;
  }
  .aeon-nav-brand-logo svg { width: 28px !important; height: 28px !important; }
  .aeon-nav-brand-logo img { width: 28px !important; height: 28px !important; object-fit: contain !important; display: block !important; }
  .aeon-nav-brand-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .aeon-nav-brand-name {
    font-family: 'Orbitron', var(--font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    color: var(--text) !important;
    line-height: 1 !important;
    text-shadow: none !important;
    animation: none !important;
  }
  .aeon-nav-brand-ver {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: rgba(59,130,246,0.45) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    background: rgba(59,130,246,0.07) !important;
    border: 1px solid rgba(59,130,246,0.12) !important;
    border-radius: 3px !important;
    padding: 1px 4px !important;
    display: inline-block !important;
  }

  /* ── SECTION LABELS ── */
  .anr-section-label {
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    color: rgba(90,101,117,0.7) !important;
    padding: 10px 14px 4px !important;
    flex-shrink: 0 !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  /* Replace // with a subtle dot-dash marker */
  .anr-section-label > span:first-child,
  .anr-section-label:not([style*="justify-content"]) {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .anr-section-label::before {
    content: '' !important;
    display: inline-block !important;
    width: 3px !important;
    height: 3px !important;
    border-radius: 50% !important;
    background: rgba(59,130,246,0.4) !important;
    flex-shrink: 0 !important;
  }

  /* ── NAV BTN ICON + LABEL ── */
  .anr-btn-icon {
    width: 18px !important;
    height: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    color: inherit !important;
    opacity: 0.75 !important;
    transition: opacity 0.13s !important;
  }
  .aeon-nav-btn:hover .anr-btn-icon,
  .aeon-nav-btn.active .anr-btn-icon { opacity: 1 !important; }
  .anr-btn-label {
    font-family: var(--font) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ── NAV SECTION GROUP WRAPPERS ── */
  /* Mode, Tools, Markets, Watchlist, System each get a recessed group surface */
  .anr-nav-group {
    background: rgba(255,255,255,0.018) !important;
    border-radius: 8px !important;
    margin: 0 0 4px !important;
    padding: 3px 0 4px !important;
    flex-shrink: 0 !important;
  }
  /* Watchlist group stretches to fill remaining space */
  .anr-nav-group.anr-nav-group--flex {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin-bottom: 4px !important;
  }
  /* System group sits at bottom, slightly more recessed */
  .anr-nav-group.anr-nav-group--system {
    background: rgba(0,0,0,0.2) !important;
    margin-bottom: 0 !important;
  }
  .anr-nav-group .anr-section-label {
    padding-top: 6px !important;
    padding-bottom: 3px !important;
  }

  /* ── MARKETS TOKEN ROWS — GFT compact two-line layout ── */
  .anr-markets {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 6px !important;
  }
  .anr-token {
    display: grid !important;
    grid-template-columns: 28px 1fr auto !important;
    align-items: center !important;
    gap: 0 8px !important;
    padding: 5px 6px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.12s !important;
    position: relative !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .anr-token:last-child { border-bottom: 1px solid transparent !important; }
  .anr-token:hover { background: rgba(255,255,255,0.05) !important; }
  .anr-token.active {
    background: linear-gradient(135deg, rgba(109,40,217,0.14), rgba(37,99,235,0.07)) !important;
    border-color: transparent !important;
    border-bottom-color: var(--border) !important;
  }
  .anr-token.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; top: 15% !important;
    height: 70% !important; width: 3px !important;
    background: var(--aeon-gradient) !important;
    border-radius: 0 2px 2px 0 !important;
    box-shadow: 0 0 8px var(--aeon-glow) !important;
  }

  /* Icon — 28px circular coin logo */
  .anr-token-icon {
    width: 28px !important; height: 28px !important;
    border-radius: 50% !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; overflow: hidden !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;
    grid-row: 1 / 3 !important;
  }
  .anr-token-icon svg { width: 28px !important; height: 28px !important; display: block !important; }

  /* Info block: sym top-left, price bottom-left */
  .anr-token-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .anr-token-sym {
    font-family: var(--font) !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }
  .anr-token.active .anr-token-sym { color: var(--aeon-violet) !important; }
  .anr-token-pair {
    font-size: 8px !important;
    font-weight: 400 !important;
    color: var(--text3) !important;
    letter-spacing: 0.04em !important;
    margin-left: 3px !important;
    font-family: var(--mono) !important;
  }
  .anr-token-price {
    font-family: var(--mono) !important;
    font-size: 9.5px !important;
    font-weight: 500 !important;
    color: var(--text2) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Change % — pill badge style */
  .anr-token-chg {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: var(--text2) !important;
    text-align: right !important;
    white-space: nowrap !important;
    align-self: center !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.04) !important;
    letter-spacing: 0.01em !important;
  }
  .anr-token-chg.up {
    color: var(--green) !important;
    background: rgba(16,185,129,0.1) !important;
  }
  .anr-token-chg.dn {
    color: var(--red) !important;
    background: rgba(244,63,94,0.1) !important;
  }

  /* Nav buttons */
  .aeon-nav-btn {
    width: 100% !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    padding: 0 10px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    color: var(--text2) !important;
    border: none !important;
    background: transparent !important;
    transition: all 0.13s ease !important;
    position: relative !important;
    text-decoration: none !important;
    font-family: var(--font) !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-align: left !important;
  }
  .aeon-nav-btn::after { display: none !important; content: none !important; }
  .aeon-nav-btn:hover {
    color: var(--text) !important;
    background: rgba(255,255,255,0.06) !important;
  }
  .aeon-nav-btn.active {
    color: var(--aeon-violet) !important;
    background: linear-gradient(135deg, rgba(109,40,217,0.16), rgba(37,99,235,0.08)) !important;
    font-weight: 600 !important;
  }
  .aeon-nav-btn.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important; right: auto !important;
    top: 18% !important; height: 64% !important; width: 3px !important;
    background: var(--aeon-gradient) !important;
    border-radius: 0 2px 2px 0 !important;
    box-shadow: 0 0 8px var(--aeon-glow) !important;
    display: block !important;
  }
  /* System section buttons — recede as utility tier */
  .anr-nav-group--system .aeon-nav-btn {
    color: var(--text3) !important;
    font-size: 12px !important;
  }
  .anr-nav-group--system .aeon-nav-btn:hover {
    color: var(--text2) !important;
    background: rgba(255,255,255,0.04) !important;
  }
  .anr-nav-group--system .anr-btn-icon {
    opacity: 0.5 !important;
  }
  .anr-nav-group--system .aeon-nav-btn:hover .anr-btn-icon {
    opacity: 0.75 !important;
  }

  .aeon-nav-divider {
    width: calc(100% - 16px) !important;
    height: 1px !important;
    background: var(--border) !important;
    margin: 4px 8px !important;
    flex-shrink: 0 !important;
  }

  /* ── SIDEBAR WATCHLIST — GFT compact rows ── */
  .anr-watchlist {
    display: flex !important;
    flex-direction: column !important;
    padding: 0 6px !important;
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,0.05) transparent !important;
  }
  .anr-watchlist::-webkit-scrollbar { width: 2px !important; }
  .anr-watchlist::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07) !important; border-radius: 2px !important; }

  .anr-wl-row {
    display: grid !important;
    grid-template-columns: 24px 1fr auto !important;
    align-items: center !important;
    gap: 0 7px !important;
    padding: 5px 6px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background 0.11s !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .anr-wl-row:last-child { border-bottom: none !important; }
  .anr-wl-row:hover { background: rgba(255,255,255,0.06) !important; }

  .anr-wl-icon {
    width: 24px !important; height: 24px !important;
    border-radius: 50% !important; flex-shrink: 0 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-family: var(--font) !important; font-size: 8px !important;
    font-weight: 800 !important; color: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
    letter-spacing: 0 !important;
  }
  .anr-wl-info {
    min-width: 0 !important;
    display: flex !important; flex-direction: column !important; gap: 1px !important;
    overflow: hidden !important;
  }
  .anr-wl-sym {
    font-family: var(--font) !important; font-size: 12px !important;
    font-weight: 700 !important; color: var(--text) !important;
    line-height: 1.1 !important; white-space: nowrap !important;
  }
  .anr-wl-price {
    font-family: var(--mono) !important; font-size: 9px !important;
    font-weight: 500 !important; color: var(--text) !important;
    line-height: 1 !important; white-space: nowrap !important;
    overflow: hidden !important; text-overflow: ellipsis !important;
    opacity: 0.6 !important;
  }
  /* Watchlist change — pill badge matching markets section */
  .anr-wl-chg {
    font-family: var(--mono) !important; font-size: 9px !important;
    font-weight: 700 !important; color: var(--text2) !important;
    text-align: right !important; white-space: nowrap !important;
    align-self: center !important;
    padding: 2px 5px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.04) !important;
    letter-spacing: 0.01em !important;
  }
  .anr-wl-chg.up {
    color: var(--green) !important;
    background: rgba(16,185,129,0.1) !important;
  }
  .anr-wl-chg.dn {
    color: var(--red) !important;
    background: rgba(244,63,94,0.1) !important;
  }
  .anr-wl-empty {
    font-family: var(--mono) !important; font-size: 9px !important;
    color: var(--text3) !important; padding: 8px 6px !important; letter-spacing: 0.06em !important;
  }

  .aeon-nav-spacer { flex: 0 0 auto !important; min-height: 6px !important; }

  /* Mini token ticker */
  .aeon-nav-tokens { padding: 10px 12px 8px !important; }
  .ant-label {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    letter-spacing: 0.12em !important;
    color: var(--text3) !important;
    margin-bottom: 8px !important;
  }
  .ant-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .ant-row:last-child { border-bottom: none !important; }
  .ant-sym {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--text2) !important;
    width: 30px !important;
    flex-shrink: 0 !important;
  }
  .ant-price { font-family: var(--mono) !important; font-size: 10px !important; color: var(--text) !important; flex: 1 !important; }
  .ant-chg   { font-family: var(--mono) !important; font-size: 9px !important;  font-weight: 600 !important; }

  /* DESKTOP BODY — col 2, row 2 — matches topbar 2px side margins */
  .aeon-desktop-body {
    grid-column: 2 !important;
    grid-row: 2 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    scroll-behavior: smooth !important;
    isolation: isolate !important;
    background: var(--bg) !important;
    position: relative !important;
    z-index: 1 !important;
    margin: 0 7px 7px 7px !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: inset -1px 0 0 rgba(255,255,255,0.055), inset 0 -1px 0 rgba(255,255,255,0.055) !important;
  }
  .aeon-desktop-body::-webkit-scrollbar { width: 5px !important; }
  .aeon-desktop-body::-webkit-scrollbar-track { background: rgba(255,255,255,0.03) !important; }
  .aeon-desktop-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08) !important; border-radius: 3px !important; }
  .aeon-desktop-body::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.45) !important; }

  /* SWING/SCALP WRAPPERS — kill wallpaper, zero top padding */
  #swingMode,
  #scalpMode {
    --sw-surface:  #0c0d11;
    --sw-surface2: #131824;
    --sw-surface3: #161920;
    --sw-border:   rgba(255,255,255,0.055);
    --sw-border2:  rgba(255,255,255,0.09);
    --sw-border3:  rgba(255,255,255,0.12);
    --sw-text:     rgba(200,208,220,1);
    --sw-text2:    rgba(90,101,117,1);
    --sw-text3:    rgba(46,53,64,1);
    --sw-radius:   10px;
    --sw-cyan:     rgba(59,130,246,1);
    --sw-cyan-dim: rgba(59,130,246,0.06);
    --sw-cyan-mid: rgba(59,130,246,0.12);
    --sw-cyan-glow:rgba(59,130,246,0.20);
    --sw-cyan-border: rgba(255,255,255,0.09);
    padding: 0 20px 0 !important;
    position: relative !important;
    isolation: isolate !important;
    background: #0d111d63 !important;
  }
  /* Kill style.css wallpaper/grid pseudo-elements */
  #swingMode::before { display: none !important; }
  #swingMode::after  { display: none !important; }

  #swingMode > *:not(#swStarfield):not(.sliq-drawer),
  #scalpMode > *:not(#swStarfield) {
    position: relative !important;
    z-index: 1 !important;
  }

  /* ── SWING MODE — floating side dock (4 square icon buttons) ──
     Fixed to the viewport's right edge, vertically centered, sitting just
     inside the native body scrollbar. Desktop swing mode only — reuses the
     same body.swing-desktop-active gate as .proxy-tray. */
  .sw-side-dock,
  body .sw-side-dock,
  html body .sw-side-dock {
    position: fixed !important;
    top: 50% !important;
    right: 15px !important;
    transform: translateY(-50%) !important;
    z-index: 10001 !important;
    display: none !important;
    flex-direction: column !important;
    gap: 8px !important;
    pointer-events: none !important;
  }
  body.swing-desktop-active .sw-side-dock {
    display: flex !important;
  }
  .sw-dock-btn {
    pointer-events: auto !important;
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(9,11,14,0.55) !important;
    border: 1px solid rgba(59,130,246,0.18) !important;
    border-radius: 6px !important;
    color: rgba(226,232,240,0.65) !important;
    cursor: pointer !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.35) !important;
    transition: background 0.15s ease, border-color 0.15s ease,
                color 0.15s ease, box-shadow 0.15s ease !important;
  }
  .sw-dock-btn:hover {
    background: rgba(15,18,23,0.75) !important;
    border-color: rgba(59,130,246,0.45) !important;
    color: rgba(59,130,246,0.95) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(59,130,246,0.08) !important;
  }
  .sw-dock-btn:active {
    background: rgba(59,130,246,0.15) !important;
  }
  .sw-dock-btn svg {
    display: block !important;
    opacity: 0.9 !important;
  }
  .sw-dock-btn-active {
    background: rgba(59,130,246,0.18) !important;
    border-color: rgba(59,130,246,0.75) !important;
    color: rgba(147,197,253,1) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(59,130,246,0.25) !important;
  }
  .sw-dock-btn-active svg {
    opacity: 1 !important;
  }

  /* ── SWING MODE — section-switcher visibility (driven by swSetSection) ── */
  .sw-sec-hidden {
    display: none !important;
  }

  /* ── PROXY TRAY — pull-down projector screen overlay ── */
  /* Tray: position:fixed at body level — outside all stacking contexts.
     Aligns with aeon-desktop-body column: left=rail+8px, right=8px, top=topbar-h */
  .proxy-tray {
    position: fixed !important;
    top: var(--topbar-h) !important;
    left: calc(var(--rail-w) + 8px) !important;
    right: 8px !important;
    z-index: 10001 !important;
    background: #03060b !important;
    border-bottom: 2px solid rgba(0,0,0,0.7) !important;
    border-radius: 0 0 6px 6px !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.7) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    pointer-events: none !important;
    /* Collapsed: tray body hidden, only the tab protrudes */
    height: 0 !important;
    transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.25s ease,
                box-shadow 0.25s ease !important;
    will-change: height !important;
    animation: none !important;
    /* Hidden when swing mode is not active */
    display: none !important;
  }
  /* Only shown in desktop swing mode */
  body.swing-desktop-active .proxy-tray {
    display: block !important;
  }
  .proxy-tray.pt-open {
    height: calc(100vh - var(--topbar-h) - var(--pt-reserve-h, 180px)) !important;
    overflow: visible !important;
    pointer-events: auto !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.75) !important;
  }
  .proxy-tray.pt-open .proxy-tray-body {
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Body clips itself — tray stays overflow:visible so tongue protrudes below */
    height: calc(100% - 1px) !important;
    /* Contain body within tray bounds visually */
  }
  /* Handle is always absolute bottom:0 — no open-state override needed */

  .proxy-tray.pt-dragging {
    transition: none !important;
  }

  /* Handle bar — always visible, drag or click to pull */
  /* Handle: absolutely positioned at bottom-centre of tray — tongue always at tray edge */
  .proxy-tray-handle {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    height: 0 !important;
    width: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    background: #090b0e !important;
  }

  /* Tongue tab — position:absolute relative to handle which is at tray bottom-centre.
     Always physically attached to the tray bottom edge. Pure CSS, no JS needed. */
  .pt-tab {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 0 16px !important;
    height: 24px !important;
    background: #101317e0 !important;
    border-left: 2px solid rgba(0,0,0,0.7) !important;
    border-right: 2px solid rgba(0,0,0,0.7) !important;
    border-bottom: 2px solid rgba(0,0,0,0.7) !important;
    border-radius: 0 0 8px 8px !important;
    cursor: ns-resize !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 2px 8px rgba(59,130,246,0.042) !important;
    transition: box-shadow 0.15s !important;
    pointer-events: auto !important;
    z-index: 10002 !important;
    overflow: hidden !important; /* clip the texture image to the tab's rounded corners */
  }
  /* Abstract white texture — sits between the solid tint and the content,
     faded down via opacity so it reads as a subtle semi-transparent overlay
     rather than a loud full-strength image. Adjust the url() path to wherever
     wtbg.jpg actually lives (e.g. /assets/wtbg.jpg, ./img/wtbg.jpg, etc). */
  .pt-tab::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    opacity: 0.12 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }
  /* Keep icon/label/caret above the texture layer */
  .pt-tab-icon, .pt-tab-label, .pt-caret {
    position: relative !important;
    z-index: 1 !important;
  }
  .pt-tab:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 2px 14px rgba(59,130,246,0.084) !important;
  }
  /* MM icon inside the tongue */
  .pt-tab-icon {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    opacity: 0.7 !important;
    transition: opacity 0.15s !important;
  }
  .pt-tab:hover .pt-tab-icon { opacity: 1 !important; }
  /* Label */
  .pt-tab-label {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: rgba(59,130,246,0.65) !important;
    text-transform: uppercase !important;
    transition: color 0.15s !important;
  }
  .pt-tab:hover .pt-tab-label { color: rgba(59,130,246,0.9) !important; }
  .pt-caret {
    flex-shrink: 0 !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
    opacity: 0.55 !important;
  }
  .proxy-tray.pt-open .pt-caret { transform: rotate(180deg) !important; }

  /* Tray body — hidden by default, JS shows it when open */
  .proxy-tray-body {
    display: none !important;   /* JS overrides to '' when open */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-top: 1px solid rgba(59,130,246,0.1) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .proxy-tray-body::-webkit-scrollbar { width: 3px !important; }
  .proxy-tray-body::-webkit-scrollbar-track { background: transparent !important; }
  .proxy-tray-body::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.2) !important; border-radius: 2px !important; }

  /* MM content inside the tray — full-width, no side panel constraints */
  .proxy-tray-body .mm-panel {
    position: static !important;
    width: 100% !important;
    transform: none !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .proxy-tray-body .mm-header {
    border-radius: 0 !important;
    background: #090b0e !important;
  }
  .proxy-tray-body .mm-content {
    /* Override the fixed-height scroll container — the tray body scrolls instead */
    overflow: visible !important;
    flex: none !important;
  }

  /* Hide the old proxy-card if it somehow still renders */
  .proxy-card { display: none !important; }

  .pc-block {
    padding: 0 12px !important;
    height: var(--strip-h) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    border-right: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }
  .pc-block.fg-block {
    flex: 1 !important; justify-content: flex-end !important;
    border-right: none !important; gap: 10px !important; padding-right: 14px !important;
  }
  .pc-proxy-tag { font-size: 10px !important; letter-spacing: 0.08em !important; font-family: var(--mono) !important; font-weight: 500 !important; color: var(--text3) !important; }
  .pc-status    { font-size: 10px !important; font-family: var(--mono) !important; color: var(--green) !important; letter-spacing: 0.06em !important; font-weight: 600 !important; }
  .pc-exc-pill  { font-size: 10px !important; font-family: var(--mono) !important; color: var(--text2) !important; letter-spacing: 0.03em !important; }
  /* F&G number: more prominent in the strip */
  .fg-num  { font-size: 15px !important; font-family: var(--mono) !important; font-weight: 700 !important; color: var(--amber) !important; }
  .fg-name { font-size: 9px !important; font-family: var(--mono) !important; font-weight: 500 !important; color: var(--text2) !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
  .fg-impl { display: none !important; }
  .pc-url  { display: none !important; }

  /* CARDS — dark neutral, no cyan tint, no blur */
  .card {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 18px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .card::after { display: none !important; }

  #swingMode .mf-card, #swingMode .liq-card, #swingMode .htf-cell,
  #swingMode .htf-cell-compact, #swingMode .intel-panel, #swingMode .hero,
  #swingMode #htfCard, #swingMode #watchlistPanel, #swingMode #momentumWrap,
  #swingMode .chart-card-main, #swingMode .chart-side-card, #swingMode .card,
  #swingMode .macro-card, #swingMode .mx-panel, #swingMode .sig-matrix,
  #swingMode .rr-scanner, #swingMode .pos-calc, #swingMode .price-session-row {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #swingMode .mc {
    background: var(--surface) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #swingMode [style*="linear-gradient(160deg,rgba(5,8,16"] {
    background: var(--surface) !important;
  }

  /* SECTION HEADERS */
  #swingMode .sec {
    margin: 20px 0 10px !important;
    font-size: 10px !important;
    font-family: var(--mono) !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    color: var(--text3) !important;
    text-transform: uppercase !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #swingMode .sec::before {
    content: '//' !important;
    font-size: 12px !important; font-weight: 400 !important;
    color: var(--text3) !important; display: block !important;
    width: auto !important; height: auto !important;
    background: none !important; border-radius: 0 !important;
    opacity: 0.7 !important; flex-shrink: 0 !important; letter-spacing: 0 !important;
  }
  #swingMode .sec::after {
    content: '' !important; flex: 1 !important; height: 1px !important;
    background: var(--border) !important; opacity: 1 !important;
  }

  /* PRICE NUM */
  .price-num {
    font-size: 44px !important; font-family: var(--font) !important;
    font-weight: 700 !important; letter-spacing: -0.03em !important;
    color: var(--text) !important; text-shadow: none !important;
  }

  /* HERO — Prediction Signal Matrix: professional text hierarchy */
  .hero {
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: 10px !important; padding: 0 !important;
    box-shadow: none !important; overflow: hidden !important;
  }
  .hero::before { display: none !important; }
  .hero::after  { display: none !important; }
  /* Tag line: small, uppercase, spaced label */
  .hero-tag {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    color: var(--text2) !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    opacity: 0.75 !important;
  }
  .hero-tag::before { display: none !important; }
  /* Main signal word: large, dominant, clean */
  .hero-sig {
    font-family: var(--font) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
  }
  /* HOLD state: amber (informational pause) — not dim grey */
  .hero-sig.hold {
    color: var(--amber) !important;
    text-shadow: none !important;
  }
  /* BUY: green */
  .hero-sig.buy {
    color: var(--green) !important;
    text-shadow: none !important;
  }
  /* SELL: red */
  .hero-sig.sell {
    color: var(--red) !important;
    text-shadow: none !important;
  }
  /* Sub text: readable detail line */
  .hero-sub {
    font-size: 9.5px !important;
    line-height: 1.65 !important;
    margin-top: 10px !important;
    color: var(--text2) !important;
    font-family: var(--mono) !important;
    letter-spacing: 0.03em !important;
  }
  /* Score ring: well-proportioned */
  .hero-ring { width: 80px !important; height: 80px !important; flex-shrink: 0 !important; }
  .hero-ring-num { font-size: 20px !important; }
  /* Hero top section padding — balanced visual weight */
  .hero > div:first-child { padding: 14px 16px 12px !important; gap: 14px !important; align-items: flex-start !important; }

  /* WATCHLIST */
  #watchlistPanel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden !important;
  }
  /* ══ WATCHLIST — intentional 5-col layout ══
     Col 1: sym+exchange  Col 2: sparkline  Col 3: price  Col 4: 24h%  Col 5: vs btc
     All widths fixed so nothing clips at 300px panel width                          */
  .wl-row {
    display: grid !important;
    grid-template-columns: 1fr 52px 76px 48px 44px !important;
    padding: 0 8px 0 10px !important;
    border-bottom: 1px solid var(--border) !important;
    height: 38px !important;
    align-items: center !important;
    transition: background 0.12s !important;
    gap: 0 !important;
  }
  .wl-row:hover { background: rgba(255,255,255,0.025) !important; }

  /* Symbol cell: two-line layout — name + exchange badge */
  .wl-sym {
    font-family: var(--font) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    letter-spacing: 0.01em !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Exchange badge next to sym */
  .wl-badge {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.06em !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
    margin-left: 4px !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--text3) !important;
    vertical-align: middle !important;
    font-weight: 400 !important;
  }

  /* Sparkline: contained in its 52px column */
  .wl-spark, .wl-row canvas {
    max-width: 52px !important;
    width: 52px !important;
    height: 28px !important;
    display: block !important;
  }

  /* Price: right-aligned, no min-width (grid column controls width) */
  .wl-price {
    font-family: var(--mono) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-align: right !important;
    min-width: 0 !important;
    color: var(--text) !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* 24H change: right-aligned */
  .wl-chg {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-align: right !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  /* VS BTC: right-aligned, muted */
  .wl-vs {
    font-family: var(--mono) !important;
    font-size: 8.5px !important;
    text-align: right !important;
    min-width: 0 !important;
    color: var(--text2) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Column headers — match 5-col wl-row exactly */
  #wlColumnHeaders,
  #wlPaneWl > div:first-child {
    display: grid !important;
    grid-template-columns: 1fr 52px 76px 48px 44px !important;
    padding: 4px 8px 4px 10px !important;
    gap: 0 !important;
  }
  /* Show ALL 5 header spans — sparkline col gets an empty label */
  #wlColumnHeaders span,
  #wlPaneWl > div:first-child span {
    display: block !important;
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.12em !important;
    color: rgba(155,170,192,0.4) !important;
    text-transform: uppercase !important;
    text-align: left !important;
  }
  /* Price / 24H% / VS BTC headers right-aligned */
  #wlColumnHeaders span:nth-child(3),
  #wlColumnHeaders span:nth-child(4),
  #wlColumnHeaders span:nth-child(5),
  #wlPaneWl > div:first-child span:nth-child(3),
  #wlPaneWl > div:first-child span:nth-child(4),
  #wlPaneWl > div:first-child span:nth-child(5) {
    text-align: right !important;
  }
  /* Sparkline header — no label needed, don't hide */
  #wlColumnHeaders span:nth-child(2),
  #wlPaneWl > div:first-child span:nth-child(2) {
    display: block !important;
  }

  /* Watchlist tab bar: compact */
  #watchlistPanel > div:first-child button {
    padding: 7px 6px !important;
    font-size: 6.5px !important;
  }

  /* STATUS STRIP */
  .status-strip {
    background: var(--surface) !important; border: 1px solid rgb(255 255 255 / 0%) !important;
    border-radius: 4px !important; padding: 6px 14px !important;
    box-shadow: none !important; font-family: var(--mono) !important;
    font-size: 10px !important; letter-spacing: 0.04em !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    color: rgb(232 235 239 / 65%) !important;
  }
  .status-strip::before { display: none !important; }

  /* Scalp mode only — override the shared .status-strip background for
     this specific strip without affecting other status strips app-wide */
  #scalpStatusStrip { background: #91919105 !important; }

  /* METRICS GRID */
  .met-grid { background: var(--border) !important; gap: 1px !important; border-radius: 10px !important; overflow: hidden !important; }
  .mc {
    background: var(--surface) !important; padding: 14px 16px !important;
    transition: background 0.12s !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .mc::before { display: none !important; }
  .mc:hover { background: var(--surface2) !important; }
  .mc-label { font-family: var(--mono) !important; font-size: 9px !important; font-weight: 500 !important; letter-spacing: 0.1em !important; color: var(--text2) !important; margin-bottom: 6px !important; text-transform: uppercase !important; }
  .mc-val   { font-family: var(--font) !important; font-size: 18px !important; font-weight: 700 !important; color: var(--text) !important; }
  .mc-sub   { font-family: var(--font) !important; font-size: 11px !important; color: var(--text2) !important; margin-top: 4px !important; }

  /* MACRO GRID */
  .macro-grid { background: var(--border) !important; border-radius: 10px !important; overflow: hidden !important; }
  .macro-card {
    background: rgb(255 255 255 / 2%) !important; padding: 14px 12px !important;
    transition: background 0.12s !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .macro-card:hover { background: var(--surface2) !important; }
  .macro-card::before { display: none !important; }
  /* Macro value accent — BTC dominance "alt bleed" etc */
  .mc-val.mc-accent-amber { color: var(--amber) !important; text-shadow: 0 0 10px rgba(232,160,32,0.15) !important; }
  .mc-val.mc-accent-green { color: var(--green) !important; text-shadow: 0 0 10px rgba(16,185,129,0.15) !important; }
  .mc-val.mc-accent-red   { color: var(--red) !important;   text-shadow: 0 0 10px rgba(244,63,94,0.15) !important; }

  /* HTF CELLS */
  .htf-cell, .htf-cell-compact { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
  /* Directional tinting — left accent border + subtle wash */
  .htf-cell.htf-up, .htf-cell-compact.htf-up {
    border-left: 3px solid rgba(16,185,129,0.55) !important;
    background: rgba(16,185,129,0.03) !important;
  }
  .htf-cell.htf-dn, .htf-cell-compact.htf-dn {
    border-left: 3px solid rgba(244,63,94,0.55) !important;
    background: rgba(244,63,94,0.03) !important;
  }
  .htf-cell.htf-neut, .htf-cell-compact.htf-neut {
    border-left: 3px solid rgba(59,130,246,0.20) !important;
  }
  .htf-tf   { font-family: var(--mono) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; color: var(--text2) !important; text-transform: uppercase !important; margin-bottom: 6px !important; }
  .htf-trend{ font-family: var(--font) !important; font-size: 16px !important; font-weight: 700 !important; }
  .htf-str  { font-family: var(--mono) !important; font-size: 10px !important; color: var(--text2) !important; }

  /* INTEL / MF CARD */
  .intel-panel { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: none !important; }
  .mf-card {
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: 10px !important; box-shadow: none !important; margin-bottom: 14px !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .mf-card::after  { display: none !important; }
  .mf-header { padding: 14px 18px 12px !important; border-bottom: 1px solid var(--border) !important; }

  /* TICKER BAR */
  .tk-macro-tile  { background: none !important; transition: background 0.15s !important; padding: 5px 12px !important; border-right-color: var(--border) !important; }
  .tk-macro-tile:hover { background: rgba(255,255,255,0.02) !important; }
  .tk-macro-sym   { font-family: var(--mono) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.06em !important; color: var(--amber) !important; }
  .tk-macro-price { font-family: var(--mono) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--text) !important; }

  /* HERO CELLS */
  .hero-cells { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; background: rgba(255,255,255,.04) !important; border-top: 1px solid rgba(255,255,255,.06) !important; }
  .hc { background: red !important; transition: background 0.12s !important; padding: 14px 16px !important; border-right-color: rgba(255,255,255,.05) !important; }
  .hc:hover  { background: rgba(255,255,255,0.025) !important; }
  .hc::before{ display: none !important; }
  .hc-l { font-family: var(--mono) !important; font-size: 8.5px !important; font-weight: 500 !important; letter-spacing: 0.10em !important; color: var(--text2) !important; margin-bottom: 6px !important; text-transform: uppercase !important; }
  .hc-v { font-family: var(--font) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--text) !important; }
  /* Awaiting state for Target / Stop / R:R when HOLD */
  .hc-v.hc-awaiting {
    color: var(--text3) !important;
    font-style: italic !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
  }
  .hc-s { font-family: var(--mono) !important; font-size: 9.5px !important; color: var(--text2) !important; }

  /* ZONE LAYOUT */
  #swingMode > div[style*="grid-template-columns:minmax(200px"] {
    grid-template-columns: minmax(200px, 230px) 1fr !important;
    align-items: stretch !important;
    gap: 12px !important; margin-bottom: 12px !important;
  }
  #swingMode > div[style*="grid-template-columns:minmax(200px"] > div:last-child {
    display: grid !important;
    grid-template-columns: 1fr 300px !important;  /* Zone B | Zone C */
    align-items: stretch !important;              /* both columns equal height */
    gap: 12px !important;
  }
  /* Zone C: flex column — stretches to full row height */
  #swingMode > div[style*="grid-template-columns:minmax(200px"] > div:last-child > div:last-child {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-self: stretch !important;
    height: 100% !important;
    overflow: hidden !important;
    max-height: none !important;
  }

  #swZoneB {
    height: 100% !important; min-height: unset !important; align-self: stretch !important;
    background: transparent !important; border: none !important; border-radius: 0 !important;
    box-shadow: none !important; display: flex !important; flex-direction: column !important;
    gap: 10px !important; padding: 0 !important; position: relative !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  #swZoneB::before, #swZoneB::after { display: none !important; }
  #swZoneB > div {
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: 10px !important; box-shadow: none !important;
    position: relative !important; overflow: hidden !important; flex-shrink: 0 !important;
  }
  #swZoneB > div::before {
    content: '' !important; position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; height: 1px !important;
    background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 60%, transparent 100%) !important;
    display: block !important; z-index: 1 !important;
  }
  #swZoneB > div > div[style*="position:absolute"][style*="height:1px"],
  #swZoneB > div > div[style*="position:absolute"][style*="gradient"] { display: none !important; }
  #swZoneB > div:first-child  { border-top: none !important; flex-shrink: 0 !important; }
  /* Remove decorative top line above Session Intelligence panel */
  #swZoneB > div:first-child::before { display: none !important; }
  #swZoneB > div:first-child > div:first-child { padding: 12px 16px 10px !important; border-bottom: 1px solid var(--border) !important; background: transparent !important; }
  #swZoneB > div:nth-child(2) { flex: 1 !important; min-height: 0 !important; }
  #swZoneB > div:nth-child(3) { border-top: 1px solid rgba(255,59,92,0.18) !important; flex-shrink: 0 !important; padding: 0 !important; }
  #swZoneB > div:nth-child(3)::before { background: linear-gradient(90deg, rgba(244,63,94,0.35) 0%, rgba(244,63,94,0.08) 60%, transparent 100%) !important; }
  #swZoneB > div:nth-child(3) > .liq-card { background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
  #swZoneB [style*="letter-spacing:.2em"] { font-family: var(--mono) !important; font-size: 9px !important; letter-spacing: 0.12em !important; color: var(--text2) !important; opacity: 1 !important; }

  /* CHART CARDS */
  .chart-card-main, .chart-side-card { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; overflow: hidden !important; }

  /* HIDE MOBILE */
  #mobileView { display: none !important; }

  /* SEGMENTS */
  .seg { border-radius: 6px !important; border-color: var(--border) !important; background: rgba(255,255,255,0.04) !important; }
  .sb  { font-family: var(--font) !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.02em !important; color: var(--text2) !important; border-color: var(--border) !important; text-shadow: none !important; }
  .sb:hover:not(.on) { color: var(--text) !important; background: rgba(255,255,255,0.04) !important; }
  .sb.on { background: var(--cyan-dim) !important; color: var(--cyan) !important; text-shadow: none !important; }

  /* HTF TABS */
  .htf-tab    { font-family: var(--mono) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; color: var(--text2) !important; border-color: var(--border) !important; }
  .htf-tab-on { color: var(--text) !important; background: var(--surface2) !important; }
  .htf-tab::after    { background: transparent !important; }
  .htf-tab-on::after { background: var(--cyan) !important; opacity: 0.6 !important; }

  /* PRICE SESSION ROW */
  .price-session-row {
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-radius: 10px !important; padding: 18px 20px !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .price-session-row::before, .price-session-row::after { display: none !important; }

  /* CTITLE */
  .ctitle { font-family: var(--mono) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; color: var(--text2) !important; opacity: 1 !important; text-transform: uppercase !important; }
  .ctitle::before { content: '◈ ' !important; color: var(--text3) !important; opacity: 0.8 !important; font-size: 8px !important; }

  /* SCROLLBAR */
  ::-webkit-scrollbar { width: 3px !important; height: 3px !important; }
  ::-webkit-scrollbar-track { background: transparent !important; }
  ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07) !important; border-radius: 3px !important; }
  ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.12) !important; }

  /* CHART CONTROLS */
  .pc-tf        { font-family: var(--mono) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; color: var(--text2) !important; border-radius: 5px !important; }
  .pc-tf-on     { background: var(--surface2) !important; color: var(--text) !important; }
  .pc-tf:hover:not(.pc-tf-on) { background: rgba(255,255,255,0.04) !important; color: var(--text) !important; }
  .pc-ind       { font-family: var(--mono) !important; font-size: 10px !important; font-weight: 500 !important; border-radius: 5px !important; letter-spacing: 0.04em !important; color: var(--text2) !important; border-color: var(--border) !important; }
  .pc-ind-on    { border-color: var(--border2) !important; background: var(--surface2) !important; color: var(--text) !important; }

  /* STATUS DOT */
  .dot           { width: 5px !important; height: 5px !important; }
  .dot.ok        { background: var(--green) !important; box-shadow: 0 0 4px var(--g-glow) !important; }
  .pc-status-dot { background: var(--green) !important; box-shadow: 0 0 4px var(--g-glow) !important; }

  /* PATTERN TAGS */
  .pat       { font-family: var(--mono) !important; font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.03em !important; border-radius: 4px !important; padding: 2px 8px !important; }
  .pat::before { display: none !important; }
  .pat-bull  { background: rgba(0,230,118,0.1) !important; color: var(--green) !important; border-color: rgba(0,230,118,0.22) !important; }
  .pat-bear  { background: rgba(255,59,92,0.1) !important; color: var(--red) !important; border-color: rgba(255,59,92,0.22) !important; }
  .pat-neut  { background: rgba(255,255,255,0.04) !important; color: var(--text2) !important; border-color: var(--border) !important; }

  /* BG PANEL */
  #swBgPanel { background: #0c0e13 !important; border: 1px solid var(--border2) !important; border-radius: 6px !important; box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important; margin-top: 9px !important; }
  #swBgPanel::before { display: none !important; }
  .swbg-label { font-family: var(--mono) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; color: var(--text2) !important; text-transform: uppercase !important; }
  .swbg-input { font-family: var(--font) !important; font-size: 12px !important; border-radius: 6px !important; border-color: var(--border2) !important; background: var(--surface) !important; color: var(--text) !important; }
  .swbg-btn   { font-family: var(--font) !important; font-size: 11px !important; font-weight: 600 !important; border-radius: 6px !important; letter-spacing: 0 !important; }
  /* #swBgGearBtn removed — functionality now lives in the unified settings gear panel (#settingsDd) */

  /* PANEL TYPES */
  .mx-panel, .rr-scanner, .pos-calc, .sig-matrix { background: rgb(255 255 255 / 2%) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: none !important; }

  /* BADGES */
  .trend-badge    { font-family: var(--font) !important; font-size: 11px !important; font-weight: 700 !important; padding: 4px 12px !important; border-radius: 5px !important; letter-spacing: 0.02em !important; }
  .trend-badge.up { color: var(--green) !important; background: rgba(0,230,118,0.1) !important; border: 1px solid rgba(0,230,118,0.22) !important; }
  .trend-badge.dn { color: var(--red) !important; background: rgba(255,59,92,0.1) !important; border: 1px solid rgba(255,59,92,0.22) !important; }
  .up { background: rgba(0,230,118,0.1) !important; color: var(--green) !important; border-color: rgba(0,230,118,0.2) !important; }
  .dn { background: rgba(255,59,92,0.1) !important; color: var(--red) !important; border-color: rgba(255,59,92,0.2) !important; }

  /* ENTRY ANIMATIONS */
  @keyframes panelIn {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: none; }
  }
  .pt-tab { animation: panelIn 0.2s ease both !important; }
  .price-session-row { animation: panelIn 0.22s 0.04s ease both !important; }
  .mf-card           { animation: panelIn 0.22s 0.06s ease both !important; }
  .hero              { animation: panelIn 0.22s 0.08s ease both !important; }
  #watchlistPanel    { animation: panelIn 0.22s 0.10s ease both !important; }

  /* SCALP MODE */
  #scalpMode .card, #scalpMode .chart-card, #scalpMode .chart-card-main,
  #scalpMode .mc, #scalpMode .sig-matrix, #scalpMode .rr-scanner, #scalpMode .pos-calc {
    background: rgba(255, 255, 255, 0.018) !important; border-color: rgb(255 255 255 / 0%) !important;
    border-radius: 10px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }

  /* TOPBAR HEALTH BTN */
  #aeonHealthBtn     { width: 32px !important; height: 32px !important; flex-shrink: 0 !important; }
  #aeonHealthBtn svg { width: 32px !important; height: 32px !important; }
  #aeonHealthBtn img { width: 32px !important; height: 32px !important; object-fit: contain !important; display: block !important; }

  /* LIQ CARD */
  .liq-card   { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; }
  .liq-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 16px !important; border-bottom: 1px solid var(--border) !important; }
  .liq-title  { font-family: var(--mono) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 0.12em !important; color: var(--text2) !important; text-transform: uppercase !important; }
  .liq-live-dot { display: inline-flex !important; align-items: center !important; gap: 5px !important; font-family: var(--mono) !important; font-size: 9px !important; color: var(--green) !important; letter-spacing: 0.06em !important; }
  .liq-stats  { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 1px !important; background: var(--border) !important; }
  .liq-stat   { background: var(--surface) !important; padding: 10px 12px !important; display: flex !important; flex-direction: column !important; gap: 4px !important; }
  .liq-stat-l { font-family: var(--mono) !important; font-size: 8px !important; letter-spacing: 0.08em !important; color: var(--text3) !important; text-transform: uppercase !important; }
  .liq-stat-v { font-family: var(--mono) !important; font-size: 18px !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 1 !important; }
  .liq-stat-s { font-family: var(--mono) !important; font-size: 9px !important; color: var(--text2) !important; }

  /* ZONE A */
  #swPriceCard {
    /* background: moved to style.css's #bentoDashboard #swPriceCard (2-ID
       specificity) — this rule's background was already dead code. */
    border: 1px solid rgba(255,255,255,0.06) !important;
    border-top: 2px solid rgba(59,130,246,0.18) !important; border-radius: 10px !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  #swPriceCard > div[style*="position:absolute"][style*="height:2px"],
  #swPriceCard > div[style*="position:absolute"][style*="gradient"] { display: none !important; }
  #htfCard {
    background: var(--surface) !important; border: 1px solid var(--border) !important;
    border-top: 2px solid rgba(255,255,255,0.09) !important; border-radius: 10px !important;
    box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  #htfCard > div[style*="position:absolute"] { display: none !important; }
  #htfCard::before { display: none !important; }

  /* ── ZONE C: Hero + Watchlist — fixed height budget ── */
  #hero.hero {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 2px solid rgba(255,255,255,0.09) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    justify-content: flex-start !important;
  }
  #hero.hero.signal-hold { border-top-color: rgba(217,164,65,.45) !important; }
  #hero.hero.signal-buy  { border-top-color: rgba(61,220,151,.45) !important; }
  #hero.hero.signal-sell { border-top-color: rgba(238,108,124,.45) !important; }
  .hero-bg { display: none !important; }

  /* Watchlist: content height only — panel ends where rows end */
  #watchlistPanel {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-top: 2px solid rgba(255,255,255,0.09) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Watchlist panes fill their allocated height, rows scroll */
  #wlPaneWl {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  #wlPaneFib, #wlPaneLiq {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }
  #wlPaneFib > div:last-child,
  #wlPaneLiq > div:last-child {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(59,130,246,0.15) transparent !important;
  }
  /* The scrollable wl-row container */
  #wlPaneWl > div:last-child {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(59,130,246,0.15) transparent !important;
  }

  /* MACROMINI / ETF */
  #macroMini         { background: transparent !important; border-radius: 6px !important; overflow: hidden !important; }
  #macroMini > div   { background: var(--surface) !important; }
  /* New mc-card variants manage their own padding via .mc-card-inner */
  #macroMini > div:not(.mc-card-mcap):not(.mc-card-dxy) { padding: 10px 12px !important; }
  #macroMini > div:hover { background: var(--surface2) !important; }

  /* CHART WRAP */
  #premChartWrap { background: rgb(255 255 255 / 2%) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  #premChartWrap > div[style*="position:absolute"][style*="gradient"] { display: none !important; }

  /* SESSION CARDS */
  .sess-card { background: var(--surface2) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 12px 14px !important; border-top: 2px solid transparent !important; transition: border-color 0.2s !important; }
  /* Active/bullish sessions: green top accent */
  .sess-card.active,
  .sess-card[style*="border:1px solid rgba(59,130,246"] {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-top-color: rgba(16,185,129,0.50) !important;
    box-shadow: none !important;
  }
  /* Day-of-Week bias: amber top accent — informational, not an error */
  .sess-card.sess-dow-bias {
    background: var(--surface) !important;
    border-color: var(--border) !important;
    border-top-color: rgba(232,160,32,0.45) !important;
    box-shadow: none !important;
  }
  /* Ensure Day-of-Week value text renders amber */
  .sess-card .sess-dow-val  { color: var(--amber) !important; }
  .sess-card .sess-dow-mood { color: rgba(232,160,32,0.65) !important; }

  /* ════ BG IMAGE SYSTEM — preserved for URL wallpaper + blur slider ════ */
  #swStarfield { opacity: 0 !important; pointer-events: none !important; }

  #swingMode.has-bg-img::before {
    display: block !important; position: fixed !important; inset: 0 !important;
    pointer-events: none !important; z-index: 0 !important;
    background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important;
  }
  #swingMode.has-bg-img #swStarfield { opacity: 0.6 !important; }

  #swingMode.has-bg-img .proxy-tray,
  #swingMode.has-bg-img #htfCard,
  #swingMode.has-bg-img #hero,
  #swingMode.has-bg-img #watchlistPanel,
  #swingMode.has-bg-img #swZoneB > div,
  #swingMode.has-bg-img #premChartWrap,
  #swingMode.has-bg-img .mf-card,
  #swingMode.has-bg-img .liq-card,
  #swingMode.has-bg-img .sig-matrix,
  #swingMode.has-bg-img .rr-scanner,
  #swingMode.has-bg-img .pos-calc,
  #swingMode.has-bg-img .mc,
  #swingMode.has-bg-img .mx-panel,
  #swingMode.has-bg-img .card,
  #swingMode.has-bg-img .macro-card,
  #swingMode.has-bg-img #macroMini > div {
    background: rgba(10,12,16,0.78) !important;
    /* backdrop-filter set by JS applyBlur() — NOT overridden here */
  }
  #swingMode.has-bg-img [style*="linear-gradient(160deg,rgba(5,8,16"] { background: rgba(10,12,16,0.68) !important; }
  #swingMode.has-bg-img .sess-card { background: rgba(10,12,16,0.62) !important; }

  /* ── SCROLLBAR VISIBILITY FIX — bg image mode ──
     #swingMode::before is position:fixed + inset:0, so the injected photo
     paints straight through the aeon-desktop-body scroll gutter too. The
     default thumb (8% white, 5px wide) has ~zero contrast against a busy
     image and reads as "invisible" even though it's still there and still
     scrolls fine. Give it an opaque backing + brighter fill only while a
     bg image is active, so it stays legible on any wallpaper. */
  .aeon-desktop-body:has(#swingMode.has-bg-img)::-webkit-scrollbar-track {
    background: rgba(6,7,10,0.55) !important;
  }
  .aeon-desktop-body:has(#swingMode.has-bg-img)::-webkit-scrollbar-thumb {
    background: rgba(0,220,220,0.55) !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.6) !important;
  }
  .aeon-desktop-body:has(#swingMode.has-bg-img)::-webkit-scrollbar-thumb:hover {
    background: rgba(59,130,246,0.75) !important;
  }
  /* Firefox */
  .aeon-desktop-body:has(#swingMode.has-bg-img) {
    scrollbar-width: auto !important;
    scrollbar-color: rgba(0,220,220,0.55) rgba(6,7,10,0.55) !important;
  }

  /* ══════════════════════════════════════════════════════════════════════
     INTELLIGENCE OVERVIEW — PROFESSIONAL REDESIGN
     Transforms the blocky Zone B (Session / Macro / Liquidation) into a
     polished, data-forward dashboard inspired by modern fintech UIs.
     Scope: desktop only (≥1024px)
     ══════════════════════════════════════════════════════════════════════ */

  /* ── SECTION HEADER: "Intelligence overview" — elevated label ── */
  #swingMode .sec:has(+ div[style*="grid-template-columns:minmax(200px"]),
  #swingMode .sec:first-of-type {
    margin-top: 16px !important;
    margin-bottom: 12px !important;
  }

  /* ── INTELLIGENCE GRID CONTAINER — tighter, more intentional spacing ── */
  #swingMode > div[style*="grid-template-columns:minmax(200px,240px)"] {
    gap: 10px !important;
    margin-bottom: 12px !important;
  }

  /* ── ZONE B: Unified panel — no loose card stack ── */
  #swZoneB {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    gap: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: none !important;
  }

  /* Remove individual card borders from children — they are sections inside one panel */
  #swZoneB > div {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
  }

  /* Subtle section dividers between Zone B children */
  #swZoneB > div + div {
    border-top: 1px solid var(--border) !important;
  }

  /* Remove all ::before pseudo-elements from zone B children */
  #swZoneB > div::before { display: none !important; }
  #swZoneB > div::after  { display: none !important; }

  /* ── SECTION LABEL — panel section headers inside Zone B ── */
  #swZoneB [style*="letter-spacing:.2em"],
  #swZoneB [style*="letter-spacing: .2em"] {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--text2) !important;
    opacity: 1 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* ══════════════════════════════════════════════════════
     SESSION INTELLIGENCE — REDESIGNED
     Zone B · Swing Mode · Desktop ≥1024px
     
     Design language: terminal-glass. Each session is a
     data tile with a coloured left-rail accent, a live
     status pip, the headline metric in Orbitron, and
     secondary stats in Share Tech Mono.
     Active sessions get a glowing left-rail + subtle
     inner glow. Day-of-week bias card uses amber rail.
  ══════════════════════════════════════════════════════ */

  /* ── Wrapper padding ── */
  #swZoneB > div:first-child {
    border-top: none !important;
    padding: 12px 14px 10px !important;
    flex-shrink: 0 !important;
  }
  #swZoneB > div:first-child > div:first-child {
    padding: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    margin-bottom: 8px !important;
  }

  /* ── Section header label ── */
  #swZoneB > div:first-child > div:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* ── GRID: 4 equal columns, tight gap ── */
  #swZoneB .sess-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 5px !important;
    padding-bottom: 2px !important;
  }

  /* ══ BASE CARD ══
     Dark glass tile with a left colour rail.
     Left-border IS the session accent colour.
     We strip the old left-border from style.css
     and replace it with our controlled version. */
  #swZoneB .sess-card {
    background: rgba(8, 11, 20, 0.72) !important;
    border: 1px solid rgba(255, 255, 255, 0.055) !important;
    border-left: 2px solid var(--sess-accent, rgba(59, 130, 246, 0.18)) !important;
    border-radius: 8px !important;
    border-top: none !important;
    padding: 10px 11px 9px !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.18s, border-left-color 0.18s, box-shadow 0.18s !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    cursor: default !important;
  }

  /* Faint inner glow strip along left edge — matches rail colour */
  #swZoneB .sess-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 28px !important;
    background: linear-gradient(
      90deg,
      rgba(59, 130, 246, 0.05) 0%,
      transparent 100%
    ) !important;
    pointer-events: none !important;
    border-radius: 0 !important;
    height: auto !important; /* override style.css 1px height */
  }
  #swZoneB .sess-card::after {
    display: none !important;
  }

  /* Hover state */
  #swZoneB .sess-card:hover {
    background: rgba(12, 16, 28, 0.85) !important;
    border-left-color: var(--sess-accent, rgba(59, 130, 246, 0.45)) !important;
    box-shadow: inset 2px 0 12px rgba(59,130,246,0.03) !important;
  }

  /* ══ ACTIVE SESSION — cyan rail + glow ══ */
  #swZoneB .sess-card.active,
  #swZoneB .sess-card[data-sess-bull="true"],
  #swZoneB .sess-card.sess-bullish {
    background: rgba(59, 130, 246, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    border-left: 2px solid rgba(16,185,129, 0.9) !important;
    box-shadow:
      inset 2px 0 16px rgba(16,185,129, 0.06),
      0 0 0 0 transparent !important;
  }
  #swZoneB .sess-card.active::before,
  #swZoneB .sess-card.sess-bullish::before {
    background: linear-gradient(
      90deg,
      rgba(16,185,129, 0.08) 0%,
      transparent 100%
    ) !important;
  }

  /* ══ DAY-OF-WEEK BIAS — amber rail ══ */
  #swZoneB .sess-card.sess-dow-bias,
  #swZoneB .sess-card[data-sess-dow="true"] {
    background: rgba(255, 170, 0, 0.03) !important;
    border-left: 2px solid rgba(255, 170, 0, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: inset 2px 0 14px rgba(255, 170, 0, 0.05) !important;
  }
  #swZoneB .sess-card.sess-dow-bias::before {
    background: linear-gradient(
      90deg,
      rgba(255, 170, 0, 0.07) 0%,
      transparent 100%
    ) !important;
  }

  /* ══ LABEL (session name + pip) ══ */
  #swZoneB .sess-label {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 6.5px !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: rgba(155, 170, 192, 0.38) !important;
    margin-bottom: 7px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
  }

  /* ══ LIVE PIP ══ */
  #swZoneB .sess-active {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: rgba(16,185,129, 0.95) !important;
    box-shadow: 0 0 6px rgba(16,185,129, 0.7), 0 0 12px rgba(16,185,129, 0.3) !important;
    flex-shrink: 0 !important;
    animation: si-pip-pulse 1.6s ease-in-out infinite !important;
  }
  @keyframes si-pip-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(16,185,129,.7), 0 0 12px rgba(16,185,129,.3); }
    50%       { opacity: 0.55; box-shadow: 0 0 3px rgba(16,185,129,.4); }
  }

  /* ══ HEADLINE VALUE ══
     Big mono number — the thing you read first. */
  #swZoneB .sess-val {
    font-family: 'Orbitron', 'Share Tech Mono', monospace !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    color: rgba(215, 222, 235, 0.92) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* ══ SUB LINE — secondary info ══ */
  #swZoneB .sess-sub {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 7.5px !important;
    color: rgba(155, 170, 192, 0.42) !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.03em !important;
  }

  /* ══ RANGE LINE — time window ══ */
  #swZoneB .sess-range {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 7px !important;
    color: rgba(155, 170, 192, 0.24) !important;
    margin-top: 3px !important;
    letter-spacing: 0.04em !important;
  }

  /* ══ DOW BAR — day-of-week mini sparkbar ══ */
  #swZoneB .dow-bar {
    display: flex !important;
    gap: 2px !important;
    margin-top: 8px !important;
    align-items: flex-end !important;
    height: 22px !important;
  }
  #swZoneB .dow-seg {
    flex: 1 !important;
    border-radius: 2px 2px 0 0 !important;
    min-height: 2px !important;
    transition: opacity 0.25s !important;
  }
  #swZoneB .dow-lbl {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 5.5px !important;
    text-align: center !important;
    margin-top: 2px !important;
    color: rgba(155, 170, 192, 0.28) !important;
    letter-spacing: 0.04em !important;
  }

  /* ══ DOW VALUE / MOOD TEXT — amber tint ══ */
  #swZoneB .sess-dow-val  { color: rgba(255, 170, 0, 0.92) !important; }
  #swZoneB .sess-dow-mood { color: rgba(255, 170, 0, 0.58) !important; }

  /* ══ INACTIVE session — muted everything ══ */
  #swZoneB .sess-card:not(.active):not(.sess-bullish):not(.sess-dow-bias) .sess-val {
    color: rgba(155, 170, 192, 0.50) !important;
  }
  #swZoneB .sess-card:not(.active):not(.sess-bullish):not(.sess-dow-bias) .sess-label {
    color: rgba(155, 170, 192, 0.28) !important;
  }

  /* ── MACRO INTELLIGENCE SECTION ── */
  #swZoneB > div:nth-child(2) {
    padding: 14px 16px 12px !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* Macro mini grid — polished data tiles (overrides inline style) */
  #swZoneB #macroMini,
  #macroMini {
    display: grid !important;
    grid-template-columns: 1fr 2fr !important;
    gap: 1px !important;
    background: var(--border) !important;
    border-radius: 7px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
  }
  #macroMini > div {
    background: rgb(255 255 255 / 2%) !important;
    transition: background 0.12s !important;
  }
  /* Non-redesigned cells keep legacy padding and flex layout */
  #macroMini > div:not(.mc-card-mcap):not(.mc-card-dxy) {
    padding: 9px 11px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  /* DXY card manages its own internal layout — don't override it */
  #macroMini > div.mc-card-dxy {
    padding: 0 !important;
    display: block !important;
    grid-column: 2 / 4 !important;
  }
  /* mcap card manages its own padding too */
  #macroMini > div.mc-card-mcap {
    padding: 0 !important;
  }
  #macroMini > div:hover {
    background: var(--surface3) !important;
  }

  /* ── Macro card internals — world-class redesign ────────────────────── */

  .mc-card-mcap {
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
  }

  .mc-card-dxy {
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    min-height: 142px !important;
  }

  /* Accent top border line — green for mcap, neutral for DXY (JS sets color) */
  .mc-card-mcap::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(0,212,138,.55), transparent) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  .mc-card-dxy::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent 30%, rgba(244,63,94,.5), transparent) !important;
    pointer-events: none !important;
    z-index: 2 !important;
  }
  .mc-card-dxy.dxy-risk-on::before {
    background: linear-gradient(90deg, transparent 30%, rgba(0,212,138,.55), transparent) !important;
  }
  .mc-card-dxy.dxy-neutral::before {
    background: linear-gradient(90deg, transparent 30%, rgba(200,212,228,.25), transparent) !important;
  }

  /* Ambient corner glow — mcap and dxy share same green glow */
  .mc-card-mcap::after,
  .mc-card-dxy::after {
    content: '' !important;
    position: absolute !important;
    bottom: -50px !important; right: -50px !important;
    width: 180px !important; height: 180px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(0,212,138,.04) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  .mc-card-inner {
    padding: 10px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: 100% !important;
    min-height: inherit !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Header row: label left, badge right */
  .mc-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 4px !important;
    gap: 8px !important;
  }

  /* Eyebrow label */
  .mc-card-lbl {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    color: rgba(155,170,192,.38) !important;
    text-transform: uppercase !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  /* mcap card: single line eyebrow */
  .mc-card-mcap .mc-card-lbl {
    white-space: nowrap !important;
    max-width: none !important;
    line-height: 1.2 !important;
    font-size: 7px !important;
    letter-spacing: 0.18em !important;
  }

  /* Live badge — uses JS-injected inline color */
  .mc-card-badge {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    border: 1px solid !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    text-transform: uppercase !important;
  }

  /* Pulse dot inside badge — mcap change badge only */
  .mc-card-mcap .mc-card-badge::before {
    content: '' !important;
    display: inline-block !important;
    width: 5px !important; height: 5px !important;
    border-radius: 50% !important;
    background: currentColor !important;
    opacity: .85 !important;
    animation: mcBadgePulse 2.2s ease-in-out infinite !important;
    flex-shrink: 0 !important;
  }
  @keyframes mcBadgePulse {
    0%,100% { opacity: .85; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.65); }
  }

  /* Dominant value — mono to match card data aesthetic */
  .mc-card-big {
    font-family: var(--mono) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
  }

  /* Divider with gradient fade */
  .mc-card-divider {
    height: 1px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.07), transparent) !important;
    margin-bottom: 10px !important;
  }

  /* Sub-row: label — rule — value */
  .mc-card-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 6px !important;
    margin-top: 5px !important;
  }
  .mc-card-row + .mc-card-row { margin-top: 4px !important; }

  .mc-card-sub-lbl {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.1em !important;
    color: var(--text3) !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
  }

  /* Connector rule between label and value */
  .mc-card-row::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(255,255,255,.04) !important;
    align-self: center !important;
    min-width: 8px !important;
  }

  .mc-card-sub-val {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(200,212,228,.75) !important;
    letter-spacing: 0.02em !important;
    flex-shrink: 0 !important;
  }

  /* Footer group — rows + chip sit tight below the value */
  .mc-card-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    margin-top: 8px !important;
  }

  /* Big value in mcap — natural size, no flex growth */
  .mc-card-mcap .mc-card-big {
    flex: none !important;
    align-items: center !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* DXY spectrum track (replaces old dot scatter) */
  .mc-dxy-dots-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin: 6px 0 4px !important;
  }
  /* Spectrum axis labels row */
  .mc-dxy-dots-label {
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    letter-spacing: 0.1em !important;
    color: var(--text3) !important;
    text-transform: uppercase !important;
    flex-shrink: 0 !important;
  }
  /* Both labels visible side-by-side in the axis row */
  .mc-dxy-axis-row .mc-dxy-dots-label {
    display: block !important;
  }
  /* The dot container becomes the gradient track */
  .mc-dxy-dots {
    position: relative !important;
    height: 6px !important;
    width: 100% !important;
    border-radius: 3px !important;
    background: linear-gradient(90deg,
      rgba(0,212,138,.55) 0%,
      rgba(155,170,192,.25) 38%,
      rgba(155,170,192,.25) 62%,
      rgba(244,63,94,.55) 100%
    ) !important;
    display: block !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  /* Hide old dot children but NOT the thumb */
  .mc-dxy-dots > div:not(.mc-dxy-thumb) { display: none !important; }

  /* Spectrum thumb — positioned by JS via left:X% */
  .mc-dxy-thumb {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateX(-50%) translateY(-50%) !important;
    width: 10px !important; height: 10px !important;
    border-radius: 50% !important;
    background: rgba(200,212,228,.92) !important;
    border: 1.5px solid var(--surface2) !important;
    box-shadow: 0 0 8px rgba(200,212,228,.35) !important;
    pointer-events: none !important;
    transition: left .4s ease !important;
  }

  /* Axis label row — Risk-On left, Risk-Off right */
  .mc-dxy-axis-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }


  /* ── LIQUIDATION EVENTS SECTION ── */
  #swZoneB > div:nth-child(3) {
    border-top: 1px solid rgba(244,63,94,0.14) !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #swZoneB > div:nth-child(3) > .liq-card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Liquidation header */
  .liq-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .liq-title {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.10em !important;
    color: var(--text2) !important;
    text-transform: uppercase !important;
  }
  .liq-live-dot {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: var(--green) !important;
    letter-spacing: 0.06em !important;
  }

  /* Liquidation stats — elegant 4-col data grid */
  .liq-stats {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 1px !important;
    background: var(--border) !important;
    border-top: none !important;
  }
  .liq-stat {
    background: var(--surface2) !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    transition: background 0.12s !important;
  }
  .liq-stat:hover {
    background: var(--surface3) !important;
  }
  /* Refined label */
  .liq-stat-l {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    letter-spacing: 0.08em !important;
    color: var(--text2) !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
  }
  /* Refined value — scaled down from 20px bloat to clean 16px */
  .liq-stat-v {
    font-family: var(--mono) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.1 !important;
  }
  /* Refined sub */
  .liq-stat-s {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: var(--text2) !important;
    line-height: 1 !important;
    margin-top: 0 !important;
  }

  /* ── ZONE A: Price card & HTF — visual consistency with Zone B ── */
  #swPriceCard {
    /* background: moved to style.css's #bentoDashboard #swPriceCard (2-ID
       specificity) — this rule's background was already dead code. */
    border: 1px solid var(--border) !important;
    border-top: 2px solid rgba(59,130,246,0.18) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
  }
  #swPriceCard > div[style*="position:absolute"] { display: none !important; }


  /* 24h stats strip */
  #ticker24hStrip {
    gap: 3px !important;
  }
  #ticker24hStrip > div,
  #ticker24hStrip > span {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    color: var(--text2) !important;
    line-height: 1.5 !important;
  }
  /* Hide the 24H RANGE % position item — last child injected by app.js */
  #ticker24hStrip > *:last-child {
    display: none !important;
  }

  /* ── ZONE C HERO CELLS — match Stokent/Hanson entry/target/stop row ── */
  .hero-cells {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    border-top: 1px solid var(--border) !important;
    background: transparent !important;
  }
  .hc {
    background: var(--surface2) !important;
    padding: 10px 12px !important;
    border-right: 1px solid var(--border) !important;
    transition: background 0.12s !important;
    overflow: hidden !important;
  }
  .hc:last-child { border-right: none !important; }
  .hc-l {
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.10em !important;
    color: var(--text2) !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  .hc-v {
    font-family: var(--mono) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }
  .hc-s {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: var(--text2) !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1 !important;
  }

  /* ── INTELLIGENCE OVERVIEW SECTION HEADER — polished label ── */
  #swingMode .sec {
    color: rgba(255,255,255,0.18) !important;
    letter-spacing: 0.14em !important;
  }
  #swingMode .sec::before {
    color: rgba(59,130,246,0.30) !important;
    content: '⬡' !important;
    font-size: 9px !important;
    opacity: 1 !important;
  }
  #swingMode .sec::after {
    background: var(--border) !important;
    height: 1px !important;
  }

  /* ── Watchlist tab bar — match Stokent/Hanson tab aesthetics ── */
  #watchlistPanel > div:first-child button {
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    letter-spacing: 0.12em !important;
    font-weight: 600 !important;
    transition: background 0.12s, color 0.12s !important;
  }

  /* ── Price change badge ── */
  .price-badge {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    letter-spacing: 0.02em !important;
  }

  /* ── Trend pill ── */
  #trendPill span,
  .trend-badge {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    letter-spacing: 0.03em !important;
  }

  /* ── Micro animation: staggered fade-up for Zone B sections ── */
  @keyframes zoneIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
  }
  #swZoneB > div:nth-child(1) { animation: zoneIn 0.22s 0.04s ease both !important; }
  #swZoneB > div:nth-child(2) { animation: zoneIn 0.22s 0.08s ease both !important; }
  #swZoneB > div:nth-child(3) { animation: zoneIn 0.22s 0.12s ease both !important; }

  /* ── HERO RING: tighter padding, cleaner alignment ── */
  .hero-ring {
    width: 70px !important;
    height: 70px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hero-ring svg {
    width: 70px !important;
    height: 70px !important;
  }
  .hero-ring-num {
    font-family: var(--mono) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
  }

  /* ── ZONE B bg image override ── */
  #swingMode.has-bg-img #swZoneB {
    background: rgb(5 30 81 / 0%) !important;
  }
  #swingMode.has-bg-img #swZoneB > div {
    background: transparent !important;
  }
  #swingMode.has-bg-img #macroMini > div,
  #swingMode.has-bg-img .liq-stat,
  #swingMode.has-bg-img .sess-card {
    background: rgba(255,255,255,0.03) !important;
  }

} /* end @media (min-width: 1024px) */

  /* ── SIDEBAR USER CHIP — pinned above system group after login ── */
  .anr-user-chip {
    display: none; /* shown by JS after login */
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 9px !important;
    padding: 9px 10px !important;
    margin: 4px 0 4px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.028) !important;
    border: 1px solid rgba(255,255,255,0.055) !important;
    cursor: pointer !important;
    transition: background 0.13s !important;
    flex-shrink: 0 !important;
  }
  .anr-user-chip:hover {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.09) !important;
  }
  .anr-user-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(109,40,217,0.16), rgba(37,99,235,0.08)) !important;
    border: 1px solid rgba(59,130,246,0.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Orbitron', var(--font) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    color: var(--cyan) !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.04em !important;
  }
  .anr-user-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .anr-user-name {
    font-family: var(--font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.1 !important;
  }
  .anr-user-role {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.12em !important;
    color: rgba(59,130,246,0.45) !important;
    line-height: 1 !important;
  }
  .anr-user-chevron {
    color: rgba(255,255,255,0.18) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    transition: color 0.13s !important;
  }
  .anr-user-chip:hover .anr-user-chevron {
    color: rgba(255,255,255,0.4) !important;
  }


/* ════════════════════════════════════════════════════════════════════════
   BENTO DASHBOARD — NEW LAYOUT OVERRIDES
   Fixes desktop-shell.css legacy rules that break the new 3-column grid.
   This block loads last so it wins all conflicts.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── BENTO GRID CONTAINER ── */
  #bentoDashboard {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    margin-top: 25px !important;
  }

  /* ── TOP ROW: Evaluation+HotCold (left, fixed) | Smart Money Feed (right, 1fr) ── */
  #bentoDashboard .bd-row-top {
    display: grid !important;
    grid-template-columns: 530px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
    min-height: 420px !important;
  }

  /* ── BOTTOM ROW: Signal | Macro+Liq+ETF | Watchlist ── */
  #bentoDashboard .bd-row-bot {
    display: grid !important;
    grid-template-columns: 260px 1fr 390px !important;
    gap: 10px !important;
    align-items: start !important;
    min-height: 0 !important;
  }

  /* ── ALL BENTO CARDS: base reset ── */
  #bentoDashboard .bd-card {
    background: var(--card-lower) !important;
    border: 1px solid var(--border2) !important;
    border-radius: 13px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    box-shadow: none !important;
    /* kill all old flex/height overrides */
    flex: unset !important;
    height: unset !important;
    min-height: 0 !important;
  }

  /* ══════════════════════════════════════════════════════════
     EVALUATION CARD (bd-eval / swPriceCard)
     ══════════════════════════════════════════════════════════ */
  #swPriceCard {
    background: var(--card-hero) !important;
    border-top: 2px solid rgba(124,58,237,0.22) !important;
  }

  /* Smart Money Feed — bespoke gradient, distinct from lower analytics tier */
  #exFlowsCard {
    background: var(--card-feed) !important;
  }

  /* ── Eval card + 4 more: chamfered "snipped corner" style, matching
     Arkham's card design. Each scoped individually — the shared
     .bd-card base (used by other dashboard panels) is untouched. ── */
  .bd-eval,
  .bd-hotcold,
  .bd-eval-flows,
  .bd-signal,
  .bd-news-panel {
    border-radius: 0 !important;
    clip-path: polygon(
      10px 0, calc(100% - 10px) 0, 100% 10px,
      100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%,
      0 calc(100% - 10px), 0 10px
    ) !important;
  }

  .bd-eval-flows,
  .bd-signal,
  .bd-hotcold {
    border: none !important;
  }

  .bd-eval-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    padding: 12px 20px 6px !important; /* top was 18px; halved now that card padding = 0 */
    flex-shrink: 0 !important;
  }
  .bd-ev-label {
    font-family: var(--font) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1 !important;
  }
  .bd-ev-sub {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: var(--text3) !important;
    letter-spacing: .08em !important;
    margin-top: 3px !important;
  }
  .bd-ev-price-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 20px 4px !important;
    flex-wrap: wrap !important;
    flex-shrink: 0 !important;
  }
  .bd-ev-price {
    font-family: var(--font) !important;
    font-size: 48px !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    letter-spacing: -.03em !important;
    line-height: 1 !important;
  }
  /* Higher-specificity override — style.css has THREE competing rules
     for #pMain, the highest being a triple-ID selector
     (#bentoDashboard #swPriceCard #pMain, specificity 3,0,0,0) which
     beats a plain ID+class override. Matching that exact selector here
     so this one actually wins instead of silently losing. */
  /* Force stats row (OPEN/HIGH/LOW/VOL) onto its own line within the
     flex-wrap price row — previously this only happened incidentally
     because the old 52px price was wide enough to force a wrap; now
     that price is smaller, without this the price sits beside the
     stats on the same line instead of below them. */
  #bentoDashboard #swPriceCard .bd-ev-stats {
    flex: 1 0 100% !important;
    width: 100% !important;
  }

  #pMain.bd-ev-price,
  .bd-ev-price-row #pMain,
  #bentoDashboard #swPriceCard #pMain {
    font-size: 30px !important;
  }
  .bd-ev-badges {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .bd-ev-stats {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: var(--text3) !important;
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    margin-left: auto !important;
  }
  .bd-ev-chart {
    flex: 1 !important;
    min-height: 0 !important;
    position: relative !important;
    padding: 0 !important;
  }
  .bd-ev-chart canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }
  .bd-ev-pair {
    position: absolute !important;
    bottom: 8px !important;
    right: 14px !important;
    font-family: var(--mono) !important;
    font-size: 7px !important;
    color: rgba(155,170,192,.3) !important;
    letter-spacing: .1em !important;
  }

  /* Data strip: Fib | Sessions | DoW | Macro Pulse */
  .bd-ev-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    border-top: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }
  .bd-ev-strip-col {
    padding: 8px 12px 10px !important;
    border-right: 1px solid var(--border) !important;
    min-width: 0 !important;
  }
  .bd-ev-strip-col:last-child { border-right: none !important; }
  .bd-ev-strip-hd {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .12em !important;
    color: var(--text3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-bottom: 6px !important;
    text-transform: uppercase !important;
  }
  .bd-fib-inner, .bd-sess-inner, .bd-dow-inner, .bd-macro-inner {
    font-size: 8px !important;
    overflow: hidden !important;
    max-height: 110px !important;
  }
  .bd-htf-row {
    display: flex !important;
    gap: 2px !important;
  }
  .bd-htf {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    padding: 3px 7px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    color: var(--text3) !important;
    cursor: pointer !important;
    transition: all .12s !important;
  }
  .bd-htf.htf-tab-on,
  .htf-tab-on.bd-htf {
    background: rgba(59,130,246,.1) !important;
    border-color: rgba(59,130,246,.3) !important;
    color: rgba(59,130,246,.9) !important;
  }

  /* ══════════════════════════════════════════════════════════
     WALLET / RECENT OPERATIONS CARD (bd-ops) — v3
     Reference: warm dark bg · two-line title top-left ·
                filter btn top-right · split-decimal total ·
                daily avg · txn rows
     ══════════════════════════════════════════════════════════ */
  #swWalletCard {
    border-top: 2px solid rgba(59,130,246,.12) !important;
    /* Warm very dark background matching reference */
    background: #100e0b !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* ── Header: title top-left, filter btn top-right pinned ── */
  .bd-ops-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;   /* pin both to top */
    padding: 18px 16px 0 18px !important;
    flex-shrink: 0 !important;
  }

  /* Title override for ops card — larger, two natural lines */
  #swWalletCard .bd-ev-label {
    font-family: var(--font) !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    color: rgba(230,235,245,.95) !important;
    line-height: 1.15 !important;
    letter-spacing: -.01em !important;
    /* Force two-line break at "operations" */
    max-width: 180px !important;
    word-break: normal !important;
  }

  /* Filter button — grey rounded square, top-right */
  .bd-ops-filter-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: none !important;
    background: rgba(255,255,255,.08) !important;
    color: rgba(200,210,225,.7) !important;
    cursor: pointer !important;
    transition: all .14s !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important; /* optical top alignment vs two-line title */
  }
  .bd-ops-filter-btn:hover {
    background: rgba(255,255,255,.13) !important;
    color: rgba(220,228,240,.95) !important;
  }
  .bd-ops-filter-btn.active {
    background: rgba(59,130,246,.15) !important;
    color: rgba(59,130,246,.95) !important;
  }

  /* ── Filter pill row (collapsible — hidden by default via JS + CSS) ── */
  .bd-ops-filter-row {
    display: none;  /* JS overrides to flex when open */
    align-items: center !important;
    gap: 5px !important;
    padding: 10px 18px 4px !important;
    flex-shrink: 0 !important;
    flex-wrap: wrap !important;
  }
  /* When JS sets display:flex, ensure it shows correctly */
  .bd-ops-filter-row[style*="flex"] {
    display: flex !important;
  }
  .bd-ops-fpill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    background: rgba(255,255,255,.04) !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: .05em !important;
    color: rgba(155,170,192,.7) !important;
    cursor: pointer !important;
    transition: all .13s !important;
  }
  .bd-ops-fpill:hover {
    background: rgba(255,255,255,.07) !important;
    color: var(--text) !important;
  }
  .bd-ops-fpill-on {
    background: rgba(59,130,246,.12) !important;
    border-color: rgba(59,130,246,.35) !important;
    color: rgba(59,130,246,.95) !important;
  }
  .bd-exc-ico { font-size: 10px !important; font-weight: 700 !important; }
  .bd-exc-bnb { color: #f0b90b !important; }
  .bd-exc-byb { color: rgba(255,107,0,.85) !important; }
  .bd-exc-btg { color: rgba(0,195,255,.75) !important; }

  /* ── Total balance — split-decimal, flush left ── */
  .bd-ops-total-row {
    padding: 14px 18px 0 !important;
    flex-shrink: 0 !important;
  }
  .bd-ops-total-wrap {
    display: flex !important;
    align-items: baseline !important;
    line-height: 1 !important;
  }
  .bd-ops-total-main {
    font-family: var(--font) !important;
    font-size: 38px !important;
    font-weight: 900 !important;
    color: rgba(235,240,250,.97) !important;
    letter-spacing: -.03em !important;
    line-height: 1 !important;
  }
  .bd-ops-total-cents {
    font-family: var(--font) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: rgba(200,208,220,.45) !important;
    letter-spacing: -.02em !important;
    line-height: 1 !important;
    margin-left: 2px !important;
  }

  /* ── Daily avg — shown below total, always rendered ── */
  .bd-ops-daily-avg {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    color: rgba(155,170,192,.4) !important;
    letter-spacing: .02em !important;
    padding: 5px 18px 14px !important;
    flex-shrink: 0 !important;
    min-height: 28px !important;
  }

  /* ── Transaction list ── */
  .bd-ops-txn-list {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(59,130,246,.1) transparent !important;
    padding: 0 8px 8px !important;
  }

  /* Empty state */
  .bd-ops-empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 28px 18px !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    color: rgba(155,170,192,.3) !important;
    letter-spacing: .06em !important;
    text-align: center !important;
    line-height: 1.6 !important;
  }

  /* Individual transaction row */
  .bd-txn-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 10px !important;
    border-radius: 10px !important;
    transition: background .12s !important;
    cursor: default !important;
  }
  .bd-txn-row:hover { background: rgba(255,255,255,.03) !important; }

  /* Token/app icon — 42×42 rounded square matching reference */
  .bd-txn-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--mono) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
    letter-spacing: -.5px !important;
  }

  /* Middle: name + action line */
  .bd-txn-body {
    flex: 1 !important;
    min-width: 0 !important;
  }
  .bd-txn-name {
    font-family: var(--font) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: rgba(228,234,246,.95) !important;
    letter-spacing: .01em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .bd-txn-action {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-top: 3px !important;
  }
  .bd-txn-action-lbl {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    color: rgba(155,170,192,.55) !important;
    letter-spacing: .03em !important;
    flex-shrink: 0 !important;
  }
  .bd-txn-arrow {
    font-size: 9px !important;
    color: rgba(155,170,192,.25) !important;
    flex-shrink: 0 !important;
  }
  .bd-txn-addr {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    color: rgba(155,170,192,.3) !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 90px !important;
  }

  /* Right: amount */
  .bd-txn-amt {
    font-family: var(--font) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: rgba(228,234,246,.92) !important;
    letter-spacing: -.01em !important;
    flex-shrink: 0 !important;
    text-align: right !important;
  }

  /* Action label colour variants */
  .bd-txn-sent     { color: rgba(255,110,90,.8) !important; }
  .bd-txn-received { color: rgba(0,210,130,.8) !important; }
  .bd-txn-swapped  { color: rgba(100,170,255,.8) !important; }
  .bd-txn-other    { color: rgba(155,170,192,.45) !important; }

  /* ══════════════════════════════════════════════════════════
     QUICK ACTIONS SIDEBAR (bd-qa)
     Redesigned: full-width card buttons, icon glow, amber exchange
     ══════════════════════════════════════════════════════════ */

  /* ── CONTAINER ── */
  #swQuickActions,
  #bentoDashboard #swQuickActions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex: unset !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 6px 8px 8px !important;
    gap: 0 !important;
    background: var(--surface) !important;
    border: none !important;
    border-top: 2px solid rgba(59,130,246,.12) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    position: relative !important;
  }
  /* Soft cyan top-edge glow line */
  #swQuickActions::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 10% !important;
    width: 80% !important;
    height: 1px !important;
    background: linear-gradient(90deg,
      transparent,
      rgba(59,130,246,.35) 40%,
      rgba(59,130,246,.35) 60%,
      transparent) !important;
    pointer-events: none !important;
  }

  /* ── BUTTON WRAPPER ── */
  #swQuickActions .bd-qa-btns,
  #bentoDashboard #swQuickActions .bd-qa-btns {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    justify-content: space-between !important;
    padding: 4px 0 0 !important;
  }

  /* ── BUTTONS ── */
  #swQuickActions .bd-qa-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 8px !important;
    background: linear-gradient(160deg,
      rgba(255,255,255,.04) 0%,
      rgba(255,255,255,.02) 100%) !important;
    border: 1px solid rgba(255,255,255,.065) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 2px 8px rgba(0,0,0,.25) !important;
    cursor: pointer !important;
    transition:
      background .16s ease,
      border-color .16s ease,
      box-shadow .16s ease,
      transform .12s ease !important;
    color: rgba(155,170,192,.55) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important;
    flex-shrink: 1 !important;
  }
  /* Left accent stripe — hidden at rest, revealed on hover */
  #swQuickActions .bd-qa-btn::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    width: 2px !important;
    height: 60% !important;
    border-radius: 0 2px 2px 0 !important;
    background: rgba(59,130,246,0) !important;
    transition: background .16s ease !important;
  }

  /* ── HOVER ── */
  #swQuickActions .bd-qa-btn:hover {
    background: linear-gradient(160deg,
      rgba(59,130,246,.09) 0%,
      rgba(59,130,246,.04) 100%) !important;
    border-color: rgba(59,130,246,.22) !important;
    box-shadow:
      inset 0 1px 0 rgba(59,130,246,0.056),
      0 0 18px rgba(59,130,246,0.049),
      0 2px 10px rgba(0,0,0,.3) !important;
    color: rgba(59,130,246,.92) !important;
    transform: translateY(-1px) !important;
  }
  #swQuickActions .bd-qa-btn:hover::before {
    background: rgba(59,130,246,.55) !important;
  }

  /* ── ACTIVE / PRESSED ── */
  #swQuickActions .bd-qa-btn:active {
    transform: translateY(0) !important;
    box-shadow:
      inset 0 2px 6px rgba(0,0,0,.3),
      0 0 8px rgba(59,130,246,0.035) !important;
  }

  /* ── ICON ── */
  #swQuickActions .bd-qa-icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    stroke: currentColor !important;
    stroke-width: 1.6 !important;
    transition: filter .16s ease !important;
    filter: drop-shadow(0 0 0px rgba(59,130,246,0)) !important;
  }
  #swQuickActions .bd-qa-btn:hover .bd-qa-icon {
    filter: drop-shadow(0 0 5px rgba(59,130,246,.35)) !important;
  }

  /* ── LABEL ── */
  #swQuickActions .bd-qa-label {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: inherit !important;
    line-height: 1 !important;
    opacity: .85 !important;
  }

  /* ── EXCHANGE INDICATOR ── */
  #swQuickActions .bd-qa-exc-indicator {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 0 6px !important;
    margin-top: 6px !important;
    border-top: 1px solid rgba(255,255,255,.055) !important;
    width: 100% !important;
    flex-shrink: 0 !important;
  }
  #swQuickActions .bd-qa-exc-dot-wrap {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    background: rgba(240,185,11,.08) !important;
    border: 1px solid rgba(240,185,11,.2) !important;
    box-shadow:
      0 0 12px rgba(240,185,11,.06),
      inset 0 1px 0 rgba(255,255,255,.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s, border-color .2s !important;
  }
  #swQuickActions .bd-qa-exc-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 3px !important;
    background: #f0b90b !important;
    display: block !important;
    transition: background .3s !important;
    box-shadow:
      0 0 6px rgba(240,185,11,.6),
      0 0 12px rgba(240,185,11,.2) !important;
  }
  #swQuickActions .bd-qa-exc-name {
    font-family: var(--mono) !important;
    font-size: 6px !important;
    font-weight: 500 !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    color: rgba(155,170,192,.35) !important;
    text-align: center !important;
  }

  /* ══════════════════════════════════════════════════════════
     SIGNAL MATRIX CARD (bd-signal / #hero)
     Matches reference Bitcoin green card — gradient bg
     ══════════════════════════════════════════════════════════ */
  #hero.bd-card.bd-signal {
    background: rgb(255 255 255 / 2%) !important;
    border: 1px solid rgb(255 255 255 / 0%) !important;
    border-top: 2px solid rgba(255,255,255,.12) !important;
    flex: unset !important;
    height: unset !important;
    position: relative !important;
    overflow: hidden !important;
    justify-content: flex-start !important;
  }
  /* Signal-specific underglow + border */
  #hero.signal-buy  { background: rgb(255 255 255 / 2%) !important; border-top-color: rgba(61,220,151,.55) !important; border-color: rgba(61,220,151,.12) !important; }
  #hero.signal-buy::after  { background: linear-gradient(135deg, rgba(61,220,151,.03) 0%, transparent 45%) !important; }
  #hero.signal-sell { background: rgb(255 255 255 / 2%) !important; border-top-color: rgba(238,108,124,.55) !important; border-color: rgba(238,108,124,.12) !important; }
  #hero.signal-sell::after { background: linear-gradient(135deg, rgba(238,108,124,.03) 0%, transparent 45%) !important; }
  #hero.signal-hold { background: rgb(255 255 255 / 2%) !important; border-top-color: rgba(217,164,65,.45) !important; border-color: rgba(217,164,65,.10) !important; }
  #hero.signal-hold::after { background: linear-gradient(135deg, rgba(217,164,65,.025) 0%, transparent 45%) !important; }

  .bd-sig-tag {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 8px 14px 7px !important;
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    letter-spacing: .16em !important;
    color: rgba(155,170,192,.4) !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    flex-shrink: 0 !important;
  }
  .bd-sig-hero {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px 6px !important;
    flex-shrink: 0 !important;
  }
  .bd-sig-left { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; }
  .hero-sig {
    font-family: var(--font) !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    letter-spacing: .03em !important;
    line-height: 1 !important;
  }
  .hero-sig.hold  { color: rgba(217,164,65,.95) !important; }
  .hero-sig.buy   { color: rgba(61,220,151,.98) !important; }
  .hero-sig.sell  { color: rgba(238,108,124,.98) !important; }
  .hero-sub {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 8px !important;
  }
  .hro-pill {
    font-family: var(--mono) !important;
    font-size: 6px !important;
    letter-spacing: .07em !important;
    padding: 2px 5px !important;
    border-radius: 2px !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
  }
  .bd-sig-ring {
    flex-shrink: 0 !important;
    position: relative !important;
    width: 72px !important;
    height: 72px !important;
  }
  .hero-ring-num {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font) !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
  .hero-ring-num::after {
    content: '/ 100' !important;
    font-size: 6px !important;
    font-weight: 400 !important;
    color: rgba(155,170,192,.35) !important;
    letter-spacing: .08em !important;
    font-family: var(--mono) !important;
  }
  .bd-sig-cells {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0,255,136,.1) transparent !important;
  }
  /* Cell overrides */
  #bentoDashboard #hero .hc {
    padding: 10px 12px !important;
    border-right: 1px solid rgba(255,255,255,.04) !important;
  }
  #bentoDashboard #hero .hc-l {
    font-size: 6px !important;
    letter-spacing: .14em !important;
    color: rgba(155,170,192,.38) !important;
    margin-bottom: 4px !important;
  }
  #bentoDashboard #hero .hc-v {
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
  }
  #bentoDashboard #hero .hc-s {
    font-size: 7px !important;
    color: rgba(155,170,192,.38) !important;
    margin-top: 3px !important;
  }
  #bentoDashboard #hero .hc-accent {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 1.5px !important;
    opacity: .65 !important;
  }

  /* ══════════════════════════════════════════════════════════
  /* ══════════════════════════════════════════════════════════
     MACRO INTELLIGENCE — 3-CARD SUB-GRID LAYOUT
     Row 1: ETF card (full width)
     Row 2: Stablecoin Flow (left) | Market Conditions (right)
     #swZoneB IS the bd-macro-wrap — override all old flex rules
     ══════════════════════════════════════════════════════════ */
  #bentoDashboard .bd-macro-wrap,
  #bentoDashboard #swZoneB {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto 1fr !important;
    gap: 10px !important;
    align-items: stretch !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-direction: unset !important;
    flex: unset !important;
    height: unset !important;
    overflow: visible !important;
  }

  /* Restore card styling for direct children — old rules stripped them */
  #bentoDashboard #swZoneB > .bd-card {
    background: var(--surface) !important;
    border: 1px solid rgb(255 255 255 / 0%) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    position: relative !important;
    flex-shrink: unset !important;
  }
  /* Kill the old section divider between children */
  #bentoDashboard #swZoneB > div + div {
    border-top: none !important;
  }



  /* Card 2 — Stablecoin Flow, row 2 LEFT (col 1) */
  #bentoDashboard .bd-mac-card-usdt {
    grid-column: 1 !important;
    grid-row: 2 !important;
    border-top: 2px solid rgba(0,255,136,.15) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Card 3 — Market Conditions, row 2 RIGHT (col 2) */
  #bentoDashboard .bd-mac-card-mcap {
    grid-column: 2 !important;
    grid-row: 2 !important;
    border-top: 2px solid rgba(59,130,246,.12) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }


  /* LIQ overlay — slides over the whole wallet card when active */
  .bd-etf-liq-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    background: var(--surface) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  /* ── Shared small card header (cards 2 + 3) ── */
  .bd-mac-card-head {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 14px 8px !important;
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    letter-spacing: 0.14em !important;
    color: var(--text3) !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }

  /* ── macroMini inside card 2 ──
     app.js injects 2 .macro-card divs in this order:
     1=Total Mcap (with USDT Mcap merged as sub-line), 2=DXY
     Both shown, full width each.                            ── */
  .bd-mac-grid-conditions {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    background: var(--border) !important;
    flex: 1 !important;
  }
  .bd-mac-grid-conditions .macro-card,
  .bd-mac-grid-conditions .macro-card-mini {
    background: var(--surface) !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    flex: 1 !important;
  }
  .bd-mac-grid-conditions .macro-card:hover,
  .bd-mac-grid-conditions .macro-card-mini:hover {
    background: var(--surface2) !important;
  }
  /* All injected cards are visible — no nth-child hiding needed */

  /* LIQ overlay header — back button + title */
  .bd-etf-liq-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px 8px !important;
    border-bottom: 1px solid var(--border) !important;
    flex-shrink: 0 !important;
  }
  .bd-etf-liq-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    letter-spacing: 0.14em !important;
    color: rgba(0,255,136,.6) !important;
    text-transform: uppercase !important;
  }
  .bd-etf-liq-close {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 9px !important;
    border-radius: 4px !important;
    background: rgba(59,130,246,.05) !important;
    border: 1px solid rgba(59,130,246,.15) !important;
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    letter-spacing: 0.1em !important;
    color: rgba(59,130,246,.6) !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s !important;
  }
  .bd-etf-liq-close:hover {
    background: rgba(59,130,246,.1) !important;
    border-color: rgba(59,130,246,.3) !important;
  }

  /* ── Desktop: USDT DOM (1) + BTC DOM (2) already hidden via the rule above ──
     They are excluded from Market Conditions card on desktop only.
     mobile-shell.css does NOT use bd-mac-grid-conditions so mobile is unaffected. ── */
  .bd-mac-grid-usdt {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    background: var(--border) !important;
    flex: 1 !important;
  }
  .bd-mac-grid-usdt .macro-card,
  .bd-mac-grid-usdt .macro-card-mini {
    flex: 1 !important;
    background: var(--surface) !important;
    padding: 12px 14px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
  }
  .bd-mac-grid-usdt .macro-card:hover,
  .bd-mac-grid-usdt .macro-card-mini:hover {
    background: var(--surface2) !important;
  }

  /* Old swZoneB override cleaned up — handled by the grid rules above */

  .bd-mac-head { display: none !important; } /* old header gone */

  /* Macro sub-tab strip */
  .bd-mac-sub {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    border-top: 1px solid var(--border) !important;
  }
  .bd-mac-sub-tabs {
    display: flex !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .bd-mac-stab {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 7px 10px !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    cursor: pointer !important;
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .12em !important;
    color: var(--text3) !important;
    transition: all .14s !important;
  }
  .bd-mac-stab:hover { color: rgba(59,130,246,.6) !important; background: rgba(59,130,246,.03) !important; }
  .bd-mac-stab-on {
    color: rgba(59,130,246,.85) !important;
    background: rgba(59,130,246,.05) !important;
    border-bottom-color: rgba(59,130,246,.4) !important;
  }
  .bd-mac-subpane {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(59,130,246,.07) transparent !important;
  }
  /* Only show flex layout when NOT hidden */
  .bd-mac-subpane:not([style*="display:none"]):not([style*="display: none"]) {
    display: flex !important;
    flex-direction: column !important;
  }
  /* LIQ overlay — hidden by default, absolute over the card */
  .bd-etf-liq-overlay {
    display: none !important;
  }
  .bd-etf-liq-overlay[style*="display: "]:not([style*="display: none"]),
  .bd-etf-liq-overlay[style*="display:"]:not([style*="display:none"]) {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Liq grid inside macro */
  .bd-liq-grid-mac {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    background: var(--border) !important;
    flex-shrink: 0 !important;
  }
  .bd-liq-grid-mac .bd-liq-cell {
    background: var(--surface) !important;
    padding: 10px 14px !important;
  }
  .bd-liq-cl {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
    color: var(--text3) !important;
    margin-bottom: 4px !important;
  }
  .bd-liq-cv {
    font-family: var(--font) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: -.01em !important;
  }
  .bd-liq-cs {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    color: var(--text3) !important;
    margin-top: 2px !important;
  }
  .bd-liq-feed-wrap {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .bd-liq-feed {
    height: 100% !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,45,85,.1) transparent !important;
  }

  /* ══════════════════════════════════════════════════════════
     WATCHLIST CARD (#watchlistPanel)
     CRITICAL: Override the legacy flex:1/height:0 rules
     Matches reference Litecoin panel — coin focus + bar chart
     ══════════════════════════════════════════════════════════ */
  #bentoDashboard #watchlistPanel {
    /* Kill legacy overrides */
    flex: unset !important;
    height: unset !important;
    min-height: 0 !important;
    align-self: start !important;
    /* Layout — overflow visible so dropdown escapes card bounds */
    background: linear-gradient(160deg, #131824 0%, #131824 60%, #080a0f 100%) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    border-top: 2px solid rgba(59,130,246,.22) !important;
    border-radius: 14px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    animation: none !important;
    position: relative !important;
  }
  /* Inner body clips content but allows flex height propagation */
  #bentoDashboard #watchlistPanel .bd-wlf-focus {
    overflow: visible !important;
  }
  #bentoDashboard #watchlistPanel #wlPaneWl,
  #bentoDashboard #watchlistPanel #wlPaneFib,
  #bentoDashboard #watchlistPanel #wlPaneLiq {
    overflow: hidden !important;
  }
  /* Always hide FIB / LIQ tabs and panes in bento mode — JS may override display but !important wins */
  #bentoDashboard #wlTabFib,
  #bentoDashboard #wlTabLiq,
  #bentoDashboard #wlCollapseBtn,
  #bentoDashboard .bd-wtch-hdr-tabs { display: none !important; }
  #bentoDashboard #wlPaneFib,
  #bentoDashboard #wlPaneLiq { display: none !important; }
  /* wlPaneWl: flex column, scrollable rows — display is JS-controlled, not forced here */
  #bentoDashboard #wlPaneWl {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    flex-direction: column !important;
  }
  /* When JS shows it (display:flex), preserve flex layout */
  #bentoDashboard #wlPaneWl[style*="flex"] {
    display: flex !important;
  }

  /* ── No separate header — dropdown anchors to icon in focus panel ── */
  #bentoDashboard .bd-wtch-header { display: none !important; }

  /* ── Dropdown anchored to icon wrap ── */
  #bentoDashboard #watchlistPanel .bd-wtch-token-sel {
    position: relative !important;
    z-index: 9999 !important;
    isolation: isolate !important;
  }
  #bentoDashboard #watchlistPanel .bd-wlf-icon-wrap {
    position: relative !important;
    transition: box-shadow .15s, border-color .15s !important;
  }
  #bentoDashboard #watchlistPanel .bd-wlf-icon-wrap:hover {
    border-color: rgba(59,130,246,.5) !important;
    box-shadow: 0 0 12px rgba(59,130,246,0.14) !important;
  }
  #bentoDashboard #watchlistPanel .bd-wtch-dropdown {
    display: none;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    min-width: 170px !important;
    max-height: 260px !important;
    background: #131824 !important;
    border: 1px solid rgba(59,130,246,.18) !important;
    border-radius: 9px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.7) !important;
    padding: 4px 0 !important;
    z-index: 10000 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #bentoDashboard #watchlistPanel .bd-wtch-dropdown.bd-wtch-dd-open { display: block !important; }

  /* ── All-assets pane tab bar ── */
  .bd-wtch-pane-tabs {
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(59,130,246,.07) !important;
    flex-shrink: 0 !important;
  }
  .bd-wtch-ptab {
    flex: 1 !important;
    padding: 6px 4px !important;
    background: transparent !important;
    border: none !important;
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
    color: var(--text3) !important;
    cursor: pointer !important;
    transition: color .15s, background .15s !important;
    border-right: 1px solid rgba(59,130,246,.07) !important;
  }
  .bd-wtch-ptab:last-child { border-right: none !important; }
  .bd-wtch-ptab:hover { color: rgba(59,130,246,.7) !important; background: rgba(59,130,246,.04) !important; }
  .bd-wtch-ptab.bd-wtch-ptab-on { color: rgba(59,130,246,.85) !important; background: rgba(59,130,246,.06) !important; }

  /* ── Sub-panes inside wlPaneWl ── */
  .bd-wtch-subpane {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  #wlSubLiq {
    overflow-y: auto !important;
    padding: 4px 0 !important;
  }


  /* ── Dropdown styles (shared) ── */
  .bd-wtch-dropdown {
    display: none;
    max-height: 280px !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(59,130,246,.12) transparent !important;
  }
  .bd-wtch-dd-group {
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    letter-spacing: .16em !important;
    color: var(--text3) !important;
    padding: 7px 10px 3px !important;
    text-transform: uppercase !important;
    border-top: 1px solid rgba(255,255,255,.04) !important;
  }
  .bd-wtch-dd-group:first-child { border-top: none !important; }
  .bd-wtch-dd-item {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 7px 10px !important;
    background: none !important;
    border: none !important;
    color: rgba(155,170,192,.65) !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background .1s, color .1s !important;
    letter-spacing: .02em !important;
  }
  .bd-wtch-dd-item:hover { background: rgba(59,130,246,.05) !important; color: var(--text) !important; }
  .bd-wtch-dd-item.bd-wtch-dd-on { color: var(--cyan) !important; background: rgba(59,130,246,.06) !important; }
  .bd-wtch-dd-ico { font-size: 11px !important; width: 16px !important; text-align: center !important; flex-shrink: 0 !important; }
  .bd-wtch-dd-sym {
    margin-left: auto !important;
    font-size: 7px !important;
    color: var(--text3) !important;
    letter-spacing: .08em !important;
  }

  /* ── Focus hero — Litecoin panel style ── */
  .bd-wlf-focus {
    /* display is controlled by JS — do NOT set display:flex !important here */
    flex-direction: column !important;
    padding: 14px 16px 10px !important;
    flex: none !important;
    min-height: 0 !important;
    background: transparent !important;
  }
  /* When JS shows the focus panel, ensure it's flex */
  .bd-wlf-focus[style*="flex"] {
    display: flex !important;
  }
  /* Bento-specific: content height only */
  #bentoDashboard #watchlistPanel .bd-wlf-focus {
    flex: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .bd-wlf-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 16px !important;
  }
  /* Left: icon + name/sub */
  .bd-wlf-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .bd-wlf-icon-wrap {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(59,130,246,.2) !important;
    background: rgba(59,130,246,.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: background .2s, border-color .2s !important;
  }
  .bd-wlf-icon {
    font-size: 15px !important;
    line-height: 1 !important;
    color: rgba(59,130,246,.85) !important;
  }
  .bd-wlf-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  .bd-wlf-name {
    font-family: var(--font) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1.1 !important;
  }
  .bd-wlf-sub {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: var(--text2) !important;
    letter-spacing: .04em !important;
  }
  /* Right: price + badge stacked */
  .bd-wlf-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 5px !important;
  }
  .bd-wlf-price {
    font-family: var(--font) !important;
    font-size: 22px !important;
    font-weight: 900 !important;
    color: var(--text) !important;
    letter-spacing: -.025em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
  .bd-wlf-chg-badge {
    font-family: var(--mono) !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    padding: 3px 9px !important;
    border-radius: 5px !important;
    border: 1px solid rgba(0,255,136,.2) !important;
    background: rgba(0,255,136,.1) !important;
    color: rgba(0,255,136,.9) !important;
    letter-spacing: .04em !important;
    transition: all .25s !important;
    white-space: nowrap !important;
  }
  /* Chart wrap — fixed height so canvas resolves; no flex-grow */
  .bd-wlf-chart-wrap {
    position: relative !important;
    flex: none !important;
    min-height: 150px !important;
    height: 150px !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  /* Watchlist card: content height only — do not stretch to fill grid row */
  #bentoDashboard #watchlistPanel {
    min-height: 0 !important;
    align-self: start !important;
  }
  .bd-wlf-chart {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .bd-wlf-month-labels {
    pointer-events: none !important;
  }
  /* Value labels below bars */
  .bd-wlf-chart-labels {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-family: var(--mono) !important;
    font-size: 7px !important;
    color: var(--text3) !important;
    padding: 4px 8px 0 !important;
    flex-shrink: 0 !important;
  }

  /* Watchlist pane + row list — display is JS-controlled */
  #bentoDashboard #wlPaneWl {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    flex-direction: column !important;
    height: auto !important;
  }
  #bentoDashboard #wlPaneFib,
  #bentoDashboard #wlPaneLiq {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }
  #bentoDashboard #wlPaneWl > div:last-child,
  #bentoDashboard #wlPaneFib > div,
  #bentoDashboard #wlPaneLiq > div {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(59,130,246,.12) transparent !important;
  }
  .bd-wtch-cols {
    display: grid !important;
    grid-template-columns: 1fr 52px 76px 48px 44px !important;
    padding: 4px 8px 4px 10px !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .bd-wtch-cols span {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
    color: var(--text3) !important;
    opacity: .5 !important;
  }

  /* Watchlist tab buttons */
  .bd-wtch-tab {
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 4px 7px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border) !important;
    background: rgba(255,255,255,.03) !important;
    cursor: pointer !important;
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    letter-spacing: .1em !important;
    color: var(--text3) !important;
    transition: all .13s !important;
    white-space: nowrap !important;
  }
  .bd-wtch-tab:hover { background: rgba(59,130,246,.06) !important; border-color: rgba(59,130,246,.2) !important; color: rgba(59,130,246,.8) !important; }
  .bd-wtch-collapse {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
    border: 1px solid var(--border) !important;
    background: rgba(255,255,255,.03) !important;
    cursor: pointer !important;
    font-size: 10px !important;
    color: var(--text3) !important;
    transition: all .13s !important;
  }
  .bd-wtch-collapse:hover { background: rgba(59,130,246,.06) !important; color: rgba(59,130,246,.8) !important; }

  /* Hide the old .bd-wtch-tabs (replaced by .bd-wtch-header) */
  .bd-wtch-tabs { display: none !important; }

  /* ══════════════════════════════════════════════════════════
     ETF BADGE (shared)
     ══════════════════════════════════════════════════════════ */
  .bd-etf-badge {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255,45,85,.25) !important;
    background: rgba(255,45,85,.08) !important;
    color: rgba(255,45,85,.9) !important;
  }

  /* ══════════════════════════════════════════════════════════
     GLOW ACCENTS — ensure they still render in grid context
     ══════════════════════════════════════════════════════════ */
  #bentoDashboard .bd-glow {
    position: absolute !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    filter: blur(40px) !important;
    opacity: .12 !important;
    z-index: 0 !important;
  }
  #bentoDashboard .bd-glow-cyan  { top: -20px !important; right: -20px !important; width: 120px !important; height: 80px !important; background: rgba(59,130,246,.5) !important; }
  #bentoDashboard .bd-glow-green { top: -20px !important; right: -20px !important; width: 120px !important; height: 80px !important; background: rgba(0,255,136,.5) !important; }
  #bentoDashboard .bd-glow-red   { top: -20px !important; right: -20px !important; width: 120px !important; height: 80px !important; background: rgba(255,45,85,.5) !important; }
  #bentoDashboard .bd-card > * { position: relative !important; z-index: 1 !important; }
  /* Carve-out: glow divs must stay absolute so they don't consume flow space */
  #bentoDashboard #watchlistPanel > .bd-glow,
  #bentoDashboard #swWalletCard > .bd-glow,
  #bentoDashboard #cryptoNewsPanel > .bd-glow,
  #bentoDashboard #swPriceCard > .bd-glow,
  #bentoDashboard #hero > .bd-glow {
    position: absolute !important;
    z-index: 0 !important;
  }

  /* ── FUSED OVERLAY RESTORE ─────────────────────────────────────────────
     The rule above forcibly sets position:relative on all .bd-card > *
     children. The three fused layers below are intentional full-bleed
     overlays that MUST remain position:absolute with inset:0 to cover
     the card. They are NOT content-flow children.
     Specificity here is (1,3,1) — beats the (1,2,1) rule above even
     with !important, so these correctly win.
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard > .fused-pulse-aura,
  #swPriceCard > .fused-sess-bands,
  #swPriceCard > .fused-fib-rays {
    position: absolute !important;
    inset: 0 !important;
    z-index: unset !important;
  }

} /* end @media min-width 1024px */

/* ════════════════════════════════════════════════════════════════════════
   UNIFIED MARKET CONTEXT STRIP — replaces 4 separate sub-panels
   One surface. One system. Three intelligence zones.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* Kill the old 4-column strip */
  #swPriceCard .bd-ev-strip { display: none !important; }

  /* ── Outer container ── */
  #swPriceCard .bd-ctx {
    border-top: 1px solid rgba(59,130,246,.1) !important;
    background: rgba(0,0,0,.18) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ── Shared header bar: one label spanning all zones ── */
  #swPriceCard .bd-ctx-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
  }
  #swPriceCard .bd-ctx-bar-line {
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(59,130,246,.12), transparent) !important;
  }
  #swPriceCard .bd-ctx-bar-label {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .18em !important;
    color: rgba(59,130,246,.3) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  /* ── Three-zone row ── */
  #swPriceCard .bd-ctx-zones {
    display: grid !important;
    grid-template-columns: 220px 1fr 200px !important;
    min-height: 0 !important;
  }

  /* ── Each zone ── */
  #swPriceCard .bd-ctx-zone {
    padding: 8px 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-right: 1px solid rgba(255,255,255,.05) !important;
    min-width: 0 !important;
  }
  #swPriceCard .bd-ctx-zone:last-child { border-right: none !important; }

  /* Zone header — micro label with colored dot */
  #swPriceCard .bd-ctx-zone-hd {
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    letter-spacing: .15em !important;
    color: rgba(155,170,192,.35) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin-bottom: 7px !important;
    text-transform: uppercase !important;
  }
  #swPriceCard .bd-ctx-zone-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
  }

  /* ══════════════════════════════════════════════════
     ZONE A — KEY LEVELS (fibonacci price ladder)
     ══════════════════════════════════════════════════ */
  #swPriceCard .bd-ctx-fib .fib-row {
    display: grid !important;
    grid-template-columns: 36px 1fr 68px 38px !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.03) !important;
  }
  #swPriceCard .bd-ctx-fib .fib-row:last-child { border-bottom: none !important; }

  /* Highlight the current nearest level */
  #swPriceCard .bd-ctx-fib .fib-row.fib-now {
    background: rgba(59,130,246,.04) !important;
    border-radius: 3px !important;
    padding-left: 4px !important;
    border-bottom-color: transparent !important;
  }
  #swPriceCard .bd-ctx-fib .fib-row.fib-now::before {
    content: '▶' !important;
    position: absolute !important;
    left: -10px !important;
    font-size: 5px !important;
    color: rgba(59,130,246,.6) !important;
  }

  #swPriceCard .bd-ctx-fib .fib-lv {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: .02em !important;
    white-space: nowrap !important;
  }
  #swPriceCard .bd-ctx-fib .fib-bar {
    height: 2px !important;
    background: rgba(255,255,255,.06) !important;
    border-radius: 1px !important;
    overflow: hidden !important;
  }
  #swPriceCard .bd-ctx-fib .fib-fill {
    height: 100% !important;
    border-radius: 1px !important;
    opacity: .7 !important;
  }
  #swPriceCard .bd-ctx-fib .fib-price {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    color: var(--text) !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  #swPriceCard .bd-ctx-fib .fib-pct {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    padding: 1px 3px !important;
    border-radius: 2px !important;
    text-align: right !important;
    white-space: nowrap !important;
    letter-spacing: .02em !important;
  }

  /* ══════════════════════════════════════════════════
     ZONE B — SESSION FLOW (compact one-liner cards)
     ══════════════════════════════════════════════════ */
  #swPriceCard .bd-ctx-sess .sess-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* Hide the DoW card from session panel — it's shown in Zone C */
  #swPriceCard .bd-ctx-sess .sess-dow-bias { display: none !important; }

  /* Each session card: compact row style */
  #swPriceCard .bd-ctx-sess .sess-card {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    border-radius: 0 !important;
    border-left: 2px solid transparent !important;
    padding: 5px 0 5px 8px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 8px !important;
    row-gap: 1px !important;
    align-items: center !important;
    transition: background .12s !important;
    cursor: default !important;
  }
  #swPriceCard .bd-ctx-sess .sess-card:last-child { border-bottom: none !important; }
  #swPriceCard .bd-ctx-sess .sess-card:hover { background: rgba(255,255,255,.02) !important; }

  /* Active session: lit border */
  #swPriceCard .bd-ctx-sess .sess-card[style*="--sess-top"] {
    border-left-color: var(--sess-top, rgba(255,255,255,.1)) !important;
  }

  /* Session label (name) */
  #swPriceCard .bd-ctx-sess .sess-label {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
    color: rgba(155,170,192,.5) !important;
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  #swPriceCard .bd-ctx-sess .sess-active {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
    background: var(--sess-top, var(--green)) !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 4px var(--sess-top, var(--green)) !important;
    animation: pulse 2s infinite !important;
  }

  /* Session move % — the big number */
  #swPriceCard .bd-ctx-sess .sess-val {
    font-family: var(--font) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -.02em !important;
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
  }

  /* Sentiment label */
  #swPriceCard .bd-ctx-sess .sess-sub {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .06em !important;
    grid-column: 2 !important;
    grid-row: 2 !important;
    align-self: end !important;
    padding-bottom: 2px !important;
    white-space: nowrap !important;
  }

  /* H/L range — hide it to keep compact */
  #swPriceCard .bd-ctx-sess .sess-range { display: none !important; }
  /* Also hide any paddings injected as inline style */
  #swPriceCard .bd-ctx-sess .sess-card > *:not(.sess-label):not(.sess-val):not(.sess-sub):not(.sess-active) {
    grid-column: 3 !important;
    grid-row: 2 !important;
    font-family: var(--mono) !important;
    font-size: 7px !important;
    color: var(--text3) !important;
    align-self: end !important;
    padding-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 80px !important;
  }

  /* ══════════════════════════════════════════════════
     ZONE C — TODAY · PULSE (DoW + macro stats)
     ══════════════════════════════════════════════════ */
  #swPriceCard .bd-ctx-dow {
    flex-shrink: 0 !important;
    margin-bottom: 2px !important;
  }

  /* DoW content rendered inline — constrain its sizing */
  #swPriceCard .bd-ctx-dow > div {
    background: transparent !important;
    padding: 0 !important;
  }
  /* The big "54% green on Thu" stat */
  #swPriceCard .bd-ctx-dow [style*="font-size:13px"] {
    font-size: 14px !important;
    margin-bottom: 2px !important;
  }
  /* Subtitle text */
  #swPriceCard .bd-ctx-dow [style*="font-size:7px"]:not([style*="margin-top"]) {
    margin-bottom: 4px !important;
  }
  /* The bar chart row */
  #swPriceCard .bd-ctx-dow [style*="display:flex"][style*="gap:3px"] {
    height: 26px !important;
    margin-bottom: 3px !important;
  }

  /* Thin divider between DoW and Macro */
  #swPriceCard .bd-ctx-divider {
    height: 1px !important;
    background: rgba(255,255,255,.06) !important;
    margin: 6px 0 !important;
    flex-shrink: 0 !important;
  }

  /* Macro pulse rows */
  #swPriceCard .bd-ctx-macro .bento-macro-pulse-row {
    display: grid !important;
    grid-template-columns: 58px 1fr auto !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 2.5px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.03) !important;
  }
  #swPriceCard .bd-ctx-macro .bento-macro-pulse-row:last-child { border-bottom: none !important; }
  #swPriceCard .bd-ctx-macro .bento-macro-pulse-lbl {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .08em !important;
    color: rgba(155,170,192,.4) !important;
    white-space: nowrap !important;
  }
  #swPriceCard .bd-ctx-macro .bento-macro-pulse-val {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }
  #swPriceCard .bd-ctx-macro .bento-macro-pulse-sig {
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    letter-spacing: .06em !important;
    opacity: .7 !important;
    white-space: nowrap !important;
    padding: 1px 4px !important;
    background: rgba(255,255,255,.04) !important;
    border-radius: 2px !important;
  }

  /* ══════════════════════════════════════════════════
     MACRO INTELLIGENCE — fix empty space at top
     The macroMini grid was pushing down; remove the gap
     ══════════════════════════════════════════════════ */
  #bentoDashboard #swZoneB {
    gap: 0 !important;
  }
  #bentoDashboard .bd-mac-head {
    padding: 10px 14px 8px !important;
  }
  /* Kill any margin/padding before macroMini */
  #bentoDashboard #macroMini {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Each macroMini cell */
  #bentoDashboard #macroMini > div {
    padding: 8px 12px !important;
  }
  /* DXY card: no padding override — card manages its own layout */
  #bentoDashboard #macroMini > div.mc-card-dxy {
    padding: 0 !important;
    display: block !important;
    grid-column: 2 / 4 !important;
  }

  /* ══════════════════════════════════════════════════
     EVALUATION CARD — tighten price/chart layout
     so the context strip is always visible
     ══════════════════════════════════════════════════ */
  #swPriceCard .bd-ev-chart {
    min-height: 160px !important;
    max-height: none !important;  /* was 200px — removed so flex:1 fills remaining card height */
    flex: 1 !important;
  }
  #swPriceCard .bd-ev-price-row {
    padding: 4px 20px 2px !important;
  }

  /* ══════════════════════════════════════════════════
     MARKET CONTEXT — inline strip (sits between price
     hero and chart; replaces the old below-chart zone)
     ══════════════════════════════════════════════════ */

  /* Give chart more room since context moves above it */
  #swPriceCard .bd-ctx-inline ~ .bd-ev-chart {
    min-height: 160px !important;
    max-height: 260px !important;
    flex: 1 !important;
  }

  /* The inline context container */
  #swPriceCard .bd-ctx-inline {
    border-top: 1px solid rgba(255,255,255,.05) !important;
    border-bottom: 1px solid rgba(255,255,255,.05) !important;
    background: rgba(0,0,0,.12) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hide the MARKET CONTEXT header bar in inline mode — redundant */
  #swPriceCard .bd-ctx-inline .bd-ctx-bar {
    display: none !important;
  }

  /* Three zones sit in a single horizontal row — compact */
  #swPriceCard .bd-ctx-inline .bd-ctx-zones {
    display: grid !important;
    grid-template-columns: 230px 1fr 210px !important;
    min-height: 0 !important;
    max-height: 130px !important;
    overflow: hidden !important;
  }

  /* Each zone gets tighter padding in inline mode */
  #swPriceCard .bd-ctx-inline .bd-ctx-zone {
    padding: 6px 12px 7px !important;
  }

  /* Zone headers compact */
  #swPriceCard .bd-ctx-inline .bd-ctx-zone-hd {
    font-size: 6px !important;
    margin-bottom: 5px !important;
    letter-spacing: .18em !important;
  }

  /* Fib rows tighter */
  #swPriceCard .bd-ctx-inline .bd-ctx-fib .fib-row {
    grid-template-columns: 36px 1fr 64px 36px !important;
    padding: 2px 0 !important;
    gap: 5px !important;
  }
  #swPriceCard .bd-ctx-inline .bd-ctx-fib .fib-lv   { font-size: 7.5px !important; }
  #swPriceCard .bd-ctx-inline .bd-ctx-fib .fib-price { font-size: 8px !important; }
  #swPriceCard .bd-ctx-inline .bd-ctx-fib .fib-pct   { font-size: 6.5px !important; }

  /* Session cards in inline mode — single-line chip style */
  #swPriceCard .bd-ctx-inline .bd-ctx-sess .sess-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  #swPriceCard .bd-ctx-inline .bd-ctx-sess .sess-card {
    padding: 3px 0 3px 7px !important;
    border-radius: 0 !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 7px !important;
    row-gap: 0 !important;
  }
  #swPriceCard .bd-ctx-inline .bd-ctx-sess .sess-label { font-size: 6px !important; }
  #swPriceCard .bd-ctx-inline .bd-ctx-sess .sess-val   { font-size: 15px !important; }
  #swPriceCard .bd-ctx-inline .bd-ctx-sess .sess-sub   { font-size: 6.5px !important; }
  #swPriceCard .bd-ctx-inline .bd-ctx-sess .sess-range { display: none !important; }

  /* Macro pulse rows in inline mode */
  #swPriceCard .bd-ctx-inline .bd-ctx-macro .bento-macro-pulse-row {
    padding: 1.5px 0 !important;
  }
  #swPriceCard .bd-ctx-inline .bd-ctx-macro .bento-macro-pulse-lbl { font-size: 6px !important; }
  #swPriceCard .bd-ctx-inline .bd-ctx-macro .bento-macro-pulse-val { font-size: 8.5px !important; }

  /* DoW panel compact */
  #swPriceCard .bd-ctx-inline .bd-ctx-dow { margin-bottom: 4px !important; }
  #swPriceCard .bd-ctx-inline .bd-ctx-divider {
    height: 1px !important;
    background: rgba(255,255,255,.04) !important;
    margin: 3px 0 !important;
  }

} /* end @media min-width 1024px */

/* ════════════════════════════════════════════════════════════════════════
   BENTO DASHBOARD — #swZoneB 2-ROW LAYOUT (Session Intelligence Desktop)
   Row 1: ETF FLOW / LIQ EVENTS — dark wallet-card style
   Row 2: Market Context — 2 columns, each cell a rounded card
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* swZoneB: 2-row grid, gap between rows — both rows size to content, not 1fr */
  #bentoDashboard #swZoneB {
    display: grid !important;
    grid-template-rows: auto auto !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    flex-direction: unset !important;
    height: unset !important;
  }

  /* Kill the old section divider between Zone B children */
  #bentoDashboard #swZoneB > div + div {
    border-top: none !important;
  }

  /* Restore ::before on macro cells (suppressed by old rule) */
  #bentoDashboard #macroMini .macro-card-mini::before {
    display: none !important;
  }

  /* Macro cells — individual rounded cards with visible borders */
  #bentoDashboard #macroMini .macro-card-mini {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    flex-shrink: unset !important;
  }

  /* Row 1: bd-mac-sub tab container — rounded card, same treatment as macro cells */
  #bentoDashboard #swZoneB > .bd-mac-sub {
    grid-row: 1 !important;
    flex: unset !important;
    border-top: none !important;
    border-radius: 12px !important;
    border: 1px solid rgb(255 255 255 / 0%) !important;
    overflow: hidden !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Tab strip — hide entirely; ETF is the only visible pane */
  #bentoDashboard #swZoneB .bd-mac-sub-tabs {
    display: none !important;
  }
  #bentoDashboard #swZoneB .bd-mac-stab {
    background: transparent !important;
    color: rgba(155,170,192,.4) !important;
    border-bottom: 2px solid transparent !important;
  }
  #bentoDashboard #swZoneB .bd-mac-stab-on {
    color: rgba(59,130,246,.9) !important;
    background: rgba(59,130,246,.04) !important;
    border-bottom-color: rgba(59,130,246,.55) !important;
  }
  #bentoDashboard #swZoneB .bd-mac-stab:hover:not(.bd-mac-stab-on) {
    color: rgba(59,130,246,.55) !important;
    background: rgba(59,130,246,.03) !important;
  }

  /* ── Row 2: macroMini grid — rounded cards with gaps ── */
  /* Override the 3-col flat grid from line 2116 */
  #bentoDashboard #swZoneB #macroMini,
  #bentoDashboard #macroMini {
    grid-row: 2 !important;
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    background: transparent !important;
    gap: 8px !important;
    border-radius: 0 !important;
    border: none !important;
    overflow: hidden !important;
    flex-shrink: unset !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }

  /* Override line 1854: #swZoneB > div { border-radius:0; border:none } */
  #bentoDashboard #swZoneB > #macroMini > div,
  #bentoDashboard #swZoneB > #macroMini > .macro-card-mini,
  #bentoDashboard #swZoneB #macroMini > div,
  #bentoDashboard #swZoneB #macroMini > .macro-card-mini {
    background: rgb(255 255 255 / 2%) !important;
    border: 1px solid rgb(255 255 255 / 0%) !important;
    border-radius: 12px !important;
    padding: 14px 16px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-shadow: none !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex-shrink: unset !important;
  }
  #bentoDashboard #swZoneB #macroMini > div:hover,
  #bentoDashboard #swZoneB #macroMini > .macro-card-mini:hover {
    background: var(--surface2) !important;
  }

  /* Hide the empty col-1 row-3 ghost cell */
  #bentoDashboard #macroMini .macro-card-mini:nth-child(1):nth-last-child(n+5) ~ .macro-card-mini:nth-child(5) { display: none !important; }
  /* Simpler: if only 5 cells, col-1 row-3 will be auto-placed blank — prevent it */
  #bentoDashboard #macroMini {
    grid-template-rows: auto auto auto !important;
    align-items: start !important;
  }

  /* Typography inside cells */
  #bentoDashboard #swZoneB #macroMini .mc-label,
  #bentoDashboard #swZoneB #macroMini [style*="font-size:7px"] {
    font-size: 7px !important;
    letter-spacing: 0.12em !important;
    color: var(--text3) !important;
    text-transform: uppercase !important;
  }
  #bentoDashboard #swZoneB #macroMini .mc-v,
  #bentoDashboard #swZoneB #macroMini .mc-val,
  #bentoDashboard #swZoneB #macroMini [style*="font-size:14px"],
  #bentoDashboard #swZoneB #macroMini [style*="font-size:13px"] {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 1 !important;
  }
  #bentoDashboard #swZoneB #macroMini .mc-sub,
  #bentoDashboard #swZoneB #macroMini [style*="font-size:8px"],
  #bentoDashboard #swZoneB #macroMini [style*="font-size:9px"] {
    font-size: 8px !important;
    color: var(--text3) !important;
    letter-spacing: 0.03em !important;
    margin-top: 2px !important;
  }

  /* Watchlist */
  #bentoDashboard #watchlistPanel {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

} /* end bento swZoneB 2-row layout */

/* ════════════════════════════════════════════════════════════════════════
   EVALUATION CARD — WHISPER COLOR SYSTEM
   Philosophy: dark-first. Every color is felt, not seen.
   Fills stay at 2–7% opacity. Borders at 15–30%. The aim is spatial
   depth and information encoding without any brightness or contrast cost.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── 1. CARD AMBIENT ─────────────────────────────────────────────────
     The cyan accent border already whispers a hue at the top edge.
     Let it bleed very faintly into the card body, tying border to interior,
     then dissolve into the pure surface within the first 20% of height.
  ──────────────────────────────────────────────────────────────────────── */
  /* #swPriceCard background: moved to style.css's #bentoDashboard #swPriceCard
     (2-ID specificity) — this rule was already dead code (had nothing but
     a background declaration that never won the cascade). */

  /* ── TIMEFRAME TABS — lifted to top-right corner of the card ─────────
     Pulled out of the header flex row and pinned absolutely so the header
     row only contains the title, keeping the layout clean.
     z-index 35 sits above the fib rays (20) and HUD overlays (25).
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .bd-htf-row {
    display: none !important;
  }

  /* ── 2. SESSION BANDS — Concept A: neutralise old absolute widths/positions ──
     The base layout is now a 4-column grid (style.css).  These overrides
     cancel any absolute left/width/border-left rules that the old ribbon
     system relied on so each card renders cleanly as a grid item.
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .fused-sess-bands {
    background: transparent !important; /* header strip background removed — pills sit directly on the eval card */
  }

  /* Live-pill background no longer flattened to a flat fill — its own
     tinted overlay/glow (border-top color + box-shadow from style.css)
     stays visible to signal the active session. */

  .fused-sess-band-asia,
  .fused-sess-band-london,
  .fused-sess-band-ny,
  .fused-sess-band-dead {
    position: relative !important;
    left: auto !important;
    width: auto !important;
    top: auto !important;
    bottom: auto !important;
    border-left: none !important;
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
  /* Dead zone colour is handled by --fsb-rgb in style.css; clear old override */
  .fused-sess-band-dead .fused-sess-lbl { color: unset !important; }

  /* ── 3. HEADER ZONE ──────────────────────────────────────────────────
     padding-top: 60px removed — it was clearing a 52px identity-card
     strip above the header that no longer exists in the DOM, so this
     was just reserving dead empty space. Real padding now comes from
     style.css's #bentoDashboard #swPriceCard .bd-eval-head rule
     (padding: 14px 18px 8px), which has higher specificity anyway.
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .bd-eval-head {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.025) !important;
    z-index: 40 !important;
  }

  /* Smart Money Feed header label — scoped so it doesn't affect the
     shared .bd-ev-label used for the "BITCOIN" title on the eval card */
  #exFlowsHead .bd-ev-label {
    color: #ededed !important;
    font-weight: 300 !important;
  }
  #exFlowsHead {
    border-bottom: none !important;
  }

  /* ── 4. PRICE ROW ────────────────────────────────────────────────────
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .bd-ev-price-row {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.025) !important;
  }

  /* ── 5. CHART AREA ───────────────────────────────────────────────────
     Top 60% stays transparent — clean field for the sparkline and fib
     rays. Bottom 40% darkens so the delta bar reads as grounded.
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .bd-ev-chart {
    background: linear-gradient(
      180deg,
      transparent        0%,
      transparent        55%,
      rgba(0, 0, 0, 0.20) 100%
    ) !important;
  }

  /* ── 6. MACRO HUD BACKDROP ───────────────────────────────────────────
     Numbers floating on the chart need a dark glass behind them to stay
     legible — but no hard-edged panel. A blurred inky surface + hairline
     border is enough.
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .fused-hud-macro {
    background: rgba(4, 6, 14, 0.58) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.048) !important;
  }

  /* ── 7. DOW STRIP BACKDROP ───────────────────────────────────────────
     Moved to card-root level — sits in the top-right empty space of the
     sessions zone. Timeframe tabs pin below it.
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .fused-hud-pulse {
    position: absolute !important;
    top: 58px !important;
    right: 12px !important;
    z-index: 35 !important;
    background: rgba(4, 6, 14, 0.50) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.040) !important;
    pointer-events: none !important;
  }

  /* ── 8. FIB RAY LABEL LEGIBILITY ─────────────────────────────────────
     A tiny dark pill behind each label so it reads cleanly over the
     sparkline at any price level.
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .fused-fib-ray-lbl {
    right: 8px !important;
    left: auto !important;
    transform: none !important;
    top: -10px !important;
    background: rgba(4, 6, 14, 0.62) !important;
    padding: 1px 6px !important;
    border-radius: 2px !important;
    opacity: 0.85 !important;
  }

  /* Lift ray brightness — style.css sets .22 / .72 / 1, override here */
  #swPriceCard .fused-fib-ray              { opacity: 0.50 !important; }
  #swPriceCard .fused-fib-ray.fused-fib-near   { opacity: 0.88 !important; }
  #swPriceCard .fused-fib-ray.fused-fib-active { opacity: 1.00 !important; }

  /* Near / active labels stay fully bright */
  #swPriceCard .fused-fib-ray.fused-fib-near   .fused-fib-ray-lbl { opacity: 1 !important; }
  #swPriceCard .fused-fib-ray.fused-fib-active .fused-fib-ray-lbl { opacity: 1 !important; }

  /* ── 9. DELTA BAR ────────────────────────────────────────────────────
     Background override removed — falls back to style.css's default
     gradient. Border-top kept.
  ──────────────────────────────────────────────────────────────────────── */
  #swPriceCard .fused-delta-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  }

} /* end whisper colors */

/* ══════════════════════════════════════════════════════════════════
   STICKY LIQ DRAWER — sticks to bottom of aeon-desktop-body viewport
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .sliq-drawer {
    position: sticky !important;
    bottom: 0 !important;
    /* Explicit edge pins — not just relying on default block/flex-stretch
       sizing — so Drawer 1 (display:block) and Drawer 2 (display:flex)
       are guaranteed to compute the exact same outer width regardless of
       that display-type difference between them. */
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    flex-shrink: 0 !important;
    z-index: 9999 !important;
    background: linear-gradient(to top, #090b0e 0%, #090b0e 50%, rgb(18 21 29 / 44%) 100%) !important;
    border-top: 1px solid rgba(59, 130, 246, 0.18) !important;
    border-radius: 9px 9px 0 0 !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.7) !important;
    /* isolation:auto no longer needed for the swingMode > * exclusion —
       the drawer isn't nested inside either mode wrapper anymore */
    isolation: auto !important;
  }
  .sliq-drawer.sliq-open {
    box-shadow: 0 -4px 32px rgba(59,130,246,0.07) !important;
  }

  /* Drawer 2 — sits directly above Drawer 1, pinned to whatever height
     Drawer 1 is currently rendering at (see --sliq2-bottom-offset,
     kept in sync by _sliq2SyncOffset() in app.html). Zero footprint
     while closed (display:none via JS), no permanent handle of its
     own — toggled entirely from the small button on Drawer 1's handle. */
  .sliq-drawer.sliq-drawer2 {
    bottom: var(--sliq2-bottom-offset, 40px) !important;
    z-index: 9998 !important;
  }
  .sliq-drawer2-body {
    display: block !important;
    border-top: none !important;
    max-height: none !important;
    padding: 0 !important;
  }
  /* Drawer 2's own flex column: header (fixed) + scrollable calculator
     content beneath it, capped so it never exceeds a sane viewport share.
     NOTE: display is intentionally NOT set here — it's driven entirely by
     toggleDrawer2() in app.html via style.setProperty(...,'important'),
     same as the open/close toggle itself. Setting display:flex!important
     here would permanently fight the JS close (none) the same way the
     #bentoDashboard bug did earlier — see that fix for why. */
  .sliq-drawer.sliq-drawer2 {
    flex-direction: column !important;
    max-height: min(92vh, 1280px) !important;
  }
  #stickyDrawer2Body {
    flex: 1 !important;
    min-height: 0 !important;
    /* ID selector — guaranteed to beat .sliq-body's max-height:140px
       regardless of stylesheet order, unlike the .sliq-drawer2-body
       class rule above (equal specificity to .sliq-body meant source
       order decided the winner, and .sliq-body happened to come later
       — that's why "double the height" silently did nothing). */
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  #stickyDrawer2Body::-webkit-scrollbar { width: 3px !important; }
  #stickyDrawer2Body::-webkit-scrollbar-track { background: transparent !important; }
  #stickyDrawer2Body::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.2) !important; border-radius: 2px !important; }
  #stickyDrawer2Body .ct-scroll {
    overflow: visible !important; /* scrolling is handled by #stickyDrawer2Body itself */
  }
  #stickyDrawer2Body .calc-wrap {
    background: linear-gradient(165deg, rgb(31 32 36 / 32%) 0%, rgba(8, 9, 15, 1) 55%, rgba(255, 255, 255, 0.08) 100%) !important;
  }

  /* Small tongue tab that protrudes above the Liq Feed drawer's top-right
     corner — same physical-tab language as .pt-tab (Monitor tray tongue).
     #stickyLiqDrawer is position:sticky, which establishes the positioning
     context this anchors to, so it's always glued to the drawer's actual
     top edge regardless of scroll or open/closed state. */
  .sliq-drawer2-btn {
    position: absolute !important;
    /* NOT !important — this is the default (closed) position. JS in
       app.html (_sliq2SyncOffset) sets an inline top without !important
       to move it above Drawer 2's own top edge when Drawer 2 is open;
       marking this !important would silently block that override, same
       trap as the #bentoDashboard bug fixed earlier in this build. */
    top: -18px;
    right: 1px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 18px !important;
    background: #101317e0 !important;
    border-left: 1px solid rgba(59,130,246,0.18) !important;
    border-right: 1px solid rgba(59,130,246,0.18) !important;
    border-top: 1px solid rgba(59,130,246,0.18) !important;
    border-bottom: none !important;
    border-radius: 6px 6px 0 0 !important;
    color: rgba(155,170,192,0.55) !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.45) !important;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    z-index: 10000 !important;
  }
  .sliq-drawer2-btn:hover {
    background: #141a20e0 !important;
    border-color: rgba(59,130,246,0.4) !important;
    color: rgba(147,197,253,0.9) !important;
  }
  .sliq-drawer2-btn svg {
    display: block !important;
  }
  /* .sliq-drawer2-btn-active intentionally left undefined — the button's
     background/border/color no longer change on open, so it stays
     visually identical (matching its resting state) whether Drawer 2 is
     open or closed. toggleDrawer2() in app.html still toggles the class
     for hook/debugging purposes; it just has no styling attached to it now. */
  /* #sliqMonitorBtn (the AEON Monitor tongue, sits immediately left of
     #sliqDrawer2Btn — see app.html) DOES want visible open/closed
     feedback, unlike its neighbor, so its .sliq-drawer2-btn-active state
     is styled here rather than left inert. Horizontal placement is
     computed live in _sliq2SyncOffset() (app.html) off #sliqDrawer2Btn's
     own right:1px/width:28px above, so it isn't duplicated here. */
  #sliqMonitorBtn.sliq-drawer2-btn-active {
    background: rgba(139,92,246,0.16) !important;
    border-color: rgba(139,92,246,0.4) !important;
    color: rgba(196,181,253,0.95) !important;
  }
  /* Puzzle-piece notch: while the Monitor tray is open, clip a rectangular
     opening into the drawer's top edge matching the tray tongue's live
     horizontal position/width (set by _ptSyncNotch() in app.html), so the
     tongue appears to plug directly into the drawer. */
  body.pt-tray-open .sliq-drawer {
    clip-path: var(--sliq-notch-clip, none) !important;
  }

  /* Handle bar */
  .sliq-handle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 20px !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.15s !important;
    gap: 12px !important;
  }
  .sliq-handle:hover { background: rgba(59,130,246,0.04) !important; }

  /* Left: signal bars + title */
  .sliq-handle-left {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex-shrink: 0 !important;
  }

  /* Signal bars icon */
  #sliqSignalBars {
    display: block !important;
    flex-shrink: 0 !important;
  }
  #sliqSignalBars rect {
    transition: fill 0.35s ease !important;
  }
  /* Centre: static Longs / Shorts columns — always-visible two-column status,
     only the values inside update (no scroll/animation). */
  .sliq-ticker-wrap {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    height: 18px !important;
    cursor: default !important;
  }
  .sliq-ls {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: auto !important;
    max-width: 100% !important;
    height: 100% !important;
    white-space: nowrap !important;
  }
  .sliq-ls-col {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Third column — broadcast status pane. Unlike Longs/Shorts (sized to
     content), this one takes whatever space remains, and the message
     scrolls continuously (marquee/playback style) instead of truncating. */
  .sliq-ls-reserve {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  .sliq-ls-bc-track {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    height: 100% !important;
    /* Fade edges so the scrolling text doesn't hard-cut at the column bounds */
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%) !important;
  }
  .sliq-ls-bc-marquee {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    gap: 48px !important;
    white-space: nowrap !important;
    animation: sliqBcScroll 14s linear infinite !important;
    will-change: transform !important;
  }
  .sliq-ls-bc-marquee:hover { animation-play-state: paused !important; }
  @keyframes sliqBcScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .sliq-ls-bc-val {
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
  }
  .sliq-ls-bc-lbl {
    color: rgba(155,170,192,0.35) !important;
    transition: color 0.2s ease !important;
    flex-shrink: 0 !important;
  }
  /* Lit up while an admin broadcast is actively showing (vs. the default
     "all clear" message) */
  .sliq-ls-bc-lbl.sliq-ls-bc-active {
    color: rgba(59,130,246,0.7) !important;
  }
  /* Divider between LIQ FEED title and the Longs/Shorts status block */
  .sliq-title-sep {
    width: 1px !important;
    height: 12px !important;
    background: rgba(59,130,246,0.15) !important;
    flex-shrink: 0 !important;
  }
  .sliq-ls-sep {
    width: 1px !important;
    height: 12px !important;
    background: rgba(59,130,246,0.15) !important;
    flex-shrink: 0 !important;
  }
  .sliq-ls-lbl {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    flex-shrink: 0 !important;
  }
  .sliq-ls-long .sliq-ls-lbl  { color: #2FAF9B !important; text-shadow: 0 0 6px rgba(84,201,181,0.35) !important; }
  .sliq-ls-short .sliq-ls-lbl { color: #A35A78 !important; text-shadow: 0 0 6px rgba(196,119,150,0.35) !important; }
  .sliq-ls-val {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: rgba(200,208,220,0.7) !important;
    flex-shrink: 0 !important;
  }
  .sliq-ls-pct {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: rgba(200,208,220,0.5) !important;
    flex-shrink: 0 !important;
  }
  .sliq-ls-exch {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    color: rgba(155,170,192,0.35) !important;
    text-transform: uppercase !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Right: counts + caret */
  .sliq-handle-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }
  .sliq-title {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    color: rgba(59,130,246,0.7) !important;
    font-weight: 600 !important;
  }
  .sliq-stats {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    color: rgba(155,170,192,0.5) !important;
    letter-spacing: 0.05em !important;
  }
  .sliq-caret {
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
  }

  /* ── MM Status strip — far right of liq handle ── */
  .sliq-mm-status {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    padding-left: 10px !important;
    border-left: 1px solid rgba(255,255,255,0.07) !important;
    margin-left: 4px !important;
  }
  .sliq-mm-stat {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .sliq-mm-lbl {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.1em !important;
    color: rgba(59,130,246,0.35) !important;
    text-transform: uppercase !important;
  }
  .sliq-mm-val {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    color: rgba(59,130,246,0.7) !important;
    letter-spacing: 0.04em !important;
  }
  .sliq-mm-sep {
    width: 1px !important;
    height: 12px !important;
    background: rgba(59,130,246,0.12) !important;
    flex-shrink: 0 !important;
  }
  /* Colour coding for regime value */
  .sliq-mm-val.mm-pos { color: rgba(0,255,136,0.75) !important; }
  .sliq-mm-val.mm-neg { color: rgba(255,45,85,0.75) !important; }

  /* Expandable body */
  .sliq-body {
    max-height: 140px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-top: 1px solid rgba(59,130,246,0.07) !important;
  }
  .sliq-body::-webkit-scrollbar { width: 3px !important; }
  .sliq-body::-webkit-scrollbar-track { background: transparent !important; }
  .sliq-body::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.2) !important; border-radius: 2px !important; }

  .sliq-feed { padding: 4px 0 !important; }
  .sliq-feed .liq-event { padding: 4px 20px !important; font-size: 9px !important; }
  .sliq-feed .liq-empty {
    padding: 10px 20px !important;
    color: rgba(155,170,192,0.3) !important;
    font-size: 8px !important;
    font-family: var(--mono) !important;
  }

  /* Portal dropdown — fixed, escapes all overflow clips */
  #bdWlDropdown.bd-wtch-dd-open {
    display: block !important;
    position: fixed !important;
    z-index: 2147483647 !important;
    min-width: 170px !important;
    max-height: 260px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #131824 !important;
    border: 1px solid rgba(59,130,246,0.22) !important;
    border-radius: 9px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.8) !important;
    padding: 4px 0 !important;
  }

  /* aeon-desktop-body must be flex col for sticky to work */
  .aeon-desktop-body {
    display: flex !important;
    flex-direction: column !important;
  }
  /* flex-grow:1 (not just flex-shrink:0) so #swingMode always fills any
     leftover vertical space in the column, keeping .sliq-drawer's
     position:sticky;bottom:0 pinned to the TRUE bottom of the viewport.
     Previously this only worked by accident — every section happened to
     render taller than the viewport, so there was never leftover space
     to notice the drawer wasn't actually anchored. Short content (e.g.
     the Engine Market's empty-state) exposed it: with no flex-grow, the
     drawer just sat right after the short content instead of at the
     bottom. flex-grow is a no-op when content already exceeds the
     viewport (nothing left to distribute), so this doesn't change
     anything for the tall sections — min-height:0 pairs with it so the
     item's intrinsic content size can't block the grow. */
  #swingMode { flex-shrink: 0 !important; flex-grow: 1 !important; min-height: 0 !important; }
}

/* Mobile: hide sticky drawer */
@media (max-width: 768px) {
  .sliq-drawer { display: none !important; }
}

/* Desktop: hide LIQ EVENTS sub-tab in Macro Intel — covered by sticky drawer */
@media (min-width: 1024px) {
  #macSubTabLiq   { display: none !important; }
  #macSubPaneLiq  { display: none !important; }
}

  /* ── DXY fused layout — info panel left, chart right ── */
  .mc-card-dxy .mc-card-inner {
    flex-direction: row !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  .mc-dxy-info {
    display: flex !important;
    flex-direction: column !important;
    padding: 10px 12px 10px !important;
    flex-shrink: 0 !important;
    width: 200px !important;
    border-right: 1px solid rgba(255,255,255,.055) !important;
    position: relative !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    justify-content: space-between !important;
  }
  /* DXY big value — natural size, sits just below header */
  .mc-dxy-value-grow {
    flex: none !important;
    align-items: center !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  /* DXY footer — sits tight below the value */
  .mc-dxy-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    margin-top: 8px !important;
  }
  /* DXY big value size — growth handled by .mc-dxy-value-grow */
  .mc-card-dxy .mc-card-big {
    font-size: 20px !important;
  }
  /* Override mc-card-top margin inside dxy info */
  .mc-dxy-info .mc-card-top {
    margin-bottom: 0 !important;
    align-items: flex-start !important;
    flex-shrink: 0 !important;
  }
  /* DXY label stack — title + subtitle */
  .mc-dxy-info .mc-card-lbl {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  /* Chart panel */
  .mc-dxy-chart-panel {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    align-self: stretch !important;
    padding: 10px 12px 10px !important;
  }
  .mc-dxy-chart-tabs {
    display: flex !important;
    gap: 2px !important;
    margin-bottom: 8px !important;
    flex-shrink: 0 !important;
  }
  .mc-dxy-tf-btn {
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    letter-spacing: 0.08em !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    background: transparent !important;
    color: rgba(155,170,192,.35) !important;
    cursor: pointer !important;
    transition: all .15s !important;
  }
  .mc-dxy-tf-btn:hover {
    border-color: rgba(255,255,255,.14) !important;
    color: rgba(155,170,192,.7) !important;
    background: rgba(255,255,255,.02) !important;
  }
  .mc-dxy-tf-btn.dxy-tf-active {
    border-color: rgba(59,130,246,.28) !important;
    background: rgba(59,130,246,.06) !important;
    color: rgba(59,130,246,.85) !important;
  }
  .mc-dxy-canvas-wrap {
    flex: 1 !important;
    position: relative !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  #dxyChartCanvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }
  .mc-dxy-chart-loading {
    position: absolute !important;
    inset: 0 !important;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.14em !important;
    color: rgba(155,170,192,.22) !important;
  }

/* ════════════════════════════════════════════════════════════════
   DXY FUSED CARD — override guards (consolidated, no redundancy)
   ════════════════════════════════════════════════════════════════ */

/* MCAP — mirrors DXY specificity so all padding/height is settled here, not scattered */
/* min-height: single source of truth — matches DXY card height exactly */
#macroMini .mc-card-mcap,
#bentoDashboard #macroMini .mc-card-mcap {
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  min-height: 142px !important;
  display: block !important;
}
#macroMini .mc-card-mcap .mc-card-inner,
#bentoDashboard #macroMini .mc-card-mcap .mc-card-inner {
  padding: 10px 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 142px !important;
  min-height: 0 !important;
}

#macroMini .mc-card-dxy,
#bentoDashboard #macroMini .mc-card-dxy {
  grid-column: 2 / 4 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  min-height: 142px !important;
  display: block !important;
  border-left: none !important;
  margin-left: 5px !important;
}
#macroMini .mc-card-dxy .mc-card-inner,
#bentoDashboard #macroMini .mc-card-dxy .mc-card-inner {
  display: flex !important;
  flex-direction: row !important;
  padding: 0 !important;
  gap: 0 !important;
  height: 142px !important;
  min-height: 142px !important;
}
#macroMini .mc-dxy-info,
#bentoDashboard #macroMini .mc-dxy-info {
  width: 180px !important;
}
#macroMini .mc-dxy-canvas-wrap,
#bentoDashboard #macroMini .mc-dxy-canvas-wrap {
  min-height: 100px !important;
  height: 100px !important;
}


/* ══ MM MONITOR DRAWER — v2 Overhaul ══ */
@media (min-width: 1024px) {

/* ─────────────────────────────────────────────────────────────────
   SHARED KEYFRAMES (scoped inside @media so they don't leak)
───────────────────────────────────────────────────────────────── */
@keyframes mmLivePulse {
  0%,100% { opacity:1; box-shadow:0 0 0 0 rgba(0,255,136,0.5); }
  50%      { opacity:0.6; box-shadow:0 0 0 4px rgba(0,255,136,0); }
}
@keyframes mmSpin { to { transform: rotate(360deg); } }
@keyframes mmRegimePulse {
  0%,100% { opacity: 0.55; }
  50%      { opacity: 0.90; }
}
@keyframes mmRegimePulseRed {
  0%,100% { opacity: 0.50; }
  50%      { opacity: 0.85; }
}
@keyframes mmBarFill {
  from { width: 0 !important; }
}
@keyframes mmFadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mmDotBeat {
  0%,100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.6); opacity: 0.5; }
}

/* ── TOPBAR TRIGGER BUTTON ── */
#mmMonitorBtn {
  position: relative !important;
}
#mmMonitorBtn.mm-active {
  background: rgba(59,130,246,0.1) !important;
  border-color: rgba(59,130,246,0.35) !important;
  color: rgba(59,130,246,0.9) !important;
  box-shadow:
    0 0 10px rgba(59,130,246,0.105),
    inset 0 1px 0 rgba(59,130,246,0.056) !important;
}
#mmMonitorBtn.mm-active svg rect,
#mmMonitorBtn.mm-active svg path { opacity: 1 !important; }

/* ══════════════════════════════════════════
   DRAWER SHELL
══════════════════════════════════════════ */
.mm-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1800 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transition: opacity 0.22s ease !important;
}
.mm-drawer.mm-open {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Scrim */
.mm-scrim {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.60) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* Drawer panel */
.mm-panel {
  position: absolute !important;
  top: var(--topbar-h) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(520px, 38vw) !important;
  background: #0A0E17 !important;
  border-left: 1px solid rgba(59,130,246,0.15) !important;
  box-shadow:
    -20px 0 80px rgba(0,0,0,0.7),
    -1px  0  0   rgba(59,130,246,0.042) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  transform: translateX(100%) !important;
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.mm-drawer.mm-open .mm-panel {
  transform: translateX(0) !important;
}

/* ══════════════════════════════════════════
   HEADER — elevated surface, refined
══════════════════════════════════════════ */
.mm-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 8px 14px !important;
  background: #090b0e !important;
  flex-shrink: 0 !important;
  min-height: 0 !important;
}
/* Header background when this panel is in its "pulse active" (live/sticky)
   state — dmm-pulse-active gets toggled on .mm-panel by JS, see app.html's
   _dmmStickyOn()-style handlers around #mmPanel/#mmPanel2. */
.mm-panel.dmm-pulse-active .mm-header {
  background: rgba(255,255,255,0.018) !important;
}
.mm-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}
.mm-header-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 5px !important;
  background: rgb(24 27 31 / 92%) !important;
  border: 1px solid rgba(59,130,246,0.20) !important;
  box-shadow: 0 0 8px rgba(59,130,246,0.07) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
/* Scale down the SVG icon inside */
.mm-header-icon svg {
  width: 13px !important;
  height: 13px !important;
}
.mm-header-title {
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  color: rgba(215,225,238,.92) !important;
  line-height: 1 !important;
}
/* Subtitle inline — separator dot, same baseline as title */
.mm-header-sub {
  font-family: var(--mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.08em !important;
  color: rgba(155,170,192,0.38) !important;
  margin-top: 0 !important;
  font-weight: 400 !important;
  padding-left: 10px !important;
  border-left: 1px solid rgba(255,255,255,0.10) !important;
  margin-left: 10px !important;
}
/* Put title and sub on one line via their anonymous wrapper div */
.mm-header-left > div:not(.mm-header-icon) {
  display: flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}
.mm-header-text {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
}
.mm-header-text .mm-header-sub::before {
  content: '·' !important;
  margin-right: 8px !important;
  color: rgba(155,170,192,0.25) !important;
}
.mm-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.mm-live-badge {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.14em !important;
  color: rgba(0,255,136,0.75) !important;
  background: rgba(0,255,136,0.06) !important;
  border: 1px solid rgba(0,255,136,0.16) !important;
  border-radius: 3px !important;
  padding: 3px 7px !important;
}
.mm-live-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: rgba(0,255,136,0.95) !important;
  box-shadow: 0 0 4px rgba(0,255,136,0.6) !important;
  animation: mmDotBeat 2.2s ease-in-out infinite !important;
  flex-shrink: 0 !important;
}
.mm-close-btn {
  width: 22px !important;
  height: 22px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(155,170,192,0.45) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  flex-shrink: 0 !important;
}
.mm-close-btn:hover {
  background: rgba(255,45,85,0.10) !important;
  border-color: rgba(255,45,85,0.32) !important;
  color: rgba(255,45,85,0.85) !important;
}

/* ══════════════════════════════════════════
   LAYER TABS — pill segmented control
══════════════════════════════════════════ */
.mm-layer-tabs {
  display: flex !important;
  gap: 0 !important;
  padding: 8px 14px !important;
  flex-shrink: 0 !important;
  background: rgba(255,255,255,0.018) !important;
}
/* Inner pill track */
.mm-layer-tabs-inner {
  display: flex !important;
  width: 100% !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 6px !important;
  padding: 2px !important;
  gap: 2px !important;
}
.mm-ltab {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 7px 10px !important;
  font-family: var(--mono) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.11em !important;
  color: rgba(155,170,192,0.50) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  position: relative !important;
}
.mm-ltab:hover:not(.mm-ltab-on) {
  color: rgba(155,170,192,0.75) !important;
  background: rgba(255,255,255,0.04) !important;
}
.mm-ltab.mm-ltab-on {
  color: rgba(59,130,246,0.95) !important;
  background: rgb(29 30 34 / 10%) !important;
  border: 1px solid rgb(59 130 246 / 5%) !important;
  box-shadow:
    0 0 14px rgba(59,130,246,0.084),
    inset 0 1px 0 rgba(59,130,246,0.07) !important;
}
/* Glyph in each tab */
.mm-ltab-glyph {
  font-size: 11px !important;
  line-height: 1 !important;
  opacity: 0.7 !important;
}
.mm-ltab.mm-ltab-on .mm-ltab-glyph { opacity: 1 !important; }

/* ══════════════════════════════════════════
   CONTENT SCROLL AREA
══════════════════════════════════════════ */
.mm-content {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  -webkit-overflow-scrolling: touch !important;
}
.mm-content::-webkit-scrollbar { width: 3px !important; }
.mm-content::-webkit-scrollbar-track { background: transparent !important; }
.mm-content::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.15) !important; border-radius: 2px !important; }
.mm-content::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.30) !important; }

/* Layer visibility — fade transition */
.mm-layer { display: none !important; flex-direction: column !important; gap: 0 !important; }
.mm-layer.mm-layer-active {
  display: flex !important;
  animation: mmFadeUp 0.20s ease both !important;
}

/* ── Group spacing system ──
   Cards in the same logical group sit 8px apart.
   Between groups: 14px via a spacer element (.mm-group-gap) or
   the first card in each group carrying margin-top: 14px.
   We achieve this by giving every .mm-card a default margin-top
   and overriding the first card in a group to 14px. */
.mm-card { margin-top: 8px !important; }
.mm-card:first-child,
.mm-card.mm-group-start { margin-top: 0 !important; }
.mm-group-gap {
  height: 14px !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════
   REGIME BANNER — primary signal, deepest surface
══════════════════════════════════════════ */
/* ══════════════════════════════════════════
   REGIME BANNER — primary signal (redesigned)
   Heavyweight institutional read — the most
   important piece of information in the tray.
══════════════════════════════════════════ */
.mm-regime-banner {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  position: relative !important;
  background:
    radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(105deg,
      rgba(0,255,136,0.055) 0%,
      rgba(0,255,136,0.016) 40%,
      transparent 65%),
    linear-gradient(180deg, #161b22 0%, #131824 100%) !important;
  background-size: 18px 18px, 100% 100%, 100% 100% !important;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 0 32px rgba(0,255,136,0.05) !important;
  min-height: 88px !important;
}

/* Thick left accent bar */
.mm-regime-banner::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg,
    rgba(0,255,136,1.0) 0%,
    rgba(0,255,136,0.55) 100%) !important;
  box-shadow: 2px 0 12px rgba(0,255,136,0.28) !important;
  animation: mmRegimePulse 3s ease-in-out infinite !important;
}

/* Right-side vignette — draws eye left toward the signal */
.mm-regime-banner::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    transparent 55%,
    rgba(0,0,0,0.22) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Negative regime */
.mm-regime-banner.mm-regime-neg {
  background:
    radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(105deg,
      rgba(255,45,85,0.055) 0%,
      rgba(255,45,85,0.016) 40%,
      transparent 65%),
    linear-gradient(180deg, #1b1014 0%, #120d10 100%) !important;
  background-size: 18px 18px, 100% 100%, 100% 100% !important;
  border-color: rgba(255,45,85,0.18) !important;
  border-top-color: rgba(255,45,85,0.30) !important;
  box-shadow:
    0 2px 16px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.40),
    0 0 32px rgba(255,45,85,0.05) !important;
}
.mm-regime-banner.mm-regime-neg::before {
  background: linear-gradient(180deg,
    rgba(255,45,85,1.0) 0%,
    rgba(255,45,85,0.55) 100%) !important;
  box-shadow: 2px 0 12px rgba(255,45,85,0.28) !important;
  animation: mmRegimePulseRed 3s ease-in-out infinite !important;
}
.mm-regime-banner.mm-regime-neg::after {
  background: linear-gradient(90deg,
    transparent 55%,
    rgba(0,0,0,0.22) 100%) !important;
}

/* Left content block — covers both class names for safety */
.mm-regime-left,
.mm-regime-inner {
  padding: 14px 16px 14px 22px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  flex: 1 !important;
  min-width: 0 !important;
  align-self: stretch !important;
}

/* Eyebrow label with accent dash */
.mm-regime-label {
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  letter-spacing: 0.20em !important;
  color: rgba(155,170,192,0.55) !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 6px !important;
}
.mm-regime-label::before {
  content: '' !important;
  display: inline-block !important;
  width: 12px !important;
  height: 1px !important;
  background: rgba(0,255,136,0.50) !important;
  flex-shrink: 0 !important;
}
.mm-regime-banner.mm-regime-neg .mm-regime-label::before {
  background: rgba(255,45,85,0.50) !important;
}

/* Hero regime name — Rajdhani for weight without terminal feel */
.mm-regime-val {
  font-family: 'Rajdhani', var(--mono) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #00ff88 !important;
  letter-spacing: 0.04em !important;
  line-height: 1 !important;
  text-shadow:
    0 0 24px rgba(0,255,136,0.45),
    0 0 48px rgba(0,255,136,0.18) !important;
}
.mm-regime-banner.mm-regime-neg .mm-regime-val {
  color: rgba(255,45,85,0.98) !important;
  text-shadow:
    0 0 24px rgba(255,45,85,0.45),
    0 0 48px rgba(255,45,85,0.18) !important;
}

/* Description line */
.mm-regime-desc {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: rgba(155,170,192,0.60) !important;
  letter-spacing: 0.04em !important;
  margin-top: 7px !important;
  line-height: 1.4 !important;
}

/* Right — Gamma flip block, elevated inset panel */
.mm-regime-flip {
  padding: 0 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 5px !important;
  position: relative !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
  background: rgba(0,0,0,0.28) !important;
  border-left: 1px solid rgba(255,255,255,0.07) !important;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.04) !important;
  min-width: 130px !important;
}
.mm-rf-label {
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  letter-spacing: 0.16em !important;
  color: rgba(155,170,192,0.52) !important;
  text-transform: uppercase !important;
}
.mm-rf-val {
  font-family: 'Rajdhani', var(--mono) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: rgba(255,175,0,0.95) !important;
  letter-spacing: 0.03em !important;
  line-height: 1 !important;
  text-shadow:
    0 0 18px rgba(255,170,0,0.42),
    0 0 36px rgba(255,170,0,0.16) !important;
}
/* Distance pill */
.mm-rf-dist {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: rgba(255,170,0,0.10) !important;
  border: 1px solid rgba(255,170,0,0.28) !important;
  color: rgba(255,170,0,0.85) !important;
  box-shadow: inset 0 1px 0 rgba(255,170,0,0.08) !important;
}

/* ══════════════════════════════════════════
   CARDS — depth-stacked surface system
══════════════════════════════════════════ */
.mm-card {
  background: #0c0e13 !important;
  border-radius: 7px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25) !important;
}

/* Card header — slightly raised vs card body */
.mm-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 9px 12px !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  /* Header sits one step lighter than card body */
  background: rgba(255,255,255,0.028) !important;
}
.mm-card-title {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-family: var(--mono) !important;
  font-size: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.13em !important;
  color: rgba(155,170,192,0.65) !important;
}
.mm-card-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.mm-dot-cyan  {
  background: rgba(59,130,246,0.85) !important;
  box-shadow: 0 0 7px rgba(59,130,246,0.35) !important;
}
.mm-dot-green {
  background: rgba(0,255,136,0.85) !important;
  box-shadow: 0 0 7px rgba(0,255,136,0.50) !important;
}
.mm-dot-amber {
  background: rgba(255,170,0,0.85) !important;
  box-shadow: 0 0 7px rgba(255,170,0,0.50) !important;
}
.mm-card-badge {
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.10em !important;
  color: rgba(155,170,192,0.28) !important;
  white-space: nowrap !important;
}
.mm-card-controls {
  display: flex !important;
  gap: 3px !important;
}
.mm-ctrl-btn {
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  letter-spacing: 0.08em !important;
  padding: 3px 9px !important;
  border-radius: 3px !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  background: transparent !important;
  color: rgba(155,170,192,0.38) !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
.mm-ctrl-btn:hover {
  color: rgba(155,170,192,0.72) !important;
  border-color: rgba(255,255,255,0.13) !important;
  background: rgba(255,255,255,0.03) !important;
}
.mm-ctrl-btn.mm-ctrl-on {
  background: rgba(59,130,246,0.09) !important;
  border-color: rgba(59,130,246,0.28) !important;
  color: rgba(59,130,246,0.85) !important;
  box-shadow: 0 0 8px rgba(59,130,246,0.07) !important;
}
.mm-card-body {
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}
.mm-card-body-nopad { padding: 0 !important; }

/* ══════════════════════════════════════════
   GEX CHART — taller, dominant-side emphasis
══════════════════════════════════════════ */
.mm-gex-chart {
  height: 160px !important;
  background: rgba(0,0,0,0.28) !important;
  border-radius: 5px !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.mm-gex-bars {
  display: flex !important;
  align-items: flex-end !important;
  gap: 2px !important;
  height: 100% !important;
  padding: 14px 8px 22px !important;
  width: 100% !important;
  position: relative !important;
}
.mm-gex-bar-wrap {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  flex: 1 !important;
  height: 100% !important;
  position: relative !important;
}
/* Dominant side (pos gamma) — full brightness */
.mm-gex-bar-pos {
  width: 100% !important;
  border-radius: 2px 2px 0 0 !important;
  min-height: 2px !important;
  background: rgba(16,185,129,0.72) !important;
  box-shadow: 0 -1px 6px rgba(16,185,129,0.25) !important;
  transition: height 0.5s cubic-bezier(.34,1.2,.64,1) !important;
  flex-shrink: 0 !important;
  margin-top: auto !important;
}
/* Negative gamma — subordinate opacity */
.mm-gex-bar-neg {
  width: 100% !important;
  border-radius: 0 0 2px 2px !important;
  min-height: 2px !important;
  background: rgba(244,63,94,0.50) !important;
  box-shadow: 0 1px 4px rgba(244,63,94,0.15) !important;
  transition: height 0.5s cubic-bezier(.34,1.2,.64,1) !important;
  flex-shrink: 0 !important;
}
/* When negative regime is dominant, flip opacities */
.mm-regime-neg-mode .mm-gex-bar-neg  { background: rgba(244,63,94,0.75) !important; box-shadow: 0 1px 8px rgba(244,63,94,0.28) !important; }
.mm-regime-neg-mode .mm-gex-bar-pos  { background: rgba(16,185,129,0.40) !important; box-shadow: none !important; }

.mm-gex-bar-strike {
  font-family: var(--mono) !important;
  font-size: 5.5px !important;
  color: rgba(155,170,192,0.32) !important;
  position: absolute !important;
  bottom: 4px !important;
  white-space: nowrap !important;
  transform: rotate(-45deg) !important;
}

/* Zero line — prominent with ambient glow */
.mm-gex-zero-line {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(255,255,255,0.22) !important;
  box-shadow:
    0 0 6px rgba(255,255,255,0.12),
    0 -1px 0 rgba(255,255,255,0.04),
    0  1px 0 rgba(255,255,255,0.04) !important;
}

/* Price marker — lifted above bars in amber */
.mm-gex-price-marker {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  background: linear-gradient(180deg,
    rgba(255,170,0,0.0)  0%,
    rgba(255,170,0,0.85) 15%,
    rgba(255,170,0,0.85) 85%,
    rgba(255,170,0,0.0) 100%) !important;
  box-shadow: 0 0 8px rgba(255,170,0,0.35) !important;
}
.mm-gex-price-tag {
  position: absolute !important;
  top: 4px !important;
  transform: translateX(-50%) !important;
  font-family: var(--mono) !important;
  font-size: 6.5px !important;
  font-weight: 700 !important;
  color: rgba(255,185,0,0.95) !important;
  white-space: nowrap !important;
  background: rgba(5,7,12,0.92) !important;
  border: 1px solid rgba(255,170,0,0.28) !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  box-shadow: 0 0 8px rgba(255,170,0,0.15) !important;
}

/* ── GEX levels — pill-row layout ── */
.mm-gex-levels {
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}
.mm-gex-lvl {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding: 7px 10px !important;
  border-radius: 5px !important;
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.15s !important;
}
.mm-gex-lvl:hover { background: rgba(255,255,255,0.02) !important; }

/* Coloured glow dot — replaces the 2px border */
.mm-gex-lvl-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.mm-gex-lvl-call .mm-gex-lvl-dot {
  background: rgba(255,45,85,0.85) !important;
  box-shadow: 0 0 8px rgba(255,45,85,0.55) !important;
}
.mm-gex-lvl-flip .mm-gex-lvl-dot {
  background: rgba(255,170,0,0.85) !important;
  box-shadow: 0 0 8px rgba(255,170,0,0.55) !important;
}
.mm-gex-lvl-put .mm-gex-lvl-dot {
  background: rgba(0,255,136,0.85) !important;
  box-shadow: 0 0 8px rgba(0,255,136,0.55) !important;
}
/* Keep border-left classes for backwards compat but reduce to invisible */
.mm-gex-lvl-call { border-left: none !important; }
.mm-gex-lvl-flip { border-left: none !important; }
.mm-gex-lvl-put  { border-left: none !important; }

.mm-gex-lvl-label {
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  letter-spacing: 0.10em !important;
  color: rgba(155,170,192,0.48) !important;
  flex-shrink: 0 !important;
  width: 68px !important;
  text-transform: uppercase !important;
}
.mm-gex-lvl-val {
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(210,220,235,0.90) !important;
  flex-shrink: 0 !important;
  width: 78px !important;
  letter-spacing: 0.02em !important;
}
.mm-gex-lvl-note {
  font-family: var(--font) !important;
  font-size: 8px !important;
  font-style: italic !important;
  color: rgba(155,170,192,0.35) !important;
  line-height: 1.35 !important;
}

/* ══════════════════════════════════════════
   OI GRID — 4-column, readable rows
══════════════════════════════════════════ */
.mm-oi-grid {
  overflow: hidden !important;
}
.mm-oi-header {
  display: grid !important;
  grid-template-columns: 82px 1fr 1fr 58px !important;
  gap: 4px !important;
  padding: 6px 10px !important;
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.10em !important;
  color: rgba(155,170,192,0.32) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  text-transform: uppercase !important;
}
.mm-oi-row {
  display: grid !important;
  grid-template-columns: 82px 1fr 1fr 58px !important;
  gap: 4px !important;
  padding: 7px 10px !important;
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: rgba(155,170,192,0.65) !important;
  border-bottom: 1px solid rgba(255,255,255,0.028) !important;
  transition: background 0.12s !important;
  align-items: center !important;
}
.mm-oi-row:hover { background: rgba(255,255,255,0.025) !important; }

/* ATM row — the anchor of the whole table */
.mm-oi-row.mm-oi-atm {
  background: rgba(255,170,0,0.06) !important;
  border-left: 3px solid rgba(255,170,0,0.65) !important;
  border-bottom-color: rgba(255,170,0,0.10) !important;
  padding-left: 7px !important;
}
.mm-oi-row.mm-oi-atm .mm-oi-strike {
  color: rgba(255,190,0,0.95) !important;
  text-shadow: 0 0 10px rgba(255,170,0,0.30) !important;
}

.mm-oi-strike { font-weight: 700 !important; color: rgba(210,220,235,0.82) !important; }
.mm-oi-calls  { color: rgba(0,255,136,0.75) !important; font-weight: 600 !important; }
.mm-oi-puts   { color: rgba(255,45,85,0.75) !important; font-weight: 600 !important; }
.mm-oi-badge {
  font-size: 7px !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
  letter-spacing: 0.07em !important;
  text-align: center !important;
  font-weight: 700 !important;
}
.mm-oi-badge-atm  { background: rgba(255,170,0,0.14) !important; color: rgba(255,185,0,0.90) !important; }
.mm-oi-badge-call { background: rgba(255,45,85,0.10) !important; color: rgba(255,65,95,0.80) !important; }
.mm-oi-badge-put  { background: rgba(0,255,136,0.09) !important; color: rgba(0,230,120,0.75) !important; }
.mm-oi-badge-pin  { background: rgba(255,170,0,0.10) !important; color: rgba(255,170,0,0.75) !important; }

/* ══════════════════════════════════════════
   DEALER PRESSURE BARS — fat, readable meters
══════════════════════════════════════════ */
.mm-pressure-row {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.mm-pressure-item { display: flex !important; flex-direction: column !important; gap: 4px !important; }

/* Label row: metric name on left, value on right */
.mm-pi-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.mm-pi-label {
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  letter-spacing: 0.10em !important;
  color: rgba(155,170,192,0.42) !important;
  text-transform: uppercase !important;
}
/* Bar track — taller, clearly a meter */
.mm-pi-bar-wrap {
  height: 8px !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
}
.mm-pi-bar {
  height: 100% !important;
  border-radius: 4px !important;
  transition: width 0.65s cubic-bezier(.34,1.1,.64,1) !important;
  animation: mmBarFill 0.65s cubic-bezier(.34,1.1,.64,1) both !important;
  position: relative !important;
}
/* Value label sits inside bar when bar is wide enough */
.mm-pi-bar::after {
  content: attr(data-val) !important;
  position: absolute !important;
  right: 6px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--mono) !important;
  font-size: 6px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  color: rgba(0,0,0,0.55) !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}
.mm-pi-bar-green {
  background: linear-gradient(90deg, rgba(16,185,129,0.55) 0%, rgba(0,235,150,0.80) 100%) !important;
  box-shadow: 0 0 10px rgba(16,185,129,0.30) !important;
}
.mm-pi-bar-red {
  background: linear-gradient(90deg, rgba(244,63,94,0.55) 0%, rgba(255,80,100,0.80) 100%) !important;
  box-shadow: 0 0 10px rgba(244,63,94,0.30) !important;
}
.mm-pi-bar-cyan {
  background: linear-gradient(90deg, rgba(0,190,190,0.55) 0%, rgba(59,130,246,0.80) 100%) !important;
  box-shadow: 0 0 10px rgba(59,130,246,0.21) !important;
}
/* Standalone value (right of label row) */
.mm-pi-val {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: rgba(210,220,235,0.75) !important;
  letter-spacing: 0.04em !important;
}

/* Regime readout grid */
.mm-regime-read {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
.mm-rr-item {
  background: rgba(0,0,0,0.22) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 5px !important;
  padding: 9px 10px !important;
}
.mm-rr-label {
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.10em !important;
  color: rgba(155,170,192,0.32) !important;
  margin-bottom: 5px !important;
  text-transform: uppercase !important;
}
.mm-rr-val {
  font-family: var(--font) !important;
  font-size: 9.5px !important;
  color: rgba(155,170,192,0.65) !important;
  line-height: 1.4 !important;
}
.mm-rr-val-amber { color: rgba(255,175,0,0.80) !important; }

/* ══════════════════════════════════════════
   ON-CHAIN ENTITIES
══════════════════════════════════════════ */
.mm-onchain-entities {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}
.mm-entity {
  background: rgba(0,0,0,0.2) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  border-radius: 4px !important;
  padding: 8px !important;
}
.mm-entity-name {
  font-family: var(--mono) !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(155,170,192,0.45) !important;
  margin-bottom: 5px !important;
}
.mm-entity-flow {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 3px !important;
}
.mm-ef-dir {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: rgba(155,170,192,0.5) !important;
}
.mm-ef-vol {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  color: rgba(155,170,192,0.4) !important;
}
.mm-entity-status {
  font-family: var(--font) !important;
  font-size: 7.5px !important;
  color: rgba(155,170,192,0.25) !important;
}

/* Exchange flow bars */
.mm-exflow {
  background: rgba(0,0,0,0.2) !important;
  border-radius: 4px !important;
  padding: 10px !important;
}
.mm-exflow-head {
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.1em !important;
  color: rgba(155,170,192,0.3) !important;
  margin-bottom: 8px !important;
}
.mm-exflow-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}
.mm-exflow-lbl {
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.08em !important;
  color: rgba(155,170,192,0.3) !important;
  width: 65px !important;
  flex-shrink: 0 !important;
}
.mm-exflow-bar-wrap {
  flex: 1 !important;
  height: 4px !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.mm-exflow-fill {
  height: 100% !important;
  border-radius: 2px !important;
  transition: width 0.5s ease !important;
}
.mm-exflow-val {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  color: rgba(200,208,220,0.55) !important;
  width: 46px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}
.mm-exflow-signal {
  font-family: var(--font) !important;
  font-size: 8px !important;
  color: rgba(155,170,192,0.25) !important;
  margin-top: 4px !important;
  text-align: center !important;
}

/* ══════════════════════════════════════════
   EXECUTION STATUS BAR
══════════════════════════════════════════ */
.mm-exec-status {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  gap: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.mm-exec-stat-item {
  padding: 9px 10px !important;
  border-right: 1px solid rgba(255,255,255,0.04) !important;
}
.mm-exec-stat-item:last-child { border-right: none !important; }
.mm-exec-stat-lbl {
  font-family: var(--mono) !important;
  font-size: 6.5px !important;
  letter-spacing: 0.1em !important;
  color: rgba(155,170,192,0.3) !important;
  margin-bottom: 3px !important;
}
.mm-exec-stat-val {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(200,208,220,0.7) !important;
}
.mm-spread-val { color: rgba(59,130,246,0.8) !important; }

/* ══════════════════════════════════════════
   HEATMAP
══════════════════════════════════════════ */
.mm-heatmap-wrap {
  position: relative !important;
  height: 160px !important;
  overflow: hidden !important;
}
.mm-heatmap-canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.mm-heatmap-price-line {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(255,170,0,0.7) !important;
  top: 50% !important;
  pointer-events: none !important;
}
#mmHeatmapPriceTag {
  position: absolute !important;
  right: 6px !important;
  top: -8px !important;
  font-family: var(--mono) !important;
  font-size: 7px !important;
  color: rgba(255,170,0,0.9) !important;
  background: rgba(8,10,16,0.9) !important;
  padding: 1px 4px !important;
  border-radius: 2px !important;
}
.mm-heatmap-labels {
  position: absolute !important;
  right: 4px !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  pointer-events: none !important;
}
.mm-spoof-alert {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 7px 12px !important;
  background: rgba(255,170,0,0.05) !important;
  border-top: 1px solid rgba(255,170,0,0.15) !important;
  font-family: var(--mono) !important;
  font-size: 8px !important;
  color: rgba(255,170,0,0.75) !important;
  letter-spacing: 0.06em !important;
}

/* ══════════════════════════════════════════
   CVD CANVAS
══════════════════════════════════════════ */
.mm-cvd-canvas {
  width: 100% !important;
  height: 110px !important;
  display: block !important;
}
.mm-cvd-stats {
  display: grid !important;
  grid-template-columns: repeat(4,1fr) !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}
.mm-cvd-stat {
  padding: 8px 10px !important;
  border-right: 1px solid rgba(255,255,255,0.03) !important;
}
.mm-cvd-stat:last-child { border-right: none !important; }
.mm-cvd-stat-lbl {
  font-family: var(--mono) !important;
  font-size: 6.5px !important;
  letter-spacing: 0.09em !important;
  color: rgba(155,170,192,0.3) !important;
  margin-bottom: 3px !important;
}
.mm-cvd-stat-val {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(200,208,220,0.7) !important;
}
.mm-color-green { color: rgba(0,255,136,0.8) !important; }
.mm-color-red   { color: rgba(255,45,85,0.8) !important; }

/* ══════════════════════════════════════════
   FOOTPRINT
══════════════════════════════════════════ */
.mm-footprint { display: flex !important; flex-direction: column !important; }
.mm-fp-header {
  display: grid !important;
  grid-template-columns: 80px 1fr 1fr 70px !important;
  gap: 4px !important;
  padding: 5px 8px !important;
  font-family: var(--mono) !important;
  font-size: 7px !important;
  letter-spacing: 0.09em !important;
  color: rgba(155,170,192,0.3) !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}
.mm-fp-row {
  display: grid !important;
  grid-template-columns: 80px 1fr 1fr 70px !important;
  gap: 4px !important;
  padding: 4px 8px !important;
  font-family: var(--mono) !important;
  font-size: 8.5px !important;
  border-bottom: 1px solid rgba(255,255,255,0.025) !important;
  align-items: center !important;
  transition: background 0.1s !important;
}
.mm-fp-row:hover { background: rgba(255,255,255,0.02) !important; }
.mm-fp-row.mm-fp-absorb {
  background: rgba(0,255,136,0.04) !important;
  border-color: rgba(0,255,136,0.12) !important;
}
.mm-fp-price { color: rgba(200,208,220,0.7) !important; font-weight: 600 !important; }
.mm-fp-buys  { color: rgba(0,255,136,0.7) !important; }
.mm-fp-sells { color: rgba(255,45,85,0.7) !important; }
.mm-fp-delta { color: rgba(155,170,192,0.5) !important; }
.mm-fp-bar-cell { position: relative !important; }
.mm-fp-bar-fill {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  opacity: 0.08 !important;
  border-radius: 1px !important;
}

/* Absorption signal */
.mm-absorption-signal {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 10px !important;
  background: rgba(0,255,136,0.04) !important;
  border: 1px solid rgba(0,255,136,0.12) !important;
  border-radius: 4px !important;
  margin-top: 4px !important;
}
.mm-abs-icon { flex-shrink: 0 !important; margin-top: 1px !important; }
.mm-abs-title {
  font-family: var(--mono) !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  color: rgba(0,255,136,0.7) !important;
  margin-bottom: 3px !important;
}
.mm-abs-desc {
  font-family: var(--font) !important;
  font-size: 8.5px !important;
  color: rgba(155,170,192,0.45) !important;
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════
   SPREAD CANVAS
══════════════════════════════════════════ */
.mm-spread-canvas {
  width: 100% !important;
  height: 80px !important;
  display: block !important;
}
.mm-spread-read {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  border-top: 1px solid rgba(255,255,255,0.04) !important;
}
.mm-sr-item {
  padding: 7px 10px !important;
  border-right: 1px solid rgba(255,255,255,0.03) !important;
}
.mm-sr-item:last-child { border-right: none !important; }
.mm-sr-label {
  font-family: var(--mono) !important;
  font-size: 6.5px !important;
  letter-spacing: 0.09em !important;
  color: rgba(155,170,192,0.3) !important;
  margin-bottom: 3px !important;
}
.mm-sr-val {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(200,208,220,0.7) !important;
}

/* ══════════════════════════════════════════
   FOOTER GUIDE
══════════════════════════════════════════ */
.mm-footer {
  background: var(--bg, #0A0E17) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  padding: 10px 14px !important;
  flex-shrink: 0 !important;
}
.mm-footer-inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
}
.mm-fg-icon {
  font-size: 10px !important;
  color: rgba(59,130,246,0.4) !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}
.mm-fg-text {
  font-family: var(--font) !important;
  font-size: 9px !important;
  color: rgba(155,170,192,0.48) !important;
  line-height: 1.5 !important;
}

/* ══════════════════════════════════════════
   MISC UTILS
══════════════════════════════════════════ */
.mm-chart-loading, .mm-oi-loading, .mm-fp-loading {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  color: rgba(155,170,192,0.25) !important;
  font-family: var(--mono) !important;
  font-size: 8px !important;
  letter-spacing: 0.1em !important;
}
.mm-spinner {
  width: 10px !important;
  height: 10px !important;
  border: 1px solid rgba(59,130,246,0.2) !important;
  border-top-color: rgba(59,130,246,0.7) !important;
  border-radius: 50% !important;
  animation: mmSpin 0.8s linear infinite !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}
@keyframes mmSpin { to { transform: rotate(360deg); } }


} /* end MM monitor @media 1024px */

/* ════════════════════════════════════════════════════════════════
   CRYPTO NEWS PANEL — desktop bento overrides
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* swZoneB matches col 1 + col 3 explicit height */
  #bentoDashboard #swZoneB {
    align-self: start !important;
    height: 282px !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* DXY card: cancel the grid-column:2/4 span — causes implicit track inflation in bento */
  #bentoDashboard #macroMini .mc-card-dxy {
    grid-column: auto !important;
  }

  /* Remove the fit-content row sizing — not needed with start alignment */
  #bentoDashboard .bd-row-bot {
    grid-template-rows: unset !important;
  }

  /* Col 3 matches col 1: explicit height mirrors hero's content height */
  #bentoDashboard #hero {
    align-self: start !important;
    height: 282px !important;
    min-height: 0 !important;
  }

  #bentoDashboard #cryptoNewsPanel {
    align-self: start !important;
    height: 282px !important;
    min-height: 0 !important;
  }

  /* Feed fills remaining space */
  #bentoDashboard #cryptoNewsPanel .bd-news-feed {
    flex: 1 !important;
    min-height: 0 !important;
  }

  /* Header */
  #bentoDashboard #cryptoNewsPanel .bd-news-panel-head {
    padding: 14px 16px 10px !important;
  }
  #bentoDashboard #cryptoNewsPanel .bd-news-panel-ttl {
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  /* Watchlist focus inside ops card */
  #bentoDashboard #swWalletCard .bd-ops-wlf {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  #bentoDashboard #swWalletCard .bd-ops-wlf .bd-wlf-name   { font-size: 13px !important; font-weight: 700 !important; }
  #bentoDashboard #swWalletCard .bd-ops-wlf .bd-wlf-price  { font-size: 22px !important; font-weight: 900 !important; letter-spacing: -.02em !important; }
  #bentoDashboard #swWalletCard .bd-ops-wlf .bd-wlf-chart-wrap {
    flex: none !important;
    height: 130px !important;
    min-height: 130px !important;
  }

  /* Ops card: make sure txn-list still scrolls and doesn't collapse */
  #bentoDashboard #swWalletCard .bd-ops-txn-list {
    flex: 1 !important;
    min-height: 60px !important;
  }


  /* ══════════════════════════════════════════════════════════════════
     SWING MULTICHART — desktop-shell overrides
     ══════════════════════════════════════════════════════════════════ */

  /* Pane container — flex row/col inside the chart-card-main body */
  #swingChartPanes {
    height: 100% !important;
    min-height: 0 !important;
    padding: 8px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  /* Each pane inherits the desktop surface/border tokens */
  .sw-pane {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }
  /* Override the cyan ::before accent with the subtler desktop line */
  .sw-pane::before {
    background: linear-gradient(90deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.03) 60%,
      transparent 100%) !important;
    height: 1px !important;
  }

  /* Pane header */
  .sw-pane-hdr {
    padding: 7px 12px 6px !important;
    border-bottom: 1px solid var(--border) !important;
    background: rgba(255,255,255,0.018) !important;
  }

  /* Pane label text */
  .sw-pane-lbl {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1em !important;
    color: var(--text2) !important;
  }

  /* Live dot */
  .sw-pane-dot {
    background: var(--cyan) !important;
    box-shadow: 0 0 4px var(--cyan-glow) !important;
  }

  /* TF buttons inside pane header — reuse .ctf-btn desktop rules */
  .sw-tf-row .ctf-btn {
    font-family: var(--mono) !important;
    font-size: 8.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    border-radius: 4px !important;
    padding: 2px 5px !important;
    color: var(--text2) !important;
    border-color: var(--border) !important;
    text-shadow: none !important;
    white-space: nowrap !important;
  }
  .sw-tf-row .ctf-btn:hover {
    color: var(--text) !important;
    background: rgba(255,255,255,0.04) !important;
    border-color: var(--border2) !important;
  }
  .sw-tf-row .ctf-btn.ctf-on {
    color: var(--cyan) !important;
    background: var(--cyan-dim) !important;
    border-color: var(--border3) !important;
    text-shadow: none !important;
  }

  /* Layout toggle button group */
  #swingChartLayoutBar {
    margin-left: 10px !important;
  }
  .mc-layout-btn {
    width: 22px !important;
    height: 20px !important;
    border-radius: 4px !important;
    border-color: var(--border) !important;
    color: var(--text2) !important;
  }
  .mc-layout-btn:hover {
    color: var(--cyan) !important;
    border-color: var(--border3) !important;
    background: var(--cyan-dim) !important;
  }
  .mc-layout-btn.mc-on {
    color: var(--cyan) !important;
    border-color: var(--border3) !important;
    background: var(--cyan-dim) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

} /* end @media */

/* Hide "Total assets" subtitle — redundant label */
#swPriceCard .bd-ev-sub { display: none !important; }

/* ── Cycle tray + button: mobile hidden, desktop-only ── */
@media (max-width: 1023px) {
  #cycleTray,
  #cycleTrayBtn {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   CYCLE INTELLIGENCE TRAY — right-side slide-in panel (desktop only)
   Mirror of the MM Monitor pattern but from the right edge.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hide all mobile swipe-hint arrows above mobile breakpoint ── */
@media (min-width: 769px) {
  #mTickerSwipeHint,
  #mTickerCloseHint,
  #mChartSwipeHint,
  #mChartCloseHint {
    display: none !important;
  }
}

@media (min-width: 1024px) {

  /* ── Cycle tray button in topbar ── */
  #cycleTrayBtn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(59,130,246,0.15) !important;
    background: transparent !important;
    color: rgba(59,130,246,0.6) !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
  }
  #cycleTrayBtn:hover {
    background: rgba(59,130,246,0.08) !important;
    border-color: rgba(59,130,246,0.35) !important;
    color: rgba(59,130,246,0.95) !important;
  }
  #cycleTrayBtn.ct-active {
    background: rgba(59,130,246,0.12) !important;
    border-color: rgba(59,130,246,0.45) !important;
    box-shadow: 0 0 10px rgba(59,130,246,0.084) !important;
  }
  #cycleTrayBtn.ct-active svg circle,
  #cycleTrayBtn.ct-active svg path {
    stroke: rgba(59,130,246,1) !important;
  }

  /* ── Cycle tray outer panel / tongue tab / sliding body — REMOVED.
     #cycleTray was deleted once the Position Calculator was fully
     migrated to #stickyDrawer2 and confirmed working there. The header,
     close button, and scroll-area classes below (.ct-header, .ct-close-btn,
     .ct-scroll) are kept — #stickyDrawer2 still uses them directly. ── */

  /* ── Tray header ── */
  .ct-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px 8px !important;
    border-bottom: 1px solid rgba(59,130,246,0.1) !important;
    background: linear-gradient(165deg, rgb(31 32 36 / 32%) 0%, rgba(8, 9, 15, 1) 55%, rgba(255, 255, 255, 0.08) 100%) !important;
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .ct-header-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .ct-header-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 6px !important;
    background: rgba(59,130,246,0.08) !important;
    border: 1px solid transparent !important;
    border-image: linear-gradient(135deg, rgba(109,40,217,0.65), rgba(37,99,235,0.45)) 1 !important;
    flex-shrink: 0 !important;
  }
  .ct-header-title {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.16em !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
  }
  .ct-header-sub {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.1em !important;
    color: rgba(155,170,192,0.35) !important;
    margin-top: 2px !important;
  }
  .ct-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    background: transparent !important;
    cursor: pointer !important;
    transition: background 0.15s, border-color 0.15s !important;
    flex-shrink: 0 !important;
  }
  .ct-close-btn:hover {
    background: rgba(255,255,255,0.06) !important;
    border-color: rgba(255,255,255,0.15) !important;
  }

  /* ── Scrollable content area ── */
  .ct-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
  .ct-scroll .calc-wrap {
    background: linear-gradient(165deg, rgb(31 32 36 / 32%) 0%, rgba(8, 9, 15, 1) 55%, rgba(255, 255, 255, 0.08) 100%) !important;
  }
  .ct-scroll::-webkit-scrollbar { width: 3px !important; }
  .ct-scroll::-webkit-scrollbar-track { background: transparent !important; }
  .ct-scroll::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.2) !important; border-radius: 2px !important; }
  .ct-scroll::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.4) !important; }

  /* ── Content sections ── */
  .ct-section {
    padding: 14px 16px !important;
  }
  .ct-section:last-child {
    border-bottom: none !important;
    background: #0e1015 !important;
    border-radius: 6px !important;
  }

  /* ── Per-section background overrides ──
     Each panel gets its own rule so changing one never touches the
     others. #dMoonSection is covered by .ct-section:last-child above
     since it's currently the last panel — give it its own rule here
     too if it ever needs a background independent of that position. */
  #dCycleCompareSection  { background: #0e1015 !important; border-radius: 6px !important; }
  #dCycleTrackerSection  { background: #15181e26 !important; }
  #dMonthlyPerfSection   { background: #0e1015 !important; border-radius: 6px !important; }
  #dBearPredSection      { background: transparent !important; }
  #dMovePredSection      { background: transparent !important; }

  /* Section header — label row */
  .ct-sec-hdr {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin-bottom: 12px !important;
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    color: rgba(59,130,246,0.7) !important;
    text-transform: uppercase !important;
  }
  .ct-sec-icon {
    width: 12px !important;
    height: 12px !important;
    stroke: rgba(59,130,246,0.6) !important;
    stroke-width: 1.4 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    flex-shrink: 0 !important;
  }

  /* ── Port the mobile component styles needed inside the tray ── */
  /* NOTE: the Cycles panel was later moved out of #cycleTray (.cycle-tray)
     and into the Market Maker "CYCLES" tab (#mmLayercycles). These rules
     are extended to also match #mmLayercycles so the buttons/cells there
     don't fall back to unstyled native <button> rendering. */

  /* m-cycle-btn — tab buttons inside tray */
  .cycle-tray .m-cycle-btn,
  #mmLayercycles .m-cycle-btn,
  #mmLayerphases .m-cycle-btn {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
    padding: 4px 9px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(59,130,246,0.15) !important;
    background: rgba(59,130,246,0.04) !important;
    color: rgba(155,170,192,0.5) !important;
    cursor: pointer !important;
    transition: all .2s !important;
    user-select: none !important;
  }
  .cycle-tray .m-cycle-btn.active,
  #mmLayercycles .m-cycle-btn.active,
  #mmLayerphases .m-cycle-btn.active {
    background: rgba(59,130,246,0.12) !important;
    border-color: rgba(59,130,246,0.35) !important;
    color: rgba(59,130,246,0.9) !important;
    text-shadow: 0 0 10px rgba(59,130,246,0.21) !important;
  }
  .cycle-tray .m-cycle-btn:hover:not(.active),
  #mmLayercycles .m-cycle-btn:hover:not(.active),
  #mmLayerphases .m-cycle-btn:hover:not(.active) {
    background: rgba(59,130,246,0.07) !important;
    border-color: rgba(59,130,246,0.25) !important;
    color: rgba(155,170,192,0.8) !important;
  }

  /* m-cell — stat cells inside tray */
  .cycle-tray .m-cell,
  #mmLayercycles .m-cell,
  #mmLayerphases .m-cell {
    background: rgba(255,255,255,0.025) !important;
    border-radius: 4px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    transition: background .15s ease, border-color .15s ease, transform .15s ease !important;
  }
  .cycle-tray .m-cell:hover,
  #mmLayercycles .m-cell:hover,
  #mmLayerphases .m-cell:hover {
    background: rgba(255,255,255,0.045) !important;
    border-color: rgba(255,255,255,0.09) !important;
    transform: translateY(-1px) !important;
  }
  .cycle-tray .m-cell-l,
  #mmLayercycles .m-cell-l,
  #mmLayerphases .m-cell-l {
    font-family: var(--mono) !important;
    font-size: 6.5px !important;
    color: rgba(155,170,192,0.4) !important;
    letter-spacing: .09em !important;
    margin-bottom: 3px !important;
  }
  .cycle-tray .m-cell-v,
  #mmLayercycles .m-cell-v,
  #mmLayerphases .m-cell-v {
    font-family: var(--mono) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    line-height: 1 !important;
  }

  /* ── Design-consistency utilities added for the Cycles/Moon panel ──
     .ct-sub-label   — the small mono sub-section labels ("CYCLE PROGRESS",
                        "HISTORICAL SIGNAL ACCURACY", etc). Previously each
                        one hand-rolled its own font-size/color inline, so
                        two of them had drifted to the header's accent blue
                        instead of the neutral gray the others use.
     .ct-card        — hover lift + glow for the banner/prediction cards
                        (tracker banner, bear/move predictor, moon card).
     .ct-mini-stat    — the small 4-up stat boxes inside Bear Market
                        Prediction (previously bare repeated inline styles).
     .ct-skeleton    — shimmer placeholder for values still loading. Add/
                        remove this class in JS when a field shows "—" vs.
                        a real value; see note in chat for the hookup. */

  .cycle-tray .ct-sub-label,
  #mmLayercycles .ct-sub-label,
  #mmLayerphases .ct-sub-label {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: .1em !important;
    color: var(--text3) !important;
  }

  .cycle-tray .ct-card,
  #mmLayercycles .ct-card,
  #mmLayerphases .ct-card {
    transition: transform .18s ease, box-shadow .18s ease, background .4s ease, border-color .4s ease, opacity .6s ease-in-out !important;
  }
  .cycle-tray .ct-card:hover,
  #mmLayercycles .ct-card:hover,
  #mmLayerphases .ct-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.28) !important;
  }

  .cycle-tray .ct-mini-stat,
  #mmLayercycles .ct-mini-stat,
  #mmLayerphases .ct-mini-stat {
    background: rgba(255,255,255,0.03) !important;
    border-radius: 3px !important;
    padding: 5px 7px !important;
    transition: background .15s ease, transform .15s ease !important;
  }
  .cycle-tray .ct-mini-stat:hover,
  #mmLayercycles .ct-mini-stat:hover,
  #mmLayerphases .ct-mini-stat:hover {
    background: rgba(255,255,255,0.055) !important;
    transform: translateY(-1px) !important;
  }
  .cycle-tray .ct-mini-stat-l,
  #mmLayercycles .ct-mini-stat-l,
  #mmLayerphases .ct-mini-stat-l {
    font-family: var(--mono) !important;
    font-size: 6px !important;
    color: rgba(155,170,192,0.35) !important;
    margin-bottom: 2px !important;
  }
  .cycle-tray .ct-mini-stat-v,
  #mmLayercycles .ct-mini-stat-v,
  #mmLayerphases .ct-mini-stat-v {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
  }

  .cycle-tray .ct-skeleton,
  #mmLayercycles .ct-skeleton,
  #mmLayerphases .ct-skeleton {
    position: relative !important;
    color: transparent !important;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.03) 25%,
      rgba(255,255,255,0.08) 50%,
      rgba(255,255,255,0.03) 75%
    ) !important;
    background-size: 200% 100% !important;
    border-radius: 3px !important;
    animation: ctSkeletonShimmer 1.4s ease-in-out infinite !important;
  }
  @keyframes ctSkeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* "Today" marker pulse for timelines (cycle chart / moon phase timeline) */
  .cycle-tray .ct-today-dot,
  #mmLayercycles .ct-today-dot,
  #mmLayerphases .ct-today-dot {
    position: relative !important;
  }
  .cycle-tray .ct-today-dot::after,
  #mmLayercycles .ct-today-dot::after,
  #mmLayerphases .ct-today-dot::after {
    content: '' !important;
    position: absolute !important;
    inset: -4px !important;
    border-radius: 50% !important;
    border: 1px solid rgba(59,130,246,0.5) !important;
    animation: ctTodayPulse 2s ease-out infinite !important;
    pointer-events: none !important;
  }
  @keyframes ctTodayPulse {
    0%   { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.6); opacity: 0; }
  }


  /* Cycle chart SVG width fill */
  .cycle-tray #dCycleChart svg {
    display: block !important;
    width: 100% !important;
  }

  /* Monthly chart scroll */
  .cycle-tray #dMonthlyChart {
    overflow-x: auto !important;
    padding-bottom: 4px !important;
  }
  .cycle-tray #dMonthlyChart::-webkit-scrollbar { height: 3px !important; }
  .cycle-tray #dMonthlyChart::-webkit-scrollbar-track { background: transparent !important; }
  .cycle-tray #dMonthlyChart::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.2) !important; border-radius: 2px !important; }

  /* Tracker banner & history fonts — override mobile vars to desktop vars */
  .cycle-tray #dTrackerPhaseLabel {
    font-family: var(--mono) !important;
    font-size: 16px !important;
  }
  .cycle-tray #dTrackerHistory {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOON PHASES MARKET INDICATOR — Cycle Tray styles
   ══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1024px) {

  /* ── Current moon card ── */
  .moon-current-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 6px !important;
    background: rgba(255,220,100,0.04) !important;
    margin-bottom: 6px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Subtle moon glow behind the card */
  .moon-current-card::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: -20px !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255,220,100,0.07) 0%, transparent 70%) !important;
    pointer-events: none !important;
  }

  .moon-current-left {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Canvas glow */
  #dMoonCanvas {
    border-radius: 50% !important;
    box-shadow: 0 0 12px rgba(255,220,100,0.15) !important;
    display: block !important;
  }

  .moon-current-right {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }

  .moon-phase-name {
    font-family: var(--hdr) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    color: rgba(255,220,100,0.9) !important;
  }

  .moon-phase-date {
    font-family: var(--mono) !important;
    font-size: 7.5px !important;
    color: rgba(155,170,192,0.45) !important;
    letter-spacing: 0.08em !important;
  }

  .moon-signal-badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    border: 1px solid transparent !important;
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    width: fit-content !important;
    transition: all 0.3s !important;
  }

  .moon-next-hint {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    color: rgba(155,170,192,0.4) !important;
    line-height: 1.4 !important;
    letter-spacing: 0.02em !important;
  }

  /* ── Moon timeline SVG scroll container — Lunar Cycle Scrollbar ── */
  #dMoonTimeline {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    /* Reserve space for the fat lunar scrollbar below the SVG */
    padding-bottom: 22px !important;
    /* Firefox: custom scrollbar color */
    scrollbar-width: auto !important;
    scrollbar-color: rgba(255,220,100,0.55) rgba(10,9,20,0.9) !important;
    position: relative !important;
  }

  /* ── WEBKIT LUNAR SCROLLBAR — fat track with phase-arc illusion ── */

  /* Overall scrollbar height — fat enough to render phase icons */
  #dMoonTimeline::-webkit-scrollbar {
    height: 18px !important;
    cursor: pointer !important;
  }

  /* Track — deep space: near-black with a subtle starfield gradient */
  #dMoonTimeline::-webkit-scrollbar-track {
    background:
      /* Faint phase-dot row: 8 equally-spaced translucent circles
         painted as repeating-radial, one dot every 12.5% of width    */
      repeating-linear-gradient(
        90deg,
        transparent 0%,
        transparent calc(12.5% - 1px),
        rgba(255,220,100,0.08) calc(12.5% - 1px),
        rgba(255,220,100,0.08) 12.5%
      ),
      /* Phase glyph dots — 8 phase stops as radial hotspots */
      radial-gradient(circle at  6.25% 50%, rgba(255,220,100,0.18) 0%, transparent 55%),
      radial-gradient(circle at 18.75% 50%, rgba(255,200, 80,0.12) 0%, transparent 50%),
      radial-gradient(circle at 31.25% 50%, rgba(255,180, 60,0.10) 0%, transparent 50%),
      radial-gradient(circle at 43.75% 50%, rgba(255,160, 40,0.09) 0%, transparent 50%),
      radial-gradient(circle at 50.00% 50%, rgba(255,235,150,0.22) 0%, transparent 55%),
      radial-gradient(circle at 56.25% 50%, rgba(255,160, 40,0.09) 0%, transparent 50%),
      radial-gradient(circle at 68.75% 50%, rgba(255,180, 60,0.10) 0%, transparent 50%),
      radial-gradient(circle at 81.25% 50%, rgba(255,200, 80,0.12) 0%, transparent 50%),
      radial-gradient(circle at 93.75% 50%, rgba(255,220,100,0.18) 0%, transparent 55%),
      /* Deep space base */
      linear-gradient(
        180deg,
        #0A0E17 0%,
        #0A0E17 35%,
        #0b0a1e 50%,
        #0A0E17 65%,
        #0A0E17 100%
      ) !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,220,100,0.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,220,100,0.06),
      inset 0 -1px 0 rgba(0,0,0,0.6),
      0 0 8px rgba(255,220,100,0.04) !important;
    /* Phase label pseudo text via background — the real labels live in an SVG overlay (see below) */
    position: relative !important;
  }

  /* Track-piece (the filled portion before/after thumb) */
  #dMoonTimeline::-webkit-scrollbar-track-piece:start {
    background: linear-gradient(90deg,
      rgba(255,220,100,0.06) 0%,
      transparent 100%) !important;
    border-radius: 9px 0 0 9px !important;
  }
  #dMoonTimeline::-webkit-scrollbar-track-piece:end {
    background: transparent !important;
    border-radius: 0 9px 9px 0 !important;
  }

  /* ── THUMB — crescent moon glyph with glow ── */
  #dMoonTimeline::-webkit-scrollbar-thumb {
    /* Moon disc: a filled golden circle */
    background:
      /* Crescent shadow — dark disc offset left-up to carve the crescent shape */
      radial-gradient(circle at 35% 42%, #0A0E17 0%, #0A0E17 52%, transparent 54%),
      /* Main lunar surface — warm gold gradient */
      radial-gradient(circle at 52% 48%,
        rgba(255,240,160,0.98)  0%,
        rgba(255,218, 90,0.95) 30%,
        rgba(230,170, 30,0.90) 60%,
        rgba(180,120, 10,0.80) 85%,
        rgba(120, 70,  0,0.55) 100%
      ) !important;
    border-radius: 9px !important;
    border: 1px solid rgba(255,220,100,0.35) !important;
    box-shadow:
      /* Outer lunar halo */
      0 0 12px rgba(255,220,100,0.55),
      0 0 24px rgba(255,200, 60,0.30),
      0 0 40px rgba(255,180, 20,0.15),
      /* Inner rim light */
      inset 0 1px 2px rgba(255,255,200,0.55),
      inset 0 -1px 2px rgba(100,60,0,0.40) !important;
    min-width: 32px !important;
    cursor: grab !important;
    transition:
      box-shadow 0.25s ease,
      border-color 0.25s ease !important;
  }

  /* Thumb hover — brighter glow, fuller moon look */
  #dMoonTimeline::-webkit-scrollbar-thumb:hover {
    background:
      radial-gradient(circle at 33% 40%, #0A0E17 0%, #0A0E17 50%, transparent 52%),
      radial-gradient(circle at 52% 48%,
        rgba(255,248,200,1.00)  0%,
        rgba(255,228,110,0.98) 28%,
        rgba(240,185, 50,0.93) 58%,
        rgba(200,140, 20,0.85) 82%,
        rgba(140, 85,  5,0.60) 100%
      ) !important;
    border-color: rgba(255,235,120,0.60) !important;
    box-shadow:
      0 0 16px rgba(255,225,100,0.75),
      0 0 32px rgba(255,200, 50,0.45),
      0 0 56px rgba(255,180, 10,0.22),
      inset 0 1px 3px rgba(255,255,220,0.70),
      inset 0 -1px 2px rgba(120,70,0,0.45) !important;
    cursor: grabbing !important;
  }

  /* Thumb active (while dragging) */
  #dMoonTimeline::-webkit-scrollbar-thumb:active {
    background:
      radial-gradient(circle at 30% 38%, #0A0E17 0%, #0A0E17 48%, transparent 50%),
      radial-gradient(circle at 52% 48%,
        #fffff0  0%,
        #ffe878 25%,
        #f5c030 55%,
        #c08010 80%,
        #7a4800 100%
      ) !important;
    border-color: rgba(255,245,140,0.80) !important;
    box-shadow:
      0 0 20px rgba(255,230,100,0.90),
      0 0 40px rgba(255,200, 40,0.55),
      0 0 70px rgba(255,175,  0,0.28),
      inset 0 1px 4px rgba(255,255,240,0.85),
      inset 0 -1px 3px rgba(140,80,0,0.50) !important;
    cursor: grabbing !important;
  }

  /* Corner piece (where vertical/horizontal scrollbars meet — not needed but prevent artefact) */
  #dMoonTimeline::-webkit-scrollbar-corner {
    background: transparent !important;
  }

  /* ── Phase-arc overlay — pure CSS SVG injected via a sibling pseudo approach ──
     Because ::-webkit-scrollbar-track can't hold text, we layer a decorative
     SVG arc ABOVE the scrollbar using a generated element on the wrapper.
     The #dMoonTimeline wrapper must be position:relative (set above).
     The ::after pseudo draws the 8-phase icon row as an SVG data-URI.        */
  #dMoonTimeline::after {
    content: '' !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 0 !important;
    right: 0 !important;
    height: 18px !important;
    pointer-events: none !important;
    /* 8-phase arc painted as SVG background — dark track with crescent/disc glyphs */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='18'%3E%3C!-- deep space track --%3E%3Crect width='320' height='18' rx='9' fill='%2304030d' fill-opacity='0' /%3E%3C!-- phase separator ticks --%3E%3Cline x1='40' y1='4' x2='40' y2='14' stroke='%23ffd464' stroke-opacity='.12' stroke-width='1'/%3E%3Cline x1='80' y1='4' x2='80' y2='14' stroke='%23ffd464' stroke-opacity='.10' stroke-width='1'/%3E%3Cline x1='120' y1='4' x2='120' y2='14' stroke='%23ffd464' stroke-opacity='.10' stroke-width='1'/%3E%3Cline x1='160' y1='4' x2='160' y2='14' stroke='%23ffd464' stroke-opacity='.18' stroke-width='1'/%3E%3Cline x1='200' y1='4' x2='200' y2='14' stroke='%23ffd464' stroke-opacity='.10' stroke-width='1'/%3E%3Cline x1='240' y1='4' x2='240' y2='14' stroke='%23ffd464' stroke-opacity='.10' stroke-width='1'/%3E%3Cline x1='280' y1='4' x2='280' y2='14' stroke='%23ffd464' stroke-opacity='.12' stroke-width='1'/%3E%3C!-- Phase 1: New Moon (dark disc) --%3E%3Ccircle cx='20' cy='9' r='5' fill='%2304030d' stroke='%23ffd464' stroke-opacity='.35' stroke-width='.8'/%3E%3C!-- Phase 2: Waxing Crescent --%3E%3Ccircle cx='60' cy='9' r='5' fill='%23ffd464' fill-opacity='.12' stroke='%23ffd464' stroke-opacity='.2' stroke-width='.6'/%3E%3Cpath d='M60,4 A5,5 0 1,1 60,14 A3,4 0 1,0 60,4 Z' fill='%23ffd464' fill-opacity='.55'/%3E%3C!-- Phase 3: First Quarter --%3E%3Ccircle cx='100' cy='9' r='5' fill='%2304030d' stroke='%23ffd464' stroke-opacity='.2' stroke-width='.6'/%3E%3Crect x='100' y='4' width='5' height='10' fill='%23ffd464' fill-opacity='.65'/%3E%3Ccircle cx='100' cy='9' r='5' fill='none' stroke='%23ffd464' stroke-opacity='.3' stroke-width='.6'/%3E%3C!-- Phase 4: Waxing Gibbous --%3E%3Ccircle cx='140' cy='9' r='5' fill='%23ffd464' fill-opacity='.55' stroke='%23ffd464' stroke-opacity='.2' stroke-width='.6'/%3E%3Cpath d='M140,4 A5,5 0 1,0 140,14 A2,4 0 1,1 140,4 Z' fill='%2304030d'/%3E%3C!-- Phase 5: Full Moon (bright disc) --%3E%3Ccircle cx='160' cy='9' r='6' fill='%23ffd464' fill-opacity='.9' stroke='%23ffe898' stroke-opacity='.7' stroke-width='1'/%3E%3Ccircle cx='160' cy='9' r='8' fill='none' stroke='%23ffd464' stroke-opacity='.18' stroke-width='1.5'/%3E%3C!-- Phase 6: Waning Gibbous --%3E%3Ccircle cx='200' cy='9' r='5' fill='%23ffd464' fill-opacity='.55' stroke='%23ffd464' stroke-opacity='.2' stroke-width='.6'/%3E%3Cpath d='M200,4 A5,5 0 1,1 200,14 A2,4 0 1,0 200,4 Z' fill='%2304030d'/%3E%3C!-- Phase 7: Last Quarter --%3E%3Ccircle cx='240' cy='9' r='5' fill='%2304030d' stroke='%23ffd464' stroke-opacity='.2' stroke-width='.6'/%3E%3Crect x='235' y='4' width='5' height='10' fill='%23ffd464' fill-opacity='.65'/%3E%3Ccircle cx='240' cy='9' r='5' fill='none' stroke='%23ffd464' stroke-opacity='.3' stroke-width='.6'/%3E%3C!-- Phase 8: Waning Crescent --%3E%3Ccircle cx='280' cy='9' r='5' fill='%23ffd464' fill-opacity='.12' stroke='%23ffd464' stroke-opacity='.2' stroke-width='.6'/%3E%3Cpath d='M280,4 A5,5 0 1,0 280,14 A3,4 0 1,1 280,4 Z' fill='%23ffd464' fill-opacity='.55'/%3E%3C!-- New Moon echo (right end) --%3E%3Ccircle cx='310' cy='9' r='5' fill='%2304030d' stroke='%23ffd464' stroke-opacity='.25' stroke-width='.8'/%3E%3C!-- Ecliptic line --%3E%3Cline x1='0' y1='9' x2='320' y2='9' stroke='%23ffd464' stroke-opacity='.06' stroke-width='.5' stroke-dasharray='4,6'/%3E%3C/svg%3E") !important;
    background-repeat: repeat-x !important;
    background-size: 320px 18px !important;
    background-position: center bottom !important;
    /* Tint the overlay so it blends with the actual scrollbar track below */
    mix-blend-mode: screen !important;
    opacity: 0.7 !important;
    border-radius: 0 0 4px 4px !important;
    z-index: 0 !important;
  }

  /* ── Section header icon for moon ── */
  #dMoonSection .ct-sec-icon {
    stroke: rgba(255,220,100,0.7) !important;
    fill: none !important;
  }
  #dMoonSection .ct-sec-hdr {
    color: rgba(255,220,100,0.7) !important;
  }

  /* ── Accuracy cells color tweaks inside moon section ── */
  #dMoonAccuracyRow .m-cell {
    background: rgba(255,220,100,0.03) !important;
    border-color: rgba(255,220,100,0.06) !important;
  }

}
/* ── END MOON PHASES MARKET INDICATOR STYLES ── */

/* ══════════════════════════════════════════════════════════════════
   WALLET SWAP MODAL — hardened !important overrides.
   The base rules for these classes live inline in app.html's
   #walletHeaderStyles <style> block, but something in the live cascade
   there was preventing them from ever visually applying (screenshot
   showed zero styling anywhere in the modal — no input borders, no
   button background, no dropdown box). Rather than keep chasing that
   blind, these are duplicated here with !important on every property,
   so they win regardless of whatever's happening with the inline block.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  .wallet-modal-overlay {
    /* display is deliberately NOT forced here — the open/close JS toggles
       it via inline style (style.display = 'flex' / 'none'), and an
       !important display here would override every close click and force
       the modal permanently visible, which is exactly the bug this
       caused. align-items/justify-content below still apply correctly
       the moment the JS sets display:flex; they just don't fight the
       show/hide toggle itself. */
    position: fixed !important;
    inset: 0 !important;
    background: rgba(2,4,10,.6) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    z-index: 900 !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .wallet-modal {
    width: 340px !important;
    max-width: calc(100vw - 32px) !important;
    background: #0a0f18 !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.5) !important;
  }
  .wallet-modal-hdr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 12px 12px 0 0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    color: #e0e6f0 !important;
  }
  .wallet-modal-x {
    background: none !important;
    border: none !important;
    color: rgba(155,170,192,.6) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }
  .wallet-modal-x:hover { color: #e0e6f0 !important; }
  .wallet-modal-body { padding: 16px !important; }
  .wallet-modal-lbl {
    display: block !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: .06em !important;
    color: rgba(155,170,192,.5) !important;
    text-transform: uppercase !important;
    margin-bottom: 5px !important;
  }
  .wallet-modal-select,
  .wallet-modal-input {
    width: 100% !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 7px !important;
    padding: 9px 10px !important;
    color: #e0e6f0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
  }
  .wallet-modal-select:focus,
  .wallet-modal-input:focus { outline: none !important; border-color: #745fee !important; }

  /* ── Amount field gets its own explicit rule too, in case a more
     specific generic `input[type=number]` reset elsewhere is winning
     against the shared .wallet-modal-input rule above. ── */
  #swapAmountInput {
    width: 100% !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 7px !important;
    padding: 9px 10px !important;
    color: #e0e6f0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    display: block !important;
  }
  #swapAmountInput:focus { outline: none !important; border-color: #745fee !important; }

  .aeon-select-wrap { position: relative !important; }
  .aeon-select-native {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .aeon-select-trigger {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 7px !important;
    padding: 9px 10px !important;
    color: #e0e6f0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: border-color .12s !important;
  }
  .aeon-select-trigger:hover { border-color: rgba(255,255,255,.2) !important; }
  .aeon-select-wrap.open .aeon-select-trigger { border-color: #745fee !important; }
  .aeon-select-trigger.disabled {
    color: rgba(155,170,192,.4) !important;
    cursor: default !important;
    background: rgba(255,255,255,.015) !important;
    border-color: rgba(255,255,255,.05) !important;
  }
  .aeon-select-trigger.disabled:hover { border-color: rgba(255,255,255,.05) !important; }
  .aeon-select-chevron {
    color: rgba(155,170,192,.5) !important;
    font-size: 9px !important;
    transition: transform .15s !important;
    flex-shrink: 0 !important;
    margin-left: 8px !important;
  }
  .aeon-select-wrap.open .aeon-select-chevron { transform: rotate(180deg) !important; }
  .aeon-select-list {
    display: none !important;
    position: absolute !important;
    top: calc(100% - -3px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #0f1420 !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.5) !important;
    z-index: 20 !important;
    max-height: 180px !important;
    overflow-y: auto !important;
    padding: 4px !important;
  }
  .aeon-select-wrap.open .aeon-select-list { display: block !important; }
  .aeon-select-opt {
    padding: 8px 10px !important;
    border-radius: 6px !important;
    color: #e0e6f0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    cursor: pointer !important;
  }
  .aeon-select-opt:hover { background: rgba(255,255,255,.06) !important; }
  .aeon-select-opt.selected { background: rgba(116,95,238,.15) !important; color: #a394f5 !important; }

  .wallet-modal-row2 {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: 8px !important;
    align-items: end !important;
  }
  .wallet-swap-flip {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 6px !important;
    width: 30px !important;
    height: 30px !important;
    margin-bottom: 12px !important;
    color: #745fee !important;
    font-size: 14px !important;
    cursor: pointer !important;
  }
  .wallet-swap-flip:hover { background: rgba(116,95,238,.15) !important; }
  .wallet-modal-hint {
    font-size: 9.5px !important;
    color: rgba(155,170,192,.4) !important;
    margin-bottom: 10px !important;
  }
  .wallet-swap-quote {
    background: rgba(116,95,238,.06) !important;
    border: 1px solid rgba(116,95,238,.2) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
  }
  .wallet-swap-quote-row {
    display: flex !important;
    justify-content: space-between !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    color: #e0e6f0 !important;
    padding: 2px 0 !important;
  }
  .wallet-swap-quote-row.wallet-swap-quote-sub {
    font-size: 10px !important;
    color: rgba(155,170,192,.55) !important;
  }
  .wallet-modal-error {
    background: rgba(244,63,94,.08) !important;
    border: 1px solid rgba(244,63,94,.25) !important;
    color: #f4879e !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    padding: 8px 10px !important;
    margin-bottom: 12px !important;
  }

  /* ── Get Quote / Confirm Swap button.
     Single canonical source for .wallet-modal-cta — do not duplicate this
     in app.html or anywhere else. If it needs to change, change it here. ── */
  .wallet-modal-cta {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box !important;
    background: #745fee !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 11px 0 !important;
    color: #fff !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-align: center !important;
    white-space: nowrap !important;
    line-height: normal !important;
    cursor: pointer !important;
    transition: background .12s, opacity .12s !important;
  }
  .wallet-modal-cta:hover { background: #6650e0 !important; }
  .wallet-modal-cta:disabled { opacity: .5 !important; cursor: default !important; }
  .wallet-modal-cta.wallet-cta-success { background: #16c784 !important; }

  .wallet-dw-exchange-list { display: flex !important; flex-direction: column !important; gap: 6px !important; }
  .wallet-dw-exchange-btn {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    color: #e0e6f0 !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-align: left !important;
    width: 100% !important;
  }
  .wallet-dw-exchange-btn:hover { background: rgba(116,95,238,.1) !important; border-color: rgba(116,95,238,.3) !important; }
  .wallet-dw-empty {
    font-size: 11px !important;
    color: rgba(155,170,192,.5) !important;
    padding: 10px 0 !important;
  }

}
/* ── END WALLET SWAP MODAL STYLES ── */