/* Same tokens as homepage-purple.html and the referral dashboard, so the
   account area is one product rather than three plugins in a trench coat.

   EVERYTHING IS SCOPED TO #bha-scripts, and every colour is !important.
   The site's Additional CSS carries
       #post-19 * { color: white !important; background: transparent; }
   on this very page (id 19). That is specificity (1,0,0) with !important, so
   a plain .bha-status loses: all text flattens to pure white, every card
   background disappears and the green dot vanishes. An id on our own wrapper
   makes these rules (1,1,0) and they win - without touching the 42KB of
   Customizer CSS that rule lives in.
   Where a muted tone is decoration rather than meaning, opacity is used
   instead of colour: opacity is not in that reset, so it survives anywhere -
   including the orders table, which renders outside this wrapper. */
#bha-scripts.bha{
  --bg:#020114; --bg-2:#0a0820; --bg-3:#15102e;
  --line:#211b3a; --line-2:#2e2750;
  --ink:#f4f4f5; --ink-2:#aeaeb3; --ink-3:#6c6c72;
  --accent:#7c3aed; --accent-2:#a78bfa; --accent-soft:rgba(124,58,237,.12);
  --green:#7ee0a4;
  color:var(--ink) !important; font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  display:grid; gap:18px;
}
#bha-scripts *{box-sizing:border-box}
#bha-scripts .bha-ov{font:500 11px/1 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.18em;color:var(--ink-3) !important;text-transform:uppercase}
#bha-scripts .bha-t{margin:4px 0 0;font-size:22px;font-weight:600;
  letter-spacing:-.01em;color:var(--ink) !important}
#bha-scripts .bha-head{display:flex;justify-content:space-between;
  align-items:flex-end;gap:16px;flex-wrap:wrap}
#bha-scripts .bha-live-now{display:flex;align-items:center;gap:8px;
  color:var(--green) !important;font-size:13px;font-weight:500}

#bha-scripts .bha-dot{width:7px;height:7px;border-radius:50%;
  background:var(--green);box-shadow:0 0 0 0 rgba(126,224,164,.6);
  animation:bhaPulse 2s infinite;flex:0 0 auto}
@keyframes bhaPulse{
  70%{box-shadow:0 0 0 7px rgba(126,224,164,0)}
  100%{box-shadow:0 0 0 0 rgba(126,224,164,0)}
}
@media (prefers-reduced-motion:reduce){#bha-scripts .bha-dot{animation:none}}

#bha-scripts .bha-grid{display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
#bha-scripts .bha-script{background:var(--bg-2);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;transition:border-color .18s ease}
#bha-scripts .bha-script.on{border-color:rgba(126,224,164,.35);
  background:linear-gradient(180deg,rgba(126,224,164,.05),transparent),var(--bg-2)}
#bha-scripts .bha-script:hover{border-color:var(--line-2)}
#bha-scripts .bha-name{font-weight:600;font-size:15px;margin-bottom:8px;
  color:var(--ink) !important}
#bha-scripts .bha-status{display:flex;align-items:center;gap:7px;
  font-size:13px;color:var(--green) !important}
#bha-scripts .bha-status.off{color:var(--ink-3) !important}
#bha-scripts .bha-meta{margin-top:8px;
  font:500 12px/1 ui-monospace,SFMono-Regular,monospace;color:var(--ink-3) !important}

#bha-scripts .bha-card{background:var(--bg-2);border:1px solid var(--line);
  border-radius:16px;padding:20px}
#bha-scripts .bha-empty{text-align:center}
#bha-scripts .bha-empty p{color:var(--ink-2) !important;margin:0 0 14px}
#bha-scripts .bha-btn{display:inline-block;background:var(--accent);
  color:#fff !important;text-decoration:none;border-radius:11px;
  padding:11px 20px;font-weight:600}
#bha-scripts .bha-btn:hover{background:#6d28d9;color:#fff !important}
#bha-scripts .bha-sugg{display:flex;gap:10px;flex-wrap:wrap}
#bha-scripts .bha-pill{display:inline-flex;align-items:center;gap:9px;
  text-decoration:none;border:1px solid var(--line-2);border-radius:999px;
  padding:9px 15px;color:var(--ink-2) !important;font-size:14px;
  transition:all .16s ease}
#bha-scripts .bha-pill:hover{color:var(--ink) !important;
  border-color:var(--accent-2);background:var(--accent-soft)}
#bha-scripts .bha-pill em,
#bha-scripts .bha-pill em *{font-style:normal;color:var(--accent-2) !important;
  font-weight:600}
#bha-scripts .bha-stray{margin:0;font-size:13px;opacity:.65}

/* The orders table renders OUTSIDE #bha-scripts, so these cannot borrow that
   id. Opacity carries the muting instead - it survives the white reset. */
#bha-orders-toggle{margin:0 0 14px;font-size:13px}
#bha-orders-toggle a{color:#a78bfa !important;text-decoration:underline}
.bha-more{font-size:12px;opacity:.55}