:root{
  --bg:#03060B;
  --surface:linear-gradient(145deg,#0D131C 0%,#090E15 55%,#070B11 100%);
  --s2:linear-gradient(145deg,#0C1119 0%,#080D14 100%);
  --s3:#080D14;
  --s4:#101722;
  --cyan:#6ea8f7;
  --c-dim:rgba(110,168,247,.06);
  --c-mid:rgba(110,168,247,.12);
  --c-glow:rgba(110,168,247,.16);
  --mag:#c76fa8;
  --green:#10B981;
  --g-dim:rgba(16,185,129,.06);
  --g-glow:rgba(16,185,129,.14);
  --red:#F43F5E;
  --r-dim:rgba(244,63,94,.06);
  --r-glow:rgba(244,63,94,.14);
  --amber:#F59E0B;
  --a-dim:rgba(245,158,11,.06);
  --purple:#8B5CF6;
  --p-dim:rgba(124,58,237,.1);
  --gold:#d9c05a;
  --text:#F1F5F9;
  --text2:#94A3B8;
  --text3:#64748B;
  --text4:#475569;
  --border:#111923;
  --border2:#18212D;
  --border3:rgba(255,255,255,.16);
  --r:3px;--rl:5px;
  --font:'Inter',-apple-system,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --hdr:'Inter',sans-serif;

  /* ── 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,.25);
  --aeon-gradient:linear-gradient(135deg,#6D28D9,#8B5CF6,#2563EB);

  /* ── card gradient tiers, referenced directly where a bespoke look is wanted ── */
  --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%);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:13px;
  line-height:1.5;
  min-height:100vh;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.08) 3px,rgba(0,0,0,.08) 4px);
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 10% 0%,rgba(124,58,237,.03) 0%,transparent 70%),
    radial-gradient(ellipse 50% 30% at 90% 100%,rgba(37,99,235,.02) 0%,transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 50%,rgba(0,4,10,.7) 0%,transparent 100%);
}
.app{max-width:1520px;margin:0 auto;padding:16px 20px;position:relative;}

::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(59,130,246,.22);border-radius:2px;}
::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.4);}

/* ══════ TYPOGRAPHY ══════ */
.font-hdr{font-family:var(--hdr);}
.font-mono{font-family:var(--mono);}

/* ══════ CARDS ══════ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--rl);
  padding:16px;
  position:relative;overflow:hidden;
}
.card::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-mid) 40%,var(--c-mid) 60%,transparent);
}
.card-flat{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;}

.ctitle{
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan);opacity:.55;
  margin-bottom:13px;display:flex;align-items:center;justify-content:space-between;
}
.ctitle::before{content:'// ';opacity:.6;}

/* ══════ CORNER BRACKETS ══════ */
.brackets::before,.brackets::after{
  content:'';position:absolute;width:12px;height:12px;
  border-color:rgba(59,130,246,.25);border-style:solid;
}
.brackets::before{top:6px;left:6px;border-width:1px 0 0 1px;}
.brackets::after{bottom:6px;right:6px;border-width:0 1px 1px 0;}

/* ══════ TOP BAR ══════ */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 0 14px;border-bottom:1px solid var(--border);
  margin-bottom:14px;flex-wrap:wrap;gap:12px;
}
.brand-name{
  font-family:var(--hdr);font-size:24px;font-weight:900;
  letter-spacing:.2em;color:var(--cyan);
  text-shadow:0 0 24px var(--c-glow),0 0 80px rgba(59,130,246,0.056);
  animation:glitch-idle 10s infinite;
}
@keyframes glitch-idle{
  0%,94%,100%{text-shadow:0 0 24px var(--c-glow);transform:none;}
  95%{transform:translate(-1px,0);text-shadow:-1px 0 var(--mag),1px 0 var(--cyan);}
  96%{transform:translate(2px,0);text-shadow:2px 0 var(--mag),-1px 0 var(--cyan);}
  97%{transform:none;text-shadow:0 0 24px var(--c-glow);}
  98%{transform:translate(-1px,0);text-shadow:-2px 0 var(--green),1px 0 var(--cyan);}
  99%{transform:none;}
}
.brand-sub{font-family:var(--mono);font-size:8px;color:var(--text2);letter-spacing:.1em;margin-top:2px;}
.brand-ver{
  font-family:var(--mono);font-size:8px;color:var(--cyan);
  background:var(--c-dim);border:1px solid var(--border2);
  padding:2px 8px;border-radius:2px;letter-spacing:.1em;margin-left:10px;
}
.ctrl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* ══════ STATUS PILL ══════ */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:2px;
  border:1px solid var(--border2);
  font-family:var(--mono);font-size:10px;color:var(--text2);
  background:var(--surface);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:dp 2s infinite;}
.dot.ok{background:var(--green);box-shadow:0 0 8px var(--g-glow);}
.dot.err{background:var(--red);}.dot.conn{background:var(--amber);}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.3}}

/* ══════ SEG CONTROL ══════ */
.seg{display:flex;border:1px solid var(--border2);border-radius:2px;overflow:hidden;background:var(--surface);}
.sb{padding:5px 14px;font-size:12px;font-weight:600;font-family:var(--font);letter-spacing:.06em;cursor:pointer;background:transparent;color:var(--text2);border:none;border-right:1px solid var(--border);transition:all .15s;}
.sb:last-child{border-right:none;}
.sb:hover{color:var(--cyan);background:var(--c-dim);}
.sb.on{background:var(--c-dim);color:var(--cyan);text-shadow:0 0 8px var(--c-glow);}

/* ══════════════════════════════════════════════════════════════
   SWING SECTION — BEVERLY HILLS REDESIGN
   Aesthetic: Cinematic Intelligence Operations Center
   Layered depth · Glowing panels · Hexagonal motifs · Amber/Teal dual-accent
   Architecture unchanged — same IDs, same JS, new visual language
   ══════════════════════════════════════════════════════════════ */

/* ── Root palette for swing ── */
#swingMode{
  --sw-cyan:rgba(59,130,246,1);
  --sw-cyan-dim:rgba(59,130,246,.06);
  --sw-cyan-mid:rgba(59,130,246,.15);
  --sw-cyan-glow:rgba(59,130,246,.4);
  --sw-cyan-border:rgba(59,130,246,.18);
  --sw-teal:rgba(59,130,246,1);
  --sw-teal-dim:rgba(59,130,246,.06);
  --sw-teal-glow:rgba(59,130,246,.3);
  --sw-green:rgba(0,210,130,1);
  --sw-green-dim:rgba(0,210,130,.07);
  --sw-red:rgba(210,55,75,1);
  --sw-red-dim:rgba(210,55,75,.07);
  --sw-surface:rgba(3,4,10,1);
  --sw-surface2:rgba(5,8,16,1);
  --sw-surface3:rgba(7,10,20,1);
  --sw-border:rgba(59,130,246,.08);
  --sw-border2:rgba(59,130,246,.15);
  --sw-border3:rgba(59,130,246,.25);
  --sw-text:rgba(215,222,235,1);
  --sw-text2:rgba(155,170,192,.85);
  --sw-text3:rgba(110,128,155,.65);
  --sw-radius:8px;
  --sw-radius-sm:4px;
}

/* ═══════════════════════════════════════════════════════════════
   WALLPAPER SYSTEM — procedural deep-space / city-glow layers
   ═══════════════════════════════════════════════════════════════ */
#swingMode{
  position:relative;
  isolation:isolate;
}

/* Layer 1 — deep space base + city horizon glow + light sources */
#swingMode::before{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    /* Scanline texture on top */
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 3px),
    /* City horizon — warm electric-blue bloom at base */
    radial-gradient(ellipse 130% 38% at 50% 102%,
      rgba(20,70,180,0.55) 0%,
      rgba(8,25,80,0.30) 38%,
      transparent 68%),
    /* Distant city-right glow */
    radial-gradient(ellipse 60% 45% at 88% 92%,
      rgba(0,120,220,0.22) 0%,
      transparent 60%),
    /* Distant city-left glow */
    radial-gradient(ellipse 60% 45% at 12% 92%,
      rgba(0,80,180,0.18) 0%,
      transparent 60%),
    /* Left teal light source — terminal glow */
    radial-gradient(ellipse 50% 65% at 0% 55%,
      rgba(0,190,230,0.14) 0%,
      transparent 65%),
    /* Right accent haze */
    radial-gradient(ellipse 45% 55% at 100% 35%,
      rgba(0,60,140,0.12) 0%,
      transparent 62%),
    /* Central vignette depth */
    radial-gradient(ellipse 100% 85% at 50% 18%,
      rgba(2,9,28,0.92) 0%,
      rgba(1,4,14,1) 100%),
    /* Absolute base */
    rgb(1,4,14);
  transition:background .6s ease;
}

/* Layer 2 — perspective grid + vignette */
#swingMode::after{
  content:'';
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(59,130,246,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.018) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 45%, transparent 78%);
  mask-image:linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 45%, transparent 78%);
}

/* ── Custom background override (set via BG Settings panel) ── */
/* Note: actual background is injected via #aeon-bg-style <style> tag by swInjectBg() */
#swingMode.has-bg-img::before{
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
/* ETF card should go frosted-glass (not solid) when a custom bg image is active */
#swingMode.has-bg-img .aeon-etf-wrap{
  background:linear-gradient(160deg,rgba(5,8,16,0.55) 0%,rgba(3,4,10,0.60) 100%) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
/* Cross-Asset Momentum panel (#momentumWrap) — same frosted-glass treatment.
   It carries its own inline background/backdrop-filter (see the ROW 6 markup
   in app.html), so this needs !important to win over that inline style. */
#swingMode.has-bg-img #momentumWrap{
  background:rgba(255, 255, 255, 0.02) !important;
  backdrop-filter:blur(1px) !important;
  -webkit-backdrop-filter:blur(1px) !important;
}

/* ── Scrollbar contrast fix now lives in app.html, targeting
   .aeon-desktop-body (the actual overflow-y:auto scroll container) —
   body itself never scrolls in this layout, so a body:has() version
   here would be dead code. See app.html's evalLayoutStyles block for
   the working .aeon-desktop-body:has(#swingMode.has-bg-img) rule. ── */

/* ── Frosted glass treatment on major cards ── */
#swingMode .status-strip{
  background:rgba(3,7,20,0.68) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
#swingMode .proxy-card{
  animation:sw-fade-in .4s ease both;
}
#swingMode .mf-card,
#swingMode .liq-card,
#swingMode .price-session-row,
#swingMode .htf-cell,
#swingMode .htf-cell-compact,
#swingMode .intel-panel,
#swingMode .hero,
/* Zone A price card */
#swingMode #htfCard,
/* Zone C watchlist */
#swingMode #watchlistPanel,
/* Cross-asset momentum */
#swingMode #momentumWrap,
/* Chart row */
#swingMode .chart-card-main,
#swingMode .chart-side-card,
#swingMode .card,
/* Row 5 panels */
#swingMode .macro-card,
/* Row 7 */
#swingMode .mx-panel,
/* Row 8 signal matrix */
#swingMode .sig-matrix,
/* Row 9 operations */
#swingMode .rr-scanner,
#swingMode .pos-calc,
/* Zone A price block direct parent */
#swingMode .price-session-row{
  background:linear-gradient(160deg,rgba(5,8,16,0.55) 0%,rgba(3,4,10,0.60) 100%) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
#swingMode .mc{
  background:rgba(2,5,16,0.72) !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* ── Fix stacking — ensure all real content renders above bg pseudo-elements ── */
#swingMode > *:not(#swStarfield){
  position:relative;
  z-index:1;
}
/* Starfield sits at z-index:0 (bg layer) */
#swStarfield{z-index:0;}

/* ── BG Settings Panel — fixed positioning so overflow:hidden on strip can't clip it ── */
#swBgPanel{
  position:fixed;
  width:300px;
  background:rgba(4,9,24,0.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(59,130,246,0.24);
  border-top:2px solid rgba(59,130,246,0.52);
  border-radius:6px;
  padding:16px;
  z-index:9999;
  box-shadow:0 16px 48px rgba(0,0,0,0.72),0 0 28px rgba(59,130,246,0.049);
  animation:swBgSlide .18s cubic-bezier(.2,1,.3,1) both;
  transform-origin:top right;
}
@keyframes swBgSlide{
  from{opacity:0;transform:scaleY(0.85) translateY(-6px);}
  to{opacity:1;transform:scaleY(1) translateY(0);}
}
#swBgPanel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,0.5) 40%,rgba(59,130,246,0.3) 70%,transparent);
}
.swbg-label{
  font-family:'Share Tech Mono',monospace;
  font-size:7px;letter-spacing:.20em;text-transform:uppercase;
  color:rgba(59,130,246,0.50);margin-bottom:7px;display:block;
}
.swbg-input{
  width:100%;padding:7px 10px;
  background:rgba(59,130,246,0.04);
  border:1px solid rgba(59,130,246,0.18);
  border-radius:4px;
  font-family:'Share Tech Mono',monospace;font-size:9px;
  color:rgba(215,222,235,0.9);outline:none;
  transition:border-color .15s, box-shadow .15s;
  margin-bottom:10px;
}
.swbg-input:focus{
  border-color:rgba(59,130,246,0.45);
  box-shadow:0 0 0 2px rgba(59,130,246,0.056);
}
.swbg-input::placeholder{color:rgba(155,170,192,0.32);}
.swbg-row{display:flex;gap:8px;}
.swbg-btn{
  flex:1;padding:7px 0;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.10em;
  border-radius:4px;border:1px solid rgba(59,130,246,0.28);
  cursor:pointer;transition:all .15s;font-weight:600;
}
.swbg-btn-inject{
  background:rgba(59,130,246,0.10);color:rgba(59,130,246,0.90);
}
.swbg-btn-inject:hover{background:rgba(59,130,246,0.18);border-color:rgba(59,130,246,0.50);box-shadow:0 0 12px rgba(59,130,246,0.105);}
.swbg-btn-clear{
  background:rgba(255,45,85,0.08);color:rgba(255,100,120,0.80);
  border-color:rgba(255,45,85,0.22);flex:0 0 auto;padding:7px 14px;
}
.swbg-btn-clear:hover{background:rgba(255,45,85,0.16);border-color:rgba(255,45,85,0.45);}
.swbg-msg{
  font-family:'Share Tech Mono',monospace;font-size:8px;
  color:rgba(155,170,192,0.45);margin-top:9px;min-height:14px;text-align:center;
}
.swbg-divider{
  height:1px;background:rgba(59,130,246,0.07);margin:12px 0;
}
.swbg-preset-row{display:flex;gap:6px;flex-wrap:wrap;}
.swbg-preset{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.07em;
  padding:4px 10px;border-radius:3px;
  border:1px solid rgba(59,130,246,0.14);background:rgba(59,130,246,0.04);
  color:rgba(155,170,192,0.65);cursor:pointer;transition:all .14s;
}
.swbg-preset:hover{background:rgba(59,130,246,0.10);color:rgba(59,130,246,0.90);border-color:rgba(59,130,246,0.32);}
#swBgGearBtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;cursor:pointer;
  background:rgba(59,130,246,0.04);
  border:1px solid rgba(59,130,246,0.14);
  border-radius:4px;transition:all .15s;
  font-size:11px;
  position:relative;
}
#swBgGearBtn:hover{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.38);box-shadow:0 0 10px rgba(59,130,246,0.084);}
#swBgGearBtn.active{background:rgba(59,130,246,0.12);border-color:rgba(59,130,246,0.45);color:rgba(59,130,246,1);}
#swBgGearBtn svg{transition:transform .35s ease;}
#swBgGearBtn.active svg{transform:rotate(45deg);}

/* ── Section header — new look: hex icon + gold rule ── */
#swingMode .sec{
  font-family:'Share Tech Mono',monospace;
  font-size:7.5px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(59,130,246,.62);
  margin:32px 0 14px;
  display:flex;align-items:center;gap:14px;
  position:relative;
}
#swingMode .sec::before{
  content:'⬡';
  font-size:10px;color:rgba(59,130,246,.45);
  letter-spacing:0;display:block;
}
#swingMode .sec::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.28) 0%,rgba(59,130,246,.10) 50%,transparent 100%);
}

/* ══════ STATUS STRIP — frosted command line ══════ */
/* ══════ PROXY + EXCHANGE + F&G — unified three-row card ══════ */
.status-strip{
  /* kept for scalp section compatibility */
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 18px;
  background:rgba(59,130,246,.025);
  backdrop-filter:blur(12px);
  border:1px solid rgba(59,130,246,.12);
  border-bottom:1px solid rgba(59,130,246,.2);
  border-radius:var(--sw-radius);
  margin-bottom:14px;
  font-family:'Share Tech Mono',monospace;font-size:9px;
  color:rgba(59,130,246,.5);
  flex-wrap:wrap;gap:8px;letter-spacing:.08em;
  position:relative;overflow:hidden;
  box-shadow:0 0 20px rgba(59,130,246,0.03),inset 0 0 20px rgba(59,130,246,0.03);
}
.status-strip::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.5) 40%,rgba(59,130,246,.3) 70%,transparent);
}

.proxy-card{
  display:flex;align-items:center;gap:0;
  padding:7px 18px;
  background:rgba(3,7,20,0.72);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(59,130,246,.10);
  border-top:1px solid rgba(59,130,246,.26);
  border-radius:var(--sw-radius);
  margin-bottom:14px;
  font-family:'Share Tech Mono',monospace;
  position:relative;overflow:hidden;
  box-shadow:0 0 24px rgba(59,130,246,0.03),inset 0 0 20px rgba(59,130,246,0.03);
}
.proxy-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.6) 38%,rgba(59,130,246,.32) 65%,transparent);
  z-index:1;
}

/* Inline blocks separated by subtle verticals */
.pc-block{
  display:flex;align-items:center;gap:8px;
  padding:0 16px;
  border-right:1px solid rgba(59,130,246,.10);
  flex-shrink:0;
}
.pc-block:first-child{ padding-left:0; }
.pc-block:last-child{ border-right:none;padding-right:0;margin-left:auto; }
/* F&G block gets a slightly brighter separator to visually anchor the meter */
.pc-block.fg-block{
  flex:1;min-width:0;
  border-right:1px solid rgba(59,130,246,.10);
  border-left:1px solid rgba(59,130,246,.07);
  padding:0 20px;
}

/* Proxy tag + status */
.pc-proxy-tag{ font-size:7px;letter-spacing:.16em;color:rgba(59,130,246,.38); }
.pc-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:9px;letter-spacing:.07em;color:rgba(0,255,136,.82);
}
.pc-status-dot{
  width:5px;height:5px;border-radius:50%;
  background:#00ff88;box-shadow:0 0 6px rgba(0,255,136,.6);
  flex-shrink:0;animation:dp 2s infinite;
}
.pc-status-dot.err { background:var(--red);box-shadow:0 0 6px var(--r-glow); }
.pc-status-dot.warn{ background:var(--amber);box-shadow:0 0 6px rgba(255,170,0,.5); }
.pc-cg{ font-size:7px;color:rgba(0,255,136,.45);letter-spacing:.07em; }

/* Exchange items */
.pc-exc-pill{
  display:inline-flex;align-items:center;gap:4px;
  font-size:8px;letter-spacing:.05em;
  color:rgba(59,130,246,.62);white-space:nowrap;
  transition:color .2s opacity .2s;
}
.pc-exc-pill.offline{ color:rgba(155,170,192,.28);opacity:.5; }
.pc-exc-dot{
  width:4px;height:4px;border-radius:50%;flex-shrink:0;
  background:rgba(59,130,246,.82);box-shadow:0 0 4px rgba(59,130,246,0.266);
}
.pc-exc-dot.offline{ background:rgba(255,255,255,.18);box-shadow:none; }

/* F&G inline */
.fg-lbl{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(155,170,192,.45);white-space:nowrap;
}
.fg-track{
  flex:1;height:3px;border-radius:2px;
  background:linear-gradient(90deg,rgba(0,210,130,.7) 0%,rgba(59,130,246,.5) 30%,rgba(59,130,246,.7) 55%,rgba(210,55,75,.7) 100%);
  position:relative;min-width:80px;
  box-shadow:0 0 8px rgba(0,0,0,.5) inset;
}
.fg-thumb{
  width:9px;height:9px;border-radius:50%;
  background:rgba(59,130,246,1);
  border:1.5px solid rgba(5,5,8,1);
  position:absolute;top:-3px;
  transform:translateX(-50%);
  transition:left .7s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 8px rgba(59,130,246,0.49),0 0 16px rgba(59,130,246,0.14);
}
.fg-num{
  font-family:'Share Tech Mono',monospace;font-size:18px;font-weight:700;
  color:rgba(59,130,246,.98);letter-spacing:-.01em;
  text-shadow:0 0 16px rgba(59,130,246,0.21);
  white-space:nowrap;
}
.fg-name{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.1em;
  color:rgba(215,222,235,.75);white-space:nowrap;
}
.fg-impl{ font-family:'Share Tech Mono',monospace;font-size:7px;color:rgba(155,170,192,.28);white-space:nowrap; }

/* URL + gear */
.pc-url{
  font-size:7px;color:rgba(155,170,192,.2);letter-spacing:.04em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ══════ PRICE BLOCK — bloomberg terminal ══════ */
.price-block{display:flex;align-items:baseline;gap:18px;margin-bottom:10px;flex-wrap:wrap;}
.price-num{
  font-family:'Share Tech Mono',monospace;font-size:52px;font-weight:900;
  letter-spacing:-.03em;transition:color .3s;
  color:rgba(215,222,235,.96);
  text-shadow:0 2px 20px rgba(0,0,0,.6);
}
.price-badge{
  font-family:'Share Tech Mono',monospace;font-size:11px;
  padding:4px 12px;border-radius:var(--sw-radius-sm);letter-spacing:.08em;
}
.up{background:rgba(0,210,130,.09);color:rgba(0,210,130,.95);border:1px solid rgba(0,210,130,.22);}
.dn{background:rgba(210,55,75,.09);color:rgba(210,55,75,.95);border:1px solid rgba(210,55,75,.22);}
.pair-tag{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.45);letter-spacing:.1em;}
.trend-badge{
  font-family:'Share Tech Mono',monospace;font-size:9px;padding:4px 12px;border-radius:var(--sw-radius-sm);letter-spacing:.1em;
}
/* ── Trend zone — directional tint + left accent border ── */
.trend-zone-up{
  border-left:3px solid rgba(0,210,130,.7);
  background:rgba(0,210,130,.05);
  border-radius:0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
  padding:8px 10px 8px 12px;
  transition:background .3s;
}
.trend-zone-dn{
  border-left:3px solid rgba(210,55,75,.7);
  background:rgba(210,55,75,.05);
  border-radius:0 var(--sw-radius-sm) var(--sw-radius-sm) 0;
  padding:8px 10px 8px 12px;
  transition:background .3s;
}

/* ══════ PRICE + SESSION ROW ══════ */
.price-session-row{
  display:flex;align-items:stretch;gap:24px;margin-bottom:0;
  padding:22px 24px;
  background:var(--sw-surface2);
  border:1px solid var(--sw-border);
  border-radius:var(--sw-radius);
  position:relative;overflow:hidden;
}
.price-session-row::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.3),rgba(59,130,246,.15) 50%,transparent);
}
.price-session-row::after{
  content:'';position:absolute;bottom:0;left:24px;right:24px;height:1px;
  background:rgba(255,255,255,.04);
}
.price-left{flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;min-width:240px;}
.price-session-right{flex:1 1 0;min-width:0;overflow:hidden;display:flex;align-items:center;}
.price-session-right #sessionPanel{width:100%;min-width:0;overflow-x:auto;scrollbar-width:none;}
.price-session-right #sessionPanel::-webkit-scrollbar{display:none;}
/* Session grid — 2×2 compact grid filling the session panel */
.sess-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr;
  gap:8px;
  align-items:stretch;
}
/* ── Session card consistent border-top accent system ── */
/* All session cards: subtle border-top by default */
.sess-grid > *{
  border-top:2px solid transparent;
  transition:border-color .2s, background .2s;
}
/* Active/bullish sessions — green top accent */
.sess-grid > *.sess-bullish,
.sess-grid > *[data-sess-bull="true"]{
  border-top-color:rgba(0,210,130,.55);
  background:rgba(0,210,130,.02) !important;
}
/* Day-of-week bias — amber accent (informational, NOT a warning state) */
.sess-grid > *.sess-dow-bias,
.sess-grid > *[data-sess-dow="true"]{
  border-top-color:rgba(255,170,0,.50);
  background:rgba(255,170,0,.02) !important;
}
/* Day-of-week value text: force amber instead of red */
.sess-dow-val{
  color:rgba(255,170,0,.92) !important;
}
.sess-dow-mood{
  color:rgba(255,170,0,.65) !important;
}
@media(max-width:700px){.sess-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:900px){
  .price-session-row{flex-direction:column;padding:16px;margin-bottom:0;}
  .price-left{min-width:unset;}
}

/* ══════ HTF TOGGLE TAB ══════ */
.htf-tab{
  padding:10px 6px;
  font-family:'Share Tech Mono',monospace;font-size:8px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  border:none;background:transparent;
  color:rgba(155,170,192,.35);cursor:pointer;
  border-right:1px solid rgba(59,130,246,.07);
  transition:all .2s;position:relative;
}
.htf-tab:last-child{border-right:none;}
.htf-tab::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:transparent;transition:background .2s;
}
.htf-tab-on{color:rgba(59,130,246,.9);background:rgba(59,130,246,.04);}
.htf-tab-on::after{background:rgba(59,130,246,.6);}
.htf-tab:hover:not(.htf-tab-on){color:rgba(59,130,246,.5);background:rgba(59,130,246,.02);}

/* ══════ HTF PANEL CONTENT ══════ */
.htf-panel{display:none;padding:16px;}
.htf-panel.active{display:block;}
.htf-arc-row{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
/* Larger probability ring for desktop — was too small to read at a glance */
.htf-arc-row svg{
  min-width:72px;
  min-height:72px;
}
.htf-prob-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
.htf-prob-pill{border-radius:4px;padding:7px 6px;text-align:center;}
/* Probability value label — bumped up for quick scanning */
.htf-prob-val{
  font-family:'Share Tech Mono',monospace;font-size:22px;font-weight:700;
  line-height:1;letter-spacing:-.01em;
}
.htf-prob-lbl{
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.12em;
  text-transform:uppercase;margin-top:4px;line-height:1.5;
}


.htf-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:10px;margin-bottom:0;align-items:start;
}
.htf-spacer{display:none !important;}
.htf-cell{
  border-radius:var(--sw-radius);
  padding:18px 16px;
  position:relative;overflow:hidden;
}
.htf-cell-compact{
  border-radius:var(--sw-radius);
  padding:16px 14px;
  position:relative;overflow:hidden;
}
.htf-spacer{}
@media(max-width:700px){
  .htf-grid{grid-template-columns:1fr 1fr;}
  .htf-cell{grid-column:1/-1;}
}
.htf-tf{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(155,170,192,.45);margin-bottom:10px;
}
.htf-trend{
  font-family:'Share Tech Mono',monospace;font-size:15px;font-weight:700;
  letter-spacing:.04em;line-height:1;
}
.htf-str{
  font-family:'Share Tech Mono',monospace;font-size:9px;
  color:rgba(155,170,192,.55);margin-top:7px;line-height:1.5;
}

/* ── HTF cell directional tinting ── */
/* Uptrend cell: green left accent + subtle green wash */
.htf-cell.htf-up,
.htf-cell-compact.htf-up{
  border-left:3px solid rgba(0,210,130,.60);
  background:rgba(0,210,130,.04) !important;
}
/* Downtrend cell: red left accent + subtle red wash */
.htf-cell.htf-dn,
.htf-cell-compact.htf-dn{
  border-left:3px solid rgba(210,55,75,.60);
  background:rgba(210,55,75,.04) !important;
}
/* Neutral cell: cyan left accent */
.htf-cell.htf-neut,
.htf-cell-compact.htf-neut{
  border-left:3px solid rgba(59,130,246,.22);
}

/* ══════ PATTERNS / ALERTS ══════ */
.pats-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;}
.pat{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.06em;
  padding:4px 11px;border-radius:var(--sw-radius-sm);border:1px solid;
  position:relative;overflow:hidden;
}
.pat::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);}
.pat-bull{background:rgba(0,210,130,.06);color:rgba(0,210,130,.9);border-color:rgba(0,210,130,.2);}
.pat-bear{background:rgba(210,55,75,.06);color:rgba(210,55,75,.9);border-color:rgba(210,55,75,.2);}
.pat-neut{background:rgba(255,255,255,.025);color:rgba(155,170,192,.75);border-color:rgba(255,255,255,.07);}

/* ══════ HERO SIGNAL — cinematic command display ══════ */
.hero{
  background:linear-gradient(135deg,rgba(5,8,16,1) 0%,rgba(3,4,10,1) 100%);
  border:1px solid rgba(59,130,246,.18);
  border-top:1px solid rgba(59,130,246,.35);
  border-radius:var(--sw-radius);
  padding:0;
  margin-bottom:0;
  position:relative;overflow:hidden;
  box-shadow:0 0 30px rgba(59,130,246,0.03),inset 0 0 30px rgba(59,130,246,0.03);
}
/* Glow halo from right edge (hero is now right column) */
.hero::before{
  content:'';position:absolute;right:-60px;top:-60px;left:auto;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,var(--hero-accent,rgba(255,170,0,.06)) 0%,transparent 70%);
  pointer-events:none;transition:background 0.5s;
}
/* Corner accent grid lines */
.hero.brackets::before,.hero.brackets::after{display:none;}
.hero::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,.2) 40%,
    rgba(59,130,246,.3) 80%,
    rgba(59,130,246,.6) 100%);
}
.hero-bg{
  position:absolute;top:0;right:0;width:340px;height:100%;
  pointer-events:none;transition:background 0.5s;
}
.hero-top{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:28px;padding:28px 32px 24px;
  border-bottom:1px solid rgba(255,255,255,.06);
  flex:1;
}
.hero-tag{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.28em;
  text-transform:uppercase;color:rgba(59,130,246,.5);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.hero-tag::before{content:'⬡';color:rgba(59,130,246,.4);font-size:9px;}
.hero-sig{
  font-family:'Share Tech Mono',monospace;font-size:44px;font-weight:900;
  letter-spacing:.02em;line-height:1;transition:color .3s;
  color:rgba(155,170,192,.6);
}
.hero-sig.buy{
  color:rgba(61,220,151,.98);
  text-shadow:none;
}
.hero-sig.sell{
  color:rgba(238,108,124,.98);
  text-shadow:none;
}
.hero-sig.hold{
  color:rgba(217,164,65,.92);
  text-shadow:none;
}
.hero-sig.glitch{animation:sig-glitch .35s linear;}
@keyframes sig-glitch{
  0%{clip-path:inset(0 0 95% 0);}
  15%{clip-path:inset(20% 0 60% 0);transform:translate(-2px,0);}
  35%{clip-path:inset(55% 0 15% 0);transform:translate(2px,0);}
  55%{clip-path:inset(10% 0 75% 0);transform:translate(-1px,0);}
  75%{clip-path:inset(75% 0 5% 0);transform:translate(1px,0);}
  100%{clip-path:inset(0);transform:none;}
}
/* Hero sub — badge pill row */
.hero-sub{
  display:flex;flex-wrap:wrap;gap:4px;align-items:center;
  margin-top:10px;
}
.hro-pill{
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.07em;
  padding:2px 6px;border-radius:2px;border:1px solid transparent;
  white-space:nowrap;line-height:1.6;
}
/* Score ring */
.hero-ring{
  position:relative;width:100px;height:100px;flex-shrink:0;
}
.hero-ring svg{transform:rotate(-90deg);}
.hero-ring-num{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  font-family:'Share Tech Mono',monospace;font-size:26px;font-weight:900;
  line-height:1;
}
.hero-ring-num::after{
  content:'/ 100';
  font-size:8px;
  color:rgba(155,170,192,.35);
  letter-spacing:.1em;
  font-weight:400;
}
/* Hero cells — premium data grid */
.hero-cells{
  display:grid;grid-template-columns:repeat(4,1fr);
}
@media(max-width:620px){.hero-cells{grid-template-columns:1fr 1fr;}}
.hc{
  padding:14px 16px;
  border-right:1px solid rgba(255,255,255,.04);
  position:relative;overflow:hidden;
  transition:background .2s;
}
/* Coloured accent bar — top edge of each cell */
.hc-accent{
  position:absolute;top:0;left:0;right:0;height:1.5px;
  opacity:.7;
}
/* Awaiting state */
.hc-v.hc-awaiting{
  color:rgba(155,170,192,.3) !important;
  font-style:italic;
  font-size:11px !important;
  letter-spacing:.04em;
}
.hc:last-child{border-right:none;}
.hc:hover{}
.hc-l{
  font-family:'Share Tech Mono',monospace;font-size:6px;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(155,170,192,.38);margin-bottom:6px;
}
.hc-v{
  font-family:'Share Tech Mono',monospace;font-size:15px;font-weight:900;
  line-height:1.1;
}
.hc-s{
  font-family:'Share Tech Mono',monospace;font-size:8px;
  color:rgba(155,170,192,.38);margin-top:4px;
}

/* ══════ METRICS GRID — instrument cluster ══════ */
/* ══════ INTEL PANEL WRAPPER ══════ */
.intel-panel{
  background:linear-gradient(145deg,rgba(5,8,16,1) 0%,rgba(3,4,10,1) 100%);
  border:1px solid rgba(59,130,246,.12);
  border-top:2px solid rgba(59,130,246,.35);
  border-radius:var(--sw-radius);
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  box-shadow:0 0 20px rgba(59,130,246,0.03);
}
.intel-panel-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.intel-live-dot{
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Share Tech Mono',monospace;font-size:7px;
  letter-spacing:.1em;color:rgba(0,210,130,.55);
}

/* ══════ METRICS GRID ══════ */
.met-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  background:rgba(255,255,255,.04);
  margin-bottom:0;
}
.mc{
  background:rgba(3,4,10,1);
  padding:13px 15px;
  position:relative;overflow:hidden;
  transition:background .2s;
}
.mc:hover{background:rgba(59,130,246,.018);}
.mc::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
  background:transparent;transition:background .2s;
}
.mc:hover::before{background:rgba(59,130,246,.35);}
.mc-l{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(155,170,192,.4);margin-bottom:7px;
}
.mc-v{font-family:'Share Tech Mono',monospace;font-size:20px;font-weight:700;line-height:1;}
.mc-s{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.5);margin-top:4px;}
.tag-live{
  display:inline-flex;align-items:center;gap:4px;
  font-family:'Share Tech Mono',monospace;font-size:7px;
  color:rgba(0,210,130,.6);letter-spacing:.1em;margin-top:6px;
}
.tag-live::before{content:'';width:4px;height:4px;border-radius:50%;background:rgba(0,210,130,.7);box-shadow:0 0 4px rgba(0,210,130,.5);display:inline-block;flex-shrink:0;}
.tag-sim{font-family:'Share Tech Mono',monospace;font-size:7px;color:rgba(155,170,192,.3);margin-top:6px;}
.ibar{
  height:3px;border-radius:2px;background:rgba(255,255,255,.04);
  overflow:hidden;display:flex;margin-top:8px;
}
.ib{background:rgba(0,210,130,.75);border-radius:2px 0 0 2px;transition:width .5s ease;}
.is{background:rgba(210,55,75,.75);border-radius:0 2px 2px 0;transition:width .5s ease;}

/* ══════ MACRO MINI — compact version in Zone B ══════ */
.macro-card-mini{
  padding:10px 12px !important;
}
.macro-card-mini .mc-label{
  font-size:6px !important;
  margin-bottom:5px !important;
  flex-direction:column;
  align-items:flex-start !important;
  gap:1px;
}
.macro-card-mini .mc-val{
  font-size:14px !important;
}
.macro-card-mini .mc-sub{
  font-size:7.5px !important;
  margin-top:3px !important;
  line-height:1.3 !important;
}
.macro-card-mini .mc-bar{
  margin-top:5px !important;
}
.macro-card-mini .mc-source{
  display:none !important;
}
.macro-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1px;
  background:rgba(255,255,255,.04);
  margin-bottom:0;
  flex-shrink:0;
}
.macro-card{
  background:rgba(3,4,10,1);
  padding:13px 14px;
  position:relative;overflow:hidden;
  transition:background .2s;min-width:0;
}
.mc-card-mcap.macro-card { padding: 0 !important; }
.macro-card:hover{background:rgba(59,130,246,.018);}
.macro-card::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:2px;
  background:transparent;transition:background .2s;
}
.macro-card:hover::before{background:rgba(59,130,246,.3);}
.mc-label{
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(155,170,192,.48);margin-bottom:7px;
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:2px;line-height:1.4;
}
.mc-val{font-family:'Share Tech Mono',monospace;font-size:17px;font-weight:700;line-height:1;}
/* Accented value — used for BTC dominance "alt bleed" state */
.mc-val.mc-accent-amber{color:rgba(255,170,0,.92);text-shadow:0 0 12px rgba(255,170,0,.18);}
.mc-val.mc-accent-green{color:rgba(0,210,130,.92);text-shadow:0 0 12px rgba(0,210,130,.18);}
.mc-val.mc-accent-red{color:rgba(210,55,75,.92);text-shadow:0 0 12px rgba(210,55,75,.18);}
.mc-sub{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(155,170,192,.50);margin-top:4px;line-height:1.5;word-break:break-word;}
.mc-bar{height:2px;border-radius:2px;background:rgba(255,255,255,.05);margin-top:6px;overflow:hidden;}
.mc-bar-fill{height:100%;border-radius:2px;transition:width .7s ease;}
.mc-source{font-family:'Share Tech Mono',monospace;font-size:6.5px;color:rgba(155,170,192,.2);letter-spacing:.04em;margin-top:5px;line-height:1.4;}
.etf-card{
  background:rgba(3,4,10,1);
  padding:14px 16px;
  grid-column:1 / -1;
  display:flex;align-items:flex-start;gap:22px;
  flex-wrap:wrap;
  border-top:1px solid rgba(59,130,246,.1);
  flex:1;
}
@media(max-width:600px){.etf-card{flex-direction:column;gap:12px;}}
.etf-label{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:rgba(155,170,192,.4);margin-bottom:6px;}
.etf-val{font-family:'Share Tech Mono',monospace;font-size:22px;font-weight:900;line-height:1;}
.etf-meta{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.4);margin-top:4px;}
.etf-signal{font-family:'Share Tech Mono',monospace;font-size:9px;padding:3px 10px;border-radius:var(--sw-radius-sm);border:1px solid;letter-spacing:.06em;white-space:nowrap;}

/* ══════ PREMIUM CHART ══════ */
.pc-tf{font-family:'Share Tech Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.1em;padding:5px 9px;border:none;background:transparent;color:rgba(155,170,192,.4);cursor:pointer;border-radius:3px;transition:all .15s;}
.pc-tf-on{background:rgba(59,130,246,.1);color:rgba(59,130,246,.9);}
.pc-tf:hover:not(.pc-tf-on){background:rgba(59,130,246,.05);color:rgba(59,130,246,.6);}
/* ── MARKET TICKER BAR ── */
.tk-macro-tile{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:6px 16px 7px;flex-shrink:0;
  border-right:1px solid rgba(255,255,255,0.05);
  background:linear-gradient(180deg,rgba(255,255,255,0.02) 0%,transparent 100%);
  transition:background .2s;
}
.tk-macro-tile:hover{background:linear-gradient(180deg,rgba(255,170,0,0.05) 0%,transparent 100%);}
.tk-macro-sym{
  font-family:'Share Tech Mono',monospace;font-size:7px;font-weight:700;
  letter-spacing:.18em;color:rgba(255,170,0,.7);
  border-bottom:1px solid rgba(255,170,0,.22);padding-bottom:2px;
}
.tk-macro-price{
  font-family:var(--hdr);font-size:12px;font-weight:600;
  color:rgba(215,222,235,.95);letter-spacing:.01em;line-height:1;
}
.tk-macro-sep{width:1px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.07) 40%,rgba(255,255,255,.07) 60%,transparent);flex-shrink:0;}

.ticker-item{display:flex;align-items:baseline;gap:4px;flex-shrink:0;}
.tk-sym{font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.14em;color:rgba(155,170,192,.45);}
.tk-price{font-family:'Share Tech Mono',monospace;font-size:9px;font-weight:700;color:rgba(215,222,235,.85);}
.tk-chg{font-family:'Share Tech Mono',monospace;font-size:7px;font-weight:700;}
.tk-chg.up{color:rgba(0,210,130,.9);}
.tk-chg.dn{color:rgba(210,55,75,.9);}
.tk-chg.flat{color:rgba(155,170,192,.45);}
.ticker-sep{font-family:'Share Tech Mono',monospace;font-size:7px;color:rgba(59,130,246,.15);flex-shrink:0;}
.tk-ex-item{display:flex;align-items:baseline;gap:3px;flex-shrink:0;}
.tk-ex-name{font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.1em;color:rgba(155,170,192,.4);}
.tk-ex-price{font-family:'Share Tech Mono',monospace;font-size:8.5px;font-weight:700;color:rgba(215,222,235,.85);}
.tk-ex-diff{font-family:'Share Tech Mono',monospace;font-size:6.5px;font-weight:700;}
.tk-ex-diff.up{color:rgba(0,210,130,.85);}
.tk-ex-diff.dn{color:rgba(210,55,75,.85);}
/* Faded per-exchange logo watermark behind each [data-ex-tile] card in
   #tickerExchange/#scalpPriceStrip — same treatment as the desktop
   Smart Money Flow card's #smfeedbg watermark (grayscale+brightness
   filter flattens any logo color into a faint white silhouette,
   centered, near-zero opacity, non-interactive). */
.tk-ex-watermark{
  position:absolute;top:50%;left:0%;
  transform:translateY(-50%);
  width:70%;height:80%;
  opacity:.07;
  pointer-events:none;user-select:none;
  object-fit:contain;
  z-index:0;
}
.tk-ex-diff.flat{color:rgba(155,170,192,.4);}

/* ── PRICE ACTION STRIP — elevated exchange tile container ── */
#tickerExchange{
  background:transparent;
  border-radius:4px;
  overflow:hidden;
}
/* Price flash animation for live updates */
@keyframes priceFlash{
  0%{opacity:1;}
  30%{opacity:.4;}
  100%{opacity:1;}
}
.tk-price-flash{animation:priceFlash .35s ease;}
/* Live pulse dot animation */
@keyframes livePulseRing{
  0%{box-shadow:0 0 0 0 rgba(0,210,130,.6);}
  70%{box-shadow:0 0 0 5px rgba(0,210,130,0);}
  100%{box-shadow:0 0 0 0 rgba(0,210,130,0);}
}
.tk-live-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,210,130,1);
  animation:livePulseRing 2s infinite, dp 2s infinite;
  flex-shrink:0;
}
.tk-rest-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,170,0,.8);
  animation:dp 2s infinite;
  flex-shrink:0;
}

.pc-ind{font-family:'Share Tech Mono',monospace;font-size:7px;font-weight:700;letter-spacing:.1em;padding:4px 8px;border:1px solid rgba(255,255,255,.08);background:transparent;color:rgba(155,170,192,.4);cursor:pointer;border-radius:3px;transition:all .15s;}
.pc-ind-on{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.06);color:rgba(59,130,246,.85);}
.pc-ind:hover:not(.pc-ind-on){border-color:rgba(59,130,246,.15);color:rgba(59,130,246,.5);}
/* Strategy preset buttons — live in the indicator toolbar */
.pc-strategy-btn{font-family:'Share Tech Mono',monospace;font-size:6.5px;font-weight:700;letter-spacing:.06em;padding:3px 7px;border:1px solid rgba(59,130,246,.2);border-radius:2px;background:transparent;color:rgba(59,130,246,.55);cursor:pointer;transition:all .18s;}
.pc-strategy-btn:hover{border-color:rgba(59,130,246,.45);color:rgba(59,130,246,.85);background:rgba(59,130,246,.06);}
.pc-strategy-btn.active{border-color:rgba(59,130,246,.6);background:rgba(59,130,246,.12);color:rgba(59,130,246,1);}
.pc-pal{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s;}
.pc-pal-on{border-color:rgba(59,130,246,.8);transform:scale(1.2);}
.pc-pal:hover:not(.pc-pal-on){transform:scale(1.1);}

/* ══════════════════════════════════════════════════════════════════════
   AEON / DEFAULT indicator-set switch — luxury institutional badge
   ══════════════════════════════════════════════════════════════════════ */
.pc-grp-toggle{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:5px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);}
.pc-grp-btn{display:inline-flex;align-items:center;font-family:'Share Tech Mono',monospace;font-size:6.5px;font-weight:700;letter-spacing:.12em;padding:3px 8px;border:none;border-radius:3px;background:transparent;color:rgba(155,170,192,.4);cursor:pointer;transition:all .18s;}
.pc-grp-btn[data-grp="default"]:hover:not(.pc-grp-on){color:rgba(59,130,246,.7);}
.pc-grp-btn[data-grp="default"].pc-grp-on{background:rgba(59,130,246,.85);color:#04101f;box-shadow:0 0 8px rgba(59,130,246,.3);}
.pc-grp-btn[data-grp="aeon"]{color:rgba(217,192,90,.55);font-family:'Orbitron',var(--mono);letter-spacing:.16em;}
.pc-grp-btn[data-grp="aeon"]:hover:not(.pc-grp-on){color:rgba(230,205,120,.85);}
.pc-grp-btn[data-grp="aeon"].pc-grp-on{background:linear-gradient(135deg,#e6c75a 0%,#8B5CF6 100%);color:#0a0512;box-shadow:0 0 10px rgba(217,192,90,.4),0 0 20px rgba(139,92,246,.25);}

/* ══════════════════════════════════════════════════════════════════════
   DRAWING TOOLS — Bloomberg-meets-Web3 dropdown stack
   ══════════════════════════════════════════════════════════════════════ */
.pcdraw-trigger{display:inline-flex;align-items:center;gap:5px;font-family:'Share Tech Mono',monospace;font-size:7.5px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border:1px solid rgba(59,130,246,.28);border-radius:3px;background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.03));color:rgba(210,222,240,.8);cursor:pointer;transition:all .18s;line-height:1.6;}
.pcdraw-trigger:hover{border-color:rgba(59,130,246,.55);color:rgba(147,197,253,.95);box-shadow:0 0 10px rgba(59,130,246,.14);}
.pcdraw-trigger.pcdraw-trigger-active{border-color:rgba(0,245,255,.55);background:rgba(0,245,255,.09);color:rgba(0,245,255,.95);box-shadow:0 0 10px rgba(0,245,255,.18);}
.pcdraw-trigger-ico{display:inline-flex;opacity:.85;}
.pcdraw-trigger-chev{opacity:.5;transition:transform .18s;}
.pcdraw-trigger.pcdraw-dd-is-open .pcdraw-trigger-chev{transform:rotate(180deg);}
.pcdraw-color{width:13px;height:13px;border:none;border-radius:50%;cursor:pointer;padding:0;background:none;outline:none;vertical-align:middle;}
.pcdraw-clear{font-family:'Share Tech Mono',monospace;font-size:8px;padding:1px 5px;border:1px solid rgba(255,255,255,.07);background:transparent;color:rgba(155,170,192,.25);border-radius:3px;cursor:pointer;transition:all .18s;}
.pcdraw-clear:hover{color:rgba(255,80,90,.8);border-color:rgba(255,80,90,.35);}

.pcdraw-dd{display:none;position:fixed;min-width:196px;background:linear-gradient(165deg,rgba(9,10,20,.98) 0%,rgba(4,5,12,.985) 100%);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(59,130,246,.18);border-radius:8px;padding:6px;box-shadow:0 16px 44px rgba(0,0,0,.65),0 0 0 1px rgba(59,130,246,.07) inset,0 0 26px rgba(59,130,246,.06);z-index:2147483647;}
.pcdraw-dd.pcdraw-dd-open{display:block;}
.pcdraw-dd-hdr{display:flex;align-items:center;justify-content:space-between;font-family:'Orbitron','Share Tech Mono',monospace;font-size:6.5px;font-weight:700;letter-spacing:.18em;color:rgba(59,130,246,.6);padding:3px 7px 7px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px;}
.pcdraw-dd-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-family:'Share Tech Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.03em;padding:6px 7px;border:none;background:transparent;color:rgba(190,200,220,.72);cursor:pointer;border-radius:4px;transition:all .12s;}
.pcdraw-dd-item:hover{background:rgba(0,245,255,.07);color:rgba(0,245,255,.95);}
.pcdraw-dd-item.pcdraw-dd-on{background:rgba(0,245,255,.11);color:rgba(0,245,255,1);}
.pcdraw-dd-ico{width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.85;}
.pcdraw-dd-div{height:1px;background:rgba(255,255,255,.06);margin:4px 3px;}
.pcdraw-dd-ftr{font-family:'Share Tech Mono',monospace;font-size:5.8px;letter-spacing:.06em;color:rgba(155,170,192,.28);padding:6px 7px 2px;border-top:1px solid rgba(255,255,255,.05);margin-top:4px;text-transform:uppercase;}

/* ══════════════════════════════════════════════════════════════════════
   DRAWING TOOLS — vertical rail (TradingView-style, always-on, left of chart)
   ══════════════════════════════════════════════════════════════════════ */
.pcdraw-strip{display:flex;flex-direction:column;align-items:center;width:34px;flex-shrink:0;padding:8px 0;gap:3px;background:rgba(255,255,255,.015);border-right:1px solid rgba(59,130,246,.08);transition:width .18s;}
.pcdraw-strip-item{width:26px;height:26px;min-width:26px;padding:0 !important;display:flex !important;align-items:center;justify-content:center;border-radius:5px;flex-shrink:0;}
.pcdraw-strip-item svg{display:block;}
.pcdraw-strip-div{width:18px;height:1px;background:rgba(255,255,255,.08);margin:5px 0;flex-shrink:0;}
.pcdraw-strip-color{width:18px;height:18px;border:none;border-radius:50%;cursor:pointer;padding:0;background:none;outline:none;flex-shrink:0;margin:2px 0 5px;}
.pcdraw-strip-clear{color:rgba(255,110,110,.55);}
.pcdraw-strip-clear:hover{background:rgba(255,80,90,.1) !important;color:rgba(255,110,110,.9) !important;}
.pcdraw-strip-collapse{color:rgba(155,170,192,.4);margin-top:auto;}
.pcdraw-strip-collapse:hover{color:rgba(147,197,253,.85);background:rgba(59,130,246,.07) !important;}
.pcdraw-strip-collapse svg{transition:transform .18s;}
.pcdraw-strip.pcdraw-strip-collapsed{width:20px;}
.pcdraw-strip.pcdraw-strip-collapsed .pcdraw-strip-item:not(.pcdraw-strip-collapse),
.pcdraw-strip.pcdraw-strip-collapsed .pcdraw-strip-div,
.pcdraw-strip.pcdraw-strip-collapsed .pcdraw-strip-color{display:none;}
.pcdraw-strip.pcdraw-strip-collapsed .pcdraw-strip-collapse svg{transform:rotate(180deg);}

.wl-row{
  display:grid;grid-template-columns:1fr 60px auto auto auto;
  padding:0 14px;border-bottom:1px solid rgba(255,255,255,.04);
  align-items:center;transition:background .15s;
  min-height:38px;
}
.wl-row:last-child{border-bottom:none;}
.wl-row:hover{background:rgba(59,130,246,.028);}
.wl-sym{font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:700;color:rgba(215,222,235,.88);}
.wl-badge{font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.1em;padding:1px 4px;border-radius:2px;margin-left:5px;background:rgba(59,130,246,.08);color:rgba(59,130,246,.5);vertical-align:middle;}
.wl-price{font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:700;text-align:right;min-width:80px;}
.wl-chg{font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;text-align:right;min-width:60px;}
/* Positive change — always green, negative always red, never ambiguous */
.wl-chg.up{color:rgba(0,210,130,.95);}
.wl-chg.dn{color:rgba(210,55,75,.95);}
.wl-vs{font-family:'Share Tech Mono',monospace;font-size:9px;text-align:right;min-width:55px;color:rgba(155,170,192,.5);}
/* Sparkline column — make slightly wider for legibility */
.wl-spark-cell{width:60px;display:flex;align-items:center;justify-content:center;}

.mf-card{
  background:linear-gradient(135deg,rgba(5,8,16,0.55) 0%,rgba(3,4,10,0.60) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(59,130,246,.12);
  border-top:2px solid rgba(59,130,246,.35);
  border-radius:var(--sw-radius);
  padding:0;overflow:hidden;margin-bottom:16px;
  position:relative;
  box-shadow:0 0 20px rgba(59,130,246,0.03);
  display:flex;flex-direction:column;
}
.mf-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.4),rgba(59,130,246,.1) 60%,transparent);
}
.mf-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 16px;border-bottom:1px solid var(--sw-border);
  flex-wrap:wrap;gap:10px;
}
.mf-title{
  font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.14em;color:rgba(215,222,235,.85);
  display:flex;align-items:center;gap:8px;
}
.mf-title::before{content:'⬡';color:rgba(59,130,246,.5);font-size:10px;}
.mf-tf-seg{display:flex;border:1px solid var(--sw-border2);border-radius:var(--sw-radius-sm);overflow:hidden;}
.mf-tf{
  padding:5px 15px;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.1em;
  cursor:pointer;border:none;background:transparent;
  color:rgba(155,170,192,.5);border-right:1px solid var(--sw-border);transition:all .15s;
}
.mf-tf:last-child{border-right:none;}
.mf-tf.on{background:rgba(59,130,246,.08);color:rgba(59,130,246,.9);}
.mf-body{padding:20px 24px;display:flex;flex-direction:column;gap:18px;}
.mf-row{display:flex;align-items:center;gap:18px;}
.mf-label-wrap{min-width:80px;}
.mf-label{font-family:'Share Tech Mono',monospace;font-size:15px;font-weight:700;color:rgba(215,222,235,.85);}
.mf-sublabel{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(155,170,192,.4);margin-top:3px;letter-spacing:.06em;}
.mf-bar-wrap{flex:1;position:relative;}
.mf-bar-track{
  height:10px;
  background:rgba(255,255,255,.03);
  border-radius:5px;
  overflow:hidden;position:relative;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}
.mf-bar-buy{position:absolute;right:50%;top:0;height:100%;border-radius:5px 0 0 5px;transition:width .6s ease;}
.mf-bar-sell{position:absolute;left:50%;top:0;height:100%;border-radius:0 5px 5px 0;transition:width .6s ease;}
.mf-bar-mid{position:absolute;left:50%;top:0;height:100%;width:1px;background:rgba(255,255,255,.1);}
.mf-net{font-family:'Share Tech Mono',monospace;font-size:16px;font-weight:700;min-width:90px;text-align:right;transition:color .3s;}
.mf-sentiment{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;min-width:110px;text-align:right;color:rgba(155,170,192,.45);}
.mf-footer{
  padding:10px 24px 13px;border-top:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:space-between;
  font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(155,170,192,.3);letter-spacing:.06em;
}

/* ══════ LIQUIDATION TRACKER — classified events ══════ */
.liq-card{
  background:linear-gradient(135deg,rgba(5,8,16,0.55) 0%,rgba(3,4,10,0.60) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(210,55,75,.15);
  border-radius:var(--sw-radius);
  padding:0;overflow:hidden;margin-bottom:16px;
  position:relative;
  box-shadow:0 0 20px rgba(210,55,75,.04);
  /* Ensure the card never grows beyond its grid cell */
  min-height:0;
}
.liq-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgba(210,55,75,.4),rgba(210,55,75,.15) 50%,transparent);
}
.liq-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 16px;border-bottom:1px solid var(--sw-border);
  flex-wrap:wrap;gap:10px;
}
.liq-title{
  font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:700;
  letter-spacing:.14em;color:rgba(215,222,235,.85);
  display:flex;align-items:center;gap:8px;
}
.liq-title::before{content:'⬡';color:rgba(210,55,75,.4);font-size:10px;}
.liq-live-dot{display:inline-flex;align-items:center;gap:7px;font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(0,210,130,.7);letter-spacing:.1em;}
.liq-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--sw-border);
}
.liq-stat{
  background:var(--sw-surface2);
  padding:16px 18px;
  position:relative;
}
.liq-stat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);
}
.liq-stat-l{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:rgba(155,170,192,.4);margin-bottom:7px;}
.liq-stat-v{font-family:'Share Tech Mono',monospace;font-size:20px;font-weight:700;}
.liq-stat-s{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.4);margin-top:4px;}
.liq-feed{padding:14px 24px 16px;overflow-y:auto;}
.liq-feed::-webkit-scrollbar{width:2px;}
.liq-feed::-webkit-scrollbar-thumb{background:rgba(59,130,246,.2);border-radius:1px;}
.liq-event{
  display:flex;align-items:center;gap:14px;
  padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);
  animation:liq-flash .4s ease;
}
.liq-event:last-child{border-bottom:none;}
@keyframes liq-flash{0%{background:rgba(210,55,75,.04);}100%{background:transparent;}}
.liq-event-dir{
  font-family:'Share Tech Mono',monospace;font-size:8px;font-weight:500;
  padding:2px 9px;border-radius:var(--sw-radius-sm);
  min-width:46px;text-align:center;letter-spacing:.08em;flex-shrink:0;
}
.le-long{background:rgba(18,59,56,.45);color:#2FAF9B;border:1px solid rgba(47,175,155,.35);text-shadow:0 0 8px rgba(84,201,181,.3);}
.le-short{background:rgba(58,31,44,.45);color:#A35A78;border:1px solid rgba(163,90,120,.35);text-shadow:0 0 8px rgba(196,119,150,.3);}
.liq-event-price{font-family:'Share Tech Mono',monospace;font-size:14px;font-weight:700;min-width:84px;color:rgba(215,222,235,.8);}
.liq-event-size{font-family:'Share Tech Mono',monospace;font-size:10px;flex:1;color:rgba(155,170,192,.65);}
.liq-event-time{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(155,170,192,.3);flex-shrink:0;}
.liq-empty{font-family:'Share Tech Mono',monospace;font-size:10px;color:rgba(155,170,192,.3);padding:24px 0;text-align:center;letter-spacing:.08em;}

/* ══════ LAYOUT — two column ══════ */
.two-col{display:flex;gap:16px;margin-bottom:16px;align-items:stretch;flex-wrap:wrap;}
.col-main{flex:2.2;min-width:0;display:flex;flex-direction:column;gap:14px;}
.col-side{flex:1;min-width:250px;display:flex;flex-direction:column;gap:12px;}

/* ══════ GENERIC CARD (used by signal matrix, divChart, etc.) ══════ */
.card{
  background:rgb(255 255 255 / 2%);
  border:1px solid rgba(59,130,246,.1);
  border-radius:var(--sw-radius);
  padding:18px;position:relative;overflow:hidden;
}
.card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.2),rgba(59,130,246,.08) 50%,transparent);
}
.card.brackets::before,.card.brackets::after{display:none;}
.card.brackets{border:1px solid rgba(59,130,246,.15);}
.ctitle{
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(59,130,246,.6);
  margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.ctitle::before{content:'// ';opacity:.5;}

/* ══════ CHART CARD — premium main panel ══════ */
.chart-card-main{
  background:linear-gradient(160deg,rgba(5,8,16,1) 0%,rgba(3,4,10,1) 100%);
  border:1px solid rgba(59,130,246,.15);
  border-radius:var(--sw-radius);
  overflow:hidden;position:relative;
  box-shadow:0 0 25px rgba(59,130,246,0.03);
}
.chart-card-main::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,rgba(59,130,246,.7) 0%,rgba(59,130,246,.3) 30%,rgba(59,130,246,.2) 65%,transparent 100%);
}
.chart-card-main.brackets::before,.chart-card-main.brackets::after{display:none;}
.chart-card-main::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,rgba(59,130,246,.7) 0%,rgba(59,130,246,.3) 30%,rgba(59,130,246,.2) 65%,transparent 100%);
}
.chart-main-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 100%);
  position:relative;z-index:1;
}
.chart-main-lbl{
  font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:700;
  letter-spacing:.12em;color:rgba(215,222,235,.75);
}
.chart-wrap{position:relative;width:100%;height:380px;padding:12px 0 8px;}
.vpvr-divider{
  display:flex;align-items:center;gap:12px;padding:6px 20px;
  border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.03);
  background:rgba(255,255,255,.01);
}
.vpvr-divider span{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(155,170,192,.25);
}
.vpvr-wrap{position:relative;width:100%;height:120px;padding:4px 0 8px;}
/* OI + Funding Rate History Chart */
#oiFundChart{cursor:crosshair;display:block;width:100%;height:200px;}
#oiFundCard canvas{image-rendering:pixelated;}

/* ══════ CHART SIDE CARDS ══════ */
.chart-side-card{
  background:linear-gradient(145deg,rgba(5,8,16,1) 0%,rgba(3,4,10,1) 100%);
  border:1px solid rgba(59,130,246,.12);border-radius:var(--sw-radius);
  padding:0;overflow:hidden;position:relative;
  box-shadow:0 0 16px rgba(59,130,246,0.03);
}
.chart-side-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.25) 40%,rgba(59,130,246,.12) 70%,transparent);
}
.chart-side-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px 10px;border-bottom:1px solid rgba(59,130,246,.06);
}

/* ══════ FIBONACCI — premium rows ══════ */
#fibTable{padding:0 16px 8px;}
.fib-row{
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  position:relative;transition:background .15s;
}
.fib-row:last-child{border-bottom:none;}
.fib-row:hover{background:rgba(255,255,255,.015);margin:0 -16px;padding:8px 16px;}
.fib-now{
  background:rgba(59,130,246,.04) !important;
  border-left:2px solid rgba(59,130,246,.6);
  margin:0 -16px !important;padding:8px 16px 8px 14px !important;
}
.fib-lv{font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;min-width:46px;letter-spacing:.02em;}
.fib-bar{flex:1;height:3px;background:rgba(255,255,255,.04);border-radius:2px;overflow:hidden;}
.fib-fill{height:100%;border-radius:2px;}
.fib-price{font-family:'Share Tech Mono',monospace;font-size:11px;font-weight:700;min-width:82px;text-align:right;color:rgba(215,222,235,.85);}
.fib-pct{font-family:'Share Tech Mono',monospace;font-size:9px;padding:2px 7px;border-radius:var(--sw-radius-sm);min-width:52px;text-align:center;}

/* ══════ ZONES — premium redesign ══════ */
.zone-toggle-row{
  display:flex;gap:0;margin-bottom:0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.zone-toggle-btn{
  flex:1;padding:11px 14px;
  font-family:'Share Tech Mono',monospace;font-size:9px;font-weight:700;
  letter-spacing:.12em;border:none;cursor:pointer;
  background:transparent;color:rgba(155,170,192,.4);
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all .2s;position:relative;
}
.zone-toggle-btn::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:transparent;transition:background .2s;
}
.zt-buy.on{background:rgba(0,210,130,.05);color:rgba(0,210,130,.9);}
.zt-buy.on::after{background:rgba(0,210,130,.5);}
.zt-sell.on{background:rgba(210,55,75,.05);color:rgba(210,55,75,.9);}
.zt-sell.on::after{background:rgba(210,55,75,.5);}
.zt-count{
  font-family:'Share Tech Mono',monospace;font-size:8px;
  padding:1px 7px;border-radius:10px;background:rgba(255,255,255,.06);color:rgba(155,170,192,.6);
}
.zt-buy.on .zt-count{background:rgba(0,210,130,.12);color:rgba(0,210,130,.8);}
.zt-sell.on .zt-count{background:rgba(210,55,75,.12);color:rgba(210,55,75,.8);}
.zone-panel{padding:0 16px 8px;}
.zone-row{
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);position:relative;
}
.zone-row:last-child{border-bottom:none;}
.zone-row::before{
  content:'';position:absolute;left:-16px;top:0;bottom:0;width:2px;
  background:transparent;transition:background .2s;border-radius:0 1px 1px 0;
}
.zone-row:hover::before{background:rgba(59,130,246,.3);}
.zone-lbl{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(155,170,192,.4);margin-bottom:6px;display:flex;align-items:center;gap:8px;
}
.zone-lbl::before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6;box-shadow:0 0 4px currentColor;}
.zone-p{font-family:'Share Tech Mono',monospace;font-size:22px;font-weight:900;letter-spacing:-.01em;line-height:1;}
.zone-meta{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.4);margin-top:5px;}
.zone-bar{height:3px;border-radius:2px;margin-top:8px;background:rgba(255,255,255,.04);overflow:hidden;}
.zone-fill{height:100%;border-radius:2px;transition:width .6s ease;}
.zone-panel{}
.zt-icon{font-size:8px;}


/* ══════ MULTI-EXCHANGE — unified panel ══════ */
/* Panel wrapper */
.mx-panel{
  background:linear-gradient(160deg,rgba(5,8,16,.98) 0%,rgba(3,4,10,1) 100%);
  border:1px solid rgba(59,130,246,.14);
  border-top:2px solid rgba(59,130,246,.38);
  border-radius:var(--sw-radius);
  overflow:hidden;position:relative;margin-bottom:16px;
  box-shadow:0 0 28px rgba(59,130,246,0.03);
}
.mx-panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:1;
  background:linear-gradient(90deg,rgba(59,130,246,.6),rgba(59,130,246,.2) 50%,transparent);
}
/* Panel header */
.mx-hdr{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding:14px 20px 12px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(255,255,255,.025) 0%,transparent 100%);
}
.mx-hdr-left{display:flex;align-items:center;gap:10px;}
.mx-hdr-hex{color:rgba(59,130,246,.5);font-family:'Share Tech Mono',monospace;font-size:13px;}
.mx-hdr-title{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(215,222,235,.7);}
.mx-hdr-sub{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.1em;color:rgba(155,170,192,.3);margin-left:4px;}
.mx-hdr-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mx-exc-names{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.08em;color:rgba(155,170,192,.32);}
.mx-status-pill{
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.1em;
  padding:3px 9px;border-radius:2px;
  border:1px solid rgba(0,210,130,.28);background:rgba(0,210,130,.07);color:rgba(0,210,130,.85);
}
.mx-status-pill.warn{border-color:rgba(255,45,85,.3);background:rgba(255,45,85,.07);color:rgba(255,90,110,.9);}

/* Zone A — aggregate metric strip */
.mx-agg{
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:1px;background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(59,130,246,.06);
}
.ex-mc{
  background:linear-gradient(160deg,rgba(7,10,20,1) 0%,rgba(4,6,14,1) 100%);
  padding:14px 14px 12px;position:relative;overflow:hidden;
  transition:background .15s;
}
.ex-mc:hover{background:rgba(59,130,246,.022);}
.ex-mc.mx-alert{background:linear-gradient(160deg,rgba(14,4,8,1) 0%,rgba(10,3,6,1) 100%);}
.ex-mc.mx-alert::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,45,85,.55);}
.ex-mc:not(.mx-alert)::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(59,130,246,.1),transparent 60%);}
.ex-mc-l{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:rgba(155,170,192,.38);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ex-mc-v{font-family:'Share Tech Mono',monospace;font-size:15px;font-weight:700;line-height:1;margin-bottom:5px;}
.ex-mc-s{font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:.08em;color:rgba(155,170,192,.38);}
.ex-mc-s.bull{color:rgba(0,210,130,.6);}
.ex-mc-s.bear{color:rgba(210,55,75,.6);}
.ex-mc-s.alert{color:rgba(255,45,85,.72);}
/* Normalised OB bar (used in agg strip) */
.mx-mini-bar{height:2px;border-radius:1px;background:rgba(255,255,255,.05);overflow:hidden;margin-top:6px;display:flex;}
.mx-mini-bid{background:rgba(0,210,130,.5);border-radius:1px 0 0 1px;transition:width .5s;}
.mx-mini-ask{background:rgba(210,55,75,.32);border-radius:0 1px 1px 0;flex:1;}

/* Zone B — divergence chart (in-panel) */
.mx-div{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.04);}
.mx-div-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;gap:10px;}
.mx-div-title{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:rgba(59,130,246,.45);}
.mx-div-title::before{content:'// ';opacity:.5;}
.mx-div-alert{font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.1em;color:rgba(255,45,85,.8);background:rgba(255,45,85,.06);border:1px solid rgba(255,45,85,.2);padding:2px 8px;border-radius:2px;}
/* div-row / div-bw / div-bf / div-mid / div-val — kept identical, just inside .mx-div now */
.div-row{display:flex;align-items:center;gap:11px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);}
.div-row:last-child{border-bottom:none;}
.div-name{font-family:'Share Tech Mono',monospace;font-size:10px;min-width:64px;color:rgba(215,222,235,.8);}
.div-bw{flex:1;height:3px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;position:relative;}
.div-bf{height:100%;border-radius:2px;position:absolute;transition:all .5s;}
.div-mid{position:absolute;left:50%;top:0;height:100%;width:1px;background:rgba(59,130,246,.15);}
.div-val{font-family:'Share Tech Mono',monospace;font-size:10px;min-width:70px;text-align:right;color:rgba(215,222,235,.8);}

/* Zone C — per-exchange cards */
.ex-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:rgba(255,255,255,.025);
}
.ex-card{
  background:linear-gradient(160deg,rgba(5,8,16,1) 0%,rgba(3,4,10,1) 100%);
  padding:14px 14px 12px;position:relative;overflow:hidden;
  transition:background .15s;
}
.ex-card:hover{background:rgba(59,130,246,.02);}
.ex-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--ex-accent,rgba(59,130,246,.2)),transparent 60%);}
.ex-card.mx-outlier{background:linear-gradient(160deg,rgba(14,4,8,1) 0%,rgba(10,3,6,1) 100%);}
.ex-card.mx-outlier::before{background:linear-gradient(90deg,rgba(255,45,85,.45),transparent 60%);}
.ex-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.ex-name{font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;letter-spacing:.1em;}
.ex-dot{width:5px;height:5px;border-radius:50%;}
.ex-wt{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.08em;color:rgba(155,170,192,.3);margin-bottom:8px;}
.ex-badge{
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:1px 6px;border-radius:1px;display:inline-block;margin-bottom:8px;
}
.ex-badge.fr{background:rgba(255,45,85,.08);border:1px solid rgba(255,45,85,.25);color:rgba(255,90,110,.85);}
.ex-badge.ls{background:rgba(255,170,0,.07);border:1px solid rgba(255,170,0,.2);color:rgba(255,200,60,.8);}
.ex-badge.oi{background:rgba(139,92,246,.1);border:1px solid rgba(139,92,246,.28);color:rgba(180,150,255,.85);}
.ex-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.035);}
.ex-row:last-of-type{border-bottom:none;}
.ex-lbl{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(155,170,192,.42);letter-spacing:.06em;}
.ex-val{font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:500;color:rgba(215,222,235,.85);}
/* keep legacy .div-card for any other references (scalp section uses none, but safe fallback) */
.div-card{
  background:linear-gradient(145deg,rgba(5,8,16,1) 0%,rgba(3,4,10,1) 100%);
  border:1px solid rgba(59,130,246,.1);border-radius:var(--sw-radius);padding:18px;margin-bottom:10px;
  position:relative;overflow:hidden;
}
.div-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,rgba(59,130,246,.2),transparent);}

/* ══════ SIGNAL MATRIX — accordion panels ══════ */
.sig-matrix{display:flex;flex-direction:column;gap:0;}
.sig-group{border-bottom:1px solid rgba(255,255,255,.04);}
.sig-group:last-of-type{border-bottom:none;}
.sig-group-hdr{
  display:flex;align-items:center;gap:12px;padding:15px 20px;cursor:pointer;
  background:linear-gradient(90deg,rgba(5,8,16,1),rgba(3,4,10,1));
  user-select:none;transition:background .15s;position:relative;
}
.sig-group-hdr::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--group-color,rgba(59,130,246,.5));
  opacity:.4;transition:opacity .2s,box-shadow .2s;
}
.sig-group-hdr.open::before{opacity:1;box-shadow:0 0 10px var(--group-color,rgba(59,130,246,0.28));}
.sig-group-hdr:hover{background:rgba(59,130,246,.018);}
.sig-group-label{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.16em;text-transform:uppercase;flex:1;color:rgba(215,222,235,.65);}
.sig-group-bar{flex:1;max-width:100px;height:2px;border-radius:1px;background:rgba(255,255,255,.05);overflow:hidden;}
.sig-group-fill{height:100%;border-radius:1px;transition:width .7s ease;}
.sig-group-score{font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:500;min-width:26px;text-align:right;}
.sig-group-chevron{font-size:10px;color:rgba(59,130,246,.3);margin-left:4px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.sig-group-hdr.open .sig-group-chevron{transform:rotate(90deg);color:rgba(59,130,246,.6);}
.sig-group-body{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1);}
.sig-group-body.open{max-height:700px;}
.sig-row{
  display:flex;align-items:center;padding:0 20px;
  border-top:1px solid rgba(255,255,255,.03);
  transition:background .15s;cursor:default;min-height:52px;
  background:rgba(3,4,10,1);
}
.sig-row:hover{background:rgba(59,130,246,.018);}
.sig-left{display:flex;align-items:center;gap:13px;flex:1;min-width:0;padding:11px 0;}
.sig-icon{
  width:32px;height:32px;border-radius:var(--sw-radius-sm);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-family:'Share Tech Mono',monospace;border:1px solid;
}
.si-bull{background:rgba(0,210,130,.07);border-color:rgba(0,210,130,.2);color:rgba(0,210,130,.9);}
.si-bear{background:rgba(210,55,75,.07);border-color:rgba(210,55,75,.2);color:rgba(210,55,75,.9);}
.si-neut{background:rgba(255,255,255,.025);border-color:rgba(255,255,255,.07);color:rgba(155,170,192,.45);}
.si-warn{background:rgba(59,130,246,.07);border-color:rgba(59,130,246,.2);color:rgba(59,130,246,.9);}
.sig-text{min-width:0;flex:1;}
.sig-name{font-family:'Rajdhani',sans-serif;font-size:13px;font-weight:600;color:rgba(215,222,235,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sig-detail{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.5);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sig-bar-wrap{width:82px;flex-shrink:0;margin:0 16px;display:flex;flex-direction:column;align-items:center;gap:4px;}
.sig-bar-track{width:100%;height:3px;border-radius:2px;background:rgba(255,255,255,.05);overflow:hidden;position:relative;}
.sig-bar-fill{height:100%;border-radius:2px;position:absolute;left:0;top:0;transition:width .7s ease,background .4s;}
.sig-bar-num{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(155,170,192,.4);}
.sig-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;padding:11px 0;}
.sig-badge{
  font-family:'Share Tech Mono',monospace;font-size:9px;font-weight:500;
  padding:3px 10px;border-radius:var(--sw-radius-sm);border:1px solid;letter-spacing:.08em;
  white-space:nowrap;min-width:52px;text-align:center;
}
.sb-bull{background:rgba(0,210,130,.06);color:rgba(0,210,130,.9);border-color:rgba(0,210,130,.2);}
.sb-bear{background:rgba(210,55,75,.06);color:rgba(210,55,75,.9);border-color:rgba(210,55,75,.2);}
.sb-neut{background:rgba(255,255,255,.025);color:rgba(155,170,192,.55);border-color:rgba(255,255,255,.07);}
.sb-warn{background:rgba(59,130,246,.06);color:rgba(59,130,246,.9);border-color:rgba(59,130,246,.2);}
.sig-live{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.1em;color:rgba(0,210,130,.6);}
.sig-sim{font-family:'Share Tech Mono',monospace;font-size:7px;color:rgba(155,170,192,.3);}
.sig-summary{
  display:flex;align-items:center;gap:16px;padding:16px 20px;
  background:var(--sw-surface2);border-top:1px solid rgba(255,255,255,.06);
}
.sig-sum-label{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(155,170,192,.45);letter-spacing:.12em;}
.sig-sum-track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.05);overflow:hidden;position:relative;}
.sig-sum-fill{height:100%;border-radius:2px;transition:width .9s ease,background .4s;}
.sig-sum-score{font-family:'Share Tech Mono',monospace;font-size:17px;font-weight:700;}
.sig-sum-count{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.4);}

/* ══════ R:R SETUP SCANNER — cinematic ops panel ══════ */
.rr-scanner{
  background:linear-gradient(135deg,rgba(5,8,16,1) 0%,rgba(3,4,10,1) 100%);
  border:1px solid rgba(59,130,246,.15);
  border-top:2px solid rgba(59,130,246,.4);
  border-radius:var(--sw-radius);
  overflow:hidden;margin-bottom:16px;
  position:relative;
  box-shadow:0 0 24px rgba(59,130,246,0.035);
}
.rr-scanner::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.5),rgba(59,130,246,.15) 60%,transparent);
  z-index:1;
}
.rr-scanner::after{display:none;}
.rr-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px 16px;border-bottom:1px solid var(--sw-border);
  flex-wrap:wrap;gap:14px;
}
.rr-title{
  font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:700;
  letter-spacing:.14em;color:rgba(59,130,246,.9);
  display:flex;align-items:center;gap:8px;
}
.rr-title::before{content:'⬡';color:rgba(59,130,246,.55);font-size:10px;}
.rr-sub{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.45);margin-top:4px;letter-spacing:.04em;}
.rr-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.rr-ratio-label{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.45);letter-spacing:.1em;white-space:nowrap;}
.rr-ratio-display{
  font-family:'Share Tech Mono',monospace;font-size:20px;font-weight:700;
  color:rgba(59,130,246,.9);min-width:52px;text-align:center;
  text-shadow:0 0 16px rgba(59,130,246,0.21);
}
.rr-slider{
  width:160px;-webkit-appearance:none;height:4px;border-radius:2px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,rgba(59,130,246,.7) var(--pct,50%),rgba(255,255,255,.06) var(--pct,50%));
}
.rr-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:rgba(59,130,246,1);border:2px solid rgba(5,5,8,1);cursor:pointer;
  box-shadow:0 0 10px rgba(59,130,246,0.35);transition:transform .15s;
}
.rr-slider::-webkit-slider-thumb:hover{transform:scale(1.2);}
.rr-scan-btn{
  padding:8px 20px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.12em;
  background:rgba(59,130,246,.08);color:rgba(59,130,246,.9);
  border:1px solid rgba(59,130,246,.28);border-radius:var(--sw-radius-sm);
  cursor:pointer;transition:all .18s;white-space:nowrap;
  position:relative;overflow:hidden;
}
.rr-scan-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(59,130,246,.05),transparent);
}
.rr-scan-btn:hover{background:rgba(59,130,246,.15);box-shadow:0 0 14px rgba(59,130,246,0.105);}
.rr-scan-btn.scanning{opacity:.5;cursor:wait;}
.rr-results{padding:20px 24px;}
.rr-status{
  display:flex;align-items:center;gap:16px;
  padding:18px 20px;border-radius:var(--sw-radius-sm);
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.02);
  font-family:'Share Tech Mono',monospace;font-size:11px;
}
.rr-status-icon{font-size:22px;flex-shrink:0;}
.rr-status-sub{font-size:9px;color:rgba(155,170,192,.45);line-height:1.7;margin-top:4px;}
.rr-setups{display:flex;flex-direction:column;gap:12px;}
.rr-setup-card{border-radius:var(--sw-radius);border:1px solid;overflow:hidden;position:relative;}
.rr-setup-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent);
}
.rr-setup-card.rr-long{
  border-color:rgba(0,210,130,.22);
  background:linear-gradient(135deg,rgba(0,210,130,.025),rgba(0,210,130,.01));
}
.rr-setup-card.rr-short{
  border-color:rgba(210,55,75,.22);
  background:linear-gradient(135deg,rgba(210,55,75,.025),rgba(210,55,75,.01));
}
.rr-setup-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px 12px;border-bottom:1px solid rgba(255,255,255,.05);
  flex-wrap:wrap;gap:10px;
}
.rr-setup-dir{font-family:'Share Tech Mono',monospace;font-size:15px;font-weight:700;letter-spacing:.08em;}
.rr-setup-rr{
  font-family:'Share Tech Mono',monospace;font-size:20px;font-weight:900;
  text-shadow:0 0 14px currentColor;
}
.rr-setup-quality{font-family:'Share Tech Mono',monospace;font-size:9px;padding:3px 9px;border-radius:var(--sw-radius-sm);border:1px solid;letter-spacing:.06em;}
.rr-setup-levels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px 18px 16px;}
@media(max-width:500px){.rr-setup-levels{grid-template-columns:1fr 1fr;}}
.rr-level{text-align:center;}
.rr-level-lbl{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.16em;text-transform:uppercase;color:rgba(155,170,192,.4);margin-bottom:6px;}
.rr-level-price{font-family:'Share Tech Mono',monospace;font-size:15px;font-weight:700;}
.rr-level-pct{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.45);margin-top:4px;}
.rr-geo{padding:0 18px 16px;}
.rr-geo-track{height:20px;background:rgba(255,255,255,.035);border-radius:var(--sw-radius-sm);position:relative;overflow:hidden;}
.rr-geo-loss{position:absolute;top:0;height:100%;background:rgba(210,55,75,.16);border-radius:var(--sw-radius-sm);}
.rr-geo-profit{position:absolute;top:0;height:100%;background:rgba(0,210,130,.11);border-radius:var(--sw-radius-sm);}
.rr-geo-pin{position:absolute;top:0;height:100%;width:1px;}
.rr-geo-lbl{position:absolute;top:50%;transform:translateY(-50%);font-family:'Share Tech Mono',monospace;font-size:8px;white-space:nowrap;color:rgba(155,170,192,.55);}

/* ══════ SESSION PANEL ══════ */
.sess-grid{display:grid;grid-template-columns:repeat(3,minmax(0,140px)) 1fr;gap:10px;padding-bottom:6px;grid-auto-rows:1fr;align-items:stretch;}
@media(max-width:900px){.sess-grid{grid-template-columns:1fr 1fr 1fr 1fr;}}
@media(max-width:700px){.sess-grid{grid-template-columns:1fr 1fr;}}
/* ══ SESSION CARD — base (mobile + non-desktop contexts) ══
   Desktop Zone B overrides live in desktop-shell.css @media ≥1024px */
.sess-card{
  background:rgba(8,11,20,.65);
  border:1px solid rgba(255,255,255,.06);
  border-left:2px solid var(--sess-accent,rgba(59,130,246,.22));
  border-radius:8px;
  padding:11px 12px;position:relative;overflow:hidden;
  transition:background .18s,border-left-color .18s,box-shadow .18s;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
/* Faint glow strip along left rail */
.sess-card::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:26px;
  background:linear-gradient(90deg,rgba(59,130,246,.05),transparent);
  pointer-events:none;
}
.sess-card::after{display:none;}

/* Active session */
.sess-card.active,.sess-card.sess-bullish,.sess-card[data-sess-bull="true"]{
  background:rgba(59,130,246,.03);
  border-left:2px solid rgba(16,185,129,.85);
  box-shadow:inset 2px 0 14px rgba(16,185,129,.05);
}
.sess-card.active::before,.sess-card.sess-bullish::before{
  background:linear-gradient(90deg,rgba(16,185,129,.07),transparent);
}
/* DOW bias */
.sess-card.sess-dow-bias,.sess-card[data-sess-dow="true"]{
  background:rgba(255,170,0,.03);
  border-left:2px solid rgba(255,170,0,.72);
  box-shadow:inset 2px 0 12px rgba(255,170,0,.04);
}
.sess-card.sess-dow-bias::before{
  background:linear-gradient(90deg,rgba(255,170,0,.06),transparent);
}

.sess-label{
  font-family:'Share Tech Mono',monospace;font-size:6.5px;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(155,170,192,.38);margin-bottom:7px;
  display:flex;align-items:center;gap:5px;
}
.sess-active{
  width:5px;height:5px;border-radius:50%;flex-shrink:0;
  background:rgba(16,185,129,.95);
  box-shadow:0 0 6px rgba(16,185,129,.7),0 0 10px rgba(16,185,129,.3);
  animation:pulse 1.5s ease-in-out infinite;
}
.sess-val{
  font-family:'Orbitron','Share Tech Mono',monospace;
  font-size:16px;font-weight:700;line-height:1;
  color:rgba(215,222,235,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sess-sub{font-family:'Share Tech Mono',monospace;font-size:7.5px;color:rgba(155,170,192,.42);margin-top:5px;line-height:1.4;}
.sess-range{font-family:'Share Tech Mono',monospace;font-size:7px;color:rgba(155,170,192,.24);margin-top:3px;}
.dow-bar{display:flex;gap:2px;margin-top:8px;align-items:flex-end;height:22px;}
.dow-seg{flex:1;border-radius:2px 2px 0 0;min-height:2px;transition:opacity .25s;}
.dow-lbl{font-family:'Share Tech Mono',monospace;font-size:5.5px;text-align:center;margin-top:2px;color:rgba(155,170,192,.28);}
.sess-dow-val{color:rgba(255,170,0,.92)!important;}
.sess-dow-mood{color:rgba(255,170,0,.58)!important;}

/* ══════ POSITION CALCULATOR — Beverly Hills term sheet ══════ */
.calc-wrap{
  background:#080D15;
  border:1px solid rgba(217,192,90,.14);
  border-top:2px solid rgba(217,192,90,.42);
  border-radius:var(--sw-radius);
  overflow:hidden;margin-bottom:16px;position:relative;
  box-shadow:0 0 24px rgba(217,192,90,0.025);
}
.calc-wrap::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(217,192,90,.5),rgba(217,192,90,.12) 50%,transparent);
  z-index:1;
}
.calc-wrap::after{display:none;}
.calc-verdict-hero{
  padding:12px 18px 10px;border-bottom:1px solid var(--sw-border);
  position:relative;overflow:hidden;transition:background .4s;
  background:#070B12;
}
.calc-verdict-hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 120% at 0% 50%,var(--verdict-glow,rgba(217,192,90,.03)),transparent 70%);
  pointer-events:none;
}
.cvh-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:8px;}
.cvh-tag{font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.22em;color:rgba(217,192,90,.55);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.cvh-tag::before{content:'⬡';color:rgba(217,192,90,.45);font-size:8px;}
.cvh-verdict{
  font-family:'Share Tech Mono',monospace;font-size:18px;font-weight:900;letter-spacing:.03em;
  line-height:1.15;transition:color .3s;
}
.cvh-sub{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.55);margin-top:4px;line-height:1.4;max-width:540px;}
.cvh-arc{position:relative;width:52px;height:52px;flex-shrink:0;}
.cvh-arc svg{transform:rotate(-90deg);width:52px;height:52px;}
.cvh-arc-num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.cvh-arc-val{font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:900;line-height:1;}
.cvh-arc-lbl{font-family:'Share Tech Mono',monospace;font-size:6px;color:rgba(155,170,192,.45);letter-spacing:.1em;margin-top:2px;}
.trade-geo{margin-top:0;background:#090E16;border-radius:var(--sw-radius-sm);padding:8px 10px;}
.tg-label{font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.16em;color:rgba(155,170,192,.35);text-transform:uppercase;margin-bottom:5px;}
.tg-track{position:relative;height:12px;background:rgba(255,255,255,.03);border-radius:var(--sw-radius-sm);overflow:visible;}
.tg-zone-fill{position:absolute;top:0;height:100%;border-radius:var(--sw-radius-sm);transition:left .4s,width .4s;}
.tg-marker{position:absolute;top:-3px;width:1px;height:18px;border-radius:1px;transition:left .4s;}
.tg-marker-lbl{position:absolute;top:-13px;font-family:'Share Tech Mono',monospace;font-size:6.5px;white-space:nowrap;transform:translateX(-50%);letter-spacing:.05em;color:rgba(155,170,192,.55);}
.tg-marker-price{position:absolute;bottom:-13px;font-family:'Share Tech Mono',monospace;font-size:6.5px;white-space:nowrap;transform:translateX(-50%);color:rgba(155,170,192,.45);}
.rr-status-title{font-family:'Share Tech Mono',monospace;font-size:14px;font-weight:700;letter-spacing:.06em;margin-bottom:4px;color:rgba(155,170,192,.7);}

.calc-main{display:grid;grid-template-columns:1fr 1fr;gap:0;}
@media(max-width:800px){.calc-main{grid-template-columns:1fr;}}
.calc-inputs-panel{padding:12px 18px;border-right:1px solid var(--sw-border);background:#0A0F17;}
@media(max-width:800px){.calc-inputs-panel{border-right:none;border-bottom:1px solid var(--sw-border);}}
.calc-mode-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.calc-mode-label{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.18em;color:rgba(155,170,192,.45);text-transform:uppercase;}
.calc-mode-seg{display:flex;border:1px solid var(--sw-border2);border-radius:var(--sw-radius-sm);overflow:hidden;background:#0B111A;}
.cmb{
  padding:5px 15px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.12em;
  cursor:pointer;border:none;background:transparent;color:rgba(155,170,192,.45);
  border-right:1px solid var(--sw-border);transition:all .18s;
}
.cmb:last-child{border-right:none;}
.cmb.on-long{background:rgba(0,210,130,.09);color:rgba(0,210,130,.95);}
.cmb.on-short{background:rgba(210,55,75,.09);color:rgba(210,55,75,.95);}

/* Bloomberg-style single-line rows: label left (fixed column), field/slider
   right (fills remainder). The Entry Zone group opts out via an inline
   display:block (it has 3 stacked rows of its own — label, zone buttons +
   sync, and a price field — so it can't collapse to one line). */
.ci-group{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;}
.ci-group:last-child{margin-bottom:0;}
.ci-label{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(155,170,192,.5);flex:0 0 118px;
  display:flex;align-items:center;justify-content:space-between;white-space:nowrap;
}
.ci-hint{display:none;} /* descriptive subtext traded for density — available via title="" tooltip if needed later */
.ci-field{
  position:relative;display:flex;align-items:center;flex:1;min-width:0;
  background:#0A0F18;
  border:1px solid var(--sw-border2);
  border-bottom:2px solid rgba(217,192,90,.24);
  border-radius:var(--sw-radius-sm);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.ci-field:focus-within{
  border-color:rgba(255,255,255,.16);
  border-bottom-color:rgba(217,192,90,.6);
  background:#101724;
  box-shadow:0 3px 12px rgba(0,0,0,.4),0 0 0 1px rgba(217,192,90,0.04) inset;
}
.ci-field-prefix{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.3);padding:0 0 0 10px;pointer-events:none;}
.ci-input{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  padding:6px 7px 6px 4px;
  font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:500;
  color:rgba(215,222,235,.9);-moz-appearance:textfield;
}
.ci-input::-webkit-inner-spin-button,.ci-input::-webkit-outer-spin-button{-webkit-appearance:none;}
.ci-unit{font-family:'Share Tech Mono',monospace;font-size:7px;color:rgba(155,170,192,.3);padding:0 9px;pointer-events:none;letter-spacing:.06em;}
.ci-slider-row{display:flex;align-items:center;gap:10px;margin-top:0;flex:1;min-width:0;}
.ci-slider{
  flex:1;-webkit-appearance:none;height:3px;border-radius:2px;outline:none;cursor:pointer;
  background:linear-gradient(90deg,var(--sl-color,rgba(217,192,90,.75)) var(--pct,0%),rgba(255,255,255,.07) var(--pct,0%));
}
.ci-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--sl-color,rgba(217,192,90,1));
  border:2px solid rgba(5,5,8,1);cursor:pointer;
  box-shadow:0 0 8px var(--sl-glow,rgba(217,192,90,0.3));transition:transform .15s;
}
.ci-slider::-webkit-slider-thumb:hover{transform:scale(1.2);}
.ci-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--sl-color,rgba(217,192,90,1));border:2px solid rgba(5,5,8,1);cursor:pointer;}
.ci-slider-val{font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:700;color:var(--sl-color,rgba(217,192,90,.95));min-width:38px;text-align:right;flex-shrink:0;}
.ci-zones{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px;}
.cz-btn{
  padding:7px 9px;border-radius:var(--sw-radius-sm);
  border:1px solid var(--sw-border);background:#0B111A;
  cursor:pointer;text-align:left;transition:all .18s;font-family:'Share Tech Mono',monospace;
}
.cz-btn:hover{border-color:var(--sw-border2);}
.cz-btn.active-buy{border-color:rgba(0,210,130,.4);background:rgba(0,210,130,.05);}
.cz-btn.active-sell{border-color:rgba(210,55,75,.4);background:rgba(210,55,75,.05);}
.cz-lbl{font-size:6px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;opacity:.45;}
.cz-price{font-family:'Share Tech Mono',monospace;font-size:12px;font-weight:700;color:rgba(215,222,235,.85);}
.cz-dist{font-family:'Share Tech Mono',monospace;font-size:7px;color:rgba(155,170,192,.45);margin-top:1px;}

.calc-outputs-panel{padding:12px 18px;display:flex;flex-direction:column;gap:8px;background:#0B1018;}
.risk-meter{display:flex;align-items:center;gap:12px;}
.risk-arc{position:relative;width:52px;height:29px;flex-shrink:0;overflow:hidden;}
.risk-arc svg{position:absolute;top:0;left:0;width:52px;height:29px;}
.risk-arc-num{position:absolute;bottom:1px;left:50%;transform:translateX(-50%);font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:700;white-space:nowrap;}
.risk-meta{flex:1;}
.risk-meta-title{font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(155,170,192,.4);margin-bottom:3px;}
.risk-meta-val{font-family:'Share Tech Mono',monospace;font-size:17px;font-weight:700;}
.risk-meta-sub{font-family:'Share Tech Mono',monospace;font-size:8px;color:rgba(155,170,192,.45);margin-top:2px;}
.co-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1px;background:rgba(255,255,255,.04);border-radius:var(--sw-radius-sm);overflow:hidden;border:1px solid var(--sw-border);}
@media(max-width:1100px){.co-grid{grid-template-columns:1fr 1fr;}}
.co-cell{background:#0D131C;padding:8px 9px;position:relative;transition:background .2s;}
.co-cell::after{display:none;}
.co-cell.co-profit{border-top:2px solid rgba(0,210,130,.28);}
.co-cell.co-loss{border-top:2px solid rgba(210,55,75,.22);}
.co-cell.co-liq{border-top:2px solid rgba(210,55,75,.18);}
.co-cell.co-rr{border-top:2px solid rgba(217,192,90,.35);}
.co-l{font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.13em;text-transform:uppercase;color:rgba(155,170,192,.4);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.co-v{font-family:'Share Tech Mono',monospace;font-size:13px;font-weight:700;line-height:1;}
.co-s{font-family:'Share Tech Mono',monospace;font-size:6.5px;color:rgba(155,170,192,.45);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.co-divider{height:1px;background:var(--sw-border);margin:0;}
.verdict{border-radius:var(--sw-radius-sm);padding:18px 22px;border:1px solid;font-family:'Share Tech Mono',monospace;position:relative;overflow:hidden;}
.verdict::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.02),transparent);
  pointer-events:none;
}
.verdict-go{background:rgba(0,210,130,.04);border-color:rgba(0,210,130,.22);color:rgba(0,210,130,.9);}
.verdict-wait{background:rgba(255,170,0,.04);border-color:rgba(255,170,0,.22);color:rgba(255,170,0,.9);}
.verdict-skip{background:rgba(210,55,75,.04);border-color:rgba(210,55,75,.22);color:rgba(210,55,75,.9);}
.verdict-title{font-family:'Share Tech Mono',monospace;font-size:16px;font-weight:700;letter-spacing:.08em;margin-bottom:7px;}
.verdict-body{font-size:10px;line-height:1.8;opacity:.75;margin-top:9px;}

/* ══════ TRADE PANEL — command interface ══════ */
.trade-bar{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;
  background:rgba(5,5,8,.95);
  border:1px solid var(--border);
  border-radius:var(--r);
  flex-wrap:wrap;
}
.trade-mode-btn{
  padding:4px 10px;font-family:var(--mono);font-size:9px;
  border:1px solid var(--border2);border-radius:var(--r);
  background:transparent;color:var(--text2);cursor:pointer;transition:all .15s;
  letter-spacing:.04em;
}
.trade-mode-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.trade-mode-btn.on{background:var(--c-dim);color:var(--cyan);border-color:var(--border2);}
.trade-exc-sel{background:var(--s3);border:1px solid var(--border2);border-radius:2px;padding:4px 8px;font-family:var(--mono);font-size:9px;color:var(--cyan);cursor:pointer;outline:none;}
.trade-exc-sel option{background:var(--s2);}
.trade-slider-val{font-family:var(--mono);font-size:9px;text-align:center;letter-spacing:.05em;display:block;width:100%;}
.trade-slider-wrap{display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:1;}
.trade-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:3px;border-radius:2px;outline:none;cursor:pointer;
  background:var(--s3);border:none;padding:0;
}
.trade-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;cursor:pointer;border:none;margin-top:-4px;}
.trade-slider::-moz-range-thumb{width:11px;height:11px;border-radius:50%;cursor:pointer;border:none;}
#tradeSizePct::-webkit-slider-thumb{background:var(--cyan);}
#tradeSizePct::-moz-range-thumb{background:var(--cyan);}
#tradeSizePct{accent-color:var(--cyan);--fill-color:var(--cyan);--track-fill-from:rgba(110,168,247,.12);--track-fill-to:rgba(110,168,247,.65);}
#tradeLeverage::-webkit-slider-thumb{background:rgba(139,92,246,1);}
#tradeLeverage::-moz-range-thumb{background:rgba(139,92,246,1);}
#tradeLeverage{accent-color:rgba(139,92,246,1);--fill-color:rgba(139,92,246,1);--track-fill-from:rgba(139,92,246,.12);--track-fill-to:rgba(139,92,246,.65);}
/* R:R gate slider — was missing a colored thumb entirely (default/invisible
   knob on dark bg); give it the same treatment as SIZE/LEV, in the gate's
   green to match its label + value color. */
#rrGateSlider::-webkit-slider-thumb{background:var(--green);}
#rrGateSlider::-moz-range-thumb{background:var(--green);}
#rrGateSlider{accent-color:var(--green);--fill-color:var(--green);--track-fill-from:rgba(16,185,129,.12);--track-fill-to:rgba(16,185,129,.65);}
/* Progress "fill" for track — .trade-slider has -webkit-appearance:none so
   native accent-color fill doesn't apply; app.js paints the filled portion
   in via inline background (see _updateSliderFill), this just sets the
   unfilled base so there's no flash-of-unfilled before JS runs. The fill is
   a gradient within each slider's own hue (dim near the left edge, brighter
   toward the thumb) rather than a flat translucent block, and the thumb
   keeps the solid --fill-color so it still reads as the "handle".*/
.trade-slider{background:linear-gradient(to right, var(--track-fill-from,var(--fill-color,var(--cyan))) 0%, var(--s3) 0%);}
.trade-secret-inp{width:110px;background:var(--s3);border:1px solid var(--border2);border-radius:2px;padding:4px 6px;font-family:var(--mono);font-size:9px;color:var(--text2);outline:none;}
.trade-lbl{font-family:var(--mono);font-size:8px;color:var(--text3);letter-spacing:.06em;}

/* confirm drawer, positions strip, toast — unchanged wiring */
.trade-drawer{position:fixed;bottom:0;left:0;right:0;z-index:9000;background:linear-gradient(0deg,rgba(5,5,8,.99) 0%,rgba(8,9,14,.98) 100%);border-top:1px solid rgba(255,170,0,.35);padding:18px 24px 22px;transform:translateY(100%);transition:transform .3s cubic-bezier(.34,1.2,.64,1);box-shadow:0 -20px 60px rgba(0,0,0,.6);}
.trade-drawer.open{transform:translateY(0);}
.trade-drawer-title{font-family:var(--hdr);font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--amber);margin-bottom:12px;display:flex;align-items:center;gap:10px;}
.trade-drawer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-bottom:14px;}
.trade-drawer-cell{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);padding:9px 13px;transition:border-color .2s;}
.trade-drawer-lbl{font-family:var(--mono);font-size:7px;letter-spacing:.1em;color:var(--text3);text-transform:uppercase;margin-bottom:3px;}
.trade-drawer-val{font-family:var(--hdr);font-size:15px;font-weight:700;letter-spacing:.01em;}
.trade-drawer-btns{display:flex;gap:10px;align-items:center;}
.trade-exec-btn{padding:11px 32px;font-family:var(--hdr);font-size:13px;font-weight:700;letter-spacing:.14em;border:none;border-radius:var(--r);cursor:pointer;transition:all .2s;position:relative;overflow:hidden;}
@keyframes btnShine{0%{transform:translateX(-120%) skewX(-20deg)}100%{transform:translateX(320%) skewX(-20deg)}}
.trade-exec-btn.long{background:rgba(0,255,136,.12);color:var(--green);border:1px solid rgba(0,255,136,.35);}
.trade-exec-btn.long::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,255,136,.15),transparent);animation:btnShine 2.5s ease-in-out infinite;}
.trade-exec-btn.long:hover{background:rgba(0,255,136,.22);box-shadow:0 0 18px rgba(0,255,136,.25);}
.trade-exec-btn.short{background:rgba(255,45,85,.12);color:var(--red);border:1px solid rgba(255,45,85,.35);}
.trade-exec-btn.short::after{content:'';position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,45,85,.15),transparent);animation:btnShine 2.5s ease-in-out infinite;}
.trade-exec-btn.short:hover{background:rgba(255,45,85,.22);box-shadow:0 0 18px rgba(255,45,85,.25);}
.trade-dismiss-btn{padding:10px 18px;font-family:var(--mono);font-size:10px;background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;}
.trade-exec-status{font-family:var(--mono);font-size:9px;color:var(--text3);margin-left:auto;}
.trade-positions{margin-bottom:9px;}
.trade-pos-row{display:flex;align-items:center;gap:9px;padding:7px 11px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:4px;flex-wrap:wrap;}
.trade-pos-exch{font-family:var(--mono);font-size:8px;color:var(--text3);min-width:48px;}
.trade-pos-sym{font-family:var(--hdr);font-size:11px;font-weight:700;}
.trade-pos-side{font-family:var(--mono);font-size:9px;padding:2px 7px;border-radius:2px;}
.trade-pos-side.long{background:var(--g-dim);color:var(--green);border:1px solid rgba(0,255,136,.2);}
.trade-pos-side.short{background:var(--r-dim);color:var(--red);border:1px solid rgba(255,45,85,.2);}
.trade-pos-pnl{font-family:var(--hdr);font-size:12px;font-weight:700;margin-left:auto;}
.trade-pos-close{padding:3px 9px;font-family:var(--mono);font-size:8px;background:rgba(255,255,255,.035);color:var(--text2);border:1px solid var(--border);border-radius:2px;cursor:pointer;transition:all .1s;}
.trade-pos-close:hover{background:rgba(255,45,85,.1);color:var(--red);border-color:rgba(255,45,85,.3);}
.trade-toast{position:fixed;top:16px;right:16px;z-index:9999;background:var(--sw-surface2);border:1px solid var(--border2);border-radius:var(--sw-radius-sm);padding:11px 18px;font-family:'Share Tech Mono',monospace;font-size:10px;max-width:340px;transform:translateX(120%);transition:transform .3s cubic-bezier(.34,1.2,.64,1);box-shadow:0 8px 40px rgba(0,0,0,.6);}
.trade-toast.show{transform:translateX(0);}
.trade-toast.ok{border-color:rgba(0,210,130,.3);color:rgba(0,210,130,.9);}
.trade-toast.err{border-color:rgba(210,55,75,.3);color:rgba(210,55,75,.9);}
.trade-toast.warn{border-color:rgba(59,130,246,.3);color:rgba(59,130,246,.9);}
.footer{font-family:'Share Tech Mono',monospace;font-size:9px;color:rgba(155,170,192,.3);margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.05);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;letter-spacing:.06em;}
.chip{font-family:'Share Tech Mono',monospace;font-size:9px;padding:2px 8px;border-radius:var(--sw-radius-sm);letter-spacing:.08em;border:1px solid;}
.c-bull{background:var(--g-dim);color:var(--green);border-color:rgba(0,255,136,.2);}
.c-bear{background:var(--r-dim);color:var(--red);border-color:rgba(255,45,85,.2);}
.c-neut{background:var(--s2);color:var(--text2);border-color:var(--border);}
.c-warn{background:var(--a-dim);color:var(--amber);border-color:rgba(255,170,0,.2);}

/* ══════ DIV ALERT ══════ */
.div-alert{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--sw-radius-sm);font-family:'Share Tech Mono',monospace;font-size:10px;font-weight:500;margin-bottom:12px;letter-spacing:.06em;}
.div-bull{background:rgba(0,210,130,.06);color:rgba(0,210,130,.9);border:1px solid rgba(0,210,130,.2);}
.div-bear{background:rgba(210,55,75,.06);color:rgba(210,55,75,.9);border:1px solid rgba(210,55,75,.2);}

/* card-flat utility */
.card-flat{background:var(--sw-surface2);border:1px solid var(--sw-border);border-radius:var(--sw-radius-sm);padding:13px 15px;}

/* ══════ BEVERLY HILLS — PANEL ENTRANCE ANIMATIONS ══════ */
@keyframes sw-fade-up{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes pcLivePulse{
  0%,100%{opacity:1;box-shadow:0 0 6px rgba(59,130,246,0.56);}
  50%{opacity:.4;box-shadow:0 0 2px rgba(59,130,246,0.21);}
}
@keyframes sw-fade-in{
  from{opacity:0;}
  to{opacity:1;}
}

#swingMode .status-strip{animation:sw-fade-in .4s ease both;}
#swingMode .proxy-card{animation:sw-fade-in .4s ease both;}
#swingMode #hero{animation:sw-fade-up .5s .08s ease both;}
#swingMode .price-session-row{animation:sw-fade-up .5s .1s ease both;}
#swingMode .mf-card{animation:sw-fade-up .5s .15s ease both;}
#swingMode .liq-card{animation:sw-fade-up .5s .18s ease both;}
#swingMode .rr-scanner{animation:sw-fade-up .5s .22s ease both;}
#swingMode .calc-wrap{animation:sw-fade-up .5s .26s ease both;}

/* ══════ BEVERLY HILLS — MICRO-INTERACTION POLISH ══════ */

/* Hero cells — subtle glow on hover */
.hc:hover .hc-v{
  text-shadow:0 0 12px currentColor;
  transition:text-shadow .2s;
}

/* Metric cards — teal accent on hover */
.mc:hover::before{
  background:linear-gradient(90deg,rgba(59,130,246,.2),transparent 60%);
}

/* Signal group header — gold rule expands on open */
.sig-group-hdr.open{
  background:linear-gradient(90deg,rgba(59,130,246,.03),transparent 60%);
}

/* RR scan button — gold shimmer sweep */
@keyframes rr-shimmer{
  0%{background-position:-200% center;}
  100%{background-position:200% center;}
}
.rr-scan-btn{
  background-size:200% auto;
  transition:all .2s,background-position 0s;
}
.rr-scan-btn:hover{
  background:linear-gradient(90deg,
    rgba(59,130,246,.08) 0%,
    rgba(59,130,246,.22) 50%,
    rgba(59,130,246,.08) 100%);
  box-shadow:0 0 18px rgba(59,130,246,0.14),0 0 1px rgba(59,130,246,0.28) inset;
}

/* Zone toggle active glow */
.zt-buy.on{box-shadow:0 0 10px rgba(0,210,130,.12) inset;}
.zt-sell.on{box-shadow:0 0 10px rgba(210,55,75,.12) inset;}

/* Liq event flash — more vivid */
@keyframes liq-flash{
  0%{background:rgba(210,55,75,.08);border-left:2px solid rgba(210,55,75,.5);}
  100%{background:transparent;border-left:2px solid transparent;}
}
.liq-event{border-left:2px solid transparent;transition:border-left-color .3s;}

/* F&G thumb pulse when extreme */
.fg-thumb{
  animation:fg-thumb-pulse 3s ease-in-out infinite;
}
@keyframes fg-thumb-pulse{
  0%,100%{box-shadow:0 0 12px rgba(59,130,246,0.49),0 0 24px rgba(59,130,246,0.14);}
  50%{box-shadow:0 0 18px rgba(59,130,246,0.63),0 0 36px rgba(59,130,246,0.21);}
}

/* Dot animations — more vivid */
.dot.ok{animation:dot-ok-pulse 2s ease-in-out infinite;}
@keyframes dot-ok-pulse{
  0%,100%{box-shadow:0 0 8px rgba(0,210,130,.5);}
  50%{box-shadow:0 0 14px rgba(0,210,130,.9),0 0 24px rgba(0,210,130,.3);}
}

/* Price number — subtle glow on value change */
.price-num{
  transition:color .3s, text-shadow .4s;
}
.price-num.price-up{text-shadow:0 0 20px rgba(0,210,130,.2);}
.price-num.price-dn{text-shadow:0 0 20px rgba(210,55,75,.2);}



/* ══════ SCALP MODE ══════ */
/* ── Sidebar hero overrides ── */
#scalpHero{padding:10px 12px !important;margin-bottom:6px !important;}
#scalpHero .hero-bg{display:none !important;}
#scalpHero .hero-ring{width:52px !important;height:52px !important;}
#scalpHero .hero-top{margin-bottom:6px !important;gap:8px !important;}
#scalpHero .hero-sig{font-size:19px !important;line-height:1.05 !important;}
#scalpHero .hero-sub{font-size:8px !important;margin-top:1px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
#scalpHero .hero-tag{font-size:7px !important;}
#scalpHero .hero-cells{gap:4px !important;margin-top:0 !important;}
#scalpHero .hc{padding:4px 6px !important;}
#scalpHero .hc-label{font-size:7px !important;margin-bottom:0 !important;}
#scalpHero .hc-val{font-size:12px !important;min-height:0 !important;white-space:nowrap !important;line-height:1.2 !important;}
#scalpHero .hc-sub{font-size:7px !important;margin-top:0 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;line-height:1.2 !important;}
/* ── Conviction panel ── */
#scalpConviction{padding:10px 12px !important;margin-bottom:6px !important;}
#scalpConviction > div:first-child{margin-bottom:8px !important;}
#scalpConviction > div:nth-child(2){margin-bottom:6px !important;}
/* ── Metrics ── */
#scalpMetrics{margin-bottom:0 !important;gap:4px !important;}
#scalpMetrics .scalp-metric{padding:4px 6px !important;}
#scalpMetrics .scalp-metric-label{font-size:7px !important;margin-bottom:0 !important;}
#scalpMetrics .scalp-metric-val{font-size:12px !important;line-height:1.2 !important;}
#scalpMetrics .scalp-metric-sub{font-size:7px !important;margin-top:0 !important;line-height:1.2 !important;}
/* Sticky sidebar needs scroll on body/html, not a clipping container */
#scalpMode{overflow:visible;}
#scalpSidebar{
  scrollbar-width:thin;
  scrollbar-color:rgba(59,130,246,.2) transparent;
}
#scalpSidebar::-webkit-scrollbar{width:3px;}
#scalpSidebar::-webkit-scrollbar-track{background:transparent;}
#scalpSidebar::-webkit-scrollbar-thumb{background:rgba(59,130,246,.5);border-radius:2px;}
/* Ensure .app does not clip sticky children */
.app{overflow:visible !important;}
/* Toast animation */
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
/* Pan/zoom cursor hints */
#scalp5sChart,#scalp1mChart,#scalpObChart,#scalp5mChart{cursor:crosshair;user-select:none;}
#scalp5sChart:active,#scalp1mChart:active,#scalpObChart:active,#scalp5mChart:active{cursor:grabbing;}
#modeSeg .sb.on[id="modeScalp"]{color:var(--amber);background:var(--a-dim);}
#modeSeg .sb.on[id="modeSwing"]{color:rgba(59,130,246,.95);background:rgba(59,130,246,.09);}
.scalp-metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;}
.scalp-metric-label{font-family:var(--mono);font-size:7px;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin-bottom:4px;}
.scalp-metric-val{font-family:var(--hdr);font-size:18px;font-weight:700;line-height:1;}
.scalp-metric-sub{font-family:var(--mono);font-size:8px;color:var(--text3);margin-top:3px;}
.scalp-live-badge{font-family:var(--mono);font-size:8px;color:var(--green);animation:pulse 2s infinite;}

/* ── CHART CARDS — right side panels ───────────────────────────── */
.chart-card{padding:0;overflow:hidden;}
.chart-card-hdr{
  padding:8px 14px 7px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.018) 0%,transparent 100%);
}
.chart-card-lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;display:flex;align-items:center;gap:6px;}
.chart-card-lbl .ldot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;animation:dp 2s infinite;flex-shrink:0;}
.chart-card-info{font-family:var(--mono);font-size:8px;color:var(--text3);}
/* Cascade risk badge */
.cascade-badge{display:inline-block;font-family:var(--hdr);font-size:18px;font-weight:900;line-height:1;letter-spacing:.02em;}
.cascade-badge.risk-low{color:var(--green);text-shadow:0 0 16px rgba(0,255,136,.25);}
.cascade-badge.risk-med{color:var(--amber);text-shadow:0 0 16px rgba(255,170,0,.25);}
.cascade-badge.risk-high{color:var(--red);text-shadow:0 0 16px rgba(255,45,85,.35);animation:convPulse 1.5s ease-in-out infinite;}
/* Trade bar refinements */
.trade-secret-inp:focus,.trade-exc-sel:focus{border-color:rgba(59,130,246,.4);box-shadow:0 0 0 2px rgba(59,130,246,0.056);}
.trade-bar{border-top:1px solid rgba(255,170,0,.1) !important;}
#calibBar{border-top:1px solid rgba(59,130,246,.07) !important;}

/* ── AESTHETIC REFINEMENTS ─────────────────────────────────────────── */

/* Chart cards — right side panels */
.chart-card-hdr{
  padding:8px 14px 7px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(180deg,rgba(255,255,255,.018) 0%,transparent 100%);
}
.chart-card-lbl{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;
  display:flex;align-items:center;gap:6px;
}
.chart-card-lbl .live-dot{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.7;
  animation:dp 2s infinite;flex-shrink:0;
}
.chart-card-info{font-family:var(--mono);font-size:8px;color:var(--text3);}

/* Cascade risk badge */
.cascade-badge{
  display:inline-block;
  font-family:var(--hdr);font-size:18px;font-weight:900;line-height:1;
  letter-spacing:.02em;
}
.cascade-badge.risk-low{color:var(--green);text-shadow:0 0 16px rgba(0,255,136,.3);}
.cascade-badge.risk-med{color:var(--amber);text-shadow:0 0 16px rgba(255,170,0,.3);}
.cascade-badge.risk-high{color:var(--red);text-shadow:0 0 16px rgba(255,45,85,.4);animation:convPulse 1.5s ease-in-out infinite;}

/* Trade bar input focus refinement */
.trade-secret-inp:focus{
  border-color:rgba(59,130,246,.4);
  box-shadow:0 0 0 2px rgba(59,130,246,0.056);
}
.trade-exc-sel:focus{
  border-color:rgba(59,130,246,.4);
  box-shadow:0 0 0 2px rgba(59,130,246,0.056);
}
/* Trade bar — subtle top accent line */
.trade-bar{
  border-top:1px solid rgba(255,170,0,.12) !important;
}
#calibBar{
  border-top:1px solid rgba(59,130,246,.08) !important;
}

/* Check rows: tighter, cleaner, with left-border state indicator */
/* ── TACTICAL CONVICTION PANEL ─────────────────────────────── */

/* Check rows — diagnostic log style */
.scalp-sig-row{
  display:flex;align-items:center;gap:7px;
  padding:4px 10px 4px 8px;
  border-bottom:1px solid rgba(255,255,255,.025);
  border-left:2px solid transparent;
  transition:opacity .3s, border-left-color .2s;
  position:relative;
}
/* Failing checks dim but still readable — lifted from 18% to 42% */
.scalp-sig-row.sig-fail{
  opacity:.75;
  border-left-color:transparent;
}
.scalp-sig-row.sig-pass{
  opacity:1;
  border-left-color:rgba(0,255,136,.5);
  background:rgba(0,255,136,.018);
}
.scalp-sig-row.sig-neut{
  opacity:.85;
  border-left-color:rgba(255,170,0,.4);
  background:rgba(255,170,0,.012);
}
.scalp-sig-row:last-child{border-bottom:none;}
.scalp-sig-row:hover{opacity:1 !important;}

/* [OK] / [--] / [!!] diagnostic tags */
.scalp-sig-icon{
  flex:0 0 26px;
  font-family:var(--mono);font-size:7px;letter-spacing:.04em;
  display:flex;align-items:center;justify-content:center;
}

/* Check name */
.scalp-sig-name{
  font-family:var(--mono);font-size:8px;font-weight:400;
  color:rgba(200,220,240,.82);
  flex:0 0 118px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.04em;text-transform:uppercase;
}
.sig-pass .scalp-sig-name{color:rgba(200,240,220,.9);}
.sig-neut .scalp-sig-name{color:rgba(240,220,160,.8);}

/* Weight — dot bar visual instead of number */
.scalp-sig-weight{
  font-family:var(--mono);font-size:7px;
  flex:0 0 28px;text-align:right;
  color:rgba(255,255,255,.25);
}
.sig-pass .scalp-sig-weight{color:rgba(0,255,136,.55);}

/* Detail text */
.scalp-sig-detail{
  font-family:var(--mono);font-size:7.5px;
  color:rgba(180,200,220,.68);
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sig-pass .scalp-sig-detail{color:rgba(180,220,200,.7);}
.sig-neut .scalp-sig-detail{color:rgba(240,220,160,.6);}

/* ── scalpSigMatrix: larger rows for the market context panel ── */
#scalpSigMatrix .scalp-sig-row{
  padding:5px 12px 5px 10px;
  gap:9px;
}
#scalpSigMatrix .scalp-sig-icon{
  flex:0 0 20px;
  font-size:10px;
}
#scalpSigMatrix .scalp-sig-name{
  font-size:9px;
  flex:0 0 148px;
  letter-spacing:.045em;
}
#scalpSigMatrix .scalp-sig-detail{
  font-size:9px;
}
#scalpSigMatrix .scalp-live-badge{
  font-size:7px !important;
  opacity:.6 !important;
}

/* ── SCALP CHART CARDS — remove brackets, add amber-top accent ── */
#scalpMode .card.brackets::before,
#scalpMode .card.brackets::after{display:none;}
#scalpMode .card.chart-card{
  border-top:1px solid rgba(255,170,0,.12);
  position:relative;overflow:hidden;
}
#scalpMode .card.chart-card::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(255,170,0,.3),rgba(59,130,246,.15) 50%,transparent);
}
/* Chart header labels use amber as default accent (scalp = speed = amber) */
#scalpMode .chart-card-hdr{
  border-bottom:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg,rgba(255,255,255,.018) 0%,transparent);
}

/* ── Chart TF toggle buttons ─────────────────────────────────────────── */
.ctf-btn{
  font-family:var(--mono);font-size:8px;letter-spacing:.07em;
  padding:2px 7px;border-radius:2px;cursor:pointer;line-height:1.6;
  border:1px solid rgba(255,255,255,.1);background:var(--surface);color:rgba(255,255,255,.3);
  transition:color .12s,border-color .12s,background .12s,text-shadow .12s;
}
.ctf-btn:hover{color:var(--cyan);border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.05);}
.ctf-btn.ctf-on{
  color:var(--aeon-violet);border-color:#8b5cf630;
  background:rgba(59,130,246,.08);text-shadow:0 0 8px rgba(59,130,246,0.42);
}

/* ── SCALP SECTION LABELS — amber variant of the swing .sec style ── */
.scalp-sec{
  font-family:var(--mono);font-size:7.5px;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,170,0,.5);
  margin:14px 0 8px;
  display:flex;align-items:center;gap:12px;
  position:relative;
}
.scalp-sec::before{content:'⬡';font-size:10px;color:rgba(255,170,0,.35);letter-spacing:0;display:block;}
.scalp-sec::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(255,170,0,.2) 0%,rgba(255,170,0,.06) 50%,transparent 100%);}

/* ── PRICE ACTION STRIP — suppress default scalp-sec decoration ── */
#scalpPriceStrip.scalp-sec{
  margin:0 0 10px;gap:0;
  background:rgba(4,6,12,.92);
  border:1px solid rgba(59,130,246,.1);
  border-top:1px solid rgba(59,130,246,.22);
  border-radius:4px;
  overflow:hidden;
  padding:0;
  min-height:52px;
}
#scalpPriceStrip.scalp-sec::before{display:none;}
#scalpPriceStrip.scalp-sec::after{display:none;}

/* ── CASCADE PREDICTOR — state-driven card treatment ── */
#cascadeCard{
  padding:12px 14px;
  transition:border-color .4s, background .4s;
  position:relative;overflow:hidden;
}
#cascadeCard::before{display:none;}
#cascadeCard::after{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cascade-col,rgba(0,255,136,.35)),transparent 70%);
  transition:background .4s;
}
.cascade-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.cascade-title{
  font-family:var(--mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(155,170,192,.38);
  display:flex;align-items:center;gap:6px;
}
.cascade-title::before{content:'';display:block;width:2px;height:9px;border-radius:1px;background:currentColor;opacity:.5;flex-shrink:0;}
.cascade-score-bar{height:3px;background:rgba(255,255,255,.05);border-radius:2px;overflow:hidden;margin-top:8px;}
.cascade-score-fill{height:100%;border-radius:2px;transition:width .6s,background .4s;}

/* ── OPEN TRADE CARD ── */
#openTradeCard{
  padding:12px 14px;
  position:relative;overflow:hidden;
}
#openTradeCard::before{display:none;}
#openTradeCard::after{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.2),transparent 60%);
}
.open-trade-title{
  font-family:var(--mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(155,170,192,.38);
  display:flex;align-items:center;gap:6px;
  margin-bottom:8px;
}
.open-trade-title::before{content:'';display:block;width:2px;height:9px;border-radius:1px;background:rgba(59,130,246,.4);flex-shrink:0;}
#scalpMode{
  background:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(255,170,0,.018) 0%,transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 60%,rgba(255,170,0,.012) 0%,transparent 65%);
}

/* ── EXEC BAR — amber authority, live-trading weight ── */
#tradeBar{
  background:linear-gradient(180deg,rgba(12,10,4,.98) 0%,rgba(7,6,3,.99) 100%) !important;
  border:1px solid rgba(255,170,0,.18) !important;
  border-top:1px solid rgb(255 170 0 / 24%) !important;
  border-radius:var(--r);
  position:relative;
  box-shadow:0 2px 20px rgba(0,0,0,.4);
}
#tradeBar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(255,170,0,.6),rgba(255,200,60,.2) 50%,transparent);
}
#tradeBar .trade-lbl{color:rgba(255,170,0,.5);}
#tradeBar .trade-mode-btn{border-color:rgba(255,170,0,.18);color:rgba(155,170,192,.5);}
#tradeBar .trade-mode-btn:hover{border-color:rgba(255,170,0,.5);color:rgba(255,170,0,.9);}
#tradeBar .trade-mode-btn.on{background:rgba(255,45,85,.1);color:rgba(255,90,110,.95);border-color:rgba(255,45,85,.3);}

/* ── CALIB BAR — clearly secondary, teal accent ── */
#calibBar{
  background:rgba(3,4,10,.98) !important;
  border:1px solid rgba(59,130,246,.08) !important;
  border-top:1px solid rgba(59,130,246,.12) !important;
  border-radius:var(--r);
}

/* ── HERO CELLS — extracted from inline styles ── */
.hero-cell{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.06);
  border-radius:4px;padding:5px 6px;
  transition:border-color .2s;
}
.hero-cell-lbl{font-family:var(--mono);font-size:6.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(155,170,192,.38);margin-bottom:2px;}
.hero-cell-val{font-family:var(--hdr);font-size:13px;font-weight:700;color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1;}
.hero-cell-sub{font-family:var(--mono);font-size:6.5px;color:rgba(155,170,192,.3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ── UNIFIED SIDEBAR PANEL SYSTEM ── */
.sb-panel{
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--rl);
  overflow:hidden;
  margin-top:6px;
  background: var(--card-primary, linear-gradient(145deg,#0D131C 0%,#090E15 55%,#070B11 100%));
}
.sb-panel-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px 7px;
  border-bottom:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.018);
}
.sb-panel-title{
  font-family:var(--mono);font-size:7px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(59,130,246,.42);
  display:flex;align-items:center;gap:6px;
}
.sb-panel-title::before{
  content:'';display:block;width:2px;height:9px;border-radius:1px;
  background:rgba(59,130,246,.4);flex-shrink:0;
}
.sb-panel-title.amber{color:rgba(255,170,0,.55);}
.sb-panel-title.amber::before{background:rgba(255,170,0,.5);}
.sb-panel-title.purple{color:rgba(180,150,255,.7);}
.sb-panel-title.purple::before{background:rgba(139,92,246,.6);}
.sb-panel-badge{
  font-family:var(--mono);font-size:7px;letter-spacing:.08em;
  padding:2px 7px;border-radius:2px;
}
.sb-panel-badge.ok{background:rgba(0,255,136,.07);border:1px solid rgba(0,255,136,.18);color:rgba(0,255,136,.7);}
.sb-panel-badge.neutral{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:rgba(155,170,192,.5);}
.sb-panel-badge.purple{background:rgba(139,92,246,.08);border:1px solid rgba(139,92,246,.2);color:rgba(180,150,255,.8);}
.sb-panel-badge.warn{background:rgba(255,170,0,.07);border:1px solid rgba(255,170,0,.18);color:rgba(255,200,0,.75);}
.sb-panel-body{padding:8px 4px;}

/* ── Sidebar tab strip (cockpit) — Signal Monitor / Signal History /
   Market Context / Check Performance / Historical Backtester. Only the
   active tab's .sb-tab-panel is shown; toggled by _mSelectSidebarTab()
   in app.js. ── */
.sb-tabs{
  display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-bottom:8px;padding-bottom:2px;scrollbar-width:none;
}
.sb-tabs::-webkit-scrollbar{display:none;}
.sb-tab{
  flex-shrink:0;white-space:nowrap;cursor:pointer;
  font-family:var(--mono);font-size:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 10px;border-radius:5px;
  background:var(--surface);border:1px solid rgb(255 255 255 / 3%);color:rgba(155,170,192,.55);
}
.sb-tab.active{
  color:var(--aeon-violet);background:var(--surface);border-color:#8b5cf630;
}
.sb-tab-panel{display:none;}
.sb-tab-panel.active{display:block;}

/* Keep legacy .panel-section-hdr and .sidebar-panel for any JS-injected content */
.panel-section-hdr{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:7px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text3);
  margin-bottom:6px;
}
.panel-section-hdr::before{
  content:'';display:block;
  width:2px;height:10px;border-radius:1px;
  background:var(--cyan);opacity:.4;flex-shrink:0;
}
/* Sidebar panels */
.sidebar-panel{
  margin-top:6px;padding:9px 11px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:var(--rl);
  background:linear-gradient(160deg,rgba(255,255,255,.025) 0%,rgba(255,255,255,.01) 100%);
}

/* Regime pill */
.regime-pill{
  display:inline-flex;align-items:center;gap:4px;
  font-family:var(--mono);font-size:7px;font-weight:700;
  padding:2px 7px 2px 5px;border-radius:10px;letter-spacing:.04em;
}
.regime-pill.trend{color:rgba(59,130,246,.9);background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.2);}
.regime-pill.range{color:var(--amber);background:rgba(255,170,0,.08);border:1px solid rgba(255,170,0,.2);}
.regime-pill.unknown{color:var(--text3);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);}
.regime-pill::before{content:'';display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.7;animation:dp 2s infinite;}

/* Score bar */
.score-bar-wrap{position:relative;height:4px;background:rgba(255,255,255,.04);border-radius:2px;overflow:visible;margin:6px 0 14px;}
.score-bar-fill{height:100%;border-radius:2px;transition:width .5s cubic-bezier(.34,1.2,.64,1);position:relative;}
.score-bar-fill::after{content:'';position:absolute;right:-1px;top:-2px;width:2px;height:8px;background:currentColor;border-radius:1px;opacity:.9;box-shadow:0 0 6px currentColor;}
.score-tick{position:absolute;top:7px;transform:translateX(-50%);font-family:var(--mono);font-size:6px;color:var(--text3);white-space:nowrap;}
.score-tick-line{position:absolute;top:-2px;width:1px;height:8px;background:rgba(255,255,255,.12);}

/* Conviction active state — directional glow pulse on left edge */
@keyframes convPulse{
  0%,100%{box-shadow:inset 3px 0 0 var(--sig-col,var(--cyan)),0 0 0 transparent;}
  50%{box-shadow:inset 3px 0 0 var(--sig-col,var(--cyan)),-4px 0 18px -4px var(--sig-col,var(--cyan));}
}
.conv-active{animation:convPulse 2.5s ease-in-out infinite;}

/* Entry quality badge */
.entry-q-badge{display:inline-block;font-family:var(--mono);font-size:7px;font-weight:700;padding:1px 6px;border-radius:2px;letter-spacing:.06em;}
.eq-excellent{color:var(--green);background:rgba(0,255,136,.1);border:1px solid rgba(0,255,136,.25);}
.eq-good{color:rgba(0,255,136,.75);background:rgba(0,255,136,.07);border:1px solid rgba(0,255,136,.18);}
.eq-fair{color:var(--amber);background:rgba(255,170,0,.08);border:1px solid rgba(255,170,0,.2);}
.eq-poor{color:var(--red);background:rgba(255,45,85,.08);border:1px solid rgba(255,45,85,.2);}

/* Grade reticle */
@keyframes reticleSpin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.grade-reticle-ring{animation:reticleSpin 8s linear infinite;}
.grade-reticle-ring.locked{animation:none;}
@keyframes reticleGlow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,45,85,.4));}
  50%{filter:drop-shadow(0 0 8px rgba(255,45,85,.9));}
}
.grade-reticle-active{animation:reticleGlow 1.8s ease-in-out infinite;}
@keyframes reticleGlowBp{
  0%,100%{filter:drop-shadow(0 0 3px rgba(255,200,60,.4));}
  50%{filter:drop-shadow(0 0 9px rgba(255,200,60,.95));}
}
.grade-reticle-bp{animation:reticleGlowBp 2.2s ease-in-out infinite;}

/* Comms log trigger rows */
.trig-row{
  display:flex;gap:0;align-items:stretch;
  margin-bottom:3px;border-radius:2px;overflow:hidden;
}
.trig-bar{width:2px;flex-shrink:0;}
.trig-body{
  padding:4px 8px;flex:1;
  font-family:var(--mono);font-size:7.5px;line-height:1.4;
  color:rgba(180,200,220,.7);
  background:rgba(255,255,255,.018);
}
.trig-confirm .trig-bar{background:rgba(0,255,136,.6);}
.trig-confirm .trig-body{color:rgba(180,240,200,.8);background:rgba(0,255,136,.02);}
.trig-block .trig-bar{background:rgba(255,45,85,.6);}
.trig-block .trig-body{color:rgba(240,180,180,.8);background:rgba(255,45,85,.02);}
.trig-warn .trig-bar{background:rgba(255,170,0,.5);}
.trig-warn .trig-body{color:rgba(240,220,160,.7);background:rgba(255,170,0,.015);}

/* ══════════════════════════════════════════════════════════════
   BEVERLY HILLS — TOPBAR & GLOBAL CHROME UPGRADES
   ══════════════════════════════════════════════════════════════ */

/* ── Full-width topbar strip ── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px 14px;
  margin-bottom:18px;
  flex-wrap:wrap;gap:14px;
  background:linear-gradient(180deg,rgba(8,9,14,1) 0%,rgba(5,5,8,.96) 100%);
  border:1px solid rgba(255,255,255,.07);
  border-bottom:1px solid rgba(255,255,255,.055);
  border-top:2px solid rgba(59,130,246,.25);
  border-radius:8px;
  position:relative;overflow:hidden;
}
.topbar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,
    rgb(59 130 246 / 0%) 0%,
    rgba(59, 130, 246, .2) 25%,
    rgba(59, 130, 246, .12) 60%,
    transparent 100%);
}
.topbar::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 30% 100% at 0% 50%,rgba(59,130,246,.025) 0%,transparent 70%);
}

/* ── AEON brand mark ── */
.brand-name{
  font-family:'Inter',-apple-system,sans-serif;
  font-size:26px;font-weight:900;
  letter-spacing:.22em;
  color:rgba(59,130,246,.95);
  text-shadow:
    0 0 20px rgba(59,130,246,0.245),
    0 0 60px rgba(59,130,246,0.07),
    0 2px 0 rgba(0,0,0,.8);
  animation:brand-breathe 8s ease-in-out infinite;
  position:relative;
}
@keyframes brand-breathe{
  0%,100%{text-shadow:0 0 20px rgba(59,130,246,0.245),0 0 60px rgba(59,130,246,0.07);}
  50%{text-shadow:0 0 28px rgba(59,130,246,0.35),0 0 80px rgba(59,130,246,0.105),0 0 120px rgba(59,130,246,0.035);}
}

.brand-sub{
  font-family:'Share Tech Mono',monospace;
  font-size:8px;color:rgba(155,170,192,.4);
  letter-spacing:.14em;margin-top:3px;
}
.brand-ver{
  font-family:'Inter',-apple-system,sans-serif;font-size:8px;
  color:rgba(59,130,246,.7);
  background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.2);
  padding:2px 9px;border-radius:3px;
  letter-spacing:.12em;margin-left:10px;
}

/* ── Controls row ── */
.ctrl-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* ── Status pill ── */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 14px;border-radius:4px;
  border:1px solid rgba(255,255,255,.08);
  font-family:'Inter',-apple-system,sans-serif;font-size:9px;
  color:rgba(155,170,192,.65);
  background:rgba(255,255,255,.025);
  letter-spacing:.06em;
  backdrop-filter:blur(8px);
}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(155,170,192,.4);animation:dp 2s infinite;}
.dot.ok{background:var(--green);box-shadow:0 0 4px var(--g-glow);}
.dot.err{background:var(--red);box-shadow:0 0 4px var(--r-glow);}
.dot.conn{background:var(--cyan);box-shadow:0 0 4px var(--c-glow);}
@keyframes dp{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Seg controls — coin/TF switcher ── */
.seg{
  display:flex;
  border:1px solid rgba(255,255,255,.09);
  border-radius:4px;overflow:hidden;
  background:rgba(255,255,255,.02);
}
.sb{
  padding:6px 15px;
  font-size:11px;font-weight:700;
  font-family:'Share Tech Mono',monospace;
  letter-spacing:.1em;cursor:pointer;
  background:transparent;color:rgba(155,170,192,.55);
  border:none;border-right:1px solid rgba(255,255,255,.07);
  transition:all .18s;
}
.sb:last-child{border-right:none;}
.sb:hover{color:rgba(215,222,235,.85);background:rgba(255,255,255,.035);}
.sb.on{
  background:var(--c-dim);
  color:var(--cyan);
  text-shadow:none;
}

/* Mode switcher — swing/scalp gets special treatment */
#modeSeg{margin-left:6px;border-color:rgba(255,255,255,.1);}
#modeSwing.on{
  background:var(--c-dim);
  color:var(--cyan);
  text-shadow:none;
}
#modeScalp.on{
  background:var(--a-dim);
  color:var(--amber);
  text-shadow:none;
}

/* ══════════════════════════════════════════════════════════════
   BEVERLY HILLS — RESPONSIVE GRID BREAKPOINTS
   For the new 2-col layouts introduced in the restructure
   ══════════════════════════════════════════════════════════════ */

/* Row 2: 3-zone price | sessions | hero */
@media(max-width:1200px){
  #swingMode > div[style*="grid-template-columns:minmax(220px"]{
    grid-template-columns:1fr 1fr !important;
  }
}
@media(max-width:800px){
  #swingMode > div[style*="grid-template-columns:minmax(220px"]{
    grid-template-columns:1fr !important;
  }
}

/* Row 5: Metrics | Macro */
@media(max-width:900px){
  #swingMode > div[style*="grid-template-columns:1fr 1.6fr"]{
    grid-template-columns:1fr !important;
  }
}

/* Row 6: Money Flow | Liquidation */
@media(max-width:900px){
  #swingMode > div[style*="grid-template-columns:1.1fr 0.9fr"]{
    grid-template-columns:1fr !important;
  }
  .mf-card{margin-bottom:0 !important;}
  .liq-card{margin-bottom:0 !important;}
}

/* Row 9: RR Scanner | Calculator */
@media(max-width:1100px){
  #swingMode > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr !important;
  }
  .rr-scanner{margin-bottom:0 !important;}
  .calc-wrap{margin-bottom:0 !important;}
}

/* Price session row stacks on narrow screens */
@media(max-width:900px){
  .price-session-row{
    flex-direction:column;
    padding:16px !important;
  }
  .price-left{min-width:unset !important;}
}

/* Hero cells: 2-col on narrow */
@media(max-width:700px){
  .hero-cells{grid-template-columns:1fr 1fr !important;}
  .hc{border-right:none !important;border-bottom:1px solid rgba(255,255,255,.05);}
  .hc:nth-child(odd){border-right:1px solid rgba(255,255,255,.05) !important;}
}

/* Topbar stacks gracefully */
@media(max-width:800px){
  .topbar{padding:12px 14px;}
  .brand-name{font-size:20px;}
}

/* ── Subtle animated scan-line on hero ── */
.hero::after{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,
    rgba(59,130,246,.6) 0%,
    rgba(59,130,246,.3) 20%,
    rgba(59,130,246,.2) 60%,
    transparent 100%);
  animation:none;
}

/* ── Section label sublabel dividers ── */
#swingMode > div > div[style*="letter-spacing:.18em"]{
  border-bottom:1px solid rgba(255,255,255,.04);
  padding-bottom:8px;margin-bottom:12px !important;
}


/* ══════ CHECK DETAIL INLINE EXPAND ══════ */
.scalp-sig-row{cursor:pointer;flex-wrap:wrap;}
.scalp-sig-row:hover .scalp-sig-detail{color:rgba(59,130,246,.6) !important;}
.scalp-sig-row:hover{opacity:1 !important;}
.chk-expand{
  display:none;width:100%;flex-basis:100%;
  margin-top:4px;padding:6px 9px;
  border-radius:2px;
  font-family:var(--mono,monospace);font-size:7.5px;
  line-height:1.65;white-space:pre-wrap;word-break:break-word;
  background:rgba(0,0,0,.45);
}

#aeonLoginGate{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0A0E17 0%,#030609 40%,#020508 100%);
  transition:opacity .4s ease, visibility .4s ease;
}
#aeonLoginGate.hidden{opacity:0;visibility:hidden;pointer-events:none;}

.login-card{
  width:340px;
  background:linear-gradient(160deg,rgba(5,10,22,.92),rgba(3,6,14,.96));
  border:1px solid rgba(59,130,246,.12);
  border-radius:8px;
  box-shadow:0 24px 80px rgba(0,0,0,.75),0 0 0 1px rgba(59,130,246,0.03);
  padding:36px 32px 28px;
  position:relative;overflow:hidden;
}
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.35) 40%,transparent);
}
.login-card::after{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px);
  pointer-events:none;
}
.login-logo{
  text-align:center;margin-bottom:28px;position:relative;z-index:1;
}
.login-logo-hex{
  font-family:'Share Tech Mono',monospace;font-size:28px;font-weight:700;
  color:rgba(59,130,246,.85);letter-spacing:.08em;
  text-shadow:0 0 24px rgba(59,130,246,0.175);display:block;
}
.login-logo-sub{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.28em;
  color:rgba(155,170,192,.32);margin-top:4px;display:block;
}
.login-field{margin-bottom:14px;position:relative;z-index:1;}
.login-label{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.18em;
  color:rgba(155,170,192,.42);text-transform:uppercase;display:block;margin-bottom:5px;
}
.login-inp{
  width:100%;box-sizing:border-box;
  background:rgba(0,0,0,.45);
  border:1px solid rgba(59,130,246,.12);border-radius:4px;
  padding:10px 12px;
  font-family:'Share Tech Mono',monospace;font-size:13px;
  color:rgba(215,222,235,.88);letter-spacing:.04em;outline:none;
  transition:border-color .15s,box-shadow .15s;
}
.login-inp:focus{border-color:rgba(59,130,246,.35);box-shadow:0 0 0 3px rgba(59,130,246,0.042);}
.login-inp::placeholder{color:rgba(155,170,192,.22);font-size:11px;}
.login-btn{
  width:100%;margin-top:6px;padding:11px 0;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.18em;
  background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.28);
  color:rgba(59,130,246,.88);border-radius:4px;cursor:pointer;
  transition:all .15s;position:relative;z-index:1;
}
.login-btn:hover{background:rgba(59,130,246,.14);color:rgba(59,130,246,1);box-shadow:0 0 16px rgba(59,130,246,0.056);}
.login-btn:disabled{opacity:.5;cursor:not-allowed;}
.login-err{
  font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:.06em;
  color:rgba(255,45,85,.8);background:rgba(255,45,85,.06);border:1px solid rgba(255,45,85,.18);
  border-radius:3px;padding:7px 10px;margin-top:10px;
  display:none;line-height:1.5;position:relative;z-index:1;
}
.login-err.show{display:block;}
.login-footer{
  text-align:center;margin-top:20px;position:relative;z-index:1;
  font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.12em;
  color:rgba(155,170,192,.2);
}

@keyframes swStarTwinkle{0%,100%{opacity:1;}50%{opacity:0.28;}}
#sw-star-a{animation:swStarTwinkle 3.8s ease-in-out infinite;}
#sw-star-b{animation:swStarTwinkle 5.2s ease-in-out 1.1s infinite;}
#sw-star-c{animation:swStarTwinkle 4.5s ease-in-out 2.3s infinite;}
#sw-star-d{animation:swStarTwinkle 6.1s ease-in-out 0.7s infinite;}

#aeonFloatPanel{
  position:fixed;bottom:80px;right:20px;width:370px;
  background:rgba(10,12,18,.97);border:1px solid rgba(59,130,246,.18);
  border-radius:10px;box-shadow:0 8px 40px rgba(0,0,0,.7),0 0 0 1px rgba(59,130,246,0.042);
  z-index:9999;font-family:var(--mono,monospace);user-select:none;
  transition:box-shadow .2s;
}
#aeonFloatPanel.dragging{box-shadow:0 16px 60px rgba(0,0,0,.85),0 0 0 1px rgba(59,130,246,0.175);}
#afpHeader{
  display:flex;align-items:center;gap:0;padding:0;
  border-bottom:1px solid rgba(255,255,255,.07);cursor:grab;border-radius:10px 10px 0 0;
  background:rgba(59,130,246,.04);
}
#afpHeader:active{cursor:grabbing;}
#afpTitle{
  flex:1;padding:9px 13px;font-size:10px;letter-spacing:.13em;color:var(--cyan,#3B82F6);
  text-transform:uppercase;pointer-events:none;
}
#afpMinBtn{
  padding:9px 12px;font-size:14px;color:var(--text3,#555);cursor:pointer;border:none;
  background:transparent;line-height:1;transition:color .2s;border-radius:0 10px 0 0;
  pointer-events:all;
}
#afpMinBtn:hover{color:var(--cyan,#3B82F6);}
#afpBody{overflow:hidden;transition:max-height .3s ease,opacity .3s ease;max-height:600px;opacity:1;}
#afpBody.minimised{max-height:0;opacity:0;}

/* Tabs */
#afpTabs{display:flex;border-bottom:1px solid rgba(255,255,255,.07);}
.afp-tab{
  flex:1;padding:7px 0;text-align:center;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text3,#555);cursor:pointer;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.afp-tab.active{color:var(--cyan,#3B82F6);border-bottom-color:var(--cyan,#3B82F6);}
.afp-tab:hover:not(.active){color:var(--text2,#888);}
.afp-pane{display:none;padding:12px;}
.afp-pane.active{display:block;}

/* ── Near-Miss Log pane ── */
#afpLogEmpty{
  text-align:center;padding:28px 12px;font-size:9px;color:var(--text3,#555);
  line-height:1.8;
}
#afpLogList{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:5px;}
#afpLogList::-webkit-scrollbar{width:3px;}
#afpLogList::-webkit-scrollbar-thumb{background:rgba(59,130,246,.3);border-radius:2px;}
.afp-miss{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-left:3px solid var(--amber,#fa0);border-radius:6px;padding:8px 10px;
  cursor:default;transition:border-color .2s;
}
.afp-miss:hover{border-left-color:var(--cyan,#3B82F6);}
.afp-miss-top{display:flex;align-items:center;gap:6px;margin-bottom:4px;}
.afp-miss-dir{font-size:9px;font-weight:700;}
.afp-miss-dir.buy{color:var(--green,#0f8);}
.afp-miss-dir.sell{color:var(--red,#f22);}
.afp-miss-grade{
  font-size:8px;padding:1px 5px;border-radius:3px;
  background:rgba(255,170,0,.1);border:1px solid rgba(255,170,0,.2);color:var(--amber,#fa0);
}
.afp-miss-time{font-size:8px;color:var(--text3,#555);margin-left:auto;}
.afp-miss-rr{display:flex;gap:10px;font-size:9px;}
.afp-miss-rr span{color:var(--text2,#888);}
.afp-miss-rr b{color:var(--red,#f22);}
.afp-miss-rr i{color:var(--amber,#fa0);font-style:normal;}
.afp-miss-reason{font-size:8px;color:var(--text3,#555);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.afp-log-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 12px;border-top:1px solid rgba(255,255,255,.06);
  font-size:8px;color:var(--text3,#555);
}
#afpMissCount{color:var(--amber,#fa0);}
#afpClearBtn{
  font-size:8px;padding:3px 8px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);border-radius:4px;color:var(--text2,#888);
  cursor:pointer;transition:all .2s;letter-spacing:.08em;
}
#afpClearBtn:hover{background:rgba(255,45,85,.12);border-color:rgba(255,45,85,.3);color:var(--red,#f22);}

/* ── Manual Trade pane ── */
.afp-field{margin-bottom:9px;}
.afp-field label{
  display:block;font-size:8px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3,#555);margin-bottom:4px;
}
.afp-field input{
  width:100%;box-sizing:border-box;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:5px;
  padding:7px 10px;font-family:var(--mono,monospace);font-size:12px;
  color:var(--text,#e0e0e0);outline:none;transition:border-color .2s;
}
.afp-field input:focus{border-color:rgba(59,130,246,.4);}
.afp-field input::placeholder{color:rgba(255,255,255,.18);font-size:11px;}
.afp-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.afp-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.afp-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;}
/* Positions pane */
.afp-pos-row{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:6px;padding:8px 10px;margin-bottom:5px;
}
.afp-pos-row.afp-pos-long{border-left:3px solid var(--green,#0f8);}
.afp-pos-row.afp-pos-short{border-left:3px solid var(--red,#f22);}
.afp-pos-top{display:flex;align-items:center;gap:6px;margin-bottom:5px;}
.afp-pos-dir{font-size:10px;font-weight:700;letter-spacing:.05em;}
.afp-pos-dir.long{color:var(--green,#0f8);}
.afp-pos-dir.short{color:var(--red,#f22);}
.afp-pos-sym{font-family:var(--mono,monospace);font-size:9px;color:var(--text2,#888);}
.afp-pos-pnl{margin-left:auto;font-family:var(--mono,monospace);font-size:10px;font-weight:700;}
.afp-pos-pnl.pos{color:var(--green,#0f8);}
.afp-pos-pnl.neg{color:var(--red,#f22);}
.afp-pos-meta{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:4px;margin-bottom:6px;}
.afp-pos-cell{background:rgba(255,255,255,.02);border-radius:3px;padding:3px 5px;}
.afp-pos-cell-lbl{font-family:var(--mono,monospace);font-size:6px;letter-spacing:.08em;color:var(--text3,#555);text-transform:uppercase;margin-bottom:1px;}
.afp-pos-cell-val{font-family:var(--mono,monospace);font-size:9px;color:var(--text,#e0e0e0);}
.afp-pos-close{
  width:100%;padding:5px 0;font-family:var(--mono,monospace);font-size:8px;
  letter-spacing:.09em;border-radius:4px;cursor:pointer;transition:all .2s;
  background:rgba(255,45,85,.1);border:1px solid rgba(255,45,85,.3);color:var(--red,#f22);
}
.afp-pos-close:hover{background:rgba(255,45,85,.22);box-shadow:0 0 10px rgba(255,45,85,.2);}
.afp-pos-close:disabled{opacity:.4;cursor:not-allowed;}

#afpBuyBtn,#afpSellBtn{
  padding:10px 0;font-size:11px;font-weight:700;letter-spacing:.1em;
  border:none;border-radius:6px;cursor:pointer;transition:all .2s;
}
#afpBuyBtn{
  background:rgba(0,255,136,.12);border:1px solid rgba(0,255,136,.3);
  color:var(--green,#0f8);
}
#afpBuyBtn:hover{background:rgba(0,255,136,.22);box-shadow:0 0 14px rgba(0,255,136,.2);}
#afpSellBtn{
  background:rgba(255,45,85,.12);border:1px solid rgba(255,45,85,.3);
  color:var(--red,#f22);
}
#afpSellBtn:hover{background:rgba(255,45,85,.22);box-shadow:0 0 14px rgba(255,45,85,.2);}
#afpManualMsg{
  font-size:9px;color:var(--text3,#555);min-height:16px;margin-top:8px;
  text-align:center;line-height:1.5;
}
.afp-fill-btn{
  font-size:8px;padding:3px 8px;background:rgba(59,130,246,.06);
  border:1px solid rgba(59,130,246,.15);border-radius:4px;color:var(--cyan,#3B82F6);
  cursor:pointer;transition:all .2s;letter-spacing:.06em;float:right;margin-top:-2px;
}
.afp-fill-btn:hover{background:rgba(59,130,246,.12);}

#aeonEngineOverlay{position:fixed;inset:0;background:rgba(1,3,10,0);z-index:10000;pointer-events:none;transition:background .28s ease;}
#aeonEngineOverlay.open{background:rgba(1,3,10,0.68);pointer-events:all;}
/* Layout pass: was a 44vw right-edge slide-in drawer; the mockup wants the
   spacious, full-page feel of a proper workspace, so this is now a centered
   takeover sized like a page (min(1180px,94vw) × min(880px,92vh)) instead of
   a sidebar sliver. settings.html's embedded use of this same id already
   neutralizes all of this with !important (position:relative, width:100%,
   height:75vh) to sit inline on that page instead — untouched by this. */
#aeonEnginePanel{
  position:fixed;top:50%;left:50%;width:min(1180px,94vw);height:80vh;z-index:10001;
  display:flex;flex-direction:column;
  background:linear-gradient(168deg,rgba(4,7,18,0.90) 0%,rgba(2,4,12,0.94) 100%);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(105,132,165,0.20);border-radius:14px;
  box-shadow:0 30px 90px rgba(0,0,0,0.65),0 0 0 1px rgba(139,92,246,0.06);
  transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .24s ease;overflow:hidden;
}
#aeonEnginePanel.open{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:all;}
/* Top edge identity line: brief gold flick at the left (brand mark),
   settling into purple then cyan, gone by 85% of the width — this is the
   ONLY place gold gets more than a hint of prominence outside actual
   weighting/config controls further down. */
#aeonEnginePanel::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(245,158,11,.40) 0%,rgba(139,92,246,.22) 12%,rgba(110,168,247,.12) 40%,transparent 80%);
  pointer-events:none;z-index:2;}
#aeonEnginePanel::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.035) 3px,rgba(0,0,0,.035) 4px);
  pointer-events:none;z-index:0;border-radius:inherit;}

/* ── Engine Builder palette pass (institutional-terminal restyle) ──
   Budget: ~90% near-black/graphite chrome, ~5% muted blue/cyan (io/tags),
   ~3% AEON purple reserved strictly for things the user interacts with
   (hover, focus, active tab/nav), ~2% gold reserved strictly for engine
   CONFIGURATION/weighting (save engine, weight slider, active-rule tint,
   required gates, footer weight counts), and green/red reserved for
   actual long/short + pass/fail states only — never generic UI chrome
   (delete/reset get a neutral rest state, red only appears on hover as
   a destructive-action cue). Gold now maps to the app's own --amber
   (#F59E0B) token instead of the old bespoke #ffaa00, so the builder's
   accent lines up with how amber is used everywhere else in AEON. ── */
.eb-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:56px;flex-shrink:0;border-bottom:1px solid rgba(105,132,165,.16);position:relative;z-index:1;}
.eb-hdr::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(139,92,246,.30) 40%,rgba(110,168,247,.16) 70%,transparent 100%);pointer-events:none;}
.eb-title{font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:.24em;color:var(--amber,#F59E0B);font-weight:700;}
.eb-subtitle{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.10em;color:rgba(155,170,192,.28);margin-top:2px;}
.eb-close{width:26px;height:26px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:4px;cursor:pointer;color:rgba(155,170,192,.45);font-size:10px;transition:all .15s;flex-shrink:0;}
.eb-close:hover{background:rgba(255,45,85,.10);border-color:rgba(255,45,85,.28);color:rgba(255,45,85,.85);}
/* .eb-namebar (the old single-row name+buttons bar) is gone — replaced by
   .eb-toolbar/.eb-meta-row/.eb-config-row, structural rules for which live
   in engine-builder.html's own <style> block since they're layout-only and
   specific to that fragment; this file keeps owning every *color* rule
   (.eb-nameinp itself, buttons, tabs, etc.) so the palette still has one
   source of truth. */
.eb-nameinp{flex:1;background:rgba(0,0,0,.4);border:1px solid rgba(105,132,165,.24);border-radius:3px;padding:8px 12px;font-family:'Share Tech Mono',monospace;font-size:11px;color:rgba(215,222,235,.85);letter-spacing:.06em;outline:none;transition:border-color .15s,box-shadow .15s;}
.eb-nameinp:focus{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 1px rgba(139,92,246,.12);}
.eb-nameinp::placeholder{color:rgba(155,170,192,.22);font-size:9.5px;}
.eb-save-btn{padding:7px 14px;font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:.12em;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);color:var(--amber,#F59E0B);border-radius:3px;cursor:pointer;transition:all .15s;flex-shrink:0;}
.eb-save-btn:hover{background:rgba(245,158,11,.20);color:rgba(255,205,110,.98);border-color:rgba(245,158,11,.55);}
.eb-io-btn{padding:7px 11px;font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:.1em;background:rgba(110,168,247,.07);border:1px solid rgba(110,168,247,.22);color:var(--cyan,#6ea8f7);border-radius:3px;cursor:pointer;transition:all .15s;flex-shrink:0;}
.eb-io-btn:hover{background:rgba(110,168,247,.14);color:rgba(175,205,255,.98);border-color:rgba(110,168,247,.40);}
.eb-io-btn--all{margin:0 16px;font-size:7.5px;opacity:.7;}
.eb-io-btn--all:hover{opacity:1;}
.eb-saved-strip{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 16px;border-bottom:1px solid rgba(105,132,165,.10);flex-shrink:0;position:relative;z-index:1;min-height:36px;}
.eb-saved-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:12px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.07em;border:1px solid rgba(105,132,165,.22);background:rgba(105,132,165,.07);color:rgba(180,190,205,.65);cursor:pointer;transition:all .15s;}
.eb-saved-pill:hover{background:rgba(139,92,246,.09);color:rgba(205,190,255,.85);border-color:rgba(139,92,246,.35);}
.eb-saved-pill.active{background:rgba(245,158,11,.14);color:var(--amber,#F59E0B);border-color:rgba(245,158,11,.45);}
.eb-pill-del{color:rgba(155,170,192,.3);font-size:10px;line-height:1;cursor:pointer;transition:color .12s;margin-left:2px;}
.eb-pill-del:hover{color:rgba(255,45,85,.75);}
.eb-saved-empty{font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:.10em;color:rgba(155,170,192,.25);}
.eb-tabs{display:flex;flex-shrink:0;border-bottom:1px solid rgba(105,132,165,.14);position:relative;z-index:1;background:rgba(0,0,0,.12);overflow-x:auto;}
.eb-tabs::-webkit-scrollbar{height:0;}
.eb-tab{flex-shrink:0;padding:7px 11px;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.10em;cursor:pointer;color:rgba(155,170,192,.38);border-bottom:2px solid transparent;transition:all .15s;background:transparent;border-top:none;border-left:none;border-right:none;white-space:nowrap;}
.eb-tab:hover{color:rgba(200,185,255,.60);}
.eb-tab.active{color:var(--aeon-violet,#8B5CF6);border-bottom-color:rgba(139,92,246,.65);background:rgba(139,92,246,.07);}
.eb-tab-ct{display:inline-block;font-size:7px;letter-spacing:0;background:rgba(105,132,165,.14);border-radius:8px;padding:1px 5px;margin-left:4px;vertical-align:middle;color:rgba(180,190,205,.55);}
.eb-tab-ct.has{background:rgba(245,158,11,.22);color:var(--amber,#F59E0B);}
/* Pre-existing gap, surfaced by this layout pass: #ebBuilderMount (the div
   both app.html and settings.html inject this partial into) was never
   actually a flex container, so .eb-scroll's flex:1 below had nothing to
   flex against — the checklist just grew to its full natural height
   instead of scrolling inside a fixed-height panel. Harmless in the old
   100vh drawer (there was always room), but the new fixed-height modal
   (and settings.html's fixed 75vh) both need this to actually work. */
#aeonEnginePanel #ebBuilderMount{display:flex;flex-direction:column;flex:1;min-height:0;}
#aeonEnginePanel .eb-scroll{flex:1;min-height:0;overflow-y:auto;position:relative;z-index:1;scrollbar-width:thin;scrollbar-color:rgba(105,132,165,.20) transparent;}
#aeonEnginePanel .eb-scroll::-webkit-scrollbar{width:2px;}
#aeonEnginePanel .eb-scroll::-webkit-scrollbar-thumb{background:rgba(105,132,165,.28);border-radius:2px;}
.eb-pane{display:none;padding:12px 16px;}
.eb-pane.active{display:block;}
.eb-group-desc{font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:.07em;color:rgba(155,170,192,.38);line-height:1.6;margin-bottom:12px;padding:7px 10px;background:rgba(105,132,165,.045);border:1px solid rgba(105,132,165,.14);border-radius:3px;}
.eb-check{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:3px;margin-bottom:4px;border:1px solid rgba(105,132,165,.16);background:rgba(10,15,22,.55);transition:background .15s,border-color .15s;cursor:pointer;}
.eb-check:hover{background:rgba(139,92,246,.045);border-color:rgba(139,92,246,.20);}
/* "active" is the DEFAULT state for ~198 of ~210 checks (_ebInitState sets
   every check active:true) — it is not a deliberate, rare choice the way
   an included block was in the mockup this pattern was borrowed from. Gold-
   tinting every active row re-creates almost the exact wall-of-amber this
   restyle was meant to fix, just for a different reason (volume, not hue).
   So: active gets a barely-there neutral lift (just enough to read as "on"
   next to its toggle), and gold at the row level is reserved for the one
   state that IS a deliberate, comparatively rare configuration decision —
   marking a check as a required gate. */
.eb-check.active{background:rgba(110,168,247,.025);border-color:rgba(105,132,165,.20);}
.eb-check.required-gate{background:linear-gradient(90deg,rgba(245,158,11,.09),rgba(8,13,20,.78));border-color:rgba(245,158,11,.38);border-left:3px solid rgba(245,158,11,.55);}
.eb-toggle{width:32px;height:16px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.10);flex-shrink:0;margin-top:1px;cursor:pointer;transition:background .2s;position:relative;}
.eb-toggle::after{content:'';position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:rgba(155,170,192,.4);transition:all .2s;}
.eb-toggle.on{background:rgba(245,158,11,.42);border-color:rgba(245,158,11,.58);}
.eb-toggle.on::after{left:18px;background:rgba(250,195,90,.95);}
.eb-req-toggle{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.08em;padding:2px 7px;border-radius:2px;border:1px solid rgba(105,132,165,.20);background:rgba(105,132,165,.05);color:rgba(155,170,192,.40);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;margin-top:2px;}
.eb-req-toggle.on{background:rgba(245,158,11,.24);border-color:rgba(245,158,11,.52);color:rgba(255,205,110,.95);}
.eb-check-name{font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:.07em;color:rgba(215,222,235,.70);}
.eb-check-desc{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.04em;color:rgba(155,170,192,.38);margin-top:2px;line-height:1.5;}
.eb-check-tags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;}
.eb-tag{font-family:'Share Tech Mono',monospace;font-size:5px;letter-spacing:.06em;padding:1px 5px;border-radius:2px;background:rgba(110,168,247,.06);border:1px solid rgba(110,168,247,.14);color:rgba(150,190,250,.55);}
.eb-tag.purple{background:rgba(139,92,246,.08);border-color:rgba(139,92,246,.18);color:rgba(190,165,250,.65);}
.eb-tag.amber{background:rgba(245,158,11,.07);border-color:rgba(245,158,11,.16);color:rgba(245,190,90,.60);}
.eb-weight{display:flex;align-items:center;gap:6px;margin-top:5px;}
.eb-weight-lbl{font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.08em;color:rgba(155,170,192,.35);width:48px;}
.eb-weight input[type=range]{width:80px;accent-color:var(--amber,#F59E0B);cursor:pointer;}
.eb-weight-val{font-family:'Share Tech Mono',monospace;font-size:8px;font-weight:700;color:rgba(250,200,90,.85);min-width:24px;}
.eb-footer{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 16px;border-top:1px solid rgba(105,132,165,.14);flex-shrink:0;position:relative;z-index:1;background:rgba(0,0,0,.18);font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:.08em;color:rgba(155,170,192,.38);}
.eb-footer span b{color:rgba(250,200,90,.85);}
.eb-reset{margin-left:auto;padding:4px 10px;background:rgba(255,255,255,.02);border:1px solid rgba(105,132,165,.20);color:rgba(155,170,192,.45);border-radius:3px;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:.08em;transition:all .15s;}
.eb-reset:hover{background:rgba(244,63,94,.09);border-color:rgba(244,63,94,.32);color:rgba(244,63,94,.85);}

#aeonApiOverlay{
  position:fixed;inset:0;
  background:rgba(1,3,10,0);
  z-index:9996;
  pointer-events:none;
  transition:background .32s ease;
}
#aeonApiOverlay.open{
  background:rgba(1,3,10,0.52);
  pointer-events:all;
}

#aeonApiPanel{
  position:fixed;
  top:0;right:0;
  width:min(860px,94vw);
  height:100vh;
  z-index:9997;
  display:flex;
  flex-direction:column;
  background:linear-gradient(168deg,rgba(4,7,18,0.82) 0%,rgba(2,4,12,0.88) 100%);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-left:1px solid rgba(59,130,246,0.13);
  box-shadow:
    -6px 0 48px rgba(0,0,0,0.65),
    -1px 0 0 rgba(59,130,246,0.042),
    inset 1px 0 0 rgba(59,130,246,0.03);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
#aeonApiPanel.open{ transform:translateX(0); }

/* Left-edge accent rail */
#aeonApiPanel::after{
  content:'';
  position:absolute;top:0;left:0;bottom:0;width:1px;
  background:linear-gradient(180deg,rgba(59,130,246,.35) 0%,rgba(59,130,246,.12) 25%,rgba(59,130,246,.04) 70%,transparent 100%);
  pointer-events:none;z-index:2;
}
/* Scanline texture */
#aeonApiPanel::before{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px);
  pointer-events:none;z-index:0;
}

/* Header */
.api-hdr{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;height:56px;flex-shrink:0;
  border-bottom:1px solid rgba(59,130,246,.07);
  position:relative;z-index:1;
}
.api-hdr::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(59,130,246,.18) 40%,transparent 100%);
  pointer-events:none;
}
.api-title{
  font-family:'Share Tech Mono',monospace;font-size:8px;
  letter-spacing:.26em;color:rgba(59,130,246,.85);font-weight:700;
  text-shadow:0 0 12px rgba(59,130,246,0.126);
}
.api-subtitle{
  font-family:'Share Tech Mono',monospace;font-size:5.5px;
  letter-spacing:.10em;color:rgba(155,170,192,.28);margin-top:2px;
}
.api-close{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:4px;cursor:pointer;color:rgba(155,170,192,.45);font-size:10px;
  transition:all .15s;flex-shrink:0;
}
.api-close:hover{background:rgba(255,45,85,.10);border-color:rgba(255,45,85,.28);color:rgba(255,45,85,.85);}

/* Tab row */
.api-tabs{
  display:flex;flex-shrink:0;
  border-bottom:1px solid rgba(59,130,246,.07);
  position:relative;z-index:1;
  background:rgba(0,0,0,.18);
}
.api-tab{
  flex:1;padding:8px 4px;
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.10em;
  text-align:center;cursor:pointer;
  color:rgba(155,170,192,.38);
  border-bottom:2px solid transparent;
  transition:all .15s;background:transparent;border-top:none;border-left:none;border-right:none;
}
.api-tab:hover{color:rgba(59,130,246,.58);}
.api-tab.active{
  color:rgba(59,130,246,.88);
  border-bottom-color:rgba(59,130,246,.55);
  background:rgba(59,130,246,.04);
  text-shadow:0 0 8px rgba(59,130,246,0.14);
}
/* Status dot on tab */
.api-tab-dot{
  display:inline-block;width:4px;height:4px;border-radius:50%;
  margin-right:4px;vertical-align:middle;
  background:rgba(155,170,192,.2);transition:background .3s,box-shadow .3s;
}
.api-tab-dot.ok{background:rgba(0,255,136,.8);box-shadow:0 0 4px rgba(0,255,136,.4);}
.api-tab-dot.set{background:rgba(255,200,0,.8);}
.api-tab-dot.err{background:rgba(255,45,85,.85);box-shadow:0 0 4px rgba(255,45,85,.4);}
.api-tab-dot.testing{background:rgba(53,213,255,.9);animation:apiDotPulse 1s ease-in-out infinite;}
@keyframes apiDotPulse{0%,100%{opacity:1;}50%{opacity:.3;}}

/* Scrollable body */
#aeonApiPanel .api-scroll{
  flex:1;overflow-y:auto;position:relative;z-index:1;
  scrollbar-width:thin;scrollbar-color:rgba(59,130,246,.12) transparent;
}
#aeonApiPanel .api-scroll::-webkit-scrollbar{width:2px;}
#aeonApiPanel .api-scroll::-webkit-scrollbar-thumb{background:rgba(59,130,246,.16);border-radius:2px;}

/* Tab content panes */
.api-pane{display:none;padding:16px;}
.api-pane.active{display:block;}

/* Exchange badge header */
.api-exch-hdr{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
}
.api-exch-name{
  font-family:'Share Tech Mono',monospace;font-size:9px;
  letter-spacing:.18em;color:rgba(215,222,235,.7);font-weight:700;
}
.api-exch-tag{
  font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.10em;
  padding:2px 7px;border-radius:2px;border:1px solid rgba(59,130,246,.15);
  color:rgba(59,130,246,.45);background:rgba(59,130,246,.04);
}
.api-exch-status{
  font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.08em;
  margin-left:auto;padding:2px 8px;border-radius:2px;border:1px solid;
  transition:all .3s;
}
.api-exch-status.ok{color:rgba(0,255,136,.8);border-color:rgba(0,255,136,.2);background:rgba(0,255,136,.05);}
.api-exch-status.set{color:rgba(255,200,0,.8);border-color:rgba(255,200,0,.2);background:rgba(255,200,0,.04);}
.api-exch-status.empty{color:rgba(155,170,192,.35);border-color:rgba(155,170,192,.1);background:transparent;}
.api-exch-status.err{color:rgba(255,45,85,.85);border-color:rgba(255,45,85,.3);background:rgba(255,45,85,.06);}

/* Prominent variant used in the exchange workspace header — same states,
   bigger footprint plus a colored status dot so the connection state reads
   at a glance rather than needing to parse the label text. */
.xapi-wshdr-actions .api-exch-status{
  display:flex;align-items:center;gap:6px;
  font-size:8px;letter-spacing:.12em;font-weight:700;
  padding:6px 12px;border-radius:5px;
}
.xapi-wshdr-actions .api-exch-status::before{
  content:'';width:6px;height:6px;border-radius:50%;flex-shrink:0;
  background:currentColor;
  box-shadow:0 0 6px currentColor;
}
.xapi-wshdr-actions .api-exch-status.empty::before{box-shadow:none;}

/* Field group */
.api-field{margin-bottom:12px;}
.api-label{
  font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.16em;
  color:rgba(155,170,192,.42);text-transform:uppercase;margin-bottom:5px;
  display:flex;align-items:center;justify-content:space-between;
}
.api-label-req{color:rgba(255,45,85,.5);font-size:5.5px;letter-spacing:.06em;}
.api-inp{
  width:100%;box-sizing:border-box;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(59,130,246,.10);
  border-radius:3px;
  padding:7px 10px;
  font-family:'Share Tech Mono',monospace;font-size:8px;
  color:rgba(215,222,235,.85);letter-spacing:.04em;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.api-inp:focus{
  border-color:rgba(59,130,246,.32);
  box-shadow:0 0 0 2px rgba(59,130,246,0.042);
}
.api-inp::placeholder{color:rgba(155,170,192,.22);font-size:7px;}
/* Show dots for key/secret fields */
.api-inp.secret-field{letter-spacing:.08em;}

/* Toggle show/hide */
.api-field-row{display:flex;gap:6px;align-items:flex-end;}
.api-field-row .api-inp{flex:1;}
.api-eye{
  flex-shrink:0;width:28px;height:30px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.10);
  border-radius:3px;cursor:pointer;font-size:10px;
  color:rgba(155,170,192,.4);transition:all .15s;
}
.api-eye:hover{color:rgba(59,130,246,.7);border-color:rgba(59,130,246,.25);}

/* Action row */
.api-actions{
  display:flex;gap:6px;margin-top:16px;
}
.api-btn-save{
  flex:1;padding:8px 0;
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.14em;
  background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.25);
  color:rgba(59,130,246,.82);border-radius:3px;cursor:pointer;transition:all .15s;
}
.api-btn-save:hover{background:rgba(59,130,246,.14);color:rgba(59,130,246,1);}
.api-btn-clear{
  padding:8px 12px;
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.10em;
  background:rgba(255,45,85,.05);border:1px solid rgba(255,45,85,.18);
  color:rgba(255,45,85,.55);border-radius:3px;cursor:pointer;transition:all .15s;
}
.api-btn-clear:hover{background:rgba(255,45,85,.10);color:rgba(255,45,85,.85);}

/* Test connection button */
.api-btn-test{
  width:100%;margin-top:8px;padding:7px 0;
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.12em;
  background:transparent;border:1px solid rgba(155,170,192,.12);
  color:rgba(155,170,192,.38);border-radius:3px;cursor:pointer;transition:all .15s;
}
.api-btn-test:hover{border-color:rgba(59,130,246,.22);color:rgba(59,130,246,.6);}

/* Status message */
.api-msg{
  margin-top:8px;padding:6px 9px;border-radius:3px;
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.06em;
  display:none;line-height:1.5;
}
.api-msg.ok{background:rgba(0,255,136,.06);border:1px solid rgba(0,255,136,.18);color:rgba(0,255,136,.82);display:block;}
.api-msg.err{background:rgba(255,45,85,.06);border:1px solid rgba(255,45,85,.18);color:rgba(255,45,85,.82);display:block;}
.api-msg.info{background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.14);color:rgba(59,130,246,.65);display:block;}

/* Note box */
.api-note{
  margin-top:14px;padding:9px 11px;
  background:rgba(255,200,0,.04);border:1px solid rgba(255,200,0,.12);border-radius:3px;
  font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.05em;
  color:rgba(255,200,0,.55);line-height:1.6;
}
.api-note strong{color:rgba(255,200,0,.75);letter-spacing:.08em;}

/* Section rule — same as swing .sec */
.api-rule{
  display:flex;align-items:center;gap:8px;margin:12px 0 10px;
}
.api-rule-label{
  font-family:'Share Tech Mono',monospace;font-size:6px;
  letter-spacing:.18em;color:rgba(155,170,192,.32);white-space:nowrap;
}
.api-rule-line{
  flex:1;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.08),transparent);
}

/* Proxy URL section */
.api-proxy-row{
  display:flex;gap:6px;align-items:flex-end;
}
.api-proxy-row .api-inp{flex:1;font-size:7px;}
.api-proxy-save{
  flex-shrink:0;padding:7px 10px;
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.08em;
  background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.18);
  color:rgba(59,130,246,.65);border-radius:3px;cursor:pointer;transition:all .15s;
}
.api-proxy-save:hover{background:rgba(59,130,246,.12);color:rgba(59,130,246,.92);}

/* ══════════════════════════════════════════════════════════════
   EXCHANGE API KEYS — sidebar + workspace revamp
   (Scoped to the exchange panel only; PROXY/MONITOR/USERS panes
   keep using the original .api-inp / .api-note styles above.)
════════════════════════════════════════════════════════════════ */

.api-body{
  flex:1;min-height:0;
  display:flex;
  position:relative;z-index:1;
}

/* ── Sidebar ── */
.api-sidebar{
  width:25%;flex-shrink:0;
  display:flex;flex-direction:column;
  padding:14px 10px;
  border-right:1px solid rgba(59,130,246,.08);
  background:rgba(0,0,0,.16);
  overflow-y:auto;
}
.api-sidebar-hdr{
  padding:4px 6px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.22em;
  color:rgba(155,170,192,.32);
}
.api-sidebar-hdr-sys{margin-top:14px;padding-top:10px;border-top:1px solid rgba(59,130,246,.06);}
.api-add-exchange{
  padding:3px 7px;
  background:rgba(59,130,246,.04);
  border:1px solid rgba(59,130,246,.16);border-radius:4px;
  color:rgba(59,130,246,.4);
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.08em;font-weight:700;
  cursor:not-allowed;white-space:nowrap;
}
.api-exchange-search{position:relative;margin:0 2px 9px;}
.api-exchange-search-icon{
  position:absolute;top:50%;left:9px;transform:translateY(-50%);
  color:rgba(155,170,192,.3);font-size:10px;pointer-events:none;
}
.api-exchange-search-kbd{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  padding:1px 5px;border-radius:3px;
  border:1px solid rgba(155,170,192,.16);
  background:rgba(255,255,255,.02);
  color:rgba(155,170,192,.3);
  font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.04em;
  pointer-events:none;
}
.api-exchange-search input{
  width:100%;box-sizing:border-box;height:28px;
  padding:0 34px 0 26px;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(59,130,246,.1);border-radius:5px;
  outline:none;color:rgba(215,222,235,.8);
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.03em;
  transition:border-color .15s;
}
.api-exchange-search input:focus{border-color:rgba(59,130,246,.4);}
.api-exchange-search input::placeholder{color:rgba(155,170,192,.28);}
.api-exchange-empty{
  padding:14px 8px;text-align:center;
  color:rgba(155,170,192,.3);
  font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:.04em;line-height:1.5;
}

.api-manage-exchanges{
  width:100%;margin-top:8px;padding:8px;
  background:transparent;
  border:1px dashed rgba(59,130,246,.14);border-radius:5px;
  color:rgba(155,170,192,.34);
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.1em;font-weight:700;
  cursor:not-allowed;transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.api-manage-exchanges:hover{border-color:rgba(59,130,246,.3);color:rgba(59,130,246,.55);}

.api-exchange-list{display:flex;flex-direction:column;gap:5px;}

.exchange-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 9px;
  background:linear-gradient(90deg,rgba(12,19,32,.55),rgba(8,13,23,.55));
  border:1px solid transparent;
  border-radius:5px;
  cursor:pointer;text-align:left;
  transition:background .15s,border-color .15s;
  position:relative;
}
.exchange-item:hover{background:rgba(59,130,246,.05);border-color:rgba(59,130,246,.16);}
.exchange-item.active{
  background:linear-gradient(90deg,rgba(59,130,246,.12),rgba(59,130,246,.02));
  border-color:rgba(59,130,246,.4);
  box-shadow:inset 2px 0 0 rgba(59,130,246,.75);
}

.exchange-logo{
  width:26px;height:26px;flex-shrink:0;
  border-radius:5px;object-fit:cover;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
}
.exchange-info{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px;}
.exchange-name{
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.1em;
  color:rgba(215,222,235,.78);font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.exchange-market{
  font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.04em;
  color:rgba(155,170,192,.36);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Status dot reused from .api-tab-dot, repositioned for the row layout */
.exchange-item .api-tab-dot{flex-shrink:0;margin-right:0;}
.exchange-item.active .api-tab-dot{display:none;}
.exchange-active-badge{
  display:none;flex-shrink:0;
  padding:2px 7px;
  border:1px solid rgba(59,130,246,.4);border-radius:4px;
  background:rgba(59,130,246,.1);
  color:rgba(59,130,246,.85);
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.1em;font-weight:700;
}
.exchange-item.active .exchange-active-badge{display:inline-block;}

.exchange-item-menu{
  flex-shrink:0;width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  border-radius:3px;
  color:rgba(155,170,192,.28);
  font-size:10px;line-height:1;cursor:not-allowed;
  transition:all .15s;
  background:transparent;border:none;
}
.exchange-item:hover .exchange-item-menu{color:rgba(155,170,192,.55);}
.exchange-item-menu:hover{background:rgba(255,255,255,.05);color:rgba(215,222,235,.7)!important;}

.api-sys-list .sys-item{
  padding:7px 9px;
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.12em;
  color:rgba(155,170,192,.4);
  background:transparent;border:1px solid transparent;border-radius:5px;
  cursor:pointer;text-align:left;transition:all .15s;
}
.api-sys-list .sys-item:hover{color:rgba(59,130,246,.65);background:rgba(59,130,246,.04);}
.api-sys-list .sys-item.active{color:rgba(59,130,246,.88);background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.18);}

/* ── Workspace ── */
.api-workspace{
  padding:24px 28px 28px;
  position:relative;
}
.api-workspace::before{
  content:'';
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(59,130,246,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.05) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,0,0,.9), transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(0,0,0,.9), transparent 90%);
  pointer-events:none;
  z-index:0;
}
.api-workspace .api-pane{position:relative;z-index:1;}
.api-workspace .api-pane{padding:0;}

.xapi-wshdr{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:18px;margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.xapi-wshdr-id{display:flex;align-items:center;gap:12px;min-width:0;}
.xapi-wshdr-logo{
  width:34px;height:34px;flex-shrink:0;
  border-radius:7px;object-fit:cover;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.xapi-wshdr h2{
  margin:0;
  font-family:'Share Tech Mono',monospace;font-size:15px;letter-spacing:.1em;
  color:rgba(225,231,242,.92);font-weight:400;
}
.xapi-market-badge{
  padding:4px 9px;flex-shrink:0;
  border:1px solid rgba(59,130,246,.22);border-radius:4px;
  background:rgba(59,130,246,.05);
  color:rgba(59,130,246,.65);
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.1em;font-weight:700;
  white-space:nowrap;
}
.xapi-wshdr-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.xapi-status-block{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.xapi-last-tested{
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.04em;
  color:rgba(155,170,192,.34);
}
.xapi-status-gear{
  margin-left:6px;opacity:.55;cursor:not-allowed;transition:opacity .15s;
}
.xapi-wshdr-actions .api-exch-status:hover .xapi-status-gear{opacity:.9;}
.xapi-guide-link{
  padding:5px 10px;
  border:1px solid rgba(59,130,246,.28);border-radius:4px;
  background:rgba(59,130,246,.04);
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.08em;font-weight:700;
  color:rgba(59,130,246,.65);text-decoration:none;white-space:nowrap;
  transition:all .15s;
}
.xapi-guide-link:hover{
  color:rgba(59,130,246,.95);
  border-color:rgba(59,130,246,.55);
  background:rgba(59,130,246,.1);
}

.xapi-form{display:flex;flex-direction:column;gap:16px;width:100%;}
.xapi-field{}
.xapi-label{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:6px;
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.18em;
  color:rgba(155,170,192,.46);text-transform:uppercase;
}
.xapi-req{color:rgba(255,45,85,.55);font-size:6px;letter-spacing:.06em;}
.xapi-input-row{display:flex;gap:8px;align-items:stretch;}
.xapi-input{
  flex:1;width:100%;box-sizing:border-box;
  height:38px;padding:0 13px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(59,130,246,.12);
  border-radius:5px;
  font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.05em;
  color:rgba(215,222,235,.88);
  outline:none;transition:border-color .15s,box-shadow .15s,background .15s;
}
.xapi-input:focus{
  border-color:rgba(53,213,255,.75);
  background:rgba(53,213,255,.04);
  box-shadow:0 0 0 3px rgba(53,213,255,.12),0 0 18px rgba(53,213,255,.15);
}
.xapi-input::placeholder{color:rgba(155,170,192,.24);}
.xapi-reveal{
  width:38px;height:38px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.14);
  border-radius:5px;cursor:pointer;font-size:11px;
  color:rgba(155,170,192,.42);transition:all .15s;
}
.xapi-reveal:hover{color:rgba(59,130,246,.75);border-color:rgba(59,130,246,.32);}

.xapi-actions{display:flex;gap:8px;margin-top:2px;}
.xapi-save{
  flex:1;height:40px;
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.14em;font-weight:700;
  background:linear-gradient(90deg,rgba(59,130,246,.1),rgba(59,130,246,.02));
  border:1px solid rgba(59,130,246,.5);
  color:rgba(59,130,246,.9);border-radius:5px;cursor:pointer;transition:all .15s;
}
.xapi-save:hover{background:rgba(59,130,246,.16);box-shadow:0 0 20px rgba(59,130,246,.08);color:rgba(59,130,246,1);}
.xapi-clear{
  width:40px;height:40px;flex-shrink:0;
  font-family:'Share Tech Mono',monospace;font-size:9px;
  background:rgba(255,45,85,.04);border:1px solid rgba(255,45,85,.18);
  color:rgba(255,45,85,.55);border-radius:5px;cursor:pointer;transition:all .15s;
}
.xapi-clear:hover{background:rgba(255,45,85,.10);color:rgba(255,45,85,.85);}
.xapi-test{
  width:100%;height:34px;
  font-family:'Share Tech Mono',monospace;font-size:7.5px;letter-spacing:.12em;
  background:rgba(255,255,255,.015);border:1px solid rgba(255,255,255,.08);
  color:rgba(155,170,192,.4);border-radius:5px;cursor:pointer;transition:all .15s;
}
.xapi-test:hover{color:rgba(59,130,246,.7);border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.03);}

/* Security card — reuses .api-msg above for save/test status; this is the
   static permissions + storage callout beneath the form */
.xapi-security{
  width:100%;margin-top:22px;padding:16px 18px;
  box-sizing:border-box;
  position:relative;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,200,0,.05),rgba(12,14,20,.5));
  border:1px solid rgba(255,200,0,.3);
  border-radius:6px;
}
.xapi-security::before{
  content:'';
  position:absolute;inset:0;
  background:url('securitywm.png') no-repeat right center/contain;
  opacity:.3;
  pointer-events:none;
  z-index:0;
}
.xapi-security::after{
  content:'';position:absolute;top:0;bottom:0;right:0;width:2px;
  background:linear-gradient(transparent,rgba(255,200,0,.7),transparent);
  z-index:1;
}
.xapi-security-row{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;gap:11px;
  font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.03em;
  color:rgba(255,200,0,.6);line-height:1.6;
}
.xapi-security-row+.xapi-security-row{margin-top:11px;}
.xapi-security-icon{flex-shrink:0;font-size:11px;color:rgba(255,200,0,.75);line-height:1.4;}
.xapi-security-row strong{color:rgba(255,200,0,.85);letter-spacing:.08em;}

/* ── Responsive: collapse sidebar above the form on narrow drawers ── */
@media (max-width:640px){
  .api-body{flex-direction:column;overflow-y:auto;}
  .api-sidebar{
    width:100%;flex-direction:row;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;
    border-right:none;border-bottom:1px solid rgba(59,130,246,.08);
    padding:10px;gap:10px;
  }
  .api-sidebar-hdr,.api-sidebar-hdr-sys{display:none;}
  .api-exchange-list{flex-direction:row;gap:6px;}
  .exchange-item{flex-direction:column;align-items:flex-start;min-width:118px;}
  .api-sys-list{flex-direction:row;margin-left:6px;}
  .xapi-wshdr{flex-wrap:wrap;}
}

/* ══════════════════════════════════════════════════════════════
   AEON DIAGNOSTICS — Full-height left-edge system drawer
   Slides in from the left like an OS sidebar, not a popup.
   Shares exact glassmorphism language as the swing section.
   ══════════════════════════════════════════════════════════════ */

/* ── Dim overlay — covers the page content behind the drawer ── */
#aeonHealthOverlay{
  position:fixed;inset:0;
  background:rgba(1,3,10,0);
  z-index:9998;
  pointer-events:none;
  transition:background .32s ease;
}
#aeonHealthOverlay.open{
  background:rgba(1,3,10,0.52);
  pointer-events:all;
}

/* ── Drawer ── */
#aeonHealthPanel{
  position:fixed;
  top:0;left:0;
  width:400px;
  height:100vh;
  z-index:9999;
  display:flex;
  flex-direction:column;
  /* Same glass as swZoneB / premChartWrap */
  background:linear-gradient(168deg,rgba(4,7,18,0.78) 0%,rgba(2,4,12,0.84) 100%);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  /* Right edge border only — left edge is viewport edge */
  border-right:1px solid rgba(59,130,246,0.13);
  border-top:none;border-bottom:none;border-left:none;
  box-shadow:
    6px 0 48px rgba(0,0,0,0.65),
    1px 0 0 rgba(59,130,246,0.042),
    inset -1px 0 0 rgba(59,130,246,0.03);
  /* Slide-in transform */
  transform:translateX(-100%);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
  overflow:hidden;
}
#aeonHealthPanel.open{
  transform:translateX(0);
}

/* Right-edge accent line — running full height like a system rail */
#aeonHealthPanel::after{
  content:'';
  position:absolute;top:0;right:0;bottom:0;width:1px;
  background:linear-gradient(
    180deg,
    rgba(59,130,246,.35) 0%,
    rgba(59,130,246,.14) 20%,
    rgba(59,130,246,.06) 60%,
    transparent 100%
  );
  pointer-events:none;z-index:2;
}

/* Scanline texture overlay — matches body scanlines */
#aeonHealthPanel::before{
  content:'';
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 3px,rgba(0,0,0,.04) 3px,rgba(0,0,0,.04) 4px
  );
  pointer-events:none;z-index:0;
}

/* ── Tab handle — vertical label on the right edge ──
   Only visible when panel is closed — gives a subtle affordance
   that something lives here */
#aeonHealthTab{
  position:fixed;
  top:50%;left:0;
  transform:translateY(-50%) translateX(-100%);
  z-index:9997;
  display:flex;align-items:center;gap:0;
  transition:transform .32s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
#aeonHealthTab.visible{
  transform:translateY(-50%) translateX(0);
  pointer-events:all;
}
/* When drawer is open, tab slides off-screen with it */
#aeonHealthTab.hidden{
  transform:translateY(-50%) translateX(-100%);
  pointer-events:none;
}

/* ── Header ── */
.hp-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  height:56px;flex-shrink:0;
  border-bottom:1px solid rgba(59,130,246,.07);
  position:relative;z-index:1;
}
/* Top gradient shimmer matching proxy-card */
.hp-header::after{
  content:'';
  position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.25),rgba(59,130,246,.08) 60%,transparent);
  pointer-events:none;
}
.hp-title{
  font-family:'Share Tech Mono',monospace;font-size:8px;
  letter-spacing:.28em;color:rgba(59,130,246,.85);font-weight:700;
  text-shadow:0 0 14px rgba(59,130,246,0.126);
}
.hp-subtitle{
  font-family:'Share Tech Mono',monospace;font-size:5.5px;
  letter-spacing:.12em;color:rgba(155,170,192,.28);margin-top:2px;
}
.hp-hdr-right{display:flex;align-items:center;gap:7px;}

/* ── Close button — X in the corner ── */
.hp-close{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:4px;cursor:pointer;color:rgba(155,170,192,.45);font-size:10px;
  font-family:monospace;transition:all .15s;flex-shrink:0;
}
.hp-close:hover{
  background:rgba(255,45,85,.10);border-color:rgba(255,45,85,.28);
  color:rgba(255,45,85,.85);
}

/* ── Refresh ── */
.hp-refresh{
  font-family:'Share Tech Mono',monospace;font-size:6px;letter-spacing:.12em;
  padding:5px 10px;
  background:rgba(59,130,246,.04);border:1px solid rgba(59,130,246,.14);
  color:rgba(59,130,246,.55);border-radius:3px;cursor:pointer;transition:all .15s;
}
.hp-refresh:hover{
  background:rgba(59,130,246,.09);color:rgba(59,130,246,.92);
  border-color:rgba(59,130,246,.32);
}

/* ── Status bar — 2px health fill line ── */
.hp-status-bar{
  height:2px;width:100%;flex-shrink:0;
  background:rgba(255,255,255,.04);
  position:relative;z-index:1;
}
.hp-status-fill{
  height:100%;transition:width .7s ease,background .4s;
}

/* ── Summary strip ── */
.hp-summary{
  display:flex;align-items:center;gap:0;
  flex-shrink:0;
  border-bottom:1px solid rgba(59,130,246,.06);
  position:relative;z-index:1;
}
.hp-sum-block{
  flex:1;padding:8px 14px;
  border-right:1px solid rgba(59,130,246,.06);
  display:flex;flex-direction:column;gap:2px;
}
.hp-sum-block:last-child{border-right:none;}
.hp-sum-label-sm{
  font-family:'Share Tech Mono',monospace;font-size:5.5px;
  letter-spacing:.16em;color:rgba(155,170,192,.28);text-transform:uppercase;
}
.hp-sum-val{
  font-family:'Share Tech Mono',monospace;font-size:11px;
  letter-spacing:.04em;font-weight:700;
  transition:color .4s;
}
.hp-sum-dot{
  width:6px;height:6px;border-radius:50%;flex-shrink:0;
  display:inline-block;margin-right:4px;vertical-align:middle;
  transition:background .4s,box-shadow .4s;
}
.hp-sum-status{
  display:flex;align-items:center;
  font-family:'Share Tech Mono',monospace;font-size:6.5px;
  letter-spacing:.08em;flex:2;padding:8px 14px;
}
.hp-sum-time{
  font-family:'Share Tech Mono',monospace;font-size:5px;
  color:rgba(155,170,192,.2);letter-spacing:.05em;margin-top:2px;
}

/* ── Scrollable body ── */
#aeonHealthPanel .hp-scroll{
  overflow-y:auto;flex:1;
  position:relative;z-index:1;
  scrollbar-width:thin;
  scrollbar-color:rgba(59,130,246,.12) transparent;
}
#aeonHealthPanel .hp-scroll::-webkit-scrollbar{width:2px;}
#aeonHealthPanel .hp-scroll::-webkit-scrollbar-track{background:transparent;}
#aeonHealthPanel .hp-scroll::-webkit-scrollbar-thumb{background:rgba(59,130,246,.16);border-radius:2px;}

/* ── Body ── */
.hp-body{padding:14px 16px;display:flex;flex-direction:column;gap:14px;}

/* ── Section header — matches swing .sec ── */
.hp-sec-hdr{
  display:flex;align-items:center;gap:8px;margin-bottom:7px;
}
.hp-sec-icon{font-size:7px;color:rgba(59,130,246,.35);letter-spacing:0;}
.hp-sec-title{
  font-family:'Share Tech Mono',monospace;font-size:6.5px;
  letter-spacing:.22em;color:rgba(215,222,235,.42);font-weight:700;text-transform:uppercase;
}
.hp-sec-badge{
  font-family:'Share Tech Mono',monospace;font-size:5.5px;letter-spacing:.10em;
  padding:1px 7px;border-radius:2px;border:1px solid;white-space:nowrap;
}
.hp-sec-badge.ok  {color:rgba(0,255,136,.70);border-color:rgba(0,255,136,.16);background:rgba(0,255,136,.04);}
.hp-sec-badge.warn{color:rgba(255,200,0,.72);border-color:rgba(255,200,0,.16);background:rgba(255,200,0,.04);}
.hp-sec-badge.err {color:rgba(255,45,85,.72);border-color:rgba(255,45,85,.16);background:rgba(255,45,85,.04);}
.hp-sec-badge.loading{color:rgba(155,170,192,.35);border-color:rgba(155,170,192,.10);background:transparent;}
.hp-sec-rule{
  flex:1;height:1px;
  background:linear-gradient(90deg,rgba(59,130,246,.10) 0%,transparent 100%);
}

/* ── Check grid ── */
.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.hp-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;}

/* ── Check card ── */
.hp-card{
  display:flex;align-items:flex-start;gap:6px;
  padding:6px 9px;border-radius:3px;
  background:rgba(59,130,246,.018);
  border:1px solid rgba(255,255,255,.035);
  border-left:2px solid transparent;
  transition:background .18s;
}
.hp-card:hover{background:rgba(59,130,246,.032);}
.hp-card.ok  {border-left-color:rgba(0,255,136,.26);}
.hp-card.warn{border-left-color:rgba(255,200,0,.30);}
.hp-card.err {border-left-color:rgba(255,45,85,.35);}
.hp-card.loading{border-left-color:rgba(155,170,192,.12);}

.hp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-top:3px;}
.hp-card.ok   .hp-dot{background:rgba(0,255,136,.78);box-shadow:0 0 4px rgba(0,255,136,.32);}
.hp-card.warn .hp-dot{background:rgba(255,200,0,.82);}
.hp-card.err  .hp-dot{background:rgba(255,45,85,.82);box-shadow:0 0 4px rgba(255,45,85,.28);}
.hp-card.loading .hp-dot{background:rgba(155,170,192,.22);animation:hp-blink 1.4s ease-in-out infinite;}
@keyframes hp-blink{0%,100%{opacity:.18;}50%{opacity:.75;}}

.hp-card-body{flex:1;min-width:0;}
.hp-card-name{
  font-family:'Share Tech Mono',monospace;font-size:6px;
  letter-spacing:.07em;color:rgba(215,222,235,.65);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-card-detail{
  font-family:'Share Tech Mono',monospace;font-size:5px;
  letter-spacing:.04em;color:rgba(155,170,192,.35);
  margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-card.err  .hp-card-detail{color:rgba(255,100,100,.45);}
.hp-card.warn .hp-card-detail{color:rgba(255,200,0,.42);}
.hp-card-val{
  font-family:'Share Tech Mono',monospace;font-size:6px;
  letter-spacing:.03em;color:rgba(155,170,192,.38);
  flex-shrink:0;text-align:right;white-space:nowrap;
}
.hp-card.ok .hp-card-val{color:rgba(0,255,136,.55);}

/* ── Conviction bars ── */
.hp-conv-wrap{
  margin-top:7px;padding:9px 11px;border-radius:3px;
  background:rgba(59,130,246,.02);border:1px solid rgba(59,130,246,.07);
}
.hp-conv-hdr{
  font-family:'Share Tech Mono',monospace;font-size:5px;
  letter-spacing:.16em;color:rgba(59,130,246,.35);margin-bottom:7px;
}
.hp-conv-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;}
.hp-conv-row{display:flex;align-items:center;gap:5px;}
.hp-conv-lbl{
  font-family:'Share Tech Mono',monospace;font-size:5px;
  letter-spacing:.05em;color:rgba(155,170,192,.38);
  width:88px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hp-conv-bar{flex:1;height:2px;background:rgba(255,255,255,.05);border-radius:1px;overflow:hidden;}
.hp-conv-fill{height:100%;border-radius:1px;transition:width .5s;}
.hp-conv-val{
  font-family:'Share Tech Mono',monospace;font-size:5px;
  letter-spacing:.03em;width:18px;text-align:right;flex-shrink:0;
}

/* ── Health dot states ── */
#aeonHealthDot.hd-ok     {background:rgba(0,255,136,.88);box-shadow:0 0 6px rgba(0,255,136,.55);}
#aeonHealthDot.hd-warn   {background:rgba(255,200,0,.92);box-shadow:0 0 5px rgba(255,200,0,.45);}
#aeonHealthDot.hd-err    {background:rgba(255,45,85,.92);box-shadow:0 0 6px rgba(255,45,85,.45);}
#aeonHealthDot.hd-loading{background:rgba(155,170,192,.28);animation:hp-blink 1.6s ease-in-out infinite;}

/* Hide health dot and admin badge on mobile */
@media (max-width: 768px) {
  #aeonHealthDot { display: none !important; }
  #mAdminBadge   { display: none !important; }
}

/* ── Altcoin scrolling strips ── */
.m-alt-strips-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  overflow: hidden;
  /* clip-path ensures absolute children can't bleed outside — overflow:hidden alone
     doesn't always clip absolute descendants in flex containers */
  isolation: isolate;
}

.m-alt-strip {
  display: flex;
  align-items: stretch;
  height: 22px;
  overflow: hidden;
}
.m-alt-strip--losers {
  background: rgba(210,55,75,0.04);
  border-top: 1px solid rgba(210,55,75,0.12);
  border-bottom: 1px solid rgba(210,55,75,0.05);
}
.m-alt-strip--gainers {
  background: rgba(0,210,130,0.04);
  border-top: 1px solid rgba(0,210,130,0.05);
  border-bottom: 1px solid rgba(0,210,130,0.12);
}
.m-alt-strips-wrap.m-alt-merged .m-alt-strip {
  background: rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Scrolling inner — flex:1, clips the track, fades edges */
.m-alt-inner {
  flex: 1;
  overflow: hidden;
  height: 22px;
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 97%, transparent 100%);
}
/* Pull right fade when button is visible so pills don't go under it */
.m-alt-strips-wrap.strip-active .m-alt-inner {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 3%, black 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 3%, black 82%, transparent 100%);
}

/* Icon button — absolutely positioned on wrapper, height set by JS after render */
.m-alt-icon-btn {
  position: absolute;
  right: 0;
  top: 0;
  display: none;        /* fully removed from paint until activated */
  width: 38px;
  height: 22px;         /* overwritten by JS */
  align-items: center;
  justify-content: center;
  background: rgba(6,10,18,0.95);
  border: none;
  border-left: 1px solid rgba(59,130,246,0.15);
  cursor: pointer;
  padding: 0;
  z-index: 3;
}
.m-alt-strips-wrap.strip-active .m-alt-icon-btn {
  display: flex;
}
.m-alt-icon-btn svg {
  flex-shrink: 0;
  min-width: 12px;
  width: 12px;
  height: 12px;
}
.m-alt-icon-btn:active { background: rgba(59,130,246,0.1); }
.m-alt-icon-btn:active svg { transform: scale(0.88); transition: transform 0.08s; }


.m-alt-track {
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  height: 22px;
}
.m-alt-track--left  { animation: mAltScrollLeft  80s linear infinite; }
.m-alt-track--right { animation: mAltScrollRight 80s linear infinite; }
.m-alt-strip:hover .m-alt-track { animation-play-state: paused; }

@keyframes mAltScrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes mAltScrollRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.m-alt-coin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 22px;
  border-right: 1px solid rgba(255,255,255,0.04);
  flex-shrink: 0;
}
.m-alt-sym {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  color: rgba(155,170,192,0.55);
}
.m-alt-chg {
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.m-alt-chg.pos { color: rgba(0,210,130,0.9); }
.m-alt-chg.neg { color: rgba(210,55,75,0.85); }

/* ── Token screener full-panel ── */
.m-token-panel {
  position: fixed;
  inset: 0;
  z-index: 950;
  background: #080b12;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.34s cubic-bezier(0.22,1,0.36,1);
  overflow: hidden;
}
.m-token-panel.open { transform: translateY(0); }

/* Header */
.m-token-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 11px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.m-token-hdr-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(220,235,250,0.9);
  flex: 1;
}
.m-token-summary {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-ts-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 3px;
}
.m-ts-total {
  color: rgba(155,170,192,0.5);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.m-ts-bull {
  color: rgba(0,210,130,0.9);
  background: rgba(0,210,130,0.08);
  border: 1px solid rgba(0,210,130,0.18);
}
.m-ts-bear {
  color: rgba(210,55,75,0.9);
  background: rgba(210,55,75,0.08);
  border: 1px solid rgba(210,55,75,0.18);
}
.m-token-close {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: background 0.12s;
}
.m-token-close:active { background: rgba(255,255,255,0.06); }

/* Controls row: filter tabs + search */
.m-token-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}
.m-token-filters {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.m-tf-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 9px;
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(155,170,192,0.45);
  cursor: pointer;
  transition: all 0.14s;
}
.m-tf-btn.m-tf-on {
  background: rgba(59,130,246,0.09);
  border-color: rgba(59,130,246,0.28);
  color: rgba(59,130,246,0.9);
}
.m-token-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 4px;
  padding: 5px 9px;
}
.m-token-search-wrap:focus-within {
  border-color: rgba(59,130,246,0.22);
  background: rgba(59,130,246,0.03);
}
.m-token-search {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: rgba(200,215,230,0.85);
  caret-color: rgba(59,130,246,0.9);
}
.m-token-search::placeholder { color: rgba(155,170,192,0.2); }
.m-token-search-clear {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  opacity: 0.7;
}

/* Sort bar */
.m-token-sort-bar {
  display: grid;
  grid-template-columns: 1fr 76px 82px 68px;
  align-items: center;
  padding: 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.m-tsb-asset {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.14em;
  color: rgba(155,170,192,0.28);
  user-select: none;
}
.m-tsb-col {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.12em;
  color: rgba(155,170,192,0.28);
  text-align: right;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  transition: color 0.12s;
}
.m-tsb-col:active { color: rgba(59,130,246,0.7); }
.m-tsb-active { color: rgba(59,130,246,0.65) !important; }
.m-tsb-arrow {
  font-size: 8px;
  line-height: 1;
}

/* Coin list scroll container */
.m-token-list {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 32px;
}

/* Loading state */
.m-token-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 48px 0;
}
.m-token-loading-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(59,130,246,0.4);
  animation: mTkDotPulse 1.2s ease-in-out infinite;
}
.m-token-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.m-token-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes mTkDotPulse {
  0%,80%,100% { opacity: 0.2; transform: scale(0.8); }
  40%         { opacity: 1;   transform: scale(1);   }
}

/* Coin row */
.m-token-row {
  display: grid;
  grid-template-columns: 1fr 76px 82px 68px;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.035);
  cursor: pointer;
  transition: background 0.1s;
  position: relative;
}
.m-token-row:active { background: rgba(59,130,246,0.04); }
/* Left accent bar on hover */
.m-token-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  opacity: 0;
  transition: opacity 0.12s;
}
.m-token-row.pos::before { background: rgba(0,210,130,0.6); }
.m-token-row.neg::before { background: rgba(210,55,75,0.6); }
.m-token-row:active::before { opacity: 1; }

/* Asset cell */
.m-tr-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.m-tr-name-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m-tr-wl-badge {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: none; background: rgba(0,245,255,.9); color: #04060c;
  font-family: var(--mono); font-size: 10px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-tr-wl-badge.added { background: rgba(155,170,192,.3); color: #04060c; }
.m-tr-wl-badge.added:active { background: var(--red); color: #fff; }
.m-tr-sym {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(215,228,242,0.92);
  line-height: 1;
}
.m-tr-pair {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: 0.08em;
  color: rgba(155,170,192,0.28);
  line-height: 1;
}

/* % change pill */
.m-tr-chg {
  display: flex;
  justify-content: flex-end;
}
.m-tr-chg-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.m-tr-chg-pill.pos {
  background: rgba(0,210,130,0.12);
  color: rgba(0,220,138,0.95);
  border: 1px solid rgba(0,210,130,0.18);
}
.m-tr-chg-pill.neg {
  background: rgba(210,55,75,0.1);
  color: rgba(220,65,80,0.95);
  border: 1px solid rgba(210,55,75,0.18);
}

/* Price + vol cells */
.m-tr-price {
  font-family: var(--mono);
  font-size: 8.5px;
  color: rgba(185,200,218,0.7);
  text-align: right;
  letter-spacing: 0.01em;
}
.m-tr-vol {
  font-family: var(--mono);
  font-size: 8px;
  color: rgba(155,170,192,0.35);
  text-align: right;
  letter-spacing: 0.01em;
}

/* Empty state */
.m-token-empty {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: rgba(155,170,192,0.25);
  text-align: center;
  padding: 48px 0;
}

/* Account icon — admin state: brighter amber figure + filled head */
#mAccountBtn.m-acct-admin .m-acct-figure {
  stroke: rgba(255,160,0,1) !important;
  filter: drop-shadow(0 0 3px rgba(255,160,0,0.55));
}
#mAccountBtn.m-acct-admin circle.m-acct-figure {
  fill: rgba(255,160,0,0.28) !important;
}
#mAccountBtn.m-acct-admin .m-acct-dot {
  fill: rgba(255,160,0,1) !important;
}

/* Hex button — active state */
#aeonHealthBtn{transition:opacity .15s;}
#aeonHealthBtn:hover{opacity:.8;}
#aeonHealthBtn.active polygon:first-child{
  stroke:rgba(59,130,246,.7);
  filter:drop-shadow(0 0 4px rgba(59,130,246,.3));
}
#aeonHealthBtn.active polygon:nth-child(2){
  fill:rgba(59,130,246,.10);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — AEON Signal Engine
   Breakpoints: 768px (tablet/landscape), 480px (phone portrait)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Global ── */
  .app { padding: 10px 12px; }
  body { overflow-x: hidden; }

  /* ── Topbar ── */
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  .brand-name { font-size: 18px; }
  .ctrl-row { flex-wrap: wrap; gap: 6px; width: 100%; }
  /* Controls: asset + timeframe + mode pills scroll horizontally */
  .ctrl-row > .seg { flex-shrink: 0; }

  /* Top-right controls (search, logout, theme) — keep inline */
  .topbar > div:last-child { align-self: flex-end; margin-top: -32px; }

  /* ── Proxy status strip ── */
  .status-strip {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 9px;
    padding: 6px 10px;
  }
  #proxyStatus, #proxySignals { font-size: 9px; }

  /* ── Price + Session hero row ── */
  .price-session-row {
    flex-direction: column !important;
    padding: 14px !important;
    gap: 12px;
  }
  .price-left { min-width: unset !important; }
  .price-session-right { overflow-x: auto; }

  /* ── Hero cells (4 stats below price) ── */
  .hero-cells { grid-template-columns: 1fr 1fr !important; }
  .hc { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.05); }
  .hc:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.05) !important; }

  /* ── Session intelligence grid ── */
  .sess-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Macro intelligence (5-col → 2-col) ── */
  .macro-grid { grid-template-columns: 1fr 1fr !important; }
  .macro-grid > *:last-child { grid-column: 1 / -1; }

  /* ── Swing mode: all inline grid rows stack ── */
  #swingMode > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  #swingMode > div[style*="display:grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Two-column layout (col-main + col-side) ── */
  .two-col { flex-direction: column; }
  .col-side { min-width: unset; }

  /* ── HTF panel ── */
  .htf-grid { grid-template-columns: 1fr 1fr !important; }
  .htf-cell { grid-column: 1 / -1; }

  /* ── Signal matrix (6-col → 2-col) ── */
  .sig-matrix { grid-template-columns: repeat(2, 1fr) !important; }

  /* ── Money flow ── */
  .mf-body { padding: 14px 12px; }

  /* ── Liquidation card ── */
  .liq-card { padding: 14px; }

  /* ── Watchlist ── */
  .wl-price { min-width: 60px; }
  .wl-chg   { min-width: 48px; }
  .wl-vs    { min-width: 40px; font-size: 8px; }

  /* ── ETF card ── */
  .etf-card { flex-direction: column; gap: 10px; }

  /* ── RR Scanner / Calculator ── */
  .rr-setup-levels { grid-template-columns: 1fr 1fr !important; }
  .calc-main { grid-template-columns: 1fr !important; }
  .calc-inputs-panel { border-right: none; border-bottom: 1px solid var(--sw-border); }

  /* ── Section panels — reduce padding ── */
  .panel { padding: 14px; }
  .sec { padding: 14px 14px 10px; }

  /* ── Buttons — minimum touch target 44px ── */
  .sb, .btn, button.trade-mode-btn,
  button[onclick], .seg .sb {
    min-height: 36px;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* ── OI / Funding chart ── */
  #oiFundChart { height: 220px !important; }

  /* ── Login gate ── */
  #aeonLoginGate .login-box {
    width: 92vw !important;
    max-width: 400px;
    padding: 24px 20px !important;
  }
  #aeonLoginGate input {
    font-size: 16px !important; /* prevent iOS zoom on focus */
    padding: 10px 12px !important;
  }

  /* ── Scalp mode: stack sidebar below chart ── */
  #scalpBody {
    flex-direction: column !important;
  }
  #scalpSidebar {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ── Trade bar — scroll horizontally ── */
  .trade-bar {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    padding: 6px 10px;
    scrollbar-width: none;
  }
  .trade-bar::-webkit-scrollbar { display: none; }

  /* ── Scalp price strip — scroll ── */
  #scalpPriceStrip {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  #scalpPriceStrip::-webkit-scrollbar { display: none; }

  /* ── Multi-exchange panel ── */
  .mx-grid { grid-template-columns: 1fr 1fr !important; }
  .mx-panel { padding: 14px; }

  /* ── Health panel ── */
  .hp-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── Floating panels (AEON Monitor etc.) ── */
  #aeonMonitorPanel {
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: none !important;
    bottom: 8px !important;
  }

  /* ── API keys modal ── */
  #apiKeysModal .modal-inner,
  .api-modal-inner {
    width: 96vw !important;
    max-height: 85vh;
    overflow-y: auto;
  }
}

/* ── Phone portrait (≤480px) ── */
@media (max-width: 480px) {

  .app { padding: 8px; }

  .brand-name { font-size: 15px; letter-spacing: .12em; }
  .brand-sub { display: none; } /* hide tagline */

  /* Topbar: logo row + controls row separate */
  .topbar > div:last-child { margin-top: 0; align-self: flex-start; }

  /* Collapse seg controls text on tiny screens */
  #modeSwing::after { content: 'SWING'; }
  #modeScalp::after { content: 'SCALP'; }

  /* Macro: single column */
  .macro-grid { grid-template-columns: 1fr !important; }

  /* Hero cells: 2 col */
  .hero-cells { grid-template-columns: 1fr 1fr !important; }

  /* Session grid: 1 col */
  .sess-grid { grid-template-columns: 1fr 1fr !important; }

  /* Price large number */
  .hero-price { font-size: 28px !important; }

  /* Signal: slightly smaller */
  .hero-sig { font-size: 20px !important; }

  /* Sig matrix: 1 col */
  .sig-matrix { grid-template-columns: 1fr !important; }

  /* Watchlist: hide VS BTC column on tiny screens */
  .wl-vs { display: none; }
  .wl-row { grid-template-columns: 1fr auto auto !important; }

  /* OI chart shorter */
  #oiFundChart { height: 180px !important; }

  /* Trade bar buttons smaller */
  .trade-mode-btn { padding: 5px 8px; font-size: 9px; }

  /* Reduce all panel padding */
  .panel, .sec, .mf-body, .liq-card, .mx-panel { padding: 10px !important; }

  /* Section headers smaller */
  .sec-title, .panel-title { font-size: 9px !important; letter-spacing: .1em !important; }
}

/* ── Safe area insets (iPhone notch / home bar) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    padding-left:   max(12px, env(safe-area-inset-left));
    padding-right:  max(12px, env(safe-area-inset-right));
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TRADE ACCORDION — mobile collapsible trade controls
   ═══════════════════════════════════════════════════════════════════════════ */

/* Toggle header — hidden on desktop */
#tradeAccordionHdr {
  display: none;
}

/* Body — always visible on desktop */
#tradeAccordionBody {
  display: block;
}

@media (max-width: 768px) {

  /* Show the toggle header on mobile */
  #tradeAccordionHdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 160, 0, .06);
    border: 1px solid rgba(255, 160, 0, .18);
    border-radius: 4px;
    margin-bottom: 2px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s;
  }
  #tradeAccordionHdr:active {
    background: rgba(255, 160, 0, .12);
  }

  /* Accordion body — collapsed by default on mobile */
  #tradeAccordionBody {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
  }
  #tradeAccordionBody > * {
    min-height: 0;
    overflow: hidden;
  }

  /* Open state */
  #tradeAccordion.open #tradeAccordionBody {
    grid-template-rows: 1fr;
  }
  #tradeAccordion.open #tradeAccordionChevron {
    transform: rotate(180deg);
  }

  /* Stack bars vertically when open */
  #tradeAccordionBody {
    flex-direction: column;
  }
  .trade-bar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 0;
  }
  #tradeBar    { border-bottom: 1px solid var(--border); }
  #calibBar    { border-top: none; }

  /* Sliders full width on mobile */
  .trade-slider-wrap {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .trade-slider { flex: 1; }

  /* Trade secret input full width */
  .trade-secret-inp {
    flex: 1 1 100% !important;
    width: 100% !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }

  /* Balance display */
  #tradeBalDisplay {
    margin-left: 0 !important;
    flex: 1 1 auto;
  }

  /* Calib bar wraps into logical groups */
  #calibBar > * { flex-shrink: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   DEDICATED MOBILE VIEW — shown ≤768px, desktop view hidden
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hidden on desktop */
#mobileView { display: none; }

@media (max-width: 768px) {

  /* Hide desktop layout entirely */
  .app { display: none !important; }

  /* Show mobile view */
  #mobileView {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg);
    font-family: var(--font);
    padding-bottom: calc(60px + env(safe-area-inset-bottom));
  }

  /* ── Sticky mini-header ── */
  #mMiniBar {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(4,6,12,.96);
    border-bottom: 1px solid #11192345;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  /* ── Wallet dropdown fix — escape the header's stacking-context trap
     while cockpit is open ──
     .wallet-dd is position:fixed with z-index:10005, which looks like it
     should beat anything — but it's nested inside .wallet-hdr
     (position:relative + z-index:300), itself nested inside #mMiniBar
     (position:sticky + z-index:200 above). Both ancestors create their
     own stacking context, so .wallet-dd's huge z-index only ever competes
     *inside* .wallet-hdr's local context; the whole header subtree is
     capped at #mMiniBar's rank (200) in the page's root stacking order —
     below #mCockpitOverlay (400), so the dropdown rendered behind cockpit
     no matter its own z-index.
     Scoped to cockpit only, and explicitly excluded when the chart
     overlay is also open, since #mChartOverlay legitimately needs to
     cover this header (it has its own top bar) — 405 sits safely between
     cockpit (400) and the chart overlay (410) as extra insurance even if
     both happened to be open at once. */
  body:has(#mCockpitOverlay.open):not(:has(#mChartOverlay.open)) #mMiniBar {
    z-index: 405;
  }
  .m-brand {
    font-family: var(--hdr);
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .18em;
    color: var(--cyan);
    text-shadow: 0 0 18px var(--c-glow);
  }
  .m-tag {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text3);
    background: var(--surface);
    border: 1px solid var(--border2);
    padding: 2px 7px;
    border-radius: 2px;
    letter-spacing: .1em;
  }
  .m-live-price {
    font-family: var(--hdr);
    font-size: 16px;
    font-weight: 900;
    color: #fff;
    letter-spacing: -.01em;
  }
  .m-sig-badge {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 2px;
    letter-spacing: .1em;
  }
  .m-sig-badge.buy   { background:rgba(0,255,136,.15); color:var(--green); border:1px solid rgba(0,255,136,.3); }
  .m-sig-badge.sell  { background:rgba(255,45,85,.15);  color:var(--red);   border:1px solid rgba(255,45,85,.3); }
  .m-sig-badge.hold  { background:rgba(59,130,246,.08);  color:var(--cyan);  border:1px solid rgba(59,130,246,.2); }

  /* ── Scrollable content ── */
  #mContent {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* ── Card ── */
  .mc {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top-color: var(--border2);
    border-radius: 6px;
    padding: 12px 14px;
    overflow: hidden;
  }
  .mc-hdr {
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .14em;
    color: var(--text3);
    margin-bottom: 10px;
  }

  /* ── Pills ── */
  .m-pill {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 2px;
    letter-spacing: .06em;
  }
  .m-pill.up      { background:rgba(0,255,136,.12); color:var(--green); }
  .m-pill.down    { background:rgba(255,45,85,.12);  color:var(--red); }
  .m-pill.neutral { background:rgba(59,130,246,.06);  color:var(--text2); }

  /* ── Signal large ── */
  .m-sig-lg {
    font-family: var(--hdr);
    font-size: 32px;
    font-weight: 900;
    letter-spacing: .04em;
  }
  .m-sig-lg.buy  { color: var(--green); text-shadow: none; }
  .m-sig-lg.sell { color: var(--red);   text-shadow: none; }
  .m-sig-lg.hold { color: var(--cyan);  text-shadow: none; }

  /* ── Data cells ── */
  .m-cell {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
  }
  .m-cell-l {
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .1em;
    color: var(--text3);
    margin-bottom: 3px;
  }
  .m-cell-v {
    font-family: var(--hdr);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ── Session cards inside #mSessions ── */
  .m-sess-card {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
  }
  .m-sess-name {
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .1em;
    color: var(--text3);
    margin-bottom: 4px;
  }
  .m-sess-chg {
    font-family: var(--hdr);
    font-size: 16px;
    font-weight: 900;
  }
  .m-sess-bias {
    font-family: var(--mono);
    font-size: 7px;
    color: var(--text3);
    margin-top: 2px;
  }

  /* ── Multi-exchange cells ── */
  .m-exc-card {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
  }
  .m-exc-name { font-family:var(--mono); font-size:8px; color:var(--text3); margin-bottom:4px; }
  .m-exc-price { font-family:var(--hdr); font-size:12px; font-weight:700; color:#fff; }
  .m-exc-fr { font-family:var(--mono); font-size:8px; margin-top:2px; }

  /* ── Macro cells ── */
  .m-macro-cell {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
  }
  .m-macro-l { font-family:var(--mono); font-size:7px; letter-spacing:.1em; color:var(--text3); margin-bottom:3px; }
  .m-macro-v { font-family:var(--hdr); font-size:14px; font-weight:700; color:#fff; }
  .m-macro-s { font-family:var(--mono); font-size:8px; color:var(--text3); margin-top:2px; }

  /* ── Watchlist rows ── */
  #mWatchlist .wl-row {
    padding: 8px 14px;
    min-height: 38px;
  }

  /* ── Liq events ── */
  .m-liq-ev {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9px;
    padding: 5px 8px;
    background: rgba(255,255,255,.02);
    border-radius: 3px;
    border-left: 2px solid;
  }
  .m-liq-ev.long  { border-color: var(--red); }
  .m-liq-ev.short { border-color: var(--green); }

  /* ── OI wrap — full-width chart ── */
  #mOiWrap { padding: 0 10px 12px; }
  #mOiWrap canvas { border-radius: 4px; }

  /* ── Trade accordion ── */
  #mTradeHdr { border-bottom: 1px solid var(--border); }
  #mTradeBody.open { max-height: 600px !important; }
  #mTradeCard.open #mTradeChevron { transform: rotate(180deg); }
  #mTradeBody .trade-bar {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  #mTradeBody .trade-slider-wrap { flex: 1 1 100%; }
  #mTradeBody .trade-slider { flex: 1; }
  #mTradeBody .trade-secret-inp { flex: 1 1 100% !important; font-size:16px !important; }

  /* ── OI chart inside mobile ── */
  #oiFundChartWrap { height: 200px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE FEATURE ADDITIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header buttons ── */
.m-btn-tap, .m-hdr-btn {
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--mono);
}
.m-hdr-btn {
  font-size: 16px;
  padding: 4px 6px;
  color: var(--text2);
  border-radius: 4px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-hdr-btn:active { background: rgba(255,255,255,.08); }
/* app.js's _updateTopbarUser() actively sets #mAccountBtn's inline
   display to 'flex' on every load/user-sync — an inline display:none
   alone gets overridden by that, so enforce hidden via !important. */
.m-hdr-btn-removed { display: none !important; }
.m-mode-btn {
  font-size: 8px !important;
  letter-spacing: .12em;
  padding: 4px 8px !important;
  border: 1px solid var(--border2) !important;
  color: var(--cyan) !important;
  border-radius: 2px;
}
.m-mode-btn.noob {
  color: var(--amber) !important;
  border-color: rgba(255,160,0,.3) !important;
}

/* ═══════════════════════════════════════════════════════════════
   HEADER — hamburger / brand
═══════════════════════════════════════════════════════════════ */
.m-menu-btn { color: var(--text2); }
.m-menu-btn:active { background: rgba(255,255,255,.08); }

/* Mobile-only override — the real .wallet-hdr-btn is moved (not copied)
   into #mWalletHdrSlot by _mMoveWalletHdr(), so this stays scoped to that
   slot and doesn't affect the desktop button. Narrow header width: hide
   the balance text, keep the token icon + chevron only. */
#mWalletHdrSlot .wallet-hdr-btn { background: rgb(255 255 255 / 0%); border-radius: 6px; }
#mWalletHdrSlot #walletHdrTotal { display: none; }
#mWalletHdrSlot .wallet-hdr-seg-bal { padding-left: 6px; }
#mWalletHdrSlot .wallet-hdr-seg-icon { padding: 5px 3px; background: rgb(255 255 255 / 0%); }

/* ═══════════════════════════════════════════════════════════════
   SLIDE-OUT DRAWER NAV — mirrors desktop aeon-nav-rail
═══════════════════════════════════════════════════════════════ */
:root {
  --aeon-violet: #8B5CF6;
  --aeon-glow: rgba(124,58,237,.25);
  --aeon-gradient: linear-gradient(135deg,#6D28D9,#8B5CF6,#2563EB);
}

#mDrawerScrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 599;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease;
  display: none;
}
#mDrawerScrim.open { display: block; opacity: 1; pointer-events: auto; }

#mDrawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 50%; max-width: 300px;
  background: rgba(4,6,12,.96);
  border-right: 1px solid #18212d30;
  z-index: 600;
  display: flex; flex-direction: column;
  transform: translateX(-104%);
  transition: transform .26s cubic-bezier(.32,.72,0,1);
  box-shadow: 24px 0 48px rgba(0,0,0,.5);
}
#mDrawer.open { transform: translateX(0); }

.m-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 14px 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.m-drawer-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 8px 8px 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.07) transparent;
}
.m-drawer-body::-webkit-scrollbar { width: 2px; }
.m-drawer-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.07); border-radius: 2px; }

.m-drawer-group {
  background: rgba(255,255,255,.018);
  border-radius: 8px;
  margin: 0 0 8px;
  padding: 4px 0 5px;
}
.m-drawer-label {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: .18em;
  color: rgba(148,163,184,.65);
  padding: 8px 12px 6px;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.m-drawer-label::before {
  content: '';
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(59,130,246,.4);
  flex-shrink: 0;
}
.m-drawer-full-link {
  font-size: 9px;
  color: rgba(59,130,246,.55);
  letter-spacing: .06em;
  cursor: pointer;
}

.m-drawer-btn {
  width: 100%;
  min-height: 42px;
  display: flex; align-items: center;
  gap: 11px;
  padding: 0 14px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text2);
  border: none;
  background: transparent;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.m-drawer-btn:active { background: rgba(255,255,255,.06); }
.m-drawer-btn.active {
  color: var(--aeon-violet);
  background: linear-gradient(135deg, rgba(109,40,217,.16), rgba(37,99,235,.08));
  font-weight: 600;
}
.m-drawer-btn.active::before {
  content: '';
  position: absolute; left: 0; top: 18%;
  height: 64%; width: 3px;
  background: var(--aeon-gradient);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px var(--aeon-glow);
}
.m-drawer-icon {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: .8;
}

/* Theme toggle icon — shows the icon for the mode you'll SWITCH TO (sun
   while in dark mode, moon while in light mode), not the current mode.
   Both SVGs are always in the DOM; only one is ever displayed, purely by
   CSS off html[data-theme] (set by theme-toggle.js / the inline
   bootstrap script in <head>) — no dependency on how that script mutates
   the button's own markup, so it can't get out of sync with it. */
.m-theme-icon { position: relative; }
.m-theme-icon-sun, .m-theme-icon-moon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.m-theme-icon-moon { display: none; }
html[data-theme="light"] .m-theme-icon-sun { display: none; }
html[data-theme="light"] .m-theme-icon-moon { display: block; }

#mDrawerMarkets { display: flex; flex-direction: column; padding: 0 6px; }
.m-drawer-token {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  align-items: center;
  gap: 0 9px;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
.m-drawer-token:last-child { border-bottom: none; }
.m-drawer-token:active { background: rgba(255,255,255,.05); }
.m-drawer-token.active {
  background: linear-gradient(135deg, rgba(109,40,217,.14), rgba(37,99,235,.07));
}
.m-drawer-token-icon { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.m-drawer-token-icon svg { width: 26px; height: 26px; display: block; }
.m-drawer-token-info { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.m-drawer-token-sym { font-size: 13px; font-weight: 700; color: var(--text); }
.m-drawer-token.active .m-drawer-token-sym { color: var(--aeon-violet); }
.m-drawer-token-pair { font-family: var(--mono); font-size: 8.5px; color: var(--text3); }
.m-drawer-token-side { text-align: right; }
.m-drawer-token-price { font-family: var(--mono); font-size: 10px; color: var(--text2); line-height: 1.3; }
.m-drawer-token-chg {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: var(--text2); padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,.04); display: inline-block;
}
.m-drawer-token-chg.up { color: var(--green); background: rgba(16,185,129,.1); }
.m-drawer-token-chg.dn { color: var(--red); background: rgba(244,63,94,.1); }

#mDrawerWatchlist {
  display: flex; flex-direction: column;
  padding: 0 6px; max-height: 180px; overflow-y: auto;
}
.m-drawer-wl-empty {
  font-family: var(--mono); font-size: 9px;
  color: var(--text3); padding: 8px 6px; letter-spacing: .06em;
}

/* ── Watchlist row mirror (.anr-wl-*) — fix for the MOBILE drawer
   mirror only (#mDrawerWatchlist copies this markup verbatim from the
   desktop rail via innerHTML). Desktop's own #anrWatchlist styling is
   untouched — these rules are scoped to the drawer container. ── */
#mDrawerWatchlist .anr-wl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--border);
  -webkit-tap-highlight-color: transparent;
}
#mDrawerWatchlist .anr-wl-row:last-child { border-bottom: none; }
#mDrawerWatchlist .anr-wl-icon { width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
#mDrawerWatchlist .anr-wl-icon svg { width: 100%; height: 100%; display: block; }
#mDrawerWatchlist .anr-wl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#mDrawerWatchlist .anr-wl-sym { font-size: 12px; font-weight: 700; color: var(--text); }
#mDrawerWatchlist .anr-wl-price { font-family: var(--mono); font-size: 10px; color: var(--text2); line-height: 1.3; }
#mDrawerWatchlist .anr-wl-chg {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: var(--text2); padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,.04); flex-shrink: 0;
}
#mDrawerWatchlist .anr-wl-chg.up { color: var(--green); background: rgba(16,185,129,.1); }
#mDrawerWatchlist .anr-wl-chg.dn { color: var(--red); background: rgba(244,63,94,.1); }
#mDrawerWatchlist .anr-wl-empty {
  font-family: var(--mono); font-size: 9px;
  color: var(--text3); padding: 8px 6px; letter-spacing: .06em;
}

/* ── Desktop sidebar watchlist (#anrWatchlist) — base row styling.
   #mDrawerWatchlist clones this same markup, so keep both blocks in sync. ── */
#anrWatchlist .anr-wl-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
}
#anrWatchlist .anr-wl-row:last-child { border-bottom: none; }
#anrWatchlist .anr-wl-icon { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
#anrWatchlist .anr-wl-icon svg { width: 100%; height: 100%; display: block; }
#anrWatchlist .anr-wl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#anrWatchlist .anr-wl-sym { font-size: 11px; font-weight: 700; color: var(--text); }
#anrWatchlist .anr-wl-price { font-family: var(--mono); font-size: 9.5px; color: var(--text2); line-height: 1.3; }
#anrWatchlist .anr-wl-chg {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: var(--text2); padding: 1px 5px; border-radius: 4px;
  background: rgba(255,255,255,.04); flex-shrink: 0;
}
#anrWatchlist .anr-wl-chg.up { color: var(--green); background: rgba(16,185,129,.1); }
#anrWatchlist .anr-wl-chg.dn { color: var(--red); background: rgba(244,63,94,.1); }
#anrWatchlist .anr-wl-empty {
  font-family: var(--mono); font-size: 9px;
  color: var(--text3); padding: 8px 10px; letter-spacing: .06em;
}
/* Remove ("−") button — hidden until hover on desktop (mouse-driven),
   always visible in the mobile drawer mirror since touch has no hover. */
.anr-wl-remove {
  width: 15px; height: 15px; border-radius: 10%; flex-shrink: 0;
  border: none; background: rgb(255 45 85 / 8%);
  color: #bdc0c9; font-family: var(--mono); font-size: 11px;
  font-weight: 800; line-height: 1; display: flex; align-items: center;
  justify-content: center; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.anr-wl-remove:hover, .anr-wl-remove:active { background: rgba(255,45,85,.25); color: #fff; }
#anrWatchlist .anr-wl-row .anr-wl-remove { opacity: 0; transition: opacity .12s; }
#anrWatchlist .anr-wl-row:hover .anr-wl-remove { opacity: 1; }
#mDrawerWatchlist .anr-wl-row .anr-wl-remove { opacity: 1; } /* always visible on touch */

.m-drawer-user {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.m-drawer-user:active { background: rgba(255,255,255,.04); }
.m-drawer-user-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(109,40,217,.16), rgba(37,99,235,.08));
  border: 1px solid rgba(59,130,246,.22);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Orbitron', var(--font); font-size: 10px; font-weight: 700;
  color: var(--cyan); flex-shrink: 0;
  overflow: hidden;
}
.m-drawer-user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-drawer-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.m-drawer-user-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-drawer-user-role { font-family: var(--mono); font-size: 7.5px; letter-spacing: .12em; color: rgba(59,130,246,.5); }
.m-drawer-user-chevron { color: rgba(255,255,255,.2); flex-shrink: 0; display: flex; align-items: center; }

/* Upgrade button injected into #mDrawerUser by _updateTopbarUser() (app.js)
   — reuses the real .aeon-nav-upgrade-btn styling/AEON_BILLING.open(), but
   that class is block/full-width by default (meant for a stacked desktop
   chip), so override it to sit compactly in this row layout instead. */
.m-drawer-upgrade-btn {
  width: auto !important; margin-top: 0 !important; flex-shrink: 0;
  padding: 6px 10px !important; font-size: 9px !important;
}

/* ═══════════════════════════════════════════════════════════════
   BOTTOM TAB BAR — Home / Markets / Signals / Insights / Profile
   Now anchored to the true viewport bottom; the MM-tray (collapsed
   handle or fully open) sits directly ABOVE this strip instead of
   below it — see ".proxy-tray" mobile rules further down.
═══════════════════════════════════════════════════════════════ */
/* ── Creator Space background-playback indicator — sits flush above
   #mBottomNav (bottom: 54px matches the tray's own nav-height baseline,
   see .proxy-tray.pt-open), always full-width, above everything except
   the nav itself. Hidden by default; shown only while something's
   playing in the background (see _mCsShowBgIndicator in app.js). */
#mCsBgBar {
  display: none;
  position: fixed;
  left: 0; right: 0;
  bottom: 54px;
  z-index: 588; /* under #mBottomNav (590), over page content */
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: rgba(10,14,22,.97);
  border-top: 1px solid rgba(139,92,246,.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mCsBgBar svg:first-child { flex-shrink: 0; color: var(--aeon-violet, #8b5cf6); }
.m-cs-bg-bar-info { flex: 1; min-width: 0; }
.m-cs-bg-bar-label {
  color: var(--aeon-violet, #8b5cf6);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}
.m-cs-bg-bar-name {
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}
.m-cs-bg-bar-stop {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 50%;
  color: var(--text2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-cs-bg-bar-stop:active { background: rgba(255,255,255,.08); }
/* Keep clear of the FAB and tray while a background track is showing. */
body.m-cs-bg-active .m-shop-fab { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }

/* ── Mobile Manual Trade Bar — sits flush above #mBottomNav, same
   placement pattern/z-index band as #mCsBgBar just above (bottom: 54px
   matches the nav-height baseline; z-index 589 sits directly under the
   nav's 590). Collapsible: CLOSED by default (no class needed — the
   collapsed state is the CSS default), showing only the header row and
   the Buy/Sell action row. Adding .mmt-open (toggled by
   _mToggleManualTrade() in app.js) reveals the entry form in between.
   Field IDs/logic are shared with the desktop AEON Monitor panel via
   the 'mMt' id-prefix argument on afpFireTrade/afpSetOrderType/
   afpFillFromEngine/afpUpdateRRPreview (app.js) — see that panel's own
   #afpPaneTrade/.afp-* rules for the desktop equivalent of these. */
#mManualTradeBar {
  display: none; /* hidden everywhere except cockpit — see #mCockpitOverlay.open ~ rule below */
  position: fixed;
  left: 0; right: 0;
  bottom: 54px;
  z-index: 589;
  background: rgba(10,12,18,.97);
  border-top: 1px solid rgba(59,130,246,.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--mono);
}
/* Only ever shown while the mobile Cockpit overlay (#mCockpitOverlay) is
   open — mirrors _mToggleCockpit()'s 'open' class in app.js. Both divs are
   siblings under the same parent, so the general sibling combinator works. */
#mCockpitOverlay.open ~ #mManualTradeBar {
  display: block;
}
#mMtHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#mMtHeaderTitle {
  font-size: 10px;
  letter-spacing: .13em;
  color: var(--aeon-violet);
  text-transform: uppercase;
}
#mMtHeaderTab {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: .09em;
  color: var(--cyan, #3B82F6);
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 2px solid var(--cyan, #3B82F6);
}
#mMtChevron {
  flex-shrink: 0;
  color: var(--text3, #555);
  transition: transform .25s ease;
}
#mManualTradeBar.mmt-open #mMtChevron { transform: rotate(180deg); }

/* Collapsed by default — max-height:0 hides the form without unmounting
   it, so field values/JS listeners survive open/close toggles. */
#mMtBody {
  background: rgba(4,6,12,.97);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 14px;
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
}
#mManualTradeBar.mmt-open #mMtBody {
  max-height: 480px;
  opacity: 1;
  padding: 0 14px 10px;
}

.m-mt-section-lbl {
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3, #555);
}
.m-mt-fill-btn {
  font-size: 8px;
  padding: 4px 9px;
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 4px;
  color: var(--cyan, #3B82F6);
  letter-spacing: .06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-mt-fill-btn:active { background: rgba(59,130,246,.14); }

.m-mt-type-toggle {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  overflow: hidden;
}
.m-mt-type-btn {
  flex: 1;
  padding: 8px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .09em;
  border: none;
  background: var(--card-primary, linear-gradient(145deg,#0D131C 0%,#090E15 55%,#070B11 100%)) !important;
  color: var(--text3, #555);
  cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-tap-highlight-color: transparent;
}
.m-mt-type-btn + .m-mt-type-btn { border-left: 1px solid rgba(255,255,255,.1); }
.m-mt-type-btn.m-mt-type-on { background: rgba(59,130,246,.12); color: var(--aeon-violet); }

.m-mt-field { margin-bottom: 9px; }
.m-mt-field label {
  display: block;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3, #555);
  margin-bottom: 4px;
}
.m-mt-field input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 14px;
  color: var(--text, #e0e0e0);
  outline: none;
  transition: border-color .2s;
}
.m-mt-field input:focus { border-color: rgba(59,130,246,.4); }
.m-mt-field input::placeholder { color: rgba(255,255,255,.18); }
.m-mt-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.m-mt-rr-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 4px;
  font-size: 9px;
  color: var(--text3, #555);
}
.m-mt-rr-preview b { color: var(--cyan, #3B82F6); }

.m-mt-msg {
  font-size: 9px;
  color: var(--text3, #555);
  min-height: 15px;
  margin-top: 6px;
  text-align: center;
  line-height: 1.5;
}

.m-mt-btns {
  background: rgba(4,6,12,.97);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px 14px 12px;
}
#mMtBuyBtn, #mMtSellBtn {
  padding: 12px 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background .2s;
  -webkit-tap-highlight-color: transparent;
}
#mMtBuyBtn {
  background: var(--surface);
  border: 1px solid rgb(0 255 136 / 21%);
  color: var(--green, #0f8);
}
#mMtBuyBtn:active { background: rgba(0,255,136,.22); }
#mMtSellBtn {
  background: var(--surface);
  border: 1px solid rgb(255 45 85 / 21%);
  color: var(--red, #f22);
}
#mMtSellBtn:active { background: rgba(255,45,85,.22); }

#mBottomNav {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 590;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: rgba(4,6,12,.97);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: 6px;
}
/* The tab bar now stays visible even while the MM tray is open, since the
   tray no longer covers the full viewport — it stops above this strip
   and below the header (see ".proxy-tray.pt-open" below). */

.m-tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 2px 8px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text3);
  font-family: var(--font);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
}
.m-tab-btn svg { display: block; }
.m-tab-btn.active { color: var(--aeon-violet); }

/* ── Bottom-nav icons — CSS mask-image instead of SVG stroke=url(#gradient).
   The previous approach (stroke pointing at a <linearGradient> def) was
   correct in markup/CSS/computed-style terms but still failed to paint on
   real devices: #mBottomNav has backdrop-filter, which isolates it into
   its own compositing layer, and browsers can fail to resolve an SVG
   paint-server url() reference for a stroke that changes to that value
   *after* first paint (i.e. via the classList.add('active') toggle in
   _mSetActiveTab) inside a backdrop-filtered ancestor — confirmed via
   devtools: DOM/computed-style were all correct, it just never rendered.
   mask-image has no such cross-reference to resolve — the icon shape is a
   self-contained data-URI, and the color is a completely ordinary CSS
   background, so there's nothing for a compositing layer to break. */
.m-tab-icon {
  display: block;
  width: 21px; height: 21px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
.m-tab-icon--home     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-8%209%208%22/%3E%3Cpath%20d%3D%22M5%2010v10a1%201%200%200%200%201%201h4v-6h4v6h4a1%201%200%200%200%201-1V10%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2011l9-8%209%208%22/%3E%3Cpath%20d%3D%22M5%2010v10a1%201%200%200%200%201%201h4v-6h4v6h4a1%201%200%200%200%201-1V10%22/%3E%3C/svg%3E"); }
.m-tab-icon--markets   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10%22/%3E%3Cpath%20d%3D%22M10%2020V4%22/%3E%3Cpath%20d%3D%22M16%2020v-7%22/%3E%3Cpath%20d%3D%22M22%2020V13%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2020V10%22/%3E%3Cpath%20d%3D%22M10%2020V4%22/%3E%3Cpath%20d%3D%22M16%2020v-7%22/%3E%3Cpath%20d%3D%22M22%2020V13%22/%3E%3C/svg%3E"); }
.m-tab-icon--signals   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h4l2-7%204%2014%202-7h4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2012h4l2-7%204%2014%202-7h4%22/%3E%3C/svg%3E"); }
.m-tab-icon--insights  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6%22/%3E%3Cpath%20d%3D%22M10%2022h4%22/%3E%3Cpath%20d%3D%22M12%202a7%207%200%200%200-4%2012.7c.6.5%201%201.2%201%202.05V17h6v-2.25c0-.85.4-1.55%201-2.05A7%207%200%200%200%2012%202z%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2018h6%22/%3E%3Cpath%20d%3D%22M10%2022h4%22/%3E%3Cpath%20d%3D%22M12%202a7%207%200%200%200-4%2012.7c.6.5%201%201.2%201%202.05V17h6v-2.25c0-.85.4-1.55%201-2.05A7%207%200%200%200%2012%202z%22/%3E%3C/svg%3E"); }
.m-tab-icon--profile   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c0-4.4%203.6-8%208-8s8%203.6%208%208%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%228%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M4%2021c0-4.4%203.6-8%208-8s8%203.6%208%208%22/%3E%3C/svg%3E"); }

/* Active state: plain CSS background gradient, no url(#id) cross-reference
   at all — half solid white, half violet→blue. Same for every tab. */
.m-tab-btn.active .m-tab-icon {
  background: linear-gradient(90deg, #F2F4F7 0%, #F2F4F7 50%, #8B5CF6 50%, #2563EB 100%);
}
.m-tab-btn:active { opacity: .7; }

/* ═══════════════════════════════════════════════════════════════
   HOME FEED — shared card shell
═══════════════════════════════════════════════════════════════ */
#mHomeFeed { display: flex; flex-direction: column; gap: 10px; padding: 12px; }

.m-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 14px;
}
/* Stripped-down variant — same padding as .m-card but no background,
   border, or border-radius. Used by mSmartMoneyCard and mInsightsSection,
   which no longer carry the .m-card class itself; their child elements
   (.m-card-head, .m-card-title, .m-card-link, .m-card-link-row, etc.)
   are unaffected since those are styled independently of the parent's
   card/card2 class. */
.m-card2 {
  padding: 14px;
}
/* Same idea as .m-card2 (no background/border, just the padding) — a
   separate name so it's clear which cards were deliberately stripped:
   Session Intelligence, Multi-Exchange (simple grid), Money Flow, and
   8-Exchange Intelligence. Swapping .m-card → .m-card1 on an element
   only changes this visual shell; .m-pro-only (Noob/Pro mode) and any
   ID-based feature gating are untouched, since neither depends on the
   .m-card/.m-card1 class name — see _applyPanelLocks() and the
   #mobileView.noob-mode .m-pro-only rule. */
.m-card1 {
  padding: 2px;
}
.m-card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.m-card-title {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text2);
  display: flex; align-items: center; gap: 6px;
}
.m-card-tf {
  font-size: 8px;
  font-weight: 500;
  color: var(--text3);
  background: rgba(255,255,255,.04);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: .06em;
}
.m-card-link {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(59,130,246,.65);
  letter-spacing: .04em;
  cursor: pointer;
}
.m-card-link-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.m-card-link-row span {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(59,130,246,.7);
  letter-spacing: .04em;
  cursor: pointer;
}
.m-smf-empty {
  font-family: var(--mono); font-size: 9.5px;
  color: var(--text3); text-align: center; padding: 14px 0;
}

/* ── Logo-draw loader — the "Λ" mark tracing itself in a continuous loop,
   used in place of plain "Loading…" text (e.g. Advancers/Decliners while
   /api/altcoins is in flight). Path is a 6-point outline of the mark with
   pathLength="100" (see markup), so stroke-dasharray/-dashoffset can just
   use 0–100 regardless of the path's real geometric length. One draw/erase
   cycle: dash offset runs 100 → 0 (draws in) → -100 (erases from the same
   end it drew from), with a brief hold at fully-drawn and a soft glow. ── */
.m-logo-loader {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 0;
}
.m-logo-loader-svg { width: 30px; height: 30px; overflow: visible; }
.m-logo-loader-path {
  fill: none;
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px rgba(139,92,246,.5));
  animation: mLogoDraw 2s cubic-bezier(.45,0,.55,1) infinite;
}
/* Left leg plain white, right leg the violet gradient — matches the
   actual logo mark (see logo-login1.png), which is white fading to
   violet-to-black on its right stroke only. */
.m-logo-loader-path--white { stroke: #F2F4F7; }
.m-logo-loader-path--grad  { stroke: url(#mLogoLoaderGrad); }
@keyframes mLogoDraw {
  0%   { stroke-dashoffset: 100; opacity: .3; }
  40%  { stroke-dashoffset: 0;   opacity: 1; }
  65%  { stroke-dashoffset: 0;   opacity: 1; }
  100% { stroke-dashoffset: -100; opacity: .3; }
}


/* ── Coin summary card (icon + price + stats, with vertical timeframe
     switcher docked to the right) ── */
.m-coin-summary-body { display: flex; align-items: stretch; gap: 12px; }
.m-coin-summary-main { flex: 1; min-width: 0; }
.m-coin-summary-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.m-coin-summary-icon { width: 30px; height: 30px; border-radius: 10%; flex-shrink: 0; overflow: hidden; background: #7e848a2b; }
.m-coin-summary-icon img { border-radius: 10% !important; }
.m-coin-summary-pair { font-size: 14px; font-weight: 700; color: var(--text); display: flex; align-items: center; }
.m-coin-summary-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.m-coin-summary-price { font-family: var(--hdr); font-size: 24px; font-weight: 800; color: #fff; }
.m-coin-summary-chg { font-family: var(--mono); font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 4px; background: rgba(255,255,255,.04); color: var(--text2); }
.m-coin-summary-chg.up { color: var(--green); background: rgba(16,185,129,.1); }
.m-coin-summary-chg.dn { color: var(--red); background: rgba(244,63,94,.1); }
.m-coin-summary-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; padding-top: 6px; border-top: 1px solid var(--border); }
.m-cs-stat { display: flex; flex-direction: column; gap: 2px; }
.m-cs-lbl { font-family: var(--mono); font-size: 7.5px; letter-spacing: .08em; color: var(--text3); }
.m-cs-val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text); }
.m-cs-tf-info { display: none; align-items: center; gap: 8px; margin-top: 4px; font-family: var(--mono); font-size: 8.5px; white-space: nowrap; overflow: hidden; }
.m-cs-tf-badge { padding: 2px 6px; border-radius: 4px; font-weight: 700; letter-spacing: .04em; flex-shrink: 0; }
.m-cs-tf-range { color: var(--text3); overflow: hidden; text-overflow: ellipsis; }

/* Note: the vertical right-docked timeframe switcher (.m-tf-col) was
   replaced by a horizontal row using .m-tf-row-flex (see below) so the
   right-hand column of the card could be fully dedicated to the Fed video
   panel — see .m-fed-video-col further down. */

/* ── Signals card ── */
.m-sig-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.m-sig-left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.m-sig-badge-lg { font-family: var(--hdr); font-size: 20px; font-weight: 800; color: var(--amber); letter-spacing: .02em; }
.m-sig-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.m-sig-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.m-sig-ring svg { transform: rotate(-90deg); }
.m-sig-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--hdr); font-size: 15px; font-weight: 800; color: var(--text); }

/* ── Smart Money Flow card ── */
/* Watermark — same low-opacity grayscale treatment as the real desktop
   Smart Money Flow card (#bentoDashboard #smfeedbg): a real <img>, not a
   CSS background, positioned/faded to sit behind the card's content. */
#mSmartMoneyCard { position: relative; overflow: hidden; }
#mSmartMoneyCard .m-card-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 60%; height: auto; opacity: .045; pointer-events: none; user-select: none;
  filter: grayscale(1) brightness(3); object-fit: contain; z-index: 0;
}
#mSmartMoneyCard > *:not(.m-card-watermark) { position: relative; z-index: 1; }

.m-smf-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 10px; padding-bottom: 2px; scrollbar-width: none; }
.m-smf-tabs::-webkit-scrollbar { display: none; }
.m-smf-tab {
  flex-shrink: 0; padding: 5px 10px; border-radius: 5px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  color: var(--text3); font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .04em;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.m-smf-tab.on { color: var(--cyan); border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.08); }
.m-smf-row { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.m-smf-row:last-child { border-bottom: none; }
.m-smf-icon { width: 22px; height: 22px; border-radius: 10%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); font-size: 10px; overflow: hidden; }
.m-smf-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10%; }
.m-smf-body { flex: 1; min-width: 0; }
.m-smf-flow { font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-smf-flow .m-smf-entity { color: var(--text); }
.m-smf-flow .m-smf-arrow { color: var(--text3); margin: 0 4px; }
.m-smf-sub { font-family: var(--mono); font-size: 8.5px; color: var(--text3); margin-top: 2px; }
.m-smf-side { text-align: right; flex-shrink: 0; }
.m-smf-usd { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text); }
.m-smf-tag { font-family: var(--mono); font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 3px; display: inline-block; margin-top: 2px; }
.m-smf-tag.in { color: var(--green); background: rgba(16,185,129,.1); }
.m-smf-tag.out { color: var(--red); background: rgba(244,63,94,.1); }

/* ── Advancers / Decliners ── */
.m-adv-dec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-adv-title { color: rgba(16,185,129,.85); }
.m-dec-title { color: rgba(244,63,94,.85); }
.m-adv-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-adv-row:active { background: rgba(255,255,255,.03); }
.m-adv-left { display: flex; align-items: center; gap: 7px; min-width: 0; }
.m-adv-icon { width: 20px; height: 20px; border-radius: 10%; flex-shrink: 0; overflow: hidden; }
.m-adv-icon img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 10%; }
.m-adv-row:last-child { border-bottom: none; }
.m-adv-sym { font-size: 11.5px; font-weight: 700; color: var(--text); }
.m-adv-price { font-family: var(--mono); font-size: 9px; color: var(--text3); }
.m-adv-chg { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 2px 5px; border-radius: 4px; flex-shrink: 0; }
.m-adv-chg.up { color: var(--green); background: rgba(16,185,129,.1); }
.m-adv-chg.dn { color: var(--red); background: rgba(244,63,94,.1); }

/* ── Net Flow (ETF) card — compact overrides for the mirrored
     .aeon-etf-* markup. Desktop's own rules use !important everywhere
     (fixed 160px/90px columns, 26px numbers, y/x-axis labels) — these
     overrides need !important too so the higher-specificity ID-scoped
     selector actually wins instead of being silently ignored. ── */
#mNetFlowBody .aeon-etf-wrap {
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  gap: 6px !important;
}
#mNetFlowBody .aeon-etf-btc,
#mNetFlowBody .aeon-etf-eth {
  width: auto !important;
  flex: 0 0 auto !important;
  padding: 0 !important;
  border-right: none !important;
  justify-content: flex-start !important;
  gap: 6px !important;
}
#mNetFlowBody .aeon-etf-lbl,
#mNetFlowBody .aeon-etf-hist-lbl,
#mNetFlowBody .aeon-etf-aum,
#mNetFlowBody .aeon-etf-yaxis,
#mNetFlowBody .aeon-etf-xaxis {
  display: none !important; /* keep the card minimal, matching the reference design */
}
#mNetFlowBody .aeon-etf-num {
  font-family: var(--hdr) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  margin-bottom: 0 !important;
  letter-spacing: 0 !important;
}
#mNetFlowBody .aeon-etf-row { gap: 0 !important; }
#mNetFlowBody .aeon-etf-pill {
  font-family: var(--mono) !important;
  font-size: 8px !important;
  letter-spacing: .05em !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
}
#mNetFlowBody .aeon-etf-hist {
  flex: 1 !important;
  min-width: 60px !important;
  padding: 0 4px !important;
  border-right: none !important;
  justify-content: center !important;
  display: flex !important;
}
#mNetFlowBody .aeon-etf-chart {
  flex: 1 !important;
  min-height: 0 !important;
  gap: 0 !important;
}
#mNetFlowBody .aeon-etf-chart-body {
  position: relative !important;
  height: 46px !important;
  flex: 1 !important;
  min-width: 40px !important;
}
#mNetFlowBody .aeon-etf-bars {
  gap: 3px !important;
}
#mNetFlowBody .aeon-etf-bar-fill {
  min-height: 2px !important;
}
#mNetFlowBody .aeon-etf-gridline { display: none !important; }

/* ── Sentiment card ── */
.m-sentiment-row { display: flex; align-items: center; gap: 16px; }
.m-sent-gauge-wrap { position: relative; flex-shrink: 0; width: 92px; text-align: center; }
.m-sent-gauge-val { position: absolute; left: 0; right: 0; top: 26px; font-family: var(--hdr); font-size: 20px; font-weight: 800; color: var(--text); }
.m-sent-gauge-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--amber); margin-top: 2px; }
.m-sent-chart-wrap { flex: 1; min-width: 0; }
.m-sent-chart-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.m-sent-chart-lbl { font-family: var(--mono); font-size: 7.5px; color: var(--text3); letter-spacing: .06em; width: 100%; }
.m-sent-chart-val { font-family: var(--hdr); font-size: 18px; font-weight: 800; color: var(--text); }
.m-sent-chart-name { font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--amber); letter-spacing: .04em; }
#mSentSpark { width: 100%; height: 36px; display: block; }

/* ── Fear & Greed full report (mFgCard) ── */
.m-fg-gauge-wrap { position: relative; text-align: center; margin: 6px auto 0; width: 176px; }
.m-fg-gauge-val { position: absolute; left: 0; right: 0; top: 46px; font-family: var(--hdr); font-size: 30px; font-weight: 800; color: var(--text); }
.m-fg-gauge-lbl { position: absolute; left: 0; right: 0; top: 80px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--green); }
.m-fg-desc { font-family: var(--font); font-size: 11.5px; line-height: 1.5; color: var(--text2); text-align: center; padding: 4px 6px 0; }
.m-fg-quickrow { display: flex; gap: 8px; margin-top: 14px; }
.m-fg-quick { flex: 1; background: var(--s3); border: 1px solid var(--border); border-radius: var(--r); padding: 8px 6px; text-align: center; }
.m-fg-quick span { display: block; font-family: var(--mono); font-size: 8px; color: var(--text3); letter-spacing: .05em; margin-bottom: 4px; }
.m-fg-quick b { display: block; font-family: var(--hdr); font-size: 14px; font-weight: 800; color: var(--text); }
.m-fg-quick i { display: block; font-style: normal; font-family: var(--mono); font-size: 8px; color: var(--text3); margin-top: 1px; }
.m-fg-chart-card { margin-top: 14px; background: var(--s3); border: 1px solid var(--border); border-radius: var(--rl); padding: 10px 10px 8px; }
.m-fg-chart-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.m-fg-chart-title { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--text3); }
.m-fg-range-pills { display: flex; gap: 3px; }
.m-fg-range-pill { font-family: var(--mono); font-size: 8px; padding: 3px 6px; border-radius: 3px; color: var(--text3); }
.m-fg-range-pill.on { background: rgba(16,185,129,.14); color: var(--green); font-weight: 700; }
.m-fg-chart-body { position: relative; width: 100%; height: 90px; }
#mFgChartSvg { width: 100%; height: 100%; display: block; }
.m-fg-chart-tooltip { position: absolute; transform: translate(-50%,-100%); background: var(--s4); border: 1px solid var(--border2); border-radius: 4px; padding: 4px 7px; font-family: var(--mono); font-size: 9px; color: var(--text); white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.m-fg-chart-tooltip b { color: var(--green); }
.m-fg-chart-axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--mono); font-size: 7px; color: var(--text3); }

/* ── Insights card ── */
.m-insight-pills { display: flex; gap: 5px; }
.m-insight-pill {
  font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 10px; background: rgba(255,255,255,.04); color: var(--text3);
  display: flex; align-items: center; gap: 3px;
}
.m-insight-pill.on { color: var(--aeon-violet); background: rgba(139,92,246,.12); }
.m-ip-trump { color: rgba(59,130,246,.85); background: rgba(59,130,246,.1); }
.m-ip-elon { color: rgba(168,85,247,.85); background: rgba(168,85,247,.1); }
.m-insight-card { padding: 10px 0; border-bottom: 1px solid var(--border); display: flex; gap: 10px; }
.m-insight-card:last-child { border-bottom: none; }
.m-insight-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; background: rgba(255,255,255,.04); color: var(--text2); }
.m-insight-card.bull .m-insight-icon { color: var(--green); background: rgba(16,185,129,.1); }
.m-insight-card.bear .m-insight-icon { color: var(--red); background: rgba(244,63,94,.1); }
.m-insight-card.impact .m-insight-icon { color: var(--amber); background: rgba(245,158,11,.1); }
.m-insight-body { min-width: 0; flex: 1; }
.m-insight-label { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--text3); margin-bottom: 3px; }
.m-insight-label.bull { color: var(--green); }
.m-insight-label.bear { color: var(--red); }
.m-insight-text { font-size: 12px; font-weight: 600; color: var(--text); line-height: 1.35; }
.m-insight-foot { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.m-insight-src { font-family: var(--mono); font-size: 8.5px; color: var(--text3); }
.m-insight-link { font-family: var(--mono); font-size: 8.5px; color: rgba(59,130,246,.7); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════════════
   SIGNALS PAGE
   ═══════════════════════════════════════════════════════════════════════ */
#mSignalsPage { display: none; flex-direction: column; gap: 0; padding: 0 0 20px; }

/* Sub-tab strip — SIGNALS / PHASES / CYCLE INTEL. Sticky, same pattern as
   the Markets page's .m-mkt-tabs (measured against #mMiniBar's real
   height from JS, since it isn't a fixed pixel value across devices). */
.m-sig-tabs {
  display: flex; gap: 2px; overflow-x: auto; padding: 10px 14px 0;
  border-bottom: 1px solid var(--border); scrollbar-width: none;
  background: rgba(4,6,12,.97);
  position: sticky; z-index: 190; top: 0;
}
.m-sig-tabs::-webkit-scrollbar { display: none; }
.m-sig-tab {
  flex-shrink: 0; padding: 9px 12px; background: transparent; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text3); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.m-sig-tab.active { color: var(--aeon-violet); border-bottom-color: rgba(139,92,246,.6); background: var(--surface); }

#mSigSignalsView { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 0; }
#mSigPhasesView, #mSigCycleIntelView { padding: 12px 14px 0; }

/* ── PHASES tab (Celestial Phases Market) — mobile-native styling for a
   duplicate of desktop's #dMoonSection markup (real data/logic, reused
   via the shared _dRenderMoonPhases/_dFetchMoonStats functions in app.js;
   see #sMoonSection in app.html). desktop-shell.css's equivalent classes
   (.ct-section, .moon-current-card, .moon-phase-name, etc.) are either
   scoped to ancestors this markup doesn't have (.cycle-tray,
   #mmLayercycles, #mmLayerphases) or wrapped in @media (min-width:1024px)
   entirely, so none of that styling reaches mobile — this is a fresh,
   from-scratch mobile treatment using the same visual language as the
   rest of the mobile Signals page (.m-card / .m-cs-lbl / .m-cs-val). ── */
#sMoonSection {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 14px;
}
#sMoonSection .ct-sec-hdr {
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,220,100,.85); text-transform: uppercase;
}
#sMoonSection .ct-sec-icon { width: 13px; height: 13px; stroke: rgba(255,220,100,.75); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#sMoonSection .s-moon-body-btn {
  flex-shrink: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  padding: 6px 11px; border-radius: 5px; border: 1px solid var(--border2);
  background: rgba(255,255,255,.03); color: var(--text3); cursor: pointer;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
#sMoonSection .s-moon-body-btn.active { background: rgba(255,220,100,.1); border-color: rgba(255,220,100,.4); color: rgba(255,220,100,.9); }

#sMoonCurrentCard {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 8px;
  background: rgba(255,220,100,.05); margin-bottom: 12px; position: relative; overflow: hidden;
}
#sMoonCanvas { border-radius: 50%; box-shadow: 0 0 12px rgba(255,220,100,.15); display: block; flex-shrink: 0; }
#sMoonSection .moon-current-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#sMoonSection .moon-phase-name { font-family: var(--hdr); font-size: 16px; font-weight: 800; letter-spacing: .02em; line-height: 1.15; color: rgba(255,220,100,.95); }
#sMoonSection .moon-phase-date { font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: .04em; }
#sMoonSection .moon-signal-badge {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 4px;
  border: 1px solid transparent; font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; width: fit-content;
}
#sMoonSection .moon-next-hint { font-family: var(--mono); font-size: 9px; color: var(--text3); line-height: 1.4; }

#sMoonSection .ct-sub-label { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--text3); }

#sMoonSection .m-cell { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 6px; padding: 8px 9px; }
#sMoonSection .m-cell-l { font-family: var(--mono); font-size: 7px; color: var(--text3); letter-spacing: .07em; margin-bottom: 3px; }
#sMoonSection .m-cell-v { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); line-height: 1; }

#sMoonTimeline { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
#sMoonTimeline::-webkit-scrollbar { height: 5px; }
#sMoonTimeline::-webkit-scrollbar-track { background: rgba(255,255,255,.03); border-radius: 3px; }
#sMoonTimeline::-webkit-scrollbar-thumb { background: rgba(255,220,100,.3); border-radius: 3px; }

/* ── CYCLE INTEL tab — mobile-native styling for the 5 sections (Cycle
   Compare / Cycle Tracker / Monthly Performance / Bear Market Prediction /
   Cycle Move Predictor), reusing the real desktop data via the shared
   _dRenderCycle/_dRenderCycleTracker/_dRenderMonthly/_dRenderMovePredictor/
   _dPopulateBearCard functions (app.js now accepts a target-id prefix
   param — see #sCycleCompareSection etc. in app.html). Same situation as
   Phases: desktop-shell.css's .ct-section/.ct-card/etc are ancestor-
   scoped to containers this markup doesn't have, so this is a fresh,
   from-scratch mobile treatment scoped to #mSigCycleIntelView. ── */
#mSigCycleIntelView { display: flex; flex-direction: column; gap: 12px; }
#mSigCycleIntelView .ct-section {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 10px; padding: 14px;
}
#mSigCycleIntelView .ct-sec-hdr {
  display: flex; align-items: center; gap: 7px; margin-bottom: 12px;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: rgba(59,130,246,.85); text-transform: uppercase;
}
#mSigCycleIntelView .ct-sec-icon { width: 13px; height: 13px; stroke: rgba(59,130,246,.75); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
#mSigCycleIntelView .ct-sub-label { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--text3); }
#mSigCycleIntelView .ct-card { border: 1px solid var(--border2); }

/* Shared pill-style buttons: cycle-mode tabs, monthly tabs. */
#mSigCycleIntelView .m-cycle-btn {
  flex-shrink: 0; font-family: var(--mono); font-size: 9px; letter-spacing: .05em;
  padding: 6px 11px; border-radius: 5px; border: 1px solid var(--border2);
  background: rgba(255,255,255,.03); color: var(--text3); cursor: pointer;
  -webkit-tap-highlight-color: transparent; white-space: nowrap;
}
#mSigCycleIntelView .s-cycle-btn.active,
#mSigCycleIntelView .s-monthly-tab.active {
  background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.4); color: rgba(59,130,246,.9);
}

#mSigCycleIntelView .m-cell { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 6px; padding: 8px 9px; }
#mSigCycleIntelView .m-cell-l { font-family: var(--mono); font-size: 7px; color: var(--text3); letter-spacing: .07em; margin-bottom: 3px; }
#mSigCycleIntelView .m-cell-v { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--text); line-height: 1; }

#mSigCycleIntelView .ct-mini-stat { background: rgba(255,255,255,.02); border-radius: 5px; padding: 6px 8px; }
#mSigCycleIntelView .ct-mini-stat-l { font-family: var(--mono); font-size: 6px; color: rgba(155,170,192,.4); letter-spacing: .07em; margin-bottom: 2px; }
#mSigCycleIntelView .ct-mini-stat-v { font-family: var(--mono); font-size: 10px; font-weight: 700; }

/* Bear-asset toggle row — inactive-state look lives in the inline style
   attribute (per-asset accent color from _dBearAssetColors), so this just
   handles the shared shape/transition and gets overridden per-state by
   window._dBearSetAsset's own inline style writes. */
#mSigCycleIntelView .s-bear-asset-btn:active { opacity: .8; }

#sMonthlyChart, #sTrackerHistory { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#sMonthlyChart::-webkit-scrollbar, #sCycleChart::-webkit-scrollbar { height: 4px; }
#sMonthlyChart::-webkit-scrollbar-thumb { background: rgba(59,130,246,.3); border-radius: 2px; }

/* Timeframe row used by Money Flow tabs — flex-row layout, distinct from
   the vertical .m-tf-col used in the coin summary card. Uses .active as
   its state class (this page's convention) rather than .on/.m-tf-on. */
.m-tf-row-flex { display: flex; gap: 6px; margin-bottom: 10px; }
.m-tf-row-flex .m-tf-btn { flex: 1; text-align: center; justify-content: center; }
.m-tf-row-flex .m-tf-btn.active { background: rgb(139 92 246 / 0%); border-color: rgb(139 92 246 / 21%); color: var(--aeon-violet); }
#mCsTfRow { margin-bottom: 5px; }

/* ── 1) Open Interest & Funding ── */
.m-sig-oi-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.m-sig-oi-stat { display: flex; flex-direction: column; gap: 2px; }
#mSigOiWrap { margin: 0 -14px -14px; }
#mSigOiWrap #oiFundCard { margin-bottom: 0 !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-bottom: none !important; background: transparent !important; }
/* The real OI chart card's header row (label + legend + tf picker + live
   readouts, sized for a wide desktop card) is #oiFundCard's 2nd direct
   child — the 1st child is just a 2px top glow bar, not the header.
   Mobile already renders its own compact header + stat row above the
   chart, so the label and live-readouts sections are redundant here —
   but the 1H/4H timeframe picker is genuinely functional (nothing else
   on mobile lets the user switch it), so keep the row itself visible and
   only hide the parts mobile duplicates, leaving #oiFundTfPicker shown. */
#mSigOiWrap #oiFundCard > div:nth-child(2) {
  display: flex !important;
  padding: 8px 16px !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
}
/* child 1 = label section ("OI · FUNDING · 96H" + accent bar) */
#mSigOiWrap #oiFundCard > div:nth-child(2) > div:nth-child(1) { display: none !important; }
/* child 2 = legend swatches + #oiFundTfPicker together — hide everything
   in this row except the picker itself */
#mSigOiWrap #oiFundCard > div:nth-child(2) > div:nth-child(2) { gap: 6px !important; }
#mSigOiWrap #oiFundCard > div:nth-child(2) > div:nth-child(2) > div:not(#oiFundTfPicker) { display: none !important; }
#mSigOiWrap #oiFundTfPicker button { padding: 5px 12px !important; font-size: 8.5px !important; }
/* child 3 = live readouts (OI/Funding/Regime) — mobile shows its own
   copy of these above the chart via .m-sig-oi-stats, so hide here */
#mSigOiWrap #oiFundCard > div:nth-child(2) > div:nth-child(3) { display: none !important; }
/* Was 180px, but drawOiFundChart() hardcodes its internal canvas backing
   store to H=200 regardless of the CSS box size — mismatched values here
   just stretch/squash the same 200px-tall bitmap into a shorter box.
   Match the JS constant instead of fighting it. */
#mSigOiWrap #oiFundChart { height: 200px !important; }
#mSigOiWrap #oiFundLoading { border-radius: 0 !important; }

/* ── 1b) Options Intelligence — IV · OI · max pain ──
   Same "move the real card in" approach as OI & Funding above, but the
   expiry-tab bar and LIVE status dot inside optIntelCard's own header
   are genuinely functional (not just decorative/duplicated by our mobile
   header), so — unlike OI's header — we keep it visible here. */
#mSigOptIntelWrap { margin: 0 -14px -14px; }
#mSigOptIntelWrap #optIntelCard { margin-bottom: 0 !important; border-radius: 0 !important; border-left: none !important; border-right: none !important; border-bottom: none !important; background: transparent !important; }
#mSigOptIntelWrap #optIntelStatStrip { grid-template-columns: repeat(2, 1fr) !important; }
#mSigOptIntelWrap #optIntelChart { height: 170px !important; }
#mSigOptIntelWrap #optIntelLoading { border-radius: 0 !important; }

/* ── 2) Cross-Asset Momentum ── */
.m-sig-mom-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 8px; }
.m-sig-mom-item { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; }
.m-sig-mom-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.m-sig-mom-sym { color: var(--text2); font-weight: 700; }
.m-sig-mom-chg { font-weight: 700; }
.m-sig-mom-chg.up { color: var(--green); }
.m-sig-mom-chg.dn { color: var(--red); }

/* ── 3) Money Flow Intelligence ── */
.m-sig-mf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; margin-bottom: 12px; }
.m-sig-mf-stat { display: flex; flex-direction: column; gap: 2px; background: var(--surface); padding: 4px; border-radius: 6px; }
.m-sig-mf-sub { font-family: var(--mono); font-size: 8px; color: var(--text3); margin-top: 1px; }
.m-sig-mf-dombar { height: 3px; background: var(--border); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.m-sig-mf-domfill { height: 100%; background: rgba(59,130,246,.6); border-radius: 2px; transition: width .5s ease; }
.m-sig-mf-chart-lbl { font-family: var(--mono); font-size: 7px; letter-spacing: .1em; color: rgba(59,130,246,.5); text-transform: uppercase; margin: 8px 0 4px; }
.m-sig-mf-chart-lbl.retail { color: rgba(240,185,11,.55); margin-top: 10px; }

/* ── 4) Multi-Exchange Aggregate — mirrors #exAgg / #exCards ── */
#mSigExAgg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
#mSigExAgg .ex-mc { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 6px; padding: 9px 10px; }
#mSigExAgg .ex-mc-l { font-family: var(--mono); font-size: 7px; letter-spacing: .08em; color: var(--text3); margin-bottom: 4px; }
#mSigExAgg .ex-mc-v { font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1; }
#mSigExAgg .ex-mc-s { font-family: var(--mono); font-size: 7.5px; color: var(--text3); margin-top: 4px; }
#mSigExAgg .ex-mc-s.bull { color: var(--green); }
#mSigExAgg .ex-mc-s.bear { color: var(--red); }
#mSigExAgg .mx-mini-bar { height: 3px; border-radius: 2px; background: rgba(210,55,75,.3); margin-top: 5px; overflow: hidden; display: flex; }
#mSigExAgg .mx-mini-bid { height: 100%; background: var(--green); }
#mSigExCards {
  display: flex; flex-direction: row; gap: 10px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 4px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
#mSigExCards::-webkit-scrollbar { display: none; }
#mSigExCards .ex-card { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; flex: 0 0 148px; scroll-snap-align: start; }
#mSigExCards .ex-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
#mSigExCards .ex-name { font-family: var(--mono); font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mSigExCards .ex-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
#mSigExCards .ex-wt { font-family: var(--mono); font-size: 7px; color: var(--text3); margin-bottom: 6px; }
#mSigExCards .ex-badge { font-family: var(--mono); font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 3px; display: inline-block; margin-bottom: 6px; }
#mSigExCards .ex-badge.fr { color: var(--red); background: rgba(244,63,94,.1); }
#mSigExCards .ex-badge.ls { color: var(--amber); background: rgba(245,158,11,.1); }
#mSigExCards .ex-badge.oi { color: var(--cyan); background: rgba(59,130,246,.1); }
#mSigExCards .ex-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; }
#mSigExCards .ex-lbl { font-family: var(--mono); font-size: 8px; color: var(--text3); }
#mSigExCards .ex-val { font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--text); }
#mSigExCards .mx-mini-bar { height: 3px; border-radius: 2px; background: rgba(210,55,75,.3); margin-top: 6px; overflow: hidden; display: flex; }
#mSigExCards .mx-mini-bid { height: 100%; background: var(--green); }

/* ── 5) Signal Matrix — mirrors #sigMatrix, single-column on mobile ── */
#mSigMatrixBody .sig-matrix { display: flex; flex-direction: column; }
#mSigMatrixBody .sig-group-hdr { padding: 11px 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
#mSigMatrixBody .sig-group-bar { max-width: 60px; }
#mSigMatrixBody .sig-group-body { padding: 0 14px; }
#mSigMatrixBody .sig-row { padding: 8px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--border); }
#mSigMatrixBody .sig-row:last-child { border-bottom: none; }
#mSigMatrixBody .sig-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
#mSigMatrixBody .sig-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; flex-shrink: 0; }
#mSigMatrixBody .sig-text { min-width: 0; }
#mSigMatrixBody .sig-name { font-family: var(--mono); font-size: 9px; font-weight: 700; color: var(--text); }
#mSigMatrixBody .sig-detail { font-family: var(--mono); font-size: 7.5px; color: var(--text3); margin-top: 1px; }
#mSigMatrixBody .sig-bar-wrap { display: none; } /* too dense for mobile row width — score shown in sig-right instead */
#mSigMatrixBody .sig-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#mSigMatrixBody .sig-badge { font-family: var(--mono); font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
#mSigMatrixBody .sig-live, #mSigMatrixBody .sig-sim { font-family: var(--mono); font-size: 6.5px; color: var(--text3); display: none; }
#mSigMatrixBody .sig-summary { display: flex; align-items: center; gap: 10px; padding: 14px; border-top: 1px solid var(--border); }
#mSigMatrixBody .sig-sum-label { font-family: var(--mono); font-size: 8px; letter-spacing: .08em; color: var(--text3); }
#mSigMatrixBody .sig-sum-track { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.05); overflow: hidden; }
#mSigMatrixBody .sig-sum-fill { height: 100%; border-radius: 2px; }
#mSigMatrixBody .sig-sum-score { font-family: var(--hdr); font-size: 16px; font-weight: 800; }
#mSigMatrixBody .sig-sum-count { font-family: var(--mono); font-size: 7.5px; color: var(--text3); }

/* ── 6) R:R Setup Scanner ── */
.m-sig-rr-sub { font-family: var(--mono); font-size: 9px; color: var(--text3); line-height: 1.5; margin-bottom: 12px; }
.m-sig-rr-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.m-sig-rr-disp { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--aeon-violet); flex-shrink: 0; min-width: 40px; text-align: right; }
.m-sig-rr-scan-btn {
  width: 100%; padding: 10px 0; border-radius: 6px; margin-bottom: 12px;
  background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.4);
  color: var(--aeon-violet); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .06em;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-sig-rr-scan-btn.scanning { opacity: .6; }
.m-sig-rr-results .rr-status { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0; }
.m-sig-rr-results .rr-status-icon { font-size: 16px; flex-shrink: 0; }
.m-sig-rr-results .rr-status-title { font-family: var(--mono); font-size: 10px; font-weight: 700; margin-bottom: 4px; }
.m-sig-rr-results .rr-status-sub { font-family: var(--mono); font-size: 8.5px; color: var(--text3); line-height: 1.5; }
.m-sig-rr-results .rr-setups { display: flex; flex-direction: column; gap: 10px; }
.m-sig-rr-results .rr-setup-card { background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; }
.m-sig-rr-results .rr-setup-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.m-sig-rr-results .rr-setup-dir { font-family: var(--mono); font-size: 10px; font-weight: 700; }
.m-sig-rr-results .rr-setup-quality { font-family: var(--mono); font-size: 7px; font-weight: 700; padding: 2px 6px; border-radius: 3px; border: 1px solid; }
.m-sig-rr-results .rr-setup-rr { font-family: var(--mono); font-size: 9px; font-weight: 700; }
.m-sig-rr-results .rr-setup-levels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.m-sig-rr-results .rr-level-lbl { font-family: var(--mono); font-size: 6.5px; letter-spacing: .06em; color: var(--text3); margin-bottom: 2px; }
.m-sig-rr-results .rr-level-price { font-family: var(--mono); font-size: 10.5px; font-weight: 700; }
.m-sig-rr-results .rr-level-pct { font-family: var(--mono); font-size: 7px; color: var(--text3); margin-top: 1px; }
.m-sig-rr-results .rr-geo { padding-top: 4px; }
.m-sig-rr-results .rr-geo-track { position: relative; height: 4px; background: rgba(255,255,255,.06); border-radius: 2px; margin: 14px 0 6px; }
.m-sig-rr-results .rr-geo-loss, .m-sig-rr-results .rr-geo-profit { position: absolute; top: 0; height: 100%; border-radius: 2px; }
.m-sig-rr-results .rr-geo-loss { background: rgba(244,63,94,.35); }
.m-sig-rr-results .rr-geo-profit { background: rgba(16,185,129,.35); }
.m-sig-rr-results .rr-geo-pin { position: absolute; top: -3px; width: 2px; height: 10px; border-radius: 1px; transform: translateX(-50%); }
.m-sig-rr-results .rr-geo-lbl { position: absolute; top: 10px; font-family: var(--mono); font-size: 6.5px; font-weight: 700; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════
   MARKETS PAGE
   ═══════════════════════════════════════════════════════════════════════ */
#mMarketsPage { display: none; flex-direction: column; gap: 0; padding: 0 0 20px; background: linear-gradient(145deg,#0D131C 0%,#090E15 55%,#070B11 100%); flex: 1; }
#mMktListView { display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* Tab strip — LIST / BUBBLES / FLOW / HEAT / CHATTER / SESSION / STRENGTH */
.m-mkt-tabs {
  display: flex; gap: 2px; overflow-x: auto; padding: 10px 14px 0;
  border-bottom: 1px solid var(--border); scrollbar-width: none;
  background: rgba(4,6,12,.97);
  position: sticky; z-index: 190;
  /* top is set from JS (_mMktSizeTabsSticky in app.js), measured against
     #mMiniBar's real height — its padding-top uses env(safe-area-inset-top)
     so it isn't a fixed pixel value across devices. */
  top: 0;
}
.m-mkt-tabs::-webkit-scrollbar { display: none; }
.m-mkt-tab {
  flex-shrink: 0; padding: 9px 12px; background: transparent; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--text3); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.m-mkt-tab.active { color: #fb7185; border-bottom-color: rgba(251,113,133,.6); }

/* Bounded-height container for the real desktop panels (Bubbles/Flow/Heat/
   Chatter/Session/Strength) — #mobileView itself is min-height:100vh with
   natural document scroll, so without an explicit height these reparented
   panels (which rely on their own overflow-y:auto lists, and for Bubbles
   a physics canvas that needs a real pixel height) would try to grow
   forever instead of scrolling internally. Exact height is set from JS
   (measured against the real header/tab-bar) rather than a hardcoded
   calc(), since sticky/safe-area heights vary by device. */
/* Breadcrumb + live clock */
.m-mkt-breadcrumb { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 0; font-family: var(--mono); font-size: 8px; letter-spacing: .06em; color: var(--text3); background: rgba(4,6,12,.97); }
.m-mkt-bc-cur { color: var(--text2); }
.m-mkt-bc-live { display: flex; align-items: center; gap: 4px; color: var(--green); }
.m-mkt-live-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 4px var(--green); flex-shrink: 0; }

/* Stat grid — BTC.D / ETH.D / TOTAL MCAP / 24H VOLUME, each with a delta */
.m-mkt-statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 10px 14px 12px; border-bottom: 1px solid var(--border); background: rgba(4,6,12,.97); }
.m-mkt-stat-cell { display: flex; flex-direction: column; gap: 3px; }
.m-mkt-stat-lbl { font-family: var(--mono); font-size: 7px; letter-spacing: .06em; color: var(--text3); }
.m-mkt-stat-val { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--text); }
.m-mkt-stat-chg-wrap { font-size: 8px; }
.m-mkt-stat-chg { font-family: var(--mono); font-weight: 600; }
.m-mkt-stat-chg.pos { color: var(--green); }
.m-mkt-stat-chg.neg { color: var(--red); }
.m-mkt-stat-chg-flat { font-family: var(--mono); color: var(--text3); }

/* Search */
.m-mkt-search-wrap { display: flex; align-items: center; gap: 8px; margin: 10px 14px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--border2); }
.m-mkt-search { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--mono); font-size: 11px; }
.m-mkt-search::placeholder { color: var(--text3); }
.m-mkt-search-kbd { flex-shrink: 0; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.05); border: 1px solid var(--border2); color: var(--text3); font-family: var(--mono); font-size: 9px; }

/* Filter chips */
.m-mkt-chips-row { display: flex; align-items: center; gap: 6px; padding: 0 14px 6px; background: rgba(4,6,12,.97); }
.m-mkt-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.m-mkt-chips::-webkit-scrollbar { display: none; }
.m-mkt-chips-more { padding: 0 14px 10px; background: rgba(4,6,12,.97); }
.m-mkt-chip {
  flex-shrink: 0; padding: 6px 12px; border-radius: 10%;
  background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  color: var(--text2); font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .03em;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.m-mkt-chip.active { background: rgba(244,63,94,.12); border-color: rgba(244,63,94,.4); color: #fb7185; }
.m-mkt-more-btn {
  flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  color: var(--text3); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-mkt-more-btn.active { color: var(--aeon-violet); border-color: rgba(139,92,246,.4); background: rgba(139,92,246,.1); }

/* Column header — ASSET / 24H CHANGE / PRICE / 24H VOLUME / AEON SCORE */
.m-mkt-colhdr {
  display: grid; grid-template-columns: 22px 1.15fr 0.85fr 0.9fr 0.95fr 0.6fr;
  padding: 8px 14px; gap: 6px;
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .06em; color: var(--text3);
  border-bottom: 1px solid var(--border);
  background: rgba(4,6,12,.97);
}
.m-mkt-col-chg, .m-mkt-col-price, .m-mkt-col-vol, .m-mkt-col-str { text-align: right; }
.m-mkt-col-info { cursor: help; opacity: .7; }

/* Rows */
.m-mkt-list { display: flex; flex-direction: column; }
.m-mkt-row {
  display: grid; grid-template-columns: 22px 1.15fr 0.85fr 0.9fr 0.95fr 0.6fr;
  align-items: center; gap: 6px; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-mkt-row:active { background: rgba(255,255,255,.03); }
.m-mkt-row:last-child { border-bottom: none; }
.m-mkt-wl-col { display: flex; align-items: center; justify-content: center; }
.m-mkt-asset { display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-mkt-icon { width: 30px; height: 30px; border-radius: 10%; flex-shrink: 0; overflow: hidden; }
.m-mkt-icon img { border-radius: 10% !important; }
.m-mkt-wl-badge {
  width: 15px; height: 15px; border-radius: 10%; flex-shrink: 0;
  border: none; background: rgb(0 245 255 / 8%); color: #bdc0c9;
  font-family: var(--mono); font-size: 11px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-mkt-wl-badge.added { background: rgb(155 170 192 / 8%); color: #bdc0c9; }
.m-mkt-wl-badge.added:active { background: var(--red); color: #fff; }

/* Mobile Home watchlist widget — remove ("−") button on removable rows */
.m-wl-remove {
  width: 15px; height: 15px; border-radius: 10%; flex-shrink: 0;
  border: none; background: rgb(255 45 85 / 8%);
  color: #bdc0c9; font-family: var(--mono); font-size: 11px;
  font-weight: 800; line-height: 1; display: flex; align-items: center;
  justify-content: center; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-wl-remove:active { background: rgba(255,45,85,.25); color: #fff; }
.m-mkt-asset-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.m-mkt-sym { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--text); }
.m-mkt-name { font-family: var(--font); font-size: 8px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mkt-chg-col { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.m-mkt-chg { font-family: var(--mono); font-size: 10px; font-weight: 700; }
.m-mkt-chg.pos { color: var(--green); }
.m-mkt-chg.neg { color: var(--red); }
.m-mkt-spark { width: 42px; height: 18px; display: block; }
.m-mkt-price-col { text-align: right; }
.m-mkt-price-main { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text); }
.m-mkt-price-sub { font-family: var(--mono); font-size: 7.5px; color: var(--text3); margin-top: 2px; }
.m-mkt-vol-col { text-align: right; }
.m-mkt-vol { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text); }
.m-mkt-vol-sub { font-family: var(--mono); font-size: 7.5px; color: var(--text3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-mkt-str-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.m-mkt-str-num { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.m-mkt-score-bar { display: flex; gap: 1.5px; }
.m-mkt-score-seg { width: 2.5px; height: 8px; border-radius: 1px; background: rgba(255,255,255,.08); }
.m-mkt-score-seg.on { background: var(--green); }

/* View more */
.m-mkt-viewmore {
  text-align: center; padding: 14px; font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--aeon-violet); cursor: pointer; -webkit-tap-highlight-color: transparent; display: none;
}

/* Pulse detail views (Bubbles/Flow/Heat/Chatter/Session/Strength) — real
   desktop code, permanently detached from MM Monitor's tray into this
   page on mobile. Height is set from JS (measured against the real
   header/tab-strip/bottom-nav) since sticky/safe-area heights vary by
   device; this just establishes the flex/scroll behavior. */
#mMktPulseWrap { min-height: 0; overflow: hidden; }
#mMktPulseWrap #mmContent { padding: 10px 14px !important; }
#mMktPulseWrap #dmmDomBar { position: static !important; }

/* ═══════════════════════════════════════════════════════════════════════
   INSIGHTS PAGE — feed-first intelligence terminal
   ═══════════════════════════════════════════════════════════════════════ */
#mInsightsPage { display: none; flex-direction: column; gap: 0; padding: 0 0 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   PROFILE PAGE — mobile-only in-page section (see #mProfilePage in
   app.html, rendered by _mProfileRenderAvatarHero() in app.js). Flows
   naturally like the Signals/Markets/Insights pages above — the embedded
   Settings iframe at the bottom is auto-resized to its own content
   height in app.js, so the whole tab scrolls as one page.
   ═══════════════════════════════════════════════════════════════════════ */
#mProfilePage { display: none; flex-direction: column; gap: 0; padding: 0 0 20px; }

.m-prof-hero {
  position: relative; overflow: hidden;
  padding: 22px 18px 20px;
  background: var(--card-hero);
  border-bottom: 1px solid var(--border);
}
.m-prof-hero::after {
  content: ''; position: absolute; top: -24px; right: -24px; width: 150px; height: 150px;
  background:
    linear-gradient(135deg, transparent 48%, rgba(139,92,246,.16) 49%, rgba(139,92,246,.16) 50%, transparent 51%),
    linear-gradient(135deg, transparent 60%, rgba(37,99,235,.10) 61%, rgba(37,99,235,.10) 62%, transparent 63%),
    linear-gradient(135deg, transparent 72%, rgba(37,99,235,.07) 73%, rgba(37,99,235,.07) 74%, transparent 75%);
  pointer-events: none;
}
.m-prof-eyebrow { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .22em; color: var(--aeon-violet); margin-bottom: 7px; }
.m-prof-headline { font-family: var(--hdr); font-size: 23px; font-weight: 800; line-height: 1.18; color: var(--text); margin-bottom: 9px; max-width: 240px; }
.m-prof-accent { background: var(--aeon-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-prof-subline { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--text3); }

.m-prof-current-card {
  position: relative; margin: 16px 14px 0; padding: 16px 14px;
  background: var(--card-primary);
  border: 1px solid var(--c-mid); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  display: flex; gap: 13px; align-items: flex-start;
}
.m-prof-current-avatar {
  width: 68px; height: 68px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  border: 2px solid var(--aeon-violet); background: var(--s4);
}
.m-prof-current-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-prof-current-meta { flex: 1; min-width: 0; padding-right: 66px; }
.m-prof-current-label { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; color: var(--text3); margin-bottom: 4px; }
.m-prof-current-tier { font-family: var(--hdr); font-size: 16.5px; font-weight: 800; letter-spacing: .02em; color: var(--text); margin-bottom: 4px; }
.m-prof-current-blurb { font-size: 11.5px; color: var(--text2); line-height: 1.42; margin-bottom: 10px; }
.m-prof-current-pill { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .1em; padding: 4px 10px; border-radius: 20px; border: 1px solid; }
.m-prof-shards-chip {
  position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 20px;
  background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.28);
}
.m-prof-shards-icon { color: var(--amber); font-size: 11px; }
.m-prof-shards-value { color: var(--amber); font-size: 12px; font-weight: 800; font-family: var(--mono); }
.m-prof-shards-label { color: rgba(245,158,11,.7); font-size: 7.5px; letter-spacing: .12em; font-family: var(--mono); }

.m-prof-progress { position: relative; margin: 22px 20px 4px; display: flex; justify-content: space-between; padding: 0 2px; }
.m-prof-progress-track { position: absolute; top: 5px; left: 14px; right: 14px; height: 2px; background: var(--border2); }
.m-prof-progress-fill { position: absolute; top: 5px; left: 14px; height: 2px; width: 0; background: linear-gradient(90deg,#00b4e6,#8b5cf6,#ffb020); transition: width .35s ease; }
.m-prof-progress-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; }
.m-prof-progress-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--s4); border: 2px solid var(--border2); z-index: 1; transition: all .2s; }
.m-prof-progress-step.reached .m-prof-progress-dot { background: var(--dot-accent, var(--cyan)); border-color: var(--dot-accent, var(--cyan)); box-shadow: 0 0 8px var(--dot-accent, var(--cyan)); }
.m-prof-progress-lbl { font-family: var(--mono); font-size: 7.5px; letter-spacing: .14em; color: var(--text3); }
.m-prof-progress-step.reached .m-prof-progress-lbl { color: var(--text); }

.m-prof-tiers { display: flex; flex-direction: column; gap: 11px; margin: 20px 14px 22px; }
.m-prof-tier-card {
  border-radius: 10px; padding: 13px 13px 13px 12px;
  background: var(--card-lower);
  border: 1px solid var(--border2); border-left: 3px solid var(--tier-accent, var(--border2));
}
.m-prof-tier-card.current { box-shadow: 0 0 0 1px var(--tier-accent) inset; }
.m-prof-tier-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.m-prof-tier-num { font-family: var(--mono); font-size: 10.5px; font-weight: 800; color: var(--tier-accent); flex-shrink: 0; margin-top: 1px; }
.m-prof-tier-headtext { flex: 1; min-width: 0; }
.m-prof-tier-name { font-family: var(--hdr); font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--text); margin-bottom: 2px; }
.m-prof-tier-desc { font-size: 10.5px; color: var(--text3); }
.m-prof-tier-req { flex-shrink: 0; text-align: right; font-family: var(--mono); font-size: 9.5px; font-weight: 800; color: var(--amber); border: 1px solid rgba(245,158,11,.3); border-radius: 6px; padding: 4px 8px; background: rgba(245,158,11,.06); }
.m-prof-tier-req-sub { font-size: 6.5px; letter-spacing: .1em; color: rgba(245,158,11,.6); font-weight: 600; margin-top: 1px; }
.m-prof-tier-row { display: flex; align-items: center; gap: 10px; }
.m-prof-tier-tile { position: relative; width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0; border: 2px solid var(--border2); overflow: hidden; background: var(--s4); cursor: pointer; padding: 0; }
.m-prof-tier-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-prof-tier-tile.locked img { filter: grayscale(.7) brightness(.45); }
.m-prof-tier-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; background: rgba(0,0,0,.35); }
.m-prof-tier-check { position: absolute; bottom: -1px; right: -1px; width: 15px; height: 15px; border-radius: 50%; color: #04060a; font-size: 8.5px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg); }
.m-prof-tier-cost { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 6.5px; font-weight: 700; color: var(--amber); background: var(--bg); border: 1px solid rgba(245,158,11,.35); border-radius: 6px; padding: 1px 4px; white-space: nowrap; }
.m-prof-tier-arrow { margin-left: auto; flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%; border: 1px solid var(--border2); background: transparent; color: var(--text3); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.m-prof-tier-arrow:disabled { cursor: default; }

.m-profile-frame { display: block; width: 100%; border: 0; background: transparent; }

/* ── Sticky head: title/counters, search, category+sort selects, chips ── */
.m-ins-head {
  position: sticky; top: 0; z-index: 190;
  background: rgba(4,6,12,.97);
  border-bottom: 1px solid var(--border);
  padding: 14px 14px 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.m-ins-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.m-ins-title { font-family: var(--hdr); font-size: 16px; font-weight: 800; letter-spacing: .08em; color: var(--text); }
.m-ins-sub { font-family: var(--mono); font-size: 8.5px; color: var(--text3); margin-top: 2px; letter-spacing: .02em; }

.m-ins-counters { display: flex; gap: 6px; flex-shrink: 0; }
.m-ins-counter {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 8px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 8px; border-radius: 10px; white-space: nowrap;
}
.m-ins-counter-dot { width: 5px; height: 5px; border-radius: 50%; }
.m-ins-counter-trump { color: #fb7185; background: rgba(244,63,94,.1); border: 1px solid rgba(244,63,94,.25); }
.m-ins-counter-trump .m-ins-counter-dot { background: #fb7185; }
.m-ins-counter-elon { color: #93c5fd; background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.25); }
.m-ins-counter-elon .m-ins-counter-dot { background: #93c5fd; }

.m-ins-search-wrap { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid var(--border2); }
.m-ins-search { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--mono); font-size: 11px; }
.m-ins-search::placeholder { color: var(--text3); }

.m-ins-controls-row { display: flex; gap: 8px; }
.m-ins-select {
  flex: 1; min-width: 0; background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  border-radius: 7px; padding: 7px 8px; color: var(--text2); font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .02em; -webkit-appearance: none; appearance: none;
}

.m-ins-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.m-ins-chips::-webkit-scrollbar { display: none; }
.m-ins-chip {
  flex-shrink: 0; padding: 6px 11px; border-radius: 10%;
  background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  color: var(--text2); font-family: var(--mono); font-size: 8.5px; font-weight: 700; letter-spacing: .05em;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.m-ins-chip.active { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.4); color: var(--aeon-violet); }
.m-ins-chip-bull.active    { background: rgba(16,185,129,.14); border-color: rgba(16,185,129,.4); color: var(--green); }
.m-ins-chip-bear.active    { background: rgba(244,63,94,.14); border-color: rgba(244,63,94,.4); color: #fb7185; }
.m-ins-chip-outlook.active { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.4); color: var(--amber); }
.m-ins-chip-onchain.active { background: rgba(139,92,246,.14); border-color: rgba(139,92,246,.4); color: var(--aeon-violet); }
.m-ins-chip-macro.active   { background: rgba(217,192,90,.16); border-color: rgba(217,192,90,.4); color: var(--gold); }
.m-ins-chip-defi.active    { background: rgba(45,212,191,.14); border-color: rgba(45,212,191,.4); color: #2dd4bf; }
.m-ins-chip-reg.active     { background: rgba(148,163,184,.14); border-color: rgba(148,163,184,.4); color: #cbd5e1; }

/* ── Feed of larger article cards ── */
.m-ins-feed { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.m-ins-empty { text-align: center; padding: 40px 20px; font-family: var(--mono); font-size: 10px; color: var(--text3); letter-spacing: .05em; }

.m-ins-card {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.m-ins-card-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 0; }

.m-ins-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 9px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 9px; border-radius: 5px;
}
.m-ins-badge-all        { color: #93c5fd; background: rgba(59,130,246,.14); }
.m-ins-badge-bull       { color: var(--green); background: rgba(16,185,129,.14); }
.m-ins-badge-bear       { color: #fb7185; background: rgba(244,63,94,.14); }
.m-ins-badge-outlook    { color: var(--amber); background: rgba(245,158,11,.14); }
.m-ins-badge-onchain    { color: var(--aeon-violet); background: rgba(139,92,246,.14); }
.m-ins-badge-macro      { color: var(--gold); background: rgba(217,192,90,.16); }
.m-ins-badge-defi       { color: #2dd4bf; background: rgba(45,212,191,.14); }
.m-ins-badge-regulatory { color: #cbd5e1; background: rgba(148,163,184,.14); }

.m-ins-bookmark {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
  background: transparent; border: none; color: var(--text3); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-ins-bookmark.on { color: var(--aeon-violet); }

.m-ins-thumb {
  height: 108px; margin: 10px 12px 0; border-radius: 8px;
  display: flex; align-items: flex-end; justify-content: flex-start;
  cursor: pointer; overflow: hidden; position: relative;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* ── Per-genre background photo. Each rule stacks a genre-tinted gradient
   UNDER a local image file — if the image file isn't present yet (or a
   filename doesn't match), that layer just doesn't paint and the tinted
   gradient alone still renders, so nothing breaks mid-rollout. Drop the
   named file next to app.html to light each one up. ── */
.m-ins-thumb-all {
  background-image: linear-gradient(135deg, rgba(59,130,246,.30), rgba(10,14,24,.55)), url('insight-signal.png');
}
.m-ins-thumb-bull {
  background-image: linear-gradient(135deg, rgba(16,185,129,.30), rgba(10,30,22,.55)), url('insight-bullish.png');
}
.m-ins-thumb-bear {
  background-image: linear-gradient(135deg, rgba(244,63,94,.30), rgba(35,10,16,.55)), url('insight-bearish.png');
}
.m-ins-thumb-outlook {
  background-image: linear-gradient(135deg, rgba(245,158,11,.28), rgba(35,24,8,.55)), url('insight-outlook.png');
}
.m-ins-thumb-onchain {
  background-image: linear-gradient(135deg, rgba(139,92,246,.30), rgba(22,14,38,.55)), url('insight-onchain.png');
}
.m-ins-thumb-macro {
  background-image: linear-gradient(135deg, rgba(217,192,90,.26), rgba(32,28,10,.55)), url('insight-macro.png');
}
.m-ins-thumb-defi {
  background-image: linear-gradient(135deg, rgba(45,212,191,.26), rgba(8,30,28,.55)), url('insight-defi.png');
}
.m-ins-thumb-regulatory {
  background-image: linear-gradient(135deg, rgba(148,163,184,.24), rgba(20,22,28,.55)), url('insight-regulatory.png');
}

/* Fallback glyph — only ever shows now if a card has no named coin AND
   no thumbInner markup was produced; kept small, no longer the hero. */
.m-ins-thumb-glyph { font-size: 22px; opacity: .8; filter: drop-shadow(0 0 10px rgba(0,0,0,.5)); margin: 8px; }

/* Coin logo badge — moved from a big centered icon to a small chip
   tucked in the bottom-left corner, so the background photo stays the
   focal point instead of being covered by the icon. */
.m-ins-coin-badge {
  margin: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(6,8,14,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 4px 14px rgba(0,0,0,.4);
}
.m-ins-coin-badge img { width: 20px; height: 20px; border-radius: 50% !important; box-shadow: none !important; }

.m-ins-content { padding: 10px 12px 0; cursor: pointer; }
.m-ins-headline { font-family: var(--hdr); font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--text); }
.m-ins-meta { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-family: var(--mono); font-size: 8.5px; color: var(--text3); letter-spacing: .03em; text-transform: uppercase; }
.m-ins-dot { opacity: .5; }
.m-ins-summary { font-size: 10.5px; line-height: 1.5; color: var(--text2); margin-top: 6px; }

.m-ins-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px 12px; margin-top: 4px; }
.m-ins-tags { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.m-ins-tag {
  font-family: var(--mono); font-size: 7.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--text3); background: rgba(255,255,255,.04); border: 1px solid var(--border);
  padding: 3px 7px; border-radius: 4px; white-space: nowrap;
}
.m-ins-readmore { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--aeon-violet); text-decoration: none; white-space: nowrap; flex-shrink: 0; }

/* ── Pagination ── */
.m-ins-pagination {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px 4px; flex-wrap: wrap;
}
.m-ins-page-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border2);
  color: var(--text2); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.m-ins-page-btn:disabled { opacity: .35; pointer-events: none; }
.m-ins-page-info { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--text); min-width: 40px; text-align: center; }
.m-ins-page-count { width: 100%; text-align: center; font-family: var(--mono); font-size: 8px; color: var(--text3); letter-spacing: .03em; margin-top: 2px; }

/* ── Coin picker sheet ── */
#mCoinSheet {
  display: none;
  position: fixed;
  /* Constrained to start below the sticky header (#mMiniBar) instead of
     covering the full viewport, so the header stays visible above the
     dimming backdrop rather than being covered by it — same
     var(--m-header-h) live-measured value the MM Monitor tray and
     Engine Market panel use for the same purpose. */
  top: var(--m-header-h, 56px);
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,.65);
  z-index: 500;
  align-items: flex-end;
  justify-content: center;
}
#mCoinSheet.open { display: flex; }
.m-sheet-inner {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 12px 12px 0 0;
  padding: 20px 18px 30px;
  width: 100%;
  max-width: 480px;
  /* #mCoinSheet's backdrop already starts below the header (top:
     var(--m-header-h)), but that alone doesn't stop this inner box from
     growing taller than that available space — flexbox doesn't clip an
     overflowing child just because the parent has a top offset. Cap it
     to the same span the backdrop occupies (header to viewport bottom)
     and let it scroll internally instead of pushing content back up
     over/behind the header. */
  max-height: calc(100dvh - var(--m-header-h, 56px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.m-sheet-title {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--text3);
  text-align: center;
  margin-bottom: 4px;
}
.m-coin-opt {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 10px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s;
}
.m-coin-opt.on {
  background: rgba(59,130,246,.08);
  border-color: var(--cyan);
  color: var(--cyan);
}
.m-coin-opt:active { background: rgba(59,130,246,.12); }
.m-coin-price {
  font-size: 9px;
  font-weight: 400;
  color: var(--text3);
  margin-top: 4px;
}
.m-sheet-close {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 12px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  border-radius: 4px;
  cursor: pointer;
}

/* ── Fed Event Radar video column — real panel occupying its own column of
     the price card (not a small icon that opens something elsewhere).
     Stretches to match the height of the left content column via the
     parent's `align-items: stretch`. Idle/upcoming render a poster (icon +
     label); live swaps in an actual muted YouTube iframe filling the panel.
     Tap always expands the full sheet for details / unmute / autoplay. ── */
.m-fed-video-col {
  position: relative;
  flex-shrink: 0;
  width: 140px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  color: var(--text3);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.m-fed-video-col-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-fed-video-col-inner iframe { width: 100%; height: 100%; border: 0; }
.m-fed-video-col-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 0 6px;
  text-align: center;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  pointer-events: none;
}
.m-fed-video-col--idle:active { background: rgba(255,255,255,.08); }
.m-fed-video-col--upcoming {
  border-color: rgb(116 113 109 / 27%);
  color: #F2F4F7;
  background: linear-gradient(160deg, rgb(9 5 85 / 14%), rgba(245, 158, 11, .03));
  animation: mFedPulseAmber 2.4s ease-in-out infinite;
}
.m-fed-video-col--live {
  border-color: rgba(239,68,68,.55);
  background: #000;
  animation: mFedPulseRed 1.3s ease-in-out infinite;
}
.m-fed-video-col--live .m-fed-video-col-label { color: var(--red, #ef4444); }
.m-fed-video-col--upcoming .m-fed-video-col-label { color: #F2F4F7; }
.m-fed-video-col--idle .m-fed-video-col-label { color: var(--text3); }
@keyframes mFedPulseAmber {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.35); }
  50%      { box-shadow: 0 0 0 5px rgba(245,158,11,0); }
}
@keyframes mFedPulseRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ── Fed Event Radar + Creator Space — rendered as a dedicated in-page
     section (same pattern as #mSignalsPage/#mMarketsPage/#mInsightsPage:
     hidden by default, swapped in over #mHomeFeed via plain style.display
     toggles in app.js — see _mShowFedPage/_mHideFedPage) rather than a
     fixed-position modal overlay. ── */
#mFedSheet {
  display: none;
  flex-direction: column;
  gap: 0;
  padding: 0 0 20px;
}
/* .m-sheet-inner is shared with #mCoinSheet's floating picker, so the
   page-ified treatment (full width, no card chrome, own background) is
   scoped to #mFedSheet specifically rather than changing the shared
   class. */
#mFedSheet .m-sheet-inner {
  width: 100%;
  max-width: none;
  max-height: none;
  overflow-y: visible;
  border: none;
  border-radius: 0;
  padding: 16px 12px 20px;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(55, 70, 110, 0.08),
      transparent 42%
    ),
    var(--bg);
}
.m-fed-empty {
  color: var(--text3);
  font-size: 12px;
  text-align: center;
  padding: 10px 0 16px;
  line-height: 1.5;
}
.m-fed-status-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.m-fed-status-pill--upcoming { color: var(--amber, #f59e0b); background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); }
.m-fed-status-pill--live { color: var(--red, #ef4444); background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); }
.m-fed-status-pill--idle { color: var(--text3); background: rgba(255,255,255,.04); border: 1px solid var(--border); }
.m-fed-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.m-fed-when { font-size: 11px; color: var(--text2); margin-bottom: 10px; }
.m-fed-blurb { font-size: 12px; line-height: 1.5; color: var(--text2); margin-bottom: 16px; }
.m-fed-countdown-box {
  text-align: center;
  padding: 18px 0;
  border: 1px dashed var(--border2);
  border-radius: 8px;
  margin-bottom: 16px;
}
.m-fed-countdown-label { font-family: var(--mono); font-size: 8px; letter-spacing: .18em; color: var(--text3); margin-bottom: 6px; }
.m-fed-countdown-val { font-size: 22px; font-weight: 800; color: var(--text); }
.m-fed-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  margin-bottom: 14px;
}
.m-fed-player iframe { width: 100%; height: 100%; border: 0; }
.m-fed-player--placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text3);
  font-size: 11px;
  text-align: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.05), transparent 70%);
}
.m-fed-player--placeholder svg { opacity: .35; }
.m-fed-player-link {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--aeon-violet, #8b5cf6);
  text-decoration: none;
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 4px;
  padding: 6px 10px;
}
.m-fed-player-link:active { background: rgba(139,92,246,.1); }
.m-fed-autoplay-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text2);
  padding-top: 6px;
}
.m-cs-autoplay-row {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border2);
}

/* ── Creator Space — launch button docked at the bottom of the Fed sheet ── */
.m-cs-launch-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 6px;
  color: var(--aeon-violet, #8b5cf6);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.m-cs-launch-btn span { flex: 1; text-align: left; }
.m-cs-launch-btn:active { background: rgba(139,92,246,.12); }
.m-cs-launch-arrow { flex-shrink: 0; }

/* ── Creator Space — second view inside #mFedSheet ── */
.m-cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.m-cs-back {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-cs-back:active { background: rgba(255,255,255,.08); }
.m-cs-header-title {
  flex: 1;
  text-align: center;
  font-family: var(--hdr);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.m-cs-beta {
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--aeon-violet, #8b5cf6);
  background: rgba(139,92,246,.14);
  border: 1px solid rgba(139,92,246,.35);
  border-radius: 4px;
  padding: 2px 5px;
}
.m-cs-sub {
  text-align: center;
  font-size: 10.5px;
  color: var(--text3);
  margin: 4px 0 14px;
}

/* ── View row — LIVE NOW / LATEST / FOLLOWING (which slice of the creator
     list is shown), distinct from the category pills below. ── */
.m-cs-view-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
/* LIVE NOW / LATEST / FOLLOWING as 3 equal columns, sized by whatever
   space is left after the fixed search column in .m-cs-view-row; if the
   labels don't fit at their minimum width, this scrolls sideways rather
   than wrapping or squashing. */
.m-cs-view-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(74px, 1fr);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.m-cs-view-tabs::-webkit-scrollbar { display: none; }
.m-cs-view-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, color .12s;
}
.m-cs-view-tab.active {
  background: rgb(139 92 246 / 0%);
  color: var(--text);
}
.m-cs-view-tab.active::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -1px;
  height: 2px;
  background: var(--aeon-violet, #8b5cf6);
  box-shadow: 0 0 10px rgba(139,92,246,.75);
}
.m-cs-view-tab { position: relative; }
.m-cs-view-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red, #f43f5e);
  animation: mFedPulseRed 1.3s ease-in-out infinite;
}
.m-cs-empty-action {
  display: inline-block;
  margin-top: 8px;
  background: none;
  border: none;
  color: var(--aeon-violet, #8b5cf6);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.m-cs-tabs-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.m-cs-filter-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-cs-filter-btn:active { background: rgba(255,255,255,.08); }
/* ALL / TRADING / DEFI / RESEARCH / NEWS — each pill sized to its own
   label (grid-auto-columns: max-content), scrolling sideways once the
   row runs out of width rather than shrinking or wrapping. */
.m-cs-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
}
.m-cs-tabs::-webkit-scrollbar { display: none; }
.m-cs-tab {
  padding: 6px 11px;
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.m-cs-tab.active {
  background: rgba(139,92,246,.14);
  border-color: rgba(139,92,246,.4);
  color: var(--aeon-violet, #8b5cf6);
}
.m-cs-search-btn {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-cs-search-btn:active { background: rgba(255,255,255,.08); }
.m-cs-search-wrap {
  margin-bottom: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
}
.m-cs-search-input {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
}
.m-cs-search-input::placeholder { color: var(--text3); }

.m-cs-list { display: flex; flex-direction: column; gap: 10px; }
.m-cs-card {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s;
}
.m-cs-card:active { background: rgba(255,255,255,.06); border-color: rgba(139,92,246,.4); transform: scale(.99); }
/* Two-column layout: text content on the left, a large poster-style
   thumbnail on the right that spans the full card height (matches the
   Creator Space mockup rather than the earlier small corner-thumb). */
.m-cs-card-main { display: flex; align-items: stretch; gap: 12px; }
.m-cs-card-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-cs-card-top { display: flex; align-items: center; gap: 10px; }
.m-cs-avatar {
  position: relative;
  overflow: hidden;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--hdr);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 0 12px rgba(139,92,246,.15);
}
/* Real channel photo (see _fetchChannelAvatar in server.js), layered over
   the colored-initial letter — sits on top when it loads; onerror in the
   markup hides it if the fetch failed, revealing the letter underneath. */
.m-cs-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.m-cs-card-info { flex: 1; min-width: 0; }
.m-cs-name-row { display: flex; align-items: center; gap: 4px; }
.m-cs-name { font-size: 12.5px; font-weight: 700; color: var(--text); }
.m-cs-verified { color: var(--cyan); flex-shrink: 0; }
.m-cs-live-row { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
/* Grid cards' follow star sits top-right (see .m-cs-follow-btn); keep the
   LATEST/LIVE badge + timestamp anchored to the left and reserve room on
   the right so long timestamps don't run underneath the button instead
   of wrapping under it. */
.m-cs-grid-card .m-cs-live-row {
  justify-content: flex-start;
  padding-right: 37px;
}
.m-cs-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 4px;
  padding: 2px 5px;
}
.m-cs-status-badge--live {
  color: var(--red, #f43f5e);
  background: rgba(244,63,94,.12);
  border: 1px solid rgba(244,63,94,.35);
}
.m-cs-status-badge--vod {
  color: var(--text2);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
}
.m-cs-status-badge--offline,
.m-cs-status-badge--loading {
  color: var(--text3);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
}
.m-cs-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--red, #f43f5e);
  animation: mFedPulseRed 1.3s ease-in-out infinite;
}
.m-cs-viewers {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text3);
}
.m-cs-blurb {
  flex: 1;
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.4;
  margin: 8px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-cs-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.m-cs-tag {
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
/* Large poster-style thumbnail — spans the card's full height on the
   right, matching the mockup rather than a small corner icon. Sized to
   ~44% of the card's content width so it reads as a landscape rectangle
   (mockup: ~140-165px wide on a ~330px-wide card) rather than a small
   square-ish crop. */
.m-cs-thumb {
  position: relative;
  flex-shrink: 0;
  width: 148px;
  min-height: 96px;
  border-radius: 8px;
  overflow: hidden;
  align-self: stretch;
}
.m-cs-thumb-poster {
  position: absolute;
  inset: 0;
  border: 1px solid;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Real thumbnail sits above the gradient/play-glyph poster once loaded;
   its onerror handler (see _mCsThumbHtml in app.js) hides it again on
   failure, revealing the poster underneath — same layered fallback
   pattern as .exchange-logo/.hc-logo elsewhere in this file. */
.m-cs-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 360px) {
  .m-cs-thumb { width: 120px; }
}

/* Thumbnail-on-top variant — used for the LATEST view (see the stacked
   arg on _mCsHeroHtml in app.js), matching its mockup: a full-width
   video-style thumbnail above the badge/avatar/title/description/CTA,
   rather than the side-by-side layout LIVE NOW/FOLLOWING use. Same
   column layout the narrow-viewport fallback below reuses. */
.m-cs-hero--stacked {
  flex-direction: column;
}
.m-cs-hero--stacked .m-cs-hero-thumb {
  order: 1;
  flex: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
}
.m-cs-hero--stacked .m-cs-hero-body {
  order: 2;
}

/* Below this, the hero's 2-column (content/thumb) layout gets too
   cramped to read — drop back to thumb-on-top, body-below. */
@media (max-width: 340px) {
  .m-cs-hero { flex-direction: column; }
  .m-cs-hero-thumb {
    order: 1;
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 12px;
  }
  .m-cs-hero-body { order: 2; }
}

/* ── Follow star — sits top-right on hero/grid/flat cards. Backed by a
     localStorage set (no server-side follow system exists), see
     _mCsToggleFollow in app.js. ── */
.m-cs-follow-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 0%);
  border: 1px solid #18212d00;
  border-radius: 50%;
  color: var(--text2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .12s, border-color .12s;
}
.m-cs-follow-btn.on {
  color: var(--amber, #f59e0b);
  border-color: rgb(245 158 11 / 0%);
}
.m-cs-card, .m-cs-hero, .m-cs-grid-card { position: relative; }
.m-cs-card:focus-visible, .m-cs-hero:focus-visible, .m-cs-grid-card:focus-visible {
  outline: 2px solid var(--aeon-violet, #8b5cf6);
  outline-offset: 2px;
}

/* ── Featured hero card — the top pick for the active view. Two columns:
     content (name/badges/title/description/CTA) on the left, a tall
     poster-style thumbnail on the right — matches the Creator Space
     mockup. DOM order is thumb-then-body (see _mCsHeroHtml in app.js),
     so `order` swaps them visually without touching markup; on narrow
     viewports it collapses back to thumb-on-top, body-below (see the
     max-width:768px block). ── */
.m-cs-hero {
  display: flex;
  align-items: stretch;
  gap: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(139,92,246,.55);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 1px rgba(139,92,246,.04), 0 18px 40px rgba(0,0,0,.35);
}
.m-cs-hero-thumb {
  order: 2;
  position: relative;
  flex: 1 1 42%;
  min-width: 0;
  border-radius: 8px;
  overflow: hidden;
}
.m-cs-hero-body {
  order: 1;
  flex: 1 1 58%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.m-cs-hero-thumb .m-cs-thumb { position: absolute; inset: 0; width: 100%; height: 100%; }
.m-cs-hero-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.3;
  margin-top: 10px;
  text-transform: uppercase;
}
.m-cs-hero-desc {
  font-size: 11.5px;
  color: var(--text2);
  line-height: 1.4;
  margin: 6px 0 14px;
}
.m-cs-hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 12px;
  background: linear-gradient(135deg, #6d28d9, #4f21a8);
  border: 1px solid rgba(139,92,246,.75);
  border-radius: 6px;
  color: #fff;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 22px rgba(139,92,246,.18);
  transition: box-shadow .16s ease, filter .12s;
}
.m-cs-hero-cta:active { filter: brightness(1.08); box-shadow: 0 0 30px rgba(139,92,246,.35); }

/* ── "Other creators" section label + grid ── */
.m-cs-section-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--text3);
  margin: 0 0 10px;
}
/* Row of up to 3 equal columns; if there isn't room for all of them at
   their 128px minimum, the row scrolls horizontally instead of wrapping
   or squeezing — matches the mockup's "OTHER LIVE CREATORS" strip. */
.m-cs-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 1fr);
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin: 0 -2px;
  padding-left: 2px;
  padding-right: 2px;
}
.m-cs-grid::-webkit-scrollbar { display: none; }
.m-cs-grid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 14px 10px 12px;
  cursor: pointer;
  scroll-snap-align: start;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s, border-color .12s;
}
.m-cs-grid-card:active { background: rgba(255,255,255,.06); border-color: rgba(139,92,246,.4); transform: scale(.98); }
.m-cs-grid-card .m-cs-avatar { width: 40px; height: 40px; font-size: 15px; }
.m-cs-grid-card .m-cs-name { font-size: 11px; }
.m-cs-grid-card .m-cs-blurb {
  margin: 6px 0 10px;
  font-size: 10px;
  -webkit-line-clamp: 2;
}
.m-cs-grid-watch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid rgba(139,92,246,.4);
  border-radius: 6px;
  color: var(--aeon-violet, #8b5cf6);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* ── Upcoming Streams row — the Fed calendar event folded into Creator
   Space (see _mCsUpcomingHtml in app.js), styled like the Benjamin
   Cowen/DegenSpartan rows from the original mockup: avatar, name +
   title, date/time on the right. ── */
.m-cs-upcoming-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--border2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s;
}
.m-cs-upcoming-row:last-child { border-bottom: none; }
.m-cs-upcoming-row:active { background: rgba(255,255,255,.03); }
.m-cs-upcoming-row .m-cs-avatar { flex-shrink: 0; }
.m-cs-upcoming-info { min-width: 0; flex: 1; }
.m-cs-upcoming-title {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text2);
  font-size: 10.5px;
}
.m-cs-upcoming-when {
  flex-shrink: 0;
  text-align: right;
}
.m-cs-upcoming-date {
  color: var(--text2);
  font-family: var(--mono);
  font-size: 9px;
}
.m-cs-upcoming-time {
  margin-top: 3px;
  padding: 3px 7px;
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
}

/* ── Creator Space — inline player view (swaps in for the list) ── */
.m-cs-player-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text2);
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  padding: 0 0 12px;
  -webkit-tap-highlight-color: transparent;
}
.m-cs-player-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.m-cs-player-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 10px;
}
.m-cs-player-tag--live {
  color: var(--red, #f43f5e);
  background: rgba(244,63,94,.12);
  border-color: rgba(244,63,94,.35);
}
.m-cs-player-note {
  font-size: 10.5px;
  color: var(--text3);
  text-align: center;
  margin-top: -4px;
}
.m-cs-player-note a { color: var(--aeon-violet, #8b5cf6); text-decoration: none; }

/* ── Chart overlay — Binance style ── */
#mChartOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 410; /* was tied with #mCockpitOverlay at 400 — since #mCockpitOverlay
                   comes later in the DOM, the tie meant cockpit always painted
                   on top and buried the chart when both were open (e.g.
                   expanding a mini-chart from inside cockpit). Bumped above it
                   so chart always wins; still safely under #mTickerStrip (450),
                   which is deliberately layered above the chart overlay. */
  background: var(--bg);
  flex-direction: column;
  overscroll-behavior: none;
  touch-action: pan-y;
}
#mChartOverlay.open { display: flex; }

/* Top bar: coin price + stats */
#mChartTopBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border);
  background: rgba(4,6,12,.98);
  flex-shrink: 0;
}

/* TF strip */
#mChartTfStrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 14px;
  background: rgba(4,6,12,.95);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* Scoped to the full-screen chart's TF strip only — this used to be a
   bare `.m-tf-btn` rule with no #mChartTfStrip prefix, which meant it
   silently redefined the *global* .m-tf-btn base style (the pill look
   set up near the top of this file, used by the price card's 15M/1H/
   4H/1D row, Money Flow tabs, altcoin filters, etc.). Because it came
   later in the file with equal specificity, it won the cascade
   everywhere, not just inside the chart's TF strip — leaving those
   other timeframe rows with the wrong (near-invisible, transparent)
   look and the wrong active-state class (.on vs the real .m-tf-on /
   .active variants those components use). */
#mChartTfStrip .m-tf-btn {
  background: none;
  border: 1px solid transparent;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 8px;
  padding: 5px 10px;
  border-radius: 2px;
  cursor: pointer;
  letter-spacing: .06em;
  min-height: 28px;
  -webkit-tap-highlight-color: transparent;
}
#mChartTfStrip .m-tf-btn.on {
  background: rgba(59,130,246,.08);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* Chart canvas — takes remaining space */
#mChartWrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-height: 0;
}
#mChartWrap canvas { display: block; width: 100% !important; }
/* Watermark — same treatment as the Smart Money Flow card's watermark
   (#mSmartMoneyCard .m-card-watermark): a real <img>, centered, faded to
   a faint grayscale mark sitting behind the candlesticks. #mChartInner
   (and the canvas library rendering into it) is a sibling, not a parent,
   so redraws never wipe this out. */
.m-chart-watermark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 55%; height: auto; opacity: .09; pointer-events: none; user-select: none;
  filter: grayscale(1) brightness(3); object-fit: contain; z-index: 0;
}
#mChartInner { position: relative; z-index: 1; }

/* Bottom stats bar */
#mChartBottomBar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  background: rgba(4,6,12,.97);
  flex-shrink: 0;
}
.m-chart-stat {
  padding: 8px 10px;
  border-right: 1px solid var(--border);
}
.m-chart-stat:last-child { border-right: none; }
.m-chart-stat-l {
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: .08em;
  color: var(--text3);
  margin-bottom: 3px;
}
.m-chart-stat-v {
  font-family: var(--hdr);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}

/* ── Cockpit overlay ──
   Constrained to the same viewport slice as the MM Monitor tray / Engine
   Market overlay / coin picker sheet: it starts below the sticky header
   (#mMiniBar) and stops above the bottom tab strip (#mBottomNav) instead
   of covering the full viewport with inset:0, so both stay visible while
   the cockpit is open. --m-header-h is live-measured off #mMiniBar's
   actual rendered height (see app.html inline script); 56px is the
   no-JS/pre-measurement fallback. 54px matches #mBottomNav's height —
   the same value used by .proxy-tray and .m-market-overlay. */
#mCockpitOverlay {
  display: none;
  position: fixed;
  top: var(--m-header-h, 56px);
  left: 0;
  right: 0;
  bottom: 54px;
  z-index: 400;
  background: var(--bg);
  flex-direction: column;
  overflow: hidden; /* #mCockpitWrap (flex:1) scrolls internally, not this outer box */
}
#mCockpitOverlay.open { display: flex; }
#mCockpitBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,160,0,.2);
  background: rgba(255,160,0,.04);
  flex-shrink: 0;
  /* Sticks to the top of the overlay's own scroll area (which already
     starts below #mMiniBar), not the viewport — so it doesn't need to
     out-rank the real header any more. */
  position: sticky;
  top: 0;
  z-index: 10;
}
#mCockpitWrap { flex: 1; }

/* ── Watchlist tabs ── */
.m-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text3);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .12em;
  padding: 10px 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s, border-color .15s;
}
.m-tab.on {
  color: var(--cyan);
  border-bottom-color: var(--cyan);
}

/* ── Accordion cards ── */
.m-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
}
.m-accordion-body.open { max-height: 600px; }
.m-chevron {
  color: var(--cyan);
  font-size: 11px;
  transition: transform .25s;
  display: inline-block;
}
.m-accordion-open .m-chevron { transform: rotate(180deg); }

/* ── PRO/NOOB mode ── */
/* Noob mode hides .m-pro-only cards */
#mobileView.noob-mode .m-pro-only { display: none !important; }

/* PRO mode label */



/* ── Mobile calculator inputs ── */
.m-ci-group {
  margin-bottom: 10px;
}
.m-ci-lbl {
  font-family: var(--mono);
  font-size: 7.5px;
  letter-spacing: .1em;
  color: var(--text3);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.m-ci-hint { color: var(--text3); font-size: 7px; }
.m-ci-val  { font-weight: 700; }
.m-ci-field {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 10px;
}
.m-ci-pfx {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text3);
  margin-right: 4px;
  flex-shrink: 0;
}
.m-ci-inp {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: var(--hdr);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  padding: 8px 0;
  width: 100%;
  min-width: 0;
}
.m-ci-inp::placeholder { color: var(--text3); }

/* ── RR results — no height clipping ── */
#mRrResults { max-height: none !important; overflow: visible !important; }
#mRRBody.open { max-height: 9999px !important; }

/* ── Chart inner scroll ── */
#mChartInner {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#mChartInner canvas { display: block; width: 100% !important; }


/* ── Ensure diagnostics panel sits above mobile view ── */
@media (max-width: 768px) {
  #aeonHealthPanel,
  #aeonHealthOverlay {
    z-index: 10000 !important;
  }
  #aeonHealthPanel {
    width: 100vw !important;
    max-width: 100vw !important;
  }

  /* Indicator strip + strategy row in chart overlay */
  #mIndStrip {
    background: rgba(4,6,12,.97);
  }
  #mStratRow {
    background: rgba(3,5,10,.98);
    border-bottom: 1px solid var(--border);
  }

  /* Signal matrix in mobile card */
  #mSigMatrix .sig-matrix {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px;
    padding: 0;
  }
  #mSigMatrix .sig-item {
    font-size: 8px;
    padding: 6px 8px;
  }

  /* HTF content */
  #mHtfContent .htf-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px;
  }
  #mHtfContent .htf-cell {
    padding: 8px;
    font-size: 9px;
  }
}


/* ── Chart overlay swipe-in transition ── */
@media (max-width: 768px) {
  /* Chart overlay transition — defined at end of file */

  /* Swipe pull-tab hint */
  #mChartSwipeHint {
    transition: background .15s, opacity .3s;
  }

  /* Indicator strip */
  #mIndStrip { border-bottom: 1px solid var(--border); }
  #mIndStrip button { -webkit-tap-highlight-color: transparent; }
  #mStratRow { border-bottom: 1px solid var(--border); }
  #mStratRow button { -webkit-tap-highlight-color: transparent; }
}


/* ── Chart canvas sizing inside mobile overlay ── */
@media (max-width: 768px) {
  #mChartInner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* pcChartContent must fill width */
  #mChartInner #pcChartContent {
    flex: 1;
    width: 100% !important;
    min-width: 0;
  }
  #mChartInner #pcMainWrap {
    width: 100% !important;
    position: relative;
  }
  #mChartInner #pcMain {
    display: block;
    width: 100% !important;
    height: 320px !important;
  }
  /* Sub-panels: display controlled by JS togglePcInd — no forced display here */
  #mChartInner #pcRsiWrap,
  #mChartInner #pcMacdWrap,
  #mChartInner #pcDeltaSubWrap { /* controlled by togglePcInd */ }

  /* Chart overlay — start off-screen, slide in */
  #mChartOverlay {
    transform: translateX(100%) !important;
    display: flex !important;
    pointer-events: none;
    will-change: transform;
  }
  #mChartOverlay.open {
    transform: translateX(0) !important;
    pointer-events: auto;
  }
}
/* ═══════════════════════════════════════════════════════════════
   LEFT TICKER STRIP — add to the END of style.css
   Mirrors the right-side #mChartOverlay pattern but as a
   partial-width strip that slides in from the LEFT edge.
════════════════════════════════════════════════════════════════ */

/* ── Strip overlay base (hidden on desktop, handled by mobile block below) ── */
#mTickerStrip {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 54px;           /* stop above #mBottomNav — matches #mCockpitOverlay's slice */
  width: 100vw;          /* full viewport — two-column layout */
  z-index: 450;          /* above chart overlay (400) */
  flex-direction: column;
  background: rgba(4, 6, 12, 0.96);
  box-shadow: 4px 0 32px rgba(0,0,0,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateX(-100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  will-change: transform;
  overflow: hidden;
  overscroll-behavior: none;   /* prevent scroll bubbling to page beneath */
  touch-action: pan-y;         /* allow vertical scroll inside overlay only */
}

/* Open state — strip slides fully into view */
#mTickerStrip.open {
  display: flex;
  transform: translateX(0);
}

/* No backdrop needed — strip IS the full screen */
#mTickerStrip.open::before {
  display: none;
}

/* While chat is open, #mBottomNav (z-index 590) already sits visibly on top
   of the strip since the strip stops at bottom:54px — but #proxyTray
   (z-index 588) would otherwise still float above the strip too. Hide it
   for the duration, same body-class pattern as body.aeon-locked above. */
body.m-chat-strip-open #proxyTray { display: none !important; }


/* ── Two-column body: moon panel (left) + markets (right) ── */
#mTickerInner {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* LEFT column — moon phases, takes remaining space */
#mMoonPanel {
  flex: 1;
  min-width: 0;
  border-right: 1px solid rgba(59,130,246,.08);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 11px 16px;
  background: transparent;
}
#mMoonPanel::-webkit-scrollbar { width: 2px; }
#mMoonPanel::-webkit-scrollbar-thumb { background: rgba(255,220,100,.15); border-radius: 2px; }

/* Moon panel section header */
#mMoonPanel .m-moon-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .14em;
  color: rgba(255,220,100,.55);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,220,100,.08);
}
#mMoonPanel .m-moon-hdr svg {
  flex-shrink: 0;
  stroke: rgba(255,220,100,.55);
  fill: none;
}

/* RIGHT column — existing macro + ticker list, fixed 170px to match original */
#mTickerRight {
  width: 170px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 1px solid rgba(59,130,246,.08);
}

/* ══════════════════════════════════════════════════════════════════════
   COMMUNITY CHAT — replaces the old moon-panel/ticker two-column body.
   Same #mTickerInner flex container, new children (#mChatSidebar +
   #mChatThread). Sized for the ~360-390px mobile viewport this strip
   already runs in — see JS wiring in app.js under "COMMUNITY CHAT".
   ══════════════════════════════════════════════════════════════════════ */

#mChatSidebar {
  width: 38vw;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--border2);
  background: rgba(255,255,255,.012);
}

#mChatSidebarHdr {
  display: flex;
  align-items: center;
  padding: 10px 10px 7px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
  color: var(--text3);
  flex-shrink: 0;
}

#mChatChannelList, #mChatNewDmList {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 6px 10px;
}
#mChatChannelList::-webkit-scrollbar, #mChatNewDmList::-webkit-scrollbar, #mChatMessages::-webkit-scrollbar { width: 2px; }
#mChatChannelList::-webkit-scrollbar-thumb, #mChatNewDmList::-webkit-scrollbar-thumb { background: var(--aeon-glow); border-radius: 2px; }

/* Sidebar group headers — "Channels" / "Direct Messages" */
.m-chat-section-label {
  font-family: var(--mono);
  font-size: 6.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text4);
  padding: 10px 4px 5px;
}
.m-chat-section-label:first-child { padding-top: 4px; }

.m-chat-convo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: 2px;
  position: relative;
  transition: background .12s ease;
}
.m-chat-convo:active { background: rgba(255,255,255,.05); }
.m-chat-convo.active {
  background: var(--p-dim);
  border: 1px solid rgba(139,92,246,.32);
  box-shadow: inset 2px 0 0 var(--aeon-violet);
}
.m-chat-convo-icon {
  width: 26px; height: 26px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  background: rgba(139,92,246,.14);
  color: var(--aeon-violet);
  position: relative;
}
.m-chat-convo-icon.is-dm { border-radius: 50%; font-weight: 800; color: #fff; font-size: 9.5px; }
.m-chat-online-dot {
  position: absolute;
  bottom: -1px; right: -1px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  border: 1.5px solid var(--s3);
}
.m-chat-convo-body { flex: 1; min-width: 0; }
.m-chat-convo-name {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-chat-convo-preview {
  font-family: var(--font);
  font-size: 8px;
  color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 2px;
}
.m-chat-convo-meta {
  flex-shrink: 0;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
}
.m-chat-convo-time { font-family: var(--mono); font-size: 6.5px; color: var(--text4); }
.m-chat-unread-badge {
  min-width: 14px; height: 14px; padding: 0 4px;
  border-radius: 7px;
  background: var(--aeon-gradient);
  color: #fff;
  font-family: var(--mono); font-size: 7px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Sticky upsell footer — a flex-shrink:0 sibling below the scrollable
   channel list, so it stays pinned at the bottom of the sidebar without
   scrolling away, rather than living inside #mChatChannelList itself. */
#mChatUpsellCard {
  flex-shrink: 0;
  display: none; /* toggled to flex by _mChatRenderUpsellCard() when applicable */
  align-items: center;
  gap: 8px;
  margin: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(245,158,11,.35);
  background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(139,92,246,.08));
  text-decoration: none;
  cursor: pointer;
}
#mChatUpsellCard:active {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(139,92,246,.12));
}
#mChatUpsellIcon { font-size: 16px; flex-shrink: 0; }
#mChatUpsellBody { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#mChatUpsellTitle { font-family: var(--font); font-size: 9.5px; font-weight: 700; color: var(--text); }
#mChatUpsellDesc { font-family: var(--font); font-size: 8px; color: var(--text3); line-height: 1.3; }
#mChatUpsellArrow { font-size: 14px; color: var(--text3); flex-shrink: 0; }

#mChatNewDmHdr {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 6px;
  font-family: var(--font); font-size: 9.5px; font-weight: 700; color: var(--text);
  border-bottom: 1px solid var(--border2);
  margin-bottom: 4px;
}
#mChatNewDmHdr button {
  background: none; border: none; color: var(--text2); font-size: 14px; cursor: pointer; padding: 0 2px;
}
.m-chat-dm-user {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 5px;
  border-radius: var(--rl);
  cursor: pointer;
  font-family: var(--font); font-size: 9px; color: var(--text2);
}
.m-chat-dm-user:active { background: rgba(255,255,255,.04); }

/* ── Thread (right column) ── */
#mChatThread {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: transparent;
}

#mChatThreadHdr {
  flex-shrink: 0;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border2);
}
#mChatThreadHdrTop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#mChatThreadHdrInfo { display: flex; align-items: center; gap: 9px; min-width: 0; }
#mChatThreadIcon {
  width: 28px; height: 28px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  background: rgba(139,92,246,.14);
  color: var(--aeon-violet);
}
#mChatThreadName { font-family: var(--hdr); font-size: 12px; font-weight: 800; color: var(--text); line-height: 1.2; }
#mChatThreadSub { font-family: var(--mono); font-size: 7px; color: var(--green); letter-spacing: .04em; margin-top: 2px; }
#mChatThreadSub.offline { color: var(--text4); }

#mChatThreadActions { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.m-chat-thread-action {
  width: 32px; height: 32px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.m-chat-thread-action:active { background: rgba(255,255,255,.06); color: var(--text); }

#mChatThreadDesc {
  font-family: var(--font);
  font-size: 8.5px;
  color: var(--text3);
  line-height: 1.4;
  margin-top: 6px;
}

#mChatSearchRow {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 9px;
  border-radius: 10px;
  background: var(--s4);
  border: 1px solid var(--border2);
  color: var(--text4);
}
#mChatSearchRow input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font-family: var(--font);
  font-size: 9.5px;
  color: var(--text);
}
#mChatSearchRow input::placeholder { color: var(--text4); }
#mChatSearchRow input:focus { outline: none; }
#mChatSearchRow button {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text4);
  font-size: 10px;
  cursor: pointer;
  padding: 2px;
}

#mChatMessages {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 9px 6px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#mChatEmptyState {
  margin: auto;
  text-align: center;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text4);
  padding: 0 20px;
  line-height: 1.6;
}

.m-chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.m-chat-msg-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 9.5px; font-weight: 800; color: #fff;
  margin-top: 2px;
  box-shadow: 0 0 0 2px var(--s3);
}
.m-chat-msg-body { flex: 1; min-width: 0; }
.m-chat-msg-hdr { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.m-chat-msg-name { font-family: var(--font); font-size: 9.5px; font-weight: 700; color: var(--text); }
.m-chat-msg-time { font-family: var(--mono); font-size: 6.5px; color: var(--text4); }
.m-chat-msg-bubble {
  display: inline-block;
  background: var(--s4);
  border: 1px solid var(--border2);
  border-radius: 12px;
  padding: 9px 12px;
  font-family: var(--font);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text2);
  word-break: break-word;
  max-width: 100%;
}
.m-chat-msg-bubble.deleted { color: var(--text4); font-style: italic; }
.m-chat-msg.mine { flex-direction: row-reverse; align-items: flex-end; }
.m-chat-msg.mine .m-chat-msg-avatar { margin-top: 0; }
.m-chat-msg.mine .m-chat-msg-hdr { flex-direction: row-reverse; }
.m-chat-msg.mine .m-chat-msg-name { display: none; }
.m-chat-msg.mine .m-chat-msg-body { display: flex; flex-direction: column; align-items: flex-end; }
.m-chat-msg.mine .m-chat-msg-bubble {
  background: #241A3F;
  border: 1px solid rgba(139,92,246,.3);
  color: #EDE9FE;
  box-shadow: none;
}

.m-chat-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.m-chat-reaction-pill {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2);
  font-family: var(--mono); font-size: 8.5px;
  color: var(--text3);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.m-chat-reaction-pill.mine {
  background: var(--p-dim);
  border-color: var(--aeon-glow);
  color: var(--aeon-violet);
}
.m-chat-reaction-add {
  padding: 1px 5px;
  border-radius: 8px;
  border: 1px dashed var(--border3);
  color: var(--text4);
  font-size: 9px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.m-chat-report-btn {
  padding: 1px 5px;
  border-radius: 8px;
  color: var(--text4);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s;
}
.m-chat-msg:hover .m-chat-reaction-add, .m-chat-msg:hover .m-chat-report-btn,
.m-chat-msg:active .m-chat-reaction-add, .m-chat-msg:active .m-chat-report-btn { opacity: 1; }
.m-chat-reaction-picker {
  position: absolute;
  display: flex; gap: 4px;
  background: var(--s2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 4px 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  z-index: 999; /* appended to document.body — must clear #mTickerStrip's z-index:450 */
}
.m-chat-reaction-picker span { font-size: 14px; cursor: pointer; padding: 2px; }

/* Report menu reuses .m-chat-reaction-picker's box, laid out as a
   vertical list of text reasons instead of a horizontal emoji row. */
.m-chat-reaction-picker.m-chat-report-menu {
  flex-direction: column;
  gap: 0;
  padding: 4px;
  min-width: 150px;
}
.m-chat-report-menu .m-chat-report-item {
  font-family: var(--font);
  font-size: 9.5px;
  color: var(--text2);
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.m-chat-report-menu .m-chat-report-item:active { background: rgba(255,255,255,.06); }

/* Emoji picker reuses .m-chat-reaction-picker's box too, wrapped into a
   small grid instead of a single row or vertical list. */
.m-chat-reaction-picker.m-chat-emoji-menu {
  flex-wrap: wrap;
  max-width: 190px;
  gap: 2px;
}
.m-chat-emoji-menu span { font-size: 16px; padding: 4px; }
.m-chat-emoji-menu span:active { background: rgba(255,255,255,.08); border-radius: 6px; }

#mChatComposerError {
  flex-shrink: 0;
  display: none;
  padding: 5px 11px;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--red);
  background: rgba(232,57,78,.06);
  border-top: 1px solid rgba(232,57,78,.15);
}

/* Shown instead of (never alongside) the composer error banner, when
   the active channel's post-tier floor (see server.js
   CHAT_CHANNEL_POST_MIN_TIER) is above the account's effective plan. */
#mChatComposerLock {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 8px 10px 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(139,92,246,.08);
  border: 1px solid rgba(139,92,246,.25);
}
#mChatComposerLockText { font-family: var(--font); font-size: 8.5px; color: var(--text2); }
#mChatComposerLock a {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 7.5px; font-weight: 700;
  color: #fff;
  background: var(--aeon-gradient);
  padding: 4px 9px;
  border-radius: 8px;
  text-decoration: none;
}

#mChatTypingRow {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 11px;
  font-family: var(--mono); font-size: 7.5px; color: var(--text3);
}
.m-chat-typing-dots { display: flex; gap: 2px; }
.m-chat-typing-dots i {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--aeon-violet);
  display: inline-block;
  animation: mChatTypingBounce 1.1s infinite ease-in-out;
}
.m-chat-typing-dots i:nth-child(2) { animation-delay: .15s; }
.m-chat-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes mChatTypingBounce { 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30% { transform: translateY(-2px); opacity:1; } }

#mChatComposer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 10px;
  margin-bottom: max(10px, env(safe-area-inset-bottom));
  padding: 7px 7px 7px 14px;
  border: 1px solid rgba(139,92,246,.28);
  border-radius: 18px;
  background: rgba(255,255,255,.02);
}
#mChatEmojiBtn {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
#mChatEmojiBtn:active { background: rgba(255,255,255,.06); color: var(--text); }
#mChatInput {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 7px 0;
  font-family: var(--font);
  font-size: 10.5px;
  color: var(--text);
}
#mChatInput::placeholder { color: var(--text4); }
#mChatInput:focus { outline: none; }
#mChatInput:disabled { color: var(--text4); cursor: not-allowed; }
#mChatEmojiBtn:disabled, #mChatSendBtn:disabled { cursor: not-allowed; opacity: .35; }
#mChatSendBtn {
  flex-shrink: 0;
  width: 35px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--aeon-gradient);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px var(--aeon-glow);
}
#mChatSendBtn:disabled { opacity: .4; box-shadow: none; }

/* ── Chat username gate — sits inline in #mTickerStrip's flex column
   (header → gate → two-column body), so it just swaps places with
   #mTickerInner rather than needing absolute positioning. ── */
#mChatUsernameGate {
  display: none;
  flex: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--s3);
}
#mChatGateCard {
  width: 100%;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
#mChatGateClose {
  position: absolute;
  top: -8px; right: -4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 13px;
  cursor: pointer;
}
#mChatGateTitle {
  font-family: var(--hdr);
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
}
#mChatGateSub {
  font-family: var(--font);
  font-size: 9px;
  color: var(--text3);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 4px;
}
#mChatGateInput {
  background: var(--s4);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--font);
  font-size: 11px;
  color: var(--text);
  text-align: center;
}
#mChatGateInput:focus { outline: none; border-color: var(--aeon-glow); }
#mChatGateStatus {
  font-family: var(--mono);
  font-size: 8px;
  text-align: center;
  min-height: 10px;
  color: var(--text4);
}
#mChatGateStatus.ok { color: var(--green); }
#mChatGateStatus.bad { color: var(--red); }
#mChatGateStatus.cooldown { color: var(--amber); }
#mChatGateInput:disabled { opacity: .4; cursor: not-allowed; }
#mChatGateSubmit {
  margin-top: 4px;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: var(--aeon-gradient);
  color: #fff;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
}
#mChatGateSubmit:disabled { opacity: .35; cursor: default; }

/* ── Header (legacy — ticker strip chrome, still used) ── */
#mTickerHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 1px solid rgba(59,130,246,.1);
  background: rgba(4,6,12,.55);
  flex-shrink: 0;
}

/* ── Scrollable ticker list — inside #mTickerRight ── */
#mTickerList {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 0;
  min-height: 0;
}
#mTickerList::-webkit-scrollbar { width: 2px; }
#mTickerList::-webkit-scrollbar-thumb { background: rgba(59,130,246,.15); border-radius: 2px; }

/* ── Individual ticker row ── */
.m-ticker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(59,130,246,.05);
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.m-ticker-row:last-child { border-bottom: none; }
.m-ticker-row:active { background: rgba(59,130,246,.04); }

/* Left: icon + name */
.m-tkr-left {
  display: flex;
  align-items: center;
  gap: 9px;
}
.m-tkr-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.m-tkr-sym {
  font-family: var(--hdr);
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}
.m-tkr-name {
  font-family: var(--mono);
  font-size: 7.5px;
  color: var(--text3);
  letter-spacing: .04em;
  margin-top: 1px;
}

/* Right: price + change */
.m-tkr-right {
  text-align: right;
}
.m-tkr-price {
  font-family: var(--mono);      /* Share Tech Mono — narrower than Orbitron at same size */
  font-size: 11px;               /* was 12px Orbitron — mono at 11px renders similarly */
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 74px;               /* caps long prices like $4,593.07 from crowding icon column */
}
.m-tkr-chg {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  margin-top: 2px;
  display: inline-block;
  padding: 1px 5px;
  border-radius: 2px;
}
.m-tkr-chg.up      { color: var(--green); background: rgba(0,255,136,.1); }
.m-tkr-chg.down    { color: var(--red);   background: rgba(255,45,85,.1); }
.m-tkr-chg.neutral { color: var(--text2); background: rgba(255,255,255,.04); }

/* Section divider */
.m-tkr-divider {
  padding: 6px 12px 4px;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .14em;
  color: var(--text3);
  text-transform: uppercase;
  border-bottom: 1px solid rgba(59,130,246,.07);
  margin-top: 4px;
  opacity: .7;
}

/* ── Footer timestamp ── */
#mTickerFooter {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(59,130,246,.08);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .1em;
  color: rgba(59,130,246,.35);
  flex-shrink: 0;
  background: rgba(4,6,12,.55);
}

/* ── Macro section inside strip ── */
#mStripMacro {
  flex-shrink: 0;
  padding: 8px 12px 6px;
  background: rgba(4,6,12,.35);
}
.m-strip-sec-hdr {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .14em;
  color: rgba(59,130,246,.45);
  text-transform: uppercase;
  margin-bottom: 6px;
}
#mStripMacroGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.m-strip-macro-cell {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(59,130,246,.06);
  border-radius: 3px;
  padding: 5px 7px;
}
/* ETF flow spans both columns */
.m-strip-macro-full {
  grid-column: 1 / -1;
}
.m-strip-macro-l {
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: .1em;
  color: var(--text3);
  margin-bottom: 2px;
}
.m-strip-macro-v {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: #fff;
}
.m-strip-macro-s {
  font-family: var(--mono);
  font-size: 6px;
  color: var(--text3);
  margin-top: 1px;
  letter-spacing: .04em;
}
.m-strip-divider-line {
  flex-shrink: 0;
  height: 1px;
  background: rgba(59,130,246,.1);
  margin: 0;
}

/* ── Pull-tab hint on LEFT edge (visible when strip is closed) ── */
#mTickerSwipeHint {
  display: none;
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 56px;
  z-index: 300;
  background: rgb(4 6 12 / 65%);
  border: 1px solid rgb(139 92 246 / 70%);
  border-left: none;
  border-radius: 0 6px 6px 0;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: #F2F4F7;
  pointer-events: none;
  transition: background .2s;
}

/* ── Close hint — hidden: strip is now full-screen, header has close btn ── */
#mTickerCloseHint {
  display: none !important;
}

/* Moon timeline horizontal scroll zone — tell browser this scrolls horizontally */
#mMoonTimeline {
  touch-action: pan-x;
  overflow-x: auto;
  overflow-y: hidden;
}
#dMoonTimeline {
  touch-action: pan-x;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ── Mobile only ── */
@media (max-width: 768px) {
  #mTickerStrip        { display: flex; transform: translateX(-100%); }
  #mTickerSwipeHint    { display: flex; }
  #mTickerStrip.open + #mTickerCloseHint,
  #mTickerCloseHint.open { display: flex; }

  /* Both swipe-hint tabs (#mTickerSwipeHint on the left, #mChartSwipeHint
     on the right — see app.js) are appended once to <body> and left
     visible globally by the JS that drives them, rather than scoped to
     whichever tab their gesture is actually relevant on. That left them
     showing up as two stray edge tabs on Profile (and every other
     non-Home tab). Their JS toggles visibility via inline styles, so
     !important is needed here to win over that. */
  body[data-mtab="profile"] #mTickerSwipeHint,
  body[data-mtab="profile"] #mChartSwipeHint {
    display: none !important;
  }
}

/* Price flash animation on data update */
@keyframes mTkrFlash {
  0%   { opacity: .45; }
  50%  { opacity: 1; }
  100% { opacity: 1; }
}
.m-tkr-flash { animation: mTkrFlash .35s ease-out; }


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE CHART — Pressure HUD + Trade Feed
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Pressure HUD row ── */
  #mPressureRow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--border);
    background: rgba(4,6,12,.97);
    flex-shrink: 0;
  }
  .m-hud-cell {
    padding: 8px 10px;
    border-right: 1px solid var(--border);
  }
  .m-hud-cell:last-child { border-right: none; }
  .m-hud-lbl {
    font-family: var(--mono);
    font-size: 6.5px;
    letter-spacing: .1em;
    color: var(--text3);
    margin-bottom: 4px;
    white-space: nowrap;
  }
  .m-hud-val {
    font-family: var(--hdr);
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
  }
  .m-hud-sub {
    font-family: var(--mono);
    font-size: 6.5px;
    color: var(--text3);
  }

  /* ── Trade feed ── */
  #mTradeFeedWrap {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    background: rgba(4,6,12,.97);
    flex-shrink: 0;
    max-height: 130px;
  }
  #mTradeFeedList {
    overflow-y: auto;
    scrollbar-width: none;
    flex: 1;
  }
  #mTradeFeedList::-webkit-scrollbar { display: none; }
  .m-trade-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    font-family: var(--mono);
    font-size: 9px;
    border-bottom: 1px solid rgba(255,255,255,.03);
    border-left: 2px solid;
  }
  .m-trade-row.buy  { border-color: rgba(0,255,136,.5); background: rgba(0,255,136,.02); }
  .m-trade-row.sell { border-color: rgba(255,45,85,.5);  background: rgba(255,45,85,.02); }
  .m-trade-side { font-size: 8px; flex-shrink: 0; width: 12px; }
  .m-trade-row.buy  .m-trade-side { color: var(--green); }
  .m-trade-row.sell .m-trade-side { color: var(--red); }
  .m-trade-exch { color: var(--text3); flex: 1; font-size: 8px; }
  .m-trade-usd  { font-weight: 700; color: #fff; min-width: 50px; text-align: right; }
  .m-trade-ts   { color: var(--text3); font-size: 7.5px; flex-shrink: 0; }

  /* ── Chart overlay — full viewport, dynamic flex ── */
  #mChartOverlay {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset: 0;
    /* Bottom padding for Samsung/Android nav bar */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.16,1,.3,1);
    pointer-events: none;
    will-change: transform;
    overflow: hidden;
  }
  #mChartOverlay.open {
    transform: translateX(0) !important;
    pointer-events: auto;
  }

  /* Chart canvas area fills all remaining space */
  #mChartWrap {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    position: relative;
    overscroll-behavior: none;
  }
  #mChartInner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* no scroll — canvas fills exactly */
  }
  /* pcChartContent: scrollable column — main chart + sub-panels stack vertically */
  #mChartInner #pcChartContent {
    flex: 1;
    min-height: 0;
    width: 100% !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
  }
  /* pcMainWrap: does NOT flex-grow — JS sets its height explicitly via _forceDraw */
  #mChartInner #pcMainWrap {
    flex-shrink: 0 !important;
    width: 100% !important;
    position: relative;
  }
  /* pcMain canvas: fill whatever height JS gave pcMainWrap */
  #mChartInner #pcMain {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 180px;
  }
  /* Volume strip — fixed height, stacks below main canvas.
     display is controlled by JS togglePcInd — do NOT force block here. */
  #mChartInner #pcVolWrap {
    flex-shrink: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
  }
  #mChartInner #pcVol {
    height: 48px !important;
  }
  /* Sub-indicators — stack below vol, shown only when toggled */
  #mChartInner #pcRsiWrap,
  #mChartInner #pcMacdWrap,
  #mChartInner #pcDeltaSubWrap,
  #mChartInner #pcExhaustSubWrap {
    flex-shrink: 0 !important;
    width: 100% !important;
  }
}


/* ── Money flow full-width row ── */
@media (max-width: 768px) {
  #mPressureRow {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #mMfRow {
    padding: 8px 12px 10px;
    border-top: 1px solid var(--border);
    background: rgba(4,6,12,.97);
    flex-shrink: 0;
  }
  /* MF tiers display horizontally in full width */
  #mHudMfTiers {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--mono);
    font-size: 8.5px;
  }
  /* Each tier item gets equal space */
  #mHudMfTiers > * {
    flex: 1 1 0;
    min-width: 0;
  }
  /* Override any vertical layout from the desktop clone */
  #mHudMfTiers .mf-tier-row,
  #mHudMfTiers [class*="mf-tier"] {
    display: flex;
    flex-direction: column;
    padding: 6px 8px;
    background: rgba(255,255,255,.02);
    border: 1px solid var(--border);
    border-radius: 4px;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE CHART — Layout fixes (height, scroll hint, MF badge, bottom bar)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Indicator strip + strategy row scroll hint (fade-out right edge) ── */
  #mIndStrip,
  #mStratRow {
    -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, black 85%, transparent 100%);
    flex-shrink: 0;
    scrollbar-width: none;
  }
  #mIndStrip::-webkit-scrollbar,
  #mStratRow::-webkit-scrollbar { display: none; }
  #mIndStrip button,
  #mStratRow button { -webkit-tap-highlight-color: transparent; }

  /* ── Money flow verdict badge — prevent overflow ── */
  #mHudMfTiers [class*="verdict"],
  #mHudMfTiers [class*="badge"],
  #mHudMfTiers [class*="aligned"],
  #mHudMfTiers [class*="signal"] {
    font-size: 7px !important;
    padding: 2px 4px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  #mHudMfTiers .mf-verdict,
  #mHudMfTiers .mf-signal-badge {
    font-size: 7px !important;
    padding: 3px 5px !important;
    letter-spacing: .04em !important;
  }

  /* ── Bottom bar — safe area + no clipping ── */
  #mChartBottomBar {
    flex-shrink: 0;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    background: rgba(4,6,12,.98);
  }
  .m-chart-stat-v {
    font-size: 9px !important;  /* slightly smaller so text fits */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .m-chart-stat-l {
    font-size: 6px !important;
  }

  /* ── Trade feed — safe area bottom ── */
  #mTradeFeedWrap {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* ── Pressure HUD — tighter padding on small screens ── */
  .m-hud-cell {
    padding: 6px 8px;
  }
  .m-hud-val {
    font-size: 10px;
  }

  /* ── Close hint tab — sit above nav bar ── */
  #mChartCloseHint {
    bottom: calc(50% + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════
   MOBILE — Glassmorphic card overrides
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Semi-transparent glass base for all mobile cards */
  .mc {
    background: rgba(6, 10, 20, 0.55) !important;
    backdrop-filter: blur(18px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
    border: 1px solid rgba(59, 130, 246, 0.10) !important;
    border-top-color: rgba(59, 130, 246, 0.20) !important;
    border-radius: 10px !important;
    box-shadow:
      0 2px 24px rgba(0, 0, 0, 0.45),
      0 0 0 0.5px rgba(59,130,246,0.042) inset !important;
  }

  /* Glass Watchlist/Fibonacci card — it now uses "m-card" instead of
     "mc" (see the visibility-gating rules further down), so the base
     .mc glass rule above no longer reaches it. Re-apply the identical
     glass treatment scoped to it specifically via :has(), the same way
     #mFgCard/#mHtfCard get their own overrides below, rather than
     applying glass to every .m-card (which is used by many unrelated,
     intentionally-solid cards elsewhere on Home/Signals). */
  #mContent .m-card:has(#mPaneWl) {
    background: var(--surface) !important;
    border: 1px solid rgba(59, 130, 246, 0.10) !important;
    border-top-color: rgba(59, 130, 246, 0.20) !important;
    border-radius: 10px !important;
    box-shadow:
      0 2px 24px rgba(0, 0, 0, 0.45),
      0 0 0 0.5px rgba(59,130,246,0.042) inset !important;
  }

  /* Glass Liquidations card — solid m-card background, no blur, same
     border/radius/box-shadow as the base .mc glass rule above. Scoped
     via :has() rather than editing the base .mc rule, since Liquidations
     still uses the shared "mc" class and other .mc cards should keep
     their blur. */
  #mContent .mc:has(#mLiqEvents) {
    background: var(--surface) !important;
    border: 1px solid rgba(59, 130, 246, 0.10) !important;
    border-top-color: rgba(59, 130, 246, 0.20) !important;
    border-radius: 10px !important;
    box-shadow:
      0 2px 24px rgba(0, 0, 0, 0.45),
      0 0 0 0.5px rgba(59,130,246,0.042) inset !important;
  }

  /* Glass Fear & Greed card — slight cyan tint */
  #mFgCard {
    background: rgba(0, 18, 26, 0.50) !important;
    border-top-color: rgba(59, 130, 246, 0.28) !important;
  }

  /* ── HTF Revamp — TF strip + percentage row ──
     The mockup borders only the timeframe labels (15M/1H/4H/1D) as a
     segmented strip; the arrow+% row underneath stays plain/unbordered. */
  .m-htf-tf-strip {
    display: flex;
    margin: 10px 14px 8px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 8px;
    overflow: hidden;
  }

  .m-htf-tf-btn {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .14em;
    color: rgba(155,170,192,.5);
    border-right: 1px solid rgba(255,255,255,.1);
    cursor: pointer;
    transition: background .15s, color .15s;
    -webkit-tap-highlight-color: transparent;
  }
  .m-htf-tf-btn:last-child { border-right: none; }

  .m-htf-tf-btn.active {
    color: rgba(215,222,235,.9);
    background: rgba(255,255,255,.05);
  }

  .m-htf-pct-row {
    display: flex;
    gap: 6px;
    padding: 0 14px 12px;
  }

  .m-htf-pct-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .m-htf-pill-arrow {
    color: currentColor;
  }

  .m-htf-pill-str {
    font-family: var(--hdr);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: inherit;
  }

  /* Note: .m-htf-pct-item's trend color comes from an inline style in
     app.js (_mHtfTrendColor), not a bare up/down/side class — this
     avoids the collision the old .m-htf-pill design had with the
     generic .up/.dn price-badge utility (style.css ~L580), which leaked
     a background+border onto anything carrying a plain "up" class. */

  /* ── HTF momentum chart — real close-price line for the active pill's
     timeframe (candles15m/candles/candles4h/candles1d), smoothed +
     gradient-filled, colored to match that timeframe's trend. ── */
  .m-htf-chart-wrap {
    position: relative;
    height: 70px;
    margin: 0 0 10px;
  }
  .m-htf-chart-wrap canvas {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    padding: 0px 8px 0 8px;
    display: block;
  }

  /* ── HTF detail panel ── */
  .m-htf-detail {
    /* Spacing/border/background now come from inline styles set in
       _mHtfDetailHtml() — they're trend-colored (green/red/cyan), which
       can't be expressed as a single static class. This just owns the
       show/hide toggle. */
    display: none;
  }
  .m-htf-detail.active { display: block; }

  /* Probability split bar */
  .m-htf-prob-bar {
    height: 5px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255,255,255,.05);
    display: flex;
    margin: 10px 0 6px;
  }
  .m-htf-prob-up   { background: linear-gradient(90deg, rgba(0,255,136,.8), rgba(0,255,136,.5)); transition: width .9s cubic-bezier(.34,1.2,.64,1); }
  .m-htf-prob-down { background: linear-gradient(90deg, rgba(255,45,85,.4), rgba(255,45,85,.8)); transition: width .9s cubic-bezier(.34,1.2,.64,1); }

  .m-htf-prob-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  /* Stat row inside detail */
  .m-htf-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  .m-htf-stat-row:last-child { border-bottom: none; }
  .m-htf-stat-l {
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .1em;
    color: rgba(155,170,192,.4);
  }
  .m-htf-stat-v {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: rgba(215,222,235,.85);
  }

  /* Reversal factors chip list */
  .m-htf-factors {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
  }
  .m-htf-factor-chip {
    font-family: var(--mono);
    font-size: 6.5px;
    letter-spacing: .07em;
    padding: 3px 7px;
    border-radius: 3px;
    background: rgba(255,170,0,.07);
    border: 1px solid rgba(255,170,0,.2);
    color: rgba(255,170,0,.8);
  }

  /* Entry timing badge */
  .m-htf-entry-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .1em;
    padding: 4px 9px;
    border-radius: 4px;
    margin-bottom: 12px;
  }

  /* ── Fear & Greed glass improvements ── */
  #mFgGauge svg {
    filter: drop-shadow(0 0 18px rgba(0,0,0,.6));
  }

  /* Glassmorphic history bars */
  #mFgHistory .fg-bar-wrap {
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 4px;
    overflow: hidden;
  }


  /* ══ PRICE CARD — Premium cosmetic lift to match F&G card ══ */

  /* ① Brighter header on first card (// PRICE) */
  #mContent > .mc:first-child .mc-hdr {
    color: rgba(59, 130, 246, 0.55);
  }

  /* ③ Stronger top border — matches #mFgCard */
  #mContent > .mc:first-child {
    border-top-color: rgba(59, 130, 246, 0.28) !important;
    background: rgba(0, 18, 26, 0.50) !important;
  }

  /* ⑥ Ambient glow blob — same tonal language as F&G deep teal bg */
  #mContent > .mc:first-child {
    position: relative;
  }
  #mContent > .mc:first-child::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: radial-gradient(ellipse at top left, rgba(59, 130, 246, 0.05), transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  /* ⑦ Trend pill neutral — fine outlined character like F&G zone indicators */
  .m-pill.neutral {
    border: 1px solid rgba(59, 130, 246, 0.18);
  }

  /* ④ Sparkline — already handled in JS with gradient polygon */

  /* Fix: remove the .fg-bar-wrap override that was ghosting bar backgrounds */
  #mFgHistory .fg-bar-wrap {
    background: transparent !important;
    border: none !important;
  }


  /* ══ CARD HEADERS — icon + label replacing // prefix ══ */
  .mc-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .mc-hdr-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    fill: none;
    stroke: rgba(59, 130, 246, 0.55);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.85;
  }
  /* filled icons (flame, dots) */
  .mc-hdr-icon path,
  .mc-hdr-icon circle:not([r="6"]):not([r="3"]) {
    fill: rgba(59, 130, 246, 0.45);
    stroke: none;
  }
  /* gauge arc stays stroke-only */
  .mc-hdr-icon path[d^="M2 11"] {
    fill: none;
    stroke: rgba(59,130,246,.55);
  }
  .mc-hdr span {
    letter-spacing: .14em;
  }

  /* Strip section header (// MACRO) */
  .m-strip-sec-hdr {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .m-strip-sec-hdr .mc-hdr-icon {
    opacity: 0.6;
  }

  /* ══ EXCHANGE CARDS — accent colour + dot indicator ══ */
  .m-exc-card {
    border-top-color: color-mix(in srgb, var(--exc-accent, rgba(59,130,246,.3)) 40%, transparent);
    position: relative;
    transition: border-color .3s;
  }
  .m-exc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background: radial-gradient(ellipse at top left,
      color-mix(in srgb, var(--exc-accent, rgba(59,130,246,.3)) 15%, transparent),
      transparent 70%);
    pointer-events: none;
  }
  .m-exc-name {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .m-exc-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--exc-accent, rgba(59,130,246,.6));
    box-shadow: 0 0 5px var(--exc-accent, rgba(59,130,246,0.28));
    flex-shrink: 0;
  }
  .m-exc-offline {
    opacity: 0.45;
  }
  .m-exc-price {
    color: #fff;
  }
  .m-exc-price--offline {
    color: var(--text3);
  }


  /* ══ CYCLE COMPARE PANEL ══ */
  #mCycleCard {
    background: rgba(0, 12, 20, 0.60) !important;
    border-top-color: rgba(59, 130, 246, 0.22) !important;
    position: relative;
  }
  #mCycleCard::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(ellipse at top right, rgba(59, 130, 246, 0.04), transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  #mCycleCard > * { position: relative; z-index: 1; }

  /* Tab buttons */
  .m-cycle-btn {
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .1em;
    padding: 4px 9px;
    border-radius: 3px;
    border: 1px solid rgba(59, 130, 246, 0.15);
    background: rgba(59, 130, 246, 0.04);
    color: rgba(155, 170, 192, 0.5);
    cursor: pointer;
    transition: all .2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
  }
  .m-cycle-btn.active {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.35);
    color: rgba(59, 130, 246, 0.9);
    text-shadow: 0 0 10px rgba(59,130,246,0.21);
  }
  .m-cycle-btn:active {
    transform: scale(0.96);
  }

  /* Chart container */
  #mCycleChart svg {
    display: block;
    width: 100%;
  }

  /* Legend */
  #mCycleLegend {
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,.04);
  }

  /* Insight */
  #mCycleInsight {
    border-top: 1px solid rgba(255,255,255,.04);
    padding-top: 6px;
  }


  /* ══ CYCLE TRACKER PANEL ══ */
  #mCycleTrackerCard {
    background: rgba(0, 12, 20, 0.60) !important;
    border-top-color: rgba(240, 185, 11, 0.22) !important;
    position: relative;
  }
  #mCycleTrackerCard::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(ellipse at bottom left, rgba(240, 185, 11, 0.04), transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  #mCycleTrackerCard > * { position: relative; z-index: 1; }

} /* end @media mobile */

/* ══════════════════════════════════════════════════════════════════════
   BENTO DASHBOARD — Desktop swing mode redesign
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Base bento card ── */
  .bento-card {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    position: relative;
    transition: box-shadow .25s;
  }
  .bento-card:hover {
    box-shadow: 0 0 28px rgba(59,130,246,0.035);
  }

  /* ── Evaluation card column overrides ── */
  .bento-evaluation .htf-tab {
    padding: 3px 10px !important;
    font-size: 7px !important;
  }

  /* Session grid inside evaluation card — horizontal compact layout */
  .bento-evaluation .sess-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  .bento-evaluation .sess-card {
    padding: 7px 8px !important;
    font-size: 9px !important;
  }
  .bento-evaluation .sess-val {
    font-size: 12px !important;
  }
  .bento-evaluation .sess-sub {
    font-size: 7px !important;
  }
  .bento-evaluation .sess-range {
    font-size: 6.5px !important;
  }
  .bento-evaluation .sess-label {
    font-size: 6.5px !important;
    letter-spacing: .1em !important;
    margin-bottom: 4px !important;
  }
  /* DOW bias in evaluation — compact bars */
  .bento-evaluation .dow-bar {
    margin-top: 4px !important;
  }
  .bento-evaluation .sess-dow-bias {
    grid-column: 1 / -1 !important;
  }

  /* ── Signal matrix card ── */
  .bento-signal .hero-cells {
    grid-template-columns: 1fr 1fr !important;
    background: rgba(255,255,255,.04) !important;
  }
  .bento-signal .hc {
    padding: 10px 12px !important;
    background: var(--surface) !important;
  }
  .bento-signal .hc:hover { }
  .bento-signal .hc-l { font-size: 7px !important; margin-bottom: 4px !important; }
  .bento-signal .hc-v { font-size: 13px !important; }
  .bento-signal .hc-s { font-size: 7.5px !important; margin-top: 2px !important; }
  .bento-signal .hero-sig { font-size: 28px !important; line-height: 1 !important; }
  .bento-signal .hero-sub { font-size: 8px !important; white-space: normal !important; }
  .bento-signal .hero-tag {
    font-size: 7px !important;
    letter-spacing: .14em !important;
    color: rgba(61,220,151,.5) !important;
  }
  .bento-signal .hero-ring { width: 58px !important; height: 58px !important; }
  .bento-signal .hero-ring svg { width: 58px !important; height: 58px !important; }
  .bento-signal .hero-ring-num { font-size: 14px !important; }

  /* ── Macro mini 2×2 grid — each card fills its cell ── */
  #bentoDashboard #macroMini .macro-card:not(.mc-card-mcap),
  #bentoDashboard #macroMini .macro-card-mini:not(.mc-card-mcap) {
    background: rgba(5,8,18,.88) !important;
    padding: 10px 12px !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
  }
  #bentoDashboard #macroMini .mc-label {
    font-size: 6.5px !important;
    margin-bottom: 4px !important;
  }
  #bentoDashboard #macroMini .mc-v,
  #bentoDashboard #macroMini .mc-val {
    font-size: 16px !important;
  }
  #bentoDashboard #macroMini .mc-sub {
    font-size: 7.5px !important;
    margin-top: 3px !important;
  }
  #bentoDashboard #macroMini .mc-source {
    font-size: 6px !important;
  }
  #bentoDashboard #macroMini .mc-bar {
    margin-top: 4px !important;
    height: 3px !important;
  }

  /* ── ETF strip inside bento ── */
  #bentoDashboard #etfMini > div {
    padding: 10px 14px !important;
  }

  /* ── Watchlist filter select ── */
  #swWlCoinSelect option {
    background: #080c18;
    color: rgba(59,130,246,.9);
  }

  /* ── Holdings in wallet column — narrower column ── */
  #bentoDashboard .wl-row {
    height: 32px !important;
    padding: 0 10px !important;
  }

  /* ── Liq feed mini inside bento ── */
  #liqFeedMini .liq-entry {
    font-size: 7.5px !important;
    padding: 4px 0 !important;
  }
  #liqFeedMini .liq-empty {
    font-size: 7px !important;
    padding: 8px 0 !important;
  }

  /* ── Fib table inside bento evaluation card ── */
  #bentoDashboard .fib-row {
    padding: 3px 0 !important;
    gap: 6px !important;
    font-size: 8px !important;
  }
  #bentoDashboard .fib-lv { font-size: 7.5px !important; min-width: 28px !important; }
  #bentoDashboard .fib-bar { flex: 1 !important; height: 3px !important; }
  #bentoDashboard .fib-price { font-size: 8px !important; min-width: 50px !important; }
  #bentoDashboard .fib-pct { font-size: 6.5px !important; padding: 1px 4px !important; }

  /* ── Wallet exchange toggle buttons ── */
  .sw-wal-exc-btn { transition: all .15s; }

  /* ── Macro pulse quick stats ── */
  .bento-macro-pulse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(59,130,246,.04);
  }
  .bento-macro-pulse-row:last-child { border-bottom: none; }
  .bento-macro-pulse-lbl {
    font-family: 'Share Tech Mono', monospace;
    font-size: 7px;
    color: rgba(155,170,192,.4);
    letter-spacing: .08em;
  }
  .bento-macro-pulse-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    font-weight: 700;
  }
  .bento-macro-pulse-sig {
    font-family: 'Share Tech Mono', monospace;
    font-size: 6.5px;
    letter-spacing: .06em;
    opacity: .7;
  }

  /* ── DOW panel inside bento ── */
  #swDowPanel .sess-dow-val {
    font-size: 12px !important;
  }
  #swDowPanel .sess-dow-mood {
    font-size: 7px !important;
  }
  #swDowPanel .dow-bar {
    margin-top: 6px !important;
  }

  /* ── HTF card inside evaluation col 1 ── */
  .bento-evaluation #htfGrid .htf-cell {
    padding: 6px 8px !important;
    font-size: 8.5px !important;
  }
  .bento-evaluation #htfGrid .htf-val {
    font-size: 11px !important;
  }

  /* Prevent wlCollapseBtnLabel showing in bento (space constraint) */
  #bentoDashboard #wlCollapseBtnLabel { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   BENTO DASHBOARD v2 — corrected layout matching reference image
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* ── Base card hover glow ── */
  #bentoDashboard > div > div,
  #bentoDashboard #swPriceCard,
  #bentoDashboard #swWalletCard,
  #bentoDashboard #hero,
  #bentoDashboard #swZoneB,
  #bentoDashboard #watchlistPanel {
    transition: box-shadow .25s;
  }
  #bentoDashboard #hero:hover      { box-shadow: 0 0 30px rgba(255,255,255,.03); }
  #bentoDashboard #swPriceCard:hover { box-shadow: 0 0 30px rgba(59,130,246,0.035); }

  /* ── Evaluation card: price column ── */
  #bentoDashboard #swPriceCard .price-num { font-size: 42px !important; }
  #bentoDashboard #swPriceCard .price-block { margin-bottom: 6px !important; }

  /* ── HTF tab buttons inside evaluation card ── */
  #bentoDashboard .htf-tab {
    padding: 2px 9px !important;
    font-size: 6.5px !important;
  }

  /* ── Fibonacci rows inside evaluation card ── */
  #bentoDashboard #fibTable .fib-row {
    padding: 2px 0 !important;
    gap: 5px !important;
    font-size: 7.5px !important;
  }
  #bentoDashboard #fibTable .fib-lv   { font-size: 7px !important; min-width: 26px !important; }
  #bentoDashboard #fibTable .fib-bar  { height: 3px !important; }
  #bentoDashboard #fibTable .fib-price { font-size: 7.5px !important; min-width: 48px !important; }
  #bentoDashboard #fibTable .fib-pct  { font-size: 6px !important; padding: 1px 3px !important; }

  /* ── Session panel inside evaluation card — horizontal compact ── */
  #bentoDashboard #sessionPanel .sess-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
  #bentoDashboard #sessionPanel .sess-card {
    padding: 6px 8px !important;
    border-radius: 3px !important;
  }
  #bentoDashboard #sessionPanel .sess-label  { font-size: 5.5px !important; margin-bottom: 3px !important; }
  #bentoDashboard #sessionPanel .sess-val    { font-size: 14px !important; }
  #bentoDashboard #sessionPanel .sess-sub    { font-size: 6.5px !important; }
  #bentoDashboard #sessionPanel .sess-range  { font-size: 6px !important; }
  /* Hide the DOW section from sessionPanel — we have swDowPanel for that */
  #bentoDashboard #sessionPanel .sess-dow-wrap,
  #bentoDashboard #sessionPanel .sess-dow { display: none !important; }

  /* ── DOW panel compact bar chart ── */
  #bentoDashboard #swDowPanel { font-size: 7px; }

  /* ── Macro pulse rows ── */
  .bento-macro-pulse-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid rgba(59,130,246,.04);
  }
  .bento-macro-pulse-row:last-child { border-bottom: none; }
  .bento-macro-pulse-lbl {
    font-family: 'Share Tech Mono', monospace;
    font-size: 6.5px;
    color: rgba(155,170,192,.38);
    letter-spacing: .06em;
    min-width: 60px;
  }
  .bento-macro-pulse-val {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    text-align: right;
    flex: 1;
  }
  .bento-macro-pulse-sig {
    font-family: 'Share Tech Mono', monospace;
    font-size: 6px;
    letter-spacing: .05em;
    opacity: .75;
    text-align: right;
    min-width: 52px;
  }

  /* ── Signal matrix hero card overrides ── */
  #bentoDashboard #hero .hero-tag  { font-size: 6.5px !important; letter-spacing: .12em !important; color: rgba(155,170,192,.4) !important; }
  #bentoDashboard #hero .hero-sig  { font-size: 26px !important; line-height: 1 !important; }
  #bentoDashboard #hero .hero-sub  { font-size: 7.5px !important; white-space: normal !important; line-height: 1.4 !important; }
  #bentoDashboard #hero .hero-cells { grid-template-columns: 1fr 1fr !important; }
  #bentoDashboard #hero .hc        { padding: 9px 11px !important; }
  #bentoDashboard #hero .hc:hover  { }
  #bentoDashboard #hero .hc-l      { font-size: 6.5px !important; margin-bottom: 4px !important; }
  #bentoDashboard #hero .hc-v      { font-size: 13px !important; }
  #bentoDashboard #hero .hc-s      { font-size: 7px !important; margin-top: 2px !important; }
  #bentoDashboard #hero .hero-ring { width: 56px !important; height: 56px !important; }
  #bentoDashboard #hero .hero-ring svg { width: 56px !important; height: 56px !important; }
  #bentoDashboard #hero .hero-ring-num { font-size: 13px !important; }

  /* ── Macro mini cards inside swZoneB ── */
  #bentoDashboard #macroMini .macro-card:not(.mc-card-mcap),
  #bentoDashboard #macroMini .macro-card-mini:not(.mc-card-mcap) {
    background: rgba(4,7,16,.9) !important;
    padding: 9px 11px !important;
    border: none !important;
    border-radius: 0 !important;
  }
  #bentoDashboard #macroMini .mc-label { font-size: 6px !important; margin-bottom: 3px !important; }
  #bentoDashboard #macroMini .mc-v,
  #bentoDashboard #macroMini .mc-val   { font-size: 15px !important; }
  #bentoDashboard #macroMini .mc-sub   { font-size: 7px !important; margin-top: 2px !important; }
  #bentoDashboard #macroMini .mc-bar   { margin-top: 4px !important; height: 2px !important; }
  #bentoDashboard #macroMini .mc-source { font-size: 5.5px !important; }

  /* ── ETF mini strip ── */
  #bentoDashboard #etfMini > div,
  #bentoDashboard #etfMiniCard > div { padding: 8px 12px !important; }
  #bentoDashboard #etfMini .etf-label { font-size: 6px !important; }
  #bentoDashboard #etfMini .etf-val,
  #bentoDashboard #etfMiniCard .etf-val { font-size: 16px !important; }
  #bentoDashboard #etfMini .etf-meta,
  #bentoDashboard #etfMiniCard .etf-meta { font-size: 7px !important; }

  /* ── Holdings wl-rows — compact ── */
  #bentoDashboard [id$="-h"].wl-row { height: 30px !important; }

  /* ── Watchlist rows in bento panel ── */
  #bentoDashboard #swWlRows .wl-row { height: 30px !important; }

  /* ── Liq feed entries in bento ── */
  #bentoDashboard #liqFeedMini .liq-event,
  #bentoDashboard #liqFeedMini .liq-entry { font-size: 7px !important; padding: 3px 0 !important; }
  #bentoDashboard #liqFeedMini .liq-empty { font-size: 6.5px !important; }

  /* ── Liq stat labels/values ── */
  #bentoDashboard .liq-stat-l { font-size: 6px !important; margin-bottom: 2px !important; }
  #bentoDashboard .liq-stat-v { font-size: 14px !important; }
  #bentoDashboard .liq-stat-s { font-size: 6.5px !important; margin-top: 1px !important; }

  /* ── Watchlist select option styling ── */
  #swWlCoinSelect option { background: #060a14; color: rgba(59,130,246,.9); }
}

/* ════════════════════════════════════════════════════════════════════
   BENTO DASHBOARD v3 — pixel-perfect reference image match
   Reference: dark bg, large price heroes, embedded charts,
              clean card borders, colored badges, sparklines
   ════════════════════════════════════════════════════════════════════ */

/* ── Root layout ── */
#bentoDashboard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

/* ── Rows ── */
.bd-row { display: grid; gap: 10px; }
.bd-row-top { grid-template-columns: 1fr 300px 80px; align-items: stretch; min-height: 380px; }
.bd-row-bot { grid-template-columns: 260px 1fr 280px; align-items: start; min-height: 0; }

/* ── Base card ── */
.bd-card {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgb(255 255 255 / 2%);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
}

/* ── Glow accents ── */
.bd-glow {
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 14px 14px 0 0; z-index: 2; pointer-events: none;
}
.bd-glow-cyan  { background: linear-gradient(90deg, rgba(110,168,247,.35) 0%, transparent 70%); }
.bd-glow-green { background: linear-gradient(90deg, rgba(61,220,151,.35) 0%, transparent 70%); }
.bd-glow-red   { background: linear-gradient(90deg, rgba(238,108,124,.35) 0%, transparent 70%); }

/* #hero's accent line is static in the markup (not tied to buy/sell/hold
   state — the BUY/SELL/HOLD text color already carries that meaning), so
   coloring it green regardless of state is misleading. Neutral instead. */
#hero .bd-glow-green { background: linear-gradient(90deg, rgba(255,255,255,.14) 0%, transparent 70%); }

/* ════════════════════════════════
   EVALUATION card
   ════════════════════════════════ */
.bd-eval {
  background: #05070d;
  border-color: rgba(59,130,246,.10);
}



.bd-eval-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px 12px; flex-shrink: 0;
}
.bd-ev-label {
  font-family: var(--font); font-size: 18px; font-weight: 700;
  color: rgba(215,222,235,.95); letter-spacing: -.01em; line-height: 1.1;
}
.bd-ev-sub {
  font-family: 'Share Tech Mono', monospace; font-size: 9px;
  color: rgba(155,170,192,.4); letter-spacing: .08em; margin-top: 2px;
}
.bd-htf-row { display: flex; gap: 3px; align-items: center; }
.bd-htf {
  padding: 4px 10px !important; font-size: 7px !important;
  border-radius: 4px !important;
}

/* Price hero */
.bd-ev-price-row {
  padding: 0 22px 10px; flex-shrink: 0;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
#pMain.bd-ev-price,
.bd-ev-price-row #pMain {
  font-family: var(--font) !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  color: rgba(215,222,235,.97) !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}
.bd-ev-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 4px; }
.bd-ev-stats {
  display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 18px;
  font-family: 'Share Tech Mono', monospace; font-size: 8.5px;
  color: rgba(155,170,192,.5); padding-top: 4px;
}

/* Chart */
.bd-ev-chart {
  flex: 1; min-height: 100px; position: relative; margin: 0 0 0 0;
}
#bdEvalChart {
  display: block; width: 100%; height: 100%;
  position: absolute; inset: 0;
}
.bd-ev-pair {
  position: absolute; bottom: 8px; right: 14px;
  font-family: 'Share Tech Mono', monospace; font-size: 7px;
  color: rgba(155,170,192,.28); letter-spacing: .1em;
}

/* Data strip */
.bd-ev-strip {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0; min-height: 110px;
}
.bd-ev-strip-col {
  padding: 10px 14px; border-right: 1px solid rgba(255,255,255,.05);
  overflow: hidden; display: flex; flex-direction: column;
}
.bd-ev-strip-col:last-child { border-right: none; }
.bd-ev-strip-hd {
  font-family: 'Share Tech Mono', monospace; font-size: 6px;
  letter-spacing: .2em; color: rgba(59,130,246,.35);
  margin-bottom: 8px; display: flex; align-items: center; gap: 4px;
  flex-shrink: 0; text-transform: uppercase;
}
.bd-fib-inner { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(59,130,246,.08) transparent; }
.bd-sess-inner { flex: 1; overflow: hidden; }
.bd-dow-inner  { flex: 1; overflow: hidden; }
.bd-macro-inner { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 3px; }

/* Fib rows compact inside strip */
.bd-fib-inner .fib-row  { padding: 2px 0 !important; gap: 5px !important; font-size: 7px !important; }
.bd-fib-inner .fib-lv   { font-size: 6.5px !important; min-width: 24px !important; }
.bd-fib-inner .fib-bar  { height: 2px !important; }
.bd-fib-inner .fib-price { font-size: 7px !important; min-width: 44px !important; }
.bd-fib-inner .fib-pct  { font-size: 5.5px !important; padding: 1px 3px !important; }

/* Session panel compact */
.bd-sess-inner .sess-grid { display: flex !important; flex-direction: column !important; gap: 4px !important; }
.bd-sess-inner .sess-card { padding: 5px 7px !important; border-radius: 4px !important; }
.bd-sess-inner .sess-label { font-size: 5.5px !important; margin-bottom: 2px !important; }
.bd-sess-inner .sess-val   { font-size: 13px !important; }
.bd-sess-inner .sess-sub   { font-size: 6px !important; }
.bd-sess-inner .sess-range { font-size: 5.5px !important; }
/* Hide DOW from session panel — we have swDowPanel */
.bd-sess-inner .sess-dow-wrap,
.bd-sess-inner [class*="dow"] { display: none !important; }

/* Macro pulse rows */
.bd-macro-inner .bento-macro-pulse-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0; border-bottom: 1px solid rgba(59,130,246,.04);
  font-family: 'Share Tech Mono', monospace;
}
.bd-macro-inner .bento-macro-pulse-row:last-child { border-bottom: none; }
.bd-macro-inner .bento-macro-pulse-lbl { font-size: 6px; color: rgba(155,170,192,.38); min-width: 52px; }
.bd-macro-inner .bento-macro-pulse-val { font-size: 8.5px; font-weight: 700; }
.bd-macro-inner .bento-macro-pulse-sig { font-size: 5.5px; opacity: .7; text-align: right; }

/* ════════════════════════════════
   OPERATIONS / WALLET card
   ════════════════════════════════ */
.bd-ops {
  background: linear-gradient(160deg,#0c1020 0%,#090d1c 100%);
  border-color: rgba(59,130,246,.1);
}
.bd-ops-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 10px; flex-shrink: 0;
}
.bd-ops-exc-btns { display: flex; gap: 4px; align-items: center; }
.bd-exc-btn {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04); cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: all .15s;
  font-family: 'Share Tech Mono', monospace; font-size: 9px; font-weight: 700;
  color: rgba(155,170,192,.5);
}
.bd-exc-btn:hover { background: rgba(255,255,255,.09); color: rgba(255,255,255,.8); }
.bd-exc-on { border-color: rgba(240,185,11,.6) !important; background: rgba(240,185,11,.12) !important; }
.bd-exc-ico { font-size: 10px; font-weight: 900; line-height: 1; }
.bd-exc-bnb { color: #f0b90b; }
.bd-exc-byb { color: rgba(255,107,0,.8); }
.bd-exc-btg { color: rgba(0,195,255,.7); }
.bd-exc-refresh { font-size: 14px; color: rgba(59,130,246,.5); border-color: rgba(59,130,246,.2); }
.bd-exc-refresh:hover { color: rgba(59,130,246,.9); border-color: rgba(59,130,246,.5); }

/* Total equity */
.bd-ops-total-row { padding: 0 18px 6px; flex-shrink: 0; }
#swWalletTotal {
  font-family: var(--font) !important;
  font-size: 36px !important;
  font-weight: 900 !important;
  color: rgba(215,222,235,.95) !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}
.bd-ops-exc-lbl {
  font-family: 'Share Tech Mono', monospace; font-size: 7px;
  color: rgba(59,130,246,.5); letter-spacing: .1em; margin-top: 4px;
}

/* Available / margin row */
.bd-ops-avail-row {
  display: flex; align-items: center; gap: 14px;
  padding: 6px 18px 8px; flex-shrink: 0;
}
.bd-ops-av-item { display: flex; flex-direction: column; }
.bd-av-lbl { font-family: 'Share Tech Mono', monospace; font-size: 6px; color: rgba(155,170,192,.35); letter-spacing: .1em; margin-bottom: 2px; }
.bd-av-val { font-family: 'Share Tech Mono', monospace; font-size: 15px; font-weight: 700; }
.bd-ops-av-sep { width: 1px; height: 28px; background: rgba(255,255,255,.06); flex-shrink: 0; }
.bd-ops-bar-wrap { margin: 0 18px 6px; height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.bd-ops-bar { height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg,rgba(0,255,136,.6),rgba(255,170,0,.7)); transition: width .6s, background .4s; }
.bd-ops-status-row { display: flex; align-items: center; gap: 5px; padding: 0 18px 10px; flex-shrink: 0; }
.bd-ops-sdot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: rgba(155,170,192,.22); flex-shrink: 0; transition: background .3s, box-shadow .3s; }
.bd-ops-stxt { font-family: 'Share Tech Mono', monospace; font-size: 6px; color: rgba(155,170,192,.28); }

/* Holdings list */
.bd-holdings-card {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.06); overflow: hidden;
}
.bd-hld-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px 5px; flex-shrink: 0;
}
.bd-hld-ttl { font-family: var(--font); font-size: 12px; font-weight: 600; color: rgba(155,170,192,.7); }
.bd-hld-ts  { font-family: 'Share Tech Mono', monospace; font-size: 6px; color: rgba(155,170,192,.25); }
.bd-hld-cols {
  display: grid; grid-template-columns: 1fr 48px 64px 42px 42px;
  padding: 2px 14px; border-bottom: 1px solid rgba(255,255,255,.05); flex-shrink: 0;
  font-family: 'Share Tech Mono', monospace; font-size: 5.5px;
  color: rgba(59,130,246,.32); letter-spacing: .1em;
}
.bd-hld-cols span:not(:first-child) { text-align: right; }
.bd-hld-rows { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(59,130,246,.08) transparent; }
.bd-hld-row.wl-row { height: 30px !important; padding: 0 14px !important; }

/* ════════════════════════════════
   SIGNAL MATRIX card (green)
   ════════════════════════════════ */
.bd-signal {
  background: var(--surface);
  border-color: var(--border);
}
.bd-sig-tag {
  padding: 4px 16px 0 !important; font-size: 7px !important;
  letter-spacing: .14em !important; color: rgba(155,170,192,.4) !important;
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
}
.bd-sig-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px 16px 10px; flex-shrink: 0;
}
.bd-sig-left { flex: 1; min-width: 0; }
.bd-sig-left .hero-sig  { font-size: 30px !important; line-height: 1 !important; }
.bd-sig-left .hero-sub  { font-size: 7.5px !important; white-space: normal !important; line-height: 1.4 !important; margin-top: 5px !important; }
.bd-sig-ring { width: 72px !important; height: 72px !important; flex-shrink: 0; }
.bd-sig-ring svg { width: 72px !important; height: 72px !important; }
.bd-sig-ring .hero-ring-num { font-size: 14px !important; }
.bd-sig-cells.hero-cells {
  grid-template-columns: 1fr 1fr !important; flex: 1;
  background: rgba(255,255,255,.04) !important;
}
.bd-sig-cells .hc { padding: 10px 14px !important; }
.bd-sig-cells .hc:hover { }
.bd-sig-cells .hc-l { font-size: 7px !important; margin-bottom: 4px !important; }
.bd-sig-cells .hc-v { font-size: 14px !important; }
.bd-sig-cells .hc-s { font-size: 7.5px !important; margin-top: 2px !important; }

/* ════════════════════════════════
   MACRO INTELLIGENCE card
   ════════════════════════════════ */
.bd-macro {
  background: transparent !important;
  border-color: var(--border);
}
.bd-mac-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.bd-mac-ttl {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font); font-size: 14px; font-weight: 600;
  color: rgba(215,222,235,.85);
}
.bd-etf-badge { font-family: 'Share Tech Mono', monospace; font-size: 7px; color: rgba(155,170,192,.3); }
.bd-mac-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px;
  background: rgba(59,130,246,.04); flex: 1; min-height: 0; overflow: hidden;
}
/* Macro mini cards inside the grid */
.bd-mac-grid .macro-card,
.bd-mac-grid .macro-card-mini {
  background: rgba(8,13,22,.9) !important; padding: 12px 14px !important;
  border: none !important; border-radius: 0 !important;
}
.bd-mac-grid .mc-label { font-size: 6.5px !important; margin-bottom: 4px !important; letter-spacing: .1em !important; }
.bd-mac-grid .mc-v,
.bd-mac-grid .mc-val   { font-size: 18px !important; }
.bd-mac-grid .mc-sub   { font-size: 7.5px !important; margin-top: 3px !important; }
.bd-mac-grid .mc-bar   { margin-top: 5px !important; height: 2px !important; }
.bd-mac-grid .mc-source { font-size: 6px !important; }
.bd-etf-strip {
  border-top: 1px solid var(--border);
  background: var(--surface); flex-shrink: 0; max-height: 90px; overflow: hidden;
}
.bd-etf-strip > div { padding: 8px 14px !important; }

/* ════════════════════════════════
   WATCHLIST card
   ════════════════════════════════ */
.bd-watch {
  background: linear-gradient(160deg,#131824 0%,#131824 100%);
  border-color: rgba(59,130,246,.1);
}
.bd-wtch-tabs {
  display: flex; align-items: stretch; border-bottom: 1px solid rgba(59,130,246,.07);
  flex-shrink: 0;
}
.bd-wtch-tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 4px; background: transparent; border: none;
  border-right: 1px solid rgba(59,130,246,.07); cursor: pointer;
  font-family: 'Share Tech Mono', monospace; font-size: 6px;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(155,170,192,.32);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s;
}
.bd-wtch-tab:last-of-type { border-right: none; }
.bd-wtch-on {
  color: rgba(59,130,246,.85) !important;
  background: rgba(59,130,246,.05) !important;
  border-bottom-color: rgba(59,130,246,.55) !important;
}
.bd-wtch-on:hover,.bd-wtch-tab:hover { color: rgba(59,130,246,.7); }
.bd-tp { width: 2px; height: 7px; border-radius: 1px; flex-shrink: 0; }
.bd-tp-c { background: linear-gradient(180deg,rgba(59,130,246,.9),rgba(59,130,246,.2)); }
.bd-tp-d { background: linear-gradient(180deg,rgba(155,170,192,.4),rgba(155,170,192,.1)); }
.bd-tp-r { background: linear-gradient(180deg,rgba(210,55,75,.7),rgba(210,55,75,.1)); }
.bd-wtch-collapse {
  flex: 0 0 auto; padding: 9px 9px; background: transparent; border: none;
  border-left: 1px solid rgba(59,130,246,.07); cursor: pointer;
  font-size: 10px; color: rgba(59,130,246,.35);
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s;
}
.bd-wtch-collapse:hover { color: rgba(59,130,246,.8); }

.bd-wtch-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.bd-wtch-filter {
  padding: 5px 10px; border-bottom: 1px solid rgba(59,130,246,.05); flex-shrink: 0;
}
.bd-wtch-sel {
  width: 100%; font-family: 'Share Tech Mono', monospace; font-size: 7px;
  background: rgba(59,130,246,.05); border: 1px solid rgba(59,130,246,.14);
  color: rgba(59,130,246,.8); border-radius: 4px; padding: 4px 8px;
  cursor: pointer; outline: none; appearance: none;
}
.bd-wtch-sel option { background: #070c18; color: rgba(59,130,246,.9); }
.bd-wtch-cols {
  display: grid; grid-template-columns: 1fr 46px 60px 38px 38px;
  padding: 2px 10px; border-bottom: 1px solid rgba(59,130,246,.05); flex-shrink: 0;
  font-family: 'Share Tech Mono', monospace; font-size: 5.5px;
  color: rgba(59,130,246,.32); letter-spacing: .1em;
}
.bd-wtch-cols span:not(:first-child) { text-align: right; }
.bd-wtch-rows { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(59,130,246,.1) transparent; }
.bd-wl-row.wl-row { height: 30px !important; padding: 0 10px !important; }
.bd-fib-pane { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 8px 10px; scrollbar-width: thin; scrollbar-color: rgba(59,130,246,.1) transparent; }
.bd-liq-pane.liq-feed { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px; scrollbar-width: thin; scrollbar-color: rgba(210,55,75,.12) transparent; }

/* ════════════════════════════════
   RIGHT COLUMN: LIQ + ETF
   ════════════════════════════════ */
.bd-right-col { display: flex; flex-direction: column; gap: 10px; }

.bd-liq {
  flex: 1; min-height: 0;
  background: linear-gradient(150deg,#120408 0%,#0a0205 100%);
  border-color: rgba(255,45,85,.15);
}
.bd-liq-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 9px; border-bottom: 1px solid rgba(255,45,85,.09); flex-shrink: 0;
}
.bd-liq-ttl { font-family: var(--font); font-size: 13px; font-weight: 600; color: rgba(215,222,235,.8); }
.bd-liq-live-dot { font-family: 'Share Tech Mono', monospace; font-size: 6px; color: rgba(155,170,192,.3); display: flex; align-items: center; }
.bd-liq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(255,45,85,.06); flex-shrink: 0;
}
.bd-liq-cell { background: rgba(5,2,4,.92); padding: 9px 11px; }
.bd-liq-cl { font-family: 'Share Tech Mono', monospace; font-size: 5.5px; color: rgba(155,170,192,.35); letter-spacing: .1em; margin-bottom: 3px; }
.bd-liq-cv { font-family: 'Share Tech Mono', monospace; font-size: 15px; font-weight: 900; line-height: 1; }
.bd-liq-cs { font-family: 'Share Tech Mono', monospace; font-size: 6.5px; color: rgba(155,170,192,.35); margin-top: 2px; }
.bd-liq-feed-wrap { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,45,85,.1) transparent; }
.bd-liq-feed.liq-feed { padding: 5px 12px; }
.bd-liq-feed .liq-event,
.bd-liq-feed .liq-entry { font-size: 7px !important; padding: 3px 0 !important; }
.bd-liq-feed .liq-empty  { font-size: 7px !important; }

.bd-etf {
  flex-shrink: 0;
  background: var(--surface);
  border-color: var(--border);
}
.bd-etf-hd { padding: 10px 14px 8px; font-family: var(--font); font-size: 13px; font-weight: 600; color: rgba(215,222,235,.8); border-bottom: 1px solid rgba(59,130,246,.07); flex-shrink: 0; }
.bd-etf-body { overflow: hidden; max-height: 140px; }
.bd-etf-body > div { padding: 8px 14px !important; }

/* ════════════════════════════════
   Price number override for pMain
   ════════════════════════════════ */
#bentoDashboard #pMain {
  font-family: var(--font) !important;
  font-size: 52px !important;
  font-weight: 900 !important;
  color: rgba(215,222,235,.97) !important;
  letter-spacing: -.03em !important;
  line-height: 1 !important;
  display: block;
}


/* ════════════════════════════════════════════════════════
   QUICK ACTIONS SIDEBAR  (bd-qa)
   ════════════════════════════════════════════════════════ */
.bd-qa {
  background: linear-gradient(180deg, #131824 0%, #131824 100%);
  border-color: rgba(59,130,246,.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 12px;
  gap: 0;
}

.bd-qa-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  flex: 1;
  justify-content: center;
}

.bd-qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  height: 52px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  transition: all .18s ease;
  color: rgba(155,170,192,.55);
}
.bd-qa-btn:hover {
  background: rgba(59,130,246,.07);
  border-color: rgba(59,130,246,.25);
  color: rgba(59,130,246,.9);
  box-shadow: 0 0 12px rgba(59,130,246,0.056);
  transform: translateY(-1px);
}
.bd-qa-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.bd-qa-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 5.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
}

/* Exchange indicator at bottom of sidebar */
.bd-qa-exc-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 0 2px;
  border-top: 1px solid rgba(255,255,255,.05);
  width: 100%;
  margin-top: 6px;
}
.bd-qa-exc-dot-wrap {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bd-qa-exc-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #f0b90b;
  display: block;
  transition: background .3s;
  box-shadow: 0 0 6px currentColor;
}
.bd-qa-exc-name {
  font-family: 'Share Tech Mono', monospace;
  font-size: 5px;
  letter-spacing: .12em;
  color: rgba(155,170,192,.3);
}

/* ════════════════════════════════════════════════════════
   MACRO INTELLIGENCE — sub-tabs (ETF / LIQ)
   ════════════════════════════════════════════════════════ */
.bd-mac-sub {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-top: 1px solid rgba(255,255,255,.06);
}

.bd-mac-sub-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
}

.bd-mac-stab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 6px 10px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: 'Share Tech Mono', monospace;
  font-size: 6.5px;
  letter-spacing: .12em;
  color: rgba(155,170,192,.35);
  transition: all .15s;
}
.bd-mac-stab:hover { color: rgba(59,130,246,.6); background: rgba(59,130,246,.03); }
.bd-mac-stab-on {
  color: rgba(59,130,246,.8) !important;
  background: rgba(59,130,246,.06) !important;
  border-bottom-color: rgba(59,130,246,.45) !important;
}
.bd-mac-stab-live {
  display: inline-flex;
  align-items: center;
  margin-left: 2px;
}

.bd-mac-subpane {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(59,130,246,.08) transparent;
  display: flex;
  flex-direction: column;
}

/* Liq grid inside macro subpane — 2×2 compact */
.bd-liq-grid-mac {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(255,255,255,.04);
  margin: 0;
  flex-shrink: 0;
}
.bd-liq-grid-mac .bd-liq-cell {
  background: rgba(8,12,22,.9);
  padding: 8px 12px;
}

/* ════════════════════════════════════════════════════════
   WATCHLIST — coin selector + focus display
   ════════════════════════════════════════════════════════ */
.bd-wtch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
  gap: 8px;
}

.bd-wtch-coin-sel {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 6px;
  color: rgba(215,222,235,.8);
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  letter-spacing: .06em;
  padding: 5px 8px;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.bd-wtch-coin-sel:hover, .bd-wtch-coin-sel:focus {
  border-color: rgba(59,130,246,.3);
  background: rgba(59,130,246,.04);
}
.bd-wtch-coin-sel option {
  background: #131824;
  color: rgba(215,222,235,.85);
}

.bd-wtch-hdr-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* Focused coin display — Litecoin panel style */
.bd-wlf-focus {
  display: flex;
  flex-direction: column;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  flex-shrink: 0;
  background: linear-gradient(160deg, rgba(59,130,246,.025) 0%, transparent 100%);
}

.bd-wlf-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 6px;
}
.bd-wlf-info { display: flex; flex-direction: column; gap: 3px; }
.bd-wlf-name {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  color: rgba(215,222,235,.9);
  line-height: 1;
}
.bd-wlf-badge-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.bd-wlf-sym {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  color: rgba(59,130,246,.6);
  letter-spacing: .08em;
}
.bd-wlf-exch {
  font-family: 'Share Tech Mono', monospace;
  font-size: 6px;
  color: rgba(155,170,192,.35);
  letter-spacing: .1em;
}

.bd-wlf-chg-badge {
  font-family: 'Share Tech Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid rgba(0,255,136,.2);
  background: rgba(0,255,136,.1);
  color: rgba(0,255,136,.9);
  transition: all .25s;
  align-self: flex-start;
  letter-spacing: .04em;
}

.bd-wlf-price-row {
  margin-bottom: 8px;
}
.bd-wlf-price {
  font-family: var(--font);
  font-size: 26px;
  font-weight: 900;
  color: rgba(215,222,235,.95);
  letter-spacing: -.02em;
  line-height: 1;
}

/* Bar chart canvas */
.bd-wlf-chart-wrap {
  position: relative;
  height: 72px;
  width: 100%;
  margin-bottom: 2px;
}
.bd-wlf-chart {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.bd-wlf-chart-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Share Tech Mono', monospace;
  font-size: 7px;
  color: rgba(155,170,192,.4);
  padding: 0 2px;
  margin-top: 2px;
}

/* Override old bd-wtch-tabs rule since we removed it */
.bd-wtch-tabs { display: none !important; }

/* ════════════════════════════════════════════════════════════════════════
   BENTO REFERENCE MATCH — visual overhaul + desktop-shell counter-overrides
   ════════════════════════════════════════════════════════════════════════ */

/* ── Non-media-query fixes (apply at all widths) ─────────────────────── */

/* Evaluation card: chart must fill flex parent — force min-height so the
   canvas has a non-zero offsetHeight when the draw() timeout fires       */
#bentoDashboard #swPriceCard .bd-ev-chart {
  flex: 1 !important;
  min-height: 140px !important;
  position: relative !important;
  overflow: hidden !important;
}
#bentoDashboard #swPriceCard #bdEvalChart {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ── Desktop-only block ───────────────────────────────────────────────── */
@media (min-width: 1024px) {

  /* ══ GRID PROPORTIONS ══ */
  #bentoDashboard .bd-row-top {
    grid-template-columns: 530px minmax(0, 1fr) !important;
    min-height: 400px !important;
    gap: 8px !important;
  }
  #bentoDashboard .bd-row-bot {
    grid-template-columns: 280px 1fr 300px !important;
    min-height: 0 !important;
    align-items: start !important;
    gap: 8px !important;
  }
  #bentoDashboard { gap: 8px !important; }

  /* ══════════════════════════════════════════════════
     EVALUATION CARD — price hero + chart fills card
     bottom strip has Fib / Sessions / DOW / Macro
     ══════════════════════════════════════════════════ */
  #bentoDashboard #swPriceCard {
    background: linear-gradient(160deg, rgba(5, 8, 16, 0.28) 0%, rgba(3, 4, 10, 0.32) 100%) !important;
    border-color: #18212D63 !important;
  }
  /* Head: compact padding so chart gets more room */
  #bentoDashboard #swPriceCard .bd-eval-head {
    padding: 25px 18px 15px !important;
  }
  #bentoDashboard #swPriceCard .bd-ev-label {
    font-size: 20px !important;
    font-weight: 700 !important;
  }
  /* Price row: tight bottom padding */
  #bentoDashboard #swPriceCard .bd-ev-price-row {
    padding: 0 18px 8px !important;
    align-items: baseline !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
  }
  /* Price number */
  #bentoDashboard #swPriceCard #pMain {
    font-size: 52px !important;
    font-weight: 900 !important;
    letter-spacing: -.03em !important;
    line-height: 1 !important;
    color: rgba(215,222,235,.97) !important;
  }
  /* 24h stats: inline not wrapping */
  #bentoDashboard #swPriceCard .bd-ev-stats {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px 14px !important;
    font-size: 8px !important;
  }
  /* Chart: flex:1 stretches between price row and strip */
  #bentoDashboard #swPriceCard .bd-ev-chart {
    flex: 1 !important;
    min-height: 140px !important;
    position: relative !important;
  }
  /* Canvas: absolutely fills the chart div */
  #bentoDashboard #swPriceCard #bdEvalChart {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
  }
  /* Bottom strip: 4 equal cols, fixed height */
  #bentoDashboard #swPriceCard .bd-ev-strip {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    min-height: 110px !important;
    max-height: 125px !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }
  #bentoDashboard #swPriceCard .bd-ev-strip-col {
    padding: 8px 11px !important;
    overflow: hidden !important;
  }
  /* Sessions: compact vertical stack inside strip column */
  #bentoDashboard #swPriceCard .bd-sess-inner .sess-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
  }
  #bentoDashboard #swPriceCard .bd-sess-inner .sess-card {
    padding: 4px 6px !important;
    border-radius: 4px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #bentoDashboard #swPriceCard .bd-sess-inner .sess-label { font-size: 5px !important; margin-bottom: 1px !important; }
  #bentoDashboard #swPriceCard .bd-sess-inner .sess-val   { font-size: 11px !important; }
  #bentoDashboard #swPriceCard .bd-sess-inner .sess-sub   { font-size: 5.5px !important; }
  #bentoDashboard #swPriceCard .bd-sess-inner .sess-range { display: none !important; }

  /* ══════════════════════════════════════════════════
     SIGNAL MATRIX CARD — green panel, 2×2 data cells
     ══════════════════════════════════════════════════ */
  #bentoDashboard #hero {
    background: rgb(255 255 255 / 2%) !important;
    border-color: rgb(255 255 255 / 0%) !important;
  }
  #bentoDashboard #hero .bd-sig-tag {
    padding: 4px 14px 0 !important;
    font-size: 6.5px !important;
    letter-spacing: .14em !important;
    color: rgba(61,220,151,.45) !important;
  }
  #bentoDashboard #hero .bd-sig-hero { padding: 8px 14px 8px !important; }
  #bentoDashboard #hero .hero-sig {
    font-size: 32px !important; font-weight: 900 !important; line-height: 1 !important;
  }
  #bentoDashboard #hero .hero-sub {
    font-size: 7px !important; line-height: 1.5 !important;
    margin-top: 5px !important; white-space: normal !important;
    color: rgba(155,170,192,.45) !important;
  }
  #bentoDashboard #hero .bd-sig-ring  { width: 62px !important; height: 62px !important; flex-shrink: 0 !important; }
  #bentoDashboard #hero .bd-sig-ring svg { width: 62px !important; height: 62px !important; }
  #bentoDashboard #hero .hero-ring-num { font-size: 13px !important; font-weight: 700 !important; }
  /* 2×2 cell grid — fills rest of card */
  #bentoDashboard #hero .hero-cells,
  #bentoDashboard #hero .bd-sig-cells.hero-cells {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    flex: 1 !important;
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
  }
  #bentoDashboard #hero .hc {
    background: transparent !important;
    padding: 12px 14px !important;
    border-right: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
  }
  #bentoDashboard #hero .hc:nth-child(even)          { border-right: none !important; }
  #bentoDashboard #hero .hc:nth-last-child(-n+2)     { border-bottom: none !important; }
  #bentoDashboard #hero .hc:hover                    { }
  #bentoDashboard #hero .hc-l { font-size: 6.5px !important; color: rgba(155,170,192,.38) !important; margin-bottom: 5px !important; letter-spacing: .14em !important; }
  #bentoDashboard #hero .hc-v { font-size: 15px !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; }

  /* ══════════════════════════════════════════════════
     MACRO INTELLIGENCE CARD
     ══════════════════════════════════════════════════ */
  #bentoDashboard #swZoneB {
    background: transparent !important;
    border-color: var(--border) !important;
    height: auto !important; align-self: start !important;
  }
  #bentoDashboard #swZoneB .bd-mac-head { padding: 14px 16px 10px !important; flex-shrink: 0 !important; }
  #bentoDashboard #swZoneB .bd-mac-ttl  { font-size: 15px !important; font-weight: 700 !important; }
  #bentoDashboard #swZoneB #macroMini.bd-mac-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 1px !important;
    flex: 1 !important; min-height: 0 !important; overflow: hidden !important;
    border-radius: 0 !important; margin-bottom: 0 !important;
  }
  #bentoDashboard #swZoneB .bd-mac-grid .macro-card,
  #bentoDashboard #swZoneB .bd-mac-grid .macro-card-mini {
    background: rgb(255 255 255 / 2%) !important; padding: 14px 16px !important;
    border: none !important; border-radius: 0 !important;
  }
  #bentoDashboard #swZoneB .bd-mac-grid .mc-label  { font-size: 6px !important; letter-spacing: .14em !important; color: rgba(155,170,192,.38) !important; margin-bottom: 2px !important; }
  #bentoDashboard #swZoneB .bd-mac-grid .mc-v,
  #bentoDashboard #swZoneB .bd-mac-grid .mc-val    { font-size: 22px !important; font-weight: 900 !important; line-height: 1 !important; }
  #bentoDashboard #swZoneB .bd-mac-grid .mc-sub    { font-size: 7px !important; color: rgba(155,170,192,.38) !important; margin-top: 2px !important; }
  #bentoDashboard #swZoneB .bd-mac-sub             { flex-shrink: 0 !important; max-height: 140px !important; }
  #bentoDashboard #swZoneB > div:nth-child(2)      { flex: none !important; min-height: 0 !important; }
  #bentoDashboard #swZoneB > div:nth-child(3)      { flex-shrink: 0 !important; padding: 0 !important; border-top: 1px solid var(--border, rgba(255,255,255,.055)) !important; }

  /* ══════════════════════════════════════════════════
     WATCHLIST CARD — coin dropdown + focus + rows
     ══════════════════════════════════════════════════ */
  #bentoDashboard #watchlistPanel {
    background: #131824 !important;
    border-color: rgba(255,255,255,.07) !important;
    flex: none !important; height: auto !important;
    align-self: start !important; overflow: hidden !important;
  }
  #bentoDashboard #watchlistPanel .bd-wtch-header {
    padding: 10px 12px 8px !important;
    background: rgba(255,255,255,.015) !important;
    flex-shrink: 0 !important;
  }
  #bentoDashboard #watchlistPanel .bd-wlf-focus {
    background: linear-gradient(160deg,rgba(255,255,255,.02) 0%,transparent 100%) !important;
    flex: none !important;
    min-height: 0 !important;
    padding: 12px 14px 10px !important;
    overflow: visible !important;
  }
  /* Kill the glow div's flow contribution inside watchlist card */
  #bentoDashboard #watchlistPanel .bd-glow {
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }
  #bentoDashboard #watchlistPanel .bd-wlf-name  { font-size: 14px !important; font-weight: 700 !important; }
  #bentoDashboard #watchlistPanel .bd-wlf-price { font-size: 26px !important; font-weight: 900 !important; letter-spacing: -.025em !important; }
  #bentoDashboard #watchlistPanel .bd-wlf-chart-wrap { flex: none !important; height: 150px !important; min-height: 150px !important; }
  #bentoDashboard #watchlistPanel .bd-wtch-pane  { flex: none !important; min-height: 0 !important; }
  #bentoDashboard #watchlistPanel .bd-wtch-rows  { flex: none !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; }
  #bentoDashboard #watchlistPanel .bd-wtch-cols  { padding: 3px 12px !important; }
  /* Watchlist rows: hide last (BTC%) col — too narrow for 5 cols */
  #bentoDashboard #watchlistPanel .wl-row {
    height: 32px !important; padding: 0 12px !important;
    max-width: 100% !important; box-sizing: border-box !important;
    grid-template-columns: 1fr 46px 60px 40px !important;
  }
  #bentoDashboard #watchlistPanel .wl-row > *:last-child { display: none !important; }
  #bentoDashboard #watchlistPanel .bd-wtch-cols span:last-child { display: none !important; }

  /* ══════════════════════════════════════════════════
     DESKTOP-SHELL COUNTER-OVERRIDES
     ══════════════════════════════════════════════════ */

  /* 1. watchlistPanel: reset flex:1/height:0 from old Zone C layout */
  #bentoDashboard #watchlistPanel,
  #bentoDashboard .bd-row-bot #watchlistPanel {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2. hero-cells: force 2×2 not 4×1 */
  #bentoDashboard #hero .hero-cells,
  #bentoDashboard .bd-sig-cells.hero-cells {
    grid-template-columns: 1fr 1fr !important;
    display: grid !important;
    flex: 1 !important;
  }

  /* 3. eval canvas: no 52px cap from wl-row canvas rule */
  #bentoDashboard #swPriceCard #bdEvalChart {
    max-width: none !important;
    max-height: none !important;
  }

  /* 4. swZoneB children: no stolen height */
  #bentoDashboard #swZoneB > div { flex: none !important; flex-shrink: 0 !important; }

  /* 5. bd-row-bot stays grid */
  #bentoDashboard .bd-row-bot { display: grid !important; flex: none !important; }

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


/* ════════════════════════════════════════════════════════════════════════
   FUSED EVALUATION CARD — v3 patch (minimal, non-conflicting)
   Only adds the fused visual layer styles. Layout/flex/height are already
   handled correctly by the existing .bd-card, .bd-eval, and the desktop
   @media block above. We do NOT re-declare those here.
════════════════════════════════════════════════════════════════════════ */

/* ── 0. Kill old bd-ctx strip (it's absent from HTML but safety net) ─── */
#swPriceCard .bd-ctx,
#swPriceCard .bd-ctx-inline,
#swPriceCard .bd-ctx-bar,
#swPriceCard .bd-ctx-zones,
#swPriceCard .bd-ctx-zone,
#swPriceCard .bd-ctx-divider { display: none !important; }

/* ── 1. Ensure header and price row sit above ambient layers ──────────── */
#bentoDashboard #swPriceCard .bd-eval-head,
#bentoDashboard #swPriceCard .bd-ev-price-row {
  position: relative !important;
  z-index: 10 !important;
}

/* ── 2. Kill the old bottom strip so it doesn't add extra height ─────── */
#bentoDashboard #swPriceCard .bd-ev-strip {
  display: none !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* ── 3. PULSE AURA — card-root, behind everything ────────────────────── */
.fused-pulse-aura {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  animation: fused-aura-breathe 6s ease-in-out infinite !important;
}
@keyframes fused-aura-breathe {
  0%,100% { opacity: .65; }
  50%      { opacity: 1;   }
}

/* ── 5. FIB RAYS — card-root, above canvas (z:11 from existing rule) ─── */
.fused-fib-rays {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}
.fused-fib-ray {
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  height: 1px !important;
  border-top: 1px dashed !important;
  opacity: .22 !important;
  transition: opacity .4s !important;
}
.fused-fib-ray.fused-fib-near {
  opacity: .72 !important;
  animation: fused-ray-pulse 2.2s ease-in-out infinite !important;
}
.fused-fib-ray.fused-fib-active {
  opacity: 1 !important;
  border-style: solid !important;
}
@keyframes fused-ray-pulse {
  0%,100% { opacity: .65; }
  50%      { opacity: 1; }
}
.fused-fib-ray-lbl {
  position: absolute !important;
  right: 6px !important; top: -10px !important;
  font-family: var(--mono) !important;
  font-size: 6.5px !important;
  letter-spacing: .07em !important;
  opacity: .5 !important;
  transition: opacity .3s, font-size .3s !important;
  white-space: nowrap !important;
  text-shadow: 0 0 8px currentColor !important;
}
.fused-fib-ray.fused-fib-near   .fused-fib-ray-lbl { opacity: .95 !important; font-size: 7px !important; }
.fused-fib-ray.fused-fib-active .fused-fib-ray-lbl { opacity: 1 !important;   font-size: 7.5px !important; }

/* ── 6. HUD OVERLAYS — inside .bd-ev-chart, z:25 above canvas (z:11) ── */
.fused-hud-pulse {
  position: absolute !important;
  top: 10px !important; right: 12px !important;
  z-index: 25 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 5px !important;
  pointer-events: none !important;
}
.fused-hud-pulse-score {
  font-family: var(--mono) !important;
  font-size: 9px !important;
  letter-spacing: .08em !important;
  color: rgba(155,170,192,.45) !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}
.fused-hud-pulse-score strong {
  font-family: var(--font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
  text-shadow: 0 0 16px currentColor !important;
}
.fused-dow-strip {
  display: flex !important;
  gap: 3px !important;
  align-items: flex-end !important;
}
.fused-dow-bar {
  width: 16px !important;
  border-radius: 2px 2px 0 0 !important;
  transition: opacity .3s !important;
}
.fused-dow-bar.fused-today {
  outline: 1px solid rgba(59,130,246,.55) !important;
  outline-offset: 1px !important;
}
.fused-dow-lbl {
  font-family: var(--mono) !important;
  font-size: 5px !important;
  letter-spacing: .04em !important;
  color: rgba(155,170,192,.3) !important;
  text-align: center !important;
}
.fused-dow-pct {
  font-family: var(--mono) !important;
  font-size: 5px !important;
  text-align: center !important;
}

/* ── 7. MACRO MINI HUD ───────────────────────────────────────────────── */
.fused-hud-macro {
  position: absolute !important;
  bottom: 30px !important; left: 14px !important;
  z-index: 25 !important;
  display: flex !important;
  gap: 14px !important;
  pointer-events: none !important;
}
.fused-hud-macro-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.fused-hud-macro-lbl {
  font-family: var(--mono) !important;
  font-size: 5.5px !important;
  letter-spacing: .12em !important;
  color: rgba(155,170,192,.28) !important;
}
.fused-hud-macro-val {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .03em !important;
}
.fused-hud-macro-tag {
  font-family: var(--mono) !important;
  font-size: 5.5px !important;
  letter-spacing: .09em !important;
  color: rgba(155,170,192,.35) !important;
}

/* ── 8. DELTA BAR ────────────────────────────────────────────────────── */
.fused-delta-bar {
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 26px !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 14px !important;
  gap: 16px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  background: linear-gradient(0deg,rgba(2,3,8,.97) 0%,rgba(3,4,10,.6) 100%) !important;
}
.fused-delta-cell {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--mono) !important;
  font-size: 6.5px !important;
  letter-spacing: .07em !important;
  color: rgba(155,170,192,.38) !important;
}
.fused-delta-cell strong {
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
}
.fused-delta-spacer { flex: 1 !important; }
.fused-strength-label {
  font-family: var(--mono) !important;
  font-size: 5.5px !important;
  letter-spacing: .1em !important;
  color: rgba(155,170,192,.3) !important;
  margin-right: 4px !important;
}
.fused-strength-meter {
  display: inline-flex !important;
  gap: 2px !important;
  align-items: center !important;
}

/* ── 9. SCANLINES ────────────────────────────────────────────────────── */
.fused-scanlines {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,.055) 2px, rgba(0,0,0,.055) 4px
  ) !important;
  opacity: .75 !important;
}



/* ════════════════════════════════════════════════════════════════
   CRYPTO NEWS PANEL — bottom row col 3, replaces watchlistPanel
   ════════════════════════════════════════════════════════════════ */

/* Panel card — matches swZoneB height via align-items:start on parent grid */
.bd-news-panel {
  background: var(--surface);
  border-color: var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Header */
.bd-news-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(59,130,246,.07);
  flex-shrink: 0;
}
.bd-news-panel-ttl {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: rgba(215,222,235,.85);
}
/* Filter row */
.bd-news-filter-row {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 6px 10px 5px;
  border-bottom: 1px solid rgba(59,130,246,.05);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.bd-news-filter-btn {
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .04em;
  color: rgba(155,170,192,.4);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  padding: 2px 6px;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
  white-space: nowrap;
}
.bd-news-filter-btn:hover { color: rgba(255,170,0,.7); border-color: rgba(255,170,0,.2); }
.bd-news-filter-btn.bd-news-filter-on {
  color: rgba(255,170,0,.9);
  background: rgba(255,170,0,.07);
  border-color: rgba(255,170,0,.3);
}
.bd-news-coin-tag {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 7px;
  color: rgba(59,130,246,.5);
  background: rgba(59,130,246,.06);
  border: 1px solid rgba(59,130,246,.15);
  border-radius: 2px;
  padding: 1px 5px;
  letter-spacing: .08em;
}
.bd-news-refresh-btn {
  background: transparent;
  border: none;
  color: rgba(155,170,192,.35);
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  transition: color .15s;
  line-height: 1;
}
.bd-news-refresh-btn:hover { color: rgba(59,130,246,.7); }

/* Feed */
.bd-news-feed {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(59,130,246,.1) transparent;
}
.bd-news-feed::-webkit-scrollbar { width: 3px; }
.bd-news-feed::-webkit-scrollbar-thumb { background: rgba(59,130,246,.1); border-radius: 2px; }

/* News rows */
.bd-news-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(59,130,246,.04);
  text-decoration: none;
  transition: background .12s;
}
.bd-news-row:hover { background: rgba(59,130,246,.025); }
.bd-news-row:last-child { border-bottom: none; }

.bd-news-sent { font-size: 8px; font-family: var(--mono); flex-shrink: 0; margin-top: 2px; line-height: 1; }
.bd-news-bull { color: var(--green); }
.bd-news-bear { color: var(--red); }
.bd-news-neut { color: rgba(155,170,192,.35); }

.bd-news-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bd-news-title {
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  color: rgba(215,222,235,.88);
  line-height: 1.35;
  word-break: break-word;
}
.bd-news-impact { font-size: 7px; margin-right: 2px; color: var(--amber); }
.bd-news-meta { display: flex; gap: 5px; align-items: center; margin-top: 1px; }
.bd-news-src {
  font-family: var(--mono);
  font-size: 6.5px;
  color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.05);
  border: 1px solid rgba(59,130,246,.12);
  border-radius: 2px;
  padding: 0 3px;
  letter-spacing: .04em;
}
.bd-news-age { font-family: var(--mono); font-size: 6.5px; color: var(--text3); }

/* Loading / empty */
.bd-news-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text3);
  letter-spacing: .06em;
}
.bd-news-spinner {
  width: 10px; height: 10px;
  border: 1.5px solid rgba(59,130,246,.1);
  border-top-color: rgba(59,130,246,.6);
  border-radius: 50%;
  animation: bdNewsSpin .7s linear infinite;
}
@keyframes bdNewsSpin { to { transform: rotate(360deg); } }
.bd-news-empty {
  font-family: var(--mono);
  font-size: 8px;
  color: var(--text3);
  text-align: center;
  padding: 20px 0;
  letter-spacing: .05em;
}

/* ── Watchlist focus migrated INTO ops card ── */
.bd-ops-wlf {
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 10px 16px 10px !important;
  background: linear-gradient(160deg, rgba(59,130,246,.018) 0%, transparent 100%);
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   AEON INTELLIGENCE FEED v4 — category-aware news aggregator additions
   Appended to style.css — all vars match existing :root tokens
   ══════════════════════════════════════════════════════════════════════ */

/* ── Social counter pills (header — Trump / Elon counts) ── */
.bd-news-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: .07em;
  padding: 1px 5px 1px 4px;
  border-radius: var(--r);
  border: 1px solid transparent;
  line-height: 1;
}
.bd-news-social-pill .bd-nsp-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bd-news-social-pill .bd-nsp-num { font-weight: 700; }

.bd-nsp-trump {
  color: #1da1f2;
  background: rgba(29,161,242,.06);
  border-color: rgba(29,161,242,.22);
}
.bd-nsp-trump .bd-nsp-dot { background: #1da1f2; }

.bd-nsp-elon {
  color: var(--purple);
  background: var(--p-dim);
  border-color: rgba(139,92,246,.25);
}
.bd-nsp-elon .bd-nsp-dot { background: var(--purple); }

/* ── Category filter buttons ── */
/* Trump */
.bd-nf-trump {
  color: rgba(29,161,242,.45) !important;
  border-color: rgba(29,161,242,.12) !important;
}
.bd-nf-trump:hover,
.bd-nf-trump.bd-news-filter-on {
  color: #1da1f2 !important;
  background: rgba(29,161,242,.08) !important;
  border-color: rgba(29,161,242,.35) !important;
}
/* Elon */
.bd-nf-elon {
  color: rgba(139,92,246,.45) !important;
  border-color: rgba(139,92,246,.12) !important;
}
.bd-nf-elon:hover,
.bd-nf-elon.bd-news-filter-on {
  color: var(--purple) !important;
  background: var(--p-dim) !important;
  border-color: rgba(139,92,246,.35) !important;
}
/* Exploit / hack */
.bd-nf-exploit {
  color: rgba(255,45,85,.45) !important;
  border-color: rgba(255,45,85,.12) !important;
}
.bd-nf-exploit:hover,
.bd-nf-exploit.bd-news-filter-on {
  color: var(--red) !important;
  background: var(--r-dim) !important;
  border-color: rgba(255,45,85,.35) !important;
}
/* Black swan */
.bd-nf-swan {
  color: rgba(255,170,0,.45) !important;
  border-color: rgba(255,170,0,.12) !important;
}
.bd-nf-swan:hover,
.bd-nf-swan.bd-news-filter-on {
  color: var(--amber) !important;
  background: var(--a-dim) !important;
  border-color: rgba(255,170,0,.35) !important;
}

/* ── Category-class news rows ── */
/* Base: override the generic left edge with a coloured accent bar */
.bd-news-row.bd-ncat-trump,
.bd-news-row.bd-ncat-elon,
.bd-news-row.bd-ncat-exploit,
.bd-news-row.bd-ncat-swan {
  padding-left: 10px;
  border-left: 2px solid transparent; /* coloured below */
}

.bd-news-row.bd-ncat-trump {
  border-left-color: rgba(29,161,242,.6);
}
.bd-news-row.bd-ncat-trump:hover {
  background: rgba(29,161,242,.035);
}

.bd-news-row.bd-ncat-elon {
  border-left-color: rgba(139,92,246,.6);
}
.bd-news-row.bd-ncat-elon:hover {
  background: rgba(139,92,246,.035);
}

.bd-news-row.bd-ncat-exploit {
  border-left-color: rgba(255,45,85,.75);
  background: linear-gradient(90deg, rgba(255,45,85,.045) 0%, transparent 55%);
}
.bd-news-row.bd-ncat-exploit:hover {
  background: linear-gradient(90deg, rgba(255,45,85,.08) 0%, rgba(59,130,246,.01) 55%);
}

.bd-news-row.bd-ncat-swan {
  border-left-color: rgba(255,170,0,.75);
  background: linear-gradient(90deg, rgba(255,170,0,.04) 0%, transparent 55%);
}
.bd-news-row.bd-ncat-swan:hover {
  background: linear-gradient(90deg, rgba(255,170,0,.08) 0%, rgba(59,130,246,.01) 55%);
}

/* ── Category badge chips (inline in .bd-news-meta) ── */
.bd-news-cat-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 6px;
  letter-spacing: .05em;
  padding: 0px 4px;
  border-radius: var(--r);
  border: 1px solid transparent;
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1.6;
}
.bd-ncb-trump {
  color: #1da1f2;
  background: rgba(29,161,242,.07);
  border-color: rgba(29,161,242,.22);
}
.bd-ncb-elon {
  color: var(--purple);
  background: var(--p-dim);
  border-color: rgba(139,92,246,.22);
}
.bd-ncb-exploit {
  color: var(--red);
  background: var(--r-dim);
  border-color: rgba(255,45,85,.22);
}
.bd-ncb-swan {
  color: var(--amber);
  background: var(--a-dim);
  border-color: rgba(255,170,0,.22);
}

/* ── Tighten meta row to fit new badge without wrap ── */
.bd-news-meta {
  flex-wrap: nowrap;
  overflow: hidden;
}
/* Allow age + badge to be visible; shrink source label if needed */
.bd-news-src { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ══════════════════════════════════════════════════════════════════════
   AEON INTELLIGENCE FEED — regulatory + onchain category additions
   ══════════════════════════════════════════════════════════════════════ */

/* ── Regulatory category (SEC/CFTC filings) ── */
.bd-nf-regulatory {
  color: rgba(59,130,246,.45) !important;
  border-color: rgba(59,130,246,.12) !important;
}
.bd-nf-regulatory:hover,
.bd-nf-regulatory.bd-news-filter-on {
  color: var(--cyan) !important;
  background: var(--c-dim) !important;
  border-color: rgba(59,130,246,.35) !important;
}

.bd-news-row.bd-ncat-regulatory {
  border-left: 2px solid rgba(59,130,246,.55);
  padding-left: 10px;
}
.bd-news-row.bd-ncat-regulatory:hover {
  background: rgba(59,130,246,.025);
}

.bd-ncb-regulatory {
  color: var(--cyan);
  background: var(--c-dim);
  border-color: rgba(59,130,246,.22);
}

/* ── Onchain category (whale alerts / large transfers) ── */
.bd-nf-onchain {
  color: rgba(0,255,136,.45) !important;
  border-color: rgba(0,255,136,.12) !important;
}
.bd-nf-onchain:hover,
.bd-nf-onchain.bd-news-filter-on {
  color: var(--green) !important;
  background: var(--g-dim) !important;
  border-color: rgba(0,255,136,.35) !important;
}

.bd-news-row.bd-ncat-onchain {
  border-left: 2px solid rgba(0,255,136,.6);
  padding-left: 10px;
}
.bd-news-row.bd-ncat-onchain:hover {
  background: rgba(0,255,136,.025);
}

.bd-ncb-onchain {
  color: var(--green);
  background: var(--g-dim);
  border-color: rgba(0,255,136,.22);
}

/* ══════════════════════════════════════════════════════════
   MOBILE MOON PANEL — layout overrides
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Card: side-by-side, top-aligned, contained */
  #mMoonCurrentCard.moon-current-card {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 10px !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
  }

  /* Left column: fixed 72px, no shrink */
  #mMoonCurrentCard .moon-current-left {
    flex: 0 0 72px !important;
    width: 72px !important;
    height: 72px !important;
    position: relative !important;
  }

  /* Canvas: exactly 72×72 CSS pixels */
  #mMoonCanvas {
    width: 72px !important;
    height: 72px !important;
    border-radius: 50% !important;
    display: block !important;
    box-shadow: 0 0 14px rgba(255,220,100,0.22), 0 0 32px rgba(255,220,100,0.08) !important;
  }

  /* Right column: fills remaining width, clips text cleanly */
  #mMoonCurrentCard .moon-current-right {
    flex: 1 !important;
    min-width: 0 !important;
    width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    padding-top: 1px !important;
  }

  /* Prevent text from overflowing right column */
  #mMoonCurrentCard .moon-phase-name {
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #mMoonCurrentCard .moon-signal-badge {
    font-size: 7.5px !important;
    padding: 2px 6px !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE CHART OVERLAY — Viewport-locked layout fix
   Chart dominates; CVD/MF/TradeFeed panels are capped; no vertical scroll.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1. Overlay is a hard viewport-locked flex column */
  #mChartOverlay {
    overflow: hidden !important;
    height: 100dvh !important;
    height: 100vh !important;
    max-height: 100dvh !important;
  }

  /* 2. Chart wrap owns all remaining space */
  #mChartWrap {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  /* 3. Inner chart: pcChartContent scrolls so sub-panels (RSI/MACD/Delta/Exhaust)
        are accessible below the main canvas — this is intentional.
        pcMainWrap height is set by JS (_forceDraw) and always starts at top. */
  #mChartInner #pcChartContent {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    -webkit-overflow-scrolling: touch;
  }
  #mChartInner #pcMainWrap {
    flex-shrink: 0 !important;
    width: 100% !important;
  }
  #mChartInner #pcMain {
    display: block !important;
    width: 100% !important;
  }

  /* Volume strip: compact */
  #mChartInner #pcVolWrap {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    flex-shrink: 0 !important;
  }
  #mChartInner #pcVol {
    height: 36px !important;
  }

  /* 4. Pressure HUD row (CVD · OB · Vol Ratio) */
  #mPressureRow {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    max-height: 68px !important;
    overflow: hidden !important;
  }
  .m-hud-cell {
    padding: 5px 7px !important;
  }
  .m-hud-val {
    font-size: 9px !important;
  }
  .m-hud-lbl {
    font-size: 5.5px !important;
    margin-bottom: 2px !important;
  }
  .m-hud-sub {
    font-size: 5.5px !important;
  }

  /* 5. Money Flow row: single compact line */
  #mMfRow {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    padding: 5px 12px 6px !important;
    max-height: 52px !important;
    overflow: hidden !important;
  }
  #mMfRow .m-hud-lbl {
    margin-bottom: 3px !important;
    font-size: 5.5px !important;
  }
  #mHudMfTiers {
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  #mHudMfTiers > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  #mHudMfTiers .mf-tier-row,
  #mHudMfTiers [class*="mf-tier"] {
    padding: 3px 5px !important;
  }
  #mHudMfTiers .mf-verdict,
  #mHudMfTiers .mf-signal-badge,
  #mHudMfTiers [class*="verdict"],
  #mHudMfTiers [class*="badge"],
  #mHudMfTiers [class*="aligned"],
  #mHudMfTiers [class*="signal"] {
    font-size: 6px !important;
    padding: 1px 3px !important;
  }

  /* 6. Trade Feed: strict height cap */
  #mTradeFeedWrap {
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    max-height: 96px !important;
    overflow: hidden !important;
  }
  #mTradeFeedList {
    max-height: 68px !important;
  }
  .m-trade-row {
    padding: 3px 10px !important;
    font-size: 8px !important;
  }
  .m-trade-ts {
    font-size: 6.5px !important;
  }

  /* 7. Bottom stats bar: compact */
  #mChartBottomBar {
    flex-shrink: 0 !important;
  }
  .m-chart-stat {
    padding: 5px 8px !important;
  }

}
/* ═══ end mobile chart viewport fix ═══ */

/* ═══════════════════════════════════════════════════════════════════════════
   AEON PANEL REDESIGN — Recent Operations + Quick Actions
   Appended to style.css — overrides all prior rules via specificity + !important
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --aeon-bg-panel:   #131824;
  --aeon-cyan:       #3B82F6;
  --aeon-cyan-10:    rgba(59,130,246,.10);
  --aeon-cyan-18:    rgba(59,130,246,.18);
  --aeon-cyan-30:    rgba(59,130,246,.30);
  --aeon-green:      #00e096;
  --aeon-green-22:   rgba(0,224,150,.22);
  --aeon-red:        #ff3e5e;
  --aeon-red-22:     rgba(255,62,94,.22);
  --aeon-amber:      rgba(240,185,11,1);
  --aeon-border:     rgba(255,255,255,.055);
  --aeon-border-c:   rgba(59,130,246,.14);
  --aeon-border-c2:  rgba(59,130,246,.28);
  --aeon-text2:      #6a7d93;
  --aeon-r:          6px;
  --aeon-rl:         10px;
}

/* ── Top-edge accent elements (replace bd-glow) ── */
.bd-ops-top-edge,
.bd-qa-top-edge {
  position: absolute !important;
  top: 0 !important; left: 10% !important;
  width: 80% !important; height: 1px !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(59,130,246,.42) 38%,
    rgba(59,130,246,.42) 62%,
    transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  flex-shrink: 0 !important;
}

/* ══════════════════════════════════════════════════
   RECENT OPERATIONS CARD  #swWalletCard
   ══════════════════════════════════════════════════ */
#swWalletCard.bd-card.bd-ops {
  background: linear-gradient(180deg, #131824 0%, #131824 100%) !important;
  border: 1px solid rgba(59,130,246,.09) !important;
  border-top: 1px solid rgba(59,130,246,.22) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Ambient bloom */
#swWalletCard.bd-card.bd-ops::before {
  content: '' !important;
  position: absolute !important;
  top: -60px !important; left: -40px !important;
  width: 240px !important; height: 240px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(59,130,246,.055) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Scan-line overlay */
#swWalletCard.bd-card.bd-ops::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#swWalletCard > * { position: relative; z-index: 1; }

/* Header */
#swWalletCard .bd-ops-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 18px 18px 13px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  flex-shrink: 0 !important;
}
#swWalletCard .bd-ev-label {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -.01em !important;
  background: linear-gradient(135deg,
    rgba(215,225,240,.98) 0%,
    rgba(160,200,230,.80) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-transform: none !important;
}
#swWalletCard .bd-ops-filter-btn {
  width: 30px !important; height: 30px !important;
  border-radius: var(--aeon-r) !important;
  border: 1px solid var(--aeon-border-c) !important;
  background: var(--aeon-cyan-10) !important;
  color: rgba(59,130,246,.65) !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .15s, border-color .15s, color .15s !important;
  flex-shrink: 0 !important;
}
#swWalletCard .bd-ops-filter-btn:hover {
  background: var(--aeon-cyan-18) !important;
  border-color: var(--aeon-cyan-30) !important;
  color: rgba(59,130,246,.95) !important;
}

/* Filter pills */
#swWalletCard .bd-ops-filter-row {
  padding: 8px 16px 6px !important;
  gap: 5px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
#swWalletCard .bd-ops-fpill {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 7.5px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid var(--aeon-border) !important;
  background: rgba(255,255,255,.03) !important;
  color: var(--aeon-text2) !important;
  transition: all .14s !important;
}
#swWalletCard .bd-ops-fpill:hover,
#swWalletCard .bd-ops-fpill.bd-ops-fpill-on {
  border-color: var(--aeon-border-c2) !important;
  background: var(--aeon-cyan-10) !important;
  color: var(--aeon-cyan) !important;
}

/* Wallet focus section */
#swWalletCard .bd-wlf-focus.bd-ops-wlf {
  background: linear-gradient(160deg, rgba(59,130,246,.028) 0%, transparent 60%) !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  padding: 13px 16px 11px !important;
}
#swWalletCard .bd-wlf-icon-wrap {
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  background: rgba(59,130,246,.06) !important;
  border: 1px solid rgba(59,130,246,.16) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .15s, border-color .15s !important;
  cursor: pointer !important;
}
#swWalletCard .bd-wlf-icon-wrap:hover {
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.28) !important;
}
#swWalletCard .bd-wlf-icon {
  font-size: 17px !important;
  color: rgba(59,130,246,.82) !important;
}
#swWalletCard .bd-wlf-name {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 14px !important; font-weight: 700 !important;
  color: rgba(215,225,240,.95) !important;
  letter-spacing: .01em !important;
}
#swWalletCard .bd-wlf-sub {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 9px !important;
  color: rgba(100,125,150,.75) !important;
  letter-spacing: .06em !important;
  margin-top: 2px !important;
}
#swWalletCard .bd-wlf-price {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 24px !important; font-weight: 900 !important;
  color: rgba(215,225,240,.98) !important;
  letter-spacing: -.025em !important;
  line-height: 1 !important;
}
#swWalletCard .bd-wlf-chg-badge {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 8.5px !important; font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: 5px !important;
  letter-spacing: .04em !important;
  margin-top: 4px !important;
  display: inline-block !important;
}

/* Chart area */
#swWalletCard .bd-wlf-chart-wrap {
  height: 76px !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  margin-top: 5px !important;
  background: rgba(0,0,0,.15) !important;
  border: 1px solid rgba(255,255,255,.04) !important;
}

/* Transaction list */
#swWalletCard .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,.08) transparent !important;
}
#swWalletCard .bd-ops-empty {
  padding: 28px 16px !important;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 9px !important; letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(60,80,100,.55) !important;
  text-align: center !important;
}

/* ── Desktop bento specificity boost ── */
@media (min-width: 1024px) {
  #bentoDashboard #swWalletCard {
    background: linear-gradient(180deg, #131824 0%, #131824 100%) !important;
    border: 1px solid rgba(59,130,246,.09) !important;
    border-top: 1px solid rgba(59,130,246,.22) !important;
  }
  #bentoDashboard #swWalletCard .bd-ev-label {
    font-size: 20px !important; font-weight: 700 !important;
    line-height: 1.15 !important; letter-spacing: -.01em !important;
    background: linear-gradient(135deg,
      rgba(215,225,240,.98) 0%, rgba(160,200,230,.80) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
  }
  #bentoDashboard #swWalletCard .bd-wlf-price {
    font-size: 24px !important; font-weight: 900 !important;
  }
  #bentoDashboard #swWalletCard .bd-wlf-chart-wrap {
    height: 72px !important;
  }
}

/* ══════════════════════════════════════════════════
   QUICK ACTIONS STRIP  #swQuickActions
   ══════════════════════════════════════════════════ */
#swQuickActions.bd-card.bd-qa {
  background: #0e1015 !important;
  border: none !important;
  border-top: 1px solid rgba(59,130,246,.18) !important;
  border-left: 1px solid rgba(255,255,255,.04) !important;
  padding: 10px 7px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Left rail glow */
#swQuickActions.bd-card.bd-qa::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 8% !important;
  width: 1px !important; height: 84% !important;
  background: linear-gradient(180deg,
    transparent 0%, rgba(59,130,246,.28) 30%,
    rgba(59,130,246,.14) 70%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Gradient wash */
#swQuickActions.bd-card.bd-qa::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(180deg,
    rgba(59,130,246,.04) 0%, transparent 35%,
    transparent 65%, rgba(0,0,0,.15) 100%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#swQuickActions > * { position: relative; z-index: 1; }

/* Button container */
#swQuickActions .bd-qa-btns {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
  flex: 1 !important; min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Buttons */
#swQuickActions .bd-qa-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex: 1 !important; min-height: 0 !important; height: auto !important;
  width: 100% !important;
  border-radius: var(--aeon-rl) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  background: rgba(255,255,255,.025) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  color: rgba(130,150,172,.50) !important;
  padding: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease,
    box-shadow .18s ease !important;
}
/* Top sheen */
#swQuickActions .bd-qa-btn::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 15% !important;
  width: 70% !important; height: 1px !important;
  background: rgba(255,255,255,.07) !important;
  pointer-events: none !important;
  transition: background .18s !important;
}
/* Left accent bar */
#swQuickActions .bd-qa-btn::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 25% !important;
  width: 2px !important; height: 50% !important;
  border-radius: 0 2px 2px 0 !important;
  background: transparent !important;
  transition: background .18s ease !important;
}
#swQuickActions .bd-qa-btn:hover {
  background: rgba(59,130,246,.07) !important;
  border-color: rgba(59,130,246,.24) !important;
  color: rgba(59,130,246,.90) !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 0 18px rgba(59,130,246,0.049),
    inset 0 0 10px rgba(59,130,246,0.03) !important;
}
#swQuickActions .bd-qa-btn:hover::before {
  background: rgba(59,130,246,.18) !important;
}
#swQuickActions .bd-qa-btn:hover::after {
  background: rgba(59,130,246,.58) !important;
}
#swQuickActions .bd-qa-btn:active {
  transform: translateY(0) scale(.97) !important;
  box-shadow: none !important;
}

/* Icon */
#swQuickActions .bd-qa-icon {
  width: 18px !important; height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  fill: none !important;
  flex-shrink: 0 !important;
  transition: filter .18s, transform .18s !important;
}
#swQuickActions .bd-qa-btn:hover .bd-qa-icon {
  filter: drop-shadow(0 0 4px rgba(59,130,246,.48)) !important;
  transform: scale(1.06) !important;
}

/* Label */
#swQuickActions .bd-qa-label {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 6.5px !important; font-weight: 600 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase !important;
  color: inherit !important;
  line-height: 1 !important;
  opacity: 1 !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 2px !important;
  margin-top: 6px !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
  flex-shrink: 0 !important;
  width: 100% !important;
}
#swQuickActions .bd-qa-exc-dot-wrap {
  width: 32px !important; height: 32px !important;
  border-radius: 9px !important;
  background: rgba(240,185,11,.07) !important;
  border: 1px solid rgba(240,185,11,.18) !important;
  box-shadow: 0 0 14px rgba(240,185,11,.07),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .2s, box-shadow .2s !important;
  cursor: pointer !important;
}
#swQuickActions .bd-qa-exc-dot-wrap:hover {
  background: rgba(240,185,11,.12) !important;
  box-shadow: 0 0 20px rgba(240,185,11,.16) !important;
}
#swQuickActions .bd-qa-exc-dot {
  width: 12px !important; height: 12px !important;
  border-radius: 3px !important;
  background: rgba(240,185,11,.82) !important;
  box-shadow: 0 0 8px rgba(240,185,11,.55),
    0 0 16px rgba(240,185,11,.18) !important;
  display: block !important;
}
#swQuickActions .bd-qa-exc-name {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 5.5px !important; font-weight: 600 !important;
  letter-spacing: .16em !important;
  color: rgba(140,155,175,.30) !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* ── END AEON PANEL REDESIGN ── */

/* ═══════════════════════════════════════════════════════════════════════════
   AEON INTELLIGENCE FEED REDESIGN
   Targets: #cryptoNewsPanel  ·  .bd-news-*
   Appended to style.css — overrides all prior rules
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Card shell ── */
#cryptoNewsPanel.bd-card.bd-news-panel {
  background: rgb(255 255 255 / 2%) !important;
  border: 1px solid rgb(255 255 255 / 0%) !important;
  border-top: 1px solid rgb(255 255 255 / 0%) !important;
  position: relative !important;
  overflow: hidden !important;
}
/* Ambient top-right bloom — removed, was a leftover blue accent */
#cryptoNewsPanel::before {
  display: none !important;
}
/* Scan-line texture — kept, just quieter */
#cryptoNewsPanel::after {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background-image: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,0,0,.035) 3px, rgba(0,0,0,.035) 4px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: .3 !important;
}
#cryptoNewsPanel > * { position: relative; z-index: 1; }

/* Top-edge glow accent */
#cryptoNewsPanel .bd-glow.bd-glow-cyan {
  position: absolute !important;
  top: 0 !important; left: 8% !important;
  width: 84% !important; height: 1px !important;
  background: linear-gradient(90deg,
    transparent, rgba(110,168,247,.28) 35%,
    rgba(110,168,247,.28) 65%, transparent) !important;
  border-radius: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  /* Kill any prior glow styles */
  filter: none !important;
  opacity: 1 !important;
}

/* ── Header ── */
#cryptoNewsPanel .bd-news-panel-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 15px 16px 11px !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  flex-shrink: 0 !important;
}

/* Title */
#cryptoNewsPanel .bd-news-panel-ttl {
  font-family: 'Inter', sans-serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: var(--text) !important;
  background-clip: initial !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
}
/* Icon inside title — escape the clip */
#cryptoNewsPanel .bd-news-panel-ttl svg {
  flex-shrink: 0 !important;
  -webkit-text-fill-color: unset !important;
  opacity: .75 !important;
}

/* Social counter pills */
#cryptoNewsPanel .bd-news-social-pill {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid #2A3342 !important;
}
#cryptoNewsPanel .bd-news-social-pill .bd-nsp-dot {
  width: 6px !important; height: 6px !important;
}
#cryptoNewsPanel .bd-nsp-trump {
  color: #3B82F6 !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid #2A3342 !important;
}
#cryptoNewsPanel .bd-nsp-trump .bd-nsp-dot { background: #3B82F6 !important; }
#cryptoNewsPanel .bd-nsp-elon {
  color: #A855F7 !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid #2A3342 !important;
}
#cryptoNewsPanel .bd-nsp-elon .bd-nsp-dot { background: #A855F7 !important; }

/* ── Filter row ── */
#cryptoNewsPanel .bd-news-filter-row {
  display: flex !important;
  align-items: center !important;
  gap: 3px !important;
  padding: 7px 12px 6px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  flex-shrink: 0 !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
#cryptoNewsPanel .bd-news-filter-row::-webkit-scrollbar { display: none !important; }

/* Base filter buttons */
#cryptoNewsPanel .bd-news-filter-btn {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 7px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  color: rgba(100,120,148,.55) !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 5px !important;
  padding: 3px 8px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: color .14s, background .14s, border-color .14s !important;
}
#cryptoNewsPanel .bd-news-filter-btn:hover {
  color: rgba(255,176,32,.80) !important;
  border-color: rgba(255,176,32,.22) !important;
  background: rgba(255,176,32,.06) !important;
}
#cryptoNewsPanel .bd-news-filter-btn.bd-news-filter-on {
  color: rgba(255,176,32,.95) !important;
  background: rgba(255,176,32,.09) !important;
  border-color: rgba(255,176,32,.32) !important;
}

/* Speciality filter buttons — preserve category colours */
#cryptoNewsPanel .bd-nf-trump               { color: rgba(29,161,242,.50) !important; border-color: rgba(29,161,242,.13) !important; background: rgba(29,161,242,.03) !important; }
#cryptoNewsPanel .bd-nf-trump:hover,
#cryptoNewsPanel .bd-nf-trump.bd-news-filter-on { color: #1da1f2 !important; background: rgba(29,161,242,.10) !important; border-color: rgba(29,161,242,.35) !important; }

#cryptoNewsPanel .bd-nf-elon                { color: rgba(139,92,246,.50) !important; border-color: rgba(139,92,246,.13) !important; background: rgba(139,92,246,.03) !important; }
#cryptoNewsPanel .bd-nf-elon:hover,
#cryptoNewsPanel .bd-nf-elon.bd-news-filter-on { color: rgba(139,92,246,.95) !important; background: rgba(139,92,246,.10) !important; border-color: rgba(139,92,246,.35) !important; }

#cryptoNewsPanel .bd-nf-exploit             { color: rgba(255,45,85,.50) !important; border-color: rgba(255,45,85,.13) !important; background: rgba(255,45,85,.03) !important; }
#cryptoNewsPanel .bd-nf-exploit:hover,
#cryptoNewsPanel .bd-nf-exploit.bd-news-filter-on { color: rgba(255,45,85,.95) !important; background: rgba(255,45,85,.10) !important; border-color: rgba(255,45,85,.35) !important; }

#cryptoNewsPanel .bd-nf-swan                { color: rgba(255,170,0,.50) !important; border-color: rgba(255,170,0,.13) !important; background: rgba(255,170,0,.03) !important; }
#cryptoNewsPanel .bd-nf-swan:hover,
#cryptoNewsPanel .bd-nf-swan.bd-news-filter-on { color: rgba(255,170,0,.95) !important; background: rgba(255,170,0,.10) !important; border-color: rgba(255,170,0,.35) !important; }

#cryptoNewsPanel .bd-nf-regulatory          { color: rgba(59,130,246,.50) !important; border-color: rgba(59,130,246,.13) !important; background: rgba(59,130,246,.03) !important; }
#cryptoNewsPanel .bd-nf-regulatory:hover,
#cryptoNewsPanel .bd-nf-regulatory.bd-news-filter-on { color: rgba(59,130,246,.95) !important; background: rgba(59,130,246,.10) !important; border-color: rgba(59,130,246,.35) !important; }

#cryptoNewsPanel .bd-nf-onchain             { color: rgba(0,255,136,.50) !important; border-color: rgba(0,255,136,.13) !important; background: rgba(0,255,136,.03) !important; }
#cryptoNewsPanel .bd-nf-onchain:hover,
#cryptoNewsPanel .bd-nf-onchain.bd-news-filter-on { color: rgba(0,255,136,.95) !important; background: rgba(0,255,136,.10) !important; border-color: rgba(0,255,136,.35) !important; }

/* Coin tag */
#cryptoNewsPanel .bd-news-coin-tag {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 7px !important; font-weight: 700 !important;
  letter-spacing: .12em !important;
  color: rgba(59,130,246,.75) !important;
  background: rgba(59,130,246,.07) !important;
  border: 1px solid rgba(59,130,246,.20) !important;
  border-radius: 5px !important;
  padding: 2px 7px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
  transition: background .14s, border-color .14s, color .14s !important;
}
#cryptoNewsPanel .bd-news-coin-tag:hover {
  color: rgba(59,130,246,.96) !important;
  background: rgba(59,130,246,.12) !important;
  border-color: rgba(59,130,246,.32) !important;
}

/* Refresh button */
#cryptoNewsPanel .bd-news-refresh-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 5px !important;
  color: rgba(100,120,148,.45) !important;
  font-size: 12px !important;
  cursor: pointer !important;
  padding: 2px 5px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: color .14s, border-color .14s, background .14s !important;
}
#cryptoNewsPanel .bd-news-refresh-btn:hover {
  color: rgba(59,130,246,.80) !important;
  border-color: rgba(59,130,246,.22) !important;
  background: rgba(59,130,246,.06) !important;
}

/* ── Feed area ── */
#cryptoNewsPanel .bd-news-feed {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(59,130,246,.08) transparent !important;
}
#cryptoNewsPanel .bd-news-feed::-webkit-scrollbar { width: 2px !important; }
#cryptoNewsPanel .bd-news-feed::-webkit-scrollbar-thumb {
  background: rgba(59,130,246,.10) !important;
  border-radius: 2px !important;
}

/* ── News rows ── */
#cryptoNewsPanel .bd-news-row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  padding: 9px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,.035) !important;
  text-decoration: none !important;
  transition: background .12s !important;
  position: relative !important;
}
#cryptoNewsPanel .bd-news-row:hover {
  background: rgba(59,130,246,.028) !important;
}
#cryptoNewsPanel .bd-news-row:last-child { border-bottom: none !important; }

/* Sentiment dot — bigger, cleaner */
#cryptoNewsPanel .bd-news-sent {
  font-size: 9px !important;
  flex-shrink: 0 !important;
  margin-top: 3px !important;
  line-height: 1 !important;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
}
#cryptoNewsPanel .bd-news-bull { color: #00e096 !important; }
#cryptoNewsPanel .bd-news-bear { color: #ff3e5e !important; }
#cryptoNewsPanel .bd-news-neut { color: rgba(100,120,148,.35) !important; }

/* Body */
#cryptoNewsPanel .bd-news-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

/* Headline text — sharper, more readable */
#cryptoNewsPanel .bd-news-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: rgba(210,222,238,.88) !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  letter-spacing: .005em !important;
}
#cryptoNewsPanel .bd-news-row:hover .bd-news-title {
  color: rgba(215,228,245,.96) !important;
}

/* Meta row */
#cryptoNewsPanel .bd-news-meta {
  display: flex !important;
  gap: 5px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

/* Source badge */
#cryptoNewsPanel .bd-news-src {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 6.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(59,130,246,.55) !important;
  background: rgba(59,130,246,.06) !important;
  border: 1px solid rgba(59,130,246,.14) !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-shrink: 1 !important;
}

/* Age */
#cryptoNewsPanel .bd-news-age {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 6.5px !important;
  color: rgba(90,110,135,.55) !important;
  flex-shrink: 0 !important;
}

/* Impact marker */
#cryptoNewsPanel .bd-news-impact {
  font-size: 8px !important;
  color: rgba(255,176,32,.80) !important;
  margin-right: 1px !important;
}

/* ── Category row accents — sharper left bar with surface tint ── */
#cryptoNewsPanel .bd-news-row.bd-ncat-trump,
#cryptoNewsPanel .bd-news-row.bd-ncat-elon,
#cryptoNewsPanel .bd-news-row.bd-ncat-exploit,
#cryptoNewsPanel .bd-news-row.bd-ncat-swan,
#cryptoNewsPanel .bd-news-row.bd-ncat-regulatory,
#cryptoNewsPanel .bd-news-row.bd-ncat-onchain {
  padding-left: 12px !important;
  border-left: 2px solid transparent !important;
}

#cryptoNewsPanel .bd-news-row.bd-ncat-trump      { border-left-color: rgba(29,161,242,.65) !important; }
#cryptoNewsPanel .bd-news-row.bd-ncat-trump:hover { background: rgba(29,161,242,.04) !important; }

#cryptoNewsPanel .bd-news-row.bd-ncat-elon       { border-left-color: rgba(139,92,246,.65) !important; }
#cryptoNewsPanel .bd-news-row.bd-ncat-elon:hover  { background: rgba(139,92,246,.04) !important; }

#cryptoNewsPanel .bd-news-row.bd-ncat-exploit {
  border-left-color: rgba(255,45,85,.80) !important;
  background: linear-gradient(90deg, rgba(255,45,85,.04) 0%, transparent 50%) !important;
}
#cryptoNewsPanel .bd-news-row.bd-ncat-exploit:hover {
  background: linear-gradient(90deg, rgba(255,45,85,.09) 0%, rgba(59,130,246,.01) 50%) !important;
}

#cryptoNewsPanel .bd-news-row.bd-ncat-swan {
  border-left-color: rgba(255,170,0,.80) !important;
  background: linear-gradient(90deg, rgba(255,170,0,.04) 0%, transparent 50%) !important;
}
#cryptoNewsPanel .bd-news-row.bd-ncat-swan:hover {
  background: linear-gradient(90deg, rgba(255,170,0,.09) 0%, rgba(59,130,246,.01) 50%) !important;
}

#cryptoNewsPanel .bd-news-row.bd-ncat-regulatory { border-left-color: rgba(59,130,246,.60) !important; }
#cryptoNewsPanel .bd-news-row.bd-ncat-regulatory:hover { background: rgba(59,130,246,.03) !important; }

#cryptoNewsPanel .bd-news-row.bd-ncat-onchain    { border-left-color: rgba(0,255,136,.65) !important; }
#cryptoNewsPanel .bd-news-row.bd-ncat-onchain:hover { background: rgba(0,255,136,.03) !important; }

/* ── Category badge chips ── */
#cryptoNewsPanel .bd-news-cat-badge {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 6px !important; font-weight: 600 !important;
  letter-spacing: .07em !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  border: 1px solid transparent !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  line-height: 1.6 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── Loading / empty states ── */
#cryptoNewsPanel .bd-news-loading {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 28px 0 !important;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 8px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(70,90,115,.65) !important;
}
#cryptoNewsPanel .bd-news-spinner {
  width: 11px !important; height: 11px !important;
  border: 1.5px solid rgba(59,130,246,.10) !important;
  border-top-color: rgba(59,130,246,.65) !important;
  border-radius: 50% !important;
  animation: bdNewsSpin .7s linear infinite !important;
}
#cryptoNewsPanel .bd-news-empty {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 8px !important;
  letter-spacing: .10em !important;
  color: rgba(70,90,115,.60) !important;
  text-align: center !important;
  padding: 24px 0 !important;
  text-transform: uppercase !important;
}

/* ── END AEON INTELLIGENCE FEED REDESIGN ── */

/* ═══════════════════════════════════════════════════════════════════════════
   AEON INTELLIGENCE FEED — density + sizing corrections
   ═══════════════════════════════════════════════════════════════════════════ */

/* Headlines: back to compact terminal size */
#cryptoNewsPanel .bd-news-title {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.30 !important;
  color: rgba(210,222,238,.88) !important;
  letter-spacing: .01em !important;
  word-break: break-word !important;
}

/* Tighter row padding — dense feed feel */
#cryptoNewsPanel .bd-news-row {
  padding: 6px 12px 6px 14px !important;
  gap: 7px !important;
}
#cryptoNewsPanel .bd-news-row.bd-ncat-trump,
#cryptoNewsPanel .bd-news-row.bd-ncat-elon,
#cryptoNewsPanel .bd-news-row.bd-ncat-exploit,
#cryptoNewsPanel .bd-news-row.bd-ncat-swan,
#cryptoNewsPanel .bd-news-row.bd-ncat-regulatory,
#cryptoNewsPanel .bd-news-row.bd-ncat-onchain {
  padding-left: 10px !important;
}

/* Body gap: tighten headline→meta spacing */
#cryptoNewsPanel .bd-news-body {
  gap: 2px !important;
}

/* Sentiment dot: smaller */
#cryptoNewsPanel .bd-news-sent {
  font-size: 7px !important;
  margin-top: 2px !important;
}

/* Filter row: allow BTC tag + refresh to always show */
#cryptoNewsPanel .bd-news-filter-row {
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 3px !important;
  padding: 6px 10px 5px !important;
}
/* Shrink text-only pills on small panel widths */
#cryptoNewsPanel #newsFilterAll,
#cryptoNewsPanel #newsFilterBull,
#cryptoNewsPanel #newsFilterBear,
#cryptoNewsPanel #newsFilterHigh {
  padding: 3px 6px !important;
  font-size: 6.5px !important;
}

/* ── END density corrections ── */

/* ═══════════════════════════════════════════════════════════════════════════
   AEON ETF CARD REDESIGN
   Targets: #etfMiniCard · #etfMini · .etf-label · .etf-val · .etf-meta · .etf-signal
   ═══════════════════════════════════════════════════════════════════════════ */

/* Container — fill the subpane cleanly */
#etfMiniCard {
  overflow: hidden !important;
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
#etfMiniCard > div {
  flex: 1 !important;
  min-height: 0 !important;
}

/* Strip container (legacy etfMini slot) */
#etfMini {
  background: transparent !important;
  border-top: none !important;
}

/* Class-based elements — upgrade font + weight */
#etfMiniCard .etf-label,
#etfMini .etf-label {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 6.5px !important;
  letter-spacing: .16em !important;
  color: rgba(90,110,135,.70) !important;
  text-transform: uppercase !important;
}

#etfMiniCard .etf-val,
#etfMini .etf-val {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -.02em !important;
  line-height: 1 !important;
}

#etfMiniCard .etf-meta,
#etfMini .etf-meta {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 7.5px !important;
  color: rgba(100,120,148,.60) !important;
  margin-top: 5px !important;
  letter-spacing: .04em !important;
}

#etfMiniCard .etf-signal,
#etfMini .etf-signal {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 7.5px !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
}

/* Bento specificity boost */
@media (min-width: 1024px) {
  #bentoDashboard #etfMiniCard .etf-label,
  #bentoDashboard #etfMini .etf-label { font-size: 6.5px !important; }
  #bentoDashboard #etfMiniCard .etf-val,
  #bentoDashboard #etfMini .etf-val   { font-size: 28px !important; }
  #bentoDashboard #etfMiniCard .etf-meta,
  #bentoDashboard #etfMini .etf-meta  { font-size: 7.5px !important; }
}

/* Sub-tab bar — tighten to match redesign language */
.bd-mac-sub { display: flex; flex-direction: column; flex-shrink: 0; }
.bd-mac-sub-tabs {
  display: flex !important;
  border-bottom: 1px solid rgba(255,255,255,.05) !important;
  flex-shrink: 0 !important;
}
.bd-mac-stab {
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  font-size: 6.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  padding: 7px 10px !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
  color: rgba(90,110,135,.55) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  transition: color .14s, border-color .14s !important;
  flex: 1 !important;
  justify-content: center !important;
}
.bd-mac-stab:hover { color: rgba(59,130,246,.70) !important; }
.bd-mac-stab-on {
  color: rgba(59,130,246,.90) !important;
  border-bottom-color: rgba(59,130,246,.50) !important;
  background: rgba(59,130,246,.04) !important;
}

/* ── END ETF CARD REDESIGN ── */

/* ── ETF card layout fix — ensure inner wrapper is a flex row ── */
#etfMiniCard {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
/* The rendered inner div must be a row — override any column inheritance */
#etfMiniCard > div:first-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}
/* Children of that row div are the columns — must not be forced into column */
#etfMiniCard > div:first-child > div {
  flex-direction: column !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AEON ETF CARD v2 — layout + container fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* Give the subpane enough height to breathe */
#bentoDashboard #swZoneB .bd-mac-sub {
  flex-shrink: 0 !important;
  max-height: 148px !important;
}
#bentoDashboard #swZoneB > div { flex: none !important; flex-shrink: 0 !important; }

/* ETF subpane: fill the subpane as a flex column */
#macSubPaneEtf {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

/* etfMiniCard: fill subpane, pass height to inner rendered div */
#etfMiniCard {
  flex: 1 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  height: 100% !important;
}

/* The rendered template wrapper — must be a row */
#etfMiniCard > div {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;   /* ← force row, override any column inheritance */
  align-items: stretch !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Column children — must be column, not inherit row */
#etfMiniCard > div > div {
  display: flex !important;
  flex-direction: column !important;
}

/* Kill old padding/max-height rules that conflict */
#bentoDashboard #etfMiniCard > div { padding: 0 !important; }
#bentoDashboard #etfMiniCard .etf-val { font-size: 28px !important; }
#bentoDashboard #etfMiniCard .etf-label { font-size: 6px !important; }
#bentoDashboard #etfMiniCard .etf-meta  { font-size: 7px !important; }

/* ── END ETF v2 ── */

/* ═══════════════════════════════════════════════════════════════════════════
   AEON ETF CARD v3 — class-based, no selector conflicts
   ═══════════════════════════════════════════════════════════════════════════ */

/* Outer wrapper */
.aeon-etf-wrap {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  height: 100% !important;
  background: #0B0F15 !important;
  border: 1px solid #1a223000 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  font-family: 'JetBrains Mono', 'Share Tech Mono', monospace !important;
  position: relative !important;
}
/* Top-edge accent via pseudo on wrapper */
.aeon-etf-wrap::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* ── BTC column ── */
.aeon-etf-btc {
  flex: 0 0 auto !important;
  width: 160px !important;
  padding: 11px 14px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-right: 1px solid #1A2230 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ── History column ── */
.aeon-etf-hist {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 11px 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  border-right: 1px solid #1A2230 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* ── ETH column ── */
.aeon-etf-eth {
  flex: 0 0 auto !important;
  width: 90px !important;
  padding: 11px 12px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Shared: label */
.aeon-etf-lbl {
  font-size: 5.5px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: #6B7280 !important;
  margin-bottom: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  white-space: nowrap !important;
}
.aeon-etf-date-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.aeon-etf-date {
  font-size: 5.5px !important;
  letter-spacing: .05em !important;
  color: #6B7280 !important;
  text-transform: none !important;
}
.aeon-etf-dot {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
}

/* Shared: big number */
.aeon-etf-num {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
  margin-bottom: 5px !important;
  color: #F2F4F7 !important;
}

/* Shared: pill + aum row */
.aeon-etf-row {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}
.aeon-etf-pill {
  font-size: 5.5px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  border: 1px solid !important;
  white-space: nowrap !important;
  display: inline-block !important;
}
.aeon-etf-aum {
  font-size: 5.5px !important;
  color: #6B7280 !important;
  white-space: nowrap !important;
  letter-spacing: .04em !important;
}
/* ETH pill — tighter letter-spacing so OUTFLOW fits within fixed column width */
.aeon-etf-eth .aeon-etf-pill {
  letter-spacing: .06em !important;
  padding: 2px 5px !important;
}

/* History label */
.aeon-etf-hist-lbl {
  font-size: 5.5px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #9AA3AF !important;
  flex-shrink: 0 !important;
  margin-bottom: 5px !important;
}

/* ── Diverging chart: y-axis + gridlines + bars ── */
.aeon-etf-chart {
  display: flex !important;
  align-items: stretch !important;
  gap: 4px !important;
  flex: 1 !important;
  min-height: 0 !important;
}
.aeon-etf-yaxis {
  flex: 0 0 auto !important;
  width: 20px !important;
  height: 54px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  box-sizing: border-box !important;
  padding-right: 2px !important;
  font-size: 4.5px !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  color: #6B7280 !important;
  white-space: nowrap !important;
}
.aeon-etf-chart-body {
  position: relative !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 54px !important;
}
.aeon-etf-gridline {
  position: absolute !important;
  left: 0 !important; right: 0 !important;
  height: 1px !important;
  background: #111823 !important;
}
.aeon-etf-zeroline {
  background: #2A3342 !important;
}

/* Bar container */
.aeon-etf-bars {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  gap: 3px !important;
  align-items: stretch !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
.aeon-etf-bar-col {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.aeon-etf-bar-top {
  height: 50% !important;
  display: flex !important;
  align-items: flex-end !important;
}
.aeon-etf-bar-bottom {
  height: 50% !important;
  display: flex !important;
  align-items: flex-start !important;
}
.aeon-etf-bar-fill {
  width: 100% !important;
  transition: height .65s cubic-bezier(.22,1,.36,1) !important;
}

/* ── X-axis date labels, aligned under the chart body only ── */
.aeon-etf-xaxis {
  display: flex !important;
  gap: 3px !important;
  margin: 4px 0 0 24px !important;
}
.aeon-etf-xaxis-col {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1px !important;
}
.aeon-etf-xaxis-col .d {
  font-size: 5px !important;
  color: #9AA3AF !important;
  line-height: 1.1 !important;
}
.aeon-etf-xaxis-col .m {
  font-size: 4.5px !important;
  color: #6B7280 !important;
  line-height: 1 !important;
}

/* ── Override conflicting legacy rules ── */
#etfMiniCard { overflow: hidden !important; }
#etfMiniCard > div {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  flex: 1 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Kill the old column-forcing rule that was breaking layout */
#etfMiniCard > div > div { flex-direction: unset !important; }

/* ── END ETF v3 ── */

/* ── ETF v4: ensure wrap fills container as row regardless of parent height ── */
#etfMiniCard {
  height: 120px !important;
  max-height: 120px !important;
  overflow: hidden !important;
  display: block !important;  /* let the inner wrap size itself */
}
.aeon-etf-wrap {
  height: 120px !important;
  max-height: 120px !important;
}
/* Adjust column widths: BTC slightly smaller, ETH larger */
.aeon-etf-btc { width: 145px !important; max-width: 145px !important; flex: 0 0 145px !important; }
.aeon-etf-eth { width: 115px !important; max-width: 115px !important; flex: 0 0 115px !important; overflow: hidden !important; }

/* ── END ETF v4 ── */

/* ── Mobile handle: hidden by default on desktop, shown only on mobile ── */
.proxy-tray-mobile-handle {
  display: none;
}

/* ── Hide MM tray when chart or cockpit overlay is active ── */
#mChartOverlay.open ~ * .proxy-tray,
#mCockpitOverlay.open ~ * .proxy-tray,
body:has(#mChartOverlay.open) .proxy-tray,
body:has(#mCockpitOverlay.open) .proxy-tray {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MM MONITOR TRAY — docked above the bottom tab strip, drag-to-reveal
   Lives visually inside the mobile Insights panel: the collapsed handle sits
   directly ABOVE the Home/Markets/Signals/Insights/Profile strip (instead of
   below it), and when opened the tray stops just below the sticky header
   (#mMiniBar) instead of covering the full viewport — the header and the
   bottom tab strip both stay visible/on top at all times.
   --m-header-h is live-measured off #mMiniBar (see app.html inline script);
   the 56px fallback covers the no-JS/pre-measurement case.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Override desktop rules — show on mobile unconditionally */
  .proxy-tray {
    display: flex !important;
    position: fixed !important;
    /* Anchor ABOVE the bottom tab strip instead of the viewport edge */
    bottom: 54px !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 595 !important; /* sits just above the bottom tab strip (590) it's docked over; no longer needs to out-rank the header since it stops below it */
    background: rgb(4 6 12 / 65%) !important;
    border-top: 1px solid rgba(59, 130, 246, 0.22) !important;
    border-bottom: none !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    /* Collapsed: single-row stats handle (36px) visible */
    height: 36px !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;
    /* Flex column: mobile handle on top, body fills below */
    flex-direction: column !important;
  }

  /* Open state — fills the space between the header and the bottom tab
     strip (both remain visible), instead of the full viewport. */
  .proxy-tray.pt-open {
    height: calc(100dvh - 54px - var(--m-header-h, 56px)) !important;
    pointer-events: auto !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    box-shadow: 0 -6px 40px rgba(59,130,246,0.07) !important;
  }

  /* Restrict the tray to the Home and Signals tabs only — hidden on
     Markets/Insights/Profile. Gated by data-mtab, set on <body> every
     time window._mSetActiveTab runs (see app.js). */
  .proxy-tray {
    display: none !important;
  }
  body[data-mtab="home"] .proxy-tray,
  body[data-mtab="signals"] .proxy-tray {
    display: flex !important;
  }

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

  /* Mobile handle — visible strip at top of tray */
  .proxy-tray-mobile-handle {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-shrink: 0 !important;
    height: 36px !important;
    padding: 0 !important;
    cursor: ns-resize !important;
    user-select: none !important;
    pointer-events: auto !important;
    position: relative !important;
  }

  /* Top row inside mobile handle: icon · label · stats · count · caret */
  .pt-mh-top-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 28px !important;
    padding: 0 12px !important;
    flex-shrink: 0 !important;
  }

  .pt-mh-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-top: 6px !important;
  }

  /* Alert ring wrapper */
  .pt-alert-ring-wrap {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Outer pulse ring SVG — sits behind dot */
  .pt-alert-pulse {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Inner dot SVG — sits on top */
  .pt-alert-dot-svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }

  /* Pulse animation — only fires when class is toggled on */
  @keyframes ptRingPulse {
    0%   { opacity: 0.9; transform: scale(1); }
    60%  { opacity: 0.2; transform: scale(1.55); }
    100% { opacity: 0;   transform: scale(1.8); }
  }

  .pt-alert-pulse-active circle {
    animation: ptRingPulse 1.8s ease-out infinite !important;
    transform-origin: 9px 9px !important;
  }

  /* Label stack: MM MONITOR + alert state */
  .pt-mh-label-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }

  .pt-alert-label {
    font-family: var(--mono) !important;
    font-size: 6px !important;
    letter-spacing: 0.12em !important;
    color: rgba(155,170,192,0.45) !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    transition: color 0.4s ease !important;
  }

  /* MM stats row inside top row */
  .pt-mh-stats {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
    margin-top: 6px !important;
    overflow: hidden !important;
  }

  .pt-mh-stat {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 6px !important;
    min-width: 0 !important;
    flex: 1 !important;
    gap: 0 !important;
  }

  .pt-mh-stat-lbl {
    font-family: var(--mono) !important;
    font-size: 5.5px !important;
    letter-spacing: 0.10em !important;
    color: rgba(155,170,192,0.45) !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  .pt-mh-stat-val {
    font-family: var(--mono) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    color: rgba(215,222,235,0.85) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  .pt-mh-stat-val.mm-pos { color: rgba(0,255,136,0.85) !important; }
  .pt-mh-stat-val.mm-neg { color: rgba(255,45,85,0.85) !important; }

  .pt-mh-sep {
    width: 1px !important;
    height: 18px !important;
    background: rgba(255,255,255,0.06) !important;
    flex-shrink: 0 !important;
    margin-top: 6px !important;
  }

  .pt-mh-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-top: 6px !important;
  }

  .pt-mh-liq-count {
    font-family: var(--mono) !important;
    font-size: 7px !important;
    letter-spacing: 0.08em !important;
    color: rgba(155,170,192,0.45) !important;
    white-space: nowrap !important;
  }

  /* Label colour — restore original cyan */
  .pt-mobile-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;
    line-height: 1 !important;
  }

  .pt-mobile-caret {
    flex-shrink: 0 !important;
    opacity: 0.55 !important;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) !important;
  }

  /* When open, caret points down */
  .proxy-tray.pt-open .pt-mobile-caret {
    transform: rotate(180deg) !important;
  }

  /* Desktop tongue handle — hide on mobile */
  .proxy-tray-handle {
    display: none !important;
  }

} /* ── END @media (max-width: 768px) MOBILE MM TRAY ── */

/* ── END MOBILE MM TRAY ── */

/* ── Mobile: pad mobileView bottom so content isn't hidden behind the
     bottom tab bar + MM tray handle stacked above it (order swapped:
     tray handle now docks above the tab bar, combined height unchanged) ── */
@media (max-width: 768px) {
  #mobileView {
    padding-bottom: calc(60px + 36px + 10px) !important; /* tab bar + tray handle + breathing room */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MM TRAY — mm-panel content overrides
   The base .mm-panel is styled as a right-side slide-in drawer (desktop).
   Inside the mobile proxy tray it must fill the tray width, static position,
   no transform slide-in, and scroll via the tray body not its own overflow.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Reset panel from drawer shell to inline tray content */
  .proxy-tray-body .mm-panel {
    position: static !important;
    width: 100% !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    transition: none !important;
    border-left: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* Header — full width, keep its own background */
  .proxy-tray-body .mm-header {
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    display: none !important;
  }

  /* Layer tabs — full width */
  .proxy-tray-body .mm-layer-tabs {
    flex-shrink: 0 !important;
  }

  /* Content scroll — let tray body scroll, don't double-scroll */
  .proxy-tray-body .mm-content {
    overflow: visible !important;
    flex: none !important;
    padding-bottom: 24px !important;
  }
}
/* ── END MOBILE MM CONTENT OVERRIDES ── */

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MM MONITOR — hide specific cards from the tray's card stack
   Hides: Price+Trend (first card), Market Intelligence Core (Fear & Greed),
   Cycle Compare, Cycle Tracker.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #mCycleTrackerCard,
  #mCycleCard,
  #mContent > .mc:first-child,
  #mFgCard {
    display: none !important;
  }

  /* Prediction Signal card — hidden entirely in the MM Monitor tray */
  #mContent .mc:has(#mSig) {
    display: none !important;
  }

  /* Token screener full-panel overlay — hidden entirely; opened via the
     altcoin strip's screener button, which now has no effect. */
  .m-token-panel {
    display: none !important;
  }

  /* Trade execution accordion — hidden entirely */
  #mTradeCard {
    display: none !important;
  }

  /* Watchlist/Fibonacci tabs card, Liquidations card, and Position
     Calculator card — only relevant while the mobile Home tab is active
     (data-mtab set by window._mSetActiveTab in app.js); hidden on
     Markets/Insights/Signals/Profile so they don't show up outside the
     Home panel. Watchlist now uses class "m-card" (was "mc"), Position
     Calculator uses "m-card" too — both need their own :has() selector
     alongside the "mc" one Liquidations still uses. */
  #mContent .m-card:has(#mPaneWl),
  #mContent .mc:has(#mLiqEvents),
  #mContent .m-card:has(#mCalcHdr) {
    display: none !important;
  }
  body[data-mtab="home"] #mContent .m-card:has(#mPaneWl),
  body[data-mtab="home"] #mContent .mc:has(#mLiqEvents),
  body[data-mtab="home"] #mContent .m-card:has(#mCalcHdr) {
    display: block !important;
  }

  /* Opening the Engine Market doesn't change data-mtab (it only opens
     from Home, so data-mtab stays "home" the whole time) — so the block
     above alone still leaves all three cards showing underneath the
     market. Explicitly re-hide them while the market overlay is open. */
  body.m-market-open #mContent .m-card:has(#mPaneWl),
  body.m-market-open #mContent .mc:has(#mLiqEvents),
  body.m-market-open #mContent .m-card:has(#mCalcHdr) {
    display: none !important;
  }

  /* Same situation as the Engine Market above: opening the Fed Event
     Radar / Creator Space page doesn't change data-mtab (it only opens
     from Home), so the data-mtab="home" block re-shows these cards
     underneath it unless explicitly re-hidden here too. */
  body.m-fed-open #mContent .m-card:has(#mPaneWl),
  body.m-fed-open #mContent .mc:has(#mLiqEvents),
  body.m-fed-open #mContent .m-card:has(#mCalcHdr) {
    display: none !important;
  }
  body.m-fed-open #mContent {
    display: none !important;
  }

  /* #mContent itself is a permanent flex sibling in #mobileView's column —
     it isn't a "page" that gets shown/hidden like Home/Markets/Signals/
     Insights, it's always present. Watchlist/Liquidations/Position
     Calculator are the only things ever visible inside it, and with the
     market open (or on any non-Home tab) all three are hidden above,
     leaving #mContent with zero visible children. Shrinking it via
     flex-basis alone still left its own top padding (10px) rendering as
     a residual gap, so hide the element outright instead — that drops
     its box (padding, border, everything) from the layout completely. */
  body.m-market-open #mContent {
    display: none !important;
  }

  /* Same for Markets/Signals/Insights — #mContent's cards are all gated
     to data-mtab="home" (or hidden entirely), so it's just as empty
     there. Currently masked because those pages' own content is usually
     long enough to fill the viewport on its own, but nothing guarantees
     that (e.g. an empty search/filter state), so hide it defensively
     instead of relying on the other page always overflowing. */
  body[data-mtab="markets"] #mContent,
  body[data-mtab="signals"] #mContent,
  body[data-mtab="insights"] #mContent {
    display: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE MM MONITOR — full style port
   All .mm-* rules live inside @media (min-width: 1024px) in desktop-shell.css
   so they don't apply on mobile. This block re-declares them for ≤768px.
   Auto-extracted — do not edit manually; edit desktop-shell.css instead.
   ═══════════════════════════════════════════════════════════════════════════ */

@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; }
}

@media (max-width: 768px) {

/* ─────────────────────────────────────────────────────────────────
   SHARED KEYFRAMES (scoped inside @media so they don't leak)
───────────────────────────────────────────────────────────────── */







/* ── 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;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg, rgba(59,130,246,0.06) 0%, transparent 100%) !important;
  flex-shrink: 0 !important;
  min-height: 0 !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: rgba(59,130,246,0.08) !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: 700 !important;
  letter-spacing: 0.16em !important;
  color: rgba(59,130,246,0.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;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  flex-shrink: 0 !important;
  background: var(--surface, #131824) !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: rgba(59,130,246,0.10) !important;
  border: 1px solid rgba(59,130,246,0.22) !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;
  border: 1px solid rgba(0,255,136,0.18) !important;
  border-top-color: rgba(0,255,136,0.30) !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: var(--surface) !important;
  border: 1px solid rgba(255,255,255,0.055) !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 mobile mm-monitor */


/* ══════════════════════════════════════════════════════════════════
   SWING MULTICHART — dual pane layout (horizontal / vertical)
   ══════════════════════════════════════════════════════════════════ */

/* ── Pane wrapper that replaces the single .chart-wrap ── */
#swingChartPanes {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  transition: flex-direction 0.18s ease;
}

/* Vertical stacked mode */
#swingChartPanes.layout-vertical {
  flex-direction: column;
}

/* ── Individual pane ── */
.sw-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(59,130,246,.09);
  border-radius: var(--sw-radius);
  background: linear-gradient(160deg, rgba(5,8,16,1) 0%, rgba(3,4,10,1) 100%);
  transition: flex 0.18s ease;
}
/* Cyan top accent line matching .chart-card-main */
.sw-pane::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg,
    rgba(59,130,246,.55) 0%,
    rgba(59,130,246,.22) 35%,
    rgba(59,130,246,.12) 65%,
    transparent 100%);
  pointer-events: none;
}

/* ── Per-pane header ── */
.sw-pane-hdr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  padding: 7px 14px 6px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  background: linear-gradient(180deg, rgba(255,255,255,.018) 0%, transparent 100%);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Label text */
.sw-pane-lbl {
  font-family: 'Share Tech Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  color: rgba(215,222,235,.7);
  white-space: nowrap;
}

/* Live dot on pane label */
.sw-pane-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sw-cyan, #3B82F6);
  opacity: .65;
  animation: dp 2s infinite;
  flex-shrink: 0;
}

/* TF button row inside each pane header */
.sw-tf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-left: auto;
}

/* Canvas area inside pane — fills remaining height */
.sw-pane-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.sw-pane-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* ── Layout toggle buttons (icon buttons in chart header) ── */
#swingChartLayoutBar {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: 10px;
}

.mc-layout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 20px;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.1);
  background: transparent;
  color: rgba(255,255,255,.3);
  transition: color .12s, border-color .12s, background .12s;
  line-height: 1;
}
.mc-layout-btn:hover {
  color: var(--sw-cyan, #3B82F6);
  border-color: rgba(59,130,246,.3);
  background: rgba(59,130,246,.05);
}
.mc-layout-btn.mc-on {
  color: var(--sw-cyan, #3B82F6);
  border-color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.08);
  text-shadow: 0 0 8px rgba(59,130,246,0.35);
}
.mc-layout-btn svg {
  display: block;
  flex-shrink: 0;
}

/* ── premChartWrap multichart pane container overrides ── */
/* Ensure the pane wrapper fills the card and flex-children size correctly */
#premChartWrap #swingChartPanes {
  padding: 8px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  /* Height: enough to show the full chart height in both panes */
  min-height: 0 !important;
}

/* In single layout the panes div is effectively invisible — pane 1 fills naturally */
#premChartWrap #swingPane1 {
  flex: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Pane 1: the existing pcChartFlex and its children should fill the pane */
#premChartWrap #swingPane1 #pcChartFlex {
  flex: 1 !important;
}

/* Pane 2 canvas fills its wrapper */
#premChartWrap #swingPane2 .sw-pane-canvas-wrap {
  min-height: 480px; /* match pcMain default height */
}

/* Vertical layout: give each pane a sensible fixed height */
#premChartWrap #swingChartPanes.layout-vertical #swingPane2 .sw-pane-canvas-wrap {
  min-height: 320px;
}

/* Layout toggle bar sits flush with the theme palette */
#premChartWrap #swingChartLayoutBar {
  flex-shrink: 0;
}

/* ── Upgrade button in nav ── */
.aeon-nav-upgrade-btn {
  width: 100% !important;
  margin-top: 8px !important;
  padding: 6px 8px !important;
  font-size: 9px !important;
  font-weight: 600 !important;
}
/* Mobile drawer instance only — desktop nav-rail button (bare
   .aeon-nav-upgrade-btn, no .m-drawer-upgrade-btn) is untouched. See
   app.js: btn.className = 'aeon-nav-upgrade-btn m-drawer-upgrade-btn' for
   the drawer vs. 'aeon-nav-upgrade-btn' alone for desktop. */
.aeon-nav-upgrade-btn.m-drawer-upgrade-btn {
  width: fit-content !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE ENGINE MARKET — floating shop FAB + full-screen overlay.
   The overlay's #mMarketMount plays host to the real #emMarketRoot
   node (relocated there at runtime — see the script at the bottom
   of app.html), so these rules only add mobile chrome around it
   plus a handful of narrow-viewport overrides for its own content.
═══════════════════════════════════════════════════════════════ */
.m-shop-fab {
  position: fixed;
  right: 16px;
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  z-index: 585; /* just under #mBottomNav (590) so the nav's blur edge still reads on top while scrolling */
  width: 45px; height: 45px;
  border-radius: 30%;
  border: 1px solid rgba(139,92,246,.35);
  background: rgb(4 6 12 / 65%);
  backdrop-filter: blur(2px) !important;
  color: #fff;
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgb(124 58 237 / 21%), 0 0 0 1px rgba(255,255,255,.06) inset;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-shop-fab:active { transform: scale(.94); }
.m-shop-fab-badge {
  position: absolute;
  top: -3px; right: -3px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px rgba(4,6,12,.97);
}
/* The FAB (and the Engine Market it opens) belongs to Home only now — no
   overlay floating on top of other tabs. Hidden everywhere by default;
   shown only while the Home tab is active (data-mtab is set by
   _mSetActiveTab), and hidden again once the market itself is open (no
   point floating a shop button over its own storefront — the market
   page's own back button is the way out). */
body[data-mtab="home"] .m-shop-fab { display: flex; }
body.m-market-open .m-shop-fab { display: none; }
body.m-fed-open .m-shop-fab { display: none; }
body.m-ticker-open .m-shop-fab { display: none; }

/* ── Engine Market — now a genuine in-page section of Home, not a fixed
   overlay. Shown/hidden exactly like the Signals/Markets/Insights pages
   (see _mShowPage in app.js): a plain block that flows in the normal
   scrollable document, hidden behind #mMiniBar's sticky header and above
   the fixed bottom nav purely by document position, not viewport math. ── */
/* ── Engine Market — a genuine in-page section of Home, not a fixed
   overlay, but bounded to the same viewport slice the MM Monitor tray
   uses (100dvh minus the 54px bottom tab strip and #mMiniBar's live-
   measured height) so it behaves like its own screen: the header stays
   put and only the body underneath (browse/listings/filters) scrolls. ── */
.m-market-overlay {
  display: none;
  flex-direction: column;
  background: var(--bg, #05070d);
}
.m-market-overlay.open {
  display: flex;
  height: calc(100dvh - 54px - var(--m-header-h, 56px));
  overflow: hidden;
}
.m-market-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
  background: rgba(4,6,12,.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* No longer needs position: sticky — the overlay itself is now the
     clipped box (see .m-market-overlay.open above) and .m-market-body is
     the only thing that scrolls, so the header is naturally pinned at
     the top without having to fight page-level scroll for it. */
  position: static;
}
.m-market-back {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface2, #0b0f18);
  color: var(--text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-market-back:active { opacity: .7; }
.m-market-title { font-size: 15px; font-weight: 700; color: var(--text); }
.m-market-header-spacer { flex: 1; }
.m-market-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 12px calc(24px + env(safe-area-inset-bottom, 0px));
}

/* ── #emMarketRoot narrow-viewport overrides — applied only once the
   node has been relocated into the mobile overlay (em-mobile class),
   so desktop's own layout is untouched. Everything not overridden
   here (colors, cards, modal fields, toasts, etc.) is inherited as-is
   from the shared desktop rules already scoped to #emMarketRoot. ── */
#emMarketRoot.em-mobile { font-size: 13px; }
#emMarketRoot.em-mobile .em-toolbar { gap: 8px; margin-bottom: 12px; }
#emMarketRoot.em-mobile .em-btn { padding: 9px 12px; font-size: 12px; }
#emMarketRoot.em-mobile .em-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#emMarketRoot.em-mobile .em-tab { white-space: nowrap; padding: 9px 10px; font-size: 12px; }
#emMarketRoot.em-mobile .em-filterbar { flex-direction: column; align-items: stretch; }
#emMarketRoot.em-mobile .em-search,
#emMarketRoot.em-mobile .em-select { width: 100%; }
#emMarketRoot.em-mobile .em-grid { grid-template-columns: 1fr; }

/* ── No-popup mobile sub-views ──
   Rather than fighting position:fixed overlay/header stacking, on mobile
   the detail and sell overlays render as plain in-flow content instead of
   popups. They already sit inside #emMarketRoot, which itself lives inside
   #mMarketMount/#mMarketOverlay — itself now just a normal in-page section
   of Home (see .m-market-overlay above) rather than a fixed overlay — so
   once these are normal block content instead of `position:fixed`, they
   can't overlap the header at all; there's no viewport-relative
   positioning involved anywhere in this chain for it to get wrong. */
#emMarketRoot.em-mobile .em-overlay {
  position: static;
  display: none;
  inset: auto;
  background: none;
  backdrop-filter: none;
  z-index: auto;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}
#emMarketRoot.em-mobile .em-overlay.on { display: block; }
#emMarketRoot.em-mobile .em-modal {
  width: 100%;
  max-width: 100%;
  max-height: none;
  overflow-y: visible;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  align-self: auto;
  padding: 16px;
}
/* While a sub-view (detail/buy/subscribe or sell/edit) is open, hide the
   toolbar/tabs/list panels so the sub-view IS the page — not stacked on
   top of the list underneath it. */
#emMarketRoot.em-mobile.em-subview-open > .em-toolbar,
#emMarketRoot.em-mobile.em-subview-open > .em-tabs,
#emMarketRoot.em-mobile.em-subview-open > .em-panel {
  display: none;
}

#emMarketRoot.em-mobile .em-profile-head { flex-wrap: wrap; }
#emMarketRoot.em-mobile .em-profile-stats { margin-left: 0; width: 100%; justify-content: flex-start; gap: 20px; margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════════════
   SECTOR CROSS-ASSET MOMENTUM — full card (#momentumWrap)
   L1 / L2 / MEME / AI composites, styled after the AEON signal-engine
   reference mock (header + WS badge, 5s→1D tabs, chart + legend, footer).
   ══════════════════════════════════════════════════════════════════════ */
#momentumWrap.scm-card{
  position:relative;overflow:hidden;
  border-radius:var(--sw-radius,8px);
  border:1px solid var(--sw-border,rgba(59,130,246,.08));
  background:linear-gradient(160deg,rgba(5,8,16,0.55) 0%,rgba(3,4,10,0.60) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  margin-bottom:16px;
}
#momentumWrap .scm-top-glow{
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,rgba(168,85,247,.55),rgba(59,130,246,.4),transparent);
}
#momentumWrap .scm-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:12px 16px 10px;
}
#momentumWrap .scm-header-left{display:flex;align-items:flex-start;gap:9px;}
#momentumWrap .scm-icon{width:15px;height:15px;color:rgba(168,85,247,.85);flex-shrink:0;margin-top:1px;}
#momentumWrap .scm-title{
  font-family:'Share Tech Mono',monospace;font-size:9.5px;font-weight:700;
  letter-spacing:.1em;color:rgba(215,222,235,.92);display:flex;align-items:center;gap:5px;
}
#momentumWrap .scm-info{font-size:9px;color:rgba(155,170,192,.4);cursor:help;}
#momentumWrap .scm-subtitle{
  font-family:'Share Tech Mono',monospace;font-size:7px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(155,170,192,.4);margin-top:3px;display:flex;align-items:center;gap:5px;
}
#momentumWrap .scm-subtitle::after{content:'';}
#momentumWrap .scm-tf-row{
  display:flex;gap:3px;padding:0 16px 10px;flex-wrap:wrap;
}
#momentumWrap .scm-tf-btn{
  font-family:'Share Tech Mono',monospace;font-size:7.5px;font-weight:700;letter-spacing:.05em;
  padding:4px 10px;border-radius:5px;cursor:pointer;
  border:1px solid transparent;background:transparent;color:rgba(155,170,192,.45);
  transition:color .12s,border-color .12s,background .12s;
}
#momentumWrap .scm-tf-btn:hover{color:rgba(215,222,235,.75);}
#momentumWrap .scm-tf-btn.on{
  color:rgba(129,140,248,.95);
  border-color:rgba(129,140,248,.4);
  background:rgba(99,102,241,.12);
}
#momentumWrap .scm-body{
  display:flex;align-items:stretch;gap:0;padding:2px 0 4px;
}
#momentumWrap .scm-chart-wrap{
  position:relative;flex:1;min-width:0;height:190px;
}
#momentumWrap .scm-chart-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;}
#momentumWrap .scm-legend{
  flex:0 0 96px;width:96px;display:flex;flex-direction:column;justify-content:center;gap:10px;
  padding:4px 14px 4px 8px;border-left:1px solid rgba(59,130,246,.06);
}
#momentumWrap .scm-leg-item{display:flex;align-items:center;gap:6px;}
#momentumWrap .scm-leg-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
#momentumWrap .scm-leg-name{
  font-family:'Share Tech Mono',monospace;font-size:8.5px;font-weight:700;letter-spacing:.06em;line-height:1.3;
}
#momentumWrap .scm-leg-val{
  font-family:'Share Tech Mono',monospace;font-size:8.5px;color:rgba(215,222,235,.88);line-height:1.3;
}
#momentumWrap .scm-leg-zero{
  font-family:'Share Tech Mono',monospace;font-size:7.5px;color:rgba(155,170,192,.3);
  padding-left:13px;letter-spacing:.04em;
}
#momentumWrap .scm-footer{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:9px 16px 11px;border-top:1px solid rgba(59,130,246,.06);
  font-family:'Share Tech Mono',monospace;font-size:6.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(155,170,192,.32);
}
#momentumWrap .scm-footer-accent{color:rgba(0,230,255,.55);}
@media (max-width:520px){
  #momentumWrap .scm-legend{flex-basis:76px;width:76px;}
  #momentumWrap .scm-leg-name,#momentumWrap .scm-leg-val{font-size:7.5px;}
}