/* BLACK BOT 9 — THEME SYSTEM */
:root {
  --bg-primary: #f8f6ff;
  --bg-secondary: #ffffff;
  --bg-card: #ffffff;
  --bg-nav: #ffffffee;
  --bg-input: #f0eeff;
  --bg-hover: #f0e8ff;
  --text-primary: #111111;
  --text-secondary: #444444;
  --text-muted: #777777;
  --border-color: #e0d8f0;
  --border-card: #e0d8f0;
  --shadow: 0 2px 12px rgba(124,58,237,0.08);
}

[data-theme="dark"] {
  --bg-primary: #03050a;
  --bg-secondary: #080e16;
  --bg-card: #080e16;
  --bg-nav: #03050aee;
  --bg-input: #0d1520;
  --bg-hover: #0d1520;
  --text-primary: #ffffff;
  --text-secondary: #c8d8e8;
  --text-muted: #4a6080;
  --border-color: #1a2840;
  --border-card: #1a2840;
  --shadow: 0 2px 12px rgba(0,0,0,0.4);
}

body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
  transition: background 0.3s, color 0.3s;
}

.nav, nav {
  background: var(--bg-nav) !important;
  border-bottom-color: var(--border-color) !important;
}

/* CARDS */
.hub, .agent-card, .plan, .pc, .proof-item,
.hub-card,
[class*="card"], [class*="panel"] {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
  box-shadow: var(--shadow) !important;
}
/* Signal and scan cards — preserve bull/bear gradient backgrounds */
.signal-card, .scan-card {
  border-color: var(--border-card) !important;
  box-shadow: var(--shadow) !important;
}
.signal-card.bull {
  background: linear-gradient(160deg,rgba(0,230,118,0.05) 0%,var(--bg-card) 40%) !important;
  border-top: 3px solid var(--green) !important;
}
.signal-card.bear {
  background: linear-gradient(160deg,rgba(255,61,87,0.05) 0%,var(--bg-card) 40%) !important;
  border-top: 3px solid var(--red) !important;
}
html[data-theme="light"] .scan-btn { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
html[data-theme="light"] .scan-btn-name { color: #0f172a !important; }
html[data-theme="light"] .scan-btn-desc { color: #475569 !important; }
html[data-theme="light"] .signal-card.bull {
  background: linear-gradient(160deg,rgba(16,185,129,0.08) 0%,#ffffff 40%) !important;
}
html[data-theme="light"] .signal-card.bear {
  background: linear-gradient(160deg,rgba(239,68,68,0.08) 0%,#ffffff 40%) !important;
}
/* Exclude hub settings panel and overlay from theme card override */
.settings-panel, .settings-overlay {
  background: unset !important;
  border-color: unset !important;
  box-shadow: unset !important;
}
/* Force overlay positioning — prevent theme.css from breaking it */
.settings-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  justify-content: flex-end !important;
  background: rgba(0,0,0,0.7) !important;
}
.settings-overlay.open {
  display: flex !important;
}
.settings-panel {
  position: relative !important;
  width: min(380px, 100vw) !important;
  height: 100% !important;
  overflow-y: auto !important;
  z-index: 100000 !important;
}
/* Dark theme settings panel */
[data-theme="dark"] .settings-panel {
  background: #0d1625 !important;
  color: #e8f0f8 !important;
}
[data-theme="dark"] .settings-panel .settings-title,
[data-theme="dark"] .settings-panel .settings-section-title,
[data-theme="dark"] .settings-panel .setting-label,
[data-theme="dark"] .settings-panel .toggle-label {
  color: #e8f0f8 !important;
}
[data-theme="dark"] .settings-panel p,
[data-theme="dark"] .settings-panel span {
  color: #7a9ab8 !important;
}
[data-theme="dark"] .settings-panel b {
  color: #ffffff !important;
}
[data-theme="dark"] .settings-panel .num-input,
[data-theme="dark"] .settings-panel input[type="number"] {
  background: #111d30 !important;
  color: #ffffff !important;
  border-color: #1a2a40 !important;
}
/* Light theme settings panel */
[data-theme="light"] .settings-panel {
  background: #ffffff !important;
  color: #111111 !important;
}
[data-theme="light"] .settings-panel .settings-title,
[data-theme="light"] .settings-panel .settings-section-title,
[data-theme="light"] .settings-panel .setting-label,
[data-theme="light"] .settings-panel .toggle-label {
  color: #111111 !important;
}
[data-theme="light"] .settings-panel p,
[data-theme="light"] .settings-panel span {
  color: #475569 !important;
}
[data-theme="light"] .settings-panel b {
  color: #111111 !important;
}
[data-theme="light"] .settings-panel .num-input,
[data-theme="light"] .settings-panel input[type="number"] {
  background: #f4f6f9 !important;
  color: #111111 !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .settings-panel .save-btn {
  background: #0ea5e9 !important;
  color: #ffffff !important;
}
/* Mobile — full width bottom sheet */
@media(max-width:768px) {
  .settings-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .settings-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 85vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
}
/* Force overlay positioning — prevent theme.css from breaking it */
.settings-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  justify-content: flex-end !important;
  background: rgba(0,0,0,0.7) !important;
}
.settings-overlay.open {
  display: flex !important;
}
.settings-panel {
  position: relative !important;
  width: min(380px, 100vw) !important;
  height: 100% !important;
  overflow-y: auto !important;
  z-index: 100000 !important;
}
/* Dark theme settings panel */
[data-theme="dark"] .settings-panel {
  background: #0d1625 !important;
  color: #e8f0f8 !important;
}
[data-theme="dark"] .settings-panel .settings-title,
[data-theme="dark"] .settings-panel .settings-section-title,
[data-theme="dark"] .settings-panel .setting-label,
[data-theme="dark"] .settings-panel .toggle-label {
  color: #e8f0f8 !important;
}
[data-theme="dark"] .settings-panel p,
[data-theme="dark"] .settings-panel span {
  color: #7a9ab8 !important;
}
[data-theme="dark"] .settings-panel b {
  color: #ffffff !important;
}
[data-theme="dark"] .settings-panel .num-input,
[data-theme="dark"] .settings-panel input[type="number"] {
  background: #111d30 !important;
  color: #ffffff !important;
  border-color: #1a2a40 !important;
}
/* Light theme settings panel */
[data-theme="light"] .settings-panel {
  background: #ffffff !important;
  color: #111111 !important;
}
[data-theme="light"] .settings-panel .settings-title,
[data-theme="light"] .settings-panel .settings-section-title,
[data-theme="light"] .settings-panel .setting-label,
[data-theme="light"] .settings-panel .toggle-label {
  color: #111111 !important;
}
[data-theme="light"] .settings-panel p,
[data-theme="light"] .settings-panel span {
  color: #475569 !important;
}
[data-theme="light"] .settings-panel b {
  color: #111111 !important;
}
[data-theme="light"] .settings-panel .num-input,
[data-theme="light"] .settings-panel input[type="number"] {
  background: #f4f6f9 !important;
  color: #111111 !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .settings-panel .save-btn {
  background: #0ea5e9 !important;
  color: #ffffff !important;
}
/* Mobile — full width bottom sheet */
@media(max-width:768px) {
  .settings-overlay {
    align-items: flex-end !important;
    justify-content: center !important;
  }
  .settings-panel {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 85vh !important;
    border-radius: 16px 16px 0 0 !important;
  }
}
/* Force settings panel readable in both themes */
[data-theme="light"] .settings-panel {
  background: #ffffff !important;
  color: #111111 !important;
}
[data-theme="light"] .settings-panel .settings-title,
[data-theme="light"] .settings-panel .settings-section-title,
[data-theme="light"] .settings-panel .setting-label,
[data-theme="light"] .settings-panel .toggle-label {
  color: #111111 !important;
}
[data-theme="light"] .settings-panel .num-input,
[data-theme="light"] .settings-panel input[type="number"] {
  background: #f4f6f9 !important;
  color: #111111 !important;
  border-color: #cbd5e1 !important;
}
[data-theme="light"] .settings-panel p,
[data-theme="light"] .settings-panel span {
  color: #475569 !important;
}
[data-theme="light"] .settings-panel b {
  color: #111111 !important;
}
[data-theme="light"] .settings-panel .save-btn {
  background: #0ea5e9 !important;
  color: #ffffff !important;
}
[data-theme="light"] .settings-overlay {
  background: rgba(0,0,0,0.5) !important;
}
/* Mobile — settings panel full width */
@media(max-width:768px) {
  .settings-panel {
    width: 100vw !important;
    max-width: 100vw !important;
  }
  .settings-overlay {
    justify-content: center !important;
    align-items: flex-end !important;
  }
}

/* CARD TEXT — force readable size and color in light mode */
:root .agent-card .agent-desc,
:root .agent-card .agent-name,
:root .hub .hub-body,
:root .hub .hub-name,
:root .hub .hf,
:root .scan-card,
:root [class*="card"] p,
:root [class*="card"] span,
:root [class*="card"] div {
  color: var(--text-primary);
}

/* Fix neon colors on light bg — readable versions */
:root .agent-desc { color: #333333 !important; font-size: 13px !important; }
:root .hub-body { color: #333333 !important; font-size: 13px !important; }
:root .hf { color: #333333 !important; font-size: 12px !important; }
:root .agent-name { font-size: 18px !important; }
:root .hub-name { font-size: 18px !important; }

/* Scan cards */
:root .signal-card, :root .scan-card {
  color: #111 !important;
}
:root .signal-card *, :root .scan-card * {
  color: inherit;
}

/* Keep accent colors but darken for light mode readability */
:root [style*="color:#00d4ff"],
:root [style*="color: #00d4ff"] { color: #0077bb !important; }
:root [style*="color:#00ff88"],
:root [style*="color: #00ff88"] { color: #007744 !important; }
:root [style*="color:#8b5cf6"],
:root [style*="color: #8b5cf6"] { color: #6d28d9 !important; }
:root [style*="color:#f59e0b"],
:root [style*="color: #f59e0b"] { color: #b45309 !important; }
:root [style*="color:#4a6080"],
:root [style*="color: #4a6080"] { color: #444444 !important; }
:root [style*="color:#c8d8e8"],
:root [style*="color: #c8d8e8"] { color: #222222 !important; }
:root [style*="color:#aaa"],
:root [style*="color: #aaa"] { color: #555555 !important; }
:root [style*="color:#888"],
:root [style*="color: #888"] { color: #444444 !important; }
:root [style*="color:#555"],
:root [style*="color: #555"] { color: #222222 !important; }
:root [style*="color:#666"],
:root [style*="color: #666"] { color: #333333 !important; }

/* Dark backgrounds in light mode — make white */
:root [style*="background:#080e16"],
:root [style*="background: #080e16"],
:root [style*="background:#0a1520"],
:root [style*="background:#0d0d1f"],
:root [style*="background:#100a1f"],
:root [style*="background:#150f00"],
:root [style*="background:#071520"],
:root [style*="background:#061510"],
:root [style*="background:#03050a"],
:root [style*="background:#000"],
:root [style*="background: #000"],
:root [style*="background:#060c12"] {
  background: var(--bg-card) !important;
}

/* SVG robot backgrounds in light mode */
:root svg rect[fill="#0d0d1f"],
:root svg rect[fill="#0a1520"],
:root svg rect[fill="#100a1f"],
:root svg rect[fill="#150f00"],
:root svg rect[fill="#071520"],
:root svg rect[fill="#061510"] {
  fill: #f0f0ff !important;
}

/* Inputs */
input, select, textarea {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Theme toggle */
.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border-color);
  background: var(--bg-input);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: #ff6b35;
  color: #ff6b35;
}

/* SCAN CARD TEXT CONTRAST IN LIGHT MODE */
:root .signal-card, :root .scan-card,
:root [class*="signal"], :root [class*="result"] {
  background: #ffffff !important;
  color: #111111 !important;
}

/* Price values under symbols */
:root [style*="color:#00d4ff"] { color: #0066aa !important; }
:root [style*="color:#00ff88"] { color: #006633 !important; }
:root [style*="color:#ff4466"] { color: #cc0033 !important; }
:root [style*="color:#ff6b35"] { color: #cc4400 !important; }
:root [style*="color:#f59e0b"] { color: #996600 !important; }
:root [style*="color:#8b5cf6"] { color: #5b21b6 !important; }

/* General text in cards */
:root .entry-val, :root .target-val, :root .stop-val,
:root [class*="val"], :root [class*="price"], :root [class*="amt"] {
  color: #111111 !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

/* ── DARK MODE DEEP FIXES ── */

/* Scan cards — force dark bg and white text in dark mode */
[data-theme="dark"] .signal-card,
[data-theme="dark"] [class*="signal-card"],
[data-theme="dark"] .scan-result,
[data-theme="dark"] .result-card {
  background: #080e16 !important;
  color: #ffffff !important;
  border-color: #1a2840 !important;
}

/* Fix white content areas in dark mode (developer page, music page etc) */
[data-theme="dark"] .content-area,
[data-theme="dark"] .main-content,
[data-theme="dark"] .page-content,
[data-theme="dark"] .chat-area,
[data-theme="dark"] .code-area,
[data-theme="dark"] [class*="content"],
[data-theme="dark"] [class*="main"] {
  background: #03050a !important;
  color: #ffffff !important;
}

/* Fix white panels inside dark pages */
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"] {
  background: #080e16 !important;
  color: #ffffff !important;
}

/* Scan card values — always visible */
[data-theme="dark"] [class*="entry"],
[data-theme="dark"] [class*="target"],
[data-theme="dark"] [class*="stop"],
[data-theme="dark"] [class*="strike"],
[data-theme="dark"] [class*="price"] {
  color: #ffffff !important;
}

/* Fix text that goes invisible on dark */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] label,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] td,
[data-theme="dark"] th,
[data-theme="dark"] li {
  color: inherit;
}

/* Borders in dark mode */
[data-theme="dark"] hr,
[data-theme="dark"] [class*="divider"],
[data-theme="dark"] [class*="separator"] {
  border-color: #1a2840 !important;
}

/* Inputs in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: #0d1520 !important;
  color: #ffffff !important;
  border-color: #1a2840 !important;
}

/* Buttons that go white-on-white in dark */
[data-theme="dark"] button:not(.btn-o):not(.btn-main):not(.theme-toggle):not([class*="cta"]) {
  color: inherit;
}

/* ── GLOBAL MOBILE OPTIMIZATION ── */
@media(max-width:768px){

  /* NAV — prevent overflow but allow dropdowns to escape */
  .nav, nav {
    padding: 10px 16px !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
  .nav-right, .nav-links {
    gap: 6px !important;
  }
  /* Ensure dropdown always renders on top on mobile */
  .acct-dropdown, .notif-dropdown {
    position: fixed !important;
    z-index: 999999 !important;
  }
  /* Force hamburger menu visible on mobile */
  #hub-menu-btn {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .hub-desktop-only {
    display: none !important;
  }
  /* Mobile nav — compact everything */
  .settings-btn {
    font-size: 15px !important;
    padding: 6px 8px !important;
    min-width: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Hide settings text, keep icon */
  .settings-btn-text { display: none !important; }
  /* Hide trade log link text on mobile */
  #trade-log-nav-btn span { display: none !important; }
  #trade-log-nav-btn { padding: 6px 8px !important; font-size: 15px !important; }
  /* Hide nav title and tier pill on mobile to save space */
  .nav-title { display: none !important; }
  .tier-pill { display: none !important; }
  /* Tour button icon only on mobile */
  button[onclick*='replayTour'] span { display: none !important; }
  button[onclick*='replayTour'] { padding: 6px 8px !important; font-size: 15px !important; }
  /* Ensure nav-right doesnt overflow */
  .nav-right { overflow: visible !important; flex-shrink: 0 !important; }
  .nav button:not(.settings-btn), .nav a:not(#trade-log-nav-btn):not(.back-btn) {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }

  /* HEADINGS */
  h1 { font-size: 32px !important; letter-spacing: -1px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 18px !important; }

  /* GRIDS — stack on mobile */
  .hub-grid, .agent-grid, .card-grid,
  [class*="grid"]:not(.agent-scene) {
    grid-template-columns: 1fr !important;
  }

  /* SCAN CARDS — full width */
  .signal-card, .scan-card, .result-card,
  [class*="signal"], [class*="result"] {
    width: 100% !important;
    min-width: unset !important;
  }

  /* SCANNER BUTTONS — wrap */
  .scanner-tabs, .scanner-buttons,
  [class*="scanner-tab"], [class*="tab-bar"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .scanner-tabs button, .scanner-buttons button {
    font-size: 11px !important;
    padding: 6px 10px !important;
  }

  /* FILTER PILLS — wrap */
  .filter-bar, [class*="filter"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* SECTIONS — reduce padding */
  section, .section, [class*="section"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* CHAT — full width */
  .chat-container, .chat-wrap, [class*="chat-wrap"] {
    flex-direction: column !important;
  }
  .sidebar, [class*="sidebar"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* STATS — wrap */
  .stats, .stat-grid, [class*="stat-row"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  /* TABLES — horizontal scroll */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* MODALS — full screen */
  .modal, [class*="modal"] {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 10px auto !important;
  }

  /* HIDE non-essential on mobile */
  .hero-right, .proof-item { display: none !important; }
}

@media(max-width:480px){
  /* EXTRA SMALL — phones */
  .nav button:not(.btn-o):not(.theme-toggle) {
    display: none !important;
  }
  .price-grid, .plans {
    grid-template-columns: 1fr !important;
  }
  .hub { padding: 16px !important; }
  .agent-card { padding: 14px 12px !important; }
  h1 { font-size: 26px !important; }
}

/* ── GLOBAL FONT SIZE BUMP ── */
body {
  font-size: 15px !important;
}

/* Card and hub descriptions */
.agent-desc, .hub-body, .hub-desc,
[class*="desc"], [class*="body-text"] {
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* Feature lists inside cards */
.hf, .pf, [class*="feat"] li,
.hub-feats li, .plan-features li {
  font-size: 13px !important;
}

/* Labels and eyebrows */
.hub-lbl, .albl, .sec-ey,
[class*="label"], [class*="eyebrow"] {
  font-size: 11px !important;
}

/* Nav links */
.nav a, .nav button,
nav a, nav button {
  font-size: 13px !important;
}

/* Card titles */
.agent-name, .hub-name,
[class*="card-title"], [class*="card-name"] {
  font-size: 17px !important;
}

/* Scan card text */
.signal-card, .scan-card,
[class*="signal"], [class*="scan-result"] {
  font-size: 14px !important;
}

/* General paragraph and span text */
p { font-size: 14px !important; line-height: 1.7 !important; }

/* Pricing cards */
.pc-desc, .plan-desc { font-size: 13px !important; }
.pc-name, .plan-name { font-size: 15px !important; }

/* Status pills */
.agent-status, [class*="status"] {
  font-size: 12px !important;
}

/* Table text */
td, th { font-size: 13px !important; }

/* Sidebar and nav items */
.sb-item, .nav-item, [class*="nav-link"] {
  font-size: 14px !important;
}