/* ═══════════════════════════════════════════════════════════════
   InvestFlow — Premium Dark Fintech Design System v2.0
   Cyber-Sophistication: High-end tech meets premium financial precision
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Premium Typography Stack ── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600&display=swap');

/* ── 2. Design Tokens ── */
:root {
  /* Backgrounds */
  --bg-obsidian:      #0B0F17;
  --bg-deep:          #090D14;
  --bg-surface:       #111827;
  --bg-card:          rgba(30, 41, 59, 0.55);
  --bg-card-hover:    rgba(30, 41, 59, 0.80);
  --bg-input:         rgba(15, 23, 42, 0.80);

  /* Accent — Electric Emerald (positive / primary) */
  --emerald:          #00E676;
  --emerald-dim:      rgba(0, 230, 118, 0.18);
  --emerald-glow:     0 0 20px rgba(0, 230, 118, 0.25);
  --emerald-border:   rgba(0, 230, 118, 0.30);

  /* Accent — Warm Gold (CTAs / highlights) */
  --gold:             #D4AF37;
  --gold-dim:         rgba(212, 175, 55, 0.15);
  --gold-glow:        0 0 20px rgba(212, 175, 55, 0.20);
  --gold-border:      rgba(212, 175, 55, 0.35);

  /* Text */
  --text-primary:     #F8FAFC;
  --text-secondary:   #94A3B8;
  --text-muted:       #475569;
  --text-accent:      #00E676;

  /* Borders & Grid */
  --border-subtle:    rgba(51, 65, 85, 0.60);
  --border-mid:       rgba(51, 65, 85, 0.90);
  --grid-line:        rgba(51, 65, 85, 0.35);

  /* Negative */
  --negative:         #F87171;
  --negative-glow:    0 0 12px rgba(248, 113, 113, 0.30);

  /* Legacy variable aliases (keep compatibility with existing HTML) */
  --primary:          #00E676 !important;
  --primary-dark:     #00C853 !important;
  --secondary:        #D4AF37 !important;
  --accent:           #F87171 !important;
  --success:          #00E676 !important;
  --bg-gradient:      linear-gradient(160deg, #090D14 0%, #0B0F17 50%, #090D14 100%) !important;
  --light-bg:         #111827 !important;
  --card-bg:          rgba(30, 41, 59, 0.55) !important;
  --text-main:        #F8FAFC !important;
  --text-light:       #F8FAFC !important;
  --radius-main:      12px !important;
  --radius-small:     8px !important;
  --shadow-main:      0 4px 24px rgba(0, 0, 0, 0.50) !important;
  --shadow-float:     0 8px 40px rgba(0, 230, 118, 0.08) !important;
  --shadow-deep:      0 24px 64px rgba(0, 0, 0, 0.70) !important;
}

/* ── 3. Body & Global ── */
body {
  font-family: 'Inter', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: #0B0F17 !important;
  background-image:
    radial-gradient(ellipse at 15% 40%,  rgba(0, 230, 118, 0.03) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 15%,  rgba(212, 175, 55, 0.03) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 90%,  rgba(0, 230, 118, 0.02) 0%, transparent 50%),
    linear-gradient(160deg, #090D14 0%, #0B0F17 50%, #090D14 100%) !important;
  color: #F8FAFC !important;
  min-height: 100vh;
}

/* Hairline grid texture for depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(51, 65, 85, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 65, 85, 0.18) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ── 4. Container & Layout ── */
.container, .main-content {
  position: relative;
  z-index: 1;
  background: transparent !important;
  box-shadow: none !important;
}

/* ── 5. Typography — Headers use Manrope ── */
h1, h2, h3, h4, h5, h6,
.category-header h2, .category-header h3,
.co-header h3, .econ-hdr h3 {
  font-family: 'Manrope', 'Inter', sans-serif !important;
  color: #F8FAFC !important;
  letter-spacing: -0.01em;
}

/* Numbers use JetBrains Mono */
.econ-val, .econ-card-val, .data-value, .metric-value,
.price, .change, .pct, .num, .ticker-price,
[class*="val"], [class*="price"], [class*="-num"] {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 6. Cards ── */
.card,
.category-section,
.econ-wrap,
.econ-wrap-inner {
  background: rgba(30, 41, 59, 0.55) !important;
  border: 1px solid rgba(51, 65, 85, 0.60) !important;
  border-top: 1px solid rgba(51, 65, 85, 0.80) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  color: #F8FAFC !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  position: relative !important;
}

.card:hover,
.category-section:hover {
  border-color: rgba(0, 230, 118, 0.22) !important;
  box-shadow:
    0 8px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 230, 118, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  transform: translateY(-2px) !important;
}

/* Emerald left accent bar */
.card {
  border-left: 2px solid rgba(0, 230, 118, 0.50) !important;
}

/* Hover top-glow line */
.category-section::before,
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 230, 118, 0.0), transparent);
  border-radius: 12px 12px 0 0;
  transition: background 0.3s ease;
  pointer-events: none;
}
.category-section:hover::before,
.card:hover::before {
  background: linear-gradient(90deg, transparent, rgba(0, 230, 118, 0.45), rgba(212, 175, 55, 0.20), transparent);
}

/* ── 7. Category Section variants ── */
.category-section {
  border: 1px solid rgba(51, 65, 85, 0.55) !important;
}

.category-section.featured {
  border: 1px solid rgba(0, 230, 118, 0.20) !important;
  background: rgba(0, 230, 118, 0.03) !important;
}

.category-section.news {
  border: 1px solid rgba(212, 175, 55, 0.18) !important;
  background: rgba(212, 175, 55, 0.02) !important;
}

/* ── 8. Econ indicator tiles ── */
.econ-card {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(51, 65, 85, 0.55) !important;
  color: #F8FAFC !important;
}

.econ-card:hover {
  background: rgba(30, 41, 59, 0.80) !important;
  border-color: rgba(0, 230, 118, 0.28) !important;
  box-shadow: 0 4px 20px rgba(0, 230, 118, 0.08) !important;
}

/* ── 9. Header ── */
.header {
  background: linear-gradient(160deg, #070B13 0%, #0B0F17 40%, #080C14 100%) !important;
  border: 1px solid rgba(51, 65, 85, 0.65) !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
}

/* Gold shimmer top line */
.header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.60), rgba(0, 230, 118, 0.40), transparent);
}

.header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(51, 65, 85, 0.50), transparent);
}

.header h1 {
  font-family: 'Manrope', sans-serif !important;
  font-weight: 800 !important;
  filter: drop-shadow(0 0 24px rgba(212, 175, 55, 0.25)) !important;
}

/* ── 10. Buttons ── */
.btn-sm, .btn-load, .logout-btn {
  background: rgba(30, 41, 59, 0.70) !important;
  border: 1px solid rgba(51, 65, 85, 0.80) !important;
  color: #94A3B8 !important;
  transition: all 0.2s ease !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
}

.btn-sm:hover, .btn-load:hover, .logout-btn:hover {
  background: rgba(0, 230, 118, 0.10) !important;
  border-color: rgba(0, 230, 118, 0.40) !important;
  color: #00E676 !important;
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.15) !important;
}

/* Primary CTA — Gold */
.btn-primary, button[type="submit"],
.search-btn, .btn-gradient {
  background: linear-gradient(135deg, rgba(212,175,55,0.90), rgba(234,197,92,0.90)) !important;
  border: none !important;
  color: #0B0F17 !important;
  font-weight: 700 !important;
  font-family: 'Manrope', sans-serif !important;
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.25) !important;
  letter-spacing: 0.02em;
}

.btn-primary:hover, button[type="submit"]:hover, .search-btn:hover {
  background: linear-gradient(135deg, rgba(234,197,92,1.0), rgba(212,175,55,1.0)) !important;
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.40) !important;
  transform: translateY(-1px) !important;
}

/* ── 11. Inputs & Selects ── */
input, select, textarea,
.search-input, .news-search-bar input {
  background: rgba(15, 23, 42, 0.80) !important;
  border: 1px solid rgba(51, 65, 85, 0.70) !important;
  color: #F8FAFC !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(0, 230, 118, 0.45) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0, 230, 118, 0.08) !important;
}

input::placeholder { color: #475569 !important; }

/* ── 12. Text Colors ── */
.category-name, .section-title {
  font-family: 'Manrope', sans-serif !important;
  color: #F8FAFC !important;
  font-weight: 700 !important;
}

.econ-updated, .badge-label, .timestamp {
  color: #475569 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.72rem !important;
}

/* ── 13. White/Light backgrounds → Dark ── */
.category-section .icon-wrap,
[style*="background: white"],
[style*="background:white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background: #f8f9fa"],
[style*="background: #f8fafc"],
[style*="background: #f8faff"],
[style*="background: rgb(255"] {
  background: rgba(15, 23, 42, 0.80) !important;
}

.quote-item, .ns-card, .headline-item {
  background: rgba(15, 23, 42, 0.70) !important;
  border: 1px solid rgba(51, 65, 85, 0.50) !important;
  color: #F8FAFC !important;
}

.quote-item:hover, .ns-card:hover, .headline-item:hover {
  background: rgba(30, 41, 59, 0.80) !important;
  border-color: rgba(0, 230, 118, 0.20) !important;
}

/* ── 14. Mobile landing buttons ── */
.ml-btn {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.ml-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  filter: brightness(1.0) saturate(1.05) !important;
}
.ml-label { display: none !important; }

/* ── 15. Econ card header text ── */
.econ-card-hd span:first-child {
  color: #94A3B8 !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── 16. Data Value Signal Colors ── */
.positive, .up, [class*="up"], .text-green,
[style*="color: #28a745"],
[style*="color: rgb(40, 167, 69)"],
[style*="color: #10b981"],
[style*="color: #00d084"],
[style*="color: green"] {
  color: #00E676 !important;
  text-shadow: 0 0 10px rgba(0, 230, 118, 0.35) !important;
}

.negative, .down, [class*="down"], .text-red,
[style*="color: #ff4757"],
[style*="color: #dc2626"],
[style*="color: #ef4444"],
[style*="color: red"],
[style*="color: #f43f5e"] {
  color: #F87171 !important;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.30) !important;
}

/* ── 17. Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }

::-webkit-scrollbar-track { background: #090D14; }

::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.70);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 230, 118, 0.40);
}

/* ── 18. Section / macro headers ── */
.vol-macro-header, .category-header-cal {
  background: rgba(9, 13, 20, 0.70) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.50) !important;
  color: #F8FAFC !important;
}

/* ── 19. News cards ── */
.news-dashboard, .news-card-header {
  background: rgba(15, 23, 42, 0.80) !important;
  border: 1px solid rgba(51, 65, 85, 0.50) !important;
  color: #F8FAFC !important;
}

/* ── 20. Modal / Overlay ── */
.econ-overlay {
  background: rgba(0, 0, 0, 0.80) !important;
  backdrop-filter: blur(12px) !important;
}

.econ-modal {
  background: linear-gradient(145deg, #111827, #0B0F17) !important;
  border: 1px solid rgba(51, 65, 85, 0.70) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 40px rgba(0, 230, 118, 0.05) !important;
  color: #F8FAFC !important;
}

/* ── 21. PDF viewer ── */
.pdf-viewer {
  background: rgba(9, 13, 20, 0.95) !important;
  border-top: 1px solid rgba(51, 65, 85, 0.40) !important;
}

.pdf-container {
  border: 1px solid rgba(51, 65, 85, 0.50) !important;
  background: #090D14 !important;
}

/* ── 22. Help icon ── */
.help-icon {
  background-color: rgba(0, 230, 118, 0.08) !important;
  color: #00E676 !important;
  border: 1px solid rgba(0, 230, 118, 0.20) !important;
}

.help-icon:hover {
  background-color: rgba(0, 230, 118, 0.18) !important;
  color: #00E676 !important;
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.20) !important;
}

/* ── 23. Progress / loading bar ── */
.progress-bar, .loading-bar {
  background: linear-gradient(90deg, #00C853, #00E676, #00C853) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── 24. Section headers ── */
.category-header {
  border-bottom: 1px solid rgba(51, 65, 85, 0.45);
  padding-bottom: 12px;
  margin-bottom: 16px;
}

/* ── 25. Mobile section title ── */
.ml-section-title {
  color: #94A3B8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.09em !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  font-family: 'Manrope', sans-serif !important;
}

/* ── 26. Charts / iframes ── */
iframe, .chart-container, .tradingview-widget-container {
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* ── 27. Badges & Tags ── */
.badge, .tag, .status-badge {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-size: 0.68rem !important;
  border-radius: 4px !important;
}

/* ── 28. Tables ── */
table { border-collapse: collapse !important; }

th {
  background: rgba(9, 13, 20, 0.90) !important;
  color: #94A3B8 !important;
  font-size: 0.70rem !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.60) !important;
}

td {
  background: transparent !important;
  color: #F8FAFC !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.20) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.82rem !important;
}

tr:hover td {
  background: rgba(0, 230, 118, 0.03) !important;
}

/* ── 29. Hardcoded light-bg cleanup ── */
.econ-grid .econ-card,
div[style*="background:#f"],
div[style*="background: #f"],
div[style*="background:#e"],
div[style*="background: #e"] {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #F8FAFC !important;
}

/* ── 30. Market status ── */
.market-status-title {
  color: #F8FAFC !important;
  font-weight: 600 !important;
  font-family: 'Manrope', sans-serif !important;
}

/* ── 31. Live indicator pulse ── */
@keyframes pulse-emerald {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,230,118,0); }
  50%       { opacity: 0.7; box-shadow: 0 0 0 4px rgba(0,230,118,0.15); }
}

.live-indicator, .live-dot {
  animation: pulse-emerald 2s ease-in-out infinite !important;
  color: #00E676 !important;
}

/* ── 32. Category icon bubble ── */
.category-icon-wrap, .icon-bg, .category-icon {
  background: rgba(0, 230, 118, 0.08) !important;
  border: 1px solid rgba(0, 230, 118, 0.18) !important;
  border-radius: 10px !important;
}

/* ── 33. Search result cards ── */
.search-result-card, .stock-result {
  background: rgba(15, 23, 42, 0.80) !important;
  border: 1px solid rgba(51, 65, 85, 0.50) !important;
  color: #F8FAFC !important;
}

/* ── 34. Active / selected ── */
.active, .selected, button.active, .tab.active {
  background: rgba(0, 230, 118, 0.12) !important;
  border-color: rgba(0, 230, 118, 0.40) !important;
  color: #00E676 !important;
}

/* ── 35. Dividers ── */
hr, .divider { border-color: rgba(51, 65, 85, 0.40) !important; }

/* ── 36. Tooltips ── */
.tooltip-content, .help-tooltip, [class*="tooltip"] {
  background: #111827 !important;
  border: 1px solid rgba(51, 65, 85, 0.70) !important;
  color: #F8FAFC !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.60) !important;
}

/* ── 37. Light-bg pattern overrides ── */
[style*="background: #f8f9fa"], [style*="background:#f8f9fa"],
[style*="background: #f8fafc"], [style*="background:#f8fafc"] {
  background: rgba(15, 23, 42, 0.80) !important;
}

/* ── 38. Back button ── */
.ms-back-btn {
  background: rgba(15, 23, 42, 0.90) !important;
  border: 1px solid rgba(51, 65, 85, 0.65) !important;
  color: #94A3B8 !important;
  backdrop-filter: blur(8px) !important;
}

.ms-back-btn:hover {
  border-color: rgba(0, 230, 118, 0.35) !important;
  color: #00E676 !important;
}

/* ── 39. Market regime signal colors ── */
.regime-risk-on, .signal-bullish {
  color: #00E676 !important;
  text-shadow: 0 0 12px rgba(0, 230, 118, 0.40) !important;
}
.regime-risk-off, .signal-bearish {
  color: #F87171 !important;
  text-shadow: 0 0 12px rgba(248, 113, 113, 0.40) !important;
}
.regime-neutral, .signal-neutral {
  color: #D4AF37 !important;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.30) !important;
}

/* ── 40. AI report container ── */
.ai-report-container, .report-body, .analysis-container {
  background: rgba(15, 23, 42, 0.75) !important;
  color: #F8FAFC !important;
  border: 1px solid rgba(51, 65, 85, 0.50) !important;
}

/* ── 41. Calendar ── */
.month-header {
  background: rgba(9, 13, 20, 0.90) !important;
  color: #94A3B8 !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.40) !important;
  font-family: 'Manrope', sans-serif !important;
  font-weight: 700 !important;
}

.date, .event-item-cal {
  background: rgba(15, 23, 42, 0.70) !important;
  border: 1px solid rgba(51, 65, 85, 0.35) !important;
  color: #F8FAFC !important;
}

.date:hover, .event-item-cal:hover {
  background: rgba(30, 41, 59, 0.85) !important;
  border-color: rgba(0, 230, 118, 0.22) !important;
}

.category-header-cal {
  background: rgba(9, 13, 20, 0.80) !important;
  color: #94A3B8 !important;
}

/* ── 42. AI Score grades ── */
.grade-A, .score-high { color: #00E676 !important; }
.grade-B, .score-med  { color: #D4AF37 !important; }
.grade-C, .score-low  { color: #FBBF24 !important; }
.grade-D, .score-vlow { color: #F87171 !important; }

/* ── 43. Footer ── */
footer, .footer, .page-footer {
  background: rgba(4, 7, 13, 0.97) !important;
  border-top: 1px solid rgba(51, 65, 85, 0.40) !important;
  color: #475569 !important;
}

/* ── 44. Links ── */
a {
  color: #00E676 !important;
  text-decoration: none !important;
}
a:hover { color: rgba(0, 230, 118, 0.75) !important; }

.header a { color: inherit !important; }

/* ── 45. Score / rating badges ── */
.score-badge, .rating-chip {
  background: rgba(0, 230, 118, 0.10) !important;
  border: 1px solid rgba(0, 230, 118, 0.28) !important;
  color: #00E676 !important;
}

/* ── 46. Focus ring ── */
:focus-visible {
  outline: 2px solid rgba(0, 230, 118, 0.45) !important;
  outline-offset: 2px !important;
}

/* ── 47. Selection ── */
::selection {
  background: rgba(0, 230, 118, 0.20) !important;
  color: #F8FAFC !important;
}

/* ── 48. Loading skeleton ── */
.skeleton, .loading-placeholder {
  background: linear-gradient(
    90deg,
    rgba(30,41,59,0.4) 25%,
    rgba(51,65,85,0.4) 50%,
    rgba(30,41,59,0.4) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: shimmer 1.5s infinite !important;
}

/* ── 49. Ticker / marquee ── */
.ticker-wrap, .marquee-container {
  background: rgba(4, 7, 13, 0.96) !important;
  border-top:    1px solid rgba(51, 65, 85, 0.35) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.35) !important;
  font-family: 'JetBrains Mono', monospace !important;
}

/* ── 50. Vol/macro headers ── */
.vol-macro-header h3, .vol-macro-header span {
  color: #94A3B8 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── 51. Inline color overrides (legacy) ── */
[style*="color: #718096"], [style*="color:#718096"],
[style*="color: #2d3748"], [style*="color:#2d3748"],
[style*="color: #4a5568"], [style*="color:#4a5568"] {
  color: #94A3B8 !important;
}

[style*="color: #1a202c"], [style*="color:#1a202c"],
[style*="color: #2c3e50"], [style*="color:#2c3e50"] {
  color: #F8FAFC !important;
}

/* ── 52. Light bg inline style override ── */
[style*="background: #f1f5f9"], [style*="background:#f1f5f9"],
[style*="background: #edf2f7"], [style*="background:#edf2f7"],
[style*="background: #e2e8f0"], [style*="background:#e2e8f0"] {
  background: rgba(15, 23, 42, 0.80) !important;
  color: #F8FAFC !important;
}

/* ── 53. Data rows ── */
.data-row:nth-child(even), .list-item:nth-child(even) {
  background: rgba(0, 230, 118, 0.015) !important;
}

/* ── 54. Sector pills ── */
.sector-pill, .sector-tag {
  background: rgba(15, 23, 42, 0.80) !important;
  border: 1px solid rgba(51, 65, 85, 0.55) !important;
  color: #94A3B8 !important;
}

/* ── 55. Sticky nav ── */
.sticky-nav, .fixed-header {
  background: rgba(9, 13, 20, 0.96) !important;
  backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(51, 65, 85, 0.45) !important;
}

/* ── 56. Widget / iframe cards ── */
.widget-card, .iframe-card {
  background: rgba(15, 23, 42, 0.80) !important;
  border: 1px solid rgba(51, 65, 85, 0.50) !important;
}

/* ── 57. Misc text classes ── */
.text-gray-700, .text-gray-800, .text-gray-900,
.text-slate-700, .text-slate-800 {
  color: #94A3B8 !important;
}

/* ── 58. Canvas elements ── */
canvas { border-radius: 4px !important; }

/* ── 59. Mobile adjustments ── */
@media (max-width: 768px) {
  .card, .category-section {
    border-left: 2px solid rgba(0, 230, 118, 0.40) !important;
  }
}