/* ============================================================================
   FUND DETAIL — page-scoped (2026-05-01 reset).
   Consolidates legacy fundbenchmark.css §2-7 + §10/10B + 3 dedicated
   redesign files into one fb-app/fund-detail.css.
   Header / footer / dark-light / form styling are NOT included here —
   those live in fb-app/header.css, fb-app/footer.css, fb-app/tokens.css
   and fb-app/primitives.css respectively.
   ============================================================================ */

/* ── §2-7: Fund Detail core (chart / panels / news / competitor pills) ── */
   SECTION 2: FUND DETAIL STYLES (from page-fund-detail.php)
   Updated: 2026-02-05
   ============================================================================ */
/* ========================================
   FD - FUND DETAIL STYLES
   Using fd- prefix per naming convention
======================================== */
:root {
  --fd-obsidian: #0a0a0b;
  --fd-charcoal: #141416;
  --fd-graphite: #1c1c1f;
  --fd-slate: #2a2a2f;
  --fd-pewter: #8e8e9a;
  --fd-silver: #bdbdca;
  --fd-platinum: #c4c4cc;
  --fd-ivory: #f4f4f6;
  --fd-white: #ffffff;
  --fd-gold: #c9a962;
  --fd-gold-light: #e4d4a4;
  --fd-gold-dark: #a68b3d;
  --fd-success: #77DB89;
  --fd-error: #f87171;
  --fd-blue: #60a5fa;
  --fd-purple: #a78bfa;
  --fd-pink: #f472b6;
  --fd-orange: #fb923c;
  --fd-cyan: #22d3ee;
  --fd-lime: #a3e635;
  
  --fd-font-display: var(--fb-font-display);
  --fd-font-body: var(--fb-font-body);
  
  /* Salient theme font integration */
  /* Salient theme heading font - injected via wp_add_inline_style */
  
  --fd-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --fd-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --fd-sidebar-width: 340px;
  --fd-header-height: 72px;
}

/* Reset for fund detail page */
.fd-page {
  font-family: var(--fb-font-body);
  background: var(--fd-charcoal);
  color: var(--fd-ivory);
  line-height: 1.5;
  min-height: 100vh;
}

.fd-page * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ========================================
   GLOBAL NAVIGATION
======================================== */
.fd-global-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--fd-header-height);
  background: rgba(20, 20, 22, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--fd-slate);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  z-index: 1000;
}

.fd-nav-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.fd-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.fd-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--fd-gold), var(--fd-gold-dark));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-logo-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--fd-obsidian);
  stroke-width: 2;
  fill: none;
}

.fd-logo-text {
  font-family: var(--fb-font-display);
  font-size: 22px;
  color: var(--fd-ivory);
}

.fd-logo-text span {
  color: var(--fd-gold);
}

.fd-nav-links {
  display: flex;
  gap: 8px;
}

.fd-nav-link {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fd-silver);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.fd-nav-link:hover {
  color: var(--fd-ivory);
  background: var(--fd-slate);
}

.fd-nav-link.active {
  color: var(--fd-gold);
  background: rgba(201, 169, 98, 0.1);
}

.fd-nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fd-nav-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--fd-slate);
  border: 1px solid var(--fd-pewter);
  border-radius: 10px;
  width: 280px;
  transition: all 0.2s ease;
}

.fd-nav-search:focus-within {
  border-color: var(--fd-gold);
}

.fd-nav-search svg {
  width: 18px;
  height: 18px;
  stroke: var(--fd-silver);
  stroke-width: 2;
  fill: none;
}

.fd-nav-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--fd-ivory);
  font-family: var(--fb-font-body);
}

.fd-nav-search input::placeholder {
  color: var(--fd-pewter);
}

.fd-nav-search kbd {
  padding: 4px 8px;
  background: var(--fd-graphite);
  border-radius: 4px;
  font-size: 11px;
  color: var(--fd-silver);
  font-family: var(--fb-font-body);
}

.fd-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--fd-slate), var(--fd-pewter));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-ivory);
  cursor: pointer;
}

/* ========================================
   MAIN LAYOUT
======================================== */
.fd-main-layout {
  display: grid;
  grid-template-columns: var(--fd-sidebar-width) 1fr var(--fd-sidebar-width);
  gap: 24px;
  padding: 24px 32px 60px;
  max-width: 1920px;
  margin: 0 auto;
}

.fd-sidebar-left,
.fd-sidebar-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: sticky;
  top: calc(var(--fd-header-height) + 32px);
  height: fit-content;
}

.fd-main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ========================================
   CARDS
======================================== */
.fd-card {
  background: var(--fd-graphite);
  border-radius: 20px;
  border: 1px solid var(--fd-slate);
}

/* Fund Header Card */
.fd-fund-header-card {
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.fd-fund-header-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(180deg, rgba(201, 169, 98, 0.08), transparent);
  pointer-events: none;
}

.fd-fund-header-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
  position: relative;
}

.fd-fund-logo {
  display: none;
}

.fd-header-actions {
  display: flex;
  gap: 8px;
}

.fd-action-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--fd-slate);
  border: 1px solid var(--fd-pewter);
  /* Paths inside use fill="currentColor" — set it explicitly here so the
     icon renders in dark mode. Without this the colour inherited from
     Salient's body was an unset/transparent value on some themes. */
  color: var(--fd-platinum);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fd-action-btn:hover {
  background: var(--fd-pewter);
}

.fd-action-btn.active {
  background: var(--fd-gold);
  border-color: var(--fd-gold);
}

.fd-action-btn.active svg {
  stroke: var(--fd-obsidian);
}

.fd-action-btn svg {
  width: 22px;
  height: 22px;
  stroke: var(--fd-platinum);
  stroke-width: 2;
  fill: none;
}
/* Watch button uses a filled icon (noun-infographics-7649295) */
#fdWatchBtn svg {
  fill: var(--fd-platinum);
  stroke: none;
  stroke-width: 0;
}
#fdWatchBtn.active svg {
  fill: var(--fd-obsidian);
}

/* Fund name inherits from Salient theme's heading font settings */
.fd-fund-name {
  font-family: var(--fb-font-display);
  font-size: 28px;
  color: var(--fd-ivory);
  margin-bottom: 10px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* Sidebar variant (2026-04-22, font corrected 2026-04-24): fund name in
   the top-left identity card. Uses the body sans font (DM Sans) — the
   display serif was too literary for numeric / financial UI. */
.fd-sidebar-fund-name {
  font-family: var(--fb-font-body);
  font-size: 22px;
  color: var(--fd-ivory);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 14px 0;
  word-break: break-word;
}
[data-theme="light"] .fd-sidebar-fund-name { color: rgba(0,0,0,0.9); }

/* Fund title row: name on the left, time periods on the right */
.fd-fund-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fd-fund-title-row .fd-fund-name {
  font-size: 22px;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}

/* Investment Approach section */
.fd-objective-section {
  margin-bottom: 16px;
}
.fd-objective-section .fd-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fd-silver);
  margin-bottom: 8px;
}
.fd-fund-objective {
  font-size: 13px;
  color: var(--fd-silver);
  line-height: 1.6;
  max-height: 80px;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin: 0;
}
.fd-fund-objective.expanded {
  max-height: 600px;
}
.fd-objective-expand {
  background: none;
  border: none;
  color: var(--fd-gold);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-top: 4px;
  transition: opacity 0.2s ease;
}
.fd-objective-expand:hover {
  opacity: 0.8;
}

.fd-fund-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;         /* flush-bottom alignment for mixed <a>/<span> children */
  gap: 8px;
}

/* <a> wrappers for asset-class badges — make them a no-op layout wrapper
   so the inner <span.fd-meta-tag> renders with identical height/baseline to
   the bare-<span> badges (Passive, Global, etc.). */
.fd-meta-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none !important;
  line-height: 1;
  color: inherit;
}
.fd-meta-link:hover { text-decoration: none !important; }

.fd-meta-tag {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 100px;
  background: var(--fd-slate);
  color: var(--fd-platinum);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fd-meta-tag:hover {
  background: var(--fd-pewter);
}

.fd-meta-tag.category {
  background: rgba(201, 169, 98, 0.15);
  color: var(--fd-gold);
  border: 1px solid rgba(201, 169, 98, 0.3);
}

/* Fund detail badge variants — matching fund finder badge colors */
.fd-meta-strategy {
  background: rgba(156, 163, 175, 0.12);
  color: var(--fd-platinum);
  border: 1px solid rgba(156, 163, 175, 0.15);
}
.fd-meta-asset {
  background: rgba(201, 169, 98, 0.15);
  color: var(--fd-gold);
  border: 1px solid rgba(201, 169, 98, 0.2);
}
.fd-meta-region {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.2);
}
.fd-meta-style {
  background: rgba(74, 222, 128, 0.15);
  color: #77DB89;
  border: 1px solid rgba(74, 222, 128, 0.2);
}
.fd-meta-esg {
  background: rgba(34, 197, 94, 0.15);
  color: #77DB89;
  border: 1px solid rgba(34, 197, 94, 0.25);
}
.fd-meta-sfdr {
  background: rgba(96, 165, 250, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.25);
}
.fd-meta-other {
  background: rgba(156, 163, 175, 0.15);
  color: var(--fd-silver);
  border: 1px solid rgba(156, 163, 175, 0.15);
}

/* Section Title */
.fd-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fd-silver);
}

/* Info Card */
.fd-info-card-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--fd-slate);
}

.fd-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid var(--fd-slate);
  transition: background 0.2s ease;
  min-height: 44px;
  gap: 12px;
}

.fd-info-row:last-child {
  border-bottom: none;
}

.fd-info-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.fd-info-label {
  font-size: 13px;
  color: var(--fd-silver);
  flex-shrink: 0;
}

.fd-info-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--fd-ivory);
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}

.fd-info-value.clickable {
  color: var(--fd-gold);
  cursor: pointer;
}

.fd-info-value.clickable:hover {
  text-decoration: underline;
}

.fd-info-value svg {
  width: 14px;
  height: 14px;
  stroke: var(--fd-gold);
  stroke-width: 2;
  fill: none;
}

.fd-info-value.highlight {
  color: var(--fd-gold);
  font-weight: 600;
}

/* ========================================
   PERFORMANCE CARD
======================================== */
.fd-performance-card {
  padding: 20px;
}

.fd-perf-header {
  display: flex;
  align-items: flex-start;  /* top-align so stats + date-stack share a baseline */
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 24px;
}

/* .fd-perf-header-left — toolbar moved to .fd-chart-toolbar in controls bar */

/* ── Icon Toolbar System ── */
.fd-chart-toggle {
  display: flex;
  gap: 6px;
}

/* Dark-mode default (2026-04-22): icons ride in GOLD on a dark slate chip.
   Active state swaps to a solid-gold chip with a WHITE icon for high-contrast
   "this view is selected" affordance. Light mode overrides live at the
   bottom of this block. */
.fd-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  color: var(--fd-gold);
  background: var(--fd-slate);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fd-toggle-btn:hover {
  color: var(--fd-gold);
  background: var(--fd-pewter);
}
.fd-toggle-btn.active {
  background: var(--fd-gold);
  color: #ffffff;
  border-color: var(--fd-gold);
  box-shadow: 0 0 10px rgba(201, 169, 98, 0.3);
}
[data-theme="light"] .fd-toggle-btn {
  color: var(--fd-gold);
  background: transparent;
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .fd-toggle-btn:hover {
  background: rgba(201, 169, 98, 0.10);
  border-color: rgba(201, 169, 98, 0.35);
}
[data-theme="light"] .fd-toggle-btn.active {
  background: var(--fd-gold);
  color: #ffffff;
  border-color: var(--fd-gold);
}
.fd-toggle-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* ── Toolbar divider ── */
.fd-toolbar-divider {
  width: 1px;
  height: 24px;
  background: var(--fd-pewter, #4a4a52);
  margin: 0 6px;
  opacity: 0.5;
}

/* ── Overlay toggle buttons (News / Macro / AI) ── */
.fd-overlay-toggles {
  display: flex;
  gap: 6px;
}
.fd-overlay-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 10px;
  color: var(--fd-gold);
  background: var(--fd-slate);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fd-overlay-btn:hover {
  color: var(--fd-gold);
  background: var(--fd-pewter);
}
[data-theme="light"] .fd-overlay-btn {
  color: var(--fd-gold);
  background: transparent;
  border-color: rgba(0, 0, 0, 0.10);
}
[data-theme="light"] .fd-overlay-btn:hover {
  background: rgba(201, 169, 98, 0.10);
  border-color: rgba(201, 169, 98, 0.35);
}
.fd-overlay-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

/* Active states: solid gold chip + white icon for news/macro so the "on"
   state is unambiguous. Macro keeps the green indicator subtle via border
   glow rather than changing the chip colour, so News vs Macro remain
   visually distinguishable when both are on. */
.fd-overlay-btn.active[data-pin-type="news"] {
  background: var(--fd-gold);
  color: #ffffff;
  border-color: var(--fd-gold);
  box-shadow: 0 0 10px rgba(201, 169, 98, 0.3);
}
.fd-overlay-btn.active[data-pin-type="macro"] {
  background: var(--fd-gold);
  color: #ffffff;
  border-color: var(--fd-gold);
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.35);
}

/* AI overlay button */
.fd-overlay-btn-ai .fd-overlay-icon {
  color: #9a9aa4;
  transition: color 0.3s ease;
  width: 34px;
  height: 34px;
}
.fd-overlay-btn-ai:hover .fd-overlay-icon {
  color: #c084fc;
}
.fd-overlay-btn-ai.active {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
  border-color: rgba(168, 85, 247, 0.3);
}
.fd-overlay-btn-ai.active .fd-overlay-icon {
  color: #c084fc;
}
.fd-overlay-btn-ai.loading {
  pointer-events: none;
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.2);
}
.fd-overlay-btn-ai.loading .fd-overlay-icon,
.fd-overlay-btn-ai.loading .fd-ai-icon {
  animation: fd-ai-spin 1s linear infinite;
  color: #c084fc;
}
/* When custom animated SVG is swapped in, disable the spin */
.fd-overlay-btn-ai.loading .fd-ai-loading-anim {
  animation: none;
}
.fd-overlay-btn-ai.error {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}
.fd-overlay-btn-ai.error .fd-overlay-icon {
  color: #f87171;
}

/* Pin count badge on overlay buttons */
.fd-overlay-btn .fd-pin-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.fd-overlay-btn[data-pin-type="news"] .fd-pin-count {
  background: var(--fd-gold);
}
.fd-overlay-btn[data-pin-type="macro"] .fd-pin-count {
  background: #77DB89;
}

/* ── Tooltip system for icon buttons ── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--fd-ivory, #f4f4f6);
  background: var(--fd-graphite, #1c1c1f);
  border: 1px solid var(--fd-pewter, #4a4a52);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  width: 200px;
  white-space: normal;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
[data-tooltip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--fd-pewter, #4a4a52);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 101;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
[data-tooltip]:hover::before {
  opacity: 1;
}

/* Responsive: compact toolbar on narrow screens */
@media (max-width: 680px) {
  .fd-chart-controls-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .fd-chart-toolbar {
    width: 100%;
    justify-content: flex-start;
  }
  .fd-toggle-btn,
  .fd-overlay-btn,
  .fd-add-competitor-btn {
    width: 36px;
    height: 36px;
  }
  .fd-toggle-icon,
  .fd-overlay-icon {
    width: 22px;
    height: 22px;
  }
  .fd-time-periods {
    justify-content: flex-start;
  }
  .fd-period-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
  /* Hide tooltips on touch */
  [data-tooltip]::after,
  [data-tooltip]::before {
    display: none;
  }
}

.fd-time-periods {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;
}

.fd-period-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-silver);
  background: transparent;
  border: 1px solid var(--fd-slate);
  cursor: pointer;
  font-family: var(--fb-font-body);
  transition: all 0.2s ease;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.fd-period-btn.active {
  background: var(--fd-gold);
  color: var(--fd-obsidian);
  border-color: var(--fd-gold);
  font-weight: 700;
  box-shadow: 0 0 12px rgba(201, 169, 98, 0.35);
}

.fd-period-btn:hover:not(.active) {
  background: var(--fd-slate);
  color: var(--fd-platinum);
}

/* Legacy toggle classes (kept for backwards compat) */

/* Performance KPI strip (2026-04-24 redesign):
   - PRIMARY: single big headline return at a time, rendered as a vertical
     carousel. Active period shown huge + bold; next period peeks below at
     low opacity; clicking the peek cycles to it. User moves through
     1M → 3M → 1Y → 5Y manually.
   - SECONDARY: three compact companion metrics (OCF / Volatility / Sharpe)
     in a centered flex row under a subtle gold divider.
   All typography uses the body sans (DM Sans) — the display serif was
   too literary for financial UI. */
.fd-perf-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0;
  background: transparent;
  border: none;
  flex: 1 1 auto;
  min-width: 0;
}

/* ── Hero carousel ──────────────────────────────────────────────────── */
.fd-hero-carousel {
  position: relative;
  height: 108px;  /* big number 56px + label 16px + peek room */
  overflow: hidden;
  cursor: default;
  user-select: none;
}
.fd-hero-item {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: left top;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Active: full size, anchored at top, opaque. */
.fd-hero-item[data-state="active"] {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
/* Peek: shrunk + dim, sitting below the active one, clickable so the user
   can advance the carousel by clicking their next preview. */
.fd-hero-item[data-state="peek"] {
  opacity: 0.28;
  transform: translateY(72px) scale(0.42);
  pointer-events: auto;
  cursor: pointer;
}
.fd-hero-item[data-state="peek"]:hover {
  opacity: 0.55;
}
/* Hidden: everything that isn't active or next-peek stays out of view. */
.fd-hero-item[data-state="hidden"] {
  opacity: 0;
  transform: translateY(-40px) scale(0.9);
}

/* Label ABOVE the big number, small caps sans. */
.fd-hero-label {
  font-family: var(--fb-font-body);
  font-size: 11px;
  color: var(--fd-silver);
  margin-bottom: 4px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* THE big number. Body sans, heavy weight, large size. Positive green /
   negative red / neutral ivory. */
.fd-hero-value {
  font-family: var(--fb-font-body);
  font-size: 56px;
  line-height: 1.0;
  font-weight: 600;
  color: var(--fd-success);
  letter-spacing: -0.025em;
  white-space: nowrap;
}
.fd-hero-value.negative { color: var(--fd-error); }
.fd-hero-value.neutral  { color: var(--fd-ivory); }
[data-theme="light"] .fd-hero-value.neutral       { color: rgba(0,0,0,0.5); }
[data-theme="light"] .fd-hero-label               { color: rgba(0,0,0,0.55); }

/* ── Secondary row ─────────────────────────────────────────────────── */
.fd-kpi-row-secondary {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  padding-top: 12px;
  border-top: 1px solid rgba(201, 169, 98, 0.12);
  margin-top: 4px;
}
[data-theme="light"] .fd-kpi-row-secondary {
  border-top-color: rgba(0, 0, 0, 0.06);
}

.fd-perf-stat-sm {
  text-align: center;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.fd-perf-value-sm {
  font-family: var(--fb-font-body);
  font-size: 17px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--fd-ivory);
  letter-spacing: -0.005em;
}
.fd-perf-value-sm.negative { color: var(--fd-error); }
.fd-perf-value-sm.neutral  { color: var(--fd-ivory); }

.fd-perf-label-sm {
  font-size: 10px;
  color: var(--fd-silver);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Legacy class kept for any older callsites — maps to the secondary look. */
.fd-perf-value        { font-family: var(--fb-font-body); }
.fd-perf-value.negative { color: var(--fd-error); }
.fd-perf-value.neutral  { color: var(--fd-ivory); }
.fd-perf-label {
  font-size: 11px;
  color: var(--fd-silver);
  margin-top: 4px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Volatility stat — inline icon + value row. Icon colour encodes risk
   bucket (green / amber / red) so you can scan a page of fund cards
   without reading percentages. Sized to match the 17px secondary numeral. */
.fd-perf-value-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.fd-vol-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fd-silver); /* fallback before JS sets a bucket class */
  transition: color 0.2s ease;
}
#fdPerfVolStat.vol-low  .fd-vol-icon { color: var(--fd-success, #4ade80); }
#fdPerfVolStat.vol-mid  .fd-vol-icon { color: #eab308; }       /* amber */
#fdPerfVolStat.vol-high .fd-vol-icon { color: var(--fd-error, #ef4444); }
#fdPerfVolStat.vol-none .fd-vol-icon { color: var(--fd-pewter); opacity: 0.5; }

/* Right-hand stack: time-periods row on top, chart icon toolbar below.
   Aligned to the right edge of the card, matching the left column's
   top alignment so the whole header reads as two neatly-squared columns. */
.fd-perf-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.fd-perf-header-right .fd-time-periods {
  justify-content: flex-end;
}
.fd-perf-header-right .fd-chart-controls-bar {
  /* Icons live directly under the date pills, right-aligned. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  width: auto;
  margin: 0;
}

/* Narrow screens: shrink the hero number and push the right-hand stack
   below the stats area. */
@media (max-width: 820px) {
  .fd-hero-carousel { height: 88px; }
  .fd-hero-value    { font-size: 42px; }
  .fd-hero-item[data-state="peek"] {
    transform: translateY(58px) scale(0.45);
  }
  .fd-perf-header-right {
    align-items: flex-start;
    width: 100%;
  }
  .fd-perf-header-right .fd-time-periods,
  .fd-perf-header-right .fd-chart-controls-bar {
    justify-content: flex-start;
  }
}

.fd-perf-vs-peers {
  font-size: 10px;
  margin-top: 4px;
  padding: 3px 7px;
  border-radius: 4px;
  display: inline-block;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s ease;
}

.fd-perf-vs-peers.visible {
  opacity: 1;
  transform: translateY(0);
}

.fd-perf-vs-peers.positive {
  background: rgba(74, 222, 128, 0.15);
  color: var(--fd-success);
}

.fd-perf-vs-peers.negative {
  background: rgba(248, 113, 113, 0.15);
  color: var(--fd-error);
}

.fd-comparing-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  color: var(--fd-gold);
  display: none;
  align-items: center;
  gap: 6px;
}

.fd-comparing-badge.visible {
  display: none;
}

.fd-comparing-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fd-gold);
  animation: fd-pulse 2s infinite;
}

@keyframes fd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Chart Container */
.fd-benchmark-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fd-benchmark-label {
  font-size: 12px;
  color: var(--fd-silver);
}

/* Add-competitor button now sits as a peer of the other toolbar icons —
   same 42x42 rounded square, same gold theming, no pulse ring. The pulse
   was fighting with the comparing-badge dot and the icon grid for
   attention; the button's affordance is clear enough from the + glyph. */
.fd-add-competitor-btn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--fd-slate);
  border: 1px solid transparent;
  color: var(--fd-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}
.fd-add-competitor-btn:hover {
  background: var(--fd-pewter);
  color: var(--fd-gold);
}
.fd-add-competitor-btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}
[data-theme="light"] .fd-add-competitor-btn {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.10);
  color: var(--fd-gold);
}
[data-theme="light"] .fd-add-competitor-btn:hover {
  background: rgba(201, 169, 98, 0.10);
  border-color: rgba(201, 169, 98, 0.35);
}

/* .fd-pulse-ring no-ops — animation removed with the restyle. Class may
   still be on the DOM element; ::before/::after are intentionally empty. */
.fd-pulse-ring::before,
.fd-pulse-ring::after { content: none; }

/* Line Chart */
.fd-line-chart {
  height: 320px;
  background: var(--fd-slate);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.fd-chart-svg {
  width: 100%;
  height: 100%;
}

.fd-chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.fd-chart-line.fund {
  stroke: var(--fd-gold);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: fd-drawLine 2s var(--fd-ease-out-expo) forwards;
}

.fd-chart-line.benchmark {
  stroke: var(--fd-pewter);
  stroke-dasharray: 4 4;
}

.fd-chart-line.watched-line,
.fd-chart-line.competitor-line {
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fd-chart-line.watched-line.visible,
.fd-chart-line.competitor-line.visible {
  opacity: 1;
  animation: fd-drawLine 1s var(--fd-ease-out-expo) forwards;
}

.fd-chart-line.vanguard { stroke: #60a5fa; }
.fd-chart-line.blackrock { stroke: #a78bfa; }
.fd-chart-line.impax { stroke: #77DB89; }
.fd-chart-line.stewart { stroke: #f472b6; }
.fd-chart-line.jpmorgan { stroke: #fb923c; }
.fd-chart-line.matthews { stroke: #38bdf8; }
.fd-chart-line.invesco { stroke: #a3e635; }
.fd-chart-line.schroder { stroke: #e879f9; }
.fd-chart-line.fidelity { stroke: #2dd4bf; }

.fd-chart-area {
  fill: url(#fdGoldGradient);
  opacity: 0;
  animation: fd-fadeIn 1s var(--fd-ease-out-expo) 1s forwards;
}

@keyframes fd-drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes fd-fadeIn {
  to { opacity: 0.3; }
}

.fd-watched-dot,
.fd-competitor-dot {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fd-watched-dot.visible,
.fd-competitor-dot.visible {
  opacity: 1;
}

/* Chart Tooltip */
.fd-chart-tooltip {
  position: absolute;
  background: var(--fd-obsidian);
  border: 1px solid var(--fd-slate);
  border-radius: 10px;
  padding: 12px 16px;
  pointer-events: none;
  opacity: 0;
  z-index: 10;
  transition: opacity 0.2s ease;
}

.fd-chart-tooltip.visible {
  opacity: 1;
}

.fd-tooltip-date {
  font-size: 11px;
  color: var(--fd-silver);
  margin-bottom: 6px;
}

.fd-tooltip-values {
  display: flex;
  gap: 16px;
}

.fd-tooltip-val {
  font-size: 14px;
  font-weight: 600;
}

.fd-tooltip-val.fund {
  color: var(--fd-gold);
}

.fd-tooltip-val.benchmark {
  color: var(--fd-silver);
}

.fd-tooltip-watched-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* Chart Legend — Pill Style (matches competitor pills) */
.fd-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--fd-slate);
}
.fd-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid var(--fd-gold);
  border-radius: 100px;
  font-size: 12px;
  color: var(--fd-ivory, #f4f4f6);
  transition: all 0.2s ease;
  max-width: 320px;
}
.fd-legend-pill:hover {
  background: rgba(255, 255, 255, 0.06);
}
.fd-legend-pill-benchmark {
  border-color: var(--fd-pewter);
  border-style: dashed;
}
.fd-legend-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.fd-legend-pill-dot-dashed {
  background: var(--fd-pewter) !important;
}
.fd-legend-pill-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.fd-legend-pill-brand {
  font-size: 10px;
  color: var(--fd-silver);
  flex-shrink: 0;
}
.fd-legend-pill-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fd-silver);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
  margin-left: 2px;
}
.fd-legend-pill-x:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}
/* Light mode legend pills */
[data-theme="light"] .fd-legend-pill {
  background: rgba(0, 0, 0, 0.03);
  color: #3a3a44;
}
[data-theme="light"] .fd-legend-pill:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* X-axis labels */
.fd-chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 0 0;
  font-size: 11px;
  color: var(--fd-silver);
}
.fd-chart-x-axis span {
  opacity: 0.7;
}
.fd-chart-x-axis .fd-forecast-date {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  padding: 2px 8px;
  border-radius: 10px;
  color: #c084fc;
  opacity: 1;
  font-weight: 500;
}

/* Y-axis labels */
.fd-chart-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px 12px 40px 0;
  font-size: 10px;
  color: var(--fd-silver);
  opacity: 0.7;
  text-align: right;
  min-width: 45px;
}

/* Chart wrapper with Y-axis */
.fd-line-chart-wrapper {
  display: flex;
  align-items: stretch;
  position: relative;
}

.fd-line-chart {
  flex: 1;
  position: relative;
}

/* Today line marker */
.fd-today-line {
  opacity: 0.3;
}

/* Improved Tooltip */
.fd-chart-tooltip {
  position: absolute;
  background: var(--fd-obsidian);
  border: 1px solid var(--fd-slate);
  border-radius: 10px;
  padding: 12px 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 100;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.fd-chart-tooltip.visible {
  opacity: 1;
}

.fd-tooltip-date {
  font-size: 11px;
  color: var(--fd-silver);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fd-slate);
}

.fd-tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}

.fd-tooltip-row.benchmark {
  opacity: 0.7;
}

.fd-tooltip-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fd-tooltip-name {
  flex: 1;
  color: var(--fd-silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.fd-tooltip-val {
  font-weight: 600;
  color: var(--fd-ivory);
  min-width: 50px;
  text-align: right;
}

.fd-tooltip-val.positive {
  color: #77DB89;
}

.fd-tooltip-val.negative {
  color: #f87171;
}

/* Competitor Tags */
.fd-competitor-tags {
  display: none !important;
}

.fd-competitor-tags:empty {
  display: none;
}

.fd-competitor-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--fd-charcoal);
  border: 1px solid var(--fd-slate);
  border-radius: 20px;
  font-size: 13px;
  color: var(--fd-ivory);
  cursor: default;
  transition: all 0.2s ease;
}

.fd-competitor-tag:hover {
  border-color: var(--fd-pewter);
}

.fd-competitor-tag-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fd-competitor-tag-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fd-competitor-tag-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--fd-silver);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin-left: 4px;
}

.fd-competitor-tag-remove:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

.fd-competitor-tag-remove svg {
  width: 12px;
  height: 12px;
}

.fd-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fd-platinum);
  white-space: nowrap;
}

.fd-legend-item span {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-legend-line {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

.fd-legend-line.fund {
  background: var(--fd-gold);
}

.fd-legend-line.benchmark {
  background: repeating-linear-gradient(90deg, var(--fd-pewter) 0px, var(--fd-pewter) 4px, transparent 4px, transparent 8px);
}

.fd-legend-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fd-silver);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.fd-legend-remove:hover {
  background: rgba(248, 113, 113, 0.15);
  border-color: rgba(248, 113, 113, 0.3);
  color: #f87171;
}

/* Bar Chart */
.fd-bar-chart {
  display: none;
  padding: 12px 20px 8px;
  position: relative;
}

.fd-bar-chart.active {
  display: block;
}

.fd-line-chart-wrapper.hidden {
  display: none;
}

/* Bar Chart Inner Styles */
.fd-bar-chart-inner {
  display: flex;
  height: 260px;
  gap: 16px;
}

.fd-bar-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
  font-size: 11px;
  color: var(--fd-silver);
  text-align: right;
  min-width: 40px;
}

.fd-bar-chart-bars {
  flex: 1;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  position: relative;
  border-left: 1px solid var(--fd-pewter);
  overflow: hidden;
}

.fd-bar-zero-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed var(--fd-pewter);
}

.fd-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 100px;
  min-width: 0;
}

.fd-bar-wrapper {
  flex: 1;
  width: 40px;
  position: relative;
  overflow: hidden;
}

.fd-bar {
  position: absolute;
  width: 100%;
  border-radius: 4px 4px 0 0;
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  animation: fdBarGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes fdBarGrow {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

.fd-bar.positive {
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.9), rgba(34, 197, 94, 0.8));
  transform-origin: bottom;
}

.fd-bar.negative {
  background: linear-gradient(0deg, rgba(248, 113, 113, 0.9), rgba(239, 68, 68, 0.8));
  border-radius: 0 0 4px 4px;
  transform-origin: top;
}

/* Main fund bars use gold to match chart line */
.fd-bar.fund-bar.positive {
  background: linear-gradient(180deg, var(--fd-gold, #c9a962), rgba(166, 139, 61, 0.85));
}

.fd-bar.fund-bar.negative {
  background: linear-gradient(0deg, #d4856a, #c06050);
}

.fd-bar-label {
  font-size: 11px;
  color: var(--fd-silver);
  margin-top: 4px;
  white-space: nowrap;
}

.fd-bar-value {
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}

.fd-bar-value.positive { color: #77DB89; }
.fd-bar-value.negative { color: #f87171; }

/* Comparison markers on bar chart */
.fd-bar-comparison-marker {
  position: absolute;
  width: 100%;
  border-left: 3px solid #60a5fa;
  border-right: 3px solid #60a5fa;
  background: transparent;
  pointer-events: none;
  opacity: 0.8;
}

/* Comparison line styles */
.fd-chart-line.comparison {
  stroke-dasharray: 5, 3;
  opacity: 0.8;
}

/* ── Bar Chart Tooltip ── */
.fd-bar-tooltip {
  position: fixed;
  z-index: 10000;
  transform: translate(-50%, -100%);
  background: rgba(20, 22, 28, 0.95);
  border: 1px solid rgba(201, 169, 98, 0.35);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  white-space: nowrap;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  animation: fdTooltipIn 0.15s ease-out;
}
@keyframes fdTooltipIn {
  from { opacity: 0; transform: translate(-50%, -90%); }
  to { opacity: 1; transform: translate(-50%, -100%); }
}
.fd-bar-tooltip-name {
  font-size: 11px;
  color: var(--fd-silver, #8a8f98);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-bar-tooltip-val {
  font-size: 14px;
  font-weight: 700;
}
.fd-bar-tooltip-val.positive { color: #77DB89; }
.fd-bar-tooltip-val.negative { color: #f87171; }
.fd-bar-tooltip-period {
  font-size: 10px;
  color: var(--fd-pewter, #555);
}

/* ── Bar Chart Zoom Controls ── */
.fd-bar-zoom-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  z-index: 5;
}
.fd-bar-zoom-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: var(--fd-silver, #8a8f98);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  line-height: 1;
  padding: 0;
}
.fd-bar-zoom-btn:hover {
  background: rgba(201, 169, 98, 0.15);
  border-color: rgba(201, 169, 98, 0.4);
  color: var(--fd-gold, #c9a962);
}

/* ── Bar hover highlight ── */
.fd-bar {
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.fd-bar:hover {
  filter: brightness(1.25);
  opacity: 1 !important;
}

/* Quartile Badges */
.fd-quartile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  margin-right: 6px;
}

.fd-quartile.q1 { background: #3b82f6; color: white; }
.fd-quartile.q2 { background: #3b82f6; color: white; }
.fd-quartile.q3 { background: #fbbf24; color: #1a1a1a; }
.fd-quartile.q4 { background: #f87171; color: white; }

.fd-rank {
  font-size: 11px;
  color: var(--fd-silver);
}

.fd-perf-ranking {
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.fd-line-chart-wrapper.hidden {
  display: none;
}

/* ========================================
   ALLOCATION CARD
======================================== */
.fd-allocation-card {
  padding: 28px;
}

.fd-alloc-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fd-allocation-tabs {
  display: flex;
  background: var(--fd-slate);
  border-radius: 10px;
  padding: 4px;
}

.fd-alloc-tab {
  padding: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fd-silver);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--fb-font-body);
  transition: all 0.2s ease;
}

.fd-alloc-tab.active {
  background: var(--fd-graphite);
  color: var(--fd-ivory);
}

.fd-alloc-panel {
  display: none;
}

.fd-alloc-panel.active {
  display: block;
}

/* FMP Loading State */
.fd-fmp-loading {
  padding: 40px;
  text-align: center;
  color: var(--fd-silver);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.fd-loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--fd-slate);
  border-top-color: var(--fd-gold);
  border-radius: 50%;
  animation: fd-spin 0.8s linear infinite;
}

@keyframes fd-spin {
  to { transform: rotate(360deg); }
}

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

.fd-alloc-row {
  padding: 16px;
  background: var(--fd-slate);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fd-alloc-row:hover {
  background: var(--fd-pewter);
  transform: translateY(-2px);
}

.fd-alloc-row-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fd-alloc-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fd-ivory);
}

.fd-alloc-values {
  display: flex;
  gap: 12px;
  font-size: 13px;
}

.fd-alloc-fund {
  color: var(--fd-gold);
  font-weight: 600;
}

.fd-alloc-bars-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fd-alloc-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-alloc-bar-label {
  width: 50px;
  font-size: 10px;
  color: var(--fd-silver);
}

.fd-alloc-bar-label.fund-label {
  color: var(--fd-gold);
}

.fd-alloc-bars {
  flex: 1;
  height: 8px;
  background: var(--fd-graphite);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.fd-alloc-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 4px;
  transition: width 1s var(--fd-ease-out-expo);
}

.fd-alloc-bar.fund {
  background: var(--fd-gold);
}

.fd-alloc-bar-value {
  font-size: 11px;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

/* Comparison bars in allocation */
.fd-alloc-comparison-bars {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--fd-pewter);
  display: none;
}

.fd-alloc-comparison-bars.visible {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fd-alloc-bar-row.comparison {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-alloc-bar-row.comparison .fd-alloc-bar-label {
  width: 80px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-alloc-comp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.fd-alloc-comp-row:last-child {
  margin-bottom: 0;
}

.fd-alloc-comp-label {
  width: 50px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-alloc-comp-bar-track {
  flex: 1;
  height: 6px;
  background: var(--fd-graphite);
  border-radius: 3px;
  overflow: hidden;
}

.fd-alloc-comp-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s var(--fd-ease-out-expo);
}

.fd-alloc-comp-value {
  font-size: 10px;
  font-weight: 600;
  min-width: 35px;
  text-align: right;
}

.fd-alloc-comp-diff {
  font-size: 9px;
  padding: 2px 4px;
  border-radius: 3px;
  min-width: 40px;
  text-align: center;
}

.fd-alloc-comp-diff.over {
  background: rgba(74, 222, 128, 0.15);
  color: var(--fd-success);
}

.fd-alloc-comp-diff.under {
  background: rgba(248, 113, 113, 0.15);
  color: var(--fd-error);
}

/* ========================================
   INSIGHTS CARD
======================================== */
.fd-insights-card {
  padding: 28px;
}

.fd-insights-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fd-view-all-btn {
  font-size: 12px;
  color: var(--fd-gold);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.fd-view-all-btn:hover {
  text-decoration: underline;
}

.fd-view-all-btn svg {
  width: 14px;
  height: 14px;
  stroke: var(--fd-gold);
  stroke-width: 2;
  fill: none;
}

.fd-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.fd-insight-item {
  background: var(--fd-slate);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fd-insight-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.fd-insight-image {
  height: 120px;
  background: linear-gradient(135deg, var(--fd-pewter), var(--fd-slate));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fd-insight-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6) 100%);
}

.fd-insight-image svg {
  width: 40px;
  height: 40px;
  stroke: var(--fd-silver);
  stroke-width: 1.5;
  fill: none;
  opacity: 0.5;
}

.fd-insight-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 8px;
  background: rgba(201, 169, 98, 0.9);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fd-obsidian);
}

.fd-insight-content {
  padding: 16px;
}

.fd-insight-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fd-ivory);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fd-insight-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fd-silver);
}

.fd-insight-author {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fd-insight-author-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--fd-pewter);
}

/* ========================================
   NEWS TOGGLE & PINS
======================================== */
.fd-news-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-silver);
  background: transparent;
  border: 1px solid var(--fd-slate);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 6px;
  letter-spacing: 0.01em;
}
.fd-news-toggle:hover {
  background: var(--fd-slate);
}
.fd-news-toggle.active {
  background: rgba(96, 165, 250, 0.15);
  border-color: var(--fd-blue);
  color: var(--fd-blue);
}
.fd-news-toggle svg {
  width: 16px;
  height: 16px;
}
.fd-news-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--fd-blue);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

/* Global Events / Macro Updates Toggle */
.fd-global-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-silver);
  background: transparent;
  border: 1px solid var(--fd-slate);
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 6px;
  letter-spacing: 0.01em;
}
.fd-global-toggle:hover {
  background: var(--fd-slate);
}
.fd-global-toggle.active {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.5);
  color: #77DB89;
}
.fd-global-toggle svg {
  width: 16px;
  height: 16px;
}
.fd-global-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #77DB89;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
}

/* AI Forecast Toggle */
.fd-ai-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-silver);
  background: transparent;
  border: 1px solid var(--fd-slate);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 6px;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}
.fd-ai-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.1), rgba(249, 115, 22, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fd-ai-toggle:hover::before {
  opacity: 1;
}
.fd-ai-toggle:hover {
  border-color: rgba(168, 85, 247, 0.5);
}
.fd-ai-toggle.active {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2), rgba(249, 115, 22, 0.2));
  border-color: rgba(168, 85, 247, 0.5);
}
.fd-ai-toggle.active .fd-ai-label {
  background: linear-gradient(135deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fd-ai-toggle svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.fd-ai-toggle.loading {
  pointer-events: none;
  border-color: rgba(168, 85, 247, 0.5);
}
.fd-ai-toggle.loading::before {
  opacity: 1;
  animation: fd-ai-pulse 1.2s ease-in-out infinite;
}
.fd-ai-toggle.loading .fd-ai-label {
  background: linear-gradient(135deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fd-ai-toggle.loading svg {
  animation: fd-ai-spin 1s linear infinite;
}
/* When custom animated SVG is swapped in, disable the spin */
.fd-ai-toggle.loading .fd-ai-loading-anim {
  animation: none;
}
@keyframes fd-ai-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}
@keyframes fd-ai-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── AI Loading Animation: arrow rise + branch growth ── */
.fd-ai-loading-anim {
  overflow: visible;
}

/* Center arrow — rises from bottom to top */
.fd-ai-anim-arrow {
  animation: fd-ai-arrow-rise 1.6s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes fd-ai-arrow-rise {
  0%   { transform: translateY(12px); opacity: 0; }
  30%  { transform: translateY(0);    opacity: 1; }
  70%  { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0; }
}

/* Branches — grow outward from stem like grass */
.fd-ai-anim-branch {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transform-origin: 20px 23px; /* center of SVG, near branch roots */
  animation: fd-ai-branch-grow 1.6s ease-out infinite;
}

.fd-ai-branch-1 { animation-delay: 0.25s; }
.fd-ai-branch-2 { animation-delay: 0.4s; }
.fd-ai-branch-3 { animation-delay: 0.3s; }
.fd-ai-branch-4 { animation-delay: 0.45s; }

@keyframes fd-ai-branch-grow {
  0%   { stroke-dashoffset: 20; opacity: 0; transform: scaleX(0.3) scaleY(0.3); }
  20%  { opacity: 0.6; }
  50%  { stroke-dashoffset: 0;  opacity: 1; transform: scaleX(1) scaleY(1); }
  80%  { stroke-dashoffset: 0;  opacity: 1; transform: scaleX(1) scaleY(1); }
  100% { stroke-dashoffset: 0;  opacity: 0; transform: scaleX(1.1) scaleY(1.05); }
}

.fd-ai-toggle.error {
  border-color: rgba(239, 68, 68, 0.5);
  animation: fd-ai-shake 0.4s ease;
}
@keyframes fd-ai-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.fd-ai-label {
  position: relative;
  z-index: 1;
}

/* AI Forecast Line on Chart */
.fd-ai-forecast-line {
  stroke: url(#aiGradient);
  stroke-width: 2.5;
  fill: none;
  stroke-dasharray: 8 4;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fd-ai-forecast-line.visible {
  opacity: 1;
  animation: aiPulse 2s ease-in-out infinite;
}
.fd-ai-forecast-area {
  fill: url(#aiGradientFill);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.fd-ai-forecast-area.visible {
  opacity: 0.15;
}
@keyframes aiPulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

/* AI Forecast Badge on Chart */
.fd-ai-badge {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 8px 14px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.95), rgba(236, 72, 153, 0.95));
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.4), 0 0 20px rgba(236, 72, 153, 0.2);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
}
.fd-ai-badge.visible {
  opacity: 1;
  transform: translateY(0);
}
.fd-ai-badge:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 24px rgba(168, 85, 247, 0.5), 0 0 30px rgba(236, 72, 153, 0.3);
}
.fd-ai-badge:active {
  transform: scale(0.98);
}
.fd-ai-badge svg {
  width: 14px;
  height: 14px;
}
.fd-ai-badge::after {
  content: '›';
  margin-left: 4px;
  font-size: 14px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}
.fd-ai-badge:hover::after {
  transform: translateX(2px);
}

/* News Pins Container - overlays full chart area */
.fd-pins-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 50;
}
.fd-pins-container .fd-news-pin {
  pointer-events: auto;
}
.fd-pins-container .fd-global-pin {
  pointer-events: auto;
}

/* News Pins on Chart */
.fd-news-pin {
  position: absolute;
  bottom: 40px;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 100;
  transition: all 0.2s ease;
}
.fd-news-pin:hover {
  z-index: 101;
}
.fd-news-pin-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--fd-blue);
  border: 3px solid var(--fd-obsidian);
  box-shadow: 0 0 12px rgba(96, 165, 250, 0.7), 0 2px 8px rgba(0,0,0,0.3);
  transition: all 0.2s ease;
}
.fd-news-pin:hover .fd-news-pin-marker {
  transform: scale(1.3);
  box-shadow: 0 0 16px rgba(96, 165, 250, 0.9), 0 4px 12px rgba(0,0,0,0.4);
}
.fd-news-pin-stem {
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 2px;
  height: 35px;
  background: linear-gradient(to top, rgba(96, 165, 250, 0.6), rgba(96, 165, 250, 0.1));
  transform: translateX(-50%);
  border-radius: 1px;
}
.fd-news-pin-count {
  position: absolute;
  bottom: 52px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--fd-blue);
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.4);
}
.fd-news-pin.sentiment-positive .fd-news-pin-marker {
  background: var(--fd-emerald);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.7), 0 2px 8px rgba(0,0,0,0.3);
}
.fd-news-pin.sentiment-positive .fd-news-pin-stem {
  background: linear-gradient(to top, rgba(16, 185, 129, 0.6), rgba(16, 185, 129, 0.1));
}
.fd-news-pin.sentiment-positive .fd-news-pin-count {
  background: var(--fd-emerald);
}
.fd-news-pin.sentiment-negative .fd-news-pin-marker {
  background: #ef4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.7), 0 2px 8px rgba(0,0,0,0.3);
}
.fd-news-pin.sentiment-negative .fd-news-pin-stem {
  background: linear-gradient(to top, rgba(239, 68, 68, 0.6), rgba(239, 68, 68, 0.1));
}
.fd-news-pin.sentiment-negative .fd-news-pin-count {
  background: #ef4444;
}

/* News Pin Tooltip - hover preview */
.fd-pin-tooltip {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: var(--fd-charcoal);
  border: 1px solid var(--fd-slate);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 200;
}
.fd-news-pin:hover .fd-pin-tooltip {
  opacity: 1;
  visibility: visible;
}
.fd-pin-tooltip-date {
  font-size: 10px;
  color: var(--fd-silver);
  margin-bottom: 8px;
}
.fd-pin-tooltip-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--fd-slate);
}
.fd-pin-tooltip-item:last-child {
  border-bottom: none;
}
.fd-pin-tooltip-title {
  font-size: 12px;
  color: var(--fd-ivory);
  line-height: 1.4;
  margin-bottom: 4px;
}
.fd-pin-tooltip-source {
  font-size: 10px;
  color: var(--fd-silver);
}

/* ========================================
   GLOBAL / MACRO EVENT PINS
======================================== */
.fd-global-pin {
  position: absolute;
  bottom: 40px;
  transform: translateX(-50%);
  cursor: pointer;
  z-index: 99;
  transition: all 0.2s ease;
  pointer-events: auto;
}
.fd-global-pin:hover {
  z-index: 102;
}
.fd-global-pin-marker {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background: #f59e0b;
  border: 2px solid var(--fd-obsidian, #0a0a0b);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), 0 2px 6px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.fd-global-pin-marker svg {
  width: 12px;
  height: 12px;
  stroke: var(--fd-obsidian, #0a0a0b);
  fill: none;
}
.fd-global-pin:hover .fd-global-pin-marker {
  transform: scale(1.2);
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.7), 0 4px 12px rgba(0,0,0,0.4);
}
.fd-global-pin-stem {
  position: absolute;
  bottom: 20px;
  left: 50%;
  width: 2px;
  height: 30px;
  background: linear-gradient(to top, rgba(245, 158, 11, 0.6), rgba(245, 158, 11, 0.1));
  transform: translateX(-50%);
  border-radius: 1px;
}

/* Severity color variants */
.fd-global-pin.severity-low .fd-global-pin-marker {
  background: #77DB89;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.5), 0 2px 6px rgba(0,0,0,0.3);
}
.fd-global-pin.severity-low .fd-global-pin-stem {
  background: linear-gradient(to top, rgba(34, 197, 94, 0.6), rgba(34, 197, 94, 0.1));
}
.fd-global-pin.severity-medium .fd-global-pin-marker {
  background: #f59e0b;
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.5), 0 2px 6px rgba(0,0,0,0.3);
}
.fd-global-pin.severity-medium .fd-global-pin-stem {
  background: linear-gradient(to top, rgba(245, 158, 11, 0.6), rgba(245, 158, 11, 0.1));
}
.fd-global-pin.severity-high .fd-global-pin-marker {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5), 0 2px 6px rgba(0,0,0,0.3);
}
.fd-global-pin.severity-high .fd-global-pin-stem {
  background: linear-gradient(to top, rgba(239, 68, 68, 0.6), rgba(239, 68, 68, 0.1));
}
.fd-global-pin.severity-critical .fd-global-pin-marker {
  background: #dc2626;
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.7), 0 2px 8px rgba(0,0,0,0.4);
  animation: fd-global-critical-pulse 1.5s ease-in-out infinite;
}
.fd-global-pin.severity-critical .fd-global-pin-stem {
  background: linear-gradient(to top, rgba(220, 38, 38, 0.7), rgba(220, 38, 38, 0.15));
}
@keyframes fd-global-critical-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(220, 38, 38, 0.5), 0 2px 6px rgba(0,0,0,0.3); }
  50% { box-shadow: 0 0 20px rgba(220, 38, 38, 0.8), 0 4px 12px rgba(0,0,0,0.4); }
}

/* Global pin tooltip */
.fd-global-tooltip {
  position: absolute;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: var(--fd-charcoal, #141416);
  border: 1px solid var(--fd-slate, #2a2a2f);
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 200;
  pointer-events: none;
}
.fd-global-pin:hover .fd-global-tooltip {
  opacity: 1;
  visibility: visible;
}
.fd-global-tooltip-date {
  font-size: 10px;
  color: var(--fd-silver, #8a8a94);
  margin-bottom: 6px;
}
.fd-global-tooltip-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  margin-bottom: 6px;
}
.fd-global-tooltip-title {
  font-size: 12px;
  color: var(--fd-ivory, #f4f4f6);
  line-height: 1.4;
  margin-bottom: 4px;
}
.fd-global-tooltip-impact {
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-silver, #8a8a94);
  margin-top: 4px;
}
.fd-global-tooltip-impact.positive { color: #77DB89; }
.fd-global-tooltip-impact.negative { color: #f87171; }

/* News Modal */
.fd-news-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.fd-news-modal.visible {
  opacity: 1;
  visibility: visible;
}
.fd-news-modal-content {
  background: var(--fd-charcoal);
  border: 1px solid var(--fd-slate);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.fd-news-modal.visible .fd-news-modal-content {
  transform: translateY(0);
}
.fd-news-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--fd-slate);
}
.fd-news-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fd-ivory);
}
.fd-news-modal-date {
  font-size: 12px;
  color: var(--fd-silver);
  margin-top: 4px;
}
.fd-news-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--fd-slate);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fd-silver);
  transition: all 0.2s ease;
}
.fd-news-modal-close:hover {
  background: var(--fd-pewter);
  color: var(--fd-ivory);
}
.fd-news-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.fd-news-modal-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fd-news-modal-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--fd-slate);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fd-news-modal-item:hover {
  background: var(--fd-pewter);
  transform: translateX(4px);
}
.fd-news-modal-item-image {
  width: 100px;
  height: 70px;
  border-radius: 8px;
  background: var(--fd-pewter);
  flex-shrink: 0;
  overflow: hidden;
}
.fd-news-modal-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fd-news-modal-item-content {
  flex: 1;
  min-width: 0;
}
.fd-news-modal-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fd-ivory);
  line-height: 1.4;
  margin-bottom: 8px;
}
.fd-news-modal-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fd-silver);
  flex-wrap: wrap;
}
.fd-news-modal-item-symbol {
  padding: 2px 6px;
  background: rgba(201, 169, 98, 0.2);
  color: var(--fd-gold);
  border-radius: 4px;
  font-weight: 600;
}
.fd-news-modal-item-sentiment {
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.fd-news-modal-item-sentiment.positive {
  background: rgba(16, 185, 129, 0.2);
  color: var(--fd-emerald);
}
.fd-news-modal-item-sentiment.negative {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.fd-news-modal-item-sentiment.neutral {
  background: rgba(156, 163, 175, 0.2);
  color: var(--fd-silver);
}

/* ========================================
   AI FORECAST MODAL
======================================== */
.fd-ai-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}
.fd-ai-modal.visible {
  opacity: 1;
  visibility: visible;
}
.fd-ai-modal-content {
  background: linear-gradient(135deg, var(--fd-charcoal) 0%, #1a1a2e 100%);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 20px;
  width: 90%;
  max-width: 580px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5), 0 0 40px rgba(168, 85, 247, 0.1);
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s ease;
}
.fd-ai-modal.visible .fd-ai-modal-content {
  transform: translateY(0) scale(1);
}
.fd-ai-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}
.fd-ai-modal-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fd-ai-modal-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-ai-modal-title {
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fd-ai-modal-subtitle {
  font-size: 12px;
  color: var(--fd-silver);
  margin-top: 2px;
}
.fd-ai-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fd-silver);
  transition: all 0.2s ease;
}
.fd-ai-modal-close:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}
.fd-ai-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

/* Prediction Summary */
.fd-ai-prediction-summary {
  text-align: center;
  padding: 24px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.1), rgba(236, 72, 153, 0.05));
  border-radius: 16px;
  margin-bottom: 20px;
}
.fd-ai-prediction-value {
  font-size: 48px;
  font-weight: 700;
  background: linear-gradient(135deg, #a855f7, #ec4899, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}
.fd-ai-prediction-label {
  font-size: 14px;
  color: var(--fd-silver);
  margin-top: 4px;
}
.fd-ai-confidence {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 6px 14px;
  background: rgba(0,0,0,0.3);
  border-radius: 20px;
  font-size: 12px;
  color: var(--fd-ivory);
}
.fd-ai-confidence-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fd-silver);
}
.fd-ai-confidence-dot.high { background: var(--fd-emerald); }
.fd-ai-confidence-dot.medium { background: var(--fd-gold); }
.fd-ai-confidence-dot.low { background: #ef4444; }
.fd-ai-r2 {
  color: var(--fd-silver);
  font-size: 11px;
}

/* Sections */
.fd-ai-section {
  margin-bottom: 20px;
}
.fd-ai-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-ivory);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.fd-ai-section-title svg {
  color: #a855f7;
}

/* Components */
.fd-ai-components {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fd-ai-component {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 12px;
}
.fd-ai-component-symbol {
  font-weight: 600;
  color: var(--fd-gold);
}
.fd-ai-component-weight {
  color: var(--fd-silver);
}
.fd-ai-component-type {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
}
.fd-ai-component-type.holding {
  background: rgba(96, 165, 250, 0.2);
  color: var(--fd-blue);
}
.fd-ai-component-type.country {
  background: rgba(16, 185, 129, 0.2);
  color: var(--fd-emerald);
}

/* Methodology Steps */
.fd-ai-methodology {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fd-ai-step {
  display: flex;
  gap: 12px;
}
.fd-ai-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(236, 72, 153, 0.3));
  border: 1px solid rgba(168, 85, 247, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #a855f7;
  flex-shrink: 0;
}
.fd-ai-step-content {
  flex: 1;
}
.fd-ai-step-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fd-ivory);
  margin-bottom: 2px;
}
.fd-ai-step-desc {
  font-size: 12px;
  color: var(--fd-silver);
  line-height: 1.5;
}
.fd-ai-step-desc code {
  background: rgba(168, 85, 247, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--fb-font-mono);
  font-size: 11px;
  color: #c084fc;
}

/* Stats */
.fd-ai-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.fd-ai-stat {
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.fd-ai-stat-label {
  font-size: 10px;
  color: var(--fd-silver);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
}
.fd-ai-stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--fd-ivory);
}
.fd-ai-stat-bar {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.fd-ai-stat-fill {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* Disclaimer */
.fd-ai-disclaimer {
  display: flex;
  gap: 10px;
  padding: 12px;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 10px;
  font-size: 11px;
  color: var(--fd-silver);
  line-height: 1.5;
}
.fd-ai-disclaimer svg {
  flex-shrink: 0;
  color: #f97316;
  margin-top: 2px;
}

/* ========================================
   AI FORECAST INLINE PANEL (below chart)
   Uses both class AND ID selectors for robustness
======================================== */
.fd-ai-panel,
#fdAiPanel,
#fdAIPanel {
  position: relative;
  background: #16161a;
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 16px;
  margin-top: 20px;
  overflow: hidden;
  padding: 0;
  color: var(--fd-platinum, #c4c4cc);
  font-family: var(--fd-font-body);
}
.fd-ai-panel.visible,
#fdAiPanel[style*="block"],
#fdAIPanel.visible {
  animation: fd-aiSlideIn 0.4s ease;
}
@keyframes fd-aiSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Panel Header */
.fd-ai-panel-header,
.fd-ai-panel .fd-ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.08) 0%, rgba(236, 72, 153, 0.04) 50%, transparent 100%);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}
.fd-ai-panel-title,
.fd-ai-panel .fd-ai-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.fd-ai-panel-title svg,
.fd-ai-panel .fd-ai-title svg {
  stroke: #a855f7;
  width: 20px;
  height: 20px;
  -webkit-text-fill-color: initial;
}
.fd-ai-panel-meta,
.fd-ai-panel .fd-ai-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Claude Badge */
.fd-ai-badge-claude {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: #a855f7;
  letter-spacing: 0.8px;
}

/* Panel Confidence */
.fd-ai-panel .fd-ai-confidence {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #77DB89;
}
.fd-ai-panel .fd-ai-confidence.medium {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}
.fd-ai-panel .fd-ai-confidence.low {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* Scenario Cards */
.fd-ai-panel .fd-ai-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 24px;
}
.fd-ai-panel .fd-ai-scenario {
  position: relative;
  background: #1e1e24;
  border: 1px solid #2a2a32;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  overflow: hidden;
  transition: all 0.3s ease;
}
.fd-ai-panel .fd-ai-scenario::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.fd-ai-panel .fd-ai-scenario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Upside - Green */
.fd-ai-panel .fd-ai-scenario.upside::before,
.fd-ai-panel .fd-ai-scenario.bull::before {
  background: linear-gradient(90deg, #4bba5e, #77DB89);
}
.fd-ai-panel .fd-ai-scenario.upside .fd-ai-scenario-value,
.fd-ai-panel .fd-ai-scenario.bull .fd-ai-scenario-value {
  color: #77DB89;
}

/* Expected - Gold */
.fd-ai-panel .fd-ai-scenario.expected::before,
.fd-ai-panel .fd-ai-scenario.base::before {
  background: linear-gradient(90deg, #b8963f, #d4a853);
}
.fd-ai-panel .fd-ai-scenario.expected .fd-ai-scenario-value,
.fd-ai-panel .fd-ai-scenario.base .fd-ai-scenario-value {
  color: #d4a853;
}

/* Downside - Red */
.fd-ai-panel .fd-ai-scenario.downside::before,
.fd-ai-panel .fd-ai-scenario.bear::before {
  background: linear-gradient(90deg, #dc2626, #ef4444);
}
.fd-ai-panel .fd-ai-scenario.downside .fd-ai-scenario-value,
.fd-ai-panel .fd-ai-scenario.bear .fd-ai-scenario-value {
  color: #ef4444;
}

.fd-ai-panel .fd-ai-scenario-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #8a8a94;
  margin-bottom: 12px;
}
.fd-ai-panel .fd-ai-scenario-value {
  display: block;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

/* Investment Thesis */
.fd-ai-panel .fd-ai-thesis {
  margin: 0 24px 24px;
  background: #1a1a20;
  border: 1px solid #2a2a32;
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
}
.fd-ai-panel .fd-ai-thesis::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #a855f7, #ec4899);
  border-radius: 4px 0 0 4px;
}
.fd-ai-panel .fd-ai-thesis-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #77DB89;
  margin-bottom: 14px;
}
.fd-ai-panel .fd-ai-thesis-header svg {
  fill: #77DB89;
}
.fd-ai-panel .fd-ai-thesis p {
  font-size: 14px;
  line-height: 1.7;
  color: #c8c8d0;
  margin: 0;
}
.fd-ai-panel .fd-ai-thesis .fd-ai-confidence-text {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #2a2a32;
  font-size: 13px;
  font-style: italic;
  color: #8a8a94;
}

/* AI Section Headers (Key Drivers, Risk Factors, etc.) */
.fd-ai-panel .fd-ai-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #c4b5fd;
  margin-bottom: 14px;
}
.fd-ai-panel .fd-ai-section-header svg {
  fill: #a855f7;
}
.fd-ai-panel .fd-ai-analysis-text {
  font-size: 14px;
  line-height: 1.7;
  color: #c8c8d0;
  margin: 0;
}

/* AI Panel Sections (generic) */
.fd-ai-panel .fd-ai-details {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.fd-ai-panel .fd-ai-details > div {
  background: #1a1a20;
  border: 1px solid #2a2a32;
  border-radius: 12px;
  padding: 20px 24px;
}

/* Loading state */
.fd-ai-panel .fd-ai-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
  color: #8a8a94;
  font-size: 14px;
}
.fd-ai-panel .fd-ai-loading svg {
  animation: fd-spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 768px) {
  .fd-ai-panel .fd-ai-scenarios {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .fd-ai-panel .fd-ai-scenario {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 16px 20px;
  }
  .fd-ai-panel .fd-ai-scenario-label {
    margin-bottom: 0;
  }
  .fd-ai-panel .fd-ai-scenario-value {
    font-size: 24px;
  }
  .fd-ai-panel .fd-ai-thesis {
    margin: 0 16px 16px;
  }
}

/* ========================================
   AI PANEL — ID-based fallback selectors
   Ensures styling even if class 'fd-ai-panel' is missing
======================================== */
#fdAiPanel .fd-ai-panel-header,
#fdAIPanel .fd-ai-panel-header,
#fdAiPanel > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(90deg, rgba(168, 85, 247, 0.08) 0%, rgba(236, 72, 153, 0.04) 50%, transparent 100%);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}
#fdAiPanel .fd-ai-panel-title,
#fdAIPanel .fd-ai-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
#fdAiPanel .fd-ai-scenarios,
#fdAIPanel .fd-ai-scenarios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 24px;
}
#fdAiPanel .fd-ai-scenario,
#fdAIPanel .fd-ai-scenario {
  position: relative;
  background: #1e1e24;
  border: 1px solid #2a2a32;
  border-radius: 14px;
  padding: 20px;
  text-align: center;
  overflow: hidden;
}
#fdAiPanel .fd-ai-scenario.upside .fd-ai-scenario-value { color: #77DB89; }
#fdAiPanel .fd-ai-scenario.expected .fd-ai-scenario-value { color: #d4a853; }
#fdAiPanel .fd-ai-scenario.downside .fd-ai-scenario-value { color: #ef4444; }
#fdAiPanel .fd-ai-scenario-label,
#fdAIPanel .fd-ai-scenario-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #8a8a94;
  margin-bottom: 10px;
}
#fdAiPanel .fd-ai-scenario-value,
#fdAIPanel .fd-ai-scenario-value {
  font-size: 32px;
  font-weight: 700;
  color: #f4f4f6;
}
#fdAiPanel .fd-ai-thesis,
#fdAIPanel .fd-ai-thesis {
  margin: 0 24px 24px;
  background: #1a1a20;
  border: 1px solid #2a2a32;
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
}
#fdAiPanel .fd-ai-thesis p,
#fdAIPanel .fd-ai-thesis p {
  font-size: 14px;
  line-height: 1.7;
  color: #c8c8d0;
  margin: 0;
}
#fdAiPanel .fd-ai-confidence,
#fdAIPanel .fd-ai-confidence {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #77DB89;
}

/* ========================================
   NEWS SECTION CARD
======================================== */
.fd-news-card {
  padding: 24px;
}
.fd-news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.fd-news-tabs {
  display: flex;
  gap: 8px;
}
.fd-news-tab {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fd-silver);
  background: transparent;
  border: 1px solid var(--fd-slate);
  cursor: pointer;
  transition: all 0.2s ease;
}
.fd-news-tab:hover {
  background: var(--fd-slate);
}
.fd-news-tab.active {
  background: var(--fd-gold);
  color: var(--fd-obsidian);
  border-color: var(--fd-gold);
}
.fd-news-content {
  min-height: 200px;
}
.fd-news-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--fd-silver);
  font-size: 13px;
}
.fd-news-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.fd-news-item {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: var(--fd-slate);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fd-news-item:hover {
  background: var(--fd-pewter);
  transform: translateY(-2px);
}
.fd-news-item-image {
  width: 80px;
  height: 60px;
  border-radius: 8px;
  background: var(--fd-pewter);
  flex-shrink: 0;
  overflow: hidden;
}
.fd-news-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fd-news-item-content {
  flex: 1;
  min-width: 0;
}
.fd-news-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fd-ivory);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fd-news-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fd-silver);
}
.fd-news-item-symbol {
  padding: 2px 6px;
  background: rgba(201, 169, 98, 0.2);
  color: var(--fd-gold);
  border-radius: 4px;
  font-weight: 600;
}
.fd-news-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--fd-silver);
  font-size: 13px;
}
.fd-news-empty svg {
  width: 48px;
  height: 48px;
  stroke: var(--fd-silver);
  opacity: 0.5;
  margin-bottom: 12px;
}

/* ========================================
   RIGHT SIDEBAR CARDS
======================================== */
.fd-compare-card {
  padding: 24px;
}

.fd-compare-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fd-watched-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--fd-gold);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-obsidian);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fd-watched-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fd-watched-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--fd-slate);
  border: 1px solid var(--fd-pewter);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--fb-font-body);
}

.fd-watched-chip:hover {
  background: var(--fd-pewter);
}

.fd-watched-chip.active {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.05);
}

.fd-chip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fd-chip-name {
  flex: 1;
  font-size: 13px;
  color: var(--fd-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-chip-toggle {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  border: 2px solid var(--fd-pewter);
  position: relative;
}

.fd-watched-chip.active .fd-chip-toggle {
  background: currentColor;
  border-color: currentColor;
}

.fd-watched-chip.active .fd-chip-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid var(--fd-obsidian);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Current fund chip in compare card — non-clickable, subtle styling */
.fd-watched-chip.fd-chip-current {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
  border-style: dashed;
  border-color: var(--fd-gold, #b8860b);
}
.fd-chip-current-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.6;
  margin-left: auto;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--fd-pewter, rgba(255,255,255,0.05));
}

.fd-add-fund-btn {
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  background: linear-gradient(135deg, var(--fd-gold), var(--fd-gold-dark));
  border: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(201, 169, 98, 0.3);
  font-family: var(--fb-font-body);
  transition: all 0.2s ease;
}

.fd-add-fund-btn:hover {
  transform: translateY(-2px);
}

.fd-add-fund-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--fd-obsidian);
  stroke-width: 2;
  fill: none;
}

.fd-add-fund-btn span {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-obsidian);
}

/* Holdings Card */
.fd-holdings-card {
  overflow: hidden;
}

.fd-holdings-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--fd-slate);
  display: flex;
  justify-content: space-between;
}

.fd-holding-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--fd-slate);
  cursor: pointer;
  transition: background 0.2s ease;
}

.fd-holding-row:last-child {
  border-bottom: none;
}

.fd-holding-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.fd-holding-rank {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--fd-slate);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--fd-silver);
  flex-shrink: 0;
}

.fd-holding-info {
  flex: 1;
  min-width: 0;
}

.fd-holding-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fd-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-holding-sector {
  font-size: 11px;
  color: var(--fd-silver);
  margin-top: 2px;
}

.fd-holding-weight {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-gold);
  flex-shrink: 0;
}

.fd-holding-arrow {
  flex-shrink: 0;
  opacity: 0.4;
  transition: all 0.2s ease;
}

.fd-holding-row:hover .fd-holding-arrow {
  opacity: 1;
  stroke: var(--fd-gold);
  transform: translateX(2px);
}

/* Allocation link styles */
.fd-alloc-link-icon {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0;
  transition: all 0.2s ease;
  color: var(--fd-silver);
}

.fd-alloc-clickable:hover .fd-alloc-link-icon {
  opacity: 1;
  color: var(--fd-gold);
}

.fd-alloc-clickable {
  position: relative;
}

.fd-alloc-clickable::after {
  content: 'View details \2192';
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 10px;
  color: var(--fd-gold);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.fd-alloc-clickable:hover::after {
  opacity: 0.7;
}

/* CTA Card */
.fd-cta-card {
  padding: 24px;
  text-align: center;
  background: linear-gradient(135deg, rgba(201, 169, 98, 0.15), rgba(166, 139, 61, 0.1));
  border: 1px solid rgba(201, 169, 98, 0.3);
}

.fd-cta-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
  background: var(--fd-gold);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-cta-icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--fd-obsidian);
  stroke-width: 2;
  fill: none;
}

.fd-cta-title {
  font-family: var(--fb-font-display);
  font-size: 20px;
  color: var(--fd-ivory);
  margin-bottom: 8px;
  font-weight: 400;
}

.fd-cta-text {
  font-size: 13px;
  color: var(--fd-silver);
  margin-bottom: 16px;
  line-height: 1.5;
}

.fd-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--fd-gold);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-obsidian);
  cursor: pointer;
  font-family: var(--fb-font-body);
  transition: all 0.2s ease;
}

.fd-cta-btn:hover {
  transform: translateY(-2px);
}

.fd-cta-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--fd-obsidian);
  stroke-width: 2;
  fill: none;
}

/* ========================================
   TOAST NOTIFICATION
======================================== */
.fd-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--fd-graphite);
  border: 1px solid var(--fd-slate);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transition: all 0.4s var(--fd-ease-out-expo);
  z-index: 2000;
}

.fd-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.fd-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fd-toast-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--fd-success);
  stroke-width: 2;
  fill: none;
}

.fd-toast-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--fd-ivory);
}

.fd-toast-subtitle {
  font-size: 12px;
  color: var(--fd-silver);
  margin-top: 2px;
}

/* ========================================
   MODAL
======================================== */
.fd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  overflow: hidden;
  overscroll-behavior: contain;
}

.fd-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Lock page scroll when any modal is visible */
body.fb-modal-open {
  overflow: hidden !important;
}

.fd-modal {
  width: 520px;
  max-height: 80vh;
  background: var(--fd-graphite);
  border: 1px solid var(--fd-slate);
  border-radius: 24px;
  overflow: hidden;
  transform: scale(0.95) translateY(20px);
  transition: all 0.3s var(--fd-ease-out-expo);
}

.fd-modal-overlay.visible .fd-modal {
  transform: scale(1) translateY(0);
}

.fd-modal-header {
  padding: 24px;
  border-bottom: 1px solid var(--fd-slate);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fd-modal-title {
  font-family: var(--fb-font-display);
  font-size: 22px;
  color: var(--fd-ivory);
  font-weight: 400;
}

.fd-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--fd-slate);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fd-modal-close:hover {
  background: var(--fd-pewter);
}

.fd-modal-close svg {
  width: 18px;
  height: 18px;
  stroke: var(--fd-platinum);
  stroke-width: 2;
  fill: none;
}

.fd-modal-body {
  padding: 20px 24px;
  max-height: 400px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fd-modal-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--fd-slate);
  border: 1px solid var(--fd-pewter);
  border-radius: 12px;
  margin-bottom: 16px;
}

.fd-modal-search svg {
  width: 20px;
  height: 20px;
  stroke: var(--fd-silver);
  stroke-width: 2;
  fill: none;
}

.fd-modal-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--fd-ivory);
  font-family: var(--fb-font-body);
}

.fd-modal-category-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

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

.fd-filter-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fd-silver);
  min-width: 80px;
  opacity: 0.7;
}

.fd-category-filter-btn {
  padding: 8px 14px;
  background: var(--fd-slate);
  border: 1px solid var(--fd-pewter);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fd-silver);
  cursor: pointer;
  font-family: var(--fb-font-body);
  transition: all 0.2s ease;
}

.fd-category-filter-btn.active {
  background: var(--fd-gold);
  border-color: var(--fd-gold);
  color: var(--fd-obsidian);
}

.fd-modal-fund-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fd-modal-fund-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--fd-slate);
  border: 1px solid var(--fd-pewter);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fd-modal-fund-item:hover {
  background: var(--fd-pewter);
}

.fd-modal-fund-item.selected {
  border-color: var(--fd-gold);
  background: rgba(201, 169, 98, 0.1);
}

.fd-modal-fund-logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--fd-graphite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-platinum);
  flex-shrink: 0;
}

.fd-modal-fund-info {
  flex: 1;
  min-width: 0;
}

.fd-modal-fund-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--fd-ivory);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fd-modal-fund-meta {
  font-size: 12px;
  color: var(--fd-silver);
  margin-top: 2px;
}

.fd-modal-fund-perf {
  text-align: right;
  flex-shrink: 0;
}

.fd-modal-fund-return {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-success);
}

.fd-modal-fund-return.negative {
  color: var(--fd-error);
}

.fd-modal-fund-label {
  font-size: 11px;
  color: var(--fd-silver);
  margin-top: 2px;
}

.fd-modal-fund-period {
  font-size: 11px;
  color: var(--fd-pewter);
}

.fd-modal-fund-check {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fd-pewter);
  transition: all 0.2s ease;
}

.fd-modal-fund-item.selected .fd-modal-fund-check {
  color: var(--fd-gold);
}

.fd-modal-fund-check svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* --- Synthetic Fund Badge & Labels in Modal --- */
.fd-modal-fund-synthetic-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(167, 139, 250, 0.15);
  color: #a78bfa;
  margin-left: 6px;
  vertical-align: middle;
}

.fd-modal-fund-synthetic-label {
  font-size: 11px;
  color: #a78bfa;
  font-weight: 500;
  font-style: italic;
}

.fd-modal-fund-logo-synthetic {
  background: rgba(167, 139, 250, 0.1) !important;
  border-color: rgba(167, 139, 250, 0.2) !important;
}

.fd-modal-fund-logo-synthetic svg {
  stroke: #a78bfa;
}

.fd-modal-fund-item.synthetic {
  border-left: 2px solid rgba(167, 139, 250, 0.3);
}

/* Synthetic indicator on comparison pills */
.fd-comp-pill-synth {
  font-size: 8px;
  color: #a78bfa;
  margin-right: -2px;
}

.fd-comp-pill[data-synthetic] .fd-comp-pill-dot {
  background: #a78bfa !important;
}

/* --- Synthetic Funds Widget in Modal --- */
.fd-modal-synthetic-section {
  margin: 0 0 16px 0;
  padding: 16px;
  background: rgba(167, 139, 250, 0.06);
  border: 1px solid rgba(167, 139, 250, 0.15);
  border-radius: 12px;
}
.fd-modal-synthetic-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #a78bfa;
}
.fd-modal-synthetic-header svg {
  stroke: #a78bfa;
  flex-shrink: 0;
}
.fd-modal-synthetic-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #a78bfa;
}
.fd-modal-synthetic-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fd-modal-synthetic-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(167, 139, 250, 0.05);
  border: 1px solid rgba(167, 139, 250, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.fd-modal-synthetic-item:hover {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.3);
}
.fd-modal-synthetic-item.selected {
  background: rgba(167, 139, 250, 0.15);
  border-color: #a78bfa;
}
.fd-modal-synthetic-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(167, 139, 250, 0.1);
  flex-shrink: 0;
}
.fd-modal-synthetic-icon svg {
  stroke: #a78bfa;
}
.fd-modal-synthetic-info {
  flex: 1;
  min-width: 0;
}
.fd-modal-synthetic-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-white, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-modal-synthetic-meta {
  font-size: 11px;
  color: #a78bfa;
  margin-top: 2px;
}
.fd-modal-synthetic-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: rgba(167, 139, 250, 0.3);
  transition: color 0.2s ease;
}
.fd-modal-synthetic-item.selected .fd-modal-synthetic-check {
  color: #a78bfa;
}
.fd-modal-synthetic-check svg {
  stroke: currentColor;
  fill: none;
}

.fd-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid var(--fd-slate);
  display: flex;
  gap: 12px;
}

.fd-modal-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--fb-font-body);
  transition: all 0.2s ease;
}

.fd-modal-btn.secondary {
  background: var(--fd-slate);
  color: var(--fd-platinum);
}

.fd-modal-btn.primary {
  background: linear-gradient(135deg, var(--fd-gold), var(--fd-gold-dark));
  color: var(--fd-obsidian);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.fd-selected-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--fd-obsidian);
  border-radius: 50%;
  font-size: 12px;
}

/* ========================================
   LOADING STATE
======================================== */
.fd-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 24px;
}

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

@keyframes fd-spin {
  to { transform: rotate(360deg); }
}

.fd-loading-text {
  font-size: 16px;
  color: var(--fd-silver);
}

/* ========================================
   ERROR STATE
======================================== */
.fd-error-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  text-align: center;
  padding: 40px;
}

.fd-error-icon {
  width: 64px;
  height: 64px;
  background: rgba(248, 113, 113, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fd-error-icon svg {
  width: 32px;
  height: 32px;
  stroke: var(--fd-error);
  stroke-width: 2;
  fill: none;
}

.fd-error-title {
  font-family: var(--fb-font-display);
  font-size: 24px;
  color: var(--fd-ivory);
  font-weight: 400;
}

.fd-error-text {
  font-size: 14px;
  color: var(--fd-silver);
  max-width: 400px;
}

.fd-error-btn {
  margin-top: 8px;
  padding: 12px 24px;
  background: var(--fd-gold);
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-obsidian);
  cursor: pointer;
  font-family: var(--fb-font-body);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 1400px) {
  .fd-main-layout {
    grid-template-columns: 300px 1fr 300px;
  }
}

/* Tablet / iPad landscape — narrower sidebars, keep 3-column layout */
@media (max-width: 1200px) {
  .fd-main-layout {
    grid-template-columns: 240px 1fr 240px;
    gap: 16px;
    padding: 24px 20px 60px;
  }
}

/* Below iPad landscape — single column (phones + small tablets) */
@media (max-width: 1024px) {
  .fd-main-layout {
    grid-template-columns: 1fr;
    padding: calc(var(--fd-header-height) + 24px) 24px 24px;
  }

  .fd-sidebar-left,
  .fd-sidebar-right {
    position: static;
  }

  .fd-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fd-perf-header {
    flex-wrap: wrap;
  }

  .fd-perf-stats {
    width: 100%;
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 900px) {
  .fd-perf-header {
    flex-wrap: wrap;
  }

  .fd-perf-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .fd-perf-stat {
    border-right: none;
    border-bottom: 1px solid rgba(74, 74, 82, 0.3);
    padding-bottom: 12px;
  }

  .fd-perf-stat:nth-child(2n) {
    border-right: none;
  }

  .fd-perf-stat:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .fd-fund-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .fd-fund-title-row .fd-fund-name {
    font-size: 20px;
    white-space: normal;
  }
  .fd-time-periods {
    flex-wrap: wrap;
  }

  .fd-global-nav {
    padding: 0 20px;
  }

  .fd-nav-links {
    display: none;
  }

  .fd-nav-search {
    display: none;
  }

  .fd-main-layout {
    padding: calc(var(--fd-header-height) + 16px) 16px 16px;
    gap: 16px;
  }

  .fd-alloc-grid {
    grid-template-columns: 1fr;
  }

  .fd-insights-grid {
    grid-template-columns: 1fr;
  }
  
  .fd-time-periods {
    flex-wrap: wrap;
  }
}

/* ============================================================================
   SECTION 3: FUND COMPARISON STYLES (from page-fund-comparison.php)
   ============================================================================ */
/* ========================================
   FC - FUND COMPARISON STYLES
   Using fc- prefix per naming convention
======================================== */
:root {
  --fc-obsidian: #0a0a0b;
  --fc-charcoal: #141416;
  --fc-graphite: #1c1c1f;
  --fc-slate: #2a2a2f;
  --fc-pewter: #4a4a52;
  --fc-silver: #8a8a94;
  --fc-platinum: #c4c4cc;
  --fc-ivory: #f4f4f6;
  --fc-white: #ffffff;
  --fc-gold: #c9a962;
  --fc-gold-light: #e4d4a4;
  --fc-gold-dark: #a68b3d;
  --fc-success: #77DB89;
  --fc-error: #f87171;
  --fc-blue: #60a5fa;
  --fc-purple: #a78bfa;
  --fc-pink: #f472b6;
  --fc-orange: #fb923c;
  --fc-cyan: #22d3ee;
  --fc-lime: #a3e635;
  
  --fc-font-display: var(--fb-font-display);
  --fc-font-body: var(--fb-font-body);
  
  --fc-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --fc-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Reset for comparison page */
.fc-page {
  font-family: var(--fc-font-body);
  background: var(--fc-obsidian);
  color: var(--fc-platinum);
  line-height: 1.5;
  min-height: 100vh;
}

.fc-page * {
  box-sizing: border-box;
}

/* ========================================
   HEADER
======================================== */
.fc-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--fc-slate);
}

.fc-header-content {
  max-width: 1920px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.fc-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fc-back-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--fc-graphite);
  border: 1px solid var(--fc-slate);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-back-btn:hover {
  background: var(--fc-slate);
  border-color: var(--fc-pewter);
}

.fc-back-btn svg {
  width: 18px;
  height: 18px;
  stroke: var(--fc-platinum);
  stroke-width: 2;
  fill: none;
}

.fc-page-title {
  font-family: var(--fc-font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--fc-white);
  margin: 0;
}

.fc-page-title .fc-highlight {
  color: var(--fc-gold);
}

.fc-fund-count-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(201, 169, 98, 0.1);
  border: 1px solid rgba(201, 169, 98, 0.2);
  border-radius: 100px;
}

.fc-fund-count-badge span {
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-gold);
}

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

.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-family: var(--fc-font-body);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s var(--fc-ease-out-expo);
}

.fc-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.fc-btn-secondary {
  background: var(--fc-graphite);
  border: 1px solid var(--fc-slate);
  color: var(--fc-platinum);
}

.fc-btn-secondary:hover {
  background: var(--fc-slate);
  border-color: var(--fc-pewter);
}

.fc-btn-primary {
  background: linear-gradient(135deg, var(--fc-gold) 0%, var(--fc-gold-dark) 100%);
  color: var(--fc-obsidian);
  box-shadow: 0 4px 15px rgba(201, 169, 98, 0.3);
}

.fc-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 169, 98, 0.4);
}

/* ========================================
   MAIN CONTAINER
======================================== */
.fc-main-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 32px 32px 120px;
}

/* ========================================
   FUND TABS (Selected Funds)
======================================== */
.fc-fund-tabs-section {
  margin-bottom: 32px;
}

.fc-fund-tabs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fc-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fc-silver);
}

.fc-add-fund-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px dashed var(--fc-pewter);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-silver);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-add-fund-btn:hover {
  border-color: var(--fc-gold);
  color: var(--fc-gold);
  background: rgba(201, 169, 98, 0.05);
}

.fc-add-fund-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.fc-fund-tabs-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.fc-fund-tabs-container::-webkit-scrollbar {
  display: none;
}

.fc-fund-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--fc-graphite);
  border: 1px solid var(--fc-slate);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: 280px;
}

.fc-fund-tab:hover {
  border-color: var(--fc-pewter);
}

.fc-fund-tab.active {
  background: rgba(201, 169, 98, 0.08);
  border-color: var(--fc-gold);
}

.fc-fund-tab-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fc-fund-tab-info {
  flex: 1;
  min-width: 0;
}

.fc-fund-tab-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.fc-fund-tab-meta {
  font-size: 12px;
  color: var(--fc-silver);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-fund-tab-remove {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-slate);
  border: none;
  border-radius: 6px;
  opacity: 0.6;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
}

.fc-fund-tab-remove:hover {
  opacity: 1;
  background: var(--fc-error);
}

.fc-fund-tab-remove svg {
  width: 14px;
  height: 14px;
  stroke: var(--fc-platinum);
  stroke-width: 2;
  fill: none;
}

/* ========================================
   COMPARISON CARDS GRID
======================================== */
.fc-comparison-section {
  margin-bottom: 40px;
}

.fc-comparison-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.fc-comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}

@media (min-width: 1200px) {
  .fc-comparison-grid.two-funds {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .fc-comparison-grid.three-funds {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .fc-comparison-grid.four-funds {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .fc-comparison-grid.five-funds {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ========================================
   FUND COMPARISON CARD
======================================== */
.fc-fund-card {
  background: var(--fc-graphite);
  border: 2px solid var(--fc-slate);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  animation: fc-slideUp 0.5s var(--fc-ease-out-expo) forwards;
  opacity: 0;
}

.fc-fund-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--fc-gold);
}

.fc-fund-card.fund-1::before { background: var(--fc-gold); }
.fc-fund-card.fund-2::before { background: var(--fc-pink); }
.fc-fund-card.fund-3::before { background: var(--fc-cyan); }
.fc-fund-card.fund-4::before { background: var(--fc-purple); }
.fc-fund-card.fund-5::before { background: var(--fc-orange); }

.fc-fund-card:nth-child(1) { animation-delay: 0.1s; }
.fc-fund-card:nth-child(2) { animation-delay: 0.15s; }
.fc-fund-card:nth-child(3) { animation-delay: 0.2s; }
.fc-fund-card:nth-child(4) { animation-delay: 0.25s; }
.fc-fund-card:nth-child(5) { animation-delay: 0.3s; }

.fc-fund-card:hover {
  border-color: var(--fc-pewter);
}

.fc-fund-card-header {
  padding: 20px;
  border-bottom: 1px solid var(--fc-slate);
}

.fc-fund-card-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.fc-fund-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fc-obsidian);
}

.fc-fund-card.fund-1 .fc-fund-logo { background: linear-gradient(135deg, var(--fc-gold), var(--fc-gold-dark)); }
.fc-fund-card.fund-2 .fc-fund-logo { background: linear-gradient(135deg, var(--fc-pink), #db2777); }
.fc-fund-card.fund-3 .fc-fund-logo { background: linear-gradient(135deg, var(--fc-cyan), #0891b2); }
.fc-fund-card.fund-4 .fc-fund-logo { background: linear-gradient(135deg, var(--fc-purple), #7c3aed); }
.fc-fund-card.fund-5 .fc-fund-logo { background: linear-gradient(135deg, var(--fc-orange), #ea580c); }

.fc-fund-card-title-area {
  flex: 1;
  min-width: 0;
}

.fc-fund-card-brand {
  font-size: 11px;
  font-weight: 600;
  color: var(--fc-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.fc-fund-card-name {
  font-family: var(--fc-font-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--fc-white);
  line-height: 1.3;
}

.fc-fund-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.fc-fund-badge {
  padding: 4px 10px;
  background: var(--fc-slate);
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--fc-platinum);
}

.fc-fund-badge.category {
  background: rgba(201, 169, 98, 0.15);
  color: var(--fc-gold);
}

/* ========================================
   FUND STATS GRID
======================================== */
.fc-fund-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--fc-slate);
}

.fc-fund-stat {
  background: var(--fc-graphite);
  padding: 16px;
  text-align: center;
}

.fc-fund-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--fc-white);
  margin-bottom: 4px;
}

.fc-fund-stat-value.positive {
  color: var(--fc-success);
}

.fc-fund-stat-value.negative {
  color: var(--fc-error);
}

.fc-fund-stat-value.gold {
  color: var(--fc-gold);
}

.fc-fund-stat-value.muted {
  color: var(--fc-silver);
}

.fc-fund-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--fc-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ========================================
   TOP SECTORS BAR
======================================== */
.fc-fund-sectors {
  padding: 16px 20px;
}

.fc-fund-sectors-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--fc-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.fc-sectors-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--fc-slate);
}

.fc-sector-segment {
  height: 100%;
  transition: width 0.6s var(--fc-ease-out-expo);
}

.fc-sectors-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.fc-sector-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--fc-silver);
}

.fc-sector-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

/* Sector Colors */
.fc-sector-tech { background: var(--fc-blue); }
.fc-sector-financials { background: var(--fc-gold); }
.fc-sector-consumer { background: var(--fc-pink); }
.fc-sector-healthcare { background: var(--fc-success); }
.fc-sector-industrials { background: var(--fc-orange); }
.fc-sector-comm { background: var(--fc-cyan); }
.fc-sector-energy { background: var(--fc-error); }
.fc-sector-materials { background: var(--fc-purple); }
.fc-sector-utilities { background: var(--fc-lime); }
.fc-sector-other { background: var(--fc-pewter); }

/* ========================================
   PERFORMANCE CHART SECTION
======================================== */
.fc-chart-section {
  background: var(--fc-graphite);
  border: 1px solid var(--fc-slate);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 40px;
}

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

.fc-chart-title {
  font-family: var(--fc-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--fc-white);
  margin: 0;
}

.fc-chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fc-time-periods {
  display: flex;
  background: var(--fc-slate);
  border-radius: 8px;
  padding: 4px;
  gap: 2px;
}

.fc-period-btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-silver);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-period-btn:hover {
  color: var(--fc-platinum);
}

.fc-period-btn.active {
  background: var(--fc-gold);
  color: var(--fc-obsidian);
}

.fc-chart-toggle {
  display: flex;
  background: var(--fc-slate);
  border-radius: 8px;
  padding: 4px;
}

.fc-toggle-btn {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-silver);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-toggle-btn.active {
  background: var(--fc-graphite);
  color: var(--fc-ivory);
}

/* SVG Chart */
.fc-chart-wrapper {
  position: relative;
  height: 300px;
  margin-bottom: 20px;
}

.fc-chart-svg {
  width: 100%;
  height: 100%;
}

.fc-chart-grid-line {
  stroke: var(--fc-slate);
  stroke-width: 1;
}

.fc-chart-label {
  fill: var(--fc-pewter);
  font-size: 11px;
  font-family: var(--fc-font-body);
}

.fc-chart-line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: fc-drawLine 1.5s var(--fc-ease-out-expo) forwards;
}

.fc-chart-line.fund-1 { stroke: var(--fc-gold); stroke-width: 3; animation-delay: 0s; }
.fc-chart-line.fund-2 { stroke: var(--fc-pink); animation-delay: 0.1s; }
.fc-chart-line.fund-3 { stroke: var(--fc-cyan); animation-delay: 0.2s; }
.fc-chart-line.fund-4 { stroke: var(--fc-purple); animation-delay: 0.3s; }
.fc-chart-line.fund-5 { stroke: var(--fc-orange); animation-delay: 0.4s; }
.fc-chart-line.benchmark { stroke: var(--fc-pewter); stroke-dasharray: 6 4; stroke-width: 2; opacity: 0.7; }

.fc-chart-area {
  opacity: 0;
  animation: fc-fadeIn 1s var(--fc-ease-out-expo) 0.5s forwards;
}

.fc-chart-area.fund-1 { fill: url(#fc-gradient1); }
.fc-chart-area.fund-2 { fill: url(#fc-gradient2); }
.fc-chart-area.fund-3 { fill: url(#fc-gradient3); }
.fc-chart-area.fund-4 { fill: url(#fc-gradient4); }
.fc-chart-area.fund-5 { fill: url(#fc-gradient5); }

.fc-chart-dot {
  opacity: 0;
  animation: fc-fadeIn 0.5s var(--fc-ease-out-expo) 1s forwards;
}

@keyframes fc-drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes fc-fadeIn {
  to { opacity: 1; }
}

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

/* Chart Legend */
.fc-chart-legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--fc-slate);
}

.fc-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.fc-legend-item:hover {
  opacity: 0.8;
}

.fc-legend-item.dimmed {
  opacity: 0.3;
}

.fc-legend-color {
  width: 16px;
  height: 4px;
  border-radius: 2px;
}

.fc-legend-color.fund-1 { background: var(--fc-gold); }
.fc-legend-color.fund-2 { background: var(--fc-pink); }
.fc-legend-color.fund-3 { background: var(--fc-cyan); }
.fc-legend-color.fund-4 { background: var(--fc-purple); }
.fc-legend-color.fund-5 { background: var(--fc-orange); }
.fc-legend-color.benchmark { 
  background: repeating-linear-gradient(90deg, var(--fc-pewter) 0px, var(--fc-pewter) 4px, transparent 4px, transparent 8px);
}

.fc-legend-name {
  font-size: 13px;
  color: var(--fc-platinum);
}

.fc-legend-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--fc-white);
}

/* ========================================
   ALLOCATION COMPARISON
======================================== */
.fc-allocation-section {
  background: var(--fc-graphite);
  border: 1px solid var(--fc-slate);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 40px;
}

.fc-allocation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.fc-allocation-title {
  font-family: var(--fc-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--fc-white);
  margin: 0;
}

.fc-allocation-tabs {
  display: flex;
  background: var(--fc-slate);
  border-radius: 8px;
  padding: 4px;
}

.fc-alloc-tab {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-silver);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fc-alloc-tab.active {
  background: var(--fc-graphite);
  color: var(--fc-ivory);
}

.fc-allocation-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fc-allocation-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  align-items: center;
}

@media (max-width: 768px) {
  .fc-allocation-row {
    grid-template-columns: 1fr;
  }
}

.fc-allocation-label {
  font-size: 14px;
  color: var(--fc-platinum);
}

.fc-allocation-bars {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fc-allocation-bar-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fc-allocation-bar {
  flex: 1;
  height: 24px;
  background: var(--fc-slate);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.fc-allocation-bar-fill {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fc-obsidian);
  transition: width 0.6s var(--fc-ease-out-expo);
}

.fc-allocation-bar-fill.fund-1 { background: var(--fc-gold); }
.fc-allocation-bar-fill.fund-2 { background: var(--fc-pink); }
.fc-allocation-bar-fill.fund-3 { background: var(--fc-cyan); }
.fc-allocation-bar-fill.fund-4 { background: var(--fc-purple); }
.fc-allocation-bar-fill.fund-5 { background: var(--fc-orange); }

.fc-allocation-bar-value {
  font-size: 12px;
  font-weight: 600;
  color: var(--fc-platinum);
  min-width: 45px;
  text-align: right;
}

/* ========================================
   HOLDINGS COMPARISON
======================================== */
.fc-holdings-section {
  background: var(--fc-graphite);
  border: 1px solid var(--fc-slate);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 40px;
}

.fc-holdings-header {
  margin-bottom: 24px;
}

.fc-holdings-title {
  font-family: var(--fc-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--fc-white);
  margin: 0;
}

.fc-holdings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.fc-holdings-column {
  background: var(--fc-charcoal);
  border: 1px solid var(--fc-slate);
  border-radius: 14px;
  overflow: hidden;
}

.fc-holdings-column-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--fc-slate);
  display: flex;
  align-items: center;
  gap: 10px;
}

.fc-holdings-column-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.fc-holdings-column-color.fund-1 { background: var(--fc-gold); }
.fc-holdings-column-color.fund-2 { background: var(--fc-pink); }
.fc-holdings-column-color.fund-3 { background: var(--fc-cyan); }
.fc-holdings-column-color.fund-4 { background: var(--fc-purple); }
.fc-holdings-column-color.fund-5 { background: var(--fc-orange); }

.fc-holdings-column-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--fc-white);
  flex: 1;
}

.fc-holding-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--fc-slate);
}

.fc-holding-item:last-child {
  border-bottom: none;
}

.fc-holding-item.shared {
  background: rgba(201, 169, 98, 0.05);
  border-left: 3px solid var(--fc-gold);
}

.fc-holding-rank {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fc-slate);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fc-silver);
  flex-shrink: 0;
}

.fc-holding-info {
  flex: 1;
  min-width: 0;
}

.fc-holding-name {
  font-size: 13px;
  color: var(--fc-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fc-holding-ticker {
  font-size: 11px;
  color: var(--fc-pewter);
}

.fc-holding-weight {
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-gold);
}

/* ========================================
   METRICS TABLE
======================================== */
.fc-metrics-section {
  background: var(--fc-graphite);
  border: 1px solid var(--fc-slate);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 40px;
  overflow-x: auto;
}

.fc-metrics-header {
  margin-bottom: 24px;
}

.fc-metrics-title {
  font-family: var(--fc-font-display);
  font-size: 22px;
  font-weight: 500;
  color: var(--fc-white);
  margin: 0;
}

.fc-metrics-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.fc-metrics-table th,
.fc-metrics-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--fc-slate);
}

.fc-metrics-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--fc-silver);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--fc-charcoal);
}

.fc-metrics-table th:first-child {
  border-radius: 8px 0 0 0;
}

.fc-metrics-table th:last-child {
  border-radius: 0 8px 0 0;
}

.fc-metrics-table td {
  font-size: 14px;
  color: var(--fc-platinum);
}

.fc-metrics-table td:first-child {
  font-weight: 600;
  color: var(--fc-white);
}

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

.fc-metrics-table .positive {
  color: var(--fc-success);
}

.fc-metrics-table .negative {
  color: var(--fc-error);
}

.fc-fund-indicator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fc-fund-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.fc-fund-indicator-dot.fund-1 { background: var(--fc-gold); }
.fc-fund-indicator-dot.fund-2 { background: var(--fc-pink); }
.fc-fund-indicator-dot.fund-3 { background: var(--fc-cyan); }
.fc-fund-indicator-dot.fund-4 { background: var(--fc-purple); }
.fc-fund-indicator-dot.fund-5 { background: var(--fc-orange); }

/* ========================================
   EMPTY STATE
======================================== */
.fc-empty-state {
  text-align: center;
  padding: 80px 24px;
}

.fc-empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background: var(--fc-graphite);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fc-empty-state-icon svg {
  width: 36px;
  height: 36px;
  stroke: var(--fc-pewter);
  stroke-width: 1.5;
  fill: none;
}

.fc-empty-state-title {
  font-family: var(--fc-font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--fc-white);
  margin-bottom: 12px;
}

.fc-empty-state-desc {
  font-size: 16px;
  color: var(--fc-silver);
  margin-bottom: 32px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   LOADING STATE
======================================== */
.fc-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}

.fc-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--fc-slate);
  border-top-color: var(--fc-gold);
  border-radius: 50%;
  animation: fc-spin 1s linear infinite;
  margin-bottom: 24px;
}

@keyframes fc-spin {
  to { transform: rotate(360deg); }
}

.fc-loading-text {
  font-size: 16px;
  color: var(--fc-silver);
}

/* ========================================
   RESPONSIVE
======================================== */
@media (max-width: 768px) {
  .fc-header-content {
    flex-wrap: wrap;
  }
  
  .fc-fund-tab {
    min-width: 240px;
  }
  
  .fc-chart-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .fc-chart-controls {
    width: 100%;
    flex-wrap: wrap;
  }
  
  .fc-time-periods {
    flex: 1;
    justify-content: space-between;
  }
}

/* ============================================================================
   SECTION 4: GRID FIX - Force 3 columns
   ============================================================================ */
#fundsGrid,
.funds-grid,
.ff-funds-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 1400px) {
  #fundsGrid,
  .funds-grid,
  .ff-funds-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  #fundsGrid,
  .funds-grid,
  .ff-funds-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   GRID OVERRIDE - Ensure 3 columns on desktop
   ============================================================================ */
.ff-grid,
#fundsGrid,
.funds-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

@media (max-width: 1200px) {
  .ff-grid,
  #fundsGrid,
  .funds-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .ff-grid,
  #fundsGrid,
  .funds-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================================
   CSS FIX: Sector Legend Container
   ============================================================================ */
.sector-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  margin-top: 8px;
  font-size: 11px;
  color: var(--ff-text-muted, #8a8a94);
}

.sector-legend-item {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

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

.sector-legend-text {
  font-size: 11px;
  color: var(--ff-text-muted, #8a8a94);
}

/* Allocation Bar Container */
.fund-allocation-bar {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ff-border, #2a2a2f);
}

.allocation-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.allocation-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ff-text-dim, #5a5a64);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.allocation-bar-container {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--ff-border, #2a2a2f);
}

.sector-segment {
  height: 100%;
  min-width: 3px;
}

/* ============================================================================
   Filter Option — grid layout aligns checkbox to label + hint cleanly
   ============================================================================ */
.filter-option {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  padding: 9px 12px;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  width: 100%;
  text-align: left;
  min-height: 44px;                     /* consistent row height */
}

.filter-option:hover {
  background: var(--ff-card-hover, #1c1c1f);
}

.filter-option.selected {
  background: rgba(201, 169, 98, 0.1);
}

.filter-checkbox {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: start;
  margin-top: 3px;                      /* optically aligns with label cap-height */
  width: 18px;
  height: 18px;
  background: transparent;
  border: 1.5px solid var(--ff-border-light, #3a3a42);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.filter-option.selected .filter-checkbox {
  background: var(--ff-gold, #c9a962);
  border-color: var(--ff-gold, #c9a962);
}

.filter-checkbox svg {
  width: 12px;
  height: 12px;
  stroke: transparent;
  stroke-width: 3;
  fill: none;
  display: none;
}

.filter-option.selected .filter-checkbox svg {
  stroke: #0a0a0b;
  display: block;
}

.filter-label {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ff-text, #c4c4cc);
}

.filter-hint {
  grid-column: 2;
  grid-row: 2;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ff-text-dim, #5a5a64);
}

/* Fallback/legacy names kept for any stale consumers */
.filter-label-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ff-text, #c4c4cc);
}
.filter-label-desc {
  font-size: 12px;
  color: var(--ff-text-dim, #5a5a64);
}

/* ============================================================================
   Light-mode checkbox colors (canonical filter-option / filter-group styles
   live earlier in this file — see "Filter Option — grid layout".)
   ============================================================================ */
[data-theme="light"] .filter-checkbox {
  border-color: #c8c8d0;
  background: transparent;
}
[data-theme="light"] .filter-option.selected .filter-checkbox {
  background: var(--ff-gold, #b8942e);
  border-color: var(--ff-gold, #b8942e);
}
[data-theme="light"] .filter-option.selected .filter-checkbox svg {
  stroke: #fff;
}

/* Empty state */
.filter-empty {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ff-text-dim, #5a5a64);
}

/* Clear All button */
.ff-clear-btn {
  font-size: 13px;
  color: var(--ff-text-muted, #8a8a94);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.ff-clear-btn:hover {
  color: var(--ff-gold, #c9a962);
  background: rgba(201, 169, 98, 0.1);
}

/* Sidebar card padding */
.ff-sidebar-card {
  padding: 20px !important;
}

.ff-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ff-border, #2a2a2f);
}

.ff-sidebar-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--ff-white, #ffffff) !important;
  margin: 0 !important;
}
/* ============================================================================
   SECTION 5: AI ANALYSIS SUMMARY CARD
   Styles for .fd-ai-summary-card (#fdAiSummaryCard)
   Matches HTML structure in page-fund-detail.php lines 232-319
   ============================================================================ */

/* Card Container */
.fd-ai-summary-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(168, 85, 247, 0.25);
  background: linear-gradient(135deg, var(--fd-graphite, #1c1c1f) 0%, #1a1a2e 100%);
}

/* ── Header ── */
.fd-ai-summary-header {
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.08) 0%, rgba(236, 72, 153, 0.06) 100%);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}

.fd-ai-summary-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fd-ai-summary-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fd-ai-summary-title {
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #a855f7, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.fd-ai-summary-confidence {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 5px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 100px;
  font-size: 12px;
}

.fd-ai-conf-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fd-silver, #8a8a94);
}

.fd-ai-conf-dot.high {
  background: #77DB89;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}

.fd-ai-conf-dot.medium {
  background: var(--fd-gold, #c9a962);
  box-shadow: 0 0 6px rgba(201, 169, 98, 0.5);
}

.fd-ai-conf-dot.low {
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.5);
}

.fd-ai-conf-label {
  color: var(--fd-platinum, #c4c4cc);
  font-weight: 500;
}

/* ── Scenario Bar ── */
.fd-ai-scenario-bar {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fd-ai-scenario-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fd-ai-scenario-bear,
.fd-ai-scenario-base,
.fd-ai-scenario-bull {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fd-ai-scenario-case {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fd-silver, #8a8a94);
}

.fd-ai-scenario-val {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.fd-ai-scenario-bear .fd-ai-scenario-val {
  color: #f87171;
}

.fd-ai-scenario-base .fd-ai-scenario-val {
  color: var(--fd-gold, #c9a962);
}

.fd-ai-scenario-bull .fd-ai-scenario-val {
  color: #77DB89;
}

/* Track / Range / Marker */
.fd-ai-scenario-track {
  position: relative;
  height: 8px;
  background: var(--fd-slate, #2a2a2f);
  border-radius: 4px;
  overflow: visible;
}

.fd-ai-scenario-range {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f87171, var(--fd-gold, #c9a962), #77DB89);
  opacity: 0.7;
}

.fd-ai-scenario-marker {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background: var(--fd-gold, #c9a962);
  border: 3px solid var(--fd-graphite, #1c1c1f);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(201, 169, 98, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

/* ── Thesis ── */
.fd-ai-thesis {
  padding: 20px 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fd-platinum, #c4c4cc);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Drivers & Risks Grid ── */
.fd-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.fd-ai-grid-col {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fd-ai-grid-col:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.fd-ai-grid-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fd-silver, #8a8a94);
  margin-bottom: 14px;
}

.fd-ai-grid-title svg {
  flex-shrink: 0;
}

/* Driver items */
.fd-ai-driver-item,
.fd-ai-risk-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.fd-ai-driver-item:last-child,
.fd-ai-risk-item:last-child {
  border-bottom: none;
}

.fd-ai-driver-factor,
.fd-ai-risk-factor {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-ivory, #f4f4f6);
  margin-bottom: 6px;
}

.fd-ai-driver-impact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.fd-ai-driver-impact.positive {
  background: rgba(74, 222, 128, 0.15);
  color: #77DB89;
}

.fd-ai-driver-impact.negative {
  background: rgba(248, 113, 113, 0.15);
  color: #f87171;
}

.fd-ai-driver-impact.neutral {
  background: rgba(201, 169, 98, 0.15);
  color: var(--fd-gold, #c9a962);
}

.fd-ai-risk-severity {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.fd-ai-risk-severity.high {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.fd-ai-risk-severity.medium {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}

.fd-ai-risk-severity.low {
  background: rgba(74, 222, 128, 0.15);
  color: #77DB89;
}

.fd-ai-driver-explanation,
.fd-ai-risk-explanation {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fd-silver, #8a8a94);
  padding-left: 30px;
}

/* ── Insights Row ── */
.fd-ai-insights-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.fd-ai-insight-item {
  padding: 16px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fd-ai-insight-item:last-child {
  border-right: none;
}

.fd-ai-insight-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fd-gold, #c9a962);
}

.fd-ai-insight-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--fd-silver, #8a8a94);
}

/* ── Disclaimer ── */
.fd-ai-summary-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 24px;
  background: rgba(249, 115, 22, 0.06);
  font-size: 11px;
  color: var(--fd-pewter, #4a4a52);
  line-height: 1.5;
}

.fd-ai-summary-disclaimer svg {
  flex-shrink: 0;
  color: #f97316;
  opacity: 0.6;
  margin-top: 1px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .fd-ai-grid {
    grid-template-columns: 1fr;
  }
  
  .fd-ai-grid-col:first-child {
    border-right: none;
  }
  
  .fd-ai-insights-row {
    grid-template-columns: 1fr;
  }
  
  .fd-ai-insight-item {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  .fd-ai-insight-item:last-child {
    border-bottom: none;
  }
  
  .fd-ai-summary-confidence {
    margin-left: 0;
    margin-top: 8px;
  }
  
  .fd-ai-summary-title-row {
    flex-wrap: wrap;
  }
  
  .fd-ai-scenario-val {
    font-size: 15px;
  }
}

/* ============================================================================
   SECTION 5b: PERF HEADER LAYOUT & PIN SWITCH
   ============================================================================ */

/* REMOVED: .fd-perf-header-row — wrapper no longer exists in DOM (layout restructure) */
/* Time periods moved to .fd-fund-title-row, comparing badge is sibling of .fd-perf-stats */

/* Row 2: Pin type switch + AI toggle */
.fd-feature-toggles {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Pin Type Segmented Switch ── */
.fd-pin-switch {
  display: flex;
  background: var(--fd-slate, #2a2a2f);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}

.fd-pin-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fd-silver, #8a8a94);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.fd-pin-switch-btn:hover {
  color: var(--fd-platinum, #c4c4cc);
  background: rgba(255, 255, 255, 0.04);
}

.fd-pin-switch-btn.active {
  background: var(--fd-graphite, #1c1c1f);
  color: var(--fd-ivory, #f4f4f6);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.fd-pin-switch-btn.active[data-pin-type="news"] {
  color: var(--fd-blue, #60a5fa);
}

.fd-pin-switch-btn.active[data-pin-type="macro"] {
  color: #77DB89;
}

.fd-pin-switch-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.fd-pin-switch-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fd-pin-switch-btn.active[data-pin-type="news"] .fd-pin-switch-count {
  background: var(--fd-blue, #60a5fa);
}

.fd-pin-switch-btn.active[data-pin-type="macro"] .fd-pin-switch-count {
  background: #77DB89;
}

.fd-pin-switch-btn:not(.active) .fd-pin-switch-count {
  background: var(--fd-pewter, #4a4a52);
}

/* ── Remove custom nav (Salient handles it) ── */
.fd-global-nav {
  display: none !important;
}

/* Adjust main layout since custom nav is gone - Salient theme provides its own header */
.fd-page .fd-main-layout {
  padding-top: 32px;
}

.fd-page .fd-sidebar-left,
.fd-page .fd-sidebar-right {
  top: 32px;
}

/* ============================================================================
   SECTION 6: REDESIGNED INSIGHTS + NEWS CARDS
   ============================================================================ */

/* ── Insight Cards (replaces old image-based cards) ── */
.fd-insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.fd-insight-card {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: var(--fd-slate, #2a2a2f);
  border-radius: 14px;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  cursor: default;
}

.fd-insight-card:hover {
  border-color: var(--fd-pewter, #4a4a52);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.fd-insight-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fd-insight-card-icon svg {
  width: 20px;
  height: 20px;
}

.fd-insight-card-body {
  flex: 1;
  min-width: 0;
}

.fd-insight-card-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
}

.fd-insight-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fd-ivory, #f4f4f6);
  line-height: 1.3;
  margin-bottom: 4px;
}

.fd-insight-card-desc {
  font-size: 12px;
  color: var(--fd-silver, #8a8a94);
  line-height: 1.5;
}

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

/* ── News Featured + Grid Layout ── */
.fd-news-featured {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: var(--fd-slate, #2a2a2f);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  margin-bottom: 16px;
}

.fd-news-featured:hover {
  background: var(--fd-pewter, #4a4a52);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.fd-news-featured-img {
  width: 200px;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--fd-graphite, #1c1c1f);
}

.fd-news-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fd-news-featured-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.fd-news-featured-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fd-silver, #8a8a94);
  margin-bottom: 10px;
}

.fd-news-featured-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--fd-ivory, #f4f4f6);
  line-height: 1.4;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fd-news-featured-excerpt {
  font-size: 13px;
  color: var(--fd-silver, #8a8a94);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fd-news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.fd-news-grid-item {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--fd-slate, #2a2a2f);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.fd-news-grid-item:hover {
  background: var(--fd-pewter, #4a4a52);
  transform: translateY(-1px);
}

.fd-news-grid-img {
  width: 72px;
  height: 54px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--fd-graphite, #1c1c1f);
}

.fd-news-grid-img.no-img {
  display: none;
}

.fd-news-grid-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fd-news-grid-body {
  flex: 1;
  min-width: 0;
}

.fd-news-grid-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fd-ivory, #f4f4f6);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fd-news-grid-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--fd-pewter, #4a4a52);
}

.fd-news-time {
  opacity: 0.7;
}

.fd-news-item-symbol {
  padding: 2px 6px;
  background: rgba(201, 169, 98, 0.2);
  color: var(--fd-gold, #c9a962);
  border-radius: 4px;
  font-weight: 600;
  font-size: 10px;
}

@media (max-width: 768px) {
  .fd-news-featured { flex-direction: column; }
  .fd-news-featured-img { width: 100%; height: 160px; }
  .fd-news-grid { grid-template-columns: 1fr; }
}

/* ── Allocation bar cleanup (no label row) ── */
.fd-alloc-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fd-alloc-bar-row .fd-alloc-bars {
  flex: 1;
}

/* ============================================================================
   SECTION 7: COMPETITOR PILLS + CHART CONTROLS BAR
   ============================================================================ */

/* ── Competitor Pills (below chart) ── */
.fd-competitor-tags {
  display: none;  /* shown by JS when competitors exist */
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--fd-slate, #2a2a2f);
}

.fd-comp-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid #60a5fa;
  border-radius: 100px;
  font-size: 12px;
  color: var(--fd-ivory, #f4f4f6);
  transition: all 0.2s ease;
}

.fd-comp-pill:hover {
  background: rgba(255, 255, 255, 0.06);
}

.fd-comp-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fd-comp-pill-name {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.fd-comp-pill-x {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--fd-silver, #8a8a94);
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  flex-shrink: 0;
}

.fd-comp-pill-x:hover {
  background: rgba(248, 113, 113, 0.2);
  color: #f87171;
}

/* ── Chart Controls Bar (inside perf-header, right column) ── */
.fd-chart-controls-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  min-width: 0;
  gap: 12px;
}

/* Toolbar group: chart type toggles + overlay toggles */
.fd-chart-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Hide old benchmark header (we moved the + button) */
.fd-benchmark-header {
  display: none;
}

/* Override: remove the old feature-toggles row since it moved */
.fd-feature-toggles {
  display: none !important;
}

/* ============================================================================

/* ── §10/10B: Glassmorphism cards + ambient glow ────────────────────── */
   SECTION 10: GLASSMORPHISM CARDS + SOFT CHART LINES
   ============================================================================ */

/* ── Glass card treatment — Dark mode ── */
.fd-card,
.fd-fund-header-card,
.fd-performance-card,
.fd-allocation-card,
.fd-insights-card,
.fd-news-card,
.fd-compare-card,
.fd-holdings-card,
.fd-cta-card {
  background: linear-gradient(
    135deg,
    rgba(28, 28, 31, 0.85) 0%,
    rgba(20, 20, 22, 0.92) 50%,
    rgba(28, 28, 31, 0.85) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Fund finder cards */
.fund-card {
  background: linear-gradient(
    135deg,
    rgba(28, 28, 31, 0.85) 0%,
    rgba(20, 20, 22, 0.92) 50%,
    rgba(28, 28, 31, 0.85) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.fund-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Fund finder sidebar */
.ff-sidebar-card {
  background: linear-gradient(
    180deg,
    rgba(28, 28, 31, 0.88) 0%,
    rgba(20, 20, 22, 0.95) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Discover cards */
.discover-card {
  background: linear-gradient(
    180deg,
    rgba(28, 28, 31, 0.8) 0%,
    rgba(20, 20, 22, 0.9) 100%
  );
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.discover-card:hover {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Comparison page cards */
.fc-fund-card,
.fc-chart-section,
.fc-allocation-section,
.fc-holdings-section,
.fc-metrics-section {
  background: linear-gradient(
    135deg,
    rgba(28, 28, 31, 0.85) 0%,
    rgba(20, 20, 22, 0.92) 50%,
    rgba(28, 28, 31, 0.85) 100%
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Perf stats row */
.fd-perf-stats {
  background: transparent;
  border: none;
}

/* Allocation grid items */
.fd-alloc-row {
  background: linear-gradient(
    135deg,
    rgba(42, 42, 47, 0.5) 0%,
    rgba(28, 28, 31, 0.6) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.04);
}

.fd-alloc-row:hover {
  background: linear-gradient(
    135deg,
    rgba(74, 74, 82, 0.4) 0%,
    rgba(42, 42, 47, 0.5) 100%
  );
}

/* Holdings rows */
.fd-holding-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* Info rows */
.fd-info-row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── Light mode cards — solid white surface per design contract.
   Was a cream-tinted glass which made every card read as monochrome
   yellow on the cream page bg. Now uses --surface (#ffffff) and --border
   (neutral) so the page reads as white cards on a cool ivory bg with
   gold reserved for accents only. */
[data-theme="light"] .fd-card,
[data-theme="light"] .fd-fund-header-card,
[data-theme="light"] .fd-performance-card,
[data-theme="light"] .fd-allocation-card,
[data-theme="light"] .fd-insights-card,
[data-theme="light"] .fd-news-card,
[data-theme="light"] .fd-compare-card,
[data-theme="light"] .fd-holdings-card,
[data-theme="light"] .fd-cta-card {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .fund-card {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .fund-card:hover {
  border-color: rgba(201, 169, 98, 0.20);
  box-shadow: var(--shadow-elevated);
}

[data-theme="light"] .ff-sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .discover-card {
  background: var(--surface);
  border: 1px solid var(--border);
}

[data-theme="light"] .fc-fund-card,
[data-theme="light"] .fc-chart-section,
[data-theme="light"] .fc-allocation-section,
[data-theme="light"] .fc-holdings-section,
[data-theme="light"] .fc-metrics-section {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

[data-theme="light"] .fd-perf-stats {
  background: transparent;
  border: none;
}

[data-theme="light"] .fd-alloc-row {
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
}
[data-theme="light"] .fd-alloc-row:hover {
  background: var(--surface);
  border-color: var(--border);
}

[data-theme="light"] .fd-holding-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .fd-info-row {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}


/* ── Chart lines — softer, lower contrast ── */

/* Dark mode chart */
.fd-line-chart {
  background: rgba(42, 42, 47, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* LW Charts container */
.fd-lw-chart-container {
  border-radius: 14px;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: contain;
}

/* Light mode chart */
[data-theme="light"] .fd-line-chart,
[data-theme="light"] .fd-lw-chart-container {
  background: rgba(248, 248, 250, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

/* Soften SVG grid/axis lines — dark mode */
.fd-chart-svg line,
.fd-chart-svg .grid-line,
.fc-chart-grid-line {
  stroke: rgba(255, 255, 255, 0.04) !important;
}

.fd-chart-x-axis,
.fd-chart-y-axis {
  opacity: 0.5;
}

/* Soften SVG grid/axis lines — light mode */
[data-theme="light"] .fd-chart-svg line,
[data-theme="light"] .fd-chart-svg .grid-line,
[data-theme="light"] .fc-chart-grid-line {
  stroke: rgba(0, 0, 0, 0.05) !important;
}

/* Soften benchmark dashed line */
.fd-chart-line.benchmark {
  stroke: rgba(138, 138, 148, 0.4);
}

[data-theme="light"] .fd-chart-line.benchmark {
  stroke: rgba(106, 106, 116, 0.35);
}

/* Soften the zero/reference lines in bar charts */
.fd-bar-zero-line {
  border-top-color: rgba(74, 74, 82, 0.3) !important;
}

[data-theme="light"] .fd-bar-zero-line {
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* =========================================================
   Perf stats render FLAT — no borders, no backgrounds, no glass.
   !important guards against stale cached rules and future
   selector additions that try to decorate these elements.
   ========================================================= */
.fd-perf-stats,
[data-theme="light"] .fd-perf-stats,
.fd-perf-stat,
[data-theme="light"] .fd-perf-stat {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.fd-perf-stats::before,
.fd-perf-stats::after,
.fd-perf-stat::before,
.fd-perf-stat::after {
  display: none !important;
  content: none !important;
}

/* Soften card section dividers */
.fd-info-card-header,
.fd-holdings-header,
.fd-alloc-header,
.fd-news-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .fd-info-card-header,
[data-theme="light"] .fd-holdings-header,
[data-theme="light"] .fd-alloc-header,
[data-theme="light"] .fd-news-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* Soften allocation tab backgrounds */
.fd-allocation-tabs {
  background: rgba(42, 42, 47, 0.5);
}

[data-theme="light"] .fd-allocation-tabs {
  background: rgba(226, 226, 232, 0.5);
}

/* Soften period buttons */
.fd-period-btn {
  border: 1px solid rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .fd-period-btn {
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* LW Charts overrides — make grid lines subtle */
.fd-lw-chart-container .tv-lightweight-charts table,
.fd-lw-chart-container canvas + table {
  opacity: 0.95;
}


/* ============================================================================
   SECTION 10B: AMBIENT GLOW — Subtle radial gradients behind key surfaces
   ============================================================================ */

/* Fund header card — warm gold ambient glow (already has ::before, enhance it) */
.fd-fund-header-card::before {
  background: linear-gradient(180deg, rgba(124, 58, 237, 0.04), rgba(201, 169, 98, 0.03), transparent) !important;
  height: 120px !important;
}

/* Performance card — subtle cool glow top-right */
.fd-performance-card {
  position: relative;
  overflow: visible;
}
.fd-performance-card::after {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Allocation card — purple glow bottom-left */
.fd-allocation-card {
  position: relative;
  overflow: hidden;
}
.fd-allocation-card::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -40px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(167, 139, 250, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Sidebar sections — very faint warm glow */
.fd-sidebar-left .fd-card::after,
.fd-sidebar-right .fd-card::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(201, 169, 98, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.fd-sidebar-left .fd-card,
.fd-sidebar-right .fd-card {
  position: relative;
  overflow: hidden;
}

/* Ambient page glows removed — were rendering as visible circles */

/* Light mode ambient glows — warmer, golden tones */
[data-theme="light"] .fd-fund-header-card::before {
  background: linear-gradient(180deg, rgba(184, 148, 46, 0.04), rgba(201, 169, 98, 0.02), transparent) !important;
}

[data-theme="light"] .fd-performance-card::after {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.03) 0%, transparent 70%);
}

[data-theme="light"] .fd-allocation-card::after {
  background: radial-gradient(circle, rgba(124, 58, 237, 0.03) 0%, transparent 70%);
}

[data-theme="light"] .fd-sidebar-left .fd-card::after,
[data-theme="light"] .fd-sidebar-right .fd-card::after {
  background: radial-gradient(circle, rgba(184, 148, 46, 0.03) 0%, transparent 70%);
}

/* Light mode page glows removed with dark mode counterparts above */

/* ── fund-detail-redesign.css ─────────────────────────────────────────── */
/* ============================================================================
   FUND DETAIL — Redesign against the Funds Benchmark Design System (Phase B)

   Loaded AFTER fundbenchmark-design-system.css. Overrides the legacy
   .fd-* page-specific rules so the fund-detail page reads as an expression
   of the design system rather than its own custom aesthetic.

   Non-destructive: we leave the PHP markup intact and ride the existing
   DOM IDs/classes. Layout and visual tokens are re-pointed at design-system
   tokens (--surface, --text, --accent, --r-card, --shadow-card, etc.).

   Change log (2026-04-24):
     - Scrap the vertical carousel — render all 4 headline stats in a grid
     - Adopt the design-system chip pattern for every stat
     - Retype fund name + labels (Montserrat display / DM Sans body)
     - Unify card borders, radii, shadows
     - Button/pill/icon primitives pull from .fb-btn, .fb-pill
   ============================================================================ */

/* ── Page chrome ──────────────────────────────────────────────────────── */
.fd-page {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* ── Card surfaces (sidebar + main) ──────────────────────────────────── */
.fd-card,
.fd-fund-header-card,
.fd-performance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  transition: border-color var(--dur) var(--ease);
}
.fd-card + .fd-card { margin-top: var(--sp-4); }

/* ── Sidebar: fund identity ──────────────────────────────────────────── */
.fd-sidebar-fund-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin: 0 0 var(--sp-3) 0;
  word-break: break-word;
}

/* Share class picker dropdown — neutral surface-2, gold focus ring */
.fd-share-class-select {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease);
  cursor: pointer;
}
.fd-share-class-select:hover,
.fd-share-class-select:focus {
  border-color: var(--accent);
  outline: none;
}

/* Action icon buttons (watch / share) */
.fd-header-actions { gap: var(--sp-2); }
.fd-action-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fd-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fd-action-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.fd-action-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}
#fdWatchBtn svg { fill: currentColor; stroke: none; }

/* Fund meta pills (Active / Equity / Global) */
.fd-meta-tag {
  display: inline-flex;
  padding: 3px 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--text-2);
  margin-right: var(--sp-1);
}
.fd-meta-tag.category { background: var(--gold-15); color: var(--gold); }
.fd-meta-tag.type     { background: rgba(96, 165, 250, 0.15); color: var(--fb-info); }
.fd-meta-tag.region   { background: rgba(167, 139, 250, 0.15); color: #a78bfa; }

/* Fund info rows */
.fd-info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  gap: var(--sp-3);
}
.fd-info-row:last-child { border-bottom: none; }
.fd-info-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-transform: uppercase;
  flex-shrink: 0;
}
.fd-info-value {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

/* ── Performance card header: scrap carousel, flat 4-col stat grid ──── */
.fd-perf-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  /* Split into columns only once there's headroom */
}
@media (min-width: 1100px) {
  .fd-perf-header {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-6);
  }
}

.fd-perf-stats {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1 1 auto;
  min-width: 0;
}

/* Carousel container — rewritten to render ALL items simultaneously as a
   4-col stat grid. Keeps existing #fdHeroCarousel + .fd-hero-item markup
   so JS bindings continue to resolve; visual shape is now a flat grid.  */
.fd-hero-carousel {
  position: static;
  height: auto;
  overflow: visible;
  cursor: default;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.fd-hero-item {
  position: static !important;
  transform: none !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transition: none !important;

  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.fd-hero-item[data-state] { opacity: 1 !important; transform: none !important; }

.fd-hero-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

.fd-hero-value {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fd-hero-value.pos,
.fd-hero-value:not(.neutral):not(.negative) { color: var(--pos); }
.fd-hero-value.negative { color: var(--neg); }
.fd-hero-value.neutral  { color: var(--text); }

/* Secondary KPI row — OCF / Volatility / Sharpe */
.fd-kpi-row-secondary {
  display: flex;
  justify-content: flex-start;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.fd-perf-stat-sm {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
}
.fd-perf-value-sm {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.fd-perf-value-sm.negative { color: var(--neg); }
.fd-perf-value-sm.neutral  { color: var(--text); }
.fd-perf-label-sm {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Volatility signal icon keeps its traffic-light semantics, new vars */
.fd-perf-value-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.fd-vol-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
#fdPerfVolStat.vol-low  .fd-vol-icon { color: var(--pos); }
#fdPerfVolStat.vol-mid  .fd-vol-icon { color: var(--fb-warning); }
#fdPerfVolStat.vol-high .fd-vol-icon { color: var(--neg); }
#fdPerfVolStat.vol-none .fd-vol-icon { color: var(--text-dim); opacity: 0.5; }

/* ── Right rail: chart period pills + icon toolbar ───────────────────── */
.fd-perf-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.fd-time-periods {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
}
.fd-period-btn {
  padding: 6px 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: calc(var(--r-xl) - 4px);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  white-space: nowrap;
}
.fd-period-btn:hover:not(.active) {
  color: var(--text);
  background: var(--border-soft);
}
.fd-period-btn.active {
  background: var(--accent);
  color: var(--accent-ink);
}

/* Chart toolbar row */
.fd-chart-controls-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
}
.fd-chart-toolbar {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}
.fd-toolbar-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--sp-1);
}

.fd-toggle-btn,
.fd-overlay-btn,
.fd-add-competitor-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fd-toggle-btn:hover,
.fd-overlay-btn:hover,
.fd-add-competitor-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fd-toggle-btn.active,
.fd-overlay-btn.active,
.fd-overlay-btn.active[data-pin-type="news"],
.fd-overlay-btn.active[data-pin-type="macro"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.fd-toggle-icon,
.fd-overlay-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.fd-add-competitor-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

/* Pin count badges on overlay buttons */
.fd-overlay-btn .fd-pin-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Chart container ─────────────────────────────────────────────────── */
.fd-chart-container {
  background: var(--surface);
  border-radius: var(--r-card);
}
.fd-lw-chart-container { min-height: 400px; }

/* Chart legend pills */
.fd-chart-legend {
  display: flex;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--border-soft);
  margin-top: var(--sp-3);
}
.fd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}
.fd-legend-line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
}
.fd-legend-line.fund       { background: var(--accent); }
.fd-legend-line.benchmark  { background: var(--text-muted); }

/* ── Section title within cards ──────────────────────────────────────── */
.fd-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
  display: block;
}

/* ── Loading state (inherits design-system spinner) ──────────────────── */
.fd-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-8);
  color: var(--text-muted);
}
.fd-loading-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fb-spin 0.8s linear infinite;
}
.fd-loading-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Responsive — single-column stat grid on narrow screens ──────────── */
@media (max-width: 900px) {
  .fd-hero-carousel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-perf-header-right { align-items: flex-start; width: 100%; }
  .fd-chart-controls-bar { justify-content: flex-start; }
}
@media (max-width: 500px) {
  .fd-hero-carousel { grid-template-columns: 1fr; }
  .fd-kpi-row-secondary { flex-wrap: wrap; gap: var(--sp-3); }
}

/* ── fund-detail-modal.css ────────────────────────────────────────────── */
/* ============================================================================
   FUND DETAIL — Competitor Modal (design-system styling)

   Markup is rendered server-side at the bottom of page-fund-detail.php.
   Container IDs/classes preserved exactly; this file is a pure visual layer.

     .fd-modal-overlay (#fdAddCompetitorModal)  Full-page backdrop
       └ .fd-modal                              Centred dialog
         ├ .fd-modal-header                     Title + close
         ├ .fd-modal-body                       Search + filters + fund list
         │   ├ .fd-modal-search                 Input with leading icon
         │   ├ .fd-modal-synthetic-section      My Portfolios (optional)
         │   ├ .fd-modal-category-filter        Pill tabs
         │   └ .fd-modal-fund-list              Selectable fund rows
         └ .fd-modal-footer                     Cancel + Apply CTA

   Visual language:
   - Dialog floats with shadow-elevated, 16px radius, 1px border
   - Backdrop: rgba(10,10,11,0.7) + 8px blur
   - Animation: 0.32s cubic-bezier(.16,1,.3,1) scale + fade-in
   - Active state on rows: gold-15 background, gold border-left bar
   - Selected count badge: solid gold pill with obsidian numerals
   ============================================================================ */

/* ── Overlay (backdrop) ──────────────────────────────────────────────── */
.fd-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);

  /* Hidden by default — JS toggles .visible to open. */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease);
}
.fd-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
[data-theme="light"] .fd-modal-overlay {
  background: rgba(248, 248, 250, 0.6);
}

/* ── Modal dialog ────────────────────────────────────────────────────── */
.fd-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-elevated);
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Entrance animation: scale up + fade in. */
  transform: translateY(16px) scale(0.96);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.fd-modal-overlay.visible .fd-modal {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.fd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.fd-modal-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin: 0;
}
.fd-modal-close {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fd-modal-close:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}
.fd-modal-close svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* ── Body (scrolls if content exceeds modal height) ──────────────────── */
.fd-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Search input with leading icon */
.fd-modal-search {
  position: relative;
  display: flex;
  align-items: center;
}
.fd-modal-search > svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}
.fd-modal-search input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  transition: border-color var(--dur) var(--ease);
}
.fd-modal-search input:focus {
  border-color: var(--accent);
  outline: none;
}
.fd-modal-search input::placeholder { color: var(--text-muted); }

/* Synthetic ("My Portfolios") section */
.fd-modal-synthetic-section {
  background: var(--gold-08);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.fd-modal-synthetic-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.fd-modal-synthetic-header svg { color: var(--accent); }
.fd-modal-synthetic-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.fd-synthetic-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease);
}
.fd-synthetic-item:hover { border-color: var(--accent); }
.fd-synthetic-item.selected {
  background: var(--gold-15);
  border-color: var(--accent);
}

/* Category filter pill tabs */
.fd-modal-category-filter {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  padding-bottom: 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fd-modal-category-filter::-webkit-scrollbar { display: none; }
.fd-category-filter-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  color: var(--text-2);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.fd-category-filter-btn:hover:not(.active) {
  border-color: var(--accent);
  color: var(--accent);
}
.fd-category-filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ── Fund list (selectable rows) ─────────────────────────────────────── */
.fd-modal-fund-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

/* Each row — JS emits: [logo] [info name + meta] [perf] [check]
   Grid: 4 columns auto/auto-fill on the side elements, name+meta flexes. */
.fd-modal-fund-item,
.fd-modal-fund-row {
  display: grid;
  grid-template-columns: 32px 1fr auto 22px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fd-modal-fund-item:hover,
.fd-modal-fund-row:hover {
  border-color: var(--accent);
  border-left-color: var(--accent);
  background: var(--gold-08);
}
.fd-modal-fund-item.selected,
.fd-modal-fund-row.selected {
  background: var(--gold-15);
  border-color: var(--accent);
  border-left-color: var(--accent);
}

/* Selection check — circle by default, gold tick when selected. The JS
   swaps the SVG path between empty circle and check-in-circle, so we
   only style the wrapper + colour state. */
.fd-modal-fund-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: color var(--dur) var(--ease);
}
.fd-modal-fund-item:hover .fd-modal-fund-check { color: var(--text-2); }
.fd-modal-fund-item.selected .fd-modal-fund-check { color: var(--accent); }
.fd-modal-fund-check svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: none;
}

/* Fund name + ISIN block */
.fd-modal-fund-info,
.fd-modal-fund-item .info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fd-modal-fund-name,
.fd-modal-fund-item .name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-modal-fund-isin,
.fd-modal-fund-meta,
.fd-modal-fund-item .meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

/* 1Y return (right side) */
.fd-modal-fund-perf,
.fd-modal-fund-item .perf {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}
.fd-modal-fund-perf.pos { color: var(--pos); }
.fd-modal-fund-perf.neg { color: var(--neg); }

/* Fund logo (right of perf, optional small square) */
.fd-modal-fund-logo,
.fd-modal-fund-item .logo {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Empty / loading inside the modal list */
.fd-modal-fund-list:empty::before {
  content: 'Loading funds…';
  display: block;
  padding: var(--sp-5);
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Footer (Cancel + Apply with count badge) ────────────────────────── */
.fd-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.fd-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px 16px;
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border: 1px solid transparent;
}
.fd-modal-btn.secondary {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border);
}
.fd-modal-btn.secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fd-modal-btn.primary {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  color: var(--accent-ink);
  border-color: var(--gold);
  box-shadow: var(--shadow-cta-gold);
}
.fd-modal-btn.primary:hover {
  background: linear-gradient(180deg, #ecdfb5 0%, var(--gold-light) 50%, var(--gold) 100%);
  box-shadow: 0 6px 18px rgba(201, 169, 98, 0.4);
}
.fd-modal-btn:disabled,
.fd-modal-btn.primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Selected count badge inside the Apply button */
.fd-selected-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--accent-ink);
  color: var(--accent);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fd-selected-count[data-count="0"] {
  display: none;
}

/* ── Body scrollbar — keeps the rest of the page from jumping ────────── */
body.fb-modal-open {
  overflow: hidden;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .fd-modal-overlay { padding: 0; align-items: flex-end; }
  .fd-modal {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--r-card) var(--r-card) 0 0;
    border-bottom: none;
  }
  /* Slide-up entrance variant on small screens */
  .fd-modal-overlay.visible .fd-modal {
    animation: fb-sheet-up var(--dur-slow) var(--ease);
  }
  .fd-modal-fund-item,
  .fd-modal-fund-row {
    grid-template-columns: auto 1fr auto;
  }
  .fd-modal-fund-logo { display: none; }
}

/* ── Reduced-motion fallback ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fd-modal-overlay,
  .fd-modal { transition-duration: 0.01ms; }
  .fd-modal-overlay.visible .fd-modal { animation: none; }
}

/* ── fund-detail-radial-modal.css ─────────────────────────────────────── */
/* ============================================================================
   FUND DETAIL — Radial Wheel Competitor Modal

   Replaces the broken multi-row filter modal with the design-system's
   signature radial-wheel pattern. Drill-down narrows the 12k-fund universe
   one ring at a time:

     Level 0 — Quick Screens (Hidden Gems / Steady / etc.)
     Level 1 — Management Style (Active / Passive)
     Level 2 — Asset Class (Equity / Bonds / Multi-Asset / …)
     Level 3 — Geographic Region (UK / US / Europe / Asia / EM / Global / …)
     Level 4 — Final fund list (selectable rows + Apply)

   Per design system: spring-in animation 0.04s stagger, gold accent on
   selected slice, breadcrumb showing the trail of choices.
   ============================================================================ */

/* Modal fills the viewport top-to-bottom. The base .fd-modal cascade in
   fund-detail-modal.css sets max-height: calc(100vh - 80px) which was
   capping the height regardless of our overrides — we use absolute
   positioning here to guarantee the modal stretches edge-to-edge of the
   overlay padding. */
#fdAddCompetitorModal {
  padding: 16px !important;
  align-items: stretch !important;
  justify-content: center !important;
}
#fdAddCompetitorModal .fd-modal {
  position: absolute !important;
  top: 16px !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 32px) !important;
  max-width: 820px !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
}
#fdAddCompetitorModal .fd-modal-body {
  padding: var(--sp-4) var(--sp-5);
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
/* Wheel view: the wheel-wrap is the flex-growing child inside .fd-radial-
   modal — banner, search, header, breadcrumb, status all stay their natural
   sizes; the wheel takes whatever vertical space is left and centres
   itself. The list view (level 4) keeps its natural top-aligned scrolling. */
.fd-radial-wheel-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2) 0;
}
#fdAddCompetitorModal[data-stage="list"] .fd-radial-wheel-wrap {
  flex: 0 0 auto;
}

/* ── Container that replaces the modal body content ──────────────────── */
.fd-radial-modal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
  width: 100%;
  /* Fill the modal body — without this, content sits at the top and the
     body has empty space between it and the footer (the "chin"). */
  flex: 1 1 auto;
  min-height: 100%;
  /* Override the legacy modal body padding */
  padding: 0;
}

/* Current-fund context banner — sits above the wheel so the user always
   sees what fund they're benchmarking against. Logo, name, brand, badges. */
.fd-radial-current-fund {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: linear-gradient(180deg, var(--gold-08) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.fd-radial-current-fund .logo {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
}
.fd-radial-current-fund .info { min-width: 0; }
.fd-radial-current-fund .label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.fd-radial-current-fund .name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-radial-current-fund .badges {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-shrink: 0;
}
.fd-radial-current-fund .badge {
  display: inline-flex;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.fd-radial-current-fund .badge.gold  { background: var(--gold-15);             color: var(--accent); }
.fd-radial-current-fund .badge.green { background: rgba(74,222,128,0.15);     color: var(--pos); }
.fd-radial-current-fund .badge.blue  { background: rgba(96,165,250,0.15);     color: var(--fb-info); }
.fd-radial-current-fund .badge.purple{ background: rgba(167,139,250,0.15);    color: #a78bfa; }

/* Top-of-modal search bar (always visible, not just on final list) */
.fd-radial-search-bar {
  position: relative;
  display: flex;
  align-items: center;
}
.fd-radial-search-bar > svg {
  position: absolute;
  left: 12px;
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}
.fd-radial-search-bar input {
  width: 100%;
  padding: 9px 12px 9px 36px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 13px;
  transition: border-color var(--dur) var(--ease);
}
.fd-radial-search-bar input:focus {
  border-color: var(--accent);
  outline: none;
}
.fd-radial-search-bar input::placeholder { color: var(--text-muted); }
.fd-radial-search-bar .fd-radial-search-status {
  position: absolute;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}

/* Hide every legacy element from the old modal body so the wheel owns it. */
.fd-modal-overlay .fd-modal-synthetic-section,
.fd-modal-overlay .fd-modal-category-filter,
.fd-modal-overlay .fd-modal-search,
.fd-modal-overlay .fd-modal-fund-list:not(.fd-radial-funds) {
  display: none !important;
}

/* Title + selected match-count line */
.fd-radial-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
}
.fd-radial-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: var(--tracking-display);
  color: var(--text);
  margin: 0;
}
.fd-radial-subtitle {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Breadcrumb (trail of selected slices) ───────────────────────────── */
.fd-radial-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  min-height: 26px;
}
.fd-radial-crumb {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fd-radial-crumb:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.fd-radial-crumb.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.fd-radial-crumb-sep {
  color: var(--text-dim);
  font-size: 11px;
}

/* ── The wheel SVG ───────────────────────────────────────────────────── */
.fd-radial-wheel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--sp-2) 0;
}
.fd-radial-svg {
  /* Default 280px so the modal fits on ~720px-tall laptop viewports.
     Scales up to 340px on tall viewports for impact. */
  width: 280px;
  height: 280px;
  max-width: 100%;
  display: block;
  user-select: none;
  overflow: visible;
}
@media (min-height: 900px) {
  .fd-radial-svg { width: 340px; height: 340px; }
}
@media (max-width: 560px) {
  .fd-radial-svg { width: 260px; height: 260px; }
}

.fd-radial-slice {
  fill: var(--surface-2);
  stroke: var(--border);
  stroke-width: 1.5;
  cursor: pointer;
  transform-origin: center;
  transform-box: fill-box;
  transition: fill var(--dur) var(--ease),
              stroke var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.fd-radial-slice:hover {
  fill: var(--gold-08);
  stroke: var(--accent);
}
.fd-radial-slice.selected {
  fill: var(--accent);
  stroke: var(--accent);
}
.fd-radial-slice.disabled {
  pointer-events: none;
  opacity: 0.3;
}

/* Slice label group — centred at midpoint of the slice */
.fd-radial-slice-label {
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  fill: var(--text);
  transition: fill var(--dur) var(--ease);
}
.fd-radial-slice.selected + .fd-radial-slice-label,
.fd-radial-slice.selected ~ .fd-radial-slice-label,
g.selected .fd-radial-slice-label {
  fill: var(--accent-ink);
}
g.fd-radial-slice-group:hover .fd-radial-slice-label {
  fill: var(--accent);
}
g.fd-radial-slice-group.selected .fd-radial-slice-label {
  fill: var(--accent-ink);
}

.fd-radial-slice-count {
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-muted);
  letter-spacing: 0;
}
g.fd-radial-slice-group.selected .fd-radial-slice-count {
  fill: var(--accent-ink);
  opacity: 0.8;
}

/* Hub — center circle. Default: gold. When .can-back is set, dims +
   shows ← to indicate "click to step back a level". */
.fd-radial-hub-bg {
  fill: var(--accent);
  filter: drop-shadow(0 0 12px rgba(201, 169, 98, 0.3));
  transition: fill var(--dur) var(--ease);
}
.fd-radial-hub.can-back .fd-radial-hub-bg {
  fill: var(--surface-2);
  stroke: var(--accent);
  stroke-width: 1.5;
  cursor: pointer;
}
.fd-radial-hub.can-back:hover .fd-radial-hub-bg {
  fill: var(--gold-15);
}
.fd-radial-hub-icon {
  pointer-events: none;
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.fd-radial-hub:not(.can-back) .fd-radial-hub-icon { fill: var(--accent-ink); }
.fd-radial-hub.can-back .fd-radial-hub-icon { fill: var(--accent); }

/* Spring-in stagger for slices on level transition */
@keyframes fd-radial-slice-in {
  from {
    opacity: 0;
    transform: scale(0.7) rotate(-6deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}
.fd-radial-slice-group {
  animation: fd-radial-slice-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.fd-radial-slice-group:nth-child(1)  { animation-delay: 0.00s; }
.fd-radial-slice-group:nth-child(2)  { animation-delay: 0.04s; }
.fd-radial-slice-group:nth-child(3)  { animation-delay: 0.08s; }
.fd-radial-slice-group:nth-child(4)  { animation-delay: 0.12s; }
.fd-radial-slice-group:nth-child(5)  { animation-delay: 0.16s; }
.fd-radial-slice-group:nth-child(6)  { animation-delay: 0.20s; }
.fd-radial-slice-group:nth-child(7)  { animation-delay: 0.24s; }
.fd-radial-slice-group:nth-child(8)  { animation-delay: 0.28s; }

/* ── Match count + Reset link ─────────────────────────────────────── */
.fd-radial-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-2);
}
.fd-radial-match-count {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.fd-radial-match-count strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.fd-radial-reset {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 2px;
  transition: color var(--dur) var(--ease);
}
.fd-radial-reset:hover { color: var(--accent); }

/* Inline search at the bottom of the wheel — direct text-search fallback */
.fd-radial-search {
  position: relative;
  display: flex;
  align-items: center;
}
.fd-radial-search > svg {
  position: absolute;
  left: 12px;
  width: 14px;
  height: 14px;
  stroke: var(--text-muted);
  stroke-width: 2;
  fill: none;
  pointer-events: none;
}
.fd-radial-search input {
  width: 100%;
  padding: 8px 12px 8px 34px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 12px;
  transition: border-color var(--dur) var(--ease);
}
.fd-radial-search input:focus {
  border-color: var(--accent);
  outline: none;
}

/* ── Final-level fund list (visible at level 4) ───────────────────── */
.fd-radial-funds {
  display: none;
  flex-direction: column;
  gap: var(--sp-1);
  max-height: 400px;
  overflow-y: auto;
  padding-right: 4px;
}
.fd-radial-modal[data-level="4"] .fd-radial-funds { display: flex; }
.fd-radial-modal[data-level="4"] .fd-radial-wheel-wrap { display: none; }

.fd-radial-fund {
  display: grid;
  grid-template-columns: 28px 1fr auto 22px;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.fd-radial-fund:hover {
  border-color: var(--accent);
  background: var(--gold-08);
}
.fd-radial-fund.selected {
  background: var(--gold-15);
  border-color: var(--accent);
}
.fd-radial-fund-logo {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  color: var(--accent);
}
.fd-radial-fund-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fd-radial-fund-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fd-radial-fund-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.fd-radial-fund-perf {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fd-radial-fund-perf.pos { color: var(--pos); }
.fd-radial-fund-perf.neg { color: var(--neg); }
.fd-radial-fund-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all var(--dur) var(--ease);
}
.fd-radial-fund.selected .fd-radial-fund-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.fd-radial-fund-check svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 3;
  fill: none;
}

/* Empty state when filters yield no funds */
.fd-radial-empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
}
.fd-radial-empty strong {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

/* ── Selected count badge inside Apply button — fix the black circle ── */
.fd-selected-count {
  display: none;  /* default hidden */
}
.fd-selected-count.has-selection {
  display: inline-flex;
}

/* ════════════════════════════════════════════════════════════════════════
   RADIAL WHEEL SKELETON — port of design-system component-skeleton.html.
   This is the canonical loading state for ANY radial-wheel context, and
   supersedes whatever spinner was here previously. Hub pulses, 8 spokes
   arc in one by one with stagger, endpoint dots light up at full extension.
   ════════════════════════════════════════════════════════════════════════ */
.fd-radial-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-4);
}
.fd-radial-skeleton-svg {
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}
.fd-radial-skeleton-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 320px;
}
.fd-radial-skeleton-text .line {
  height: 11px;
  border-radius: 3px;
  background: var(--surface-2);
  position: relative;
  overflow: hidden;
}
.fd-radial-skeleton-text .line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(201, 169, 98, 0.10) 45%,
    rgba(255, 245, 216, 0.18) 50%,
    rgba(201, 169, 98, 0.10) 55%,
    transparent 100%
  );
  background-size: 240% 100%;
  animation: fb-slide 2s linear infinite;
}
.fd-radial-skeleton-text .line.long  { width: 84%; }
.fd-radial-skeleton-text .line.med   { width: 62%; }
.fd-radial-skeleton-text .line.short { width: 38%; }

/* Hub — solid gold pulse */
.fd-radial-skeleton-hub {
  fill: var(--gold);
  filter: drop-shadow(0 0 10px rgba(201, 169, 98, 0.7));
  animation: fd-radial-sk-hub-pulse 1.6s ease-in-out infinite;
}
@keyframes fd-radial-sk-hub-pulse {
  0%, 100% { r: 6; opacity: 0.85; }
  50%      { r: 8; opacity: 1; }
}

/* Spokes — stroke-dasharray draw from center outward, staggered */
.fd-radial-skeleton-spoke {
  fill: none;
  stroke: rgba(201, 169, 98, 0.55);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: fd-radial-sk-spoke-in 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes fd-radial-sk-spoke-in {
  0%, 8%   { stroke-dashoffset: 60; opacity: 0; }
  25%      { stroke-dashoffset: 0;  opacity: 1; }
  70%      { stroke-dashoffset: 0;  opacity: 1; }
  90%      { stroke-dashoffset: 0;  opacity: 0; }
  100%     { stroke-dashoffset: 60; opacity: 0; }
}

/* Endpoint dots — light up at full extension */
.fd-radial-skeleton-dot {
  fill: rgba(228, 212, 164, 0);
  animation: fd-radial-sk-dot-in 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes fd-radial-sk-dot-in {
  0%, 22% { fill: rgba(228, 212, 164, 0);    transform: scale(0.4); }
  35%     { fill: rgba(228, 212, 164, 1);    transform: scale(1); }
  72%     { fill: rgba(228, 212, 164, 0.85); }
  90%     { fill: rgba(228, 212, 164, 0);    transform: scale(0.4); }
}

/* Reduced-motion: collapse the loop to static gold hub + faded spokes. */
@media (prefers-reduced-motion: reduce) {
  .fd-radial-skeleton-hub,
  .fd-radial-skeleton-spoke,
  .fd-radial-skeleton-dot,
  .fd-radial-skeleton-text .line::after {
    animation: none !important;
  }
  .fd-radial-skeleton-spoke { stroke-dashoffset: 0; opacity: 0.35; }
  .fd-radial-skeleton-dot { fill: rgba(228, 212, 164, 0.6); transform: scale(1); }
}

/* ── Search-status text (results count inside the search bar) ───────── */
.fd-radial-search-bar input.has-results { padding-right: 110px; }

/* ============================================================================
   §9 LIGHT MODE OVERRIDES — same lift, scoped under fund-detail's --fd-* / --fc-*.
   ============================================================================ */
/* ── Light mode overrides ── */
[data-theme="light"] {
  /* Fund Finder */
  --ff-bg: #f5f5f7;
  --ff-card: #ffffff;
  --ff-card-hover: #f0f0f3;
  --ff-border: #e2e2e8;
  --ff-border-light: #d0d0d8;
  --ff-text: #3a3a44;
  --ff-text-muted: #6a6a74;
  --ff-text-dim: #9a9aa4;
  --ff-white: #1a1a1e;
  --ff-gold: #b8942e;
  --ff-gold-light: #d4b44a;
  --ff-green: #4bba5e;
  --ff-green-bright: #4bba5e;
  --ff-red: #dc2626;
  --ff-blue: #2563eb;
  --ff-purple: #7c3aed;
  
  /* Fund Detail */
  --fd-obsidian: #f5f5f7;
  --fd-charcoal: #ffffff;
  --fd-graphite: #f0f0f3;
  --fd-slate: #e2e2e8;
  --fd-pewter: #c8c8d0;
  --fd-silver: #6a6a74;
  --fd-platinum: #3a3a44;
  --fd-ivory: #1a1a1e;
  --fd-white: #000000;
  --fd-gold: #b8942e;
  --fd-gold-light: #d4b44a;
  --fd-gold-dark: #9a7a1e;
  --fd-success: #4bba5e;
  --fd-error: #dc2626;
  --fd-blue: #2563eb;
  --fd-purple: #7c3aed;
  --fd-pink: #db2777;
  --fd-orange: #ea580c;
  --fd-cyan: #0891b2;
  --fd-lime: #65a30d;
  
  /* Fund Comparison */
  --fc-obsidian: #f5f5f7;
  --fc-charcoal: #ffffff;
  --fc-graphite: #f0f0f3;
  --fc-slate: #e2e2e8;
  --fc-pewter: #c8c8d0;
  --fc-silver: #6a6a74;
  --fc-platinum: #3a3a44;
  --fc-ivory: #1a1a1e;
  --fc-white: #000000;
  --fc-gold: #b8942e;
  --fc-gold-light: #d4b44a;
  --fc-gold-dark: #9a7a1e;
  --fc-success: #4bba5e;
  --fc-error: #dc2626;
  --fc-blue: #2563eb;
  --fc-purple: #7c3aed;
  --fc-pink: #db2777;
  --fc-orange: #ea580c;
  --fc-cyan: #0891b2;
  --fc-lime: #65a30d;
  
  /* Country Detail (cd-) */
  --cd-obsidian: #f5f5f7;
  --cd-charcoal: #ffffff;
  --cd-graphite: #f0f0f3;
  --cd-slate: #e2e2e8;
  --cd-pewter: #c8c8d0;
  --cd-silver: #6a6a74;
  --cd-platinum: #3a3a44;
  --cd-ivory: #1a1a1e;
  --cd-white: #000000;
  --cd-gold: #b8942e;
  --cd-gold-light: #d4b44a;
  --cd-success: #4bba5e;
  --cd-error: #dc2626;
  --cd-purple: #7c3aed;
  --cd-blue: #2563eb;
  
  /* Sector Detail (sd-) */
  --sd-obsidian: #f5f5f7;
  --sd-charcoal: #ffffff;
  --sd-graphite: #f0f0f3;
  --sd-slate: #e2e2e8;
  --sd-pewter: #c8c8d0;
  --sd-silver: #6a6a74;
  --sd-platinum: #3a3a44;
  --sd-ivory: #1a1a1e;
  --sd-white: #000000;
  --sd-gold: #b8942e;
  --sd-gold-light: #d4b44a;
  --sd-success: #4bba5e;
  --sd-error: #dc2626;
  --sd-blue: #2563eb;
  
  /* User Account (fa-) */
  --fa-obsidian: #f5f5f7;
  --fa-charcoal: #ffffff;
  --fa-graphite: #f0f0f3;
  --fa-slate: #e2e2e8;
  --fa-pewter: #c8c8d0;
  --fa-silver: #6a6a74;
  --fa-platinum: #3a3a44;
  --fa-ivory: #1a1a1e;
  --fa-white: #000000;
  --fa-gold: #b8942e;
  --fa-gold-dark: #9a7a1e;
  --fa-success: #4bba5e;
  --fa-error: #dc2626;
  --fa-blue: #2563eb;
  --fa-purple: #7c3aed;
  --fa-pink: #db2777;
  --fa-cyan: #0891b2;
  
  /* Homepage & Pricing (fb-) — homepage uses slightly different vars */
  --fb-obsidian: #f5f5f7;
  --fb-charcoal: #ffffff;
  --fb-graphite: #f0f0f3;
  --fb-slate: #e2e2e8;
  --fb-zinc: #c8c8d0;
  --fb-silver: #6a6a74;
  --fb-platinum: #3a3a44;
  --fb-ivory: #1a1a1e;
  --fb-white: #000000;
  --fb-gold: #b8942e;
  --fb-gold-light: #d4b44a;
  --fb-gold-dark: #9a7a1e;
  --fb-gold-muted: rgba(184, 148, 46, 0.12);
  --fb-blue: #2563eb;
  --fb-emerald: #4bba5e;
  --fb-rose: #e11d48;
  --fb-violet: #7c3aed;
  --fb-amber: #d97706;
  --fb-success: #4bba5e;
  --fb-error: #dc2626;
  --fb-pewter: #c8c8d0;
  
  /* Build-a-Fund (color-) */
  --color-obsidian: #f5f5f7;
  --color-charcoal: #ffffff;
  --color-graphite: #f0f0f3;
  --color-slate: #e2e2e8;
  --color-pewter: #c8c8d0;
  --color-silver: #6a6a74;
  --color-platinum: #3a3a44;
  --color-ivory: #1a1a1e;
  --color-white: #000000;
  --color-gold: #b8942e;
  --color-gold-light: #d4b44a;
  --color-gold-dark: #9a7a1e;
  --color-success: #4bba5e;
  --color-error: #dc2626;
  --color-warning: #d97706;
  --color-blue: #2563eb;
  --color-purple: #7c3aed;
  --color-pink: #db2777;
  --color-orange: #ea580c;
  --color-cyan: #0891b2;
  --color-esg: #4bba5e;
  --heat-1: #2563eb;
  --heat-2: #0891b2;
}

/* ── Light mode: page background — flat neutral ivory per design contract.
   Was a cream-yellow gradient (#ede9de → #f0ede5) which made every surface
   read as monochrome yellow against gold accents. Now uses var(--bg) =
   #f8f8fa from tokens.css so cards (white) stand clearly against page bg. */
[data-theme="light"] .fd-page,
[data-theme="light"] .ff-page,
[data-theme="light"] .fc-page,
[data-theme="light"] .cd-page,
[data-theme="light"] .sd-page,
[data-theme="light"] .fa-page,
[data-theme="light"] .fb-pricing-page,
[data-theme="light"] .fb-page,
[data-theme="light"] .baf-page {
  background: var(--bg);
  color: var(--text-2);
}

/* Light mode: custom nav bars on sub-pages */
[data-theme="light"] .cd-nav,
[data-theme="light"] .sd-nav {
  background: rgba(255, 255, 255, 0.95);
  border-bottom-color: var(--cd-slate, #e2e2e8);
}
[data-theme="light"] .fc-header {
  background: rgba(255, 255, 255, 0.9);
}

/* Light mode: card surfaces — solid white per design contract.
   Was a cream-tinted glass (rgba(255,253,247,…)) with gold-tinted shadow/border
   which read as monochrome yellow on the cream page bg. Now uses --surface
   (#ffffff) and --border (neutral 8% black) so cards have clean separation
   from the ivory page background and accents land where intended. */
[data-theme="light"] .cd-card,
[data-theme="light"] .sd-card,
[data-theme="light"] .fa-sidebar-nav,
[data-theme="light"] .fa-section-card,
[data-theme="light"] .fb-plan-card,
[data-theme="light"] .baf-card,
[data-theme="light"] .baf-panel,
[data-theme="light"] .fd-card,
[data-theme="light"] .fd-alloc-row,
[data-theme="light"] .fd-news-item,
[data-theme="light"] .fd-news-modal-item,
[data-theme="light"] .fd-modal,
[data-theme="light"] .fd-chart-tooltip,
[data-theme="light"] .fund-card,
[data-theme="light"] .ff-sidebar-card,
[data-theme="light"] .fc-fund-card,
[data-theme="light"] .fc-chart-section,
[data-theme="light"] .fc-allocation-section,
[data-theme="light"] .fc-holdings-section,
[data-theme="light"] .fc-holdings-column,
[data-theme="light"] .fc-metrics-section {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-card);
  border-color: var(--border);
}

/* Light mode: inner panels (info rows, stat tiles, chips) — neutral surface-2.
   .fd-perf-stat intentionally excluded: perf stats render flat. */
[data-theme="light"] .fd-info-row,
[data-theme="light"] .fd-holding-row,
[data-theme="light"] .fd-watched-chip,
[data-theme="light"] .fd-modal-fund-item,
[data-theme="light"] .fund-stat,
[data-theme="light"] .fc-fund-stat,
[data-theme="light"] .fc-holding-item,
[data-theme="light"] .discover-card,
[data-theme="light"] .filter-chip {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="light"] .fd-info-row:hover,
[data-theme="light"] .fd-holding-row:hover,
[data-theme="light"] .fd-watched-chip:hover,
[data-theme="light"] .fd-modal-fund-item:hover,
[data-theme="light"] .fd-news-item:hover,
[data-theme="light"] .fund-card:hover,
[data-theme="light"] .discover-card:hover {
  background: var(--surface-2);
  box-shadow: var(--shadow-elevated);
}

/* Light mode: buttons and toggles */
[data-theme="light"] .fd-period-btn {
  border-color: rgba(0,0,0,0.08);
  color: var(--fd-silver);
}
[data-theme="light"] .fd-period-btn:hover:not(.active) {
  background: rgba(0,0,0,0.04);
}
[data-theme="light"] .fd-period-btn.active {
  background: var(--fd-gold);
  color: #fff;
  border-color: var(--fd-gold);
  box-shadow: 0 2px 8px rgba(184,148,46,0.3);
}
/* Light mode: icon toolbar buttons */
[data-theme="light"] .fd-toggle-btn,
[data-theme="light"] .fd-overlay-btn {
  background: rgba(226, 226, 232, 0.6);
  color: #6b6b78;
  border-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .fd-toggle-btn:hover,
[data-theme="light"] .fd-overlay-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: #3a3a44;
}
[data-theme="light"] .fd-toggle-btn.active {
  background: var(--fd-gold);
  color: #fff;
  border-color: var(--fd-gold);
}
[data-theme="light"] .fd-overlay-btn.active[data-pin-type="news"] {
  background: rgba(161, 131, 62, 0.1);
  color: var(--fd-gold);
  border-color: rgba(161, 131, 62, 0.25);
}
[data-theme="light"] .fd-overlay-btn.active[data-pin-type="macro"] {
  background: rgba(22, 163, 74, 0.1);
  color: #4bba5e;
  border-color: rgba(22, 163, 74, 0.25);
}
[data-theme="light"] .fd-overlay-btn-ai:hover {
  background: rgba(168, 85, 247, 0.06);
  border-color: rgba(168, 85, 247, 0.3);
}
[data-theme="light"] .fd-overlay-btn-ai.active {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.3);
}
[data-theme="light"] .fd-toolbar-divider {
  background: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] [data-tooltip]::after {
  background: #fff;
  color: #3a3a44;
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] [data-tooltip]::before {
  border-top-color: rgba(0, 0, 0, 0.1);
}
[data-theme="light"] .fd-news-tab {
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .fd-news-tab.active {
  background: var(--fd-gold);
  color: #fff;
  border-color: var(--fd-gold);
}

/* Light mode: Fund Finder card buttons */
[data-theme="light"] .fund-btn-compare {
  background: rgba(0,0,0,0.04) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: var(--ff-text) !important;
}
[data-theme="light"] .fund-btn-compare:hover {
  background: rgba(184,148,46,0.08) !important;
  border-color: var(--ff-gold) !important;
  color: var(--ff-gold) !important;
}
[data-theme="light"] .fund-btn-added {
  background: rgba(22,163,74,0.06) !important;
  border-color: var(--ff-green) !important;
  color: var(--ff-green) !important;
}
[data-theme="light"] .fund-btn-details {
  background: transparent !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: var(--ff-text-muted) !important;
}
[data-theme="light"] .fund-btn-details:hover {
  border-color: var(--ff-text) !important;
  color: var(--ff-text) !important;
}

/* Light mode: fund detail badge variants */
[data-theme="light"] .fd-meta-tag {
  background: rgba(0, 0, 0, 0.05);
  color: #4a4a58;
  border-color: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .fd-meta-strategy {
  background: rgba(100, 116, 139, 0.1);
  color: #475569;
  border-color: rgba(100, 116, 139, 0.15);
}
[data-theme="light"] .fd-meta-asset {
  background: rgba(161, 131, 60, 0.1);
  color: #92700a;
  border-color: rgba(161, 131, 60, 0.2);
}
[data-theme="light"] .fd-meta-region {
  background: rgba(37, 99, 235, 0.08);
  color: #2563eb;
  border-color: rgba(37, 99, 235, 0.15);
}
[data-theme="light"] .fd-meta-style {
  background: rgba(22, 163, 74, 0.08);
  color: #4bba5e;
  border-color: rgba(22, 163, 74, 0.15);
}
[data-theme="light"] .fd-meta-esg {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
  border-color: rgba(22, 163, 74, 0.2);
}
[data-theme="light"] .fd-meta-sfdr {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.2);
}

/* Light mode: performance stat values — use richer accent colors */
[data-theme="light"] .fund-stat-value.positive { color: var(--ff-green) !important; }
[data-theme="light"] .fund-stat-value.negative { color: var(--ff-red) !important; }
[data-theme="light"] .fund-stat-value.gold { color: var(--ff-gold) !important; }
[data-theme="light"] .fd-perf-value { color: var(--fd-success); }
[data-theme="light"] .fd-perf-value.negative { color: var(--fd-error); }
[data-theme="light"] .fc-fund-stat-value.positive { color: var(--fc-success); }
[data-theme="light"] .fc-fund-stat-value.negative { color: var(--fc-error); }

/* Light mode: Fund Finder stat backgrounds */
[data-theme="light"] .fund-stat {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.05);
}

/* Light mode: gold accent elements */
[data-theme="light"] .fd-fund-logo {
  box-shadow: 0 4px 16px rgba(184,148,46,0.2);
}
[data-theme="light"] .fd-add-fund-btn {
  box-shadow: 0 4px 16px rgba(184,148,46,0.25);
}
[data-theme="light"] .fd-action-btn {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .fd-action-btn:hover {
  background: rgba(0,0,0,0.08);
}
[data-theme="light"] .fd-action-btn.active {
  background: var(--fd-gold);
  border-color: var(--fd-gold);
}
[data-theme="light"] #fdWatchBtn svg {
  fill: rgba(0,0,0,0.5);
  stroke: none;
}
[data-theme="light"] #fdWatchBtn.active svg {
  fill: var(--fd-obsidian);
}

/* Light mode: allocation bar backgrounds */
[data-theme="light"] .sector-bar-container,
[data-theme="light"] .allocation-bar-container,
[data-theme="light"] .fd-alloc-bars {
  background: rgba(0,0,0,0.06);
}

/* Light mode: comparison bar gold button */
[data-theme="light"] .comparison-btn {
  background: var(--ff-gold);
  color: #fff;
  box-shadow: 0 2px 8px rgba(184,148,46,0.3);
}
[data-theme="light"] .comparison-btn:hover {
  background: var(--ff-gold-light);
}

/* Light mode: search input */
[data-theme="light"] .ff-search-input {
  background: rgba(255,255,255,0.7);
  border-color: rgba(0,0,0,0.08);
  color: var(--ff-white);
}
[data-theme="light"] .ff-search-input:focus {
  border-color: var(--ff-gold);
  box-shadow: 0 0 0 3px rgba(184,148,46,0.1);
}
[data-theme="light"] .ff-filter-btn {
  background: rgba(255,255,255,0.5);
  border-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .ff-filter-btn:hover {
  border-color: var(--ff-gold);
}

/* Light mode: sub-nav bar — solid white surface, neutral border */
[data-theme="light"] .ff-nav {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: var(--border);
}
[data-theme="light"] .ff-nav-title { color: #1a1a1d; }
[data-theme="light"] .ff-back {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
  color: #4a4a58;
}
[data-theme="light"] .ff-back:hover {
  background: rgba(255, 255, 255, 0.95);
  color: #1a1a1d;
}
[data-theme="light"] .ff-nav-search .ff-search-input {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
  color: #1a1a1d;
}
[data-theme="light"] .ff-btn-ghost {
  color: #4a4a58;
  border-color: rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .ff-btn-ghost:hover {
  color: var(--ff-gold);
  border-color: var(--ff-gold);
}
[data-theme="light"] .ff-sort-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%234a4a58' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
}
[data-theme="light"] .ff-nav-count {
  background: rgba(184, 148, 46, 0.08);
  border-color: rgba(184, 148, 46, 0.2);
  color: #8a6d1f;
}

/* Light mode: methodology description copy */
[data-theme="light"] .discover-desc {
  color: rgba(0, 0, 0, 0.55);
}

/* Light mode: discover cards (quick screens) */
[data-theme="light"] .discover-card.active {
  border-color: var(--ff-gold);
  background: linear-gradient(180deg, rgba(184,148,46,0.06) 0%, var(--surface) 100%);
}
[data-theme="light"] .discover-icon {
  background: rgba(184,148,46,0.10);
}
[data-theme="light"] .discover-icon.icon-green  { background: rgba(75,186,94,0.12); color: var(--ff-green-bright); }
[data-theme="light"] .discover-icon.icon-blue   { background: rgba(37,99,235,0.10);  color: var(--ff-blue); }
[data-theme="light"] .discover-icon.icon-purple { background: rgba(124,58,237,0.10); color: var(--ff-purple); }

/* Light mode: sort select */
[data-theme="light"] .ff-sort-select {
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.08);
  color: var(--ff-text);
}

/* Light mode: modals */
[data-theme="light"] .fd-modal-overlay {
  background: rgba(255,255,255,0.6);
}
[data-theme="light"] .fd-news-modal {
  background: rgba(255,255,255,0.5);
}
[data-theme="light"] .fd-news-modal-content {
  background: #fff;
  border-color: rgba(0,0,0,0.1);
  box-shadow: 0 24px 64px rgba(0,0,0,0.15);
}
[data-theme="light"] .fd-news-modal-header {
  border-bottom-color: rgba(0,0,0,0.08);
}
[data-theme="light"] .fd-news-modal-title {
  color: rgba(0,0,0,0.85);
}
[data-theme="light"] .fd-news-modal-date {
  color: rgba(0,0,0,0.45);
}
[data-theme="light"] .fd-news-modal-close {
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.5);
}
[data-theme="light"] .fd-news-modal-close:hover {
  background: rgba(0,0,0,0.1);
  color: rgba(0,0,0,0.8);
}
[data-theme="light"] .fd-ai-modal {
  background: rgba(255,255,255,0.6);
}
[data-theme="light"] .fd-ai-modal-content {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,245,255,0.95) 100%);
  border-color: rgba(168,85,247,0.15);
}

/* Light mode: chart area */
[data-theme="light"] .fd-line-chart,
[data-theme="light"] .fd-lw-chart-container {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
}

/* Light mode: inputs */
[data-theme="light"] .ff-search-input,
[data-theme="light"] .fd-nav-search,
[data-theme="light"] .fd-modal-search {
  background: var(--ff-card);
  border-color: var(--ff-border);
  color: var(--ff-white);
}

/* Light mode: AI gradient still works (keep as-is) */

/* Light mode: gold bar on chart stays readable */
[data-theme="light"] .fd-chart-line.fund {
  stroke: var(--fd-gold);
}

/* Light mode: scrollbar */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--fd-graphite);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: var(--fd-pewter);
}

/* Light mode: Fund Finder comparison bar */
[data-theme="light"] .comparison-bar {
  background: rgba(255, 255, 255, 0.95);
  border-top-color: #e2e2e8;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
[data-theme="light"] .comparison-fund {
  background: #f5f5f7;
  border-color: #e2e2e8;
}
[data-theme="light"] .comparison-name {
  color: #3a3a44;
}
[data-theme="light"] .comparison-remove:hover {
  color: #dc2626;
}
[data-theme="light"] .comparison-count {
  color: #6a6a74;
}
[data-theme="light"] .comparison-clear {
  border-color: #e2e2e8;
  color: #6a6a74;
}
[data-theme="light"] .comparison-clear:hover {
  border-color: #dc2626;
  color: #dc2626;
}

/* ============================================================================
   FUND DETAIL — 2026-05-02 CLEAN PROTOTYPE STYLING (.fdp-* namespace)
   Source-of-truth styling for the fund detail page. Wins against all
   legacy .fd-card / .fd-* rules earlier in this file via the new
   .fdp-* class names + !important on critical colour and layout.
   Matches Claude Design handoff Vd1n3RhocQlsP28lg-jRZw 1:1.
   ============================================================================ */

.fdp {
  font-family: var(--font-body, 'DM Sans', sans-serif) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  min-height: 100vh !important;
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: "tnum" 1 !important;
}
.fdp * { box-sizing: border-box; }

.fdp-shell {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 32px 36px !important;
}

/* Breadcrumb */
.fdp-crumb {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-bottom: 18px !important;
}
.fdp-crumb a {
  color: var(--text-muted) !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}
.fdp-crumb a:hover { color: var(--text) !important; }
.fdp-crumb-sep  { color: var(--text-dim) !important; }
.fdp-crumb-curr { color: var(--text) !important; }

/* Generic card primitive */
.fdp-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card) !important;
}

/* Eyebrow */
.fdp-eyebrow {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.fdp .mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  font-size: 11px !important;
}

/* ── HERO CARD ── */
.fdp-hero {
  padding: 28px !important;
  margin-bottom: 24px !important;
}
.fdp-hero-top {
  display: grid !important;
  grid-template-columns: 56px 1fr auto !important;
  gap: 20px !important;
  align-items: flex-start !important;
  padding-bottom: 24px !important;
  margin-bottom: 24px !important;
  border-bottom: 1px solid var(--border) !important;
}
.fdp-mono {
  width: 56px !important; height: 56px !important;
  border-radius: 8px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-display, 'Montserrat', sans-serif) !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  color: var(--accent) !important;
  letter-spacing: -0.01em !important;
  flex-shrink: 0 !important;
}
.fdp-id { min-width: 0 !important; }
.fdp-hero-eyebrow {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 8px !important;
}
.fdp-title {
  font-family: var(--font-display, 'Montserrat', sans-serif) !important;
  font-size: 30px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  margin: 0 0 14px !important;
  line-height: 1.15 !important;
}
.fdp-pills {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.fdp-pills .fund-badge,
.fdp-pills .pill,
.fdp-pills .fdp-pill-static {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 9999px !important;
  background: var(--surface-2) !important;
  border: 1px solid transparent !important;
  color: var(--text-2) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
.fdp-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}
.fdp-select {
  height: 40px !important;
  padding: 0 32px 0 14px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%238a8a94' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
}

/* Buttons */
.fdp-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.fdp-btn-sm {
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: 8px !important;
}
.fdp-btn-primary {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
}
.fdp-btn-primary:hover { background: var(--gold-light, #e4d4a4) !important; }
.fdp-btn-secondary {
  background: var(--surface-2) !important;
  color: var(--text) !important;
}
.fdp-btn-secondary:hover {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--accent) !important;
}

/* Hero stats grid (6 cols) */
.fdp-hero-stats {
  display: grid !important;
  grid-template-columns: repeat(6, 1fr) !important;
  gap: 24px !important;
}
.fdp-hstat {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.fdp-hstat-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.fdp-hstat-val {
  font-family: var(--font-display, 'Montserrat', sans-serif) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums !important;
}
.fdp-hstat-val.pos      { color: #4ade80 !important; }
.fdp-hstat-val.neg      { color: #f87171 !important; }
.fdp-hstat-val.gold     { color: var(--accent) !important; }
.fdp-hstat-val.muted    { color: var(--text-muted) !important; }
.fdp-hstat-sub {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

/* ── AI FORECAST CARD ── */
.fdp-ai {
  position: relative !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(201,169,98,0.10), transparent 60%),
    var(--surface) !important;
  border: 1px solid var(--accent-soft) !important;
  border-radius: 14px !important;
  padding: 22px 26px !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}
.fdp-ai::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 0 !important; bottom: 0 !important;
  width: 3px !important;
  background: linear-gradient(180deg, var(--accent), transparent) !important;
}
.fdp-ai-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}
.fdp-ai-head-l {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.fdp-ai-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  padding: 5px 12px !important;
  border-radius: 9999px !important;
}
.fdp-ai-pill-dot {
  width: 6px !important; height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  animation: fdp-pulse 2.4s ease infinite;
}
@keyframes fdp-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,98,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(201,169,98,0); }
}
.fdp-ai-badge {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  background: rgba(201, 169, 98, 0.14) !important;
  border: 1px solid rgba(201, 169, 98, 0.30) !important;
}
.fdp-ai-meta {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.fdp-ai-thesis {
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: var(--text-2) !important;
  margin: 0 0 16px !important;
}
.fdp-ai-tiles {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
.fdp-ai-tile {
  position: relative !important;
  padding: 14px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border-soft) !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.fdp-ai-tile-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 8px !important;
}
.fdp-ai-tile-lbl {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}
.fdp-ai-tile-pct {
  font-size: 18px !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}
.fdp-ai-tile-pct.pos  { color: #4ade80 !important; }
.fdp-ai-tile-pct.gold { color: var(--accent) !important; }
.fdp-ai-tile-pct.neg  { color: #f87171 !important; }
.fdp-ai-tile-bar {
  height: 4px !important;
  background: var(--bg) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
}
.fdp-ai-tile-fill { height: 100% !important; border-radius: 2px !important; }
.fdp-ai-tile-fill.pos  { background: #4ade80 !important; }
.fdp-ai-tile-fill.gold { background: var(--accent) !important; }
.fdp-ai-tile-fill.neg  { background: #f87171 !important; }
.fdp-ai-tile.is-locked .fdp-ai-tile-row,
.fdp-ai-tile.is-locked .fdp-ai-tile-bar {
  filter: blur(6px) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
  user-select: none !important;
}
.fdp-ai-lock {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  text-align: center !important;
  color: var(--accent) !important;
}
.fdp-ai-lock span {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.fdp-ai-foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--border-soft) !important;
}
.fdp-vote-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}
.fdp-vote {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transition: all 0.18s ease !important;
}
.fdp-vote.bull { color: #4ade80 !important; }
.fdp-vote.bull:hover, .fdp-vote.bull.is-active {
  background: rgba(74,222,128,0.10) !important;
  border-color: #4ade80 !important;
}
.fdp-vote.bear { color: #f87171 !important; }
.fdp-vote.bear:hover, .fdp-vote.bear.is-active {
  background: rgba(248,113,113,0.10) !important;
  border-color: #f87171 !important;
}
.fdp-vote-tally {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

/* ── BODY 2-COL ── */
.fdp-body {
  display: grid !important;
  grid-template-columns: 1fr 320px !important;
  gap: 24px !important;
  align-items: flex-start !important;
  margin-bottom: 24px !important;
}
.fdp-main {
  display: flex !important;
  flex-direction: column !important;
  gap: 24px !important;
  min-width: 0 !important;
}
.fdp-side {
  position: sticky !important;
  top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
}

/* ── CHART CARD ── */
.fdp-chart {
  padding: 0 !important;
  overflow: hidden !important;
}
.fdp-chart-tb1 {
  padding: 14px 24px 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.fdp-pills-row {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.fdp-pill {
  display: inline-flex !important;
  align-items: center !important;
  height: 28px !important;
  padding: 0 12px !important;
  background: var(--surface-2) !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.fdp-pill:hover {
  color: var(--text) !important;
  background: var(--surface) !important;
}
.fdp-pill.is-active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.fdp-chart-tb2 {
  padding: 12px 24px 14px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  border-bottom: 1px solid var(--border-soft) !important;
}
.fdp-tb-l, .fdp-tb-r {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
}
.fdp-seg {
  display: inline-flex !important;
  background: var(--surface-2) !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
}
.fdp-seg-btn {
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.fdp-seg-btn:hover { color: var(--text) !important; }
.fdp-seg-btn.is-active, .fdp-seg-btn.active {
  background: var(--surface) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}
.fdp-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: inherit !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  padding: 6px 11px !important;
  background: var(--surface-2) !important;
  border: 1px solid transparent !important;
  border-radius: 9999px !important;
  color: var(--text-2) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.fdp-toggle:hover {
  color: var(--text) !important;
  background: var(--surface) !important;
}
.fdp-toggle-dot {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1.5px solid var(--text-muted) !important;
  transition: all 0.18s ease !important;
}
.fdp-toggle.is-active {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.fdp-toggle.is-active .fdp-toggle-dot {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
}
.fdp-tb-divider {
  width: 1px !important;
  height: 20px !important;
  background: var(--border) !important;
  margin: 0 4px !important;
}
.fdp-chart-area {
  padding: 24px !important;
  position: relative !important;
}
.fdp .fd-lw-chart-container,
.fdp #fdLWChart {
  width: 100% !important;
  min-height: 360px !important;
}
.fdp-chart-foot {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 24px 20px !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
}
.fdp-chart-legend {
  display: flex !important;
  gap: 18px !important;
  align-items: center !important;
}
.fdp-legend-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.fdp-legend-item.muted { color: var(--text-muted) !important; }
.fdp-legend-line {
  display: inline-block !important;
  width: 14px !important; height: 2px !important;
  background: var(--accent) !important;
  border-radius: 1px !important;
}
.fdp-legend-line.dashed {
  background: transparent !important;
  border-top: 1.5px dashed var(--text-muted) !important;
  height: 0 !important;
}
.fdp-chart-axis {
  color: var(--text-muted) !important;
  font-size: 11.5px !important;
}

/* ── PORTFOLIO BREAKDOWN ── */
.fdp-breakdown { padding: 0 !important; }
.fdp-breakdown-head {
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--border-soft) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}
.fdp-breakdown-grid {
  padding: 18px 24px !important;
}
.fdp-breakdown-grid .fd-alloc-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}
.fdp-breakdown-grid .fd-alloc-row {
  padding: 14px 16px !important;
  background: var(--surface-2) !important;
  border-radius: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
  border: 0 !important;
}
.fdp-breakdown-grid .fd-alloc-row:hover { background: var(--surface) !important; }
.fdp-breakdown-grid .fd-alloc-row-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
}
.fdp-breakdown-grid .fd-alloc-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}
.fdp-breakdown-grid .fd-alloc-link-icon {
  opacity: 0.4;
  color: var(--text-muted);
}
.fdp-breakdown-grid .fd-alloc-row:hover .fd-alloc-link-icon {
  opacity: 0.8;
  color: var(--accent);
}
.fdp-breakdown-grid .fd-alloc-fund {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
  font-variant-numeric: tabular-nums !important;
}
.fdp-breakdown-grid .fd-alloc-bars {
  height: 8px !important;
  background: var(--surface) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}
.fdp-breakdown-grid .fd-alloc-bar {
  height: 100% !important;
  border-radius: 4px !important;
  background: var(--accent) !important;
}
.fdp-breakdown-grid .fd-alloc-bar.fund  { background: var(--accent) !important; }
.fdp-breakdown-grid .fd-alloc-bar.bench { background: var(--text-muted) !important; opacity: 0.5; }

/* ── RELATED SCREENS ── */
.fdp-related-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}
.fdp-related-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  margin-top: 4px !important;
}
.fdp-related-link {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--accent) !important;
  text-decoration: none !important;
}
.fdp-related-link:hover { text-decoration: underline !important; }
.fdp-related-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 12px !important;
}
.fdp-related-card {
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 16px 16px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-card) !important;
  text-align: left !important;
  text-decoration: none !important;
  color: var(--text) !important;
  transition: all 0.18s ease !important;
}
.fdp-related-card:hover {
  background: var(--surface-2) !important;
  transform: translateY(-2px) !important;
  border-color: var(--accent-soft) !important;
  text-decoration: none !important;
}
.fdp-related-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 8px !important;
  background: rgba(201, 169, 98, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  color: var(--accent) !important;
}
.fdp-related-icon svg {
  width: 18px !important;
  height: 18px !important;
}
.fdp-related-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: -0.005em !important;
  margin-bottom: 6px !important;
}
.fdp-related-desc {
  font-size: 11px !important;
  line-height: 1.45 !important;
  color: var(--text-muted) !important;
  margin-bottom: 14px !important;
  flex: 1 !important;
}
.fdp-related-count {
  padding-top: 10px !important;
  border-top: 1px solid var(--border-soft) !important;
  font-family: var(--font-display, 'Montserrat', sans-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--accent) !important;
  text-align: center !important;
}

/* ── SIDEBAR: FUND INFORMATION ── */
.fdp-info {
  padding: 22px 24px !important;
}
.fdp-info > .fdp-eyebrow {
  display: block !important;
  margin-bottom: 18px !important;
}
.fdp-info-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
.fdp-info-list .fd-info-row {
  display: grid !important;
  grid-template-columns: 130px 1fr !important;
  gap: 14px !important;
  align-items: baseline !important;
  font-size: 12px !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.fdp-info-list .fd-info-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}
.fdp-info-list .fd-info-value {
  font-size: 12.5px !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  text-align: right !important;
  line-height: 1.4 !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}
.fdp-info-list a.fd-info-value,
.fdp-info-list a.fd-info-value.clickable {
  color: var(--accent) !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 4px !important;
  font-weight: 500 !important;
}
.fdp-info-list a.fd-info-value:hover { text-decoration: underline !important; }
.fdp-info-list a.fd-info-value svg {
  width: 12px !important; height: 12px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  opacity: 0.6 !important;
}
.fdp-info-list .fd-info-value.highlight { color: var(--accent) !important; font-weight: 600 !important; }

/* ── SIDEBAR: TOP HOLDINGS ── */
.fdp-holdings {
  padding: 22px 24px !important;
}
.fdp-holdings-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 6px !important;
}
.fdp-holdings-cnt {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
}
.fdp-holdings-sub {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  margin-bottom: 16px !important;
}
.fdp-holdings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 18px !important;
}
.fdp-holdings-list .fd-holding-row {
  display: grid !important;
  grid-template-columns: 18px 1fr 44px !important;
  gap: 10px !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}
.fdp-holdings-list .fd-holding-rank {
  font-size: 10px !important;
  color: var(--text-muted) !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  text-align: right !important;
}
.fdp-holdings-list .fd-holding-name-wrap {
  min-width: 0 !important;
}
.fdp-holdings-list .fd-holding-name {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.fdp-holdings-list .fd-holding-bar {
  height: 4px !important;
  background: var(--surface-2) !important;
  border-radius: 2px !important;
  overflow: hidden !important;
  margin-top: 5px !important;
}
.fdp-holdings-list .fd-holding-bar-fill {
  height: 100% !important;
  background: var(--accent) !important;
}
.fdp-holdings-list .fd-holding-pct {
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: right !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  color: var(--text) !important;
}
.fdp-holdings-cta { width: 100% !important; }

/* Watched (compare with watchlist) */
.fdp-watched {
  padding: 18px 22px !important;
}
.fdp-watched-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin-bottom: 12px !important;
}
.fdp-watched-cnt {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--accent) !important;
}
.fdp-watched-empty {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  padding: 12px 0 !important;
}
.fdp-watched-empty a {
  color: var(--accent) !important;
  text-decoration: none !important;
}

/* ── NEWS TIMELINE ── */
.fdp-news {
  padding-top: 36px !important;
  border-top: 1px solid var(--border-soft) !important;
  margin-top: 12px !important;
}
.fdp-news-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 24px !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
.fdp-news-title {
  font-family: var(--font-display, 'Montserrat', sans-serif) !important;
  font-size: 28px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin: 6px 0 0 !important;
  color: var(--text) !important;
}
.fdp-news-tabs {
  display: flex !important;
  gap: 8px !important;
}
.fdp-news-tab {
  padding: 8px 14px !important;
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 9999px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-2) !important;
  cursor: pointer !important;
  transition: all 0.18s ease !important;
}
.fdp-news-tab:hover { color: var(--text) !important; }
.fdp-news-tab.is-active, .fdp-news-tab.active {
  background: var(--accent-soft) !important;
  border-color: transparent !important;
  color: var(--accent) !important;
}
.fdp-news-content {
  font-size: 13px !important;
  color: var(--text-2) !important;
}
.fdp .fd-news-loading {
  padding: 24px !important;
  text-align: center !important;
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

/* ── LIGHT MODE ── */
[data-theme="light"] .fdp { background: var(--bg) !important; color: var(--text-2) !important; }
[data-theme="light"] .fdp-mono { background: var(--surface-2) !important; border-color: var(--border) !important; }
[data-theme="light"] .fdp-hstat-val.pos      { color: #16a34a !important; }
[data-theme="light"] .fdp-hstat-val.neg      { color: #dc2626 !important; }
[data-theme="light"] .fdp-hstat-val.gold     { color: #b8942e !important; }
[data-theme="light"] .fdp-hstat-val.muted    { color: var(--text-muted) !important; }
[data-theme="light"] .fdp-vote.bull          { color: #16a34a !important; }
[data-theme="light"] .fdp-vote.bear          { color: #dc2626 !important; }
[data-theme="light"] .fdp-ai-tile-pct.pos    { color: #16a34a !important; }
[data-theme="light"] .fdp-ai-tile-pct.neg    { color: #dc2626 !important; }
[data-theme="light"] .fdp-ai-tile-fill.pos   { background: #16a34a !important; }
[data-theme="light"] .fdp-ai-tile-fill.neg   { background: #dc2626 !important; }
[data-theme="light"] .fdp-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%234a4a58' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") !important;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .fdp-hero-stats { grid-template-columns: repeat(3, 1fr) !important; gap: 18px !important; }
  .fdp-related-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .fdp-body { grid-template-columns: 1fr !important; }
  .fdp-side { position: static !important; }
}
@media (max-width: 640px) {
  .fdp-shell { padding: 20px 16px !important; }
  .fdp-hero { padding: 22px !important; }
  .fdp-hero-top { grid-template-columns: 56px 1fr !important; }
  .fdp-actions { grid-column: 1 / -1 !important; }
  .fdp-hero-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; }
  .fdp-related-grid { grid-template-columns: 1fr 1fr !important; }
  .fdp-title { font-size: 24px !important; }
  .fdp-ai-tiles { grid-template-columns: 1fr !important; }
}