/* ═══════════════════════════════════════════════════════════════════
   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;
  }
}