/* ===================================================================
   TheMarketCap — Design Tokens + Component Styles
   =================================================================== */

/* ===== TOKENS ===== */
:root {
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-lg:   clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --text-xl:   clamp(1.25rem,   1rem    + 1vw,   1.75rem);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-tab: 250ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-wide: 1400px;
}

/* LIGHT MODE — Arctic Ink */
:root, [data-theme="light"] {
  --color-bg:             #dae1f0;
  --color-surface:        #e4e9f5;
  --color-surface-2:      #eef1f8;
  --color-surface-offset: #cfd8eb;
  --color-surface-offset-2: #c5cfe5;
  --color-surface-dynamic: #b9c5dd;
  --color-divider:        #bec8e0;
  --color-border:         #a4b0cc;

  --color-text:           #0b1020;
  --color-text-muted:     #384868;
  --color-text-faint:     #6e7ea0;
  --color-text-inverse:   #dae1f0;

  --color-primary:        #0c8489;
  --color-primary-hover:  #0a6b70;
  --color-primary-active: #085458;
  --color-primary-highlight: #b0dde0;
  --color-primary-faint:  #cbeaec;

  --color-positive:       #0f7b54;
  --color-positive-bg:    #c8e8d6;
  --color-negative:       #c9363f;
  --color-negative-bg:    #efd3d7;
  --color-flat:           #5e6e8c;

  --shadow-sm: 0 1px 2px oklch(0.20 0.02 250 / 0.10);
  --shadow-md: 0 2px 8px oklch(0.16 0.02 250 / 0.12);
  --shadow-lg: 0 8px 24px oklch(0.12 0.02 250 / 0.16);

  --row-hover: rgba(80,110,180,0.07);
  --row-stripe: rgba(80,110,180,0.035);

  --color-amber:          #9a6700;
  --color-amber-bg:       rgba(154,103,0,0.10);
}

/* DARK MODE — Muted Ink Blue */
[data-theme="dark"] {
  --color-bg:             #0c111b;
  --color-surface:        #111827;
  --color-surface-2:      #162032;
  --color-surface-offset: #1a2540;
  --color-surface-offset-2: #1f2b47;
  --color-surface-dynamic: #253350;
  --color-divider:        #1e2a42;
  --color-border:         #263354;

  --color-text:           #c8d1e0;
  --color-text-muted:     #7088a8;
  --color-text-faint:     #3f5575;
  --color-text-inverse:   #0c111b;

  --color-primary:        #3ec9cf;
  --color-primary-hover:  #2fb3b9;
  --color-primary-active: #249ca2;
  --color-primary-highlight: #122b38;
  --color-primary-faint:  #0d1f2e;

  --color-positive:       #34d399;
  --color-positive-bg:    #0c1f22;
  --color-negative:       #f87171;
  --color-negative-bg:    #231017;
  --color-flat:           #5a6d8a;

  --shadow-sm: 0 1px 2px oklch(0.08 0.02 250 / 0.35);
  --shadow-md: 0 2px 8px oklch(0.06 0.02 250 / 0.45);
  --shadow-lg: 0 8px 24px oklch(0.04 0.02 250 / 0.55);

  --row-hover: rgba(130,170,255,0.04);
  --row-stripe: rgba(130,170,255,0.02);

  --color-amber:          #f59e0b;
  --color-amber-bg:       rgba(245,158,11,0.10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:             #0c111b;
    --color-surface:        #111827;
    --color-surface-2:      #162032;
    --color-surface-offset: #1a2540;
    --color-surface-offset-2: #1f2b47;
    --color-surface-dynamic: #253350;
    --color-divider:        #1e2a42;
    --color-border:         #263354;
    --color-text:           #c8d1e0;
    --color-text-muted:     #7088a8;
    --color-text-faint:     #3f5575;
    --color-text-inverse:   #0c111b;
    --color-primary:        #3ec9cf;
    --color-primary-hover:  #2fb3b9;
    --color-primary-active: #249ca2;
    --color-primary-highlight: #122b38;
    --color-primary-faint:  #0d1f2e;
    --color-positive:       #34d399;
    --color-positive-bg:    #0c1f22;
    --color-negative:       #f87171;
    --color-negative-bg:    #231017;
    --color-flat:           #5a6d8a;
    --shadow-sm: 0 1px 2px oklch(0.08 0.02 250 / 0.35);
    --shadow-md: 0 2px 8px oklch(0.06 0.02 250 / 0.45);
    --shadow-lg: 0 8px 24px oklch(0.04 0.02 250 / 0.55);
    --row-hover: rgba(130,170,255,0.04);
    --row-stripe: rgba(130,170,255,0.02);
    --color-amber:          #f59e0b;
    --color-amber-bg:       rgba(245,158,11,0.10);
  }
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  height: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow: hidden;
}

/* Subtle noise texture — both modes */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.035;
}
[data-theme="light"] body::after,
:root:not([data-theme]) body::after {
  opacity: 0.025;
}
[data-theme="dark"] body::after {
  opacity: 0.035;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) body::after {
    opacity: 0.035;
  }
}

main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
input, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

::selection {
  background: oklch(from var(--color-primary) l c h / 0.25);
  color: var(--color-text);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}

.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== HEADER ===== */
.header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  flex-shrink: 0;
  z-index: 20;
}

.header-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.logo svg { color: var(--color-text); }

/* Crown gem twinkle animation */
@keyframes gem-twinkle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.crown-logo .gem-left {
  animation: gem-twinkle 3s ease-in-out infinite;
  animation-delay: 0s;
}
.crown-logo .gem-center {
  animation: gem-twinkle 3s ease-in-out infinite;
  animation-delay: 0.6s;
}
.crown-logo .gem-right {
  animation: gem-twinkle 3s ease-in-out infinite;
  animation-delay: 1.2s;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .crown-logo .gem { animation: none; }
}

.logo-text {
  font-family: 'Plus Jakarta Sans', var(--font-body);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.header-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.meta-badge {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.meta-separator { opacity: 0.4; }

.header-right { display: flex; align-items: center; gap: var(--space-2); }

/* Compare header button */
.btn-compare-header {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: all var(--transition-interactive);
  min-height: 36px;
  white-space: nowrap;
}
.btn-compare-header:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: all var(--transition-interactive);
}
.theme-toggle:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }
[data-theme="light"] .icon-sun { display: none; }
[data-theme="light"] .icon-moon { display: block; }
:root:not([data-theme]) .icon-sun { display: block; }
:root:not([data-theme]) .icon-moon { display: none; }

/* ===== MARQUEE BANNER ===== */
.marquee-banner {
  background: var(--color-surface-offset);
  border-bottom: 1px solid var(--color-divider);
  border-top: 1px solid var(--color-divider);
  height: 32px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  z-index: 15;
}

.marquee-track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: marquee 60s linear infinite;
  width: max-content;
}
.marquee-banner:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.marquee-section {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.marquee-sep {
  color: var(--color-text-faint);
  opacity: 0.5;
}

.marquee-positive { color: var(--color-positive); }
.marquee-negative { color: var(--color-negative); }
.marquee-muted { color: var(--text-secondary); font-style: italic; }

/* ===== TABS ===== */
.tabs-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 15;
}

.tabs-scroll {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-4);
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs-scroll::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-interactive);
  position: relative;
  min-height: 44px;
}
.tab:hover {
  color: var(--color-text);
}
.tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ETF region sub-pills (inline with tabs) */
.etf-region-pills {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 var(--space-2);
  margin-left: -4px;
  border-left: 1px solid var(--color-divider);
  padding-left: var(--space-3);
}
.etf-region-pills.hidden { display: none; }
.etf-region-pills .panel-period-btn {
  font-size: 10.5px;
  padding: 2px 10px;
  line-height: 1.8;
}

.tab-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface-offset);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}
.tab.active .tab-count {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}

/* ===== KPI SECTION ===== */
.kpi-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-4) var(--space-4) 0;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  transition: opacity 0.15s ease;
}

.kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kpi-period-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(62, 201, 207, 0.1);
  border: 1px solid rgba(62, 201, 207, 0.2);
  border-radius: 4px;
  padding: 1px 5px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}

.kpi-period-badge:empty {
  display: none;
  margin-bottom: var(--space-1);
}

.kpi-value {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.kpi-small {
  font-size: var(--text-lg);
}

.kpi-split {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  font-size: var(--text-lg);
}

.kpi-positive { color: var(--color-positive); }
.kpi-negative-val { color: var(--color-negative); }
.kpi-flat-val { color: var(--color-text-muted); }
.kpi-separator { color: var(--color-text-faint); font-weight: 400; }

.kpi-price {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.kpi-delta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.kpi-delta.positive { color: var(--color-positive); }
.kpi-delta.negative { color: var(--color-negative); }

/* ===== PANEL CLOSE BUTTON (shared) ===== */
.panel-close-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--color-text-faint);
  transition: color 0.18s ease, background 0.18s ease;
  flex-shrink: 0;
}
.panel-close-btn:hover {
  color: var(--color-text);
  background: var(--color-border);
}

/* ===== NEWS FEED ===== */
.news-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}

.news-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.news-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.news-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.news-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.news-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease;
}

.news-item:hover {
  border-color: var(--color-text-faint);
}

.news-item-thumb {
  width: 80px;
  height: 56px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  background: var(--color-border);
  flex-shrink: 0;
}

.news-item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  justify-content: center;
}

.news-item-headline {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 10px;
  color: var(--color-text-faint);
  white-space: nowrap;
}

.news-item-ticker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

.news-item-source {
  overflow: hidden;
  text-overflow: ellipsis;
}

.news-item-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item-readmore {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-primary);
  opacity: 0.6;
  transition: opacity 0.15s ease;
  margin-top: 2px;
}

.news-item-arrow {
  font-size: 12px;
  margin-left: 2px;
  transition: transform 0.15s ease;
  display: inline-block;
}

.news-item:hover .news-item-readmore {
  opacity: 1;
}
.news-item:hover .news-item-arrow {
  transform: translateX(3px);
}

.news-skeleton {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-3);
  padding: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.news-skeleton-thumb {
  width: 80px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-border);
  animation: shimmer 1.5s ease-in-out infinite;
}

.news-skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
}

.news-skeleton-lines .skeleton-bar {
  height: 10px;
  background: var(--color-border);
  border-radius: 4px;
  animation: shimmer 1.5s ease-in-out infinite;
}

.news-skeleton-lines .skeleton-bar:first-child { width: 85%; }
.news-skeleton-lines .skeleton-bar:nth-child(2) { width: 60%; }
.news-skeleton-lines .skeleton-bar:nth-child(3) { width: 40%; }

@media (max-width: 768px) {
  .news-section { padding: var(--space-2); }
  .news-item {
    grid-template-columns: 60px 1fr;
  }
  .news-item-thumb {
    width: 60px;
    height: 44px;
  }
}

/* ===== SECTOR PERFORMANCE ===== */
.sector-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}

.sector-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.sector-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.sector-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.sector-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  flex: 1;
  min-width: 0;
}

.sector-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sector-row {
  display: grid;
  grid-template-columns: 170px 1fr 64px;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
}

.sector-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sector-row-bar-wrap {
  position: relative;
  height: 18px;
  display: flex;
  align-items: center;
}

.sector-row-bar-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-divider);
}

/* The center line (zero axis) */
.sector-row-bar-zero {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-border);
}

.sector-row-bar {
  position: absolute;
  top: 2px;
  bottom: 2px;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sector-row-bar.positive {
  background: var(--color-positive);
  opacity: 0.7;
}

.sector-row-bar.negative {
  background: var(--color-negative);
  opacity: 0.7;
}

.sector-row-bar.flat {
  background: var(--color-flat);
  opacity: 0.5;
}

.sector-row-value {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sector-row-value.positive { color: var(--color-positive); }
.sector-row-value.negative { color: var(--color-negative); }
.sector-row-value.flat { color: var(--color-flat); }

.sector-row-count {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-left: 2px;
}

@media (max-width: 768px) {
  .sector-section { padding: var(--space-2); }
  .sector-row {
    grid-template-columns: 140px 1fr 58px;
  }
}

/* ===== INDEX BENCHMARKS ===== */
.index-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}

.index-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.index-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.index-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.index-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  flex: 1;
  min-width: 0;
}

.index-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}

.index-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.18s ease;
}

.index-card:hover {
  border-color: var(--color-text-faint);
}

.index-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

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

.index-card-flag {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.index-card-price {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.index-card-change {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.index-card-change.positive { color: var(--color-positive); }
.index-card-change.negative { color: var(--color-negative); }
.index-card-change.flat { color: var(--color-flat); }

.index-card-pts {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-left: 2px;
}

.index-card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.index-card-ticker {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.index-card-meta .status-badge {
  font-size: 10px;
  padding: 2px 8px;
  gap: 3px;
}

.index-card-meta .status-dot {
  width: 5px;
  height: 5px;
}

.index-card-sparkline {
  margin-top: 2px;
  line-height: 0;
}

.index-card-sparkline svg {
  width: 100%;
  height: 24px;
}

.index-card-skeleton {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-card-skeleton .skeleton-bar {
  width: 60%;
  height: 10px;
  background: var(--color-border);
  border-radius: 4px;
  animation: shimmer 1.5s ease-in-out infinite;
}

@media (max-width: 768px) {
  .index-section { padding: var(--space-2); }
  .index-cards {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ===== CURRENCY DASHBOARD ===== */
.forex-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}

.forex-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.forex-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.forex-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.forex-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  flex: 1;
  min-width: 0;
}

.forex-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
}

.forex-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* hover border removed — forex cards are not clickable */

.forex-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.forex-card-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.forex-card-flag {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.forex-card-price {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.forex-card-change {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.forex-card-change.positive { color: var(--color-positive); }
.forex-card-change.negative { color: var(--color-negative); }
.forex-card-change.flat { color: var(--color-flat); }

.forex-card-abs {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-left: 2px;
}

.forex-card-sparkline {
  margin-top: 2px;
  line-height: 0;
}

.forex-card-sparkline svg {
  width: 100%;
  height: 24px;
}

.forex-period-tag {
  display: inline-block;
  font-size: 9px;
  opacity: 0.6;
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.forex-card-skeleton {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forex-card-skeleton .skeleton-bar {
  width: 60%;
  height: 10px;
  background: var(--color-border);
  border-radius: 4px;
  animation: shimmer 1.5s ease-in-out infinite;
}

@media (max-width: 768px) {
  .forex-section { padding: var(--space-2); }
  .forex-cards {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ===== HEAT MAP ===== */
.heatmap-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}

.heatmap-container {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.heatmap-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.heatmap-header .panel-close-btn {
  margin-left: 0;
}
.heatmap-period-row {
  display: flex;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.heatmap-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.heatmap-svg {
  max-height: 230px;
  width: auto;
  max-width: 100%;
  align-self: center;
}

/* .heatmap-region base styles merged into .heatmap-region below */
.heatmap-region:hover {
  opacity: 1 !important;
  stroke: var(--color-text);
  stroke-width: 2;
}

.heatmap-label {
  fill: var(--color-text);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 600;
  text-anchor: middle;
  pointer-events: none;
  opacity: 0.9;
  paint-order: stroke;
  stroke: rgba(12, 17, 27, 0.7);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.heatmap-tooltip {
  position: absolute;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  white-space: nowrap;
  z-index: 10;
  box-shadow: var(--shadow-md);
  font-variant-numeric: tabular-nums;
}
.heatmap-tooltip.visible {
  opacity: 1;
}

.heatmap-change-label {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(12, 17, 27, 0.7);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.heatmap-region {
  stroke: var(--color-border);
  stroke-width: 1.5;
  cursor: default;
  opacity: 0.85;
  transition: opacity 0.4s ease, transform 0.4s ease, stroke var(--transition-interactive);
}

/* Region stat cards */
.heatmap-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.heatmap-stat-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.heatmap-stat-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.heatmap-stat-change {
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.heatmap-stat-change.positive { color: var(--color-positive); }
.heatmap-stat-change.negative { color: var(--color-negative); }

.heatmap-stat-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text-faint);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.heatmap-stat-share {
}

.heatmap-stat-bar {
  display: flex;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
  background: var(--color-border);
}
.heatmap-bar-g {
  background: var(--color-positive);
  opacity: 0.7;
}
.heatmap-bar-r {
  background: var(--color-negative);
  opacity: 0.7;
}

/* Capital flow arrows */
.heatmap-flow-up {
  color: var(--color-positive);
  font-weight: 700;
  font-size: 12px;
}
.heatmap-flow-down {
  color: var(--color-negative);
  font-weight: 700;
  font-size: 12px;
}
.heatmap-flow-flat {
  color: var(--color-text-faint);
  font-weight: 700;
  font-size: 12px;
}

/* ===== FILTER SECTION ===== */
.filter-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  position: sticky;
  top: var(--sticky-tabs-height, 42px);
  z-index: 14;
  background: var(--color-bg);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}

.search-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-faint);
  pointer-events: none;
}

.search-input {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 22px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text);
  outline: none;
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
  min-height: 36px;
}
.search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}
.search-input::placeholder { color: var(--color-text-faint); }
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.filter-selects {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-select {
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  min-height: 36px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d8389' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  transition: border-color var(--transition-interactive);
}
.filter-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.btn-clear {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: all var(--transition-interactive);
  min-height: 36px;
  white-space: nowrap;
}
.btn-clear:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}

/* Map toggle */
.btn-map-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: all var(--transition-interactive);
  min-height: 36px;
  white-space: nowrap;
}
.btn-map-toggle:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.btn-map-toggle.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-faint);
}

.filter-count {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-left: auto;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ===== TABLE SECTION ===== */
.table-section {
  flex: 1;
  min-height: 400px;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--space-4) var(--space-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.data-table {
  font-size: var(--text-xs);
  width: 100%;
  min-width: 1000px;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-surface-offset);
}

.data-table th {
  text-align: left;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  user-select: none;
}

.th-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
  min-height: 28px;
}
.th-btn:hover { color: var(--color-text); }

.th-label {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}

.sort-arrow {
  font-size: 9px;
  opacity: 0;
  transition: opacity var(--transition-interactive), transform var(--transition-interactive);
}
.sortable:hover .sort-arrow { opacity: 0.4; }
.sort-arrow.active { opacity: 1; color: var(--color-primary); }
.sort-arrow.desc { transform: rotate(180deg); }

.data-table td {
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  font-variant-numeric: tabular-nums lining-nums;
  vertical-align: middle;
  white-space: nowrap;
  line-height: 1.4;
}

.data-table tbody tr {
  transition: background var(--transition-interactive);
}
.data-table tbody tr:nth-child(even) {
  background: var(--row-stripe);
}
.data-table tbody tr:hover {
  background: var(--row-hover);
}

/* Table row animation */
.data-table tbody tr {
  animation: rowFadeIn 0.2s ease both;
}

@keyframes rowFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Crossfade for gated data refresh */
.data-table tbody {
  transition: opacity 0.15s ease;
}
.data-table tbody.table-fade-out {
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Column specifics */
.data-table th.col-rank { width: 52px; text-align: right; padding-right: var(--space-2); }
.col-rank .th-btn { display: block; text-align: right; width: 100%; }
.data-table td.cell-rank, .col-rank + td, td:first-child { text-align: right; padding-right: var(--space-2); }
.col-ticker { width: 90px; }
.data-table th.col-cap { width: 120px; text-align: right; }
.col-cap .th-btn { display: block; text-align: right; width: 100%; }
.data-table th.col-price { width: 110px; text-align: right; }
.col-price .th-btn { display: block; text-align: right; width: 100%; }
.data-table th.col-change { width: 150px; text-align: right; }
.col-change .th-btn { display: block; text-align: right; width: 100%; }
.col-trend { width: 96px; text-align: center; }
.col-compare-header { width: 44px; text-align: center; }
.data-table th.col-status { width: 110px; text-align: right; }

/* Market status badges */
.cell-status {
  text-align: right;
  padding: 2px var(--space-2);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  text-transform: uppercase;
}

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

/* Open — green */
.status-open {
  color: var(--color-positive);
  background: var(--color-positive-bg);
}
.status-open .status-dot {
  background: var(--color-positive);
  box-shadow: 0 0 4px var(--color-positive);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* Pre-Market — amber */
.status-pre-market {
  color: var(--color-amber);
  background: var(--color-amber-bg);
}
.status-pre-market .status-dot {
  background: var(--color-amber);
}

/* After-Hours — amber/orange */
.status-after-hours {
  color: var(--color-amber);
  background: var(--color-amber-bg);
}
.status-after-hours .status-dot {
  background: var(--color-amber);
}

/* Closed — gray */
.status-closed {
  color: var(--color-text-faint);
  background: var(--color-surface-offset);
}
.status-closed .status-dot {
  background: var(--color-text-faint);
}

/* Holiday — gray with dash pattern */
.status-holiday {
  color: var(--color-text-faint);
  background: var(--color-surface-offset);
}
.status-holiday .status-dot {
  background: transparent;
  border: 1.5px dashed var(--color-text-faint);
}

.cell-rank {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-faint);
  text-align: right;
  font-size: 12px;
}

.cell-company {
  font-weight: 500;
  color: var(--color-text);
}

.cell-ticker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  font-size: 12px;
}

.cell-sector {
  color: var(--color-text-muted);
}

.cell-country {
  color: var(--color-text-muted);
}

.cell-cap {
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
}

.cell-price {
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  color: var(--color-text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.cell-change {
  font-family: var(--font-mono);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.cell-change.positive { color: var(--color-positive); }
.cell-change.negative { color: var(--color-negative); }
.cell-change.flat { color: var(--color-flat); }

.change-arrow {
  font-size: 10px;
  line-height: 1;
}

/* Sparkline cell */
.cell-trend {
  text-align: center;
  padding: 2px var(--space-2);
}
.cell-trend svg {
  display: inline-block;
  vertical-align: middle;
}

/* Compare + button in table rows */
.cell-compare {
  text-align: center;
  padding: 2px var(--space-1);
}

.btn-compare-row {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-faint);
  transition: all var(--transition-interactive);
  background: transparent;
}
.btn-compare-row:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-faint);
}
.btn-compare-row.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

/* ===== COMPARE PANEL ===== */
.compare-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 49;
  transition: opacity 0.25s ease;
}
.compare-overlay.visible {
  opacity: 1;
}

.compare-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 100vw;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}
.compare-panel.open {
  transform: translateX(0);
}

.compare-panel-inner {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.compare-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.compare-title {
  font-size: var(--text-base);
  font-weight: 600;
}

.compare-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition-interactive);
}
.compare-close:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
}

.compare-category-pills {
  display: flex;
  gap: 4px;
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}

.compare-category-pill {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.compare-category-pill:hover {
  border-color: var(--color-text-faint);
}

.compare-category-pill.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg);
}

/* Compare chips (selected assets with remove button) */
.compare-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 8px 4px 6px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text);
  line-height: 1.3;
}
.compare-chip-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--color-primary);
  color: var(--color-bg);
  flex-shrink: 0;
}
.compare-chip-ticker {
  color: var(--color-text-faint);
  font-size: 12px;
}
.compare-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--color-text-faint);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.compare-chip-remove:hover {
  background: var(--color-negative);
  color: #fff;
}

.compare-selectors {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.compare-select {
  width: 100%;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  min-height: 36px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237d8389' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  transition: border-color var(--transition-interactive);
}
.compare-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-highlight);
}

.compare-select optgroup {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  padding: var(--space-1) 0;
}

.compare-select optgroup option {
  font-weight: 400;
  color: var(--color-text);
  padding-left: var(--space-2);
}

.compare-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.compare-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}

.compare-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.compare-card-name {
  font-weight: 600;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
}

.compare-card-ticker {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  font-weight: 500;
}

.compare-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--text-xs);
}

.compare-card-label {
  color: var(--color-text-muted);
}

.compare-card-value {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.compare-bar-wrap {
  margin-top: var(--space-1);
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.compare-bar {
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.compare-card-sparkline {
  margin-top: var(--space-2);
  text-align: center;
}

/* Compare period toggle row */
.compare-period-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}

/* Color dot next to compare card name */
.compare-color-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
  flex-shrink: 0;
}

/* Overlay comparison chart */
.compare-chart-container {
  min-height: 0;
}
.compare-chart-container:empty {
  display: none;
}
.compare-chart-svg {
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}

.compare-footer {
  flex-shrink: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
}

.btn-clear-compare {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  transition: color var(--transition-interactive);
}
.btn-clear-compare:hover {
  color: var(--color-negative);
}

/* ===== EMPTY STATE ===== */
td.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-faint);
}
.empty-state-icon {
  font-size: 32px;
  margin-bottom: var(--space-3);
  opacity: 0.4;
}
.empty-state-text {
  font-size: var(--text-sm);
  font-weight: 500;
}
.empty-state-sub {
  font-size: var(--text-xs);
  margin-top: var(--space-1);
}

/* ===== SKELETON ===== */
.skeleton-row td {
  padding: var(--space-2) var(--space-3);
}
.skeleton-bar {
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-offset);
  animation: skeletonPulse 1.2s ease infinite;
}
@keyframes skeletonPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* ===== LIVE DATA FLASH ANIMATIONS ===== */
@keyframes flash-green {
  0% { background-color: rgba(16, 185, 129, 0.3); }
  100% { background-color: transparent; }
}
@keyframes flash-red {
  0% { background-color: rgba(239, 68, 68, 0.3); }
  100% { background-color: transparent; }
}
.flash-green { animation: flash-green 1s ease-out; }
.flash-red { animation: flash-red 1s ease-out; }

/* Live indicator */
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}
.live-dot.active {
  background: var(--color-positive);
  animation: pulse-dot 2s ease-in-out infinite;
}
.live-dot.inactive {
  background: var(--color-text-faint);
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.live-status {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.live-status.is-live {
  color: var(--color-positive);
}

/* ===== FOOTER ===== */
.footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  margin-top: auto;
}

.footer-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.footer-disclaimers {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}

.footer-disclaimer,
.footer-trademark {
  font-size: 11px;
  line-height: 1.55;
  color: var(--color-text-faint);
  margin: 0;
  max-width: 900px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--color-divider);
}

.footer-brand {
  font-size: 11px;
  color: var(--color-text-faint);
  font-weight: 500;
  margin: 0;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-link {
  font-size: 11px;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
  cursor: pointer;
}
.footer-link:hover {
  color: var(--color-primary);
}

/* ===== TERMS OF USE PANEL ===== */
.terms-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.terms-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

.terms-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.terms-panel.open {
  opacity: 1;
  pointer-events: auto;
}

.terms-panel-inner {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
}

.terms-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-divider);
  flex-shrink: 0;
}

.terms-title {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}

.terms-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}
.terms-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
  border-color: var(--color-border);
}

.terms-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.7;
}

.terms-body h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin: 28px 0 10px;
}
.terms-body h3:first-of-type {
  margin-top: 12px;
}

.terms-body p {
  margin: 0 0 12px;
}

.terms-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.terms-body ul li {
  margin-bottom: 6px;
}

.terms-effective {
  font-size: 12px;
  color: var(--color-text-faint);
  font-style: italic;
}

.terms-closing {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-divider);
  font-weight: 500;
  color: var(--color-text);
}

/* Terms body scrollbar */
.terms-body::-webkit-scrollbar { width: 6px; }
.terms-body::-webkit-scrollbar-track { background: transparent; }
.terms-body::-webkit-scrollbar-thumb {
  background: var(--color-divider);
  border-radius: 3px;
}
.terms-body::-webkit-scrollbar-thumb:hover {
  background: var(--color-border);
}

/* ===== CONTACT FORM ===== */
.contact-form {
  margin-top: 16px;
}
.contact-field {
  margin-bottom: 16px;
}
.contact-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.contact-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.contact-input:focus {
  border-color: var(--color-primary);
}
.contact-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.5;
}
.contact-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}
.contact-select option {
  background: var(--color-surface);
  color: var(--color-text);
}
.contact-textarea {
  resize: vertical;
  min-height: 100px;
  max-height: 250px;
}
.contact-submit {
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--color-bg);
  background: var(--color-primary);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}
.contact-submit:hover {
  opacity: 0.9;
}
.contact-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.contact-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
}
.contact-status.success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-positive);
  border: 1px solid rgba(16, 185, 129, 0.2);
}
.contact-status.error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-negative);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .header-meta { display: none; }

  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }
  .kpi-card { padding: var(--space-2) var(--space-3); }
  .kpi-value { font-size: var(--text-lg); }
  .kpi-small { font-size: var(--text-base); }

  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .search-wrap {
    max-width: none;
  }
  .filter-selects {
    flex-wrap: wrap;
  }
  .filter-count { margin-left: 0; }

  .table-section { padding: 0 var(--space-2) var(--space-2); }
  .kpi-section { padding: var(--space-3) var(--space-2) 0; }
  .filter-section {
    padding: var(--space-2);
    position: static;
  }
  .heatmap-section { padding: var(--space-2); }
  .heatmap-stats { grid-template-columns: repeat(2, 1fr); }
  .heatmap-period-row { margin-left: 0; margin-right: 0; }

  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }
  .footer-disclaimers {
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 6px;
  }

  .terms-panel {
    padding: 12px;
  }
  .terms-panel-inner {
    max-height: calc(100vh - 24px);
    border-radius: 10px;
  }
  .terms-header {
    padding: 16px 16px 12px;
  }
  .terms-body {
    padding: 16px;
  }

  .compare-panel {
    width: 100vw;
  }

  /* Sticky first columns on mobile */
  .data-table th:nth-child(1),
  .data-table td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 3;
    background: var(--color-surface);
  }
  .data-table thead th:nth-child(1) {
    background: var(--color-surface-offset);
    z-index: 6;
  }
  .data-table th:nth-child(2),
  .data-table td:nth-child(2) {
    position: sticky;
    left: 52px;
    z-index: 3;
    background: var(--color-surface);
  }
  .data-table thead th:nth-child(2) {
    background: var(--color-surface-offset);
    z-index: 6;
  }
  .data-table tbody tr:nth-child(even) td:nth-child(1),
  .data-table tbody tr:nth-child(even) td:nth-child(2) {
    background: color-mix(in srgb, var(--color-surface) 98.5%, var(--color-text));
  }
}

@media (max-width: 480px) {
  .kpi-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tab { padding: var(--space-2) var(--space-2); font-size: 11px; }
  .tab-count { font-size: 9px; padding: 1px 4px; }
  .etf-region-pills .panel-period-btn { font-size: 9.5px; padding: 2px 7px; }

  .btn-compare-header span { display: none; }
}

/* ===== NEWS TICKER BAR ===== */
.news-ticker-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  height: 32px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  z-index: 14;
}

.news-ticker-track {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: news-ticker 150s linear infinite;
  width: max-content;
}
.news-ticker-bar:hover .news-ticker-track {
  animation-play-state: paused;
}

@keyframes news-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.news-ticker-content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-6);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.news-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

a.news-ticker-item {
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}
a.news-ticker-item:hover {
  color: var(--color-text);
}
.news-ticker-arrow {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
  margin-left: 2px;
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
.news-ticker-readmore {
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 500;
  margin-left: var(--space-1);
  opacity: 0.7;
  transition: opacity 0.15s ease;
}
a.news-ticker-item:hover .news-ticker-arrow {
  opacity: 1;
}
a.news-ticker-item:hover .news-ticker-readmore {
  opacity: 1;
}
a.news-ticker-item:hover .news-ticker-sep {
  color: var(--color-text-muted);
  opacity: 0.8;
}
a.news-ticker-item:hover .news-ticker-source {
  color: var(--color-text);
}
a.news-ticker-item:hover .news-ticker-time {
  color: var(--color-text);
}

.news-ticker-sep {
  color: var(--color-text-faint);
  opacity: 0.55;
  margin: 0 var(--space-2);
  transition: color 0.15s ease, opacity 0.15s ease;
}

.news-ticker-source {
  color: var(--color-text-muted);
  font-size: 10px;
  transition: color 0.15s ease;
}

.news-ticker-time {
  color: var(--color-text-muted);
  font-size: 10px;
  transition: color 0.15s ease;
}

/* ===== TREND PERIOD BUTTONS (table header) ===== */

.change-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 2px 0;
}

.trend-header-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px 0;
}

.trend-label {
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  white-space: nowrap;
}

.trend-period-btns {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-wrap: nowrap;
}

.trend-period-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 4px;
  border-radius: 3px;
  border: none;
  color: var(--color-text-faint);
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-interactive), background var(--transition-interactive);
  white-space: nowrap;
  line-height: 1.4;
}
.trend-period-btn:hover {
  color: var(--color-text);
  background: var(--color-surface-offset);
}
.trend-period-btn.active {
  color: var(--color-primary);
  background: var(--color-primary-faint);
}

/* ===== PANEL PERIOD BUTTONS (sector/index headers) ===== */
.panel-period-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}

.panel-period-btn {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-text-faint);
  color: var(--color-text-muted);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-interactive);
  white-space: nowrap;
  line-height: 1.6;
}
.panel-period-btn:hover {
  color: var(--color-text);
  border-color: var(--color-text-faint);
  background: var(--color-surface-offset);
}
.panel-period-btn.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-faint);
}

/* Adjust sector/index header to accommodate period buttons */
.sector-header,
.index-header {
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ===== CUSTOM SCROLLBAR (global) ===== */
/* Firefox */
main,
.table-wrap,
.compare-panel-inner,
.search-dropdown,
.compare-select {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) var(--color-bg);
}

/* Webkit (Chrome, Safari, Edge) */
main::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.compare-panel-inner::-webkit-scrollbar,
.search-dropdown::-webkit-scrollbar,
.compare-select::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
main::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track,
.compare-panel-inner::-webkit-scrollbar-track,
.search-dropdown::-webkit-scrollbar-track,
.compare-select::-webkit-scrollbar-track {
  background: var(--color-bg);
}
main::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.compare-panel-inner::-webkit-scrollbar-thumb,
.search-dropdown::-webkit-scrollbar-thumb,
.compare-select::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 9999px;
}
main::-webkit-scrollbar-thumb:hover,
.table-wrap::-webkit-scrollbar-thumb:hover,
.compare-panel-inner::-webkit-scrollbar-thumb:hover,
.search-dropdown::-webkit-scrollbar-thumb:hover,
.compare-select::-webkit-scrollbar-thumb:hover {
  background: #344a6f;
}

/* Light mode scrollbar overrides */
[data-theme="light"] main,
[data-theme="light"] .table-wrap,
[data-theme="light"] .compare-panel-inner,
[data-theme="light"] .search-dropdown,
[data-theme="light"] .compare-select {
  scrollbar-color: #a4b0cc #dae1f0;
}
[data-theme="light"] main::-webkit-scrollbar-track,
[data-theme="light"] .table-wrap::-webkit-scrollbar-track,
[data-theme="light"] .compare-panel-inner::-webkit-scrollbar-track,
[data-theme="light"] .search-dropdown::-webkit-scrollbar-track,
.compare-select::-webkit-scrollbar-track {
  background: #dae1f0;
}
[data-theme="light"] main::-webkit-scrollbar-thumb,
[data-theme="light"] .table-wrap::-webkit-scrollbar-thumb,
[data-theme="light"] .compare-panel-inner::-webkit-scrollbar-thumb,
[data-theme="light"] .search-dropdown::-webkit-scrollbar-thumb,
.compare-select::-webkit-scrollbar-thumb {
  background: #a4b0cc;
  border-radius: 9999px;
}
[data-theme="light"] main::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .table-wrap::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .compare-panel-inner::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .search-dropdown::-webkit-scrollbar-thumb:hover,
.compare-select::-webkit-scrollbar-thumb:hover {
  background: #8b98b8;
}

/* ===== COMMODITIES PANEL ===== */
.commodity-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}

.commodity-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.commodity-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.commodity-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.commodity-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  flex: 1;
  min-width: 0;
}

.commodity-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.commodity-group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.commodity-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: var(--space-2);
}

.commodity-card {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.18s ease;
}

.commodity-card:hover {
  border-color: var(--color-text-faint);
}

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

.commodity-card-ticker {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.commodity-card-price {
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  margin-top: 2px;
}

.commodity-card-change {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.commodity-card-change.positive { color: var(--color-positive); }
.commodity-card-change.negative { color: var(--color-negative); }
.commodity-card-change.flat { color: var(--color-flat); }

.commodity-period-tag {
  display: inline-block;
  font-size: 9px;
  opacity: 0.6;
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.commodity-card-abs {
  font-size: 11px;
  color: var(--color-text-faint);
  margin-left: auto;
}

.commodity-card-sparkline {
  margin-top: 2px;
  line-height: 0;
}

.commodity-card-sparkline svg {
  width: 100%;
  height: 24px;
}

@media (max-width: 768px) {
  .commodity-section { padding: var(--space-2); }
  .commodity-group-cards {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* ===== UNIVERSAL SEARCH DROPDOWN ===== */
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 200;
  max-height: 400px;
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.search-dropdown.hidden {
  display: none;
}

.search-dd-group {
  padding: var(--space-1) 0;
}

.search-dd-group + .search-dd-group {
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-1);
  padding-top: var(--space-2);
}

.search-dd-group-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
  padding: var(--space-1) var(--space-3);
}

.search-dd-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background 0.12s ease;
}

.search-dd-item:hover {
  background: var(--color-surface-offset);
}

.search-dd-ticker {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}

.search-dd-name {
  font-size: 12px;
  color: var(--color-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dd-cap {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  flex-shrink: 0;
}

/* ===== KPI SUB-LABELS & MOVERS ===== */
.kpi-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-faint);
  margin-top: 4px;
  min-height: 16px;
}

.kpi-movers-labels {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
}

.kpi-label-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.kpi-label-tag.positive {
  color: var(--color-positive);
  background: var(--color-positive-bg);
}

.kpi-label-tag.negative {
  color: var(--color-negative);
  background: var(--color-negative-bg);
}

.kpi-label-tag.flat {
  color: var(--color-flat);
  background: var(--color-surface-offset);
}

/* Hide sector column for crypto */
.data-table.hide-sector .col-sector,
.data-table.hide-sector .cell-sector {
  display: none;
}

/* Hide status column for crypto (24/7 market) */
.data-table.hide-status .col-status,
.data-table.hide-status .cell-status {
  display: none;
}

/* Crypto logo in table */
.crypto-logo {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
  object-fit: cover;
  background: var(--color-surface);
  flex-shrink: 0;
}

.cell-company-inner {
  display: flex;
  align-items: center;
  gap: 0;
}

/* KPI Total Cap subtitle */
.kpi-total-cap-sub {
  font-size: 12px;
  color: var(--color-text-faint);
  margin-top: 2px;
  letter-spacing: 0.02em;
}

/* ===================================================================
   PANEL SCROLL OFFSET (accounts for sticky tabs)
   =================================================================== */
.news-section,
.sector-section,
.index-section,
.forex-section,
.commodity-section,
.heatmap-section,
.earnings-section,
.whatif-section,
.trillion-section,
.sentiment-section,
.concentration-section,
.analysis-section {
  scroll-margin-top: 48px;
}

/* ===================================================================
   ANALYSIS SECTION
   =================================================================== */

/* Analysis dot indicator */
.analysis-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.7;
  margin-left: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
#analysisToggleBtn.active .analysis-dot {
  display: none;
}

/* Section container */
.analysis-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}
.analysis-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

/* Header */
.analysis-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.analysis-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.analysis-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex: 1;
}
.analysis-header .panel-close-btn {
  margin-left: auto;
}

/* Filters */
.analysis-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
}
.analysis-filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.analysis-pill {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.analysis-pill:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.analysis-pill.active {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: rgba(62, 201, 207, 0.08);
}

/* Feed */
.analysis-feed {
  padding: 16px 20px;
  min-height: 200px;
}
.analysis-feed-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

/* Feed card */
.analysis-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.analysis-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.analysis-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.analysis-card-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(62, 201, 207, 0.12);
  color: var(--color-primary);
  white-space: nowrap;
}
.analysis-card-badge.daily    { background: rgba(62, 201, 207, 0.12); color: #3ec9cf; }
.analysis-card-badge.weekly   { background: rgba(99, 102, 241, 0.12); color: #818cf8; }
.analysis-card-badge.earnings { background: rgba(52, 211, 153, 0.12); color: #34d399; }
.analysis-card-badge.sector   { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }
.analysis-card-badge.monthly  { background: rgba(248, 113, 113, 0.12); color: #f87171; }
.analysis-card-badge.regional { background: rgba(167, 139, 250, 0.12); color: #a78bfa; }
.analysis-card-badge.earnings-season { background: rgba(52, 211, 153, 0.12); color: #34d399; }

.analysis-card-region {
  font-size: 12px;
  color: var(--color-text-muted);
}
.analysis-card-date {
  font-size: 12px;
  color: var(--color-text-faint);
  margin-left: auto;
}
.analysis-card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.35;
}
.analysis-card-preview {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.analysis-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.analysis-card-readmore {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-primary);
  opacity: 0.6;
  margin-left: auto;
  transition: opacity 0.15s ease;
}
.analysis-card-arrow {
  font-size: 12px;
  margin-left: 2px;
  display: inline-block;
  transition: transform 0.15s ease;
}
.analysis-card:hover .analysis-card-readmore {
  opacity: 1;
}
.analysis-card:hover .analysis-card-arrow {
  transform: translateX(3px);
}

/* Skeleton loader */
.analysis-skeleton {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  height: 140px;
  animation: analysisPulse 1.5s ease-in-out infinite;
}
@keyframes analysisPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.7; }
}
.analysis-feed-loading {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

/* Empty state */
.analysis-feed-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--color-text-muted);
}
.analysis-feed-empty p {
  margin: 8px 0 0;
  font-size: 14px;
}
.analysis-empty-sub {
  font-size: 12px !important;
  color: var(--color-text-faint) !important;
}

/* ===================================================================
   ANALYSIS DETAIL VIEW
   =================================================================== */

.analysis-detail {
  /* Lives inside analysis-container, no outer margin/padding needed */
}

.analysis-detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.analysis-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.analysis-back-btn:hover {
  border-color: var(--color-primary);
  background: rgba(62, 201, 207, 0.06);
}
.analysis-detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.analysis-detail-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(62, 201, 207, 0.12);
  color: var(--color-primary);
}
.analysis-detail-region {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.analysis-detail-date {
  font-size: 12px;
  color: var(--color-text-faint);
}

/* Article body */
.analysis-detail-body {
  padding: 24px 20px 32px;
  max-width: 780px;
  margin: 0 auto;
}
.analysis-detail-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 24px;
  line-height: 1.3;
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* Content styling */
.analysis-detail-content {
  font-size: 15px;
  line-height: 1.72;
  color: var(--color-text-secondary);
}
.analysis-detail-content h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.analysis-detail-content h3:first-child {
  margin-top: 0;
}
.analysis-detail-content p {
  margin: 0 0 14px;
}
.analysis-detail-content ul {
  margin: 0 0 14px;
  padding-left: 20px;
}
.analysis-detail-content li {
  margin-bottom: 6px;
}
.analysis-detail-content strong {
  color: var(--color-text);
  font-weight: 600;
}
.analysis-detail-content .positive {
  color: var(--color-positive);
  font-weight: 600;
}
.analysis-detail-content .negative {
  color: var(--color-negative);
  font-weight: 600;
}

/* Detail footer */
/* Share bar */
.analysis-share-bar {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.analysis-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(62, 201, 207, 0.1);
  border: 1px solid rgba(62, 201, 207, 0.25);
  border-radius: 8px;
  color: #3ec9cf;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.analysis-share-btn:hover {
  background: rgba(62, 201, 207, 0.18);
  border-color: rgba(62, 201, 207, 0.4);
}
.analysis-share-btn.copied {
  background: rgba(52, 211, 153, 0.15);
  border-color: rgba(52, 211, 153, 0.3);
  color: #34d399;
}
.analysis-share-btn svg {
  flex-shrink: 0;
}

/* Share card overlay (canvas preview) */
.share-card-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.share-card-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  max-width: 520px;
  width: 100%;
}
.share-card-modal h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 12px 0;
}
.share-card-canvas-wrap {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.share-card-canvas-wrap canvas {
  width: 100%;
  height: auto;
  display: block;
}
.share-card-actions {
  display: flex;
  gap: 10px;
}
.share-card-actions button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border);
  transition: background 0.2s;
}
.share-card-download {
  background: #3ec9cf;
  color: #0c111b;
  border-color: #3ec9cf !important;
}
.share-card-download:hover {
  background: #35b5ba;
}
.share-card-close {
  background: transparent;
  color: var(--color-text);
}
.share-card-close:hover {
  background: rgba(255,255,255,0.05);
}

.analysis-detail-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}
.analysis-disclaimer {
  font-size: 11px;
  color: var(--color-text-faint);
  line-height: 1.6;
  font-style: italic;
}

/* ===================================================================
   ANALYSIS RESPONSIVE
   =================================================================== */

@media (max-width: 768px) {
  .analysis-feed-list,
  .analysis-feed-loading {
    grid-template-columns: 1fr;
  }
  .analysis-filters {
    padding: 10px 14px;
  }
  .analysis-filter-pills {
    gap: 4px;
  }
  .analysis-pill {
    padding: 3px 9px;
    font-size: 11px;
  }
  .analysis-detail-body {
    padding: 20px 16px;
  }
  .analysis-detail-title {
    font-size: 20px;
  }
  .analysis-detail-content {
    font-size: 14px;
  }
  .analysis-detail-header {
    padding: 12px 16px;
  }
}

/* ===================================================================
   EARNINGS CALENDAR
   =================================================================== */
.earnings-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}
.earnings-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.earnings-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.earnings-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.earnings-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.earnings-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.earnings-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.earnings-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.earnings-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
/* hover border removed — earnings items are not clickable */
.earnings-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.earnings-item-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.earnings-item-ticker {
  font-size: 12px;
  color: var(--color-text-muted);
}
.earnings-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.earnings-item-date {
  font-size: 12px;
  color: var(--color-text-muted);
}
.earnings-item-mcap {
  font-size: 12px;
  color: var(--color-text-muted);
}
.earnings-item-eps {
  font-size: 12px;
  color: var(--color-text-faint);
}
.earnings-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
}

/* ===================================================================
   WHAT-IF CALCULATOR
   =================================================================== */
.whatif-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}
.whatif-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.whatif-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.whatif-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.whatif-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.whatif-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.whatif-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.whatif-label {
  font-size: 13px;
  color: var(--color-text-muted);
  white-space: nowrap;
  padding-top: 9px;
  min-width: 130px;
}
.whatif-select-wrap {
  flex: 1;
  position: relative;
}
.whatif-search {
  width: 100%;
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.whatif-search:focus {
  border-color: var(--color-primary);
}
.whatif-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  z-index: 100;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.whatif-dd-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background 0.12s ease;
}
.whatif-dd-item:last-child { border-bottom: none; }
.whatif-dd-item:hover { background: var(--color-surface-offset); }
.whatif-dd-name {
  font-size: var(--text-sm);
  color: var(--color-text);
  flex: 1;
}
.whatif-dd-ticker {
  font-size: 12px;
  color: var(--color-text-muted);
}
.whatif-dd-mcap {
  font-size: 12px;
  color: var(--color-text-faint);
}
.whatif-result {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.whatif-result-company {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}
.whatif-result-price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #3ec9cf;
}
.whatif-result-multiplier {
  font-size: 13px;
  color: var(--color-text-muted);
}
.whatif-result-context {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ===================================================================
   TRILLION DOLLAR CLUB
   =================================================================== */
.trillion-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}
.trillion-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.trillion-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.trillion-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.trillion-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.trillion-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-2);
}
.trillion-member {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
/* hover border removed — trillion members are not clickable */
.trillion-rank {
  font-size: 12px;
  color: var(--color-text-muted);
  min-width: 20px;
  font-variant-numeric: tabular-nums;
}
.trillion-info {
  flex: 1;
  min-width: 0;
}
.trillion-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trillion-ticker {
  font-size: 12px;
  color: var(--color-text-muted);
}
.trillion-values {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.trillion-mcap {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.trillion-price {
  font-size: 13px;
  color: var(--color-text-muted);
}
.trillion-change {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.trillion-change.pos { color: var(--color-positive); }
.trillion-change.neg { color: var(--color-negative); }
.trillion-change.flat { color: var(--color-flat); }
.trillion-empty {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-4);
  grid-column: 1 / -1;
}

/* ===================================================================
   MARKET SENTIMENT
   =================================================================== */
.sentiment-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}
.sentiment-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.sentiment-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.sentiment-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.sentiment-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sentiment-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 520px;
  margin: 0 auto;
}
.sentiment-region-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
}
.sentiment-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sentiment-bar {
  height: 12px;
  border-radius: 6px;
  background: var(--color-negative);
  overflow: hidden;
  position: relative;
}
.sentiment-bar-fill.bullish {
  height: 100%;
  background: var(--color-positive);
  border-radius: 6px;
  transition: width 0.4s ease;
}
.sentiment-bar-labels {
  display: flex;
  justify-content: space-between;
}
.sentiment-pct {
  font-size: var(--text-lg);
  font-weight: 700;
}
.sentiment-pct.bullish { color: var(--color-positive); }
.sentiment-pct.bearish { color: var(--color-negative); }
.sentiment-votes {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
}
.sentiment-vote-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  flex: 1;
  justify-content: center;
  max-width: 180px;
}
.sentiment-vote-btn.bullish {
  background: rgba(52, 211, 153, 0.1);
  border-color: var(--color-positive);
  color: var(--color-positive);
}
.sentiment-vote-btn.bullish:hover {
  background: rgba(52, 211, 153, 0.2);
}
.sentiment-vote-btn.bearish {
  background: rgba(248, 113, 113, 0.1);
  border-color: var(--color-negative);
  color: var(--color-negative);
}
.sentiment-vote-btn.bearish:hover {
  background: rgba(248, 113, 113, 0.2);
}
.sentiment-vote-btn.voted {
  opacity: 0.55;
  cursor: default;
}
.sentiment-total {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

/* ===================================================================
   CONCENTRATION TRACKER
   =================================================================== */
.concentration-section {
  flex-shrink: 0;
  max-width: var(--content-wide);
  margin: 0 auto;
  width: 100%;
  padding: var(--space-3) var(--space-4);
}
.concentration-container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}
.concentration-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.concentration-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.concentration-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.concentration-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.concentration-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}
.concentration-card {
  background: var(--color-surface-offset);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.concentration-card-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.concentration-card-pct {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #3ec9cf;
  font-variant-numeric: tabular-nums;
}
.concentration-card-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--color-border);
  overflow: hidden;
}
.concentration-card-bar-fill {
  height: 100%;
  background: #3ec9cf;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.concentration-company-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.concentration-company-item {
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
}
.concentration-remaining {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}