/* ═══════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  /* Typography — Inspired by Binance refined fonts + Robinhood bold clarity */
  --font-display: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Instrument Serif', serif;

  /* Type Scale — TradingView-inspired density with Robinhood readability */
  --text-xs: 10px;
  --text-sm: 11.5px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 34px;

  /* Spacing — Binance-style tighter, more intentional */
  --sp-1: 4px; --sp-2: 8px; --sp-2.5: 10px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;

  /* Radius — Binance: subtle roundness, not bubbly */
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-pill: 9999px;

  /* === DARK THEME — Binance "Midnight Black" inspired === */
  /* True black base like Binance Midnight, not navy-blue */
  --bg-base: #0b0e11;
  --bg-surface-1: #12161c;
  --bg-surface-2: #181c25;
  --bg-surface-3: #1e2330;
  --bg-overlay: rgba(11,14,17,0.90);

  /* Brand — single neon accent like Robinhood's "Robin Neon" philosophy
     but using a warm gold/amber instead of green to differentiate */
  --brand: #f0b90b;
  --brand-dim: rgba(var(--brand-rgb), 0.08);
  --brand-glow: rgba(var(--brand-rgb), 0.18);
  --brand-secondary: #2d7ff9;
  --brand-secondary-dim: rgba(45,127,249,0.08);

  /* Semantic — TradingView green/red standard */
  --positive: #0ecb81;
  --positive-dim: rgba(var(--positive-rgb), 0.10);
  --negative: #f6465d;
  --negative-dim: rgba(var(--negative-rgb), 0.10);
  --warning: #f0b90b;
  --warning-dim: rgba(var(--brand-rgb), 0.10);
  /* RGB channels — use in rgba(var(--X-rgb), alpha) to adapt alpha tints per theme */
  --positive-rgb: 14, 203, 129;
  --negative-rgb: 246, 70, 93;
  --warning-rgb:  240, 185, 11;
  --brand-rgb:    240, 185, 11;

  /* Text — Robinhood-style high contrast hierarchy */
  --text-primary: #eaecef;
  --text-secondary: #848e9c;
  --text-tertiary: #5e6673;
  --text-disabled: #474d57;

  /* Borders — Binance: very subtle, near-invisible */
  --border-subtle: rgba(234,236,239,0.04);
  --border-default: rgba(234,236,239,0.08);
  --border-prominent: rgba(234,236,239,0.14);
  --border-brand: rgba(var(--brand-rgb), 0.25);

  /* Shadows — Binance: minimal, depth through layering not shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 24px rgba(var(--brand-rgb), 0.12);
  /* Hover tint — subtle overlay on interactive rows (theme-aware) */
  --hover-tint: rgba(255,255,255,0.03);
  --hover-tint-strong: rgba(255,255,255,0.05);

  /* Chart colors */
  --chart-grid: rgba(234,236,239,0.04);
  --chart-watermark: rgba(var(--brand-rgb), 0.03);
  --chart-candle-up: #0ecb81;
  --chart-candle-down: #f6465d;
  --chart-vol-up: rgba(var(--positive-rgb), 0.10);
  --chart-vol-down: rgba(var(--negative-rgb), 0.10);
  --chart-price-line: rgba(var(--brand-rgb), 0.35);
  --chart-price-label: rgba(var(--brand-rgb), 0.9);
  --chart-ma20: rgba(45,127,249,0.75);
  --chart-ma50: rgba(var(--brand-rgb), 0.6);
  --chart-rsi-line: #f0b90b;
  --chart-rsi-grid: rgba(234,236,239,0.06);
  --chart-rsi-grid-mid: rgba(234,236,239,0.12);
  --chart-axis-text: #5e6673;
  --chart-signal-up: rgba(var(--positive-rgb), 0.85);
  --chart-signal-down: rgba(var(--negative-rgb), 0.85);

  /* Misc */
  --heading-white: #eaecef;
  --logo-stroke: white;
  --ticker-bg: #0b0e11;
  --header-bg: rgba(11,14,17,0.96);
  --scrollbar-thumb: rgba(234,236,239,0.10);
}

/* ═══════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════ */
html.light {
  --bg-base: #fafafa;
  --bg-surface-1: #ffffff;
  --bg-surface-2: #f5f5f5;
  --bg-surface-3: #eeeeee;
  --bg-overlay: rgba(250,250,250,0.90);

  --brand: #c99400;
  --brand-dim: rgba(201,148,0,0.07);
  --brand-glow: rgba(201,148,0,0.14);
  --brand-secondary: #1e6feb;
  --brand-secondary-dim: rgba(30,111,235,0.07);

  --positive: #03a66d;
  --positive-dim: rgba(3,166,109,0.07);
  --negative: #cf304a;
  --negative-dim: rgba(207,48,74,0.07);
  --warning: #c99400;
  --warning-dim: rgba(201,148,0,0.07);
  /* RGB channels — matched to light theme hex values */
  --positive-rgb: 3, 166, 109;
  --negative-rgb: 207, 48, 74;
  --warning-rgb:  201, 148, 0;
  --brand-rgb:    201, 148, 0;

  --text-primary: #1e2329;
  --text-secondary: #474d57;
  --text-tertiary: #848e9c;
  --text-disabled: #b7bdc6;

  --border-subtle: rgba(30,35,41,0.05);
  --border-default: rgba(30,35,41,0.08);
  --border-prominent: rgba(30,35,41,0.14);
  --border-brand: rgba(201,148,0,0.20);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);
  --shadow-glow: 0 0 20px rgba(201,148,0,0.08);
  /* Hover tint — dark overlay on light backgrounds (theme-aware) */
  --hover-tint: rgba(0,0,0,0.03);
  --hover-tint-strong: rgba(0,0,0,0.05);

  --chart-grid: rgba(30,35,41,0.04);
  --chart-watermark: rgba(201,148,0,0.04);
  --chart-candle-up: #03a66d;
  --chart-candle-down: #cf304a;
  --chart-vol-up: rgba(3,166,109,0.06);
  --chart-vol-down: rgba(207,48,74,0.06);
  --chart-price-line: rgba(201,148,0,0.20);
  --chart-price-label: rgba(201,148,0,0.85);
  --chart-ma20: rgba(30,111,235,0.6);
  --chart-ma50: rgba(201,148,0,0.5);
  --chart-rsi-line: #c99400;
  --chart-rsi-grid: rgba(30,35,41,0.06);
  --chart-rsi-grid-mid: rgba(30,35,41,0.12);
  --chart-axis-text: #b7bdc6;
  --chart-signal-up: rgba(3,166,109,0.80);
  --chart-signal-down: rgba(207,48,74,0.80);

  --heading-white: #1e2329;
  --logo-stroke: white;
  --ticker-bg: #ffffff;
  --header-bg: rgba(255,255,255,0.94);
  --scrollbar-thumb: rgba(30,35,41,0.12);
}

/* ═══════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: var(--text-base);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-display);
  background: var(--bg-base);
  color: var(--text-primary);
  overflow-x: hidden;
  min-height: 100vh;
  line-height: 1.5;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(var(--brand-rgb), 0.015) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
html.light body::before {
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(201,148,0,0.02) 0%, transparent 70%);
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: var(--r-sm); }

.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }

a { color: inherit; text-decoration: none; }
button { font-family: var(--font-display); cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: var(--font-display); }
img { display: block; max-width: 100%; }

/* ═══════════════════════════════════════════════
   COMPONENT STYLES
   ═══════════════════════════════════════════════ */

/* Cards — Binance: flat, no shadow, ultra-subtle border */
.card {
  background: var(--bg-surface-1);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: border-color 0.2s ease;
}
.card:hover { border-color: var(--border-prominent); }
.card-inner {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

/* Card header */
.card-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  letter-spacing: -0.01em;
}
.card-title i { color: var(--brand); font-size: var(--text-sm); }
.card-meta {
  font-size: var(--text-xs);
  color: var(--text-disabled);
  font-family: var(--font-mono);
}

/* Buttons */
.btn-primary {
  background: var(--brand);
  color: #fff;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.btn-primary:hover { background: #4090ff; box-shadow: var(--shadow-glow); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.97); }

.btn-upgrade {
  background: linear-gradient(135deg, var(--brand), #d4a00a);
  color: #0b0e11;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.btn-upgrade:hover { box-shadow: var(--shadow-glow); transform: translateY(-1px); }

.btn-ghost {
  background: var(--brand-dim);
  border: 1px solid var(--border-brand);
  color: var(--brand);
  border-radius: var(--r-md);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.btn-ghost:hover { background: var(--brand-glow); }

.btn-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}
.btn-icon:hover { background: var(--bg-surface-3); color: var(--text-primary); }

/* Badges */
.badge {
  display: inline-flex; align-items: center;
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
}
.badge-positive { background: var(--positive-dim); color: var(--positive); }
.badge-negative { background: var(--negative-dim); color: var(--negative); }
.badge-brand { background: var(--brand-dim); color: var(--brand); }
.badge-warning { background: var(--warning-dim); color: var(--warning); }
.badge-neutral { background: var(--bg-surface-3); color: var(--text-secondary); }
.badge-live {
  background: rgba(var(--brand-rgb), 0.10); color: var(--brand);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Tabs */
.tab-group { display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); }
.tab-item {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}
.tab-item:hover { color: var(--text-secondary); }
.tab-item.active { color: var(--brand); border-bottom-color: var(--brand); }

.tab-pills { display: flex; gap: var(--sp-1); }
.tab-pill {
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  border-radius: var(--r-pill);
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.tab-pill:hover { color: var(--text-secondary); background: var(--bg-surface-2); }
.tab-pill.active { color: var(--brand); background: var(--brand-dim); border-color: rgba(var(--brand-rgb), 0.15); }

/* Progress */
.progress { height: 5px; background: var(--bg-surface-3); border-radius: var(--r-sm); overflow: hidden; }
.progress-fill { height: 100%; border-radius: var(--r-sm); transition: width 0.4s ease; }
.progress-fill.up { background: linear-gradient(90deg, #0a9c63, var(--positive)); }
.progress-fill.down { background: linear-gradient(90deg, #c42941, var(--negative)); }

/* Toggle */
.toggle { position: relative; width: 36px; height: 20px; cursor: pointer; display: inline-block; }
.toggle input { display: none; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--bg-surface-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--border-default);
  transition: all 0.25s ease;
}
.toggle-track::before {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  left: 2px; top: 2px;
  background: var(--text-tertiary);
  border-radius: 50%;
  transition: all 0.25s ease;
}
.toggle input:checked + .toggle-track { background: var(--brand-dim); border-color: var(--brand); }
.toggle input:checked + .toggle-track::before { transform: translateX(16px); background: var(--brand); }

/* Input */
.input-search {
  background: var(--bg-surface-2);
  border: 1px solid var(--border-default);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  padding-left: 36px;
  color: var(--text-primary);
  outline: none;
  font-size: var(--text-base);
  width: 320px;
  transition: all 0.2s ease;
}
.input-search:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }
.input-search::placeholder { color: var(--text-disabled); }

/* Footer */
.footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-1);
  padding: var(--sp-8) var(--sp-4) var(--sp-6);
  margin-top: var(--sp-4);
}
.footer-inner {
  max-width: 1920px; margin: 0 auto;
}
.footer-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.footer-links a {
  font-size: var(--text-sm); color: var(--text-tertiary);
  transition: color 0.15s;
}
.footer-links a:hover { color: var(--text-secondary); }
.footer-disclaimer {
  font-size: var(--text-xs); color: var(--text-disabled);
  line-height: 1.6; max-width: 800px;
  margin-bottom: var(--sp-4);
}
.footer-copyright {
  font-size: var(--text-xs); color: var(--text-disabled);
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
}
.footer-copyright a { color: var(--text-tertiary); }
.footer-copyright a:hover { color: var(--text-secondary); }


/* FA icon fallback — show text if FA font fails to load */
.fa-solid, .fa-regular, .fa-brands {
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}
/* Unicode fallbacks when FA fails — applied via JS detection below */
.fa-fallback .fa-ranking-star::before { content: '★'; font-family: var(--font-display); }
.fa-fallback .fa-crosshairs::before { content: '◎'; font-family: var(--font-display); }
.fa-fallback .fa-calendar-days::before { content: '📅'; font-family: var(--font-display); }
.fa-fallback .fa-users::before { content: '👥'; font-family: var(--font-display); }
.fa-fallback .fa-newspaper::before { content: '📰'; font-family: var(--font-display); }
.fa-fallback .fa-robot::before { content: '🤖'; font-family: var(--font-display); }
.fa-fallback .fa-fire::before { content: '🔥'; font-family: var(--font-display); }
.fa-fallback .fa-chart-pie::before { content: '📊'; font-family: var(--font-display); }
.fa-fallback .fa-chart-simple::before { content: '📈'; font-family: var(--font-display); }
.fa-fallback .fa-chart-bar::before { content: '📊'; font-family: var(--font-display); }
.fa-fallback .fa-table-cells::before { content: '▦'; font-family: var(--font-display); }
.fa-fallback .fa-arrow-trend-up::before { content: '↑'; font-family: var(--font-display); }
.fa-fallback .fa-arrow-trend-down::before { content: '↓'; font-family: var(--font-display); }
.fa-fallback .fa-fire-flame-curved::before { content: '🔥'; font-family: var(--font-display); }
.fa-fallback .fa-lock::before { content: '🔒'; font-family: var(--font-display); }
.fa-fallback .fa-bolt::before { content: '⚡'; font-family: var(--font-display); }
.fa-fallback .fa-check::before { content: '✓'; font-family: var(--font-display); }
.fa-fallback .fa-plus::before { content: '+'; font-family: var(--font-display); }
.fa-fallback .fa-xmark::before { content: '✕'; font-family: var(--font-display); }
.fa-fallback .fa-magnifying-glass::before { content: '⌕'; font-family: var(--font-display); }
.fa-fallback .fa-gear::before { content: '⚙'; font-family: var(--font-display); }
.fa-fallback .fa-credit-card::before { content: '💳'; font-family: var(--font-display); }
.fa-fallback .fa-key::before { content: '🔑'; font-family: var(--font-display); }
.fa-fallback .fa-circle-question::before { content: '?'; font-family: var(--font-display); }
.fa-fallback .fa-arrow-right-from-bracket::before { content: '→'; font-family: var(--font-display); }
.fa-fallback .fa-arrow-right::before { content: '→'; font-family: var(--font-display); }
.fa-fallback .fa-arrow-left::before { content: '←'; font-family: var(--font-display); }
.fa-fallback .fa-circle::before { content: '●'; font-family: var(--font-display); }
.fa-fallback .fa-heart::before { content: '♡'; font-family: var(--font-display); }
.fa-fallback .fa-comment::before { content: '💬'; font-family: var(--font-display); }
.fa-fallback .fa-share::before { content: '↗'; font-family: var(--font-display); }
.fa-fallback .fa-minus::before { content: '—'; font-family: var(--font-display); }
.fa-fallback .fa-lightbulb::before { content: '💡'; font-family: var(--font-display); }
.fa-fallback .fa-filter::before { content: '⏚'; font-family: var(--font-display); }
.fa-fallback .fa-expand::before { content: '⛶'; font-family: var(--font-display); }
.fa-fallback .fa-rocket::before { content: '🚀'; font-family: var(--font-display); }
.fa-fallback .fa-wand-magic-sparkles::before { content: '✨'; font-family: var(--font-display); }
.fa-fallback .fa-shield-halved::before { content: '🛡'; font-family: var(--font-display); }
.fa-fallback .fa-scale-balanced::before { content: '⚖'; font-family: var(--font-display); }
.fa-fallback .fa-gem::before { content: '💎'; font-family: var(--font-display); }
.fa-fallback .fa-coins::before { content: '🪙'; font-family: var(--font-display); }
.fa-fallback .fa-clock::before { content: '⏰'; font-family: var(--font-display); }
.fa-fallback .fa-calendar-week::before { content: '📅'; font-family: var(--font-display); }
.fa-fallback .fa-calendar::before { content: '📅'; font-family: var(--font-display); }
.fa-fallback .fa-mountain-sun::before { content: '🏔'; font-family: var(--font-display); }
.fa-fallback .fa-microchip::before { content: '⬡'; font-family: var(--font-display); }
.fa-fallback .fa-heart-pulse::before { content: '♥'; font-family: var(--font-display); }
.fa-fallback .fa-building-columns::before { content: '🏛'; font-family: var(--font-display); }
.fa-fallback .fa-cart-shopping::before { content: '🛒'; font-family: var(--font-display); }
.fa-fallback .fa-industry::before { content: '🏭'; font-family: var(--font-display); }
.fa-fallback .fa-building::before { content: '🏢'; font-family: var(--font-display); }
.fa-fallback .fa-leaf::before { content: '🍃'; font-family: var(--font-display); }
.fa-fallback .fa-tower-broadcast::before { content: '📡'; font-family: var(--font-display); }
.fa-fallback .fa-cubes::before { content: '🧊'; font-family: var(--font-display); }
.fa-fallback .fa-seedling::before { content: '🌱'; font-family: var(--font-display); }
.fa-fallback .fa-sliders::before { content: '☰'; font-family: var(--font-display); }
.fa-fallback .fa-layer-group::before { content: '☷'; font-family: var(--font-display); }

/* Light theme component overrides */
html.light .card { box-shadow: var(--shadow-sm); }
html.light .card:hover { box-shadow: var(--shadow-md); }
html.light .card-inner { background: var(--bg-surface-2); }
html.light .alert-btn { background: var(--bg-surface-2); }
html.light .notif-dropdown,
html.light .user-menu,
html.light .search-dropdown { background: var(--bg-surface-1); box-shadow: var(--shadow-lg); border: 1px solid var(--border-prominent); }
html.light .badge-neutral { background: var(--bg-surface-2); color: var(--text-secondary); }
html.light .modal-overlay { background: rgba(250,250,250,0.7); }
html.light .hint { background: var(--bg-surface-1); box-shadow: var(--shadow-lg); }
html.light .hint .hint-arrow { background: var(--bg-surface-1); }
html.light .progress { background: var(--bg-surface-3); }
html.light .hbar { background: var(--bg-surface-3); }
html.light .filter-select { background: var(--bg-surface-1); border-color: var(--border-prominent); }
html.light .filter-select option { background: var(--bg-surface-1); }
html.light .input-search { background: var(--bg-surface-2); }
html.light .input-search:focus { background: var(--bg-surface-1); }
html.light .ticker-logo { border-color: var(--border-default); }
html.light .screener-table tr:hover td { background: rgba(201,148,0,0.03); }
html.light .list-row:hover { background: rgba(201,148,0,0.04); }
html.light .insight-row:hover { background: rgba(201,148,0,0.03); }
html.light .btn-upgrade { color: #1e2329; box-shadow: var(--shadow-sm); }

/* Utility */
.text-up { color: var(--positive); }
.text-down { color: var(--negative); }
.text-muted { color: var(--text-secondary) !important }
.text-dim { color: var(--text-tertiary); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.gap-1 { gap: var(--sp-1); }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mb-2 { margin-bottom: var(--sp-2); }
.mb-3 { margin-bottom: var(--sp-3); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

.btn-signin-login {
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.2px;
    text-align: center;
    padding: 7px 20px;
    border: 1px solid var(--border-default);
    text-decoration: none;
    border-radius: 8px;
    background-color: var(--bg-surface-2);
}

.btn-start-for-free {
    background: linear-gradient(135deg, var(--brand), #d4a00a);
    color: #0b0e11;
    border-radius: var(--r-md);
    padding: 10px 20px;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.03em;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.add-to-watchlist:disabled,
.add-to-portfolio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--brand);
    pointer-events: none;
}

.add-to-watchlist:disabled:hover,
.add-to-portfolio:disabled:hover {
    background: var(--brand);
    box-shadow: none;
    transform: none;
}

.btn-logout {
  width: 100%;
}