/* ═══════════════════════════════════════════════════════════
   SmartTrade AI — Apex Design System  v4.0
   Enterprise trading platform visual language.
   Inspiration: TradingView, Bloomberg Terminal, Stripe, Linear.
   ═══════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────── */
:root {
  /* Legacy aliases so older templates referencing these still work */
  --card-bg: #10141c;
  --input-bg: #141a24;
  --surface-2: #141a24;

  /* Surfaces — deeper, more saturated near-black with a cool blue cast */
  --bg-primary: #0a0d13;
  --bg-secondary: #12161f;
  --bg-card: #10141c;
  --bg-card-hover: #171d29;
  --bg-sidebar: #090b10;
  --border: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(255, 255, 255, 0.16);
  --border-accent: rgba(245, 166, 35, 0.5);
  --text-primary: #f1f5fb;
  --text-secondary: #95a2b8;
  --text-muted: #7683a0;
  /* ~4.85:1 on --bg-card — WCAG AA for normal text */
  --accent: #f5a623;
  --accent-light: #ffc861;
  --accent-dark: #d97f0a;
  --green: #22d97f;
  /* brighter for pop on dark surfaces */
  --green-bg: rgba(34, 217, 127, 0.12);
  --red: #ff5a6a;
  /* brighter for pop on dark surfaces */
  --red-bg: rgba(255, 90, 106, 0.12);
  --yellow: #f5b544;
  --yellow-bg: rgba(245, 181, 68, 0.12);
  --blue: #3b82f6;
  --blue-bg: rgba(59, 130, 246, 0.12);
  --purple: #8b5cf6;
  --purple-bg: rgba(139, 92, 246, 0.12);
  --cyan: #06b6d4;
  --cyan-bg: rgba(6, 182, 212, 0.12);

  /* Semantic signal tokens — named by meaning, map to base palette so UI +
     charts stay consistent. Charts read these via getComputedStyle. */
  --up: var(--green);
  --up-bg: var(--green-bg);
  --down: var(--red);
  --down-bg: var(--red-bg);
  --hold: var(--yellow);
  --hold-bg: var(--yellow-bg);
  --exit: var(--purple);
  --exit-bg: var(--purple-bg);

  --sidebar-width: 256px;
  --sidebar-collapsed: 60px;
  --navbar-height: 56px;
  --ticker-height: 32px;

  --glass: rgba(255, 255, 255, 0.035);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Radius scale — tightened for a denser, data-terminal feel */
  --radius-xs: 4px;
  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Elevation */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow: 0 6px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 14px 56px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 0 1px rgba(245, 166, 35, 0.15), 0 8px 32px rgba(245, 166, 35, 0.18);

  --transition: 0.16s cubic-bezier(.4, 0, .2, 1);
  --transition-slow: 0.28s cubic-bezier(.4, 0, .2, 1);

  /* Typefaces — Inter for UI/prose, JetBrains Mono for all numerics/data
     (prices, %s, KPI values, table numbers) for a trading-terminal feel */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* Gradients */
  --grad-brand: linear-gradient(135deg, #f5a623 0%, #e0921a 60%, #d97f0a 100%);
  --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-dark));
  --grad-bull: linear-gradient(135deg, #059669, #10b981);
  --grad-bear: linear-gradient(135deg, #e11d48, #f43f5e);

  /* card accent for KPI cards */
  --card-accent: var(--accent);
}

[data-theme="light"] {
  --bg-primary: #f3f5f9;
  --bg-secondary: #e8ebf1;
  --bg-card: #ffffff;
  --bg-card-hover: #f9fafc;
  --bg-sidebar: #ffffff;
  --border: rgba(15, 23, 42, 0.09);
  --border-hover: rgba(15, 23, 42, 0.18);
  --border-accent: rgba(245, 166, 35, 0.4);
  --text-primary: #0b1220;
  --text-secondary: #4b5872;
  --text-muted: #64708c;
  /* ~4.95:1 on white --bg-card — WCAG AA for normal text */
  --glass: rgba(15, 23, 42, 0.025);
  --glass-border: rgba(15, 23, 42, 0.07);
  --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
  --shadow: 0 6px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 0 1px rgba(245, 166, 35, 0.12), 0 8px 28px rgba(245, 166, 35, 0.1);
  /* Legacy aliases (--card-bg/--input-bg/--surface-2) were never overridden
     here, so any template still referencing them stayed dark permanently
     even in light mode (e.g. admin/api_configs.html config panel & modals). */
  --card-bg: var(--bg-card);
  --input-bg: var(--bg-secondary);
  --surface-2: var(--bg-secondary);

  /* --green/--red/--yellow are tuned bright/pastel "for pop on dark
     surfaces" (see their :root definitions) — on white cards those same
     hues drop below WCAG AA contrast (e.g. --yellow #f5b544 on its own
     --yellow-bg tint is ~1.8:1). Darken all three for light theme so every
     rule built on these tokens (badges, heatmap tiles, signal/risk pills)
     inherits legible text without needing a per-selector fix. */
  --green: #0f9d6e;
  --red: #dc2626;
  --yellow: #b45309;
}

/* Light-theme contrast fixes for pastel status text that was tuned for a dark
   background (too low-contrast on white cards). Dark theme values untouched. */
[data-theme="light"] .ta-buy {
  color: #0f9d6e;
}

[data-theme="light"] .ta-sell {
  color: #dc2626;
}

/* "Silver" slate-gray accents (icons/badges) used on commodities/markets pages —
   #94a3b8 is legible on dark cards but too light on white ones. */
[data-theme="light"] .silver-tone {
  color: #475569 !important;
}

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

html {
  scroll-behavior: smooth;
  /* body already has this, but body's own overflow-x doesn't reliably stop
     page-level horizontal scroll — html is the actual scrolling root in
     most browsers, and position:fixed elements (the off-canvas mobile
     sidebar included) escape body's overflow clipping entirely since they
     sit relative to the viewport, not to body. Without this, mobile
     browsers could still scroll the whole page horizontally and reveal
     bare background past the right/left edge of the real content. */
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Monospace numerics ───────────────────────────────────────
   Trading-terminal typography: all numbers/prices/percentages/data
   render in JetBrains Mono for a premium terminal feel and perfectly
   aligned columns. Prose and UI labels stay in Inter. */
.kpi-value,
.gauge-value,
.cell-symbol,
.cell-change,
.cell-price,
.ticker-symbol,
.ticker-price,
.ticker-change,
.qs-value,
.quick-stat .qs-value,
.asset-card .asset-price,
.asset-card .asset-change,
.price-hero,
#livePrice,
.mtf-summary-card .value,
.stat-row-value,
.indicator-value,
.confidence-wrap small,
.score-breakdown-val,
.signal-progress-label,
.mover-price,
.mover-chg,
.asset-cell-sub,
.logline,
.smart-table td .num,
.smart-table td.num,
.tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Slightly tighten mono at large sizes so big values don't feel wide */
.kpi-value,
.gauge-value,
.price-hero,
#livePrice,
.mtf-summary-card .value {
  letter-spacing: -0.5px;
}

/* Data tables: numeric cells in mono for aligned columns; the asset-name
   cell and any explicitly sans cell stay in Inter for readability. */
.smart-table tbody td {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.smart-table tbody td .asset-cell-name,
.smart-table tbody td.text-sans,
.smart-table tbody td .signal-badge,
.smart-table tbody td .badge-tag,
.smart-table tbody td[colspan] {
  font-family: var(--font-sans);
}

.asset-cell-name {
  font-family: var(--font-sans);
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

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

::-webkit-scrollbar-thumb {
  background: rgba(245, 166, 35, 0.3);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 166, 35, 0.55);
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR — flat, no accordion, section labels
   ════════════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  transition: width var(--transition), transform var(--transition);
  overflow: hidden;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed);
}

/* Pre-paint equivalent of .sidebar.collapsed/.main-wrapper.expanded — set on
   <html> by an early <head> script (before #sidebar/#mainWrapper even exist
   in the DOM) so a saved collapsed preference never flashes expanded first.
   Only the couple of rules that are visible at first paint; the real
   .collapsed/.expanded classes (with all their detail rules) take over a
   moment later once JS can reach the actual elements. */
html.sidebar-preload-collapsed .sidebar {
  width: var(--sidebar-collapsed);
}

html.sidebar-preload-collapsed .main-wrapper {
  margin-left: var(--sidebar-collapsed);
}

html.sidebar-preload-collapsed .sidebar .brand-name,
html.sidebar-preload-collapsed .sidebar .nav-text,
html.sidebar-preload-collapsed .sidebar .nav-badge,
html.sidebar-preload-collapsed .sidebar .badge-live,
html.sidebar-preload-collapsed .sidebar .badge-pro,
html.sidebar-preload-collapsed .sidebar .badge-tag,
html.sidebar-preload-collapsed .sidebar .sidebar-user-info {
  display: none !important;
}

/* ── Sidebar Header ──────────────────────────────────────── */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 50px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.brand-icon {
  width: 34px;
  height: 34px;
  background: var(--grad-brand);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 3px 14px rgba(245, 166, 35, 0.45);
}

.brand-name {
  font-size: 15.5px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.5px;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 5px 7px;
  border-radius: 8px;
  transition: var(--transition);
  flex-shrink: 0;
}

.sidebar-toggle:hover {
  background: var(--glass);
  color: var(--text-primary);
}

/* ── Nav (flat, scrollable) ──────────────────────────────── */
.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 0 6px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.sidebar-nav::-webkit-scrollbar {
  width: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Collapsible nav group ───────────────────────────────── */
.nav-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px 3px 14px;
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  margin: 3px 6px 0;
  transition: background 0.15s;
}

.nav-group-header:hover {
  background: var(--glass);
}

.nav-section-label {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  flex: 1;
}

.nav-group-arrow {
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

/* Body hidden by default; JS adds/removes .open on .nav-group */
.nav-group-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.nav-group.open>.nav-group-body {
  max-height: 500px;
}

/* Arrow rotates when open */
.nav-group:not(.open)>.nav-group-header .nav-group-arrow {
  transform: rotate(-90deg);
}

.nav-group.open>.nav-group-header .nav-group-arrow {
  transform: rotate(0deg);
}

/* Collapsed sidebar (icon-only): always show all items, hide labels/arrows */
.sidebar.collapsed .nav-group-header {
  justify-content: center;
  padding: 4px 0 3px;
  margin: 3px 4px 0;
}

.sidebar.collapsed .nav-section-label {
  display: none;
}

.sidebar.collapsed .nav-group-arrow {
  display: none;
}

.sidebar.collapsed .nav-group-body {
  max-height: 500px !important;
}

/* Section separator no longer needed */
.nav-section-sep {
  display: none;
}

/* Nav item */
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 16px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  position: relative;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  min-height: 32px;
  border-radius: 7px;
  margin: 1px 6px;
  border-left: none;
}

.nav-item i {
  font-size: 14px;
  flex-shrink: 0;
  width: 17px;
  text-align: center;
  color: var(--text-muted);
  transition: color 0.15s;
}

/* Per-icon base colors — each nav icon gets a distinct resting hue drawn
   from the app's existing semantic tokens (amber/green/red/yellow/blue/
   purple/cyan), so the sidebar reads as colorful/scannable like the
   reference design instead of one flat muted tone. These rules must stay
   ABOVE the .nav-item:hover i / .nav-item.active i rules below in source
   order: both sides are equal specificity (0,2,1), so whichever comes
   later in the cascade wins — keeping hover/active below here means
   hovering or activating a nav item still overrides the per-icon color,
   same as before this change. */
.nav-item i.nav-icon-amber   { color: var(--accent); }
.nav-item i.nav-icon-green   { color: var(--green); }
.nav-item i.nav-icon-red     { color: var(--red); }
.nav-item i.nav-icon-yellow  { color: var(--yellow); }
.nav-item i.nav-icon-blue    { color: var(--blue); }
.nav-item i.nav-icon-purple  { color: var(--purple); }
.nav-item i.nav-icon-cyan    { color: var(--cyan); }

.nav-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-item:hover {
  background: var(--glass);
  color: var(--text-primary);
}

.nav-item:hover i {
  color: var(--accent-light);
}

.nav-item.active {
  background: linear-gradient(90deg, rgba(245, 166, 35, 0.16), rgba(245, 166, 35, 0.05));
  color: var(--accent-light);
  font-weight: 600;
}

.nav-item.active i {
  color: var(--accent-light);
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 22%;
  bottom: 22%;
  width: 3px;
  background: var(--grad-accent);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.7);
}

.nav-badge {
  margin-left: auto;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  line-height: 1.5;
  flex-shrink: 0;
}

.badge-live {
  background: rgba(16, 185, 129, 0.15);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.badge-pro {
  background: rgba(245, 166, 35, 0.15);
  color: var(--accent-light);
  border: 1px solid rgba(245, 166, 35, 0.3);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-pro.nav-tier-gate {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.badge-pro.nav-tier-gate::before {
  font-family: "bootstrap-icons";
  content: "\f47a";
  font-size: 8px;
}

/* Collapsed sidebar — icon only + tooltip */
.sidebar.collapsed .brand-name,
.sidebar.collapsed .nav-text,
.sidebar.collapsed .nav-badge,
/* .nav-badge above is dead CSS — no template ever used that class. The
   real badges (LIVE / BASIC / PREMIUM / PRO / ON) are .badge-live,
   .badge-pro and .badge-tag, which this never matched — so they stayed
   visible as loose text next to the icon in icon-only mode. */
.sidebar.collapsed .badge-live,
.sidebar.collapsed .badge-pro,
.sidebar.collapsed .badge-tag,
.sidebar.collapsed .sidebar-user-info {
  display: none !important;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center;
  padding: 11px 8px;
}

.sidebar.collapsed .sidebar-user {
  justify-content: center;
  padding: 7px 8px;
}

.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 7px;
  margin: 1px 6px;
}

.sidebar.collapsed .nav-item.active::before {
  display: none;
}

.sidebar.collapsed .nav-item,
.sidebar.collapsed .sidebar-footer .nav-item {
  position: relative;
}

/* Hover tooltip for collapsed-sidebar nav icons — a single shared element
   positioned via JS (see base.html), not a per-item ::after. .sidebar has
   overflow:hidden (needed so nav-text doesn't flash outside the narrowed
   width during the collapse transition), which would silently clip an
   ::after positioned outside the sidebar's own box — this lives in <body>
   instead so it isn't clipped by that. */
#sidebarTooltip {
  position: fixed;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 7px;
  white-space: nowrap;
  border: 1px solid var(--border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
  z-index: 2000;
}

#sidebarTooltip.show {
  opacity: 1;
}

/* ── Sidebar Footer ──────────────────────────────────────── */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 4px 0 3px;
  flex-shrink: 0;
}

.sidebar-footer .nav-item {
  padding-left: 16px;
  min-height: 32px;
  font-size: 13px;
}

/* ── Sidebar User (bottom) ───────────────────────────────── */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--transition);
}

.sidebar-user:hover {
  background: var(--glass);
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  color: white;
}

.user-avatar-sm {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
  color: white;
  cursor: pointer;
}

.sidebar-user-info {
  overflow: hidden;
  flex: 1;
}

.user-name {
  font-weight: 600;
  font-size: 13px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}

.user-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Legacy group toggle — hidden, kept for JS that might reference it */
.nav-group-toggle {
  display: none !important;
}

.nav-group-items {
  max-height: none !important;
  overflow: visible !important;
}

.nav-label,
.nav-chevron,
.nav-group-icon {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════
   MAIN WRAPPER
   ════════════════════════════════════════════════════════════ */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left var(--transition);
  display: flex;
  flex-direction: column;
}

.main-wrapper.expanded {
  margin-left: var(--sidebar-collapsed);
}

/* ════════════════════════════════════════════════════════════
   TOP NAVBAR — minimal
   ════════════════════════════════════════════════════════════ */
.top-navbar {
  position: sticky;
  top: 0;
  height: var(--navbar-height);
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 999;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.navbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.breadcrumb-nav {
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 600;
}

.btn-icon {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  flex-shrink: 0;
  font-size: 14px;
}

.btn-icon:hover {
  background: var(--glass);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* ── Command Palette Trigger ─────────────────────────────── */
.cmd-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  cursor: pointer;
  transition: var(--transition);
  font-size: 12.5px;
  color: var(--text-muted);
  min-width: 200px;
  flex: 1 1 auto;
  max-width: 480px;
  margin: 0 auto;
}

.cmd-trigger:hover {
  border-color: var(--border-hover);
  color: var(--text-secondary);
}

.cmd-trigger kbd {
  margin-left: auto;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: inherit;
}

@media (max-width: 768px) {
  .cmd-trigger {
    min-width: 36px;
  }

  .cmd-trigger span {
    display: none;
  }

  .cmd-trigger kbd {
    display: none;
  }
}

/* Notification bell */
.notification-bell {
  position: relative;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  transition: var(--transition);
}

.notification-bell:hover {
  background: var(--glass);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--red);
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-primary);
}

.notif-dropdown {
  position: fixed;
  top: calc(var(--navbar-height) + var(--ticker-height) + 6px);
  right: 12px;
  width: 340px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 1100;
  max-height: 460px;
  overflow-y: auto;
}

.notif-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
}

.notif-item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}

.notif-item:hover {
  background: var(--glass);
}

.notif-item.unread {
  background: rgba(245, 166, 35, 0.05);
  position: relative;
}

.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.notif-item.unread {
  padding-left: 20px;
}

/* Read notifications now stay visible in the list (previously vanished
   entirely once read, since the dropdown only ever fetched unread=true) —
   dim them slightly so unread still reads as "new". */
.notif-item:not(.unread) {
  opacity: 0.65;
}

.notif-item:not(.unread):hover {
  opacity: 1;
}

/* User menu */
.user-menu {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: var(--transition);
  font-size: 12.5px;
}

.user-menu:hover {
  background: var(--glass);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* WS Status */
.topbar-clock {
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-secondary);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--glass);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.topbar-clock #clockDate {
  color: var(--text-muted);
}

.topbar-clock #clockTime {
  font-weight: 600;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}

.ws-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 10px;
  background: var(--glass);
  border: 1px solid var(--border);
}

.ws-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.ws-dot.live {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  animation: pulse-dot 2s infinite;
}

.ws-dot.delayed {
  background: #f59e0b;
}

.ws-dot.offline {
  background: #ef4444;
}

@keyframes pulse-dot {

  0%,
  100% {
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.08);
  }
}

/* ════════════════════════════════════════════════════════════
   TICKER STRIP — thin bar below navbar
   ════════════════════════════════════════════════════════════ */
.ticker-strip {
  height: var(--ticker-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.ticker-strip::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 1;
  background: linear-gradient(90deg, var(--bg-secondary), transparent);
}

.ticker-strip::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 1;
  background: linear-gradient(-90deg, var(--bg-secondary), transparent);
}

.ticker-ribbon {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  min-width: 0;
}

.ticker-ribbon::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40px;
  z-index: 1;
  background: linear-gradient(90deg, var(--bg-secondary), transparent);
}

.ticker-ribbon::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 40px;
  z-index: 1;
  background: linear-gradient(-90deg, var(--bg-secondary), transparent);
}

.ticker-track {
  display: flex;
  gap: 28px;
  /* Matches the landing page's marquee speed (32s) for a consistent feel
     from the public homepage into the logged-in dashboard. */
  animation: ticker-scroll 32s linear infinite;
  white-space: nowrap;
  font-size: 11.5px;
}

.ticker-track:hover {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.ticker-toggle-btn {
  flex: none;
  position: relative;
  z-index: 2;
  width: 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: none;
  border-left: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  transition: color .15s;
}

.ticker-toggle-btn:hover {
  color: var(--text-primary);
}

/* Collapsed height is applied by JS via the --ticker-height custom property
   itself (not a separate variable) so the notif-dropdown's top offset
   (which also reads --ticker-height) stays correctly in sync in both states. */
.ticker-strip.collapsed .ticker-ribbon {
  display: none;
}

.ticker-strip.collapsed .ticker-toggle-btn {
  width: 100%;
  border-left: none;
  font-size: 9px;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ticker-symbol {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 11.5px;
}

.ticker-price {
  color: var(--text-secondary);
  font-size: 11px;
}

.ticker-change.up {
  color: var(--green);
  font-size: 11px;
}

.ticker-change.down {
  color: var(--red);
  font-size: 11px;
}

/* Live dot in ticker */
.ticker-live-dot {
  width: 6px;
  height: 6px;
  background: var(--green);
  border-radius: 50%;
  margin-right: 4px;
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   COMMAND PALETTE OVERLAY
   ════════════════════════════════════════════════════════════ */
.cmd-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.cmd-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.cmd-palette {
  background: var(--bg-card);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), var(--shadow-glow);
  width: 100%;
  max-width: 560px;
  overflow: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: transform 0.18s cubic-bezier(.16, 1, .3, 1);
}

.cmd-overlay.open .cmd-palette {
  transform: translateY(0) scale(1);
}

.cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}

.cmd-input-wrap i {
  color: var(--text-muted);
  font-size: 15px;
  flex-shrink: 0;
}

.cmd-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 15px;
  font-family: inherit;
}

.cmd-input::placeholder {
  color: var(--text-muted);
}

.cmd-esc {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: inherit;
  cursor: pointer;
}

.cmd-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 6px 0;
}

.cmd-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 8px 18px 4px;
}

.cmd-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
  color: var(--text-secondary);
}

.cmd-item:hover,
.cmd-item.highlighted {
  background: rgba(245, 166, 35, 0.1);
  color: var(--text-primary);
}

.cmd-item i {
  font-size: 14px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-muted);
}

.cmd-item:hover i,
.cmd-item.highlighted i {
  color: var(--accent-light);
}

.cmd-item-label {
  font-size: 13.5px;
  font-weight: 500;
}

.cmd-item-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-left: auto;
}

.cmd-item .badge-pro.nav-tier-gate {
  margin-left: auto;
}

.cmd-footer {
  border-top: 1px solid var(--border);
  padding: 8px 18px;
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
}

.cmd-footer kbd {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: inherit;
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════
   PAGE CONTENT
   ════════════════════════════════════════════════════════════ */
.page-content {
  padding: 20px 24px 28px;
  flex: 1;
}

.financial-disclaimer-strip {
  margin-top: 32px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--glass);
  color: var(--text-muted);
  font-size: 11px;
  line-height: 1.6;
}
.financial-disclaimer-strip strong {
  color: var(--text-secondary);
}

.page-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.page-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: var(--text-primary);
}

.page-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  margin-top: 3px;
}

/* Eyebrow — small uppercase section label above a page title
   (e.g. "OVERVIEW" over "Dashboard"). Terminal/enterprise hierarchy cue. */
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--accent-light);
  margin-bottom: 5px;
  display: block;
}

/* Page greeting */
.page-greeting {
  margin-bottom: 6px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.page-greeting-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/* Page-level filter bar */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.filter-bar-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-right: 4px;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   KPI CARDS — 4-card layout, large numbers
   ════════════════════════════════════════════════════════════ */
.kpi-card {
  background: linear-gradient(165deg, var(--bg-card) 0%, var(--bg-secondary) 130%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--transition-slow), box-shadow var(--transition-slow), transform var(--transition-slow);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: var(--card-accent, var(--accent));
  box-shadow: 0 0 12px 0 color-mix(in srgb, var(--card-accent, var(--accent)) 65%, transparent);
}

.kpi-card::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -20%;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-accent, var(--accent)) 14%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

.kpi-card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.kpi-card.green {
  --card-accent: var(--green);
}

.kpi-card.red {
  --card-accent: var(--red);
}

.kpi-card.yellow {
  --card-accent: var(--yellow);
}

.kpi-card.blue {
  --card-accent: var(--blue);
}

.kpi-card.purple {
  --card-accent: var(--purple);
}

/* Alarm state for metrics that must actually warn (e.g. system CPU/RAM
   crossing a critical threshold) — distinct from the decorative per-card
   colors above, which don't otherwise change based on the value shown. */
@keyframes pulse-red {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(255, 90, 106, 0.45);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(255, 90, 106, 0);
  }
}

.kpi-card.alert,
.confidence-fill.alert {
  animation: pulse-red 1.6s ease-in-out infinite;
}

.kpi-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.kpi-top>div:first-child {
  min-width: 0;
}

.kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}

.kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-value {
  font-size: 31px;
  font-weight: 900;
  line-height: 1;
  margin: 7px 0 8px;
  letter-spacing: -1.6px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.kpi-change {
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
}

.kpi-change.up {
  color: var(--green);
}

.kpi-change.down {
  color: var(--red);
}

/* ════════════════════════════════════════════════════════════
   SECTION CARDS
   ════════════════════════════════════════════════════════════ */
.section-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
  transition: border-color var(--transition-slow);
}

.section-card-header {
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, var(--glass), transparent);
}

.section-card-title {
  font-size: 13.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}

.section-card-body {
  padding: 18px;
}

.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 16px;
  backdrop-filter: blur(10px);
}

/* ════════════════════════════════════════════════════════════
   TABLES
   ════════════════════════════════════════════════════════════ */
.smart-table {
  width: 100%;
  border-collapse: collapse;
}

.smart-table thead th {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.smart-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-size: 13.5px;
  color: var(--text-primary);
}

.smart-table tbody td,
.smart-table tbody td strong,
.smart-table tbody td span,
.smart-table tbody td a {
  color: var(--text-primary);
}

.smart-table thead th {
  color: var(--text-muted);
}

.smart-table tbody tr {
  transition: background 0.12s;
}

.smart-table tbody tr:hover {
  background: var(--glass);
}

.smart-table tbody tr:last-child td {
  border-bottom: none;
}

/* Click-to-sort table headers (Delta Scanner BUY/SELL, etc.) */
.smart-table thead th.sortable-th {
  cursor: pointer;
  user-select: none;
}
.smart-table thead th.sortable-th > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.smart-table thead th.sortable-th:hover {
  color: var(--text-primary);
  background: var(--glass);
}
.smart-table thead th.sortable-th .sort-th-icon {
  font-size: 9px;
  opacity: 0.45;
}
.smart-table thead th.sortable-th:hover .sort-th-icon {
  opacity: 0.8;
}
.smart-table thead th.sortable-th.sort-active {
  color: var(--accent);
}
.smart-table thead th.sortable-th.sort-active .sort-th-icon {
  opacity: 1;
  color: var(--accent);
}

.smart-table thead th:first-child {
  border-top-left-radius: var(--radius-xs);
}

.smart-table thead th:last-child {
  border-top-right-radius: var(--radius-xs);
}

/* Asset cell with sub-info */
.asset-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.asset-cell-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-primary);
}

.asset-cell-sub {
  font-size: 11px;
  color: var(--text-muted);
}

/* SL/Target row inside confidence cell */
.signal-levels {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.signal-levels .sl {
  color: var(--red);
}

.signal-levels .tgt {
  color: var(--green);
}

/* ════════════════════════════════════════════════════════════
   SIGNAL BADGES
   ════════════════════════════════════════════════════════════ */
.signal-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
}

.signal-buy {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.35);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.06) inset;
}

.signal-sell {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(244, 63, 94, 0.35);
  box-shadow: 0 0 0 1px rgba(244, 63, 94, 0.06) inset;
}

.signal-hold {
  background: var(--yellow-bg);
  color: var(--yellow);
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.signal-exit {
  background: var(--purple-bg);
  color: var(--purple);
  border: 1px solid rgba(139, 92, 246, 0.35);
}

/* ════════════════════════════════════════════════════════════
   CONFIDENCE BAR
   ════════════════════════════════════════════════════════════ */
.confidence-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 110px;
}

.confidence-bar {
  height: 5px;
  background: var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.confidence-fill {
  height: 5px;
  border-radius: 10px;
  transition: width 0.7s ease;
  filter: saturate(1.15);
}

/* ════════════════════════════════════════════════════════════
   SCORE BREAKDOWN WIDGET
   ════════════════════════════════════════════════════════════ */
.score-breakdown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.score-breakdown-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.score-breakdown-label {
  width: 72px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.score-breakdown-track {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.score-breakdown-fill {
  height: 4px;
  border-radius: 2px;
  transition: width 0.4s ease;
}

.score-breakdown-val {
  width: 28px;
  text-align: right;
  color: var(--text-secondary);
  font-weight: 600;
}

/* Signal P&L progress */
.signal-progress-wrap {
  margin-top: 6px;
}

.signal-progress-track {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  position: relative;
  overflow: visible;
}

.signal-progress-fill {
  height: 4px;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.signal-progress-fill.profit {
  background: var(--green);
}

.signal-progress-fill.loss {
  background: var(--red);
}

.signal-progress-label {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════
   HEATMAP
   ════════════════════════════════════════════════════════════ */
.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap: 7px;
  padding: 14px;
}

.heatmap-cell {
  background: var(--bg-secondary);
  border-radius: var(--radius-xs);
  padding: 11px 8px;
  text-align: center;
  cursor: pointer;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  border: 1px solid var(--border);
}

.heatmap-cell:hover {
  transform: scale(1.05) translateY(-1px);
  z-index: 5;
  border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);
}

.heatmap-cell.up {
  background: linear-gradient(165deg, rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0.04));
  border-color: rgba(16, 185, 129, 0.28);
}

.heatmap-cell.down {
  background: linear-gradient(165deg, rgba(244, 63, 94, 0.14), rgba(244, 63, 94, 0.04));
  border-color: rgba(244, 63, 94, 0.28);
}

.cell-symbol {
  font-weight: 800;
  font-size: 12px;
  color: var(--text-primary);
}

.cell-change {
  font-size: 13px;
  font-weight: 800;
  margin: 3px 0 1px;
  font-variant-numeric: tabular-nums;
}

.cell-price {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════
   FORMS & BUTTONS
   ════════════════════════════════════════════════════════════ */
.form-control,
.form-select {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.12) !important;
  background: var(--bg-secondary) !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}

.form-label {
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  margin-bottom: 5px;
}

.form-select option {
  background: var(--bg-card);
  color: var(--text-primary);
}

select option {
  background: #131920;
  color: #e8edf5;
}

.btn-primary {
  background: var(--grad-accent) !important;
  border: none !important;
  font-weight: 600 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13.5px !important;
  color: #fff !important;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition) !important;
}

.btn-primary:hover {
  opacity: 0.92;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.38) !important;
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-outline-light {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  font-size: 13.5px !important;
}

.btn-outline-light:hover {
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
  background: var(--glass) !important;
}

.btn-accent {
  color: #fff !important;
  font-weight: 600;
}

.btn-outline-secondary {
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.btn-outline-secondary:hover {
  background: var(--glass) !important;
  border-color: var(--border-hover) !important;
  color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════
   SEARCH BAR
   ════════════════════════════════════════════════════════════ */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  transition: var(--transition);
}

.search-bar:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.1);
}

.search-bar input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13.5px;
  width: 100%;
}

.search-bar input::placeholder {
  color: var(--text-muted);
}

.search-bar i {
  color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════
   BADGES / TAGS
   ════════════════════════════════════════════════════════════ */
.badge-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.badge {
  color: inherit;
}

.badge.bg-secondary {
  background: rgba(100, 116, 139, 0.2) !important;
  color: var(--text-secondary) !important;
  border: 1px solid rgba(100, 116, 139, 0.3) !important;
}

.badge.bg-success {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

.badge.bg-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

.badge.bg-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}

.badge.bg-info {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #93c5fd !important;
  border: 1px solid rgba(59, 130, 246, 0.35) !important;
}

[data-theme="light"] .badge.bg-success {
  color: #0f9d6e !important;
}

[data-theme="light"] .badge.bg-danger {
  color: #dc2626 !important;
}

[data-theme="light"] .badge.bg-warning {
  color: #b45309 !important;
}

[data-theme="light"] .badge.bg-info {
  color: #1d4ed8 !important;
}

.badge.bg-primary {
  background: rgba(245, 166, 35, 0.2) !important;
  color: var(--accent-light) !important;
  border: 1px solid rgba(245, 166, 35, 0.35) !important;
}

.bg-glass {
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
}

/* ════════════════════════════════════════════════════════════
   SKELETON / LOADING STATES
   ════════════════════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, rgba(255, 255, 255, 0.04) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 6px;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-row {
  height: 44px;
  margin-bottom: 2px;
}

.skeleton-kpi {
  height: 90px;
  border-radius: var(--radius);
}

.skeleton-text {
  height: 12px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.skeleton-text.w-50 {
  width: 50%;
}

.skeleton-text.w-75 {
  width: 75%;
}

.skeleton-text.w-30 {
  width: 30%;
}

/* ════════════════════════════════════════════════════════════
   AUTH PAGES
   ════════════════════════════════════════════════════════════ */
.auth-container {
  min-height: 100vh;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(245, 166, 35, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(139, 92, 246, 0.07) 0%, transparent 55%);
}

.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.auth-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-brand);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ════════════════════════════════════════════════════════════
   CHART CONTAINERS
   ════════════════════════════════════════════════════════════ */
.chart-wrapper {
  position: relative;
  width: 100%;
  height: 280px;
}

.chart-wrapper-lg {
  height: 420px;
}

.chart-wrapper-sm {
  height: 150px;
}

/* ════════════════════════════════════════════════════════════
   ASSET CARDS (market pages)
   ════════════════════════════════════════════════════════════ */
.asset-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: all 0.18s;
  height: 100%;
}

.asset-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

.asset-card .asset-symbol {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-primary);
}

.asset-card .asset-name {
  color: var(--text-muted);
  font-size: 11px;
  margin-top: 1px;
}

.asset-card .asset-price {
  font-size: 18px;
  font-weight: 800;
  margin-top: 10px;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.asset-card .asset-change {
  font-size: 12px;
  margin-top: 3px;
}

/* ════════════════════════════════════════════════════════════
   QUICK STATS
   ════════════════════════════════════════════════════════════ */
.quick-stat {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
}

.quick-stat .qs-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.quick-stat .qs-value {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-top: 3px;
  color: var(--text-primary);
}

/* ════════════════════════════════════════════════════════════
   SENTIMENT GAUGE
   ════════════════════════════════════════════════════════════ */
.gauge-value {
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -2px;
}

.gauge-label {
  font-size: 14px;
  font-weight: 600;
  margin-top: 4px;
}

/* Fear & Greed style gradient sentiment track with a sliding marker pin.
   Full-width red→amber→green gradient; marker positioned via --pos (0–100%). */
.sentiment-track {
  position: relative;
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--red) 0%, var(--yellow) 50%, var(--green) 100%);
}

.sentiment-track .sentiment-marker {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  width: 4px;
  height: 16px;
  border-radius: 3px;
  background: var(--text-primary);
  box-shadow: 0 0 0 2px var(--bg-card), 0 2px 6px rgba(0, 0, 0, .4);
  transform: translate(-50%, -50%);
  transition: left 0.6s cubic-bezier(.4, 0, .2, 1);
}

.sentiment-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* ════════════════════════════════════════════════════════════
   NAV TABS
   ════════════════════════════════════════════════════════════ */
.nav-tabs {
  border-color: var(--border) !important;
}

.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
  background: transparent !important;
  border-color: transparent !important;
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 8px 8px 0 0 !important;
  transition: var(--transition);
}

.nav-tabs .nav-link:hover {
  color: var(--text-primary) !important;
  background: var(--glass) !important;
}

.nav-tabs .nav-link.active {
  color: var(--text-primary) !important;
  background: var(--bg-card) !important;
  border-color: var(--border) var(--border) var(--bg-card) !important;
}

/* ════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════ */
.pagination .page-link {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
  font-size: 12.5px !important;
  padding: 4px 10px !important;
}

.pagination .page-link:hover {
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
}

.pagination .page-item.active .page-link {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
}

/* ════════════════════════════════════════════════════════════
   TOAST
   ════════════════════════════════════════════════════════════ */
.smart-toast {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow) !important;
  min-width: 280px;
}

/* ════════════════════════════════════════════════════════════
   MODAL
   ════════════════════════════════════════════════════════════ */
.modal {
  z-index: 99999 !important;
}

.modal-content {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75) !important;
}

.modal-header,
.modal-footer {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}

.modal-body {
  background: var(--bg-card) !important;
}

.modal-backdrop {
  z-index: 99998 !important;
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.65) !important;
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-green {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-in {
  animation: fadeInUp 0.3s ease forwards;
}

.live-dot {
  width: 8px;
  height: 8px;
  background: var(--green);
  border-radius: 50%;
  display: inline-block;
  animation: pulse-green 1.8s infinite;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}

/* ════════════════════════════════════════════════════════════
   UTILITIES
   ════════════════════════════════════════════════════════════ */
.text-green {
  color: var(--green) !important;
}

.text-red {
  color: var(--red) !important;
}

.text-yellow {
  color: var(--yellow) !important;
}

.text-blue {
  color: var(--blue) !important;
}

.text-purple {
  color: var(--purple) !important;
}

.text-accent {
  color: var(--accent-light) !important;
}

.bg-glass {
  background: var(--glass) !important;
}

.border-accent {
  border-color: var(--accent) !important;
}

.fw-600 {
  font-weight: 600 !important;
}

.fw-700 {
  font-weight: 700 !important;
}

.fw-800 {
  font-weight: 800 !important;
}

.cursor-pointer {
  cursor: pointer;
}

.fs-xs {
  font-size: 11px !important;
  color: var(--text-secondary);
}

.fs-sm {
  font-size: 12.5px !important;
}

.number-ticker {
  display: inline-block;
  transition: all 0.4s ease;
}

.kpi-value {
  color: var(--text-primary);
}

.kpi-value.text-green {
  color: var(--green) !important;
}

.kpi-value.text-red {
  color: var(--red) !important;
}

.kpi-value.text-yellow {
  color: var(--yellow) !important;
}

.kpi-value.text-blue {
  color: var(--blue) !important;
}

.kpi-value.text-purple {
  color: var(--purple) !important;
}

.kpi-change {
  color: var(--text-secondary) !important;
  font-size: 11.5px;
}

.section-card-title {
  color: var(--text-primary) !important;
}

.page-subtitle {
  color: var(--text-secondary) !important;
}

.breadcrumb-nav {
  color: var(--text-secondary) !important;
}

.form-label {
  color: var(--text-secondary) !important;
}

.notif-header {
  color: var(--text-primary);
}

.spinner-border {
  border-color: var(--accent);
  border-right-color: transparent;
}

.progress {
  background: var(--border) !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--accent), var(--green)) !important;
}

.ticker-symbol {
  color: var(--text-primary) !important;
}

.ticker-price {
  color: var(--text-secondary) !important;
}

#markAllRead {
  color: var(--text-secondary) !important;
}

#markAllRead:hover {
  color: var(--text-primary) !important;
}

.auth-card .form-control {
  color: var(--text-primary) !important;
}

.nav-tabs .nav-link {
  color: var(--text-secondary) !important;
}

.nav-tabs .nav-link.active {
  color: var(--text-primary) !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 992px) {
  .sidebar {
    transform: translateX(-100%);
    width: var(--sidebar-width) !important;
    box-shadow: var(--shadow-lg);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .main-wrapper {
    margin-left: 0 !important;
  }

  .cmd-trigger {
    min-width: 160px;
  }
}

@media (max-width: 768px) {
  .page-content {
    padding: 14px 14px 20px;
  }

  .ticker-strip {
    display: none;
  }

  .page-title {
    font-size: 18px;
  }

  .kpi-value {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .auth-card {
    padding: 24px 20px;
  }

  .filter-bar {
    gap: 6px;
  }
}

/* ════════════════════════════════════════════════════════════
   TA SUMMARY — rating cells
   ════════════════════════════════════════════════════════════ */
.rating-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.ta-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .3px;
}

.ta-strong-buy {
  background: rgba(16, 185, 129, 0.20);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.ta-buy {
  background: rgba(110, 231, 183, 0.15);
  color: #6ee7b7;
  border: 1px solid rgba(110, 231, 183, 0.35);
}

.ta-neutral {
  background: rgba(100, 116, 139, 0.18);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.30);
}

.ta-sell {
  background: rgba(252, 165, 165, 0.15);
  color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, 0.30);
}

.ta-strong-sell {
  background: rgba(239, 68, 68, 0.20);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.40);
}

.ta-loading {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 400;
  font-size: 11px;
}

.ai-cell {
  gap: 5px;
  min-width: 108px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  cursor: default;
}

.ai-cell:hover {
  opacity: .85;
}

.ai-bull {
  background: rgba(16, 185, 129, 0.18);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.4);
}

.ai-bear {
  background: rgba(239, 68, 68, 0.18);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.40);
}

.ai-neut {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-secondary);
  border: 1px solid rgba(100, 116, 139, 0.30);
}

.ai-conf {
  font-size: 11px;
  font-weight: 700;
  opacity: .85;
  margin-left: 2px;
}

.asset-row-header td {
  background: var(--glass) !important;
  padding: 5px 12px !important;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .8px;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════
   SETTINGS — asset selection grid
   ════════════════════════════════════════════════════════════ */
.asset-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}

.asset-toggle:hover {
  border-color: var(--accent);
}

.asset-toggle.active {
  border-color: var(--accent);
  background: rgba(245, 166, 35, 0.12);
}

.asset-toggle .check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}

.asset-toggle.active .check {
  background: var(--accent);
  border-color: var(--accent);
}

.asset-toggle.active .check::after {
  content: '✓';
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

.mkt-header {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin: 12px 0 6px;
}

/* ════════════════════════════════════════════════════════════
   ASSET DETAIL — indicator panel, chart tabs
   ════════════════════════════════════════════════════════════ */
.tf-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
}

.tf-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tf-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.indicator-group {
  margin-bottom: 1.25rem;
}

.indicator-group-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .4rem;
  padding: 4px 0 6px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 5px;
}

.indicator-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  transition: background .15s;
}

.indicator-card:hover {
  background: var(--bg-card-hover);
}

.indicator-name {
  font-size: 12px;
  color: var(--text-secondary);
}

.indicator-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.sentiment-bar-wrap {
  background: var(--bg-secondary);
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  margin: 6px 0;
}

.sentiment-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
  transition: width .4s;
}

.tab-nav .nav-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  background: transparent;
}

.tab-nav .nav-link.active {
  color: var(--text-primary);
  border-bottom-color: var(--accent);
}

.market-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.market-badge.crypto {
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
}

.market-badge.forex {
  background: rgba(139, 92, 246, .15);
  color: #a78bfa;
}

.market-badge.gold,
.market-badge.silver,
.market-badge.commodity {
  background: rgba(251, 191, 36, .15);
  color: #fbbf24;
}

.market-badge.indian_stock {
  background: rgba(16, 185, 129, .15);
  color: #10b981;
}

.market-badge.index {
  background: rgba(59, 130, 246, .15);
  color: #60a5fa;
}

[data-theme="light"] .market-badge.crypto,
[data-theme="light"] .market-badge.gold,
[data-theme="light"] .market-badge.silver,
[data-theme="light"] .market-badge.commodity {
  color: #92400e;
}

[data-theme="light"] .market-badge.forex {
  color: #6d28d9;
}

[data-theme="light"] .market-badge.indian_stock {
  color: #047857;
}

[data-theme="light"] .market-badge.index {
  color: #1d4ed8;
}

/* ════════════════════════════════════════════════════════════
   INFO / ALERT BOXES
   ════════════════════════════════════════════════════════════ */
.info-box {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}

.info-box.blue {
  background: var(--blue-bg);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: var(--text-secondary);
}

.info-box.green {
  background: var(--green-bg);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: var(--text-secondary);
}

.info-box.yellow {
  background: var(--yellow-bg);
  border: 1px solid rgba(245, 158, 11, 0.25);
  color: var(--text-secondary);
}

.info-box.red {
  background: var(--red-bg);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--text-secondary);
}

/* ════════════════════════════════════════════════════════════
   JOURNAL / WATCHLIST / RISK pages
   ════════════════════════════════════════════════════════════ */
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-row-label {
  color: var(--text-secondary);
}

.stat-row-value {
  font-weight: 700;
  color: var(--text-primary);
}

/* Alert / risk level pill */
.risk-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

.risk-low {
  background: var(--green-bg);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.risk-medium {
  background: var(--yellow-bg);
  color: var(--yellow);
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.risk-high {
  background: var(--red-bg);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ════════════════════════════════════════════════════════════
   NEWS / ECONOMIC CALENDAR — shared
   ════════════════════════════════════════════════════════════ */
.spin {
  display: inline-block;
  animation: spin360 1s linear infinite;
}

@keyframes spin360 {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Impact badges used in news.html + briefing.html */
.impact-high {
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.impact-medium {
  background: rgba(245, 158, 11, 0.85);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.impact-low {
  background: rgba(100, 116, 139, 0.7);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

.actual-better {
  color: var(--green);
  font-weight: 600;
}

.actual-worse {
  color: var(--red);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   BRIEFING page — mover cards, signal mini cards
   ════════════════════════════════════════════════════════════ */
.market-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.status-open {
  background: rgba(16, 185, 129, 0.18);
  color: var(--green);
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.status-closed {
  background: rgba(239, 68, 68, 0.18);
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.mover-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: border-color .2s;
}

.mover-card:hover {
  border-color: var(--accent);
}

.mover-sym {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.mover-name {
  font-size: 10px;
  color: var(--text-muted);
}

.mover-price {
  font-size: 11px;
  color: var(--text-secondary);
}

.mover-chg {
  font-weight: 700;
  font-size: 13px;
}

.mover-up {
  color: var(--green);
}

.mover-down {
  color: var(--red);
}

.signal-mini-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
  text-decoration: none;
  display: block;
  color: inherit;
}

.signal-mini-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.dot-live {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 1.5s infinite;
  vertical-align: middle;
  margin-right: 4px;
}

/* ════════════════════════════════════════════════════════════
   UI AUDIT FIXES — visibility, color, empty states
   ════════════════════════════════════════════════════════════ */

/* --- Global: ensure all table cell text is readable (never white-on-white) --- */
.smart-table td {
  color: var(--text-primary) !important;
}

/* .smart-table td above outranks the plain .text-green/.text-red utilities
   (same !important tier, but higher specificity), so gain/loss cells were
   silently losing their color and rendering as plain text everywhere —
   Portfolio holdings, signal P&L, etc. These re-assert it at matching
   specificity so both rules can coexist: readable text by default, real
   color where a row is explicitly marked as a gain or loss. */
.smart-table td.text-green, .smart-table td.text-green * { color: var(--green) !important; }
.smart-table td.text-red,   .smart-table td.text-red   * { color: var(--red)   !important; }
.smart-table td.text-yellow, .smart-table td.text-yellow * { color: var(--yellow) !important; }
.smart-table td.text-blue,   .smart-table td.text-blue   * { color: var(--blue)   !important; }

.smart-table th {
  color: var(--text-muted) !important;
}

.smart-table tbody tr:last-child td {
  border-bottom: none;
}

/* --- Forms: inputs, selects, textareas must show text --- */
.form-control,
.form-select {
  color: var(--text-primary) !important;
  background-color: var(--bg-secondary) !important;
  border-color: var(--border) !important;
}

.form-control::placeholder {
  color: var(--text-muted) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-secondary) !important;
  border-color: var(--accent) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15) !important;
}

textarea.form-control {
  color: var(--text-primary) !important;
}

/* --- Modal --- */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-primary) !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-secondary) !important;
}

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

.modal-title {
  color: var(--text-primary) !important;
}

/* btn-close must invert only in dark theme (light icon on dark header);
   in light theme the default dark X already reads correctly on light headers. */
.btn-close {
  opacity: 0.7;
}

[data-theme="dark"] .btn-close {
  filter: invert(1) opacity(0.7);
}

.btn-close:hover {
  opacity: 1;
}

/* --- Watchlist: make empty state more guiding --- */
.watchlist-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-muted);
}

/* --- Portfolio KPI cards: zero values still visible --- */
.kpi-value {
  color: var(--text-primary) !important;
}

/* --- Scanner info bar: improve contrast --- */
.scanner-info-bar {
  background: rgba(245, 166, 35, 0.1);
  border: 1px solid rgba(245, 166, 35, 0.25);
  border-radius: 8px;
  padding: 10px 16px;
  color: var(--text-secondary);
  font-size: 13px;
  margin-bottom: 16px;
}

/* --- Journal: glass-card inside insight panel --- */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
}

.glass-card.border-success {
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.glass-card.border-danger {
  border-color: rgba(239, 68, 68, 0.35) !important;
}

/* --- MTF summary KPI cards at bottom --- */
.mtf-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
}

.mtf-summary-card .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.mtf-summary-card .value {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--text-primary);
}

.mtf-summary-card .sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* --- Admin table action icon buttons visibility --- */
.btn-outline-secondary {
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

.btn-outline-secondary:hover {
  color: var(--text-primary) !important;
  border-color: var(--text-secondary) !important;
  background: var(--glass) !important;
}

.btn-outline-light {
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}

.btn-outline-light:hover {
  color: var(--text-primary) !important;
  background: var(--glass) !important;
  border-color: var(--border-hover) !important;
}

.btn-outline-danger {
  color: var(--red) !important;
  border-color: rgba(239, 68, 68, 0.5) !important;
}

.btn-outline-danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* --- Code tags in tables and logs --- */
code {
  color: var(--accent-light) !important;
  background: rgba(245, 166, 35, 0.1);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.85em;
}

/* --- Pagination --- */
.pagination .page-link {
  background: var(--bg-secondary) !important;
  border-color: var(--border) !important;
  color: var(--text-secondary) !important;
}

.pagination .page-item.active .page-link {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.pagination .page-link:hover {
  color: var(--text-primary) !important;
  background: var(--bg-card-hover) !important;
}

/* --- Badge visibility --- */
.badge.bg-secondary {
  background: rgba(100, 116, 139, 0.3) !important;
  color: var(--text-secondary) !important;
}

.badge.bg-success {
  background: rgba(16, 185, 129, 0.2) !important;
  color: var(--green) !important;
}

.badge.bg-danger {
  background: rgba(239, 68, 68, 0.2) !important;
  color: var(--red) !important;
}

.badge.bg-warning {
  background: rgba(245, 158, 11, 0.2) !important;
  color: var(--yellow) !important;
}

.badge.bg-info {
  background: rgba(6, 182, 212, 0.2) !important;
  color: var(--cyan, #06b6d4) !important;
}

.badge.bg-primary {
  background: rgba(245, 166, 35, 0.2) !important;
  color: var(--accent-light) !important;
}

/* --- Alert --- */
.alert-danger {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* --- Model performance perf-table td color --- */
.perf-table td {
  color: var(--text-primary) !important;
}

/* --- Section-sub-title --- */
.section-sub-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-muted);
}

/* --- Watchlist list item text --- */
.watchlist-item-symbol {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.watchlist-item-name {
  color: var(--text-muted) !important;
  font-size: 11px;
}

/* --- Admin API configs row text --- */
.api-row-name {
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* --- kpi-top: when no margin-bottom needed (no kpi-change row) --- */
.kpi-top {
  margin-bottom: 0;
}

/* --- Input date color fix (date picker text) --- */
input[type="date"] {
  color-scheme: dark;
  color: var(--text-primary) !important;
}

[data-theme="light"] input[type="date"] {
  color-scheme: light;
}

input[type="range"] {
  accent-color: var(--accent);
}

/* --- Select option text inside dark bg --- */
select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* --- Empty state shared style --- */
.empty-state-box {
  padding: 56px 20px;
  text-align: center;
  color: var(--text-muted);
}

.empty-state-box i {
  font-size: 2.5rem;
  opacity: .35;
  display: block;
  margin-bottom: 14px;
  background: var(--grad-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.watchlist-empty i,
#signalsBody i.bi-hourglass-split {
  opacity: .35;
}

.empty-state-box p {
  font-size: 13px;
  margin: 0;
}

/* --- Confidence bar --- */
.confidence-bar {
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.confidence-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s;
}

/* --- News card grid --- */
.news-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color .2s;
}

.news-card:hover {
  border-color: var(--border-hover);
}

.news-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary) !important;
  line-height: 1.4;
}

.news-card-meta {
  font-size: 11px;
  color: var(--text-muted) !important;
}

.news-card-read {
  font-size: 12px;
  color: var(--accent-light) !important;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
}

/* --- Auth card inputs --- */
.auth-card {
  color: var(--text-primary) !important;
}

.auth-card label {
  color: var(--text-secondary) !important;
}

.auth-card h2 {
  color: var(--text-primary) !important;
}

/* --- Text muted override — never pure white --- */
.text-muted {
  color: var(--text-muted) !important;
}

.text-secondary {
  color: var(--text-secondary) !important;
}

/* ═══ Enhanced Dashboard (image-parity) ═══════════════════════════ */
.dash-header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px
}

.dash-header-greet {
  flex: 0 0 auto
}

.dash-header-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap
}

.btn-generate {
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border: none;
  font-weight: 600;
  border-radius: 7px
}

.btn-generate:hover {
  filter: brightness(1.08);
  color: #fff
}

.market-state {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  padding: 0 4px
}

.ms-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 96px
}

.ms-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600
}

.ms-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary)
}

/* 8-up KPI grid */
.kpi-grid-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px
}

@media(max-width:1400px) {
  .kpi-grid-8 {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:760px) {
  .kpi-grid-8 {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* AI Opportunity Radar */
.opp-radar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 14px
}

@media(max-width:1200px) {
  .opp-radar {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:680px) {
  .opp-radar {
    grid-template-columns: repeat(2, 1fr)
  }
}

.opp-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: .15s;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.opp-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px)
}

.opp-top {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.opp-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-primary)
}

.opp-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  border: 1px solid;
  border-radius: 5px;
  padding: 2px 7px
}

.opp-conf {
  font-size: 26px;
  font-weight: 800;
  line-height: 1
}

.opp-spark {
  height: 34px;
  line-height: 0
}

.opp-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary)
}

/* Enhanced signals table */
.signals-table-adv td {
  color: var(--text-primary);
  font-size: 12px;
  vertical-align: middle
}

.signals-table-adv td.num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap
}

.signals-table-adv .asset-cell-sub {
  margin-top: 2px
}

.regime-chip {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary)
}

.status-chip {
  font-size: 10px;
  font-weight: 800;
  border: 1px solid;
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap
}

.model-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px
}

.model-bars .mbar {
  width: 4px;
  border-radius: 1px;
  min-height: 3px
}

/* AI Decision Inspector */
.insp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-bottom: 12px
}

.insp-k {
  font-size: 10.5px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600
}

.insp-v {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums
}

.insp-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  margin: 14px 0 8px
}

.insp-checks {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.insp-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-primary)
}

.insp-warns {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.insp-warn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary)
}

.insp-model {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px
}

.insp-model-n {
  width: 78px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0
}

.insp-model-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-input);
  overflow: hidden
}

.insp-model-fill {
  height: 100%;
  border-radius: 4px
}

.insp-model-p {
  width: 36px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary)
}

/* Heatmap mode tabs */
.heatmap-modes {
  display: flex;
  gap: 4px;
  flex-wrap: wrap
}

.hm-tab {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: .15s
}

.hm-tab:hover {
  color: var(--text-primary)
}

.hm-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

/* Today's Summary strip */
.today-summary {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 14px
}

.ts-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap
}

.ts-item {
  display: flex;
  flex-direction: column;
  gap: 1px
}

.ts-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  font-weight: 600
}

.ts-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums
}

/* 8-up KPI grid: allow full labels + tighter values in narrow cards */
.kpi-grid-8 .kpi-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 9.5px;
  letter-spacing: .5px;
  line-height: 1.25;
  min-height: 24px
}

.kpi-grid-8 .kpi-value {
  font-size: 23px;
  letter-spacing: -1px;
  margin: 5px 0 6px
}

.kpi-grid-8 .kpi-change {
  font-size: 10px
}

.kpi-grid-8 .kpi-card {
  padding: 13px 14px
}

.kpi-grid-8 .kpi-icon {
  font-size: 15px
}

/* ═══ Morning Briefing (enhanced) ═════════════════════════════════ */
.brief-state-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px
}

@media(max-width:1100px) {
  .brief-state-row {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media(max-width:640px) {
  .brief-state-row {
    grid-template-columns: repeat(2, 1fr)
  }
}

.brief-state {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px
}

.bs-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 5px
}

.bs-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px
}

/* Market Summary breadth */
.breadth-stats {
  display: flex;
  gap: 14px
}

.breadth-stat {
  text-align: center
}

.bst-label {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .03em
}

.bst-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1
}

.bst-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600
}

.breadth-donut {
  position: relative;
  width: 120px;
  height: 120px;
  margin-left: auto
}

.breadth-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.breadth-pct {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary)
}

.breadth-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase
}

/* Key Headlines */
.headline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none
}

.headline-row:last-child {
  border-bottom: none
}

.headline-time {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0
}

.headline-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0
}

.headline-text {
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.3
}

.headline-row:hover .headline-text {
  color: var(--accent-light)
}

/* Econ + movers + crypto tables */
.brief-econ td,
.brief-movers td,
.brief-crypto td {
  color: var(--text-primary);
  font-size: 12px;
  padding: 6px 8px
}

.brief-econ td.num,
.brief-movers td.num,
.brief-crypto td.num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}

.mv-sym {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 12.5px
}

.mv-name {
  font-size: 10.5px;
  color: var(--text-muted)
}

/* Sentiment gauge */
.sent-gauge {
  position: relative;
  display: inline-block
}

.sent-gauge-val {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary)
}

.sent-gauge-lbl {
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px
}

.sbm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px
}

.sbm-name {
  width: 92px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0
}

.sbm-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-input);
  overflow: hidden
}

.sbm-fill {
  height: 100%;
  border-radius: 4px
}

.sbm-val {
  width: 24px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary)
}

/* Key levels */
.level-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px
}

.level-tab {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 6px;
  cursor: pointer
}

.level-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

.lv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px
}

.lv-name {
  color: var(--text-secondary);
  font-weight: 600
}

.lv-val {
  font-weight: 800;
  font-variant-numeric: tabular-nums
}

.level-chart {
  min-height: 150px;
  display: flex;
  align-items: center
}

/* AI insights */
.insight-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text-primary);
  line-height: 1.35
}

.insight-row:last-child {
  border-bottom: none
}

.insight-row i {
  font-size: 15px;
  margin-top: 1px;
  flex-shrink: 0
}

/* ═══ Markets Overview ════════════════════════════════════════════ */
.mkt-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.mkt-tab {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s
}

.mkt-tab:hover {
  color: var(--text-primary);
  border-color: var(--accent)
}

.mkt-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff
}

.kpi-grid-auto {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px
}

@media(max-width:1500px) {
  .kpi-grid-auto {
    grid-template-columns: repeat(4, 1fr)
  }
}

@media(max-width:820px) {
  .kpi-grid-auto {
    grid-template-columns: repeat(2, 1fr)
  }
}

.kpi-grid-auto .kpi-label {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 9.5px;
  min-height: 22px;
  line-height: 1.25
}

.kpi-grid-auto .kpi-value {
  font-size: 22px;
  letter-spacing: -.8px;
  margin: 5px 0 6px
}

.kpi-grid-auto .kpi-card {
  padding: 13px 14px
}

/* sentiment counts */
.sent-counts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px
}

.sc-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  text-align: center
}

.sc-item.sc-bull {
  background: rgba(16, 185, 129, .08)
}

.sc-item.sc-neu {
  background: rgba(148, 163, 184, .08)
}

.sc-item.sc-bear {
  background: rgba(239, 68, 68, .08)
}

.sc-lbl {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted)
}

.sc-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary)
}

.sc-bull .sc-val {
  color: var(--green)
}

.sc-bear .sc-val {
  color: var(--red)
}

/* AI score heatmap */
.ai-heat-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px
}

@media(max-width:1400px) {
  .ai-heat-grid {
    grid-template-columns: repeat(4, 1fr)
  }
}

.ai-heat-cell {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 9px 6px;
  text-align: center;
  cursor: pointer;
  transition: .15s
}

.ai-heat-cell:hover {
  transform: translateY(-2px)
}

.ahc-sym {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary)
}

.ahc-score {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1
}

.ahc-lbl {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .02em
}

.ai-heat-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--text-muted)
}

.ai-heat-legend .dot,
.cons-leg .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px
}

/* top opportunities list */
.opp-list-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer
}

.opp-list-row:last-child {
  border-bottom: none
}

.opp-rank {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.opp-list-name {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 13px;
  min-width: 70px
}

.opp-list-conf {
  font-weight: 800;
  font-size: 13px;
  margin-left: auto
}

.opp-list-rr {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  min-width: 34px;
  text-align: right
}

.opp-list-spark {
  width: 56px;
  line-height: 0
}

/* consensus donut */
.consensus-donut {
  position: relative;
  width: 130px;
  height: 130px;
  margin: 0 auto
}

.consensus-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.cons-leg {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 2px 4px
}

/* news impact */
.ni-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none
}

.ni-row:last-child {
  border-bottom: none
}

.ni-imp {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0
}

.ni-text {
  font-size: 11.5px;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1
}

.ni-time {
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0
}

/* upcoming events */
.ue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border)
}

.ue-row:last-child {
  border-bottom: none
}

.ue-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0
}

.ue-name {
  font-size: 11.5px;
  color: var(--text-primary);
  flex: 1;
  line-height: 1.25
}

.ue-imp {
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0
}

/* quick actions */
.quick-actions {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.qa-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  transition: .15s
}

.qa-btn:hover {
  border-color: var(--accent);
  color: var(--accent-light)
}

.qa-btn i {
  font-size: 14px
}

/* ═══ Market Scanner ══════════════════════════════════════════════ */
.scan-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: block
}

.scan-hint {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 5px
}

.scan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px
}

.scan-chip {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: .15s
}

.scan-chip.c-green {
  color: #4ade80
}

.scan-chip.c-red {
  color: #f87171
}

.scan-chip.c-yellow {
  color: #fbbf24
}

.scan-chip.c-blue {
  color: var(--accent-light)
}

[data-theme="light"] .scan-chip.c-green {
  color: #0f9d6e
}

[data-theme="light"] .scan-chip.c-red {
  color: #dc2626
}

[data-theme="light"] .scan-chip.c-yellow {
  color: #b45309
}

.scan-chip:hover {
  border-color: currentColor
}

.scan-chip.active {
  background: currentColor;
  border-color: currentColor
}

.scan-chip.active {
  color: #fff !important
}

.scan-chip.c-green.active {
  background: rgba(16, 185, 129, .9);
  border-color: var(--green)
}

.scan-chip.c-red.active {
  background: rgba(239, 68, 68, .9);
  border-color: var(--red)
}

.scan-chip.c-yellow.active {
  background: rgba(245, 158, 11, .9);
  border-color: var(--yellow)
}

.scan-chip.c-blue.active {
  background: var(--accent);
  border-color: var(--accent)
}

.scan-sig {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 6px;
  border: 1px solid;
  white-space: nowrap
}

.mf-icons {
  display: flex;
  gap: 6px;
  align-items: center
}

.mf-ico {
  font-size: 13px
}

.scan-actions {
  display: flex;
  gap: 6px
}

.scan-act {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  font-size: 12px
}

.scan-act:hover {
  border-color: var(--accent);
  color: var(--accent-light)
}

.scan-star.bi-star-fill {
  color: var(--yellow) !important
}

/* ═══ Auto Generate additions ═════════════════════════════════════ */
.ag-status-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border)
}

.ag-sent-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 6px
}

.ag-sent-bar {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--red), var(--yellow), var(--green))
}

.ag-sent-marker {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--bg-card);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
  transition: left .4s
}

.ag-qs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px
}

.ag-qs-row:last-child {
  border-bottom: none
}

.ag-qs-k {
  color: var(--text-muted);
  font-weight: 600
}

.ag-qs-v {
  color: var(--text-primary);
  font-weight: 700
}

/* ═══ Account approval banner ═══════════════════════════════════════ */
.approval-banner {
  margin: 0 0 16px;
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600
}

.approval-banner-pending {
  background: var(--yellow-bg, rgba(245, 158, 11, .12));
  color: var(--yellow);
  border: 1px solid rgba(245, 158, 11, .35)
}

.approval-banner-rejected {
  background: var(--red-bg, rgba(239, 68, 68, .12));
  color: var(--red);
  border: 1px solid rgba(239, 68, 68, .35)
}

.approval-banner-trial {
  background: rgba(245, 166, 35, .12);
  color: var(--accent, #f5a623);
  border: 1px solid rgba(245, 166, 35, .35)
}

/* ═══ Global page polish (lifts all .page-header pages) ═══════════ */
.page-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border)
}

.page-title {
  font-size: 22px;
  letter-spacing: -.5px
}

.page-title .bi:first-child {
  color: var(--accent)
}

/* data cells app-wide: bright on dark cards, dark on light cards */
.smart-table tbody td {
  color: var(--text-primary)
}

.smart-table tbody td .text-muted,
.smart-table tbody td small.text-muted {
  color: var(--text-muted)
}

/* ═══ Key Levels asset picker ═════════════════════════════════════ */
.kl-config {
  margin: 8px 14px 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-secondary)
}

.kl-config-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px
}

.kl-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 6px 12px;
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 10px
}

.kl-chk {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap
}

.kl-chk input {
  accent-color: var(--accent);
  cursor: pointer
}

.kl-config-actions {
  display: flex;
  gap: 8px
}

/* Top Opportunities column header */
.opp-list-head {
  cursor: default;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px
}

.opp-list-head:hover {
  background: none
}

.opp-list-head span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted)
}

.opp-head-sig {
  margin-right: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted)
}

/* ═══ EMA 9/21 MTF detail popover (TA Summary page) ═══════════════ */
.ema-popover {
  position: absolute;
  z-index: 1000;
  width: 300px;
  max-width: 92vw;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  padding: 12px
}

.ema-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border)
}

.ema-pop-close {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px
}

.ema-pop-close:hover {
  color: var(--text-primary);
  background: var(--bg-secondary)
}

.ema-pop-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--text-secondary);
  padding: 5px 0;
  border-bottom: 1px dashed var(--border)
}

.ema-pop-row:last-of-type {
  border-bottom: none
}

.ema-pop-row b {
  color: var(--text-primary);
  font-weight: 700
}

.ema-pop-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--yellow)
}

/* ═══ EMA 9/21 MTF history scrubber ═══════════════════════════════ */
.ema-scrub-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px
}

.ema-scrub-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em
}

.ema-pop-ts {
  font-size: 10px;
  color: var(--text-muted);
  margin: -2px 0 6px 2px
}

.bubble-legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bubble-legend-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.bubble-legend-label {
  font-size: 10px;
  font-weight: 700;
}

.bubble-legend-label.neg {
  color: var(--red);
}

.bubble-legend-label.pos {
  color: var(--green);
}

.bubble-canvas {
  position: relative;
  overflow: auto;
  max-height: 75vh;
  padding: 12px;
}

/* Packed circle-map bubble: a light "card" disc with a green/red ring
   showing direction, rather than a fully color-filled disc — closer to how
   traders read a market bubble map (color is a status ring, not the whole
   shape) and gives small bubbles a fighting chance at legibility since text
   sits on a near-white surface regardless of direction/theme. */
.mkt-bubble {
  position: absolute;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
  background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f1f5f9 62%, #e2e8f0 100%);
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.5), inset 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
  transition: transform .15s ease-out, box-shadow .15s ease-out, z-index 0s;
  animation: mktBubbleFloat 4.5s ease-in-out infinite, mktBubblePop .5s cubic-bezier(.34,1.56,.64,1) backwards;
}

.mkt-bubble.dir-up { border: 3px solid var(--green); }
.mkt-bubble.dir-down { border: 3px solid var(--red); }

.mkt-bubble:hover {
  transform: scale(1.1);
  z-index: 5;
  animation-play-state: paused;
  box-shadow: 0 8px 22px -4px rgba(0, 0, 0, 0.6), inset 0 -4px 8px -4px rgba(0, 0, 0, 0.15);
}

@keyframes mktBubbleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes mktBubblePop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt-bubble { animation: none; }
}

.mkt-bubble-avatar {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
}

.mkt-bubble-ticker {
  color: #64748b;
  font-weight: 700;
  letter-spacing: .02em;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-bubble-name {
  color: #0f172a;
  font-weight: 800;
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mkt-bubble-pct {
  font-weight: 800;
}

.scanner-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  padding: 16px;
}

.scanner-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  padding: 14px;
}

.scanner-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.scanner-card-symbol {
  font-weight: 700;
  color: var(--text-primary);
}

.scanner-card-price {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.scanner-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.scanner-card-metrics span.num {
  color: var(--text-primary);
  font-family: var(--font-mono);
  float: right;
}

.scanner-card-actions {
  display: flex;
  gap: 6px;
}

.scanner-card-actions .btn {
  flex: 1;
}

/* MTF Scanner cell backgrounds — bullish/bearish/mixed at a glance, on both
   the Common Coins status panel and the All Coins BUY/SELL tables. Amber is
   reserved for genuine disagreement (a mixed multi-timeframe read, or an
   unchanged live tick) — it is never used for a plain bullish/bearish call. */
.mtf-cell-bull {
  background: rgba(16, 185, 129, 0.16) !important;
  color: var(--green) !important;
  font-weight: 700;
}

.mtf-cell-bear {
  background: rgba(239, 68, 68, 0.16) !important;
  color: var(--red) !important;
  font-weight: 700;
}

.mtf-cell-mixed {
  background: rgba(245, 158, 11, 0.16) !important;
  color: var(--yellow) !important;
  font-weight: 700;
}