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

:root {
  color-scheme: dark;
  --bg-primary: #0a0a0a;
  --bg-secondary: #121212;
  --bg-tertiary: #1a1a1a;
  --bg-card: #121212;
  --border-color: rgba(255, 255, 255, 0.08);
  --border-color-hover: rgba(255, 255, 255, 0.15);
  --text-primary: #f8fafc;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
  --accent-green: #22c55e;
  --accent-red: #ef4444;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.2);
  --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --content-width: 60%;
}

@media (max-width: 1200px) {
  :root {
    --content-width: calc(100% - 48px);
  }
}

@media (max-width: 768px) {
  :root {
    --content-width: 100%;
  }
}

/* ==========================================================================
   Global Reset & Base
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* ==========================================================================
   Navigation Bar
   ========================================================================== */
.navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: var(--content-width);
  max-width: none;
  height: 60px;
  background-color: rgba(18, 18, 18, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 1000;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  transition: background-color var(--transition);
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 1.15rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.navbar-brand svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #10b981;
  color: #10b981;
  filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.45));
  transition: filter var(--transition), transform var(--transition);
}

.navbar-brand:hover svg {
  filter: drop-shadow(0 0 9px rgba(16, 185, 129, 0.75));
  transform: scale(1.05);
}

.brand-accent,
.navbar-brand .brand-accent,
.footer-brand .brand-accent {
  color: #10b981;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.navbar-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  transition: all var(--transition);
  white-space: nowrap;
}

.navbar-links a:hover {
  color: var(--text-primary);
  background-color: rgba(255,255,255,0.05);
}

.navbar-links a.active {
  color: var(--text-primary);
  background-color: rgba(255,255,255,0.1);
}

/* Assets Hamburger Menu (Desktop Navbar) */
.nav-assets-dropdown-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-assets-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.nav-assets-btn:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

.nav-assets-btn.active,
.nav-assets-btn[aria-expanded="true"] {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.1);
}

.nav-assets-hamburger {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition), color var(--transition);
}

.nav-assets-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 196px;
  background-color: rgba(18, 18, 18, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-color-hover);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1050;
  animation: fadeIn 150ms ease-out forwards;
}

.navbar-links .nav-assets-dropdown a.assets-dropdown-item,
.mobile-assets-dropdown a.assets-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all var(--transition);
  white-space: nowrap;
}

.navbar-links .nav-assets-dropdown a.assets-dropdown-item svg,
.mobile-assets-dropdown a.assets-dropdown-item svg {
  flex-shrink: 0;
  opacity: 0.8;
  transition: opacity var(--transition), color var(--transition);
}

.navbar-links .nav-assets-dropdown a.assets-dropdown-item:hover,
.mobile-assets-dropdown a.assets-dropdown-item:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.06);
}

.navbar-links .nav-assets-dropdown a.assets-dropdown-item:hover svg,
.mobile-assets-dropdown a.assets-dropdown-item:hover svg {
  opacity: 1;
}

.navbar-links .nav-assets-dropdown a.assets-dropdown-item.active,
.mobile-assets-dropdown a.assets-dropdown-item.active {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.12);
  font-weight: 600;
}

.navbar-links .nav-assets-dropdown a.assets-dropdown-item.active svg,
.mobile-assets-dropdown a.assets-dropdown-item.active svg {
  opacity: 1;
  color: var(--accent-blue);
}

.navbar-search-container {
  flex: 1 1 360px;
  min-width: 260px;
  max-width: 620px;
  margin: 0 18px;
  position: relative;
}


/* Mobile Bottom Navigation & Header Actions (Hidden on desktop) */
.mobile-bottom-nav,
.mobile-header-actions {
  display: none;
}

/* Top Assets Container & Grid */
.top-assets-container {
  width: var(--content-width);
  max-width: none;
  margin: 0 auto;
  padding: 24px 0 0 0;
}

.top-assets-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.top-assets-header .date-range-buttons,
.top-assets-header .selection-bar-wrapper {
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.top-assets-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.top-assets-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.top-assets-toggle-wrap {
  display: none;
}

/* Padding to account for floating navbar */
main {
  padding-top: 100px;
  min-height: 100vh;
}

/* ==========================================================================
   API Key Modal
   ========================================================================== */
.api-key-modal {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 200ms ease-out forwards;
}

.api-key-modal-content {
  background-color: var(--bg-card);
  padding: 40px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 440px;
  animation: slideUp 300ms ease-out forwards;
  text-align: center;
}

.api-key-modal h2 {
  margin-bottom: 12px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.api-key-modal p {
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-size: 0.95rem;
  line-height: 1.5;
}

.api-key-modal input {
  width: 100%;
  padding: 14px 20px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-mono);
  margin-bottom: 20px;
  outline: none;
  font-size: 16px;
  transition: all var(--transition);
}

.api-key-modal input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow);
}

.api-key-modal button {
  width: 100%;
  padding: 14px;
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background-color var(--transition), transform var(--transition);
}

.api-key-modal button:hover {
  background-color: var(--accent-blue-hover);
  transform: translateY(-1px);
}

/* ==========================================================================
   Home Page — Heatmap Section
   ========================================================================== */
.heatmap-container {
  width: var(--content-width);
  max-width: none;
  margin: 0 auto;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.heatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.heatmap-header .date-range-buttons,
.heatmap-header .selection-bar-wrapper {
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.heatmap-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Selectable Heatmap Title Button */
.heatmap-title-wrapper {
  display: inline-flex;
  align-items: center;
}

.heatmap-title-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 16px 8px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  text-decoration: none;
  font-family: inherit;
  transition: all var(--transition);
  outline: none;
  user-select: none;
}

.heatmap-title-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--border-color-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.heatmap-title-btn:focus-visible {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.heatmap-title-btn.active,
.heatmap-title-btn[aria-expanded="true"] {
  border-color: var(--accent-blue);
  background: var(--bg-tertiary);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.15);
}

/* Flag Icons */
.flag-icon {
  width: 24px;
  height: 17px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

.heatmap-title-flag {
  display: inline-flex;
  align-items: center;
}

.heatmap-title-flag .flag-icon {
  width: 28px;
  height: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.heatmap-title-text {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.heatmap-title-badge {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.heatmap-title-chevron {
  color: var(--text-muted);
  transition: transform var(--transition), color var(--transition);
  flex-shrink: 0;
}

.heatmap-title-btn:hover .heatmap-title-chevron {
  color: var(--text-primary);
}

.heatmap-title-btn.active .heatmap-title-chevron,
.heatmap-title-btn[aria-expanded="true"] .heatmap-title-chevron {
  transform: rotate(180deg);
  color: var(--accent-blue);
}

/* ==========================================================================
   World Index Selector Modal
   ========================================================================== */
.index-modal {
  position: fixed;
  inset: 0;
  z-index: 10005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease, visibility 200ms ease;
}

.index-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.index-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.index-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 820px;
  max-height: 85vh;
  background: #121214;
  border: 1px solid var(--border-color-hover);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: indexModalSlideIn 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes indexModalSlideIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.index-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 24px 16px 24px;
}

.index-modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.index-modal-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 3px;
}

.index-modal-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.index-modal-close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.08);
}

.index-modal-search-wrapper {
  position: relative;
  margin: 0 24px 14px 24px;
  display: flex;
  align-items: center;
}

.index-search-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.index-search-input {
  width: 100%;
  background: #18181b;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 38px 12px 40px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.index-search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.index-search-input::placeholder {
  color: var(--text-muted);
}

.index-search-clear {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
}

.index-search-clear:hover {
  color: var(--text-primary);
}

.index-modal-tabs {
  display: flex;
  gap: 8px;
  padding: 0 24px 14px 24px;
  border-bottom: 1px solid var(--border-color);
  overflow-x: auto;
  scrollbar-width: none;
}

.index-modal-tabs::-webkit-scrollbar {
  display: none;
}

.index-region-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  font-family: inherit;
  user-select: none;
}

.index-region-tab .flag-icon {
  width: 18px;
  height: 13px;
  border-radius: 2px;
}

.index-region-tab .flag-icon[src*="globe"],
.index-region-tab .flag-icon[src*="asia"],
.index-region-tab .flag-icon[src*="americas"],
.index-region-tab .flag-icon[data-flag="globe"],
.index-region-tab .flag-icon[data-flag="asia"],
.index-region-tab .flag-icon[data-flag="americas"],
.index-region-tab .flag-icon.flag-globe,
.index-region-tab .flag-icon.flag-asia,
.index-region-tab .flag-icon.flag-americas {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
}

.index-region-tab:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.index-region-tab.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.35);
  color: #60a5fa;
  font-weight: 600;
}

.index-modal-grid {
  flex: 1;
  overflow-y: auto;
  padding: 18px 24px 24px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  max-height: 52vh;
}

.index-card {
  background: #18181b;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  position: relative;
  user-select: none;
}

.index-card:hover {
  background: #202024;
  border-color: var(--border-color-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.index-card.active {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--accent-blue);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.15);
}

.index-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.index-card-title-group {
  display: flex;
  align-items: center;
  gap: 9px;
}

.index-card-flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.index-card-flag .flag-icon {
  width: 25px;
  height: 17px;
}

.index-card-name {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--text-primary);
}

.index-card.active .index-card-name {
  color: #93c5fd;
}

.index-card-active-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.15);
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.index-card-market {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.3;
}

.index-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
}

.index-card-count {
  font-size: 0.74rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.index-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}

.heatmap-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.date-range-buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  padding: 4px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.date-range-btn {
  background-color: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.date-range-btn:hover {
  color: var(--text-primary);
  background-color: rgba(255,255,255,0.05);
}

.date-range-btn.active {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.date-range-custom {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--bg-secondary);
  padding: 12px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  animation: fadeIn 200ms ease-in-out;
}

.date-range-custom input[type="date"] {
  background-color: transparent;
  color: var(--text-primary);
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 0.85rem;
  outline: none;
  font-family: var(--font-sans);
  position: relative;
  cursor: pointer;
}

.date-range-custom input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  color: transparent;
  background: transparent;
  cursor: pointer;
}

.heatmap-canvas-wrapper {
  position: relative;
  width: 100%;
  min-height: 600px;
  height: clamp(650px, calc(100vh - 280px), 1200px);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Heatmap Floating Tooltip
   ========================================================================== */
.heatmap-tooltip {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(14, 16, 22, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 10000;
  color: #ffffff;
  min-width: 250px;
  max-width: 360px;
  transition: opacity 0.08s ease;
}

.heatmap-tooltip.hidden {
  display: none !important;
  opacity: 0;
  pointer-events: none;
}

.heatmap-tt-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.heatmap-tt-logo-wrap {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.heatmap-tt-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.heatmap-tt-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
}

.heatmap-tt-title-group {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.heatmap-tt-symbol-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.heatmap-tt-symbol {
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
}

.heatmap-tt-sector {
  font-size: 0.7rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}

.heatmap-tt-name {
  font-size: 0.82rem;
  color: #cbd5e1;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.heatmap-tt-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.heatmap-tt-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.heatmap-tt-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}

.heatmap-tt-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: #71717a;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 2px;
}

.heatmap-tt-icon {
  color: #71717a;
  flex-shrink: 0;
}

.heatmap-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.heatmap-legend-scale {
  display: flex;
  height: 6px;
  width: 200px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--accent-red), var(--bg-tertiary), var(--accent-green));
}

/* ==========================================================================
   Stock Page
   ========================================================================== */
.stock-page {
  width: var(--content-width);
  max-width: none;
  margin: 0 auto;
  padding: 24px 0;
}

#stockContent {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Stock Tab Bar */
.stock-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 24px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  gap: 8px;
}

.stock-tabs-wrapper > .stock-tabs {
  height: 100%;
  display: flex;
  align-items: stretch;
  border-bottom: none !important;
  margin: 0 !important;
  padding: 0;
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.stock-tabs {
  display: flex;
  gap: 24px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  padding: 0;
  width: 100%;
  height: 48px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.stock-tabs::-webkit-scrollbar {
  display: none;
}

.stock-tab-btn {
  background-color: transparent;
  color: var(--text-secondary);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 0 10px;
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
  height: 100%;
  min-height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.stock-tab-btn:hover {
  color: var(--text-primary);
  background-color: transparent;
}

.stock-tab-btn.active {
  background-color: transparent;
  color: var(--text-primary);
  border-bottom-color: var(--accent-blue);
  box-shadow: none;
}

/* Stock Tab Panels */
.stock-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  animation: fadeIn 200ms ease-out;
}

/* ==========================================================================
   Financials Tab
   ========================================================================== */
.fin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.fin-sheet-tabs,
.fin-period-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 4px;
}

.fin-sheet-btn,
.fin-period-btn {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
}

.fin-sheet-btn:hover,
.fin-period-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.fin-sheet-btn.active,
.fin-period-btn.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fin-table-wrap {
  overflow: auto;
  max-height: clamp(580px, 68vh, 850px);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.02);
}

/* Custom Scrollbars */
.fin-table-wrap::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.fin-table-wrap::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 4px;
}

.fin-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

.fin-table-wrap::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.fin-table-wrap::-webkit-scrollbar-corner {
  background: transparent;
}

.fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fin-table thead {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-card);
}

.fin-table thead tr {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
}

.fin-table th {
  padding: 14px 20px;
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: right;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-card);
  box-shadow: inset 0 -1px 0 var(--border-color);
}

.fin-table th.fin-period-header {
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.fin-table th.fin-period-header:hover {
  color: var(--text-primary);
  background: #181818;
  background: linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05)), var(--bg-card);
}

.fin-table th.fin-period-header.selected {
  color: var(--accent-blue);
  background: #172033;
  background: linear-gradient(rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.15)), var(--bg-card);
  box-shadow: inset 0 -2px 0 var(--accent-blue);
}

.fin-table th.fin-period-header.selected:hover {
  color: var(--accent-blue);
  background: #1c283f;
  background: linear-gradient(rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.22)), var(--bg-card);
  box-shadow: inset 0 -2px 0 var(--accent-blue);
}

.fin-table th.fin-label-col {
  text-align: left;
  position: sticky;
  left: 0;
  top: 0;
  z-index: 10;
  background: var(--bg-card);
  box-shadow: inset -1px -1px 0 var(--border-color);
}

.fin-table td {
  padding: 11px 20px;
  color: var(--text-secondary);
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.fin-table td.fin-label-col {
  text-align: left;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  font-size: 0.875rem;
  min-width: 180px;
  position: sticky;
  left: 0;
  background: var(--bg-card);
  z-index: 2;
  box-shadow: inset -1px 0 0 var(--border-color);
}

/* Compact label column for date/year-oriented tables */
.hist-table td.fin-label-col,
.earn-table td.fin-label-col,
.div-table td.fin-label-col {
  min-width: 120px;
}

.fin-table tr:last-child td {
  border-bottom: none;
}

.fin-table tr:hover td {
  background: var(--bg-tertiary);
}

.fin-table tr:hover td.fin-label-col {
  background: var(--bg-tertiary);
}

.fin-table tr.fin-bold td {
  color: var(--text-primary);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.02);
}

.fin-table tr.fin-bold td.fin-label-col {
  background: #171717;
}

.fin-table tr.fin-bold:hover td,
.fin-table tr.fin-bold:hover td.fin-label-col {
  background: var(--bg-tertiary);
}

.fin-table td.fin-label-col.fin-indent-1 {
  padding-left: 2rem;
  color: var(--text-muted);
  font-size: 0.825rem;
}

.fin-table td.fin-label-col.fin-indent-2 {
  padding-left: 3.5rem;
  color: var(--text-muted);
  font-size: 0.825rem;
}

.fin-table tr.fin-section-start td {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.fin-table tr.fin-section-end td {
  border-bottom: 2px solid rgba(255, 255, 255, 0.12) !important;
}

.fin-negative {
  color: var(--accent-red);
}

/* ==========================================================================
   Ratios Tab
   ========================================================================== */
.ratio-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ratio-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 96px;
}

@media (max-width: 768px) {
  .ratio-group {
    scroll-margin-top: 120px;
  }
}

.ratio-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.4s ease, border-color 0.4s ease, padding 0.3s ease;
  border-radius: var(--radius-sm);
}

.ratio-group-header.ratio-header-highlight {
  animation: ratioHeaderPulse 1.8s ease-out forwards;
}

@keyframes ratioHeaderPulse {
  0% {
    background: rgba(59, 130, 246, 0.22);
    border-bottom-color: var(--accent-blue);
    padding-left: 10px;
    padding-right: 10px;
  }
  60% {
    background: rgba(59, 130, 246, 0.12);
    border-bottom-color: var(--accent-blue);
    padding-left: 10px;
    padding-right: 10px;
  }
  100% {
    background: transparent;
    border-bottom-color: var(--border-color);
    padding-left: 0;
    padding-right: 0;
  }
}

.ratio-group-icon {
  color: var(--accent-blue);
  display: flex;
  align-items: center;
}

.ratio-group-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.ratio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.ratio-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all var(--transition);
  position: relative;
}

.ratio-card:hover {
  border-color: var(--border-color-hover);
  background: var(--bg-tertiary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

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

.ratio-label-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ratio-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ratio-info-icon {
  color: var(--text-muted);
  cursor: help;
  display: flex;
  align-items: center;
  position: relative;
}

.ratio-info-icon:hover {
  color: var(--text-primary);
}

.ratio-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background-color: rgba(20, 20, 20, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.75rem;
  color: var(--text-primary);
  width: 200px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: all var(--transition);
  z-index: 10;
  box-shadow: var(--shadow-md);
  line-height: 1.4;
}

.ratio-info-icon:hover .ratio-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.ratio-card-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ratio-value {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.ratio-trend {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.05);
}

.ratio-trend.ratio-good {
  color: var(--accent-green);
  background: rgba(34, 197, 94, 0.1);
}

.ratio-trend.ratio-bad {
  color: var(--accent-red);
  background: rgba(239, 68, 68, 0.1);
}

.ratio-trend.ratio-neutral {
  color: var(--text-muted);
}

.ratio-tab-btn:hover:not(.active) {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.ratio-view-btn:hover:not(.active) {
  color: var(--text-primary) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.ratio-period-select:focus {
  border-color: var(--accent-blue) !important;
}

.ratio-sparkline {
  transition: transform 0.2s ease;
}

.ratio-card:hover .ratio-sparkline {
  transform: scale(1.08);
}

.ratio-pill-btn {
  cursor: pointer;
  user-select: none;
  transition: all var(--transition);
}

.ratio-pill-btn:hover {
  border-color: var(--accent-blue) !important;
  background: rgba(59, 130, 246, 0.12) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}

.ratio-pill-btn:active {
  transform: translateY(0);
}

.ratio-pill-btn:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* ==========================================================================
   Earnings Tab
   ========================================================================== */
.earn-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.earn-summary-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all var(--transition);
}

.earn-summary-card:hover {
  border-color: var(--border-color-hover);
  background: var(--bg-tertiary);
}

.earn-summary-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.earn-summary-value {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.earn-summary-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.earn-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.earn-section-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Bar Chart */
.earn-chart {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px 24px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.earn-bars-wrap {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.earn-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: 52px;
}

.earn-bars {
  display: flex;
  align-items: flex-end;
  height: 140px;
  width: 100%;
}

.earn-bar-pair {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  width: 100%;
  height: 100%;
}

.earn-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  min-height: 3px;
  transition: opacity var(--transition);
}

.earn-bar:hover {
  opacity: 0.8;
}

.earn-bar-est {
  background: rgba(161, 161, 170, 0.35);
}

.earn-bar-beat {
  background: var(--accent-green);
}

.earn-bar-miss {
  background: var(--accent-red);
}

.earn-bar-neutral {
  background: var(--text-muted);
}

.earn-bar-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-align: center;
  white-space: nowrap;
}

.earn-bar-surprise {
  font-size: 0.7rem;
  font-weight: 600;
  font-family: var(--font-mono);
  text-align: center;
}

.earn-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  padding-top: 4px;
  border-top: 1px solid var(--border-color);
}

.earn-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.earn-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.earn-dot-est  { background: rgba(161, 161, 170, 0.35); border: 1px solid rgba(161,161,170,0.5); }
.earn-dot-beat { background: var(--accent-green); }
.earn-dot-miss { background: var(--accent-red); }

/* Earnings table overrides */
.earn-table th {
  text-align: right;
}
.earn-table th:first-child {
  text-align: left;
}
.earn-table td:first-child {
  text-align: left;
  font-family: var(--font-sans);
}

@media (max-width: 768px) {
  .earn-summary {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .earn-summary {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .earn-summary-card {
    padding: 12px 14px;
  }
  .earn-summary-value {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   Earnings Call Highlights, Transcripts & Documents Center
   ========================================================================== */
.earn-call-center {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition);
}

.earn-call-topbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 20px;
}

.earn-call-title-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.earn-call-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.earn-call-title-row h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.earn-call-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.725rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
  border: 1px solid rgba(59, 130, 246, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.earn-call-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.earn-quarter-selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  max-width: 100%;
}

.earn-q-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.earn-q-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

.earn-q-btn.active {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
  font-weight: 600;
  box-shadow: var(--shadow-glow);
}

.earn-q-btn .q-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.8;
}

/* Call navigation sub-tabs */
.earn-subnav-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.earn-call-tabs {
  display: flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 4px;
  gap: 4px;
}

.earn-call-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.earn-call-tab-btn svg {
  width: 16px;
  height: 16px;
  opacity: 0.8;
}

.earn-call-tab-btn:hover {
  color: var(--text-primary);
}

.earn-call-tab-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.earn-call-tab-btn.active svg {
  color: var(--accent-blue);
  opacity: 1;
}

.earn-call-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.earn-action-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}

.earn-action-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-color-hover);
}

.earn-action-btn.primary {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
  border-color: rgba(59, 130, 246, 0.35);
}

.earn-action-btn.primary:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: var(--accent-blue);
}

/* Tab Panels */
.earn-call-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.earn-call-panel.hidden {
  display: none;
}

/* Highlights styling */
.earn-hl-metrics-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.earn-hl-metric-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.earn-hl-metric-label {
  font-size: 0.725rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.earn-hl-metric-val {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.earn-hl-metric-sub {
  font-size: 0.775rem;
  color: var(--text-secondary);
}

.earn-hl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.earn-hl-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

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

.earn-hl-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.earn-hl-card-title svg {
  color: var(--accent-blue);
}

.earn-quote-box {
  background: rgba(255, 255, 255, 0.02);
  border-left: 3px solid var(--accent-blue);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.earn-quote-box.cfo-quote {
  border-left-color: var(--accent-green);
}

.earn-quote-speaker {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.earn-quote-role-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
}

.earn-quote-role-badge.cfo {
  background: rgba(34, 197, 94, 0.12);
  color: var(--accent-green);
}

.earn-quote-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
}

.earn-takeaways-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.earn-takeaway-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.earn-takeaway-item svg {
  width: 16px;
  height: 16px;
  color: var(--accent-green);
  flex-shrink: 0;
  margin-top: 2px;
}

.earn-qa-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.earn-qa-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.earn-qa-analyst {
  font-weight: 600;
  color: var(--accent-blue);
}

.earn-qa-q {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
}

.earn-qa-a {
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.5;
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  padding-left: 10px;
}

/* Transcripts View */
.earn-transcript-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
}

.earn-transcript-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 500px;
}

.earn-search-input-wrap {
  position: relative;
  flex: 1;
}

.earn-search-input-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.earn-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 12px 8px 36px;
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: all var(--transition);
}

.earn-search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.earn-speaker-select {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  color: var(--text-primary);
  font-size: 0.825rem;
  outline: none;
  cursor: pointer;
}

.earn-transcript-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.earn-transcript-stats {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding: 0 4px;
}

.earn-transcript-scroll-area {
  max-height: 580px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 8px;
}

.earn-speaker-turn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color var(--transition);
}

.earn-speaker-turn:hover {
  border-color: var(--border-color-hover);
}

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

.earn-turn-speaker-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.earn-speaker-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.earn-speaker-avatar.cfo {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
}

.earn-speaker-avatar.analyst {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}

.earn-speaker-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.earn-speaker-role {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

.earn-speaker-role.exec {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
}

.earn-speaker-role.analyst {
  background: rgba(168, 85, 247, 0.12);
  color: #c084fc;
}

.earn-turn-text {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  white-space: pre-wrap;
}

.earn-hl-keyword {
  background: rgba(234, 179, 8, 0.25);
  color: #fef08a;
  padding: 0 2px;
  border-radius: 2px;
}

/* Documents & Downloads */
.earn-docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.earn-doc-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  transition: all var(--transition);
}

.earn-doc-card:hover {
  border-color: var(--border-color-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.earn-doc-top {
  display: flex;
  gap: 14px;
}

.earn-doc-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.earn-doc-icon-wrap.sec-10q {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
}

.earn-doc-icon-wrap.sec-8k {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
}

.earn-doc-icon-wrap.slides {
  background: rgba(249, 115, 22, 0.15);
  color: #fb923c;
}

.earn-doc-icon-wrap.package {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}

.earn-doc-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.earn-doc-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.earn-doc-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.earn-doc-badge {
  font-size: 0.675rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.earn-doc-badge.badge-blue { background: rgba(59, 130, 246, 0.15); color: var(--accent-blue); }
.earn-doc-badge.badge-green { background: rgba(34, 197, 94, 0.15); color: var(--accent-green); }
.earn-doc-badge.badge-orange { background: rgba(249, 115, 22, 0.15); color: #fb923c; }
.earn-doc-badge.badge-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }

.earn-doc-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.earn-doc-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: flex;
  gap: 12px;
}

.earn-doc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border-color);
}

.earn-doc-download-btn {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  transition: all var(--transition);
}

.earn-doc-download-btn:hover {
  background: var(--accent-blue);
  color: #fff;
  border-color: var(--accent-blue);
}

.earn-doc-sec-link {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.825rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all var(--transition);
}

.earn-doc-sec-link:hover {
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

/* Toast feedback */
.fin-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--bg-card);
  border: 1px solid var(--accent-blue);
  color: var(--text-primary);
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: slideUp 200ms ease-out;
}

@media (max-width: 900px) {
  .earn-hl-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Dividends Tab
   ========================================================================== */
.div-badge-upcoming {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.div-badge-paid {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 500;
}

.div-frequency-badge {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  font-weight: 500;
}

.div-type-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.div-type-badge.regular {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.div-type-badge.special {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.div-type-badge.spinoff {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.35);
}

.div-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.div-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all var(--transition);
}

.div-stat-card:hover {
  border-color: var(--border-color-hover);
  background: var(--bg-tertiary);
}

.div-stat-card.dividend-king {
  border-color: rgba(245, 158, 11, 0.4);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.07) 0%, var(--bg-card) 100%);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.08);
}

.div-stat-card.dividend-king:hover {
  border-color: rgba(245, 158, 11, 0.6);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, var(--bg-card) 100%);
}

.div-king-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

.div-stat-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.div-stat-value {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.div-stat-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

@media (max-width: 900px) {
  .div-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .div-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .div-stat-card {
    padding: 12px 14px;
  }
  .div-stat-value {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   Holders Tab & Political Intelligence
   ========================================================================== */
.holders-subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}

.holders-tab-group {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 4px;
}

.holders-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
}

.holders-subtab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.holders-subtab-btn.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.holders-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 0.725rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

.holders-subtab-btn.active .holders-tab-badge {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

.holders-intel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  padding: 6px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

/* Toolbar: search + filters + export */
.holders-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.holders-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

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

.holders-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.holders-search-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 12px 8px 36px;
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.holders-search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.holders-pill-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
}

.holders-pill-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

.holders-pill-btn.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
  font-weight: 600;
}

.holders-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 7px 14px;
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.holders-export-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

/* Politician Leaderboard Cards */
.politician-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.politician-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.politician-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-color-hover);
  box-shadow: var(--shadow-sm);
}

.politician-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.politician-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.politician-sub {
  font-size: 0.775rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.politician-stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: 0.8rem;
}

/* Badges */
.badge-chamber {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.725rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.badge-chamber-senate {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.badge-chamber-house {
  background: rgba(20, 184, 166, 0.15);
  color: #5eead4;
  border: 1px solid rgba(20, 184, 166, 0.3);
}

.badge-state {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-family: var(--font-mono);
}

/* Politician Party Alignment Badges */
.party-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 18px;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
}

.party-badge-r {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.36);
}

.party-badge-d {
  background: rgba(59, 130, 246, 0.16);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.36);
}

.party-badge-i {
  background: rgba(168, 85, 247, 0.16);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.36);
}

.badge-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-action-buy {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-action-sell {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-action-award {
  background: rgba(56, 189, 248, 0.14);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.badge-action-exchange {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.delay-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 4px;
}

.delay-pill.timely {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
}

.delay-pill.delayed {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.25);
  font-weight: 600;
}

/* Sentiment progress bar */
.sentiment-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.sentiment-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
  display: flex;
}

.sentiment-bar-fill-buy {
  background: var(--accent-green);
  transition: width 300ms ease;
}

.sentiment-bar-fill-sell {
  background: var(--accent-red);
  transition: width 300ms ease;
}

/* Institutional visual concentration breakdown */
.concentration-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Institutional Concentration & Ranked Flow Visualizer */
.inst-flow-layout {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .inst-flow-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Left: Concentration Index Panel */
.inst-concentration-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.inst-concentration-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.inst-concentration-headline {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
}

.inst-concentration-pct {
  font-size: 2.25rem;
  font-weight: 800;
  font-family: var(--font-mono);
  color: var(--text-primary);
  line-height: 1;
}

.inst-concentration-sub {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--accent-blue);
}

.inst-concentration-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-top: 6px;
}

.inst-tier-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.inst-tier-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.inst-tier-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.inst-tier-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.inst-tier-val {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-primary);
}

.inst-tier-val span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.inst-tier-bar {
  display: flex;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}

.inst-flow-summary-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inst-flow-summary-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.inst-flow-summary-val {
  font-size: 0.825rem;
  color: var(--text-secondary);
}

/* Right: Ranked Bars Panel */
.inst-flow-bars-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inst-flow-bars-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.inst-flow-legend-pills {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.75rem;
}

.inst-flow-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.inst-flow-legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.inst-flow-legend-dot.bg-green {
  background: #22c55e;
}

.inst-flow-legend-dot.bg-red {
  background: #ef4444;
}

.inst-flow-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inst-flow-row {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 160ms ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inst-flow-row:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color);
  transform: translateX(2px);
}

.inst-flow-row.active-flow-row {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--accent-blue);
}

.inst-flow-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.inst-flow-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.inst-flow-rank {
  font-size: 0.725rem;
  font-weight: 700;
  color: var(--text-muted);
  width: 24px;
  flex-shrink: 0;
}

.inst-flow-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inst-flow-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.inst-flow-shares {
  font-size: 0.825rem;
  font-weight: 700;
  color: var(--text-primary);
}

.inst-flow-badge {
  font-size: 0.725rem;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
}

.inst-flow-badge-buy {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.inst-flow-badge-sell {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.inst-flow-badge-neutral {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

.inst-flow-track {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  overflow: hidden;
}

.inst-flow-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.inst-bar-buyer {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.inst-bar-seller {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.inst-bar-neutral {
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

/* Rank badge in table */
.holders-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Sortable column headers */
.holders-th {
  text-align: right;
  cursor: pointer;
  user-select: none;
  transition: color var(--transition);
}

.holders-th:first-child {
  text-align: left;
}

.holders-th:hover {
  color: var(--text-primary) !important;
}

.holders-th.sorted-asc::after {
  content: ' ↑';
  font-size: 0.75rem;
  color: var(--accent-blue);
}

.holders-th.sorted-desc::after {
  content: ' ↓';
  font-size: 0.75rem;
  color: var(--accent-blue);
}

/* Table micro-bar */
.holder-weight-bar-bg {
  width: 60px;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}

.holder-weight-bar-fill {
  height: 100%;
  background: var(--accent-blue);
  border-radius: 2px;
}

/* Search Section */
.search-section {
  width: 100%;
}

.search-input-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.search-icon svg {
  width: 18px;
  height: 18px;
}

.search-input {
  width: 100%;
  font-size: 1.1rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 18px 24px 18px 52px;
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-sans);
}

.search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow), 0 0 0 1px var(--accent-blue);
  background-color: var(--bg-secondary);
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max(100%, 650px);
  min-width: 600px;
  max-width: min(780px, calc(100vw - 32px));
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
  max-height: 480px;
  overflow-y: auto;
  z-index: 1050;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.search-dropdown::-webkit-scrollbar {
  width: 6px;
}

.search-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.search-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 4px;
}

.search-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* Searching Table Header */
.search-table-header {
  display: flex;
  align-items: center;
  padding: 8px 18px;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.03);
  user-select: none;
}

.search-table-header .col-symbol {
  min-width: 110px;
  max-width: 130px;
  flex-shrink: 0;
}

.search-table-header .col-name {
  flex: 1 1 0;
  min-width: 0;
  margin: 0 12px;
}

.search-table-header .col-type {
  min-width: 76px;
  max-width: 86px;
  flex-shrink: 0;
  text-align: center;
  margin-right: 8px;
}

.search-table-header .col-price {
  min-width: 88px;
  flex-shrink: 0;
  text-align: right;
  margin-right: 14px;
}

.search-table-header .col-exchange {
  min-width: 74px;
  max-width: 88px;
  flex-shrink: 0;
  text-align: right;
  margin-left: auto;
}

.search-table-header.has-action-col .col-exchange {
  margin-left: 0;
}

.search-table-header .col-action {
  min-width: 88px;
  max-width: 104px;
  flex-shrink: 0;
  text-align: right;
  margin-left: 12px;
}

/* Searching Table Result Rows */
.search-result-item {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  transition: background-color var(--transition);
  min-height: 48px;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover,
.search-result-item.selected {
  background-color: var(--bg-tertiary);
}

.search-result-item .symbol {
  font-family: var(--font-mono);
  color: var(--accent-blue);
  font-weight: 600;
  font-size: 0.92rem;
  min-width: 110px;
  max-width: 130px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.search-result-item .symbol-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 13px;
  flex-shrink: 0;
}

.search-result-item .symbol-flag.cmdty-flag,
.search-result-item .symbol-flag.index-flag {
  font-size: 11px;
}

.search-result-item .flag-icon {
  width: 18px;
  height: 12px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.25);
  display: block;
}

.search-result-item .symbol-text {
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-result-item .name {
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 500;
  margin: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 0;
  min-width: 0;
}

.search-result-item .type-col {
  min-width: 76px;
  max-width: 86px;
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-right: 8px;
}

.search-type-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.2;
}

.search-type-tag.type-stock {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.search-type-tag.type-etf {
  background: rgba(59, 130, 246, 0.14);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.search-type-tag.type-cmdty {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.search-type-tag.type-forex {
  background: rgba(16, 185, 129, 0.14);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.search-type-tag.type-crypto {
  background: rgba(168, 85, 247, 0.14);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.25);
}

.search-type-tag.type-index {
  background: rgba(6, 182, 212, 0.14);
  color: #22d3ee;
  border: 1px solid rgba(6, 182, 212, 0.25);
}

.search-result-item .price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  min-width: 88px;
  flex-shrink: 0;
  text-align: right;
  margin-right: 14px;
  font-family: var(--font-mono);
}

.search-result-item .price-val {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.search-result-item .price-empty {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.search-result-item .change-val {
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.2;
  margin-top: 2px;
}

.search-result-item .exchange {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  margin-left: auto;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 74px;
  max-width: 88px;
  text-align: right;
  text-transform: uppercase;
}

.search-result-item.has-action-col .exchange {
  margin-left: 0;
}

.search-result-item .action-col {
  min-width: 88px;
  max-width: 104px;
  flex-shrink: 0;
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: 12px;
}

.search-exchange-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.search-forex-tag {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}

.search-crypto-tag {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.search-all-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(59, 130, 246, 0.08);
  border-top: 1px solid var(--border-color);
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
}

.search-all-results-footer:hover {
  background: rgba(59, 130, 246, 0.16);
}

.search-all-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--accent-blue);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-all-text strong {
  color: var(--text-primary);
}

.search-enter-kbd {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 6px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Mobile Back Button (Desktop Default) */
.mobile-back-btn {
  display: none;
}

/* Mobile Search Cancel Button (Desktop Default) */
.mobile-search-cancel-btn {
  display: none;
}

/* Search Clear Button */
.search-clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e2e8f0;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition);
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.search-clear-btn:hover {
  background: rgba(255, 255, 255, 0.32);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}

.search-clear-btn:active {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(0.95);
}

.search-clear-btn.hidden {
  display: none !important;
}

/* Search Quick / Trending Ticker Chips */
.search-quick-section {
  padding: 14px 18px 14px 18px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0;
}

.search-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.search-section-header.recent-header {
  padding: 14px 18px 8px 18px;
  margin-bottom: 0;
}

.search-clear-recent-btn {
  background: transparent;
  border: none;
  color: var(--accent-blue);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all var(--transition);
}

.search-clear-recent-btn:hover {
  background: rgba(59, 130, 246, 0.1);
}

.search-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.search-quick-chip:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.search-quick-chip .chip-symbol {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-blue);
  font-size: 0.82rem;
}

.search-quick-chip .chip-name {
  font-size: 0.75rem;
  color: var(--text-secondary);
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Scrubbing Badge on Chart Touch */
.company-scrub-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-family: var(--font-mono);
  font-weight: 600;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: 0.02em;
  animation: fadeIn 120ms ease-out;
}

.company-scrub-badge.positive {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.35);
}

.company-scrub-badge.negative {
  color: #f87171;
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
}

/* Modal Bottom Sheet Handle Bar (Desktop Default) */
.bottom-sheet-handle-bar {
  display: none;
}

/* Company Header */
.company-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}

.company-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.company-logo {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: white;
  padding: 6px;
  object-fit: contain;
  box-shadow: var(--shadow-sm);
}

.company-identity {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.company-name {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.company-exchange {
  color: var(--text-muted);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.company-currency-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  letter-spacing: 0.5px;
  font-family: var(--font-mono);
  vertical-align: middle;
}

.fin-currency-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  font-family: var(--font-mono);
}

.company-price-info {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 4px;
}

.company-price {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1;
}

.company-change {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.company-change.positive {
  background-color: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
}

.company-change.negative {
  background-color: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
}

/* Info Cards Grid */
.info-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.info-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all var(--transition);
}

.info-card:hover {
  border-color: var(--border-color-hover);
  background-color: var(--bg-tertiary);
}

.info-label {
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.info-value {
  color: var(--text-primary);
  font-size: 1.25rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Top Assets Cards */
.asset-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  height: 120px;
}

.asset-card:hover {
  border-color: var(--border-color-hover);
  background-color: var(--bg-tertiary);
}

.asset-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}

.asset-card-name {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.asset-card-price {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.asset-card-change-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.asset-card-change-pct {
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.asset-card-change-abs {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.asset-card-chart {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
}

.asset-card-chart canvas {
  width: 100%;
  height: 100%;
}


/* Chart Section */
.chart-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.chart-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
}

.chart-container {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 20px;
  min-height: 450px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* Hide TradingView attribution logo / watermark */
#tv-attr-logo,
a#tv-attr-logo,
[id^="tv-attr-logo"],
.chart-container a[href*="tradingview.com"],
.forex-chart-wrapper a[href*="tradingview.com"],
.etf-chart-card a[href*="tradingview.com"],
a[title*="TradingView"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
  left: -9999px !important;
}

/* ==========================================================================
   Stock Chart Drag Selection & Info Card (Perplexity Finance Style)
   ========================================================================== */

.stock-chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}

/* Shaded Range Selection Box */
.chart-selection-range {
  position: absolute;
  top: 0;
  pointer-events: none;
  display: none;
  z-index: 4;
  transition: background 0.15s ease;
}

.chart-selection-range .selection-band {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.05);
}

.chart-selection-range.negative .selection-band {
  background: rgba(239, 68, 68, 0.08);
}

.chart-selection-range.positive .selection-band {
  background: rgba(34, 197, 94, 0.08);
}

.chart-selection-range .selection-start-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  border-left: 1.5px dashed rgba(255, 255, 255, 0.45);
  z-index: 2;
}

.chart-selection-range .selection-current-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #3b82f6;
  z-index: 3;
}

.chart-selection-range.negative .selection-current-line {
  background: #ef4444;
}

.chart-selection-range.positive .selection-current-line {
  background: #22c55e;
}

.chart-selection-range .selection-start-dot,
.chart-selection-range .selection-current-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

.chart-selection-range .selection-start-dot {
  background: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}

.chart-selection-range.negative .selection-current-dot {
  background: #ef4444;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.7);
}

.chart-selection-range.positive .selection-current-dot {
  background: #22c55e;
  border: 1.5px solid #ffffff;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}

/* Floating Info Card */
.chart-info-card {
  position: absolute;
  background: rgba(22, 22, 24, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35);
  padding: 10px 14px;
  color: #f3f4f6;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
  font-size: 12px;
  min-width: 175px;
  pointer-events: none;
  z-index: 10;
  display: none;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
  transform: translate3d(0, 0, 0);
  will-change: left, top;
}

.chart-info-card.pinned {
  pointer-events: auto;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45);
}

.chart-info-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.chart-info-card-date {
  font-weight: 600;
  font-size: 12px;
  color: #f3f4f6;
  letter-spacing: -0.01em;
}

.chart-info-card-close {
  display: none;
  cursor: pointer;
  background: transparent;
  border: none;
  color: #9ca3af;
  font-size: 15px;
  line-height: 1;
  padding: 0 3px;
  margin: 0;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}

.chart-info-card.pinned .chart-info-card-close {
  display: block;
}

.chart-info-card-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.chart-info-card-body {
  display: flex;
  flex-direction: column;
}

.chart-info-card-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 3.5px;
  font-size: 11.5px;
  line-height: 1.35;
}

.chart-info-card-label {
  color: #9ca3af;
  font-weight: 400;
}

.chart-info-card-val {
  color: #f9fafb;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.chart-info-card-delta {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-info-card-delta.negative {
  color: #f87171;
}

.chart-info-card-delta.positive {
  color: #4ade80;
}

.chart-info-card-delta.neutral {
  color: #9ca3af;
}

.chart-info-card-delta-text {
  letter-spacing: -0.01em;
}

/* Company Description */
.company-description {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 32px;
}

.company-description h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 16px;
}

.company-description p {
  color: var(--text-secondary);
  line-height: 1.6;
  font-size: 1.05rem;
  white-space: pre-wrap;
}

.description-toggle-btn {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-size: 1rem;
  font-weight: 500;
  padding: 8px 0 0 0;
  cursor: pointer;
  transition: color var(--transition);
}

.description-toggle-btn:hover {
  color: #79c0ff;
  text-decoration: underline;
}

/* Company Details */
.company-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}

.company-detail-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  min-width: 0;
  transition: all var(--transition);
}

.company-detail-card:hover {
  border-color: var(--border-color-hover);
  background-color: var(--bg-tertiary);
}

.company-detail-card .detail-icon {
  color: var(--accent-blue);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 900px) {
  .company-detail-card-wide {
    grid-column: span 2;
  }
}

/* ==========================================================================
   Loading & Error States
   ========================================================================== */
.loading-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 50;
  border-radius: inherit;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.error-message {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--accent-red);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-weight: 500;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  color: var(--text-muted);
  text-align: center;
  gap: 16px;
}

.empty-state svg {
  width: 56px;
  height: 56px;
  fill: currentColor;
  opacity: 0.3;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */
.text-green { color: var(--accent-green) !important; }
.text-red { color: var(--accent-red) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-mono, .font-mono { font-family: var(--font-mono) !important; }
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-sm { font-size: 0.85rem !important; }
.text-xs { font-size: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }

.hidden { display: none !important; }
.flex { display: flex !important; }
.flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

/* ==========================================================================
   Animations
   ========================================================================== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-fadeIn {
  animation: fadeIn 300ms ease-in-out forwards;
}

.animate-slideUp {
  animation: slideUp 300ms ease-out forwards;
}

/* ==========================================================================
   Live Data Status Button
   ========================================================================== */
#marketingPage:not(.hidden) ~ #liveStatusBtn {
  display: none !important;
}

.live-status-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  z-index: 50;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition), background-color var(--transition), color var(--transition), box-shadow var(--transition);
  user-select: none;
  -webkit-user-select: none;
}

.live-status-btn:hover {
  border-color: var(--border-color-hover);
  color: var(--text-primary);
  background: #202023;
}

.live-status-btn .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Live State (Green Circle) */
.live-status-btn.is-live .status-dot {
  background-color: var(--accent-green);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

/* API Limit / Out of Usage State (Red Circle) */
.live-status-btn.is-out .status-dot {
  background-color: var(--accent-red);
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.4);
}


#navbarSearchContainer .search-input {
  padding: 10px 38px 10px 40px;
  font-size: 0.95rem;
  background-color: rgba(255, 255, 255, 0.05);
}
#navbarSearchContainer .search-icon {
  left: 14px;
}
#navbarSearchContainer .search-dropdown {
  width: max(100%, 650px);
  min-width: 600px;
  max-width: min(780px, calc(100vw - 32px));
  max-height: 480px;
}

/* Prevent text selection on date range buttons */
.date-range-btn {
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   Historic Data Tab
   ========================================================================== */
.hist-section {
  margin-bottom: 32px;
}

/* Scrollable daily table — cap height so the annual table stays visible */
.hist-daily-wrap {
  max-height: 520px;
  overflow-y: auto;
}

/* Sticky header for the daily table so columns stay visible while scrolling */
.hist-daily-wrap thead th {
  position: sticky;
  top: 0;
  background: var(--bg-secondary);
  z-index: 5;
  box-shadow: inset 0 -1px 0 var(--border-color);
}



/* Highlight the current year row in the annual table */
.hist-table tr.hist-current-year {
  background: rgba(59, 130, 246, 0.06);
}

/* ==========================================================================
   Ultimate Plan Additions: Analyst Targets, YoY, Insiders, Earnings Reactions
   ========================================================================== */

/* Analyst Price Targets Consensus Widget */
.analyst-target-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-top: 24px;
}

.analyst-target-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.analyst-target-grid {
  display: grid;
  grid-template-columns: 200px 220px 1fr;
  gap: 24px;
  align-items: center;
}

@media (max-width: 860px) {
  .analyst-target-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.analyst-target-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analyst-target-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.analyst-target-val {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.analyst-target-badge {
  font-size: 0.85rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.analyst-target-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Target Range Bar */
.analyst-target-bar-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.analyst-bar-track-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  position: relative;
}

.analyst-bound-label {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  font-family: var(--font-mono);
  user-select: none;
}

.analyst-bound-label.bound-low {
  align-items: flex-start;
  text-align: left;
}

.analyst-bound-label.bound-high {
  align-items: flex-end;
  text-align: right;
}

.analyst-bound-label .bound-title {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  line-height: 1.1;
  margin-bottom: 2px;
}

.analyst-bound-label .bound-price {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  line-height: 1.2;
}

.analyst-bar-track-container {
  flex: 1;
  min-width: 120px;
  position: relative;
  padding: 24px 0 26px 0;
}

.analyst-bar-track {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  margin: 0;
}

.analyst-bar-fill {
  position: absolute;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.55), rgba(59, 130, 246, 0.65), rgba(34, 197, 94, 0.65));
}

.analyst-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  z-index: 5;
  transition: left 0.25s ease;
}

.marker-current {
  background: #ffffff;
  border: 2px solid #09090b;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
  z-index: 7;
}

.marker-consensus {
  background: var(--accent-blue);
  border: 2px solid #ffffff;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.85);
  z-index: 6;
}

.marker-tag {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-family: var(--font-mono);
  font-weight: 600;
  background: #18181b;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transition: left 0.25s ease, transform 0.25s ease;
}

.marker-tag.align-left {
  left: 0;
  transform: translateX(0);
}

.marker-tag.align-right {
  left: auto;
  right: 0;
  transform: translateX(0);
}

.consensus-tag {
  bottom: auto;
  top: 18px;
  border-color: rgba(59, 130, 246, 0.5);
  color: #93c5fd;
  background: #0f172a;
}

.analyst-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

@media (max-width: 520px) {
  .analyst-bar-track-row {
    gap: 8px;
  }
  .analyst-bound-label .bound-title {
    font-size: 0.62rem;
  }
  .analyst-bound-label .bound-price {
    font-size: 0.75rem;
  }
  .marker-tag {
    font-size: 0.68rem;
    padding: 1px 6px;
  }
}

/* YoY Delta in Financials */
.fin-yoy-delta {
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  margin-top: 2px;
}

/* Export Buttons */
.fin-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.825rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.fin-export-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* Earnings 1D Move Badge */
.earn-move-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.earn-move-badge.move-pos {
  background: rgba(34, 197, 94, 0.12);
  color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.earn-move-badge.move-neg {
  background: rgba(239, 68, 68, 0.12);
  color: var(--accent-red);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

/* Insider Trading Badges */
.insider-type-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-purchase {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-sale {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-award {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.text-blue {
  color: var(--accent-blue) !important;
}

/* ==========================================================================
   Corporate Calendar Widget
   ========================================================================== */
.corporate-calendar-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
  margin-top: 24px;
}

.corporate-calendar-section .chart-header {
  margin-bottom: 20px;
}

.calendar-subtext {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.calendar-upcoming-pulse {
  width: 7px;
  height: 7px;
  background-color: var(--accent-green);
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.8);
  animation: pulseGreen 2s infinite ease-in-out;
}

@keyframes pulseGreen {
  0% { transform: scale(0.9); opacity: 0.7; }
  50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px rgba(34, 197, 94, 1); }
  100% { transform: scale(0.9); opacity: 0.7; }
}

.calendar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.calendar-empty,
.calendar-empty-feed {
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-md);
  border: 1px dashed var(--border-color);
}

.calendar-container-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Top 3 Highlight Cards */
.calendar-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .calendar-highlights-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.calendar-highlight-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all var(--transition);
}

.calendar-highlight-card:hover {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--border-color-hover);
}

.calendar-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calendar-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.calendar-card-badge.badge-earnings {
  color: #93c5fd;
}

.calendar-card-badge.badge-dividend {
  color: #86efac;
}

.calendar-card-badge.badge-split {
  color: #fcd34d;
}

.calendar-badge-rel {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.calendar-badge-rel.badge-rel-upcoming {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.calendar-card-main-val {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: -0.3px;
}

.calendar-sub-rate {
  font-size: 0.825rem;
  font-weight: 400;
  color: var(--text-muted);
}

.calendar-card-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.calendar-stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calendar-stat-label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.calendar-stat-val {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.calendar-card-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.35;
}

.calendar-add-btn {
  align-self: flex-start;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
  cursor: pointer;
  transition: all var(--transition);
}

.calendar-add-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.5);
}

/* Calendar Schedule Filter Bar */
.calendar-events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
}

.calendar-events-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calendar-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.calendar-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition);
}

.calendar-filter-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-color-hover);
  background: rgba(255, 255, 255, 0.08);
}

.calendar-filter-btn.active {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.4);
  font-weight: 600;
}

/* Feed of Event Items */
.calendar-events-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-event-item {
  display: grid;
  grid-template-columns: 85px 1fr auto;
  gap: 16px;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  transition: all var(--transition);
}

.calendar-event-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--border-color-hover);
}

.calendar-event-item.is-upcoming-event {
  border-left: 3px solid var(--accent-green);
  background: rgba(34, 197, 94, 0.025);
}

.calendar-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  text-align: center;
  font-family: var(--font-mono);
}

.calendar-date-badge .date-dow {
  font-size: 0.65rem;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.calendar-date-badge .date-day {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.calendar-date-badge .date-month-yr {
  font-size: 0.65rem;
  color: var(--text-secondary);
  white-space: nowrap;
  margin-top: 2px;
}

.calendar-event-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.calendar-event-meta-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-type-pill {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.badge-type-earnings {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-type-dividend {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-type-split {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.calendar-rel-pill {
  font-size: 0.7rem;
  font-weight: 500;
  font-family: var(--font-mono);
}

.calendar-rel-pill.pill-upcoming {
  color: var(--accent-green);
  font-weight: 600;
}

.calendar-rel-pill.pill-past {
  color: var(--text-muted);
}

.calendar-event-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calendar-event-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  white-space: normal;
}

.calendar-event-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.calendar-add-event-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.calendar-add-event-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.5);
}

.calendar-status-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 500;
  font-family: var(--font-mono);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
}

@media (max-width: 680px) {
  .calendar-event-item {
    grid-template-columns: 75px 1fr;
    gap: 12px;
  }
  .calendar-event-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }
}

.calendar-read-more-wrap {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

/* ==========================================================================
   Analyst Subpage Styles
   ========================================================================== */

.overview-tab-jump-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--accent-blue);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.overview-tab-jump-btn:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: var(--accent-blue);
  color: #60a5fa;
}

.analysts-page-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 48px;
}

.analysts-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.analysts-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.analysts-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
}

.analysts-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Analyst KPI Grid */
.analyst-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 1100px) {
  .analyst-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .analyst-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .analyst-kpi-card {
    padding: 12px 14px;
  }
  .analyst-kpi-value {
    font-size: 1.25rem;
  }
}

.analyst-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: var(--transition);
}

.analyst-kpi-card:hover {
  border-color: var(--border-color-hover);
}

.kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.kpi-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.kpi-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-full);
}

.badge-green {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-red {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-neutral {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.kpi-val {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  line-height: 1.2;
}

.kpi-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.kpi-rating-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0;
}

.kpi-rating-pill {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: var(--radius-sm);
  display: inline-block;
}

.rating-strong-buy,
.rating-buy {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.rating-hold {
  background: rgba(234, 179, 8, 0.2);
  color: #fde047;
  border: 1px solid rgba(234, 179, 8, 0.4);
}

.rating-sell {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.rating-neutral {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.kpi-rating-mini-bars {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}

.mini-bar.buy {
  background: #22c55e;
}

.mini-bar.hold {
  background: #eab308;
}

.mini-bar.sell {
  background: #ef4444;
}

.coverage-breakdown {
  display: flex;
  gap: 16px;
}

.cov-item {
  display: flex;
  flex-direction: column;
}

.cov-val {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.cov-lbl {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* Analyst Target Range Gauge */
.analyst-gauge-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.gauge-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.gauge-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: block;
  margin-top: 2px;
}

.gauge-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-current {
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.dot-consensus {
  background: var(--accent-blue);
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.6);
}

.dot-range {
  background: linear-gradient(90deg, #ef4444, #3b82f6, #22c55e);
  border-radius: 2px;
  width: 16px;
  height: 6px;
}

.gauge-track-wrap {
  position: relative;
  padding: 36px 12px 16px 12px;
}

.gauge-labels-top {
  position: relative;
  height: 36px;
  margin-bottom: 42px;
}

.gl-low, .gl-high, .gl-med {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
}

.gl-low {
  left: 0;
  text-align: left;
}

.gl-high {
  right: 0;
  text-align: right;
}

.gl-med {
  transform: translateX(-50%);
  text-align: center;
}

.gl-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.gl-val {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.gauge-track {
  position: relative;
  height: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin-bottom: 48px;
}

.gauge-bar-fill {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.6) 0%, rgba(234, 179, 8, 0.6) 35%, rgba(59, 130, 246, 0.7) 60%, rgba(34, 197, 94, 0.7) 100%);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.15);
}

.gauge-marker.marker-med {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(-50%);
  z-index: 3;
}

/* Pin styles */
.gauge-pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.pin-bubble {
  position: absolute;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  white-space: nowrap;
  font-family: var(--font-mono);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: left 0.25s ease, transform 0.25s ease;
}

.pin-bubble.align-left {
  left: 0;
  transform: translateX(0);
}

.pin-bubble.align-right {
  left: auto;
  right: 0;
  transform: translateX(0);
}

.bubble-current {
  bottom: 22px;
  background: #18181b;
  border: 1.5px solid #fff;
}

.bubble-consensus {
  top: 24px;
  background: #0f172a;
  border: 1.5px solid #3b82f6;
}

.pin-type {
  font-size: 0.68rem;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
}

.bubble-current .pin-type {
  color: #e4e4e7;
}

.bubble-consensus .pin-type {
  color: #93c5fd;
}

.pin-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}

.pin-stem {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.stem-current {
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

.stem-consensus {
  background: #3b82f6;
  border-color: #93c5fd;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.7);
}

.gauge-labels-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Interactive Charts Section */
.analyst-chart-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.analyst-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.chart-title-wrap .chart-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.chart-title-wrap .chart-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.analyst-chart-toggles {
  display: inline-flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 3px;
}

.analyst-toggle-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.analyst-toggle-btn.active {
  background: var(--accent-blue);
  color: #fff;
}

.analyst-echart-box {
  width: 100%;
  height: 380px;
}

/* Consensus Forward Forecasts Card */
.analyst-forecasts-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.forecasts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.forecasts-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.forecasts-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.forecast-highlight {
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.cov-badge {
  font-size: 0.75rem;
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-weight: 500;
}

/* Analyst Directory Table Section */
.analyst-table-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
}

.table-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.table-section-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.table-section-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.table-target-counter {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* Toolbar */
.analyst-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.analyst-search-box {
  position: relative;
  flex: 1;
  min-width: 260px;
  display: flex;
  align-items: center;
}

.analyst-search-box svg {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.analyst-search-box input {
  width: 100%;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 9px 36px 9px 38px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: inherit;
  transition: var(--transition);
}

.analyst-search-box input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.analyst-search-clear {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
}

.analyst-pills {
  display: inline-flex;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 3px;
}

.analyst-pill-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.analyst-pill-btn.active {
  background: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.analyst-select-wrap select {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

/* Data Table */
.analyst-table-container {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.analyst-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.analyst-table th {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.analyst-table th.sortable {
  cursor: pointer;
  user-select: none;
}

.analyst-table th.sortable:hover {
  color: var(--text-primary);
}

.sort-icon {
  font-size: 0.75rem;
  margin-left: 4px;
  color: var(--text-muted);
}

.analyst-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  white-space: nowrap;
}

.analyst-row:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.td-date .date-text {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.td-firm .firm-name {
  font-weight: 600;
  color: var(--text-primary);
}

.publisher-tag {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.analyst-name {
  color: var(--text-secondary);
  font-size: 0.84rem;
}

/* Action Badges */
.action-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
  text-transform: capitalize;
}

.badge-upgrade,
.badge-raise {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-downgrade,
.badge-cut {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-reiterate {
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.badge-initiate {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.target-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.upside-badge {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.86rem;
}

.source-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  transition: var(--transition);
}

.source-link:hover {
  color: var(--accent-blue);
  border-color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
}

.analyst-table-footer {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.analyst-load-more-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition);
}

.analyst-load-more-btn:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.08);
}

/* ==========================================================================
/* ==========================================================================
   Forex Dedicated Page Styles (Identical UI/UX to Stock Page)
   ========================================================================== */
.forex-avatar-box {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  position: relative;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.forex-avatar-box .flag-base {
  width: 32px;
  height: 22px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: absolute;
  left: 10px;
  top: 13px;
  z-index: 2;
  object-fit: cover;
}

.forex-avatar-box .flag-quote {
  width: 32px;
  height: 22px;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  position: absolute;
  right: 10px;
  bottom: 13px;
  z-index: 1;
  object-fit: cover;
}

.forex-quick-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.forex-quick-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.forex-pairs-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 4px 6px !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.forex-pairs-tabs::-webkit-scrollbar {
  display: none;
}

.forex-pairs-tabs.expanded {
  flex-wrap: wrap;
  overflow-x: visible;
}

.forex-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
  flex: 0 0 auto !important;
}

.forex-pill-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.forex-pill-btn.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.forex-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  flex: 0 0 auto !important;
  white-space: nowrap;
}

.forex-more-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* Forex Tools (Converter & Pip Calculator) */
.forex-tool-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.forex-tool-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--transition);
}

.forex-tool-box:hover {
  border-color: var(--border-color-hover);
}

.forex-tool-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.forex-tool-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Wise-Style Interactive Currency Converter */
.wise-converter-widget {
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 0;
  margin: 4px 0 8px 0;
}

.wise-currency-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  transition: all var(--transition);
}

.wise-currency-block:focus-within {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue), 0 4px 14px rgba(59, 130, 246, 0.12);
  background: var(--bg-card);
}

.wise-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.wise-block-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.wise-block-subname {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
  max-width: 170px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wise-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wise-currency-symbol {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
  flex-shrink: 0;
  min-width: 16px;
  text-align: center;
}

.wise-amount-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  padding: 4px 0;
}

.wise-amount-input::-webkit-outer-spin-button,
.wise-amount-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.wise-amount-input[type="number"] {
  -moz-appearance: textfield;
}

.wise-amount-input::placeholder {
  color: var(--text-muted);
  opacity: 0.4;
}

.wise-currency-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  cursor: pointer;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--transition);
  flex-shrink: 0;
  user-select: none;
}

.wise-currency-pill:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-color-hover);
  transform: translateY(-1px);
}

.wise-flag-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  display: inline-block;
}

.wise-currency-code {
  font-weight: 700;
  letter-spacing: 0.03em;
}

.wise-chevron-icon {
  color: var(--text-muted);
  transition: transform var(--transition);
}

.wise-currency-pill:hover .wise-chevron-icon {
  color: var(--text-primary);
}

/* Connection row between inputs */
.wise-connector-row {
  position: relative;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  margin: -4px 0;
  z-index: 2;
}

.wise-connector-line {
  position: absolute;
  left: 28px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
  z-index: 1;
}

.wise-swap-wrapper {
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

.wise-swap-button {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wise-swap-button:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  transform: rotate(180deg) scale(1.08);
}

.converter-live-badge {
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.converter-chips {
  display: flex;
  gap: 8px;
}

.converter-chip-btn {
  flex: 1;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 0;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.converter-chip-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

/* Wise converter footer breakdown */
.wise-converter-footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  margin-top: 2px;
}

.wise-footer-rate-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wise-footer-label {
  color: var(--text-muted);
}

.wise-footer-val {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

/* Wise Currency Popover Modal */
.wise-currency-popover {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.wise-currency-popover.open {
  opacity: 1;
  visibility: visible;
}

.wise-popover-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  transform: scale(0.96);
  transition: transform 0.2s ease;
  overflow: hidden;
}

.wise-currency-popover.open .wise-popover-card {
  transform: scale(1);
}

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

.wise-popover-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wise-popover-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition);
}

.wise-popover-close:hover {
  color: var(--text-primary);
}

.wise-search-wrap {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-color);
}

.wise-search-input {
  width: 100%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}

.wise-search-input:focus {
  border-color: var(--accent-blue);
}

.wise-currency-list {
  overflow-y: auto;
  max-height: 380px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wise-currency-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border: 1px solid transparent;
  width: 100%;
  cursor: pointer;
  text-align: left;
  color: var(--text-primary);
  transition: background var(--transition);
}

.wise-currency-item:hover,
.wise-currency-item.selected {
  background: var(--bg-tertiary);
  border-color: var(--border-color);
}

.wise-item-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wise-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wise-item-code {
  font-weight: 700;
  font-size: 0.95rem;
}

.wise-item-symbol {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.wise-item-name {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Pip Calc */
.pip-calc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.pip-calc-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pip-calc-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.pip-calc-val {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--accent-green);
}

.forex-select-ctrl {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  outline: none;
  cursor: pointer;
}

.forex-select-ctrl:focus {
  border-color: var(--accent-blue);
}

/* Forex News Item matching stock card styles */
.forex-news-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  transition: all var(--transition);
}

.forex-news-item:hover {
  border-color: var(--border-color-hover);
  background: var(--bg-tertiary);
}

.forex-news-item-thumb {
  width: 140px;
  height: 95px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-secondary);
}

.forex-news-item-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.forex-news-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.forex-news-item-publisher {
  color: var(--accent-blue);
  font-weight: 600;
}

.forex-news-item-title {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

.forex-news-item-title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition);
}

.forex-news-item-title a:hover {
  color: var(--accent-blue);
}

.forex-news-item-snippet {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.forex-impact-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid;
}

.forex-table-symbol {
  display: inline-block;
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  font-family: var(--font-mono);
}

/* Forex Performance Bar */
.forex-perf-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px 20px;
  overflow-x: auto;
}

.forex-perf-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}

.forex-perf-items {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
  overflow-x: auto;
}

.forex-perf-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 54px;
}

.forex-perf-period {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

.forex-perf-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Forex Impact Badge */
.forex-impact-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.forex-no-data {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ==========================================================================
   ETF Page Styles
   ========================================================================== */
#etfContent {
  display: flex;
  flex-direction: column;
  gap: 36px;
  animation: fadeIn 200ms ease-out;
}

/* Quick Bar / One Big Pill on 1 Bar */
.etf-quick-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.etf-quick-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.etf-pairs-tabs {
  display: flex;
  align-items: center;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 4px 6px !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.etf-pairs-tabs::-webkit-scrollbar {
  display: none;
}

.etf-pairs-tabs.expanded {
  flex-wrap: wrap;
  overflow-x: visible;
}

.etf-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  flex: 0 0 auto !important;
}

.etf-pill-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.etf-pill-btn.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.etf-pill-symbol {
  font-family: var(--font-mono);
  font-weight: 600;
}

.etf-pill-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.etf-pill-btn.active .etf-pill-desc {
  color: rgba(255, 255, 255, 0.65);
}

.etf-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-secondary);
  font-weight: 500;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
  flex: 0 0 auto !important;
  flex-shrink: 0;
  font-size: 0.85rem;
}

.etf-more-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

/* Fallback Logo & Ticker Badge */
.etf-logo-fallback {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #1e3a8a, #1d4ed8);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.etf-ticker-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: #93c5fd;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  vertical-align: middle;
  margin-left: 8px;
}

/* Card Box (Containers for Sub-page Cards) */
.etf-card-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition);
}

.etf-card-box:hover {
  border-color: var(--border-color-hover);
}

.etf-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.etf-card-header h4 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.etf-text-link {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--transition);
  padding: 0;
}

.etf-text-link:hover {
  color: #60a5fa;
  text-decoration: underline;
}

/* Overview Snapshots & Ticker Links */
.etf-preview-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition);
}

.etf-preview-row:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.etf-rank-num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  width: 22px;
}

.etf-ticker-link {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-blue);
  text-decoration: none;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.08);
  border-radius: 4px;
  transition: all var(--transition);
}

.etf-ticker-link:hover {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.etf-preview-name {
  font-size: 0.88rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

/* Progress / Allocation Bars */
.etf-bar-track {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.etf-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: var(--radius-full);
  transition: width 400ms ease-out;
}

/* Holdings Toolbar & Search */
.etf-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.etf-search-wrapper {
  position: relative;
  flex: 1;
  max-width: 440px;
  display: flex;
  align-items: center;
}

.etf-search-wrapper svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.etf-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 14px 10px 38px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: var(--font-sans);
  outline: none;
  transition: all var(--transition);
}

.etf-search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.etf-search-input::placeholder {
  color: var(--text-muted);
}

/* Search Dropdown ETF Tag */
.search-etf-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.15);
  padding: 1px 4px;
  border-radius: 3px;
  margin-right: 4px;
  letter-spacing: 0.5px;
}

/* Interactive Country Selection in ETF Holdings */
.etf-country-row {
  cursor: pointer;
  user-select: none;
  transition: all 180ms ease;
}

.etf-country-row:hover {
  background: rgba(59, 130, 246, 0.08) !important;
}

.etf-country-row.selected {
  background: rgba(59, 130, 246, 0.16) !important;
  box-shadow: inset 3px 0 0 #3b82f6;
}

.etf-country-row.selected td {
  color: #93c5fd;
  font-weight: 600;
}

/* Interactive Sector Selection in ETF Holdings */
.etf-sector-row {
  cursor: pointer;
  user-select: none;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: var(--radius-md);
  transition: all 180ms ease;
  border: 1px solid transparent;
}

.etf-sector-row:hover {
  background: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.2);
}

.etf-sector-row.selected {
  background: rgba(59, 130, 246, 0.16) !important;
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: inset 3px 0 0 #3b82f6;
}

.etf-sector-row.selected .etf-sector-name {
  color: #93c5fd;
  font-weight: 600;
}

.etf-cash-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.76rem;
  font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  letter-spacing: 0.02em;
}

.etf-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: #bfdbfe;
}

.etf-filter-banner button {
  background: rgba(59, 130, 246, 0.2);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 150ms ease;
  white-space: nowrap;
}

.etf-filter-banner button:hover {
  background: rgba(59, 130, 246, 0.4);
}

.etf-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.4;
}

/* ETF Holdings Sub-Navigation Tabs */
.etf-subnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
}

.etf-subtab-group {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 4px;
}

.etf-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
}

.etf-subtab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.etf-subtab-btn.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.etf-subtab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: var(--radius-full);
  font-size: 0.725rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  transition: all var(--transition);
}

.etf-subtab-btn.active .etf-subtab-badge {
  background: rgba(59, 130, 246, 0.2);
  color: var(--accent-blue);
}

/* ==========================================================================
   Comprehensive Mobile & Touch Optimization
   ========================================================================== */

/* Prevent horizontal body jitter and enforce touch ergonomics */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

button, a, input, select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Tablet & Mobile Screens (<= 768px) */
@media (max-width: 768px) {
  /* Prevent iOS WebKit form auto-zoom */
  input[type="text"],
  input[type="search"],
  input[type="date"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Main Layout & Safe Areas */
  main {
    padding-top: calc(64px + var(--sat));
    padding-bottom: calc(76px + var(--sab));
    min-height: 100vh;
  }

  .page {
    padding-left: 10px;
    padding-right: 10px;
  }

  .stock-page {
    padding: 10px 4px 28px 4px;
  }

  #stockContent,
  #etfContent {
    gap: 24px;
  }

  /* Top Navigation Bar */
  .navbar {
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: calc(56px + var(--sat));
    padding: var(--sat) 12px 0 12px;
    border-radius: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    background: rgba(11, 15, 25, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
  }

  .navbar-links {
    display: none !important; /* Managed by mobile bottom navigation */
  }

  /* Mobile Header Actions (Waitlist + Sign In) */
  .mobile-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
  }

  .mobile-header-signin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition);
    min-height: 32px;
    white-space: nowrap;
  }

  .mobile-header-signin-btn:hover,
  .mobile-header-signin-btn:active {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
  }

  .mobile-header-signin-btn.hidden {
    display: none !important;
  }

  /* Mobile Waitlist CTA Button in Navbar */
  .mobile-nav-waitlist-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35);
    transition: all var(--transition);
    flex-shrink: 0;
    min-height: 34px;
  }

  .mobile-nav-waitlist-btn:active {
    transform: scale(0.94);
    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);
  }

  .mobile-nav-waitlist-btn.hidden {
    display: none !important;
  }

  /* Mobile Back Button */
  .mobile-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    padding: 0;
    margin-right: 2px;
    flex-shrink: 0;
    transition: background var(--transition), transform 120ms ease;
  }

  .mobile-back-btn:active {
    background: rgba(255, 255, 255, 0.12);
    transform: scale(0.92);
  }

  .mobile-back-btn.hidden {
    display: none !important;
  }

  .navbar-brand {
    gap: 6px;
    font-size: 1.05rem;
    flex-shrink: 0;
  }

  .navbar-brand svg {
    width: 20px;
    height: 20px;
  }

  .navbar-search-container {
    flex: 1;
    margin: 0 4px;
    max-width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    position: relative;
  }

  .navbar-search-container .search-input-wrapper {
    flex: 1;
    position: relative;
    width: 100%;
    margin: 0;
  }

  #navbarSearchContainer .search-input,
  .navbar-search-container .search-input {
    height: 36px;
    padding: 6px 32px 6px 34px;
    border-radius: var(--radius-full);
    font-size: 16px !important;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transition: all var(--transition);
  }

  #navbarSearchContainer .search-input:focus,
  .navbar-search-container .search-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
  }

  .navbar-search-container .search-icon {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  .mobile-search-cancel-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--accent-blue);
    font-size: 0.95rem;
    font-weight: 500;
    padding: 6px 4px 6px 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mobile-search-cancel-btn:active {
    opacity: 0.6;
  }

  .mobile-search-cancel-btn.hidden {
    display: none !important;
  }

  .navbar-search-container .search-dropdown {
    position: fixed;
    top: calc(56px + var(--sat) + 6px);
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 52vh;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.85);
    z-index: 1100;
  }

  /* Full Screen Search Overlay Mode on Mobile */
  body.mobile-search-active {
    overflow: hidden;
  }

  body.mobile-search-active .navbar-brand,
  body.mobile-search-active .mobile-back-btn,
  body.mobile-search-active .mobile-header-actions,
  body.mobile-search-active .mobile-nav-waitlist-btn {
    display: none !important;
  }

  /* Hide bottom navigation when search overlay is open so results take full screen */
  body.mobile-search-active .mobile-bottom-nav {
    display: none !important;
  }

  body.mobile-search-active .navbar {
    padding-left: 12px;
    padding-right: 12px;
    z-index: 100002;
  }

  body.mobile-search-active #navbarSearchContainer {
    width: 100%;
    margin: 0;
  }

  body.mobile-search-active #navbarSearchContainer .search-dropdown {
    position: fixed;
    top: calc(56px + var(--sat));
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100vh - 56px - var(--sat));
    height: calc(100dvh - 56px - var(--sat));
    max-height: none;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    z-index: 100001;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 16px calc(24px + var(--sab)) 16px;
    box-shadow: none;
  }

  body.mobile-search-active #navbarSearchContainer .search-dropdown .search-quick-section {
    padding: 4px 0 16px 0;
  }

  body.mobile-search-active #navbarSearchContainer .search-dropdown .search-result-item {
    padding: 12px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .search-section-header.recent-header {
    padding: 12px 12px 6px 12px;
  }

  .search-table-header {
    padding: 8px 12px;
  }

  .search-table-header .col-symbol {
    min-width: 86px;
    max-width: 104px;
  }

  .search-table-header .col-name {
    margin: 0 6px;
  }

  .search-table-header .col-type {
    min-width: 58px;
    max-width: 66px;
    margin-right: 6px;
  }

  .search-table-header .col-price {
    min-width: 68px;
    margin-right: 6px;
  }

  .search-table-header .col-exchange {
    min-width: 58px;
    max-width: 70px;
  }

  .search-result-item {
    padding: 10px 12px;
    min-height: 48px;
  }

  .search-result-item .symbol {
    min-width: 86px;
    max-width: 104px;
    font-size: 0.84rem;
    gap: 6px;
  }

  .search-result-item .name {
    font-size: 0.82rem;
    margin: 0 6px;
  }

  .search-result-item .type-col {
    min-width: 58px;
    max-width: 66px;
    margin-right: 6px;
  }

  .search-result-item .price-col {
    min-width: 68px;
    margin-right: 6px;
  }

  .search-result-item .exchange {
    min-width: 58px;
    max-width: 70px;
    font-size: 0.74rem;
  }

  .search-table-header.has-action-col .col-exchange,
  .search-result-item.has-action-col .exchange {
    display: none;
  }

  .search-table-header .col-action,
  .search-result-item .action-col {
    min-width: 64px;
    max-width: 76px;
    margin-left: 6px;
    font-size: 0.72rem;
  }

  /* Mobile Bottom Navigation Bar */
  .mobile-bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(58px + var(--sab));
    padding: 0 4px var(--sab) 4px;
    background: rgba(11, 15, 25, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 9999;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
  }

  body.modal-open .mobile-bottom-nav {
    display: none !important;
  }

  .mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 48px;
    padding: 4px 2px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.66rem;
    font-weight: 500;
    letter-spacing: -0.15px;
    transition: color var(--transition), transform 120ms ease;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    position: relative;
  }

  .mobile-nav-item:active {
    transform: scale(0.92);
  }

  .mobile-nav-icon {
    margin-bottom: 2px;
    width: 20px;
    height: 20px;
    stroke-width: 2;
    transition: color var(--transition), stroke var(--transition);
    flex-shrink: 0;
  }

  .mobile-nav-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.15;
  }

  .mobile-nav-item.active,
  .mobile-nav-item[aria-expanded="true"] {
    color: var(--accent-blue);
    font-weight: 600;
  }

  .mobile-nav-item.active .mobile-nav-icon,
  .mobile-nav-item[aria-expanded="true"] .mobile-nav-icon {
    color: var(--accent-blue);
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.4));
  }

  .mobile-nav-item.active::before,
  .mobile-nav-item[aria-expanded="true"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 20%;
    right: 20%;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--accent-blue);
    box-shadow: 0 1px 6px var(--accent-blue);
  }

  /* Mobile Assets Pop-up Menu above Bottom Nav */
  .mobile-assets-dropdown {
    position: fixed;
    bottom: calc(66px + var(--sab));
    left: 50%;
    transform: translateX(-50%);
    min-width: 210px;
    background: rgba(15, 20, 32, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.75);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10000;
    animation: fadeIn 150ms ease-out forwards;
  }

  /* Waitlist Button in Bottom Nav */
  .mobile-waitlist-btn {
    color: #f59e0b;
  }

  .mobile-waitlist-btn .mobile-nav-icon {
    stroke: #f59e0b;
  }

  .mobile-waitlist-btn.active {
    color: #fbbf24;
  }

  .mobile-waitlist-btn.active::before {
    background: #f59e0b;
    box-shadow: 0 1px 6px #f59e0b;
  }

  .mobile-waitlist-btn.hidden {
    display: none !important;
  }

  /* Mobile Live Data Status Button */
  .live-status-btn {
    bottom: calc(68px + var(--sab));
    right: 12px;
    font-size: 0.72rem;
    padding: 5px 12px;
    z-index: 990;
    background: rgba(24, 24, 27, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  /* Top Assets Section */
  .top-assets-container {
    padding: 8px 4px 0 4px;
  }

  .top-assets-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
  }

  .top-assets-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  /* All 4 asset cards visible on mobile in 2x2 grid */
  .top-assets-grid .asset-card,
  .top-assets-grid:not(.expanded) .asset-card:nth-child(n+3),
  .top-assets-grid.expanded .asset-card:nth-child(n+3) {
    display: flex !important;
  }

  .top-assets-toggle-wrap {
    display: none !important;
  }

  .asset-card {
    padding: 12px;
    height: 105px;
    border-radius: var(--radius-md);
  }

  .asset-card-name {
    font-size: 0.85rem;
  }

  .asset-card-price {
    font-size: 0.9rem;
  }

  .asset-card-change-pct {
    font-size: 0.78rem;
  }

  .asset-card-change-abs {
    font-size: 0.72rem;
  }

  /* Date Range Buttons & pill bars swipe row */
  .date-range-buttons,
  .fin-sheet-tabs,
  .fin-period-tabs,
  .etf-subtab-group {
    display: inline-flex;
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    box-sizing: border-box;
  }

  .forex-pairs-tabs,
  .etf-pairs-tabs {
    display: flex;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 4px;
    padding: 4px 6px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .industry-filters {
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-top: 12px !important;
    margin-bottom: 12px !important;
    padding: 4px 2px;
  }

  .date-range-buttons::-webkit-scrollbar,
  .industry-filters::-webkit-scrollbar,
  .forex-pairs-tabs::-webkit-scrollbar,
  .etf-pairs-tabs::-webkit-scrollbar,
  .fin-sheet-tabs::-webkit-scrollbar,
  .fin-period-tabs::-webkit-scrollbar,
  .etf-subtab-group::-webkit-scrollbar {
    display: none;
  }

  .date-range-btn {
    padding: 6px 13px;
    font-size: 0.82rem;
    flex-shrink: 0;
    min-height: 38px;
    border-radius: var(--radius-full);
  }

  /* Heatmap Container */
  .heatmap-container {
    padding: 16px 8px;
    margin-top: 12px;
  }

  .heatmap-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
  }

  .heatmap-header .date-range-buttons,
  .heatmap-header .selection-bar-wrapper,
  .top-assets-header .date-range-buttons,
  .top-assets-header .selection-bar-wrapper {
    align-self: flex-start;
  }

  .heatmap-title-wrapper {
    width: 100%;
  }

  .heatmap-title-btn {
    width: 100%;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 0.95rem;
  }

  .heatmap-title-text {
    font-size: 1rem;
  }

  .heatmap-title-badge {
    font-size: 0.72rem;
    padding: 2px 6px;
  }

  .heatmap-canvas-wrapper {
    min-height: 380px;
    height: 52vh;
    border-radius: var(--radius-md);
  }

  /* Index Selector Modal as Bottom Sheet */
  .index-modal {
    padding: 0;
    align-items: flex-end;
  }

  .bottom-sheet-handle-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 10px 0 2px 0;
    cursor: grab;
    flex-shrink: 0;
  }

  .bottom-sheet-handle {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.28);
  }

  .index-modal-content {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 88dvh;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.7);
  }

  .index-modal-header {
    padding: 16px 16px 10px 16px;
  }

  .index-modal-title {
    font-size: 1.15rem;
  }

  .index-modal-subtitle {
    font-size: 0.78rem;
  }

  .index-modal-close {
    width: 38px;
    height: 38px;
    padding: 8px;
  }

  .index-modal-search-wrapper {
    margin: 0 16px 10px 16px;
  }

  .index-search-input {
    font-size: 16px !important;
    padding: 10px 36px 10px 38px;
  }

  .index-modal-tabs {
    padding: 0 16px 10px 16px;
    gap: 6px;
  }

  .index-region-tab {
    padding: 6px 13px;
    font-size: 0.8rem;
    min-height: 36px;
  }

  .index-modal-grid {
    padding: 12px 16px calc(24px + var(--sab)) 16px;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 52dvh;
  }

  .index-card {
    padding: 10px 14px;
    min-height: 50px;
  }

  /* Stock Page Header */
  .company-header {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .company-info {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .company-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
  }

  .company-name {
    font-size: 1.45rem;
    line-height: 1.2;
  }

  .company-exchange {
    font-size: 0.82rem;
    gap: 4px;
  }

  .company-price-info {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
    width: 100%;
  }

  .company-price {
    font-size: 1.75rem;
  }

  .company-change {
    font-size: 0.95rem;
    padding: 4px 8px;
  }

  /* Info Cards (Key Statistics) 2-column Grid */
  .info-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .info-card {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    gap: 4px;
  }

  .info-label {
    font-size: 0.7rem;
  }

  .info-value {
    font-size: 1.05rem;
  }

  /* Stock Tab Bar Sticky on Mobile */
  .selection-bar-wrapper.stock-tabs-wrapper,
  .selection-bar-wrapper:has(> .stock-tabs),
  .selection-bar-wrapper.has-sticky-bar {
    position: sticky;
    top: calc(56px + var(--sat));
    z-index: 100;
    background: rgba(10, 10, 14, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 16px;
    padding: 0 8px;
    gap: 8px;
    height: 48px;
    box-sizing: border-box;
  }

  .selection-bar-wrapper.stock-tabs-wrapper > .stock-tabs,
  .selection-bar-wrapper:has(> .stock-tabs) > .stock-tabs,
  .selection-bar-wrapper.has-sticky-bar > .stock-tabs {
    position: static !important;
    margin: 0 !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 12px;
  }

  /* Unwrapped fallback if script not loaded */
  .stock-tabs:not(.selection-bar-scrollable) {
    position: sticky;
    top: calc(56px + var(--sat));
    z-index: 100;
    background: rgba(10, 10, 14, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    flex-wrap: nowrap;
    border-bottom: 1px solid var(--border-color);
    padding: 0 12px;
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 16px;
    height: 48px;
    align-items: stretch;
    box-sizing: border-box;
  }

  .stock-tabs::-webkit-scrollbar {
    display: none;
  }

  .stock-tab-btn {
    scroll-snap-align: center;
    padding: 0 10px;
    font-size: 0.88rem;
    white-space: nowrap;
    flex-shrink: 0;
    height: 100%;
    min-height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
    margin: 0;
  }

  /* Price History Chart Section */
  .chart-section {
    padding: 14px 10px;
    border-radius: var(--radius-lg);
  }

  .chart-container {
    min-height: 280px;
    height: 280px;
  }

  /* Analyst Target, Consensus & Corporate Calendar Cards */
  .analyst-target-card,
  .corporate-calendar-card {
    padding: 14px 12px;
    border-radius: var(--radius-md);
  }

  .target-prices-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .calendar-highlight-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .calendar-event-item {
    grid-template-columns: 68px 1fr !important;
    gap: 10px;
    padding: 10px 12px;
  }

  .calendar-event-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }

  /* Financial statements controls */
  .fin-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 16px;
  }

  .fin-sheet-tabs:not(.selection-bar-scrollable),
  .fin-period-tabs:not(.selection-bar-scrollable):not(.forex-pairs-tabs):not(.etf-pairs-tabs) {
    width: 100%;
    justify-content: center;
  }

  .fin-sheet-tabs:not(.selection-bar-scrollable) .fin-sheet-btn,
  .fin-period-tabs:not(.selection-bar-scrollable):not(.forex-pairs-tabs):not(.etf-pairs-tabs) .fin-period-btn {
    flex: 1;
    text-align: center;
    padding: 8px 8px;
    font-size: 0.8rem;
    min-height: 38px;
  }

  /* Responsive Data Tables across all tabs */
  .fin-table-wrap,
  .analyst-table-container,
  .hist-daily-wrap,
  .watchlist-table-wrap,
  .commodity-table-container,
  .esg-table-wrapper,
  .policy-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    margin-left: -2px;
    margin-right: -2px;
  }

  .fin-table th,
  .fin-table td,
  .analyst-table th,
  .analyst-table td,
  .commodity-matrix-table th,
  .commodity-matrix-table td,
  .esg-table th,
  .esg-table td {
    padding: 9px 12px;
    font-size: 0.82rem;
  }

  /* Sticky first column in multi-column financial statement & metric tables */
  .fin-table th:first-child,
  .fin-table td:first-child,
  .analyst-table th:first-child,
  .analyst-table td:first-child,
  .commodity-matrix-table th:first-child,
  .commodity-matrix-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--bg-card);
    box-shadow: 2px 0 6px rgba(0, 0, 0, 0.35);
  }

  .fin-table th:first-child,
  .analyst-table th:first-child,
  .commodity-matrix-table th:first-child {
    z-index: 3;
    background-color: var(--bg-secondary);
  }

  .fin-table th.fin-label-col,
  .fin-table td.fin-label-col {
    min-width: 140px;
    max-width: 170px;
    font-size: 0.82rem;
  }

  /* Mobile Watchlist sticky asset column & toolbar */
  .watchlist-table th.col-asset {
    position: sticky;
    left: 0;
    z-index: 3;
    background-color: var(--bg-card);
    box-shadow: inset -1px -1px 0 var(--border-color);
  }
  .watchlist-table td.col-asset {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--bg-secondary);
    box-shadow: inset -1px 0 0 var(--border-color);
  }
  .watchlist-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .watchlist-search-box {
    width: 100%;
    min-width: 100%;
  }
  .watchlist-filter-chips {
    overflow-x: auto;
    padding-bottom: 4px;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Forex Dedicated View Adjustments */
  .forex-avatar-box {
    width: 48px;
    height: 48px;
  }

  .forex-avatar-box .flag-base {
    width: 24px;
    height: 16px;
    left: 6px;
    top: 10px;
  }

  .forex-avatar-box .flag-quote {
    width: 24px;
    height: 16px;
    right: 6px;
    bottom: 10px;
  }

  .pip-calc-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
    padding: 12px;
  }

  .pip-calc-val {
    font-size: 1rem;
  }

  /* ETF Dedicated View Adjustments */
  .etf-holdings-layout {
    flex-direction: column !important;
  }

  .etf-donut-container {
    width: 100% !important;
    min-height: 260px;
  }
}

/* Small Handset Screens (<= 480px) */
@media (max-width: 480px) {
  .top-assets-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px;
  }

  .asset-card {
    padding: 10px;
    height: auto;
    min-height: 98px;
  }

  .heatmap-canvas-wrapper {
    min-height: 320px;
    height: 48vh;
  }

  .company-price {
    font-size: 1.6rem;
  }

  .company-name {
    font-size: 1.3rem;
  }

  .company-logo {
    width: 42px;
    height: 42px;
  }
}

/* Ultra-Compact Handset Screens (<= 360px) */
@media (max-width: 360px) {
  .info-cards {
    grid-template-columns: 1fr !important;
  }

  .pip-calc-grid {
    grid-template-columns: 1fr !important;
  }

  .navbar-brand {
    font-size: 0.9rem;
    gap: 4px;
  }

  .navbar-brand svg {
    width: 18px;
    height: 18px;
  }
}

/* Tactile Touch Feedback for Touch Screens */
@media (hover: none) and (pointer: coarse) {
  button:active,
  .asset-card:active,
  .index-card:active,
  .search-result-item:active,
  .search-quick-chip:active,
  .mobile-nav-item:active,
  .stock-tab-btn:active,
  .date-range-btn:active,
  .heatmap-view-btn:active,
  .index-region-tab:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }
}

/* ==========================================================================
   Account & Authentication Styles (Supabase Integration)
   ========================================================================== */

/* Navbar Auth Status Indicator */
.nav-account-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav-auth-indicator {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--accent-green);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
  transition: transform var(--transition);
}

.nav-auth-indicator.hidden {
  display: none;
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

@media (max-width: 768px) {
  .toast-container {
    bottom: 80px;
    right: 16px;
    left: 16px;
    align-items: center;
  }
}

.toast-pill {
  pointer-events: auto;
  min-width: 280px;
  max-width: 420px;
  padding: 12px 18px;
  border-radius: var(--radius-md);
  background-color: rgba(18, 18, 18, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: all 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-pill.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-body {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toast-icon {
  flex-shrink: 0;
}

.toast-success {
  border-color: rgba(34, 197, 94, 0.3);
}
.toast-success .toast-icon {
  color: var(--accent-green);
}

.toast-error {
  border-color: rgba(239, 68, 68, 0.3);
}
.toast-error .toast-icon {
  color: var(--accent-red);
}

.toast-info {
  border-color: rgba(59, 130, 246, 0.3);
}
.toast-info .toast-icon {
  color: var(--accent-blue);
}

/* Unauthenticated Auth Card */
.account-auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 180px);
  padding: 24px;
}

.account-auth-card {
  width: 100%;
  max-width: 460px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 36px 32px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeIn 300ms ease-out forwards;
}

.auth-header {
  text-align: center;
  margin-bottom: 24px;
}

.auth-logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: var(--accent-blue);
  margin-bottom: 16px;
}

.auth-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.auth-subtitle {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* Auth Tabs */
.auth-tab-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background-color: var(--bg-tertiary);
  padding: 4px;
  border-radius: var(--radius-md);
  margin-bottom: 24px;
  border: 1px solid var(--border-color);
}

.auth-tab-btn {
  padding: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.auth-tab-btn.active {
  background-color: var(--bg-card);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Auth Alerts */
.auth-alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  font-size: 0.88rem;
  line-height: 1.4;
  animation: fadeIn 200ms ease-out;
}

.auth-alert.alert-error {
  background-color: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.auth-alert.alert-success {
  background-color: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.alert-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.alert-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

/* Form Styles */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.form-label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.form-link-btn {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-link-btn:hover {
  color: var(--accent-blue-hover);
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.form-input {
  width: 100%;
  padding: 12px 42px 12px 42px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  outline: none;
  transition: all var(--transition);
}

.form-input.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: rgba(255,255,255,0.03);
}

.form-input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow);
  background-color: rgba(26, 26, 26, 0.9);
}

.form-textarea {
  width: 100%;
  padding: 12px 16px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  outline: none;
  resize: vertical;
  line-height: 1.5;
  transition: all var(--transition);
}

.form-textarea:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow);
}

.password-toggle-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: color var(--transition);
}

.password-toggle-btn:hover {
  color: var(--text-primary);
}

.auth-submit-btn {
  margin-top: 8px;
  padding: 13px;
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background-color var(--transition), transform var(--transition);
}

.auth-submit-btn:hover:not(:disabled) {
  background-color: var(--accent-blue-hover);
  transform: translateY(-1px);
}

.auth-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.auth-secondary-btn {
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all var(--transition);
}

.auth-secondary-btn:hover {
  border-color: var(--border-color-hover);
  color: var(--text-primary);
}

.btn-loader {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.auth-footer-note {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
  justify-content: center;
}

/* ==========================================================================
   Authenticated Account Dashboard Styles
   ========================================================================== */

.account-dashboard-container {
  width: var(--content-width);
  max-width: none;
  margin: 0 auto;
  padding: 16px 0 60px 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.account-header-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  gap: 20px;
  flex-wrap: wrap;
}

.account-user-meta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.account-avatar {
  width: 68px;
  height: 68px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.account-user-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.account-user-name {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.account-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.account-user-email {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  flex-wrap: wrap;
}

.account-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background-color: rgba(34, 197, 94, 0.12);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.account-meta-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.stat-divider {
  color: var(--border-color);
}

.btn-signout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background-color: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-signout:hover {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.4);
  transform: translateY(-1px);
}

/* Dashboard Navigation Tabs */
.account-subtabs-nav {
  display: flex;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
  overflow-x: auto;
}

.account-subtab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  position: relative;
  transition: color var(--transition);
  white-space: nowrap;
}

.account-subtab-btn:hover {
  color: var(--text-primary);
}

.account-subtab-btn.active {
  color: var(--accent-blue);
}

.account-subtab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-blue);
  border-radius: 2px;
}

.subtab-counter {
  font-size: 0.75rem;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
}

.account-subtab-btn.active .subtab-counter {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

/* Section Cards */
.card-section {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

.section-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.section-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Watchlist Input & Add Form (Linked to SearchBar) */
.watchlist-add-wrapper {
  position: relative;
  min-width: 340px;
  max-width: 460px;
  flex: 1;
}

.watchlist-add-form {
  display: flex;
  gap: 8px;
}

.add-input-wrapper {
  position: relative;
  display: flex;
  width: 100%;
}

.add-symbol-input {
  width: 100%;
  padding: 10px 84px 10px 14px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: var(--font-mono);
  outline: none;
  transition: all var(--transition);
}

.add-symbol-input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow);
}

.btn-add-symbol {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  padding: 0 14px;
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color var(--transition);
}

.btn-add-symbol:hover {
  background-color: var(--accent-blue-hover);
}

/* Watchlist SearchBar Enhancements */
.watchlist-search-wrapper {
  position: relative;
  width: 100%;
}

.watchlist-search-wrapper .search-input {
  width: 100%;
  height: 42px;
  padding: 8px 110px 8px 38px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.88rem;
  font-family: var(--font-sans);
  outline: none;
  box-shadow: none;
  transition: all var(--transition);
}

.watchlist-search-wrapper .search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow);
  background-color: var(--bg-secondary);
}

.watchlist-search-wrapper .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  display: flex;
  align-items: center;
  z-index: 2;
}

.watchlist-search-wrapper .search-icon svg {
  width: 16px;
  height: 16px;
}

.watchlist-search-wrapper .search-clear-btn {
  right: 80px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  z-index: 3;
}

.watchlist-search-wrapper .btn-add-symbol {
  position: absolute;
  right: 4px;
  top: 4px;
  bottom: 4px;
  padding: 0 14px;
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: background-color var(--transition);
  z-index: 3;
}

.watchlist-search-wrapper .btn-add-symbol:hover {
  background-color: var(--accent-blue-hover);
}

.watchlist-add-wrapper .search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max(100%, 750px);
  min-width: 700px;
  max-width: min(880px, calc(100vw - 32px));
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.08);
  max-height: 480px;
  overflow-y: auto;
  z-index: 1050;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Watchlist Status Pill in Search Dropdown */
.search-watchlist-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: all var(--transition);
  user-select: none;
}

.search-watchlist-status.add-wl {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.search-result-item:hover .search-watchlist-status.add-wl,
.search-result-item.selected .search-watchlist-status.add-wl {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
}

.search-watchlist-status.in-wl {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.chip-wl-indicator {
  margin-left: 4px;
  color: #34d399;
  font-size: 0.75rem;
  font-weight: bold;
}

@media (max-width: 768px) {
  .section-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .watchlist-add-wrapper {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
  }
  .watchlist-add-wrapper .search-dropdown {
    min-width: 100%;
    max-width: 100%;
  }
}

/* Watchlist Container & Toolbar */
.watchlist-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.watchlist-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.watchlist-filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.wl-filter-chip {
  padding: 6px 14px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
  user-select: none;
}

.wl-filter-chip:hover {
  border-color: var(--border-color-hover);
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

.wl-filter-chip.active {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: var(--accent-blue);
  color: var(--text-primary);
  font-weight: 600;
}


/* Watchlist Search Box */
.watchlist-search-box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 220px;
}

.wl-search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
  pointer-events: none;
}

.watchlist-search-input {
  width: 100%;
  padding: 7px 32px 7px 34px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.82rem;
  outline: none;
  transition: all var(--transition);
}

.watchlist-search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow);
}

.wl-clear-search-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.wl-clear-search-btn:hover {
  color: var(--text-primary);
}

/* Watchlist Performance Table */
.watchlist-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
  -webkit-overflow-scrolling: touch;
}

.watchlist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}

.watchlist-table thead tr {
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-card);
}

.watchlist-table th {
  padding: 12px 16px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  user-select: none;
  background-color: var(--bg-card);
}

.watchlist-table th.wl-sortable {
  cursor: pointer;
  transition: color var(--transition);
}

.watchlist-table th.wl-sortable:hover {
  color: var(--text-primary);
}

.watchlist-table th .th-content {
  display: flex;
  align-items: center;
  gap: 6px;
}

.watchlist-table th .th-right {
  justify-content: flex-end;
}

.watchlist-table th.active-sort {
  color: var(--text-primary);
}

/* Capsule sort styling matching reference image */
.watchlist-table th .th-content.pill-active {
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text-primary);
  display: inline-flex;
}

.wl-sort-indicator {
  font-size: 0.72rem;
  display: inline-block;
  line-height: 1;
}

.wl-sort-indicator.active {
  color: var(--text-primary);
}

.wl-sort-indicator.inactive {
  opacity: 0.35;
  font-size: 0.75rem;
}

.watchlist-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  white-space: nowrap;
  vertical-align: middle;
}

.watchlist-table tr.wl-table-row {
  cursor: pointer;
  transition: background-color var(--transition);
}

.watchlist-table tr.wl-table-row:hover {
  background-color: rgba(255, 255, 255, 0.035);
}

.watchlist-table tr:last-child td {
  border-bottom: none;
}

/* Columns */
.watchlist-table .col-asset {
  min-width: 220px;
}

.watchlist-table .col-price {
  text-align: right;
  min-width: 100px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
}

.watchlist-table .col-perf {
  text-align: right;
  min-width: 85px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
}

.watchlist-table .col-action {
  width: 44px;
  text-align: center;
  padding: 8px;
}

/* Asset Cell */
.wl-asset-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wl-logo-wrap {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background-color: var(--bg-tertiary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.wl-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.wl-logo-fallback {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.wl-name-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.wl-company-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
  line-height: 1.25;
}

.wl-symbol-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}

.wl-symbol {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.wl-type-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.06);
  color: var(--text-muted);
}

/* Performance Color Classes */
.perf-green {
  color: var(--accent-green);
}

.perf-red {
  color: var(--accent-red);
}

.perf-neutral {
  color: var(--text-muted);
}

/* Row remove button */
.wl-row-remove-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  opacity: 0.6;
}

.watchlist-table tr:hover .wl-row-remove-btn {
  opacity: 1;
}

.wl-row-remove-btn:hover {
  color: var(--accent-red);
  background-color: rgba(239, 68, 68, 0.12);
  transform: scale(1.05);
}

/* Empty or No Results Row */
.wl-empty-row {
  text-align: center;
  padding: 36px 16px !important;
}

.wl-empty-msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.wl-reset-btn {
  padding: 5px 14px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--accent-blue);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all var(--transition);
}

.wl-reset-btn:hover {
  border-color: var(--accent-blue);
  background-color: rgba(59, 130, 246, 0.1);
}

/* Load More Button */
.watchlist-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 8px 0;
}

.wl-load-more-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition);
}

.wl-load-more-btn:hover {
  border-color: var(--border-color-hover);
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Skeleton shimmer */
.skeleton-shimmer {
  opacity: 0.35;
  letter-spacing: 2px;
}


/* Empty Watchlist State */
.watchlist-empty-state {
  text-align: center;
  padding: 48px 24px;
  background-color: var(--bg-secondary);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg);
}

.empty-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--bg-tertiary);
  color: var(--text-muted);
  margin-bottom: 16px;
}

.empty-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.empty-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 440px;
  margin: 0 auto 20px auto;
  line-height: 1.45;
}

.empty-quick-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.quick-add-label {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.quick-add-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.chip-btn {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.chip-btn:hover {
  background-color: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  transform: translateY(-1px);
}

/* Profile Form */
.profile-settings-form,
.security-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 600px;
  margin-top: 20px;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 640px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

.form-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 8px;
}

.btn-primary {
  padding: 12px 24px;
  background-color: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  transition: background-color var(--transition), transform var(--transition);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--accent-blue-hover);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.card-divider {
  margin: 32px 0;
  border: none;
  border-top: 1px solid var(--border-color);
}

/* Security & Session Metadata */
.account-session-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.session-heading {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.session-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.session-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.meta-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.meta-value {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  word-break: break-all;
}

/* Skeleton Loading in Cards */
.skeleton-loading {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
}

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

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Watchlist Header Star Button */
.watchlist-star-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.watchlist-star-btn:hover {
  color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.2);
  transform: scale(1.1);
}

.watchlist-star-btn.active {
  color: #f59e0b;
}

.watchlist-star-btn.active svg {
  fill: #f59e0b;
}

/* ==========================================================================
   MARKETING PAGE & WAITLIST STYLES
   ========================================================================== */

/* Navbar Waitlist CTA */
.nav-waitlist-btn {
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.82rem !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-full);
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.35);
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

.nav-waitlist-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.55);
  background: linear-gradient(135deg, #60a5fa, #2563eb);
}

/* Marketing Page Root */
.marketing-page-root {
  position: relative;
  width: 100%;
  min-height: 100vh;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow-x: hidden;
  padding-top: 40px;
}

/* Marketing Container */
.marketing-container {
  width: var(--content-width);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  position: relative;
  z-index: 1;
}

/* Ambient Glow Mesh & Grid */
.marketing-glow-mesh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1600px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  opacity: 0.28;
}

.orb-primary {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #3b82f6 0%, rgba(59, 130, 246, 0) 70%);
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
}

.orb-secondary {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #8b5cf6 0%, rgba(139, 92, 246, 0) 70%);
  top: 400px;
  right: -100px;
}

.orb-accent {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, #10b981 0%, rgba(16, 185, 129, 0) 70%);
  top: 700px;
  left: -100px;
  opacity: 0.18;
}

.marketing-grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 75%);
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.marketing-hero {
  position: relative;
  padding: 80px 0 60px;
  text-align: center;
  z-index: 1;
}

.hero-badge-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 500;
  color: #93c5fd;
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.12);
  backdrop-filter: blur(8px);
}

.badge-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: #3b82f6;
  border-radius: 50%;
  box-shadow: 0 0 8px #3b82f6;
  animation: pulseGlow 2s infinite;
}

@keyframes pulseGlow {
  0% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); }
  70% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
  100% { transform: scale(0.95); opacity: 0.8; box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

.hero-headline {
  font-size: clamp(2.4rem, 5.2vw, 4.4rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: #ffffff;
  max-width: 980px;
  margin: 0 auto 20px;
}

.gradient-text {
  background: linear-gradient(135deg, #60a5fa 10%, #3b82f6 50%, #34d399 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-subhead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 760px;
  margin: 0 auto 36px;
  line-height: 1.65;
  font-weight: 400;
}

/* Waitlist Form Card */
.hero-waitlist-box {
  max-width: 680px;
  margin: 0 auto 24px;
}

.waitlist-form {
  background: rgba(22, 22, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 24px rgba(59, 130, 246, 0.08);
  text-align: left;
}

.persona-chips-label {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.persona-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.persona-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition);
}

.persona-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.18);
}

.persona-chip.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent-blue);
  color: #93c5fd;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
}

.waitlist-inputs-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.waitlist-inputs-row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.email-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.waitlist-inputs-row .email-input-wrap {
  flex: 1;
  min-width: 0;
}

.email-input-wrap .input-icon {
  position: absolute;
  left: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.waitlist-email-input {
  width: 100%;
  height: 48px;
  padding: 0 16px 0 42px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-family: inherit;
  transition: all var(--transition);
}

.waitlist-email-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  background: rgba(0, 0, 0, 0.6);
}

.waitlist-submit-btn {
  height: 48px;
  padding: 0 24px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border: none;
  border-radius: var(--radius-md);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.35);
}

.waitlist-submit-btn:hover {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.waitlist-submit-btn:active {
  transform: translateY(0);
}

.waitlist-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.waitlist-feedback-msg {
  font-size: 0.86rem;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}

.waitlist-feedback-msg.error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.waitlist-feedback-msg.info {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

.waitlist-caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 14px;
}

.waitlist-caption svg {
  color: #22c55e;
  flex-shrink: 0;
}

/* Success Card State */
.waitlist-success-card {
  background: rgba(18, 18, 18, 0.85);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-xl);
  padding: 24px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 30px rgba(34, 197, 94, 0.15);
  text-align: left;
}

.success-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.success-icon {
  width: 44px;
  height: 44px;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #22c55e;
  flex-shrink: 0;
}

.success-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

.success-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.waitlist-rank-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin-bottom: 18px;
}

.rank-label-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.rank-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.rank-live-indicator {
  font-size: 0.76rem;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.rank-live-indicator .live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
  display: inline-block;
  animation: live-pulse-dot 2s infinite ease-in-out;
}

@keyframes live-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.rank-num {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: -0.02em;
}

.referral-box {
  margin-bottom: 20px;
}

.referral-text {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.referral-input-group {
  display: flex;
  gap: 8px;
}

.referral-input {
  flex: 1;
  height: 40px;
  padding: 0 12px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.copy-ref-btn {
  height: 40px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}

.copy-ref-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.copy-ref-btn.copied {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #22c55e;
}

.instant-access-cta {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 18px;
}

.launch-markets-btn {
  width: 100%;
  height: 48px;
  background: linear-gradient(135deg, #10b981, #059669);
  border: none;
  border-radius: var(--radius-md);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
  transition: all var(--transition);
}

.launch-markets-btn:hover {
  background: linear-gradient(135deg, #34d399, #10b981);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* Hero Quick Actions */
.hero-quick-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}

.hero-demo-link {
  background: transparent;
  border: none;
  color: #60a5fa;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}

.hero-demo-link:hover {
  color: #93c5fd;
  text-decoration: underline;
  gap: 9px;
}

/* Social Proof Metrics Bar */
.hero-metrics-bar {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  background: rgba(18, 18, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 12px 28px;
  backdrop-filter: blur(12px);
  margin-bottom: 50px;
}

.metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.metric-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

.metric-lbl {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  margin-top: 2px;
}

.metric-separator {
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   INTERACTIVE PLATFORM SIMULATOR
   ========================================================================== */
.simulator-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.simulator-window {
  background: #111113;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 32px rgba(59, 130, 246, 0.1);
  overflow: hidden;
  text-align: left;
}

.simulator-header {
  height: 44px;
  background: rgba(20, 20, 22, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.window-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.window-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.window-dot.red { background: #ef4444; }
.window-dot.yellow { background: #f59e0b; }
.window-dot.green { background: #22c55e; }

.window-title {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-left: 12px;
}

.window-demo-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.simulator-demo-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(18, 18, 22, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

.simulator-demo-footer svg {
  color: #f59e0b;
  flex-shrink: 0;
}

.simulator-demo-footer strong {
  color: var(--text-secondary);
}

.simulator-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: #22c55e;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.live-dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseGlow 1.5s infinite;
}

/* Simulator Tabs Navigation */
.simulator-tabs-nav {
  display: flex;
  overflow-x: auto;
  background: rgba(14, 14, 16, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 8px 0;
  gap: 4px;
}

.sim-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 10px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  transition: all var(--transition);
  border-top-left-radius: var(--radius-sm);
  border-top-right-radius: var(--radius-sm);
}

.sim-tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.sim-tab-btn.active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
  background: rgba(56, 189, 248, 0.06);
}

.simulator-body {
  padding: 24px;
  min-height: auto;
  background: #0d0d0f;
}

/* Simulator Views: Heatmap */
.sim-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.sim-pill {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sim-pill.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent-blue);
  color: #93c5fd;
}

.sim-badge-count {
  margin-left: auto;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.sim-treemap-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 95px;
  gap: 8px;
}

.sim-tile {
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: transform var(--transition), filter var(--transition);
  position: relative;
  overflow: hidden;
}

.sim-tile:hover {
  transform: scale(1.02);
  filter: brightness(1.15);
  z-index: 5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}

.sim-tile.large {
  grid-column: span 2;
  grid-row: span 2;
}

.sim-tile.med {
  grid-column: span 1;
  grid-row: span 2;
}

.sim-tile.small {
  grid-column: span 1;
  grid-row: span 1;
}

.sim-tile.tech {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(16, 185, 129, 0.2));
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.sim-tile.comms {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.15));
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.sim-tile.consumer {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.18));
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.sim-tile.energy {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(16, 185, 129, 0.15));
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.sim-tile.finance {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(16, 185, 129, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.sim-tile-sym {
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
}

.sim-tile.small .sim-tile-sym {
  font-size: 0.95rem;
}

.sim-tile-chg {
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-mono);
}

.sim-tile-chg.positive { color: #4ade80; }
.sim-tile-chg.negative { color: #f87171; }

.sim-tile-sub {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.sim-footer-note {
  margin-top: 14px;
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
}

/* Simulator Views: DuPont Ratios */
.sim-dupont-equation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(18, 18, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.dupont-term {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.term-lbl {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.term-val {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.term-val.positive { color: #22c55e; }
.term-val.accent { color: #38bdf8; }
.term-val.purple { color: #c084fc; }
.term-val.green { color: #4ade80; }

.term-desc {
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.math-sym {
  font-size: 1.4rem;
  color: var(--text-muted);
  font-weight: 300;
}

.dupont-term.highlight {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}

.sim-metric-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sim-metric-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sim-metric-row .name {
  width: 200px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.sim-metric-row .bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.sim-metric-row .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 4px;
}

.sim-metric-row .val {
  width: 70px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  text-align: right;
  flex-shrink: 0;
}

.sim-metric-row .badge-good {
  padding: 2px 8px;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 500;
  flex-shrink: 0;
}

/* Simulator Views: Congressional Alpha */
.congress-feed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.badge-update {
  font-size: 0.74rem;
  padding: 3px 8px;
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-radius: var(--radius-full);
}

.congress-trades-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.congress-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(18, 18, 22, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 12px 18px;
  transition: all var(--transition);
}

.congress-card:hover {
  background: rgba(24, 24, 30, 0.85);
  border-color: rgba(255, 255, 255, 0.16);
}

.pol-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.trade-info {
  flex: 1;
}

.pol-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.district {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 400;
}

.asset-line {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.trade-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.type-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}

.type-pill.buy { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.type-pill.sell { background: rgba(239, 68, 68, 0.2); color: #f87171; }

.trade-stats .amt {
  font-size: 0.82rem;
  font-family: var(--font-mono);
  color: var(--text-primary);
}

.trade-stats .lag {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Simulator Views: Wall Street Targets */
.target-gauge-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(18, 18, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 20px;
  gap: 24px;
  flex-wrap: wrap;
}

.current-badge {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.current-badge strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.consensus-display {
  display: flex;
  flex-direction: column;
}

.consensus-lbl {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.consensus-price {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: -0.02em;
}

.consensus-upside.positive {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4ade80;
  margin-top: 2px;
}

.breakdown-title {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.breakdown-bar {
  width: 320px;
  max-width: 100%;
  height: 22px;
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  line-height: 22px;
}

.bar-seg.strong-buy { background: #15803d; }
.bar-seg.buy { background: #22c55e; }
.bar-seg.hold { background: #f59e0b; color: #000; }
.bar-seg.sell { background: #ef4444; }

.breakdown-legend {
  display: flex;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 8px;
}

.breakdown-legend .dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
}

.breakdown-legend .dot.sb { background: #15803d; }
.breakdown-legend .dot.b { background: #22c55e; }
.breakdown-legend .dot.h { background: #f59e0b; }
.breakdown-legend .dot.s { background: #ef4444; }

.recent-firm-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.firm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(18, 18, 22, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
}

.firm-date { color: var(--text-muted); font-size: 0.76rem; width: 90px; }
.firm-name { font-weight: 600; color: var(--text-primary); flex: 1; }
.firm-analyst { color: var(--text-secondary); width: 140px; }
.firm-rating.buy { color: #4ade80; font-weight: 600; width: 100px; }
.firm-target { font-family: var(--font-mono); font-weight: 700; color: #38bdf8; text-align: right; }

/* Simulator Views: ETF Look-through */
.etf-summary-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(18, 18, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.etf-badge {
  font-weight: 700;
  font-size: 0.95rem;
  color: #38bdf8;
}

.etf-key-metrics {
  display: flex;
  gap: 20px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.etf-key-metrics strong {
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.etf-lookthrough-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.col-sector h4, .col-constituents h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.exposure-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.exposure-row span:first-child { width: 150px; }
.exposure-row .exp-track {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: hidden;
}
.exposure-row .exp-fill {
  height: 100%;
  background: #3b82f6;
  border-radius: 3px;
}
.exposure-row span:last-child {
  width: 44px;
  text-align: right;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-primary);
}

.constituent-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(18, 18, 22, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.constituent-item strong {
  font-family: var(--font-mono);
  color: #38bdf8;
}

/* ==========================================================================
   TICKER MARQUEE
   ========================================================================== */
.marketing-ticker-section {
  width: 100%;
  background: rgba(14, 14, 16, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  padding: 12px 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ticker-marquee-track {
  display: flex;
  width: max-content;
}

.ticker-marquee-track:hover .ticker-marquee-content {
  animation-play-state: paused;
}

.ticker-marquee-content {
  display: flex;
  gap: 28px;
  animation: marqueeLoop 38s linear infinite;
  padding-right: 28px;
}

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

.ticker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 500;
}

.t-sym {
  font-weight: 700;
  color: var(--text-primary);
}

.t-price {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.t-chg {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 2px 6px;
  border-radius: 4px;
}

.t-chg.positive {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.t-chg.negative {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

/* ==========================================================================
   BENTO FEATURE GRID
   ========================================================================== */
.marketing-features-section {
  padding: 100px 0;
  position: relative;
  z-index: 1;
}

.section-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}

.section-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}

.section-title {
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.2;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.bento-card {
  grid-column: span 6;
  background: rgba(18, 18, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.bento-card:hover {
  border-color: rgba(59, 130, 246, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(59, 130, 246, 0.1);
}

.bento-card-large {
  grid-column: span 12;
}

.bento-card-wide {
  grid-column: span 12;
}

.bento-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.bento-icon-box {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bento-icon-box.blue { background: rgba(59, 130, 246, 0.15); color: #3b82f6; }
.bento-icon-box.emerald { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.bento-icon-box.amber { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.bento-icon-box.purple { background: rgba(168, 85, 247, 0.15); color: #a855f7; }

.bento-tag {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bento-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 10px;
}

.bento-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Bento Visuals */
.mini-treemap-preview {
  display: flex;
  gap: 8px;
  height: 110px;
}

.treemap-box {
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.treemap-box.tech { background: rgba(34, 197, 94, 0.25); border: 1px solid rgba(34, 197, 94, 0.4); }
.treemap-box.comms { background: rgba(34, 197, 94, 0.18); border: 1px solid rgba(34, 197, 94, 0.3); }
.treemap-box.energy { background: rgba(239, 68, 68, 0.25); border: 1px solid rgba(239, 68, 68, 0.4); }

.box-sym { font-weight: 700; font-size: 1rem; color: #fff; }
.box-chg { font-family: var(--font-mono); font-weight: 600; font-size: 0.85rem; }
.box-chg.positive { color: #4ade80; }
.box-chg.negative { color: #f87171; }
.box-meta { font-size: 0.72rem; color: var(--text-secondary); }

.ratios-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ratio-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
}

.ratio-name { width: 120px; color: var(--text-secondary); }
.ratio-progress-track { flex: 1; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 3px; overflow: hidden; }
.ratio-progress-fill { height: 100%; border-radius: 3px; }
.ratio-num { width: 44px; text-align: right; font-family: var(--font-mono); font-weight: 600; color: #fff; }

.trade-visual {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mini-trade-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}

.chip-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
}

.chip-badge.buy { background: rgba(34, 197, 94, 0.2); color: #4ade80; }
.chip-badge.sell { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.chip-rep { color: var(--text-primary); font-weight: 500; }
.chip-stock { color: #38bdf8; font-weight: 600; }
.chip-amt { font-family: var(--font-mono); color: var(--text-muted); }

.target-range-strip {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  flex-wrap: wrap;
  gap: 12px;
}

.range-point {
  display: flex;
  flex-direction: column;
}

.point-lbl { font-size: 0.74rem; color: var(--text-muted); text-transform: uppercase; margin-bottom: 2px; }
.point-val { font-family: var(--font-mono); font-size: 0.95rem; color: var(--text-primary); font-weight: 600; }
.point-val.highlight { color: #38bdf8; font-size: 1.05rem; }

/* ==========================================================================
   COMPARISON TABLE SECTION
   ========================================================================== */
.marketing-comparison-section {
  padding: 80px 0;
  position: relative;
  z-index: 1;
}

.comparison-table-wrapper {
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  background: rgba(18, 18, 22, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.92rem;
}

.comparison-table th, .comparison-table td {
  padding: 18px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.comparison-table th {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.02);
}

.comparison-table th.highlight-col {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}

.comparison-table td.highlight-cell {
  background: rgba(56, 189, 248, 0.04);
  font-weight: 600;
  color: #ffffff;
}

.check-icon { color: #22c55e; font-weight: 700; margin-right: 6px; }
.cross-icon { color: #ef4444; font-weight: 700; margin-right: 6px; }
.price-free { color: #22c55e; font-weight: 700; }
.price-expensive { color: #f87171; font-family: var(--font-mono); }

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.marketing-faq-section {
  padding: 80px 0;
  position: relative;
  z-index: 1;
}

.faq-accordion-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: rgba(18, 18, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}

.faq-item:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.faq-item.active {
  border-color: rgba(59, 130, 246, 0.35);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-primary);
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.faq-chevron {
  color: var(--text-muted);
  transition: transform var(--transition);
  flex-shrink: 0;
}

.faq-item.active .faq-chevron {
  transform: rotate(180deg);
  color: #38bdf8;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 24px;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding-bottom: 20px;
}

.faq-answer p {
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.65;
}

/* ==========================================================================
   BOTTOM CTA SECTION
   ========================================================================== */
.marketing-cta-section {
  padding: 80px 0 100px;
  position: relative;
  z-index: 1;
}

.bottom-cta-card {
  background: linear-gradient(135deg, rgba(30, 58, 138, 0.3) 0%, rgba(18, 18, 22, 0.85) 100%);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-xl);
  padding: 60px 32px;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 32px rgba(59, 130, 246, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.bottom-cta-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #ffffff;
  margin: 16px 0 12px;
  letter-spacing: -0.025em;
}

.bottom-cta-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 36px;
  line-height: 1.6;
}

.bottom-waitlist-form-wrap {
  max-width: 580px;
  margin: 0 auto;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.marketing-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #09090b;
  padding: 60px 0 30px;
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 32px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  text-decoration: none;
}

.footer-brand svg {
  fill: none;
  stroke: #10b981;
  color: #10b981;
  filter: drop-shadow(0 0 5px rgba(16, 185, 129, 0.45));
}

.footer-tagline {
  font-size: 0.88rem;
  color: var(--text-muted);
  max-width: 320px;
  line-height: 1.5;
}

.footer-links-col {
  display: flex;
  gap: 48px;
}

.footer-group h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  color: var(--text-primary);
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}

.footer-group a {
  display: block;
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-decoration: none;
  margin-bottom: 10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .footer-group a:hover {
    color: #38bdf8;
  }
}

.footer-group a:active {
  color: #38bdf8;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* ==========================================================================
   HOMEPAGE ENHANCED REAL UI EXAMPLES STYLING
   ========================================================================== */

/* Simulator Flags & Filter Bar */
.sim-mini-flag {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 4px;
}

.sim-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 4px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sim-filter-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 150ms;
}

.sim-filter-btn:hover {
  color: var(--text-primary);
}

.sim-filter-btn.active {
  background: var(--accent-blue);
  color: #ffffff;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.4);
}

/* Simulator Multi-Sector Heatmap Clusters */
.sim-treemap-sectors-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sim-sector-cluster {
  background: rgba(14, 14, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.cluster-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.sim-tile-hero {
  min-height: 84px;
}

.sim-tile-med {
  min-height: 74px;
}

.sim-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sim-tile-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.sim-tile-name {
  font-size: 0.72rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.sim-tile-val {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.sim-tile.health, .sim-tile.energy {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.28), rgba(16, 185, 129, 0.15));
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.sim-tile.health-neg, .sim-tile.energy-neg {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.28), rgba(220, 38, 38, 0.15));
  border: 1px solid rgba(239, 68, 68, 0.35);
}

/* Simulator Chart View */
.sim-chart-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sim-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.sim-chart-quote {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.quote-identity {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.quote-identity .sym {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.quote-identity .name {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.quote-identity .exchange {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 6px;
  border-radius: 4px;
}

.quote-prices {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-prices .price {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
}

.quote-prices .chg {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 600;
}

.quote-prices .chg.positive {
  color: #4ade80;
}

.mkt-badge {
  font-size: 0.7rem;
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.sim-chart-timeframes {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.45);
  padding: 3px 6px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sim-tf-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-family: var(--font-mono);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 150ms;
}

.sim-tf-btn:hover {
  color: var(--text-primary);
}

.sim-tf-btn.active {
  background: var(--accent-blue);
  color: #ffffff;
  font-weight: 700;
}

.sim-chart-ohlcv-bar {
  display: flex;
  gap: 16px;
  font-size: 0.76rem;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  background: rgba(18, 18, 22, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  flex-wrap: wrap;
  align-items: center;
}

.sim-chart-ohlcv-bar strong {
  color: var(--text-primary);
}

.indicator-tag {
  color: #38bdf8 !important;
  margin-left: auto;
}

/* Simulator Stock Chart Card (Stretched, matching stocks page Lightweight Chart exactly) */
.sim-stock-chart-card {
  width: 100%;
  height: 380px;
  min-height: 340px;
  background-color: #121212;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  position: relative;
}

.sim-chart-main-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

.sim-chart-svg {
  width: 100%;
  flex: 1;
  display: block;
}

.sim-chart-time-scale {
  height: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8b949e;
  background: #121212;
  user-select: none;
}

.sim-chart-right-scale {
  width: 82px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 8px 10px 38px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #8b949e;
  position: relative;
  background: #121212;
  user-select: none;
}

.sim-scale-tick {
  line-height: 1;
}

.sim-scale-current-badge {
  background: #22c55e;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  position: absolute;
  right: 0;
  top: 18.5%;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.4);
  z-index: 2;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .sim-stock-chart-card {
    height: 300px;
    min-height: 280px;
  }
  .sim-chart-right-scale {
    width: 68px;
    font-size: 0.65rem;
  }
  .sim-chart-time-scale {
    font-size: 0.65rem;
    padding: 0 8px;
  }
}

/* Simulator Financials View */
.sim-financials-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sim-fin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.fin-company-pill {
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  padding: 4px 12px;
  border-radius: var(--radius-full);
}

.fin-mode-toggle {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 4px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.74rem;
}

.fin-mode-toggle span {
  padding: 3px 10px;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor: pointer;
}

.fin-mode-toggle span.active {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 600;
}

.sim-fin-table-wrapper {
  overflow-x: auto;
  background: rgba(14, 14, 18, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

.sim-fin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.sim-fin-table th, .sim-fin-table td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.sim-fin-table th.fin-item-th, .sim-fin-table td.item-td {
  text-align: left;
  font-weight: 500;
}

.sim-fin-table th {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.02);
}

.sim-fin-table td {
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.sim-fin-table .highlight-tr td {
  color: #ffffff;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.02);
}

.sim-fin-table .fcf-tr td {
  background: rgba(34, 197, 94, 0.04);
  color: #34d399;
  font-weight: 600;
}

.th-ttm, .td-ttm {
  color: #38bdf8 !important;
  font-weight: 700;
}

.yoy-pill {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 600;
}

.yoy-pill.positive {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.yoy-pill.neutral {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
}

/* Simulator Disclosures: Insider Form 4 */
.insider-card {
  border-left: 3px solid #a855f7 !important;
}

.insider-avatar {
  background: rgba(168, 85, 247, 0.2) !important;
  border-color: rgba(168, 85, 247, 0.4) !important;
  color: #c084fc !important;
}

.type-pill.insider {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.target-bracket-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.74rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  margin-top: 8px;
}

.bracket-bar {
  flex: 1;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
}

.bracket-dot {
  position: absolute;
  top: -4px;
  width: 12px;
  height: 12px;
  background: #38bdf8;
  border-radius: 50%;
  box-shadow: 0 0 8px #38bdf8;
}

/* ==========================================================================
   BENTO FEATURE SHOWCASE VISUALS
   ========================================================================== */
.heatmap-showcase-visual {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bento-heatmap-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.bento-index-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bento-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}

.bento-pill.active {
  background: rgba(59, 130, 246, 0.18);
  border-color: var(--accent-blue);
  color: #93c5fd;
  font-weight: 600;
}

.mini-flag {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  object-fit: cover;
}

.bento-feed-status {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: #22c55e;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pulse-dot-green {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
}

.bento-treemap-sectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.treemap-sector-group {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 10px;
}

.sector-group-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.sector-tiles-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.bento-tile {
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bento-tile-lg {
  flex: 2;
  min-width: 95px;
}

.bento-tile-md {
  flex: 1;
  min-width: 70px;
}

.bento-tile.positive {
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.bento-tile.negative {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.tile-sym {
  font-weight: 700;
  font-size: 0.85rem;
  color: #ffffff;
}

.tile-chg {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.76rem;
  color: #4ade80;
}

.bento-tile.negative .tile-chg {
  color: #f87171;
}

.tile-meta {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

/* DuPont Flow in Bento */
.mini-dupont-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 6px;
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-step.highlight {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  padding: 4px 10px;
  border-radius: 4px;
}

.f-name {
  font-size: 0.66rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.f-val {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
}

.f-val.green { color: #4ade80; }
.f-val.blue { color: #38bdf8; }
.f-val.purple { color: #c084fc; }
.f-val.highlight { color: #22c55e; font-size: 1.05rem; }

.f-op {
  color: var(--text-muted);
  font-weight: 300;
}

.badge-rank {
  font-size: 0.68rem;
  padding: 2px 6px;
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
  border-radius: var(--radius-full);
}

/* Bento 10-K Table Slice */
.table-slice-visual {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 10px 14px;
}

.mini-sec-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
}

.sec-tr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-mono);
  color: var(--text-secondary);
  text-align: right;
}

.sec-tr.head {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.sec-col-name {
  text-align: left;
  font-family: inherit;
  color: var(--text-primary);
  font-weight: 500;
}

.sec-col-ttm {
  color: #38bdf8;
  font-weight: 600;
}

.sec-col-yoy {
  font-weight: 600;
}

.sec-col-yoy.positive {
  color: #4ade80;
}

.sec-tr.highlight {
  background: rgba(34, 197, 94, 0.06);
  border-radius: 4px;
  padding: 4px 6px;
}

/* Bento Candlestick Chart Preview */
.chart-preview-visual {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-md);
  padding: 12px;
}

.mini-chart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mini-sym-badge {
  font-size: 0.8rem;
  font-weight: 600;
  color: #ffffff;
}

.mini-sym-badge .pos {
  color: #4ade80;
  font-family: var(--font-mono);
  margin-left: 4px;
}

.mini-range-pills {
  display: flex;
  gap: 4px;
  font-size: 0.7rem;
  font-family: var(--font-mono);
}

.mini-range-pills span {
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--text-muted);
}

.mini-range-pills span.active {
  background: var(--accent-blue);
  color: #ffffff;
}

.mini-svg-chart {
  width: 100%;
  height: 95px;
  display: block;
}

/* Bento Rating Breakdown */
.mini-rating-bar-wrap {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-breakdown-bar {
  height: 16px;
  display: flex;
  border-radius: 3px;
  overflow: hidden;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  line-height: 16px;
}

.mini-breakdown-bar .seg.sb { background: #15803d; }
.mini-breakdown-bar .seg.b { background: #22c55e; }
.mini-breakdown-bar .seg.h { background: #f59e0b; color: #000; }
.mini-breakdown-bar .seg.s { background: #ef4444; }

.mini-rating-legend {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Bento ETF Look-Through */
.etf-bento-visual {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mini-etf-row {
  display: flex;
}

.mini-etf-chip {
  display: flex;
  gap: 14px;
  font-size: 0.78rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  width: 100%;
  flex-wrap: wrap;
}

.etf-sym {
  font-weight: 800;
  color: #38bdf8;
}

.etf-stat {
  color: var(--text-secondary);
}

.etf-stat strong {
  font-family: var(--font-mono);
  color: #ffffff;
}

.mini-holdings-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.h-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 4px;
  color: var(--text-secondary);
}

.h-row strong {
  font-family: var(--font-mono);
  color: #38bdf8;
}

/* Bento Dividend Safety & Payouts */
.dividend-bento-visual {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.div-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.div-metric {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.d-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.d-val {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: #ffffff;
  margin-top: 2px;
}

.d-val.green { color: #4ade80; }
.d-val.blue { color: #38bdf8; }
.d-val.purple { color: #c084fc; }

.d-badge {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 0.62rem;
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}

.div-payout-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 64px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
}

.p-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.p-fill {
  width: 16px;
  background: rgba(59, 130, 246, 0.45);
  border-radius: 2px;
}

.p-fill.highlight {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
}

.p-bar span {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* ==========================================================================
   VISUAL WORKSTATION COMPARISON SHOWCASE
   ========================================================================== */
.visual-comparison-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
}

.comparison-showcase-card {
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.comparison-showcase-card.searchfin-side {
  background: rgba(18, 18, 24, 0.75);
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(59, 130, 246, 0.12);
}

.comparison-showcase-card.legacy-side {
  background: rgba(26, 20, 20, 0.5);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

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

.brand-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.05rem;
  color: #ffffff;
}

.brand-badge svg {
  color: var(--accent-blue);
}

.brand-badge.legacy {
  color: #fca5a5;
}

.brand-badge.legacy svg {
  color: #ef4444;
}

.showcase-tag {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
}

.showcase-tag.clean {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.showcase-tag.cluttered {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.showcase-terminal-preview {
  background: #0e0e11;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preview-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mock-pill {
  font-size: 0.72rem;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.mock-pill.active {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  font-weight: 600;
}

.mock-search-bar {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.preview-content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.preview-mini-tile {
  padding: 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  font-weight: 600;
  text-align: center;
}

.preview-mini-tile.pos {
  background: rgba(34, 197, 94, 0.18);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.preview-mini-tile.neg {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.preview-status-footer {
  font-size: 0.7rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
}

.p-status-dot {
  width: 6px;
  height: 6px;
  background: #22c55e;
  border-radius: 50%;
}

.showcase-clutter-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mock-ad-banner {
  background: rgba(245, 158, 11, 0.15);
  border: 1px dashed rgba(245, 158, 11, 0.5);
  color: #fbbf24;
  font-size: 0.74rem;
  padding: 10px;
  text-align: center;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.mock-paywall-modal {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 16px;
  border-radius: var(--radius-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.paywall-lock-icon {
  font-size: 1.4rem;
}

.mock-paywall-modal strong {
  color: #f87171;
  font-size: 0.88rem;
}

.mock-paywall-modal span {
  color: var(--text-muted);
  font-size: 0.74rem;
}

.mock-ad-video {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   INTERACTIVE FAQ SPOTLIGHT & COMMAND SEARCH DEMO
   ========================================================================== */
.faq-spotlight-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.faq-spotlight-card {
  background: rgba(18, 18, 24, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-xl);
  padding: 28px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

.spotlight-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.spotlight-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.spotlight-title-wrap h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-top: 4px;
}

.spotlight-latency {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  padding: 4px 8px;
  border-radius: var(--radius-full);
}

.spotlight-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.faq-search-demo-box {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-search-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.faq-search-input-group svg {
  position: absolute;
  left: 12px;
  color: var(--text-muted);
}

.faq-search-input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 36px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-size: 0.88rem;
  font-family: inherit;
}

.faq-search-input:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.faq-quick-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.faq-quick-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-family: var(--font-mono);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all 150ms;
}

.faq-quick-chip:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.faq-quick-chip.active {
  background: rgba(59, 130, 246, 0.25);
  border-color: var(--accent-blue);
  color: #93c5fd;
  font-weight: 600;
}

.faq-search-result-card {
  margin-top: 4px;
}

.faq-result-card-inner {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(56, 189, 248, 0.3);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.res-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.res-sym-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.r-sym {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}

.r-type {
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  text-transform: uppercase;
}

.r-type.stock { background: rgba(59, 130, 246, 0.2); color: #93c5fd; }
.r-type.etf { background: rgba(168, 85, 247, 0.2); color: #c084fc; }
.r-type.forex { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }

.res-price-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.r-price {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
}

.r-chg {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.r-chg.positive { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.r-chg.negative { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.res-name {
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.r-exch {
  color: var(--text-muted);
}

.res-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.res-metrics strong {
  font-family: var(--font-mono);
  color: #ffffff;
}

.res-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 8px;
  font-size: 0.72rem;
}

.res-tip {
  color: var(--text-muted);
}

.res-instant-tag {
  color: #38bdf8;
  font-weight: 600;
}

.engine-specs-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 14px;
  margin-top: 14px;
}

.spec-col {
  display: flex;
  flex-direction: column;
}

.s-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--text-muted);
}

.s-val {
  font-size: 0.82rem;
  color: #ffffff;
  font-weight: 600;
}

/* ==========================================================================
   BOTTOM CTA MEMBER WORKSTATION ACCESS PASS
   ========================================================================== */
.bottom-cta-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
}

.bottom-cta-pass-card {
  background: rgba(10, 10, 14, 0.85);
  border: 1px solid rgba(59, 130, 246, 0.35);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 24px rgba(59, 130, 246, 0.15);
}

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

.pass-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ffffff;
}

.pass-brand svg {
  color: var(--accent-blue);
}

.pass-status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  letter-spacing: 0.05em;
}

.pass-market-pulse {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  color: #22c55e;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}

.pass-perks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pass-perk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.pass-perk-item .check-icon {
  color: #22c55e;
  font-weight: 800;
}

.pass-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.pass-code {
  font-family: var(--font-mono);
  color: #38bdf8;
  font-weight: 700;
  font-size: 0.84rem;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 992px) {
  .bento-card { grid-column: span 12; }
  .visual-comparison-showcase { grid-template-columns: 1fr; }
  .faq-spotlight-layout { grid-template-columns: 1fr; }
  .bottom-cta-grid { grid-template-columns: 1fr; }
  .bento-treemap-sectors { grid-template-columns: 1fr; }
  .sim-chart-quote { flex-direction: column; align-items: flex-start; gap: 8px; }
  .etf-lookthrough-columns { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .marketing-page-root { padding-top: 20px; }
  .waitlist-inputs-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
  }
  .waitlist-inputs-row .email-input-wrap {
    width: 100%;
    flex: none;
  }
  .waitlist-submit-btn { width: 100%; }
  .hero-metrics-bar { flex-direction: column; border-radius: var(--radius-lg); gap: 16px; width: 100%; }
  .metric-separator { display: none; }
  .footer-links-col { flex-direction: column; gap: 24px; }
  .marketing-footer { padding-bottom: calc(84px + var(--sab)); }
  .target-gauge-hero { flex-direction: column; align-items: flex-start; }
  .sim-dupont-equation { flex-direction: column; align-items: flex-start; }
  .comparison-table th, .comparison-table td { padding: 12px 14px; font-size: 0.82rem; }
  .bottom-cta-card { padding: 32px 20px; }
  .sec-tr { font-size: 0.72rem; }
  .sim-candlestick-canvas { height: 180px; }
}

/* ==========================================================================
   UNCLUTTERED HOMEPAGE & WAITLIST POPUP MODAL STYLES
   ========================================================================== */

/* 1. Waitlist Popup Modal */
.waitlist-modal {
  position: fixed;
  inset: 0;
  z-index: 100005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.waitlist-modal.hidden {
  display: none !important;
}

.waitlist-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 13, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: modalBackdropFadeIn 0.25s ease-out;
}

.waitlist-modal-content {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #0b0f19;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(59, 130, 246, 0.15);
  padding: 32px;
  animation: modalScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@keyframes modalScaleIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.waitlist-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.waitlist-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #60a5fa;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.waitlist-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  min-height: 38px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #94a3b8;
  cursor: pointer;
  transition: all 0.2s;
}

.waitlist-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: scale(1.05);
}

.waitlist-modal-title {
  font-size: 1.65rem;
  font-weight: 700;
  color: #f8fafc;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.waitlist-modal-subtitle {
  font-size: 0.92rem;
  line-height: 1.5;
  color: #94a3b8;
  margin-bottom: 22px;
}

.modal-persona-chips {
  margin-bottom: 20px;
}

.modal-input-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-input-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.modal-submit-btn {
  padding: 0 20px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  font-weight: 600;
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  width: 100%;
  transition: all 0.2s;
}

.modal-submit-btn:hover {
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.5);
  transform: translateY(-1px);
}

.modal-waitlist-perks {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-waitlist-perks .perk-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #94a3b8;
}

.waitlist-modal-footer-links {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.waitlist-modal-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.modal-signin-link {
  color: #38bdf8 !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  font-size: 0.88rem !important;
  transition: all 0.2s ease;
}

.modal-signin-link:hover,
.modal-signin-link:active {
  color: #60a5fa !important;
  text-decoration: underline !important;
}

.modal-status-btn {
  background: none;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  font-size: 0.82rem;
  text-decoration: underline;
}

.modal-status-btn:hover {
  color: #cbd5e1;
}

.waitlist-modal-footer-subrow {
  display: flex;
  align-items: center;
}

.modal-invite-sublink {
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
  text-decoration: none !important;
}

.modal-invite-sublink:hover {
  color: #38bdf8 !important;
  text-decoration: underline !important;
}

.hero-signin-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #38bdf8;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.2s;
}

.hero-signin-link:hover {
  color: #60a5fa;
  text-decoration: underline;
}

/* 2. Uncluttered Hero & Intro */
.uncluttered-hero {
  padding: 64px 0 40px;
  text-align: center;
}

.hero-container-streamlined {
  max-width: 860px;
  margin: 0 auto;
}

.uncluttered-headline {
  font-size: clamp(2.3rem, 4.5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.uncluttered-subhead {
  font-size: 1.12rem;
  line-height: 1.65;
  color: #94a3b8;
  max-width: 700px;
  margin: 0 auto 28px;
}

.hero-highlights-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}

.highlight-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #cbd5e1;
  backdrop-filter: blur(8px);
  transition: all 0.2s;
}

.highlight-chip:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(59, 130, 246, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

.uncluttered-waitlist-box {
  max-width: 620px;
  margin: 0 auto 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 24px 24px 18px;
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
}

.uncluttered-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
}

.hero-modal-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}

.hero-modal-trigger-btn:hover {
  background: rgba(59, 130, 246, 0.22);
  color: #fff;
  border-color: #3b82f6;
  transform: translateY(-1px);
}

.hero-scroll-link {
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.hero-scroll-link:hover {
  color: #38bdf8;
}

.action-divider {
  color: #334155;
  font-size: 0.8rem;
}

/* 3. SearchFin Terminal Section */
.marketing-terminal-section {
  padding: 24px 0 80px;
}

.terminal-section-header {
  text-align: center;
  margin-bottom: 32px;
}

.terminal-section-header .section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 12px;
  margin-bottom: 8px;
}

.terminal-section-header .section-subtitle {
  font-size: 1rem;
  color: #94a3b8;
  max-width: 640px;
  margin: 0 auto;
}

.terminal-centerpiece {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 50px rgba(59, 130, 246, 0.12);
  border-radius: 16px;
}

/* 4. Minimalist Footer */
.uncluttered-footer {
  padding: 48px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: #09090b;
}

.footer-link-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  text-align: left;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s;
}

@media (hover: hover) and (pointer: fine) {
  .footer-link-btn:hover {
    color: #60a5fa;
  }
}

.footer-link-btn:active {
  color: #60a5fa;
}

/* Responsive Rules for Modal & Streamlined Layout */
@media (max-width: 640px) {
  /* 1. Hero & Marketing Typography */
  .uncluttered-headline {
    font-size: clamp(1.85rem, 7.5vw, 2.35rem);
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .uncluttered-subhead {
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0 auto 18px;
    padding: 0 4px;
  }
  .hero-highlights-bar {
    gap: 6px;
    margin-bottom: 18px;
  }
  .highlight-chip {
    font-size: 0.76rem;
    padding: 6px 12px;
  }
  .uncluttered-waitlist-box {
    padding: 16px 12px;
    margin-bottom: 14px;
    border-radius: 14px;
  }
  .uncluttered-actions {
    flex-direction: column;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
  }
  .action-divider {
    display: none;
  }

  /* 2. Waitlist Popup Modal */
  .waitlist-modal {
    padding: 10px;
    align-items: center;
  }
  .waitlist-modal-content {
    padding: 18px 16px calc(20px + var(--sab)) 16px;
    border-radius: 18px;
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .waitlist-modal-header {
    margin-bottom: 12px;
  }
  .waitlist-modal-title {
    font-size: 1.35rem;
    margin-bottom: 4px;
    line-height: 1.25;
  }
  .waitlist-modal-subtitle {
    font-size: 0.82rem;
    line-height: 1.4;
    margin-bottom: 12px;
  }
  .modal-persona-chips {
    margin-bottom: 12px;
  }
  .modal-persona-chips .persona-chips-title {
    font-size: 0.76rem;
    margin-bottom: 6px;
  }
  .modal-persona-chips .persona-chip {
    padding: 5px 11px;
    font-size: 0.74rem;
  }
  .modal-input-group {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
  }
  .modal-input-fields {
    gap: 8px;
  }
  .modal-input-fields input {
    height: 42px;
    font-size: 16px !important;
  }
  .modal-submit-btn {
    width: 100%;
    height: 44px;
    justify-content: center;
    font-size: 0.86rem;
  }
  .modal-waitlist-perks {
    margin-top: 12px;
    padding-top: 10px;
    gap: 6px;
  }
  .modal-waitlist-perks .perk-item {
    font-size: 0.76rem;
  }
  .waitlist-modal-footer-links {
    margin-top: 12px;
    padding-top: 10px;
    gap: 6px;
  }
  .modal-signin-link {
    font-size: 0.82rem !important;
  }
  .modal-status-btn, .modal-invite-sublink {
    font-size: 0.76rem !important;
  }

  /* 3. Demo Simulator Workstation */
  .simulator-header {
    padding: 0 10px;
  }
  .window-title {
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.74rem;
    margin-left: 8px;
  }
  .simulator-tabs-nav {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .sim-tab-btn {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
  .simulator-body {
    padding: 14px 10px;
  }

  /* 4. Simulator Stock Chart Date Scale */
  .sim-chart-time-scale span {
    display: none;
  }
  .sim-chart-time-scale span:nth-child(3),
  .sim-chart-time-scale span:nth-child(6),
  .sim-chart-time-scale span:nth-child(10),
  .sim-chart-time-scale span:nth-child(14),
  .sim-chart-time-scale span:nth-child(16) {
    display: inline-block;
  }

  /* 5. Congress & Insider Cards */
  .congress-card {
    display: grid;
    grid-template-columns: 36px 1fr;
    grid-template-areas:
      "avatar info"
      "stats stats";
    gap: 10px 12px;
    padding: 12px;
    align-items: start;
  }
  .pol-avatar {
    grid-area: avatar;
    margin-top: 2px;
  }
  .trade-info {
    grid-area: info;
    min-width: 0;
  }
  .trade-stats {
    grid-area: stats;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 8px;
    margin-top: 4px;
    width: 100%;
  }

  /* 6. Wall Street Targets Firm Rows */
  .firm-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    padding: 10px 12px;
    align-items: center;
  }
  .firm-date {
    width: auto;
    font-size: 0.72rem;
    grid-column: 1 / 2;
  }
  .firm-target {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    font-size: 0.88rem;
    text-align: right;
  }
  .firm-name {
    grid-column: 1 / 2;
    font-size: 0.84rem;
  }
  .firm-analyst {
    display: none;
  }
  .firm-rating.buy {
    width: auto;
    grid-column: 2 / 3;
    text-align: right;
    font-size: 0.76rem;
  }

  /* 7. ETF Key Metrics 2-column Grid */
  .etf-summary-card {
    padding: 12px 14px;
  }
  .etf-key-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    width: 100%;
  }
}

/* ==========================================================================
   Large Displays & Ultrawide Optimizations (1600px, 2200px+)
   ========================================================================== */
@media (min-width: 1600px) {
  .chart-container {
    min-height: 460px;
  }
  
  .heatmap-canvas-wrapper {
    min-height: 680px;
    height: clamp(680px, calc(100vh - 280px), 1150px);
  }

  .fin-table-wrap {
    max-height: clamp(600px, 70vh, 900px);
  }
}

@media (min-width: 2000px) {
  html {
    font-size: 17px;
  }

  .chart-container {
    min-height: 500px;
  }

  .heatmap-canvas-wrapper {
    min-height: 750px;
    height: clamp(750px, calc(100vh - 260px), 1300px);
  }
}

@media (min-width: 2800px) {
  html {
    font-size: 18px;
  }

  .chart-container {
    min-height: 540px;
  }

  .heatmap-canvas-wrapper {
    min-height: 850px;
    height: clamp(850px, calc(100vh - 240px), 1450px);
  }
}

/* ==========================================================================
   LinkedIn-Style Search Results Page
   ========================================================================== */

#searchPage {
  width: 100%;
  padding-bottom: 60px;
}

.search-page-wrapper {
  width: var(--content-width);
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* --- Top Category Filter Pills (LinkedIn Style) --- */
.search-pills-bar-wrap {
  position: sticky;
  top: 84px;
  z-index: 40;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px;
}

.search-pills-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.search-pills-bar::-webkit-scrollbar {
  display: none;
}

.search-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  user-select: none;
}

.search-pill-btn:hover {
  border-color: var(--border-color-hover);
  color: var(--text-primary);
  background: var(--bg-tertiary);
}

.search-pill-btn.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent-blue);
  color: #fff;
  font-weight: 600;
}

.search-pill-btn .pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  font-family: var(--font-mono);
}

.search-pill-btn.active .pill-count {
  background: rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

/* --- 3-Column LinkedIn-Style Search Results Layout --- */
.search-results-layout {
  display: grid;
  grid-template-columns: 240px 1fr 300px;
  gap: 24px;
  align-items: start;
}

/* --- Left Rail: "On this page" & Faceted Filters --- */
.search-left-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 156px;
}

.search-sidebar-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}

.sidebar-heading {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.on-this-page-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.on-this-page-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition);
}

.on-this-page-item:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.on-this-page-item.active {
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
  font-weight: 600;
}

.on-this-page-item .item-count {
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.on-this-page-item.active .item-count {
  color: var(--accent-blue);
}

.region-filter-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.region-filter-btn {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
}

.region-filter-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

.region-filter-btn.active {
  background: var(--bg-tertiary);
  border-color: var(--accent-blue);
  color: var(--text-primary);
  font-weight: 600;
}

.search-sort-select {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}

.search-sort-select:focus {
  border-color: var(--accent-blue);
}

/* --- Center Main Feed --- */
.search-main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.search-header-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.search-header-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.search-query-title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.search-total-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
}

.search-header-sub {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.search-cards-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- LinkedIn-Style Company Result Card --- */
.search-company-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.search-company-card:hover {
  border-color: var(--border-color-hover);
  background: #141416;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.company-card-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.company-logo-wrap {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: #1e1e24;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--shadow-sm);
}

.company-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 4px;
}

.company-fallback-avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
  font-family: var(--font-mono);
  color: var(--accent-blue);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(147, 197, 253, 0.05));
}

.company-title-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.company-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.company-name-link {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color var(--transition);
}

.company-name-link:hover {
  color: var(--accent-blue);
}

.company-ticker-pill {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.25);
  padding: 2px 8px;
  border-radius: 4px;
}

.company-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}

.company-badge.badge-etf {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #c084fc;
}

.company-badge.badge-forex {
  background: rgba(34, 197, 94, 0.15);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #4ade80;
}

.company-badge.badge-crypto {
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #fbbf24;
}

.company-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.company-card-flag {
  vertical-align: middle;
  border-radius: 2px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

.company-sector-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action Buttons (LinkedIn Following / View Page Style) */
.company-card-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex-shrink: 0;
  min-width: 130px;
}

.btn-company-follow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--border-color-hover);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.btn-company-follow .follow-icon-check {
  display: none;
}

.btn-company-follow:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
}

.btn-company-follow.active {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--accent-green);
}

.btn-company-follow.active .follow-icon-star {
  display: none;
}

.btn-company-follow.active .follow-icon-check {
  display: inline-block;
}

.btn-company-view {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: var(--radius-full);
  background: var(--accent-blue);
  border: 1px solid transparent;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  width: 100%;
  box-sizing: border-box;
}

.btn-company-view:hover {
  background: var(--accent-blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Bottom Financial Metrics Grid */
.company-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.metric-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.metric-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 600;
}

.metric-value {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
}

.metric-change-pill {
  font-weight: 600;
}

/* --- Right Rail: Trending Stocks & Search Tips --- */
.search-right-rail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 156px;
}

.trending-header,
.tips-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-blue);
}

.trending-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition);
}

.trending-row:hover {
  background: var(--bg-tertiary);
}

.trending-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.trending-sym {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--accent-blue);
}

.trending-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.trending-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.trending-price {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.trending-change {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
}

.search-tips-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  padding: 0;
  margin: 0;
}

.search-tips-list strong {
  color: var(--text-primary);
}

.search-tips-list em {
  font-style: normal;
  color: var(--accent-blue);
  background: rgba(59, 130, 246, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
  font-family: var(--font-mono);
}

/* --- Empty State --- */
.search-no-results-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 48px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.no-results-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.no-results-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.no-results-desc {
  max-width: 480px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.no-results-suggestions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sugg-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.sugg-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.sugg-chip {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--accent-blue);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.sugg-chip:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-blue);
  transform: translateY(-1px);
}

/* --- Skeleton Loading States --- */
.skeleton-box {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: var(--radius-lg);
}

.skeleton-line {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 4px;
}

.search-card-skeleton {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  gap: 16px;
}

.skeleton-logo {
  width: 54px;
  height: 54px;
  border-radius: var(--radius-md);
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  flex-shrink: 0;
}

.skeleton-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

/* --- Error Card --- */
.search-error-card {
  background: var(--bg-card);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-xl);
  padding: 40px;
  text-align: center;
  max-width: 500px;
  margin: 40px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.btn-search-retry {
  padding: 10px 24px;
  border-radius: var(--radius-full);
  background: var(--accent-blue);
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.btn-search-retry:hover {
  background: var(--accent-blue-hover);
}

/* --- Responsive Adjustments --- */
@media (max-width: 1100px) {
  .search-results-layout {
    grid-template-columns: 220px 1fr;
  }
  .search-right-rail {
    display: none;
  }
}

@media (max-width: 768px) {
  .search-results-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .search-left-rail {
    display: none;
  }
  .search-pills-bar-wrap {
    top: 60px;
    padding: 8px 0;
  }
  .company-card-top {
    flex-wrap: wrap;
  }
  .company-card-actions {
    width: 100%;
    margin-top: 8px;
    justify-content: flex-end;
  }
  .company-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

/* --- Did You Mean / Typo-Tolerance Banner --- */
.search-did-you-mean-banner {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  animation: fadeIn 180ms ease-out;
}

.did-you-mean-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--text-primary);
}

.did-you-mean-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.98rem;
}

.corrected-term-name {
  color: var(--accent-blue);
  font-weight: 700;
}

.search-instead-line {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-left: 26px;
}

.search-exact-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-style: italic;
  transition: color var(--transition);
}

.search-exact-btn:hover {
  color: var(--text-primary);
}

/* Dropdown Typo Correction Header */
.search-dropdown-correction {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(59, 130, 246, 0.1);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.78rem;
  color: var(--accent-blue);
}

.search-dropdown-correction strong {
  color: var(--text-primary);
}

/* ==========================================================================
   Stock Indexes (SNP / IndexView) Custom Page Styles
   ========================================================================== */

.index-view-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Quick Benchmark Chips Bar */
.index-quick-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0;
}

.index-quick-bar-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.index-quick-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.index-quick-chips::-webkit-scrollbar {
  display: none;
}

.index-quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--text-secondary);
  border: none;
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  user-select: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.index-quick-chip:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.05);
}

.index-quick-chip.active {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.index-chip-sym {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-primary);
}

.index-chip-name {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.index-chip-more {
  border-left: 1px solid var(--border-color);
  margin-left: 2px;
  padding-left: 10px;
  color: var(--accent-blue);
}

.index-chip-more:hover {
  color: #60a5fa;
}

/* Header Elements */
.index-header-badge {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  flex-shrink: 0;
  overflow: hidden;
}

.index-header-flag {
  width: 32px;
  height: 24px;
  object-fit: cover;
  border-radius: 2px;
}

.index-symbol-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  font-weight: 600;
}

.index-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 4px;
  flex-wrap: wrap;
}

.meta-separator {
  color: var(--text-muted);
  opacity: 0.5;
}

.index-heatmap-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-blue);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.08);
  transition: all var(--transition);
}

.index-heatmap-link:hover {
  background: rgba(59, 130, 246, 0.18);
  color: #93c5fd;
}

/* Search Index Tag */
.search-index-tag {
  background: rgba(139, 92, 246, 0.18);
  color: #a78bfa;
}

/* Market Stats Grid in Overview */
.index-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.84rem;
}

.stat-value {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.92rem;
}

/* Top Constituents Preview Grid */
.index-constituents-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

.index-constituent-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
}

.index-constituent-card:hover {
  background: var(--bg-tertiary);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

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

.constituent-symbol-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.constituent-symbol {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  font-family: var(--font-mono, monospace);
}

.constituent-change {
  font-size: 0.82rem;
  font-weight: 600;
}

.constituent-name {
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.constituent-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.constituent-price {
  font-weight: 600;
  color: var(--text-primary);
}

.view-all-link-btn {
  background: none;
  border: none;
  color: var(--accent-blue);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all var(--transition);
}

.view-all-link-btn:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* Constituents Tab Layout & Table */
.index-constituents-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.constituents-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.constituents-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  flex: 1;
  min-width: 260px;
  color: var(--text-muted);
}

.constituents-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 0.88rem;
  width: 100%;
}

.constituents-input::placeholder {
  color: var(--text-muted);
}

.constituents-sector-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0;
  max-width: 100%;
}

.constituents-sector-pills::-webkit-scrollbar {
  display: none;
}

.sector-pill-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}

.sector-pill-btn:hover {
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.sector-pill-btn.active {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
}

.csv-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 8px 14px;
  font-size: 0.84rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.csv-export-btn:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.2);
}

.constituents-count-badge {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.constituents-table-container {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.constituents-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.constituents-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  user-select: none;
}

.constituents-table th.sortable {
  cursor: pointer;
}

.constituents-table th.sortable:hover {
  color: var(--text-primary);
}

.constituents-table td {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.constituent-row:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.constituent-cell-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.constituent-cell-link:hover .constituent-table-name {
  color: var(--accent-blue);
}

.constituent-sym-badge {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--bg-tertiary);
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-primary);
  flex-shrink: 0;
}

.constituent-table-name {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 2px;
  transition: color var(--transition);
}

.constituent-table-sym-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
}

.constituent-table-sector {
  font-weight: 500;
  color: var(--text-secondary);
}

.constituent-table-subsector {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.constituent-table-price {
  font-weight: 600;
  color: var(--text-primary);
}

.constituent-table-change {
  font-weight: 600;
}

.constituents-load-more {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.crypto-load-more-wrap {
  display: flex;
  justify-content: center;
  margin: 16px 0 24px 0;
}

.load-more-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 10px 24px;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.load-more-btn:hover {
  background: var(--bg-tertiary);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Sectors Tab Layout */
.index-sectors-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sectors-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .sectors-content-grid {
    grid-template-columns: 1fr;
  }
}

.sectors-chart-wrap {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sectors-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sector-stat-card {
  padding: 14px 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
}

.sector-stat-card:hover {
  background: var(--bg-tertiary);
  border-color: rgba(255, 255, 255, 0.15);
}

.sector-stat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.sector-stat-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text-primary);
}

.sector-stat-pct {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--accent-blue);
}

.sector-progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.sector-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.sector-stat-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.sector-filter-link {
  color: var(--accent-blue);
  font-weight: 500;
}

/* Performance Tab Layout */
.index-performance-layout {
  display: flex;
  flex-direction: column;
}

.performance-section-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}

.perf-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text-primary);
}

.perf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
}

.perf-card {
  padding: 14px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  text-align: center;
}

.perf-card-period {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.perf-card-value {
  font-size: 1.1rem;
  font-weight: 700;
}

/* 52W Range Visual Gauge */
.range-gauge-card {
  padding: 16px 20px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.range-gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.range-gauge-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: uppercase;
  display: block;
}

.range-gauge-val {
  font-weight: 700;
  font-size: 1rem;
  margin-top: 2px;
}

.range-gauge-bar-wrap {
  position: relative;
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  margin-bottom: 12px;
}

.range-gauge-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f59e0b, #10b981);
  border-radius: 5px;
}

.range-gauge-marker {
  position: absolute;
  top: -4px;
  width: 18px;
  height: 18px;
  background: #ffffff;
  border: 3px solid var(--accent-blue);
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.6);
}

.range-gauge-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Moving Averages Grid */
.ma-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.ma-stat-card {
  padding: 16px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.ma-stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.ma-stat-val {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.ma-stat-sub {
  font-size: 0.82rem;
  font-weight: 600;
}

/* ==========================================================================
   COMMODITIES MODULE (Bloomberg, CME Group & Business Insider Style)
   ========================================================================== */

.commodity-page-wrapper {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.commodity-top-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}

.commodity-branding {
  display: flex;
  align-items: center;
  gap: 12px;
}

.commodity-badge-pulse {
  display: none;
}

.commodity-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.15rem;
  font-weight: 600;
}

.commodity-breadcrumb .breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s ease;
}

.commodity-breadcrumb .breadcrumb-link:hover {
  color: #ffffff;
}

.commodity-breadcrumb .breadcrumb-separator {
  color: var(--text-muted);
}

.commodity-breadcrumb .breadcrumb-current {
  color: #ffffff;
}

.commodity-source-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-color);
  font-family: var(--font-mono);
}

.commodity-main-tabs {
  margin-bottom: 24px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
}

/* Benchmark Marquee (Bloomberg Style) */
.commodity-benchmark-marquee {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.commodity-marquee-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}

.commodity-marquee-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.marquee-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.marquee-symbol {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--accent-blue);
}

.marquee-exchange-tag {
  font-size: 0.68rem;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  color: var(--text-muted);
  text-transform: uppercase;
}

.marquee-name {
  font-size: 0.82rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 10px;
}

.marquee-price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.marquee-price {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
}

.marquee-change {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
}

.marquee-sparkline-wrap {
  width: 100%;
  height: 42px;
  margin-bottom: 8px;
}

.marquee-sparkline {
  width: 100%;
  height: 42px;
  display: block;
}

.marquee-range-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 6px;
}

/* Market Movers Strip (Business Insider Style) */
.commodity-movers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.commodity-mover-box {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
}

.mover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;
}

.mover-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.mover-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.mover-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mover-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  transition: background 0.15s ease;
  cursor: pointer;
}

.mover-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.mover-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mover-symbol {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
}

.mover-name {
  font-size: 0.74rem;
  color: var(--text-muted);
  max-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mover-item-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mover-price {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-primary);
}

.mover-badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}

.mover-badge.pos {
  background: rgba(34, 197, 94, 0.15);
  color: var(--accent-green);
}

.mover-badge.neg {
  background: rgba(239, 68, 68, 0.15);
  color: var(--accent-red);
}

.mover-badge.neutral {
  background: rgba(59, 130, 246, 0.15);
  color: var(--accent-blue);
}

/* Controls & Sector Filter Chips */
.commodity-controls-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.commodity-sector-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.commodity-sector-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.commodity-sector-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.15);
}

.commodity-sector-chip.active {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent-blue);
  color: #93c5fd;
  font-weight: 600;
}

.commodity-search-export-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.commodity-table-search {
  display: flex;
  align-items: center;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  width: 260px;
}

.commodity-table-search .search-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.commodity-table-search input {
  background: transparent;
  border: none;
  outline: none;
  padding: 8px 6px;
  color: var(--text-primary);
  font-size: 0.84rem;
  width: 100%;
}

.commodity-table-search .clear-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
}

.commodity-csv-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.commodity-csv-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  border-color: var(--border-color-hover);
}

/* High-Density Market Matrix Table (Bloomberg Style) */
.commodity-table-container {
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.commodity-table-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.commodity-table-container::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.commodity-table-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.commodity-table-container::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
}

.commodity-matrix-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.commodity-matrix-table th {
  padding: 12px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}

.commodity-matrix-table td {
  padding: 12px 14px;
  font-size: 0.88rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
}

.cmdty-row {
  cursor: pointer;
  transition: background 0.15s ease;
}

.cmdty-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.cmdty-table-cell-asset {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cmdty-symbol-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(59, 130, 246, 0.12);
  color: var(--accent-blue);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.cmdty-name-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 0.88rem;
}

.cmdty-subtext {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.cmdty-sector-tag {
  display: inline-block;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  background: transparent;
  border: none;
  padding: 0;
}

.cmdty-exchange-badge {
  font-size: 0.72rem;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* 52-Week Range Progress Bar */
.range-progress-wrap {
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.range-progress-bar {
  position: relative;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  overflow: visible;
}

.range-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.4), var(--accent-blue));
  border-radius: 3px;
}

.range-progress-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px var(--accent-blue);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

.cmdty-analyze-btn {
  padding: 5px 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-sm);
  color: #93c5fd;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cmdty-analyze-btn:hover {
  background: var(--accent-blue);
  color: #ffffff;
  border-color: var(--accent-blue);
}

/* Commodity Detail View */
.cmdty-detail-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 16px;
}

.cmdty-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cmdty-hero-avatar-box {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.05));
  border: 1px solid rgba(59, 130, 246, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cmdty-avatar-ticker {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-blue);
}

.cmdty-hero-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.cmdty-hero-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.cmdty-hero-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  max-width: 600px;
  line-height: 1.4;
}

.cmdty-hero-right {
  text-align: right;
}

.cmdty-hero-price {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cmdty-hero-change {
  font-size: 1.05rem;
  margin-top: 2px;
}

.cmdty-hero-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.status-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  box-shadow: 0 0 6px var(--accent-green);
}

/* Quick Peers Bar */
.cmdty-quick-peers-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  overflow: visible;
  padding-bottom: 0;
}

.peers-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}

.peers-chips-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 280px;
  min-width: 0;
  max-width: 100%;
}

.peers-chips-wrapper .selection-bar-arrow {
  width: 32px;
  height: 32px;
  align-self: center;
  flex-shrink: 0;
}

.peers-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 !important;
  justify-content: flex-start !important;
}

.peers-chips::-webkit-scrollbar {
  display: none;
}

.cmdty-peer-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 32px;
  min-height: 32px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.cmdty-peer-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-color-hover);
}

.peer-ticker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent-blue);
}

.peer-price {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-primary);
}

.peer-change {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
}

/* Key Statistics Strip (Business Insider Style) */
.cmdty-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.cmdty-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cmdty-stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cmdty-stat-card .stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.cmdty-stat-card .stat-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* Chart Switchers */
.cmdty-chart-section {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 24px;
}

.chart-controls-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.chart-type-switcher {
  display: inline-flex;
  width: fit-content;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 2px;
  border: 1px solid var(--border-color);
}

.chart-type-btn {
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.chart-type-btn.active {
  background: var(--accent-blue);
  color: #ffffff;
}

.flex-align-center {
  display: flex;
  align-items: center;
}

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

.gap-3 {
  gap: 12px;
}

/* CME / ICE Contract Specs & Calculator Grid */
.cmdty-specs-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 24px;
}

.cmdty-specs-calc-grid .cmdty-card {
  margin-bottom: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.cmdty-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
}

.cmdty-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}

.cmdty-card-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cmdty-spec-badge {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 4px 10px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-full);
  color: #93c5fd;
}

.cmdty-specs-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}

.spec-term {
  font-size: 0.84rem;
  color: var(--text-muted);
}

.spec-def {
  font-size: 0.88rem;
  color: var(--text-primary);
  text-align: right;
}

/* Position Calculator */
.calc-input-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
}

.calc-input-row label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calc-stepper-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  overflow: hidden;
}

.stepper-btn {
  background: rgba(255, 255, 255, 0.04);
  border: none;
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stepper-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.calc-stepper-wrap input {
  width: 60px;
  text-align: center;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 700;
  outline: none;
}

.calc-results-matrix {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.calc-result-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 12px;
  display: flex;
  flex-direction: column;
}

.calc-res-label {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.calc-res-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
}

.calc-res-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.calc-pl-simulation {
  background: rgba(255, 255, 255, 0.02);
  border-radius: var(--radius-sm);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.sim-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.sim-chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.sim-chip {
  padding: 8px;
  border-radius: var(--radius-sm);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.72rem;
}

.sim-chip.pos {
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: var(--accent-green);
}

.sim-chip.neg {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: var(--accent-red);
}

.sim-chip strong {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

/* History Card & Table */
.cmdty-history-card {
  margin-bottom: 24px;
}

.financial-table,
.cmdty-history-table,
#cmdtyHistoryTable {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  text-align: left;
}

.financial-table th,
.cmdty-history-table th,
#cmdtyHistoryTable th {
  padding: 12px 16px;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.02);
  white-space: nowrap;
}

.financial-table td,
.cmdty-history-table td,
#cmdtyHistoryTable td {
  padding: 12px 16px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  white-space: nowrap;
}

.financial-table td.font-bold,
.cmdty-history-table td.font-bold,
#cmdtyHistoryTable td.font-bold {
  color: var(--text-primary);
}

.financial-table tbody tr,
.cmdty-history-table tbody tr,
#cmdtyHistoryTable tbody tr {
  transition: background 0.15s ease;
}

.financial-table tbody tr:hover td,
.cmdty-history-table tbody tr:hover td,
#cmdtyHistoryTable tbody tr:hover td {
  background: rgba(255, 255, 255, 0.035);
}

.financial-table tbody tr:last-child td,
.cmdty-history-table tbody tr:last-child td,
#cmdtyHistoryTable tbody tr:last-child td {
  border-bottom: none;
}

.cmdty-history-pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}

.pager-btn {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.pager-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-color-hover, rgba(255, 255, 255, 0.2));
  color: #fff;
}

.pager-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pager-info,
.pagination-page-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Spreads & Relative Value */
.cmdty-spreads-header,
.cmdty-calendar-header {
  margin-bottom: 20px;
}

.cmdty-spreads-header h2,
.cmdty-calendar-header h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.cmdty-spreads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 20px;
}

.cmdty-spread-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.spread-card-header {
  margin-bottom: 12px;
}

.spread-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}

.spread-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(59, 130, 246, 0.12);
  color: #93c5fd;
  border-radius: 4px;
}

.spread-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.spread-value {
  font-size: 1.6rem;
}

.spread-benchmark-tag {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.spread-legs-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 10px;
  margin-bottom: 14px;
}

.spread-leg {
  display: flex;
  flex-direction: column;
}

.leg-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.leg-price {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.spread-operator {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-muted);
}

.spread-explanation {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

.spread-range-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.meter-bar {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.meter-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #22c55e);
  border-radius: 4px;
}

.meter-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
}

/* Reports & Calendar Timeline */
.cmdty-reports-timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmdty-report-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: border-color 0.15s ease;
}

.cmdty-report-card:hover {
  border-color: rgba(59, 130, 246, 0.35);
}

.report-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.report-agency {
  font-size: 0.76rem;
  color: var(--accent-blue);
  font-weight: 500;
}

.report-impact-badge {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.report-impact-badge.high {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.report-impact-badge.medium {
  background: rgba(234, 179, 8, 0.15);
  color: #facc15;
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.report-coverage {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 10px 0 14px;
}

.report-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  padding-top: 10px;
}

.report-frequency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.report-market-tag strong {
  color: var(--text-primary);
}

/* Badges & Search Integration */
.search-cmdty-tag,
.badge-commodity,
.wl-type-cmdty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono);
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
  letter-spacing: 0.02em;
}

/* Responsive Commodities Styles */
@media (max-width: 1024px) {
  .commodity-movers-grid {
    grid-template-columns: 1fr;
  }
  .cmdty-specs-calc-grid {
    grid-template-columns: 1fr;
  }
  .cmdty-stats-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .commodity-page-wrapper {
    padding: 16px 12px 70px;
  }
  .commodity-benchmark-marquee {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .commodity-marquee-card {
    padding: 10px 12px;
  }
  .marquee-price {
    font-size: 1.1rem;
  }
  .commodity-controls-card {
    flex-direction: column;
    align-items: stretch;
  }
  .commodity-table-search {
    width: 100%;
  }
  .commodity-search-export-bar {
    width: 100%;
    justify-content: space-between;
  }
  .cmdty-detail-hero {
    flex-direction: column;
    align-items: flex-start;
  }
  .cmdty-hero-right {
    text-align: left;
    width: 100%;
  }
  .cmdty-stats-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .cmdty-stat-card {
    padding: 12px 14px;
  }
  .cmdty-stat-card[style*="grid-column: span 2"] {
    grid-column: span 1 !important;
  }
  .sim-chips {
    grid-template-columns: repeat(2, 1fr);
  }
  .spread-legs-grid {
    flex-direction: column;
    align-items: flex-start;
  }
  .spread-operator {
    align-self: center;
  }
}

/* Specific Commodity Page & Institutional Details */
.cmdty-hub-return-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.15s ease;
}

.cmdty-hub-return-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--accent-blue);
  color: #93c5fd;
}

.cmdty-crumb-sector {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.cmdty-unit-badge {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.cmdty-single-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.cmdty-technicals-card {
  margin-bottom: 24px;
}

.cmdty-technicals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.tech-gauge-box {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 16px;
}

.tech-label {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.rsi-track-bar {
  position: relative;
  height: 10px;
  border-radius: 5px;
  display: flex;
  margin: 12px 0 6px;
  background: rgba(255, 255, 255, 0.06);
}

.rsi-zone {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 4px;
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.4);
}

.rsi-zone.oversold {
  background: rgba(34, 197, 94, 0.3);
  border-radius: 5px 0 0 5px;
}

.rsi-zone.neutral {
  background: rgba(59, 130, 246, 0.2);
}

.rsi-zone.overbought {
  background: rgba(239, 68, 68, 0.3);
  border-radius: 0 5px 5px 0;
}

.rsi-needle {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 16px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
  transform: translateX(-50%);
}

.pivots-table-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pivots-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.82rem;
}

.pivots-row.res .pivot-val {
  color: var(--accent-red);
}

.pivots-row.sup .pivot-val {
  color: var(--accent-green);
}

.pivots-row.pivot .pivot-val {
  color: var(--accent-blue);
  font-weight: 700;
}

.cmdty-fundamentals-card {
  margin-bottom: 24px;
}

.cmdty-drivers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.cmdty-driver-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.driver-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.driver-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.cmdty-relevant-reports {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 14px;
}

.relevant-reports-heading {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.relevant-reports-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.relevant-report-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
}

.report-pill-impact {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
}

.report-pill-impact.high {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.report-pill-impact.medium {
  background: rgba(234, 179, 8, 0.2);
  color: #facc15;
}

.report-pill-name {
  font-weight: 600;
  color: var(--text-primary);
}

.report-pill-freq {
  color: var(--text-muted);
  font-size: 0.74rem;
}

@media (max-width: 768px) {
  .cmdty-technicals-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   MARKET CALENDAR COMPONENT STYLES (Aligned with Corporate Calendar)
   ========================================================================== */

.market-calendar-container {
  width: var(--content-width);
  max-width: none;
  margin: 24px auto 64px auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.market-cal-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Badge colors matching Corporate Calendar highlight badges */
.calendar-card-badge.badge-session {
  color: #93c5fd;
}

.calendar-card-badge.badge-session-open {
  color: #86efac;
}

.calendar-card-badge.badge-closure {
  color: #f87171;
}

.calendar-card-badge.badge-early {
  color: #fcd34d;
}

.badge-type-closed {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.badge-type-early {
  background: rgba(245, 158, 11, 0.15);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Toolbar & Filter controls */
.market-cal-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.market-cal-regions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.market-region-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cal-flag-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 12px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  vertical-align: middle;
  flex-shrink: 0;
}

.cal-flag-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.market-cal-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 230px;
}

.market-cal-search-icon {
  position: absolute;
  left: 11px;
  color: var(--text-muted);
  pointer-events: none;
}

.market-cal-search-input {
  width: 100%;
  padding: 6px 28px 6px 32px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  font-size: 0.8rem;
  outline: none;
  transition: all var(--transition);
}

.market-cal-search-input:focus {
  border-color: var(--accent-blue);
  box-shadow: var(--shadow-glow);
  background: rgba(255, 255, 255, 0.05);
}

.market-cal-search-clear {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.market-cal-search-clear:hover {
  color: var(--text-primary);
}

@media (max-width: 900px) {
  .market-cal-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .market-cal-search-wrap {
    min-width: 100%;
  }
}

@media (max-width: 768px) {
  .market-calendar-container {
    padding: 16px 12px;
    border-radius: var(--radius-lg);
  }
}

/* ==========================================================================
   ESG (Environmental, Social, and Governance) Sub-Page Styles
   ========================================================================== */
.esg-dashboard-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.esg-header-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.esg-header-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
}

.esg-section-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  margin-bottom: 6px;
}

.esg-main-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 6px 0;
}

.esg-subtitle {
  font-size: 0.88rem;
  color: var(--text-secondary, var(--text-muted));
  margin: 0;
  max-width: 650px;
  line-height: 1.5;
}

.esg-header-badge-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.esg-sec-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(88, 166, 255, 0.1);
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: var(--radius-md);
  color: #58a6ff;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.esg-sec-link-btn:hover {
  background: rgba(88, 166, 255, 0.2);
  border-color: #58a6ff;
  color: #fff;
}

.esg-last-updated {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.esg-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.esg-kpi-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.esg-kpi-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.esg-kpi-card-highlight {
  border-color: rgba(16, 185, 129, 0.3);
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
}

.esg-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.esg-kpi-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.esg-kpi-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--radius-full);
}

.esg-tier-leader {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.esg-tier-low {
  background: rgba(52, 211, 153, 0.15);
  color: #34d399;
}

.esg-tier-medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

.esg-tier-high {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.esg-tier-neutral {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
}

.esg-kpi-value-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.esg-kpi-value {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--text-color);
}

.esg-kpi-max {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.esg-rating-letter {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
}

.esg-rank-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-color);
}

.esg-kpi-footer {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.esg-kpi-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.esg-risk-tier-text {
  font-size: 0.78rem;
  font-weight: 600;
}

.esg-delta-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.esg-delta-badge.is-positive {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.esg-delta-badge.is-negative {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

/* Pillars Section */
.esg-pillars-header {
  margin-top: 4px;
}

.esg-pillars-header h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-color);
}

.esg-pillars-subtext {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.esg-pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.esg-pillar-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.esg-pillar-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
}

.esg-pillar-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.esg-pillar-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.esg-pillar-icon-env {
  background: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.esg-pillar-icon-soc {
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
}

.esg-pillar-icon-gov {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

.esg-pillar-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color);
}

.esg-pillar-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.esg-pillar-score-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.esg-pillar-score {
  font-size: 1.75rem;
  font-weight: 700;
}

.esg-progress-bar-bg {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  overflow: hidden;
}

.esg-progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.esg-pillar-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--text-secondary, var(--text-muted));
}

.esg-pillar-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Charts Grid */
.esg-charts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}

.esg-chart-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.esg-chart-header {
  margin-bottom: 12px;
}

.esg-chart-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0 0 2px 0;
}

.esg-chart-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0;
}

.esg-chart-canvas {
  width: 100%;
  height: 320px;
  min-height: 320px;
}

/* Tables Section */
.esg-table-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.esg-section-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text-color);
}

.esg-section-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
}

.esg-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.esg-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.86rem;
}

.esg-table th {
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-color);
  white-space: nowrap;
}

.esg-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: var(--text-color);
  vertical-align: middle;
}

.esg-table tbody tr:last-child td {
  border-bottom: none;
}

.esg-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.esg-status-lead {
  color: #10b981;
  font-weight: 600;
  font-size: 0.78rem;
}

.esg-status-lag {
  color: #f59e0b;
  font-weight: 600;
  font-size: 0.78rem;
}

.esg-form-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
}

.esg-form-badge.is-annual {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.esg-form-badge.is-quarterly {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

.esg-table-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #58a6ff;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  transition: color 0.15s ease;
}

.esg-table-link:hover {
  color: #79c0ff;
  text-decoration: underline;
}

.esg-show-more-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  padding: 8px 20px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.esg-show-more-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Empty State */
.esg-empty-state-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.esg-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.esg-empty-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}

.esg-empty-desc {
  font-size: 0.95rem;
  color: var(--text-secondary, var(--text-muted));
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.5;
}

.esg-empty-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 480px;
  margin: 6px auto 0 auto;
}

.esg-empty-tickers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.esg-suggested-chip {
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--text-color);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.esg-suggested-chip:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .esg-header-title-row {
    flex-direction: column;
  }

  .esg-header-badge-col {
    align-items: flex-start;
    width: 100%;
  }

  .esg-charts-grid {
    grid-template-columns: 1fr;
  }

  .esg-pillars-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   EU COMPLIANCE & PRIVACY STYLING (GDPR, ePrivacy, Consumer Rights)
   ========================================================================== */

/* 1. Legal Links & Inline Consent Notices */
.legal-inline-link,
.cookie-policy-link {
  color: #38bdf8;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.legal-inline-link:hover,
.cookie-policy-link:hover {
  color: #60a5fa;
  text-decoration: underline;
}

.waitlist-consent-notice,
.auth-terms-notice {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 10px;
  line-height: 1.45;
}

/* Footer Bottom Legal Links */
.footer-bottom-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.82rem;
}

.footer-bottom-links a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition);
}

.footer-bottom-links a:hover {
  color: #38bdf8;
}

.footer-sep {
  color: rgba(255, 255, 255, 0.2);
}

.footer-inline-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-family: inherit;
  transition: color var(--transition);
}

.footer-inline-btn:hover {
  color: #38bdf8;
}

/* 2. Floating Cookie Consent Banner */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1060px;
  background: rgba(15, 17, 23, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.05);
  z-index: 100001;
  padding: 20px 24px;
  animation: cookieBannerSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cookieBannerSlideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.cookie-banner.hidden {
  display: none !important;
}

.cookie-banner-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 500px;
}

.cookie-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cookie-banner-text {
  flex: 1;
}

.cookie-banner-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 6px;
}

.cookie-banner-desc {
  font-size: 0.85rem;
  color: #a1a1aa;
  line-height: 1.5;
  margin: 0;
}

.cookie-banner-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Cookie Buttons Hierarchy - Equal Prominence for Accept & Reject per EDPB */
.cookie-btn {
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  font-family: inherit;
  border: 1px solid transparent;
}

.cookie-btn-primary {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}

.cookie-btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45);
}

.cookie-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f4f4f5;
}

.cookie-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.cookie-btn-tertiary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #a1a1aa;
}

.cookie-btn-tertiary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.22);
}

.cookie-banner-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: #71717a;
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition), background var(--transition);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .cookie-banner-close:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
  }
}

.cookie-banner-close:active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

/* 3. Detailed Cookie Preferences Modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 100005;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cookie-modal.hidden {
  display: none !important;
}

.cookie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cookie-modal-dialog {
  position: relative;
  background: #12141a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  z-index: 1;
  animation: modalFadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.cookie-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookie-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cookie-header-icon {
  color: #38bdf8;
  flex-shrink: 0;
}

.cookie-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.cookie-modal-subtitle {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.cookie-modal-close {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
}

.cookie-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.cookie-modal-body {
  padding: 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cookie-modal-intro {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 8px;
}

.cookie-category-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: border-color var(--transition);
}

.cookie-category-card:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

.cookie-category-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.cookie-category-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.cookie-category-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
}

.cookie-category-desc {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin: 0;
}

.cookie-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cookie-badge-required {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.cookie-badge-optional {
  background: rgba(161, 161, 170, 0.15);
  color: #a1a1aa;
  border: 1px solid rgba(161, 161, 170, 0.25);
}

.cookie-keys-preview {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.cookie-keys-preview code {
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 5px;
  border-radius: 4px;
  color: #38bdf8;
  font-family: var(--font-mono);
  font-size: 0.73rem;
  margin-right: 4px;
}

/* Switch Toggle Component */
.cookie-toggle-wrap {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.cookie-toggle-wrap input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.15);
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cookie-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #ffffff;
  transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.cookie-toggle-wrap input:checked + .cookie-toggle-slider {
  background-color: #3b82f6;
  border-color: #3b82f6;
}

.cookie-toggle-wrap input:checked + .cookie-toggle-slider:before {
  transform: translateX(20px);
}

.cookie-toggle-slider.disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.cookie-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cookie-modal-link {
  font-size: 0.84rem;
  color: #38bdf8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-modal-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* 4. Policy Page Viewer Layout */
.policy-page-wrapper {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 20px 80px;
}

.policy-header-bar {
  margin-bottom: 32px;
}

.policy-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.policy-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all var(--transition);
}

.policy-back-btn:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.16);
}

.policy-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.policy-brand-badge {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 4px 10px;
  border-radius: 9999px;
}

.policy-date-badge {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.policy-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.policy-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Document Selector Tabs */
.policy-nav-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 12px;
  overflow-x: auto;
  scrollbar-width: none;
}

.policy-nav-tabs::-webkit-scrollbar {
  display: none;
}

.policy-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
}

.policy-tab-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.policy-tab-link.active {
  color: #ffffff;
  background: rgba(59, 130, 246, 0.12);
  border-color: rgba(59, 130, 246, 0.3);
  font-weight: 600;
}

.policy-tab-link.active svg {
  color: #38bdf8;
}

/* Main Document Content Card */
.policy-content-card {
  background: #111319;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 40px 48px;
  box-shadow: var(--shadow-md);
}

.policy-doc-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-badge-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.policy-pill {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 9999px;
}

.pill-gdpr {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.pill-terms {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border: 1px solid rgba(168, 85, 247, 0.3);
}

.pill-cookies {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.pill-impressum {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.pill-neutral {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-muted);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.policy-title {
  font-size: 2rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin: 0 0 12px 0;
}

.policy-lead {
  font-size: 1.05rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

/* Callout Alerts */
.policy-callout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  margin-bottom: 32px;
}

.callout-accent {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.25);
}

.callout-accent .callout-icon {
  color: #38bdf8;
}

.callout-warning {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.callout-warning .callout-icon {
  color: #fbbf24;
}

.callout-neutral {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.callout-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.callout-content p {
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin: 0;
}

/* Typography & Sections */
.policy-section {
  margin-bottom: 36px;
}

.policy-section h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}

.policy-section p {
  font-size: 0.96rem;
  color: #d4d4d8;
  line-height: 1.7;
  margin-bottom: 14px;
}

.policy-list {
  padding-left: 20px;
  margin-bottom: 16px;
}

.policy-list li {
  font-size: 0.94rem;
  color: #d4d4d8;
  line-height: 1.65;
  margin-bottom: 10px;
}

.policy-list li strong {
  color: #ffffff;
}

.policy-contact-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  font-size: 0.92rem;
  color: #e4e4e7;
  line-height: 1.6;
  margin-bottom: 14px;
}

.policy-contact-box a {
  color: #38bdf8;
  text-decoration: underline;
}

.policy-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.data-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

.data-card h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.data-card p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* Policy Tables */
.policy-table-wrapper {
  overflow-x: auto;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.policy-table th {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.policy-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #d4d4d8;
  vertical-align: top;
  line-height: 1.5;
}

.policy-table tr:last-child td {
  border-bottom: none;
}

.policy-table code {
  background: rgba(0, 0, 0, 0.4);
  padding: 2px 6px;
  border-radius: 4px;
  color: #38bdf8;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* GDPR Rights Grid */
.policy-rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.right-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
}

.right-badge {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  height: fit-content;
  white-space: nowrap;
}

.right-item h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.right-item p {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

.policy-cta-box {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: var(--radius-md);
  padding: 20px 24px;
}

.policy-cta-box h4 {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
}

.policy-cta-box p {
  font-size: 0.9rem;
  color: #cbd5e1;
  line-height: 1.55;
  margin: 0;
}

.policy-inline-btn {
  background: none;
  border: none;
  color: #38bdf8;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
}

.policy-inline-btn:hover {
  color: #60a5fa;
}

/* 5. GDPR Dashboard Self-Service Tools */
.gdpr-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

.gdpr-action-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  flex-wrap: wrap;
}

.gdpr-action-card.danger-card {
  border-color: rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.03);
}

.gdpr-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.25);
  color: #38bdf8;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gdpr-action-icon.danger-icon {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.gdpr-action-info {
  flex: 1 1 300px;
}

.gdpr-action-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
}

.gdpr-action-info p {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.45;
}

.btn-gdpr-action {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f4f4f5;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-gdpr-action:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-gdpr-danger {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}

.btn-gdpr-danger:hover {
  background: #ef4444;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.35);
}

/* 6. Responsive Adjustments */
@media (max-width: 768px) {
  .cookie-banner,
  .preferences-banner {
    bottom: calc(64px + var(--sab, 0px));
    width: calc(100% - 16px);
    max-height: 85vh;
    overflow-y: auto;
    padding: 14px 16px;
    z-index: 100001;
  }

  .cookie-banner-container,
  .preferences-banner-container {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .cookie-banner-content,
  .preferences-banner-content {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex: 0 0 auto !important;
    min-height: 0 !important;
    gap: 0;
  }

  .cookie-banner-icon,
  .preferences-banner-icon {
    display: none;
  }

  .cookie-banner-text,
  .preferences-banner-text {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .cookie-banner-title,
  .preferences-banner-title {
    font-size: 0.92rem;
    margin-bottom: 4px;
  }

  .cookie-banner-desc,
  .preferences-banner-desc {
    font-size: 0.78rem;
    line-height: 1.45;
    margin: 0;
    width: 100%;
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
  }

  .cookie-banner-actions,
  .preferences-banner-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
  }

  .cookie-banner-actions .cookie-btn-tertiary,
  .preferences-banner-actions .cookie-btn-tertiary {
    grid-column: 1 / -1;
  }

  .cookie-btn {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.8rem;
    min-height: 38px;
  }

  .cookie-modal-dialog {
    max-height: 95vh;
  }

  .policy-content-card {
    padding: 24px 20px;
  }

  .policy-title {
    font-size: 1.5rem;
  }
}

body.modal-open .cookie-banner,
body.modal-open .preferences-banner,
body.modal-open .cookie-modal {
  display: none !important;
}

@media (max-width: 640px) {
  .cookie-banner,
  .preferences-banner {
    bottom: calc(62px + var(--sab, 0px));
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: calc(100% - 16px) !important;
    max-width: calc(100% - 16px) !important;
    max-height: 220px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .cookie-banner-title,
  .preferences-banner-title {
    font-size: 0.88rem;
    margin-bottom: 2px;
  }

  .cookie-banner-desc,
  .preferences-banner-desc {
    font-size: 0.74rem;
    line-height: 1.4;
    max-height: 52px;
    overflow-y: auto;
  }

  .cookie-banner-actions,
  .preferences-banner-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
  }

  .cookie-btn {
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}

/* 7. Print Stylesheet */
@media print {
  .navbar,
  .mobile-bottom-nav,
  .policy-header-bar,
  .cookie-banner,
  .cookie-modal,
  .toast-container,
  .live-status-btn {
    display: none !important;
  }

  body,
  .policy-page-wrapper,
  .policy-content-card {
    background: #ffffff !important;
    color: #000000 !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .policy-title,
  .policy-section h2,
  .callout-content h4,
  .data-card h4,
  .right-item h4 {
    color: #000000 !important;
  }

  .policy-section p,
  .policy-list li,
  .callout-content p {
    color: #333333 !important;
  }

  .policy-callout,
  .data-card,
  .right-item,
  .policy-contact-box {
    border: 1px solid #cccccc !important;
    background: #f9f9f9 !important;
  }
}

/* ==========================================================================
   VIP Early Access Onboarding & Private Beta Gate Styles
   ========================================================================== */

.access-page-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 160px);
  padding: 40px 16px;
  background-color: var(--bg-primary, #0a0a0a);
  background-image:
    radial-gradient(circle at 50% 12%, rgba(59, 130, 246, 0.1) 0%, transparent 45%),
    radial-gradient(circle at 75% 55%, rgba(16, 185, 129, 0.06) 0%, transparent 40%);
  position: relative;
}

.access-card {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #111827 0%, #0c101d 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.8), 0 0 40px rgba(59, 130, 246, 0.08);
  padding: 36px 32px;
  text-align: center;
  animation: fadeIn 350ms ease-out forwards;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.access-brand-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.access-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: opacity 0.2s ease;
}

.access-brand-link:hover {
  opacity: 0.9;
}

.access-brand-link .brand-accent {
  color: #10b981;
}

.vip-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 9999px;
  color: #34d399;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.vip-pill-badge.blue {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

.vip-pill-badge .badge-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px #10b981;
  animation: badgePulse 2s infinite ease-in-out;
}

.access-title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin-bottom: 8px;
  line-height: 1.25;
}

.access-subtitle {
  font-size: 0.92rem;
  color: #94a3b8;
  line-height: 1.55;
  margin-bottom: 24px;
}

.access-info-box {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  text-align: left;
}

.access-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.86rem;
  padding: 6px 0;
}

.access-info-row:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.access-info-label {
  color: #94a3b8;
}

.access-info-val {
  color: #f1f5f9;
  font-weight: 600;
}

.access-info-val.highlight {
  color: #34d399;
  font-weight: 700;
}

.verified-pill {
  position: absolute;
  right: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.access-loading-state {
  padding: 32px 16px;
}

.access-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(16, 185, 129, 0.15);
  border-top-color: #10b981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 20px;
}

.access-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  margin-bottom: 16px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #10b981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
}

.access-icon-badge.error {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #f87171;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.15);
}

.access-icon-badge.success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.4);
  color: #34d399;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.2);
}

.access-manual-form {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  text-align: left;
}

.access-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.access-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  text-decoration: none;
}

.access-btn.primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.access-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
}

.access-btn.primary:active:not(:disabled) {
  transform: translateY(0);
}

.access-btn.primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.access-btn.secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.access-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.access-btn.full-width {
  width: 100%;
}

.access-btn.primary.pulse {
  animation: pulseBtn 2s infinite ease-in-out;
}

@keyframes pulseBtn {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.access-footer-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #94a3b8;
  margin-top: 16px;
}

.access-link-btn {
  color: #38bdf8;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s ease;
}

.access-link-btn:hover {
  color: #7dd3fc;
  text-decoration: underline;
}

.access-features-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.feature-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: #cbd5e1;
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.feature-chip:hover {
  border-color: rgba(16, 185, 129, 0.25);
  background: rgba(16, 185, 129, 0.04);
}

.feature-chip-icon {
  color: #34d399;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ==========================================================================
   Selection Bar Scroll Arrows (Mobile & Overflow Navigation)
   ========================================================================== */

.selection-bar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  isolation: isolate;
  gap: 6px;
  box-sizing: border-box;
}

.selection-bar-wrapper:not(.has-scrollable-content) {
  gap: 0;
}

/* Pill bar wrappers: hug items and close after the last item */
.selection-bar-wrapper.date-range-buttons-wrapper,
.selection-bar-wrapper.pill-bar-wrapper,
.selection-bar-wrapper.fin-sheet-tabs-wrapper,
.selection-bar-wrapper.fin-period-tabs-wrapper,
.selection-bar-wrapper.etf-subtab-group-wrapper,
.selection-bar-wrapper.holders-tab-group-wrapper,
.selection-bar-wrapper.earn-call-tabs-wrapper,
.selection-bar-wrapper:has(> .date-range-buttons),
.selection-bar-wrapper:has(> .fin-sheet-tabs),
.selection-bar-wrapper:has(> .fin-period-tabs),
.selection-bar-wrapper:has(> .etf-subtab-group),
.selection-bar-wrapper:has(> .holders-tab-group),
.selection-bar-wrapper:has(> .earn-call-tabs) {
  width: fit-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.selection-bar-wrapper > .selection-bar-scrollable {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: flex-start !important;
}

/* When not overflowing, pill bar scrollable tracks strictly fit their content */
.selection-bar-wrapper:not(.has-scrollable-content) > .selection-bar-scrollable.date-range-buttons,
.selection-bar-wrapper:not(.has-scrollable-content).date-range-buttons-wrapper > .selection-bar-scrollable,
.selection-bar-wrapper:not(.has-scrollable-content).pill-bar-wrapper > .selection-bar-scrollable,
.selection-bar-wrapper:not(.has-scrollable-content).fin-sheet-tabs-wrapper > .selection-bar-scrollable,
.selection-bar-wrapper:not(.has-scrollable-content).fin-period-tabs-wrapper > .selection-bar-scrollable,
.selection-bar-wrapper:not(.has-scrollable-content).etf-subtab-group-wrapper > .selection-bar-scrollable,
.selection-bar-wrapper:not(.has-scrollable-content).holders-tab-group-wrapper > .selection-bar-scrollable,
.selection-bar-wrapper:not(.has-scrollable-content):has(> .date-range-buttons) > .selection-bar-scrollable,
.date-range-buttons.selection-bar-scrollable {
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
}

/* When overflowing content activates navigation arrows, allow the track to expand between arrows */
.selection-bar-wrapper.has-scrollable-content.date-range-buttons-wrapper,
.selection-bar-wrapper.has-scrollable-content.pill-bar-wrapper,
.selection-bar-wrapper.has-scrollable-content:has(> .date-range-buttons) {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}

.selection-bar-wrapper.has-scrollable-content.date-range-buttons-wrapper > .selection-bar-scrollable,
.selection-bar-wrapper.has-scrollable-content.pill-bar-wrapper > .selection-bar-scrollable,
.selection-bar-wrapper.has-scrollable-content:has(> .date-range-buttons) > .selection-bar-scrollable {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
}

.selection-bar-wrapper > .selection-bar-scrollable::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Ensure child elements in scrollable bar don't squeeze or wrap */
.selection-bar-wrapper > .selection-bar-scrollable > * {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

/* Navigation Arrow Buttons - positioned outside scroll track so they NEVER overlap text */
.selection-bar-arrow {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 1;
  background-color: var(--bg-card, #121212);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.15));
  border-radius: var(--radius-sm, 8px);
  color: var(--text-primary, #f8fafc);
  cursor: pointer;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.15s ease,
              border-color 0.15s ease,
              color 0.15s ease,
              transform 0.12s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  padding: 0;
  margin: 0;
  outline: none;
  z-index: 2;
}

/* Hide arrows when container has no scrollable overflow */
.selection-bar-wrapper:not(.has-scrollable-content) > .selection-bar-arrow {
  display: none !important;
}

/* Hide left arrow when at start (cannot scroll left) so tab text aligns cleanly with edge */
.selection-bar-arrow-left:disabled,
.selection-bar-arrow-left[aria-disabled="true"],
.selection-bar-wrapper:not(.has-scroll-left) > .selection-bar-arrow-left {
  display: none !important;
}

/* Disabled state when at start or end of scroll */
.selection-bar-arrow:disabled,
.selection-bar-arrow[aria-disabled="true"] {
  opacity: 0.22;
  cursor: default;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: var(--text-muted, #71717a);
}

.selection-bar-arrow:not(:disabled):hover {
  background-color: var(--bg-tertiary, #1a1a1a);
  border-color: var(--border-color-hover, rgba(255, 255, 255, 0.3));
  color: #ffffff;
}

.selection-bar-arrow:not(:disabled):active {
  transform: scale(0.92);
}

.selection-bar-arrow:focus-visible {
  border-color: var(--accent-blue, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.35);
}

.selection-bar-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
  margin: auto;
}

/* Expanded touch target for thumb tapping on mobile */
.selection-bar-arrow::after {
  content: '';
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -6px;
  right: -6px;
}

/* Stock tabs wrapper arrows match exact 32px height and vertical alignment */
.stock-tabs-wrapper .selection-bar-arrow {
  width: 32px;
  height: 32px;
}

/* Pairs tabs wrapper for Forex and ETF quick bars */
.pairs-tabs-wrapper {
  flex: 1 1 320px;
  min-width: 0;
  max-width: 100%;
}

.pairs-tabs-wrapper .selection-bar-arrow {
  width: 32px;
  height: 32px;
  align-self: center;
}

/* ==========================================================================
   Crypto Hub & Token Detail Styles (Financial Modeling Prep Data Integration)
   ========================================================================== */

.color-pos {
  color: var(--accent-green, #22c55e) !important;
}

.color-neg {
  color: var(--accent-red, #ef4444) !important;
}

.color-blue {
  color: var(--accent-blue, #38bdf8) !important;
}

.py-6 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.card-subtitle,
.cmdty-spreads-header .subtitle,
.cmdty-calendar-header .subtitle {
  font-size: 0.82rem;
  color: var(--text-muted, #94a3b8);
  margin: 0;
  line-height: 1.4;
}

.chart-legend-ticker {
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary, #94a3b8);
}

.crypto-global-telemetry-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

@media (max-width: 1180px) {
  .crypto-global-telemetry-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .crypto-global-telemetry-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px;
    margin-bottom: 16px;
  }
  .crypto-telemetry-card {
    padding: 10px 10px;
    gap: 6px;
  }
  .telemetry-label {
    font-size: 0.62rem;
  }
  .telemetry-badge {
    font-size: 0.62rem;
    padding: 1px 5px;
  }
  .telemetry-value {
    font-size: 1.15rem;
  }
  .telemetry-secondary-val {
    font-size: 0.88rem;
  }
  .telemetry-mini-spark {
    width: 54px;
    height: 18px;
  }
  .telemetry-sub {
    font-size: 0.63rem;
    gap: 4px;
  }
  .net-pill {
    font-size: 0.62rem;
    padding: 2px 4px;
  }
}

.crypto-telemetry-card {
  container-type: inline-size;
  min-width: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035) 0%, rgba(18, 18, 18, 0.95) 100%);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.09));
  border-radius: var(--radius-md, 10px);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.crypto-telemetry-card:hover {
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.telemetry-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.telemetry-label,
.crypto-telemetry-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  color: var(--text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.telemetry-value-row,
.crypto-telemetry-value-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  min-width: 0;
}

.telemetry-value,
.crypto-telemetry-value {
  font-size: 1.32rem;
  font-weight: 700;
  color: var(--text-primary, #f8fafc);
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
}

.telemetry-secondary-val {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.telemetry-unit-tag {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  letter-spacing: 0.02em;
}

.telemetry-mini-spark {
  flex-shrink: 0;
  display: block;
  overflow: visible;
}

.telemetry-badge,
.crypto-telemetry-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

.telemetry-badge.pos {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.telemetry-badge.neg {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.telemetry-badge.neutral,
.crypto-telemetry-pill {
  background: rgba(99, 102, 241, 0.16);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.32);
}

.telemetry-sub-inline {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-secondary, #cbd5e1);
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 6px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

.telemetry-sub,
.crypto-telemetry-sub {
  font-size: 0.7rem;
  color: var(--text-muted, #94a3b8);
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 0;
}

.telemetry-sub.flex-between {
  justify-content: space-between;
}

.telemetry-sub strong {
  color: var(--text-primary, #f8fafc);
  font-family: var(--font-mono);
  font-weight: 600;
}

.crypto-dominance-bar {
  display: flex;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  gap: 2px;
}

.dom-seg,
.crypto-dom-seg {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 2px;
}

.dom-seg.mcap-core {
  background: linear-gradient(90deg, #22c55e, #10b981);
}

.dom-seg.btc,
.crypto-dom-seg.btc {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.dom-seg.eth,
.crypto-dom-seg.eth {
  background: linear-gradient(90deg, #6366f1, #818cf8);
}

.dom-seg.alts,
.dom-seg.sol,
.crypto-dom-seg.sol,
.crypto-dom-seg.others {
  background: linear-gradient(90deg, #14b8a6, #38bdf8);
}

.dom-seg.cex {
  background: linear-gradient(90deg, #4f46e5, #6366f1);
}

.dom-seg.dex {
  background: linear-gradient(90deg, #0ea5e9, #38bdf8);
}

.dom-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.dom-dot.btc {
  background: #f59e0b;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.55);
}

.dom-dot.eth {
  background: #6366f1;
  box-shadow: 0 0 6px rgba(99, 102, 241, 0.55);
}

.dom-dot.alts {
  background: #14b8a6;
  box-shadow: 0 0 6px rgba(20, 184, 166, 0.55);
}

.dom-dot.cex {
  background: #6366f1;
}

.dom-dot.dex {
  background: #38bdf8;
}

.telemetry-network-pills {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 6px;
  min-height: 28px;
}

.net-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.7rem;
  color: var(--text-secondary, #cbd5e1);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.net-pill strong {
  color: var(--text-primary, #f8fafc);
  font-weight: 700;
}

.net-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

@container (max-width: 245px) {
  .telemetry-label {
    font-size: 0.63rem;
    letter-spacing: 0.02em;
  }
  .telemetry-badge {
    font-size: 0.63rem;
    padding: 1px 6px;
  }
  .telemetry-value {
    font-size: 1.16rem;
  }
  .telemetry-secondary-val {
    font-size: 0.9rem;
  }
  .telemetry-mini-spark {
    width: 60px;
    height: 20px;
  }
  .net-pill {
    font-size: 0.64rem;
    padding: 3px 4px;
  }
  .telemetry-sub {
    font-size: 0.65rem;
  }
}

.net-dot.eth {
  background: #818cf8;
  box-shadow: 0 0 5px #818cf8;
}

.net-dot.sol {
  background: #2dd4bf;
  box-shadow: 0 0 5px #2dd4bf;
}

.telemetry-fg-bar {
  position: relative;
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef4444 0%, #f59e0b 45%, #22c55e 100%);
  margin: 2px 0;
}

.telemetry-fg-needle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #121212;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
}

.crypto-rank-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 7px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(99, 102, 241, 0.16);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.3);
}

.cmdty-detail-hero.crypto-detail-hero {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 24px;
}

.crypto-hero-badges-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.crypto-hero-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.crypto-hero-logo-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  display: block;
}

.crypto-hero-avatar svg {
  display: block;
  border-radius: 50%;
}

.crypto-inline-ticker {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-muted, #94a3b8);
  vertical-align: middle;
}

.crypto-supply-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.crypto-supply-mini-bar {
  width: 68px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-left: auto;
  margin-top: 4px;
}

.crypto-supply-mini-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6366f1, #38bdf8);
}

/* Badges for Search & Watchlist */
.search-type-tag.type-crypto,
.company-badge.badge-crypto,
.wl-type-tag.wl-type-crypto {
  background: rgba(99, 102, 241, 0.16);
  color: #a5b4fc;
  border: 1px solid rgba(99, 102, 241, 0.32);
}

/* Responsive Data Table with Container Queries & Sticky Headers (modern-web-guidance: responsive-table) */
.crypto-table-container {
  container-type: inline-size;
  overflow-x: auto;
  max-height: 760px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.crypto-matrix-table thead {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  background: var(--bg-card, #121212);
}

.crypto-matrix-table tbody th.crypto-sticky-row-header,
.crypto-matrix-table tbody th.crypto-sticky-asset-col {
  position: sticky;
  inset-inline-start: 0;
  z-index: 2;
  background: var(--bg-card, #121212);
  text-align: left;
  font-weight: 600;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.25);
}

.crypto-matrix-table tbody tr:hover th.crypto-sticky-row-header,
.crypto-matrix-table tbody tr:hover th.crypto-sticky-asset-col {
  background: var(--bg-tertiary, #1a1a1a);
}

@container (max-width: 720px) {
  .crypto-matrix-table th,
  .crypto-matrix-table td {
    padding: 9px 10px;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   Crypto Matrix Table (Native SearchFin UI/UX Architecture)
   Follows modern-web-guidance: responsive-table, branded-select-styling
   ========================================================================== */

/* Universal Screen Reader Only Utility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.crypto-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.crypto-matrix-select {
  appearance: base-select;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 8px 34px 8px 12px;
  height: 38px;
  cursor: pointer;
  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='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color var(--transition);
}

.crypto-matrix-select:focus-visible {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.crypto-matrix-select option {
  background-color: var(--bg-card);
  color: var(--text-primary);
}

.crypto-table-container {
  container-type: inline-size;
  overflow-x: auto;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.crypto-matrix-table th.col-rank,
.crypto-matrix-table td.col-rank {
  width: 44px;
  padding-left: 18px;
  text-align: left;
}

.crypto-matrix-table th.col-asset,
.crypto-matrix-table td.col-asset {
  min-width: 180px;
}

.crypto-table-cell-asset {
  display: flex;
  align-items: center;
  gap: 12px;
}

.crypto-logo-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}

.crypto-coin-svg {
  display: block;
  border-radius: 50%;
  flex-shrink: 0;
}

.crypto-meta-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.crypto-sub-name {
  font-weight: 400;
  font-size: 0.8rem;
  margin-left: 6px;
  color: var(--text-muted);
}

.crypto-matrix-table th.sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--transition), background-color var(--transition);
}

.crypto-matrix-table th.sortable:hover {
  color: var(--text-primary);
}

.crypto-matrix-table th.active-sort {
  color: var(--accent-blue);
  box-shadow: inset 0 -2px 0 var(--accent-blue);
  background: rgba(59, 130, 246, 0.05);
}

.crypto-sort-arrow {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.75rem;
  color: var(--accent-blue);
}

.crypto-matrix-table tbody tr.crypto-row {
  cursor: pointer;
  transition: background var(--transition);
}

.crypto-matrix-table tbody tr.crypto-row:hover td {
  background: var(--bg-tertiary);
}

.crypto-zero-sub {
  font-size: 0.65em;
  vertical-align: sub;
  line-height: 0;
  font-weight: 700;
  opacity: 0.85;
}

@container (max-width: 600px) {
  .crypto-controls-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .commodity-table-search {
    width: 100%;
  }
  .crypto-matrix-select {
    width: 100%;
  }
  .crypto-matrix-table th,
  .crypto-matrix-table td {
    padding: 9px 10px;
    font-size: 0.8rem;
  }
}

/* ==========================================================================
   Crypto Markets & Liquidity Depth Table (Native Crypto Hub Architecture)
   ========================================================================== */
.crypto-markets-section-wrap {
  margin-top: 36px;
  margin-bottom: 24px;
}

.crypto-markets-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.crypto-markets-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.crypto-markets-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}

.hub-markets-token-selector {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.hub-token-pill {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.hub-token-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.hub-token-pill.active {
  background: var(--accent-blue);
  color: #fff;
}

.crypto-markets-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.crypto-markets-pill-group {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 2px;
}

.crypto-markets-filter-pill {
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.crypto-markets-filter-pill:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.crypto-markets-filter-pill.active {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.crypto-markets-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.crypto-markets-filters-btn:hover {
  color: var(--text-primary);
  border-color: var(--border-color-hover);
  background: rgba(255, 255, 255, 0.08);
}

.crypto-markets-filters-btn.active {
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

.crypto-markets-filter-panel {
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.crypto-markets-filter-panel.hidden {
  display: none;
}

.markets-search-input {
  width: 100%;
  max-width: 380px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  font-size: 0.82rem;
  color: var(--text-primary);
  outline: none;
  font-family: var(--font-sans);
}

.markets-search-input:focus {
  border-color: var(--accent-blue);
}

/* Inherits .commodity-matrix-table and .crypto-matrix-table directly */
.crypto-markets-matrix-table {
  min-width: 820px;
}

.crypto-markets-matrix-table th {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.crypto-markets-matrix-table th.col-rank,
.crypto-markets-matrix-table td.col-rank {
  width: 44px;
  padding-left: 18px;
  text-align: left;
}

.crypto-markets-matrix-table td {
  font-size: 0.88rem;
}

.exchange-logo {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.exchange-name {
  font-weight: 600;
  color: var(--text-primary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pair-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-blue);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
  white-space: nowrap;
}

.pair-link:hover {
  color: var(--accent-blue-hover);
  text-decoration: underline;
}

.depth-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  font-size: 0.78rem;
  color: #cbd5e1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.volume-badge {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 9999px;
  font-size: 0.78rem;
  color: var(--accent-green);
  white-space: nowrap;
}

.liquidity-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.info-tip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: help;
}

.info-tip-wrap svg {
  opacity: 0.7;
}

@media (max-width: 900px) {
  .crypto-markets-controls-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .crypto-markets-controls {
    justify-content: flex-start;
  }
}