/* APEX SCREENER · POLISH 2026 — modern UI override layer */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --p-bg: #0b1020;
  --p-bg-soft: #131a2e;
  --p-bg-card: #0f1525;
  --p-line: rgba(148,163,184,0.10);
  --p-line-2: rgba(148,163,184,0.18);
  --p-text: #e6edf6;
  --p-text-dim: #94a3b8;
  --p-text-mute: #64748b;
  --p-accent: #38bdf8;
  --p-pos: #22c55e;
  --p-neg: #ef4444;
  --p-shadow-sm: 0 1px 2px rgba(0,0,0,0.30);
  --p-shadow: 0 4px 16px rgba(0,0,0,0.40), 0 1px 0 rgba(255,255,255,0.04) inset;
  --p-shadow-lg: 0 24px 48px -12px rgba(0,0,0,0.55);
  --p-radius-sm: 6px;
  --p-radius: 10px;
  --p-radius-lg: 16px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(56,189,248,0.06), transparent 60%), var(--p-bg) !important;
  color: var(--p-text);
  letter-spacing: -0.005em;
}

.t-table td, .t-table th, .stat-value, .price, .change, .num, code, pre {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace !important;
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

.nerve-brand h1, h1, h2, h3 {
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-shadow: none !important;
}

#nerve-header {
  background: rgba(11,16,32,0.85) !important;
  border-bottom: 1px solid var(--p-line) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  padding: 12px 20px !important;
  box-shadow: var(--p-shadow-sm);
}
.nerve-brand h1 { color: var(--p-text) !important; font-size: clamp(15px,1.1vw,22px) !important; }
.nerve-tagline { color: var(--p-text-mute) !important; letter-spacing: 0.4px !important; text-transform: none !important; }

.live-badge {
  background: rgba(34,197,94,0.10) !important;
  border-color: rgba(34,197,94,0.25) !important;
  color: var(--p-pos) !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  box-shadow: none !important;
  text-transform: none !important;
}
.live-badge::before {
  content: ''; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p-pos); margin-right: 4px;
  animation: p-pulse 2s ease-in-out infinite;
}
@keyframes p-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.stat-label { color: var(--p-text-mute) !important; letter-spacing: 0.4px !important; font-weight: 500 !important; font-size: 10px !important; }
.stat-value { color: var(--p-text) !important; font-weight: 600 !important; text-shadow: none !important; }

.search-box input {
  background: var(--p-bg-soft) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-radius) !important;
  padding: 9px 12px 9px 36px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--p-text) !important;
  transition: border-color .15s, box-shadow .15s;
}
.search-box input:focus { border-color: var(--p-accent) !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.12); outline: none !important; }
.search-box input::placeholder { color: var(--p-text-mute); }

.view-toggle { background: var(--p-bg-soft) !important; border: 1px solid var(--p-line) !important; border-radius: var(--p-radius) !important; padding: 3px !important; gap: 0 !important; }
.view-btn {
  background: transparent !important;
  color: var(--p-text-dim) !important;
  border-radius: 7px !important;
  padding: 7px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  font-size: 11px !important;
  border: none !important;
  transition: all .15s;
}
.view-btn.active {
  background: var(--p-accent) !important;
  color: #06121f !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.20) inset, 0 6px 16px -6px rgba(56,189,248,0.6);
}

.filter-chip {
  background: var(--p-bg-soft) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  color: var(--p-text-dim) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  transition: all .15s;
}
.filter-chip:hover { border-color: var(--p-line-2) !important; color: var(--p-text) !important; }
.filter-chip.active { background: rgba(56,189,248,0.12) !important; border-color: rgba(56,189,248,0.45) !important; color: var(--p-accent) !important; }

.t-table { background: var(--p-bg-card); border-radius: var(--p-radius-lg); overflow: hidden; box-shadow: var(--p-shadow); }
.t-table thead { background: rgba(255,255,255,0.02); }
.t-table th {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: var(--p-text-mute) !important;
  border-bottom: 1px solid var(--p-line) !important;
  padding: 12px 14px !important;
}
.t-table td {
  border-bottom: 1px solid var(--p-line) !important;
  padding: 12px 14px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: var(--p-text) !important;
}
.t-table tr { transition: background .12s; }
.t-table tr:hover { background: rgba(56,189,248,0.04) !important; }
.t-sym { font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 13px !important; color: var(--p-text) !important; }
.t-name { font-family: 'Inter', sans-serif !important; font-size: 11px !important; color: var(--p-text-mute) !important; font-weight: 400 !important; }
.t-logo { border-radius: 50% !important; border: 1px solid var(--p-line) !important; }

.pos { color: var(--p-pos) !important; }
.neg { color: var(--p-neg) !important; }

#detail-panel { background: var(--p-bg-card) !important; border-left: 1px solid var(--p-line) !important; box-shadow: var(--p-shadow-lg); }
.d-x {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--p-line) !important;
  color: var(--p-text-dim) !important;
  border-radius: 999px !important;
  width: 36px !important; height: 36px !important;
  font-size: 18px !important;
  transition: all .15s;
}
.d-x:hover { background: rgba(255,255,255,0.10) !important; color: var(--p-text) !important; }

#loading { background: linear-gradient(180deg, var(--p-bg) 0%, #060912 100%) !important; }

.ctrl-btn {
  background: var(--p-bg-soft) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-radius-sm) !important;
  color: var(--p-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
  transition: all .15s;
}
.ctrl-btn:hover { background: var(--p-bg-card) !important; border-color: var(--p-line-2) !important; }

.nerve-pulse, .card, .panel, .stat-card {
  background: var(--p-bg-card) !important;
  border: 1px solid var(--p-line) !important;
  border-radius: var(--p-radius-lg) !important;
  box-shadow: var(--p-shadow-sm);
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--p-bg); }
::-webkit-scrollbar-thumb { background: var(--p-line-2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--p-text-mute); }

.t-table *, .stat-value, .nerve-brand *, .view-btn, .filter-chip { text-shadow: none !important; }

#nerve-canvas { background: radial-gradient(ellipse at center, rgba(15,21,37,0.95), rgba(11,16,32,1)) !important; }

@media (max-width: 480px) {
  #nerve-header { padding: 10px 12px !important; gap: 8px !important; }
  .t-table td, .t-table th { padding: 10px 10px !important; font-size: 12px !important; }
  .filter-chip { padding: 5px 10px !important; font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════
 * 2026-05-06 — TABLE MODE SCROLL FIX
 * Was: body{overflow:hidden} + #table-view{height:100%;overflow:auto}
 *      → only ~5 rows visible, user must scroll INSIDE inner div.
 *      Mobile users don't realize the gesture and think it's broken.
 * Now: in table mode, let the page itself scroll naturally,
 *      so all 100 rows flow top-to-bottom like every other screener.
 * Scope: only when #table-view is active. Nerve mode unchanged.
 * ═══════════════════════════════════════════════════════════════ */
body:has(#table-view.active) { overflow: auto !important; height: auto !important; }
body:has(#table-view.active) #app { height: auto !important; min-height: 100vh; }
body:has(#table-view.active) #nerve-main { flex: none !important; overflow: visible !important; height: auto !important; }
body:has(#table-view.active) #table-view { height: auto !important; overflow: visible !important; padding-bottom: 80px; }
body:has(#table-view.active) .t-table thead { position: sticky; top: 0; z-index: 50; background: var(--p-bg-soft); }

/* Mobile column trimming so horizontal scroll isn't required */
@media (max-width: 760px) {
  body:has(#table-view.active) .t-table { min-width: 0 !important; }
  body:has(#table-view.active) .col-7d, 
  body:has(#table-view.active) .col-txns, 
  body:has(#table-view.active) .col-mcap,
  body:has(#table-view.active) .col-liq,
  body:has(#table-view.active) .spark-cell { display: none !important; }
  body:has(#table-view.active) .t-rank { display: none !important; }
  body:has(#table-view.active) .t-name { display: none !important; }
  body:has(#table-view.active) .t-table td, 
  body:has(#table-view.active) .t-table th { padding: 10px 6px !important; font-size: 11px !important; }
}

/* 2026-05-06 fix — sticky header was translucent, prev row bled through */
body:has(#table-view.active) .t-table thead {
  background: #0f1525 !important;  /* fully solid, no transparency */
  box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
}
body:has(#table-view.active) .t-table thead th {
  background: #0f1525 !important;
}
/* Bottom tooltip + bottom nav collision — push tooltip up so it sits above nav */
body:has(#table-view.active) #table-view { padding-bottom: 120px !important; }
body:has(#table-view.active) .nerve-pulse,
body:has(#table-view.active) [class*="floating"],
body:has(#table-view.active) .help-bubble { bottom: 80px !important; }