/* ============================================================
   ApexView — Design System v2
   Palette : zinc-950 + cyan-500
   Typo    : Inter
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  /* Fond */
  --ds-bg:        #09090b;
  --ds-surface:   #18181b;
  --ds-surface-2: #27272a;
  --ds-surface-3: #3f3f46;

  /* Bordures */
  --ds-border:    #3f3f46;
  --ds-border-2:  #52525b;

  /* Texte */
  --ds-text:      #fafafa;
  --ds-text-2:    #d4d4d8;
  --ds-muted:     #a1a1aa;
  --ds-faint:     #71717a;

  /* Accent */
  --ds-accent:        #2563eb;
  --ds-accent-hover:  #1d4ed8;
  --ds-accent-dim:    rgba(37,99,235,.12);
  --ds-accent-glow:   rgba(37,99,235,.25);

  /* Sémantiques */
  --ds-positive:  #22c55e;
  --ds-negative:  #ef4444;
  --ds-warning:   #f59e0b;
  --ds-info:      #06b6d4;

  --ds-positive-dim: rgba(34,197,94,.12);
  --ds-negative-dim: rgba(239,68,68,.12);
  --ds-warning-dim:  rgba(245,158,11,.12);

  /* Typo */
  --ds-font:      'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Radius */
  --ds-radius-sm: 6px;
  --ds-radius:    10px;
  --ds-radius-lg: 14px;
  --ds-radius-xl: 20px;

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

  /* Transitions */
  --ds-transition: 150ms ease;
  --ds-transition-slow: 250ms ease;

  /* Ombres */
  --ds-shadow:    0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --ds-shadow-lg: 0 4px 16px rgba(0,0,0,.5);
  --ds-shadow-accent: 0 0 0 1px var(--ds-accent), 0 0 12px var(--ds-accent-glow);
}

/* ── Ticker Bar — layout uniquement, animation via JS ── */
.ds-ticker-bar {
  position: sticky;
  top: 44px;
  z-index: 150;
  background: #111113;
  border-bottom: 1px solid #3f3f46;
  height: 30px;
  overflow: hidden;
  user-select: none;
  pointer-events: none; /* réactivé sur les items via JS */
}
@media (max-width: 768px) { .ds-ticker-bar { display: none; } }

/* ── Nav principale ──────────────────────────── */
nav.ds-nav {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 12px;
  gap: 2px;
  position: sticky;
  top: 0;
  z-index: 200;
  backdrop-filter: blur(14px);
  overflow: visible;
}

.ds-nav-item {
  font-family: var(--ds-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ds-muted);
  padding: 5px 10px;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  transition: color var(--ds-transition), background var(--ds-transition);
  white-space: nowrap;
  position: relative;
  border: none;
  background: transparent;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ds-nav-item:hover { color: var(--ds-text); background: var(--ds-surface-2); }

.ds-nav-item.active {
  color: var(--ds-accent) !important;
}

.ds-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 6px; right: 6px;
  height: 2px;
  background: var(--ds-accent);
  border-radius: 2px 2px 0 0;
}

/* Chevron sur les items avec mega-menu */
.ds-nav-item.has-menu > span::after {
  content: '▾';
  font-size: 9px;
  margin-left: 3px;
  opacity: .5;
}

/* ── Mega-menu ───────────────────────────────── */
.ds-megamenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg);
  padding: 14px;
  gap: 20px;
  min-width: 340px;
  box-shadow: var(--ds-shadow-lg);
  z-index: 500;
  flex-direction: row;
}

.ds-megamenu-group {
  min-width: 150px;
  flex: 1;
}

.ds-megamenu-group-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-faint);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-megamenu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--ds-radius-sm);
  cursor: pointer;
  transition: background var(--ds-transition);
}

.ds-megamenu-item:hover { background: var(--ds-surface-2); }

.ds-megamenu-item-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ds-text-2);
  flex: 1;
}

.ds-megamenu-item:hover .ds-megamenu-item-label { color: var(--ds-text); }

/* ── Badges ──────────────────────────────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 2px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.ds-badge-paid   { background: var(--ds-accent-dim);         color: var(--ds-accent);   border: 1px solid rgba(6,182,212,.2); }
.ds-badge-vip    { background: rgba(245,158,11,.12);          color: #f59e0b;             border: 1px solid rgba(245,158,11,.2); }
.ds-badge-new    { background: rgba(6,182,212,.12);          color: #22d3ee;             border: 1px solid rgba(6,182,212,.2); }
.ds-badge-member { background: rgba(34,197,94,.1);            color: var(--ds-positive);  border: 1px solid rgba(34,197,94,.2); }
.ds-badge-up     { background: var(--ds-positive-dim);        color: var(--ds-positive); }
.ds-badge-down   { background: var(--ds-negative-dim);        color: var(--ds-negative); }

/* ── Réécriture nav app.css ──────────────────── */
.ds-nav-item.nav-btn::after { display: none; }
.ds-nav-item.nav-btn:not(.active) { color: var(--ds-muted); border-bottom: none; }

/* ── Hamburger mobile DS ─────────────────────── */
.hamburger-menu {
  background: var(--ds-bg) !important;
  border: 1px solid var(--ds-border) !important;
  border-top: none !important;
  overflow-y: auto;
  max-height: calc(100dvh - 80px);
}

.hamburger-section {
  font-family: var(--ds-font);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ds-faint);
  padding: 12px 18px 6px;
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  border-top: 1px solid var(--ds-border);
  margin-top: 4px;
}

.hamburger-item {
  background: none !important;
  border: none !important;
  border-bottom: 1px solid rgba(63,63,70,.35) !important;
  color: var(--ds-text-2) !important;
  font-family: var(--ds-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  padding: 13px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background var(--ds-transition), color var(--ds-transition) !important;
}

.hamburger-item:hover {
  background: var(--ds-surface-2) !important;
  color: var(--ds-text) !important;
}

.hamburger-item--primary {
  color: var(--ds-text) !important;
  font-weight: 600 !important;
  background: var(--ds-accent-dim) !important;
  border-bottom-color: var(--ds-border) !important;
}

.hi-icon {
  font-size: 15px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: .8;
}

.hi-badge {
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 6px;
  border-radius: 20px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.hi-badge-paid { background: var(--ds-accent-dim); color: var(--ds-accent); border: 1px solid rgba(6,182,212,.2); }
.hi-badge-vip  { background: rgba(245,158,11,.12); color: #f59e0b;          border: 1px solid rgba(245,158,11,.2); }
.hi-badge-new  { background: rgba(6,182,212,.12); color: #22d3ee;          border: 1px solid rgba(6,182,212,.2); }

/* ══════════════════════════════════════════════════════
   BRIDGE GLOBAL — vieilles variables → tokens DS
   Design-system.css se charge après app.css, ces :root
   écrasent les alias définis dans app.css et propagent
   le nouveau look sur toute l'application.
   ══════════════════════════════════════════════════════ */
:root {
  /* Fonds — zinc (remplace le noir verre) */
  --bg:     #09090b;           /* zinc-950 */
  --panel:  #09090b;           /* zinc-950 */
  --card:   #18181b;           /* zinc-900  (était rgba(255,255,255,.08) glass) */
  --soft:   #27272a;           /* zinc-800  hover, nested */

  /* Bordures — zinc plat (remplace les bordures cyan translucides) */
  --border: #3f3f46;           /* zinc-700 */
  --line:   rgba(63,63,70,.6); /* zinc-700/60 */

  /* Accent — DS cyan (légèrement différent de #00e5ff) */
  --accent: #06b6d4;           /* cyan-500 */

  /* Texte — zinc */
  --text:   #fafafa;           /* zinc-50 */
  --muted:  #a1a1aa;           /* zinc-400 */

  /* Sémantiques */
  --green:  #22c55e;           /* green-500 */
  --red:    #ef4444;           /* red-500 */
  --yellow: #f59e0b;           /* amber-500 */

  /* Typographie — Inter partout (supprime Playfair Display) */
  --font:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --title:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radius cards — 12px (remplace 24px trop arrondi) */
  --radius-card: 12px;

  /* Transitions — plus rapides */
  --transition: 150ms ease;
}

/* body de base — Inter + tabular-nums global */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #09090b;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;   /* chiffres largeur fixe partout */
}

/* --mono bridge (adresses, hashes, COT times) */
:root {
  --mono: 'IBM Plex Mono', 'Fira Code', monospace;
}

/* header DS — zinc au lieu du gradient */
header {
  background: #18181b !important;
  border-bottom: 1px solid #3f3f46 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* stat-pills DS */
.stat-pill {
  background: #27272a !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.stat-pill:hover {
  border-color: #52525b !important;
  transform: none !important;
}

/* table-wrap / cards génériques */
.table-wrap {
  background: #18181b;
  border: 1px solid #3f3f46;
  border-radius: 12px;
}

/* ── Stat Cards DS ─────────────────────────── */
.stats-grid { gap: 10px !important; }

.stat-card {
  background: #18181b !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.45) !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  gap: 3px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.stat-card::before,
.stat-card::after { display: none !important; }
.stat-card:hover {
  transform: none !important;
  box-shadow: 0 2px 16px rgba(6,182,212,.1) !important;
}
.stat-card .val {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -.5px !important;
  line-height: 1.1 !important;
  font-family: var(--ds-font) !important;
  color: var(--ds-text) !important;
}
.stat-card .lbl {
  font-size: .58rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--ds-muted) !important;
  margin-top: 0 !important;
}
.stat-card.green .val { color: var(--ds-positive) !important; }
.stat-card.red   .val { color: var(--ds-negative) !important; }
.stat-card.blue  .val { color: var(--ds-accent)   !important; }
.stat-card.yellow .val{ color: var(--ds-warning)  !important; }

/* ── Expert Live Cards DS ─────────────────── */
.expert-live-card {
  background: #18181b !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.45) !important;
  transition: border-color 150ms ease !important;
}
.expert-live-label {
  font-size: .57rem !important;
  color: var(--ds-muted) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  font-weight: 600 !important;
}
.expert-live-value {
  font-family: var(--ds-font) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--ds-text) !important;
  line-height: 1.2 !important;
  letter-spacing: -.3px !important;
}
.expert-live-sub {
  font-size: .6rem !important;
  color: var(--ds-faint) !important;
  margin-top: 4px !important;
}

/* ── Dir Badges DS ───────────────────────────── */
.dir-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 99px !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  border: 1px solid transparent !important;
}
.dir-badge.dir-buy, .dir-buy {
  background: rgba(34,197,94,.12) !important;
  color: #22c55e !important;
  border-color: rgba(34,197,94,.25) !important;
}
.dir-badge.dir-sell, .dir-sell {
  background: rgba(239,68,68,.12) !important;
  color: #ef4444 !important;
  border-color: rgba(239,68,68,.25) !important;
}
.dir-badge.dir-neutral, .dir-neutral {
  background: rgba(245,158,11,.1) !important;
  color: #f59e0b !important;
  border-color: rgba(245,158,11,.2) !important;
}

/* ── Signal Tags DS ───────────────────────────── */
.tag {
  display: inline-flex !important;
  align-items: center !important;
  padding: 2px 7px !important;
  border-radius: 4px !important;
  font-size: .58rem !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  margin-right: 3px !important;
  border: 1px solid transparent !important;
}
.tag-volume  { background: rgba(6,182,212,.1)   !important; color: #06b6d4 !important; border-color: rgba(6,182,212,.2)   !important; }
.tag-rsi     { background: rgba(245,158,11,.1)  !important; color: #f59e0b !important; border-color: rgba(245,158,11,.2)  !important; }
.tag-macd    { background: rgba(6,182,212,.1)  !important; color: #22d3ee !important; border-color: rgba(6,182,212,.2)  !important; }
.tag-bb      { background: rgba(236,72,153,.1)  !important; color: #f472b6 !important; border-color: rgba(236,72,153,.2)  !important; }
.tag-funding { background: rgba(34,197,94,.1)   !important; color: #22c55e !important; border-color: rgba(34,197,94,.2)   !important; }
.tag-whale   { background: rgba(6,182,212,.1)  !important; color: #22d3ee !important; border-color: rgba(6,182,212,.2)  !important; }
.tag-pump    { background: rgba(239,68,68,.1)   !important; color: #ef4444 !important; border-color: rgba(239,68,68,.2)   !important; }
.tag-green   { background: rgba(34,197,94,.1)   !important; color: #22c55e !important; border-color: rgba(34,197,94,.2)   !important; }
.tag-red     { background: rgba(239,68,68,.1)   !important; color: #ef4444 !important; border-color: rgba(239,68,68,.2)   !important; }
.tag-cyan    { background: rgba(6,182,212,.1)   !important; color: #06b6d4 !important; border-color: rgba(6,182,212,.2)   !important; }
.tag-yellow  { background: rgba(245,158,11,.1)  !important; color: #f59e0b !important; border-color: rgba(245,158,11,.2)  !important; }
.tag-purple  { background: rgba(6,182,212,.1)  !important; color: #22d3ee !important; border-color: rgba(6,182,212,.2)  !important; }

/* ── Score Bar DS ─────────────────────────────── */
.score-bar {
  width: 52px !important;
  height: 4px !important;
  background: #3f3f46 !important;
  border-radius: 2px !important;
}
.score-buy  .score-fill { background: #22c55e !important; }
.score-sell .score-fill { background: #ef4444 !important; }
.score-neutral .score-fill { background: #f59e0b !important; }

/* ── Table-wrap elevation ─────────────────── */
.table-wrap {
  background: #18181b;
  border: 1px solid #3f3f46;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

/* ── Tables DS ────────────────────────────────── */
table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-size: .82rem !important;
  font-family: var(--ds-font) !important;
}
table th {
  padding: 12px 16px !important;
  text-align: left !important;
  font-size: .6rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #52525b !important;
  background: #18181A !important;
  border-bottom: 1px solid #27272a !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  user-select: none !important;
}
table th:hover { color: #a1a1aa !important; }
table thead { background: #18181A !important; position: sticky; top: 0; z-index: 2; }
table td {
  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(39,39,42,.8) !important;
  color: #a1a1aa !important;
  font-size: .83rem !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}
table tbody tr:nth-child(odd) td  { background: rgba(0,0,0,.12) !important; }
table tbody tr:nth-child(even) td { background: transparent !important; }
table tbody tr:hover td { background: rgba(255,255,255,.05) !important; color: #f4f4f5 !important; }
table tbody tr:last-child td { border-bottom: none !important; }

/* Valeurs colorées dans les tables */
.up, .positive, [style*="color:var(--green)"] { color: var(--ds-positive) !important; }
.dn, .negative, [style*="color:var(--red)"]   { color: var(--ds-negative) !important; }

/* ── Stat-pills header DS ─────────────────────── */
.stat-pill {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 8px !important;
  border-radius: 0 !important;
  font-size: .68rem !important;
  color: var(--ds-muted) !important;
  transform: none !important;
  position: relative !important;
}
.stat-pill + .stat-pill::before {
  content: '·';
  position: absolute;
  left: -2px;
  color: #3f3f46;
}
.stat-pill:hover { transform: none !important; border-color: transparent !important; }
.stat-pill b { color: var(--ds-text) !important; font-weight: 600 !important; }

/* ── nav-page-btn (hub pages — peuvent rester mais on les repasse DS) */
.nav-page-btn {
  background: #18181b !important;
  border: 1px solid #3f3f46 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transform: none !important;
}
.nav-page-btn:hover {
  border-color: #06b6d4 !important;
  background: #1e2a35 !important;
  transform: none !important;
  box-shadow: none !important;
}