/* ═══════════════════════════════════════════════════════════════════
   Autonix — Brand Redesign System  v2.0
   Red & Black premium trading platform design
   ═══════════════════════════════════════════════════════════════════ */

/* ─── BRAND TOKENS ──────────────────────────────────────────────── */
:root {
  --color-brand:       #FF0000;
  --color-brand-dim:   #CC0000;
  --color-brand-deep:  #990000;
  --color-brand-glow:  rgba(255, 0, 0, .28);
  --color-brand-glow2: rgba(255, 0, 0, .09);
  --color-brand-soft:  rgba(255, 0, 0, .12);

  /* Keep green strictly for BUY/profit trading signals */
  --color-green:        #00C875;
  --color-green-dim:    #009E5E;
  --color-green-glow:   rgba(0, 200, 117, .25);
  --color-green-glow2:  rgba(0, 200, 117, .09);

  /* Sell/loss red aligns with brand */
  --color-red:          #FF0000;
  --color-red-dim:      #CC0000;
  --color-red-glow:     rgba(255, 0, 0, .28);

  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── DARK THEME — Pure Black ────────────────────────────────────── */
[data-theme="dark"],
:root {
  --bg:          #000000;
  --bg-panel:    #000000;
  --bg-elevated: #000000;
  --bg-card:     #000000;
  --bg-hover:    #000000;
  --bg-active:   #000000;
  --bg-glass:    rgba(255, 255, 255, .03);
  --bg-glass2:   rgba(255, 255, 255, .065);
  --bg-input:    rgba(255, 255, 255, .05);

  --border:        rgba(255, 255, 255, .08);
  --border-subtle: rgba(255, 255, 255, .04);
  --border-accent: rgba(255, 0, 0, .38);
  --border-card:   rgba(255, 255, 255, .07);

  --text-primary:   #FFFFFF;
  --text-secondary: #FFFFFF;
  --text-muted:     #FFFFFF;
  --text-dim:       #FFFFFF;

  --shadow-float:  0 16px 64px rgba(0,0,0,.96), 0 4px 16px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-panel:  0 8px 40px rgba(0,0,0,.9), 0 2px 8px rgba(0,0,0,.6);
  --shadow-card:   0 6px 32px rgba(0,0,0,.75), 0 1px 4px rgba(0,0,0,.5);
  --shadow-glow:   0 0 28px var(--color-brand-glow), 0 0 56px var(--color-brand-glow2);
  --shadow-nav:    0 1px 0 rgba(255,255,255,.05);

  --nav-bg:   rgba(0, 0, 0, .92);
  --nav-blur: blur(28px);
  --rail-bg:  rgba(4, 4, 4, .96);

  --bot-accent:     #FF0000;
  --bot-accent-dim: #CC0000;
}

/* ─── LIGHT THEME — Pure White ───────────────────────────────────── */
[data-theme="light"] {
  --bg:          #FFFFFF;
  --bg-panel:    #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-card:     #FFFFFF;
  --bg-hover:    #FFFFFF;
  --bg-active:   #FFFFFF;
  --bg-glass:    rgba(0, 0, 0, .03);
  --bg-glass2:   rgba(0, 0, 0, .055);
  --bg-input:    rgba(0, 0, 0, .04);

  --border:        rgba(0, 0, 0, .10);
  --border-subtle: rgba(0, 0, 0, .05);
  --border-accent: rgba(255, 0, 0, .38);
  --border-card:   rgba(0, 0, 0, .08);

  --text-primary:   #000000;
  --text-secondary: #000000;
  --text-muted:     #000000;
  --text-dim:       #000000;

  --shadow-float:  0 12px 48px rgba(0,0,0,.13), 0 4px 16px rgba(0,0,0,.08), 0 1px 0 #fff inset;
  --shadow-panel:  0 4px 24px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
  --shadow-card:   0 2px 16px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04);
  --shadow-glow:   0 0 24px rgba(255,0,0,.14), 0 0 48px rgba(255,0,0,.06);
  --shadow-nav:    0 1px 0 rgba(0,0,0,.07);

  --nav-bg:   rgba(255, 255, 255, .95);
  --nav-blur: blur(28px);
  --rail-bg:  rgba(255, 255, 255, .98);

  --bot-accent:     #FF0000;
  --bot-accent-dim: #CC0000;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL BASE
   ═══════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  background: var(--bg);
  color: var(--text-primary);
  transition: background 0.25s ease, color 0.25s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   LOGO — Red brand gradient
   ═══════════════════════════════════════════════════════════════════ */

.logo-text {
  background: linear-gradient(135deg, var(--color-brand), #ff6b6b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-weight: 800 !important;
}

.nav-brand {
  font-weight: 700;
  font-size: 15px;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Trader page logo chip */
.at-logo {
  background: var(--color-brand) !important;
  box-shadow: 0 0 16px var(--color-brand-glow) !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
}

.at-logo:hover {
  background: var(--color-brand-dim) !important;
  transform: scale(1.04) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TOP NAVIGATION BAR
   ═══════════════════════════════════════════════════════════════════ */

.top-nav {
  background: var(--nav-bg) !important;
  backdrop-filter: var(--nav-blur) !important;
  -webkit-backdrop-filter: var(--nav-blur) !important;
  border-bottom: 1px solid var(--border) !important;
}

.autonix-navbar {
  background: var(--nav-bg) !important;
  backdrop-filter: var(--nav-blur) !important;
  -webkit-backdrop-filter: var(--nav-blur) !important;
  border-bottom: 1px solid var(--border) !important;
}

.navbar-link:hover,
.navbar-link.active {
  color: var(--color-brand) !important;
}

.navbar-link.active::after {
  background: var(--color-brand) !important;
  box-shadow: 0 0 8px rgba(232, 0, 45, .5) !important;
}

/* Primary nav button — Red brand */
.navbar-btn-primary {
  background: var(--color-brand) !important;
  color: #fff !important;
  box-shadow: 0 0 16px var(--color-brand-glow) !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  transition: all 0.18s ease !important;
}

.navbar-btn-primary:hover {
  background: var(--color-brand-dim) !important;
  box-shadow: 0 0 24px var(--color-brand-glow) !important;
  transform: translateY(-1px) !important;
}

/* Secondary nav button — outlined */
.navbar-btn-secondary {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 20px !important;
  transition: all 0.18s ease !important;
}

.navbar-btn-secondary:hover {
  border-color: var(--color-brand) !important;
  color: var(--color-brand) !important;
  background: var(--color-brand-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LEFT RAIL NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */

.left-rail {
  background: var(--rail-bg) !important;
  border-right: 1px solid var(--border) !important;
}

.rail-item:hover {
  background: var(--bg-hover) !important;
  color: var(--color-brand) !important;
}

.rail-item.active,
.rail-item[data-active="true"] {
  color: var(--color-brand) !important;
  background: var(--color-brand-soft) !important;
}

.rail-item.active svg,
.rail-item:hover svg {
  color: var(--color-brand) !important;
  stroke: var(--color-brand) !important;
}

.rail-item:hover svg {
  stroke: var(--color-brand) !important;
}

.rail-badge {
  background: var(--color-brand) !important;
  color: #fff !important;
  box-shadow: 0 0 8px var(--color-brand-glow) !important;
}

/* Rail account avatar */
.rail-avatar {
  background: var(--color-brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.rail-account-option.active {
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH BUTTONS (login / account chip)
   ═══════════════════════════════════════════════════════════════════ */

.login-btn {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}

.login-btn:hover {
  border-color: var(--color-brand) !important;
  color: var(--color-brand) !important;
}

.signup-btn {
  background: var(--color-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px var(--color-brand-glow) !important;
  transition: all 0.18s ease !important;
}

.signup-btn:hover {
  background: var(--color-brand-dim) !important;
  transform: translateY(-1px) !important;
}

.account-chip {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
}

.account-avatar {
  background: var(--color-brand) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

.account-option.active {
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════ */

.hero-eyebrow-dot {
  background: var(--color-brand) !important;
  box-shadow: 0 0 8px var(--color-brand-glow) !important;
}

.hero-eyebrow {
  color: var(--color-brand) !important;
  border-color: var(--color-brand-soft) !important;
  background: var(--color-brand-soft) !important;
}

.hero-accent-word {
  background: linear-gradient(135deg, var(--color-brand), #ff6b6b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Hero CTA primary — Red brand */
.cta-primary {
  background: var(--color-brand) !important;
  color: #fff !important;
  box-shadow: 0 0 24px var(--color-brand-glow) !important;
  border: none !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.cta-primary:hover {
  background: var(--color-brand-dim) !important;
  box-shadow: 0 4px 32px var(--color-brand-glow) !important;
  transform: translateY(-2px) !important;
}

/* Hero secondary CTA */
.cta-secondary {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.cta-secondary:hover {
  border-color: var(--color-brand) !important;
  color: var(--color-brand) !important;
  background: var(--color-brand-soft) !important;
}

/* Hero trust row numbers */
.htrust-num {
  color: var(--color-brand) !important;
  font-weight: 800 !important;
}

/* Hero terminal live badge */
.hterm-live-badge {
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOT SHOWCASE CARDS
   ═══════════════════════════════════════════════════════════════════ */

.bot-showcase-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  transition: all 0.25s ease !important;
}

.bot-showcase-card:hover {
  border-color: var(--color-brand) !important;
  box-shadow: 0 12px 40px var(--color-brand-glow) !important;
  transform: translateY(-4px) !important;
}

/* Badge color system */
.bot-badge.beginner {
  background: rgba(0, 200, 117, .12) !important;
  color: var(--color-green) !important;
  border: 1px solid rgba(0, 200, 117, .25) !important;
}

.bot-badge.growth {
  background: rgba(232, 0, 45, .1) !important;
  color: var(--color-brand) !important;
  border: 1px solid var(--color-brand-soft) !important;
}

.bot-badge.advanced {
  background: rgba(232, 0, 45, .1) !important;
  color: var(--color-brand) !important;
  border: 1px solid var(--color-brand-soft) !important;
}

.bot-badge.investment {
  background: rgba(232, 0, 45, .1) !important;
  color: var(--color-brand) !important;
  border: 1px solid var(--color-brand-soft) !important;
}

/* Bot CTA button */
.bot-cta {
  background: var(--color-brand) !important;
  color: #fff !important;
  box-shadow: 0 0 16px var(--color-brand-glow) !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}

.bot-cta:hover {
  background: var(--color-brand-dim) !important;
  box-shadow: 0 4px 24px var(--color-brand-glow) !important;
  transform: translateY(-1px) !important;
}

/* Prime featured card */
.prime-featured {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 1px var(--color-brand), 0 16px 48px var(--color-brand-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTS PAGE (trader bots workspace)
   ═══════════════════════════════════════════════════════════════════ */

.bots-connect-btn {
  background: var(--color-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 0 12px var(--color-brand-glow) !important;
  transition: all 0.18s ease !important;
}

.bots-connect-btn:hover {
  background: var(--color-brand-dim) !important;
  transform: translateY(-1px) !important;
}

/* Bot cards in bots page */
.bot-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}

.bot-card:hover {
  border-color: rgba(232, 0, 45, .3) !important;
}

/* ── Start Bot = GREEN when idle ── */
.bot-start-btn {
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dim) 100%) !important;
  color: #fff !important;
  box-shadow: 0 0 20px var(--color-green-glow), 0 4px 16px rgba(0,200,117,.18) !important;
  border: none !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.bot-start-btn:hover:not(:disabled) {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 28px var(--color-green-glow), 0 6px 20px rgba(0,200,117,.25) !important;
}

/* ── Stop Bot = RED when running ── */
.bot-start-btn.running {
  background: var(--color-brand) !important;
  color: #fff !important;
  box-shadow: 0 0 20px var(--color-brand-glow), 0 4px 16px rgba(232,0,45,.18) !important;
  filter: none !important;
}

.bot-start-btn.running:hover {
  background: var(--color-brand-dim) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 28px var(--color-brand-glow), 0 6px 20px rgba(232,0,45,.25) !important;
}

.bot-start-btn:disabled {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  cursor: not-allowed !important;
  filter: none !important;
  transform: none !important;
}

.bot-stop-btn {
  background: transparent !important;
  color: var(--color-brand) !important;
  border: 1px solid var(--color-brand) !important;
  font-weight: 600 !important;
}

.bot-stop-btn:hover {
  background: var(--color-brand-soft) !important;
}

/* Mode pill connecting */
.bots-mode-pill.connecting .bots-mode-dot {
  background: var(--color-brand) !important;
  box-shadow: 0 0 8px var(--color-brand-glow) !important;
}

.bots-mode-pill.live .bots-mode-dot {
  background: var(--color-green) !important;
  box-shadow: 0 0 8px var(--color-green-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TRADE TICKET PANEL
   ═══════════════════════════════════════════════════════════════════ */

/* Buy stays green, Sell stays brand-red */
.buy-btn,
.btn-buy,
.trade-btn-buy {
  background: var(--color-green) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
}

.sell-btn,
.btn-sell,
.trade-btn-sell,
.btn-over,
.rise-btn {
  background: var(--color-brand) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INVEST PAGE
   ═══════════════════════════════════════════════════════════════════ */

.invest-section h1 {
  background: linear-gradient(135deg, var(--color-brand), #ff6b6b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.plan-card:hover {
  border-color: var(--color-brand) !important;
  box-shadow: 0 16px 40px var(--color-brand-glow) !important;
  transform: translateY(-6px) !important;
}

.plan-details {
  background: var(--color-brand-soft) !important;
  border-radius: 8px !important;
}

.meta-value {
  color: var(--color-brand) !important;
  font-weight: 700 !important;
}

.cta-section {
  background: linear-gradient(135deg, rgba(232,0,45,.08), rgba(232,0,45,.03)) !important;
  border-color: var(--color-brand-soft) !important;
}

.cta-section .cta-primary {
  background: var(--color-brand) !important;
  color: #fff !important;
  box-shadow: 0 0 20px var(--color-brand-glow) !important;
}

.cta-section .cta-primary:hover {
  background: var(--color-brand-dim) !important;
  box-shadow: 0 4px 32px var(--color-brand-glow) !important;
  transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MARKET SECTION & FEATURES
   ═══════════════════════════════════════════════════════════════════ */

.feature-card:hover,
.market-item:hover {
  border-color: rgba(232, 0, 45, .3) !important;
}

/* Section headings gradient */
.section-heading-accent,
.gradient-text {
  background: linear-gradient(135deg, var(--color-brand), #ff6b6b) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Pulse/live indicator dots */
.live-dot,
.pulse-dot {
  background: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ SECTION
   ═══════════════════════════════════════════════════════════════════ */

.faq-item.active .faq-question {
  color: var(--color-brand) !important;
}

.faq-toggle {
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TERMS PAGE
   ═══════════════════════════════════════════════════════════════════ */

.toc-link:hover,
.toc-link:focus {
  color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SEARCH INPUT
   ═══════════════════════════════════════════════════════════════════ */

.nav-search:focus {
  border-color: var(--color-brand) !important;
  box-shadow: 0 0 0 2px var(--color-brand-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FORMS & INPUTS
   ═══════════════════════════════════════════════════════════════════ */

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--color-brand-glow) !important;
}

.input-group:focus-within {
  border-color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBARS
   ═══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(232, 0, 45, .3);
  border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 0, 45, .5);
}

/* ═══════════════════════════════════════════════════════════════════
   SELECTION
   ═══════════════════════════════════════════════════════════════════ */

::selection {
  background: var(--color-brand-soft);
  color: var(--color-brand);
}

/* ═══════════════════════════════════════════════════════════════════
   CHART HEADER — LIVE BADGE
   ═══════════════════════════════════════════════════════════════════ */

.chart-live-badge,
.live-badge {
  color: var(--color-brand) !important;
  background: var(--color-brand-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.footer {
  background: var(--bg-panel) !important;
  border-top: 1px solid var(--border) !important;
}

.footer a:hover {
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════ */

.toast {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-float) !important;
  border-radius: 12px !important;
}

.toast.success { border-left: 3px solid var(--color-green) !important; }
.toast.error   { border-left: 3px solid var(--color-brand) !important; }

/* ═══════════════════════════════════════════════════════════════════
   FLOATING THEME TOGGLE — Bottom Left
   ═══════════════════════════════════════════════════════════════════ */

#floating-theme-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: all 0.22s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#floating-theme-toggle:hover {
  background: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--color-brand-glow) !important;
  transform: scale(1.08) !important;
}

#floating-theme-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  pointer-events: none;
}

#floating-theme-toggle:hover svg {
  transform: rotate(20deg);
}

/* Hide the old rail theme button if it conflicts */
#rail-theme-btn { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   LIGHT THEME — Specific surface fixes
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] body {
  background: #FFFFFF;
}

[data-theme="light"] .app-wrapper,
[data-theme="light"] .autonix-page-wrapper,
[data-theme="light"] .invest-page-wrapper,
[data-theme="light"] .terms-page-wrapper,
[data-theme="light"] .bots-workspace {
  background: #FFFFFF !important;
}

[data-theme="light"] .top-nav,
[data-theme="light"] .autonix-navbar {
  background: rgba(255,255,255,.95) !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
}

[data-theme="light"] .left-rail {
  background: #FFFFFF !important;
  border-right-color: rgba(0,0,0,.08) !important;
}

[data-theme="light"] .bg-panel,
[data-theme="light"] .chart-panel,
[data-theme="light"] .trade-panel,
[data-theme="light"] .markets-panel,
[data-theme="light"] .positions-panel {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,.08) !important;
}

[data-theme="light"] .bot-showcase-card,
[data-theme="light"] .plan-card,
[data-theme="light"] .detail-card,
[data-theme="light"] .feature-card,
[data-theme="light"] .bot-card,
[data-theme="light"] .bots-history-card {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,.09) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

[data-theme="light"] .hero {
  background: #FFFFFF !important;
}

[data-theme="light"] .hero-background {
  opacity: 0.04 !important;
}

[data-theme="light"] .hterm-header,
[data-theme="light"] .hero-terminal {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.10) !important;
}

/* Light mode nav link color */
[data-theme="light"] .navbar-link {
  color: #374151 !important;
}

[data-theme="light"] .navbar-link:hover,
[data-theme="light"] .navbar-link.active {
  color: var(--color-brand) !important;
}

[data-theme="light"] .nav-search {
  background: #F7F8FA !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: #000 !important;
}

[data-theme="light"] .nav-search::placeholder {
  color: #9CA3AF !important;
}

[data-theme="light"] .rail-item {
  color: #374151 !important;
}

[data-theme="light"] .rail-item:hover {
  background: #F4F5F7 !important;
  color: var(--color-brand) !important;
}

[data-theme="light"] .rail-item.active {
  color: var(--color-brand) !important;
  background: rgba(232,0,45,.07) !important;
}

[data-theme="light"] .rail-label {
  color: inherit !important;
}

/* Light mode bots mode pill */
[data-theme="light"] .bots-mode-pill {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.09) !important;
  color: #374151 !important;
}

/* Light mode footer */
[data-theme="light"] .footer {
  background: #F7F8FA !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DARK THEME — Specific surface fixes
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] body {
  background: #000000;
}

[data-theme="dark"] .app-wrapper,
[data-theme="dark"] .autonix-page-wrapper,
[data-theme="dark"] .invest-page-wrapper,
[data-theme="dark"] .terms-page-wrapper {
  background: #000000 !important;
}

/* Neural network / hero animation in dark — subtle */
[data-theme="dark"] .hero-background {
  opacity: 0.5;
}

/* ═══════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════ */

.bots-history-table thead tr {
  border-bottom: 1px solid var(--border) !important;
}

.bots-history-table thead th {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.bots-history-table tbody tr:hover {
  background: var(--bg-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   POSITIONS PANEL
   ═══════════════════════════════════════════════════════════════════ */

.position-row.win .pl-value {
  color: var(--color-green) !important;
}

.position-row.loss .pl-value {
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADINGS — Home page
   ═══════════════════════════════════════════════════════════════════ */

.bots-section h2 {
  background: linear-gradient(135deg, #fff 0%, var(--color-brand) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="light"] .bots-section h2 {
  background: linear-gradient(135deg, #000 0%, var(--color-brand) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SMOOTH PAGE TRANSITIONS
   ═══════════════════════════════════════════════════════════════════ */

.app-wrapper,
.autonix-page-wrapper,
.invest-page-wrapper,
.terms-page-wrapper,
.top-nav,
.autonix-navbar,
.left-rail,
.bot-showcase-card,
.plan-card,
.detail-card,
.bot-card {
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════
   INSTALL PWA BUTTON
   ═══════════════════════════════════════════════════════════════════ */

.install-app-action {
  background: var(--brand-color) !important;
  color: #fff !important;
  box-shadow: 0 4px 20px var(--brand-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV TOGGLE
   ═══════════════════════════════════════════════════════════════════ */

.navbar-toggle span {
  background: var(--text-primary) !important;
}

.navbar-toggle.active span:nth-child(1) {
  background: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE NAV DRAWER
   ═══════════════════════════════════════════════════════════════════ */

.navbar-mobile-menu {
  background: var(--bg-panel) !important;
  border-top: 1px solid var(--border) !important;
}

.navbar-mobile-link:hover,
.navbar-mobile-link.active {
  color: var(--color-brand) !important;
  background: var(--color-brand-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DRAWER BACKDROP
   ═══════════════════════════════════════════════════════════════════ */

.drawer-backdrop {
  background: rgba(0, 0, 0, .6) !important;
  backdrop-filter: blur(4px) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   ACTIVE LINK STATE IN FOOTER
   ═══════════════════════════════════════════════════════════════════ */

.footer-links a:hover {
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DBOT PAGE
   ═══════════════════════════════════════════════════════════════════ */

.dbot-frame-wrapper {
  background: var(--bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MARKET PULSE TICKER
   ═══════════════════════════════════════════════════════════════════ */

.market-ticker {
  background: var(--bg-panel) !important;
  border-bottom: 1px solid var(--border) !important;
}

.ticker-item.up .ticker-change {
  color: var(--color-green) !important;
}

.ticker-item.down .ticker-change {
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Comprehensive fixes for all hardcoded dark colors
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bot showcase cards — visible card surface in light mode ── */
[data-theme="light"] .bot-showcase-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05) !important;
}

[data-theme="light"] .bot-showcase-card:hover {
  border-color: var(--color-brand) !important;
  box-shadow: 0 12px 40px rgba(232,0,45,.12), 0 4px 16px rgba(0,0,0,.08) !important;
}

[data-theme="light"] .prime-featured {
  background: #fff !important;
  border: 1.5px solid var(--color-brand) !important;
  box-shadow: 0 0 0 1px var(--color-brand), 0 12px 40px rgba(232,0,45,.12) !important;
}

/* Bot stats box */
[data-theme="light"] .bot-stats {
  background: rgba(0,0,0,.04) !important;
  border-radius: 8px !important;
}

[data-theme="light"] .stat-value {
  color: var(--color-brand) !important;
  font-weight: 700 !important;
}

[data-theme="light"] .stat-label {
  color: #6B7280 !important;
}

/* Bot CTA button stays red/white */
[data-theme="light"] .bot-cta {
  background: var(--color-brand) !important;
  color: #fff !important;
}

/* ── Bots section background ── */
[data-theme="light"] .bots-section {
  background: #FAFBFC !important;
  border-top: 1px solid rgba(0,0,0,.07) !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
}

/* Section heading gradient — starts with black not white in light mode */
[data-theme="light"] .bots-section h2 {
  background: linear-gradient(135deg, #111 0%, var(--color-brand) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Section vertical connector lines */
[data-theme="light"] .value-bullets::before,
[data-theme="light"] .how-it-works::before,
[data-theme="light"] .explain-ai::before,
[data-theme="light"] .proof-section::before {
  background: linear-gradient(to bottom, transparent, rgba(232,0,45,.20), transparent) !important;
}

/* ── Hero section ── */
[data-theme="light"] .hero {
  background: #FFFFFF !important;
}

[data-theme="light"] .neural-network {
  background:
    radial-gradient(circle at 15% 50%, rgba(232,0,45,.05) 0%, transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(232,0,45,.03) 0%, transparent 40%) !important;
}

[data-theme="light"] .gradient-overlay {
  background: linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 60%) !important;
}

[data-theme="light"] .hero-grid-lines {
  background-image:
    linear-gradient(rgba(232,0,45,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,0,45,.035) 1px, transparent 1px) !important;
}

/* Hero text */
[data-theme="light"] .hero-text h2,
[data-theme="light"] .hero-headline,
[data-theme="light"] .hero-subheadline-main {
  color: #000000 !important;
}

[data-theme="light"] .hero-eyebrow {
  color: var(--color-brand) !important;
  background: rgba(232,0,45,.07) !important;
  border-color: rgba(232,0,45,.15) !important;
}

[data-theme="light"] .hero-subheadline {
  color: #374151 !important;
}

/* Hero trust row */
[data-theme="light"] .htrust-label {
  color: #6B7280 !important;
}

/* Hero CTA secondary */
[data-theme="light"] .cta-secondary {
  color: #000 !important;
  border-color: rgba(0,0,0,.20) !important;
}

[data-theme="light"] .cta-secondary:hover {
  color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

/* ── Hero Terminal (right panel) — light mode ── */
[data-theme="light"] .hero-terminal {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow:
    0 24px 64px rgba(0,0,0,.12),
    0 4px 16px rgba(0,0,0,.07),
    0 0 0 1px rgba(0,0,0,.04) !important;
}

[data-theme="light"] .hterm-header {
  background: #F7F8FA !important;
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}

[data-theme="light"] .hterm-symbol {
  color: #111 !important;
}

[data-theme="light"] .hterm-price {
  color: #000 !important;
}

[data-theme="light"] .hterm-live-badge {
  color: var(--color-brand) !important;
}

[data-theme="light"] .hterm-chart-wrap {
  background: rgba(0,0,0,.025) !important;
}

[data-theme="light"] .hterm-chart-glow {
  background: linear-gradient(to top, rgba(232,0,45,.07), transparent) !important;
}

[data-theme="light"] .hterm-yaxis span {
  color: rgba(0,0,0,.35) !important;
}

[data-theme="light"] .hterm-digits {
  background: rgba(0,0,0,.02) !important;
  border-top: 1px solid rgba(0,0,0,.07) !important;
}

[data-theme="light"] .hterm-digits-label {
  color: rgba(0,0,0,.45) !important;
}

[data-theme="light"] .hterm-digit-num {
  color: rgba(0,0,0,.45) !important;
}

[data-theme="light"] .hterm-digit-bar.low  { background: rgba(232,0,45,.45) !important; }
[data-theme="light"] .hterm-digit-bar.high { background: rgba(232,0,45,.75) !important; }
[data-theme="light"] .hterm-digit-bar.peak {
  background: var(--color-brand) !important;
  box-shadow: 0 0 6px rgba(232,0,45,.4) !important;
}

[data-theme="light"] .hterm-trades {
  background: transparent !important;
}

[data-theme="light"] .hterm-trade-row {
  background: rgba(0,0,0,.025) !important;
  border: 1px solid rgba(0,0,0,.07) !important;
}

[data-theme="light"] .hterm-trade-row.flash-win  { background: rgba(0,200,117,.10) !important; }
[data-theme="light"] .hterm-trade-row.flash-loss { background: rgba(232,0,45,.08) !important; }

[data-theme="light"] .hterm-trade-stake {
  color: rgba(0,0,0,.5) !important;
}

[data-theme="light"] .hterm-trade-result.win  { color: #009E5E !important; }
[data-theme="light"] .hterm-trade-result.loss { color: var(--color-brand) !important; }

/* Floating badge cards in hero */
[data-theme="light"] .hterm-float {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
}

[data-theme="light"] .hterm-float-label {
  color: rgba(0,0,0,.45) !important;
}

[data-theme="light"] .hterm-float-val {
  color: #000 !important;
}

[data-theme="light"] .hterm-float-val.green {
  color: #009E5E !important;
}

[data-theme="light"] .hterm-float-sub {
  color: rgba(0,0,0,.4) !important;
}

/* ── Navbar account chip — light mode ── */
[data-theme="light"] .navbar-account-btn {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: #000 !important;
}

[data-theme="light"] .navbar-account-btn:hover {
  border-color: rgba(232,0,45,.35) !important;
  background: rgba(232,0,45,.05) !important;
}

[data-theme="light"] .navbar-account-avatar {
  background: var(--color-brand) !important;
  color: #fff !important;
}

[data-theme="light"] .navbar-account-id {
  color: #111 !important;
}

[data-theme="light"] .navbar-account-tag {
  background: rgba(232,0,45,.10) !important;
  color: var(--color-brand) !important;
}

[data-theme="light"] .navbar-account-dropdown {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.15) !important;
}

[data-theme="light"] .navbar-acct-opt {
  color: #374151 !important;
}

[data-theme="light"] .navbar-acct-opt:hover {
  background: rgba(0,0,0,.04) !important;
  color: #000 !important;
}

[data-theme="light"] .navbar-acct-opt.active {
  color: var(--color-brand) !important;
}

[data-theme="light"] .navbar-acct-opt + .navbar-acct-opt {
  border-top-color: rgba(0,0,0,.06) !important;
}

[data-theme="light"] .navbar-acct-tag {
  background: rgba(0,0,0,.06) !important;
  color: #6B7280 !important;
}

[data-theme="light"] .navbar-logout-opt {
  color: var(--color-brand) !important;
  border-top-color: rgba(0,0,0,.06) !important;
}

/* ── Feature cards ── */
[data-theme="light"] .feature-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

[data-theme="light"] .feature-card:hover {
  border-color: rgba(232,0,45,.25) !important;
  box-shadow: 0 8px 32px rgba(232,0,45,.10), 0 2px 8px rgba(0,0,0,.06) !important;
}

/* ── How it works section ── */
[data-theme="light"] .how-it-works,
[data-theme="light"] .explain-ai,
[data-theme="light"] .value-bullets {
  background: #FFFFFF !important;
}

[data-theme="light"] .step-card,
[data-theme="light"] .detail-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

[data-theme="light"] .step-number,
[data-theme="light"] .step-icon {
  background: var(--color-brand-soft) !important;
  color: var(--color-brand) !important;
}

/* ── Proof / stats section ── */
[data-theme="light"] .proof-section {
  background: #FAFBFC !important;
  border-top: 1px solid rgba(0,0,0,.07) !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
}

[data-theme="light"] .proof-stat-num {
  color: var(--color-brand) !important;
  font-weight: 800 !important;
}

[data-theme="light"] .proof-stat-label {
  color: #6B7280 !important;
}

/* ── FAQ section ── */
[data-theme="light"] .faq-section {
  background: #FFFFFF !important;
}

[data-theme="light"] .faq-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
}

[data-theme="light"] .faq-question {
  color: #000 !important;
}

[data-theme="light"] .faq-answer {
  color: #374151 !important;
}

/* ── Invest page plan cards ── */
[data-theme="light"] .plan-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
}

[data-theme="light"] .plan-card:hover {
  border-color: var(--color-brand) !important;
  box-shadow: 0 12px 40px rgba(232,0,45,.12) !important;
}

/* ── Terms page ── */
[data-theme="light"] .terms-section {
  background: #FFFFFF !important;
}

[data-theme="light"] .terms-toc {
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

[data-theme="light"] .toc-link {
  color: #374151 !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

[data-theme="light"] .toc-link:hover {
  color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  background: rgba(232,0,45,.04) !important;
}

[data-theme="light"] .terms-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.08) !important;
}

[data-theme="light"] .terms-item h2,
[data-theme="light"] .terms-item h3 {
  color: #000 !important;
}

[data-theme="light"] .terms-item p,
[data-theme="light"] .terms-item li {
  color: #374151 !important;
}

/* ── Mobile nav drawer ── */
[data-theme="light"] .navbar-mobile-menu {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.12) !important;
}

[data-theme="light"] .navbar-mobile-link {
  color: #374151 !important;
}

[data-theme="light"] .navbar-mobile-link:hover,
[data-theme="light"] .navbar-mobile-link.active {
  color: var(--color-brand) !important;
  background: rgba(232,0,45,.05) !important;
}

/* ── General text fixes in light mode ── */
[data-theme="light"] .section-subtitle {
  color: #374151 !important;
}

[data-theme="light"] .bot-tagline,
[data-theme="light"] .bot-features li {
  color: #4B5563 !important;
}

[data-theme="light"] .bot-content h3 {
  color: #000 !important;
}

/* ── Floating theme toggle — visible in both modes ── */
[data-theme="light"] #floating-theme-toggle {
  background: #FFFFFF !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #000 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08) !important;
}

[data-theme="light"] #floating-theme-toggle:hover {
  background: var(--color-brand) !important;
  color: #fff !important;
  border-color: var(--color-brand) !important;
}

/* ── Input / select fields in light mode ── */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background: #FFFFFF !important;
  color: #000 !important;
  border-color: rgba(0,0,0,.12) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #9CA3AF !important;
}

/* ── Device mockup on home page ── */
[data-theme="light"] .device-mockup {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.10) !important;
}

[data-theme="light"] .screen-chart {
  background: linear-gradient(180deg, rgba(232,0,45,.07) 0%, transparent 100%) !important;
}

[data-theme="light"] .trade-row {
  background: rgba(0,0,0,.03) !important;
}

/* ── Trade type badges stay colored ── */
[data-theme="light"] .hterm-trade-type.over   { background: rgba(0,200,117,.12) !important; color: #009E5E !important; }
[data-theme="light"] .hterm-trade-type.under  { background: rgba(232,0,45,.10) !important;  color: var(--color-brand) !important; }
[data-theme="light"] .hterm-trade-type.differ { background: rgba(91,157,255,.12) !important; color: #3b82f6 !important; }

/* ── Eyebrow dot in light mode ── */
[data-theme="light"] .hero-eyebrow-dot {
  background: var(--color-brand) !important;
  box-shadow: 0 0 6px rgba(232,0,45,.4) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Value cards (Real-Time Execution / Backtested / Risk)
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] .value-bullets {
  background: #F7F8FA !important;
}

[data-theme="light"] .value-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04) !important;
}

[data-theme="light"] .value-card::before {
  background: linear-gradient(90deg, transparent, rgba(232,0,45,.45), transparent) !important;
}

[data-theme="light"] .value-card:hover {
  border-color: rgba(232,0,45,.25) !important;
  box-shadow: 0 16px 40px rgba(232,0,45,.10), 0 4px 12px rgba(0,0,0,.06) !important;
}

[data-theme="light"] .value-card h3 {
  color: #000000 !important;
}

[data-theme="light"] .value-card p {
  color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — How It Works steps (Get Started section)
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] .how-it-works {
  background: #FFFFFF !important;
}

[data-theme="light"] .how-it-works h2 {
  background: linear-gradient(135deg, #000 0%, var(--color-brand) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="light"] .step-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04) !important;
}

[data-theme="light"] .step-card::after {
  background: radial-gradient(circle at 50% 0%, rgba(232,0,45,.05) 0%, transparent 60%) !important;
}

[data-theme="light"] .step-card:hover {
  border-color: rgba(232,0,45,.25) !important;
  box-shadow: 0 16px 48px rgba(232,0,45,.10), 0 4px 12px rgba(0,0,0,.06) !important;
}

[data-theme="light"] .step-number {
  background: var(--color-brand) !important;
  color: #FFFFFF !important;
  box-shadow: 0 0 20px rgba(232,0,45,.35) !important;
}

[data-theme="light"] .step-card h3 {
  color: #000000 !important;
}

[data-theme="light"] .step-card p {
  color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Explain AI section
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] .explain-ai {
  background: linear-gradient(135deg, rgba(232,0,45,.04), rgba(232,0,45,.02)) !important;
  border: 1px solid rgba(232,0,45,.08) !important;
}

[data-theme="light"] .explain-ai h2,
[data-theme="light"] .ai-text h2 {
  color: #000000 !important;
}

[data-theme="light"] .ai-text p {
  color: #374151 !important;
}

[data-theme="light"] .benefit {
  color: #374151 !important;
}

[data-theme="light"] .benefit-icon {
  color: var(--color-brand) !important;
}

[data-theme="light"] .link-learn {
  color: var(--color-brand) !important;
}

[data-theme="light"] .neural-icon {
  background: radial-gradient(circle, rgba(232,0,45,.12), transparent) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Proof / Metrics section
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] .proof {
  background: #FFFFFF !important;
}

[data-theme="light"] .proof h2 {
  color: #000000 !important;
}

[data-theme="light"] .metric-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(0,0,0,.09) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

[data-theme="light"] .metric-value {
  color: var(--color-brand) !important;
}

[data-theme="light"] .metric-label {
  color: #6B7280 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIGHT MODE — Deriv Connect banner
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] .deriv-connect-strip {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(0,0,0,.07) !important;
  border-bottom: 1px solid rgba(0,0,0,.07) !important;
}

[data-theme="light"] .deriv-connect-strip p {
  color: #374151 !important;
}

[data-theme="light"] .deriv-pill {
  background: rgba(232,0,45,.07) !important;
  border-color: rgba(232,0,45,.20) !important;
  color: var(--color-brand) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DERIV CONNECT STRIP — shared dark/light base styles
   ═══════════════════════════════════════════════════════════════════ */

.deriv-connect-strip {
  padding: 16px 0;
  background: rgba(232,0,45,.04);
  border-top: 1px solid rgba(232,0,45,.12);
  border-bottom: 1px solid rgba(232,0,45,.12);
}

.deriv-connect-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}

.deriv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(232,0,45,.12);
  border: 1px solid rgba(232,0,45,.30);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brand);
  flex-shrink: 0;
}

.deriv-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-brand);
  animation: derivPulse 2s ease-in-out infinite;
}

@keyframes derivPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.8); }
}

.deriv-connect-strip p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.deriv-connect-strip p strong {
  color: var(--text-primary);
  font-weight: 700;
}

.deriv-connect-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(232,0,45,.35);
  transition: border-color .18s;
  white-space: nowrap;
}

.deriv-connect-link:hover {
  border-color: var(--color-brand);
}

/* ═══════════════════════════════════════════════════════════════════
   FULL COLOR SCHEME — Deriv-inspired Black / White / Red / Green
   ═══════════════════════════════════════════════════════════════════ */

/* ── Chart trade-type tabs: RED accent (not green) ── */
.chart-trade-type-btn.active {
  background: rgba(232, 0, 45, .10) !important;
  color: var(--color-brand) !important;
  border: 1px solid rgba(232, 0, 45, .25) !important;
}

/* Chart tool button active */
.chart-tool-btn.active {
  color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
  background: rgba(232, 0, 45, .08) !important;
  box-shadow: 0 0 8px var(--color-brand-glow) !important;
}

/* Chart canvas glow → neutral / remove green */
.chart-canvas-wrap {
  box-shadow: none !important;
}

/* ── Bot status pills — GREEN = running (status indicator) ── */
.bot-status-pill.running {
  background: rgba(0, 200, 117, .12) !important;
  color: var(--color-green) !important;
}

.bot-status-pill.running .bot-status-dot {
  background: var(--color-green) !important;
}

.bot-status-dot.running {
  background: var(--color-green) !important;
  box-shadow: 0 0 0 0 rgba(0, 200, 117, .7) !important;
}

/* ── Position status badge — GREEN = active ── */
.position-status-badge.running {
  background: rgba(0, 200, 117, .12) !important;
  color: var(--color-green) !important;
}

/* ── P/L values: GREEN for profit, RED for loss ── */
.bot-stat-val.pos,
.pos-pl.pos,
.session-pl.pos,
.pl-value.pos,
.stat-pl.pos,
[class*="pl"].pos {
  color: var(--color-green) !important;
}

.bot-stat-val.neg,
.pos-pl.neg,
.session-pl.neg,
.pl-value.neg,
.stat-pl.neg,
[class*="pl"].neg {
  color: var(--color-brand) !important;
}

/* Trade history: win = green, loss = red */
.trade-row.win .trade-pl,
.history-row.win .pl,
.bot-last-result.win,
.pos-result.win,
.result-win,
.dbot-log.win .dbot-log-m {
  color: var(--color-green) !important;
}

.trade-row.loss .trade-pl,
.history-row.loss .pl,
.bot-last-result.loss,
.pos-result.loss,
.result-loss,
.dbot-log.loss .dbot-log-m {
  color: var(--color-brand) !important;
}

/* DBot stat P/L value colors */
.dbot-stat-val.green { color: var(--color-green) !important; }
.dbot-stat-val.red   { color: var(--color-brand) !important; }

/* ── Bots page cards — bot color chips stay brand-themed ── */
.bot-stat-val.pos { color: var(--color-green) !important; }
.bot-stat-val.neg { color: var(--color-brand) !important; }

/* ── Trade ticket: Selection buttons ── */
.selection-btn.active {
  background: var(--color-brand) !important;
  color: #fff !important;
  border-color: var(--color-brand) !important;
}

/* Rise/Over → GREEN (buying, positive action) */
.selection-btn[data-selection="rise"].active,
.selection-btn[data-selection="over"].active,
.selection-btn[data-selection="even"].active,
.selection-btn[data-selection="match"].active {
  background: var(--color-green) !important;
  color: #fff !important;
  border-color: var(--color-green) !important;
}

/* Fall/Under → RED (selling, negative action) */
.selection-btn[data-selection="fall"].active,
.selection-btn[data-selection="under"].active,
.selection-btn[data-selection="odd"].active,
.selection-btn[data-selection="differ"].active {
  background: var(--color-brand) !important;
  color: #fff !important;
  border-color: var(--color-brand) !important;
}

/* ── Market price changes ── */
.price-up, .change-up, .tick-up {
  color: var(--color-green) !important;
}
.price-down, .change-down, .tick-down {
  color: var(--color-brand) !important;
}

/* ── Tables: row hover ── */
.market-table tbody tr:hover,
.history-table tbody tr:hover,
.positions-table tbody tr:hover {
  background: var(--bg-hover) !important;
}

.market-table thead th,
.history-table thead th,
.positions-table thead th {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── Market table active row (selected asset) ── */
.market-item.active {
  background: rgba(232, 0, 45, .07) !important;
  border-left: 2px solid var(--color-brand) !important;
}

.market-item:hover {
  background: var(--bg-hover) !important;
}

/* ── Panels: strong contrast borders ── */
.chart-panel,
.trade-panel,
.markets-panel,
.positions-panel,
.left-rail,
.top-nav {
  border-color: var(--border) !important;
}

/* ── Bots page: mode pill dot colors ── */
.bots-mode-pill {
  border: 1px solid var(--border) !important;
  background: var(--bg-elevated) !important;
}

/* ── DBot page start/stop buttons (separate from bot.js) ── */
.dbot-run-btn.start {
  background: var(--color-green) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 16px var(--color-green-glow) !important;
}

.dbot-run-btn.start:hover:not(:disabled) {
  filter: brightness(1.1) !important;
}

.dbot-run-btn.stop {
  background: var(--color-brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 16px var(--color-brand-glow) !important;
}

.dbot-run-btn.stop:hover:not(:disabled) {
  background: var(--color-brand-dim) !important;
}

/* ── Auth buttons ── */
.auth-btn-primary,
.deriv-login-btn {
  background: var(--color-brand) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 0 16px var(--color-brand-glow) !important;
}

/* ── Toast colors ── */
.toast.green,
.toast[data-type="green"],
.toast[data-type="success"] {
  border-left: 3px solid var(--color-green) !important;
}

.toast.red,
.toast[data-type="red"],
.toast[data-type="error"] {
  border-left: 3px solid var(--color-brand) !important;
}

/* ── Disabled inputs look clean ── */
input:disabled,
select:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ── Active tabs / pills across all pages ── */
.tab-btn.active,
.tab-link.active {
  color: var(--color-brand) !important;
  border-bottom-color: var(--color-brand) !important;
}

/* Bots page tab */
.bots-tab.active {
  color: var(--color-brand) !important;
  border-color: var(--color-brand) !important;
}

/* ── Light mode overrides for all new elements ── */
[data-theme="light"] .chart-trade-type-btn.active {
  background: rgba(232,0,45,.08) !important;
  color: var(--color-brand) !important;
  border-color: rgba(232,0,45,.20) !important;
}

[data-theme="light"] .market-item.active {
  background: rgba(232,0,45,.05) !important;
}

[data-theme="light"] .market-table tbody tr:hover {
  background: #F4F5F7 !important;
}

[data-theme="light"] .bot-status-pill.stopped {
  background: rgba(0,0,0,.05) !important;
  color: #6B7280 !important;
}

[data-theme="light"] .bot-status-pill.stopped .bot-status-dot {
  background: #9CA3AF !important;
}

[data-theme="light"] .dbot-run-btn.start:disabled,
[data-theme="light"] .dbot-run-btn.stop:disabled {
  background: rgba(0,0,0,.08) !important;
  color: #9CA3AF !important;
  box-shadow: none !important;
}

[data-theme="light"] .bot-start-btn:disabled {
  background: #F4F5F7 !important;
  color: #9CA3AF !important;
  box-shadow: none !important;
  border: 1px solid rgba(0,0,0,.10) !important;
}

/* Ensure light mode tables look clean */
[data-theme="light"] .market-table thead th,
[data-theme="light"] .history-table thead th {
  color: #6B7280 !important;
  border-bottom-color: rgba(0,0,0,.09) !important;
}

[data-theme="light"] .chart-tool-btn.active {
  background: rgba(232,0,45,.07) !important;
  color: var(--color-brand) !important;
  border-color: rgba(232,0,45,.25) !important;
  box-shadow: 0 0 8px rgba(232,0,45,.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DBOT PAGE — Brand color overrides + light mode compatibility
   ═══════════════════════════════════════════════════════════════════ */

/* ── Banner: brand info strip instead of hardcoded blue ── */
.dbot-banner {
  background: rgba(232, 0, 45, .06) !important;
  border-bottom-color: rgba(232, 0, 45, .15) !important;
  color: var(--text-secondary) !important;
}

.dbot-banner svg {
  color: var(--color-brand) !important;
}

.dbot-banner a {
  color: var(--color-brand) !important;
}

/* ── Active template in library → brand red indicator ── */
.dbot-tpl.active {
  background: rgba(232, 0, 45, .05) !important;
  border-left-color: var(--color-brand) !important;
}

/* ── Mobile tab bar active → brand red ── */
.dbot-tab-btn.active {
  color: var(--color-brand) !important;
}

.dbot-tab-btn .tab-dot {
  background: var(--color-brand) !important;
}

/* ── Toolbar buttons: adapt to theme ── */
.dbot-tbtn {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.dbot-tbtn:hover {
  background: var(--bg-hover) !important;
  color: var(--text-primary) !important;
  border-color: rgba(232,0,45,.25) !important;
}

/* ── Chips (info bar) adapt to theme ── */
.dbot-chip {
  background: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ── Template load button → use brand accent ── */
.dbot-tpl-load {
  background: rgba(232, 0, 45, .07) !important;
  border-color: rgba(232, 0, 45, .22) !important;
  color: var(--color-brand) !important;
}

.dbot-tpl-load:hover {
  background: rgba(232, 0, 45, .14) !important;
}

/* ── Import button stays green (it's a file action, not a brand action) ── */
.dbot-import-btn {
  background: rgba(0, 200, 117, .07) !important;
  border-color: rgba(0, 200, 117, .30) !important;
  color: var(--color-green) !important;
}

.dbot-import-btn:hover {
  background: rgba(0, 200, 117, .14) !important;
  border-color: rgba(0, 200, 117, .50) !important;
}

/* ── Stop button uses brand red (not generic red variable) ── */
.dbot-run-btn.stop {
  background: rgba(232, 0, 45, .08) !important;
  border: 1px solid rgba(232, 0, 45, .25) !important;
  color: var(--color-brand) !important;
}

.dbot-run-btn.stop:hover:not(:disabled) {
  background: rgba(232, 0, 45, .15) !important;
}

/* ── Journal header / info bar adapt to theme ── */
.dbot-journal-hd {
  background: var(--bg-elevated) !important;
  border-bottom-color: var(--border) !important;
}

.dbot-info-bar {
  background: var(--bg-elevated) !important;
  border-top-color: var(--border) !important;
}

/* ── Light mode: fix all dbot hard-coded dark values ── */
[data-theme="light"] .dbot-tbtn {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: #4B5563 !important;
}

[data-theme="light"] .dbot-tbtn:hover {
  background: rgba(0,0,0,.07) !important;
  color: #111 !important;
}

[data-theme="light"] .dbot-tpl {
  border-bottom-color: rgba(0,0,0,.06) !important;
}

[data-theme="light"] .dbot-tpl:hover {
  background: rgba(0,0,0,.03) !important;
}

[data-theme="light"] .dbot-chip {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: #111 !important;
}

[data-theme="light"] .dbot-journal-body {
  scrollbar-color: rgba(0,0,0,.15) transparent !important;
}

[data-theme="light"] .dbot-journal-body::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15) !important;
}

[data-theme="light"] .dbot-exec-scroll {
  scrollbar-color: rgba(0,0,0,.12) transparent !important;
}

[data-theme="light"] .dbot-log-t {
  color: rgba(0,0,0,.35) !important;
}

[data-theme="light"] .dbot-lib-list::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15) !important;
}

[data-theme="light"] .dbot-status-pill {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.10) !important;
}

[data-theme="light"] .dbot-run-btn.start:disabled {
  background: rgba(0,0,0,.08) !important;
  color: #9CA3AF !important;
  box-shadow: none !important;
}

[data-theme="light"] .dbot-run-btn.stop:disabled {
  opacity: 0.4 !important;
}

[data-theme="light"] .dbot-banner {
  background: rgba(232, 0, 45, .04) !important;
  border-bottom-color: rgba(232, 0, 45, .12) !important;
}

[data-theme="light"] .dbot-tpl-badge.green {
  background: rgba(0,200,117,.12) !important;
  color: #00934a !important;
}

[data-theme="light"] .dbot-tpl-badge.blue {
  background: rgba(59,130,246,.12) !important;
  color: #2563EB !important;
}

[data-theme="light"] .dbot-tpl-badge.red {
  background: rgba(232,0,45,.10) !important;
  color: var(--color-brand) !important;
}

[data-theme="light"] .dbot-tpl-badge.yellow {
  background: rgba(245,158,11,.12) !important;
  color: #B45309 !important;
}

[data-theme="light"] .dbot-tpl-badge.purple {
  background: rgba(139,92,246,.12) !important;
  color: #6D28D9 !important;
}

[data-theme="light"] .dbot-chip.green {
  background: rgba(0,200,117,.08) !important;
  border-color: rgba(0,200,117,.25) !important;
  color: #00934a !important;
}

[data-theme="light"] .dbot-chip.blue {
  background: rgba(59,130,246,.08) !important;
  border-color: rgba(59,130,246,.25) !important;
  color: #2563EB !important;
}

[data-theme="light"] .dbot-chip.yellow {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.25) !important;
  color: #B45309 !important;
}

[data-theme="light"] .blocklySvg {
  background: #FAFAFA !important;
}

[data-theme="light"] .blocklyMainBackground {
  fill: #FAFAFA !important;
}

[data-theme="light"] .blocklyScrollbarKnob {
  fill: rgba(0,0,0,.18) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TOAST — enhanced with type-based left-border accent
   ═══════════════════════════════════════════════════════════════════ */

.toast {
  border-left: 3px solid transparent !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 11px 18px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.14) !important;
}

.toast.green  { border-left-color: var(--color-green) !important; }
.toast.red    { border-left-color: var(--color-brand) !important; }
.toast.warn   { border-left-color: #F59E0B !important; }
.toast.info   { border-left-color: #3B82F6 !important; }
.toast.neutral { border-left-color: var(--text-muted) !important; }

[data-theme="light"] .toast {
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTS HISTORY TABLE — enhanced readability
   ═══════════════════════════════════════════════════════════════════ */

.bots-history-table thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--text-muted) !important;
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--border) !important;
}

.bots-history-table tbody tr:hover {
  background: var(--bg-hover) !important;
}

.bots-history-table .result-win {
  color: var(--color-green) !important;
  font-weight: 600 !important;
}

.bots-history-table .result-loss {
  color: var(--color-brand) !important;
  font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DIGIT FREQUENCY TABLE — DigitShield bot card
   ═══════════════════════════════════════════════════════════════════ */

.digit-freq-wrap {
  margin: 10px 0 2px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 10px 12px;
}
[data-theme="light"] .digit-freq-wrap {
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.08);
}

.digit-freq-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.digit-freq-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
}

.digit-freq-hint {
  font-size: 10px;
  color: var(--text-muted);
  opacity: .7;
  margin-left: auto;
}

.digit-freq-scroll {
  overflow-x: auto;
}

.digit-freq-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 340px;
}

.df-cell {
  text-align: center;
  padding: 5px 3px;
  border-radius: 5px;
  transition: background .25s, color .25s;
  cursor: default;
  min-width: 32px;
}

.df-cell .df-digit {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}

.df-cell .df-count {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Least frequent — highlighted as the Differ target */
.df-cell.df-min {
  background: rgba(232, 0, 45, .15);
  border: 1px solid rgba(232, 0, 45, .35);
}
.df-cell.df-min .df-digit {
  color: var(--color-brand);
}
.df-cell.df-min .df-count {
  color: rgba(232, 0, 45, .85);
  font-weight: 600;
}

/* Most frequent — subtle highlight */
.df-cell.df-max {
  background: rgba(0, 200, 117, .08);
  border: 1px solid rgba(0, 200, 117, .2);
}
.df-cell.df-max .df-digit {
  color: var(--color-green);
}

/* ═══════════════════════════════════════════════════════════════════
   SOUND TOGGLE BUTTON — bots header
   ═══════════════════════════════════════════════════════════════════ */

.bots-sound-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
  white-space: nowrap;
}
[data-theme="light"] .bots-sound-toggle {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.1);
}
.bots-sound-toggle:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.18);
}
[data-theme="light"] .bots-sound-toggle:hover {
  background: rgba(0,0,0,.09);
}

/* Sounds OFF state */
.bots-sound-toggle.sounds-off {
  color: var(--text-muted);
  border-color: rgba(255,255,255,.06);
}
.bots-sound-toggle.sounds-off .sound-icon-on  { display: none !important; }
.bots-sound-toggle.sounds-off .sound-icon-off { display: inline !important; }
.bots-sound-toggle:not(.sounds-off) .sound-icon-off { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBARS — global themed scrollbars
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.10);
  border-radius: 999px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.18);
}

[data-theme="light"] ::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: transparent;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.22);
}

/* Trading polish: responsive header, digit rows, and compact typography */
.top-nav {
  min-width: 0;
  overflow: visible;
}

.nav-left,
.nav-right {
  min-width: 0;
}

.at-logo {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  flex: 0 0 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.at-logo span {
  display: block !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

.bot-digit-row {
  display: grid !important;
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
  gap: 4px !important;
  width: 100%;
  min-width: 0;
}

.bot-digit-btn {
  width: auto !important;
  min-width: 0 !important;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-variant-numeric: tabular-nums;
}

.bot-label,
.bot-input,
.bot-seg-btn,
.bot-stat-label,
.bot-stat-value,
.position-info-label,
.position-info-value,
.reports-stat-label,
.reports-stat-value {
  letter-spacing: 0 !important;
}

.bot-label,
.bot-stat-label,
.position-info-label,
.reports-stat-label {
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

.bot-input,
.bot-seg-btn {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
}

.profit,
.price-up,
.success,
.buy,
.rise {
  color: var(--color-green) !important;
}

.loss,
.price-down,
.error,
.sell,
.fall {
  color: var(--color-red) !important;
}

@media (max-width: 768px) {
  .top-nav {
    min-height: 52px !important;
    padding-inline: 8px !important;
    gap: 8px !important;
  }

  .nav-left {
    flex: 0 1 auto;
  }

  .nav-right {
    flex: 1 1 auto;
    justify-content: flex-end;
    gap: 8px !important;
  }

  .nav-brand {
    max-width: 36vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .at-logo,
  body:has(#trade-panel) .at-logo {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex-basis: 36px !important;
    border-radius: 8px !important;
  }

  .at-logo span,
  body:has(#trade-panel) .at-logo span {
    font-size: 11px !important;
  }

  .account-chip {
    max-width: min(44vw, 172px) !important;
    min-width: 0;
  }

  .bot-digit-row,
  body:has(#trade-panel) .bot-digit-row {
    grid-template-columns: repeat(10, minmax(22px, 1fr)) !important;
    gap: 3px !important;
  }

  .bot-digit-btn,
  body:has(#trade-panel) .bot-digit-btn {
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
  }
}

@media (max-width: 420px) {
  .nav-brand {
    display: none;
  }

  .bot-digit-row,
  body:has(#trade-panel) .bot-digit-row {
    gap: 2px !important;
  }

  .bot-digit-btn,
  body:has(#trade-panel) .bot-digit-btn {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }
}

/* Global premium rounding and readable shared notifications */
:root {
  --ui-radius-xs: 8px;
  --ui-radius-sm: 10px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 20px;
}

button,
input,
select,
textarea,
.top-nav,
.autonix-navbar,
.left-rail,
.nav-search-wrap,
.nav-icon-btn,
.account-chip,
.account-switcher-dropdown,
.account-option,
.rail-item,
.rail-account-dropdown,
.rail-account-option,
.asset-selector-bar,
.asset-selector-btn,
.markets-panel,
.positions-panel,
.reports-page,
.reports-stat-card,
.reports-table-wrap,
.bot-panel,
.bot-panel-inner,
.bot-header-icon,
.bot-segmented,
.bot-seg-btn,
.bot-input-wrap,
.bot-input,
.bot-session-stats,
.bot-stat,
.bot-start-btn,
.bot-reset-btn,
.bot-last-trade,
.position-item,
.trade-type-btn,
.chart-tf-btn,
.chart-section,
.chart-body,
.market-card,
.bots-workspace,
.bots-summary-item,
.bots-sound-toggle,
.bot-card,
.bots-history-card,
.modal-content,
.install-app-popup,
.toast {
  border-radius: var(--ui-radius-md);
}

.top-nav,
.autonix-navbar,
.left-rail,
.asset-selector-bar,
.chart-section,
.bot-panel,
.positions-panel,
.markets-panel {
  border-radius: 0;
}

.nav-icon-btn,
.rail-item,
.bot-status-dot,
.status-dot {
  border-radius: 999px;
}

.at-logo,
.account-avatar,
.navbar-account-avatar,
.bot-header-icon {
  border-radius: var(--ui-radius-sm) !important;
}

.bot-digit-btn,
.chart-tf-btn,
.trade-type-btn,
.bot-seg-btn,
.account-option,
.rail-account-option {
  border-radius: var(--ui-radius-sm) !important;
}

.toast {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: max(20px, env(safe-area-inset-bottom)) !important;
  transform: translate(-50%, 16px) !important;
  width: min(calc(100vw - 32px), 420px) !important;
  min-height: 48px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 13px 18px !important;
  background: #111111 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  border-left: 4px solid var(--color-brand) !important;
  box-shadow: 0 18px 56px rgba(0, 0, 0, .42), 0 0 0 1px rgba(255, 255, 255, .04) inset !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5000 !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.toast.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, 0) !important;
}

.toast.green,
.toast.success,
.toast[data-type="green"],
.toast[data-type="success"] {
  border-left-color: var(--color-green) !important;
}

.toast.red,
.toast.error,
.toast[data-type="red"],
.toast[data-type="error"] {
  border-left-color: var(--color-red) !important;
}

.toast.neutral,
.toast.info,
.toast.warn {
  border-left-color: var(--color-brand) !important;
}

[data-theme="light"] .toast {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: rgba(0, 0, 0, .14) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .9) inset !important;
}

.install-app-prompt {
  position: fixed;
  inset: 0;
  z-index: 4800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px;
  background: rgba(0, 0, 0, .62);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}

.install-app-prompt.is-visible:not([hidden]) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.install-app-prompt[hidden] {
  display: none !important;
}

.install-app-popup {
  position: relative;
  width: min(100%, 390px);
  display: grid;
  gap: 16px;
  padding: 20px;
  background: #0E0E0E;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 22px 72px rgba(0, 0, 0, .56);
}

.install-app-copy h2 {
  margin: 0 40px 6px 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 850;
  color: inherit;
}

.install-app-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
}

.install-app-action {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--color-brand);
  background: var(--color-brand);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 850;
}

.install-app-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: inherit;
  font-size: 24px;
  line-height: 1;
}

[data-theme="light"] .install-app-popup {
  background: #FFFFFF;
  color: #000000;
  border-color: rgba(0, 0, 0, .12);
  box-shadow: 0 22px 64px rgba(0, 0, 0, .22);
}

[data-theme="light"] .install-app-copy p {
  color: rgba(0, 0, 0, .68);
}

[data-theme="light"] .install-app-close {
  border-color: rgba(0, 0, 0, .12);
  background: rgba(0, 0, 0, .04);
}

@media (min-width: 768px) {
  .install-app-prompt {
    align-items: center;
  }
}

@media (max-width: 420px) {
  .toast {
    width: min(calc(100vw - 24px), 380px) !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    font-size: 13px !important;
  }

  .install-app-prompt {
    padding: 12px;
  }

  .install-app-popup {
    padding: 18px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BOTS PAGE v3 — Free · Basic · Expert
   ═══════════════════════════════════════════════════════════════ */

/* ── Card base ── */
.bot-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.bot-card:hover {
  border-color: rgba(var(--bot-accent, 232,0,45), .35);
  box-shadow: 0 4px 32px rgba(0,0,0,.12);
}
.bot-card-premium {
  border-color: rgba(255,255,255,.08);
}

/* ── Card header ── */
.bot-card-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bot-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bot-accent, #00E5A0);
}
.bot-card-icon svg { width: 20px; height: 20px; }
.bot-card-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bot-card-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text-primary);
}
.bot-card-tagline {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.4;
}

/* ── Tier badges ── */
.bot-tier-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid;
  text-transform: uppercase;
  width: fit-content;
}
.bot-tier-free   { color: #00E5A0; border-color: rgba(0,229,160,.35); background: rgba(0,229,160,.07); }
.bot-tier-basic  { color: #5b9dff; border-color: rgba(91,157,255,.35); background: rgba(91,157,255,.07); }
.bot-tier-expert { color: #F59E0B; border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.07); }

/* Status pill pushed to right */
.bot-card-header .bot-status-pill {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  padding: 4px 10px;
}
.bot-status-pill.waiting {
  background: rgba(245,158,11,.12);
  color: #F59E0B;
}
.bot-status-pill.waiting .bot-status-dot { background: #F59E0B; }

/* ── Trade type row (Free Bot) ── */
.bot-trade-type-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.bot-trade-type-row .bot-input-label { white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--text-muted); }
.bot-trade-type-select { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; outline: none; }

/* ── Inputs grid ── */
.bot-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bot-input-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bot-input-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.bot-input-field input,
.bot-input-field .bot-select {
  width: 100%;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  transition: border-color .15s;
}
.bot-input-field input:focus,
.bot-input-field .bot-select:focus { border-color: var(--bot-accent, #00E5A0); }
.bot-select {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 10px;
  outline: none;
  cursor: pointer;
}

/* ── Actions row ── */
.bot-actions {
  display: flex;
  gap: 8px;
}
.bot-start-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .18s ease;
  background: linear-gradient(135deg, var(--color-green) 0%, var(--color-green-dim) 100%);
  color: #fff;
  box-shadow: 0 0 18px var(--color-green-glow);
}
.bot-start-btn:hover:not(:disabled) { filter: brightness(1.1); transform: translateY(-1px); }
.bot-start-btn.running {
  background: var(--color-brand) !important;
  box-shadow: 0 0 18px var(--color-brand-glow) !important;
}
.bot-start-btn:disabled {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  box-shadow: none !important;
  border: 1px solid var(--border) !important;
  cursor: not-allowed !important;
  transform: none !important;
}
.bot-reset-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: all .15s;
}
.bot-reset-btn:hover { background: var(--bg-elevated); border-color: var(--text-muted); color: var(--text-primary); }

/* ── Stats grid ── */
.bot-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.bot-stat { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; }
.bot-stat-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bot-stat-val { font-size: 13px; font-weight: 700; color: var(--text-primary); }

/* ── Signal row ── */
.bot-signal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.bot-signal-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.bot-signal-val { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.bot-signal-val.active { color: var(--bot-accent, #00E5A0); }

/* ── Last trade ── */
.bot-last-trade {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.bot-last-label { color: var(--text-muted); font-weight: 500; }
.bot-last-result.win  { color: var(--color-green); font-weight: 700; }
.bot-last-result.loss { color: var(--color-brand); font-weight: 700; }

/* ── Activation panel ── */
.bot-activation-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 20px;
  background: rgba(255,255,255,.03);
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 12px;
  text-align: center;
}
.bot-lock-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bot-lock-icon {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.bot-activation-prompt { font-size: 13px; color: var(--text-secondary); margin: 0; }
.bot-activation-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 340px;
}
.bot-activation-input {
  flex: 1;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 9px 12px;
  outline: none;
  transition: border-color .15s;
  font-family: monospace;
  letter-spacing: .05em;
}
.bot-activation-input:focus { border-color: var(--bot-accent, #5b9dff); }
.bot-activation-input.input-error { border-color: var(--color-brand) !important; animation: shake .3s ease; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.bot-validate-btn {
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: var(--bot-accent, #5b9dff);
  color: #000;
  transition: all .15s;
  white-space: nowrap;
}
.bot-validate-btn:hover:not(:disabled) { filter: brightness(1.1); }
.bot-validate-btn:disabled { opacity: .5; cursor: not-allowed; }
.bot-activation-error {
  font-size: 12px;
  color: var(--color-brand);
  text-align: center;
  padding: 6px 12px;
  background: rgba(232,0,45,.08);
  border-radius: 6px;
  width: 100%;
  max-width: 340px;
}

/* ── Activated row ── */
.bot-activated-row { margin-top: 2px; }
.bot-activated-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-green);
  background: rgba(0,200,117,.1);
  border: 1px solid rgba(0,200,117,.2);
  border-radius: 20px;
  padding: 2px 9px;
}

/* ── Purchase panel ── */
.bot-purchase-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bot-purchase-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #000;
  transition: all .18s ease;
  box-shadow: 0 0 20px rgba(245,158,11,.25);
}
.bot-purchase-btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 4px 24px rgba(245,158,11,.35); }
.bot-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: #25D366;
  transition: all .15s ease;
  border: none;
  cursor: pointer;
}
.bot-wa-btn:hover { background: #1fba57; transform: translateY(-1px); }

/* ── Enhanced Digit Frequency Panel ── */
.digit-freq-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.digit-freq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.digit-freq-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
}
.digit-freq-hint { font-size: 10px; color: var(--text-muted); opacity: .7; }
.digit-freq-cells {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.df-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border-radius: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid transparent;
  transition: all .2s ease;
}
.df-cell.df-hot {
  background: rgba(232,0,45,.1);
  border-color: rgba(232,0,45,.3);
}
.df-cell.df-cold {
  background: rgba(91,157,255,.1);
  border-color: rgba(91,157,255,.3);
}
.df-digit { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.df-cell.df-hot  .df-digit { color: var(--color-brand); }
.df-cell.df-cold .df-digit { color: #5b9dff; }
.df-bar-wrap {
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
}
.df-bar { height: 100%; border-radius: 2px; background: rgba(255,255,255,.25); transition: width .4s ease; }
.df-bar.df-bar-hot  { background: var(--color-brand); }
.df-bar.df-bar-cold { background: #5b9dff; }
.df-count { font-size: 10px; font-weight: 700; color: var(--text-secondary); }
.df-pct   { font-size: 9px; color: var(--text-muted); }

/* ── Payment modal ── */
.payment-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(6px);
  padding: 20px;
}
.payment-modal {
  position: relative;
  background: var(--bg-card);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  padding: 32px 28px;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.payment-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.07);
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.payment-modal-close:hover { background: rgba(255,255,255,.14); }
.payment-modal-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  display: flex; align-items: center; justify-content: center;
  color: #F59E0B;
  align-self: center;
}
.payment-modal-title {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  margin: 0;
  color: var(--text-primary);
}
.payment-modal-desc {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}
.payment-modal-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.payment-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.payment-detail-label { color: var(--text-muted); }
.payment-detail-val   { font-weight: 700; color: var(--text-primary); }
.payment-address-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
}
.payment-address-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.payment-address-value {
  font-family: monospace;
  font-size: 11px;
  color: var(--text-primary);
  word-break: break-all;
  line-height: 1.5;
}
.payment-copy-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  transition: all .15s;
}
.payment-copy-btn:hover { background: rgba(255,255,255,.07); }
.payment-verify-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(245,158,11,.06);
  border-radius: 8px;
  border: 1px solid rgba(245,158,11,.15);
}
.payment-verify-note svg { flex-shrink: 0; margin-top: 1px; color: #F59E0B; }
.payment-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: #25D366;
  transition: all .15s;
}
.payment-wa-btn:hover { background: #1fba57; }

/* ── Bots grid layout ── */
.bots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}

/* ── Light mode overrides ── */
[data-theme="light"] .bot-activation-panel { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .bot-lock-icon { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .bot-activation-input { background: #fff; }
[data-theme="light"] .bot-card-icon { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .bot-stats-grid { background: rgba(0,0,0,.03); }
[data-theme="light"] .bot-trade-type-row { background: rgba(0,0,0,.03); }
[data-theme="light"] .df-cell { background: rgba(0,0,0,.04); }
[data-theme="light"] .payment-modal { background: #fff; }
[data-theme="light"] .payment-address-box { background: rgba(0,0,0,.04); }

/* ══════════════════════════════════════════════════════════════
   Bulk Trader Section
══════════════════════════════════════════════════════════════ */
.bulk-trader-section {
  margin: 24px 0 0;
  background: var(--card-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 16px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Header ── */
.bulk-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.bulk-header-left {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bulk-header-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  background: rgba(139,92,246,.12);
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8B5CF6;
}
.bulk-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8B5CF6;
  margin-bottom: 3px;
}
.bulk-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 4px;
  line-height: 1.2;
}
.bulk-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.5;
  max-width: 520px;
}

/* ── Status pill ── */
.bulk-status-pill {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bulk-status-idle     { background: rgba(255,255,255,.06); color: var(--text-muted); }
.bulk-status-analyzing{ background: rgba(245,158,11,.15);  color: #F59E0B; }
.bulk-status-running  { background: rgba(0,229,160,.15);   color: #00E5A0; }
.bulk-status-complete { background: rgba(91,157,255,.15);  color: #5b9dff; }
.bulk-status-error    { background: rgba(239,68,68,.15);   color: #ef4444; }
.bulk-status-recovery { background: rgba(245,158,11,.15);  color: #F59E0B; }
.bulk-status-recovery { background: rgba(245,158,11,.15);  color: #F59E0B; }

/* ── Config grid ── */
.bulk-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.bulk-input {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border, rgba(255,255,255,.12));
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color .15s;
  -moz-appearance: textfield;
}
.bulk-input::-webkit-outer-spin-button,
.bulk-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bulk-input:focus { border-color: #8B5CF6; }

/* ── Analysis summary ── */
.bulk-analysis-summary {
  background: rgba(139,92,246,.06);
  border: 1px solid rgba(139,92,246,.18);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bulk-analysis-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8B5CF6;
}
.bulk-strat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) { .bulk-strat-grid { grid-template-columns: 1fr; } }
.bulk-strat-card {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bulk-strat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.bulk-strat-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.bulk-badge-differs { background: rgba(91,157,255,.2); color: #5b9dff; }
.bulk-badge-ou      { background: rgba(245,158,11,.2); color: #F59E0B; }
.bulk-strat-signal {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}
.bulk-conf-bar-wrap {
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.bulk-conf-bar {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease;
}
.bulk-badge-differs.bulk-conf-bar, .bulk-conf-bar.bulk-badge-differs { background: #5b9dff; }
.bulk-conf-bar.bulk-badge-ou { background: #F59E0B; }
/* target the bar elements specifically */
.bulk-strat-card:first-child .bulk-conf-bar { background: #5b9dff; }
.bulk-strat-card:last-child  .bulk-conf-bar { background: #F59E0B; }
.bulk-strat-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}
.bulk-strat-meta strong { color: var(--text-primary); }
.bulk-alloc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 10px 12px;
  background: rgba(0,229,160,.06);
  border: 1px solid rgba(0,229,160,.15);
  border-radius: 8px;
  line-height: 1.5;
}
.bulk-alloc-row svg { flex-shrink: 0; margin-top: 1px; color: #00E5A0; }
.bulk-alloc-row strong { color: var(--text-primary); }

/* ── Actions row ── */
.bulk-actions-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bulk-execute-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: #8B5CF6;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, opacity .15s, transform .1s;
}
.bulk-execute-btn:hover:not(:disabled) { background: #7C3AED; transform: translateY(-1px); }
.bulk-execute-btn:active:not(:disabled){ transform: translateY(0); }
.bulk-execute-btn:disabled { opacity: .55; cursor: not-allowed; }
@keyframes bulk-spin { to { transform: rotate(360deg); } }
.bulk-btn-spin { animation: bulk-spin .7s linear infinite; }

/* ── Live summary bar ── */
.bulk-live-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.bulk-live-item  { display: flex; align-items: center; gap: 4px; }
.bulk-live-item strong { color: var(--text-primary); }
.bulk-live-divider {
  width: 1px; height: 14px;
  background: rgba(255,255,255,.12);
}
.bulk-live-item .pos { color: #00E5A0; }
.bulk-live-item .neg { color: #ef4444; }

/* ── History table ── */
.bulk-history-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bulk-history-hdr {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
}
.bulk-table-scroll {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
}
.bulk-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.bulk-history-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid rgba(255,255,255,.07);
  white-space: nowrap;
}
.bulk-history-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
}
.bulk-history-table tbody tr:hover { background: rgba(255,255,255,.03); }
.bulk-history-table tbody td {
  padding: 9px 12px;
  color: var(--text-primary);
  vertical-align: middle;
  white-space: nowrap;
}
.bulk-td-num   { color: var(--text-muted); font-size: 11px; }
.bulk-td-dir   { font-weight: 700; font-size: 11px; letter-spacing: .04em; }
.bulk-td-digit { text-align: center; font-weight: 800; font-size: 13px; color: var(--text-muted); }

/* Row status badge */
.bulk-row-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.bulk-row-pending { background: rgba(255,255,255,.08); color: var(--text-muted); }
.bulk-row-trading { background: rgba(245,158,11,.18);  color: #F59E0B; }
.bulk-row-win     { background: rgba(0,229,160,.18);   color: #00E5A0; }
.bulk-row-loss    { background: rgba(239,68,68,.18);   color: #ef4444; }
.bulk-row-err     { background: rgba(239,68,68,.12);   color: #ef4444; }

/* P/L colours reuse existing classes */
.bulk-history-table .h-profit { color: #00E5A0; font-weight: 700; }
.bulk-history-table .h-loss   { color: #ef4444; font-weight: 700; }
.bulk-history-table .h-time   { color: var(--text-muted); font-size: 11px; }
.bulk-history-table .hrow-win  { background: rgba(0,229,160,.03); }
.bulk-history-table .hrow-loss { background: rgba(239,68,68,.03); }

/* ── Light mode overrides ── */
[data-theme="light"] .bulk-trader-section { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .bulk-header-icon    { background: rgba(139,92,246,.08); border-color: rgba(139,92,246,.2); }
[data-theme="light"] .bulk-strat-card     { background: rgba(0,0,0,.03); }
[data-theme="light"] .bulk-execute-btn    { background: #7C3AED; }
[data-theme="light"] .bulk-execute-btn:hover { background: #6D28D9; }
[data-theme="light"] .bulk-live-summary   { background: rgba(0,0,0,.04); }
[data-theme="light"] .bulk-history-table thead th { background: rgba(0,0,0,.04); }
[data-theme="light"] .bulk-input { background: #fff; }

/* ── AI Trader ── */
.ai-trader-section { gap: 18px; }
.ai-summary-card,
.ai-stats-card,
.ai-log-card {
  background: linear-gradient(135deg, rgba(15,23,42,0.92), rgba(8,15,35,0.84));
  border: 1px solid rgba(91,157,255,.22);
  border-radius: 14px;
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 12px 30px rgba(4,10,28,.28);
}
.ai-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.ai-pill {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(91,157,255,.16), rgba(0,229,160,.1));
  border: 1px solid rgba(255,255,255,.06);
}
.ai-pill span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.ai-pill strong { font-size: 15px; color: var(--text-primary); }
.ai-stats-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.ai-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.04);
}
.ai-stat-card span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.ai-stat-card strong { font-size: 14px; color: var(--text-primary); }
.ai-log-card { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow: hidden; }
.ai-log-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ai-log-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.ai-log-status { font-size: 12px; color: #00E5A0; font-weight: 700; }
.ai-log-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 240px; overflow-y: auto; padding-right: 4px; flex: 1; min-height: 0; }
.ai-log-list::-webkit-scrollbar { width: 6px; }
.ai-log-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
.ai-log-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.04); border-left: 2px solid rgba(91,157,255,.3); }
.ai-log-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; min-width: 54px; }
.ai-log-text { font-size: 12.5px; color: var(--text-primary); line-height: 1.5; white-space: pre-line; }
.ai-log-info { background: linear-gradient(90deg, rgba(91,157,255,.13), rgba(255,255,255,.03)); }
.ai-log-win { background: linear-gradient(90deg, rgba(0,229,160,.13), rgba(255,255,255,.03)); }
.ai-log-loss { background: linear-gradient(90deg, rgba(239,68,68,.13), rgba(255,255,255,.03)); }
.ai-log-warn { background: linear-gradient(90deg, rgba(245,158,11,.15), rgba(255,255,255,.03)); }
.ai-log-info .ai-log-time { color: #5b9dff; }
.ai-log-win .ai-log-time { color: #00E5A0; }
.ai-log-loss .ai-log-time { color: #ef4444; }
.ai-log-warn .ai-log-time { color: #F59E0B; }
.ai-empty-state { color: var(--text-muted); font-size: 13px; }
[data-theme="light"] .ai-summary-card,
[data-theme="light"] .ai-stats-card,
[data-theme="light"] .ai-log-card { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
[data-theme="light"] .ai-pill,
[data-theme="light"] .ai-stat-card,
[data-theme="light"] .ai-log-item { background: rgba(0,0,0,.04); }

/* ── Stop button ── */
.bulk-stop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 20px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  background: rgba(239,68,68,.18); color: #ef4444;
  transition: background .15s, transform .1s;
}
.bulk-stop-btn:hover { background: rgba(239,68,68,.32); transform: translateY(-1px); }
.bulk-stop-btn:active { transform: translateY(0); }

/* ══════════════════════════════════════════════════════════════════
   BULK TRADER — Live Analysis Panel  (.bqa-*)
   Detailed per-tick diagnostic display shown during continuous scan.
══════════════════════════════════════════════════════════════════ */

/* Panel container */
.bulk-analysis-summary {
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  padding: 0;
  overflow: hidden;
  margin-bottom: 6px;
}

/* Header row */
.bqa-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  flex-wrap: wrap;
}
.bqa-header-left  { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.bqa-header-right { display: flex; align-items: center; gap: 14px; font-size: 11px; color: var(--text-muted); }
.bqa-cycle  { font-size: 10px; background: rgba(139,92,246,.2); color: #a78bfa; border-radius: 4px; padding: 2px 7px; font-weight: 700; }
.bqa-sample strong, .bqa-last strong { color: var(--text-primary); }
.bqa-digit-badge {
  display: inline-block; width: 22px; height: 22px; line-height: 22px;
  text-align: center; border-radius: 6px; font-size: 13px; font-weight: 900;
  background: rgba(245,158,11,.2); color: #F59E0B;
}

/* Market snapshot row */
.bqa-snapshot-row {
  display: flex; flex-wrap: wrap; gap: 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0;
}
.bqa-snapshot-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px;
  border-right: 1px solid rgba(255,255,255,.05);
  min-width: 90px;
}
.bqa-snapshot-item:last-child { border-right: none; }
.bqa-snapshot-label { font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.bqa-snapshot-val   { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.bqa-pos { color: #00E5A0; }
.bqa-neg { color: #ef4444; }
.bqa-active { color: #F59E0B; }

/* Status badges */
.bqa-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.bqa-badge-ok       { background: rgba(0,229,160,.18);   color: #00E5A0; }
.bqa-badge-no       { background: rgba(239,68,68,.15);   color: #ef4444; }
.bqa-badge-scanning { background: rgba(245,158,11,.15);  color: #F59E0B; }

/* Two-column strategy grid */
.bqa-strat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
@media (max-width: 640px) { .bqa-strat-grid { grid-template-columns: 1fr; } }

.bqa-strat-panel {
  padding: 14px 16px;
  border-right: 1px solid rgba(255,255,255,.06);
}
.bqa-strat-panel:last-child { border-right: none; }

/* Strategy title row */
.bqa-strat-title {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.bqa-strat-badge {
  display: inline-block; padding: 3px 9px; border-radius: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.bqa-sbadge-differs { background: rgba(91,157,255,.18);  color: #5b9dff; }
.bqa-sbadge-ou      { background: rgba(245,158,11,.18);  color: #F59E0B; }

/* Meta row — small stats chips */
.bqa-strat-meta-row {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px;
  font-size: 11px; color: var(--text-muted);
}
.bqa-strat-meta-row strong { color: var(--text-primary); }

/* Digit frequency table */
.bqa-freq-table {
  width: 100%; border-collapse: collapse;
  font-size: 10px; margin-bottom: 10px;
}
.bqa-freq-table thead th {
  text-align: left; padding: 3px 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,.07);
}
.bqa-freq-table tbody td { padding: 2px 4px; vertical-align: middle; }
.bqa-d { font-weight: 900; font-size: 11px; color: var(--text-primary); width: 18px; text-align: center; }
.bqa-n { color: var(--text-primary); font-weight: 700; text-align: right; padding-right: 6px; }
.bqa-p { color: var(--text-muted); text-align: right; padding-right: 6px; }
.bqa-e { text-align: right; font-weight: 700; font-size: 9px; }
.bqa-hi { color: #F59E0B; }
.bqa-lo { color: #60a5fa; }

.bqa-bar-wrap { width: 80px; height: 6px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.bqa-bar      { height: 100%; border-radius: 3px; transition: width .3s; }

/* Confidence bar */
.bqa-conf-row   { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bqa-conf-title { font-size: 10px; font-weight: 700; color: var(--text-muted); white-space: nowrap; min-width: 72px; }
.bqa-conf-wrap  { flex: 1; height: 8px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; position: relative; }
.bqa-conf-bar   { height: 100%; border-radius: 4px; transition: width .4s ease; }
.bqa-conf-label { font-size: 11px; font-weight: 800; color: var(--text-primary); min-width: 32px; text-align: right; }

/* Signal / rejection feedback */
.bqa-signal-line {
  font-size: 11px; color: var(--text-muted); margin-bottom: 4px;
}
.bqa-signal-line strong { color: #00E5A0; font-size: 12px; }
.bqa-rejection {
  font-size: 10px; color: rgba(239,68,68,.8);
  background: rgba(239,68,68,.07); border-radius: 5px;
  padding: 5px 8px; margin-bottom: 4px; line-height: 1.45;
}
.bqa-rejection strong { color: #ef4444; }
.bqa-detail {
  font-size: 10px; color: var(--text-muted); margin-top: 4px;
}
.bqa-detail strong { color: var(--text-primary); }
.bqa-empty { font-size: 11px; color: var(--text-muted); padding: 8px 0; }

/* Over/Under score breakdown */
.bqa-ou-scores { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bqa-ou-score-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; background: rgba(255,255,255,.04);
  border-radius: 5px; padding: 4px 8px; flex: 1 1 120px;
}
.bqa-ou-label { color: var(--text-muted); font-size: 9px; letter-spacing: .03em; }
.bqa-ou-val   { font-weight: 800; font-size: 11px; color: var(--text-primary); }
.bqa-ou-votes { font-size: 9px; color: var(--text-muted); margin-left: auto; }

/* Light mode */
[data-theme="light"] .bulk-analysis-summary { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.07); }
[data-theme="light"] .bqa-header            { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .bqa-strat-panel       { border-color: rgba(0,0,0,.07); }
[data-theme="light"] .bqa-bar-wrap          { background: rgba(0,0,0,.08); }
[data-theme="light"] .bqa-conf-wrap         { background: rgba(0,0,0,.08); }
[data-theme="light"] .bqa-freq-table thead th { border-color: rgba(0,0,0,.09); }
[data-theme="light"] .bqa-rejection         { background: rgba(239,68,68,.06); }
[data-theme="light"] .bqa-ou-score-item     { background: rgba(0,0,0,.03); }
[data-theme="light"] .bulk-stop-btn         { background: rgba(239,68,68,.12); }

/* ─── Bulk Trader v4 additions ────────────────────────────────── */
/* Signal status pill */
.bulk-status-signal { background: rgba(0,229,160,.15); color: #00E5A0; }

/* Mode label in scanner header */
.bqa-mode-label {
  font-size: 10px; font-weight: 600;
  background: rgba(139,92,246,.15); color: #a78bfa;
  border-radius: 4px; padding: 2px 7px;
}

/* Single-strategy grid (one panel full-width) */
.bqa-strat-grid-single { grid-template-columns: 1fr !important; }

/* Signal-updated banner */
.bqa-signal-updated-banner {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  padding: 7px 12px;
  background: rgba(0,229,160,.10);
  border: 1px solid rgba(0,229,160,.25);
  border-radius: 7px;
  font-size: 11px; color: var(--text-secondary);
  animation: bqa-pulse-in .3s ease;
}
.bqa-signal-updated-banner svg { flex-shrink: 0; color: #00E5A0; }
.bqa-signal-updated-banner strong { color: var(--text-primary); }

@keyframes bqa-pulse-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* Light mode overrides for v4 elements */
[data-theme="light"] .bqa-signal-updated-banner { background: rgba(0,180,120,.07); border-color: rgba(0,180,120,.2); }


/* ═══════════════════════════════════════════════════════════════════════════
   AUTONIX REDESIGN V2 — Glassmorphism Nav, Mockup Hero, Dashboard, Footer,
   Animations, Accessibility, Cookie Consent, BQA-* fixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── GLASSMORPHISM NAVBAR ──────────────────────────────────────────────── */
.autonix-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(8,8,16,.78);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .3s, box-shadow .3s;
}
.autonix-navbar.nav-scrolled {
  background: rgba(8,8,16,.94);
  box-shadow: 0 4px 32px rgba(0,0,0,.4);
}
.navbar-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 0;
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 32px;
}
.nav-logo-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--color-brand,#FF444F), #c0001a);
  color: #fff;
  font-size: 11px; font-weight: 900; letter-spacing: -.5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.nav-logo-name {
  font-size: 17px; font-weight: 800;
  color: var(--text-primary,#fff);
  letter-spacing: -.3px;
}
.navbar-menu {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0; flex: 1;
}
.nav-group { position: relative; }
.nav-group-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer;
  padding: 8px 12px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.72);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-group-btn:hover, .nav-group.open .nav-group-btn {
  color: #fff; background: rgba(255,255,255,.06);
}
.nav-group-btn:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.nav-chevron { transition: transform .2s; flex-shrink: 0; opacity: .6; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }
.nav-dropdown {
  display: none;
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 224px;
  background: rgba(14,14,26,.97);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; padding: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  animation: dropdownIn .15s ease;
  z-index: 1001;
}
.nav-group.open .nav-dropdown { display: block; }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-drop-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  text-decoration: none;
  color: rgba(255,255,255,.72);
  transition: background .12s, color .12s;
}
.nav-drop-item:hover, .nav-drop-item.active {
  background: rgba(255,255,255,.06); color: #fff;
}
.nav-drop-item:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: -2px; }
.nav-drop-icon {
  width: 30px; height: 30px; border-radius: 7px;
  background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: rgba(255,255,255,.55);
}
.nav-drop-item:hover .nav-drop-icon, .nav-drop-item.active .nav-drop-icon {
  background: rgba(255,68,79,.15); color: var(--color-brand,#FF444F);
}
.nav-drop-label { font-size: 13px; font-weight: 600; line-height: 1.2; }
.nav-drop-desc  { font-size: 11px; color: rgba(255,255,255,.4); line-height: 1.3; margin-top: 1px; }
.navbar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; }
.nav-lang-btn {
  display: flex; align-items: center; gap: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.65); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.nav-lang-btn:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.nav-lang-btn:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 600;
  text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s; white-space: nowrap;
}
.nav-btn:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.nav-btn-ghost {
  color: rgba(255,255,255,.8);
  border-color: rgba(255,255,255,.15);
  background: transparent;
}
.nav-btn-ghost:hover { border-color: rgba(255,255,255,.4); color: #fff; background: rgba(255,255,255,.05); }
.nav-btn-filled {
  background: var(--color-brand,#FF444F);
  color: #fff; border-color: var(--color-brand,#FF444F);
}
.nav-btn-filled:hover { background: #e83840; border-color: #e83840; box-shadow: 0 4px 16px rgba(255,68,79,.35); }
.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 38px; height: 38px;
  background: none; border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; cursor: pointer; padding: 0;
  transition: border-color .15s;
}
.nav-hamburger:hover { border-color: rgba(255,255,255,.3); }
.nav-hamburger:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.nav-hamburger span {
  display: block; width: 18px; height: 1.5px;
  background: rgba(255,255,255,.8); border-radius: 2px;
}
.navbar-account-wrap { position: relative; }
.navbar-account-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 9px; padding: 5px 10px;
  cursor: pointer; font-size: 12px;
  color: rgba(255,255,255,.75);
  transition: background .15s, border-color .15s;
}
.navbar-account-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); color: #fff; }
.navbar-account-btn:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.navbar-account-avatar {
  width: 24px; height: 24px; border-radius: 6px;
  background: rgba(255,68,79,.25); color: var(--color-brand,#FF444F);
  font-size: 9px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.navbar-account-id { font-weight: 700; font-size: 12px; }
.navbar-account-tag { background: rgba(255,255,255,.08); border-radius: 4px; padding: 1px 5px; font-size: 10px; font-weight: 700; }
.navbar-account-dropdown {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px;
  background: rgba(14,14,26,.97);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  animation: dropdownIn .15s ease; z-index: 1002;
}
.navbar-account-btn[aria-expanded="true"] ~ .navbar-account-dropdown { display: block; }
.navbar-acct-opt {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-radius: 8px;
  text-decoration: none; font-size: 13px;
  color: rgba(255,255,255,.72);
  transition: background .12s; cursor: pointer;
  background: none; border: none; width: 100%; text-align: left; gap: 8px;
}
.navbar-acct-opt:hover { background: rgba(255,255,255,.06); color: #fff; }
.navbar-acct-opt.active { background: rgba(255,68,79,.1); color: #fff; }
.navbar-acct-tag { font-size: 10px; font-weight: 700; opacity: .55; }
.navbar-logout-opt { border-top: 1px solid rgba(255,255,255,.06); margin-top: 4px; padding-top: 12px; color: rgba(255,100,100,.8); }
.navbar-logout-opt:hover { color: #ff6b6b; }
/* Light theme nav */
[data-theme="light"] .autonix-navbar { background: rgba(255,255,255,.88); border-bottom-color: rgba(0,0,0,.08); }
[data-theme="light"] .autonix-navbar.nav-scrolled { background: rgba(255,255,255,.97); box-shadow: 0 4px 24px rgba(0,0,0,.08); }
[data-theme="light"] .nav-group-btn { color: rgba(0,0,0,.65); }
[data-theme="light"] .nav-group-btn:hover, [data-theme="light"] .nav-group.open .nav-group-btn { color: #000; background: rgba(0,0,0,.04); }
[data-theme="light"] .nav-logo-name { color: #111; }
[data-theme="light"] .nav-dropdown { background: rgba(255,255,255,.98); border-color: rgba(0,0,0,.1); box-shadow: 0 16px 48px rgba(0,0,0,.12); }
[data-theme="light"] .nav-drop-item { color: rgba(0,0,0,.72); }
[data-theme="light"] .nav-drop-item:hover { background: rgba(0,0,0,.04); color: #000; }
[data-theme="light"] .nav-drop-icon { background: rgba(0,0,0,.05); color: rgba(0,0,0,.5); }
[data-theme="light"] .nav-drop-desc { color: rgba(0,0,0,.4); }
[data-theme="light"] .nav-btn-ghost { color: rgba(0,0,0,.7); border-color: rgba(0,0,0,.2); }
[data-theme="light"] .nav-btn-ghost:hover { color: #000; background: rgba(0,0,0,.04); }
[data-theme="light"] .nav-lang-btn { color: rgba(0,0,0,.65); border-color: rgba(0,0,0,.18); }
[data-theme="light"] .nav-hamburger { border-color: rgba(0,0,0,.2); }
[data-theme="light"] .nav-hamburger span { background: rgba(0,0,0,.7); }
[data-theme="light"] .navbar-account-btn { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.7); }
[data-theme="light"] .navbar-account-dropdown { background: rgba(255,255,255,.98); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .navbar-acct-opt { color: rgba(0,0,0,.72); }

/* ─── MOBILE DRAWER ─────────────────────────────────────────────────────── */
.nav-drawer {
  position: fixed;
  top: 0; right: -320px;
  width: 300px; max-width: 85vw; height: 100dvh;
  background: rgba(10,10,20,.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255,255,255,.08);
  z-index: 1100;
  transition: right .3s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.nav-drawer.open { right: 0; }
.nav-drawer-inner { padding: 0 0 40px; }
.nav-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav-drawer-close {
  width: 32px; height: 32px;
  background: rgba(255,255,255,.06); border: none;
  border-radius: 7px; font-size: 18px; line-height: 1;
  color: rgba(255,255,255,.7); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.nav-drawer-close:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav-drawer-close:focus-visible { outline: 2px solid var(--color-brand,#FF444F); }
.nav-drawer-section { padding: 14px 10px 6px; }
.nav-drawer-label {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.32);
  padding: 0 8px; margin-bottom: 5px;
}
.nav-drawer-link {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 9px;
  text-decoration: none; font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,.72);
  transition: background .12s, color .12s;
}
.nav-drawer-link:hover, .nav-drawer-link.active { background: rgba(255,255,255,.06); color: #fff; }
.nav-drawer-link:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: -2px; }
.nav-drawer-link svg { flex-shrink: 0; opacity: .55; }
.nav-drawer-ctas { padding: 20px 18px 0; display: flex; flex-direction: column; gap: 8px; }
.nav-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 1050; opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.nav-drawer-backdrop.visible { opacity: 1; pointer-events: auto; }
[data-theme="light"] .nav-drawer { background: rgba(255,255,255,.98); border-left-color: rgba(0,0,0,.1); }
[data-theme="light"] .nav-drawer-label { color: rgba(0,0,0,.32); }
[data-theme="light"] .nav-drawer-link { color: rgba(0,0,0,.7); }
[data-theme="light"] .nav-drawer-link:hover { background: rgba(0,0,0,.04); color: #000; }
[data-theme="light"] .nav-drawer-close { background: rgba(0,0,0,.06); color: rgba(0,0,0,.6); }
@media (min-width: 769px) { .nav-hamburger { display: none !important; } }
@media (max-width: 768px) {
  .navbar-menu { display: none; }
  .nav-lang-btn { display: none; }
  .nav-btn { display: none; }
  .navbar-account-wrap { display: none; }
  .nav-hamburger { display: flex; }
}

/* ─── SITE FOOTER ───────────────────────────────────────────────────────── */
.site-footer {
  background: rgba(0,0,0,.55);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 64px 0 0;
  margin-top: 80px;
}
.footer-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.footer-main {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
@media (max-width: 1024px) { .footer-main { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } .footer-brand-col { grid-column: 1/-1; } }
@media (max-width: 640px)  { .footer-main { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 400px)  { .footer-main { grid-template-columns: 1fr; } }
.footer-brand-col { display: flex; flex-direction: column; gap: 14px; }
.footer-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.footer-tagline { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.5); max-width: 260px; }
.footer-social { display: flex; gap: 8px; }
.footer-social-link {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.5); text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.footer-social-link:hover { background: rgba(255,68,79,.15); border-color: rgba(255,68,79,.3); color: var(--color-brand,#FF444F); }
.footer-social-link:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.footer-payments { display: flex; flex-wrap: wrap; gap: 6px; }
.footer-pay-badge {
  font-size: 10px; font-weight: 800; letter-spacing: .05em;
  padding: 4px 9px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.5); background: rgba(255,255,255,.04);
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col-title {
  font-size: 12px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,.5); text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: #fff; }
.footer-links a:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; border-radius: 2px; }
.footer-lang-selector {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12); border-radius: 7px;
  font-size: 12px; color: rgba(255,255,255,.5);
  cursor: pointer; transition: border-color .15s, color .15s; user-select: none;
}
.footer-lang-selector:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.footer-lang-selector:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.footer-risk {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.4);
}
.footer-risk svg { flex-shrink: 0; margin-top: 2px; opacity: .6; }
.footer-risk p { font-size: 11px; line-height: 1.65; margin: 0; }
.footer-risk a { color: rgba(255,255,255,.6); text-decoration: underline; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding: 18px 0 30px;
}
.footer-copy { font-size: 12px; color: rgba(255,255,255,.38); }
.footer-copy a { color: rgba(255,255,255,.5); text-decoration: none; }
.footer-copy a:hover { color: #fff; }
.footer-bottom-links { display: flex; gap: 18px; }
.footer-bottom-links a { font-size: 12px; color: rgba(255,255,255,.38); text-decoration: none; transition: color .15s; }
.footer-bottom-links a:hover { color: rgba(255,255,255,.7); }
[data-theme="light"] .site-footer { background: rgba(0,0,0,.03); border-top-color: rgba(0,0,0,.08); }
[data-theme="light"] .footer-tagline, [data-theme="light"] .footer-col-title, [data-theme="light"] .footer-links a, [data-theme="light"] .footer-copy, [data-theme="light"] .footer-bottom-links a { color: rgba(0,0,0,.5); }
[data-theme="light"] .footer-links a:hover, [data-theme="light"] .footer-copy a:hover, [data-theme="light"] .footer-bottom-links a:hover { color: #000; }
[data-theme="light"] .footer-social-link { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); color: rgba(0,0,0,.5); }
[data-theme="light"] .footer-pay-badge { border-color: rgba(0,0,0,.12); color: rgba(0,0,0,.45); background: rgba(0,0,0,.03); }
[data-theme="light"] .footer-risk { color: rgba(0,0,0,.45); }
[data-theme="light"] .footer-lang-selector { color: rgba(0,0,0,.5); border-color: rgba(0,0,0,.18); }

/* ─── HERO DEVICE MOCKUP ────────────────────────────────────────────────── */
.hero-mockup {
  position: relative;
  width: 100%; max-width: 520px; flex-shrink: 0;
}
.mockup-browser {
  width: 100%; border-radius: 16px;
  background: rgba(14,14,26,.95);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 32px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  overflow: hidden;
}
.mockup-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mockup-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.mockup-dot.red    { background: #ff5f57; }
.mockup-dot.yellow { background: #febc2e; }
.mockup-dot.green  { background: #28c840; }
.mockup-url-bar {
  flex: 1; margin: 0 8px;
  background: rgba(255,255,255,.05); border-radius: 5px;
  padding: 3px 10px; font-size: 10px;
  color: rgba(255,255,255,.32); font-family: monospace;
}
.mockup-screen { display: flex; height: 280px; }
.mockup-sidebar {
  width: 42px; border-right: 1px solid rgba(255,255,255,.06);
  padding: 12px 8px; display: flex; flex-direction: column; gap: 8px;
  background: rgba(0,0,0,.2);
}
.msb-item { height: 28px; border-radius: 6px; background: rgba(255,255,255,.06); }
.msb-item.msb-active { background: rgba(255,68,79,.25); }
.mockup-content {
  flex: 1; padding: 14px;
  display: flex; flex-direction: column; gap: 12px; overflow: hidden;
}
.mc-chart {
  flex: 1; background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 10px; padding: 10px 12px;
  position: relative; overflow: hidden;
}
.mc-chart-line {
  position: absolute; inset: 10px 12px;
  border-radius: 0 0 0 6px;
  background: linear-gradient(135deg, transparent 0%, rgba(0,229,160,.05) 100%);
}
.mc-chart-line::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, rgba(0,229,160,.2), rgba(0,229,160,.6), rgba(0,229,160,.3));
}
.mc-bar-row {
  position: absolute; bottom: 8px; left: 12px; right: 12px;
  display: flex; align-items: flex-end; gap: 5px; height: 70%;
}
.mc-bar { flex: 1; background: rgba(0,229,160,.2); border-radius: 3px 3px 0 0; }
.mc-bar.mc-bar-hi { background: rgba(0,229,160,.55); }
.mc-stats { display: flex; gap: 8px; }
.mc-stat {
  flex: 1; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px; padding: 8px 10px;
}
.mc-stat-label { font-size: 9px; font-weight: 700; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.mc-stat-val { font-size: 13px; font-weight: 800; color: var(--text-primary,#fff); }
.mc-stat-val.green { color: #00E5A0; }
.mc-bots { display: flex; flex-direction: column; gap: 5px; }
.mc-bot-row { display: flex; align-items: center; gap: 7px; }
.mc-bot-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.mc-bot-dot.green { background: #00E5A0; box-shadow: 0 0 5px rgba(0,229,160,.6); }
.mc-bot-dot.amber { background: #F59E0B; box-shadow: 0 0 5px rgba(245,158,11,.6); }
.mc-bot-name { font-size: 11px; font-weight: 600; flex: 1; }
.mc-bot-status { font-size: 10px; color: rgba(255,255,255,.4); }
.mockup-float {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: rgba(14,14,26,.95);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 12px; padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  animation: floatPulse 3s ease-in-out infinite alternate;
}
.mockup-float-1 { bottom: 14%; left: -10%; }
.mockup-float-2 { top: 12%; right: -8%; animation-delay: 1.5s; }
@keyframes floatPulse { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.mf-icon { font-size: 22px; line-height: 1; }
.mf-val  { font-size: 14px; font-weight: 800; color: #00E5A0; line-height: 1.2; }
.mf-label{ font-size: 10px; color: rgba(255,255,255,.5); }
@media (max-width: 900px) { .mockup-float-1 { left: -4%; } .mockup-float-2 { right: -4%; } }
@media (max-width: 640px) { .hero-mockup { max-width: 100%; } .mockup-screen { height: 220px; } .mockup-float { display: none; } }

/* ─── HERO ROTATING HEADLINE ────────────────────────────────────────────── */
.hero-headline-rotate { transition: opacity .3s ease, transform .3s ease; }
.hero-headline-rotate.fading { opacity: 0; transform: translateY(-8px); }
.hero-headline-dots { display: flex; gap: 6px; margin-top: 12px; }
.hhl-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); transition: background .3s, width .3s, border-radius .3s; }
.hhl-dot.hhl-dot-active { background: var(--color-brand,#FF444F); width: 18px; border-radius: 3px; }

/* ─── HERO TRUST BADGES ─────────────────────────────────────────────────── */
.hero-trust-badges {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 4px; margin-top: 20px;
}
.htb-item { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,.44); }
.htb-item svg { color: rgba(255,255,255,.28); flex-shrink: 0; }
.htb-divider { width: 1px; height: 12px; background: rgba(255,255,255,.12); }
[data-theme="light"] .htb-item { color: rgba(0,0,0,.44); }
[data-theme="light"] .htb-item svg { color: rgba(0,0,0,.28); }
[data-theme="light"] .htb-divider { background: rgba(0,0,0,.12); }

/* ─── DASHBOARD ─────────────────────────────────────────────────────────── */
.dash-workspace { flex: 1; padding: 28px 32px 48px; overflow-y: auto; }
@media (max-width: 768px) { .dash-workspace { padding: 20px 16px 40px; } }
.dash-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.dash-topbar-right { display: flex; align-items: center; gap: 10px; }
.dash-title { font-size: clamp(22px,3vw,30px); font-weight: 800; margin: 0 0 4px; letter-spacing: -.4px; }
.dash-subtitle { font-size: 13px; color: var(--text-muted); margin: 0; }
.dash-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #00E5A0; box-shadow: 0 0 0 0 rgba(0,229,160,.4); animation: liveRing 2s infinite; flex-shrink: 0; }
@keyframes liveRing { 0% { box-shadow: 0 0 0 0 rgba(0,229,160,.4); } 70% { box-shadow: 0 0 0 6px rgba(0,229,160,0); } 100% { box-shadow: 0 0 0 0 rgba(0,229,160,0); } }
.dash-live-label { font-size: 11px; font-weight: 700; color: #00E5A0; }
.dash-bal-chip { display: flex; align-items: center; gap: 5px; background: rgba(0,229,160,.1); border: 1px solid rgba(0,229,160,.2); border-radius: 8px; padding: 5px 10px; font-size: 12px; font-weight: 700; color: #00E5A0; }
.dash-section { margin-bottom: 32px; }
.dash-section-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.dash-balance-card { background: var(--card-bg,rgba(255,255,255,.04)); border: 1px solid var(--border,rgba(255,255,255,.1)); border-radius: 18px; padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; transition: border-color .2s; }
.dash-balance-card:hover { border-color: rgba(0,229,160,.25); }
.dash-balance-card-left { display: flex; align-items: center; gap: 20px; }
.dash-balance-icon { width: 48px; height: 48px; border-radius: 14px; background: rgba(0,229,160,.1); border: 1px solid rgba(0,229,160,.2); display: flex; align-items: center; justify-content: center; color: #00E5A0; flex-shrink: 0; }
.dash-balance-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.dash-balance-amount { font-size: 30px; font-weight: 900; letter-spacing: -.5px; line-height: 1; color: var(--text-primary,#fff); }
.dash-balance-account { font-size: 12px; color: var(--text-muted); margin-top: 6px; }
.dash-accounts-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); gap: 12px; }
.dash-account-card { background: var(--card-bg,rgba(255,255,255,.03)); border: 1px solid var(--border,rgba(255,255,255,.08)); border-radius: 14px; padding: 16px 18px; text-decoration: none; display: block; transition: border-color .2s, background .2s, transform .2s; }
.dash-account-card:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.06); transform: translateY(-1px); }
.dash-account-card:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.dash-account-active { border-color: rgba(0,229,160,.35) !important; background: rgba(0,229,160,.06) !important; }
.dash-acct-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dash-acct-avatar { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,68,79,.18); color: var(--color-brand,#FF444F); font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.dash-acct-active-badge { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: rgba(0,229,160,.15); color: #00E5A0; border: 1px solid rgba(0,229,160,.3); padding: 2px 7px; border-radius: 99px; }
.dash-acct-switch-hint { font-size: 10px; font-weight: 600; color: rgba(255,255,255,.3); opacity: 0; transition: opacity .15s; }
.dash-account-card:hover .dash-acct-switch-hint { opacity: 1; }
.dash-acct-id { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.dash-acct-type { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.dash-nav-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(148px,1fr)); gap: 12px; }
.dash-nav-tile { background: var(--card-bg,rgba(255,255,255,.03)); border: 1px solid var(--border,rgba(255,255,255,.08)); border-radius: 16px; padding: 20px; text-decoration: none; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; position: relative; overflow: hidden; }
.dash-nav-tile:hover { border-color: var(--tile-color,rgba(255,255,255,.3)); background: var(--tile-bg,rgba(255,255,255,.06)); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.2); }
.dash-nav-tile:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.dash-nav-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--tile-bg,rgba(255,255,255,.07)); color: var(--tile-color,rgba(255,255,255,.7)); display: flex; align-items: center; justify-content: center; }
.dash-nav-label { font-size: 14px; font-weight: 700; color: var(--text-primary,#fff); }
.dash-nav-desc { font-size: 11px; color: var(--text-muted); line-height: 1.4; }
.dash-nav-arrow { position: absolute; top: 18px; right: 18px; opacity: 0; color: var(--tile-color,rgba(255,255,255,.5)); transition: opacity .15s, transform .15s; }
.dash-nav-tile:hover .dash-nav-arrow { opacity: 1; transform: translateX(2px); }
.dash-unauth { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.dash-unauth-card { text-align: center; max-width: 420px; padding: 48px 40px; background: var(--card-bg,rgba(255,255,255,.03)); border: 1px solid var(--border,rgba(255,255,255,.1)); border-radius: 24px; }
.dash-unauth-icon { width: 72px; height: 72px; border-radius: 18px; background: rgba(255,68,79,.1); border: 1px solid rgba(255,68,79,.2); color: var(--color-brand,#FF444F); display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.dash-unauth-card h2 { font-size: 22px; font-weight: 800; margin: 0 0 12px; }
.dash-unauth-card p { font-size: 14px; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ─── ANIMATIONS & MICRO-INTERACTIONS ───────────────────────────────────── */
.anim-fade-up { opacity: 0; transform: translateY(24px); transition: opacity .55s ease, transform .55s ease; }
.anim-fade-up.in-view { opacity: 1; transform: translateY(0); }
.anim-fade-up:nth-child(2) { transition-delay: .08s; }
.anim-fade-up:nth-child(3) { transition-delay: .16s; }
.anim-fade-up:nth-child(4) { transition-delay: .24s; }
.anim-fade-up:nth-child(5) { transition-delay: .32s; }
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.25); }
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hover-lift:hover { transform: none; }
  .mockup-float { animation: none !important; }
  .hero-headline-rotate { transition: none !important; }
}

/* ─── COOKIE CONSENT BANNER ─────────────────────────────────────────────── */
.cookie-banner {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 9998; width: calc(100% - 32px); max-width: 620px;
  background: rgba(14,14,26,.97);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.13); border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  animation: cookieSlideUp .4s ease;
}
@keyframes cookieSlideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
.cookie-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
.cookie-banner-text { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: rgba(255,255,255,.65); flex: 1; min-width: 200px; }
.cookie-banner-text svg { flex-shrink: 0; margin-top: 1px; color: rgba(255,255,255,.4); }
.cookie-link { color: rgba(255,255,255,.75); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.cookie-btn { padding: 8px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: all .15s; white-space: nowrap; }
.cookie-btn:focus-visible { outline: 2px solid var(--color-brand,#FF444F); outline-offset: 2px; }
.cookie-btn-reject { background: none; border-color: rgba(255,255,255,.15); color: rgba(255,255,255,.55); }
.cookie-btn-reject:hover { border-color: rgba(255,255,255,.3); color: #fff; }
.cookie-btn-accept { background: var(--color-brand,#FF444F); border-color: var(--color-brand,#FF444F); color: #fff; }
.cookie-btn-accept:hover { background: #e83840; box-shadow: 0 4px 14px rgba(255,68,79,.35); }
[data-theme="light"] .cookie-banner { background: rgba(255,255,255,.98); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .cookie-banner-text { color: rgba(0,0,0,.65); }
[data-theme="light"] .cookie-link { color: rgba(0,0,0,.8); }
[data-theme="light"] .cookie-btn-reject { color: rgba(0,0,0,.55); border-color: rgba(0,0,0,.2); }
[data-theme="light"] .cookie-btn-reject:hover { color: #000; }
@media (max-width: 480px) { .cookie-banner { bottom: 12px; border-radius: 12px; } .cookie-banner-inner { flex-direction: column; } .cookie-banner-actions { width: 100%; } .cookie-btn { flex: 1; text-align: center; } }

/* ─── MISSING BQA-* CLASSES (Bulk Trader live panel) ───────────────────── */
.bqa-mode-label { font-size: 10px; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 5px; padding: 2px 8px; color: var(--text-muted); margin-left: 2px; }
.bqa-signal-updated-banner { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #F59E0B; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.25); border-radius: 7px; padding: 7px 12px; margin: 8px 0; }
.bqa-signal-updated-banner svg { flex-shrink: 0; }
.bqa-signal-line { font-size: 12px; color: var(--text-primary); margin: 6px 0 2px; }
.bqa-signal-line strong { color: #00E5A0; }
.bqa-detail { font-size: 11px; color: var(--text-muted); margin: 3px 0; line-height: 1.45; }
.bqa-detail strong { color: var(--text-primary); }
.bqa-rejection { font-size: 11px; color: rgba(239,68,68,.8); background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15); border-radius: 6px; padding: 7px 10px; margin: 4px 0; }
.bqa-empty { font-size: 11px; color: rgba(255,255,255,.3); font-style: italic; padding: 8px 0; }
.bqa-strat-grid-single { grid-template-columns: 1fr !important; max-width: 400px; }
.bulk-status-signal { background: rgba(0,229,160,.12); color: #00E5A0; border-color: rgba(0,229,160,.3); }
.bqa-status-txt { font-weight: 800; }

/* ─── ACCESSIBILITY — FOCUS STATES ─────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-brand,#FF444F);
  outline-offset: 2px;
}
.skip-link {
  position: absolute; top: -40px; left: 8px; z-index: 99999;
  background: var(--color-brand,#FF444F); color: #fff;
  padding: 8px 16px; border-radius: 0 0 8px 8px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   AUTONIX VISUAL ENHANCEMENT — Ecosystem V2, glow upgrades, overall polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ECOSYSTEM CONTAINER — enhanced ───────────────────────────────────── */
.ecosystem-container {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: 560px;
  flex-shrink: 0;
}

/* Ambient glow background — two-tone radial */
.ecosystem-glow-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%,
      rgba(0,229,160,.13) 0%,
      rgba(187,134,252,.07) 50%,
      transparent 75%),
    radial-gradient(ellipse 40% 35% at 50% 45%,
      rgba(255,68,79,.07) 0%,
      transparent 60%);
  pointer-events: none;
  animation: ecoBgPulse 6s ease-in-out infinite alternate;
  filter: blur(24px);
}
@keyframes ecoBgPulse {
  from { opacity: .7; transform: scale(.97); }
  to   { opacity: 1;  transform: scale(1.03); }
}

/* SVG connection lines — animated dash draw */
.ecosystem-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.connection-line {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawLine 1.6s ease forwards, linePulse 3s ease-in-out 1.6s infinite alternate;
}
.line-1 { animation-delay: .1s, 1.7s; }
.line-2 { animation-delay: .2s, 1.8s; }
.line-3 { animation-delay: .4s, 2.0s; }
.line-4 { animation-delay: .4s, 2.0s; }
.line-5 { animation-delay: .7s, 2.3s; }
.line-6 { animation-delay: .7s, 2.3s; }
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
@keyframes linePulse {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* ─── HUB NODE ──────────────────────────────────────────────────────────── */
.hub-node {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  width: 90px; height: 90px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 4;
}
.hub-core {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(0,229,160,.35) 0%,
    rgba(0,229,160,.12) 50%,
    rgba(187,134,252,.08) 100%);
  border: 1.5px solid rgba(0,229,160,.45);
  box-shadow:
    0 0 20px rgba(0,229,160,.25),
    inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}
.hub-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(0,229,160,.2);
  animation: hubRingSpin 8s linear infinite;
}
.hub-ring-outer {
  inset: -8px;
  border-color: rgba(187,134,252,.15);
  animation-duration: 12s;
  animation-direction: reverse;
}
.hub-ring-mid {
  inset: -2px;
  border-color: rgba(0,229,160,.2);
  animation-duration: 6s;
}
@keyframes hubRingSpin { to { transform: rotate(360deg); } }
.hub-icon {
  position: relative;
  z-index: 2;
  font-size: 26px;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(0,229,160,.5));
}
.hub-label {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(0,229,160,.85);
  text-shadow: 0 0 8px rgba(0,229,160,.5);
}

/* ─── FEATURE NODES ─────────────────────────────────────────────────────── */
.feature-node {
  position: absolute;
  z-index: 5;
  animation: nodeFloat 4s ease-in-out infinite alternate;
}
.node-top-left  { top: 5%;  left: 5%;  animation-delay: 0s; }
.node-top-right { top: 5%;  right: 5%; animation-delay: .8s; }
.node-left      { top: 40%; left: -4%; animation-delay: 1.6s; }
.node-right     { top: 40%; right: -4%;animation-delay: .4s; }
.node-bottom    { bottom: 2%;left: 50%;transform: translateX(-50%); animation-delay: 1.2s; }

@keyframes nodeFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}
.node-bottom { animation-name: nodeFloatBottom; }
@keyframes nodeFloatBottom {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-10px); }
}

.node-card {
  background: rgba(12,12,22,.85);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  padding: 14px 16px;
  min-width: 138px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0,0,0,.45),
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 .5px rgba(255,255,255,.04);
  transition: border-color .3s, box-shadow .3s, transform .2s;
  cursor: default;
}
.node-card:hover {
  border-color: rgba(0,229,160,.35);
  box-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 0 20px rgba(0,229,160,.12),
    0 1px 0 rgba(255,255,255,.1) inset;
  transform: scale(1.04);
}
.node-icon {
  font-size: 22px;
  line-height: 1;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 6px rgba(0,229,160,.4));
}
.node-card h4 {
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 4px;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.2;
}
.node-card p {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  margin: 0;
  line-height: 1.4;
}

/* ─── STATS CARDS ───────────────────────────────────────────────────────── */
.stats-card {
  position: absolute;
  z-index: 6;
  background: rgba(10,10,20,.9);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 12px 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 8px 32px rgba(0,0,0,.5),
    0 0 0 .5px rgba(255,255,255,.04) inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 88px;
  animation: nodeFloat 5s ease-in-out infinite alternate;
}
.stats-card-1 {
  top: 30%; right: -6%;
  animation-delay: .5s;
  border-color: rgba(0,229,160,.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 18px rgba(0,229,160,.1);
}
.stats-card-2 {
  bottom: 20%; left: -4%;
  animation-delay: 1.8s;
  border-color: rgba(187,134,252,.2);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 18px rgba(187,134,252,.1);
}
.stat-icon { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.stat-label { font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.stat-value { font-size: 18px; font-weight: 900; letter-spacing: -.5px; color: #fff; line-height: 1.1; }
.stats-card-1 .stat-value { color: #00E5A0; text-shadow: 0 0 12px rgba(0,229,160,.4); }
.stats-card-2 .stat-value { color: #BB86FC; text-shadow: 0 0 12px rgba(187,134,252,.4); }

/* ─── HERO SECTION overall polish ───────────────────────────────────────── */
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 92vh;
  display: flex;
  align-items: center;
}
.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 48px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 100px 48px 80px;
  width: 100%;
}
@media (max-width: 960px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; padding: 80px 24px; }
  .ecosystem-container { margin: 0 auto; }
  .hero-visual { display: flex; justify-content: center; }
}

/* ─── HERO HEADLINE polish ───────────────────────────────────────────────── */
.hero-subheadline-main {
  font-size: clamp(38px, 5.5vw, 72px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1.5px;
  color: #fff;
  margin: 0 0 20px;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-brand, #FF444F);
  margin-bottom: 20px;
}

/* ─── JOURNAL TEASER SECTION — enhanced card ─────────────────────────────── */
.journal-teaser-section {
  position: relative;
  overflow: hidden;
}
.journal-teaser-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(255,68,79,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 60% at 80% 50%, rgba(0,229,160,.05) 0%, transparent 60%);
  pointer-events: none;
}
.jt-tp-card {
  background: rgba(10,10,20,.9);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 24px 64px rgba(0,0,0,.55),
    0 0 0 .5px rgba(255,255,255,.04) inset,
    0 0 40px rgba(0,229,160,.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: border-color .3s, box-shadow .3s;
}
.jt-tp-card:hover {
  border-color: rgba(0,229,160,.2);
  box-shadow:
    0 32px 80px rgba(0,0,0,.6),
    0 0 40px rgba(0,229,160,.1);
}
.jt-tp-header {
  padding: 18px 24px 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.85);
}
.jt-tp-table {
  width: 100%;
  border-collapse: collapse;
}
.jt-tp-table thead tr {
  background: rgba(255,255,255,.02);
}
.jt-tp-table th {
  padding: 10px 24px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.jt-tp-table td {
  padding: 11px 24px;
  font-size: 13px;
  color: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.jt-tp-table tr:hover td { background: rgba(255,255,255,.03); }
.jt-tp-table tr:last-child td { border-bottom: none; }
.jt-tp-val {
  font-weight: 800;
  color: #00E5A0;
  text-shadow: 0 0 10px rgba(0,229,160,.3);
}
.jt-tp-footer {
  padding: 14px 24px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.35);
  letter-spacing: .04em;
  background: rgba(255,255,255,.02);
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center;
}

/* Journal teaser left column */
.journal-teaser-left h2 {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 900;
  letter-spacing: -.5px;
  margin: 0 0 16px;
  line-height: 1.15;
}
.journal-teaser-left p {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255,255,255,.6);
  margin-bottom: 28px;
}
[data-theme="light"] .journal-teaser-left p { color: rgba(0,0,0,.6); }
.jt-pillar {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.jt-pillar:last-child { border-bottom: none; }
.jt-pillar-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
  filter: drop-shadow(0 0 6px rgba(0,229,160,.35));
}
.jt-pillar strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 3px;
}
.jt-pillar span {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  line-height: 1.5;
}
[data-theme="light"] .jt-pillar strong { color: #111; }
[data-theme="light"] .jt-pillar span { color: rgba(0,0,0,.5); }
.journal-teaser-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-brand, #FF444F);
  background: rgba(255,68,79,.08);
  border: 1px solid rgba(255,68,79,.2);
  border-radius: 99px;
  padding: 5px 12px;
  margin-bottom: 16px;
}
[data-theme="light"] .jt-tp-card { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .jt-tp-header { color: rgba(0,0,0,.8); background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .jt-tp-table th { color: rgba(0,0,0,.4); border-color: rgba(0,0,0,.06); }
[data-theme="light"] .jt-tp-table td { color: rgba(0,0,0,.65); border-color: rgba(0,0,0,.04); }
[data-theme="light"] .jt-tp-footer { color: rgba(0,0,0,.4); background: rgba(0,0,0,.02); }
[data-theme="light"] .node-card { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.12); }
[data-theme="light"] .node-card h4 { color: #111; }
[data-theme="light"] .node-card p { color: rgba(0,0,0,.5); }
[data-theme="light"] .stats-card { background: rgba(255,255,255,.9); border-color: rgba(0,0,0,.1); }

/* ─── GLOBAL PAGE POLISH ────────────────────────────────────────────────── */
/* Subtle grain texture overlay on body */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9990;
  opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* Better section separators */
.features-section,
.bots-preview-section,
.pricing-section {
  position: relative;
}
.features-section::before,
.bots-preview-section::before,
.pricing-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  max-width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}

/* Section headings upgrade */
.section-title {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.1;
}
.section-subtitle {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.55);
  max-width: 520px;
  margin: 0 auto;
}
[data-theme="light"] .section-subtitle { color: rgba(0,0,0,.55); }

/* Feature cards glow on hover */
.feature-card,
.pricing-card,
.bot-card {
  transition: border-color .25s, box-shadow .25s, transform .2s;
}
.feature-card:hover,
.bot-card:hover {
  border-color: rgba(0,229,160,.2) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 0 20px rgba(0,229,160,.07) !important;
  transform: translateY(-3px);
}
.pricing-card:hover {
  border-color: rgba(255,68,79,.25) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 0 24px rgba(255,68,79,.08) !important;
  transform: translateY(-4px);
}

/* ─── REDUCED MOTION ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .connection-line { animation: none; stroke-dashoffset: 0; }
  .hub-ring { animation: none; }
  .feature-node, .stats-card { animation: none; }
  .ecosystem-glow-bg { animation: none; }
  .node-card:hover { transform: none; }
}


/* ═══ HERO GAP FIX + 6-CARD BALANCED LAYOUT ════════════════════════════════
   Removes the dead space above hero content (padding-top was for old fixed
   nav; navbar is now sticky so no offset is needed).
   Rearranges the 6 remaining floating cards into a symmetric 2×3 grid.
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Kill the top gap ───────────────────────────────────────────────────── */
#hero {
  padding-top: 0 !important;
}
.hero {
  min-height: auto !important;
  /* Keep vertical rhythm but remove the giant 100vh lock */
  padding-top: 24px !important;
  padding-bottom: 48px !important;
}
/* Reset the erroneous 100px top padding I added in the previous revision */
.hero-content {
  padding-top: 24px !important;
  padding-bottom: 32px !important;
}

/* ─── 6-card symmetric 2×3 layout ───────────────────────────────────────── */
/*
  Column layout around the hub (hub ≈ 50% × 50%):

  LEFT                           RIGHT
  ┌─────────────────────────────────────────┐
  │  [Real-Time Exec]    [Precision Trading] │  ← row 1 (top)
  │                                         │
  │  [Risk Mgmt]    ●HUB●   [Multi-Bot Sync]│  ← row 2 (mid)
  │                                         │
  │  [24/7 Automation]    [Daily Trades 12k+]│ ← row 3 (bot)
  └─────────────────────────────────────────┘
*/

/* Row 1 */
.node-top-left  { top: 2%  !important; left:  3% !important; right: auto !important; }
.node-top-right { top: 2%  !important; right: 3% !important; left:  auto !important; }

/* Row 2 */
.node-left      { top: 42% !important; left: -2% !important; right: auto !important; }
.node-right     { top: 42% !important; right:-2% !important; left:  auto !important; }

/* Row 3 — 24/7 Automation: moves from centre-bottom to left-bottom */
.node-bottom {
  bottom: 3%   !important;
  left:   4%   !important;
  right:  auto !important;
  /* Remove the centring transform — no longer centre-positioned */
  transform: none !important;
  /* Use the same float animation as the other nodes */
  animation-name: nodeFloat !important;
}

/* Row 3 — Daily Trades 12k+: moves to right-bottom */
.stats-card-2 {
  bottom: 3%  !important;
  right:  3%  !important;
  top:    auto !important;
  left:   auto !important;
  /* Re-apply the purple glow that was on stats-card-2 */
  border-color: rgba(187,134,252,.22) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 18px rgba(187,134,252,.12) !important;
}

/* ─── Responsive tweaks ───────────────────────────────────────────────────── */
/* Tablet: tighten insets so cards don't clip viewport edges */
@media (max-width: 1100px) {
  .node-top-left  { left:  1% !important; }
  .node-top-right { right: 1% !important; }
  .node-left      { left:  0  !important; }
  .node-right     { right: 0  !important; }
  .node-bottom    { left:  1% !important; }
  .stats-card-2   { right: 1% !important; }
}

/* Mobile: stack hero columns, collapse ecosystem to fit */
@media (max-width: 768px) {
  .hero {
    padding-top: 16px !important;
    padding-bottom: 32px !important;
  }
  .hero-content {
    padding-top: 16px !important;
  }
  .ecosystem-container {
    height: 440px !important;
    max-width: 360px !important;
  }
  .node-top-left  { left:  0 !important; }
  .node-top-right { right: 0 !important; }
  .node-left      { left:  -1% !important; }
  .node-right     { right: -1% !important; }
  .node-bottom    { left:  0  !important; bottom: 2% !important; }
  .stats-card-2   { right: 0  !important; bottom: 2% !important; }
  .node-card      { min-width: 120px !important; padding: 10px 12px !important; }
  .node-card h4   { font-size: 11px !important; }
}


/* ═══════════════════════════════════════════════════════════════════
   tp-celebration.css — Take Profit celebration modal
   ═══════════════════════════════════════════════════════════════════ */

/* ── Overlay ────────────────────────────────────────────────────── */
.tpc-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.tpc-overlay.tpc-visible {
  opacity: 1;
  pointer-events: all;
}
.tpc-overlay.tpc-leaving {
  opacity: 0;
  pointer-events: none;
}

/* ── Confetti canvas ────────────────────────────────────────────── */
.tpc-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Modal ──────────────────────────────────────────────────────── */
.tpc-modal {
  position: relative;
  z-index: 1;
  background: linear-gradient(145deg,
    rgba(15, 20, 30, .97) 0%,
    rgba(10, 25, 20, .97) 100%);
  border: 1px solid rgba(0, 229, 160, .30);
  border-radius: 24px;
  padding: 44px 40px 36px;
  max-width: 440px;
  width: calc(100vw - 48px);
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(0,229,160,.08),
    0 24px 80px rgba(0, 0, 0, .7),
    0 0 60px rgba(0, 229, 160, .10),
    inset 0 1px 0 rgba(255,255,255,.06);
  transform: scale(.82) translateY(24px);
  opacity: 0;
  transition: transform .42s cubic-bezier(.34, 1.52, .64, 1),
              opacity .35s ease;
}
.tpc-overlay.tpc-visible .tpc-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}
.tpc-overlay.tpc-leaving .tpc-modal {
  transform: scale(.9) translateY(-16px);
  opacity: 0;
}

/* ── Close × button ────────────────────────────────────────────── */
.tpc-close {
  position: absolute;
  top: 16px;
  right: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
  transition: background .2s, color .2s;
}
.tpc-close:hover { background: rgba(255,255,255,.14); color: #fff; }

/* ── Trophy ────────────────────────────────────────────────────── */
.tpc-trophy-wrap {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tpc-trophy-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(0,229,160,.30);
  animation: tpcRingPulse 2s ease-out infinite;
}
.tpc-ring2 {
  inset: -10px;
  border-color: rgba(0,229,160,.15);
  animation-delay: .5s;
}
@keyframes tpcRingPulse {
  0%   { transform: scale(1);   opacity: .8; }
  80%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1);   opacity: 0; }
}
.tpc-trophy-icon {
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 0 16px rgba(0,229,160,.6));
  animation: tpcTrophyBounce .6s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: .18s;
}
@keyframes tpcTrophyBounce {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Badge ──────────────────────────────────────────────────────── */
.tpc-badge {
  display: inline-block;
  background: rgba(0, 229, 160, .12);
  border: 1px solid rgba(0, 229, 160, .28);
  color: #00E5A0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}

/* ── Heading ────────────────────────────────────────────────────── */
.tpc-title {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -.3px;
  line-height: 1.2;
}

/* ── Subtitle ───────────────────────────────────────────────────── */
.tpc-sub {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  line-height: 1.6;
  margin: 0 0 24px;
}

/* ── Profit box ─────────────────────────────────────────────────── */
.tpc-profit-box {
  background: rgba(0, 229, 160, .07);
  border: 1px solid rgba(0, 229, 160, .20);
  border-radius: 14px;
  padding: 18px 24px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tpc-profit-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.45);
}
.tpc-profit-value {
  font-size: 38px;
  font-weight: 900;
  color: #00E5A0;
  letter-spacing: -1px;
  text-shadow: 0 0 24px rgba(0,229,160,.50);
  animation: tpcProfitPop .5s cubic-bezier(.34,1.52,.64,1) both;
  animation-delay: .35s;
}
@keyframes tpcProfitPop {
  0%   { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

/* ── Progress bar (auto-dismiss countdown) ──────────────────────── */
.tpc-progress-wrap {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 8px;
}
.tpc-progress-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #00E5A0, #00c47a);
  border-radius: 100px;
  transform-origin: left;
  transition: width .1s linear;
}
.tpc-dismiss-hint {
  font-size: 11px;
  color: rgba(255,255,255,.30);
  margin: 0 0 20px;
}

/* ── CTA button ─────────────────────────────────────────────────── */
.tpc-btn-close {
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #00E5A0 0%, #00b87a 100%);
  color: #051510;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: .4px;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 4px 20px rgba(0,229,160,.35);
}
.tpc-btn-close:hover { opacity: .9; transform: translateY(-1px); }
.tpc-btn-close:active { transform: translateY(0); }

/* ── Mobile ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .tpc-modal { padding: 36px 24px 28px; }
  .tpc-profit-value { font-size: 30px; }
  .tpc-title { font-size: 22px; }
}